[Feat] 루트 레이아웃 구조 설정

[leemanjae02]

#️⃣ 연관된 이슈

• [Feat] #19 - 루트 레이아웃 구조 설정 #19

🚧 Work in Progress

• 작업 진행 중

📌 주요 변경사항

• 로그인 페이지를 제외한 모든 페이지에 공통 적용할 RootLayout 추가 (사이드바 + Outlet 기반 콘텐츠 영역)
• Sidebar의 활성 메뉴 판단 방식을 URL 기반(NavLink)으로 전환해 RootLayout과 결합 가능하도록 구조 조정
• 실제 라우팅 등록(src/routes, /login 분리)과 페이지별 헤더 배치는 이번 PR 범위에서 제외하고 별도 작업으로 분리

📝 작업 내용

• RootLayout 신규 추가: Sidebar + Outlet 조합, children/title/actionLabel 등 페이지별 prop 없이 순수 layout route로 설계
• Sidebar public API 변경: activeKey/onNavigate 콜백 제거, NavLink 기반으로 전환해 현재 URL에서 활성 메뉴 자동 판단 (breaking change)
• Sidebar 메뉴 7개 경로 매핑 추가: 실제 라우팅 등록 전 잠정값이며 라우팅 설계 확정 시 갱신 필요 (코드 주석으로 명시)
• PageHeader는 RootLayout에서 제외: 페이지마다 제목/액션 버튼이 다르고 Outlet 구조상 콜백 전달이 어려워 각 페이지가 직접 배치하는 구조로 결정
• Sidebar.test.tsx/Sidebar.stories.tsx를 MemoryRouter 기반으로 갱신, RootLayout.test.tsx는 중첩 Route로 Outlet 동작 검증
• RootLayout의 콘텐츠 padding이 PageHeader까지 밀어내던 버그 수정, PageHeader 기본 배경(bg-fill-normal) 복원 — 실제 브라우저 렌더링으로 발견
• 검증: 관련 Vitest 전체 통과, pnpm exec eslint --quiet, pnpm build 통과

📸 스크린샷 (선택)

💬 리뷰 요구사항(선택)

• Sidebar의 activeKey/onNavigate → NavLink 전환은 breaking change입니다. 다른 진행 중인 작업에서 Sidebar를 참조하고 있다면 충돌 여부 확인 부탁드립니다.
• Sidebar 메뉴 7개의 경로 문자열(/introduction 등)은 잠정값입니다. 실제 라우팅 설계 시 이 값을 그대로 쓸지 검토가 필요합니다.

Summary by CodeRabbit

• 새로운 기능
  • 현재 경로에 따라 사이드바 메뉴가 활성화되는 링크 기반 내비게이션을 도입했습니다.
  • 중첩 라우트의 콘텐츠를 사이드바와 함께 보여주는 기본 레이아웃(RootLayout)을 추가했습니다.
• 스타일 개선
  • 페이지 헤더 배경 기본 스타일이 변경되었습니다.
• 버그 수정
  • 현재 페이지에 해당하는 메뉴에만 접근성용 상태 표기가 정확히 적용되도록 개선했습니다.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 21597146-bfd6-41e8-8745-a901234cc07d

📥 Commits

Reviewing files that changed from the base of the PR and between b435cb5 and 46c28fe.

📒 Files selected for processing (3)

• src/components/common/Sidebar/Sidebar.tsx
• src/index.css
• src/layout/RootLayout.tsx

---

📝 Walkthrough

Walkthrough

Sidebar를 수동 상태 기반 버튼에서 React Router의 NavLink 기반 링크로 전환하고, RootLayout에서 사이드바와 중첩 콘텐츠를 배치합니다. 테스트와 스토리는 URL 기반 활성 상태를 검증하며, 사이드바 너비 토큰과 PageHeader 배경 클래스가 추가됩니다.

Changes

사이드바 라우팅 및 레이아웃

Layer / File(s)	Summary
사이드바 링크 기반 네비게이션 src/components/common/Sidebar/Sidebar.tsx	메뉴 설정과 props를 path 중심으로 변경하고 NavLink로 링크 및 활성 스타일을 렌더링합니다.
라우팅 테스트와 스토리 설정 src/components/common/Sidebar/Sidebar.test.tsx, src/components/common/Sidebar/Sidebar.stories.tsx	MemoryRouter 기반으로 메뉴 링크의 href, aria-current, 렌더링 및 로그아웃 동작을 검증합니다.
RootLayout과 중첩 라우트 렌더링 src/layout/RootLayout.tsx, src/layout/RootLayout.test.tsx, src/index.css	고정 사이드바와 Outlet 콘텐츠를 배치하고, 사이드바 너비 토큰을 사용해 본문을 배치하며 중첩 경로의 페이지 렌더링과 활성 링크를 테스트합니다.

페이지 헤더 배경 스타일

Layer / File(s)	Summary
PageHeader 배경 클래스 src/components/common/PageHeader/PageHeader.tsx	최상위 컨테이너의 기본 클래스에 bg-fill-normal을 추가합니다.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	루트 레이아웃과 사이드바 중심의 구조 변경을 잘 요약해 제목이 변경 사항과 일치합니다.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/root-layout-19

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Biome (2.5.3)

src/index.css

File contains syntax errors that prevent linting: Line 13: Tailwind-specific syntax is disabled.; Line 20: Tailwind-specific syntax is disabled.; Line 23: Tailwind-specific syntax is disabled.

---

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.}

[github-actions]

CI 결과

항목	결과
TypeScript	🟢 통과
Prettier	🟢 통과
Generated	🟢 통과
ESLint	🟢 통과
Test	🟢 통과
Build	🟢 통과

[KyeongJooni]

수고하셨습니다~!!

[KyeongJooni]

220이 사이드바에서도 재사용 되는거 같은데 상수나 토큰으로 한 곳에서 처리하면 좋을 것 같습니다!!

[github-actions]

CI 결과

항목	결과
TypeScript	🟢 통과
Prettier	🟢 통과
Generated	🟢 통과
ESLint	🟢 통과
Test	🟢 통과
Build	🟢 통과