[FEAT] 통계 페이지 사이드 패널 구현#128
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
⏰ Timo-web
|
Warning Review limit reached
Next review available in: 40 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
Walkthrough통계 화면용 Changes통계 사이드 패널
Estimated code review effort: 2 (Simple) | ~15 minutes Sequence Diagram(s)sequenceDiagram
participant Parent
participant StatisticsSidePanel
participant SummaryTimeBlock
participant formatStatisticsTime
Parent->>StatisticsSidePanel: variant와 summary/detail 전달
alt variant === "month"
StatisticsSidePanel->>SummaryTimeBlock: 월간 기록 시간 전달
SummaryTimeBlock->>formatStatisticsTime: formatStatisticsHourText(minutes) 호출
formatStatisticsTime-->>SummaryTimeBlock: 요약 시간 문자열 반환
else variant === "day"
StatisticsSidePanel->>SummaryTimeBlock: 일별 기록 시간 전달
SummaryTimeBlock->>formatStatisticsTime: formatStatisticsHourText(minutes) 호출
formatStatisticsTime-->>SummaryTimeBlock: 요약 시간 문자열 반환
StatisticsSidePanel->>formatStatisticsTime: 실제/예정 시간 전달
formatStatisticsTime-->>StatisticsSidePanel: H:MM 문자열 반환
StatisticsSidePanel->>StatisticsSidePanel: diff 라벨 및 클래스 계산
end
StatisticsSidePanel-->>Parent: 월간 또는 일별 패널 렌더링
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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: 4
🤖 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 16-24: `StatisticsSidePanelProps` is a discriminated union
declared as a type alias, so it should follow the naming convention by using the
`Types` suffix instead of `Props`. Rename the alias in `StatisticsSidePanel` to
match the convention, and update every usage of `StatisticsSidePanelProps` in
this component and any imports/references so the union type remains consistent
with the `SummaryTimeBlockProps` `interface` naming pattern.
- Around line 6-14: StatisticsSidePanel currently imports from relative paths,
which should be converted to the project’s absolute import convention. Update
the imports for formatStatisticsClockText, formatStatisticsHourText,
StatisticsDayDetail, and StatisticsMonthSummary to use the corresponding
absolute paths instead of ../_utils/formatStatisticsTime and
../_types/statistics, keeping the same symbols but changing only the import
paths.
- Line 1: Remove the unnecessary client directive from StatisticsSidePanel so it
can remain a server component; this file only renders static UI and does not use
useState, useEffect, or event handlers. Update the StatisticsSidePanel component
to omit "use client", and keep any imported icons/components that are
server-compatible as-is so the _components UI stays props-only and SSR-friendly.
- Around line 29-38: `getDiffLabel` currently returns `"+초과"` for `diffMinutes
=== 0`, which is semantically incorrect; update the helper so the zero case is
handled explicitly and only positive values map to `"+초과"` while negative values
still map to `"-단축"`. Keep `getDiffClassName` aligned with the same
zero/positive/negative branching in `StatisticsSidePanel` so the label and class
logic remain consistent.
🪄 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: 350dfbba-73f0-4e38-8ec8-eb504bf7eba1
📒 Files selected for processing (4)
apps/timo-web/app/[locale]/(main)/statistics/_components/.gitkeepapps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsxapps/timo-web/app/[locale]/(main)/statistics/_types/statistics.tsapps/timo-web/app/[locale]/(main)/statistics/_utils/formatStatisticsTime.ts
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
variant로 월별/일별를 분리한 구조도 적절하고, 공통 클래스와 SummaryTimeBlock을 잘 추출해주셔서 보기 편했어요 👍 절대경로 변경과 사소한 코멘트 몇 가지 남겨두으니 확인 부탁드려요!
| /** | ||
| * 분 단위 기록 시간을 통계 요약 영역의 시간 텍스트로 변환합니다. | ||
| * 예: 260 -> "4h 20m", 120 -> "2h", 30 -> "30m" | ||
| */ |
There was a problem hiding this comment.
jsdoc 에 관한 문서 첨부해드릴게요!
https://www.typescriptlang.org/ko/docs/handbook/jsdoc-supported-types.html
이거 보고 유틸 파일 추후에 수정해 주면 좋을 것 같아요 😍
There was a problem hiding this comment.
태그도 같이 붙이는게 확실히 문서 구조가 명확해져서 좋은 것 같네요. 이해하기도 편하구요! 반영완료했습니다😍🤟
3 participants
ISSUE 🔗
close #123
What is this PR? 🔍
통계 화면에서 사용할 우측 사이드 패널 컴포넌트를 구현했습니다.
현재 컴포넌트는 아래 두 상태를
variant로 나눠 렌더링합니다.월별 요약은 summary를 받고, 일별 상세는 detail을 받습니다.
API 응답이 붙더라도 컨테이너나 쿼리 레이어에서 데이터를 넘겨주면 사이드 패널은 표시만 담당하도록 의도했습니다.
aside 공통 구조를 분리한 이유
월별 요약 패널과 일별 상세 패널은 보여주는 내용은 다르지만, “오른쪽 사이드 패널”이라는 껍데기는 같습니다.
그래서 패널 공통 레이아웃은 SIDE_PANEL_CLASS_NAME으로 분리했습니다.
이렇게 하면서 중복되던 width, height, border, 기본 텍스트 색상 스타일을 한 곳에서 관리하도록 했습니다.
각 variant에서는 padding이나 내부 배치처럼 달라지는 부분만 추가로 넘기도록 구성했습니다.
공통 시간 표시 블록
월별 요약과 일별 상세에는 공통적으로 “라벨 + 큰 시간” UI가 들어갑니다.
이 구조가 반복되어 SummaryTimeBlock으로 분리했습니다.
시간 포맷 유틸
API에서는 시간을 분 단위 숫자로 받는다고 보고 구현했습니다.
화면에서는 사용 위치에 따라 다른 형태로 보여줘야 해서 유틸을 두 개로 나눴습니다.
formatStatisticsHourText는 월/일 총 기록 시간처럼 큰 요약 시간에 사용합니다.formatStatisticsClockText는 투두별 실제 시간, 계획 시간처럼 목록 안에서 짧게 보여주는 시간에 사용합니다.초과/단축 표시 처리
투두의 초과/단축 상태는 아래 기준으로 계산했습니다.
다만 표시가 없는 경우에도 피그마 기준으로 각 투두 아이템 높이가 유지되어야 했기 때문에, 조건부로 아예 렌더링하지 않고 invisible 클래스를 사용해 공간을 유지했습니다.
To Reviewers
이번 작업에서는
StatisticsSidePanel을 전체 통계 화면의 레이아웃 컴포넌트가 아니라, “오른쪽 패널 내부 UI”를 담당하는 컴포넌트로 두었습니다.따라서 헤더, 캘린더, 우측 패널을 나란히 배치하는 전체 뷰 구조는 후속 작업에서 처리할 예정입니다.
Screenshot 📷
Test Checklist ✔