[20250721] 선택약관관련 수정사항 반영
This commit is contained in:
djaco
@@ -11,6 +11,7 @@ import {
|
||||
setDefaultFocus,
|
||||
// setShowPopup,
|
||||
fetchCurrentUserHomeTerms,
|
||||
collectAndSaveBannerPositions,
|
||||
} from "../../../actions/homeActions";
|
||||
import {
|
||||
changeAppStatus,
|
||||
@@ -18,12 +19,12 @@ import {
|
||||
setOptionalTermsUserDecision,
|
||||
handleOptionalTermsAgree as handleOptionalTermsAgreeAction,
|
||||
handleOptionalTermsDecline,
|
||||
updateOptionalTermsAgreement,
|
||||
} from "../../../actions/commonActions";
|
||||
import { setMyPageTermsAgree } from "../../../actions/myPageActions";
|
||||
import { pushPanel, popPanel } from "../../../actions/panelActions";
|
||||
import { panel_names } from "../../../utils/Config";
|
||||
import {
|
||||
startVideoPlayer,
|
||||
requestPlayControl,
|
||||
releasePlayControl,
|
||||
} from "../../../actions/playActions";
|
||||
@@ -78,50 +79,34 @@ export default function HomeBanner({
|
||||
}
|
||||
}, [handleItemFocus]);
|
||||
|
||||
// 🔽 [추가] 0번째 배너에 대한 영구 비디오 재생을 처리하는 useEffect
|
||||
// useEffect(() => {
|
||||
// if (
|
||||
// bannerDataList &&
|
||||
// bannerDataList.length > 0 &&
|
||||
// selectTemplate === "DSP00201"
|
||||
// ) {
|
||||
// const banner0Data = bannerDataList[0]?.bannerDetailInfos?.[0];
|
||||
// 🔽 [수정] 중앙 제어 시스템을 사용하는 새로운 영구재생 로직
|
||||
useEffect(() => {
|
||||
// DSP00201 템플릿이고 배너 데이터가 있을 때만 실행
|
||||
if (
|
||||
bannerDataList &&
|
||||
bannerDataList.length > 0 &&
|
||||
selectTemplate === "DSP00201"
|
||||
) {
|
||||
const banner0Data = bannerDataList[0]?.bannerDetailInfos?.[0];
|
||||
|
||||
// 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]);
|
||||
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의 내용이 바뀔 때만 실행
|
||||
|
||||
// 🔽 [수정] 새로운 1번 배너 포커스/블러 핸들러
|
||||
const handleSecondBannerFocus = useCallback(() => {
|
||||
const secondBannerData = bannerDataList?.[1];
|
||||
if (secondBannerData) {
|
||||
@@ -137,16 +122,20 @@ export default function HomeBanner({
|
||||
modal: true,
|
||||
modalContainerId: "banner1",
|
||||
modalClassName: css.videoModal,
|
||||
isVerticalModal: true, // Assuming second banner is horizontal, so modal is vertical
|
||||
isVerticalModal: true,
|
||||
};
|
||||
|
||||
// 중앙 제어 시스템에 '미리보기' 재생을 요청
|
||||
dispatch(requestPlayControl("banner1_preview", videoInfo));
|
||||
}
|
||||
|
||||
if (handleItemFocus) {
|
||||
handleItemFocus();
|
||||
}
|
||||
}, [dispatch, bannerDataList, handleItemFocus]);
|
||||
|
||||
const handleSecondBannerBlur = useCallback(() => {
|
||||
// 중앙 제어 시스템에 '미리보기' 제어권 해제를 요청
|
||||
dispatch(releasePlayControl("banner1_preview"));
|
||||
}, [dispatch]);
|
||||
|
||||
@@ -271,13 +260,10 @@ export default function HomeBanner({
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.log("[HomeBanner] 약관 동의 성공:", response);
|
||||
}
|
||||
// 새로운 Redux 액션을 사용하여 상태 업데이트
|
||||
dispatch(setOptionalTermsUserDecision('agreed'));
|
||||
dispatch(setOptionalTermsPopupShown(true));
|
||||
// ✅ IntroPanel과 동일한 방식으로 Redux 상태 직접 업데이트 (API 호출 없이)
|
||||
dispatch(updateOptionalTermsAgreement(true));
|
||||
// 로컬 상태도 업데이트 (기존 로직 유지)
|
||||
setOptionalTermsAgreed(true);
|
||||
// 약관 데이터 갱신
|
||||
dispatch(fetchCurrentUserHomeTerms());
|
||||
} else {
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.error("[HomeBanner] 약관 동의 실패:", response);
|
||||
@@ -309,9 +295,8 @@ export default function HomeBanner({
|
||||
|
||||
const handleOptionalDeclineClick = useCallback(() => {
|
||||
console.log("[HomeBanner] 거절/다음에 하기 버튼 클릭");
|
||||
// 새로운 Redux 액션을 사용하여 거절 상태 업데이트
|
||||
dispatch(setOptionalTermsUserDecision('declined'));
|
||||
dispatch(setOptionalTermsPopupShown(true));
|
||||
// ✅ 거절 상태 업데이트
|
||||
dispatch(updateOptionalTermsAgreement(false));
|
||||
setIsOptionalConfirmVisible(false);
|
||||
}, [dispatch]);
|
||||
|
||||
@@ -410,80 +395,29 @@ 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" ? (
|
||||
@@ -525,7 +459,7 @@ export default function HomeBanner({
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[_handleItemFocus, _handleShelfFocus, bannerDataList],
|
||||
[_handleItemFocus, _handleShelfFocus, bannerDataList, handleSecondBannerFocus, handleSecondBannerBlur],
|
||||
);
|
||||
|
||||
// 1번째 배너(포커스 재생) 및 기타 배너를 위한 렌더링 함수
|
||||
@@ -554,7 +488,7 @@ export default function HomeBanner({
|
||||
if (data.shptmDspyTpNm === "Rolling") {
|
||||
return (
|
||||
<div className={!isHorizontal ? css.imgBox : undefined}>
|
||||
<RollingUnit
|
||||
<Rolling
|
||||
bannerData={data}
|
||||
isHorizontal={isHorizontal}
|
||||
key={"banner" + index}
|
||||
|
||||
Reference in New Issue
Block a user