#87 refactor: 디데이 실시간 계산 적용

AJD-Archive · Sep 25, 2024 · 89e462d · 89e462d
1 parent 07d1376
commit 89e462d
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 19 deletions.
diff --git a/src/components/CompletedDashboard.tsx b/src/components/CompletedDashboard.tsx
@@ -99,7 +99,7 @@ const CompletedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
                     dashboardId={dashboardId}
                     index={index}
                     title={block.title ?? ''}
-                    dDay={block.dDay ?? 0}
+                    dDay={block.dDay ?? ''}
                     contents={block.contents ?? ''}
                     blockId={block.blockId ?? '0'}
                     dType={block.dType ?? 'TeamDashboard'}

diff --git a/src/components/InProgressDashboard.tsx b/src/components/InProgressDashboard.tsx
@@ -104,7 +104,7 @@ const InProgressDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
                     dashboardId={dashboardId}
                     index={index}
                     title={block.title ?? ''}
-                    dDay={block.dDay ?? 0}
+                    dDay={block.dDay ?? ''}
                     contents={block.contents ?? ''}
                     blockId={block.blockId ?? '0'}
                     dType={block.dType ?? 'TeamDashboard'}

diff --git a/src/components/NotStartedDashboard.tsx b/src/components/NotStartedDashboard.tsx
@@ -89,7 +89,7 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
                     dashboardId={dashboardId}
                     index={index}
                     title={block.title ?? ''}
-                    dDay={block.dDay ?? 0}
+                    dDay={block.dDay ?? ''}
                     contents={block.contents ?? ''}
                     blockId={block.blockId ?? '0'}
                     dType={block.dType ?? 'TeamDashboard'}

diff --git a/src/hooks/useSidePage.ts b/src/hooks/useSidePage.ts
@@ -55,7 +55,7 @@ export const useSidePage = (blockId: string | undefined, progress: string): Side
     }));
   };
 
-  // 날짜 포맷 함수
+  // * 날짜 포맷 함수
   const formatDate = (date: Date | null): string => {
     if (!date) return '';
 
@@ -68,45 +68,83 @@ export const useSidePage = (blockId: string | undefined, progress: string): Side
     return `${year}.${month}.${day} ${hours}:${minutes}`;
   };
 
-  // 날짜 변환 함수
+  // * 날짜 변환 함수
   // string을 Date로 변환하는 함수
   const parseDate = (dateString?: string | null): Date | null => {
     return dateString ? new Date(dateString) : null;
   };
 
-  // D-Day 계산 함수
-  const calculateDDay = (startDate: Date | null, endDate: Date | null): number => {
-    if (!startDate || !endDate) return 0;
+  // * D-Day 계산 함수
+  const calculateDDay = (startDate: Date, endDate: Date): string => {
+    // if (!startDate || !endDate) return 0;
+
+    const today = new Date();
+    const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
 
-    // 시간 정보는 제거하고 날짜만 비교
     const startDateOnly = new Date(
       startDate.getFullYear(),
       startDate.getMonth(),
       startDate.getDate()
     );
+
     const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
 
-    const timeDifference = endDateOnly.getTime() - startDateOnly.getTime();
-    const dayDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24)); // 하루 단위로 계산
+    // todo: 시작 날짜가 오늘 이후면 종료 - 시작
+    // todo: 시작 날짜는 오늘 전이면서 종료 날짜가 오늘 이후라면 종료 - 오늘
+    // todo: 종료 날짜가 오늘 이전이라면 오늘 - 종료
+    // todo: 종료 날짜가 오늘이라면 d-day
+
+    if (startDateOnly.getTime() > todayOnly.getTime()) {
+      // 시작 날짜가 오늘 이후면 종료 - 시작
+      const diffTime = endDateOnly.getTime() - startDateOnly.getTime();
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      // console.log(`D-${diffDays}`);
+      return `D-${diffDays}`;
+    } else if (
+      startDateOnly.getTime() <= todayOnly.getTime() &&
+      endDateOnly.getTime() > todayOnly.getTime()
+    ) {
+      // 시작 날짜는 오늘 전이면서 종료 날짜가 오늘 이후라면 종료 - 오늘
+      const diffTime = endDateOnly.getTime() - todayOnly.getTime();
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      // console.log(`D-${diffDays}`);
+      return `D-${diffDays}`;
+    } else if (endDateOnly.getTime() < todayOnly.getTime()) {
+      // 종료 날짜가 오늘 이전이라면 오늘 - 종료
+      const diffTime = todayOnly.getTime() - endDateOnly.getTime();
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      // console.log(`D+${diffDays}`);
+      return `D+${diffDays}`;
+    } else if (endDateOnly.getTime() === todayOnly.getTime()) {
+      // 종료 날짜가 오늘이라면 D-Day
+      return 'D-Day';
+    }
 
-    return dayDifference;
+    return 'D-??';
   };
 
-  // DatePicker의 날짜 선택 핸들러
   // DatePicker의 날짜 선택 핸들러
   const handleDateChange = (date: Date | null, type: 'start' | 'end') => {
     const newData = {
       ...data,
       [type === 'start' ? 'startDate' : 'deadLine']: date ? date.toISOString() : null,
     };
 
+    setData(newData);
+
     // D-Day 값 업데이트: 시작일과 마감일을 비교하여 D-Day 계산
+    // if (newData.startDate && newData.deadLine) {
+    //   const dDayValue = calculateDDay(new Date(newData.startDate), new Date(newData.deadLine));
+    //   newData.dDay = dDayValue;
+    // }
     if (newData.startDate && newData.deadLine) {
-      const dDayValue = calculateDDay(new Date(newData.startDate), new Date(newData.deadLine));
-      newData.dDay = dDayValue;
-    }
+      const testDay = calculateDDay(new Date(newData.startDate), new Date(newData.deadLine));
 
-    setData(newData);
+      setData(prevData => ({
+        ...prevData,
+        dDay: testDay,
+      }));
+    }
   };
   // useEffect로 startDate와 deadLine을 검증
   useEffect(() => {

diff --git a/src/pages/SidePage.tsx b/src/pages/SidePage.tsx
@@ -108,11 +108,12 @@ const SidePage = () => {
         {/* 날짜 및 시간 설정 */}
         <DateContainer>
           <Flex justifyContent="space-between">
-            <D_Day>D-{data.dDay === -1 ? 0 : data.dDay}</D_Day>
+            <D_Day>{data.dDay}</D_Day>
             <StyledDatePicker>
               <DatePicker
                 selected={parseDate(data.startDate)}
                 onChange={(date: Date | null) => handleDateChange(date, 'start')}
+                showTimeSelect
                 dateFormat="yyyy.MM.dd HH:mm"
                 timeIntervals={10} // 10분 간격으로 시간 선택
               />

diff --git a/src/types/PersonalBlock.ts b/src/types/PersonalBlock.ts
@@ -13,7 +13,8 @@ export interface BlockListResDto {
   startDate?: string | null;
   deadLine?: string | null;
   nickname?: string;
-  dDay?: number;
+  // dDay?: number;
+  dDay?: string;
   dType?: 'PersonalDashboard';
   picture?: string;
 }