From 89defcc606c89782f8d49b31b07020155d1b1005 Mon Sep 17 00:00:00 2001
From: "hyunwoo93.cha" <hyunwoo93.cha@lgepartners.com>
Date: Mon, 19 Feb 2024 20:08:50 +0900
Subject: [PATCH] =?UTF-8?q?[TItemCard,=20usePriceInfo]=20TItemCard=20?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20usePriceI?=
 =?UTF-8?q?nfo=20=EC=98=88=EC=99=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TItemCard/TItemCard.jsx    | 31 +++++++-----
 .../TItemCard/TItemCard.module.less           | 48 +++++++++++++++++++
 .../src/hooks/usePriceInfo.js                 |  4 ++
 3 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
index 3a8f07d0..5aa0870d 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
@@ -11,9 +11,10 @@ import css from "./TItemCard.module.less";
 
 const SpottableComponent = Spottable("div");
 
-const TYPE_CONF = {
-  VERTICAL: "vertical",
-  HORIZONTAL: "horizontal",
+const TYPES = {
+  vertical: "vertical",
+  horizontal: "horizontal",
+  videoShow: "videoShow",
 };
 
 // @@pyh Todo, 추후 다국어 resource 추가
@@ -30,6 +31,8 @@ export default memo(function TItemCard({
   children,
   imageAlt,
   imageSource,
+  logo,
+  logoDisplay = false,
   isBestSeller = false,
   onCardClick,
   priceInfo,
@@ -37,11 +40,11 @@ export default memo(function TItemCard({
   productName,
   rank,
   soldoutFlag,
-  type = TYPE_CONF.VERTICAL,
+  type = TYPES.vertical,
   ...rest
 }) {
   const { originalPrice, discountedPrice, discountRate } =
-    usePriceInfo(priceInfo);
+    usePriceInfo(priceInfo) || {};
 
   const handleClick = useCallback(
     (productId) => {
@@ -53,22 +56,24 @@ export default memo(function TItemCard({
   return (
     <SpottableComponent
       {...rest}
-      className={classNames(
-        type === TYPE_CONF.HORIZONTAL && css.horizontal,
-        type === TYPE_CONF.VERTICAL && css.vertical
-      )}
+      className={classNames(css[type])}
       onClick={() => handleClick(productId)}
       spotlightId={"spotlightId-" + removeDotAndColon(productId)}
     >
-      <div>
+      <div className={css.imageWrap}>
         <CustomImage alt={imageAlt} delay={0} src={imageSource} />
         {discountRate && <span>{discountRate}</span>}
         {soldoutFlag && soldoutFlag === "Y" && (
           <div>{STRING_CONF.SOLD_OUT}</div>
         )}
       </div>
-      <div>
-        <h3>{productName}</h3>
+      <div className={css.descWrap}>
+        {logo && logoDisplay && (
+          <div className={css.logo}>
+            <img src={logo} alt={productName} />
+          </div>
+        )}
+        <h3 className={css.title}>{productName}</h3>
         <p>
           {discountRate ? discountedPrice : originalPrice}
           {discountRate && <span>{originalPrice}</span>}
@@ -83,3 +88,5 @@ export default memo(function TItemCard({
     </SpottableComponent>
   );
 });
+
+export { TYPES };
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 51e20076..66b3e402 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
@@ -183,3 +183,51 @@
     }
   }
 }
+
+/* videoShow */
+.videoShow {
+  .size(@w: 546px, @h:438px);
+  padding: 14px;
+  background-color: @COLOR_WHITE;
+  border-radius: 12px;
+  .border-solid(@size:4px,@color:transparent);
+  font-weight: bold;
+  font-family: @baseFontBold;
+
+  &:focus {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    .focused(@boxShadow: 22px, @borderRadius: 12px);
+  }
+
+  .imageWrap {
+    > img {
+      .size(@w: 100%, @h: 288px);
+      object-fit: cover;
+    }
+  }
+
+  .descWrap {
+    margin-top: 38px;
+    color: @COLOR_GRAY06;
+    font-size: 24px;
+    .size(@w: 510px, @h: 61px);
+    display: flex;
+
+    .logo {
+      .size(@w: 60px, @h: 60px);
+      margin-right: 12px;
+
+      > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .title {
+      width: calc(100% - 72px);
+      .elip(@clamp: 2);
+    }
+  }
+}
diff --git a/com.twin.app.shoptime/src/hooks/usePriceInfo.js b/com.twin.app.shoptime/src/hooks/usePriceInfo.js
index 5e6e76b1..d023348f 100644
--- a/com.twin.app.shoptime/src/hooks/usePriceInfo.js
+++ b/com.twin.app.shoptime/src/hooks/usePriceInfo.js
@@ -10,6 +10,10 @@ const priceInfoKeys = [
 
 export default function usePriceInfo(priceInfo) {
   const parsedPriceInfo = useMemo(() => {
+    if (!priceInfo) {
+      return;
+    }
+
     const splittedPriceInfo = priceInfo.split("|").map((item) => item.trim());
 
     const processedPriceInfo = priceInfoKeys.reduce((objcet, key, index) => {