fix: EIC/GB 오류해결

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]);
 
-  // 🔽 [수정] 중앙 제어 시스템을 사용하는 새로운 영구재생 로직
+  // 🔽 [추가] 0번째 배너에 대한 영구 비디오 재생을 처리하는 useEffect
-  useEffect(() => {
+  // useEffect(() => {
-    // DSP00201 템플릿이고 배너 데이터가 있을 때만 실행
+  //   if (
-    if (
+  //     bannerDataList &&
-      bannerDataList &&
+  //     bannerDataList.length > 0 &&
-      bannerDataList.length > 0 &&
+  //     selectTemplate === "DSP00201"
-      selectTemplate === "DSP00201"
+  //   ) {
-    ) {
+  //     const banner0Data = bannerDataList[0]?.bannerDetailInfos?.[0];
-      const banner0Data = bannerDataList[0]?.bannerDetailInfos?.[0];
 
-      if (banner0Data && banner0Data.showUrl) {
+  //     if (banner0Data && banner0Data.showUrl) {
-        const videoInfo = {
+  //       // DOM 요소가 존재하는지 확인 후 실행
-          showUrl: banner0Data.showUrl,
+  //       console.log("[HomeBanner] banner0Data", banner0Data);
-          patnrId: banner0Data.patnrId,
+  //       const checkAndPlay = () => {
-          showId: banner0Data.showId,
+  //         const targetElement = document.querySelector(
-          shptmBanrTpNm: "MEDIA",
+  //           '[data-spotlight-id="banner0"]',
-          modal: true,
+  //         );
-          modalContainerId: "banner0",
+  //         console.log("[HomeBanner] targetElement", targetElement);
-          spotlightDisable: true, // 영구재생 비디오는 포커스를 받지 않음
+  //         if (targetElement) {
-        };
+  //           console.log("[HomeBanner] targetElement 존재");
-        // 중앙 제어 시스템에 영구재생 시작을 요청
+  //           dispatch(
-        dispatch(requestPlayControl("banner0_persistent", videoInfo));
+  //             startVideoPlayer({
-      }
+  //               showUrl: banner0Data.showUrl,
-    }
+  //               patnrId: banner0Data.patnrId,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  //               showId: banner0Data.showId,
-  }, [dispatch, selectTemplate, JSON.stringify(bannerDataList)]); // bannerDataList의 내용이 바뀔 때만 실행
+  //               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" ? (
@@ -459,7 +527,7 @@ export default function HomeBanner({
         </div>
       );
     },
-    [_handleItemFocus, _handleShelfFocus, bannerDataList, handleSecondBannerFocus, handleSecondBannerBlur],
+    [_handleItemFocus, _handleShelfFocus, bannerDataList],
   );
 
   // 1번째 배너(포커스 재생) 및 기타 배너를 위한 렌더링 함수
@@ -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}

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx

@@ -61,7 +61,7 @@ export default function RandomUnit({
 }) {
   const dispatch = useDispatch();
 
-  const bannerDetailInfos = bannerData.bannerDetailInfos;
+  const bannerDetailInfos = bannerData && bannerData.bannerDetailInfos ? bannerData.bannerDetailInfos : [];
 
   const shptmTmplCd = useSelector(
     (state) => 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 (
     <>
       <Container