TIL 109. 2024-06-05

✨ 개발 내용

: 게임 로직에서 발생하는 타이머 에러 해결 및 과정

1. 상황

마피아 시나리오:
저녁시간에서 아침시간으로 넘어가는 로직의 모달창 겹치는 에러 발생

원인:
아래의 로직을 살펴보면,
실제 클라이언트 측은 타이머가 -1초일 경우 모달창이 종료된다. 하지만 server에서는 0초일 경우, 다음 시나리오 로직을 수행하므로 이로 인해 모달창이 겹치는 현상이 발생하였다고 판단

기존 "ModalProgress 컴포넌트" 로직을 해석

const ModalProgress = () => {
  const isModal = useModalIsOpen();
  const timer = useModalTimer();
  const [count, setCount] = useState(timer * 10);
  //NOTE - 타이머 기능
  useCountDown(() => setCount((prevCount) => prevCount - 1), 100, isModal);


  //0보다 작을 경우 -> 모달창 종료
  useEffect(() => {
    if (count < 0 && isModal) {
      console.log("모달창 종료");
      setIsOpen(false);
    }
  }, [count]);

return(
  <progress className={S.progress} value={(timer * 10 - count) * (100 / (timer * 10))} max={100}></progress>
  )
}

알아두기

• progress value값을 0.1초 단위로 실행
  이유: 초단위로 progressbar 게이지를 채울 시 UI적으로 끊기는 모습을 볼 수 있다. 이를 해결하기위해 타이머를 1초 단위가 아닌 0.1초 단위로 쪼개어 구현