From 8d13ecdf5dca07d99ac5387370101302b8fff03b Mon Sep 17 00:00:00 2001
From: juwon5272 <jackson5272@naver.com>
Date: Mon, 11 Nov 2024 19:15:09 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[FE][Feat]=20#131=20:=20router=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=EB=93=A4=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx              | 21 ++++++++++++++++++++-
 frontend/src/main.tsx             |  5 ++++-
 frontend/src/pages/AddChannel.tsx |  1 +
 frontend/src/pages/DrawRoute.tsx  |  1 +
 frontend/src/pages/GuestView.tsx  |  1 +
 frontend/src/pages/HostView.tsx   |  1 +
 frontend/src/pages/Main.tsx       |  1 +
 frontend/src/pages/Register.tsx   |  1 +
 frontend/src/pages/UserRoute.tsx  |  1 +
 9 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/AddChannel.tsx
 create mode 100644 frontend/src/pages/DrawRoute.tsx
 create mode 100644 frontend/src/pages/GuestView.tsx
 create mode 100644 frontend/src/pages/HostView.tsx
 create mode 100644 frontend/src/pages/Main.tsx
 create mode 100644 frontend/src/pages/Register.tsx
 create mode 100644 frontend/src/pages/UserRoute.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9f8c81e5..42bb1071 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1 +1,20 @@
-export const App = () => <div>Hello</div>;
+import { Route, Routes } from 'react-router-dom';
+import { Main } from '@/pages/Main';
+import { Register } from '@/pages/Register';
+import { AddChannel } from '@/pages/AddChannel';
+import { UserRoute } from '@/pages/UserRoute';
+import { DrawRoute } from '@/pages/DrawRoute';
+import { HostView } from '@/pages/HostView';
+import { GuestView } from '@/pages/GuestView';
+
+export const App = () => (
+  <Routes>
+    <Route path="/" element={<Main />} />
+    <Route path="/register" element={<Register />} />
+    <Route path="/add-channel" element={<AddChannel />} />
+    <Route path="/add-channel/:user" element={<UserRoute />} />
+    <Route path="/add-channel/:user/draw" element={<DrawRoute />} />
+    <Route path="/channel/:channelId/host/:guestId" element={<HostView />} />
+    <Route path="/channel/:channelId/guest/:guestId" element={<GuestView />} />
+  </Routes>
+);
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 061ab8f1..3177f1a3 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import { App } from './App';
 // 우선은 폰트 다 포함시켰는데, 나중에 사용할 것들만 따로 뺴자.
@@ -15,6 +16,8 @@ import '@fontsource/pretendard/900.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 );
diff --git a/frontend/src/pages/AddChannel.tsx b/frontend/src/pages/AddChannel.tsx
new file mode 100644
index 00000000..cc2654aa
--- /dev/null
+++ b/frontend/src/pages/AddChannel.tsx
@@ -0,0 +1 @@
+export const AddChannel = () => <>Hello</>;
diff --git a/frontend/src/pages/DrawRoute.tsx b/frontend/src/pages/DrawRoute.tsx
new file mode 100644
index 00000000..f3975f3a
--- /dev/null
+++ b/frontend/src/pages/DrawRoute.tsx
@@ -0,0 +1 @@
+export const DrawRoute = () => <>Hello</>;
diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx
new file mode 100644
index 00000000..575774d7
--- /dev/null
+++ b/frontend/src/pages/GuestView.tsx
@@ -0,0 +1 @@
+export const GuestView = () => <>Hello</>;
diff --git a/frontend/src/pages/HostView.tsx b/frontend/src/pages/HostView.tsx
new file mode 100644
index 00000000..bf6a93bc
--- /dev/null
+++ b/frontend/src/pages/HostView.tsx
@@ -0,0 +1 @@
+export const HostView = () => <>Hello</>;
diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
new file mode 100644
index 00000000..4d9f9074
--- /dev/null
+++ b/frontend/src/pages/Main.tsx
@@ -0,0 +1 @@
+export const Main = () => <>Hello</>;
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
new file mode 100644
index 00000000..7b341f02
--- /dev/null
+++ b/frontend/src/pages/Register.tsx
@@ -0,0 +1 @@
+export const Register = () => <>Hello</>;
diff --git a/frontend/src/pages/UserRoute.tsx b/frontend/src/pages/UserRoute.tsx
new file mode 100644
index 00000000..3150b926
--- /dev/null
+++ b/frontend/src/pages/UserRoute.tsx
@@ -0,0 +1 @@
+export const UserRoute = () => <>Hello</>;

From dae025126ff29ad2f7bfcac04cc836a97e023954 Mon Sep 17 00:00:00 2001
From: juwon5272 <jackson5272@naver.com>
Date: Tue, 12 Nov 2024 11:31:30 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[FE][Refactor]=20#131=20:=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 742e82ad..458e9340 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,6 +7,13 @@ import { DrawRoute } from '@/pages/DrawRoute';
 import { HostView } from '@/pages/HostView';
 import { GuestView } from '@/pages/GuestView';
 
+const ChannelRoutes = () => (
+  <Routes>
+    <Route path="host" element={<HostView />} />
+    <Route path="guest/:guestId" element={<GuestView />} />
+  </Routes>
+);
+
 export const App = () => (
   <Routes>
     <Route path="/" element={<Main />} />
@@ -14,7 +21,6 @@ export const App = () => (
     <Route path="/add-channel" element={<AddChannel />} />
     <Route path="/add-channel/:user" element={<UserRoute />} />
     <Route path="/add-channel/:user/draw" element={<DrawRoute />} />
-    <Route path="/channel/:channelId/host/:guestId" element={<HostView />} />
-    <Route path="/channel/:channelId/guest/:guestId" element={<GuestView />} />
+    <Route path="/channel/:channelId/*" element={<ChannelRoutes />} />
   </Routes>
 );
\ No newline at end of file