#52 feat: 문제 관리 UI 구현 및 API 연동

src/App.tsx

@@ -13,6 +13,7 @@ import KakaoCallbackPage from '@/pages/common/KakaoCallbackPage';
 import PrivateRoute from '@/widgets/private-route/ui/PrivateRoute';
 import {useSyncUserRole} from '@/features/auth/sync-user-role/model/useSyncUserRole';
 import UnitEditorPage from '@/pages/unit-editor/UnitEditorPage';
+import AssignmentManagePage from '@/pages/manage-assignment/AssignmentManagePage';
 
 const AppRoutes = () => {
   useSyncUserRole();
@@ -37,7 +38,10 @@ const AppRoutes = () => {
         <Route element={<PrivateRoute allowedRoles={['admin']} />}>
           <Route path='admin'>
             <Route index element={<Dashboard />} />
-            {/* <Route path='assignments' element={<AssignmentsPage />} /> */}
+            <Route
+              path='assignments/manage'
+              element={<AssignmentManagePage />}
+            />
             <Route
               path='assignments/create'
               element={<AssignmentCreatePage />}

src/entities/assignment/api/assignmentApi.ts

@@ -1,8 +1,53 @@
-import type {DashboardScheduleListResponse} from '@/entities/course/model/types';
+import type {
+  AssignmentSelectResponse,
+  DashboardScheduleListResponse,
+} from '@/entities/course/model/types';
 import {privateAxios} from '@/shared/api/axiosInstance';
+import type {ApiResponse} from '@/shared/model';
+import type {AssignmentsResponse} from '../model/types';
 
+// 과제 일정 조회 API
 export const getAssignmentSchedules =
   async (): Promise<DashboardScheduleListResponse> => {
     const response = await privateAxios.get('/assignments/schedule');
     return response.data;
   };
+
+// 전체 과제 목록 조회 API
+export const getAllAssignments = async (): Promise<
+  ApiResponse<AssignmentsResponse>
+> => {
+  const response = await privateAxios.get<
+    ApiResponse<{
+      count: number;
+      assignments: {assignmentId: number; title: string}[];
+    }>
+  >('/assignments/my');
+  const raw = response.data;
+  return {
+    ...raw,
+    response: {
+      count: raw.response.count,
+      assignments: raw.response.assignments.map(({assignmentId, title}) => ({
+        id: assignmentId,
+        title,
+      })),
+    },
+  };
+};
+
+// 강의별 과제 목록 조회 API
+export const getAssignmentsByCourse = async (
+  courseId: number
+): Promise<AssignmentSelectResponse> => {
+  const response = await privateAxios.get(`/courses/${courseId}/assignments`);
+  return response.data;
+};
+
+// 과제 삭제 API
+export const deleteAssignment = async (
+  assignmentId: number
+): Promise<ApiResponse<string>> => {
+  const response = await privateAxios.delete(`/assignments/${assignmentId}`);
+  return response.data;
+};

src/entities/assignment/api/assignmentMutations.ts

@@ -0,0 +1,8 @@
+import {deleteAssignment} from './assignmentApi';
+
+export const assignmentMutations = {
+  deleteAssignment: {
+    mutationKey: ['deleteAssignment'],
+    mutationFn: (assignmentId: number) => deleteAssignment(assignmentId),
+  },
+};

src/entities/assignment/api/assignmentQueries.ts

@@ -0,0 +1,37 @@
+import {queryOptions} from '@tanstack/react-query';
+import {
+  getAllAssignments,
+  getAssignmentsByCourse,
+  getAssignmentSchedules,
+} from './assignmentApi';
+
+export const assignmentQueries = {
+  // 과제 일정 조회 쿼리 옵션
+  getAssignmentSchedules: () =>
+    queryOptions({
+      queryKey: ['schedules'],
+      queryFn: getAssignmentSchedules,
+      select: (data) => ({
+        scheduleCount: data.response.count,
+        schedules: data.response.schedule,
+      }),
+    }),
+
+  // 전체 과제 목록 조회 쿼리 옵션
+  getAllAssignments: () =>
+    queryOptions({
+      queryKey: ['assignments'],
+      queryFn: getAllAssignments,
+      select: (data) => data.response.assignments,
+    }),
+
+  // 강의별 과제 목록 조회 쿼리 옵션
+  getAssignmentsByCourse: (courseId: number) =>
+    queryOptions({
+      queryKey: ['courses', courseId, 'assignments'],
+      queryFn: () => getAssignmentsByCourse(courseId),
+      enabled: !!courseId,
+      select: (data) =>
+        data.response.courses.flatMap((course) => course.assignments),
+    }),
+};

src/entities/assignment/model/types.ts

@@ -8,3 +8,8 @@ export interface Assignment {
   title: string;
   submittedStatus?: SubmissionStatus;
 }
+
+export interface AssignmentsResponse {
+  count: number;
+  assignments: Assignment[];
+}

src/entities/course/api/courseApi.ts

@@ -2,11 +2,13 @@ import type {ApiResponse} from '@/shared/model/common';
 import type {DashboardCourseListResponse} from '@/entities/course/model/types';
 import {privateAxios} from '@/shared/api/axiosInstance';
 
+// 전체 강의 목록 조회 API
 export const getAllCourses = async (): Promise<DashboardCourseListResponse> => {
   const response = await privateAxios.get('/courses/my');
   return response.data;
 };
 
+// 강의 삭제 API
 export const deleteCourse = async (
   courseId: number
 ): Promise<ApiResponse<string>> => {

src/entities/course/api/courseMutations.ts

@@ -0,0 +1,9 @@
+import {deleteCourse} from './courseApi';
+
+export const courseMutations = {
+  // 강의 삭제 뮤테이션 옵션
+  deleteCourse: {
+    mutationKey: ['deleteCourse'],
+    mutationFn: (courseId: number) => deleteCourse(courseId),
+  },
+};

src/entities/course/api/courseQueries.ts

@@ -0,0 +1,15 @@
+import {getAllCourses} from './courseApi';
+import {queryOptions} from '@tanstack/react-query';
+
+export const courseQueries = {
+  // 전체 강의 조회 쿼리 옵션
+  getAllCourses: () =>
+    queryOptions({
+      queryKey: ['courses'],
+      queryFn: getAllCourses,
+      select: (data) => ({
+        courseCount: data.response.count,
+        courses: data.response.courses,
+      }),
+    }),
+};

src/entities/unit/api/unitApi.ts

@@ -44,3 +44,14 @@ export const updateUnit = async (
   const response = await privateAxios.put(`/units/${unitId}`, unit);
   return response.data;
 };
+
+// 단원에 등록된 과제 삭제
+export const deleteAssignmentFromUnit = async (
+  unitId: number,
+  assignmentId: number
+): Promise<ApiResponse<string>> => {
+  const response = await privateAxios.delete(
+    `/units/${unitId}/assignments/${assignmentId}`
+  );
+  return response.data;
+};

src/entities/unit/api/unitMutations.ts

@@ -5,8 +5,13 @@ export const unitMutations = {
   // 단원 추가 뮤테이션 옵션
   createUnit: {
     mutationKey: ['createUnit'],
-    mutationFn: ({courseId, unit}: {courseId: number; unit: TUnitFormSchema}) =>
-      createUnit(courseId, unit),
+    mutationFn: ({
+      courseId,
+      unitForm,
+    }: {
+      courseId: number;
+      unitForm: TUnitFormSchema;
+    }) => createUnit(courseId, unitForm),
   },
 
   // 단원 수정 뮤테이션 옵션

src/entities/unit/api/unitQueries.ts

@@ -7,6 +7,11 @@ export const unitQueries = {
     queryOptions({
       queryKey: ['units', courseId],
       queryFn: () => getAllUnitsByCourseId(courseId),
+      select: (data) => ({
+        unitList: data.response.units,
+        unitCount: data.response.count,
+        firstUnitId: data.response.units[0]?.id ?? null,
+      }),
     }),
 
   // 단일 단원 조회 쿼리 옵션
@@ -15,5 +20,8 @@ export const unitQueries = {
       queryKey: ['units', 'detail', unitId],
       queryFn: () => getUnitById(unitId),
       enabled: !!unitId,
+      select: (data) => {
+        return data.response;
+      },
     }),
 };

src/entities/unit/model/types.ts

@@ -10,7 +10,7 @@ export const unitFormSchema = z
   })
   .refine((data) => data.releaseDate <= data.dueDate, {
     message: '날짜 범위가 올바르지 않습니다.',
-    path: ['dueDate'],
+    path: ['releaseDate'],
   });
 
 // 단원 생성/수정 폼 타입

src/entities/unit/model/useUnitStore.ts

@@ -0,0 +1,51 @@
+import type {Assignment} from '@/entities/assignment/model/types';
+import {create} from 'zustand';
+import {createJSONStorage, persist} from 'zustand/middleware';
+
+interface UnitState {
+  title: string;
+  releaseDate: string;
+  dueDate: string;
+  assignments: Assignment[];
+  storeFormData: (title: string, releaseDate: string, dueDate: string) => void;
+  resetStore: () => void;
+  setAssignments: (assignments: Assignment[]) => void;
+}
+
+export const useUnitStore = create<UnitState>()(
+  persist(
+    (set) => ({
+      title: '',
+      releaseDate: '',
+      dueDate: '',
+      assignments: [],
+
+      // 단원 폼 임시 저장
+      storeFormData: (title, releaseDate, dueDate) =>
+        set({
+          title: title,
+          releaseDate: releaseDate,
+          dueDate: dueDate,
+        }),
+
+      // 선택된 과제 ID 저장
+      setAssignments: (assignments) => set({assignments}),
+
+      // 단원 폼 초기화
+      resetStore: () =>
+        set({title: '', releaseDate: '', dueDate: '', assignments: []}),
+    }),
+    {
+      name: 'unit-session-storage',
+      storage: createJSONStorage(() => sessionStorage),
+      partialize: (state) => ({
+        title: state.title,
+        releaseDate: state.releaseDate,
+        dueDate: state.dueDate,
+        assignments: state.assignments,
+      }),
+    }
+  )
+);
+
+export default useUnitStore;

src/features/assignment/filter-assignment/lib/useAssignmentList.ts

@@ -0,0 +1,22 @@
+import {useQuery} from '@tanstack/react-query';
+import {assignmentQueries} from '@/entities/assignment/api/assignmentQueries';
+import type {Assignment} from '@/entities/assignment/model/types';
+
+// 중복 제거
+const unique = (list: Assignment[]) =>
+  Array.from(new Map(list.map((a) => [a.id, a])).values());
+
+export const useAssignmentList = (
+  selectedCourseId: number | null
+): Assignment[] => {
+  const {data: allAssignments} = useQuery(
+    assignmentQueries.getAllAssignments()
+  );
+  const {data: assignments} = useQuery(
+    assignmentQueries.getAssignmentsByCourse(selectedCourseId ?? 0)
+  );
+
+  return unique(
+    selectedCourseId ? (assignments ?? []) : (allAssignments ?? [])
+  );
+};