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 && (
- {STRING_CONF.TOP}
{rank}
)}
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;
+ }
}
}
}