feat: 라우팅 설정

Author: AAminha

src/App.tsx

@@ -1,7 +1,44 @@
 import '@/styles/index.css';
+import { Route, Routes } from 'react-router';
+
+import Home from './pages/Home';
+import LetterBoardPage from './pages/LetterBoard';
+import LetterBoardDetailPage from './pages/LetterBoardDetail';
+import LetterBoxPage from './pages/LetterBox';
+import LetterDetailPage from './pages/LetterDetail';
+import LoginPage from './pages/Login';
+import MyPage from './pages/MyPage';
+import NotificationsPage from './pages/Notifications';
+import OnboardingPage from './pages/Onboarding';
+import RandomLettersPage from './pages/RandomLetters';
+import RollingPaperPage from './pages/RollingPaper';
+import WritePage from './pages/Write';
 
 const App = () => {
-  return <div>App</div>;
+  return (
+    <Routes>
+      <Route>
+        <Route index element={<Home />} />
+        <Route path="login" element={<LoginPage />} />
+        <Route path="onboarding" element={<OnboardingPage />} />
+        <Route path="letter">
+          <Route path="random" element={<RandomLettersPage />} />
+          <Route path="box" element={<LetterBoxPage />} />
+          <Route path="write" element={<WritePage />} />
+          <Route path=":id" element={<LetterDetailPage />} />
+        </Route>
+        <Route path="board">
+          <Route path="letter" element={<LetterBoardPage />} />
+          <Route path="letter/:id" element={<LetterBoardDetailPage />} />
+          <Route path="rolling/:id" element={<RollingPaperPage />} />
+        </Route>
+        <Route path="mypage">
+          <Route index element={<MyPage />} />
+          <Route path="notifications" element={<NotificationsPage />} />
+        </Route>
+      </Route>
+    </Routes>
+  );
 };
 
 export default App;

src/main.tsx

@@ -1,14 +1,18 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router';
+
 import App from './App';
 
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <App />
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </QueryClientProvider>
   </StrictMode>,
 );

src/pages/.gitkeep

@@ -0,0 +1,5 @@
+const HomePage = () => {
+  return <div>HomePage</div>;
+};
+
+export default HomePage;

src/pages/Home/index.tsx

@@ -0,0 +1,5 @@
+const LetterBoardPage = () => {
+  return <div>LetterBoardPage</div>;
+};
+
+export default LetterBoardPage;

src/pages/LetterBoard/index.tsx

@@ -0,0 +1,5 @@
+const LetterBoardDetailPage = () => {
+  return <div>LetterBoardDetailPage</div>;
+};
+
+export default LetterBoardDetailPage;

src/pages/LetterBoardDetail/index.tsx

@@ -0,0 +1,5 @@
+const LetterBoxPage = () => {
+  return <div>LetterBoxPage</div>;
+};
+
+export default LetterBoxPage;

src/pages/LetterBox/index.tsx

@@ -0,0 +1,5 @@
+const LetterDetailPage = () => {
+  return <div>LetterDetailPage</div>;
+};
+
+export default LetterDetailPage;

src/pages/LetterDetail/index.tsx

@@ -0,0 +1,5 @@
+const LoginPage = () => {
+  return <div>LoginPage</div>;
+};
+
+export default LoginPage;

src/pages/Login/index.tsx

@@ -0,0 +1,5 @@
+const MyPage = () => {
+  return <div>MyPage</div>;
+};
+
+export default MyPage;