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 64022074..2c5a3ac3 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx @@ -115,11 +115,16 @@ export default function RollingUnit({ const previousTimeRef = useRef(); const arrRef = useRef([]); const bannerDataRef = useRef(bannerData); - const rollingDataRef = useRef(rollingData); + const filteredRollingDataRef = useRef(filteredRollingData); + + // filteredRollingDataRef 업데이트 + useEffect(() => { + filteredRollingDataRef.current = filteredRollingData; + }, [filteredRollingData]); const topContentsLogInfo = useMemo(() => { - if (rollingDataRef.current) { - const currentRollingData = rollingDataRef.current[startIndex]; + if (filteredRollingDataRef.current && filteredRollingDataRef.current.length > 0) { + const currentRollingData = filteredRollingDataRef.current[startIndex]; let contId, contNm; @@ -172,9 +177,10 @@ export default function RollingUnit({ return {}; }, [shptmTmplCd, startIndex]); + const sendBannerLog = useCallback( (bannerClick) => { - const data = rollingDataRef.current[startIndex]; + const data = filteredRollingDataRef.current[startIndex]; const newParams = bannerData.banrLctnNo === '2' ? { @@ -183,7 +189,7 @@ export default function RollingUnit({ : { bannerType: 'Vertical', }; - if (rollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) { + if (filteredRollingDataRef.current && nowMenu === LOG_MENU.HOME_TOP) { const logParams = { contextName: LOG_CONTEXT_NAME.HOME, messageId: bannerClick ? LOG_MESSAGE_ID.BANNER_CLICK : LOG_MESSAGE_ID.BANNER, @@ -305,12 +311,13 @@ export default function RollingUnit({ const categoryData = useMemo(() => { if ( - Object.keys(rollingData[startIndex]).length > 0 && - rollingData[startIndex].shptmLnkTpCd === LINK_TYPES.CATEGORY + filteredRollingData.length > 0 && + Object.keys(filteredRollingData[startIndex]).length > 0 && + filteredRollingData[startIndex].shptmLnkTpCd === LINK_TYPES.CATEGORY ) { if (homeCategory && homeCategory.length > 0) { const foundCategory = homeCategory.find( - (data) => data.lgCatCd === rollingData[startIndex].lgCatCd + (data) => data.lgCatCd === filteredRollingData[startIndex].lgCatCd ); if (foundCategory) { return { @@ -321,10 +328,10 @@ export default function RollingUnit({ } } return {}; - }, [homeCategory, rollingData, startIndex]); + }, [homeCategory, filteredRollingData, startIndex]); const { originalPrice, discountedPrice, discountRate, offerInfo } = - usePriceInfo(rollingData[startIndex].priceInfo) || {}; + usePriceInfo(filteredRollingData.length > 0 ? filteredRollingData[startIndex].priceInfo : {}) || {}; const handlePushPanel = useCallback( (name, panelInfo) => { @@ -350,10 +357,16 @@ export default function RollingUnit({ ); const imageBannerClick = useCallback(() => { + // 필터링된 데이터가 비어있으면 return + if (!filteredRollingData || filteredRollingData.length === 0) { + return; + } + if (bannerId) { dispatch(setBannerIndex(bannerId, startIndex)); } - const currentData = rollingData[startIndex]; + + const currentData = filteredRollingData[startIndex]; const linkType = currentData.shptmLnkTpCd; const bannerType = currentData.shptmBanrTpNm; @@ -432,7 +445,7 @@ export default function RollingUnit({ }) ); }, [ - rollingData, + filteredRollingData, startIndex, bannerId, dispatch, @@ -443,6 +456,11 @@ export default function RollingUnit({ ]); const videoClick = useCallback(() => { + // 필터링된 데이터가 비어있으면 return + if (!filteredRollingData || filteredRollingData.length === 0) { + return; + } + const lastFocusedTargetId = getContainerId(Spotlight.getCurrent()); const currentSpot = Spotlight.getCurrent(); @@ -463,7 +481,7 @@ export default function RollingUnit({ dispatch(setBannerIndex(bannerId, startIndex)); } - const currentData = rollingData[startIndex]; + const currentData = filteredRollingData[startIndex]; handleStartVideoPlayer({ showUrl: currentData.showUrl, @@ -485,7 +503,7 @@ export default function RollingUnit({ logTpNo: LOG_TP_NO.TOP_CONTENTS.CLICK, }) ); - }, [rollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer, topContentsLogInfo]); + }, [filteredRollingData, startIndex, bannerId, dispatch, handleStartVideoPlayer, topContentsLogInfo]); // 10초 롤링 useEffect(() => { @@ -537,7 +555,7 @@ export default function RollingUnit({ useEffect(() => { sendBannerLog(); - }, [rollingDataRef, nowMenu, startIndex]); + }, [filteredRollingDataRef, nowMenu, startIndex]); useEffect(() => { if (nowMenu !== LOG_MENU.HOME_TOP) { @@ -551,7 +569,7 @@ export default function RollingUnit({ spotlightId={`container-${spotlightId}`} onFocus={shelfFocus} > - {filteredRollingData !== 1 ? ( + {filteredRollingData.length !== 1 ? ( ) : null} - {filteredRollingData && filteredRollingData[startIndex].shptmBanrTpNm === 'Image Banner' ? ( + {filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'Image Banner' ? ( - ) : filteredRollingData[startIndex].shptmBanrTpNm === 'LIVE' ? ( + ) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'LIVE' ? (

- ) : filteredRollingData[startIndex].shptmBanrTpNm === 'VOD' ? ( + ) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === 'VOD' ? ( - ) : filteredRollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? ( + ) : filteredRollingData && filteredRollingData.length > 0 && filteredRollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? ( ) : null} - {filteredRollingData !== 1 ? ( + {filteredRollingData.length !== 1 ? (