[251121] fix: PlayerPanel tabIndexV2 = 2 from PopularShow

🕐 커밋 시간: 2025. 11. 21. 09:56:10

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

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

🔧 주요 변경 내용:
  • 소규모 기능 개선

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

@@ -47,7 +47,6 @@ import TPopUp from '../../components/TPopUp/TPopUp';
 import Media from '../../components/VideoPlayer/Media';
 import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
 import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer';
-import usePrevious from '../../hooks/usePrevious';
 import useWhyDidYouUpdate from '../../hooks/useWhyDidYouUpdate';
 import * as Config from '../../utils/Config';
 import { ACTIVE_POPUP, panel_names } from '../../utils/Config';
@@ -173,8 +172,8 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   });
 
   const videoPlayer = useRef(null);
-  const prevModal = usePrevious(panelInfo?.modal);
+  const modalPrevRef = useRef(panelInfo?.modal);
-  const prevIsTopPanelDetailFromPlayer = usePrevious(isTopPanelDetailFromPlayer);
+  const prevIsTopPanelDetailFromPlayerRef = useRef(false);
   const [playListInfo, setPlayListInfo] = USE_STATE('playListInfo', '');
   const [shopNowInfo, setShopNowInfo] = USE_STATE('shopNowInfo');
   const [backupInitialIndex, setBackupInitialIndex] = USE_STATE('backupInitialIndex', 0);
@@ -213,6 +212,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   const [isVODPaused, setIsVODPaused] = USE_STATE('isVODPaused', false);
   const [tabIndexV2, setTabIndexV2] = USE_STATE('tabIndexV2', 1); // 0: ShopNow, 1: LiveChannel, 2: ShopNowButton
   const [tabContainerVersion, setTabContainerVersion] = USE_STATE('tabContainerVersion', 2); // 1: TabContainer (우측), 2: TabContainerV2 (하단)
+  const [isModalClosed, setIsModalClosed] = USE_STATE('isModalClosed', true); // 모달이 false 상태인지 나타내는 플래그
 
   const panels = USE_SELECTOR('panels', (state) => state.panels.panels);
   const chatData = USE_SELECTOR('chatData', (state) => state.play.chatData);
@@ -261,11 +261,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
   const lastPanelAction = USE_SELECTOR('lastPanelAction', (state) => state.panels.lastPanelAction);
   const nowMenu = USE_SELECTOR('nowMenu', (state) => state.common.menu.nowMenu);
-  const nowMenuRef = usePrevious(nowMenu);
+  const nowMenuRef = useRef(null);
   const entryMenu = USE_SELECTOR('entryMenu', (state) => state.common.menu.entryMenu);
   const [videoLoaded, setVideoLoaded] = USE_STATE('videoLoaded', false);
-  const entryMenuRef = usePrevious(entryMenu);
+  const entryMenuRef = useRef(null);
-  const panelInfoRef = usePrevious(panelInfo);
+  const panelInfoRef = useRef(null);
 
   const initialFocusTimeoutJob = useRef(new Job((func) => func(), 100));
   const liveLogParamsRef = useRef(null);
@@ -341,9 +341,30 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   //   }
   // },[isOnTop, panelInfo])
 
+  // useRef들 업데이트
+  // prevIsTopPanelDetailFromPlayerRef 업데이트
+  useEffect(() => {
+    prevIsTopPanelDetailFromPlayerRef.current = isTopPanelDetailFromPlayer;
+  }, [isTopPanelDetailFromPlayer]);
+
+  // nowMenuRef 업데이트
+  useEffect(() => {
+    nowMenuRef.current = nowMenu;
+  }, [nowMenu]);
+
+  // entryMenuRef 업데이트
+  useEffect(() => {
+    entryMenuRef.current = entryMenu;
+  }, [entryMenu]);
+
+  // panelInfoRef 업데이트
+  useEffect(() => {
+    panelInfoRef.current = panelInfo;
+  }, [panelInfo]);
+
   // PlayerPanel.jsx의 라인 313-327 useEffect 수정 - detailPanelClosed flag 감지 추가
   useEffect(() => {
-    console.log('[PlayerPanel] isOnTop useEffect:', {
+    console.log('[PlayerPanel] 🔍 isOnTop useEffect 호출:', {
       isOnTop,
       modal: panelInfo?.modal,
       isPaused: panelInfo?.isPaused,
@@ -354,18 +375,18 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       // 1. Resume Video if needed (isPaused or detailPanelClosed)
       if (panelInfo.isPaused || panelInfo.detailPanelClosed) {
         if (panelInfo.modal) {
-          console.log('[PlayerPanel] Back on top (Modal) - resuming video');
+          console.log('[PlayerPanel] ▶️ Back on top (Modal) - resuming video');
           dispatch(resumeModalVideo());
         } else {
-          console.log('[PlayerPanel] Back on top (Fullscreen) - resuming video');
+          console.log('[PlayerPanel] ▶️ Back on top (Fullscreen) - resuming video');
           dispatch(resumeFullscreenVideo());
         }
       }
 
       // 2. Reset detailPanelClosed flag
       if (panelInfo.detailPanelClosed) {
-        console.log('[PlayerPanel] detailPanelClosed flag 초기화');
+        console.log('[PlayerPanel] 🔄 detailPanelClosed flag 초기화 시작');
-        console.log('[PlayerPanel] Returned from DetailPanel', {
+        console.log('[PlayerPanel] 🔙 DetailPanel에서 복귀 정보:', {
           detailPanelClosedAt: panelInfo.detailPanelClosedAt,
           detailPanelClosedFromSource: panelInfo.detailPanelClosedFromSource,
           lastFocusedTargetId: panelInfo.lastFocusedTargetId,
@@ -376,7 +397,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           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);
 
@@ -384,7 +405,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           return () => {
             if (focusTimeoutId) {
               clearTimeout(focusTimeoutId);
-              console.log('[PlayerPanel] 🎯 포커스 복원 타이머 정리');
+              console.log('[PlayerPanel] 🧹 포커스 복원 타이머 정리됨');
             }
           };
         }
@@ -400,11 +421,12 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
             },
           })
         );
+        console.log('[PlayerPanel] 🏁 detailPanelClosed flag 초기화 완료');
       }
     } else {
       // Not on top
       if (panelInfo && panelInfo.modal) {
-        // console.log('[PlayerPanel] Not on top - pausing video');
+        console.log('[PlayerPanel] ⏸️ Not on top (Modal) - pausing video logic commented out');
         // dispatch(pauseModalVideo());
       }
     }
@@ -422,11 +444,23 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     }
   }, [panelInfo?.isPaused]);
 
