[251111] fix: MediaPlayer OverlayState-1

🕐 커밋 시간: 2025. 11. 11. 17:17:07

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

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

🔧 주요 변경 내용:
  • 소규모 기능 개선

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}
         >
           <div
             ref={fullscreenContainerRef}

com.twin.app.shoptime/src/views/MainView/MainView.jsx

@@ -79,6 +79,9 @@ import UserReviewPanel from '../UserReview/UserReviewPanel';
 import WelcomeEventPanel from '../WelcomeEventPanel/WelcomeEventPanel';
 import css from './MainView.module.less';
 
+// DEBUG_MODE 상수 - true일 때만 console.log 출력
+const DEBUG_MODE = false;
+
 const preloadImages = [
   LoadingPreloadImage,
   LoadingAnimation,
@@ -160,7 +163,7 @@ export default function MainView({ className, initService }) {
   const [imagePreloaded, setImagePreloaded] = useState(false);
   const [ariaHidden, setAriaHidden] = useState(false);
   const [showEndOfServicePopup, setShowEndOfServicePopup] = useState(false);
-
+  
   const topPanel = panels[panels.length - 1];
 
   // BUYNOW_CONFIG 초기화 (마운트 시 한 번만 실행)
@@ -201,13 +204,17 @@ export default function MainView({ className, initService }) {
       const topPanel = panels[panels.length - 1];
 
       // 단독 패널 체크 - CheckOutPanel, CartPanel 등 단독으로 렌더링되어야 하는 패널들
-      console.log(`[MainView] 🔍 Top panel name: ${topPanel?.name}`);
+      if (DEBUG_MODE) {
-      console.log(`[MainView] 🔍 isStandalonePanel check:`, isStandalonePanel(topPanel?.name));
+        console.log(`[MainView] 🔍 Top panel name: ${topPanel?.name}`);
-      console.log(`[MainView] 🔍 STANDALONE_PANELS:`, STANDALONE_PANELS);
+        console.log(`[MainView] 🔍 isStandalonePanel check:`, isStandalonePanel(topPanel?.name));
-      console.log(`[MainView] 🔍 All panels:`, panels.map(p => ({ name: p.name, hasModal: !!p.panelInfo?.modal })));
+        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(
+          if (DEBUG_MODE) {
-            '[MainView] Rendering 3-layer structure: PlayerPanel + DetailPanel + MediaPanel'
+            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());
     }

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