From 16718c47534b458f7b8a6f6699d255bc78ac01fc Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Wed, 12 Nov 2025 13:06:57 +0900
Subject: [PATCH] =?UTF-8?q?[251112]=20feat:=20views=20-=20ProductVideo.v2.?=
 =?UTF-8?q?jsx=20-=20=EA=B8=B0=EB=8A=A5=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🕐 커밋 시간: 2025. 11. 12. 13:06:56

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx

🔧 주요 변경 내용:
  • 소규모 기능 개선
---
 .../ProductVideo/ProductVideo.v2.jsx          | 66 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 3 deletions(-)

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) => {