[FIX] 반복일정 투두의 타이머 카드 동기화 오류 수정#241
Conversation
- 타이머 시작/활성 조회 API 응답에 추가된 date 필드를 반영하도록 orval 코드를 재생성했습니다 - 활성 타이머와 투두를 매칭할 때 todoId뿐 아니라 date까지 함께 비교하도록 수정해, 반복일정 투두가 다른 날짜에서도 실행 중으로 표시되던 문제를 해결했습니다
…o/Timo-client into fix/web/236-recurring-todo-timer-sync
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough활성 타이머 스키마에 날짜 필드를 추가하고, 타이머 상태 전환·완료 처리·하이라이트 계산에서 todoId와 날짜를 함께 비교하도록 변경했습니다. 반복 투두의 다른 날짜 항목이 활성 타이머로 잘못 표시되지 않습니다. Changes날짜 기반 활성 타이머 매칭
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related issues
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed due to a network error. 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 |
Timo Performance ReportBundle Size — timo-web
Lighthouse — timo-web
Image Optimization — timo-web
측정 커밋: |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/timo-web/app/`[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts:
- Around line 98-102: The activeTimer condition must explicitly narrow the
nullable value before accessing its properties. Update the condition in
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
lines 98-102,
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts
lines 84-88, and
apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx lines
75-77 to use activeTimer && followed by the todoId and date comparisons,
preserving the existing completed and matching-date behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: a2aed907-ba6d-4bff-8241-7f742c74e628
⛔ Files ignored due to path filters (4)
apps/timo-web/api/generated/endpoints/timer/timer.tsis excluded by!**/generated/**apps/timo-web/api/generated/endpoints/timer/timer.zod.tsis excluded by!**/generated/**apps/timo-web/api/generated/models/timerActiveResponse.tsis excluded by!**/generated/**apps/timo-web/api/generated/models/timerStartResponse.tsis excluded by!**/generated/**
📒 Files selected for processing (7)
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsxapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.tsapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsxapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.tsapps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.tsapps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsxapps/timo-web/schemas/timer/timer-schema.ts
| if ( | ||
| completed && | ||
| activeTimer?.todoId === todoId && | ||
| activeTimer.date === dateKey | ||
| ) { |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
activeTimer 타입 좁히기(Type Narrowing) 및 코드 일관성 개선
동일한 파일 내 다른 핸들러(예: handleTogglePlay)에서는 activeTimer && activeTimer.todoId === todoId 형태로 안전하게 타입을 좁히고 있습니다. 반면 아래 코드들에서는 옵셔널 체이닝(?.)을 사용한 후 다시 activeTimer.date에 직접 접근하고 있어 코드의 일관성이 떨어지며, TypeScript 환경에 따라 타입 좁히기가 완벽하게 동작하지 않아 컴파일 에러가 발생할 여지가 있습니다. (참고: TypeScript: Type Narrowing)
안전하고 통일성 있는 코드를 위해 명시적 Null 체크 방식으로 맞춰주시는 것을 추천해요! 🛠️
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts#L98-L102:activeTimer && activeTimer.todoId === todoId && activeTimer.date === dateKey구조로 수정하세요.apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts#L84-L88: 위와 동일하게 수정하세요.apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx#L75-L77:activeTimer && activeTimer.todoId === todoId && activeTimer.date === date구조로 수정하세요.
📍 Affects 3 files
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts#L98-L102(this comment)apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts#L84-L88apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx#L75-L77
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@apps/timo-web/app/`[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
around lines 98 - 102, The activeTimer condition must explicitly narrow the
nullable value before accessing its properties. Update the condition in
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
lines 98-102,
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts
lines 84-88, and
apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx lines
75-77 to use activeTimer && followed by the todoId and date comparisons,
preserving the existing completed and matching-date behavior.
ISSUE 🔗
close #236
What is this PR? 🔍
반복일정으로 설정된 투두가 같은 todoId를 공유하는 다른 날짜에서도 타이머가 실행 중인 것처럼 잘못 표시되던 문제를 수정했습니다.
배경
todoId로만 매칭해서 "지금 이 투두의 타이머가 실행 중인지"를 판단하고 있었습니다.todoId를 공유하는데, 한 날짜에서 타이머를 재생하면 같은todoId를 가진 다른 날짜의 투두 카드들도 전부 실행 중으로 표시됐습니다.date(타이머가 귀속되는 날짜) 필드를 추가했고, 클라이언트에서도 활성 타이머와 투두를(todoId, date)조합으로 매칭하도록 전 화면의 비교 로직을 수정했습니다.타이머-투두 매칭 로직
todoId단독 비교 대신todoId+date조합으로 비교하도록 수정했습니다./v3/api-docs에서 실제 응답 스펙을 확인해보니startTimer/getActiveTimer두 엔드포인트 모두date가 신규 필수 필드로 추가돼 있었고, API 설명에도 "반복 투두는 여러 날짜에 같은 todoId로 노출되므로, 실행중 표시는 todoId가 아닌 (todoId, date) 조합으로 구분해야 합니다"라고 명시돼 있었습니다.pnpm gen:api로 orval 코드를 재생성해TimerActiveResponse/TimerStartResponse에date: string을 반영했습니다(이번 작업과 무관하게 함께 딸려온 다른 도메인 재생성분은 되돌려 diff에서 제외했습니다). 로컬 zod 스키마activeTimerSchema(schemas/timer/timer-schema.ts)에도date를 추가해 응답을 한 번 더 검증하도록 했습니다. 이후activeTimer.todoId === todo.todoId형태의 비교가 있던 7개 지점(use-focus-session.ts,use-home-todos-by-date.ts2곳,useTodayTodoList.ts2곳,HomeTodoContainer.tsx,TodayTodoListContainer.tsx,DetailTodoModalContainer.tsx2곳)에activeTimer.date === <해당 스코프의 날짜>비교를 추가했습니다. Focus 탭은 개별 투두에 날짜가 없어focusView.date(조회 중인 날짜)와 비교했고, 나머지는 각 화면이 이미 들고 있는dateKey/todo.date와 비교했습니다.TimeboxPanel.tsx의 타임박스-활성타이머 매칭은 이미timerId(세션마다 고유)로 비교하고 있어todoId만으로 인한 모호함이 없었으므로 그대로 뒀습니다.To Reviewers
activeTimer.date와 비교하는 기준 날짜가 화면마다 다릅니다(Home/Today는 투두가 속한 날짜, Focus는 조회 중인 날짜). 각 지점에서 비교 기준으로 쓴 날짜 값이 맞는지 한 번씩 봐주시면 좋을 것 같습니다.Screenshot 📷
Test Checklist ✔
pnpm check-types통과pnpm lint통과