diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx index e2ded512..93b71a80 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx @@ -2,9 +2,9 @@ import React from "react"; import css from "./Banner.module.less"; -export default function Banner({ selectedBrandInfo, brandTopImgInfo }) { - const { logoImgAlt, logoImgPath, patncNm } = selectedBrandInfo; +export default function Banner({ brandTopImgInfo, selectedBrandInfo }) { const { topImgAlt, topImgPath } = brandTopImgInfo; + const { logoImgAlt, logoImgPath, patncNm } = selectedBrandInfo; return (
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index 435e451b..a6cfa9da 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx @@ -6,6 +6,7 @@ import Spotlight from "@enact/spotlight"; import { getBrandLayoutInfo, + getBrandList, getBrandLiveChannelInfo, } from "../../actions/brandActions"; import TBody from "../../components/TBody/TBody"; @@ -22,12 +23,11 @@ const getSelectedBrandInfo = (brandInfo, selectedPatnrId) => { export default function FeaturedBrandsPanel() { const dispatch = useDispatch(); + const panelInfo = useSelector((state) => state.panels.panels[0].panelInfo); const brandInfo = useSelector((state) => state.brand.brandInfoData.brandInfo); - const brandTopImgInfo = useSelector( (state) => state.brand.brandLayoutInfoData.brandTopImgInfo ); - const brandChanInfo = useSelector( (state) => state.brand.brandLiveChannelInfoData.brandChanInfo ); @@ -35,11 +35,9 @@ export default function FeaturedBrandsPanel() { (state) => state.brand.brandLiveChannelInfoData.brandChannelCnt ); + const [selectedPatnrId, setSelectedPatnrId] = useState(String(panelInfo)); const [selectedBrandInfo, setSelectedBrandInfo] = useState(); - // @@pyh Todo, provided by GNB as props or global state - const [selectedPatnrId, setSelectedPatnrId] = useState("1"); - const handleQuickMenuClick = useCallback( (patnrId) => { if (selectedPatnrId === patnrId) { @@ -52,15 +50,21 @@ export default function FeaturedBrandsPanel() { ); useEffect(() => { - if (brandInfo) { - setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId)); + if (!brandInfo) { + dispatch(getBrandList()); } - - dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId })); - dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId })); - }, [selectedPatnrId]); + }, [brandInfo, dispatch]); useEffect(() => { + if (brandInfo && selectedPatnrId) { + setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId)); + dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId })); + dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId })); + } + }, [brandInfo, dispatch, selectedPatnrId]); + + useEffect(() => { + // @@pyh Todo, loading 적용 이후 loading으로 조건 추가 if (selectedPatnrId) { Spotlight.focus("spotlight" + selectedPatnrId); } @@ -78,10 +82,10 @@ export default function FeaturedBrandsPanel() { /> )} - {selectedBrandInfo && brandTopImgInfo && ( + {brandTopImgInfo && selectedBrandInfo && ( )} 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 668b849f..b487e69b 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less @@ -1,4 +1,7 @@ .container { + .tBody { + height: 1080px; + } .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 index ea105f81..a1d2e713 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx @@ -1,6 +1,7 @@ -import React from "react"; +import React, { useEffect } from "react"; -import Scroller from "@enact/sandstone/Scroller"; +import { VirtualGridList } from "@enact/sandstone/VirtualList"; +import ri from "@enact/ui/resolution"; import SectionTitle from "../../../components/SectionTitle/SectionTitle"; import TItemCard from "../../../components/TItemCard/TItemCard"; @@ -8,8 +9,39 @@ import { $L } from "../../../utils/helperMethods"; import LiveVideoCard from "../LiveVideoCard/LiveVideoCard"; import css from "./LiveChannels.module.less"; +// getBrandLiveChannelInfo → brandChanInfo → brandProductInfo +// brandProductInfo = { +// freeShippingFlag = null, // 무료배송 여부 +// offerInfo = "", // 제공 정보 +// prdtId, +// prdtImgUrl, +// prdtNm, +// priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %) +// revwGrd = null, 리뷰 등급 (별점) +// soldoutFlag, +// } + +/* + +*/ + const LIVE_CHANNELS_STRING = "LIVE CHANNELS"; +const LIST_ITEM_CONF = { + ITEM_WIDTH: 660 * 2, + ITEM_HEIGHT: 236 * 2, + SAPCING: 12 * 2, +}; + export default function LiveChannels({ brandChanInfo, brandChannelCnt }) { const { alamDispFlag, @@ -33,30 +65,27 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) { vtctpYn, // 영상 세로 여부 } = brandChanInfo; - // getOnSaleInfos → saleInfos → saleProductInfos - // saleProductInfos = { - // imgUrl, - // lgCatCd, - // lgCatNm, - // OfferInfo = null, - // patncNm, - // patnrId, - // prdtNm, - // priceInfo - // } - // 현재 OnSalePanel 실사용 = imgUrl, prdtId, prdtNm, priceInfo + console.log(); - // getBrandLiveChannelInfo → brandChanInfo → brandProductInfo - // brandProductInfo = { - // freeShippingFlag = null, // 무료배송 여부 - // offerInfo = "", // 제공 정보 - // prdtId, - // prdtImgUrl, - // prdtNm, - // priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %) - // revwGrd = null, 리뷰 등급 (별점) - // soldoutFlag, - // } + const renderItem = ({ index, ...rest }) => { + const { prdtImgUrl, prdtId, prdtNm, priceInfo, soldoutFlag } = + brandProductInfo[index]; + return ( + <> + + + ); + }; return ( <> @@ -73,69 +102,31 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) { thumbnailSource={thumbnailImgPath} title={showNm} /> - -
    - {brandProductInfo && - brandProductInfo.map( - ({ - prdtId, - prdtImgUrl, - prdtNm, - priceInfo, - soldoutFlag, - }) => { - return ( - - ); - } - )} -
- + +
+ {brandProductInfo && ( + + )} +
)} {brandChannelCnt > 1 && (
{"brandChannelCnt(영상의 수)가 1보다 클 경우, type = vertical"} -
)} 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 index 5a033925..56cc4a02 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less @@ -2,25 +2,25 @@ @import "../../../style/utils.module.less"; .container { + margin-bottom: 58px; + h2 { - margin: 60px 0 24px; + margin: 58px 0 24px; } - /* normal */ > div { position: relative; - display: flex; - width: @globalWidth; + .flex(@justifyCenter: flex-start); + width: 100%; - // product scroll container - > .scroller { - width: 720px; + .tempContainer { + .size(@w: 660px, @h: 564px); + .virtualGridList { + // overflow: unset; - ul { - display: flex; - flex-direction: column; - gap: 12px; - height: 564px; + > div { + // overflow: unset !important; + } } } } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx index ad923f74..e8c4c339 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx @@ -54,13 +54,7 @@ export default memo(function LiveVideoCard({
- { + {$L(LIVE_SHOW_STRING)}

{title}

+ {liveChannelCount && liveChannelCount === 1 && ( + // @@pyh, live 방송이라는 조건으로 변경
- { + {$L(WARNING_STRING)} {$L(WARNING_MESSAGE)}
)} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less index 30cefa5a..4adcd85d 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less @@ -7,7 +7,6 @@ z-index: 10; .size(@w: 1002px, @h: 564px); margin-right: 18px; - border: 4px solid transparent; border-radius: 12px; overflow: hidden; @@ -23,7 +22,7 @@ .size(@w: 100%, @h: 100%); background-image: linear-gradient(to top, transparent 55%, @COLOR_BLACK); - // top part of video + // top part (live info) > div:nth-child(1) { .flex(@justifyCenter: flex-start); gap: 12px; @@ -48,7 +47,7 @@ } } - // bottom part of video + // bottom part (warning message) > div:nth-child(2) { .flex(@justifyCenter: flex-start); gap: 12px; @@ -66,7 +65,9 @@ /* focused */ &:focus-within { - border: 4px solid @PRIMARY_COLOR_RED; + &::after { + .focused(@borderRadius: 12px); + } .focusDropShadow(); } }