diff --git a/com.twin.app.shoptime/src/reducers/homeReducer.js b/com.twin.app.shoptime/src/reducers/homeReducer.js index 68452a65..743741ef 100644 --- a/com.twin.app.shoptime/src/reducers/homeReducer.js +++ b/com.twin.app.shoptime/src/reducers/homeReducer.js @@ -8,11 +8,7 @@ const initialState = { themeCurationInfoData: {}, themeCurationDetailInfoData: {}, themeCurationHotelDetailData: {}, - mainContentsData: { - data: {}, - status: "idle", - }, - bannerRandomNumber: 0, + homeTopDisplayInfo: {}, bannerData: { data: {}, status: "idle", @@ -62,25 +58,21 @@ export const homeReducer = (state = initialState, action) => { }; case types.GET_HOME_MAIN_CONTENTS: { - const bannerInfos = - action.payload?.homeMainContentsBannerInfos?.[0]?.bannerInfos; - let dataLength = 0; - if (bannerInfos) { - for (let i = 0; i < bannerInfos.length; i++) { - if (bannerInfos[i].shptmDspyTpNm === "Random") { - dataLength = bannerInfos[i].bannerDetailInfos.length; - break; + const homeTopDisplayInfo = action.payload?.homeTopDisplayInfos?.[0] ?? {}; + const bannerData = action.payload?.homeMainContentsBannerInfos?.[0] ?? {}; + if(bannerData.bannerInfos){ + for (let i = 0; i < bannerData.bannerInfos.length; i++) { + const info = bannerData.bannerInfos[i]; + if (info.shptmDspyTpNm === "Random") { + const dataLength = info.bannerDetailInfos.length; + info.randomIndex = Math.floor(Math.random() * dataLength); } } } - const randomNumber = Math.floor(Math.random() * dataLength); return { ...state, - mainContentsData: action.payload, - bannerRandomNumber: randomNumber, - bannerData: action.payload.homeMainContentsBannerInfos - ? action.payload.homeMainContentsBannerInfos[0] - : initialState.bannerData, + homeTopDisplayInfo: homeTopDisplayInfo, + bannerData: bannerData }; } case types.GET_THEME_CURATION_INFO: diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index 85a75eb1..83f14a61 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -149,7 +149,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => { : rankOrd + "th"; return ( state.home.homeTopDisplayInfo); - const homeMainContentsBannerInfos = useSelector( - (state) => state.home.mainContentsData?.homeMainContentsBannerInfos - ); + const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos); - const randomNumber = useSelector((state) => state.home.bannerRandomNumber); + const selectTemplate = useMemo(() => { + return homeTopDisplayInfo.shptmTmplCd; + }, [homeTopDisplayInfo]); - const replaceImage = useSelector( - (state) => state.home.mainContentsData?.homeTopDisplayInfos[0] - ); - - const bannerDataList = useSelector( - (state) => state.home.bannerData?.bannerInfos - ); - - const homeSpotlight = useSelector((state) => state.home.spotData?.panelInfo); - const { activePopup } = useSelector((state) => state.common.popup); - - const startFocus = () => { - let bannerInfoLength = homeMainContentsBannerInfos[0].bannerInfos.length; - if (firstSpot === false) { - // 템플릿1 포커스 - if (selectTemplate === "DSP00201") { - const randomIndex = randomNumber; - - for (let i = 0; i < bannerInfoLength; i++) { - let bannerFocus = - homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos; - - if ( - homeMainContentsBannerInfos[0].bannerInfos[i].shptmDspyTpNm === - "Random" - ) { - // 랜덤으로 선택된 배너에 포커스 설정 - if ( - homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[ - randomIndex - ].shptmBanrTpNm === "LIVE" || - homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[ - randomIndex - ].shptmBanrTpNm === "VOD" - ) { - return Spotlight.focus("banner0" + (i + 1)); - } - } else if ( - bannerFocus.find( - (el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD" - ) - ) { - return Spotlight.focus("banner0" + (i + 1)); - } - } - return Spotlight.focus("banner01"); - } - // 템플릿2 포커스 - if (selectTemplate === "DSP00202") { - const randomIndex = randomNumber; - - for (let i = 0; i < bannerInfoLength; i++) { - let bannerFocus = - homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos; - - if ( - homeMainContentsBannerInfos[0].bannerInfos[i].shptmDspyTpNm === - "Random" - ) { - // 랜덤으로 선택된 배너에 포커스 설정 - if ( - homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[ - randomIndex - ].shptmBanrTpNm === "LIVE" || - homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[ - randomIndex - ].shptmBanrTpNm === "VOD" - ) { - if (i == 0) { - return Spotlight.focus("banner03"); - } - if (i == 1) { - return Spotlight.focus("banner01"); - } - if (i == 2) { - return Spotlight.focus("banner02"); - } - if (i == 3) { - return Spotlight.focus("banner04"); - } - } - } else if ( - bannerFocus.find( - (el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD" - ) - ) { - if (i == 0) { - return Spotlight.focus("banner03"); - } - if (i == 1) { - return Spotlight.focus("banner01"); - } - if (i == 2) { - return Spotlight.focus("banner02"); - } - if (i == 3) { - return Spotlight.focus("banner04"); - } - } - } - return Spotlight.focus("banner03"); - } - - // 템플릿3 포커스 - if (selectTemplate === "DSP00203") { - const randomIndex = randomNumber; - - for (let i = 0; i < bannerInfoLength; i++) { - let bannerFocus = - homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos; - - if ( - homeMainContentsBannerInfos[0].bannerInfos[i].shptmDspyTpNm === - "Random" - ) { - // 랜덤으로 선택된 배너에 포커스 설정 - if ( - homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[ - randomIndex - ].shptmBanrTpNm === "LIVE" || - homeMainContentsBannerInfos[0].bannerInfos[i].bannerDetailInfos[ - randomIndex - ].shptmBanrTpNm === "VOD" - ) { - if (i == 0) { - return Spotlight.focus("banner03"); - } - if (i == 1) { - return Spotlight.focus("banner01"); - } - if (i == 2) { - return Spotlight.focus("banner02"); - } - if (i == 3) { - return Spotlight.focus("banner04"); - } - } - } else if ( - bannerFocus.find( - (el) => el.shptmBanrTpNm === "LIVE" || el.shptmBanrTpNm === "VOD" - ) - ) { - if (i == 0) { - return Spotlight.focus("banner03"); - } - if (i == 1) { - return Spotlight.focus("banner04"); - } - if (i == 2) { - return Spotlight.focus("banner01"); - } - if (i == 3) { - return Spotlight.focus("banner02"); - } - } - } - return Spotlight.focus("banner03"); - } - } - }; - - useEffect(() => { - if (!homeMainContentsBannerInfos) { - dispatch(getHomeMainContents()); - } - - if ( - !activePopup && - homeMainContentsBannerInfos?.length > 0 && - !homeSpotlight - ) { - timerRef.current = setTimeout(() => { - startFocus(); - }, 0); - } - - return () => clearTimeout(timerRef.current); - }, [ - dispatch, - homeMainContentsBannerInfos, - selectTemplate, - activePopup, - homeSpotlight, - ]); - - const templateBanner = (index) => { - switch (selectTemplate) { - case "DSP00201": - return bannerDataList && bannerDataList[index]; - case "DSP00202": - return index === 2 - ? bannerDataList && bannerDataList[0] - : index === 3 - ? bannerDataList && bannerDataList[3] - : bannerDataList && bannerDataList[index + 1]; - case "DSP00203": - return index === 2 - ? bannerDataList && bannerDataList[0] - : index === 3 - ? bannerDataList && bannerDataList[1] - : bannerDataList && bannerDataList[index + 2]; - default: - return bannerDataList && bannerDataList[index]; - } - }; - - const firstBanner = homeMainContentsBannerInfos ? templateBanner(0) : null; - const secondBanner = homeMainContentsBannerInfos ? templateBanner(1) : null; - const thirdBanner = homeMainContentsBannerInfos ? templateBanner(2) : null; - const forthBanner = homeMainContentsBannerInfos ? templateBanner(3) : null; - - const orderStyle = useMemo(() => ({ order }), [order]); + const _handleItemFocus = useCallback(() => { if (handleItemFocus) { @@ -259,158 +44,90 @@ export default function HomeBanner({ } }, [handleItemFocus]); + const renderItem = useCallback((index, isHorizontal)=>{ + const data = bannerDataList?.[index] ?? {}; + return ( +
+ {data.shptmDspyTpNm === "Rolling" ? + + : data.shptmDspyTpNm === "Random" ? + + : + null + } +
+ ); + },[_handleItemFocus, bannerDataList]); + + const renderLayout = useCallback(()=>{ + switch(selectTemplate){ + case "DSP00201":{ + return ( + <> + + {renderItem(0, true)} + {renderItem(1, true)} + + {renderItem(2, false)} + {renderItem(3, false)} + + ) + } + case "DSP00202":{ + return ( + <> + {renderItem(0, false)} + + {renderItem(1, true)} + {renderItem(2, true)} + + {renderItem(3, false)} + + ); + } + case "DSP00203":{ + return ( + <> + {renderItem(0, false)} + {renderItem(1, false)} + + {renderItem(2, true)} + {renderItem(3, true)} + + + ); + } + } + return null; + },[selectTemplate, renderItem]); + return (
- - {/* 배너1 */} -
- {firstBanner && firstBanner.shptmDspyTpNm === "Rolling" ? ( - - ) : firstBanner && firstBanner.shptmDspyTpNm === "Random" ? ( - - ) : ( - - - - )} -
- - {/* 배너2 */} -
- {secondBanner && secondBanner.shptmDspyTpNm === "Rolling" ? ( - - ) : secondBanner && secondBanner.shptmDspyTpNm === "Random" ? ( - - ) : ( - - - - )} -
-
- - {/* 배너3 */} -
- {thirdBanner && thirdBanner.shptmDspyTpNm === "Rolling" ? ( - - ) : thirdBanner && thirdBanner.shptmDspyTpNm === "Random" ? ( - - ) : ( - - - - )} -
- - {/* 배너4 */} -
- {forthBanner && forthBanner.shptmDspyTpNm === "Rolling" ? ( - - ) : forthBanner && forthBanner.shptmDspyTpNm === "Random" ? ( - - ) : ( - - - - )} -
+ {renderLayout()}
); diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 6b71b05d..e8f9758c 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -68,10 +68,6 @@ export default function HomePanel({ isOnTop }) { (state) => state.common.appStatus?.webOSVersion ); - const homeTopDisplayInfos = useSelector( - (state) => state.home.mainContentsData.homeTopDisplayInfos - ); - const categoryInfos = useSelector( (state) => state.onSale.homeOnSaleData?.data.categoryInfos ); @@ -110,22 +106,16 @@ export default function HomePanel({ isOnTop }) { const sendedNowMenuRef = useRef(null); - const selectTemplate = useMemo(() => { - if (homeTopDisplayInfos) { - return homeTopDisplayInfos[0].shptmTmplCd; - } - return null; - }, [homeTopDisplayInfos]); const sortedHomeLayoutInfo = useMemo(() => { - if (selectTemplate && homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) { + if (homeLayoutInfo && homeLayoutInfo.homeLayoutInfo) { const sorted = [...homeLayoutInfo.homeLayoutInfo].sort( (x, y) => x.expsOrd - y.expsOrd ); return sorted; } return []; - }, [homeLayoutInfo, selectTemplate]); + }, [homeLayoutInfo]); const pageSpotIds = useMemo(() => { const spots = []; @@ -169,29 +159,15 @@ export default function HomePanel({ isOnTop }) { Spotlight.focus(homeSpotlight?.currentSpot); }, [dispatch, activePopup]); - const handleTopButtonClick = () => { + const handleTopButtonClick = useCallback(() => { let spotId = ""; - - if (selectTemplate === "DSP00201") { - if (Spotlight.focus("banner01")) { - spotId = "banner01"; - } - if (cbChangePageRef.current) { - cbChangePageRef.current(0, true); - } - return Spotlight.focus(spotId); + if (cbChangePageRef.current) { + cbChangePageRef.current(0, true); } - - if (selectTemplate === "DSP00202" || selectTemplate === "DSP00203") { - if (Spotlight.focus("banner03")) { - spotId = "banner03"; - } - if (cbChangePageRef.current) { - cbChangePageRef.current(0, true); - } - return Spotlight.focus(spotId); + if(sortedHomeLayoutInfo?.[0]){ + Spotlight.focus(sortedHomeLayoutInfo[0].shptmApphmDspyOptCd); } - }; + },[sortedHomeLayoutInfo]); const doSendLogGNB = useCallback( (containerId) => { @@ -238,7 +214,6 @@ export default function HomePanel({ isOnTop }) { - {homeLayoutInfo && homeTopDisplayInfos && ( - - - {renderPageItem()} - - - - {arrowBottom && ( -

+ + {renderPageItem()} + + {arrowBottom && ( +

+ )} + )} - {activePopup === ACTIVE_POPUP.exitPopup && ( } - )} ); } 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 7b8fc81a..847e3ecc 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -265,7 +265,7 @@ const SubCategory = ({ ) => { return (