[FIX] 타이머 로직 보강 및 버그 수정

[i-meant-to-be]

🚩 연관 이슈

closed #22

📝 작업 내용

타이머 로직 보강 및 버그 수정

내용이 너무 길고 많아서 다음 링크로 대체합니다: debate-timer-fe PR #334

버전 업

1.0.1에서 1.0.2로

🏞️ 스크린샷 (선택)

없음

🗣️ 리뷰 요구사항 (선택)

동일한 PR이 debate-timer-fe 저장소에서 승인되고 병합되었으므로, 이 저장소에서는 별도 PR 리뷰 없이 병합합니다.

Summary by CodeRabbit

• New Features

  • 타이머 배경 상태를 관리하는 새로운 기능이 추가되어, 남은 시간에 따라 배경색이 자동으로 변경됩니다.
  • 타이머 관련 상태와 스타일이 더욱 세분화되어, 'default', 'warning', 'danger', 'expired' 등 다양한 배경 상태가 적용됩니다.

• 버그 수정

  • 타이머 리셋 및 캠프 전환 시 상대방 타이머의 상태를 반영하여 동작이 보다 정확해졌습니다.
  • 스피커 번호 표시 조건이 수정되어, 추가 타이머가 꺼져 있을 때만 표시됩니다.

• 리팩터

  • 타이머 로직이 시간 기반 계산 방식으로 개선되어, 더 정확한 타이머 동작을 제공합니다.
  • 배경색 상태 관리가 별도 훅으로 분리되어 코드 구조가 개선되었습니다.

• 문서화

  • 일부 주석 및 문서 포맷이 개선되었습니다.

• 기타

  • 버전이 1.0.2로 업데이트되었습니다.

[coderabbitai]

Warning

Rate limit exceeded

@i-meant-to-be has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 20 minutes and 35 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 6c29010 and ab65855.

📒 Files selected for processing (12)

• .storybook/main.ts (1 hunks)
• package.json (1 hunks)
• src/page/TimerPage/TimerPage.tsx (2 hunks)
• src/page/TimerPage/components/NormalTimer.tsx (1 hunks)
• src/page/TimerPage/components/TimerView.tsx (2 hunks)
• src/page/TimerPage/hooks/useBellSound.ts (1 hunks)
• src/page/TimerPage/hooks/useNormalTimer.ts (4 hunks)
• src/page/TimerPage/hooks/useTimeBasedTimer.ts (6 hunks)
• src/page/TimerPage/hooks/useTimerBackground.ts (1 hunks)
• src/page/TimerPage/hooks/useTimerHotkey.ts (2 hunks)
• src/page/TimerPage/hooks/useTimerPageState.ts (8 hunks)
• src/type/type.ts (1 hunks)

Walkthrough

타이머 페이지의 주요 훅(useNormalTimer, useTimeBasedTimer, useTimerPageState)과 관련 컴포넌트에서 시간 총량제 타이머의 버그를 수정하고, 타이머의 상태(배경색 등) 관리 로직을 구조화했습니다. 타이머 리셋 및 전환 로직이 상대 팀의 상태에 따라 정확하게 동작하도록 개선되었으며, 새로운 배경 상태 타입과 매핑도 도입되었습니다.

Changes

