#59 feat: 강의 상세 페이지 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,45 @@
-import type {DashboardScheduleListResponse} from '@/entities/course/model/types';
+import {z} from 'zod';
 import {privateAxios} from '@/shared/api/axiosInstance';
+import {apiResponseSchema} from '@/shared/model/schemas';
+import {assignmentScheduleSchema} from '../model/schemas';
+import {assignmentCourseSchema} from '@/entities/course/model/schemas';
 
-export const getAssignmentSchedules =
-  async (): Promise<DashboardScheduleListResponse> => {
-    const response = await privateAxios.get('/assignments/schedule');
-    return response.data;
-  };
+// 과제 일정 조회 API
+export const getAssignmentSchedules = async () => {
+  const response = await privateAxios.get('/assignments/schedule');
+  return apiResponseSchema(
+    z.object({count: z.number(), schedule: z.array(assignmentScheduleSchema)})
+  ).parse(response.data);
+};
+
+// 전체 과제 목록 조회 API
+export const getAllAssignments = async () => {
+  const response = await privateAxios.get('/assignments/my');
+  return apiResponseSchema(
+    z.object({
+      count: z.number(),
+      assignments: z.array(
+        z
+          .object({assignmentId: z.number(), title: z.string()})
+          .transform(({assignmentId, title}) => ({id: assignmentId, title}))
+      ),
+    })
+  ).parse(response.data);
+};
+
+// 강의별 과제 목록 조회 API
+export const getAssignmentsByCourse = async (courseId: number) => {
+  const response = await privateAxios.get(`/courses/${courseId}/assignments`);
+  return apiResponseSchema(
+    z.object({
+      count: z.number(),
+      courses: z.array(assignmentCourseSchema),
+    })
+  ).parse(response.data);
+};
+
+// 과제 삭제 API
+export const deleteAssignment = async (assignmentId: number) => {
+  const response = await privateAxios.delete(`/assignments/${assignmentId}`);
+  return apiResponseSchema(z.string()).parse(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/schemas.ts

@@ -0,0 +1,20 @@
+import {submissionStatusSchema} from '@/shared/model/schemas';
+import z from 'zod';
+
+export const assignmentSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  submittedStatus: submissionStatusSchema.optional(),
+});
+
+export const assignmentScheduleSchema = z.object({
+  date: z.string(),
+  remainingDays: z.number(),
+  assignments: z.array(
+    z.object({
+      course: z.string(),
+      section: z.string(),
+      assignment: z.string(),
+    })
+  ),
+});

src/entities/assignment/model/types.ts

@@ -1,10 +1,5 @@
-import type {SubmissionStatus} from '@/shared/model/common';
+import type {z} from 'zod';
+import type {assignmentScheduleSchema, assignmentSchema} from './schemas';
 
-/**
- * 과제(Assignment) 인터페이스 정의
- */
-export interface Assignment {
-  id: number;
-  title: string;
-  submittedStatus?: SubmissionStatus;
-}
+export type Assignment = z.infer<typeof assignmentSchema>;
+export type AssignmentSchedule = z.infer<typeof assignmentScheduleSchema>;

src/entities/auth/api/authApi.ts

@@ -1,14 +1,6 @@
 import {publicAxios} from '@/shared/api/axiosInstance';
-import type {UserType} from '@/shared/model/common';
-
-interface KakaoLoginApiResponse {
-  memberId: number;
-  name: string;
-  role: 'ADMIN' | 'USER';
-  studentId: string;
-  email: string;
-  accessToken: string;
-}
+import type {UserType} from '@/shared/model/type';
+import {kakaoLoginResponseSchema} from '../model/schemas';
 
 export const kakaoLogin = async (
   oAuthToken: string,
@@ -21,7 +13,7 @@ export const kakaoLogin = async (
     ...(studentId && {studentId}),
     OAuthToken: oAuthToken,
   });
