TIL 110. 2024-06-06

첫 번째 해결방안)

• 서버측과 동일하게 클라이언트측의 모달창 종료 시간을 0초로 설정
  
  

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) {
      setIsOpen(false);
    }
  }, [count]);

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

코드 해석:

• 기존) 타이머가 "0"일 경우의 progressbar value값 100이 UI에 표시되었으며, 타이머가 "-1"일 경우에 모달창이 종료
• 변경) 현재는 타이머가 "0"일 경우 모달창이 종료되므로 value 값인 90을 Max 값으로 설정

progressBar의 value 식이 아닌 max 값을 변경한 이유

• countDown을 통해 숫자가 작아질 수록 value은 높아지는 반비례식으로 형성
• value값의 count에 +1 를 하여 1초일 경우에 max 값이 100되도록 설정할 수 있지만 추후 유지보수 좋지 않다고 판단하였다.
• 코드를 해석하는 측면에서 수학식을 해석하기보다는"왜 max 값을 이렇게 설정했지?"라는 측면으로 바라봤을 때 좀 더 쉽게 해석할 수 있다고 판단했기 때문이다.

첫 번째 결과)

• 모달창 겹치는 현상이 해결되지 않는 걸 확인할 수 있었다. 첫 번째 방법으로 문제가 해결되지 않은 이유는, Socket.io 기반의 양방향 통신 환경에서도 서버와 클라이언트 간의 시간 차이로 인해 모달 창이 겹치는 현상이 발생했기 때문이라고 판단하였다.