TIL 112. 2024-06-10

세 번째 해결방안)

• 근본적인 문제
  : 서버와 클라이언트 간의 서로 다른 setInterval 구조로 인해 완벽한 타이밍을 맞출 수 없다고 판단

• 시간을 0.1s로 쪼개어 모달창이 겹치지 않는 범위의 시간을 찾아 구현

1) 아래의 코드 해석

• 기존 progressbar의 max값은 100
• 현재 max 값을 70 ~80으로 지정
• 초단위로 progressbar 게이지를 채울 시 UI적으로 끊기는 모습을 볼 수 있다. 이를 해결하기위해 1초 단위가 아닌 0.1초 단위로 쪼개어 구현

2) 아래의 progressbar 값
ex) Timer: 10초일 경우
순서) value: 1,2,3,4,5,6 ... 100

ex) Timer: 5초일 경우
순서) value: 0,2,4,6,8 …. 100

ex) Timer: 3초일 경우
순서) value: 3.33, 6.66, 10, 13.33, 16.66, 20 ... 100

const ModalProgress = () => {
  const isModal = useModalIsOpen();
  const timer = useModalTimer();
  const [count, setCount] = useState(timer * 10);

  const { setIsOpen } = useModalActions();

  //NOTE - 타이머 기능
  useCountDown(() => setCount((prevCount) => prevCount - 1), 100, isModal);

  // 모달창 종료
  useEffect(() => {
    if (count <= 7 && isModal) {
      setIsOpen(false);
    }
  }, [count]);

  return (
   <>
      {timer === 3 && (
        <progress className={S.progress} value={(timer * 10 - count) * (100 / (timer * 10))} max={63}></progress>
      )}
      {timer === 5 && (
        <progress className={S.progress} value={(timer * 10 - count) * (100 / (timer * 10))} max={78}></progress>
      )}
      {timer === 10 && (
        <progress className={S.progress} value={(timer * 10 - count) * (100 / (timer * 10))} max={89}></progress>
      )}
    </>
  );
};

export default ModalProgress;