Skip to content

[FAET] 레이아웃 및 라우터 세팅#3

Merged
hdg0116 merged 4 commits into
developfrom
feat/layout-router-setting-2
Jun 23, 2026
Merged

[FAET] 레이아웃 및 라우터 세팅#3
hdg0116 merged 4 commits into
developfrom
feat/layout-router-setting-2

Conversation

@hdg0116

@hdg0116 hdg0116 commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

ISSUE 🔗

close #2



What is this PR? 🔍

바텀내비게이션 구현 진행 및 라우트를 세팅했습니다.



Screenshot 📷



Test Checklist ✔

  • TODO
  • TODO
  • TODO

Summary by CodeRabbit

릴리스 노트

  • New Features

    • React Router 기반 애플리케이션 라우팅 도입 및 공통 레이아웃 구성
    • 홈, 로그인, 공지사항, 예약, 마이페이지 페이지 추가
    • 하단 네비게이션 추가로 주요 화면 간 빠른 이동 지원
    • 종/캘린더 체크/집/사용자 SVG 아이콘 제공
  • Chores

    • Node 엔진 요구사항 상향 및 아이콘 빌드 스크립트 추가
    • 관련 패키지 버전 업데이트 및 React Router 의존성 추가

@coderabbitai

coderabbitai Bot commented Jun 23, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: fffcab70-2c63-42a5-825c-2380bd7aecb8

📥 Commits

Reviewing files that changed from the base of the PR and between 4fbfad5 and fade215.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (1)
  • package.json
🚧 Files skipped from review as they are similar to previous changes (1)
  • package.json

📝 Walkthrough

Walkthrough

React Router 기반 라우팅 구조를 초기 세팅한다. 경로 상수(ROUTES), SVG 아이콘 컴포넌트 4종, BottomNavigation 컴포넌트, AppLayout, createBrowserRouter 기반 라우터, 6개 페이지 스텁이 추가되고, App 컴포넌트가 RouterProvider를 렌더링하도록 변경된다.

Changes

레이아웃 및 라우터 세팅

Layer / File(s) Summary
경로 상수 및 SVG 아이콘
src/shared/constants/routes.ts, src/shared/icons/ic-bell.tsx, src/shared/icons/ic-calendar-check.tsx, src/shared/icons/ic-house.tsx, src/shared/icons/ic-user.tsx, src/shared/icons/index.ts
ROUTES 객체와 createPath.reservationDetail() 헬퍼를 정의하고, BottomNavigation에서 사용할 4종 SVG 아이콘 컴포넌트와 인덱스 재내보내기를 추가함.
BottomNavigation 컴포넌트
src/shared/components/BottomNavigation.tsx, src/shared/components/index.ts
useLocation().pathname 기반으로 활성 상태를 판정해 NavLink로 렌더링하는 하단 네비게이션 컴포넌트를 구현하고 index.ts에 재내보내기를 추가함.
AppLayout 및 라우터 설정
src/app/layout/AppLayout.tsx, src/app/router/router.tsx
OutletBottomNavigation을 조합한 AppLayout을 정의하고, createBrowserRouter로 루트/와일드카드를 홈으로 리다이렉트하며 각 페이지를 lazy 동적 import로 매핑하는 라우터를 구성함.
App 진입점 및 페이지 스텁
src/app/App.tsx, src/pages/home/HomePage.tsx, src/pages/login/LoginPage.tsx, src/pages/announcement/AnnouncementPage.tsx, src/pages/reservation/ReservationPage.tsx, src/pages/reservation/ReservationDetailPage.tsx, src/pages/mypage/MyPage.tsx
App 컴포넌트를 RouterProvider로 교체하고, 라우터에 등록된 6개 페이지의 플레이스홀더 컴포넌트를 추가함.
의존성 및 빌드 스크립트
package.json
react-router, react-domdependencies에 추가하고, @svgr/clidevDependencies에 추가하며 build:icons 스크립트를 등록함.

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant App
  participant RouterProvider
  participant AppLayout
  participant BottomNavigation
  participant PageComponent

  Browser->>App: 앱 마운트
  App->>RouterProvider: router 전달
  RouterProvider->>AppLayout: 매칭된 경로에 AppLayout 렌더링
  AppLayout->>PageComponent: Outlet → 매칭 페이지 렌더링
  AppLayout->>BottomNavigation: BottomNavigation 렌더링
  BottomNavigation->>BottomNavigation: useLocation().pathname 기반 isActive 계산
  BottomNavigation-->>Browser: NavLink 아이콘/라벨 표시
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 라우터를 깔고, 아이콘을 심어
바텀바에 집, 벨, 달력, 사람이 줄지어~
Outlet 위로 페이지가 뚜둑 솟아나고
NavLink 따라 토끼가 폴짝폴짝!
길을 잃어도 *이 집으로 데려다줘 🏠

🚥 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 제목은 주요 변경사항인 '레이아웃 및 라우터 세팅'을 명확하게 요약하며, 전체 changeset의 핵심을 정확히 반영합니다.
Description check ✅ Passed PR 설명은 템플릿의 필수 섹션(ISSUE, What is this PR)을 완료했으나, Screenshot과 Test Checklist 섹션은 미작성 상태입니다.
Linked Issues check ✅ Passed 연결된 issue #2의 두 가지 요구사항(바텀내비게이션 구현, 라우트 세팅)이 모두 충족되었습니다.
Out of Scope Changes check ✅ Passed 모든 변경사항이 issue #2의 범위 내에서 바텀 내비게이션과 라우팅 구현에 직접적으로 관련됩니다.

✏️ 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 feat/layout-router-setting-2

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot requested a review from gyogyo05 June 23, 2026 00:13

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
src/app/router/router.tsx (2)

23-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

