[TrendingNow] Best Seller 부분 추가

Detail Notes :
1. TrendingNowPanel.js
-BestSeller만 우선 추가
2. utils.module.less
-elip -> 2줄 정상 작동이 되지 않아 수정처리
3. TItemCard.jsx
-rankOrd (랭킹) 추가
4. TItemCard.module.less
-스타일 추가 및 정리

com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less

@@ -7,32 +7,55 @@
   border-radius: 12px;
   border: 1px solid @COLOR_GRAY02;
   background-color: @COLOR_WHITE;
+  position: relative;
 
   &:focus-within {
     border: 4px solid @PRIMARY_COLOR_RED;
+    padding: 15px;
     box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
   }
 
+  .rankOrd {
+    .size(@w:78px, @h:102px);
+    .position(@position: absolute, @top: 0, @left: 18px);
+    .flex(@justifyCenter: space-between, @direction: column);
+    padding: 12px 12px 18px;
+    background: @COLOR_GRAY07;
+    z-index: 2;
+    border-radius: 0 0 50px 50px;
+    font-weight: bold;
+    color: @COLOR_WHITE;
+    > span {
+      .font (@fontFamily:Roboto, @fontSize:24px);
+    }
+    > strong {
+      .font (@fontFamily:Arial, @fontSize:42px);
+    }
+  }
+
+  &:focus-within {
+    .rankOrd {
+      top: -3px;
+      left: 15px;
+      background: @PRIMARY_COLOR_RED;
+    }
+  }
+
   .imageContainer {
-    width: 288px;
-    height: 288px;
+    .size(@w: 288px, @h: 288px);
     overflow: hidden;
     position: relative;
 
     img {
-      width: 100%;
-      height: 100%;
+      .size(@w: 100%, @h: 100%);
       object-fit: cover;
       object-position: center;
     }
 
     .discountBanner {
-      position: absolute;
+      .size(@w: 60px, @h: 60px);
       .flex();
-      width: 60px;
-      height: 60px;
-      bottom: 12px;
-      right: 12px;
+      .position(@position: absolute, @bottom: 12px, @right: 12px);
       background-color: @PRIMARY_COLOR_RED;
       color: @COLOR_WHITE;
       border-radius: 50%;
@@ -43,29 +66,24 @@
 
   .descContainer {
     .productName {
-      font-family: @baseFontBold;
-      font-size: 24px;
+      .font (@fontFamily:@baseFontBold, @fontSize:24px);
+      .elip(@clamp:2);
+      line-height: 1.33;
       color: @COLOR_GRAY06;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
       margin-top: 14px;
     }
 
     .priceInfo {
-      margin: 9px 0 12px 0;
-      font-size: 30px;
-      font-family: @baseFontBold;
+      .font (@fontFamily:@baseFontBold, @fontSize:30px);
+      margin-top: 9px;
       color: @PRIMARY_COLOR_RED;
+      line-height: 0.93;
 
       .originalPrice {
-        font-family: @baseFont;
+        .font (@fontFamily:@baseFont, @fontSize:18px);
         margin-left: 5px;
         text-decoration: line-through;
         color: @COLOR_GRAY04;
-        font-size: 18px;
       }
     }
   }