Apply clean-develop content to resolve side effects
This commit is contained in:
djaco
@@ -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 (
|
||||
// <div className={!isHorizontal ? css.imgBox : undefined}>
|
||||
// <RandomUnitNew
|
||||
// bannerData={data}
|
||||
// isHorizontal={isHorizontal}
|
||||
// key={"banner" + index}
|
||||
// spotlightId={"banner" + index}
|
||||
// handleShelfFocus={_handleShelfFocus}
|
||||
// onFocus={handleSecondBannerFocus}
|
||||
// onBlur={handleSecondBannerBlur}
|
||||
// randomNumber={data.randomIndex}
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <div className={!isHorizontal ? css.imgBox : undefined}>
|
||||
// {data.shptmDspyTpNm === "Rolling" ? (
|
||||
// <Rolling
|
||||
// bannerData={data}
|
||||
// isHorizontal={isHorizontal}
|
||||
// key={"banner" + index}
|
||||
// spotlightId={"banner" + index}
|
||||
// handleShelfFocus={_handleShelfFocus}
|
||||
// handleItemFocus={_handleItemFocus}
|
||||
// />
|
||||
// ) : data.shptmDspyTpNm === "Random" ? (
|
||||
// <Random
|
||||
// bannerData={data}
|
||||
// isHorizontal={isHorizontal}
|
||||
// key={"banner" + index}
|
||||
// spotlightId={"banner" + index}
|
||||
// handleShelfFocus={_handleShelfFocus}
|
||||
// handleItemFocus={_handleItemFocus}
|
||||
// randomNumber={data.randomIndex}
|
||||
// />
|
||||
// ) : (
|
||||
// <SpottableComponent spotlightId={"banner" + index}>
|
||||
// <CustomImage
|
||||
// delay={0}
|
||||
// src={
|
||||
// isHorizontal
|
||||
// ? homeTopDisplayInfo.wdthtpImgPath1
|
||||
// : homeTopDisplayInfo.vtctpImgPath1
|
||||
// }
|
||||
// aria-label={
|
||||
// isHorizontal
|
||||
// ? homeTopDisplayInfo.wdthtpImgNm1
|
||||
// : homeTopDisplayInfo.vtctpImgNm1
|
||||
// }
|
||||
// />
|
||||
// </SpottableComponent>
|
||||
// )}
|
||||
// </div>
|
||||
// );
|
||||
// },
|
||||
// [
|
||||
// bannerDataList,
|
||||
// _handleItemFocus,
|
||||
// _handleShelfFocus,
|
||||
// handleSecondBannerFocus,
|
||||
// handleSecondBannerBlur,
|
||||
// ],
|
||||
// );
|
||||
|
||||
const renderItem = useCallback(
|
||||
(index, isHorizontal) => {
|
||||
const data = bannerDataList?.[index] ?? {};
|
||||
|
||||
// 1번 배너에 새로운 포커스/블러 이벤트 핸들러 연결
|
||||
if (index === 1) {
|
||||
return (
|
||||
<div className={!isHorizontal ? css.imgBox : undefined}>
|
||||
<Random
|
||||
bannerData={data}
|
||||
isHorizontal={isHorizontal}
|
||||
key={"banner" + index}
|
||||
spotlightId={"banner" + index}
|
||||
handleShelfFocus={_handleShelfFocus}
|
||||
handleItemFocus={_handleItemFocus}
|
||||
randomNumber={data?.randomIndex}
|
||||
onFocus={handleSecondBannerFocus}
|
||||
onBlur={handleSecondBannerBlur}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={!isHorizontal ? css.imgBox : undefined}>
|
||||
{data.shptmDspyTpNm === "Rolling" ? (
|
||||
@@ -437,7 +505,7 @@ export default function HomeBanner({
|
||||
spotlightId={"banner" + index}
|
||||
handleShelfFocus={_handleShelfFocus}
|
||||
handleItemFocus={_handleItemFocus}
|
||||
randomNumber={data?.randomIndex}
|
||||
randomNumber={data.randomIndex}
|
||||
/>
|
||||
) : (
|
||||
<SpottableComponent spotlightId={"banner" + index}>
|
||||
@@ -459,7 +527,7 @@ export default function HomeBanner({
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[_handleItemFocus, _handleShelfFocus, bannerDataList, handleSecondBannerFocus, handleSecondBannerBlur],
|
||||
[_handleItemFocus, _handleShelfFocus, bannerDataList],
|
||||
);
|
||||
|
||||
// 1번째 배너(포커스 재생) 및 기타 배너를 위한 렌더링 함수
|
||||
@@ -471,14 +539,14 @@ export default function HomeBanner({
|
||||
if (selectTemplate === "DSP00201" && index === 1) {
|
||||
return (
|
||||
<div className={!isHorizontal ? css.imgBox : undefined}>
|
||||
<RandomUnit
|
||||
<RandomUnitNew
|
||||
bannerData={data}
|
||||
isHorizontal={isHorizontal}
|
||||
key={"banner" + index}
|
||||
spotlightId={"banner" + index}
|
||||
handleShelfFocus={_handleShelfFocus}
|
||||
handleItemFocus={_handleItemFocus}
|
||||
randomNumber={data?.randomIndex}
|
||||
randomNumber={data.randomIndex}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -488,7 +556,7 @@ export default function HomeBanner({
|
||||
if (data.shptmDspyTpNm === "Rolling") {
|
||||
return (
|
||||
<div className={!isHorizontal ? css.imgBox : undefined}>
|
||||
<Rolling
|
||||
<RollingUnit
|
||||
bannerData={data}
|
||||
isHorizontal={isHorizontal}
|
||||
key={"banner" + index}
|
||||
|
||||
Reference in New Issue
Block a user