Skip to content

feat(client): 레벨 페이지 시간 포맷 수정 #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jjangminii merged 1 commit into from
Oct 2, 2025
Merged

feat(client): 레벨 페이지 시간 포맷 수정 #177

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions apps/client/src/pages/level/hooks/useCountdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ export function useCountdown(targetTime: string) {

useEffect(() => {
const target = new Date(targetTime).getTime();
const DAY = 24 * 60 * 60 * 1000;

const interval = setInterval(() => {
const now = new Date().getTime();
const now = Date.now();
const diff = target - now;

if (diff <= 0) {
Expand All @@ -16,12 +17,16 @@ export function useCountdown(targetTime: string) {
return;
}

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;
Copy link

@coderabbitai coderabbitai bot Oct 2, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

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.

Suggested change
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.

Copy link
Collaborator Author

@jjangminii jjangminii Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저 의도가 맞아요 24시간 이상의 시간이 24시간 이내 목표 시간까지 얼마나 남았는지 필요해서 그래요

Copy link

@coderabbitai coderabbitai bot Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jjangminii, 이해했습니다! 24시간 이상 남은 경우에도 현재 24시간 주기 내에서 목표 시간까지 남은 시간만 표시하는 것이 의도이시군요.

예를 들어:

  • 목표 시간이 25시간 후 → "01:00:00" 표시 (다음 24시간 주기에서 1시간 남음)
  • 목표 시간이 48시간 후 → "00:00:00" 표시 (정확히 2일 후)

diff % DAY 로직이 이 요구사항을 정확히 구현하고 있습니다. 제 이전 코멘트는 철회하겠습니다. 의도를 명확히 해주셔서 감사합니다! 👍


const format = (n: number) => String(n).padStart(2, '0');
setTimeLeft(`${format(hours)}:${format(minutes)}:${format(seconds)}`);
const hours = Math.floor(displayDiff / (1000 * 60 * 60));
const minutes = Math.floor(
(displayDiff % (1000 * 60 * 60)) / (1000 * 60)
);
const seconds = Math.floor((displayDiff % (1000 * 60)) / 1000);

const pad = (n: number) => String(n).padStart(2, '0');
setTimeLeft(`${pad(hours)}:${pad(minutes)}:${pad(seconds)}`);
}, 1000);

return () => clearInterval(interval);
Expand Down
Loading