라우터 구조 설정 및 기본 레이아웃 적용 (SWYP-team-2th#76)

* 라우터 설정을 위한 담당페이지 세팅

* layout: outlet setting

* router setting

src/components/common/layout/DefaultLayout.tsx

@@ -1,5 +1,9 @@
+import { Outlet } from 'react-router-dom';
+
 export default function DefaultLayout() {
   return (
-    <div className="w-full h-full mx-auto my-0 min-h-lvh border-x-[1px] desktop:w-[480px]"></div>
+    <div className="w-full h-full mx-auto my-0 min-h-lvh border-x-[1px] desktop:w-[480px]">
+      <Outlet />
+    </div>
   );
 }

src/components/common/layout/SubLayout.tsx

@@ -1,5 +1,9 @@
+import { Outlet } from 'react-router-dom';
+
 export default function SubLayout() {
   return (
-    <div className="w-full h-full mx-auto my-0 min-h-lvh border-x-[1px] desktop:w-[480px]"></div>
+    <div className="w-full h-full mx-auto my-0 min-h-lvh border-x-[1px] desktop:w-[480px]">
+      <Outlet />
+    </div>
   );
 }

src/main.tsx

@@ -1,7 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App.tsx';
+import { RouterProvider } from 'react-router-dom';
+import { router } from '@/routes/routing.tsx';
 import './index.css';
 
 const queryClient = new QueryClient({
@@ -26,7 +27,7 @@ prepareMSW().then(() => {
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <QueryClientProvider client={queryClient}>
-        <App />
+        <RouterProvider router={router} />
       </QueryClientProvider>
     </StrictMode>,
   );

src/pages/onboarding/OnBoardingPage.tsx

@@ -0,0 +1,3 @@
+export default function OnBoardingPage() {
+  return <div>OnBoardingPage</div>;
+}

src/pages/post/PostPage.tsx

@@ -0,0 +1,3 @@
+export default function PostPage() {
+  return <div>PostPage</div>;
+}

src/routes/routing.tsx

@@ -0,0 +1,23 @@
+import { createBrowserRouter } from 'react-router-dom';
+import App from '@/App';
+import DefaultLayout from '@/components/common/layout/DefaultLayout';
+import SubLayout from '@/components/common/layout/SubLayout';
+import OnBoardingPage from '@/pages/onboarding/OnBoardingPage';
+import PostPage from '@/pages/post/PostPage';
+
+export const router = createBrowserRouter([
+  {
+    element: <DefaultLayout />,
+    children: [
+      { path: '/', element: <App /> },
+      {
+        path: '/posts/:shareUrl',
+        element: <PostPage />,
+      },
+    ],
+  },
+  {
+    element: <SubLayout />,
+    children: [{ path: '/onboarding', element: <OnBoardingPage /> }],
+  },
+]);