feature(graduate): 학생 상세보기 api 연동

apps/graduate/src/features/studentDetail/api/getStudentDetail.ts

@@ -0,0 +1,14 @@
+import type { AxiosResponse } from 'axios';
+
+import { get } from '~/shared/api';
+import { END_POINT } from '~/shared/constants';
+
+import type { StudentDetailApiResponse } from '../types';
+
+export async function getStudentDetail(
+  studentId: number,
+): Promise<AxiosResponse<StudentDetailApiResponse>> {
+  return get<StudentDetailApiResponse>({
+    request: END_POINT.USER.STUDENT_DETAIL(studentId),
+  });
+}

apps/graduate/src/features/studentDetail/api/index.ts

@@ -0,0 +1 @@
+export { getStudentDetail } from './getStudentDetail';

apps/graduate/src/features/studentDetail/hooks/index.ts

@@ -0,0 +1 @@
+export { useStudentDetail } from './useStudentDetail';

apps/graduate/src/features/studentDetail/hooks/useStudentDetail.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { KEYS } from '~/shared/constants';
+
+import { getStudentDetail } from '../api';
+
+export function useStudentDetail(studentId: number) {
+  return useQuery({
+    queryKey: [KEYS.STUDENT_DETAIL, studentId],
+    queryFn: async () => {
+      const response = await getStudentDetail(studentId);
+      return response.data;
+    },
+    enabled: !!studentId,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+  });
+}

apps/graduate/src/features/studentDetail/index.ts

@@ -0,0 +1,4 @@
+export * from './api';
+export * from './hooks';
+export * from './model';
+export * from './types';

apps/graduate/src/features/studentDetail/model/index.ts

@@ -0,0 +1 @@
+export type { StudentDetailItem } from './studentDetail';

apps/graduate/src/features/studentDetail/model/studentDetail.ts

@@ -0,0 +1,8 @@
+export interface StudentDetailItem {
+  name: string;
+  studentId: string;
+  graduationDate: string;
+  advisor: string;
+  major: string;
+  capstoneCompletion: boolean;
+}

apps/graduate/src/features/studentDetail/types/index.ts

@@ -0,0 +1 @@
+export type { StudentDetailApiResponse } from './studentDetail';

apps/graduate/src/features/studentDetail/types/studentDetail.ts

@@ -0,0 +1,12 @@
+import type { StudentStatus } from '~/shared/types';
+
+export interface StudentDetailApiResponse {
+  graduationUserId: number;
+  name: string;
+  studentId: string;
+  graduationDate: string;
+  advisor: string;
+  major: string;
+  capstoneCompletion: boolean;
+  status: StudentStatus;
+}

apps/graduate/src/pages/admin/all/constants/allManagementColumns.tsx

@@ -11,9 +11,8 @@ import type { AllManagementRow } from '../types/allManagement';
 
 import { vars } from '~/vars.css';
 
-
 export const allManagementColumns = (
-  onNameClick: (row: AllManagementRow) => void,
+  onNameClick: (id: number) => void,
 ): ReadonlyArray<Column<AllManagementRow>> =>
   [
     { key: 'no', header: HEADER_NO, width: 56, cell: r => r.no },
@@ -39,12 +38,22 @@ export const allManagementColumns = (
             color: vars.colors.main,
             textDecoration: 'underline',
           }}
-          onClick={() => onNameClick(r)}
+          onClick={() => onNameClick(r.id)}
         >
           {r.name}
         </button>
       ),
     },
-    { key: 'type', header: HEADER_TYPE, width: 120, cell: r => r.type },
-    { key: 'status', header: HEADER_STATUS, width: 140, cell: r => r.status },
+    {
+      key: 'type',
+      header: HEADER_TYPE,
+      width: 120,
+      cell: r => r.graduationTypeLabel,
+    },
+    {
+      key: 'status',
+      header: HEADER_STATUS,
+      width: 140,
+      cell: r => r.statusText,
+    },
   ] as const;

apps/graduate/src/pages/admin/all/constants/allManagementTexts.ts

@@ -3,11 +3,18 @@ import type { GraduationType } from '~/shared/api/student/fetchGraduationUsers';
 import type { AllManagementRow } from '../types/allManagement';
 
 export const STATUS_UNKNOWN = '미정';
