[FIX] AI 추천 시간 입력이 트리거와 전송 데이터에 즉시 반영되지 않던 문제 수정

[kimminna]

ISSUE 🔗

close #192

What is this PR? 🔍

Todo 생성 모달의 시간 선택기(TimeSelector)에서 직접 시간을 입력해도 트리거 라벨과 실제 전송되는 duration 값이 갱신되지 않던 문제를 수정했습니다.

배경

• 기존 구조: TimeSelector의 두 입력창은 시:분(h:mm)을 그대로 편집하는 컨트롤인데, useTimeField 훅은 여기에 넘기는 값을 서버 전송용 총분:초 포맷(예: "90:00")으로 그대로 넘기고 있었습니다.
• 발생 문제: 입력창엔 90/00처럼 의도와 다른 숫자가 채워졌고, 00:03처럼 짧은 값을 입력하면 내부적으로 "0분 3초"(3초)로 저장되면서, 트리거 라벨은 h:mm 단위만 표시하는 formatDurationAsClockLabel을 거쳐 항상 0:00으로 보였습니다. 즉 아무리 입력해도 트리거가 반영되지 않는 것처럼 보였습니다.
• 해결 방향: 입력창과 트리거 라벨을 모두 시:분(h:mm) 표기로 통일하고, 서버 전송 직전에만 총분:초 포맷으로 변환하도록 데이터 흐름을 분리했습니다.

use-time-field

• 변경 요약: handleDurationInputChange가 입력값을 h:mm으로 해석해 트리거 라벨(timeDisplay)에 즉시 반영하도록 수정했습니다.
• 이유: 기존에는 입력값을 그대로 mm:ss(서버 포맷)로 취급해 저장했기 때문에, h:mm 기준으로 그리는 트리거 라벨과 단위가 어긋나 사용자가 입력한 값이 반영되지 않는 것처럼 보였습니다.
• 구현 방식: 사용자가 타이핑한 h:mm 문자열을 formatDurationInput으로 정제한 뒤 그대로 timeDisplay에 반영합니다. 이어서 시(hour)·분(minute)을 초 단위로 환산(hours * SECONDS_PER_HOUR + minutes * SECONDS_PER_MINUTE)하고, convertSecondsToApiDuration으로 서버가 요구하는 총분:초 포맷으로 변환해 field.onChange에 전달합니다. 훅이 반환하는 duration(TimeSelector의 time prop)도 recommendedDuration ?? field.value(서버 포맷) 대신 timeDisplay(h:mm)로 바꿔, 트리거 라벨과 입력창이 항상 같은 값을 보도록 통일했습니다.
• 경계 · 제약: AI 추천 시간(applyRecommendedDuration)과 프리셋 선택(handleSelectTime)은 기존에도 formatDurationAsClockLabel로 서버 포맷 → h:mm 변환을 거치고 있어 이번 변경과 자연스럽게 맞물립니다. Detail(수정) 모달의 use-detail-todo-form.ts는 이번 버그의 재현 경로가 아니고 별도 제출 로직도 아직 연결되어 있지 않아 이번 PR 범위에서 제외했습니다.

TimeSelector (design-system)

• 변경 요약: 두 입력창의 aria-label을 "분/초"에서 실제 의미인 "시간/분"으로 수정했습니다.
• 이유: 컴포넌트가 받는 값은 처음부터 h:mm이었지만 접근성 라벨은 "분/초"로 잘못 표기되어 있어, 스크린 리더 사용자에게 잘못된 정보를 제공하고 있었습니다.
• 구현 방식: 로직 변경 없이 aria-label 문자열만 "예상 시간(시간) 입력", "예상 시간(분) 입력"으로 수정했습니다.

To Reviewers

