💄 [Client] nav.js : 반응형 nav bar 구현중

client/src/comp/Nav.js

@@ -1,72 +1,82 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBars } from '@fortawesome/free-solid-svg-icons'
 import profile from "../none_profile.jpeg";
 
+// 768px 이상에서는 nav가 보이고, 아이콘 안보임
+// 768px 이하는 nav 안보이고 아이콘 보임
+
 function Nav({ isLogin }) {
+  const NavBtn = styled.button`
+    position:absolute;
+    top:0px;
+    background-color:transparent;
+    width:max(3vw,60px);
+    height:max(3vw,60px);
+    font-size:max(3vw,30px);
+    transition:all 0.3s;
+    cursor:pointer;
+    z-index:100;
+    :hover{
+      color:#fff;
+    }
+    @media screen and (min-width: 768px){
+      display:none;
+    }
+  `
+
   const NavWrap = styled.nav`
+    @media screen and (max-width: 767px){
+      flex:none;
+      position:absolute;
+      width:100%;
+      height:100vh;
+      display:flex;
+      justify-content:center;
+      align-items:center;
+    } 
     background-color: #38372e;
     flex: 1 1 auto;
     display:flex;
     min-height:100vh;
     justify-content:center;
     align-items:center;
-    /* display: grid;
-    place-items: center; */
+    /* z-index:100; */
   `;
 
   const Button1 = styled.button`
     width: 20vh;
     height: 7vh;
     border: none;
     border-radius: 40px;
-    font-size: max(0.85vw, 12px);
+    font-size: 0.98rem;
     font-weight: 700;
     display: block;
     margin-top: 5vh;
-    cursor: pointer;
-    transition: 0.3s;
-    :hover {
-      background-color: black;
-      color: white;
-    }
     &:nth-child(1) {
       margin-top: 0;
     }
-    :hover {
-      background-color: black;
-      color: white;
-    }
   `;
 
   const Button2 = styled.button`
     width: 20vh;
     height: 7vh;
     border: none;
     border-radius: 40px;
-    font-size: max(0.85vw, 12px);
+    font-size: 0.98rem;
     font-weight: 700;
     display: block;
     margin: 5vh auto 0;
-    cursor: pointer;
-    transition: 0.3s;
-    :hover {
-      background-color: black;
-      color: white;
-    }
     &:nth-child(1) {
       margin-top: 0;
     }
-    :hover {
-      background-color: black;
-      color: white;
-    }
   `;
 
   const ProfileWrap = styled.div`
     width: 100%;
     text-align: center;
-    cursor: pointer;
     > img {
       width: 22vh;
       height: 22vh;
@@ -79,41 +89,45 @@ function Nav({ isLogin }) {
       height: 7vh;
       border: none;
       border-radius: 40px;
-      font-size: max(0.85vw, 12px);
+      font-size: 0.98rem;
       font-weight: 700;
       display: block;
       margin: 0 auto;
-      transition: 0.3s;
-    }
-    > button:hover {
-      background-color: black;
-      color: white;
-      cursor: pointer;
     }
   `;
 
   return (
     <>
       {isLogin ? (
-        <NavWrap>
-          <div>
-            <ProfileWrap>
-              <img src={profile} alt="none" />
-              <button>EDIT PROFILE</button>
-            </ProfileWrap>
-            <Button2>LOGOUT</Button2>
-            <Button2>
-              <Link to="/mypage">MYPAGE</Link>
-            </Button2>
-          </div>
-        </NavWrap>
+        <>
+          <NavBtn>
+            <FontAwesomeIcon icon={faBars}/>
+          </NavBtn>
+          <NavWrap>
+            <div>
+              <ProfileWrap>
+                <img src={profile} alt="none" />
+                <button>EDIT PROFILE</button>
+              </ProfileWrap>
+              <Button2>LOGOUT</Button2>
+              <Button2>
+                <Link to="/mypage">
+                  MYPAGE
+                </Link>
+              </Button2>
+            </div>
+          </NavWrap>
+        </>
       ) : (
-        <NavWrap>
-          <div>
-            <Button1>LOGIN / SIGNUP</Button1>
-            <Button1>MYPAGE</Button1>
-          </div>
-        </NavWrap>
+        <>
+          <NavBtn>햄버거</NavBtn>
+          <NavWrap>
+            <div>
+              <Button1>LOGIN / SIGNUP</Button1>
+              <Button1>MYPAGE</Button1>
+            </div>
+          </NavWrap>
+        </>
       )}
     </>
   );