MINE - 카운트다운

남은 경매 시간을 직관적으로 표시할 수 있게 카운트다운 컴포넌트를 만들었다.

<Countdown targetDateString={product.auctiondeadline} />

다음과 같이 종료 시간 문자열을 prop으로 전달한다.

참고로 종료 시간은 Thu May 16 2024 10:26:00 GMT+0900 (한국 표준시)의 형식으로 되어있다.

const targetDate = new Date(props.targetDateString);
const currentDate = new Date();
    
const timeDifference = targetDate.getTime() - currentDate.getTime();

전달받은 종료시간으로 Date 객체를 생성하고, 현재시간으로도 Date 객체를 생성해 이 둘을 비교해 timeDifference를 구한다.

const seconds = Math.floor(timeDifference / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);

// times 상태를 업데이트
setTimes([days, hours % 24, minutes % 60, seconds % 60]);

이렇게 구한 timeDifference를 간단한 계산을 통해 일, 시, 분, 초로 나누고 상태를 저장해준다.

이 함수를 1초마다 실행해주면 간단한 카운트다운을 만들 수 있다.