[251013] feat:Video관련 action 추가
🕐 커밋 시간: 2025. 10. 13. 12:37:46 📊 변경 통계: • 총 파일: 7개 • 추가: +95줄 • 삭제: -168줄 📁 추가된 파일: + com.twin.app.shoptime/[251013]_RollingUnit_리렌더링_분석_및_해결방법.md 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/actionTypes.js ~ com.twin.app.shoptime/src/actions/playActions.js ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js ~ com.twin.app.shoptime/src/reducers/playReducer.js ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx 🔧 함수 변경 내용: 📄 com.twin.app.shoptime/src/actions/playActions.js (javascript): 🔄 Modified: pauseModalVideo() 📄 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx (javascript): 🔄 Modified: SpotlightContainerDecorator() 🔧 주요 변경 내용: • 타입 시스템 안정성 강화 • 핵심 비즈니스 로직 개선 • UI 컴포넌트 아키텍처 개선 • 개발 문서 및 가이드 개선 Performance: 코드 최적화로 성능 개선 기대
This commit is contained in:
@@ -84,82 +84,6 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
|
||||
}
|
||||
}, [handleItemFocus]);
|
||||
|
||||
// 🔽 [추가] 0번째 배너에 대한 영구 비디오 재생을 처리하는 useEffect
|
||||
// useEffect(() => {
|
||||
// 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]);
|
||||
|
||||
// 🔽 [수정] 새로운 1번 배너 포커스/블러 핸들러
|
||||
const handleSecondBannerFocus = useCallback(() => {
|
||||
const secondBannerData = bannerDataList?.[1];
|
||||
if (secondBannerData) {
|
||||
const randomData = secondBannerData.bannerDetailInfos[secondBannerData.randomIndex];
|
||||
const videoInfo = {
|
||||
showUrl: randomData.showUrl,
|
||||
patnrId: randomData.patnrId,
|
||||
showId: randomData.showId,
|
||||
shptmBanrTpNm: randomData.showId ? randomData.shptmBanrTpNm : 'MEDIA',
|
||||
lgCatCd: randomData.lgCatCd,
|
||||
chanId: randomData.brdcChnlId,
|
||||
modal: true,
|
||||
modalContainerId: 'banner1',
|
||||
modalClassName: css.videoModal,
|
||||
isVerticalModal: true, // Assuming second banner is horizontal, so modal is vertical
|
||||
};
|
||||
|
||||
// 중앙 제어 시스템에 '미리보기' 재생을 요청
|
||||
dispatch(requestPlayControl('banner1_preview', videoInfo));
|
||||
}
|
||||
|
||||
if (handleItemFocus) {
|
||||
handleItemFocus();
|
||||
}
|
||||
}, [dispatch, bannerDataList, handleItemFocus]);
|
||||
|
||||
const handleSecondBannerBlur = useCallback(() => {
|
||||
// 중앙 제어 시스템에 '미리보기' 제어권 해제를 요청
|
||||
dispatch(releasePlayControl('banner1_preview'));
|
||||
}, [dispatch]);
|
||||
|
||||
const termsData = useSelector((state) => state.home.termsData);
|
||||
const termsIdMap = useSelector((state) => state.home.termsIdMap);
|
||||
const optionalTermsAvailable = useSelector((state) => state.home.optionalTermsAvailable);
|
||||
@@ -379,27 +303,6 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
|
||||
return null;
|
||||
}, [bannerDataList]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (firstSpot && defaultFocus && popupVisible === false) {
|
||||
// setTimeout(() => {
|
||||
// Spotlight.focus(defaultFocus);
|
||||
// }, 0);
|
||||
// }
|
||||
|
||||
// if (defaultFocus) {
|
||||
// dispatch(setDefaultFocus(defaultFocus));
|
||||
// }
|
||||
// }, [defaultFocus, dispatch, popupVisible]);
|
||||
|
||||
// 테스트용 팝업 표시
|
||||
// useEffect(() => {
|
||||
// setTimeout(() => {
|
||||
// console.log("App.js optionalTermsTest 팝업 표시");
|
||||
// setIsOptionalConfirmVisible(true);
|
||||
// // setIsOptionalTermsVisible(true);
|
||||
// }, 1000);
|
||||
// }, []);
|
||||
|
||||
// 약관 동의 및 선택 약관 팝업 처리 (TV 환경 최적화)
|
||||
useEffect(() => {
|
||||
if (termsLoading) {
|
||||
@@ -423,77 +326,6 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
|
||||
}
|
||||
}, [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, videoPlayerable = false) => {
|
||||
const data = bannerDataList?.[index] ?? {};
|
||||
@@ -678,7 +510,7 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}, [selectTemplate, renderItem, renderSimpleVideoContainer]);
|
||||
}, [selectTemplate, renderItem, renderSimpleVideoContainer, introTermsAgree]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user