diff --git a/com.twin.app.shoptime/src/actions/panelActions.js b/com.twin.app.shoptime/src/actions/panelActions.js index 802248c6..2d91355e 100644 --- a/com.twin.app.shoptime/src/actions/panelActions.js +++ b/com.twin.app.shoptime/src/actions/panelActions.js @@ -396,6 +396,7 @@ export const restoreVideoOnBack = () => { bannerId: videoStateToRestore.bannerId || videoStateToRestore.playerState?.currentBannerId, patnrId: videoStateToRestore.patnrId, showId: videoStateToRestore.showId, + showUrl: videoStateToRestore.showUrl, shptmBanrTpNm: videoStateToRestore.shptmBanrTpNm, lgCatCd: videoStateToRestore.lgCatCd, modal: true, // HomeBanner는 항상 modal diff --git a/com.twin.app.shoptime/src/actions/playActions.js b/com.twin.app.shoptime/src/actions/playActions.js index 54525013..c669101b 100644 --- a/com.twin.app.shoptime/src/actions/playActions.js +++ b/com.twin.app.shoptime/src/actions/playActions.js @@ -160,16 +160,16 @@ export const startVideoPlayerNew = ...rest }) => (dispatch, getState) => { - console.log('[startVideoPlayerNew] ✅ START - bannerId:', bannerId, ', videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal); + console.log('[startVideoPlayerNew] *** ✅ START - bannerId:', bannerId, ', videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal); // 🔽 [251116] 즉시 로딩 상태 설정 const videoIdentifier = videoId || showUrl || bannerId; if (videoIdentifier) { const displayMode = modal ? DISPLAY_STATUS.VISIBLE : DISPLAY_STATUS.FULLSCREEN; - console.log('[startVideoPlayerNew] 📌 Setting playback loading - identifier:', videoIdentifier, ', displayMode:', displayMode); + console.log('[startVideoPlayerNew] *** 📌 Setting playback loading - identifier:', videoIdentifier, ', displayMode:', displayMode); dispatch(setPlaybackLoading(videoIdentifier, displayMode)); } else { - console.log('[startVideoPlayerNew] ⚠️ No videoIdentifier provided'); + console.log('[startVideoPlayerNew] *** ⚠️ No videoIdentifier provided'); } const panels = getState().panels.panels; @@ -178,10 +178,11 @@ export const startVideoPlayerNew = // const panelName = useNewPlayer ? panel_names.PLAYER_PANEL_NEW : panel_names.PLAYER_PANEL; const panelName = panel_names.PLAYER_PANEL; - console.log('[startVideoPlayerNew] 📊 Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name); + console.log('[startVideoPlayerNew] *** 📊 Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name); if (topPanel && topPanel.name === panelName) { panelWorkingAction = updatePanel; + console.log('[startVideoPlayerNew] *** 📋 Current PLAYER_PANEL panelInfo:', topPanel.panelInfo); } // 중복 실행 방지: 같은 배너 + 같은 modal 상태/컨테이너면 skip @@ -191,10 +192,10 @@ export const startVideoPlayerNew = const isSameModalType = currentPanelInfo.modal === modal; const isSameContainer = currentPanelInfo.modalContainerId === modalContainerId; - console.log('[startVideoPlayerNew] 🔍 Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer); + console.log('[startVideoPlayerNew] *** 🔍 Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer); if (isSameBanner && isSameModalType && isSameContainer) { - console.log('[startVideoPlayerNew] ⏭️ SKIPPED - 동일한 요청', { + console.log('[startVideoPlayerNew] *** ⏭️ SKIPPED - 동일한 요청', { bannerId, modal, modalContainerId, @@ -206,7 +207,7 @@ export const startVideoPlayerNew = ...currentPlayerState, currentBannerId: bannerId, }; - console.log('[startVideoPlayerNew] 🔄 Player state updated - currentBannerId:', bannerId); + console.log('[startVideoPlayerNew] *** 🔄 Player state updated - currentBannerId:', bannerId); dispatch( panelWorkingAction( @@ -226,20 +227,20 @@ export const startVideoPlayerNew = true ) ); - console.log('[startVideoPlayerNew] ✨ Panel action dispatched - action:', panelWorkingAction === updatePanel ? 'updatePanel' : 'pushPanel'); + console.log('[startVideoPlayerNew] *** ✨ Panel action dispatched - action:', panelWorkingAction === updatePanel ? 'updatePanel' : 'pushPanel'); if (modal && modalContainerId && !spotlightDisable) { - console.log('[startVideoPlayerNew] 🎯 Setting Spotlight focus - containerId:', modalContainerId); + console.log('[startVideoPlayerNew] *** 🎯 Setting Spotlight focus - containerId:', modalContainerId); Spotlight.setPointerMode(false); startVideoFocusTimer = setTimeout(() => { - console.log('[startVideoPlayerNew] 🔍 Spotlight.focus called'); + console.log('[startVideoPlayerNew] *** 🔍 Spotlight.focus called'); Spotlight.focus(modalContainerId); }, 0); } else { - console.log('[startVideoPlayerNew] ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable); + console.log('[startVideoPlayerNew] *** ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable); } - console.log('[startVideoPlayerNew] ✅ END'); + console.log('[startVideoPlayerNew] *** ✅ END'); }; export const finishVideoPreview = () => (dispatch, getState) => { @@ -451,7 +452,9 @@ export const hideModalVideo = () => (dispatch, getState) => { // 축소된 모달 비디오를 원래 크기로 복구 export const showModalVideo = () => (dispatch, getState) => { + console.log('[showModalVideo] *** ✅ START'); const panels = getState().panels.panels; + console.log('[showModalVideo] *** 📊 Total panels count:', panels.length); // 축소된 modal PlayerPanel 찾기 const shrunkModalPlayerPanel = panels.find( @@ -461,30 +464,35 @@ export const showModalVideo = () => (dispatch, getState) => { panel.panelInfo?.shouldShrinkTo1px ); + console.log('[showModalVideo] *** 🔍 Shrunk modal PlayerPanel found:', !!shrunkModalPlayerPanel); + if (shrunkModalPlayerPanel) { const panelInfo = shrunkModalPlayerPanel.panelInfo; const shrinkInfo = panelInfo.playerState?.shrinkInfo; - // console.log('[HomePanel] showModalVideo: expanding video', { - // hasShrinkInfo: !!shrinkInfo, - // hasModalStyle: !!shrinkInfo?.modalStyle, - // hasModalContainerId: !!shrinkInfo?.modalContainerId, - // }); + console.log('[showModalVideo] *** 📋 ShrinkInfo available:', !!shrinkInfo); + console.log('[showModalVideo] *** 📋 Current panelInfo state:', { + shouldShrinkTo1px: panelInfo.shouldShrinkTo1px, + modal: panelInfo.modal, + modalContainerId: panelInfo.modalContainerId, + hasModalStyle: !!panelInfo.modalStyle, + }); const updatedPanelInfo = { ...panelInfo, shouldShrinkTo1px: false, // 축소 플래그 해제 - skipModalStyleRecalculation: true, // ← 복구 과정에서 DOM 재계산 스킵 - // 저장된 정보로 복구 + // 저장된 정보로 복구 (하지만 DOM 재계산은 허용) ...(shrinkInfo && { modalContainerId: shrinkInfo.modalContainerId, modalClassName: shrinkInfo.modalClassName, modalStyle: shrinkInfo.modalStyle, modalScale: shrinkInfo.modalScale, }), + skipModalStyleRecalculation: false, // 위치 변경 시 DOM 기준으로 다시 계산하도록 허용 }; - // console.log('[HomePanel] showModalVideo: updated panelInfo shouldShrinkTo1px=false, modalStyle restored, skipModalStyleRecalculation=true'); + console.log('[showModalVideo] *** 🔄 Updated panelInfo - shouldShrinkTo1px:', updatedPanelInfo.shouldShrinkTo1px); + console.log('[showModalVideo] *** 📍 Restored modalStyle:', updatedPanelInfo.modalStyle); dispatch( updatePanel({ @@ -492,8 +500,9 @@ export const showModalVideo = () => (dispatch, getState) => { panelInfo: updatedPanelInfo, }) ); + console.log('[showModalVideo] *** ✨ updatePanel dispatched'); } else { - console.log('[HomePanel] showModalVideo: No shrunk modal PlayerPanel found', { + console.log('[showModalVideo] *** ⚠️ No shrunk modal PlayerPanel found', { panels: panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal, @@ -501,6 +510,8 @@ export const showModalVideo = () => (dispatch, getState) => { })), }); } + + console.log('[showModalVideo] *** ✅ END'); }; // 🔽 패널은 유지하고 비디오만 중지하는 함수들 diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 95e4d667..9ea8033f 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -754,27 +754,42 @@ const HomePanel = ({ isOnTop }) => { useEffect(() => { if (detailPanelClosedTime && isOnTop) { - console.log('[HomePanel] ✅ DetailPanel 닫힘 감지됨!'); - console.log('[HomePanel] lastDetailPanelClosed:', detailPanelClosedTime); - console.log('[HomePanel] isOnTop:', isOnTop); - console.log('[HomePanel] videoPlayIntentRef.current:', videoPlayIntentRef.current); - console.log('[HomePanel] lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current); + console.log('[HomePanel] *** ✅ DetailPanel 닫힘 감지됨!'); + console.log('[HomePanel] *** lastDetailPanelClosed:', detailPanelClosedTime); + console.log('[HomePanel] *** isOnTop:', isOnTop); + console.log('[HomePanel] *** videoPlayIntentRef.current:', videoPlayIntentRef.current); + console.log('[HomePanel] *** lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current); // [TODO] DetailPanel 닫힘 후 비디오 자동 재생 복구 if (videoPlayIntentRef.current && lastPlayedBannerIdRef.current) { - dispatch(startVideoPlayerNew({ - modal: true, - modalContainerId: 'home-video-modal', - modalClassName: 'home-video-modal', - bannerId: lastPlayedBannerIdRef.current, - videoId: videoPlayIntentRef.current.videoId, - showUrl: videoPlayIntentRef.current.showUrl, - patnrId: videoPlayIntentRef.current.patnrId, - showId: videoPlayIntentRef.current.showId, - shptmBanrTpNm: videoPlayIntentRef.current.shptmBanrTpNm, - lgCatCd: videoPlayIntentRef.current.lgCatCd, - })); - + // 🔽 videoPlayIntentRef는 videoProps에 비디오 정보를 담고 있으므로 풀어서 전달 + // 혹시 videoProps에 없는 필드는 상위 레벨을 fallback으로 사용 + const intent = videoPlayIntentRef.current; + const videoProps = intent.videoProps || {}; + + // 🔽 [251118] 현재 스크롤 위치 확인하여 비디오 크기 결정 + const currentScrollTop = prevScrollTopRef.current; + const shouldShrink = currentScrollTop > 1; + console.log('[HomePanel] *** 비디오 복구 - currentScrollTop:', currentScrollTop, ', shouldShrink:', shouldShrink); + + dispatch( + startVideoPlayerNew({ + ...videoProps, + modal: true, + modalContainerId: videoProps.modalContainerId || 'home-video-modal', + modalClassName: videoProps.modalClassName || 'home-video-modal', + spotlightDisable: true, // 자동 복구 시 스크롤 이동 막기 위해 포커스 이동 금지 + bannerId: lastPlayedBannerIdRef.current, + videoId: videoProps.videoId || intent.videoId, + showUrl: videoProps.showUrl || intent.showUrl, + patnrId: videoProps.patnrId || intent.patnrId, + showId: videoProps.showId || intent.showId, + shptmBanrTpNm: videoProps.shptmBanrTpNm || intent.shptmBanrTpNm, + lgCatCd: videoProps.lgCatCd || intent.lgCatCd, + shouldShrinkTo1px: shouldShrink, // 스크롤 위치에 따라 설정 + }) + ); + // refs 초기화 videoPlayIntentRef.current = null; lastPlayedBannerIdRef.current = null;