페이지 이동시 스크롤 위치 상단으로 초기화

[HarrySeop]

🧩 관련 이슈 번호

• 페이지 이동시 스크롤 위치 상단으로 초기화 #260

📌 작업 내용

• 페이지를 상단으로 초기화하는 컴포넌트를 만들었습니다.

✅ 체크리스트

• PR 하기 전에 이슈에서 빼먹은건 없는지 확인했습니다
  • 라벨 및 마일스톤을 사이드 탭에서 등록했습니다.
• PR을 보내는 브랜치가 올바른지 확인했습니다.
• 팀원들이 리뷰하기 쉽도록 설명을 자세하게 작성했습니다.
• 변경사항을 충분히 테스트 했습니다.
• (함수를 구현 했을 때) JSDoc을 양식에 맞춰서 작성했습니다.
• 컨벤션에 맞게 구현했습니다.

📷 UI 변경 사항 (선택)

• 단순 컴포넌트라 UI는 없습니다!

❓무슨 문제가 발생했나요? (선택)

💬 기타 참고 사항 (선택)

Summary by CodeRabbit

• 신규 기능
  • 페이지 내 라우트 변경 시 자동으로 최상단으로 스크롤되는 기능이 추가되었습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

ScrollToTop 컴포넌트가 새로 추가되어, 라우트 변경 시 페이지가 상단으로 스크롤되도록 구현되었습니다. 이 컴포넌트는 App 컴포넌트에 포함되어, 라우트가 바뀔 때마다 자동으로 스크롤 위치를 초기화합니다.

Changes

Cohort / File(s)	Change Summary
ScrollToTop 컴포넌트 추가 및 적용 apps/what-today/src/components/ScrollToTop.tsx, apps/what-today/src/App.tsx	새로운 ScrollToTop 컴포넌트가 도입되어, 라우트 변경 시 window를 상단으로 스크롤하도록 구현됨. 해당 컴포넌트가 App 컴포넌트에 포함됨.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant App
    participant ScrollToTop
    participant Router

    User->>Router: 라우트 변경
    Router->>App: App 렌더링
    App->>ScrollToTop: ScrollToTop 렌더링
    ScrollToTop->>Window: window.scrollTo({ top: 0, ... })

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Poem

🐇
페이지가 바뀔 때마다
토끼는 폴짝 뛰어올라
스크롤을 맨 위로 보내주네!
새 컴포넌트로 깔끔하게,
탐험이 더 쉬워졌지.
오늘도 토끼는 기쁘게
코드를 달려갑니다!

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fc6fade and 875e40d.

📒 Files selected for processing (2)

• apps/what-today/src/App.tsx (1 hunks)
• apps/what-today/src/components/ScrollToTop.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (7)

📓 Common learnings

Learnt from: HarrySeop
PR: What-Today-FE/What-Today#89
File: packages/design-system/src/components/bottomsheet/hooks/index.ts:44-51
Timestamp: 2025-07-21T04:36:28.477Z
Learning: HarrySeop encountered a scroll restoration issue in the useBodyScrollLock hook where the base page jumps to the top during mount/unmount of the bottom sheet component. They tried adding isLocked check in cleanup function and ref-based approaches but both failed to resolve the issue. They decided to defer this fix to a later refactoring.

Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.

Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.

Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.

Learnt from: HarrySeop
PR: What-Today-FE/What-Today#129
File: apps/what-today/src/pages/mypage/reservations-list/index.tsx:13-25
Timestamp: 2025-07-24T19:36:15.516Z
Learning: HarrySeop은 What-Today 프로젝트에서 API 에러 처리를 토스터(toast notification)로 처리하는 방식을 선호하며, 핸들러 함수 구현 시점에 함께 연결하는 접근 방식을 취함.

📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...

Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.

Applied to files:

• apps/what-today/src/App.tsx
• apps/what-today/src/components/ScrollToTop.tsx

📚 Learning: harryseop encountered a scroll restoration issue in the usebodyscrolllock hook where the base page j...