-  const data: KakaoLoginApiResponse = response.data.response;
+  const data = kakaoLoginResponseSchema.parse(response.data.response);
   return {
     userName: data.name,
     userType: (data.role === 'ADMIN' ? 'admin' : 'student') as Exclude<

src/entities/auth/model/schemas.ts

@@ -0,0 +1,10 @@
+import {z} from 'zod';
+
+export const kakaoLoginResponseSchema = z.object({
+  memberId: z.number(),
+  name: z.string(),
+  role: z.enum(['ADMIN', 'USER']),
+  studentId: z.string(),
+  email: z.string().nullable(),
+  accessToken: z.string(),
+});

src/entities/auth/model/useUserStore.ts

@@ -1,6 +1,6 @@
 import {create} from 'zustand';
 import {persist} from 'zustand/middleware';
-import type {UserType} from '@/shared/model/common';
+import type {UserType} from '@/shared/model/type';
 
 type AuthenticatedUserType = Exclude<UserType, 'guest'>;
 

src/entities/course/api/courseApi.ts

@@ -1,15 +1,24 @@
-import type {ApiResponse} from '@/shared/model/common';
-import type {DashboardCourseListResponse} from '@/entities/course/model/types';
+import {z} from 'zod';
 import {privateAxios} from '@/shared/api/axiosInstance';
+import {apiResponseSchema} from '@/shared/model/schemas';
+import {courseOverviewSchema, dashboardCourseSchema} from '../model/schemas';
 
-export const getAllCourses = async (): Promise<DashboardCourseListResponse> => {
+// 전체 강의 목록 조회 API
+export const getAllCourses = async () => {
   const response = await privateAxios.get('/courses/my');
-  return response.data;
+  return apiResponseSchema(
+    z.object({count: z.number(), courses: z.array(dashboardCourseSchema)})
+  ).parse(response.data);
 };
 
-export const deleteCourse = async (
-  courseId: number
-): Promise<ApiResponse<string>> => {
+// 단일 강의 조회 API
+export const getCourseById = async (courseId: number) => {
+  const response = await privateAxios.get(`/courses/${courseId}`);
+  return apiResponseSchema(courseOverviewSchema).parse(response.data);
+};
+
+// 강의 삭제 API
+export const deleteCourse = async (courseId: number) => {
   const response = await privateAxios.delete(`/courses/${courseId}`);
-  return response.data;
+  return apiResponseSchema(z.string()).parse(response.data);
 };

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,23 @@
+import {getAllCourses, getCourseById} 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,
+      }),
+    }),
+
+  // 단일 강의 조회 쿼리 옵션
+  getCourseDetails: (courseId: number) =>
+    queryOptions({
+      queryKey: ['courses', 'detail', courseId],
+      queryFn: () => getCourseById(courseId),
+      select: (data) => data.response,
+    }),
+};

src/entities/course/model/schemas.ts

@@ -0,0 +1,41 @@
+import {z} from 'zod';
+import {semesterCodeSchema} from '@/shared/model/schemas';
+import {
+  assignmentSchema,
+  assignmentScheduleSchema,
+} from '@/entities/assignment/model/schemas';
+import {unitSchema} from '@/entities/unit/model/schemas';
+
+export const courseOverviewSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  year: z.number(),
+  semester: semesterCodeSchema,
+  section: z.string(),
+  unitCount: z.number(),
+  studentCount: z.number().optional(),
+  units: z.array(unitSchema),
+});
+
+export const dashboardCourseSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  year: z.number(),
+  semester: semesterCodeSchema,
+  section: z.string(),
+  unitCount: z.number(),
+  description: z.string(),
+  assignmentCount: z.number(),
+});
+
+export const assignmentCourseSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  year: z.number(),
+  semester: semesterCodeSchema,
+  section: z.string(),
+  count: z.number(),
+  assignments: z.array(assignmentSchema.pick({id: true, title: true})),
+});
+
+export {assignmentScheduleSchema as scheduleSchema};