[FIX] useCountdownTimer 서버 시간 오차 이슈 해결 (#48)

* fix: useCountdownTimer 서버 시간 오차 이슈 해결 * fix: lint 에러 수정 * feat: api params 수정 대응
Kernel360 · Oct 10, 2024 · f207280 · f207280
1 parent e74c4bc
commit f207280
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 25 deletions.
diff --git a/src/apis/types/basicAuction.ts b/src/apis/types/basicAuction.ts
@@ -68,7 +68,7 @@ export interface PostBasicAuctionResponse extends CommonResponse {
 // -----
 export interface GetBasicAuctionListParams {
   title?: string;
-  sort?: string[];
+  sort?: string;
   page?: number;
   size?: number;
 }
diff --git a/src/app/basicauction/basicauction.tsx b/src/app/basicauction/basicauction.tsx
@@ -16,7 +16,7 @@ function BasicAuction() {
 
   const { data } = useGetBasicAuctionList({
     title: searchKeywordParam || '',
-    sort: ['endDate,DESC', 'startDate,ASC'],
+    // sort: '', // ['endDate,DESC', 'startDate,ASC'],
     page: 0,
     size: 10,
   });

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -6,7 +6,7 @@ import AuctionList from '@/components/AuctionList';
 export default function Home() {
   const { data } = useGetBasicAuctionList({
     title: '',
-    sort: ['endDate,DESC', 'startDate,ASC'],
+    // sort: '', // ['endDate,DESC', 'startDate,ASC'],
     page: 0,
     size: 4,
   });

diff --git a/src/components/AuctionInfo/AuctionCountdown.tsx b/src/components/AuctionInfo/AuctionCountdown.tsx
@@ -13,9 +13,7 @@ function AuctionCountdown({ endTime, setExpired }: AuctionCountdownProps) {
   const { isTimeout, day, hour, minute, second } = useCountdownTimer({ endTime });
 
   useEffect(() => {
-    if (isTimeout) {
-      setExpired(true);
-    }
+    setExpired(isTimeout);
   }, [isTimeout, setExpired]);
 
   return <div className={S.countdownStyle}>{`${day}일 ${hour}시간 ${minute}분 ${second}초`}</div>;

diff --git a/src/hooks/useCountdownTimer.ts b/src/hooks/useCountdownTimer.ts
@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from 'react';
 
+import calcRemainingTime from '@/utils/calcRemainingTime';
+
 interface UseCountdownTimerProps {
   endTime: Date | string;
 }
@@ -11,23 +13,12 @@ const HOUR_IN_MILLIS = MINUTE_IN_MILLIS * 60;
 const DAY_IN_MILLIS = HOUR_IN_MILLIS * 24;
 
 function useCountdownTimer({ endTime }: UseCountdownTimerProps) {
-  const countRemainingTime = (endTimeInCountRemainingTime: Date) => {
-    const nowTime = new Date();
-
-    if (endTimeInCountRemainingTime.getTime() < nowTime.getTime()) {
-      return 0;
-    }
-
-    return endTimeInCountRemainingTime.getTime() - nowTime.getTime();
-  };
-
-  const [remainingTime, setRemainingTime] = useState<number>(() =>
-    countRemainingTime(new Date(endTime)),
-  );
+  const [remainingTime, setRemainingTime] = useState<number>(0);
 
   useEffect(() => {
+    setRemainingTime(calcRemainingTime(new Date(endTime)));
     const intervalID = setInterval(() => {
-      const remainingTimeInUseEffect = countRemainingTime(new Date(endTime));
+      const remainingTimeInUseEffect = calcRemainingTime(new Date(endTime));
 
       if (remainingTimeInUseEffect <= 0) {
         clearInterval(intervalID);
@@ -41,12 +32,12 @@ function useCountdownTimer({ endTime }: UseCountdownTimerProps) {
     return () => {
       clearInterval(intervalID);
     };
-  });
+  }, []);
 
-  const day = Math.floor(remainingTime / DAY_IN_MILLIS);
-  const hour = Math.floor((remainingTime % DAY_IN_MILLIS) / HOUR_IN_MILLIS);
-  const minute = Math.floor((remainingTime % HOUR_IN_MILLIS) / MINUTE_IN_MILLIS);
-  const second = Math.floor((remainingTime % MINUTE_IN_MILLIS) / 1000);
+  const day = Math.floor(remainingTime / DAY_IN_MILLIS) || '-';
+  const hour = Math.floor((remainingTime % DAY_IN_MILLIS) / HOUR_IN_MILLIS) || '-';
+  const minute = Math.floor((remainingTime % HOUR_IN_MILLIS) / MINUTE_IN_MILLIS) || '-';
+  const second = Math.floor((remainingTime % MINUTE_IN_MILLIS) / 1000) || '-';
   const isTimeout = remainingTime <= 0;
 
   return { isTimeout, remainingTime, day, hour, minute, second };

diff --git a/src/utils/calcRemainingTime.ts b/src/utils/calcRemainingTime.ts
@@ -0,0 +1,11 @@
+function calcRemainingTime(endTimeInCountRemainingTime: Date) {
+  const nowTime = new Date();
+
+  if (endTimeInCountRemainingTime.getTime() < nowTime.getTime()) {
+    return 0;
+  }
+
+  return endTimeInCountRemainingTime.getTime() - nowTime.getTime();
+}
+
+export default calcRemainingTime;