diff --git a/com.twin.app.shoptime/src/App/App.js b/com.twin.app.shoptime/src/App/App.js index 05d0c153..d3eaf2ef 100644 --- a/com.twin.app.shoptime/src/App/App.js +++ b/com.twin.app.shoptime/src/App/App.js @@ -4,11 +4,7 @@ import { useDispatch } from "react-redux"; import ThemeDecorator from "@enact/sandstone/ThemeDecorator"; -import { - getBrandLayoutInfo, - getBrandList, - getBrandLiveChannelInfo, -} from "../features/brand/brandsSlice"; +import { getBrandList } 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 ; diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index 7b06d809..a9dc523c 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/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 && ( )} + +
+ {brandChanInfo && ( + + )} +
); } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less index a7b63b33..668b849f 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less @@ -1,3 +1,5 @@ .container { - margin-left: 120px; + .sectionContainer { + padding-left: 60px; + } } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx new file mode 100644 index 00000000..3a3c1c53 --- /dev/null +++ b/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 ( +
+ + + {brandChannelCnt > 1 ? ( +
+ 영상이 1개일 경우, ProductCard type = horizontal +
    + {brandProductInfo && + brandProductInfo.map((productInfo) => { + return ( +
  • + +
    • + ); + })} +
+
+ ) : ( +
+ 영상이 1개보다 클 경우, ProductCard type = vertical +
    + {brandProductInfo && + brandProductInfo.map((product) => { + return
  • {product.prdtNm}
    • ; + })} +
+
+ )} +
+ ); +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less new file mode 100644 index 00000000..2b084317 --- /dev/null +++ b/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; + } +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/package.json new file mode 100644 index 00000000..90d9203d --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/package.json @@ -0,0 +1,6 @@ +{ + "main": "LiveChannels.jsx", + "styles": [ + "LiveChannels.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ProductCard/ProductCard.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ProductCard/ProductCard.jsx new file mode 100644 index 00000000..89303e0f --- /dev/null +++ b/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 {prdtNm}; +}); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ProductCard/ProductCard.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ProductCard/ProductCard.module.less new file mode 100644 index 00000000..e69de29b diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ProductCard/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ProductCard/package.json new file mode 100644 index 00000000..f0505d83 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/ProductCard/package.json @@ -0,0 +1,6 @@ +{ + "main": "ProductCard.jsx", + "styles": [ + "ProductCard.module.less" + ] +}