-  // Modal 상태 변화 감지 (true → false)
+  // Modal 상태 변화 감지 (true → false, false → true)
   useEffect(() => {
-    if (prevModal !== undefined && prevModal === true && panelInfo?.modal === false) {
+    const currentModalState = panelInfo?.modal;
-      console.log('[PlayerPanel] 🔄 Modal 상태 변화: true → false (전체화면 모드로 복귀)');
+    const prevModalState = modalPrevRef.current;
+
+    console.log('[PlayerPanel] 🔍 Modal 상태 체크:', {
+      prevModalState,
+      currentModalState,
+      shouldExecuteTrueToFalse: prevModalState === true && currentModalState === false,
+      shouldExecuteFalseToTrue: prevModalState === false && currentModalState === true
+    });
+
+    // true → false 변화 감지
+    if (prevModalState === true && currentModalState === false) {
+      console.log('[PlayerPanel] ▶️ Modal 상태 변화: true → false (전체화면 모드로 복귀)');
       console.log('[PlayerPanel] 🎯 포커스 복원 준비 - lastFocusedTargetId:', panelInfo?.lastFocusedTargetId);
+      setIsModalClosed(true); // 모달이 닫혔음을 표시
 
       // DetailPanel에서 복귀 시 포커스 복원
       const lastFocusedTargetId = panelInfo?.lastFocusedTargetId;
@@ -439,7 +473,15 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         }, 800);
       }
     }
-  }, [panelInfo?.modal, prevModal, panelInfo?.lastFocusedTargetId]);
+
+    // false → true 변화 감지 (모달이 열림)
+    if (prevModalState === false && currentModalState === true) {
+      console.log('[PlayerPanel] 📱 Modal 상태 변화: false → true (모달 열림)');
+      setIsModalClosed(false); // 모달이 열렸음을 표시
+    }
+
+    modalPrevRef.current = currentModalState; // 현재 modal 상태를 ref에 저장
+  }, [panelInfo?.modal, panelInfo?.lastFocusedTargetId]);
 
   // creating live log params
   useEffect(() => {
@@ -2117,20 +2159,25 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   useEffect(() => {
     if (isOnTop && !panelInfo.modal && !videoVerticalVisible) {
       // 정확한 복귀 종류 구분:
-      // 1. HomePanel 복귀: prevModal === true && prevIsTopPanelDetailFromPlayer === false
+      // 1. HomePanel 복귀: modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false
-      // 2. DetailPanel 복귀: prevIsTopPanelDetailFromPlayer === true
+      // 2. DetailPanel 복귀: prevIsTopPanelDetailFromPlayerRef.current === true
-      const isHomePanelReturn = prevModal === true && prevIsTopPanelDetailFromPlayer === false;
+      const isHomePanelReturn = modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false;
-      const isDetailPanelReturn = prevIsTopPanelDetailFromPlayer === true;
+      const isDetailPanelReturn = prevIsTopPanelDetailFromPlayerRef.current === true;
 
       if (isDetailPanelReturn) {
         console.log('[PlayerPanel] ✅ PlayerPanel 내부 DetailPanel에서 복귀함! - 오버레이 표시');
       } else if (isHomePanelReturn) {
         console.log('[PlayerPanel] 📺 HomePanel에서 복귀함 - 오버레이 표시');
-        // HomePanel에서 복귀 시 항상 tabIndex=1로 시작
+        // HomePanel에서 복귀 시 콘텐츠 타입에 따라 tabIndex 설정
-        console.log('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 1로 강제 설정');
+        console.log('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 콘텐츠 타입에 따라 설정');
         if (tabContainerVersion === 2) {
-          setTabIndexV2(1);
+          if (panelInfoRef.current.shptmBanrTpNm === 'VOD') {
-          console.log('[PlayerPanel] 📝 tabIndexV2를 1로 설정됨');
+            setTabIndexV2(2);
+            console.log('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
+          } else {
+            setTabIndexV2(1);
+            console.log('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
+          }
         }
       } else {
         console.log('[PlayerPanel] 🔄 그 외 복귀 - 오버레이 표시');
@@ -2155,7 +2202,22 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         }
       }
     }
-  }, [isOnTop, panelInfo.modal, videoVerticalVisible, panelInfo?.lastFocusedTargetId, tabContainerVersion, setTabIndexV2, prevModal, prevIsTopPanelDetailFromPlayer]);
+  }, [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);
+
+      if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') {
+        setTabIndexV2(2);
+        console.log('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
+      } else {
+        setTabIndexV2(1);
+        console.log('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
+      }
+    }
+  }, [isOnTop, panelInfo.modal, videoVerticalVisible, tabContainerVersion]);
 
   useEffect(() => {
     // tabContainerVersion === 1일 때만 실행