useTimeField가 반환하는 duration 필드의 의미를 "서버 전송 포맷"에서 "트리거/입력창 표시용 h:mm"으로 바꿨습니다. 현재 소비처는 CreateTodoModalContent.tsx의 time={timeField.duration} 한 곳뿐이라 영향 범위는 작지만, 이름이 여전히 duration이라 향후 헷갈릴 수 있어 참고해 주세요.
Detail(수정) 모달 쪽 use-detail-todo-form.ts는 이미 time 필드를 h:mm으로 다루고 있어 이번 버그가 재현되지 않았고, 아직 실제 제출 로직에 연결되어 있지 않아 이번 PR에서 함께 손대지 않았습니다.

Screenshot 📷

Test Checklist ✔

• pnpm check-types 통과
• pnpm lint 통과
• pnpm build 통과
• Todo 생성 모달에서 AI 추천 후 시간 직접 수정 시나리오 브라우저 확인 — 미실행: dev 서버/로그인 세션 필요, 후속으로 진행 예정

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
timo	Ready	Preview, Comment	Jul 14, 2026 1:52pm

[github-actions]

Storybook Preview

항목	링크
Storybook	열기
Chromatic 빌드	확인

마지막 업데이트: 2026-07-14 13:52 UTC

[coderabbitai]

Warning

Review limit reached

@kimminna, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 46 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 9d504c83-9c8e-43e4-88d4-3b38965caafb

📥 Commits

Reviewing files that changed from the base of the PR and between 3ec7ed7 and f023126.

📒 Files selected for processing (2)

• apps/timo-web/hooks/todo-modal/use-time-field.ts
• packages/timo-design-system/src/components/time/time-selector/TimeSelector.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/web/192-time-selector-format-mismatch

---

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

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Timo Performance Report

Bundle Size — timo-web

라우트	크기	First Load JS
/[locale]/home	208.03 kB	🔴 413.89 kB
/[locale]/today	191.40 kB	🔴 397.25 kB
/[locale]/focus	158.78 kB	🔴 364.64 kB
/[locale]/settings	166.21 kB	🔴 372.06 kB
/[locale]/statistics	153.78 kB	🔴 359.64 kB
/[locale]/[...rest]	0 B	🟡 205.86 kB
/[locale]/login	212.92 kB	🔴 418.78 kB
/[locale]/oauth/callback	119.57 kB	🟡 325.42 kB
/[locale]/onboarding	232.81 kB	🔴 438.67 kB
/[locale]	118.95 kB	🟡 324.80 kB
/[locale]/policy	125.05 kB	🟡 330.91 kB

공유 번들: 205.86 kB
🟢 < 200kB  |  🟡 < 350kB  |  🔴 ≥ 350kB (First Load JS · gzip)

Lighthouse — timo-web

URL	Perf	A11y	LCP	CLS	TBT
/en/home	🔴 61	🟢 95	🔴 15.6s	🟢 0.000	🟡 509ms
/en/today	🔴 63	🟢 95	🔴 15.5s	🟢 0.000	🟡 452ms
/en/focus	🔴 59	🟢 95	🔴 15.2s	🟢 0.000	🔴 601ms
/en/statistics	🔴 60	🟢 95	🔴 15.2s	🟢 0.000	🟡 586ms

Perf ≥ 70 / A11y ≥ 85 목표
LCP 🟢 < 2.5s 🟡 < 4s 🔴 ≥ 4s  |  CLS 🟢 < 0.1 🟡 < 0.25 🔴 ≥ 0.25  |  TBT 🟢 < 200ms 🟡 < 600ms 🔴 ≥ 600ms

Image Optimization — timo-web

파일	크기	포맷	상태
images/google-calendar.png	36.20 kB	PNG ⚠️	🟢
images/google-logo.png	26.79 kB	PNG ⚠️	🟢

총 2개 · 63.00 kB  |  🟢 < 200KB  |  🟡 < 500KB  |  🔴 ≥ 500KB
⚠️ 2개 파일 WebP/AVIF 변환 권장

측정 커밋: dbd34af