[251027] fix: MediaPanel Overlay제거

🕐 커밋 시간: 2025. 10. 27. 10:56:52

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선

com.twin.app.shoptime/src/actions/playActions.js

@@ -132,7 +132,7 @@ export const startVideoPlayerNew =
 
 export const finishVideoPreview = () => (dispatch, getState) => {
   const panels = getState().panels.panels;
-  const topPanel = panels[panels.length - 1];
+  const topPanel = panels[panels.length-1];
   if (topPanel && topPanel.name === panel_names.PLAYER_PANEL && topPanel.panelInfo.modal) {
     if (startVideoFocusTimer) {
       clearTimeout(startVideoFocusTimer);

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

@@ -160,13 +160,18 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     }
   }, [panelInfo, isOnTop]);
 
-  // 비디오 클릭 시 modal → fullscreen 전환
+  // 비디오 클릭 시 modal → fullscreen 전환 또는 controls 토글
   const onVideoClick = useCallback(() => {
     if (panelInfo.modal) {
       // console.log('[MediaPanel] Video clicked - switching to fullscreen');
       dispatch(switchMediaToFullscreen());
+    } else {
+      // 비디오 클릭 시 controls 숨기기 (overlay들이 사라지도록)
+      if (videoPlayer.current && typeof videoPlayer.current.toggleControls === 'function') {
+        videoPlayer.current.toggleControls();
+      }
     }
-  }, [dispatch, panelInfo.modal]);
+  }, [dispatch, panelInfo.modal, videoPlayer]);
 
   const onClickBack = useCallback(
     (ev) => {
@@ -354,6 +359,7 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
             disabled={panelInfo.modal}
             onEnded={onEnded}
             noAutoPlay={false}
+            noAutoShowMediaControls={panelInfo.modal} // modal 상태에서는 자동으로 controls를 보여주지 않음
             autoCloseTimeout={3000}
             onBackButton={onClickBack}
             onClick={onVideoClick}