From 18741505d51318b79478610f00e3744a3e08bfa9 Mon Sep 17 00:00:00 2001
From: jangheon Pyo <ifheone@gmail.com>
Date: Fri, 31 May 2024 16:07:00 +0900
Subject: [PATCH] =?UTF-8?q?[TItemCard]=20BestSeller=20TOP=20Text=20GUI=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EC=A0=9C=EA=B1=B0?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TItemCard/TItemCard.jsx    |  2 --
 .../TItemCard/TItemCard.module.less           | 23 +++++++++++++------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
index 0f6c7142..dcb81b15 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
@@ -30,7 +30,6 @@ const IMAGETYPES = {
 // @@pyh Todo, 추후 다국어 resource 추가
 const STRING_CONF = {
   SOLD_OUT: $L("SOLD OUT"),
-  TOP: $L("TOP"),
 };
 
 export const removeDotAndColon = (string) => {
@@ -206,7 +205,6 @@ export default memo(function TItemCard({
 
       {isBestSeller && rank && (
         <div className={css.bestSeller}>
-          {STRING_CONF.TOP}
           <span>{rank}</span>
         </div>
       )}
diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
index 7f450248..197c45ce 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
@@ -189,18 +189,25 @@
 
   // best seller
   .bestSeller {
-    .position(@position: absolute, @top: -1px, @left: 18px);
-    .flex(@direction: column, @justifyCenter: space-between);
-    padding: 15px 16px 21px;
+    .size(@w:78px, @h:84px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .position(@position: absolute, @top: 0, @left: 18px);
     background-color: @COLOR_GRAY07;
-    .font(@fontFamily: @robotoFontBold, @fontSize: 24px);
     color: @COLOR_WHITE;
     border-bottom-left-radius: 79px;
     border-bottom-right-radius: 79px;
 
     > span {
       .font(@fontFamily: @arialFontBold, @fontSize: 42px);
-      font-size: 42px;
+    }
+
+    &::before {
+      .size(@w:100%, @h:1px);
+      background-color: @COLOR_GRAY07;
+      .position(@position: absolute, @top: -1px, @left: 0);
+      content: "";
     }
   }
 
@@ -210,9 +217,11 @@
       .focused(@boxShadow: 22px, @borderRadius: 12px);
     }
 
-    // best seller
-    > div:nth-child(3) {
+    .bestSeller {
       background-color: @PRIMARY_COLOR_RED;
+      &::before {
+        display: none;
+      }
     }
   }
 }