hotfix: 타이머에서 Date 객체를 사용했을 때 발생하는 에러 dayjs 라이브러리로 교체해서 해결 (#108)

* fix: Date 객체를 dayjs 라이브러리로 교체

src/components/timer/Timer.tsx

@@ -8,12 +8,12 @@ import { Span, TextWrapper, Time, Wrapper } from './Timer.styles';
 const Timer = ({ deadLine }: TimerTypes) => {
  const [isTimeExpired, setIsTimeExpired] = useState<boolean>(false);
 
- const targetDate = new Date(deadLine.replace(' ', 'T'));
+ const targetDate = dayjs(deadLine).format('YYYY-MM-DD HH:mm:00');
  const { days, hours, minutes, seconds } = getCountdown(targetDate);
 
  useEffect(() => {
  if (!isTimeExpired) {
- const now = dayjs(new Date());
+ const now = dayjs();
  const end = dayjs(deadLine);
 
  if (end.diff(now) < 1000) {

src/utils/getCountdown.ts

@@ -1,17 +1,16 @@
+import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 
-export const getCountdown = (targetDate: Date) => {
- const countDownDate = new Date(targetDate).getTime();
+export const getCountdown = (targetDate: string) => {
+ const deadLine = dayjs(targetDate).format('YYYY-MM-DD HH:mm:00');
 
- const [countDown, setCountDown] = useState(
- countDownDate - new Date().getTime()
- );
+ const [countDown, setCountDown] = useState(dayjs(deadLine).diff(dayjs()));
 
  useEffect(() => {
  setInterval(() => {
- setCountDown(countDownDate - new Date().getTime());
+ setCountDown(dayjs(deadLine).diff(dayjs()));
  }, 1000);
- }, [countDownDate]);
+ }, [deadLine]);
 
  return getReturnValues(countDown);
 };