[FeaturedBrandsPanel] section에 필요한 component 생성 및 수정사항

Detail Notes :

1. LiveChannel 생성
2. ProductCard 생성
3. App.js, useEffect에서 실행되는 brand에 필요한 logic 이동 → FeaturedBrandsPanel.jsx

com.twin.app.shoptime/src/App/App.js

@@ -4,11 +4,7 @@ import { useDispatch } from "react-redux";
 
 import ThemeDecorator from "@enact/sandstone/ThemeDecorator";
 
-import {
+import { getBrandList } from "../features/brand/brandsSlice";
-  getBrandLayoutInfo,
-  getBrandList,
-  getBrandLiveChannelInfo,
-} from "../features/brand/brandsSlice";
 import { getAuthenticationCode } from "../features/device/deviceSlice";
 import { getHomeMenu } from "../features/home/homeSlice";
 import { getMyRecommandedKeyword } from "../features/mypage/myPageSlice";
@@ -25,10 +21,6 @@ function AppBase(props) {
     dispatch(getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: "" }));
     dispatch(getBrandList());
     dispatch(getMyRecommandedKeyword());
-
-    // @@pyh Todo, patnrId를 GNB에서 받는 로직이 만들어진 뒤 FeaturedBrandsPanel로 이동
-    dispatch(getBrandLayoutInfo({ patnrId: "1" }));
-    dispatch(getBrandLiveChannelInfo({ patnrId: "1" }));
   }, [dispatch]);
 
   return <MainView />;

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

@@ -2,10 +2,12 @@ import React, { useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
+import SectionTitle from "../../components/SectionTitle/SectionTitle";
 import TPanel from "../../components/TPanel/TPanel";
-import { getBrandLayoutInfo } from "../../features/brand/brandsSlice";
+import { getBrandLayoutInfo, getBrandLiveChannelInfo } from "../../features/brand/brandsSlice";
 import Banner from "./Banner/Banner";
 import css from "./FeaturedBrandsPanel.module.less";
+import LiveChannels from "./LiveChannels/LiveChannels";
 import QuickMenu from "./QuickMenu/QuickMenu";
 
 const getSelectedBrandInfo = (brandInfo, selectedPatnrId) => {
@@ -16,11 +18,17 @@ export default function FeaturedBrandsPanel() {
   const dispatch = useDispatch();
 
   const brandInfo = useSelector((state) => state.brand.brandInfoData.brandInfo);
+
   const brandTopImgInfo = useSelector((state) => state.brand.brandLayoutInfoData.brandTopImgInfo);
 
+  const brandChanInfo = useSelector((state) => state.brand.brandLiveChannelInfoData.brandChanInfo);
+  const brandChannelCnt = useSelector(
+    (state) => state.brand.brandLiveChannelInfoData.brandChannelCnt
+  );
+
   const [selectedBrandInfo, setSelectedBrandInfo] = useState();
 
-  // @@ Todo, provided by GNB as props or global state
+  // @@pyh Todo, provided by GNB as props or global state
   const [selectedPatnrId, setSelectedPatnrId] = useState("1");
 
   const handleQuickMenu = (patnrId) => {
@@ -33,6 +41,7 @@ export default function FeaturedBrandsPanel() {
     }
 
     dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId }));
+    dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId }));
   }, [selectedPatnrId]);
 
   return (
@@ -49,6 +58,12 @@ export default function FeaturedBrandsPanel() {
       {selectedBrandInfo && (
         <Banner selectedBrandInfo={selectedBrandInfo} brandTopImgInfo={brandTopImgInfo} />
       )}
+
+      <div className={css.sectionContainer}>
+        {brandChanInfo && (
+          <LiveChannels brandChanInfo={brandChanInfo[0]} brandChannelCnt={brandChannelCnt} />
+        )}
+      </div>
     </TPanel>
   );
 }

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less

@@ -1,3 +1,5 @@
 .container {
-  margin-left: 120px;
+  .sectionContainer {
+    padding-left: 60px;
+  }
 }

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from "react";
+
+import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import { $L } from "../../../utils/helperMethods";
+import ProductCard from "../ProductCard/ProductCard";
+import css from "./LiveChannels.module.less";
+
+export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
+  const {
+    alamDispFlag,
+    brandProductInfo,
+    chanId,
+    chanNm,
+    endDt,
+    liveYn,
+    logoImgAlt,
+    logoImgNm,
+    logoImgPath,
+    patnrId,
+    prdtCnt,
+    showDesc,
+    showId,
+    showNm,
+    showTimesec,
+    showUrl,
+    strtDt,
+    thumbnailImgPath,
+    vtctpYn, // 영상 세로 여부
+  } = brandChanInfo;
+
+  // const {
+  //   freeShippingFlag,
+  //   offerInfo,
+  //   prdtId,
+  //   prdtImgUrl,
+  //   prdtNm,
+  //   priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %)
+  //   revwGrd,
+  //   soldoutFlag,
+  // } = brandProductInfo;
+
+  useEffect(() => {
+    console.log("@@", brandChanInfo?.brandProductInfo);
+  }, [brandChanInfo]);
+
+  return (
+    <div className={css.container}>
+      <SectionTitle title={$L("LIVE CHANNELS")} />
+
+      {brandChannelCnt > 1 ? (
+        <div>
+          영상이 1개일 경우, ProductCard type = horizontal
+          <ul>
+            {brandProductInfo &&
+              brandProductInfo.map((productInfo) => {
+                return (
+                  <li key={productInfo.prdtId}>
+                    <ProductCard productInfo={productInfo} />
+                  </li>
+                );
+              })}
+          </ul>
+        </div>
+      ) : (
+        <div>
+          영상이 1개보다 클 경우, ProductCard type = vertical
+          <ul>
+            {brandProductInfo &&
+              brandProductInfo.map((product) => {
+                return <li>{product.prdtNm}</li>;
+              })}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less

@@ -0,0 +1,10 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.container {
+  margin-top: 60px;
+
+  > div {
+    margin-top: 24px;
+  }
+}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "LiveChannels.jsx",
+  "styles": [
+    "LiveChannels.module.less"
+  ]
+}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ProductCard/ProductCard.jsx

@@ -0,0 +1,24 @@
+import React, { memo } from "react";
+
+import Spottable from "@enact/spotlight/Spottable";
+
+const SpottableComponent = Spottable("div");
+
+export default memo(function ProductCard({
+  isBestSeller = false,
+  productInfo,
+  type = "vertical",
+  ...rest
+}) {
+  const {
+    freeShippingFlag,
+    offerInfo,
+    prdtId,
+    prdtImgUrl,
+    prdtNm,
+    priceInfo,
+    revwGrd,
+    soldoutFlag,
+  } = productInfo;
+  return <SpottableComponent {...rest}>{prdtNm}</SpottableComponent>;
+});

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ProductCard/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "ProductCard.jsx",
+  "styles": [
+    "ProductCard.module.less"
+  ]
+}