[251026] feat: HomeBanner Video AutoStart

🕐 커밋 시간: 2025. 10. 26. 22:48:04

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +58줄
  • 삭제: -2975줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/.gitignore
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

🗑️ 삭제된 파일:
  - com.twin.app.shoptime/2025-10-26-focus-1px-to-recovery.txt
  - com.twin.app.shoptime/shopperHouseResponse.txt

🔧 주요 변경 내용:
  • 소규모 기능 개선
  • 코드 정리 및 최적화

Performance: 코드 최적화로 성능 개선 기대

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

@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 
@@ -41,6 +42,7 @@ import {
   releasePlayControl,
   requestPlayControl,
   startVideoPlayer,
+  startVideoPlayerNew,
 } from '../../../actions/playActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
 // import TButtonScroller from "../../../components/TButtonScroller/TButtonScroller";
@@ -49,7 +51,6 @@ import TNewPopUp from '../../../components/TPopUp/TNewPopUp';
 import {
   useFocusHistory,
 } from '../../../hooks/useFocusHistory/useFocusHistory';
-import { useVideoPlay } from '../../../hooks/useVideoPlay/useVideoPlay';
 import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove';
 import { panel_names } from '../../../utils/Config';
 import { $L } from '../../../utils/helperMethods';
@@ -99,12 +100,6 @@ export default function HomeBanner({
     logPrefix: "[HomeBanner-Focus]",
   });
 
-  // 🔽 useVideoPlay - 동영상 재생 제어
-  const videoPlay = useVideoPlay({
-    enableLogging: true,
-    logPrefix: "[HomeBanner-VideoPlay]",
-  });
-
   // 🔽 useVideoMove - 포커스 전환 기반 동영상 제어
   const { playByTransition, cleanup } = useVideoMove({
     enableLogging: true,
@@ -148,6 +143,9 @@ export default function HomeBanner({
     (state) => state.common.optionalTermsPopupFlow
   );
 
+  // 🔽 초기 비디오 재생 플래그 (1회만 실행되도록)
+  const isInitialVideoPlayRef = useRef(false);
+
   //------------------------------------------------------------------------------
   // 팝업표시 상태
   const [isOptionalConfirmVisible, setIsOptionalConfirmVisible] =
@@ -378,6 +376,51 @@ export default function HomeBanner({
     return null;
   }, [bannerDataList]);
 
+  // 🔽 초기 비디오 자동 재생 (렌더링 완료 후)
+  useEffect(() => {
+    // 조건 체크
+    if (!bannerDataList || isInitialVideoPlayRef.current || !defaultFocus) {
+      return;
+    }
+
+    // 한 번만 실행
+    isInitialVideoPlayRef.current = true;
+
+    // defaultFocus에서 배너 인덱스 추출 (예: "banner0" -> 0)
+    const bannerIndex = parseInt(defaultFocus.replace('banner', ''));
+    const targetBannerData = bannerDataList[bannerIndex];
+
+    if (!targetBannerData) {
+      return;
+    }
+
+    // 비디오 재생 가능한 배너 찾기
+    let videoData = null;
+    if (targetBannerData.shptmDspyTpNm === 'Random') {
+      videoData = targetBannerData.bannerDetailInfos?.[targetBannerData.randomIndex];
+    } else {
+      videoData = targetBannerData.bannerDetailInfos?.[0];
+    }
+
+    if (videoData && (videoData.shptmBanrTpNm === 'LIVE' || videoData.shptmBanrTpNm === 'VOD')) {
+      console.log('[HomeBanner] 초기 비디오 자동 재생:', defaultFocus);
+
+      dispatch(
+        startVideoPlayerNew({
+          bannerId: defaultFocus,
+          showUrl: videoData.showUrl,
+          patnrId: videoData.patnrId,
+          showId: videoData.showId,
+          shptmBanrTpNm: videoData.shptmBanrTpNm,
+          lgCatCd: videoData.lgCatCd,
+          chanId: videoData.brdcChnlId,
+          modal: true,
+          modalContainerId: defaultFocus,
+        })
+      );
+    }
+  }, [bannerDataList, defaultFocus, dispatch]);
+
   // 약관 동의 및 선택 약관 팝업 처리 (TV 환경 최적화)
   useEffect(() => {
     if (termsLoading) {