학생회 요구사항으로 인한 브랜치 최신화 (#291)

Author: smb0123

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

@@ -13,9 +13,12 @@ interface ApplyCountProps {
 export const ApplyCount = ({ eventId, sector }: ApplyCountProps) => {
   const { sectorSettingData } = useSectorQueryById(eventId);
   const { registrations } = useAllRegistrationQuery(eventId);
+
   const applicantNumber =
-    registrations?.filter((data) => data.sectorNum === sector) ?? 0;
+    registrations?.filter((data) => data.sectorNum === sector) ?? [];
   const limit = sectorSettingData?.find((data) => data.sectorNumber === sector);
+  const noCompactCount = registrations?.filter((data) => !data.isCompact)
+    .length;
 
   return (
     <div className="flex flex-col gap-2">
@@ -31,6 +34,9 @@ export const ApplyCount = ({ eventId, sector }: ApplyCountProps) => {
           0,
         )}명 / ${limit?.reserve ?? 0}명`}
       </Txt>
+      <Txt size="h6" color="black">
+        {`경차 아닌 학생 정원: ${noCompactCount}명 / ${registrations.length}명`}
+      </Txt>
     </div>
   );
 };

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { Button } from '@quokka/design-system';
 
 import {
@@ -7,6 +7,7 @@ import {
 } from '../../hooks/react-query/useRegistration';
 import { useSectorQueryById } from '../../hooks/react-query/useSetting';
 import { ApplyCount } from './ApplyCount';
+import ErrorBoundary from '../common/ErrorBoundary';
 
 interface ApplyListProps {
   eventId: string;
@@ -67,7 +68,11 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
       </div>
       <div className="w-full">
         <div className="flex justify-between align-bottom">
-          <ApplyCount eventId={eventId} sector={selectedSector} />
+          <ErrorBoundary>
+            <Suspense>
+              <ApplyCount eventId={eventId} sector={selectedSector} />
+            </Suspense>
+          </ErrorBoundary>
           <div className="text-right my-5">
             <Button
               size="small"
@@ -82,6 +87,7 @@ export const ApplyList = ({ eventId }: ApplyListProps) => {
             </Button>
           </div>
         </div>
+        <div className="mb-4" />
         <table className="w-full min-w-[50rem]">
           <thead>
             <tr>

service-manager/src/pages/apply/ApplyList.page.tsx

@@ -1,9 +1,17 @@
 import { useParams } from 'react-router-dom';
 import { ApplyList } from '../../components/apply-list/ApplyList';
+import ErrorBoundary from '../../components/common/ErrorBoundary';
+import { Suspense } from 'react';
 
 export const ApplyListPage = () => {
   const { eventId } = useParams();
   if (!eventId) return <div>잘못된 접근입니다.</div>;
 
-  return <ApplyList eventId={eventId} />;
+  return (
+    <ErrorBoundary>
+      <Suspense>
+        <ApplyList eventId={eventId} />
+      </Suspense>
+    </ErrorBoundary>
+  );
 };