[feat] 프론트엔드 라우터 세팅 (#21)

* chore : 라우팅을 위한 react-router-dom 설치

* feat : 라우터 사용해서 페이지 분리하기

client/package.json

@@ -1,48 +1,53 @@
 {
-   "name": "client",
-   "private": true,
-   "version": "0.0.0",
-   "type": "module",
-   "scripts": {
-      "dev": "vite --host 0.0.0.0 --port 3000",
-      "build": "tsc && vite build",
-      "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-      "preview": "vite preview",
-      "storybook": "storybook dev -p 6006",
-      "build-storybook": "storybook build"
-   },
-   "dependencies": {
-      "hls.js": "1.4.12",
-      "react": "18.2.0",
-      "react-dom": "18.2.0",
-      "recoil": "0.7.7",
-      "styled-components": "6.1.1"
-   },
-   "devDependencies": {
-      "@storybook/addon-essentials": "^7.5.3",
-      "@storybook/addon-interactions": "^7.5.3",
-      "@storybook/addon-links": "^7.5.3",
-      "@storybook/addon-onboarding": "^1.0.8",
-      "@storybook/blocks": "^7.5.3",
-      "@storybook/react": "^7.5.3",
-      "@storybook/react-vite": "^7.5.3",
-      "@storybook/testing-library": "^0.2.2",
-      "@types/react": "^18.2.15",
-      "@types/react-dom": "^18.2.7",
-      "@typescript-eslint/eslint-plugin": "^6.0.0",
-      "@typescript-eslint/parser": "^6.0.0",
-      "@vitejs/plugin-react": "^4.0.3",
-      "eslint": "^8.53.0",
-      "eslint-config-prettier": "^9.0.0",
-      "eslint-plugin-import": "^2.29.0",
-      "eslint-plugin-jsx-a11y": "^6.8.0",
-      "eslint-plugin-react": "^7.33.2",
-      "eslint-plugin-react-hooks": "^4.6.0",
-      "eslint-plugin-react-refresh": "^0.4.3",
-      "eslint-plugin-storybook": "^0.6.15",
-      "prettier": "^3.0.3",
-      "storybook": "^7.5.3",
-      "typescript": "^5.0.2",
-      "vite": "^4.4.5"
-   }
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 3000",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
+    "hls.js": "1.4.12",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "^6.18.0",
+    "recoil": "0.7.7",
+    "styled-components": "6.1.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "prettier": "^3.0.3",
+    "storybook": "^7.5.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
 }

client/src/App.tsx

@@ -1,10 +1,13 @@
-import HlsPlayer from './components/hls'
+import { Route, Routes } from 'react-router-dom'
+import HomePage from './pages/HomePage/HomePage'
+import ExPage from './pages/ExPage/ExPage'
 
 function App() {
   return (
-    <>
-      <HlsPlayer />
-    </>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/exPage" element={<ExPage />} />
+    </Routes>
   )
 }
 

client/src/main.tsx

@@ -1,9 +1,12 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import { BrowserRouter } from 'react-router-dom'
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-   <React.StrictMode>
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
       <App />
-   </React.StrictMode>
-);
+    </BrowserRouter>
+  </React.StrictMode>,
+)

client/src/pages/ExPage/ExPage.styles.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background-color: #b1b1b1;
+`

client/src/pages/ExPage/ExPage.tsx

@@ -0,0 +1,11 @@
+import * as styles from './ExPage.styles'
+
+const ExPage = () => {
+  return (
+    <styles.Container>
+      <h1>exPage</h1>
+    </styles.Container>
+  )
+}
+
+export default ExPage

client/src/pages/HomePage/HomePage.styles.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background-color: #eee;
+`

client/src/pages/HomePage/HomePage.tsx

@@ -0,0 +1,11 @@
+import * as styles from './HomePage.styles'
+
+const HomePage = () => {
+  return (
+    <styles.Container>
+      <h1>GBS</h1>
+    </styles.Container>
+  )
+}
+
+export default HomePage