[TItemCard, usePriceInfo] TItemCard 구조 변경 및 usePriceInfo 예외 추가

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 = {
+const TYPES = {
-  VERTICAL: "vertical",
+  vertical: "vertical",
-  HORIZONTAL: "horizontal",
+  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(
+      className={classNames(css[type])}
-        type === TYPE_CONF.HORIZONTAL && css.horizontal,
-        type === TYPE_CONF.VERTICAL && css.vertical
-      )}
       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>
+      <div className={css.descWrap}>
-        <h3>{productName}</h3>
+        {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 };

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);
+    }
+  }
+}

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) => {