-export const STATUS_NOT_SUBMITTED = '미제출';
-export const STATUS_SUBMITTED = '제출';
-export const STATUS_SUBMITTED_APPROVED = '제출-승인';
-export const STATUS_MID_NOT_SUBMITTED = '중간보고서-미제출';
-export const STATUS_FINAL_NOT_SUBMITTED = '최종보고서-미제출';
+
+export const STATUS_CERTIFICATE_NOT_SUBMITTED = '자격증-미제출';
+export const STATUS_CERTIFICATE_SUBMITTED = '자격증-제출';
+export const STATUS_CERTIFICATE_APPROVED = '자격증-승인';
+
+export const STATUS_MID_REPORT_NOT_SUBMITTED = '중간보고서-미제출';
+export const STATUS_MID_REPORT_SUBMITTED = '중간보고서-제출';
+export const STATUS_MID_REPORT_APPROVED = '중간보고서-승인';
+
+export const STATUS_FINAL_REPORT_NOT_SUBMITTED = '최종보고서-미제출';
+export const STATUS_FINAL_REPORT_SUBMITTED = '최종보고서-제출';
+export const STATUS_FINAL_REPORT_APPROVED = '최종보고서-승인';
 
 export const HEADER_NO = '번호';
 export const HEADER_STUDENT_ID = '학번';
@@ -24,7 +31,10 @@ export const TYPE_UNKNOWN = '미정';
 export const TITLE_ALL_MANAGEMENT = '졸업 대상 전체 관리';
 export const LOADING_TEXT = '불러오는 중...';
 
-export const TYPE_LABEL: Record<GraduationType, AllManagementRow['type']> = {
+export const TYPE_LABEL: Record<
+  GraduationType,
+  AllManagementRow['graduationTypeLabel']
+> = {
   미정: TYPE_UNKNOWN,
   논문: TYPE_THESIS,
   자격증: TYPE_CERTIFICATE,

apps/graduate/src/pages/admin/all/mock/allManagement.ts

@@ -1,34 +1,53 @@
-import type {
-  AllManagementRow,
-  StageData,
-  UserDetail,
-} from '../types/allManagement';
+import type { AllManagementRow } from '../types/allManagement';
 
-const NAMES = [
-  '홍길동'
-];
+export type MockUserDetail = {
+  studentId: string;
+  period: string;
+  name: string;
+  professor: string;
+  department: string;
+  delay: number;
+  etc: string;
+};
+
+const getStatusText = (i: number): string => {
+  if (i % 2 === 0) {
+    if (i % 3 !== 0) return '자격증(미제출)';
+    if (i % 4 !== 0) return '자격증(미승인)';
+    return '최종 승인';
+  } else {
+    if (i % 3 !== 0) return '중간보고서(미제출)';
+    if (i % 5 !== 0) return '중간보고서(미승인)';
+    if (i % 4 !== 0) return '최종보고서(미제출)';
+    if (i % 6 !== 0) return '최종보고서(미승인)';
+    return '최종 승인';
+  }
+};
 
 export const MOCK_ROWS: AllManagementRow[] = Array.from({ length: 88 }).map(
   (_, i) => ({
     id: i + 1,
     no: i + 1,
     studentId: `${20190000 + (i % 30)}`,
-    name: NAMES[i % NAMES.length],
-    type: i % 2 === 0 ? '자격증' : '논문',
-    status: [
-      '제출',
-      '미제출',
-      '최종보고서-미제출',
-      '제출',
-      '제출',
-      '미제출',
-      '미제출',
-      '중간보고서-미제출',
-    ][i % 8],
+    name: [
+      '서진규',
+      '이은신',
+      '이여웅',
+      '아이',
+      '이도',
+      '한태',
+      '김현수',
+      '최용환',
+      '곽수',
+      '최압',
+    ][i % 10],
+    graduationDate: '2028-08',
+    graduationTypeLabel: i % 2 === 0 ? '자격증' : '논문',
+    statusText: getStatusText(i),
   }),
 );
 
-export const userDetailData: UserDetail = {
+export const userDetailData: MockUserDetail = {
   studentId: '202211461',
   period: '2028-02',
   name: '서지국',
@@ -37,27 +56,3 @@ export const userDetailData: UserDetail = {
   delay: 0,
   etc: '캡스톤 미이수',
 };
-
-export const stageData: StageData[] = [
-  {
-    key: '1',
-    stage: '신청서',
-    period: '2025-03-17~04-05',
-    date: '2025-03-27',
-    isSubmit: true,
-  },
-  {
-    key: '2',
-    stage: '중간보고서',
-    period: '2025-04-14~05-30',
-    date: '-',
-    isSubmit: false,
-  },
-  {
-    key: '3',
-    stage: '최종보고서',
-    period: '2025-04-14~05-30',
-    date: '-',
-    isSubmit: false,
-  },
-];