[Init] 라우팅 세팅

package.json

@@ -14,7 +14,8 @@
   "dependencies": {
     "eslint-import-resolver-typescript": "^4.4.4",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.11.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/app/App.tsx

@@ -1,9 +1,11 @@
-import { HomePage } from "@/pages/home/home-page";
+import { RouterProvider } from "react-router-dom";
+
+import { router } from "./routes/app-router";
 
 const App = () => {
   return (
     <>
-      <HomePage />
+      <RouterProvider router={router} />
     </>
   );
 };

src/app/routes/app-router.tsx

@@ -0,0 +1,18 @@
+import { createBrowserRouter } from "react-router-dom";
+
+import { protectedRoutes } from "./protected-routes";
+import { publicRoutes } from "./public-routes";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    // element: <RootLayout />, TODO: RootLayout 추가
+    children: [
+      ...publicRoutes,
+
+      // TODO: auth에 따른 처리 추가
+      ...protectedRoutes,
+      // TODO: paths 이외의 경로 접근 시 error 처리
+    ],
+  },
+]);

src/app/routes/paths.ts

@@ -0,0 +1,18 @@
+export const ROUTES = {
+  HOME: "/",
+  LOGIN: "/login",
+  ONBOARDING: "/onboarding",
+  COMPANY: (id = ":id") => `/company/${id}`, // 기업 상세
+  EXPERIENCE_MATCHING: "/experience-matching", // 경험x기업 매칭
+
+  MATCHING_LIST: "/matching", // 경험x기업 매칭 결과 리스트
+  MATCHING_DETAIL: (id = ":id") => `/matching/${id}`, // 매칭 결과 상세
+
+  EXPERIENCE: "/experience", // 경험 목록
+  EXPERIENCE_CREATE: "/experience/create", // 경험 생성
+  EXPERIENCE_DETAIL: (id = ":id") => `/experience/${id}`, // 경험 상세
+  EXPERIENCE_EDIT: (id = ":id") => `/experience/${id}/edit`, // 경험 수정
+
+  MYPAGE: "/mypage",
+  BOOKMARK: "/bookmark",
+};

src/app/routes/protected-routes.tsx

@@ -0,0 +1,42 @@
+import { BookmarkPage } from "@/pages/bookmark/bookmark-page";
+import { CompanyDetailPage } from "@/pages/company-detail/company-detail-page";
+import { ExperiencePage } from "@/pages/experience/experience-page";
+import { ExperienceDetailPage } from "@/pages/experience-detail/experience-detail-page";
+import { ExperienceMatchingPage } from "@/pages/experience-matching/experience-matching-page";
+import { HomePage } from "@/pages/home/home-page";
+import { MatchingDetailPage } from "@/pages/matching-detail/matching-detail-page";
+import { MatchingListPage } from "@/pages/matching-list/matching-list-page";
+import { MyPage } from "@/pages/my-page/my-page";
+import { OnboardingPage } from "@/pages/onboarding/onboarding-page";
+
+import { ROUTES } from "./paths";
+
+export const protectedRoutes = [
+  { path: ROUTES.HOME, element: <HomePage /> },
+  { path: ROUTES.ONBOARDING, element: <OnboardingPage /> },
+
+  { path: ROUTES.COMPANY(), element: <CompanyDetailPage /> },
+  { path: ROUTES.EXPERIENCE_MATCHING, element: <ExperienceMatchingPage /> },
+
+  // 매칭 결과
+  { path: ROUTES.MATCHING_LIST, element: <MatchingListPage /> },
+  { path: ROUTES.MATCHING_DETAIL(), element: <MatchingDetailPage /> },
+
+  // 경험
+  { path: ROUTES.EXPERIENCE, element: <ExperiencePage /> },
+  {
+    path: ROUTES.EXPERIENCE_CREATE,
+    element: <ExperienceDetailPage mode="create" />,
+  },
+  {
+    path: ROUTES.EXPERIENCE_DETAIL(),
+    element: <ExperienceDetailPage mode="view" />,
+  },
+  {
+    path: ROUTES.EXPERIENCE_EDIT(),
+    element: <ExperienceDetailPage mode="edit" />,
+  },
+
+  { path: ROUTES.MYPAGE, element: <MyPage /> },
+  { path: ROUTES.BOOKMARK, element: <BookmarkPage /> },
+];

src/app/routes/public-routes.tsx

@@ -0,0 +1,5 @@
+import { LoginPage } from "@/pages/login/login-page";
+
+import { ROUTES } from "./paths";
+
+export const publicRoutes = [{ path: ROUTES.LOGIN, element: <LoginPage /> }];

src/pages/bookmark/bookmark-page.tsx

@@ -0,0 +1,9 @@
+const BookmarkPage = () => {
+    return (
+        <div>
+            <h1>Welcome to the Bookmark Page</h1>
+        </div>
+    );
+};
+
+export { BookmarkPage };

