[FeaturedBrandsPanel] TodayDeals 수정

Detail Notes :

1. 추후에 변경 될 시나리오에 따른 조건 및 css 수정

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.jsx

@@ -9,6 +9,7 @@ const STRING_CONF = {
   TODAYS_DEALS: $L("TODAY'S DEALS"),
 };
 
+// @@pyh, Todo 추후 삭제
 // cpnFlag, // 쿠폰 여부 (Y or N)
 // freeShippingFlag, // 무료 배송 여부 (Y or N)
 // logoImgAlt, // 로고 이미지 alt 값
@@ -30,10 +31,7 @@ const STRING_CONF = {
 // todaySpclFlag, // Today Sepcial Value 여부 (Y or N)
 
 export default memo(function TodaysDeals({ brandTsvInfo }) {
-  console.log("@@brandTsvInfo", brandTsvInfo);
-
   const {
-    cpnFlag: couponFlag,
     freeShippingFlag,
     prdtNm: productName,
     priceInfo,
@@ -45,10 +43,8 @@ export default memo(function TodaysDeals({ brandTsvInfo }) {
     <div className={css.container}>
       <SectionTitle title={STRING_CONF.TODAYS_DEALS} />
       <TodaysDealsCard
-        couponFlag={couponFlag}
         freeShippingFlag={freeShippingFlag}
         imageSource={thumbnailImg}
-        imageAlt={productName}
         priceInfo={priceInfo}
         productName={productName}
         todaySpecialFlag={todaySpecialFlag}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.jsx

@@ -2,68 +2,55 @@ import React, { memo } from "react";
 
 import Spottable from "@enact/spotlight/Spottable";
 
+import CustomImage from "../../../../components/CustomImage/CustomImage";
 import usePriceInfo from "../../../../hooks/usePriceInfo";
+import { $L } from "../../../../utils/helperMethods";
 import css from "./TodaysDealsCard.module.less";
 
 const SpottableComponent = Spottable("div");
 
+const STRING_CONF = {
+  SAVE: $L("SAVE"),
+};
+
 export default memo(function TodaysDealsCard({
-  couponFlag,
   freeShippingFlag,
-  imageAlt,
   imageSource,
   priceInfo,
   productName,
   todaySpecialFlag,
   ...rest
 }) {
-  const { originalPrice, discountedPrice, discountRate, discountNumeric } =
+  const { originalPrice, discountedPrice, discountRate } =
     usePriceInfo(priceInfo);
 
   return (
     <SpottableComponent className={css.item} {...rest}>
       <div>
-        <img src={imageSource} alt={imageAlt} />
+        <CustomImage src={imageSource} delay={0} alt="" />
       </div>
 
       <div>
         <div>
-          <div className={css.todaysDealsTag}>
+          {todaySpecialFlag === "Y" && <span className={css.specialValue} />}
-            {todaySpecialFlag === "N" && <span className={css.specialValue} />}
+          {freeShippingFlag === "Y" && <span className={css.freeShipping} />}
-            {freeShippingFlag === "N" && <span className={css.freeShipping} />}
-          </div>
-          <div className={css.specialPriceType}>
-            {true && <span className={css.tsv} />}
-            {true && <span className={css.frees} />}
-            {true && <span className={css.bigSale} />}
-            {true && <span className={css.shopTimePrice} />}
-            {couponFlag === "N" && (
-              // @@pyh Todo, COUPON, image resource 유무에 따라 추후 수정 (언어)
-              <span className={css.coupon}>{"COUPON"}</span>
-            )}
-          </div>
         </div>
 
         <div>
           <h3>{productName}</h3>
           <p>
             {discountRate ? discountedPrice : originalPrice}
-            {/* {discountRate && <span>{originalPrice}</span>} */}
+            {discountRate && <span>{originalPrice}</span>}
-            <span>{"$ 22.33"}</span>
           </p>
         </div>
       </div>
 
-      {/* {discountRate && (
+      {discountRate && (
         <div>
-          <span>{"18%"}</span>
+          <span>{discountRate}</span>
-          <span>{"SAVE"}</span>
+          <span>{STRING_CONF.SAVE}</span>
         </div>
-      )} */}
+      )}
-      <div>
-        <span>{"18%"}</span>
-        <span>{"SAVE"}</span>
-      </div>
     </SpottableComponent>
   );
 });

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.module.less

@@ -28,94 +28,37 @@
     .size(@w: 648px, @h: 100%);
     padding: 12px 0;
 
-    // product badge icon area (top)
+    // top
     > div:nth-child(1) {
-      .size(@w: inherit, @h: 156px);
+      .size(@w: inherit, @h: 112px);
 
-      .todaysDealsTag {
+      .specialValue {
-        .size(@w: inherit, @h: 112px);
+        display: block;
-
+        .size(@w: 240px, @h: 48px);
-        .specialValue {
+        margin-bottom: 6px;
-          display: block;
+        background-image: url("../../../../../assets/icon/badge/badge-td-specialvalue@3x.png");
-          .size(@w: 240px, @h: 48px);
+        background-position: center;
-          margin-bottom: 6px;
+        background-size: contain;
-          background-image: url("../../../../../assets/icon/badge/badge-td-specialvalue@3x.png");
-          background-position: center;
-          background-size: contain;
-        }
-
-        .freeShipping {
-          display: block;
-          .size(@w: 240px, @h: 48px);
-          margin-bottom: 6px;
-          background-image: url("../../../../../assets/icon/badge/badge-td-freesh@3x.png");
-          background-position: center;
-          background-size: contain;
-        }
       }
 
-      .specialPriceType {
+      .freeShipping {
-        .flex(@justifyCenter: flex-start);
+        display: block;
-        overflow: hidden;
+        .size(@w: 240px, @h: 48px);
-        .size(@w: inherit, @h: 42px);
         margin-bottom: 6px;
-
+        background-image: url("../../../../../assets/icon/badge/badge-td-freesh@3x.png");
-        .tsv {
+        background-position: center;
-          display: inline-block;
+        background-size: contain;
-          .size(@w: 80px, @h: 42px);
-          margin-right: 6px;
-          background-image: url("../../../../../assets/icon/badge/badge-tsv@3x.png");
-          background-position: center;
-          background-size: contain;
-        }
-
-        .frees {
-          display: inline-block;
-          .size(@w: 130px, @h: 42px);
-          margin-right: 6px;
-          background-image: url("../../../../../assets/icon/badge/badge-frees-h@3x.png");
-          background-position: center;
-          background-size: contain;
-        }
-
-        .bigSale {
-          display: inline-block;
-          .size(@w: 120px, @h: 42px);
-          margin-right: 6px;
-          background-image: url("../../../../../assets/icon/badge/badge-bigsale@3x.png");
-          background-position: center;
-          background-size: contain;
-        }
-
-        .shopTimePrice {
-          display: inline-block;
-          .size(@w: 200px, @h: 42px);
-          margin-right: 6px;
-          background-image: url("../../../../../assets/icon/badge/badge-shoptimeprice@3x.png");
-          background-position: center;
-          background-size: contain;
-        }
-
-        .coupon {
-          display: inline-block;
-          .size(@w: 120px, @h: 42px);
-          border-radius: 4px;
-          background-color: #7a808d;
-          .font(@fontFamily: @baseFontBold, @fontSize: 24px);
-          text-align: center;
-          line-height: 42px;
-          color: @COLOR_WHITE;
-        }
       }
     }
 
-    // product contents area (bottom)
+    // bottom
     > div:nth-child(2) {
+      .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
+
       h3 {
         overflow: hidden;
         width: 540px;
-        min-height: 80px;
+        margin-bottom: 18px;
-        margin-bottom: 4px;
         .font(@fontFamily: @baseFontBold, @fontSize: 30px);
         .elip(@clamp:2);
         word-break: break-all;
@@ -167,6 +110,4 @@
       .focused(@boxShadow: 22px, @borderRadius: 12px);
     }
   }
-
-  /* selected */
 }