Merge pull request #107 from codestates-seb/fe_kjs

푸터 수정
codestates-seb · Sep 13, 2023 · a287209 · a287209
2 parents c601f7e + b72071c
commit a287209
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 94 deletions.
diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
@@ -1,103 +1,36 @@
 // eslint-disable-next-line no-unused-vars
 import React from "react";
-import  styled  from "styled-components";
-
-const FootContainer = styled.footer`
-box-sizing: border-box;
-width: 120rem;
-height: 18.75rem;
-flex-shrink: 0;
-color:rgba(255, 255, 255, 1);
-background-color:rgba(12, 33, 57, 1);
-.text {
-    display: flex;
-    flex-direction: column;
-    color: #FFF;
-text-align: center;
-font-family: Pretendard;
-font-size: 1rem;
-font-style: normal;
-font-weight: 400;
-line-height: normal;
-padding-left: 13.88rem;
-padding-top: 5.56rem;
-
-.text-line {
-    display: flex;
-    flex-direction: row;
-    width: 310px;
-}
-& .text-1{
-   
-   width: 310px;
-   height: 19px;
-   top: 89px;
-   left: 222px;
-   line-height:14.32px;
-   
-   }
-   
-    & .text-2 {
-       width: 36px;
-   height: 19px;
-   top: 118px;
-   left: 222px;
-   line-height:19.09px ;
-   align-items:center;
-   float:left;
-   }
-   & .text-3 {
-       width: 222px;
-   height: 19px;
-   top: 118px;
-   left: 273px;
-   line-height:19.09px ;
-   align-items:center;
-  
-   }
-   
-   &.text-4{
-   width: 195px;
-   height: 19px;
-   line-height:19.09px ;
-   align-items:center;
-   
-   }
-   &.text-5 {
-       width: 142px;
-   height: 17px;
-   line-height:14.32px ;
-   align-items:center;
-   }
-   &.text-6 {
-       width: 168px;
-   height: 17px;
-   top: 195px;
-   left: 1532px;
-   line-height:14.32px ;
-   align-items:center;
-   }
-}
-
-`;
+import {FooterContainer, FooterSection} from '../style/Footer' 
+import { Link } from "react-router-dom";
 
 function Footer() {
+    function UserInfoClick() {
+        alert('준비중입니다.')    
+    }
+
     return (
-        <FootContainer>
-
-        <div  className="text">
-                <div className="text-1">주식회사 코드스테이츠 & 팀 아싸 | 대표자: 윤민지</div>
-                <div className="text-line">
-            <div className="text-2">팀원 :</div>
-                    <div className="text-3">프론트엔드 : 설미선, 이용혁, 김준성</div>
+        <FooterContainer>
+            <FooterSection className="container_wt">
+                <div className="left_box">
+                    <h3>주식회사 코드스테이츠 & Team Assa | 대표자 : 윤민지</h3>
+                    <div className="text_box">
+                        <p>팀원 :</p>
+                        <ul>
+                            <li>프론트엔드 : 이용혁, 설미선, 김준성</li>
+                            <li>백엔드 : 윤민지, 손우진, 이동훈</li>
+                        </ul>
+                    </div>
+                    <div className="link_box">
+                        <Link to="/">홈페이지</Link>
+                        <span>|</span>
+                        <Link onClick={UserInfoClick}>개인정보 처리방침</Link>
                     </div>
-            <div className="text-4">백엔드 : 윤민지, 이동훈, 손우진</div>
-            <div className="text-5">홈페이지 | 개인정보 처리방침</div>
-            <div className="text-6">구글 크롬에 최적화 되어있습니다</div>
-
-        </div>
-
-    </FootContainer>
+                </div>
+                <div className="right_box">
+                    <p>구글 크롬에 최적화 되어있습니다.</p>
+                </div>
+            </FooterSection>
+        </FooterContainer>
     );
 }
 

diff --git a/client/src/style/Footer.js b/client/src/style/Footer.js
@@ -0,0 +1,47 @@
+import styled from "styled-components";
+
+export const FooterContainer = styled.footer`
+  width: 100%;
+  background-color: var(--navy);
+  padding: 5.3125rem 0;
+`
+
+export const FooterSection = styled.section`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  color: var(--white);
+
+  .left_box{
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+  .left_box h3{
+    font-size: 1.25rem;
+  }
+  .text_box{
+    display: flex;
+    gap: .9375rem;
+    align-items: flex-start;
+    font-size: 1.125rem;
+  }
+  .text_box ul li:last-child{
+    margin: .625rem 0 0;
+  }
+  .link_box{
+    display: flex;
+    gap: .3125rem;
+    margin: .9375rem 0 0;
+  }
+  .link_box a{
+    font-size: .875rem;
+  }
+  .link_box a,
+  .link_box span{
+    color: var(--white);
+  }
+  .right_box p{
+    font-size: .875rem;
+  }
+`
diff --git a/client/src/style/Header.Styled.jsx b/client/src/style/Header.Styled.jsx
@@ -7,6 +7,7 @@ export const HeaderContainer = styled.header`
     position: sticky;
     top: 0;
     background-color: var(--navy);
+    z-index: 999;
 `
 
 export const HeaderSection = styled.section`