From ec10549915fa18a6ef24dfd15fa0d93c0971579a Mon Sep 17 00:00:00 2001
From: "younghoon100.park" <younghoon100.park@lgepartner.com>
Date: Mon, 29 Jan 2024 16:53:54 +0900
Subject: [PATCH] =?UTF-8?q?[FeaturedBrandsPanel]=20=20LiveChannels,=20impo?=
 =?UTF-8?q?rt=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Detail Notes :

1. ProductCard 삭제 반영
---
 .../LiveChannels/LiveChannels.jsx             | 89 +++++++++++++------
 1 file changed, 61 insertions(+), 28 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
index 3a3c1c53..cd242fd5 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import TItemCard from "../../../components/TItemCard/TItemCard";
 import { $L } from "../../../utils/helperMethods";
-import ProductCard from "../ProductCard/ProductCard";
 import css from "./LiveChannels.module.less";
 
 export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
@@ -28,47 +28,80 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
     vtctpYn, // 영상 세로 여부
   } = brandChanInfo;
 
-  // const {
-  //   freeShippingFlag,
-  //   offerInfo,
-  //   prdtId,
-  //   prdtImgUrl,
-  //   prdtNm,
-  //   priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %)
-  //   revwGrd,
-  //   soldoutFlag,
-  // } = brandProductInfo;
+  // getOnSaleInfos → saleInfos → saleProductInfos
+  // saleProductInfos = {
+  //  imgUrl,
+  //  lgCatCd,
+  //  lgCatNm,
+  //  OfferInfo = null,
+  //  patncNm,
+  //  patnrId,
+  //  prdtNm,
+  //  priceInfo
+  // }
+  // 현재 OnSalePanel 실사용 = imgUrl, prdtId, prdtNm, priceInfo
 
-  useEffect(() => {
-    console.log("@@", brandChanInfo?.brandProductInfo);
-  }, [brandChanInfo]);
+  // getBrandLiveChannelInfo → brandChanInfo → brandProductInfo
+  // brandProductInfo = {
+  //  freeShippingFlag = null, // 무료배송 여부
+  //  offerInfo = "", // 제공 정보
+  //  prdtId,
+  //  prdtImgUrl,
+  //  prdtNm,
+  //  priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %)
+  //  revwGrd = null, 리뷰 등급 (별점)
+  //  soldoutFlag,
+  // }
 
   return (
     <div className={css.container}>
       <SectionTitle title={$L("LIVE CHANNELS")} />
 
-      {brandChannelCnt > 1 ? (
+      {brandChannelCnt === 1 && (
         <div>
-          영상이 1개일 경우, ProductCard type = horizontal
+          {"brandChannelCnt(영상의 수)가 1일 경우, type = horizontal"}
           <ul>
             {brandProductInfo &&
-              brandProductInfo.map((productInfo) => {
-                return (
-                  <li key={productInfo.prdtId}>
-                    <ProductCard productInfo={productInfo} />
-                  </li>
-                );
-              })}
+              brandProductInfo.map(
+                ({ prdtId, prdtImgUrl, prdtNm, priceInfo, soldoutFlag }) => {
+                  return (
+                    <TItemCard
+                      key={prdtId}
+                      imageAlt={prdtNm}
+                      imageSource={prdtImgUrl}
+                      priceInfo={priceInfo}
+                      productId={prdtId}
+                      productName={prdtNm}
+                      soldoutFlag={soldoutFlag}
+                      type="horizontal"
+                    />
+                  );
+                }
+              )}
           </ul>
         </div>
-      ) : (
+      )}
+
+      {brandChannelCnt > 1 && (
         <div>
-          영상이 1개보다 클 경우, ProductCard type = vertical
+          {"brandChannelCnt(영상의 수)가 1보다 클 경우, type = vertical"}
           <ul>
             {brandProductInfo &&
-              brandProductInfo.map((product) => {
-                return <li>{product.prdtNm}</li>;
-              })}
+              brandProductInfo.map(
+                ({ prdtId, prdtImgUrl, prdtNm, priceInfo, soldoutFlag }) => {
+                  return (
+                    <TItemCard
+                      key={prdtId}
+                      imageAlt={prdtNm}
+                      imageSource={prdtImgUrl}
+                      priceInfo={priceInfo}
+                      productId={prdtId}
+                      productName={prdtNm}
+                      soldoutFlag={soldoutFlag}
+                    />
+                  );
+                }
+              )}
           </ul>
         </div>
       )}