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

…on-bar 네비게이션 바 스타일 오류를 수정한다.
KDT1-FE · Nov 8, 2023 · d438ca0 · d438ca0
2 parents a46bc84 + 3278a80
commit d438ca0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,23 +7,40 @@ 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 (
     <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>
+          <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;
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -178,12 +178,14 @@ export default function NavigationBar() {
 const NavigationWrap = styled.div`
   border-right: 1px solid ${props => props.theme.color.borderGray};
   background: ${props => props.theme.color.white};
+  position: fixed;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   width: 300px;
   height: 100vh;
+  z-index: 9999;
 
   ${props => props.theme.response.tablet} {
     width: 100px;
@@ -194,7 +196,7 @@ const NavigationWrap = styled.div`
     border-right: none;
     width: 100%;
     height: auto; 
-    position: absolute;
+    position: fixed;
     bottom: 0;
   }
 `;