From 4fdff102853381bda98814e48e3c4c4e2cec99f3 Mon Sep 17 00:00:00 2001 From: "sungmin.in" Date: Sun, 4 Feb 2024 16:23:53 +0900 Subject: [PATCH] =?UTF-8?q?[HomePanel]=20API=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomeBanner/HomeBannerTemplate1.jsx | 205 +++++++++++------- .../HomeBanner/HomeBannerTemplate2.jsx | 10 +- .../HomeBanner/HomeBannerTemplate3.jsx | 185 +++++++++++++--- .../views/HomePanel/HomeBanner/RandomUnit.jsx | 35 +++ .../HomePanel/HomeBanner/RollingUnit.jsx | 16 ++ .../src/views/HomePanel/HomePanel.jsx | 113 ++++++---- .../src/views/HomePanel/HomeTemplate.jsx | 32 --- .../HomePanel/HomeTodayDeal/HomeTodayDeal.jsx | 30 ++- 8 files changed, 439 insertions(+), 187 deletions(-) create mode 100644 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx create mode 100644 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx delete mode 100644 com.twin.app.shoptime/src/views/HomePanel/HomeTemplate.jsx diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx index 4359baf7..4daa0929 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx @@ -1,6 +1,4 @@ -import React, {useCallback, useEffect, useState, useMemo,useRef ,memo} from "react"; - -import classNames from "classnames"; +import React, { useCallback, useEffect, useState } from "react"; import { Job } from "@enact/core/util"; import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; @@ -10,10 +8,8 @@ import Marquee from "@enact/sandstone/Marquee"; import Spottable from "@enact/spotlight/Spottable"; import CustomImage from "../../../components/CustomImage/CustomImage"; import css from "./Template.module.less"; - -import banner2 from "../../../../assets/Image/img-home-banner-h-02.png"; -import banner3 from "../../../../assets/Image/img-home-banner-v-01.png"; -import banner4 from "../../../../assets/Image/img-home-banner-v-02.png"; +import Random from "./RandomUnit"; +import Rolling from "./RollingUnit"; const SpottableComponent = Spottable("div"); @@ -24,92 +20,153 @@ const Container = SpotlightContainerDecorator( "div" ); -export default memo (function HomeBannerTemplate1 ({isOnTop, spotlightId, onScrollTop, onScrollShelf, ...rest}) { - - const dispatch = useDispatch(); - const homeMainContentsBannerInfos = useSelector((state) => state.home.mainContentsData.homeMainContentsBannerInfos); - const homeTopDisplayInfos = useSelector((state) => state.home.mainContentsData.homeTopDisplayInfos[0]); - - const [topImagePath, setTopImagePath] = useState(""); - const [verticalImage, setVerticalImage] = useState(""); +export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) { + const dispatch = useDispatch(); const [bannerImageLoaded, setBannerImageLoaded] = useState(false); - // TOP IMAGE - const topImgPath = () => { + const [baner1Index, setBaner1Index] = useState(""); + const [baner2Index, setBaner2Index] = useState(""); + const [baner3Index, setBaner3Index] = useState(""); + const [baner4Index, setBaner4Index] = useState(""); + + const [baner1Data, setBaner1Data] = useState([]); + const [baner2Data, setBaner2Data] = useState([]); + const [baner3Data, setBaner3Data] = useState([]); + const [baner4Data, setBaner4Data] = useState([]); + + const bannerInfos = homeMainContentsBannerInfos[0].bannerInfos; + + // 배너가 없는 경우, 대체용 배너 [수직] + const replaceBannerVtctp = useCallback(() => { let imgPath = ""; - if(homeTopDisplayInfos.wdthtpImgPath1 == "" || homeTopDisplayInfos.wdthtpImgPath1 == null){ - imgPath = homeTopDisplayInfos.wdthtpImgPath2; + if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){ + imgPath = homeTopDisplayInfos[0].vtctpImgPath2; }else{ - imgPath = homeTopDisplayInfos.wdthtpImgPath1; + imgPath = homeTopDisplayInfos[0].vtctpImgPath1; } + return imgPath; + },[]); - setTopImagePath(imgPath); - }; - - // VerticalImage - const vtctpImage = () => { + // 배너가 없는 경우, 대체용 배너 [수평] + const replaceBannerWdth = useCallback(() => { let imgPath = ""; - if(homeTopDisplayInfos.vtctpImgPath1 == "" || homeTopDisplayInfos.vtctpImgPath1 == null){ - imgPath = homeTopDisplayInfos.vtctpImgPath2; + if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){ + imgPath = homeTopDisplayInfos[0].wdthtpImgPath2; }else{ - imgPath = homeTopDisplayInfos.vtctpImgPath1; + imgPath = homeTopDisplayInfos[0].wdthtpImgPath1; } + return imgPath; + },[]); - setVerticalImage(imgPath); - }; - - useEffect(() => { - topImgPath(); - vtctpImage(); - - }, [homeMainContentsBannerInfos, homeTopDisplayInfos]); - - const onClickBanner = useCallback(() => { + const onClickBanner = useCallback(() => { }, []); + useEffect(() => { + bannerInfos.forEach((el, index) => { + if(el.banrLctnNo == "1"){ + setBaner1Data(el); + setBaner1Index(index); + } + else if(el.banrLctnNo == "2"){ + setBaner2Data(el); + setBaner2Index(index); + } + else if(el.banrLctnNo == "3"){ + setBaner3Data(el); + setBaner3Index(index); + } + else if(el.banrLctnNo == "4"){ + setBaner4Data(el); + setBaner4Index(index); + } + }); + console.log(homeMainContentsBannerInfos, "메인 컨텐츠"); + console.log(homeTopDisplayInfos, "탑디스"); + }, [homeMainContentsBannerInfos]); + return ( -
- - - -
+ +
+ {/* 배너1 */} + {baner1Data.shptmDspyTpNm == "Rolling" ? ( + + ) : baner1Data.shptmDspyTpNm == "Random" ? ( + + ) : + + } + {/* 배너2 롤링 테스트 진행중 */} + {baner2Data.shptmDspyTpNm == "Rolling" ? ( + + ) : null + } +
+
- - + {/* 배너3 */} + {baner3Data.shptmDspyTpNm == "Rolling" ? ( + + ) : baner3Data.shptmDspyTpNm == "Random" ? ( + + ) : + + + + } + + {/* 배너4 */} + {baner4Data.shptmDspyTpNm == "Rolling" ? ( + + + + ) : baner4Data.shptmDspyTpNm == "Random" ? ( + + ) : + + + + }
); -}) \ No newline at end of file +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx index a3261fef..dcdf7365 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx @@ -1,8 +1,12 @@ -export default function HomeBannerTemplate2 () { +import React, {useCallback, useEffect, useState, useMemo,useRef ,memo} from "react"; + +export default function HomeBannerTemplate2 ({isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest}) { + + useEffect(() => { + + }, []) return(

템플릿2

) - - } \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx index 465c5a10..937b718d 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx @@ -1,16 +1,21 @@ -import React, { useEffect } from "react"; +import React, { useCallback, useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; - -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import { Job } from "@enact/core/util"; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; import Spottable from "@enact/spotlight/Spottable"; +import Spotlight from "@enact/spotlight"; +import { useDispatch, useSelector } from "react-redux"; +import Marquee from "@enact/sandstone/Marquee"; +import CustomImage from "../../../components/CustomImage/CustomImage"; +import css from "./Template.module.less"; +import Random from "./RandomUnit"; +import Rolling from "./RollingUnit"; import testimg from "../../../../assets/h430054.webp"; import banner2 from "../../../../assets/Image/img-home-banner-h-02.png"; import banner4 from "../../../../assets/Image/img-home-banner-v-02.png"; import banner3 from "../../../../assets/images/mainTemplate/img-home-banner-td-ver.svg"; import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal"; -import css from "./Template.module.less"; const SpottableComponent = Spottable("div"); @@ -21,39 +26,169 @@ const Container = SpotlightContainerDecorator( "div" ); -export default function HomeBannerTemplate3() { +export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) { const dispatch = useDispatch(); + const [bannerImageLoaded, setBannerImageLoaded] = useState(false); - const homeMainContentsBannerInfos = useSelector( - (state) => state.home.mainContentsData.homeMainContentsBannerInfos - ); - const testchk = useSelector((state) => state); - console.log("##", testchk); + const [baner1Index, setBaner1Index] = useState(""); + const [baner2Index, setBaner2Index] = useState(""); + const [baner3Index, setBaner3Index] = useState(""); + const [baner4Index, setBaner4Index] = useState(""); + + const [baner1Data, setBaner1Data] = useState([]); + const [baner2Data, setBaner2Data] = useState([]); + const [baner3Data, setBaner3Data] = useState([]); + const [baner4Data, setBaner4Data] = useState([]); + + const bannerInfos = homeMainContentsBannerInfos[0].bannerInfos; + + // 배너가 없는 경우, 대체용 배너 [수직] + const replaceBannerVtctp = useCallback(() => { + let imgPath = ""; + + if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){ + imgPath = homeTopDisplayInfos[0].vtctpImgPath2; + }else{ + imgPath = homeTopDisplayInfos[0].vtctpImgPath1; + } + return imgPath; + },[]); + + // 배너가 없는 경우, 대체용 배너 [수직] + const replaceBannerWdth = useCallback(() => { + let imgPath = ""; + + if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){ + imgPath = homeTopDisplayInfos[0].wdthtpImgPath2; + }else{ + imgPath = homeTopDisplayInfos[0].wdthtpImgPath1; + } + return imgPath; + },[]); + + const onClickBanner = useCallback(() => { + + }, []); + + useEffect(() => { + bannerInfos.forEach((el, index) => { + if(el.banrLctnNo == "1"){ + setBaner1Data(el); + setBaner1Index(index); + } + else if(el.banrLctnNo == "2"){ + setBaner2Data(el); + setBaner2Index(index); + } + else if(el.banrLctnNo == "3"){ + setBaner3Data(el); + setBaner3Index(index); + } + else if(el.banrLctnNo == "4"){ + setBaner4Data(el); + setBaner4Index(index); + } + }); + + console.log(homeMainContentsBannerInfos, "메인 컨텐츠"); + console.log(homeTopDisplayInfos, "탑디스"); + }, [homeMainContentsBannerInfos]); + return ( - {homeMainContentsBannerInfos && - homeMainContentsBannerInfos.map((bannerInfos) => { - return ( - - ); - })}
- + {baner1Data.shptmDspyTpNm == "Rolling" ? ( + + ) : baner1Data.shptmDspyTpNm == "Random" ? ( + + ) : + + } + + + {baner2Data.shptmDspyTpNm == "Rolling" ? ( + // 롤링으로 변경하기 구현 준비 중 + + ) : baner2Data.shptmDspyTpNm == "Random" ? ( + + ) : + + } + +
- + {baner3Data.shptmDspyTpNm == "Rolling" ? ( + + ) : baner3Data.shptmDspyTpNm == "Random" ? ( + + ) : + + } + - + {baner4Data.shptmDspyTpNm == "Rolling" ? ( + + ) : baner4Data.shptmDspyTpNm == "Random" ? ( + + ) : + + }
); -} +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx new file mode 100644 index 00000000..dec1f782 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx @@ -0,0 +1,35 @@ +import React, { useEffect, memo, useState, useRef, useCallback } from "react"; +import TodayDeal from "../HomeTodayDeal/HomeTodayDeal"; +import CustomImage from "../../../components/CustomImage/CustomImage"; +import css from "./Template.module.less"; +import VideoPlay from "@enact/sandstone/VideoPlayer"; + +export default function RandomUnit({ banerData }) { + + const bannerDetailInfos = banerData.bannerDetailInfos; + const [randomData, setRandomData] = useState([]); + + useEffect(()=> { + if(bannerDetailInfos){ + const leng = banerData.bannerDetailInfos.length; + const num = Math.floor(Math.random() * leng); + setRandomData(bannerDetailInfos[num]); + } + }, [banerData]); + + return( + <> + {randomData.shptmBanrTpNm == "Image Banner" ? ( +

TEST

+ ) : randomData.shptmBanrTpNm == "LIVE" || randomData.shptmBanrTpNm == "VOD" ? ( +

비디오

+ ) : randomData.shptmBanrTpNm == "Today's Deals" || randomData.shptmBanrTpNm == "" ? ( + + ) : null + } + + ) +}; \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx new file mode 100644 index 00000000..94e3a95b --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx @@ -0,0 +1,16 @@ +import React, { useEffect, memo, useState, useRef } from "react"; +import CustomImage from "../../../components/CustomImage/CustomImage"; +import banerImage3 from "../../../../assets/Image/img-home-banner-v-01.png"; +import css from "./Template.module.less"; +import VideoPlay from "@enact/sandstone/VideoPlayer"; + +export default function RollingUnit({ banerData }) { + + useEffect(()=> { + + }, []); + + return( +

TEST

+ ) +}; \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 9478ce3f..4bb368c3 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -1,69 +1,98 @@ -import React, { useEffect, useState } from "react"; +import React, {useCallback, useEffect, useState} from "react"; import { useDispatch, useSelector } from "react-redux"; import TPanel from "../../components/TPanel/TPanel"; -import { $L } from "../../utils/helperMethods"; import BestSeller from "../HomePanel/BestSeller/BestSeller"; import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale"; import css from "../HomePanel/HomePanel.module.less"; import PopularShow from "../HomePanel/PopularShow/PopularShow"; import SubCategory from "../HomePanel/SubCategory/SubCategory"; -import HomeTemplate from "./HomeTemplate"; +import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1"; +import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2"; +import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3"; export default function HomePanel() { const dispatch = useDispatch(); - - const latoutData = useSelector((state) => state.home.layoutData); + const homeLayoutInfo = useSelector((state) => state.home.layoutData); const homeMainContentsBannerInfos = useSelector( (state) => state.home.mainContentsData.homeMainContentsBannerInfos ); const homeTopDisplayInfos = useSelector( (state) => state.home.mainContentsData.homeTopDisplayInfos ); - const [selectTemplate, setSelectTemplate] = useState(null); - const getHomeLayout = () => {}; - - const getHomeContents = () => { - // 추후 다시 한번 확인: 코드(DSP00201, 202, 203) - // 템플릿 선택 - let tempTemplate = 0; - - if (homeTopDisplayInfos) { - if (homeTopDisplayInfos[0].shptmTmplCd == "DSP00201") { - tempTemplate = 1; - } - if (homeTopDisplayInfos[0].shptmTmplCd == "DSP00202") { - tempTemplate = 2; - } - if (homeTopDisplayInfos[0].shptmTmplCd == "DSP00203") { - tempTemplate = 3; - } + const [select, setSelect] = useState(null); + const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]); + // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중 + const selectSwitch = () =>{ + switch ("DSP00203") { + case "DSP00201": + return( + + ) + case "DSP00202": + return( + + ) + case "DSP00203": + return( + + ) + default: + return null; } - setSelectTemplate(tempTemplate); - }; + } useEffect(() => { - getHomeLayout(); - getHomeContents(); - }, []); + if(homeTopDisplayInfos){ + setSelect(homeTopDisplayInfos[0].shptmTmplCd); + } + if(homeLayoutInfo){ + setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo); + } + selectSwitch(); + }, [homeTopDisplayInfos, homeMainContentsBannerInfos, homeLayoutInfo, select]); return ( - - - - - + {homeLayoutInfoDetail && + homeLayoutInfoDetail.map((item, index)=> { + return( + item.shptmApphmDspyOptCd == "DSP00101" ? ( + selectSwitch() + ) : item.shptmApphmDspyOptCd == "DSP00102" ? ( + + ) : item.shptmApphmDspyOptCd == "DSP00105" ? ( + + ) : item.shptmApphmDspyOptCd == "DSP00103" ? ( + + ) : item.shptmApphmDspyOptCd == "DSP00104" ? ( + + ) : null + )}) + } ); -} +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeTemplate.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeTemplate.jsx deleted file mode 100644 index 77140428..00000000 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeTemplate.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { memo } from "react"; - -import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1"; -import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2"; -import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3"; - -export default memo (function HomeTemplate({isOnTop, spotlightId, onScrollTop, onScrollShelf, selectTemplate, ...rest}) { - - - let SelectedTemplate = null; - - switch (selectTemplate) { - case 1: - SelectedTemplate = HomeBannerTemplate1; - break; - case 2: - SelectedTemplate = HomeBannerTemplate2; - break; - case 3: - SelectedTemplate = HomeBannerTemplate3; - break; - } - - return SelectedTemplate ? ( - - ) : null; -}) diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx index f101d4cb..2c48b75f 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import classNames from "classnames"; @@ -12,22 +12,29 @@ export default function HomeTodayDeal({ homeMainContentsBannerInfos, isHorizontal, rolling, + banerData, ...rest }) { - const bannerDetailInfos = - homeMainContentsBannerInfos[0].bannerInfos[0].bannerDetailInfos[0]; - const priceInfo = bannerDetailInfos.priceInfo; - let salePrice; - const originalPrice = priceInfo.split("|")[0]; - if (priceInfo.split("|")[3] == "") { - salePrice = priceInfo.split("|")[1]; - } + + const [salePrice, setSalePrice] = useState(""); + const [originalPrice, setOriginalPrice] = useState(""); + + useEffect(() => { + if(banerData){ + const priceInfo = banerData.priceInfo; + setOriginalPrice(priceInfo.split("|")[0]); + if (priceInfo.split("|")[3] == "") { + setSalePrice(priceInfo.split("|")[1]); + } + } + }, [banerData]); + return (
-
{bannerDetailInfos.prdtNm}
+
{banerData.prdtNm}
{salePrice} {salePrice != originalPrice ? ( @@ -38,7 +45,7 @@ export default function HomeTodayDeal({
- +
{rolling == true ? ( <> @@ -49,5 +56,6 @@ export default function HomeTodayDeal({ <> )} + ); }