From 95db60c2ddfa99216bbe05d6731ecda5cc09999a Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Tue, 11 Nov 2025 12:58:52 +0900
Subject: [PATCH] =?UTF-8?q?debug:=20ProductVideoV2=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=83=81=EC=84=B8=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B9=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎬 태그를 붙인 상세한 콘솔 로그 추가:
- handleThumbnailClick: 썸네일 클릭 감지
- handleVideoPlayerClick: 비디오 재생 중 클릭 감지 및 상태 검사
- handleVideoPlayerMouseDown: MouseDown 이벤트 감지
- toggleFullscreen: 전체화면 토글 상태 변화
- videoPlayerWrapper onClick/onMouseDownCapture: wrapper 레벨 이벤트
- normalContainerRef onClick/onMouseDownCapture: 컨테이너 레벨 이벤트

각 로그에는 다음 정보 포함:
- 현재 isPlaying, isFullscreen 상태
- 이벤트 타입 (type, target 등)
- 조건 만족 여부

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ProductVideo/ProductVideo.v2.jsx          | 74 +++++++++++++++++--
 1 file changed, 66 insertions(+), 8 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 6b2f7b01..5db5be57 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
@@ -142,8 +142,13 @@ export default function ProductVideoV2({
 
   // 썸네일 클릭 핸들러 - 비디오 재생 시작 + Redux dispatch + MediaPlayer 메서드 호출
   const handleThumbnailClick = useCallback(() => {
+    console.log('🎬 [handleThumbnailClick] 썸네일 클릭됨', {
+      canPlayVideo,
+      isPlaying,
+    });
     if (canPlayVideo && !isPlaying) {
       // console.log('[BgVideo] ProductVideoV2 - Starting video playback');
+      console.log('🎬 [handleThumbnailClick] ✅ 비디오 재생 시작');
       setIsPlaying(true);
 
       // 백그라운드 전체화면 비디오 일시정지
@@ -237,7 +242,13 @@ export default function ProductVideoV2({
 
   // 전체화면 토글 핸들러
   const toggleFullscreen = useCallback(() => {
-    setIsFullscreen((prev) => !prev);
+    setIsFullscreen((prev) => {
+      console.log('🎬 [toggleFullscreen] 토글 실행', {
+        prevIsFullscreen: prev,
+        newIsFullscreen: !prev,
+      });
+      return !prev;
+    });
   }, []);
 
   // 일반 모드용 키보드 이벤트 핸들러 (컨테이너에 직접 연결)
@@ -259,14 +270,28 @@ export default function ProductVideoV2({
   // 비디오 재생 중 클릭 핸들러 - 전체화면 토글
   const handleVideoPlayerClick = useCallback(
     (e) => {
+      console.log('🎬 [ProductVideoV2] handleVideoPlayerClick 실행됨', {
+        isPlaying,
+        isFullscreen,
+        eventType: e.type,
+        target: e.target?.className,
+        currentTarget: e.currentTarget?.className,
+      });
+
       // 비디오 재생 중이고 전체화면이 아닐 때만 작동
-      if (!isPlaying || isFullscreen) return;
+      if (!isPlaying || isFullscreen) {
+        console.log('🎬 [ProductVideoV2] 조건 불만족 - 반환됨', {
+          isPlaying,
+          isFullscreen,
+        });
+        return;
+      }
 
       // 이벤트 전파 중단 (capture phase에서도 중단)
       e.preventDefault?.();
       e.stopPropagation?.();
 
-      console.log('[ProductVideoV2] Click detected - toggling fullscreen');
+      console.log('🎬 [ProductVideoV2] ✅ Click detected - toggling fullscreen');
       toggleFullscreen();
     },
     [isPlaying, isFullscreen, toggleFullscreen]
@@ -275,14 +300,24 @@ export default function ProductVideoV2({
   // 마우스 다운 (클릭) 이벤트 - capture phase에서 처리
   const handleVideoPlayerMouseDown = useCallback(
     (e) => {
+      console.log('🎬 [ProductVideoV2] handleVideoPlayerMouseDown 실행됨', {
+        isPlaying,
+        isFullscreen,
+        eventType: e.type,
+        target: e.target?.className,
+      });
+
       // 비디오 재생 중이고 전체화면이 아닐 때만 작동
-      if (!isPlaying || isFullscreen) return;
+      if (!isPlaying || isFullscreen) {
+        console.log('🎬 [ProductVideoV2] MouseDown 조건 불만족');
+        return;
+      }
 
       // capture phase에서 이벤트 처리
       e.preventDefault();
       e.stopPropagation();
 
-      console.log('[ProductVideoV2] MouseDown detected at capture phase');
+      console.log('🎬 [ProductVideoV2] ✅ MouseDown detected at capture phase');
     },
     [isPlaying, isFullscreen]
   );
@@ -402,15 +437,24 @@ export default function ProductVideoV2({
         onTouchMove={handleUserActivity}
         onWheel={handleUserActivity}
         onClick={(e) => {
+          console.log('🎬 [videoPlayerWrapper] onClick 실행됨', {
+            isFullscreen,
+            isPlaying,
+            eventType: e.type,
+          });
           if (!isFullscreen) {
             handleVideoPlayerClick(e);
           }
         }}
         onMouseDownCapture={(e) => {
+          console.log('🎬 [videoPlayerWrapper] onMouseDownCapture 실행됨', {
+            isFullscreen,
+            isPlaying,
+          });
           if (!isFullscreen && isPlaying) {
             e.preventDefault();
             e.stopPropagation();
-            console.log('[ProductVideoV2] MouseDown at wrapper - capturing');
+            console.log('🎬 [videoPlayerWrapper] MouseDown at wrapper - capturing');
           }
         }}
       >
@@ -490,8 +534,22 @@ export default function ProductVideoV2({
           <div
             ref={normalContainerRef}
             className={css.normalPlayerContainer}
-            onClick={handleVideoPlayerClick}
-            onMouseDownCapture={handleVideoPlayerMouseDown}
+            onClick={(e) => {
+              console.log('🎬 [normalContainerRef] onClick 실행됨', {
+                isPlaying,
+                isFullscreen,
+                eventType: e.type,
+                target: e.target?.className,
+              });
+              handleVideoPlayerClick(e);
+            }}
+            onMouseDownCapture={(e) => {
+              console.log('🎬 [normalContainerRef] onMouseDownCapture 실행됨', {
+                isPlaying,
+                isFullscreen,
+              });
+              handleVideoPlayerMouseDown(e);
+            }}
           >
             {renderVideoPlayer()}
           </div>