[251122] fix: PlayerPanel 비디오 선택시 tabIndexV2 타이머 초기화

🕐 커밋 시간: 2025. 11. 22. 05:04:30

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

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

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

@@ -63,10 +63,7 @@ import TabContainerV2 from './PlayerTabContents/v2/TabContainer.v2';
 // import ShopNowContainer from './PlayerTabContents/v2/ShopNowContainer';
 // import ShopNowButton from './PlayerTabContents/v2/ShopNowButton';
 
-const Container = SpotlightContainerDecorator(
+const Container = SpotlightContainerDecorator({ enterTo: 'last-focused', preserveId: true }, 'div');
-  { enterTo: 'last-focused', preserveId: true },
-  'div'
-);
 
 const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
   try {
@@ -394,10 +391,16 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
         // 포커스 복원 로직 추가 (1000ms 지연)
         if (panelInfo.lastFocusedTargetId) {
-          console.log('[PlayerPanel] 🎯 DetailPanel 복귀 후 1000ms 지연 포커스 복원 예약:', panelInfo.lastFocusedTargetId);
+          console.log(
+            '[PlayerPanel] 🎯 DetailPanel 복귀 후 1000ms 지연 포커스 복원 예약:',
+            panelInfo.lastFocusedTargetId
+          );
 
           const focusTimeoutId = setTimeout(() => {
-            console.log('[PlayerPanel] 🔍 DetailPanel 복귀 후 포커스 복원 실행:', panelInfo.lastFocusedTargetId);
+            console.log(
+              '[PlayerPanel] 🔍 DetailPanel 복귀 후 포커스 복원 실행:',
+              panelInfo.lastFocusedTargetId
+            );
             Spotlight.focus(panelInfo.lastFocusedTargetId);
           }, 1000);
 
@@ -453,13 +456,16 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       prevModalState,
       currentModalState,
       shouldExecuteTrueToFalse: prevModalState === true && currentModalState === false,
-      shouldExecuteFalseToTrue: prevModalState === false && currentModalState === true
+      shouldExecuteFalseToTrue: prevModalState === false && currentModalState === true,
     });
 
     // true → false 변화 감지
     if (prevModalState === true && currentModalState === false) {
       console.log('[PlayerPanel] ▶️ Modal 상태 변화: true → false (전체화면 모드로 복귀)');
-      console.log('[PlayerPanel] 🎯 포커스 복원 준비 - lastFocusedTargetId:', panelInfo?.lastFocusedTargetId);
+      console.log(
+        '[PlayerPanel] 🎯 포커스 복원 준비 - lastFocusedTargetId:',
+        panelInfo?.lastFocusedTargetId
+      );
       setIsModalClosed(true); // 모달이 닫혔음을 표시
 
       // DetailPanel에서 복귀 시 포커스 복원
@@ -1217,7 +1223,13 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         setShopNowInfo(null);
       }
     }
-  }, [showDetailInfo, panelInfo.showId, panelInfo.shptmBanrTpNm, fullVideolgCatCd, featuredShowsInfos]);
+  }, [
+    showDetailInfo,
+    panelInfo.showId,
+    panelInfo.shptmBanrTpNm,
+    fullVideolgCatCd,
+    featuredShowsInfos,
+  ]);
 
   //LIVE
   useEffect(() => {
@@ -1515,6 +1527,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           const mediaId = videoPlayer.current?.video?.media?.mediaId;
           setMediaId(mediaId);
           setVideoLoaded(true);
+          console.log(
+            '[PlayerPanel] 🎬 Video Loaded - shptmBanrTpNm:',
+            panelInfoRef.current?.shptmBanrTpNm
+          );
         }
       }
     },
@@ -1714,6 +1730,14 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     setVideoLoaded(false);
   }, [currentPlayingUrl]);
 
+  // 비디오가 새로 선택될 때 타이머 초기화
+  useEffect(() => {
+    if (currentPlayingUrl) {
+      console.log('[PlayerPanel] 🎬 비디오 선택됨 - tabIndexV2 타이머 초기화');
+      resetTimerTabAutoAdvance(10000);
+    }
+  }, [selectedIndex, resetTimerTabAutoAdvance]);
+
   const handlePopupClose = useCallback(() => {
     dispatch(setHidePopup());
     setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON));
@@ -2161,7 +2185,8 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       // 정확한 복귀 종류 구분:
       // 1. HomePanel 복귀: modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false
       // 2. DetailPanel 복귀: prevIsTopPanelDetailFromPlayerRef.current === true
-      const isHomePanelReturn = modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false;
+      const isHomePanelReturn =
+        modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false;
       const isDetailPanelReturn = prevIsTopPanelDetailFromPlayerRef.current === true;
 
       if (isDetailPanelReturn) {
@@ -2191,7 +2216,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       // PlayerPanel 내부 DetailPanel에서 복귀 시에만 포커스 복원 시도
       if (isDetailPanelReturn) {
         const lastFocusedTargetId = panelInfo?.lastFocusedTargetId;
-        console.log('[PlayerPanel] 🎯 PlayerPanel DetailPanel 복귀 - lastFocusedTargetId:', lastFocusedTargetId);
+        console.log(
+          '[PlayerPanel] 🎯 PlayerPanel DetailPanel 복귀 - lastFocusedTargetId:',
+          lastFocusedTargetId
+        );
 
         if (lastFocusedTargetId) {
           // ShopNowContents가 렌더링될 때까지 잠시 대기 후 포커스 복원
@@ -2202,12 +2230,22 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         }
       }
     }
-  }, [isOnTop, panelInfo.modal, videoVerticalVisible, panelInfo?.lastFocusedTargetId, tabContainerVersion, setTabIndexV2]);
+  }, [
+    isOnTop,
+    panelInfo.modal,
+    videoVerticalVisible,
+    panelInfo?.lastFocusedTargetId,
+    tabContainerVersion,
+    setTabIndexV2,
+  ]);
 
   // PopularShow에서 처음 호출할 때처럼 modal이 false인 상태에서 VOD/LIVE 구분
   useEffect(() => {
     if (isOnTop && !panelInfo.modal && !videoVerticalVisible && tabContainerVersion === 2) {
-      console.log('[PlayerPanel] 📺 Modal false 상태 - shptmBanrTpNm:', panelInfoRef.current?.shptmBanrTpNm);
+      console.log(
+        '[PlayerPanel] 📺 Modal false 상태 - shptmBanrTpNm:',
+        panelInfoRef.current?.shptmBanrTpNm
+      );
 
       if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') {
         setTabIndexV2(2);
@@ -2295,7 +2333,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     console.log('[TabContainerV2] tabIndex 1 → 2 감지, 타이머 시작');
 
     if (!belowContentsVisible || videoVerticalVisible) {
-      console.log('[TabContainerV2] early return - belowContentsVisible 또는 videoVerticalVisible 조건 불만족');
+      console.log(
+        '[TabContainerV2] early return - belowContentsVisible 또는 videoVerticalVisible 조건 불만족'
+      );
       return;
     }
 
@@ -2338,7 +2378,13 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         clearTimerTabAutoAdvance();
       }
     };
-  }, [tabIndexV2, belowContentsVisible, videoVerticalVisible, resetTimerTabAutoAdvance, clearTimerTabAutoAdvance]);
+  }, [
+    tabIndexV2,
+    belowContentsVisible,
+    videoVerticalVisible,
+    resetTimerTabAutoAdvance,
+    clearTimerTabAutoAdvance,
+  ]);
 
   useLayoutEffect(() => {
     const videoContainer = document.querySelector(`.${css.videoContainer}`);