[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/.gitignore

@@ -17,3 +17,4 @@ srcBackup
 # com.lgshop.app_*.ipk
 .docs
 nul
+.txt

com.twin.app.shoptime/shopperHouseResponse.txt

@@ -1,41 +0,0 @@
-HTTP/1.1 200 OK
-X-Server-Time: 1284366813334
-Content-Type: application/json
- 
-{
-“retCode”: 0,
-“retMsg”: “Success”
-"data": {
-        "result": {	
-            "time": "25 ms",
-            "results": [
-                {
-                    "docs": [
-                        {
-                            "dcPrice": "$ 69.99",
-                            "thumbnail": "https://media.us.lg.com/transform/ecomm-PDPGallery-1100x730/e9b7c49b-66ed-45d4-8890-dd32c91a2053/TV-accessories_WS25XA_gallery-01_3000x3000",
-                            "reviewGrade": "",
-                            "partnerName": "LGE",
-                            "partnerLogo": "http://aic-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/us_obs_logo_60x60.png",
-                            "price": "$ 69.99",
-                            "contentId": "V3_8001_Tv Search_PD_9_WS25XA",
-                            "title": "StandbyME 2 Carry Strap & Wall-Mount Holder",
-                            "soldout": "N",
-"rankInfo": 1,
-                            "euEnrgLblInfos": [ ]
-                        }
-                    ],
-                    "total_count": 100,
-                    "type": "item",
-                    "hit_count": 100,
-                    "searchId": "SEARCH_uCS3z1N0QgtRXjsyhDCpA0R80",
-                    "sortingType": "LG_RECOMMENDED",
-                    "rangeType": “SIMILAR",
-                    "createdAt": “2025-09-23 13:23:11",
-                    "relativeQuerys": [
-                        "What are some luxury skincare products",
-                        "What are some luxury skincare products"
-                     ]
-                }
-            ],
-            "htt

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) {

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

@@ -463,7 +463,11 @@ const HomePanel = ({ isOnTop }) => {
         setTimeout(() => {
           Spotlight.resume();
           setFirstSpot(true);
-          if (Spotlight.getPointerMode()) {
+          // 비디오가 1px로 축소된 상태가 아닐 때만 finishVideoPreview 호출
+          const isVideoShrunk = panels.some(
+            (panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.shouldShrinkTo1px
+          );
+          if (Spotlight.getPointerMode() && !isVideoShrunk) {
             dispatch(finishVideoPreview());
           }
           if (panelInfo.currentCatCd) {
@@ -480,7 +484,7 @@ const HomePanel = ({ isOnTop }) => {
         }, 0);
       }
     },
-    [panelInfo, firstSpot, enterThroughGNB, defaultFocus, cbChangePageRef, dispatch, isOnTop]
+    [panelInfo, firstSpot, enterThroughGNB, defaultFocus, cbChangePageRef, dispatch, isOnTop, panels]
   );
 
   const bestSellerLoaded = useCallback(() => {