Merge pull request #195 from Podo-Store/feat/convert-size-of-nav-to-fixed

Feat/convert size of nav to fixed

Author: game240

src/components/button/round_btn/RoundBtnV2.scss

@@ -0,0 +1,26 @@
+@use "./../_mixins.scss" as m;
+
+.__round-btn__#white {
+  @include m.white-btn;
+
+  border: 2.5px solid var(--Main, #6a39c0);
+  color: var(--Main, #6a39c0);
+}
+
+.__round-btn__#grey {
+  border: none;
+  background: #d9d9d9;
+  color: #fff;
+}
+
+.__round-btn__#purple {
+  @include m.purple-btn;
+
+  border: none;
+  background: var(--Main, #6a39c0);
+  color: #fff;
+}
+
+.__round-btn__#purple:disabled {
+  background-color: #dadada;
+}

src/components/button/round_btn/RoundBtnV2.tailwind.css

@@ -0,0 +1,5 @@
+@layer components {
+  .__round-btn__ {
+    @apply flex justify-center items-center w-[195px] h-[48px] border-box rounded-[50px] cursor-pointer disabled:cursor-default;
+  }
+}

src/components/button/round_btn/RoundBtnV2.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+import { RoundBtnV2Props } from "./types/roundBtnV2Props";
+
+import "./RoundBtnV2.scss";
+
+/**
+ * button component
+ *
+ * className이나 style에 폰트 적용 필요. e.g. p-large-bold
+ *
+ * 기본 크기: 195px x 48px
+ * @param color - "white" | "grey" | "purple"(default)
+ */
+const RoundBtnV2: React.FC<RoundBtnV2Props> = ({ color = "purple", className, ...props }) => {
+  const baseClass = "__round-btn__";
+
+  return <button className={clsx(className, baseClass)} id={color} {...props}></button>;
+};
+
+export default RoundBtnV2;

src/components/button/round_btn/RoundBtnV2LargeBold.tsx

@@ -0,0 +1,13 @@
+import RoundBtnV2 from "./RoundBtnV2";
+
+import { RoundBtnV2Props } from "./types/roundBtnV2Props";
+
+/**
+ * p-large-bold button component
+ * @param color - "white" | "grey" | "purple"
+ */
+const RoundBtnV2LargeBold: React.FC<RoundBtnV2Props> = ({ color, className, ...props }) => {
+  return <RoundBtnV2 color={color} className={"p-large-bold " + className} {...props} />;
+};
+
+export default RoundBtnV2LargeBold;

src/components/button/round_btn/RoundBtnV2XsBold.tsx

@@ -0,0 +1,13 @@
+import RoundBtnV2 from "./RoundBtnV2";
+
+import { RoundBtnV2Props } from "./types/roundBtnV2Props";
+
+/**
+ * p-xs-bold button component
+ * @param color - "white" | "grey" | "purple"
+ */
+const RoundBtnV2XsBold: React.FC<RoundBtnV2Props> = ({ color, className, ...props }) => {
+  return <RoundBtnV2 color={color} className={"p-xs-bold " + className} {...props} />;
+};
+
+export default RoundBtnV2XsBold;

src/components/button/round_btn/types/roundBtnV2Props.ts

@@ -0,0 +1,3 @@
+export interface RoundBtnV2Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  color: "white" | "grey" | "purple";
+}

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;
   }

src/styles/text.css

@@ -237,24 +237,29 @@
   color: #000;
 }
 
-.c-main {
+.c-main,
+.text-main {
   color: var(--Main, #9e30f4);
 }
 
-.c-grey4 {
+.c-grey4,
+.text-gray4 {
   color: var(--grey4, #bababa);
 }
 
-.c-grey5 {
+.c-grey5,
+.text-gray5 {
   color: var(--grey5, #9e9e9e);
 }
 
 .c-grey,
-.c-grey6 {
+.c-grey6,
+.text-gray6 {
   color: var(--grey6, #777);
 }
 
-.c-grey7 {
+.c-grey7,
+.text-gray7 {
   color: var(--grey7, #3c3c3c);
 }