[design]footer style 변경

codestates-seb · Nov 14, 2023 · 93f3d4b · 93f3d4b
1 parent 8585253
commit 93f3d4b
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 73 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -29,7 +29,7 @@
     "prettier": "^2.8.8",
     "style-loader": "^3.3.2",
     "webpack": "^5.81.0",
-    "webpack-cli": "^5.1.1",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.13.3"
   },
   "dependencies": {

diff --git a/client/public/github.png b/client/public/github.png
diff --git a/client/src/common/Footer.js b/client/src/common/Footer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import FooterStyle from '../style/FooterStyle';
-import { RxNotionLogo } from 'react-icons/rx';
-import { GoMarkGithub } from 'react-icons/go';
+// import { RxNotionLogo } from 'react-icons/rx';
+// import { GoMarkGithub } from 'react-icons/go';
 
 function Footer() {
   return (
@@ -10,7 +10,7 @@ function Footer() {
         <div className="content-template">
           <div className="content">
             <div className="Team">
-              <h4 className="Teamh4">Front-End</h4>
+              <div className="Teamh4">FE🧃</div>
               <ul className="Teamul">
                 <li>
                   <a
@@ -20,7 +20,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307158-1cb6146d-53a1-4c06-9f8e-9ab3b6557199.jpg"
+                      src="https://github.com/yeomdogyeong.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -35,7 +35,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307301-f1f52c06-781b-43ff-9493-d9e69c7ea118.jpg"
+                      src="https://github.com/ggggggggithub.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -49,7 +49,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307316-087601a2-bf93-4bf3-a7b1-b128243ef242.jpg"
+                      src="https://github.com/nowaveosu.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -63,7 +63,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307329-5a37c265-ec9d-4a63-acd3-e3d5f69068b0.jpg"
+                      src="https://github.com/wlsljh0516.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -72,7 +72,7 @@ function Footer() {
               </ul>
             </div>
             <div className="Team">
-              <h4 className="Teamh4">Back-End</h4>
+              <div className="Teamh4">BE🧃</div>
               <ul className="Teamul">
                 <li>
                   <a
@@ -82,7 +82,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307385-877084c4-1a4d-4b61-9c2c-eec712e6bb3e.jpg"
+                      src="https://github.com/Sniij.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -97,7 +97,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307351-71145bf5-c902-434b-90e3-9563385b9c71.jpg"
+                      src="https://github.com/insooY.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -111,7 +111,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307360-cd8e5f1d-ee0c-4295-bad2-278d072ccd5e.jpg"
+                      src="https://github.com/Gitdonghee.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -120,7 +120,7 @@ function Footer() {
               </ul>
             </div>
             <div className="teamContent">
-              <div className="teamLogo">
+              {/* <div className="teamLogo">
                 <img
                   src="https://camo.githubusercontent.com/dc42bd7ca030fc716579172fe7e093a7e510bd149987a7f5b6ed50b116343a88/68747470733a2f2f63617073756c652d72656e6465722e76657263656c2e6170702f6170693f747970653d776176696e6726636f6c6f723d6175746f266865696768743d3330302673656374696f6e3d68656164657226746578743d25454225423025393825454225414625423825454325424425413925323026666f6e7453697a653d3735"
                   alt="teamLogo"
@@ -129,21 +129,27 @@ function Footer() {
                 <span className="Teamspan">
                   Team. <strong>반미콩</strong>
                 </span>
-              </div>
+              </div> */}
               <div className="linkSNS">
-                <a
+                {/* <a
                   href="https://www.notion.so/codestates/db25eab5a8684b1786324e6cd8724852"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <RxNotionLogo size={25} />
-                </a>
+                  <RxNotionLogo size={33} />
+                </a> */}
                 <a
                   href="https://github.com/codestates-seb/seb43_main_009"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <GoMarkGithub size={25} />
+                  <img
+                    className="github-icon"
+                    src="https://cdn.pixabay.com/photo/2022/01/30/13/33/github-6980894_1280.png"
+                    alt="Profile icon"
+                  />
+
+                  {/* <GoMarkGithub size={33} /> */}
                 </a>
               </div>
             </div>

diff --git a/client/src/common/Layout.js b/client/src/common/Layout.js
@@ -2,15 +2,20 @@ import React from 'react';
 import Footer from './Footer';
 import Header from './Header';
 import { MainContent } from '../style/LayoutStyle';
+import styled from 'styled-components';
+
+const LayoutStyle = styled.div`
+  min-height: 100vh; // 뷰포트 높이의 100%를 최소 높이로 설정
+`;
 
 const Layout = (props) => {
   const { children } = props;
   return (
-    <>
+    <LayoutStyle>
       <Header />
       <MainContent>{children}</MainContent>
       <Footer />
-    </>
+    </LayoutStyle>
   );
 };
 

diff --git a/client/src/style/FooterStyle.js b/client/src/style/FooterStyle.js
@@ -3,28 +3,25 @@ import '../variables.css';
 
 const FooterStyle = styled.footer`
   position: relative;
-  height: 100%;
-  font-family: 'Noto Sans KR', sans-serif;
+  font-family: 'MaplestoryOTFBold';
+
   li {
     color: #000000;
     display: inline-block;
     text-align: center;
-    margin: 0px 10px;
-  }
-  h3 {
-    font-size: 25px;
-    font-weight: bold;
-    margin-left: 1em;
+    margin: 5px 30px;
   }
-  h4 {
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 20px;
+
+  .Teamh4 {
+    margin-left: 10px;
+    font-size: 10px;
+    margin-top: 10px;
   }
   li > span {
     display: block;
     text-align: center;
-    font-size: 20px;
+    font-size: 13px;
+    color: gray;
     @media only screen and (max-width: 768px) {
       font-size: 10px;
     }
@@ -38,7 +35,7 @@ const FooterStyle = styled.footer`
     background-color: var(--blackalpha-800);
   }
   .content {
-    background-color: #d9d9d9;
+    border-top: 1px solid #e0e0e0;
     width: 100%;
     display: flex;
     justify-content: space-around;
@@ -59,18 +56,17 @@ const FooterStyle = styled.footer`
     flex-direction: column;
   }
   .Teamul {
-    height: auto;
     display: flex;
-    padding-inline-start: 0;
+    /* padding-inline-start: 0; */
   }
   .Teamh4 {
-    font-size: 20px;
+    font-size: 15px;
     @media only screen and (max-width: 768px) {
       font-size: 10px;
     }
   }
   .Teamspan {
-    font-size: 20px;
+    font-size: 15px;
     @media only screen and (max-width: 768px) {
       font-size: 15px;
     }
@@ -84,6 +80,13 @@ const FooterStyle = styled.footer`
       height: 50px;
     }
   }
+
+  .github-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 50px;
+  }
+
   .footerLogo {
     display: flex;
     justify-content: center;
@@ -134,22 +137,22 @@ const FooterStyle = styled.footer`
     }
   }
   .linkSNS {
-    width: 70px;
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
   }
   .linkSNS > a {
     padding: 5px;
     border-radius: 50%;
     color: var(--white);
-    border: 1px solid var(--gray-600);
     cursor: pointer;
   }
   .linkSNS > a:hover {
     color: var(--blackalpha-900);
     background: var(--white);
+    transform: scale(1.1);
+    transition: transform 0.3s ease;
   }
 `;