: 게임 로직에서 발생하는 타이머 에러 해결 및 과정
마피아 시나리오:
저녁시간에서 아침시간으로 넘어가는 로직의 모달창 겹치는 에러 발생
원인:
아래의 로직을 살펴보면,
실제 클라이언트 측은 타이머가 -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초 단위로 쪼개어 구현