From 27a32bce33aadb756bae4307115205d3df91c8a0 Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Tue, 11 Nov 2025 12:52:00 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20ProductVideoV2=20=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=A0=84=EC=B2=B4=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=ED=86=A0=EA=B8=80=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

- normalContainerRef div에 onClick 및 onMouseDownCapture 핸들러 추가
- videoPlayerWrapper div에 onMouseDownCapture 추가 (capture phase 이벤트 처리)
- CSS에 pointer-events: auto 및 cursor: pointer 추가
- 콘솔 로그 추가로 이벤트 감지 디버깅

이제 비디오 재생 중 클릭 시 엔터 키와 동일하게 전체화면으로 전환됨

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ProductVideo/ProductVideo.module.less     |  4 ++
 .../ProductVideo/ProductVideo.v2.jsx          | 42 +++++++++++++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
index 47b61146..c14be034 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
@@ -88,6 +88,8 @@
   border-radius: 8px;
   overflow: hidden;
   background-color: @COLOR_BLACK;
+  cursor: pointer;
+  pointer-events: auto;
 
   // VideoPlayer가 컨테이너에 꽉 차도록
   :global(.videoPlayer) {
@@ -137,6 +139,8 @@
 .normalPlayerContainer {
   width: 100%;
   height: 100%;
+  cursor: pointer;
+  pointer-events: auto;
 }
 
 // 전체화면 container (Portal, body에 항상 존재)
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 dfc4b594..6b2f7b01 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
@@ -262,13 +262,31 @@ export default function ProductVideoV2({
       // 비디오 재생 중이고 전체화면이 아닐 때만 작동
       if (!isPlaying || isFullscreen) return;
 
-      e.preventDefault();
-      e.stopPropagation();
+      // 이벤트 전파 중단 (capture phase에서도 중단)
+      e.preventDefault?.();
+      e.stopPropagation?.();
+
+      console.log('[ProductVideoV2] Click detected - toggling fullscreen');
       toggleFullscreen();
     },
     [isPlaying, isFullscreen, toggleFullscreen]
   );
 
+  // 마우스 다운 (클릭) 이벤트 - capture phase에서 처리
+  const handleVideoPlayerMouseDown = useCallback(
+    (e) => {
+      // 비디오 재생 중이고 전체화면이 아닐 때만 작동
+      if (!isPlaying || isFullscreen) return;
+
+      // capture phase에서 이벤트 처리
+      e.preventDefault();
+      e.stopPropagation();
+
+      console.log('[ProductVideoV2] MouseDown detected at capture phase');
+    },
+    [isPlaying, isFullscreen]
+  );
+
   // 전체화면 모드용 키보드 이벤트 핸들러 (window 레벨)
   const handleFullscreenKeyDown = useCallback(
     (e) => {
@@ -383,7 +401,18 @@ export default function ProductVideoV2({
         onMouseMove={handleUserActivity}
         onTouchMove={handleUserActivity}
         onWheel={handleUserActivity}
-        onClick={!isFullscreen ? handleVideoPlayerClick : undefined}
+        onClick={(e) => {
+          if (!isFullscreen) {
+            handleVideoPlayerClick(e);
+          }
+        }}
+        onMouseDownCapture={(e) => {
+          if (!isFullscreen && isPlaying) {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('[ProductVideoV2] MouseDown at wrapper - capturing');
+          }
+        }}
       >
         <VideoPlayer
           setApiProvider={getPlayer}
@@ -458,7 +487,12 @@ export default function ProductVideoV2({
           </SpottableComponent>
         ) : !isFullscreen ? (
           // 일반 재생 모드: VideoPlayer를 직접 렌더링
-          <div ref={normalContainerRef} className={css.normalPlayerContainer}>
+          <div
+            ref={normalContainerRef}
+            className={css.normalPlayerContainer}
+            onClick={handleVideoPlayerClick}
+            onMouseDownCapture={handleVideoPlayerMouseDown}
+          >
             {renderVideoPlayer()}
           </div>
         ) : null}