Conversation
Walkthrough라우팅 초기 설정을 추가했습니다. react-router-dom을 의존성에 등록하고, createBrowserRouter 기반의 router, routesConfig, Layout 및 기본 페이지 컴포넌트들을 생성했습니다. App은 RouterProvider를 렌더링하도록 변경되었고, tsconfig에 @routes 경로 별칭이 추가되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Browser
participant App
participant RouterProvider as RouterProvider/router
participant Layout
participant Outlet
participant Page as Page Component
User->>Browser: URL 입력/네비게이션
Browser->>App: 초기 렌더
App->>RouterProvider: RouterProvider 마운트
RouterProvider->>Layout: "/" 매칭 시 Layout 렌더
Layout->>Outlet: Outlet 렌더
RouterProvider-->>Outlet: 경로 매칭 (ROUTES_CONFIG)
Outlet->>Page: Remind | MyBookmark | Category(:id) | Level 렌더
note right of RouterProvider: 경로 정의는 ROUTES_CONFIG에서 로드
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes(없음) Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
|
✅ Storybook chromatic 배포 확인: |
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
고생하셨습니다-!! 빠른 라우터 설정 좋네요 ㅎㅎ
| remind: { | ||
| title: '리마인드', | ||
| path: '/', | ||
| }, | ||
| myBookmarks: { | ||
| title: '나의 북마크', | ||
| path: '/my-bookmarks', | ||
| }, | ||
| category: { | ||
| title: '카테고리', | ||
| path: (id: string) => `/category/${id}`, | ||
| }, | ||
| level: { | ||
| title: '레벨', | ||
| path: '/level', | ||
| }, |
There was a problem hiding this comment.
path를 문자열로 그대로 쓰는 게 아니라 상수화 한 점 좋네요-!
이렇게 사용하면 사용하는 여러 곳에서 따로 수정할 필요 없이 config 하나만 수정해도 반영이 되니 좋은 반영 같습니다ㅏ
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (9)
apps/client/src/pages/category/Category.tsx (1)
1-5: 동적 경로(':id')에 맞춰 useParams 사용 고려라우트가
/category/:id라면 파라미터 사용까지 스텁으로 잡아두면 추후 누락을 방지할 수 있습니다.다음과 같이 최소 추가를 제안합니다.
+import { useParams } from 'react-router-dom'; -const Category = () => { - return <div>Category</div>; -}; +const Category = () => { + const { id } = useParams<{ id: string }>(); + return <div>Category {id}</div>; +};apps/client/src/layout/Layout.tsx (2)
3-10: 레이아웃에 Suspense/ScrollRestoration 추가로 라우팅 UX 보완지금 상태도 OK지만, 페이지를 lazy 로드할 때 대기 UI와 스크롤 복원을 바로 지원하면 기본 UX가 좋아집니다.
-import { Outlet } from 'react-router-dom'; +import { Outlet, ScrollRestoration } from 'react-router-dom'; +import { Suspense } from 'react'; const Layout = () => { return ( <> {/* TODO: 필요시 레이아웃 추가 */} {/* TODO: 사이드바 추가 */} - <Outlet /> + <Suspense fallback={<div role="status" aria-busy="true">Loading...</div>}> + <Outlet /> + </Suspense> + <ScrollRestoration /> </> ); };
3-3: 에러 핸들링 경로(404) 추가 검토 요청현재
apps/client/src/routes/router.tsx를 확인한 결과,createBrowserRouter배열 내부에errorElement속성이나 와일드카드(*) 404 경로 설정이 누락되어 있습니다. 초기에 에러 페이지를 잡아두면 디버깅이 훨씬 수월해집니다.– 파일:
apps/client/src/routes/router.tsx
– 확인 스크립트 결과:errorElement및NotFound미발견추천 조치 사항:
- 각 라우트 객체에
errorElement: <ErrorPage/>를 추가하거나- 배열 마지막에
{ path: '*', element: <NotFoundPage/> }형태의 404 라우트를 정의추가로, 과거에 언급하신 대로
docs디렉터리에 라우팅/경로 네이밍 규칙 초안을 간단히 정리해 두시면 팀 내 컨벤션 공유에 도움이 될 것입니다.apps/client/src/routes/routesConfig.ts (2)
10-13: 동적 라우트용 매치 패턴을 명시적으로 추가해주세요현재
category.path는 URL 빌더 함수로 쓰이고, 라우터에선':id'를 인자로 전달하고 있어 사용처가 혼동될 수 있습니다. 매칭용 패턴을 별도 필드로 분리하면 명확합니다.다음 변경을 제안합니다:
category: { title: '카테고리', - path: (id: string) => `/category/${id}`, + pattern: '/category/:id', + path: (id: string) => `/category/${id}`, },
18-18: 상수 단언으로 타입 안전성 향상
as const를 적용해 라우트 키와 값의 리터럴 타입을 고정하면 이후 사용 시 오타/변경으로 인한 리스크를 줄일 수 있습니다.-}; +} as const;apps/client/src/App.tsx (1)
5-8: 불필요한 Fragment 제거 (미세 최적화)루트가 단일 노드이므로 Fragment 없이 바로 반환해도 됩니다.
- return ( - <> - <RouterProvider router={router} /> - </> - ); + return <RouterProvider router={router} />;apps/client/src/routes/router.tsx (3)
15-17: 루트 기본 경로는 index 라우트로 선언하는 것이 명확합니다
'/'자식 라우트를 명시하기보다index: true를 사용하면 의도가 분명하고 중복 매칭을 피할 수 있습니다.- { - path: ROUTES_CONFIG.remind.path, - element: <Remind />, - }, + { + index: true, + element: <Remind />, + },
23-24: 동적 라우트는 패턴 필드를 사용해 매칭하세요앞선 제안대로
pattern을 추가했다면 라우터에서는 패턴을 직접 참조하는 편이 안전합니다.- { - path: ROUTES_CONFIG.category.path(':id'), - element: <Category />, - }, + { + path: ROUTES_CONFIG.category.pattern, + element: <Category />, + },
26-30: 404 대응 라우트 추가 권장정적/동적 경로 외 요청에 대한 폴백이 없습니다. 간단한 NotFound 라우트를 추가하세요.
{ path: ROUTES_CONFIG.level.path, element: <Level />, }, + { + path: '*', + element: <div>Not Found</div>, // TODO: 별도 NotFound 컴포넌트로 교체 + },
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
apps/client/package.json(1 hunks)apps/client/src/App.tsx(1 hunks)apps/client/src/layout/Layout.tsx(1 hunks)apps/client/src/pages/category/Category.tsx(1 hunks)apps/client/src/pages/level/Level.tsx(1 hunks)apps/client/src/pages/myBookmark/MyBookmark.tsx(1 hunks)apps/client/src/pages/remind/Remind.tsx(1 hunks)apps/client/src/routes/router.tsx(1 hunks)apps/client/src/routes/routesConfig.ts(1 hunks)apps/client/tsconfig.json(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.065Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
🧬 Code graph analysis (3)
apps/client/src/App.tsx (1)
apps/client/src/routes/router.tsx (1)
router(9-32)
apps/client/src/pages/remind/Remind.tsx (1)
packages/design-system/src/components/card/Card.stories.tsx (1)
Remind(42-53)
apps/client/src/routes/router.tsx (1)
apps/client/src/routes/routesConfig.ts (1)
ROUTES_CONFIG(1-18)
🔇 Additional comments (6)
apps/client/tsconfig.json (1)
8-9: Vite 플러그인 연결 확인 완료apps/client 프로젝트의
vite.config.ts파일에서tsconfigPaths()플러그인이 정상적으로 등록되어 있어,tsconfig.json에 추가된 경로 별칭이 올바르게 해석됩니다. 추가 확인은 필요 없으며, 해당 변경사항 승인합니다.• apps/client/vite.config.ts
– 12행:tsconfigPaths(),확인 완료apps/client/package.json (1)
14-16: peerDependencies 호환성 검증 완료react-router-dom@7.8.2의 peerDependencies(react >=18, react-dom >=18)를 확인한 결과, apps/client/package.json의 react·react-dom 버전(^19.1.1)이 모두 요구사항을 충족합니다. 추가 조치 불필요합니다.
apps/client/src/pages/myBookmark/MyBookmark.tsx (1)
1-5: LGTM초기 페이지 스텁으로 충분합니다. 라우팅 연결만 확인되면 추후 내용 채워가면 되겠습니다.
apps/client/src/pages/remind/Remind.tsx (1)
1-5: 간단 페이지 컴포넌트 구현 적절합니다불필요한 의존성/사이드이펙트 없고 기본 라우트에 연결하기에 충분합니다.
apps/client/src/pages/level/Level.tsx (1)
1-5: 구현 적절합니다라우팅 연결을 위한 기본 스텁으로 충분합니다.
apps/client/src/routes/router.tsx (1)
1-6: tsconfig.json 경로 별칭(@routes, @pages) 정상 설정됨apps/client/tsconfig.json의
compilerOptions.paths에 아래와 같이 필요한 별칭이 모두 매핑되어 있습니다.
@routes/*→src/routes/*@pages/*→src/pages/*
@layout별칭은 현재 코드에서 사용되지 않으므로 추가 설정이 불필요해 보입니다. 이로 인해 컴파일 에러가 발생할 우려는 없습니다.
| import Remind from '@pages/remind/Remind'; | ||
| import { ROUTES_CONFIG } from '@routes/routesConfig'; | ||
| import { createBrowserRouter } from 'react-router-dom'; | ||
| import Layout from 'src/layout/Layout'; |
There was a problem hiding this comment.
레이아웃 import 경로가 빌드 실패를 유발할 가능성
'src/layout/Layout' 경로는 현재 워크스페이스 구조상 상대경로 또는 별칭 설정 없이는 해석되지 않을 확률이 높습니다. 상대경로로 변경하거나 TS paths 별칭을 추가해 주세요.
상대경로로 즉시 수정하려면:
-import Layout from 'src/layout/Layout';
+import Layout from '../layout/Layout';별칭을 선호하시면 apps/client/tsconfig.json에 다음을 추가하고 기존 import를 @layout/Layout으로 사용하세요:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@routes/*": ["routes/*"],
"@pages/*": ["pages/*"],
"@layout/*": ["layout/*"]
}
}
}🤖 Prompt for AI Agents
In apps/client/src/routes/router.tsx around line 7 the import
"src/layout/Layout" may not resolve in the workspace and will cause build
failures; either change the import to the correct relative path from this file
to the Layout component (e.g., adjust to the proper ../ or ../../ path that
points to layout/Layout), or add a TS path alias in apps/client/tsconfig.json
(set baseUrl to "src" and add a "@layout/*" mapping to "layout/*") and then
update the import to use that alias (e.g., "@layout/Layout"); after making the
change, reload/restart the TypeScript server and run a build to verify
resolution.
jllee000
left a comment
jllee000
left a comment
There was a problem hiding this comment.
고생하셨습니다! 이제 client내에서도 단일 대시보드페이지가 아니라 여러 pages를 가지는 구조가 되었네용! 귯
| return ( | ||
| <> | ||
| {/* TODO: 필요시 레이아웃 추가 */} | ||
| {/* TODO: 사이드바 추가 */} | ||
| <Outlet /> | ||
| </> | ||
| ); |
There was a problem hiding this comment.
이 레이아웃 파일은 사이드바 + page삽입] 구조 쓰는 곳으로 이해하는게 맞나요?
++ Outlet은 혹시 어떤 기능인건지?
There was a problem hiding this comment.
페이지는 Outlet을 통해 router에 정의한 페이지가 들어가게 돼요! 사이드바/헤더와 같이 공통으로 적용되어야 하는 부분을 밖에 정의하고 Outlet을 통해 child요소 -> page 정의한 route들이 적용되게 됩니다~
3 participants
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
라우터 기본 설정했습니다. path관련 config를 상수화해서 유지 보수가 편하게 설정했어요. 혹시나 추가로 건의해주시거나 의견이 있으시다면 편하게 코멘트 달아주세요 👍
Summary by CodeRabbit