HomePage 로딩 전략 일관성 확인 필요.

HomePage는 직접 import 되어 즉시 로드되는 반면, 다른 모든 페이지(AnnouncementPage, ReservationPage 등)는 lazy로 동적 import 됩니다. 이로 인해 초기 번들 크기가 증가합니다.

의도적인 선택이라면 문제없지만, 일관성을 위해 HomePage도 lazy loading을 적용하는 것을 고려해보세요.

♻️ HomePage lazy loading 적용 제안
-import {HomePage} from '`@/pages/home/HomePage`';
     children: [
       {
         path: ROUTES.HOME,
-        element: <HomePage />,
+        lazy: async () => {
+          const {HomePage} = await import('`@/pages/home/HomePage`');
+          return {Component: HomePage};
+        },
       },
🤖 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 `@src/app/router/router.tsx` around lines 23 - 25, The HomePage component is
directly imported and immediately loaded, while all other pages in the router
use lazy loading for code splitting. To maintain consistency and reduce initial
bundle size, refactor the HomePage import to use React's lazy function with
dynamic import, similar to how other pages like AnnouncementPage and
ReservationPage are imported. This means changing the direct import statement to
use lazy(() => import(...)) and wrapping the element with Suspense if not
already present globally.

59-62: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

와일드카드 라우트 위치 확인.

와일드카드 라우트(*)가 최상위 레벨에 있어서 404 페이지에는 AppLayout과 하단 내비게이션이 표시되지 않습니다.

이것이 의도된 동작이라면 문제없지만, 404 페이지에도 하단 내비게이션을 표시하려면 AppLayoutchildren 안으로 이동을 고려하세요.

🤖 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 `@src/app/router/router.tsx` around lines 59 - 62, The wildcard route with path
'*' that redirects to ROUTES.HOME is currently defined at the top level of your
router configuration in the router.tsx file. If you want the bottom navigation
and AppLayout to be displayed on 404 pages, move this wildcard route object from
the top-level routes array into the children array of the AppLayout route
definition. This ensures that catch-all routes will still be wrapped by
AppLayout and display the full layout including bottom navigation instead of
rendering only the Navigate component at the root level.
🤖 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 `@package.json`:
- Around line 18-20: The react-dom version constraint is incompatible with React
Router v8.0.1, which requires React 19.2.7 or higher. Update the react-dom
version specification in the dependencies section from ^19.2.6 to ^19.2.7 to
ensure the correct minimum version is enforced and avoid potential compatibility
issues when the package is installed.
- Line 8: The build:icons script uses the --experimental-strip-types flag which
is only available in Node.js 22.6.0 and above. Add an engines field to
package.json to explicitly specify the minimum required Node.js version as
22.6.0 or higher. This ensures users have the correct Node.js version installed
before running the build scripts.

---

Nitpick comments:
In `@src/app/router/router.tsx`:
- Around line 23-25: The HomePage component is directly imported and immediately
loaded, while all other pages in the router use lazy loading for code splitting.
To maintain consistency and reduce initial bundle size, refactor the HomePage
import to use React's lazy function with dynamic import, similar to how other
pages like AnnouncementPage and ReservationPage are imported. This means
changing the direct import statement to use lazy(() => import(...)) and wrapping
the element with Suspense if not already present globally.
- Around line 59-62: The wildcard route with path '*' that redirects to
ROUTES.HOME is currently defined at the top level of your router configuration
in the router.tsx file. If you want the bottom navigation and AppLayout to be
displayed on 404 pages, move this wildcard route object from the top-level
routes array into the children array of the AppLayout route definition. This
ensures that catch-all routes will still be wrapped by AppLayout and display the
full layout including bottom navigation instead of rendering only the Navigate
component at the root level.
🪄 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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c083ab6a-182b-4b9e-bc82-15c240a840fb

📥 Commits

Reviewing files that changed from the base of the PR and between e0c52c6 and 4fbfad5.

⛔ Files ignored due to path filters (5)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • src/shared/assets/svg/ic-bell.svg is excluded by !**/*.svg
  • src/shared/assets/svg/ic-calendar-check.svg is excluded by !**/*.svg
  • src/shared/assets/svg/ic-house.svg is excluded by !**/*.svg
  • src/shared/assets/svg/ic-user.svg is excluded by !**/*.svg
📒 Files selected for processing (22)
  • package.json
  • src/app/App.tsx
  • src/app/layout/AppLayout.tsx
  • src/app/providers/QueryProvider.tsx
  • src/app/router/.gitkeep
  • src/app/router/router.tsx
  • src/pages/announcement/AnnouncementPage.tsx
  • src/pages/home/HomePage.tsx
  • src/pages/login/LoginPage.tsx
  • src/pages/mypage/MyPage.tsx
  • src/pages/reservation/ReservationDetailPage.tsx
  • src/pages/reservation/ReservationPage.tsx
  • src/shared/assets/svg/.gitkeep
  • src/shared/components/BottomNavigation.tsx
  • src/shared/components/index.ts
  • src/shared/constants/routes.ts
  • src/shared/icons/.gitkeep
  • src/shared/icons/ic-bell.tsx
  • src/shared/icons/ic-calendar-check.tsx
  • src/shared/icons/ic-house.tsx
  • src/shared/icons/ic-user.tsx
  • src/shared/icons/index.ts

Comment thread package.json
Comment thread package.json Outdated
@hdg0116 hdg0116 changed the title Feat/layout router setting 2 [FAET] 레이아웃 및 라우터 세팅 Jun 23, 2026
@hdg0116 hdg0116 merged commit d2feac0 into develop Jun 23, 2026
1 check passed
@hdg0116 hdg0116 deleted the feat/layout-router-setting-2 branch June 23, 2026 00:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] 레이아웃 및 라우터 세팅

1 participant