From 8e40aab4d1568baef52f85ba2b0841770e517d2d Mon Sep 17 00:00:00 2001
From: "junghoon86.park" <junghoon86.park@lgepartner.com>
Date: Wed, 27 Mar 2024 18:16:57 +0900
Subject: [PATCH] =?UTF-8?q?[TItemCard]=20=ED=98=B8=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=84=A4=EC=9E=84=EC=B6=94=EA=B0=80=EA=B1=B4.=20=20-=20?=
 =?UTF-8?q?=ED=98=B8=EC=8A=A4=ED=8A=B8=EB=84=A4=EC=9E=84=20=EB=85=B8?=
 =?UTF-8?q?=EC=B6=9C=20=EC=B6=94=EA=B0=80=EA=B1=B4=EC=9E=85=EB=8B=88?=
 =?UTF-8?q?=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TItemCard/TItemCard.jsx    | 40 +++++++++++++------
 .../TItemCard/TItemCard.module.less           | 22 +++++++++-
 2 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
index 7bdf6935..34ea05bd 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
@@ -4,7 +4,7 @@ import classNames from "classnames";
 
 import Spottable from "@enact/spotlight/Spottable";
 
-import IcLiveShow from "../../../assets/images/tag/tag-liveshow.png";
+import IcLiveShow from "../../../assets/images/tag/tag-liveshow.svg";
 import usePriceInfo from "../../hooks/usePriceInfo";
 import { $L } from "../../utils/helperMethods";
 import CustomImage from "../CustomImage/CustomImage";
@@ -50,6 +50,7 @@ export default memo(function TItemCard({
   priceInfo,
   productId,
   productName,
+  hstNm,
   rank,
   soldoutFlag,
   spotlightId,
@@ -107,17 +108,32 @@ export default memo(function TItemCard({
           <div>{STRING_CONF.SOLD_OUT}</div>
         )}
       </div>
-      <div className={css.descWrap}>
-        <h3 className={css.title}>{productName}</h3>
-        {!offerInfo ? (
-          <p className={css.priceInfo}>
-            {discountRate ? discountedPrice : originalPrice}
-            {discountRate && <span>{originalPrice}</span>}
-          </p>
-        ) : (
-          <p className={css.offerInfo}>{offerInfo}</p>
-        )}
-      </div>
+      {hstNm ? (
+        <div className={classNames(css.descWrap, css.hstNmWrap)}>
+          <h3 className={css.title}>{productName}</h3>
+          <h4 className={css.hstmNmTitle}>{hstNm}</h4>
+          {!offerInfo ? (
+            <p className={css.priceInfo}>
+              {discountRate ? discountedPrice : originalPrice}
+              {discountRate && <span>{originalPrice}</span>}
+            </p>
+          ) : (
+            <p className={css.offerInfo}>{offerInfo}</p>
+          )}
+        </div>
+      ) : (
+        <div className={css.descWrap}>
+          <h3 className={css.title}>{productName}</h3>
+          {!offerInfo ? (
+            <p className={css.priceInfo}>
+              {discountRate ? discountedPrice : originalPrice}
+              {discountRate && <span>{originalPrice}</span>}
+            </p>
+          ) : (
+            <p className={css.offerInfo}>{offerInfo}</p>
+          )}
+        </div>
+      )}
       {isBestSeller && rank && (
         <div className={css.bestSeller}>
           {STRING_CONF.TOP}
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 1e3b2a91..150d7c2d 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
@@ -252,13 +252,33 @@
       margin-top: 35px;
       color: @COLOR_GRAY06;
       font-size: 24px;
-
+      flex-wrap: wrap;
       .title {
         align-self: center;
         font-weight: bold;
         line-height: 1.33;
         .elip(@clamp: 2);
       }
+      &.hstNmWrap {
+        margin-top: 12px;
+
+        .size(@w: 510px, @h: 107px);
+        .title {
+          .size(@w: 510px, @h: 64px);
+          align-self: center;
+          font-weight: bold;
+          line-height: 1.33;
+          .elip(@clamp: 2);
+        }
+        .hstmNmTitle {
+          margin-top: 11px;
+          .size(@w: 100%, @h: 36px);
+          color: #767676;
+          font-size: 24px;
+          .elip(@clamp: 1);
+          font-weight: normal;
+        }
+      }
     }
   }