타이머 UI 작업

종료 날짜를 현재 시간과 비교해서 종료하기 5분 전에 타이머를 띄워주는 UI를 구현해보았습니다.

아래 코드 참고

// 남은 시간
const remainTimeLimit = dayjs(data?.space.liveTourEndAt).diff(
    dayjs(),
    'second',
  );

// 남은 시간을 담는 변수
const [remainingSeconds, setRemainingSeconds] =
    useState<number>(remainTimeLimit);

const minutes = Math.floor(remainingSeconds / 60);

const seconds = remainingSeconds % 60;

 // 타이머 실행을 위한 함수 추가
 useEffect(() => {
    const limitedTimer = setTimeout(() => {
      setRemainingSeconds((prev) => Math.max(0, prev - 1));
      if (remainingSeconds <= 300) {
        setIsTimer(true);
      }
    }, 1000);

    return () => clearTimeout(limitedTimer);
  }, [remainingSeconds]);

  useEffect(() => {
    if (remainingSeconds === 0) {
      setIsTimer(false);
      setIsTimerTerminated(true);
    }
  }, [isTimer, remainingSeconds]);