diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 267c27d9..a72f39f9 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/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 prevIsTopPanelDetailFromPlayer = usePrevious(isTopPanelDetailFromPlayer); + const modalPrevRef = useRef(panelInfo?.modal); + 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 panelInfoRef = usePrevious(panelInfo); + const entryMenuRef = useRef(null); + 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] Returned from DetailPanel', { + console.log('[PlayerPanel] 🔄 detailPanelClosed flag 초기화 시작'); + 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) { - console.log('[PlayerPanel] 🔄 Modal 상태 변화: true → false (전체화면 모드로 복귀)'); + const currentModalState = panelInfo?.modal; + 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 - // 2. DetailPanel 복귀: prevIsTopPanelDetailFromPlayer === true - const isHomePanelReturn = prevModal === true && prevIsTopPanelDetailFromPlayer === false; - const isDetailPanelReturn = prevIsTopPanelDetailFromPlayer === true; + // 1. HomePanel 복귀: modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false + // 2. DetailPanel 복귀: prevIsTopPanelDetailFromPlayerRef.current === true + const isHomePanelReturn = modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false; + const isDetailPanelReturn = prevIsTopPanelDetailFromPlayerRef.current === true; if (isDetailPanelReturn) { console.log('[PlayerPanel] ✅ PlayerPanel 내부 DetailPanel에서 복귀함! - 오버레이 표시'); } else if (isHomePanelReturn) { console.log('[PlayerPanel] 📺 HomePanel에서 복귀함 - 오버레이 표시'); - // HomePanel에서 복귀 시 항상 tabIndex=1로 시작 - console.log('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 1로 강제 설정'); + // HomePanel에서 복귀 시 콘텐츠 타입에 따라 tabIndex 설정 + console.log('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 콘텐츠 타입에 따라 설정'); if (tabContainerVersion === 2) { - setTabIndexV2(1); - console.log('[PlayerPanel] 📝 tabIndexV2를 1로 설정됨'); + if (panelInfoRef.current.shptmBanrTpNm === 'VOD') { + 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일 때만 실행