[FIX] 통계 페이지 QA 반영#233
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough통계 화면의 내부 스크롤과 목록 스타일을 조정하고, 로딩·오류 표시를 Lottie로 단순화했습니다. todo 및 타이머 상태 변경 성공 시 요약·일별·캘린더 통계 쿼리를 무효화하도록 갱신 흐름도 확장했습니다. Changes통계 화면 및 데이터 갱신
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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: dependency version conflict. Check your lock file or package.json. 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
측정 커밋: |
![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
🤖 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)/statistics/_components/StatisticsSidePanel.tsx:
- Around line 105-116: In the todo list rendering around detail.todos.map,
remove the isLastTodo index calculation and apply the border styling with
Tailwind’s last: modifier on each li instead of conditionally checking the array
position. Preserve the existing spacing and ensure the last item does not
receive the bottom border.
🪄 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: df705934-30e2-4c9e-a9fc-37735c72cbde
📒 Files selected for processing (5)
apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsxapps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsxapps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsxapps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsxapps/timo-web/components/lottie/LottiePlayer.tsx
| {detail.todos.map((todo, index) => { | ||
| const diffMinutes = | ||
| todo.actualTimeMinutes - todo.estimatedTimeMinutes; | ||
| const isLastTodo = index === detail.todos.length - 1; | ||
|
|
||
| return ( | ||
| <li | ||
| key={todo.todoId} | ||
| className="border-timo-gray-500 flex justify-between border-b py-2.5" | ||
| className={cn( | ||
| "flex justify-between py-2.5 pt-5", | ||
| !isLastTodo && "border-timo-gray-500 border-b", | ||
| )} |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Tailwind의 last: 모디파이어를 활용해 보세요.
JS에서 배열 인덱스를 계산하여 조건부로 스타일을 적용하는 대신, Tailwind CSS의 의사 클래스(pseudo-class) 모디파이어인 last:를 사용하면 코드를 한결 간결하게 작성할 수 있습니다. 렌더링 성능과 가독성 측면에서도 CSS 기반 처리가 권장됩니다! ✨
자세한 내용은 Tailwind CSS 공식 문서: Pseudo-classes를 참고해 보세요.
💡 제안하는 리팩토링 코드
- {detail.todos.map((todo, index) => {
+ {detail.todos.map((todo) => {
const diffMinutes =
todo.actualTimeMinutes - todo.estimatedTimeMinutes;
- const isLastTodo = index === detail.todos.length - 1;
return (
<li
key={todo.todoId}
- className={cn(
- "flex justify-between py-2.5 pt-5",
- !isLastTodo && "border-timo-gray-500 border-b",
- )}
+ className="border-timo-gray-500 flex justify-between border-b py-2.5 pt-5 last:border-b-0"
>📝 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.
| {detail.todos.map((todo, index) => { | |
| const diffMinutes = | |
| todo.actualTimeMinutes - todo.estimatedTimeMinutes; | |
| const isLastTodo = index === detail.todos.length - 1; | |
| return ( | |
| <li | |
| key={todo.todoId} | |
| className="border-timo-gray-500 flex justify-between border-b py-2.5" | |
| className={cn( | |
| "flex justify-between py-2.5 pt-5", | |
| !isLastTodo && "border-timo-gray-500 border-b", | |
| )} | |
| {detail.todos.map((todo) => { | |
| const diffMinutes = | |
| todo.actualTimeMinutes - todo.estimatedTimeMinutes; | |
| return ( | |
| <li | |
| key={todo.todoId} | |
| className="border-timo-gray-500 flex justify-between border-b py-2.5 pt-5 last:border-b-0" | |
| > |
🤖 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)/statistics/_components/StatisticsSidePanel.tsx
around lines 105 - 116, In the todo list rendering around detail.todos.map,
remove the isLastTodo index calculation and apply the border styling with
Tailwind’s last: modifier on each li instead of conditionally checking the array
position. Preserve the existing spacing and ensure the last item does not
receive the bottom border.
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/hooks/statistics/use-statistics-query-invalidation.ts`:
- Around line 14-18: Update invalidateStatistics in
apps/timo-web/hooks/statistics/use-statistics-query-invalidation.ts lines 14-18
to return a Promise.all containing all queryClient.invalidateQueries calls. Also
update invalidateTimerState in
apps/timo-web/hooks/timer/use-timer-query-invalidation.ts lines 20-25 to return
a Promise.all containing invalidateActiveTimer(), invalidateHomeView(), and the
other existing invalidation calls, preserving their current behavior while
exposing completion to callers.
🪄 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: c0d9d769-62fd-4139-9387-037617fe8e6a
📒 Files selected for processing (6)
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.tsapps/timo-web/hooks/statistics/use-statistics-query-invalidation.tsapps/timo-web/hooks/timer/use-timer-query-invalidation.tsapps/timo-web/hooks/todo-modal/create/use-create-todo-submit.tsapps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.tsapps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
| const invalidateStatistics = () => { | ||
| queryClient.invalidateQueries({ queryKey: getGetSummaryQueryKey() }); | ||
| queryClient.invalidateQueries({ queryKey: getGetDailyQueryKey() }); | ||
| queryClient.invalidateQueries({ queryKey: getGetCalendarQueryKey() }); | ||
| }; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
Promise.all을 활용해 비동기 무효화 작업의 Promise를 반환해 보세요.
현재 invalidateQueries는 실행 후 무효화 처리에 대한 Promise를 반환하지만, 여러 무효화 함수를 묶어서 호출하는 래퍼 함수들(invalidateStatistics, invalidateTimerState)이 해당 결과 Promise를 반환(return)하지 않고 있습니다.
이렇게 되면 호출부(예: Mutation의 onSuccess 콜백)에서 쿼리 무효화 완료 시점을 명시적으로 기다려야 할 때 후속 처리가 불가능해집니다. 각 호출을 Promise.all 배열로 묶어 반환하면 보다 유연하고 안정적인 사용자 경험(UX) 제어가 가능해집니다. 멋진 통계 기능이 더욱 견고하게 동작할 수 있을 거예요! ✨
apps/timo-web/hooks/statistics/use-statistics-query-invalidation.ts#L14-L18: 내부의queryClient.invalidateQueries호출들을Promise.all([ ... ])로 감싸서 반환하도록 수정해 보세요.apps/timo-web/hooks/timer/use-timer-query-invalidation.ts#L20-L25: 내부의 무효화 함수 호출들(invalidateActiveTimer(),invalidateHomeView()등)을Promise.all([ ... ])로 감싸서 반환하도록 수정해 보세요.
관련하여 TanStack Query 공식 문서 - Query Invalidation 가이드를 확인해 보시면 더욱 도움이 될 것입니다.
📍 Affects 2 files
apps/timo-web/hooks/statistics/use-statistics-query-invalidation.ts#L14-L18(this comment)apps/timo-web/hooks/timer/use-timer-query-invalidation.ts#L20-L25
🤖 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/hooks/statistics/use-statistics-query-invalidation.ts` around
lines 14 - 18, Update invalidateStatistics in
apps/timo-web/hooks/statistics/use-statistics-query-invalidation.ts lines 14-18
to return a Promise.all containing all queryClient.invalidateQueries calls. Also
update invalidateTimerState in
apps/timo-web/hooks/timer/use-timer-query-invalidation.ts lines 20-25 to return
a Promise.all containing invalidateActiveTimer(), invalidateHomeView(), and the
other existing invalidation calls, preserving their current behavior while
exposing completion to callers.
1 participant
ISSUE 🔗
close #222
What is this PR? 🔍
QA때 진행한 통계 페이지의 레이아웃과 상태 표시 방식을 개선했습니다.
LottiePlayer의 기본w-full스타일 제거To Reviewers
통계 페이지에서 캘린더 영역과 오른쪽 패널의 스크롤이 각각 독립적으로 동작하는지 확인 부탁드립니다.
Note
추가로, 홈 탭에서 투두 수정 후 통계 데이터가 즉시 반영되지 않는 케이스가 있습니다.
이를 해결하려면 통계 관련 query invalidation을 추가해야 하는데, 여러 mutation 성공 지점마다
invalidateStatistics()를 붙이는 방식은 유지보수 부담이 있어 보입니다.이번 이슈에서 함께 처리할지, 별도 이슈로 분리해
useTodoQueryInvalidation같은 도메인 단위 helper로 정리할지 의견 부탁드립니다.--> 이번 PR에서 진행했습니다
Test Checklist ✔
pnpm lint:webpnpm check-types:web