[Init] router 세팅

[1jiwoo27]

📌 Related Issue

• Closes [Init] 라우터 세팅 #9

✅ Checklist

• PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 이슈는 등록했나요?
• 리뷰어와 라벨을 지정했나요?

📚 Tasks

• react-router-dom@7 설치
• src/shared/router/ 폴더 생성
• paths.ts를 router 내부에 배치
• index.tsx에서 createBrowserRouter로 기본 라우팅 구성
• App.tsx에 등록
• 기본 페이지 세팅 (home, login, error)

📷 Screenshot

Summary by CodeRabbit

• 신기능
  • 라우팅을 도입해 페이지 간 이동을 지원합니다.
  • 홈, 로그인, 에러 페이지를 추가했습니다.
  • 브라우저 주소 직접 입력 및 내비게이션이 가능합니다.
• 스타일
  • 기본 전역/앱 스타일을 제거하여 초기 UI 스타일이 단순화되거나 변경될 수 있습니다.
• 기타
  • 라우팅을 위한 라이브러리를 추가해 런타임 네비게이션을 활성화했습니다.

[Copilot]

Pull Request Overview

This PR sets up the initial React Router configuration for the application, transitioning from a basic Vite React template to a proper routing setup using react-router-dom v7.

• Installs react-router-dom v7 and configures basic routing structure
• Creates shared router configuration with path constants and route definitions
• Implements basic page components for home, login, and error handling
• Removes default Vite template code and styling

Reviewed Changes

Copilot reviewed 9 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/shared/router/path.ts	Defines path constants for routing
src/shared/router/index.tsx	Creates browser router configuration with route mappings
src/pages/home/home-page.tsx	Basic home page component
src/pages/login/login-page.tsx	Basic login page component
src/pages/error/error-page.tsx	Basic error page component
src/app/App.tsx	Replaces default template with RouterProvider
src/app/App.css	Removes default Vite styling
src/app/index.css	Removes default Vite styling
package.json	Adds react-router-dom dependency

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[coderabbitai]

Walkthrough

라우팅을 도입했다. react-router-dom을 의존성에 추가하고, src/shared/router에 경로 상수와 라우터 설정을 생성했다. App.tsx는 RouterProvider만 렌더한다. 홈/로그인/에러 페이지 컴포넌트를 추가했다. 기존 전역/앱 CSS를 모두 삭제했다.

Changes

Cohort / File(s)	Change Summary
Dependencies package.json	react-router-dom을 dependencies에 추가. devDependencies 내 플러그인 순서 조정.
Routing Setup src/shared/router/index.tsx, src/shared/router/path.ts	PATH 상수("/", "/login", "*") 추가. createBrowserRouter로 HOME/LOGIN/ERROR 라우트 구성 및 router export.
App Integration src/app/App.tsx	기존 UI/상태 제거. RouterProvider로 router 렌더. App 선언을 화살표 함수로 변경.
Page Components src/pages/home/home-page.tsx, src/pages/login/login-page.tsx, src/pages/error/error-page.tsx	단순 정적 페이지 컴포넌트 3종 추가(홈/로그인/에러). 기본 export.
Style Removal src/app/App.css, src/app/index.css	모든 스타일 규칙 삭제(루트/링크/버튼/애니메이션 등 전역 및 앱 스타일 제거).

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User as User/Browser
    participant Router as RouterProvider
    participant RRD as createBrowserRouter
    participant Home as HomePage
    participant Login as LoginPage
    participant Err as ErrorPage

    User->>Router: URL 접속(/, /login, 기타)
    Router->>RRD: 매칭 요청
    alt path == "/"
        RRD-->>Router: Home route
        Router->>Home: 렌더
    else path == "/login"
        RRD-->>Router: Login route
        Router->>Login: 렌더
    else 기타
        RRD-->>Router: Error route("*")
        Router->>Err: 렌더
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• [Init] widgets 폴더 추가 #2: 앱 엔트리 구조를 조정한 PR로, 본 PR의 라우팅 도입과 함께 초기 구동 경로/엔트리 구성을 맞추는 변경과 코드 레벨로 연관됨.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	App.css와 index.css의 모든 스타일을 삭제한 작업은 라우터 초기 설정 이슈 #9에서 요구된 변경 사항과 무관하며 CSS 관련 변경은 별도 PR로 분리하는 것이 적절합니다.	라우터 설정에 집중한 PR로 유지하기 위해 CSS 삭제 커밋을 되돌리거나 별도 PR로 분리해 주십시오.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	Title “[Init] router 세팅”은 라우터 초기 설정이라는 주요 변경 사항을 정확히 요약하고 있으며 불필요한 정보 없이 간결하고 명확합니다.
Linked Issues Check	✅ Passed	제공된 이슈 #9의 코딩 목표인 react-router-dom 설치, 경로 상수 관리, router 폴더 구조 및 구성 파일 작성, App.tsx에 RouterProvider 등록, Home/Login/Error 페이지 컴포넌트 추가가 모두 구현되었습니다.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch init/router/#9

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (4)

