diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx index 933c79f7..192a354c 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx @@ -319,8 +319,10 @@ export function ProductVideoV2({ // [isPlaying, isFullscreen, toggleFullscreen, overlayState.controls?.visible, dispatch, toggleControls] // ); + // FullScreen 모드에서의 MediaPlayer Click 핸들러 const handleVideoPlayerClick = useCallback( (e) => { + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick'); if (!isPlaying) return; if (!isFullscreen) { @@ -330,16 +332,20 @@ export function ProductVideoV2({ return; } + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick-1'); // fullscreen: overlay toggle e.preventDefault?.(); e.stopPropagation?.(); + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick-2'); // Redux overlayState 사용 const isCurrentlyVisible = overlayState.controls?.visible; if (isCurrentlyVisible) { + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick-2-1 isCurrentlyVisible-true', isCurrentlyVisible); dispatch(hideControls()); videoPlayerRef.current.hideControls?.(); } else { + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick-2-2 isCurrentlyVisible-false', isCurrentlyVisible); dispatch(showControls()); videoPlayerRef.current.showControls?.(); videoPlayerRef.current.startAutoCloseTimeout?.(); @@ -374,7 +380,7 @@ export function ProductVideoV2({ e.preventDefault(); e.stopPropagation(); - toggleOverlayVisibility(); + // toggleOverlayVisibility(); }, [isPlaying, isFullscreen, toggleOverlayVisibility]); // 전체 화면 키보드 핸들러 @@ -411,6 +417,19 @@ export function ProductVideoV2({ [isPlaying, isFullscreen] ); + // const handleFullscreenClick = useCallback((e) => { + // if (!isPlaying || !isFullscreen) return; + + // console.log('🖥️ [Fullscreen Container] 마우스 클릭 - 토글 실행'); + + // dispatch(hideControls()); + // videoPlayerRef.current?.hideControls?.(); + + // e.preventDefault(); + // e.stopPropagation(); + // toggleOverlayVisibility(); + // }, [isPlaying, isFullscreen, toggleOverlayVisibility]); + // 전체화면 모드일 때만 window 레벨 이벤트 리스너 등록 useEffect(() => { if (isPlaying && isFullscreen) { @@ -798,6 +817,7 @@ export function ProductVideoV2({ spotlightId="product-video-v2-fullscreen-portal" onMouseDownCapture={handleFullscreenContainerMouseDownCapture} onKeyDown={handleFullscreenKeyDown} + // onClick={handleFullscreenClick} >
({ name: p.name, hasModal: !!p.panelInfo?.modal }))); + if (DEBUG_MODE) { + console.log(`[MainView] 🔍 Top panel name: ${topPanel?.name}`); + console.log(`[MainView] 🔍 isStandalonePanel check:`, isStandalonePanel(topPanel?.name)); + console.log(`[MainView] 🔍 STANDALONE_PANELS:`, STANDALONE_PANELS); + console.log(`[MainView] 🔍 All panels:`, panels.map(p => ({ name: p.name, hasModal: !!p.panelInfo?.modal }))); + } if (isStandalonePanel(topPanel?.name)) { - console.log(`[MainView] ✅ Standalone panel detected: ${topPanel?.name} - rendering independently`); + if (DEBUG_MODE) { + console.log(`[MainView] ✅ Standalone panel detected: ${topPanel?.name} - rendering independently`); + } renderingPanels = [topPanel]; // 단독 패널만 단독으로 렌더링 } // 기존 3-layer 구조 체크: PlayerPanel + DetailPanel + MediaPanel(modal) @@ -224,9 +231,11 @@ export default function MainView({ className, initService }) { panels[panels.length - 1]?.panelInfo?.modal === true; if (hasThreeLayerStructure) { - console.log( - '[MainView] Rendering 3-layer structure: PlayerPanel + DetailPanel + MediaPanel' - ); + if (DEBUG_MODE) { + console.log( + '[MainView] Rendering 3-layer structure: PlayerPanel + DetailPanel + MediaPanel' + ); + } renderingPanels = panels.slice(-3); } else if ( panels[panels.length - 1]?.name === Config.panel_names.PLAYER_PANEL || @@ -256,14 +265,18 @@ export default function MainView({ className, initService }) { // 단독 패널은 항상 onTop if (isStandalonePanel(panel.name)) { isPanelOnTop = true; - console.log(`[MainView] Standalone panel ${panel.name} is always onTop`); + if (DEBUG_MODE) { + console.log(`[MainView] Standalone panel ${panel.name} is always onTop`); + } } // 3-layer 케이스: 중간 패널(DetailPanel)이 onTop else if (renderingPanels.length === 3) { if (index === 1) { // DetailPanel (중간) isPanelOnTop = true; - console.log('[MainView] 3-layer: DetailPanel is onTop'); + if (DEBUG_MODE) { + console.log('[MainView] 3-layer: DetailPanel is onTop'); + } } // PlayerPanel (index 0): isOnTop = false (백그라운드) // MediaPanel (index 2): isOnTop = false (modal overlay) @@ -328,7 +341,9 @@ export default function MainView({ className, initService }) { if (response.retCode === 0 && typeof window === 'object') { window.location.reload(); } else { - console.error('unknown error', response.retCode); + if (DEBUG_MODE) { + console.error('unknown error', response.retCode); + } } } } @@ -383,7 +398,9 @@ export default function MainView({ className, initService }) { panels[panels.length - 2]?.name === Config.panel_names.DETAIL_PANEL ) { panel = panels[panels.length - 2]; // DetailPanel로 포커스 - console.log('[MainView] 3-layer: Focus on DetailPanel'); + if (DEBUG_MODE) { + console.log('[MainView] 3-layer: Focus on DetailPanel'); + } } // 2-layer modal 구조 else if ( @@ -698,7 +715,9 @@ export default function MainView({ className, initService }) { } }, [webOSVersion]); const handleErrorPopupClose = useCallback(() => { - console.log('handleErrorPopupClose 호출됨! activePopup:', activePopup, 'popupData:', popupData); + if (DEBUG_MODE) { + console.log('handleErrorPopupClose 호출됨! activePopup:', activePopup, 'popupData:', popupData); + } if (popupData?.shouldPopPanel) { dispatch(popPanel()); } diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx index 9163b16a..b991504b 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx @@ -41,6 +41,7 @@ function PlayerOverlayContents({ const cntry_cd = useSelector((state) => state.common.httpHeader?.cntry_cd); const dispatch = useDispatch(); const onClickBack = (ev) => { + // TabContainerV2가 표시된 상태에서 백버튼 클릭 시 이벤트 버블링 방지 // (Overlay의 onClick으로 전파되어 toggleControls()가 호출되는 것을 막음) if (tabContainerVersion === 2 && belowContentsVisible) {