[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.jsx

@@ -12,6 +12,7 @@ export default function TItemCard({
   imageAlt,
   productName,
   priceInfo,
+  rankOrd,
   ...rest
 }) {
   const parsePriceInfo = (priceInfo) => {
@@ -41,6 +42,12 @@ export default function TItemCard({
 
   return (
     <SpottableItemList {...rest} className={css.container}>
+      {rankOrd && (
+        <div className={css.rankOrd}>
+          <span>TOP</span>
+          <strong>{rankOrd}</strong>
+        </div>
+      )}
       <div className={css.imageContainer}>
         <img src={imageSource} alt={imageAlt} />
         {discountRate && (

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;
+    .size(@w: 288px, @h: 288px);
-    height: 288px;
     overflow: hidden;
     position: relative;
 
     img {
-      width: 100%;
+      .size(@w: 100%, @h: 100%);
-      height: 100%;
       object-fit: cover;
       object-position: center;
     }
 
     .discountBanner {
-      position: absolute;
+      .size(@w: 60px, @h: 60px);
       .flex();
-      width: 60px;
+      .position(@position: absolute, @bottom: 12px, @right: 12px);
-      height: 60px;
-      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 (@fontFamily:@baseFontBold, @fontSize:24px);
-      font-size: 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 (@fontFamily:@baseFontBold, @fontSize:30px);
-      font-size: 30px;
+      margin-top: 9px;
-      font-family: @baseFontBold;
       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;
       }
     }
   }

com.twin.app.shoptime/src/style/utils.module.less

@@ -35,9 +35,9 @@
 .elip(@clamp) {
   overflow: hidden;
   text-overflow: ellipsis;
-  // -webkit-box-orient: vertical;
+  word-break: break-word;
-  // display: -webkit-box;
+  display: -webkit-box;
-  white-space: nowrap;
+  -webkit-box-orient: vertical;
   -webkit-line-clamp: @clamp;
 }
 

com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx

@@ -1,5 +1,40 @@
+import { useSelector } from "react-redux";
+import SectionTitle from "../../components/SectionTitle/SectionTitle";
 import TPanel from "../../components/TPanel/TPanel";
+import css from "./TrendingNowPanel.module.less";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import TGrid from "../../components/TGrid/TGrid";
+import TItemCard from "../../components/TItemCard/TItemCard";
+import { $L } from "../../utils/helperMethods";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
 
 export default function TrendingNowPanel() {
-  return <TPanel>Trending Now</TPanel>;
+  const bestSellerDatas = useSelector(
+    (state) => state.product.bestSellerData.bestSeller
+  );
+
+  return (
+    <TPanel>
+      <Container className={css.container}>
+        <SectionTitle title={$L(`BEST SELLER`)} />
+        <TGrid>
+          {bestSellerDatas &&
+            bestSellerDatas.map((bestSeller) => (
+              <TItemCard
+                key={bestSeller.rankOrd}
+                imageSource={bestSeller.imgUrl}
+                imageAlt={bestSeller.prdtNm}
+                productName={bestSeller.prdtNm}
+                priceInfo={bestSeller.priceInfo}
+                rankOrd={bestSeller.rankOrd}
+              />
+            ))}
+        </TGrid>
+      </Container>
+    </TPanel>
+  );
 }

com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.module.less

@@ -0,0 +1,10 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.container {
+  padding: 60px;
+  > ul {
+    margin-top: 35px;
+    flex-wrap: wrap;
+  }
+}