#52 feat: 문제 선택 페이지 구현 및 과제 API 연동

src/entities/assignment/api/assignmentApi.ts

@@ -1,8 +1,55 @@
-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`);
+
+  console.log('getAssignmentsByCourse API 응답:', response.data); // 응답 데이터 로깅
+  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/assignmentQueries.ts

@@ -0,0 +1,30 @@
+import {queryOptions} from '@tanstack/react-query';
+import {
+  getAllAssignments,
+  getAssignmentsByCourse,
+  getAssignmentSchedules,
+} from './assignmentApi';
+
+export const assignmentQueries = {
+  // 과제 일정 조회 쿼리 옵션
+  getAssignmentSchedules: () =>
+    queryOptions({
+      queryKey: ['schedules'],
+      queryFn: getAssignmentSchedules,
+    }),
+
+  // 전체 과제 목록 조회 쿼리 옵션
+  getAllAssignments: () =>
+    queryOptions({
+      queryKey: ['assignments'],
+      queryFn: getAllAssignments,
+    }),
+
+  // 강의별 과제 목록 조회 쿼리 옵션
+  getAssignmentsByCourse: (courseId: number) =>
+    queryOptions({
+      queryKey: ['courses', courseId, 'assignments'],
+      queryFn: () => getAssignmentsByCourse(courseId),
+      enabled: !!courseId, // courseId가 있을 때만 쿼리 실행
+    }),
+};

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,11 @@
+import {getAllCourses} from './courseApi';
+import {queryOptions} from '@tanstack/react-query';
+
+export const courseQueries = {
+  // 전체 강의 조회 쿼리 옵션
+  getAllCourses: () =>
+    queryOptions({
+      queryKey: ['courses'],
+      queryFn: getAllCourses,
+    }),
+};

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/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/pages/dashboard/Dashboard.tsx

@@ -5,35 +5,38 @@ import AddIcon from '@/assets/svg/addIcon.svg?react';
 import ScheduleList from './ui/ScheduleList';
 import {Link} from 'react-router-dom';
 import {useUserStore} from '@/entities/auth/model/useUserStore';
-import courseQueryOptions from '@/entities/course/api/courseQueryOptions';
 import {
   useMutation,
   useQueryClient,
   useSuspenseQueries,
 } from '@tanstack/react-query';
-import assignmentQueryOptions from '@/entities/assignment/api/assignmentQueryOptions';
-import {deleteCourse} from '@/entities/course';
 import {EmptyState} from '@/shared/ui/EmptyState';
+import {courseQueries} from '@/entities/course/api/courseQueries';
+import {courseMutations} from '@/entities/course/api/courseMutations';
+import {assignmentQueries} from '@/entities/assignment/api/assignmentQueries';
 
 const Dashboard = () => {
   const userType = useUserStore((state) => state.userType);
   const queryClient = useQueryClient();
 
   // 강의 및 스케쥴 데이터 패칭
   const [{data: courses}, {data: schedules}] = useSuspenseQueries({
-    queries: [courseQueryOptions(), assignmentQueryOptions()],
+    queries: [
+      courseQueries.getAllCourses(),
+      assignmentQueries.getAssignmentSchedules(),
+    ],
   });
 
-  // 강의 삭제 뮤테이션
+  // 강의 삭제
   const {mutate} = useMutation({
-    mutationFn: (courseId: number) => deleteCourse(courseId),
+    ...courseMutations.deleteCourse,
     onSuccess: () => {
       // 강의 목록 및 스케쥴 목록 갱신
       queryClient.invalidateQueries({
-        queryKey: courseQueryOptions().queryKey,
+        queryKey: courseQueries.getAllCourses().queryKey,
       });
       queryClient.invalidateQueries({
-        queryKey: assignmentQueryOptions().queryKey,
+        queryKey: assignmentQueries.getAssignmentSchedules().queryKey,
       });
       alert('강의가 성공적으로 삭제되었습니다.');
     },

src/pages/select-assignment/AssignmentSelectPage.tsx

@@ -1,35 +1,68 @@
 import AssignmentListContainer from './ui/AssignmentListContainer';
 import {useState} from 'react';
-import {
-  response,
-  courseOptionsResponse,
-} from '@/shared/mocks/assignmentSelectResponse';
 import {useCourseFilter} from '@/features/course/filter-course/lib/useCourseFilter';
 import {AssignmentPageLayout} from '@/widgets/assignment-page-layout';
 import ListRow from '@/shared/ui/list-row/ListRow';
+import {useQuery} from '@tanstack/react-query';
+import {courseQueries} from '@/entities/course/api/courseQueries';
+import {assignmentQueries} from '@/entities/assignment/api/assignmentQueries';
+import useUnitStore from '@/entities/unit/model/useUnitStore';
+import {useLocation, useNavigate} from 'react-router-dom';
+import type {Assignment} from '@/entities/assignment/model/types';
 
 const AssignmentSelectPage = () => {
-  const {courses} = courseOptionsResponse.response; // /courses/my API 응답 모킹
-  const [selectedAssignments, setSelectedAssignments] = useState<number[]>([]); // 선택된 문제 ID 목록
-
-  const {courseOptions, handleCourseSelect} = useCourseFilter(courses);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const {data: courseList} = useQuery(courseQueries.getAllCourses());
+  const {setAssignments, assignments: currentSelectedAssignments} =
+    useUnitStore();
+  const [selectedAssignments, setSelectedAssignments] = useState<Assignment[]>(
+    currentSelectedAssignments ?? []
+  );
+  const {courseOptions, handleCourseSelect, selectedCourseId} = useCourseFilter(
+    courseList?.response.courses ?? []
+  );
+  const {data: allAssignments} = useQuery(
+    assignmentQueries.getAllAssignments()
+  );
+  const {data: assignments} = useQuery(
+    assignmentQueries.getAssignmentsByCourse(selectedCourseId ?? 0)
+  );
 
-  // 문제 목록 /courses/{courseId}/assignments API 응답 모킹
-  const assignmentList = response.response.courses.flatMap(
+  const filteredAssignments = assignments?.response.courses.flatMap(
     (course) => course.assignments
   );
 
+  // 선택된 강의에 따라 보여줄 과제 목록 결정
+  const assignmentList = selectedCourseId
+    ? (filteredAssignments ?? [])
+    : (allAssignments?.response.assignments ?? []);
+
   // 문제 선택 핸들러
-  const handleAssignmentSelect = (assignmentId: number) => {
+  const handleAssignmentSelect = (assignment: Assignment) => {
     setSelectedAssignments((prev) => {
-      if (prev.includes(assignmentId)) {
-        return prev.filter((id) => id !== assignmentId); // 선택 해제
-      } else {
-        return [...prev, assignmentId]; // 선택 추가
+      if (prev.some((a) => a.id === assignment.id)) {
+        return prev.filter((a) => a.id !== assignment.id);
       }
+      return [...prev, assignment];
     });
   };
 
+  const returnToPreviousPage = () => {
+    navigate(location.state?.backPath ?? -1, {
+      state: {
+        mode: location.state?.mode,
+        unitId: location.state?.unitId,
+        currentIndex: location.state?.currentIndex,
+      },
+    });
+  };
+
+  const handleConfirm = () => {
+    setAssignments(selectedAssignments);
+    returnToPreviousPage();
+  };
+
   return (
     <AssignmentPageLayout
       title='문제 선택'
@@ -43,13 +76,15 @@ const AssignmentSelectPage = () => {
           renderItem={(assignment) => (
             <ListRow
               title={assignment.title}
-              selected={selectedAssignments.includes(assignment.id)}
+              selected={selectedAssignments.some((a) => a.id === assignment.id)}
             />
           )}
         />
       }
-      onCancel={() => {}}
-      onConfirm={() => {}}
+      onCancel={() => {
+        returnToPreviousPage();
+      }}
+      onConfirm={handleConfirm}
     />
   );
 };