#25 header menus justiry & footer update

src/components/layout/Footer.tsx

@@ -1,20 +1,40 @@
 import React from "react";
-import { FooterBox, FooterContents, FooterIconBox } from "../../styles/layout/footer";
-import { ReactComponent as NLslogo } from '../../assets/NL_logo-white.svg'
+import {
+  FooterBox,
+  FooterContents,
+  FooterIconBox,
+} from "../../styles/layout/footer";
+import { ReactComponent as NLslogo } from "../../assets/NL_logo-white.svg";
+import gitIcon from "../../assets/github_icon.svg";
+import mailIcon from "../../assets/mail_icon.svg";
 import { Text } from "../common";
 
 function Footer() {
   return (
     <FooterBox>
       <FooterIconBox>
-        <NLslogo width="35px"/>
+        <NLslogo width="35px" />
+        <a href="https://github.com/Network-Leader">
+          <img src={gitIcon} alt="github" />
+        </a>
+        <img src={mailIcon} alt="mail" />
       </FooterIconBox>
       <FooterContents>
-        <Text size="small" color="foot" children="서울특별시 노원구 공릉로" lineheight="28px"/>
-        <Text size="small" color="foot" children="© 개인정보처리방침 NL. All RIGHT RESERVED" lineheight="28px"/>
+        <Text
+          size="small"
+          color="foot"
+          children="서울특별시 노원구 공릉로"
+          lineheight="28px"
+        />
+        <Text
+          size="small"
+          color="foot"
+          children="© 개인정보처리방침 NL. All RIGHT RESERVED"
+          lineheight="28px"
+        />
       </FooterContents>
     </FooterBox>
-  )
+  );
 }
 
-export default Footer
+export default Footer;

src/styles/layout/footer.ts

@@ -1,31 +1,29 @@
 import styled from "@emotion/styled";
 
 const FooterBox = styled.div`
-  position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* width: 1441px; */
+  z-index: 999;
   width: 100%;
   height: 318px;
   left: 0px;
   top: 6057px;
   background-color: black;
-`
+`;
 
 const FooterIconBox = styled.div`
   display: flex;
   min-height: 35px;
   margin-top: 148px;
   min-width: 942px;
   border-bottom: 2px solid white;
-
-`
+`;
 
 const FooterContents = styled.div`
   min-width: 942px;
   color: white;
   padding: 40px 0px;
-`
+`;
 
-export { FooterBox, FooterIconBox, FooterContents };
+export { FooterBox, FooterIconBox, FooterContents };

src/styles/layout/header.ts

@@ -4,21 +4,26 @@ const HeaderBox = styled.div`
   display: flex;
   position: fixed;
   top: 0px;
-  left: 0px;
+  justify-content: space-between;
   /* width: 1441px; */
   width: 100%;
   height: 105px;
   z-index: 999;
   /* background-color: black; */
-  background-image: linear-gradient(to right, black 200px, transparent 200px 411px, black 411px 100%)
-`
+  background-image: linear-gradient(
+    to right,
+    black 200px,
+    transparent 200px 411px,
+    black 411px 100%
+  );
+`;
 
 const HeaderContents = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-left: 400px;
-`
+  margin-right: 200px;
+`;
 
 const HeaderMenuItem = styled.div`
   display: flex;
@@ -29,19 +34,13 @@ const HeaderMenuItem = styled.div`
   min-width: 100px;
   height: 100%;
   cursor: pointer;
-`
+`;
 
 const LogoBox = styled.div`
-  left: 205px;
   margin-left: 200px;
   min-width: 211px;
   min-height: 101px;
   cursor: pointer;
-`
+`;
 
-export { 
-  HeaderBox,
-  HeaderContents,
-  HeaderMenuItem,
-  LogoBox 
-};
+export { HeaderBox, HeaderContents, HeaderMenuItem, LogoBox };