Merge pull request #1 from Toy2-Team3/KAN-20--feature/layout/navigati…

…on-bar

네비게이션 바를 구현한다.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,13 +1,8 @@
-## 📌 관련 이슈
-<!— 관련있는 이슈 번호(#000)을 적어주세요.
-  해당 pull request merge와 함께 이슈를 닫으려면
-  closed #Issue_number를 적어주세요 —>
+## 📌 제목
+<!— PR에 대한 제목을 적어주세요 —>
 
-## ✨ 과제 내용
-<!— 과제에 대한 설명을 적어주세요 —>
+## ✨ 작업 내용
+<!— 작업한 내용을 모두 적어주세요 —>
 
-## 📸 스크린샷(선택)
-<!— 스크린샷이 필요한 과제면 스크린샷을 첨부해주세요 —>
-
-## 📚 레퍼런스 (또는 새로 알게 된 내용) 혹은 궁금한 사항들
-<!— 참고할 사항이 있다면 적어주세요 —>
+## ✅ 확인 사항
+<!— 다른 팀원들이 확인해야 하는 내용을 적어주세요 —>

package.json

@@ -9,6 +9,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/App.tsx

@@ -1,11 +1,28 @@
 import './App.css';
+import { ThemeProvider } from 'styled-components';
+import theme from '../src/styles/theme';
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import NavigationBar from './components/NavigationBar';
+import HomePage from './pages/HomePage';
+import CommunityPage from './pages/CommunityPage';
+import ChatPage from './pages/chatting/index';
+import MyPage from './pages/MyPage';
 
 function App() {
   return (
-    <div className="App">
-      <button>asdfsdas</button>
-      <input type="text" />
-    </div>
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        <div className="App" style={{display: 'flex'}}>
+          <NavigationBar></NavigationBar>
+          <Routes>
+            <Route path="/" element={<HomePage/>} /> 
+            <Route path="/community" element={<CommunityPage/>} /> 
+            <Route path="/chat" element={<ChatPage/>} /> 
+            <Route path="/mypage" element={<MyPage/>} /> 
+          </Routes>
+        </div>
+      </BrowserRouter>  
+    </ThemeProvider>
   );
 }