feat(shelter): 봉사모집마감 추가

anifriends · Dec 2, 2023 · ed51864 · ed51864
1 parent cca4254
commit ed51864
Showing 1 changed file with 19 additions and 22 deletions.
diff --git a/apps/shelter/src/pages/volunteers/detail/index.tsx b/apps/shelter/src/pages/volunteers/detail/index.tsx
@@ -14,7 +14,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import AlertModal from 'shared/components/AlertModal';
 import ImageCarousel from 'shared/components/ImageCarousel';
 import InfoTextList from 'shared/components/InfoTextList';
-import { LabelProps } from 'shared/components/Label';
+import Label from 'shared/components/Label';
 import LabelText from 'shared/components/LabelText';
 import useDetailHeaderStore from 'shared/store/detailHeaderStore';
 import {
@@ -58,47 +58,40 @@ function VolunteersDetail() {
     mutationFn: async (recruitmentId: number) =>
       closeShelterRecruitment(recruitmentId),
     onSuccess: () => {
-      setLabel({ labelTitle: '마감완료', type: 'GRAY' });
       toast({
         position: 'top',
         description: '모집마감되었습니다.',
         status: 'success',
         duration: 1500,
       });
+      setIsClosed(true);
+    },
+    onError: (error) => {
+      console.error(error);
     },
   });
 
   const startDate = new Date(recruitment.startTime);
   const deadline = new Date(recruitment.deadline);
   const createdAt = new Date(recruitment.createdAt);
+  const volunteerDateDay = getDDay(recruitment.deadline);
 
   const volunteerDate = createFormattedTime(startDate);
   const volunteerDay = createWeekDayLocalString(startDate);
 
   const deadlineDate = createFormattedTime(deadline);
   const deadlineDay = createWeekDayLocalString(deadline);
 
-  const [label, setLabel] = useState<LabelProps>({
-    labelTitle: '모집중',
-    type: 'GREEN',
-  });
-  const [isClosed, setIsClosed] = useState(false);
-
-  useEffect(() => {
-    if (recruitment.isClosed) {
-      setIsClosed(true);
-      setLabel({ labelTitle: '마감완료', type: 'GRAY' });
-    }
-  }, [recruitment.isClosed]);
+  const [isClosed, setIsClosed] = useState(
+    recruitment.isClosed || volunteerDateDay < 0,
+  );
 
   const goManageApply = () => navigate(`/manage/apply/${recruitmentId}`);
   const goManageAttendance = () =>
     navigate(`/manage/attendance/${recruitmentId}`);
   const onCloseRecruitment = (recruitmentId: number) => {
     closedRecruitment(recruitmentId);
     onClose();
-    setIsClosed(true);
-    // setLabel({ labelTitle: '마감완료', type: 'GRAY' });
   };
 
   return (
@@ -107,16 +100,20 @@ function VolunteersDetail() {
         <ImageCarousel imageUrls={recruitment.imageUrls} />
       )}
       <VStack spacing="5px" align="flex-start" p={4}>
-        <LabelText
-          labelTitle={label.labelTitle}
-          type={label.type}
-          content={`D-${getDDay(recruitment.deadline)}`}
-        />
+        {isClosed ? (
+          <Label labelTitle="마감완료" type="GRAY" />
+        ) : (
+          <LabelText
+            labelTitle="모집중"
+            content={`D-${volunteerDateDay === 0 ? 'Day' : volunteerDateDay}`}
+          />
+        )}
         <Text fontSize="xl" fontWeight="semibold">
           {recruitment.title}
         </Text>
         <Text fontSize="sm" fontWeight="normal" color="gray.500">
-          작성일 | {createFormattedTime(createdAt)}(수정됨)
+          작성일 | {createFormattedTime(createdAt)}
+          {recruitment.createdAt && ' (수정됨)'}
         </Text>
       </VStack>
       <Divider />