Learnt from: HarrySeop
PR: What-Today-FE/What-Today#89
File: packages/design-system/src/components/bottomsheet/hooks/index.ts:44-51
Timestamp: 2025-07-21T04:36:28.477Z
Learning: HarrySeop encountered a scroll restoration issue in the useBodyScrollLock hook where the base page jumps to the top during mount/unmount of the bottom sheet component. They tried adding isLocked check in cleanup function and ref-based approaches but both failed to resolve the issue. They decided to defer this fix to a later refactoring.

Applied to files:

• apps/what-today/src/App.tsx
• apps/what-today/src/components/ScrollToTop.tsx

📚 Learning: kjhyun0830은 what-today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 u...

Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.

Applied to files:

• apps/what-today/src/App.tsx
• apps/what-today/src/components/ScrollToTop.tsx

📚 Learning: in the selectroot component (packages/design-system/src/components/select/selectroot.tsx), myungjiwo...

Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#57
File: packages/design-system/src/components/select/SelectRoot.tsx:37-38
Timestamp: 2025-07-17T01:20:26.915Z
Learning: In the SelectRoot component (packages/design-system/src/components/select/SelectRoot.tsx), MyungJiwoo questioned the need for implementing controlled component pattern. The current implementation only handles internal→external state changes via onChangeValue callback, but doesn't handle external→internal changes when the value prop is updated, which breaks the typical React controlled component contract.

Applied to files:

• apps/what-today/src/App.tsx
• apps/what-today/src/components/ScrollToTop.tsx

📚 Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 reservationstatus 타입이 calendar/index.ts에서 re-export...

Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#91
File: apps/what-today/src/pages/mypage/reservations-status/index.tsx:2-2
Timestamp: 2025-07-22T03:59:52.657Z
Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 ReservationStatus 타입이 calendar/index.ts에서 re-export되지 않아 메인 엔트리 포인트에서 접근할 수 없는 문제가 있음. DayCell.tsx에서 정의된 타입들을 calendar 모듈에서 명시적으로 export해야 함.

Applied to files:

• apps/what-today/src/App.tsx

📚 Learning: react-live에서 react.usestate는 react가 scope에 명시적으로 포함되지 않았어도 오류 없이 작동할 수 있다. 하지만 명시적으로 usestate를 scope...

Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#45
File: packages/design-system/src/pages/TextareaDoc.tsx:0-0
Timestamp: 2025-07-14T10:31:52.534Z
Learning: react-live에서 React.useState는 React가 scope에 명시적으로 포함되지 않았어도 오류 없이 작동할 수 있다. 하지만 명시적으로 useState를 scope에 포함시키는 것이 더 명확한 접근이다.

Applied to files:

• apps/what-today/src/components/ScrollToTop.tsx

🧬 Code Graph Analysis (1)

apps/what-today/src/App.tsx (1)

apps/what-today/src/components/ScrollToTop.tsx (1)

• ScrollToTop (4-12)

🔇 Additional comments (4)

apps/what-today/src/components/ScrollToTop.tsx (2)

1-2: 의존성 import가 적절합니다.

React hooks와 react-router-dom 사용이 올바르게 구성되어 있습니다.

---

4-12: ScrollToTop 컴포넌트 구현이 올바릅니다.

라우트 변경 시 스크롤 위치를 상단으로 초기화하는 기능이 정확히 구현되었습니다. useLocation을 통한 pathname 추적과 useEffect를 통한 스크롤 처리가 적절합니다.

이전 학습 내용에 따르면 HarrySeop님이 과거에 스크롤 복원 문제를 겪으셨는데, 이 구현은 해당 문제와는 다른 접근 방식으로 깔끔하게 해결되었습니다.

참고사항: behavior: 'instant'가 페이지 전환 시에는 'smooth'보다 더 적절한 선택입니다.

apps/what-today/src/App.tsx (2)

3-3: import 구문이 올바르게 추가되었습니다.

경로 alias @/를 사용한 import가 프로젝트 컨벤션에 맞게 작성되었습니다.

---

8-8: ScrollToTop 컴포넌트 배치가 적절합니다.

Outlet 위에 ScrollToTop 컴포넌트를 배치하여 모든 라우트에서 스크롤 초기화 기능이 동작하도록 구성되었습니다. 컴포넌트 트리에서의 위치가 논리적으로 올바릅니다.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/HarrySeop/260

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary or @coderabbitai 요약 to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

[MyungJiwoo]

고생하셨습니다!