[Fix] 타이머 기능 개선

[Cllaude99]

개요

Resolves: #181

PR 유형

어떤 변경 사항이 있나요?

• 버그 수정

작업 내용

기존의 타이머에는 진행바가 다 소모되지 않았는데도 타이머가 먼저 끝난 문제점이 있었습니다. 이를 해결하기 위해 기존 코드를 검토한 결과, setInterval의 지연과 상태 업데이트와 UI 표현의 미묘한 타이밍 차이가 원인임을 발견했습니다. 기존 코드의 경우 setInterval을 사용하여 1초마다 상태를 업데이트하고, 진행바 애니메이션을 동기화했습니다. 하지만 브라우저의 처리 지연으로 인해 진행바와 상태가 항상 정확히 일치하지는 않았습니다. 결과적으로 진행바가 완전히 줄어들지 않았는데도 타이머가 종료되어 다음 단계로 넘어가는 문제가 발생했습니다. 이를 해결하기 위해 requestAnimationFrame을 도입했습니다. 이를 통해 브라우저의 리페인트 주기에 맞춰 실행되어 더욱 정확한 애니메이션과 타이밍을 제공할 수 있었고, 시작 시간을 기준으로 현재 경과 시간을 계산하여 상태를 업데이트하여, 지연 없이 정확한 동작이 가능하도록 하였습니다.


스크린샷

2024-11-28.11.48.01.mov

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• 커밋 메시지 컨벤션에 맞게 작성했습니다. Commit message convention 참고 (Ctrl + 클릭하세요.)
• 변경 사항에 대한 테스트를 했습니다.(버그 수정/기능에 대한 테스트).