refactor(manager): 조회가 안될 시 정원을 모두 0으로 나오게 한다.(#208)

JNU-Parking-Ticket-Project · Apr 10, 2024 · 36a095e · 36a095e
2 parents 701acbe + 5676d48
commit 36a095e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/service-manager/src/components/apply-list/ApplyCount.tsx b/service-manager/src/components/apply-list/ApplyCount.tsx
@@ -1,6 +1,9 @@
 import { Txt } from '@quokka/design-system';
 import { useAllRegistrationQuery } from '../../hooks/react-query/useRegistration';
-import { useSectorQueryById } from '../../hooks/react-query/useSetting';
+import {
+  useSectorQueryById,
+  useSectorsQuery,
+} from '../../hooks/react-query/useSetting';
 
 interface ApplyCountProps {
   eventId: string;
@@ -10,9 +13,8 @@ interface ApplyCountProps {
 export const ApplyCount = ({ eventId, sector }: ApplyCountProps) => {
   const { sectorSettingData } = useSectorQueryById(eventId);
   const { registrations } = useAllRegistrationQuery(eventId);
-  const applicantNumber = registrations?.filter(
-    (data) => data.sectorNum === sector,
-  );
+  const applicantNumber =
+    registrations?.filter((data) => data.sectorNum === sector) ?? 0;
   const limit = sectorSettingData?.find((data) => data.sectorNumber === sector);
 
   return (
@@ -21,12 +23,13 @@ export const ApplyCount = ({ eventId, sector }: ApplyCountProps) => {
         {`구간정원: ${Math.min(
           applicantNumber.length,
           limit?.reserve ?? 0,
-        )}명 / ${limit?.reserve}명`}
+        )}명 / ${limit?.reserve ?? 0}명`}
       </Txt>
       <Txt size="h6" color="black">
-        {`예비정원: ${Math.abs(
-          registrations.length - (limit?.reserve ?? 0),
-        )}명 / ${limit?.sectorCapacity}명`}
+        {`예비정원: ${Math.max(
+          applicantNumber.length - (limit?.reserve ?? 0),
+          0,
+        )}명 / ${limit?.sectorCapacity ?? 0}명`}
       </Txt>
     </div>
   );

diff --git a/service-manager/src/components/apply-list/ApplyList.tsx b/service-manager/src/components/apply-list/ApplyList.tsx
@@ -3,7 +3,12 @@ import { useAllRegistrationQuery } from '../../hooks/react-query/useRegistration
 import { useState } from 'react';
 import { ApplyCount } from './ApplyCount';
 import { useSectorQueryById } from '../../hooks/react-query/useSetting';
-export const ApplyList = ({ eventId }: { eventId: string }) => {
+
+interface ApplyListProps {
+  eventId: string;
+}
+
+export const ApplyList = ({ eventId }: ApplyListProps) => {
   const { registrations } = useAllRegistrationQuery(eventId);
   const sectors = Array.from(
     new Set(registrations.map((registration) => registration.sectorNum)),

diff --git a/service-manager/src/hooks/react-query/useSetting.tsx b/service-manager/src/hooks/react-query/useSetting.tsx
@@ -34,7 +34,7 @@ export const useSectorsQuery = () => {
     refetchOnWindowFocus: false,
   });
 
-  return { sectorSettingData: data };
+  return { sectors: data };
 };
 
 export const useSectorQueryById = (eventId: string) => {