diff --git a/src/apis/types/basicAuction.ts b/src/apis/types/basicAuction.ts index d804bfb..3ae5a2a 100644 --- 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 index 8aa52a5..d15f4a5 100644 --- 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 index 96ebe19..091ed5f 100644 --- 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 index 65c2a50..7f9597a 100644 --- 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
{`${day}일 ${hour}시간 ${minute}분 ${second}초`}
; diff --git a/src/hooks/useCountdownTimer.ts b/src/hooks/useCountdownTimer.ts index 588c8d6..4b6447d 100644 --- 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(() => - countRemainingTime(new Date(endTime)), - ); + const [remainingTime, setRemainingTime] = useState(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 new file mode 100644 index 0000000..6c11e3a --- /dev/null +++ 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;