refactor(graduate): Admin 사이드 리펙토링 (#222)

Author: kim-subsub

apps/graduate/src/feature/schedule/api/fetchAllSchedule.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { get } from '~/shared/api';
-import { END_POINT, QUERY_KEYS } from '~/shared/constants';
+import { END_POINT, KEYS } from '~/shared/constants';
 
 import type { Schedule } from '../model/schedule';
 
@@ -14,7 +14,7 @@ const fetchAllSchedule = async (): Promise<Schedule[]> => {
 
 export const useFetchAllSchedule = () => {
   return useQuery({
-    queryKey: [QUERY_KEYS.SCHEDULE_ALL],
+    queryKey: [...KEYS.SCHEDULE_ALL],
     queryFn: fetchAllSchedule,
   });
 };

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

@@ -6,7 +6,7 @@ import { getStudentDetail } from '../api';
 
 export function useStudentDetail(studentId: number) {
   return useQuery({
-    queryKey: [KEYS.STUDENT_DETAIL, studentId],
+    queryKey: [...KEYS.STUDENT_DETAIL, studentId],
     queryFn: async () => {
       const response = await getStudentDetail(studentId);
       return response.data;

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

@@ -1,4 +1,4 @@
-import type { GraduationType } from '~/shared/api/student/fetchGraduationUsers';
+import { GraduationLabelType } from '~/shared/api';
 
 import type { AllManagementRow } from '../types/allManagement';
 
@@ -32,7 +32,7 @@ export const TITLE_ALL_MANAGEMENT = '졸업 대상 전체 관리';
 export const LOADING_TEXT = '불러오는 중...';
 
 export const TYPE_LABEL: Record<
-  GraduationType,
+  GraduationLabelType,
   AllManagementRow['graduationTypeLabel']
 > = {
   미정: TYPE_UNKNOWN,

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

@@ -7,12 +7,15 @@ import {
   DELETE_CONFIRM_TITLE,
 } from '~/shared/components/Toolbar/toolbarTexts';
 import {
+  useAdminDownload,
+  useAdminPagination,
+  useAdminSelection,
   useFetchGraduationUsers,
   useRemoveGraduationUsers,
   useToast,
   useScheduleList,
 } from '~/shared/hooks';
-import { downloadGraduationUsersExcel } from '~/shared/utils';
+import * as style from '~/shared/styles/adminPage.css';
 
 import { allManagementColumns } from '../constants/allManagementColumns';
 import {
@@ -21,7 +24,6 @@ import {
   TYPE_LABEL,
   TYPE_UNKNOWN,
 } from '../constants/allManagementTexts';
-import * as style from '../styles/AllManagementPage.css.ts';
 import type { AllManagementRow } from '../types/allManagement';
 import { extractPeriodData, getStatusLabel } from '../utils';
 import UserDetailModal from './UserDetailModal.tsx';
@@ -30,12 +32,18 @@ export default function AllManagementPage() {
   const navigate = useNavigate();
   const searchParams = useSearch({ from: '/_afterLogin/all' });
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [query, setQuery] = useState('');
-  const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  const { toast, confirm } = useToast();
   const [selectedStudentId, setSelectedStudentId] = useState<number>();
+  const { toast, confirm } = useToast();
+
+  const {
+    page,
+    setPage,
+    pageSize,
+    query,
+    handleQueryChange,
+    handlePageSizeChange,
+    resetToFirstPage,
+  } = useAdminPagination();
 
   useEffect(() => {
     if (searchParams?.graduationUserId) {
@@ -55,15 +63,6 @@ export default function AllManagementPage() {
     toast.error('스케줄 정보를 불러오는데 실패했습니다.');
   }
 
-  const resetSelection = () => {
-    setSelectedIds([]);
-    setPage(1);
-  };
-
-  const { removeGraduationUsers } = useRemoveGraduationUsers({
-    onSuccess: resetSelection,
-  });
-
   const { data, isLoading } = useFetchGraduationUsers({
     page: page - 1,
     size: pageSize,
@@ -87,6 +86,20 @@ export default function AllManagementPage() {
       })
     : [];
 
+  const { selectedIds, toggleAll, toggleOne, resetSelection } =
+    useAdminSelection(rows);
+
+  const { handleDownload } = useAdminDownload();
+
+  const handleResetSelection = () => {
+    resetSelection();
+    resetToFirstPage();
+  };
+
+  const { removeGraduationUsers } = useRemoveGraduationUsers({
+    onSuccess: handleResetSelection,
+  });
+
   const handleDeleteSelected = () => {
     if (selectedIds.length === 0) return;
     confirm({
@@ -107,15 +120,6 @@ export default function AllManagementPage() {
     });
   };
 
-  const handleDownloadExcel = async () => {
-    try {
-      await downloadGraduationUsersExcel();
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : '다운로드에 실패했습니다.',
-      );
-    }
-  };
   const onNameClick = (id: number) => {
     setSelectedStudentId(id);
     setIsModalOpen(true);
@@ -130,26 +134,6 @@ export default function AllManagementPage() {
 
   const totalItems = data?.pageable.totalElements ?? 0;
 
-  const toggleAll = () => {
-    const pageIds = rows.map(r => r.id);
-    const allChecked =
-      pageIds.length > 0 && pageIds.every(id => selectedIds.includes(id));
-    setSelectedIds(prev =>
-      allChecked
-        ? prev.filter(id => !pageIds.includes(id))
-        : Array.from(new Set([...prev, ...pageIds])),
-    );
-  };
-
-  const toggleOne = (id: string | number) => {
-    const numericId = Number(id);
-    setSelectedIds(prev =>
-      prev.includes(numericId)
-        ? prev.filter(x => x !== numericId)
-        : [...prev, numericId],
-    );
-  };
-
   return (
     <div className={style.root}>
       <div className={style.container}>
@@ -158,13 +142,10 @@ export default function AllManagementPage() {
         <Toolbar
           selectedCount={selectedIds.length}
           query={query}
-          onQueryChange={v => {
-            setQuery(v);
-            setPage(1);
-          }}
+          onQueryChange={handleQueryChange}
           onApprove={() => {}}
           onDeleteSelected={handleDeleteSelected}
-          onDownload={handleDownloadExcel}
+          onDownload={handleDownload}
           disabledApprove={true}
         />
 
@@ -192,10 +173,7 @@ export default function AllManagementPage() {
           pageSize={pageSize}
           totalItems={totalItems}
           onGoto={setPage}
-          onPageSizeChange={size => {
-            setPageSize(size);
-            setPage(1);
-          }}
+          onPageSizeChange={handlePageSizeChange}
         />
       </div>
     </div>

apps/graduate/src/pages/admin/all/ui/AllManagementPage.tsx

@@ -1,26 +1,24 @@
+import { SCHEDULE } from '~/shared/constants';
+import { SubmissionTypeLabel } from '~/shared/types';
+
+import { getSubmissionTypeLabel } from '../../schedule/constants';
 import type { PeriodData } from '../types/allManagement';
 
 import type { ScheduleItem } from '~/pages/admin/schedule/model';
 
-const SUBMISSION_TYPE = {
-  CERTIFICATE: 'CERTIFICATE',
-  MID_THESIS: 'MIDTHESIS',
-  FINAL_THESIS: 'FINALTHESIS',
-} as const;
-
 export function extractPeriodData(
   schedules: ScheduleItem[] | undefined,
 ): PeriodData {
   if (!schedules) return {};
 
-  const findPeriod = (type: string) => {
+  const findPeriod = (type: SubmissionTypeLabel) => {
     const schedule = schedules.find(s => s.submissionType === type);
     return schedule ? `${schedule.startDate}~${schedule.endDate}` : undefined;
   };
 
   return {
-    certificate: findPeriod(SUBMISSION_TYPE.CERTIFICATE),
-    midThesis: findPeriod(SUBMISSION_TYPE.MID_THESIS),
-    finalThesis: findPeriod(SUBMISSION_TYPE.FINAL_THESIS),
+    certificate: findPeriod(getSubmissionTypeLabel(SCHEDULE.CERTIFICATE)),
+    midThesis: findPeriod(getSubmissionTypeLabel(SCHEDULE.MIDTHESIS)),
+    finalThesis: findPeriod(getSubmissionTypeLabel(SCHEDULE.FINALTHESIS)),
   };
 }