src/pages/company-detail/company-detail-page.tsx

@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom";
+
+const CompanyDetailPage = () => {
+  const { id } = useParams<{ id: string }>();
+  return (
+    <div>
+      <h1>Company Detail Page - {id}</h1>
+    </div>
+  );
+};
+
+export { CompanyDetailPage };

src/pages/experience-detail/experience-detail-page.tsx

@@ -0,0 +1,24 @@
+import { useParams } from "react-router-dom";
+
+import { ExperienceForm } from "./ui/experience-form";
+import { ExperienceViewer } from "./ui/experience-viewer";
+
+type mode = "view" | "edit" | "create";
+
+interface ExperiencePageProps {
+  mode: mode;
+}
+
+const ExperienceDetailPage = ({ mode }: ExperiencePageProps) => {
+  const { id } = useParams<{ id: string }>();
+  switch (mode) {
+    case "view":
+      return <ExperienceViewer />;
+
+    case "create":
+    case "edit":
+      return <ExperienceForm mode={mode} id={id} />;
+  }
+};
+
+export { ExperienceDetailPage };

src/pages/experience-detail/ui/experience-form.tsx

@@ -0,0 +1,19 @@
+type mode = "create" | "edit";
+
+interface ExperienceFormProps {
+  mode: mode;
+  id?: string;
+}
+
+const ExperienceForm = ({ mode, id }: ExperienceFormProps) => {
+  // TODO: mode에 따라 isEdit 모드 분기 처리
+  return (
+    <div>
+      <h1>
+        Experience Form - {mode} {mode === "edit" && `${id}`}
+      </h1>
+    </div>
+  );
+};
+
+export { ExperienceForm };

src/pages/experience-detail/ui/experience-viewer.tsx

@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom";
+
+const ExperienceViewer = () => {
+  const { id } = useParams<{ id: string }>();
+  return (
+    <div>
+      <h1>Experience Viewer - {id}</h1>
+    </div>
+  );
+};
+
+export { ExperienceViewer };

src/pages/experience-matching/experience-matching-page.tsx

@@ -0,0 +1,9 @@
+const ExperienceMatchingPage = () => {
+  return (
+    <div>
+      <h1>Welcome to the Experience Matching Page</h1>
+    </div>
+  );
+};
+
+export { ExperienceMatchingPage };

src/pages/experience/experience-page.tsx

@@ -0,0 +1,9 @@
+const ExperiencePage = () => {
+  return (
+    <div>
+      <h1>Experience List Page</h1>
+    </div>
+  );
+};
+
+export { ExperiencePage };

src/pages/home/home-page.tsx

@@ -1,12 +1,12 @@
+import Heart from "@icons/heart.svg?react";
 import KERORO from "@images/comfit_web_status.jpg";
-import Heart from "@icons/heart.svg?react"
 
 const HomePage = () => {
   return (
     <div>
       <h1>Welcome to the Home Page</h1>
       <img src={KERORO} alt="Keroro" />
-      <Heart aria-label= "좋아요" />
+      <Heart aria-label="좋아요" />
     </div>
   );
 };

src/pages/login/login-page.tsx

@@ -0,0 +1,9 @@
+const LoginPage = () => {
+    return (
+        <div>
+            <h1>Welcome to the Login Page</h1>
+        </div>
+    );
+};
+
+export { LoginPage };

src/pages/matching-detail/matching-detail-page.tsx

@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom";
+
+const MatchingDetailPage = () => {
+  const { id } = useParams<{ id: string }>();
+  return (
+    <div>
+      <h1>Welcome to the Matching Detail Page - {id}</h1>
+    </div>
+  );
+};
+
+export { MatchingDetailPage };

src/pages/matching-list/matching-list-page.tsx

@@ -0,0 +1,9 @@
+const MatchingListPage = () => {
+  return (
+    <div>
+      <h1>Welcome to the Matching List Page</h1>
+    </div>
+  );
+};
+
+export { MatchingListPage };

src/pages/my-page/my-page.tsx

@@ -0,0 +1,9 @@
+const MyPage = () => {
+    return (
+        <div>
+            <h1>Welcome to the My Page</h1>
+        </div>
+    );
+};
+
+export { MyPage };

src/pages/onboarding/onboarding-page.tsx

@@ -0,0 +1,9 @@
+const OnboardingPage = () => {
+    return (
+        <div>
+            <h1>Welcome to the Onboarding Page</h1>
+        </div>
+    );
+};
+
+export { OnboardingPage };

src/pages/register/register-page.tsx

@@ -0,0 +1,9 @@
+const RegisterPage = () => {
+    return (
+        <div>
+            <h1>Welcome to the Register Page</h1>
+        </div>
+    );
+};
+
+export { RegisterPage };