src/pages/error/error-page.tsx (1)

1-5: 초기 설정으로는 적절합니다.

에러 페이지의 기본 구조가 올바르게 설정되었습니다. 향후 개선 사항으로는 실제 에러 정보 표시, useRouteError 훅 활용, 사용자 친화적인 에러 메시지 추가를 고려해보세요.

src/shared/router/index.tsx (1)

7-11: 라우터 설정이 올바르게 구현되었습니다.

createBrowserRouter를 사용한 라우터 구성이 정확합니다. 향후 코드 스플리팅을 위해 lazy loading을 고려해보세요.

예시 (lazy loading 적용):

-import HomePage from "../../pages/home/home-page";
-import LoginPage from "../../pages/login/login-page";
-import ErrorPage from "../../pages/error/error-page";
+import { lazy } from "react";
+
+const HomePage = lazy(() => import("../../pages/home/home-page"));
+const LoginPage = lazy(() => import("../../pages/login/login-page"));
+const ErrorPage = lazy(() => import("../../pages/error/error-page"));

 export const router = createBrowserRouter([
   { path: PATH.HOME, element: <HomePage /> },
   { path: PATH.LOGIN, element: <LoginPage /> },
   { path: PATH.ERROR, element: <ErrorPage /> },
 ]);

lazy loading을 사용하는 경우 App.tsx에서 <Suspense> 래퍼를 추가해야 합니다.

src/app/App.tsx (1)

1-5: 라우터 통합이 올바르게 완료되었습니다.

RouterProvider를 통한 라우터 설정이 정확합니다. 향후 에러 핸들링 개선을 위해 Error Boundary 추가를 고려해보세요.

예시 (Error Boundary 추가):

import { RouterProvider } from "react-router-dom";
import { router } from "../shared/router";
import { ErrorBoundary } from "react-error-boundary";

const App = () => (
  <ErrorBoundary fallback={<div>앱 에러가 발생했습니다.</div>}>
    <RouterProvider router={router} />
  </ErrorBoundary>
);

export default App;

src/shared/router/path.ts (1)

1-5: 경로 상수 설정이 올바르게 구현되었습니다.

as const 어서션을 사용한 타입 좁히기가 정확하며, ERROR 경로의 와일드카드 패턴("*")도 적절합니다.

향후 타입 안정성 향상을 위해 경로 타입을 추출하여 활용할 수 있습니다:

export const PATH = {
  HOME: "/",
  LOGIN: "/login",
  ERROR: "*",
} as const;

export type PathKey = keyof typeof PATH;
export type PathValue = typeof PATH[PathKey];

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d854eab and bbbcd00.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (9)

• package.json (1 hunks)
• src/app/App.css (0 hunks)
• src/app/App.tsx (1 hunks)
• src/app/index.css (0 hunks)
• src/pages/error/error-page.tsx (1 hunks)
• src/pages/home/home-page.tsx (1 hunks)
• src/pages/login/login-page.tsx (1 hunks)
• src/shared/router/index.tsx (1 hunks)
• src/shared/router/path.ts (1 hunks)

💤 Files with no reviewable changes (2)

• src/app/App.css
• src/app/index.css

🧰 Additional context used

🧬 Code graph analysis (2)

src/shared/router/index.tsx (1)

src/shared/router/path.ts (1)

• PATH (1-5)

src/app/App.tsx (1)

src/shared/router/index.tsx (1)

• router (7-11)

🔇 Additional comments (4)

src/pages/home/home-page.tsx (1)

1-5: LGTM!

홈 페이지 컴포넌트가 올바르게 구현되었습니다. 초기 라우터 설정 단계로는 충분합니다.

src/pages/login/login-page.tsx (1)

1-5: LGTM!

로그인 페이지 컴포넌트가 올바르게 구현되었습니다. 초기 라우터 설정으로는 충분합니다.

package.json (1)

16-16: [email protected] 게시 확인됨
npm 레지스트리에서 해당 버전이 존재함을 확인했습니다.

src/shared/router/index.tsx (1)

3-5: tee 명령어가 없어 build.log가 생성되지 않았습니다. 아래 명령으로 다시 확인해주세요:

pnpm build > build.log 2>&1
grep -E "error.*(import|resolve|module)" build.log && echo "Import errors detected" || echo "Build successful"