[FIX] 통계 페이지 스크롤 및 레이아웃 개선 - #171
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
⏰ Timo-web
Walkthrough통계 화면의 헤더와 캘린더를 좌측 컬럼으로 분리하고 사이드 패널을 형제 영역으로 재배치했습니다. 캘린더에는 스크롤 시 상단에 유지되는 헤더와 흰색 배경을 적용했으며, 사이드 패널의 높이와 배경 스타일을 조정했습니다. Changes통계 화면 레이아웃
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related issues
Possibly related PRs
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: 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:
- Line 31: Update the StatisticsSidePanel base class list to add vertical
auto-overflow handling alongside h-full, so lengthy day-variant todo content
scrolls within the panel without changing the existing sizing or styling
classes.
🪄 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: f7dfa96a-6046-4808-9564-b08415b607e5
📒 Files selected for processing (3)
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/StatisticsContainer.tsx
|
|
||
| const SIDE_PANEL_CLASS_NAME = | ||
| "border-timo-gray-500 min-h-full w-[304px] shrink-0 border-l text-timo-black"; | ||
| "border-timo-gray-500 bg-white h-full w-[304px] shrink-0 border-l text-timo-black"; |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
h-full 변경에 따른 세로 스크롤 처리가 필요합니다.
min-h-full → h-full 변경으로 패널 높이가 부모 컨테이너에 고정됩니다. day 변형에서 todo 리스트가 길어지면 콘텐츠가 패널 영역을 벗어나게 됩니다. overflow-y-auto를 추가하면 패널 내에서 독립적으로 스크롤할 수 있습니다.
CSS 스펙상 overflow-y: visible일 때 자식 콘텐츠가 넘치면 부모 영역 밖으로 보이게 되므로, 레이아웃이 깨질 수 있습니다. CSS Overflow Module Level 3 참고.
🔧 제안: overflow-y-auto 추가
const SIDE_PANEL_CLASS_NAME =
- "border-timo-gray-500 bg-white h-full w-[304px] shrink-0 border-l text-timo-black";
+ "border-timo-gray-500 bg-white h-full w-[304px] shrink-0 overflow-y-auto border-l text-timo-black";📝 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.
| "border-timo-gray-500 bg-white h-full w-[304px] shrink-0 border-l text-timo-black"; | |
| "border-timo-gray-500 bg-white h-full w-[304px] shrink-0 overflow-y-auto border-l text-timo-black"; |
🤖 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
at line 31, Update the StatisticsSidePanel base class list to add vertical
auto-overflow handling alongside h-full, so lengthy day-variant todo content
scrolls within the panel without changing the existing sizing or styling
classes.
2 participants
ISSUE 🔗
clsoe #168
What is this PR? 🔍
1. 오른쪽 패널 배경이 투명하게 보이는 문제
기존에는 오른쪽 패널에 명시적인 배경색이 없어, 캘린더 아이콘이나 텍스트가 패널 뒤로 비쳐 보이는 문제가 있었습니다.
이를 해결하기 위해
StatisticsSidePanel의 공통 class에bg-white를 추가했습니다. 월별 패널과 일별 패널이 같은 class를 공유하고 있어서, 한 곳에서 두 variant 모두 동일하게 흰 배경을 갖도록 처리했습니다.2. 오른쪽 패널이 헤더 아래에서 시작하는 문제
기존 구조에서는 오른쪽 패널이 캘린더 content 영역 안에 들어가 있었습니다.
이 구조에서는 패널이 헤더 아래부터 시작할 수밖에 없었습니다. 아무리 h-full이나 min-h-full을 줘도, 부모가 이미 헤더 아래 영역이기 때문입니다.
그래서 통계 화면 전체를 좌우 레이아웃으로 나누고, 왼쪽에는 헤더와 캘린더를 세로로 배치하고 오른쪽에는 패널을 독립적으로 배치하는 구조로 정리했어요.
이렇게 바꾸면서 오른쪽 패널이 헤더 높이까지 포함한 전체 높이를 차지할 수 있게 되었습니다!
3. 캘린더 세로 스크롤 시 월/날짜 제목과 요일이 같이 밀리는 문제
캘린더에서 날짜 아이콘이 많아져 세로 스크롤이 생길 때, 처음에는 월 제목과 요일 row까지 같이 스크롤되는 문제가 있었습니다.
처음에는 캘린더 구조를 크게 나누는 방식도 검토했지만, 실제로 필요한 수정은 <“고정되어야 하는 영역만 sticky로 묶는 것”>이었습니다. 그래서 큰 구조 변경 대신 기존 DOM 흐름을 최대한 유지하면서 다음 영역만 sticky 처리했습니다.
이제 세로 스크롤이 발생해도 위 영역은 고정되고, 날짜 아이콘 grid만 스크롤됩니다.
4. 요일과 날짜 아이콘 사이 간격 유지
요일 row를 sticky 영역으로 옮긴 뒤, 스크롤 시 요일과 날짜 아이콘 사이의 20px 간격이 유지되지 않는 문제가 있었습니다.
처음에는 날짜 grid 쪽에 pt-5를 주었지만, 이 경우 간격도 날짜 grid와 함께 스크롤되어 sticky 상태에서 간격이 사라져 보였습니다.
그래서 20px 간격을 날짜 grid가 아니라 sticky 영역의 하단 padding으로 옮겼습니다.
이렇게 해서 스크롤 중에도 요일과 날짜 아이콘 사이의 간격이 유지되도록 했습니다.
To Reviewers
이번 작업은 레이아웃을 크게 갈아엎기보다, 기존 캘린더 구조를 최대한 유지하면서 필요한 부분만 수정하는 방향으로 진행했습니다.
특히 캘린더 내부 스크롤 문제는 처음에 구조를 크게 분리하는 방식도 고민했지만, 변경 범위가 커지고 의도하지 않은 가로 스크롤까지 생길 수 있어 최종적으로는
sticky를 활용하는 방식으로 정리했습니다.Screenshot 📷
2026-07-13.4.52.18.mov
Test Checklist ✔
pnpm --filter timo-web check-types통과pnpm --filter timo-web lint통과