[feature] 자동 스크롤 훅 추가 by seongwon030 · Pull Request #988 · Moadong/moadong

seongwon030 · 2025-12-28T15:30:49Z

#️⃣연관된 이슈

ex) #987

📝작업 내용

어떤 페이지에서든 자동으로 상단 스크롤 되는 훅을 추가했습니다.

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

새로운 기능
- 페이지 탐색 시 자동으로 페이지 맨 위로 스크롤하는 기능이 추가되었습니다.
리팩토링
- 스크롤 감지 로직을 개선하고 최적화했습니다.
- 불필요한 코드를 정리했습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

vercel · 2025-12-28T15:30:53Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
moadong	Ready	Preview, Comment	Dec 28, 2025 3:30pm

coderabbitai · 2025-12-28T15:31:00Z

Warning

`.coderabbit.yaml` has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

Please see the configuration documentation for more information.
You can also validate your configuration using the online YAML validator.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

작업 내용 요약 (Walkthrough)

페이지 네비게이션 시 자동으로 상단으로 스크롤하는 기능을 추가합니다. 새로운 ScrollToTop 훅을 도입하고, 기존 스크롤 감지 훅을 명확한 이름으로 변경한 후 관련 컴포넌트를 업데이트합니다.

변경 사항 (Changes)

코호트 / 파일	변경 내용
스크롤 감지 훅 이름 변경 `frontend/src/hooks/useScrollDetection.ts`, `frontend/src/components/common/Header/Header.tsx`	`useScroll` 훅을 `useScrollDetection`으로 이름 변경하여 명확성 개선; Header 컴포넌트에서 훅 호출 업데이트; 주석 처리된 /patch-note nav 항목 제거
새로운 스크롤-투-톱 기능 `frontend/src/hooks/ScrollToTop.tsx`, `frontend/src/App.tsx`	라우트 경로 변경을 감지하여 페이지 상단으로 자동 스크롤하는 새로운 ScrollToTop 컴포넌트 추가; App 컴포넌트에 ScrollToTop 컴포넌트 렌더링 (ScrollToTopButton 앞에 배치)

예상 코드 리뷰 소요 시간

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목 '[feature] 자동 스크롤 훅 추가'는 변경사항의 핵심 내용인 스크롤 관련 훅 추가를 명확하게 요약하고 있습니다.
Linked Issues check	✅ Passed	모든 링크된 이슈(MOA-465)의 요구사항이 충족되었습니다: 페이지 이동 시 자동 스크롤 훅 구현 완료, App.tsx에 전역 설정.
Out of Scope Changes check	✅ Passed	모든 변경사항이 링크된 이슈의 범위 내입니다. Header.tsx의 useScroll 이름 변경은 훅 재명명의 일환이므로 범위 내입니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feature/#987-scroll-to-top-MOA-465

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

frontend/src/hooks/ScrollToTop.tsx (1)
7-9: 부드러운 스크롤 효과를 고려해보세요.

즉시 스크롤되는 것보다 behavior: 'smooth' 옵션을 사용하면 더 나은 사용자 경험을 제공할 수 있습니다.
🔎 부드러운 스크롤 적용 예시
  useEffect(() => {
-   window.scrollTo(0, 0);
+   window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
  }, [pathname]);
또는 접근성을 고려하여 사용자의 prefers-reduced-motion 설정을 존중하는 방법:
  useEffect(() => {
+   const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+   window.scrollTo({ 
+     top: 0, 
+     left: 0, 
+     behavior: prefersReducedMotion ? 'auto' : 'smooth' 
+   });
-   window.scrollTo(0, 0);
  }, [pathname]);

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7516776 and b8b84a4.

📒 Files selected for processing (4)

frontend/src/App.tsx
frontend/src/components/common/Header/Header.tsx
frontend/src/hooks/ScrollToTop.tsx
frontend/src/hooks/useScrollDetection.ts

🧰 Additional context used

📓 Path-based instructions (3)

frontend/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (frontend/.cursorrules)

frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries with if/else or IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling

Files:

frontend/src/App.tsx
frontend/src/hooks/ScrollToTop.tsx
frontend/src/hooks/useScrollDetection.ts
frontend/src/components/common/Header/Header.tsx

frontend/**/*.{tsx,jsx}

📄 CodeRabbit inference engine (frontend/.cursorrules)

frontend/**/*.{tsx,jsx}: Abstract complex logic/interactions into dedicated components/HOCs
Separate significantly different conditional UI/logic into distinct components
Colocate simple, localized logic or use inline definitions to reduce context switching
Choose field-level or form-level cohesion based on form requirements when using form libraries like react-hook-form
Use Component Composition instead of Props Drilling to reduce coupling

Files:

frontend/src/App.tsx
frontend/src/hooks/ScrollToTop.tsx
frontend/src/components/common/Header/Header.tsx

frontend/**/*.{ts,tsx}

📄 CodeRabbit inference engine (frontend/.cursorrules)

Use consistent return types for similar functions/hooks

Files:

frontend/src/App.tsx
frontend/src/hooks/ScrollToTop.tsx
frontend/src/hooks/useScrollDetection.ts
frontend/src/components/common/Header/Header.tsx

🧠 Learnings (6)