[FEAT] 타임박스 탭 진입 시 현재 시각으로 자동 스크롤#239
Merged
Merged
Conversation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughTimeSidebar에 Changes타임박스 자동 스크롤
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
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 |
ehye1
changed the title
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/components/layout/sidebar/time/TimeSidebar.tsx`:
- Around line 37-47: Update the timebox scrolling effect around timeboxScrollRef
to replace the 50 magic number with a named hour-height constant, and select
“auto” instead of “smooth” when the user’s prefers-reduced-motion setting is
enabled. Preserve smooth scrolling for users who have not requested reduced
motion.
🪄 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: 2da468b4-26ae-40e4-a18c-5663466237ea
📒 Files selected for processing (1)
apps/timo-web/components/layout/sidebar/time/TimeSidebar.tsx
Comment on lines
+37
to
+47
| useEffect(() => { | ||
| if (!isOpen || activeTab !== "timebox") return; | ||
| const container = timeboxScrollRef.current; | ||
| if (!container) return; | ||
| const now = new Date(); | ||
| const offset = (now.getHours() + now.getMinutes() / 60) * 50; | ||
| container.scrollTo({ | ||
| top: Math.max(0, offset - container.clientHeight / 2), | ||
| behavior: "smooth", | ||
| }); | ||
| }, [activeTab, isOpen]); |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
매직 넘버 상수화 및 접근성(모션 줄이기) 고려
현재 시간으로 부드럽게 스크롤되는 애니메이션, 아주 매끄럽고 센스 있네요! 🌟
여기에 두 가지 정도 유지보수성과 접근성을 위한 개선을 더해보면 어떨까요?
- 상수화:
50이라는 값이 1시간당 높이를 의미한다면,HOUR_HEIGHT와 같은 상수로 분리해 코드의 의도를 더 명확히 해주세요. - 접근성(A11y): 기기 설정에서 '모션 줄이기'를 활성화한 사용자를 위해 부드러운 스크롤 대신 즉각적인 스크롤(
auto)을 사용하도록 처리하면 더 배려 깊은 UI가 됩니다.
MDN Web Docs: prefers-reduced-motion 문서도 함께 참고해 보세요!
✨ 제안하는 개선 코드
useEffect(() => {
if (!isOpen || activeTab !== "timebox") return;
const container = timeboxScrollRef.current;
if (!container) return;
+
+ const HOUR_HEIGHT = 50;
const now = new Date();
- const offset = (now.getHours() + now.getMinutes() / 60) * 50;
+ const offset = (now.getHours() + now.getMinutes() / 60) * HOUR_HEIGHT;
+
+ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
container.scrollTo({
top: Math.max(0, offset - container.clientHeight / 2),
- behavior: "smooth",
+ behavior: prefersReducedMotion ? "auto" : "smooth",
});
}, [activeTab, isOpen]);📝 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.
Suggested change
| useEffect(() => { | |
| if (!isOpen || activeTab !== "timebox") return; | |
| const container = timeboxScrollRef.current; | |
| if (!container) return; | |
| const now = new Date(); | |
| const offset = (now.getHours() + now.getMinutes() / 60) * 50; | |
| container.scrollTo({ | |
| top: Math.max(0, offset - container.clientHeight / 2), | |
| behavior: "smooth", | |
| }); | |
| }, [activeTab, isOpen]); | |
| useEffect(() => { | |
| if (!isOpen || activeTab !== "timebox") return; | |
| const container = timeboxScrollRef.current; | |
| if (!container) return; | |
| const HOUR_HEIGHT = 50; | |
| const now = new Date(); | |
| const offset = (now.getHours() + now.getMinutes() / 60) * HOUR_HEIGHT; | |
| const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; | |
| container.scrollTo({ | |
| top: Math.max(0, offset - container.clientHeight / 2), | |
| behavior: prefersReducedMotion ? "auto" : "smooth", | |
| }); | |
| }, [activeTab, isOpen]); |
🤖 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/components/layout/sidebar/time/TimeSidebar.tsx` around lines 37
- 47, Update the timebox scrolling effect around timeboxScrollRef to replace the
50 magic number with a named hour-height constant, and select “auto” instead of
“smooth” when the user’s prefers-reduced-motion setting is enabled. Preserve
smooth scrolling for users who have not requested reduced motion.
…to feat/web/237-timebox-scroll-to-current-time
kimminna
approved these changes
Jul 16, 2026
kimminna
left a comment
kimminna
left a comment
Member
There was a problem hiding this comment.
확인했습니다! 추후엔 더 부드러운 스크롤도 고려해 보면 좋을 것 같아요
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ISSUE 🔗
close #237
What is this PR? 🔍
타임박스 탭에 진입하거나 탭을 전환할 때 현재 시각이 화면 중앙에 오도록 자동 스크롤되게 합니다.
TimeSidebar의 timebox 패널 스크롤 컨테이너에ref부착activeTab이"timebox"로 바뀌거나 사이드바가 열릴 때(isOpen)scrollTo로 현재 시각 위치로 부드럽게 스크롤(hours + minutes / 60) * 50(ROW_HEIGHT), 컨테이너 높이 절반을 빼서 화면 중앙 정렬To Reviewers
홈 탭의 "오늘" 버튼 방식(pub/sub +
scrollIntoView)과 달리, 타임박스는 이미currentTimeOffset을 수치로 알고 있어 스크롤 컨테이너에 직접scrollTo를 호출하는 방식으로 단순하게 구현했습니다.Screenshot 📷
Test Checklist ✔