Merge pull request #3 from Toy2-Team3/KAN-11--feature/layout

레이아웃 1차 병합

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,8 @@
+## 📌 제목
+<!— 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,12 +1,46 @@
 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';
+import styled from 'styled-components';
 
 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>
+          <PageWrap>
+            <Routes>
+              <Route path="/" element={<HomePage/>} /> 
+              <Route path="/community" element={<CommunityPage/>} /> 
+              <Route path="/chat" element={<ChatPage/>} /> 
+              <Route path="/mypage" element={<MyPage/>} /> 
+            </Routes>
+          </PageWrap>
+        </div>
+      </BrowserRouter>  
+    </ThemeProvider>
   );
 }
 
+const PageWrap = styled.div`
+  flex: 1; 
+  margin-left: 300px;
+
+  ${props => props.theme.response.tablet} {
+    margin-left: 100px;
+  }
+
+  ${props => props.theme.response.mobile} {
+    margin-left: 0;
+    margin-bottom: 120px;
+  }
+`;
+
 export default App;