homepanel - rollingunit todaydeals적용

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx

@@ -25,7 +25,7 @@ import { startVideoPlayer } from "../../../actions/playActions";
 import CustomImage from "../../../components/CustomImage/CustomImage";
 import usePriceInfo from "../../../hooks/usePriceInfo";
 import { LOG_MENU, LOG_TP_NO, panel_names } from "../../../utils/Config";
-import { formatGMTString } from "../../../utils/helperMethods";
+import { $L, formatGMTString } from "../../../utils/helperMethods";
 import css from "./RollingUnit.module.less";
 
 const SpottableComponent = Spottable("div");
@@ -82,6 +82,7 @@ export default function RollingUnit({
   const homeCategory = useSelector(
     (state) => state.home.menuData?.data?.homeCategory
   );
+  const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
 
   const bannerId = `banner-${bannerData.banrLctnNo}`;
   const savedIndex = useSelector((state) => state.home.bannerIndices[bannerId]);
@@ -631,6 +632,7 @@ export default function RollingUnit({
           className={classNames(
             css.itemBox,
             css.todaysDeals,
+            countryCode === "DE" ? css.de : "",
             isHorizontal && css.isHorizontal
           )}
           onClick={imageBannerClick}
@@ -645,6 +647,7 @@ export default function RollingUnit({
           }
         >
           <div className={css.productInfo}>
+            <div className={css.todaysDealTitle}>{$L("TODAY's DEALS")}</div>
             <div className={css.textBox}>{rollingData[startIndex].prdtNm}</div>
             <div className={css.accBox}>
               {parseFloat(originalPrice?.replace("$", "")) === 0 ? (

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.module.less

@@ -74,15 +74,46 @@
     }
 
     &.todaysDeals {
-      background-image: url(../../../../assets/images/img_home_banner_td_ver.png);
+      background-image: url(../../../../assets/images/img-home-banner-td-ver@3x.png);
       background-size: 486px 858px;
       background-position: left top;
       border-radius: 10px;
-      padding: 268px 36px 0;
+      padding: 75px 51px 0;
+      &.ru {
+        .productInfo {
+          .todaysDealTitle {
+            font-size: 58px;
+            line-height: 60px;
+            font-family: @arialFontBold;
+          }
+        }
+      }
+      &.de {
+        .productInfo {
+          .todaysDealTitle {
+            font-size: 74px !important;
+            line-height: 63px !important;
+            letter-spacing: -1px !important;
+          }
+        }
+      }
       .productInfo {
         margin-bottom: 33px;
+        .todaysDealTitle {
+          .size(@w:100%,@h:132px);
+          font-family: Arial;
+          font-weight: bold;
+          font-size: 76px;
+          word-break: break-word;
+          font-stretch: normal;
+          color: #151515;
+          text-align: center;
+          line-height: 76px;
+          font-family: @arialFontBold;
+        }
         .textBox {
           .size(@w: 100%, @h: 80px);
+          margin-top: 71px;
           .elip(@clamp:2);
           font-weight: bold;
           font-size: 30px;
@@ -124,19 +155,34 @@
         }
       }
       &.isHorizontal {
-        background-image: url(../../../../assets/images/img_home_banner_td_hor.png);
+        background-image: url(../../../../assets/images/img-home-banner-td-hor@3x.png);
         background-size: 744px 420px;
         background-position: center center;
         display: flex;
         padding: 0 30px 0 0;
+        border-radius: 10px;
+        -webkit-border-radius: 10px;
+        -moz-border-radius: 10px;
+        -o-border-radius: 10px;
         > div {
           flex: none;
         }
         .productInfo {
           margin-bottom: 0;
+          .todaysDealTitle {
+            .size(@w:305px,@h:114px);
+            margin-top: 53px;
+            margin-left: 49px;
+            font-size: 66px;
+            word-break: break-word;
+            color: #151515;
+            text-align: left;
+            line-height: 57px;
+            font-family: @arialBlack;
+          }
           .textBox {
             .size(@w: 294px, @h: 80px);
-            margin: 234px 0 5px 50px;
+            margin: 67px 0 5px 50px;
             text-align: left;
           }
           .accBox {
@@ -154,7 +200,7 @@
           }
         }
         .itemImgBox {
-          margin: 47px 0 0 8px;
+          margin: 47px 0 0 19px;
           > img {
             .size(@w: 324px, @h: 324px);
           }