feat: [4] react-router-dom을 이용한 페이지 구조 잡기

web/src/App.tsx

@@ -1,10 +1,32 @@
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { HomePage } from '@/pages';
-import GlobalStyles from './styles/global-styles';
+import {
+  AuthPage,
+  CollectCommentsPage,
+  CreateSurveyPage,
+  HomePage,
+  ResultPage,
+  Root,
+} from '@/pages';
+import store from '@/store';
+import GlobalStyles from '@/styles/global-styles';
 import { Provider } from 'react-redux';
-import store from './store';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-const router = createBrowserRouter([{ path: '/', element: <HomePage /> }]);
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Root />,
+    children: [
+      { index: true, element: <HomePage /> },
+      { path: 'result', element: <ResultPage /> },
+      {
+        path: 'survey',
+        children: [{ path: 'new', element: <CreateSurveyPage /> }],
+      },
+      { path: 'collect', element: <CollectCommentsPage /> },
+    ],
+  },
+  { path: '/auth', element: <AuthPage /> },
+]);
 
 export default function App() {
   return (

web/src/pages/auth-page.tsx

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

web/src/pages/collect-comments-page.tsx

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

web/src/pages/create-survey-page.tsx

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

web/src/pages/index.ts

@@ -1,3 +1,15 @@
+import AuthPage from '@/pages/auth-page';
+import CollectCommentsPage from '@/pages/collect-comments-page';
+import CreateSurveyPage from '@/pages/create-survey-page';
 import HomePage from '@/pages/home-page';
+import ResultPage from '@/pages/result-page';
+import Root from '@/pages/root';
 
-export { HomePage };
+export {
+  AuthPage,
+  CollectCommentsPage,
+  CreateSurveyPage,
+  HomePage,
+  ResultPage,
+  Root,
+};

web/src/pages/result-page.tsx

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

web/src/pages/root.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from 'react-router-dom';
+
+export default function Root() {
+  return <Outlet />;
+}