Merge pull request #115 from GDSC-PKNU-21-22/style/#114

Style/#114: Header, Footer 크기 변경
GDSC-PKNU-Official · Aug 1, 2023 · ef3dd39 · ef3dd39
2 parents 7d7c33b + 3569bef
commit ef3dd39
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import FooterTab from '@components/FooterTab';
 import Header from '@components/Header';
+import styled from '@emotion/styled';
 import Announcement from '@pages/Announcement';
 import Home from '@pages/Home';
 import MajorDecision from '@pages/MajorDecision';
@@ -9,7 +10,7 @@ import { Routes, Route } from 'react-router-dom';
 
 const App = () => {
   return (
-    <>
+    <Container>
       <Header />
       <Routes>
         <Route path="/" element={<Home />} />
@@ -19,8 +20,16 @@ const App = () => {
         <Route path="/major-decision/*" element={<MajorDecision />} />
       </Routes>
       <FooterTab />
-    </>
+    </Container>
   );
 };
 
 export default App;
+
+const Container = styled.div`
+  height: 100vh;
+`;
+
+const Body = styled.div`
+  padding: 17% 0 17% 0;
+`;
diff --git a/src/components/FooterTab/index.tsx b/src/components/FooterTab/index.tsx
@@ -43,18 +43,19 @@ const FooterTab = () => {
 const Footer = styled.div`
   // Footer 스타일 컴포넌트 수정
   max-width: 480px;
-  padding: 10px;
   position: fixed;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
   width: 100%;
 
-  height: 5vh;
+  height: 8%;
 
   display: flex;
   justify-content: space-around;
   align-items: center;
+  z-index: 2;
+  background-color: ${THEME.TEXT.WHITE};
 `;
 
 const IconContainer = styled.div`

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,26 +1,18 @@
 import Icon from '@components/Icon';
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import useRoter from '@hooks/useRouter';
-import React from 'react';
+import { THEME } from '@styles/ThemeProvider/theme';
 
 const Header = () => {
   const { routerTo, goBack } = useRoter();
   return (
-    <header
-      css={css`
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        padding: 10px;
-        height: 5vh;
-      `}
-    >
-      <Icon kind="arrowBack" onClick={goBack} />
-      <Logo onClick={() => routerTo('/')}>Logo</Logo>
-      <Icon kind="menu" />
-    </header>
+    <HeaderContainer>
+      <HeaderWrapper>
+        <Icon kind="arrowBack" onClick={goBack} />
+        <Logo onClick={() => routerTo('/')}>Logo</Logo>
+        <Icon kind="menu" />
+      </HeaderWrapper>
+    </HeaderContainer>
   );
 };
 
@@ -34,3 +26,23 @@ const Logo = styled.span`
 `;
 
 export default Header;
+
+const HeaderContainer = styled.div`
+  position: fixed;
+  top: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  max-width: 480px;
+  height: 8%;
+  background-color: ${THEME.TEXT.WHITE};
+  z-index: 2;
+`;
+
+const HeaderWrapper = styled.div`
+  width: 90%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;