Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough카운트다운 훅의 시간 계산 방식을 리팩터링했습니다. Date.now() 사용, 하루(ms) 상수 추가, 하루 단위로 래핑하는 displayDiff 도입, 시·분·초 계산 로직 업데이트, 숫자 패딩 유틸리티(pad)로 포매팅 정리, 0 이하일 때 초기화 동작은 유지했습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant UI as Level Page
participant Hook as useCountdown
participant Timer as setInterval
participant Clock as Date.now()
UI->>Hook: useCountdown(start, end)
Hook->>Timer: setInterval(tick, 1000)
loop every second
Timer->>Clock: now = Date.now()
Clock-->>Timer: ms
Timer->>Hook: compute diff
alt diff <= 0
Hook->>Timer: clearInterval()
Hook->>UI: set "00:00:00"
else diff > 0
Note over Hook: displayDiff = diff % DAY (하루 래핑)
Hook->>UI: set hh:mm:ss (pad 적용)
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
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. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/client/src/pages/level/hooks/useCountdown.ts(2 hunks)
🔇 Additional comments (2)
apps/client/src/pages/level/hooks/useCountdown.ts (2)
8-11: 코드 개선이 적절합니다.
DAY상수 추가와Date.now()사용은 코드 가독성과 성능 측면에서 좋은 개선입니다.
28-29: 포매팅 로직이 깔끔하게 개선되었습니다.
pad함수는 명확하고 간결하며,padStart를 활용한 구현이 적절합니다.
| const hours = Math.floor(diff / (1000 * 60 * 60)); | ||
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | ||
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | ||
| const displayDiff = diff > DAY ? diff % DAY : diff; |
There was a problem hiding this comment.
24시간 이상 카운트다운이 정확하게 표시되지 않습니다.
diff % DAY 로직은 24시간을 초과하는 카운트다운에서 문제를 일으킵니다:
- 목표 시간이 2일 후라면
displayDiff = 0이 되어 "00:00:00"으로 표시됩니다. - 목표 시간이 25시간 후라면
displayDiff = 1시간이 되어 "01:00:00"으로 표시되어 실제 남은 시간을 알 수 없습니다. - 매 24시간마다 카운트다운이 "리셋"되는 것처럼 보여 사용자에게 혼란을 줄 수 있습니다.
24시간 이상의 카운트다운을 올바르게 표시하려면 다음 중 하나를 선택하세요:
방안 1: 일(day) 단위를 별도로 표시
- const displayDiff = diff > DAY ? diff % DAY : diff;
+ const days = Math.floor(diff / DAY);
+ const remainingMs = diff % DAY;
- const hours = Math.floor(displayDiff / (1000 * 60 * 60));
+ const hours = Math.floor(remainingMs / (1000 * 60 * 60));
const minutes = Math.floor(
- (displayDiff % (1000 * 60 * 60)) / (1000 * 60)
+ (remainingMs % (1000 * 60 * 60)) / (1000 * 60)
);
- const seconds = Math.floor((displayDiff % (1000 * 60)) / 1000);
+ const seconds = Math.floor((remainingMs % (1000 * 60)) / 1000);
const pad = (n: number) => String(n).padStart(2, '0');
- setTimeLeft(`${pad(hours)}:${pad(minutes)}:${pad(seconds)}`);
+ setTimeLeft(days > 0 ? `${days}일 ${pad(hours)}:${pad(minutes)}:${pad(seconds)}` : `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`);방안 2: 시간을 24시간 이상 표시 (예: "25:30:15")
- const displayDiff = diff > DAY ? diff % DAY : diff;
-
- const hours = Math.floor(displayDiff / (1000 * 60 * 60));
+ const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor(
- (displayDiff % (1000 * 60 * 60)) / (1000 * 60)
+ (diff % (1000 * 60 * 60)) / (1000 * 60)
);
- const seconds = Math.floor((displayDiff % (1000 * 60)) / 1000);
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const displayDiff = diff > DAY ? diff % DAY : diff; | |
| // Instead of wrapping every 24h, compute days + remaining ms | |
| const days = Math.floor(diff / DAY); | |
| const remainingMs = diff % DAY; | |
| const hours = Math.floor(remainingMs / (1000 * 60 * 60)); | |
| const minutes = Math.floor((remainingMs % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((remainingMs % (1000 * 60)) / 1000); | |
| const pad = (n: number) => String(n).padStart(2, '0'); | |
| setTimeLeft( | |
| days > 0 | |
| ? `${days}일 ${pad(hours)}:${pad(minutes)}:${pad(seconds)}` | |
| : `${pad(hours)}:${pad(minutes)}:${pad(seconds)}` | |
| ); |
🤖 Prompt for AI Agents
In apps/client/src/pages/level/hooks/useCountdown.ts around line 20, the current
displayDiff = diff > DAY ? diff % DAY : diff causes countdowns >24 hours to
wrap/reset and display incorrect hours; fix by either (A) compute days =
Math.floor(diff / DAY) and keep remainder = diff % DAY then render days
separately while formatting remainder as HH:MM:SS, or (B) stop applying % DAY
and render total hours by computing hours = Math.floor(diff / HOUR) (which may
be >=24) and format as HH+:MM:SS; update the downstream formatting/rendering
code to accept and display the chosen days or multi-hour format accordingly.
There was a problem hiding this comment.
저 의도가 맞아요 24시간 이상의 시간이 24시간 이내 목표 시간까지 얼마나 남았는지 필요해서 그래요
There was a problem hiding this comment.
@jjangminii, 이해했습니다! 24시간 이상 남은 경우에도 현재 24시간 주기 내에서 목표 시간까지 남은 시간만 표시하는 것이 의도이시군요.
예를 들어:
- 목표 시간이 25시간 후 → "01:00:00" 표시 (다음 24시간 주기에서 1시간 남음)
- 목표 시간이 48시간 후 → "00:00:00" 표시 (정확히 2일 후)
diff % DAY 로직이 이 요구사항을 정확히 구현하고 있습니다. 제 이전 코멘트는 철회하겠습니다. 의도를 명확히 해주셔서 감사합니다! 👍
jllee000
left a comment
jllee000
left a comment
There was a problem hiding this comment.
옹 깔쌈한 분기처리! 하루 지나가버린건 없애버려!
2 participants
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
📷 Screenshot
Summary by CodeRabbit