refactor: 신청 목록의 순서를 보여주는 방식 수정 (#295)

Author: smb0123

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

@@ -25,23 +25,30 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
   const { sectorSettingData } = useSectorQueryById(eventId);
   const { onEmailTransmit } = useTransmitEmail(eventId);
 
+  const sectorFilteredRegistrations = registrations.filter(
+    (registration) => registration.sectorNum === selectedSector,
+  );
+
   const exportXLSX = async () => {
     const data = sectorSettingData
-      .map((sector) =>
-        registrations
-          .filter(
-            (registration) => registration.sectorNum === sector.sectorNumber,
-          )
-          .map((registration) =>
-            EXCEL_HEADERS.reduce(
-              (acc, header) => ({
-                ...acc,
-                ...getExcelCellValue(header, registration, registrations),
-              }),
-              {},
-            ),
+      .map((sector) => {
+        const currentSectorRegistrations = registrations.filter(
+          (registration) => registration.sectorNum === sector.sectorNumber,
+        );
+        return currentSectorRegistrations.map((registration) =>
+          EXCEL_HEADERS.reduce(
+            (acc, header) => ({
+              ...acc,
+              ...getExcelCellValue(
+                header,
+                registration,
+                currentSectorRegistrations,
+              ),
+            }),
+            {},
           ),
-      )
+        );
+      })
       .flat();
 
     const XLSX = await import('xlsx');
@@ -97,25 +104,21 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
             </tr>
           </thead>
           <tbody className="text-center">
-            {registrations
-              .filter(
-                (registration) => registration.sectorNum === selectedSector,
-              )
-              .map((registration) => {
-                return (
-                  <tr key={registration.id}>
-                    {TABLE_HEADERS.map((header) => (
-                      <td key={header.key}>
-                        {getTableCellValue(
-                          header.key,
-                          registration,
-                          registrations,
-                        )}
-                      </td>
-                    ))}
-                  </tr>
-                );
-              })}
+            {sectorFilteredRegistrations.map((registration) => {
+              return (
+                <tr key={registration.id}>
+                  {TABLE_HEADERS.map((header) => (
+                    <td key={header.key}>
+                      {getTableCellValue(
+                        header.key,
+                        registration,
+                        sectorFilteredRegistrations,
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </div>

service-manager/src/functions/apply.ts

@@ -4,13 +4,17 @@ import { EXCEL_HEADERS, TABLE_HEADERS } from '../constants/apply';
 const getCellValue = (
   headerKey: (typeof EXCEL_HEADERS)[number]['key'],
   userInfo: RegistrationResponse,
-  registrations: RegistrationResponse[],
+  sectorFilteredRegistrations: RegistrationResponse[],
 ) => {
   switch (headerKey) {
     case 'sector':
       return userInfo.sectorNum;
     case 'order':
-      return registrations.findIndex((data) => data.id === userInfo.id) + 1;
+      return (
+        sectorFilteredRegistrations.findIndex(
+          (data) => data.id === userInfo.id,
+        ) + 1
+      );
     case 'name':
       return userInfo.name;
     case 'affiliation':
@@ -38,17 +42,21 @@ const getCellValue = (
 export const getTableCellValue = (
   headerKey: (typeof TABLE_HEADERS)[number]['key'],
   userInfo: RegistrationResponse,
-  registrations: RegistrationResponse[],
+  sectorFilteredRegistrations: RegistrationResponse[],
 ) => {
-  return getCellValue(headerKey, userInfo, registrations);
+  return getCellValue(headerKey, userInfo, sectorFilteredRegistrations);
 };
 
 export const getExcelCellValue = (
   headerKey: (typeof EXCEL_HEADERS)[number],
   userInfo: RegistrationResponse,
-  registrations: RegistrationResponse[],
+  sectorFilteredRegistrations: RegistrationResponse[],
 ) => {
-  const value = getCellValue(headerKey.key, userInfo, registrations);
+  const value = getCellValue(
+    headerKey.key,
+    userInfo,
+    sectorFilteredRegistrations,
+  );
   return {
     [headerKey.label]: value,
   };