[React][TypeScript][Library] 날짜, 시간 카운트다운 라이브러리 react-countdown를 사용해보자

 

내가 원하는 모습은 위 사진과 같다.

처음엔 moment 라이브러리로 시간 차이를 구해서 카운트 다운을 해주려고 했는데 관련 라이브러리가 있어서 사용해보았다

 

 

라이브러리 설명은 아래 링크에 들어가서 보면 된다.

https://www.npmjs.com/package/react-countdown

react-countdown

먼저 인스톨을 하고

npm i react-countdown

코드는 아래와 같다

import Countdown from "react-countdown";
.
.
.
 const targetDate = new Date(convertUnixTimestamp(Number(secondContent)));

  // Renderer callback with condition
  const renderer = ({
    hours,
    minutes,
    seconds,
    completed,
  }: {
    hours: number;
    minutes: number;
    seconds: number;
    completed: boolean;
  }) => {
    if (completed) {
      // Render a completed state
      return (
        <span>
          {hours >= 10 ? hours : `0${hours}`}:{minutes >= 10 ? minutes : `0${minutes}`}:
          {seconds >= 10 ? seconds : `0${seconds}`}
        </span>
      );
    }
    // Render a countdown
    return (
      <span>
        {hours >= 10 ? hours : `0${hours}`}:{minutes >= 10 ? minutes : `0${minutes}`}:
        {seconds >= 10 ? seconds : `0${seconds}`}
      </span>
    );
  };

  return (
    <Container isUnderLine={isUnderLine}>
      <div>
        <span className="topText">{title}</span>
      </div>
      <div className="contentBox">
        {isBlackText ? (
          <div>
            <span className="blackText">{content}</span>
            {title === t("FCD") && <Countdown date={targetDate} renderer={renderer} />}
          </div>
        ) : (
          <div>
            {" "}
            <ColorText status={contentStatus || false}>{content}</ColorText>
            <span className="topText">{secondContent || ""}</span>
          </div>
        )}
      </div>
    </Container>
  );
}