From d47d21615314e4e1fb1d1c44e7d4f34889a1620b Mon Sep 17 00:00:00 2001 From: "sungmin.in" Date: Tue, 6 Feb 2024 21:28:41 +0900 Subject: [PATCH] =?UTF-8?q?[HomePanel]=20=EB=A1=9C=EC=A7=81=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomeBanner/HomeBannerTemplate1.jsx | 304 ++++++++++-------- .../HomeBanner/HomeBannerTemplate2.jsx | 216 +++++++++++-- .../HomeBanner/HomeBannerTemplate3.jsx | 258 ++++++++------- .../views/HomePanel/HomeBanner/RandomUnit.jsx | 11 +- .../HomePanel/HomeBanner/RollingUnit.jsx | 8 +- .../src/views/HomePanel/HomePanel.jsx | 90 ++---- .../HomePanel/SubCategory/SubCategory.jsx | 42 ++- 7 files changed, 550 insertions(+), 379 deletions(-) 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 9a447e38..f0ff03f2 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx @@ -6,7 +6,6 @@ import React, { import classNames from 'classnames'; import { - shallowEqual, useDispatch, useSelector, } from 'react-redux'; @@ -19,6 +18,7 @@ import { } from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from '@enact/spotlight/Spottable'; +import { getHomeMainContents } from '../../../actions/homeActions'; import CustomImage from '../../../components/CustomImage/CustomImage'; import Random from './RandomUnit'; import Rolling from './RollingUnit'; @@ -33,158 +33,188 @@ const Container = SpotlightContainerDecorator( "div" ); -export default function HomeBannerTemplate1({ - isOnTop, - spotlightId, - onScrollTop, - onScrollShelf, - homeMainContentsBannerInfos, - homeTopDisplayInfos, - ...rest -}) { +export default function HomeBannerTemplate1() { const dispatch = useDispatch(); const [bannerImageLoaded, setBannerImageLoaded] = useState(false); + const [bannerInfos, setBannerInfos] = useState([]); + const [vctpImage1, setVctpImage1] = useState(null); + const [vctpImage2, setVctpImage2] = useState(null); + const [wdthImage1, setWdthImage1] = useState(null); + const [wdthImage2, setWdthImage2] = useState(null); - const [baner1Index, setBaner1Index] = useState(""); - const [baner2Index, setBaner2Index] = useState(""); - const [baner3Index, setBaner3Index] = useState(""); - const [baner4Index, setBaner4Index] = useState(""); + const homeMainContentsBannerInfos = useSelector( + (state) => state.home.mainContentsData.homeMainContentsBannerInfos + ); - 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(() => {}, []); + const homeTopDisplayInfos = useSelector( + (state) => state.home.mainContentsData.homeTopDisplayInfos + ); 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, "탑디스"); + if (homeTopDisplayInfos) { + const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1; + const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2; + const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1; + const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2; + setVctpImage1(vctpImage1); + setVctpImage2(vctpImage2); + setWdthImage1(wdthImage1); + setWdthImage2(wdthImage2); + } + }, [homeTopDisplayInfos]); + + useEffect(() => { + if (homeMainContentsBannerInfos) { + const banerInfo = homeMainContentsBannerInfos[0].bannerInfos; + setBannerInfos(banerInfo); + } }, [homeMainContentsBannerInfos]); + useEffect(() => { + // console.log(homeMainContentsBannerInfos, "메인 컨텐츠"); + // console.log(homeTopDisplayInfos, "탑디스"); + dispatch(getHomeMainContents); + }, [dispatch]); + + const onClickBanner = useCallback(() => {}, []); return (
{/* 배너1 */} - {baner1Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner1Data.shptmDspyTpNm == "Random" ? ( - - ) : ( - - )} + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "1" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })} {/* 배너2 */} - {baner2Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner2Data.shptmDspyTpNm == "Random" ? ( - - ) : ( - - )} + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "2" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })} +
+ +
+ {/* 배너3 */} + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "3" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })} + + {/* 배너4 */} + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "4" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })}
- -
- {/* 배너3 */} - {baner3Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner3Data.shptmDspyTpNm == "Random" ? ( - - ) : ( - - - - )} - - {/* 배너4 */} - {baner4Data.shptmDspyTpNm == "Rolling" ? ( - - - - ) : baner4Data.shptmDspyTpNm == "Random" ? ( - - ) : ( - - - - )} -
); } 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 af4d96a0..b17b7337 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx @@ -1,24 +1,28 @@ import React, { - memo, useCallback, useEffect, - useMemo, - useRef, useState, -} from "react"; +} from 'react'; -import classNames from "classnames"; +import classNames from 'classnames'; +import { + useDispatch, + useSelector, +} from 'react-redux'; -import Spotlight from "@enact/spotlight"; -import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; +import { Job } from '@enact/core/util'; +import Marquee from '@enact/sandstone/Marquee'; +import Spotlight from '@enact/spotlight'; +import { + SpotlightContainerDecorator, +} from '@enact/spotlight/SpotlightContainerDecorator'; +import Spottable from '@enact/spotlight/Spottable'; -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"; +import { getHomeMainContents } from '../../../actions/homeActions'; +import CustomImage from '../../../components/CustomImage/CustomImage'; +import Random from './RandomUnit'; +import Rolling from './RollingUnit'; +import css from './Template.module.less'; const SpottableComponent = Spottable("div"); @@ -28,30 +32,188 @@ const Container = SpotlightContainerDecorator( }, "div" ); -export default function HomeBannerTemplate2({ - isOnTop, - spotlightId, - onScrollTop, - onScrollShelf, - homeMainContentsBannerInfos, - homeTopDisplayInfos, - ...rest -}) { + +export default function HomeBannerTemplate2() { + const dispatch = useDispatch(); + const [bannerImageLoaded, setBannerImageLoaded] = useState(false); + const [bannerInfos, setBannerInfos] = useState([]); + const [vctpImage1, setVctpImage1] = useState(null); + const [vctpImage2, setVctpImage2] = useState(null); + const [wdthImage1, setWdthImage1] = useState(null); + const [wdthImage2, setWdthImage2] = useState(null); + + const homeMainContentsBannerInfos = useSelector( + (state) => state.home.mainContentsData.homeMainContentsBannerInfos + ); + + const homeTopDisplayInfos = useSelector( + (state) => state.home.mainContentsData.homeTopDisplayInfos + ); + + useEffect(() => { + if (homeTopDisplayInfos) { + const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1; + const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2; + const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1; + const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2; + setVctpImage1(vctpImage1); + setVctpImage2(vctpImage2); + setWdthImage1(wdthImage1); + setWdthImage2(wdthImage2); + } + }, [homeTopDisplayInfos]); + + useEffect(() => { + if (homeMainContentsBannerInfos) { + const banerInfo = homeMainContentsBannerInfos[0].bannerInfos; + setBannerInfos(banerInfo); + } + }, [homeMainContentsBannerInfos]); + + useEffect(() => { + console.log(homeMainContentsBannerInfos, "메인 컨텐츠"); + console.log(homeTopDisplayInfos, "탑디스"); + dispatch(getHomeMainContents); + }, [dispatch]); + + const onClickBanner = useCallback(() => {}, []); return ( - + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "1" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })} +
- + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "2" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })}
- + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "3" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })}
+ - + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "4" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })} ); 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 48102af7..95fcd33f 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx @@ -18,13 +18,8 @@ import { } from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from '@enact/spotlight/Spottable'; -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 { getHomeMainContents } from '../../../actions/homeActions'; import CustomImage from '../../../components/CustomImage/CustomImage'; -import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal'; import Random from './RandomUnit'; import Rolling from './RollingUnit'; import css from './Template.module.less'; @@ -38,155 +33,154 @@ const Container = SpotlightContainerDecorator( "div" ); -export default function HomeBannerTemplate3({ - isOnTop, - spotlightId, - onScrollTop, - onScrollShelf, - homeMainContentsBannerInfos, - homeTopDisplayInfos, - ...rest -}) { +export default function HomeBannerTemplate3() { const dispatch = useDispatch(); const [bannerImageLoaded, setBannerImageLoaded] = useState(false); + const [bannerInfos, setBannerInfos] = useState([]); + const [vctpImage1, setVctpImage1] = useState(null); + const [vctpImage2, setVctpImage2] = useState(null); + const [wdthImage1, setWdthImage1] = useState(null); + const [wdthImage2, setWdthImage2] = useState(null); - const [baner1Index, setBaner1Index] = useState(""); - const [baner2Index, setBaner2Index] = useState(""); - const [baner3Index, setBaner3Index] = useState(""); - const [baner4Index, setBaner4Index] = useState(""); + const homeMainContentsBannerInfos = useSelector( + (state) => state.home.mainContentsData.homeMainContentsBannerInfos + ); - const [baner1Data, setBaner1Data] = useState([]); - const [baner2Data, setBaner2Data] = useState([]); - const [baner3Data, setBaner3Data] = useState([]); - const [baner4Data, setBaner4Data] = useState([]); + const homeTopDisplayInfos = useSelector( + (state) => state.home.mainContentsData.homeTopDisplayInfos + ); - 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; + useEffect(() => { + if (homeTopDisplayInfos) { + const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1; + const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2; + const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1; + const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2; + setVctpImage1(vctpImage1); + setVctpImage2(vctpImage2); + setWdthImage1(wdthImage1); + setWdthImage2(wdthImage2); } - return imgPath; - }, []); + }, [homeTopDisplayInfos]); - // 배너가 없는 경우, 대체용 배너 [수직] - const replaceBannerWdth = useCallback(() => { - let imgPath = ""; - - if ( - homeTopDisplayInfos[0].wdthtpImgPath1 == "" || - homeTopDisplayInfos[0].wdthtpImgPath1 == null - ) { - imgPath = homeTopDisplayInfos[0].wdthtpImgPath2; - } else { - imgPath = homeTopDisplayInfos[0].wdthtpImgPath1; + useEffect(() => { + if (homeMainContentsBannerInfos) { + const banerInfo = homeMainContentsBannerInfos[0].bannerInfos; + setBannerInfos(banerInfo); } - return imgPath; - }, []); + }, [homeMainContentsBannerInfos]); + + useEffect(() => { + console.log(homeMainContentsBannerInfos, "메인 컨텐츠"); + console.log(homeTopDisplayInfos, "탑디스"); + dispatch(getHomeMainContents); + }, [dispatch]); 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" ? ( - - ) : ( - - )} + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "1" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })} - + {/* 배너2 */} - {baner2Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner2Data.shptmDspyTpNm == "Random" ? ( - - ) : ( - - )} + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "2" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })} - + {/* 배너3 */}
- {baner3Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner3Data.shptmDspyTpNm == "Random" ? ( - - ) : ( - - )} + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "3" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "3" && + item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })} - + {/* 배너4 */} - {baner4Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner4Data.shptmDspyTpNm == "Random" ? ( - - ) : ( - - )} + {bannerInfos && + bannerInfos.map((item, index) => { + return item.banrLctnNo === "4" && + item.shptmDspyTpNm == "Rolling" ? ( + + ) : item.banrLctnNo === "4" && + item.shptmDspyTpNm == "Random" ? ( + + ) : ( + + ); + })}
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx index 76567867..5dd53db3 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx @@ -1,18 +1,11 @@ import React, { - memo, - useCallback, useEffect, - useRef, useState, } from 'react'; -import VideoPlay from '@enact/sandstone/VideoPlayer'; - -import CustomImage from '../../../components/CustomImage/CustomImage'; import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal'; -import css from './Template.module.less'; -export default function RandomUnit({ bannerData }) { +export default function RandomUnit({ bannerData, imageType }) { const bannerDetailInfos = bannerData.bannerDetailInfos; const [randomData, setRandomData] = useState([]); @@ -41,7 +34,7 @@ export default function RandomUnit({ bannerData }) { productId={randomData.prdtId} productName={randomData.prdtNm} soldoutFlag={randomData.soldoutFlag} - isHorizontal={true} + isHorizontal={imageType} /> ) : null} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx index 99d90c1b..e69b9433 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx @@ -21,7 +21,11 @@ const LIST_ITEM_CONF = { SPACING: 30 * 2, }; -export default function RollingUnit({ bannerData }) { +export default function RollingUnit({ bannerData, imageType }) { + useEffect(() => { + console.log("롤링"); + }, []); + const renderItem = useCallback( ({ index, ...rest }) => { // const itemData = itemDatas[index]; @@ -43,7 +47,7 @@ export default function RollingUnit({ bannerData }) { productId={bannerData.bannerDetailInfos[index].prdtId} productName={bannerData.bannerDetailInfos[index].prdtNm} soldoutFlag={bannerData.bannerDetailInfos[index].soldoutFlag} - // isHorizontal={true} + isHorizontal={imageType} // TRUE, FALSE /> ); } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 60198232..85013a93 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -1,5 +1,4 @@ import React, { - useCallback, useEffect, useState, } from 'react'; @@ -9,6 +8,10 @@ import { useSelector, } from 'react-redux'; +import { + SpotlightContainerDecorator, +} from '@enact/spotlight/SpotlightContainerDecorator'; + import TPanel from '../../components/TPanel/TPanel'; import BestSeller from '../HomePanel/BestSeller/BestSeller'; import HomeBannerTemplate1 from '../HomePanel/HomeBanner/HomeBannerTemplate1'; @@ -19,54 +22,32 @@ import css from '../HomePanel/HomePanel.module.less'; import PopularShow from '../HomePanel/PopularShow/PopularShow'; import SubCategory from '../HomePanel/SubCategory/SubCategory'; +// const SpottableComponent = Spottable("div"); + +const Container = SpotlightContainerDecorator( + { + enterTo: "default-element", + }, + "div" +); + export default function HomePanel() { const dispatch = useDispatch(); const homeLayoutInfo = useSelector((state) => state.home.layoutData); - const homeMainContentsBannerInfos = useSelector( - (state) => state.home.mainContentsData.homeMainContentsBannerInfos - ); const homeTopDisplayInfos = useSelector( (state) => state.home.mainContentsData.homeTopDisplayInfos ); - const [select, setSelect] = useState(null); const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]); // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중 - const selectSwitch = () => { + const selectSwitch = (index) => { switch ("DSP00203") { case "DSP00201": - return ( - - ); + return ; case "DSP00202": - return ( - - ); + return ; case "DSP00203": - return ( - - ); + return ; default: return null; } @@ -80,29 +61,26 @@ export default function HomePanel() { setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo); } selectSwitch(); - }, [ - homeTopDisplayInfos, - homeMainContentsBannerInfos, - homeLayoutInfo, - select, - ]); + }, [homeTopDisplayInfos, homeLayoutInfo]); return ( - {homeLayoutInfoDetail && - homeLayoutInfoDetail.map((item, index) => { - return item.shptmApphmDspyOptCd == "DSP00101" ? ( - selectSwitch() - ) : item.shptmApphmDspyOptCd == "DSP00102" ? ( - - ) : item.shptmApphmDspyOptCd == "DSP00105" ? ( - - ) : item.shptmApphmDspyOptCd == "DSP00103" ? ( - - ) : item.shptmApphmDspyOptCd == "DSP00104" ? ( - - ) : null; - })} + + {homeLayoutInfoDetail && + homeLayoutInfoDetail.map((item, index) => { + return item.shptmApphmDspyOptCd == "DSP00101" ? ( + selectSwitch(index) + ) : item.shptmApphmDspyOptCd == "DSP00102" ? ( + + ) : item.shptmApphmDspyOptCd == "DSP00105" ? ( + + ) : item.shptmApphmDspyOptCd == "DSP00103" ? ( + + ) : item.shptmApphmDspyOptCd == "DSP00104" ? ( + + ) : null; + })} + ); } diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index 0cd27b7f..fa51f8dd 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -1,20 +1,30 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { + useCallback, + useEffect, + useState, +} from 'react'; -import { useDispatch, useSelector } from "react-redux"; +import { + useDispatch, + useSelector, +} from 'react-redux'; -import VirtualGridList from "@enact/sandstone/VirtualList"; -import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; -import ri from "@enact/ui/resolution"; +import VirtualGridList from '@enact/sandstone/VirtualList'; +import { + SpotlightContainerDecorator, +} from '@enact/spotlight/SpotlightContainerDecorator'; +import Spottable from '@enact/spotlight/Spottable'; +import ri from '@enact/ui/resolution'; -import { getSubCategory } from "../../../actions/mainActions"; -import { getOnSaleInfo } from "../../../actions/onSaleActions"; -import TGrid from "../../../components/TGrid/TGrid"; -import TItemCard from "../../../components/TItemCard/TItemCard"; -import css from "../../HomePanel/SubCategory/SubCategory.module.less"; -import CategoryNav from "../../OnSalePanel/CategoryNav/CategoryNav"; -import SubCategoryItem from "../SubCategoryItem/SubCategoryItem"; +import { getSubCategory } from '../../../actions/mainActions'; +import { getOnSaleInfo } from '../../../actions/onSaleActions'; +import TGrid from '../../../components/TGrid/TGrid'; +import TItemCard from '../../../components/TItemCard/TItemCard'; +import css from '../../HomePanel/SubCategory/SubCategory.module.less'; +import CategoryNav from '../../OnSalePanel/CategoryNav/CategoryNav'; +import SubCategoryItem from '../SubCategoryItem/SubCategoryItem'; +const SpottableComponent = Spottable("div"); const Container = SpotlightContainerDecorator( { leaveFor: { left: "", right: "" }, @@ -79,10 +89,10 @@ const SubCategory = () => { [categoryItemInfos] ); return ( - + @@ -103,7 +113,7 @@ const SubCategory = () => { /> )} - + ); };