feat: Navigation bar 사이즈 고정, RoundBtnV2 사용

Author: game240

src/pages/MainNav.jsx

@@ -2,6 +2,7 @@ import { useContext, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import ImageBtn from "@/components/button/ImageBtn";
+import RoundBtnV2 from "@/components/button/round_btn/RoundBtnV2";
 import SideMenuDialog from "@/components/navBar/SideMenuDialog";
 
 import AuthContext from "../contexts/AuthContext";
@@ -30,9 +31,7 @@ function MainNav() {
 
   return (
     <>
-      {openDialog && (
-        <SideMenuDialog open={openDialog} onClose={onCloseDialog} />
-      )}
+      {openDialog && <SideMenuDialog open={openDialog} onClose={onCloseDialog} />}
       <nav className="navbar">
         <ImageBtn
           className="hamburger-btn"
@@ -49,23 +48,14 @@ function MainNav() {
             navigateWithRefresh(event, "/");
           }}
         >
-          <img
-            className="icon"
-            src={navLogo}
-            alt="logo"
-            style={{ height: "2.786vh" }}
-          />
-          <img
-            src={navTitle}
-            alt="포도상점"
-            style={{ height: "2.593vh" }}
-          ></img>
+          <img className="icon h-[30.086px]" src={navLogo} alt="logo" />
+          <img src={navTitle} alt="포도상점" className="h-[28px]"></img>
         </Link>
         <ul className="navbar_menu">
           <li>
             <Link
               to="/list"
-              className="li"
+              className="h5-regular"
               onClick={(event) => {
                 navigateWithRefresh(event, "/list");
               }}
@@ -81,7 +71,7 @@ function MainNav() {
           <li>
             <Link
               to="/post"
-              className="li"
+              className="h5-regular"
               onClick={(event) => {
                 navigateWithRefresh(event, "/post");
               }}
@@ -100,35 +90,36 @@ function MainNav() {
         </ul>
         {!isAuthenticated ? (
           <div className="navbar_login">
-            <button
+            <RoundBtnV2
               onClick={() => {
                 navigate("/signin", { state: { from: location } });
               }}
-              className="signin_btn"
+              className="signin_btn p-large-regular w-[150px] h-[44px] rounded-[30px]"
+              color="white"
             >
               로그인
-            </button>
+            </RoundBtnV2>
           </div>
         ) : (
           <div className="navbar_login">
             {/*<img src={cart} alt="cart" />*/}
-            <img
-              src={person}
-              alt="myPage"
+            <button
               onClick={(event) => {
                 navigateWithRefresh(event, "/mypage/purchased");
               }}
-            />
-            <button
+            >
+              <img src={person} alt="myPage" className="my-page-button" />
+            </button>
+            <RoundBtnV2
               onClick={() => {
-                // context 호출
                 logout();
                 navigate("/");
               }}
-              className="signin_btn"
+              className="signin_btn p-large-regular w-[150px] h-[44px] rounded-[30px]"
+              color="white"
             >
               로그아웃
-            </button>
+            </RoundBtnV2>
           </div>
         )}
       </nav>

src/pages/MainNav.scss

@@ -7,16 +7,15 @@
   align-items: center;
 
   padding-left: 88px;
-  @include r.media-tablet {
-    padding-left: 44px;
-  }
-  & {
-    padding-right: 44px;
+  padding-right: 44px;
 
-    height: 6.481vh; /* 70px */
-    background-color: #ffffff;
+  height: 70px;
+  background-color: #ffffff;
 
-    border-bottom: 1px solid var(--Main, #6a39c0);
+  border-bottom: 1px solid var(--Main, #6a39c0);
+
+  @include r.media-tablet {
+    padding-left: 44px;
   }
 }
 
@@ -75,60 +74,30 @@
   padding: 8px 30px;
 }
 
-.navbar .navbar_menu .li {
-  color: #000;
-
-  /* H5/Regular */
-  font-family: "Noto Sans KR";
-  font-size: 1.852vh;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 2.593vh; /* 140% */
-}
-
 .navbar .navbar_login {
   display: flex;
   align-items: center;
 
   position: relative;
 }
 
-.navbar .navbar_login img {
+.navbar .navbar_login .my-page-button {
   position: absolute;
   left: -45px;
 
-  width: 2.407vh;
-  height: 2.593vh;
+  width: 26px;
+  height: 28px;
 
   cursor: pointer;
 
-  transform: translateX(-100%);
+  transform: translate(-50%, -50%);
   @include r.media-mobile {
     position: static;
     transform: none;
   }
 }
 
 .navbar .signin_btn {
-  @include m.white-btn;
-
-  border-radius: 30px;
-  border: 2.5px solid var(--Main, #6a39c0);
-  width: 13.889vh;
-  height: 4.074vh;
-  background-color: #fdfaff;
-
-  cursor: pointer;
-
-  color: var(--Main, #6a39c0);
-
-  /* Paragraph/Large/Regular */
-  font-family: "Noto Sans KR";
-  font-size: 1.667vh;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 2.593vh; /* 155.556% */
-
   @include r.media-tablet {
     display: none;
   }