[FIX] 상세 투두 수정 시 Today 화면에 미반영되는 버그 수정

[ehye1]

ISSUE 🔗

close #211

What is this PR? 🔍

Today 화면에서 투두 수정·삭제·서브태스크 완료가 반영되지 않거나, 완료 시 dimmed 처리가 지연되는 버그 4건을 수정했습니다.

배경

• 기존 구조: useUpdateTodoSubmit, useDeleteTodoSubmit의 onSuccess에서 getGetHomeQueryKey()만 invalidate하고, handleSubTodoCheck는 // TODO: API 상태로 로컬 state만 변경하는 구조였습니다.
• 발생 문제: Today 쿼리(getGetTodayQueryKey())가 invalidate되지 않아 수정·삭제 후 Today 화면이 갱신되지 않았고, 서브태스크 체크는 새로고침 시 초기화됐습니다. 또한 체크박스 클릭 시 마우스가 카드 위에 있으면 isHovered=true로 인해 즉시 dimmed되지 않는 문제도 있었습니다.
• 해결 방향: Today 쿼리 invalidation 추가, 서브태스크 API 연결, 완료 시 hover 상태 초기화로 각 문제를 독립적으로 해결했습니다.

---

1. 상세 모달 수정 → Today 미반영 (use-update-todo-submit.ts)

	수정 전	수정 후
Home 갱신	✅	✅
Today 갱신	❌ 누락	✅ 추가

• 이유: onSuccess에서 getGetHomeQueryKey()만 invalidate하고 getGetTodayQueryKey()를 누락했습니다.
• 구현 방식: getGetTodayQueryKey를 동일한 엔드포인트 파일에서 import해 onSuccess 시점에 함께 invalidate합니다.

---

2. 상세 모달 삭제 → Today 미반영 (use-delete-todo-submit.ts)

	수정 전	수정 후
Home 갱신	✅	✅
Today 갱신	❌ 누락 (로컬 state만 제거)	✅ 추가

• 이유: 삭제 성공 후 Today가 서버와 동기화되지 않아, 로컬 state 제거에만 의존하는 구조였습니다.
• 구현 방식: 수정과 동일하게 getGetTodayQueryKey() invalidation을 추가했습니다.

---

3. 서브태스크 완료 → 새로고침 시 초기화 (useTodayTodoList.ts)

	수정 전	수정 후
화면 즉시 반영	✅ (로컬 state)	✅ (optimistic update)
서버 저장	❌ // TODO: API	✅ useChangeSubtaskStatus 연결
실패 시 롤백	❌	✅

• 이유: handleSubTodoCheck가 // TODO: API 상태로 로컬 state만 변경해 새로고침 시 체크 상태가 초기화됐습니다.
• 구현 방식: Home의 handleToggleSubtaskCompleted와 동일한 패턴으로, optimistic update 후 changeSubtaskStatus API 호출, 실패 시 이전 state로 롤백합니다.

---

4. 완료 시 dimmed 처리 지연 (TodayTodoCardContainer.tsx, TodayTodoCard.tsx)

	수정 전	수정 후
카드 완료 즉시 dimmed	❌ hover 해제 후 적용	✅ 체크 즉시 적용
서브태스크 완료 스타일	❌ 변화 없음	✅ 텍스트 색상 즉시 변경

• 이유: isDimmed = isCompleted && !isHovered에서 체크박스 클릭 시 isHovered=true 상태가 유지돼 즉시 dimmed되지 않았습니다. 서브태스크는 sub.isDone이 텍스트 스타일에 반영되지 않았습니다.
• 구현 방식: isCompleted가 true로 바뀌면 useEffect로 isHovered를 즉시 false로 초기화합니다. 서브태스크 텍스트는 sub.isDone이 true일 때 text-timo-gray-500을 적용합니다.

To Reviewers

handleSubTodoCheck 패턴을 Home의 handleToggleSubtaskCompleted와 맞췄습니다. 두 구현이 일치하는지 비교해서 봐주세요.
isCompleted 시 useEffect로 isHovered를 초기화하는 방식이 의도와 맞는지 확인 부탁드립니다.

Screenshot 📷

Test Checklist ✔

• lint-staged (prettier + eslint) 통과
• 상세 투두 수정 후 Today 화면 실시간 반영 확인
• 상세 투두 삭제 후 Today 화면 실시간 반영 확인
• 서브태스크 체크 후 새로고침 시 유지 확인
• 투두 완료 체크 시 즉시 dimmed 처리 확인
• 서브태스크 완료 체크 시 텍스트 색상 즉시 변경 확인

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
timo	Ready	Preview, Comment	Jul 15, 2026 3:14am

[coderabbitai]

Walkthrough

상세 투두 수정 성공 시 기존 Home 및 상세 쿼리와 함께 Today 목록 쿼리도 무효화하도록 변경했습니다. 이를 통해 수정된 투두가 Today 화면에 반영됩니다.

Changes

투두 수정 캐시 갱신

Layer / File(s)	Summary
Today 쿼리 무효화 추가 apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts	getGetTodayQueryKey를 가져오고, 수정 성공 시 Today 목록 캐시를 추가로 무효화합니다.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Possibly related PRs

• Team-Timo/Timo-client#190: 동일한 수정 제출 성공 처리에서 투두 관련 React Query 캐시 무효화를 다룹니다.
• Team-Timo/Timo-client#203: 완료 후 투두 캐시를 무효화하고 동기화하는 변경과 관련됩니다.

Suggested reviewers: yumin-kim2

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	직접 연결된 #211의 요구사항인 TodayTodoCard 즉시 반영을 invalidate 추가로 충족합니다.
Out of Scope Changes check	✅ Passed	변경은 use-update-todo-submit.ts의 쿼리 무효화 추가에 국한되어 있어 범위를 벗어난 수정이 보이지 않습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	제목이 상세 투두 수정 후 Today 화면 미반영 버그를 정확히 요약해 변경 사항과 잘 맞습니다.
Description check	✅ Passed	설명이 Today 반영, 삭제, 서브태스크, dimmed 처리 버그 수정 내용을 PR 변경과 일치하게 담고 있습니다.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/web/211-today-todo-card-not-updated-on-edit

---

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	209.86 kB	🔴 415.72 kB
/[locale]/today	193.98 kB	🔴 399.83 kB
/[locale]/focus	160.05 kB	🔴 365.91 kB
/[locale]/settings	166.37 kB	🔴 372.23 kB
/[locale]/statistics	232.92 kB	🔴 438.78 kB
/[locale]/[...rest]	0 B	🟡 205.86 kB
/[locale]/login	212.94 kB	🔴 418.79 kB
/[locale]/oauth/callback	119.65 kB	🟡 325.51 kB
/[locale]/onboarding	232.90 kB	🔴 438.76 kB
/[locale]	118.96 kB	🟡 324.82 kB
/[locale]/policy	125.09 kB	🟡 330.95 kB

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

Lighthouse — timo-web

URL	Perf	A11y	LCP	CLS	TBT
/en/home	🔴 60	🟢 95	🔴 15.6s	🟢 0.000	🟡 568ms
/en/today	🔴 61	🟢 95	🔴 15.3s	🟢 0.000	🟡 539ms
/en/focus	🔴 61	🟢 95	🔴 15.2s	🟢 0.000	🟡 510ms
/en/statistics	🔴 61	🟢 95	🔴 15.2s	🟢 0.000	🟡 537ms

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 변환 권장

측정 커밋: 26c396c