[Init] 글로벌 라우터 세팅

package.json

@@ -11,10 +11,10 @@
   },
   "dependencies": {
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-router": "^7.9.6"
   },
   "devDependencies": {
-    "vite-tsconfig-paths": "^5.1.4",
     "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
@@ -27,6 +27,7 @@
     "globals": "^16.5.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.3",
-    "vite": "^7.2.2"
+    "vite": "^7.2.2",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

src/app/App.tsx

@@ -1,5 +1,19 @@
+import { router } from "@shared/router/router";
+import { RouterProvider } from "react-router";
+
 function App() {
-  return <div>티켓베이 파이팅~</div>;
+  return (
+    // @TODO: global 테마 추가
+    // <ThemeProvider>
+
+    // @TODO: 쿼리 클라이언트 추가
+    // <QueryClientProvider client={queryClient}>
+    <RouterProvider router={router} />
+    // <ReactQueryDevtools initialIsOpen={false} />
+    // </QueryClientProvider>
+
+    // </ThemeProvider>
+  );
 }
 
 export default App;

src/pages/ticket-detail/ticket-detail.tsx

@@ -1,5 +1,9 @@
+import { useParams } from "react-router";
+
 const TicketDetail = () => {
-  return <div>TicketDetail</div>;
+  const { ticketId } = useParams();
+
+  return <div>TicketDetail-{ticketId}</div>;
 };
 
 export default TicketDetail;

src/shared/router/global-layout.tsx

@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+import { Outlet, ScrollRestoration } from "react-router";
+
+export default function GlobalLayout() {
+  return (
+    <>
+      <Suspense fallback={null}>
+        <Outlet />
+      </Suspense>
+      <ScrollRestoration />
+    </>
+  );
+}

src/shared/router/lazy.tsx

@@ -0,0 +1,10 @@
+import { lazy } from "react";
+
+export const HomePage = lazy(() => import("@pages/home/home"));
+
+export const SelectTicketPage = lazy(
+  () => import("@pages/select-ticket/select-ticket")
+);
+export const TicketDetailPage = lazy(
+  () => import("@pages/ticket-detail/ticket-detail")
+);

src/shared/router/path.ts

@@ -0,0 +1,7 @@
+export const routePath = {
+  HOME: "/",
+  SELECT_TICKET: "/select-ticket",
+  TICKET_DETAIL: "/ticket-detail/:ticketId",
+} as const;
+
+export type Routes = (typeof routePath)[keyof typeof routePath];

src/shared/router/router.tsx

@@ -0,0 +1,11 @@
+import { createBrowserRouter } from "react-router";
+
+import { globalRoutes } from "@shared/router/routes/global-routes";
+import GlobalLayout from "@shared/router/global-layout";
+
+export const router = createBrowserRouter([
+  {
+    Component: GlobalLayout,
+    children: [...globalRoutes],
+  },
+]);

src/shared/router/routes/global-routes.tsx

@@ -0,0 +1,21 @@
+import {
+  HomePage,
+  SelectTicketPage,
+  TicketDetailPage,
+} from "@shared/router/lazy";
+import { routePath } from "@shared/router/path";
+
+export const globalRoutes = [
+  {
+    path: routePath.HOME,
+    element: <HomePage />,
+  },
+  {
+    path: routePath.SELECT_TICKET,
+    element: <SelectTicketPage />,
+  },
+  {
+    path: routePath.TICKET_DETAIL,
+    element: <TicketDetailPage />,
+  },
+];