From cd9ce8c5125c2a9b7724dd645b878f8b78b4cd7c Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Sun, 23 Mar 2025 00:12:20 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20Navbar=20=EC=88=98=EC=A0=95=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?(#28)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NavBar/NavBar.style.ts | 52 ++++++++++++++++++++++++++-
 src/components/NavBar/NavBar.tsx      | 37 +++++++------------
 2 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/src/components/NavBar/NavBar.style.ts b/src/components/NavBar/NavBar.style.ts
index cd5461f..0feaa1d 100644
--- a/src/components/NavBar/NavBar.style.ts
+++ b/src/components/NavBar/NavBar.style.ts
@@ -185,12 +185,32 @@ export const NavBar = styled.div`
   .user-name {
     color: #171a1f;
     font-family: Inter;
-    font-size: 14px;
+    font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px; /* 157.143% */
   }
 
+  .content {
+    display: flex;
+    width: 244px;
+    height: 40px;
+    justify-content: start;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    border-radius: 6px;
+    background: rgba(0, 0, 0, 0);
+    color: #565d6d;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: bold;
+    font-weight: 600;
+    line-height: 22px; /* 157.143% */
+    margin-left: 18px;
+    margin-bottom: 5px;
+  }
+
   /* 작은 화면에서 메뉴가 세로로 나열되도록 */
   @media (max-width: 768px) {
     .nav-items {
@@ -218,3 +238,33 @@ export const NavBar = styled.div`
     }
   }
 `;
+
+export const StyledLankLabel = styled.div<{ rank: string }>`
+  background-color: ${({ rank }) =>
+    rank === "브론즈"
+      ? "#FFF5F0"
+      : rank === "실버"
+      ? "#F4F6FB"
+      : rank === "골드"
+      ? "#FEF9EE"
+      : "#EFFCFA"};
+  color: ${({ rank }) =>
+    rank === "브론즈"
+      ? "#672700"
+      : rank === "실버"
+      ? "#263F6D"
+      : rank === "골드"
+      ? "#98690C"
+      : "#147567"};
+  border-radius: 18px;
+  width: 80px;
+  height: 32px;
+  font-size: 14px;
+  text-align: center; /* 텍스트 가운데 정렬 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 16px;
+  margin-bottom: 10px;
+  margin-left: 10px;
+`;
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index 43e474b..2ffc051 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -1,18 +1,13 @@
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import * as S from "@/components/NavBar/NavBar.style";
 import logo from "@/assets/image/logo.svg";
 import doc from "@/assets/image/doc.svg";
 import lank from "@/assets/image/lank.svg";
 import add from "@/assets/image/add.svg";
-import myPage from "@/assets/image/myPage.svg";
 import logout from "@/assets/image/logout.svg";
 
 const NavBar = () => {
   const navigate = useNavigate();
-  const location = useLocation();
-
-  // 특정 경로가 현재 경로와 일치하면 해당 스타일을 적용
-  const isActive = (path: string) => location.pathname === path;
 
   return (
     <S.NavBar>
@@ -20,22 +15,6 @@ const NavBar = () => {
         <div className="logo">
           <img src={logo} alt="Logo" onClick={() => navigate("/main")} />
         </div>
-        <div className="nav-items">
-          <div
-            className={isActive("/lank") ? "active" : "nav-item"}
-            onClick={() => navigate("/lank")}
-          >
-            <img src={lank} alt="Lank" />
-            <a>랭킹 페이지</a>
-          </div>
-          <div
-            className={isActive("/fileask") ? "active" : "nav-item"}
-            onClick={() => navigate("/fileask")}
-          >
-            <img src={doc} alt="Doc" />
-            <a>문서 요청하기</a>
-          </div>
-        </div>
       </div>
       <div className="right">
         <div className="nav-button" onClick={() => navigate("/fileupload")}>
@@ -60,10 +39,20 @@ const NavBar = () => {
                 <span className="user-name">사용자 이름</span>
               </span>
               <hr className="dropdown-hr" />
+              <S.StyledLankLabel rank="골드">골드</S.StyledLankLabel>
+              <div className="content">포인트: 1000</div>
+              <div className="content">누적수익: 1000</div>
+              <hr className="dropdown-hr" />
+              <a href="/fileask">
+                <img src={doc} alt="Doc" />
+                문서 요청하기
+              </a>
               <a href="/mypage">
-                <img src={myPage} alt="MyPage" />
-                마이페이지
+                <img src={lank} alt="Lank" />
+                랭킹 페이지
               </a>
+              <hr className="dropdown-hr" />
+
               <a href="/logout">
                 <img src={logout} alt="logout" />
                 로그아웃