From 64ecf405c9a120b3ca14e7a8700ce0d2901b1e02 Mon Sep 17 00:00:00 2001
From: Sangmin Park <sangminpark@Sangminui-MacBookPro.local>
Date: Mon, 14 Aug 2023 16:41:46 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[refactor]=20[GGFE-179]=20tier=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Layout/MenuBar/MenuBar.tsx |  4 ++--
 components/user/BasicProfile.tsx      |  4 ++--
 pages/api/pingpong/users/intraId.ts   |  2 +-
 styles/common.scss                    | 12 ++++++------
 styles/user/Profile.module.scss       |  2 +-
 utils/recoil/tierColor.ts             | 13 +++++++++++--
 6 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/components/Layout/MenuBar/MenuBar.tsx b/components/Layout/MenuBar/MenuBar.tsx
index 85f0f3697..61fa00e7a 100644
--- a/components/Layout/MenuBar/MenuBar.tsx
+++ b/components/Layout/MenuBar/MenuBar.tsx
@@ -57,9 +57,9 @@ const MenuProfile = () => {
     getProfile();
   }, []);
 
-  const tierIndex = useRecoilValue(tierIdSelector);
+  const tierId = useRecoilValue(tierIdSelector);
   const findTierIndex =
-    tierIndex === -1 ? styles.tierId : styles['tierId' + tierIndex.toString()];
+    tierId === 'none' ? styles.tierId : styles['tierId' + tierId];
 
   return (
     <div className={styles.menuProfileWrapper}>
diff --git a/components/user/BasicProfile.tsx b/components/user/BasicProfile.tsx
index 4c2fad51f..620e23ebd 100644
--- a/components/user/BasicProfile.tsx
+++ b/components/user/BasicProfile.tsx
@@ -29,9 +29,9 @@ export default function BasicProfile({ profileId }: ProfileProps) {
     tierName,
   } = useBasicProfile({ profileId });
 
-  const tierIndex = useRecoilValue(tierIdSelector);
+  const tierId = useRecoilValue(tierIdSelector);
   const findTierIndex =
-    tierIndex === -1 ? styles.tierId : styles['tierId' + tierIndex.toString()];
+    tierId === 'none' ? styles.tierId : styles['tierId' + tierId];
 
   return (
     <div className={styles.container}>
diff --git a/pages/api/pingpong/users/intraId.ts b/pages/api/pingpong/users/intraId.ts
index b336ff27f..139826d74 100644
--- a/pages/api/pingpong/users/intraId.ts
+++ b/pages/api/pingpong/users/intraId.ts
@@ -14,7 +14,7 @@ export default function handler(
     currentExp: 123,
     maxExp: 123,
     tierImageUri: '/image/fallBackSrc.jpeg',
-    tierName: '무지개 탁구채',
+    tierName: '노랑 탁구채',
     expRate: 123,
     snsNotiOpt: 'EMAIL',
   };
diff --git a/styles/common.scss b/styles/common.scss
index a0abd1964..37e5d93a4 100644
--- a/styles/common.scss
+++ b/styles/common.scss
@@ -333,23 +333,23 @@ $text-shadow-blue: 2px 2px 0px $pp-blue;
   font-family: Gugi;
   background: black;
   @include txtColor();
-  &.tierId1 {
+  &.tierIdred {
     background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
     @include txtColor();
   }
-  &.tierId2 {
+  &.tierIdyellow {
     background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
     @include txtColor();
   }
-  &.tierId3 {
+  &.tierIdgreen {
     background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
     @include txtColor();
   }
-  &.tierId4 {
+  &.tierIdblue {
     background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
     @include txtColor();
   }
-  &.tierId5 {
+  &.tierIdblack {
     background: linear-gradient(
       180.89deg,
       rgba(178, 178, 178, 0.552801) 26.68%,
@@ -359,7 +359,7 @@ $text-shadow-blue: 2px 2px 0px $pp-blue;
     );
     @include txtColor();
   }
-  &.tierId6 {
+  &.tierIdrainbow {
     background: linear-gradient(
       90deg,
       rgba(239, 80, 80, 0.553) 15%,
diff --git a/styles/user/Profile.module.scss b/styles/user/Profile.module.scss
index 7952df165..2b73104a7 100644
--- a/styles/user/Profile.module.scss
+++ b/styles/user/Profile.module.scss
@@ -128,7 +128,7 @@
   font-size: $small-font;
   align-items: center;
   text-align: center;
-  background-color: #73cce4;
+  background-color: #8fc7fb;
   .tierId {
     @include tierNumber;
     font-size: 0.9rem;
diff --git a/utils/recoil/tierColor.ts b/utils/recoil/tierColor.ts
index 62401e9d6..21306b6d8 100644
--- a/utils/recoil/tierColor.ts
+++ b/utils/recoil/tierColor.ts
@@ -2,12 +2,21 @@ import { selector } from 'recoil';
 import { profileState } from './user';
 import { v1 } from 'uuid';
 
-export const tierIdSelector = selector<number>({
+export const tierIdSelector = selector<string>({
   key: `profileState/${v1()}`,
   get: ({ get }) => {
     const myTier = get(profileState).tierName;
     const tierList = ['손', '빨', '노', '초', '파', '검', '무'];
+    const tierColor = [
+      'none',
+      'red',
+      'yellow',
+      'green',
+      'blue',
+      'black',
+      'rainbow',
+    ];
     const index = tierList.findIndex((tier) => tier[0] === myTier[0]);
-    return index;
+    return tierColor[index];
   },
 });

From 804cf70e261004302f80cdc9787a99261b8942f7 Mon Sep 17 00:00:00 2001
From: Sangmin Park <sangminpark@Sangminui-MacBookPro.local>
Date: Wed, 16 Aug 2023 10:30:33 +0900
Subject: [PATCH 2/2] [Style] [GGFE-179]

---
 components/Layout/MenuBar/MenuBar.tsx |  7 ++++---
 styles/Layout/MenuBar.module.scss     |  8 +++++---
 styles/common.scss                    | 16 ++++++++--------
 styles/user/Profile.module.scss       |  2 +-
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/components/Layout/MenuBar/MenuBar.tsx b/components/Layout/MenuBar/MenuBar.tsx
index 61fa00e7a..d567dae21 100644
--- a/components/Layout/MenuBar/MenuBar.tsx
+++ b/components/Layout/MenuBar/MenuBar.tsx
@@ -76,15 +76,16 @@ const MenuProfile = () => {
       </Link>
       <div className={styles.userInfoWrapper}>
         <div className={styles.userId}>
-          <div className={`${styles.tierId} ${findTierIndex}`}>
+          <div className={`${styles.tierContainer}`}>
             <PlayerImage
               src={profile.tierImageUri}
               styleName={'ranktier'}
               size={50}
             />
             &nbsp;
-            {profile.tierName}
-            <br />
+            <div className={`${styles.tierId} ${findTierIndex}`}>
+              {profile.tierName}
+            </div>
           </div>
           <Link
             href={`/users/detail?intraId=${user.intraId}`}
diff --git a/styles/Layout/MenuBar.module.scss b/styles/Layout/MenuBar.module.scss
index 12d269083..ee7521172 100644
--- a/styles/Layout/MenuBar.module.scss
+++ b/styles/Layout/MenuBar.module.scss
@@ -48,12 +48,14 @@
         font-size: 1.3rem;
         font-weight: 700;
         color: rgba(43, 43, 43, 1);
-        .tierId {
-          @include tierNumber();
+        .tierContainer {
           display: flex;
           flex-direction: row;
           align-items: center;
-          font-size: 1rem;
+          .tierId {
+            @include tierNumber();
+            font-size: 1rem;
+          }
         }
       }
       .userLevel {
diff --git a/styles/common.scss b/styles/common.scss
index 37e5d93a4..7e737c8a7 100644
--- a/styles/common.scss
+++ b/styles/common.scss
@@ -352,9 +352,9 @@ $text-shadow-blue: 2px 2px 0px $pp-blue;
   &.tierIdblack {
     background: linear-gradient(
       180.89deg,
-      rgba(178, 178, 178, 0.552801) 26.68%,
-      rgba(102, 102, 102, 0.3) 47.47%,
-      rgba(102, 102, 102, 0.51) 65.76%,
+      rgba(114, 114, 114, 0.553) 26.68%,
+      rgba(82, 82, 82, 0.3) 47.47%,
+      rgba(61, 61, 61, 0.51) 65.76%,
       rgba(0, 0, 0, 0) 84.03%
     );
     @include txtColor();
@@ -363,11 +363,11 @@ $text-shadow-blue: 2px 2px 0px $pp-blue;
     background: linear-gradient(
       90deg,
       rgba(239, 80, 80, 0.553) 15%,
-      rgba(255, 255, 102, 0.552801) 35.66%,
-      rgba(77, 233, 77, 0.553) 45.33%,
-      rgba(48, 145, 241, 0.553) 70%,
-      rgba(102, 102, 102, 0.3) 80.66%,
-      rgba(255, 209, 91, 0.51) 100%
+      #f6d365 38%,
+      rgba(60, 238, 60, 0.553) 45.33%,
+      rgba(10, 122, 234, 0.867) 70%,
+      rgba(26, 26, 27, 0.568) 80.66%,
+      rgb(123, 97, 224) 100%
     );
     @include txtColor();
   }
diff --git a/styles/user/Profile.module.scss b/styles/user/Profile.module.scss
index 2b73104a7..da01926fa 100644
--- a/styles/user/Profile.module.scss
+++ b/styles/user/Profile.module.scss
@@ -128,7 +128,7 @@
   font-size: $small-font;
   align-items: center;
   text-align: center;
-  background-color: #8fc7fb;
+  background-color: #8fc7fb9a;
   .tierId {
     @include tierNumber;
     font-size: 0.9rem;