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 152f7943..7afbd9e3 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 @@ -212,7 +212,14 @@ export function ProductVideoV2({ const handleBackButton = useCallback(() => { if (isFullscreen) { // 전체화면이면 일반 모드로 - // console.log('[BgVideo] ProductVideoV2 - Exiting fullscreen to normal mode'); + console.log('🎬 [handleBackButton] 전체화면에서 일반 모드로 전환'); + + // 🎬 VideoPlayerRef 상태 확인 후 전환 + if (videoPlayerRef.current) { + const mediaState = videoPlayerRef.current.getMediaState?.(); + console.log('🎬 [handleBackButton] 전환 전 상태', mediaState); + } + setIsFullscreen(false); dispatch(switchToModal()); videoPlayerRef.current?.stopAutoCloseTimeout?.(); @@ -251,11 +258,35 @@ export function ProductVideoV2({ // 전체화면 토글 핸들러 const toggleFullscreen = useCallback(() => { setIsFullscreen((prev) => { + const newFullscreen = !prev; + console.log('🎬 [toggleFullscreen] 토글 실행', { prevIsFullscreen: prev, - newIsFullscreen: !prev, + newIsFullscreen: newFullscreen, }); - return !prev; + + // 🎬 VideoPlayerRef를 통한 직접 제어로 중간 지연 감소 + if (videoPlayerRef.current) { + try { + const currentMediaState = videoPlayerRef.current.getMediaState?.(); + console.log('🎬 [toggleFullscreen] VideoPlayerRef 현재 상태', { + currentTime: currentMediaState?.currentTime, + paused: currentMediaState?.paused, + playbackRate: currentMediaState?.playbackRate, + newFullscreen, + }); + + // 전체화면 전환 전 현재 상태 저장 (필요시) + if (currentMediaState && !currentMediaState.paused) { + // 재생 중이라면 상태 유지를 위한 처리 + console.log('🎬 [toggleFullscreen] 재생 상태 유지 처리'); + } + } catch (error) { + console.warn('🎬 [toggleFullscreen] VideoPlayerRef 접근 오류:', error); + } + } + + return newFullscreen; }); }, []); @@ -507,6 +538,35 @@ export function ProductVideoV2({ }; }, [dispatch, isPlaying]); + // 🎬 전체화면 전환 시 VideoPlayerRef 직접 제어를 통한 중간 지연 감소 + useEffect(() => { + if (isPlaying && videoPlayerRef.current) { + console.log('🎬 [useEffect] 전체화면 상태 변경 감지', { + isFullscreen, + timestamp: Date.now(), + }); + + // 약간의 지연 후 VideoPlayer 상태 확인 및 제어 + const timeoutId = setTimeout(() => { + if (videoPlayerRef.current) { + const mediaState = videoPlayerRef.current.getMediaState?.(); + console.log('🎬 [useEffect] 전체화면 전환 후 VideoPlayer 상태', { + isFullscreen, + mediaState, + }); + + // 필요시 재생 상태 즉시 복원 + if (mediaState && mediaState.paused && !mediaState.error) { + console.log('🎬 [useEffect] 재생 상태 즉시 복원 시도'); + // videoPlayerRef.current.play(); + } + } + }, 100); // 100ms 지연으로 onStart() 후 제어 + + return () => clearTimeout(timeoutId); + } + }, [isFullscreen, isPlaying]); + // VideoContainer의 모든 클릭 감시 (Hooks는 early return 전에 정의되어야 함) const handleVideoContainerClick = useCallback( (e) => {