Cohort / File(s)	Change Summary
타이머 로직 리팩토링 및 버그 수정 src/page/TimerPage/hooks/useNormalTimer.ts, src/page/TimerPage/hooks/useTimeBasedTimer.ts	타이머를 1초씩 감소시키는 방식에서 목표 시각 기반의 실시간 남은 시간 계산 방식으로 변경. 상대 팀 상태를 인자로 받아 타이머 리셋/전환 시 더 정확하게 동작하도록 API 및 내부 로직 개선. 불필요한 상태값 제거 및 인터페이스 정비.
타이머 페이지 상태 관리 개선 src/page/TimerPage/hooks/useTimerPageState.ts, src/page/TimerPage/hooks/useTimerHotkey.ts, src/page/TimerPage/components/TimerView.tsx, src/page/TimerPage/components/NormalTimer.tsx	타이머 배경 상태 관리 로직을 별도 훅으로 분리(useTimerBackground), 팀 전환 및 타이머 리셋 로직을 상대 팀 상태에 따라 정확히 처리하도록 개선. 핫키 및 UI 렌더링 조건도 새로운 로직에 맞게 수정.
타이머 배경 상태 관리 신설 src/page/TimerPage/hooks/useTimerBackground.ts, src/type/type.ts, src/page/TimerPage/TimerPage.tsx	타이머 배경 상태(TimerBGState)와 CSS 클래스 매핑(bgColorMap) 도입. 새로운 훅(useTimerBackground)으로 타이머 상태에 따른 배경색 결정 로직을 일원화. 관련 타입 및 import 경로 정비.
Storybook/Vite 환경설정 .storybook/main.ts	Storybook의 Vite 환경에서 import.meta.env.MODE를 'test'로 강제 지정하는 설정 추가.
버전 업데이트 package.json	버전 넘버를 1.0.1 → 1.0.2로 증가.
기타 임포트 경로 정리 src/page/TimerPage/TimerPage.tsx	bgColorMap의 임포트 경로를 내부 훅에서 타입 정의 파일로 변경.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant TimerPage
    participant useTimerPageState
    participant useTimeBasedTimer
    participant useNormalTimer

    User->>TimerPage: 페이지 진입/행동(팀 전환, 리셋 등)
    TimerPage->>useTimerPageState: 상태 및 로직 요청
    useTimerPageState->>useTimeBasedTimer: 타이머 시작/리셋/전환 (상대 팀 상태 인자 포함)
    useTimerPageState->>useNormalTimer: 일반 타이머 시작/리셋
    useTimeBasedTimer-->>useTimerPageState: 타이머 상태 및 남은 시간 반환
    useNormalTimer-->>useTimerPageState: 일반 타이머 상태 반환
    useTimerPageState-->>TimerPage: UI 렌더링용 상태 제공

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Assessment against linked issues

Objective	Addressed	Explanation
상대 팀이 모두 시간 소진, 2회 이상 발언할 시간이 남아있을 때, 1회 발언 이후 전체 시간을 전부 소비할 수 없는 문제 수정 (#22)	✅
상대 팀이 모두 시간을 소진했을 때, 현재 팀 발언 시간이 전체 시간과 동일해지는 문제 수정 (#22)	✅

Assessment against linked issues: Out-of-scope changes

Code Change	Explanation
Storybook Vite 환경설정 추가 (.storybook/main.ts)	본 이슈(#22)는 타이머 버그 수정에만 국한되며, Storybook 설정 변경은 직접적인 연관이 없습니다.
버전 넘버 변경 (package.json)	버전 변경은 기능/버그와 직접적으로 연관된 변경사항은 아니나, 릴리즈를 위한 부수적 변경으로 간주할 수 있습니다.

Possibly related PRs

• [FIX] 타이머 좌우 방향키 조작 비활성화 #21: useTimerHotkey에서 키보드 입력 처리 로직을 변경하는 PR로, 본 PR의 핫키 및 타이머 리셋 관련 변경과 코드 레벨에서 연관성이 높음.
• [FIX] 타이머에서 숫자 키패드 Enter가 동작하지 않는 문제 수정 #17: useTimerHotkey에서 NumpadEnter 키 지원을 추가하는 PR로, 본 PR과 같은 훅을 수정하지만 변경 범위는 다름.

Poem

토끼가 깡총깡총 뛰며 외치네,
타이머는 이제 더 똑똑해!
상대가 다 썼을 때,
내 시간은 딱 맞게,
배경색도 바뀌고,
버그는 안녕~
🕰️🐇 “토론의 시간, 이제 완벽!”

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#22

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.