Merge branch 'KAN-11--feature/layout' into KAN-13--feature/layout/login

KDT1-FE · Nov 8, 2023 · f182f40 · f182f40
2 parents b61ba85 + d438ca0
commit f182f40
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ 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';
 import StartPage from './components/login/StartPage';
 import SignUpSpecific from './components/login/SignUpSpecific';
 import Login from './components/login/Login';
@@ -36,4 +37,18 @@ function App() {
   );
 }
 
+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;
   }
 `;