[FAET] 레이아웃 및 라우터 세팅#3
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughReact Router 기반 라우팅 구조를 초기 세팅한다. 경로 상수( Changes레이아웃 및 라우터 세팅
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 아이콘/라벨 표시
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/app/router/router.tsx (2)
23-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winHomePage 로딩 전략 일관성 확인 필요.
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 페이지에도 하단 내비게이션을 표시하려면
AppLayout의children안으로 이동을 고려하세요.🤖 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
⛔ Files ignored due to path filters (5)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlsrc/shared/assets/svg/ic-bell.svgis excluded by!**/*.svgsrc/shared/assets/svg/ic-calendar-check.svgis excluded by!**/*.svgsrc/shared/assets/svg/ic-house.svgis excluded by!**/*.svgsrc/shared/assets/svg/ic-user.svgis excluded by!**/*.svg
📒 Files selected for processing (22)
package.jsonsrc/app/App.tsxsrc/app/layout/AppLayout.tsxsrc/app/providers/QueryProvider.tsxsrc/app/router/.gitkeepsrc/app/router/router.tsxsrc/pages/announcement/AnnouncementPage.tsxsrc/pages/home/HomePage.tsxsrc/pages/login/LoginPage.tsxsrc/pages/mypage/MyPage.tsxsrc/pages/reservation/ReservationDetailPage.tsxsrc/pages/reservation/ReservationPage.tsxsrc/shared/assets/svg/.gitkeepsrc/shared/components/BottomNavigation.tsxsrc/shared/components/index.tssrc/shared/constants/routes.tssrc/shared/icons/.gitkeepsrc/shared/icons/ic-bell.tsxsrc/shared/icons/ic-calendar-check.tsxsrc/shared/icons/ic-house.tsxsrc/shared/icons/ic-user.tsxsrc/shared/icons/index.ts
ISSUE 🔗
close #2
What is this PR? 🔍
바텀내비게이션 구현 진행 및 라우트를 세팅했습니다.
Screenshot 📷
Test Checklist ✔
Summary by CodeRabbit
릴리스 노트
New Features
Chores