dayjs()를 활용한 날짜 차이 구하기

곽재훈·2024년 7월 25일
1
const ChallengeCard = ({ challenge }: ChallengeCard) => {
  console.log(challenge.startDate);
  const today = dayjs();
  const ChallengeStartDate = dayjs(challenge.startDate);
  const restDate = ChallengeStartDate.diff(today, 'day') + 1;
  console.log(restDate);

  return (
    <article>
      <div className="relative w-full aspect-square rounded-xl overflow-hidden">
        <Image src={challenge.imageURL} alt={challenge.title} fill style={{ objectFit: 'cover' }} />
      </div>
      <h3 className="mt-2 text-lg font-semibold">{challenge.title}</h3>

      <span className="text-sm text-gray-500">{restDate === 1 ? '내일부터 시작' : `${restDate}일 뒤에 시작`}</span>
    </article>
  );
};

export default ChallengeCard;

오늘 아이템 목록의 시작날짜랑 오늘날짜를 비교해서 시작까지 남은 기간을 알려주는 기능을 구현했는데, dayjs의 diff라는 method를 이용하니까 이를 굉장히 쉽게 구현할 수 있었다.

profile
개발하고 싶은 국문과 머시기

0개의 댓글

관련 채용 정보