[Bugfix/#173] 스크롤 시 사이드 잘리는 현상 개선

[Seojegyeong]

🚨 관련 이슈

#173

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

• 기존 sticky + min-h-dvh 조합에서는 문서 전체가 스크롤될 때 sticky가 불안정하게 동작함 -> 스크롤시 사이드바 하단 잘리는 현상 발생
• 외부 컨테이너를 h-dvh overflow-hidden으로 고정하고, main 내부만 overflow-y-auto로 스크롤되는 구조로 바꿈

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

릴리즈 노트

• 스타일

  • 사이드바의 스크롤 동작 개선을 위해 레이아웃 제약 조건 최적화
  • 전체 높이 레이아웃 일관성 강화
  • 메인 콘텐츠 영역의 오버플로우 처리 개선

• 리팩터

  • 메인 레이아웃 구조 재조정으로 스크롤 동작 정규화

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
where-you-ad	Ready	Preview, Comment	May 5, 2026 2:59am

[coderabbitai]

Warning

Rate limit exceeded

@Seojegyeong has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 30 minutes and 8 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2f9befb5-7f8a-4772-9bf2-a69662b1c88f

📥 Commits

Reviewing files that changed from the base of the PR and between 44f698f and 48bd3eb.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml and included by none

📒 Files selected for processing (1)

• src/components/sidebar/Sidebar.tsx

📝 Walkthrough

Walkthrough

사이드바 스크롤 동작을 수정하기 위해 레이아웃 구조를 재정비했습니다. 전역 CSS 리셋을 확대하고, 메인 레이아웃을 sticky에서 고정 높이 구조로 변경하며, 사이드바 내부에 flex 제약 조건을 추가했습니다.

Changes

레이아웃 및 스크롤 동작 정규화

Layer / File(s)	Summary
전역 CSS 기초 src/index.css	html, body, #root 요소에 통일된 높이 제약(min-height: 100dvh), 수평 오버플로우 숨김, 마진/패딩 초기화를 적용했습니다.
메인 레이아웃 구조 src/layout/main/MainLayout.tsx	최상위 컨테이너를 sticky 기반에서 고정 높이 flex 레이아웃(h-dvh)으로 변경하고, main 요소에 h-full과 overflow-y-auto를 적용하여 스크롤 영역을 명확히 정의했습니다.
사이드바 내부 계층 src/components/sidebar/Sidebar.tsx	사이드바 콘텐츠 래퍼에 flex-1 flex-col min-h-0을 추가하고, <nav> 요소에 overflow-y-auto min-h-0을 적용하여 수직 스크롤을 제한된 영역 내에서 동작하도록 구성했습니다. 버튼 높이 클래스도 h-[55px]에서 h-button-big로 업데이트했습니다.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12분

Possibly related issues

• WhereYouAd/WhereYouAd-Frontend#173: Sidebar.tsx와 MainLayout.tsx의 flex/min-h/overflow-y 조정으로 사이드바 하단 잘림 문제를 직접 해결합니다.

Possibly related PRs

• WhereYouAd/WhereYouAd-Frontend#54: MainLayout.tsx의 최상위 컨테이너, 패딩, 스크롤/오버플로우 동작을 모두 수정하는 관련 변경입니다.
• WhereYouAd/WhereYouAd-Frontend#166: Sidebar.tsx와 MainLayout.tsx를 함께 수정하여 사이드바/레이아웃 구조와 스크롤 동작을 조정합니다.
• WhereYouAd/WhereYouAd-Frontend#97: 동일한 파일들(MainLayout.tsx, Sidebar.tsx, index.css)을 수정하여 flex/min-size와 overflow/스크롤 동작으로 사이드바 스크롤 문제를 해결합니다.

Suggested labels

🎨 Html&css

Suggested reviewers

• YermIm

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 PR의 주요 변경사항(스크롤 시 사이드바 끝부분이 잘리는 버그 수정)을 명확하게 나타내고 있습니다.
Description check	✅ Passed	PR 설명이 관련 이슈(#173), 변경사항 체크박스, 구체적인 작업 내용을 포함하여 필수 요소들을 충실히 작성했습니다.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch bugfix/#173

---

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

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

[coderabbitai]

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 `@src/components/sidebar/Sidebar.tsx`:
- Line 81: Sidebar 컴포넌트의 <nav> 요소(현재 className="flex flex-1 flex-col gap-1 px-2
overflow-y-auto min-h-0")에 스크린리더용 레이블이 빠져 있어 목적을 알기 어렵습니다; 이 <nav>에 aria-label
속성(예: "Sidebar navigation" 또는 한국어로 "사이드바 내비게이션")을 추가해 탐색 랜드마크의 용도를 명시하고 접근성
요구사항을 충족하세요.

🪄 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: CHILL

Plan: Pro

Run ID: d3ee1e52-6770-48cb-9a33-8bc0057a2d45

📥 Commits

Reviewing files that changed from the base of the PR and between 5072cc2 and 44f698f.

📒 Files selected for processing (3)

• src/components/sidebar/Sidebar.tsx
• src/index.css
• src/layout/main/MainLayout.tsx

💤 Files with no reviewable changes (1)

• src/index.css

[github-actions]

📚 Storybook 배포 완료

항목	링크
📖 Storybook	https://69a147b60a56365d9e2185ef-lplqsubwaj.chromatic.com/
🔍 Chromatic	https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=233

[YermIm]

P4: 확인했습니다!