refactor: 신청 목록 페이지의 테이블과 엑셀 파일 리팩토링 (#284)

Author: smb0123

service-manager/src/components/apply-list/ApplyList.tsx

@@ -7,6 +7,8 @@ import {
 } from '../../hooks/react-query/useRegistration';
 import { useSectorQueryById } from '../../hooks/react-query/useSetting';
 import { ApplyCount } from './ApplyCount';
+import { EXCEL_HEADERS, TABLE_HEADERS } from '../../constants/apply';
+import { getExcelCellValue, getTableCellValue } from '../../functions/apply';
 import ErrorBoundary from '../common/ErrorBoundary';
 
 interface ApplyListProps {
@@ -30,17 +32,15 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
           .filter(
             (registration) => registration.sectorNum === sector.sectorNumber,
           )
-          .map((registration, index) => ({
-            구간: registration.sectorNum,
-            순서: index + 1,
-            이름: registration.name,
-            학과: registration.department,
-            차량번호: registration.carNumber,
-            학생번호: registration.studentNumber,
-            경차여부: registration.isCompact ? '경차' : '경차 아님',
-            휴대폰번호: registration.phoneNumber,
-            이메일: registration.email,
-          })),
+          .map((registration) =>
+            EXCEL_HEADERS.reduce(
+              (acc, header) => ({
+                ...acc,
+                ...getExcelCellValue(header, registration, registrations),
+              }),
+              {},
+            ),
+          ),
       )
       .flat();
 
@@ -91,15 +91,9 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
         <table className="w-full min-w-[50rem]">
           <thead>
             <tr>
-              <th>순서</th>
-              <th>이름</th>
-              <th>단과 대학</th>
-              <th>학과</th>
-              <th>차량 번호</th>
-              <th>학생 번호</th>
-              <th>경차 여부</th>
-              <th>휴대폰 번호</th>
-              <th>이메일</th>
+              {TABLE_HEADERS.map((header) => (
+                <th key={header.key}>{header.label}</th>
+              ))}
             </tr>
           </thead>
           <tbody className="text-center">
@@ -110,19 +104,15 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
               .map((registration) => {
                 return (
                   <tr key={registration.id}>
-                    <td>
-                      {registrations.findIndex(
-                        (data) => data.id === registration.id,
-                      ) + 1}
-                    </td>
-                    <td>{registration.name}</td>
-                    <td>{registration.affiliation}</td>
-                    <td> {registration.department} </td>
-                    <td>{registration.carNumber}</td>
-                    <td>{registration.studentNumber}</td>
-                    <td>{registration.isCompact ? '경차' : '경차 아님'}</td>
-                    <td>{registration.phoneNumber}</td>
-                    <td>{registration.email}</td>
+                    {TABLE_HEADERS.map((header) => (
+                      <td key={header.key}>
+                        {getTableCellValue(
+                          header.key,
+                          registration,
+                          registrations,
+                        )}
+                      </td>
+                    ))}
                   </tr>
                 );
               })}

service-manager/src/constants/apply.ts

@@ -0,0 +1,18 @@
+import { RegistrationResponse } from '../apis/dtos/registration.dto';
+
+export const TABLE_HEADERS = [
+  { key: 'order', label: '순서' },
+  { key: 'name', label: '이름' },
+  { key: 'affiliation', label: '단과 대학' },
+  { key: 'department', label: '학과' },
+  { key: 'carNumber', label: '차량 번호' },
+  { key: 'studentNumber', label: '학생 번호' },
+  { key: 'isCompact', label: '경차 여부' },
+  { key: 'phoneNumber', label: '휴대폰 번호' },
+  { key: 'email', label: '이메일' },
+] as const;
+
+export const EXCEL_HEADERS = [
+  { key: 'sector', label: '구간' },
+  ...TABLE_HEADERS,
+] as const;

service-manager/src/functions/apply.ts

@@ -0,0 +1,55 @@
+import { RegistrationResponse } from '../apis/dtos/registration.dto';
+import { EXCEL_HEADERS, TABLE_HEADERS } from '../constants/apply';
+
+const getCellValue = (
+  headerKey: (typeof EXCEL_HEADERS)[number]['key'],
+  userInfo: RegistrationResponse,
+  registrations: RegistrationResponse[],
+) => {
+  switch (headerKey) {
+    case 'sector':
+      return userInfo.sectorNum;
+    case 'order':
+      return registrations.findIndex((data) => data.id === userInfo.id) + 1;
+    case 'name':
+      return userInfo.name;
+    case 'affiliation':
+      return userInfo.affiliation;
+    case 'department':
+      return userInfo.department;
+    case 'carNumber':
+      return userInfo.carNumber;
+    case 'studentNumber':
+      return userInfo.studentNumber;
+    case 'isCompact':
+      return userInfo.isCompact ? '경차' : '경차 아님';
+    case 'phoneNumber':
+      return userInfo.phoneNumber;
+    case 'email':
+      return userInfo.email;
+    default:
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(`${headerKey}는 정의되지 않은 헤더입니다.`);
+      }
+      return '';
+  }
+};
+
+export const getTableCellValue = (
+  headerKey: (typeof TABLE_HEADERS)[number]['key'],
+  userInfo: RegistrationResponse,
+  registrations: RegistrationResponse[],
+) => {
+  return getCellValue(headerKey, userInfo, registrations);
+};
+
+export const getExcelCellValue = (
+  headerKey: (typeof EXCEL_HEADERS)[number],
+  userInfo: RegistrationResponse,
+  registrations: RegistrationResponse[],
+) => {
+  const value = getCellValue(headerKey.key, userInfo, registrations);
+  return {
+    [headerKey.label]: value,
+  };
+};