diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx index df14d1a6..886e2e42 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx @@ -11,7 +11,6 @@ import { setDefaultFocus, // setShowPopup, fetchCurrentUserHomeTerms, - collectAndSaveBannerPositions, } from "../../../actions/homeActions"; import { changeAppStatus, @@ -25,6 +24,7 @@ import { setMyPageTermsAgree } from "../../../actions/myPageActions"; import { pushPanel, popPanel } from "../../../actions/panelActions"; import { panel_names } from "../../../utils/Config"; import { + startVideoPlayer, requestPlayControl, releasePlayControl, } from "../../../actions/playActions"; @@ -79,32 +79,49 @@ export default function HomeBanner({ } }, [handleItemFocus]); - // πŸ”½ [μˆ˜μ •] 쀑앙 μ œμ–΄ μ‹œμŠ€ν…œμ„ μ‚¬μš©ν•˜λŠ” μƒˆλ‘œμš΄ μ˜κ΅¬μž¬μƒ 둜직 - useEffect(() => { - // DSP00201 ν…œν”Œλ¦Ώμ΄κ³  λ°°λ„ˆ 데이터가 μžˆμ„ λ•Œλ§Œ μ‹€ν–‰ - if ( - bannerDataList && - bannerDataList.length > 0 && - selectTemplate === "DSP00201" - ) { - const banner0Data = bannerDataList[0]?.bannerDetailInfos?.[0]; + // πŸ”½ [μΆ”κ°€] 0번째 λ°°λ„ˆμ— λŒ€ν•œ 영ꡬ λΉ„λ””μ˜€ μž¬μƒμ„ μ²˜λ¦¬ν•˜λŠ” useEffect + // useEffect(() => { + // if ( + // bannerDataList && + // bannerDataList.length > 0 && + // selectTemplate === "DSP00201" + // ) { + // const banner0Data = bannerDataList[0]?.bannerDetailInfos?.[0]; - if (banner0Data && banner0Data.showUrl) { - const videoInfo = { - showUrl: banner0Data.showUrl, - patnrId: banner0Data.patnrId, - showId: banner0Data.showId, - shptmBanrTpNm: "MEDIA", - modal: true, - modalContainerId: "banner0", - spotlightDisable: true, // μ˜κ΅¬μž¬μƒ λΉ„λ””μ˜€λŠ” 포컀슀λ₯Ό λ°›μ§€ μ•ŠμŒ - }; - // 쀑앙 μ œμ–΄ μ‹œμŠ€ν…œμ— μ˜κ΅¬μž¬μƒ μ‹œμž‘μ„ μš”μ²­ - dispatch(requestPlayControl("banner0_persistent", videoInfo)); - } - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [dispatch, selectTemplate, JSON.stringify(bannerDataList)]); // bannerDataList의 λ‚΄μš©μ΄ λ°”λ€” λ•Œλ§Œ μ‹€ν–‰ + // if (banner0Data && banner0Data.showUrl) { + // // DOM μš”μ†Œκ°€ μ‘΄μž¬ν•˜λŠ”μ§€ 확인 ν›„ μ‹€ν–‰ + // console.log("[HomeBanner] banner0Data", banner0Data); + // const checkAndPlay = () => { + // const targetElement = document.querySelector( + // '[data-spotlight-id="banner0"]', + // ); + // console.log("[HomeBanner] targetElement", targetElement); + // if (targetElement) { + // console.log("[HomeBanner] targetElement 쑴재"); + // dispatch( + // startVideoPlayer({ + // showUrl: banner0Data.showUrl, + // patnrId: banner0Data.patnrId, + // showId: banner0Data.showId, + // shptmBanrTpNm: "MEDIA", + // modal: true, + // modalContainerId: "banner0", + // spotlightDisable: true, + // }), + // ); + // console.log("[HomeBanner] startVideoPlayer 호좜"); + // } else { + // // μš”μ†Œκ°€ μ—†μœΌλ©΄ μž μ‹œ ν›„ μž¬μ‹œλ„ + // console.log("[HomeBanner] targetElement μ—†μŒ"); + // setTimeout(checkAndPlay, 100); + // } + // }; + + // // λ‹€μŒ tickμ—μ„œ μ‹€ν–‰ν•˜μ—¬ λ Œλ”λ§ μ™„λ£Œ 보μž₯ + // setTimeout(checkAndPlay, 0); + // } + // } + // }, [dispatch, bannerDataList, selectTemplate]); // πŸ”½ [μˆ˜μ •] μƒˆλ‘œμš΄ 1번 λ°°λ„ˆ 포컀슀/λΈ”λŸ¬ ν•Έλ“€λŸ¬ const handleSecondBannerFocus = useCallback(() => { @@ -122,7 +139,7 @@ export default function HomeBanner({ modal: true, modalContainerId: "banner1", modalClassName: css.videoModal, - isVerticalModal: true, + isVerticalModal: true, // Assuming second banner is horizontal, so modal is vertical }; // 쀑앙 μ œμ–΄ μ‹œμŠ€ν…œμ— '미리보기' μž¬μƒμ„ μš”μ²­ @@ -395,29 +412,80 @@ export default function HomeBanner({ } }, [shouldShowOptionalTermsPopup, termsLoading, isOptionalConfirmVisible, dispatch]); + // const renderItem = useCallback( + // (index, isHorizontal) => { + // const data = bannerDataList?.[index] ?? {}; + + // if (index === 1) { + // return ( + //
+ // + //
+ // ); + // } + + // return ( + //
+ // {data.shptmDspyTpNm === "Rolling" ? ( + // + // ) : data.shptmDspyTpNm === "Random" ? ( + // + // ) : ( + // + // + // + // )} + //
+ // ); + // }, + // [ + // bannerDataList, + // _handleItemFocus, + // _handleShelfFocus, + // handleSecondBannerFocus, + // handleSecondBannerBlur, + // ], + // ); + const renderItem = useCallback( (index, isHorizontal) => { const data = bannerDataList?.[index] ?? {}; - - // 1번 λ°°λ„ˆμ— μƒˆλ‘œμš΄ 포컀슀/λΈ”λŸ¬ 이벀트 ν•Έλ“€λŸ¬ μ—°κ²° - if (index === 1) { - return ( -
- -
- ); - } - return (
{data.shptmDspyTpNm === "Rolling" ? ( @@ -459,7 +527,7 @@ export default function HomeBanner({
); }, - [_handleItemFocus, _handleShelfFocus, bannerDataList, handleSecondBannerFocus, handleSecondBannerBlur], + [_handleItemFocus, _handleShelfFocus, bannerDataList], ); // 1번째 λ°°λ„ˆ(포컀슀 μž¬μƒ) 및 기타 λ°°λ„ˆλ₯Ό μœ„ν•œ λ Œλ”λ§ ν•¨μˆ˜ @@ -488,7 +556,7 @@ export default function HomeBanner({ if (data.shptmDspyTpNm === "Rolling") { return (
- state.home?.bannerData?.shptmTmplCd, @@ -85,7 +85,11 @@ export default function RandomUnit({ const timerRef = useRef(); const bannerDataRef = useRef(bannerData); - const randomDataRef = useRef(bannerDetailInfos[randomNumber]); + const randomDataRef = useRef( + bannerDetailInfos && randomNumber !== undefined && bannerDetailInfos.length > 0 + ? bannerDetailInfos[randomNumber] + : null + ); const topContentsLogInfo = useMemo(() => { if (randomDataRef.current) { @@ -174,9 +178,9 @@ export default function RandomUnit({ // 라이브 μ˜μƒμ΄ 1개 라도 μˆœκ°„μ μΈ λ„€νŠΈμ›Œν¬ 였λ₯˜λ‚˜, μΌμ‹œμ μΈ 였λ₯˜ 일수 μžˆμœΌλ―€λ‘œ, 일정 μ‹œκ°„μ„ μ£Όκ³ , λΉ„λ””μ˜€λ₯Ό λ‹€μ‹œ 호좜 ν•œλ‹€. useEffect(() => { - if (bannerDetailInfos && randomNumber) { + if (bannerDetailInfos && bannerDetailInfos.length > 0 && randomNumber !== undefined) { const indices = bannerDetailInfos - .map((info, index) => (info.shptmBanrTpNm === "LIVE" ? index : null)) + .map((info, index) => (info && info.shptmBanrTpNm === "LIVE" ? index : null)) .filter((index) => index !== null && index !== randomNumber); setLiveIndicies(indices); @@ -477,10 +481,10 @@ export default function RandomUnit({ }, [sendBannerLog]); useEffect(() => { - if (bannerData) { + if (bannerData && bannerDetailInfos && randomNumber !== undefined && bannerDetailInfos.length > 0) { setRandomData(bannerDetailInfos[randomNumber]); } - }, [bannerData, dispatch]); + }, [bannerData, bannerDetailInfos, randomNumber]); useEffect(() => { if (randomData && randomData.priceInfo !== null) { @@ -529,7 +533,9 @@ export default function RandomUnit({ const nextIndex = liveIndicies[0]; setLiveIndicies((prev) => prev.slice(1)); - setRandomData(bannerDetailInfos[nextIndex]); + if (bannerDetailInfos && bannerDetailInfos[nextIndex]) { + setRandomData(bannerDetailInfos[nextIndex]); + } setTimeout(() => { setVideoError(false); @@ -538,6 +544,11 @@ export default function RandomUnit({ } }, [broadcast]); + // 데이터가 μ—†μœΌλ©΄ λ Œλ”λ§ν•˜μ§€ μ•ŠμŒ + if (!bannerData || !randomData || !bannerDetailInfos) { + return null; + } + return ( <>