[251112] feat: ProductVideoV2 fullScreen ovelay toggle

🕐 커밋 시간: 2025. 11. 12. 17:35:22 📊 변경 통계: • 총 파일: 2개 • 추가: +57줄 • 삭제: -28줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx 🔧 주요 변경 내용: • UI 컴포넌트 아키텍처 개선 • 소규모 기능 개선
2025-11-12 17:35:24 +09:00
parent 1166311e4b
commit b17aa89c28
2 changed files with 97 additions and 52 deletions
--- a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
@@ -65,7 +65,7 @@ const isEnter = is('enter');
 const isLeft = is('left');
 const isRight = is('right');

-const jumpBackKeyCode = 3
+const jumpBackKeyCode = 3;
 const jumpForwardKeyCode = 39;
 const controlsHandleAboveSelectionKeys = [13, 16777221, jumpBackKeyCode, jumpForwardKeyCode];
 const getControlsHandleAboveHoldConfig = ({ frequency, time }) => ({
@@ -706,6 +706,7 @@ const VideoPlayerBase = class extends React.Component {
    reactPlayerConfig: PropTypes.any, //for ReactPlayer
    qrCurrentItem: PropTypes.any,
    modalScale: PropTypes.number,
+    notifyOnClickWhenNotModal: PropTypes.bool,
  };

  static contextType = FloatingLayerContext;
@@ -718,6 +719,7 @@ const VideoPlayerBase = class extends React.Component {
    jumpDelay: 200,
    mediaControlsComponent: MediaControls,
    miniFeedbackHideDelay: 2000,
+    notifyOnClickWhenNotModal: false,
    playbackRateHash: {
      fastForward: ['2', '4', '8', '16'],
      rewind: ['-2', '-4', '-8', '-16'],
@@ -1429,7 +1431,13 @@ const VideoPlayerBase = class extends React.Component {
    }

    // 🎬 실시간 재생상태 로깅
-    if (ev.type === 'onUpdate' || ev.type === 'onPlay' || ev.type === 'onPause' || ev.type === 'onStart' || ev.type === 'onLoadStart') {
+    if (
+      ev.type === 'onUpdate' ||
+      ev.type === 'onPlay' ||
+      ev.type === 'onPause' ||
+      ev.type === 'onStart' ||
+      ev.type === 'onLoadStart'
+    ) {
      console.log('🎬 [MediaPlayer] 재생상태 실시간 로깅', {
        eventType: ev.type,
        currentTime: el.currentTime,
@@ -1933,15 +1941,21 @@ const VideoPlayerBase = class extends React.Component {
  //
  // Player Interaction events
  //
-  onVideoClick = () => {
+  onVideoClick = (ev) => {
    console.log('[MediaPlayer] onVideoClick 호출');

-    // modal 상태일 때 외부 onClick 핸들러가 있으면 호출
-    if (this.props.panelInfo?.modal && this.props.onClick) {
-      console.log('[MediaPlayer] modal에서 onClick 호출');
-      this.props.onClick();
+    const shouldNotify =
+      (this.props.panelInfo?.modal || this.props.notifyOnClickWhenNotModal) &&
+      typeof this.props.onClick === 'function';
+
+    if (shouldNotify) {
+      console.log('[MediaPlayer] 외부 onClick 콜백 호출');
+      this.props.onClick(ev);
+
+      if (this.props.panelInfo?.modal && !this.props.notifyOnClickWhenNotModal) {
        return;
      }
+    }

    // MediaPanel에서는 controls 토글만
    this.toggleControls();
--- 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
@@ -86,6 +86,11 @@ export function ProductVideoV2({
  const fullscreenContainerRef = useRef(null);
  const videoPortalHostRef = useRef(null);

+  const isFullscreenRef = useRef(isFullscreen);
+  useEffect(() => {
+    isFullscreenRef.current = isFullscreen;
+  }, [isFullscreen]);
+
  const ensurePortalHost = useCallback(() => {
    if (!videoPortalHostRef.current && typeof document !== 'undefined') {
      const host = document.createElement('div');
@@ -373,9 +378,18 @@ export function ProductVideoV2({
  // FullScreen 모드에서의 MediaPlayer Click 핸들러
  const handleVideoPlayerClick = useCallback(
    (e) => {
+      const fullscreenNow = isFullscreenRef.current;
+
+      console.log('🎥 [ProductVideoV2] handleVideoPlayerClick 감지됨', {
+        isPlaying,
+        isFullscreen: fullscreenNow,
+        eventType: e?.type,
+        target: e?.target?.className,
+      });
+
      if (!isPlaying) return;

-      if (!isFullscreen) {
+      if (!fullscreenNow) {
        e.preventDefault?.();
        e.stopPropagation?.();
        toggleFullscreen();
@@ -627,6 +641,8 @@ export function ProductVideoV2({
  // VideoContainer의 모든 클릭 감시 (Hooks는 early return 전에 정의되어야 함)
  const handleVideoContainerClick = useCallback(
    (e) => {
+      if (isFullscreen) return;
+
      console.log('🎥 [ProductVideoV2] videoContainer onClick 감지됨', {
        isPlaying,
        isFullscreen,
@@ -638,7 +654,7 @@ export function ProductVideoV2({
        timestamp: new Date().getTime(),
      });

-      if (isPlaying && !isFullscreen) {
+      if (isPlaying) {
        console.log('🎥 [ProductVideoV2] videoContainer 클릭 → 직접 전체화면 토글 실행', {
          direct: true,
        });
@@ -651,20 +667,22 @@ export function ProductVideoV2({
  );

  const containerProps = useMemo(() => {
-    const baseProps = {
+    if (isPlaying && !isFullscreen) {
+      return {
+        onClick: handleVideoContainerClick,
+        spotlightId: 'product-video-v2-playing',
+        onKeyDown: handleContainerKeyDown,
+        onSpotlightDown: handleSpotlightDown,
+      };
+    }
+
+    if (!isFullscreen) {
+      return {
        onClick: handleVideoContainerClick,
      };
-
-    if (isPlaying) {
-      return {
-        ...baseProps,
-        spotlightId: 'product-video-v2-playing',
-        onKeyDown: handleContainerKeyDown, // 일반 모드: 컨테이너에서 직접 처리
-        onSpotlightDown: handleSpotlightDown, // 일반 재생에서도 Down 키 동작
-      };
-    } else {
-      return baseProps;
    }
+
+    return {};
  }, [
    isFullscreen,
    isPlaying,
@@ -676,6 +694,8 @@ export function ProductVideoV2({
  // ⚠️ 간단한 해결책: 비디오 영역 클릭 시 직접 동작 실행
  const handleContainerClickFallback = useCallback(
    (e) => {
+      if (isFullscreen) return;
+
      const isThumbnailArea =
        e.target?.closest('[class*="videoThumbnail"]') ||
        e.target?.closest('[class*="playButton"]');
@@ -683,14 +703,12 @@ export function ProductVideoV2({
      const isVideoPlayerArea =
        e.target?.closest('[class*="videoPlayer"]') || e.target?.closest('[class*="VideoPlayer"]');

-      // 썸네일 클릭: 비디오 재생 시작
      if (isThumbnailArea && !isPlaying) {
        console.log('🎬 [handleContainerClickFallback] 썸네일 클릭 → 비디오 재생 시작');
        handleThumbnailClick(e);
      }

-      // 비디오 재생 중 클릭: 전체화면 토글
-      if (isVideoPlayerArea && isPlaying && !isFullscreen) {
+      if (isVideoPlayerArea && isPlaying) {
        console.log('🎬 [handleContainerClickFallback] 비디오 클릭 → 전체화면 토글');
        toggleFullscreen();
      }
@@ -705,6 +723,8 @@ export function ProductVideoV2({
      // 비디오 영역인지 확인
      const isVideoArea = e.currentTarget === containerRef.current;

+      console.log('####[ProductVideoV2 Container] isFullscreen:', isFullscreen);
+
      console.log('🔓 [ProductVideoV2 Container] onMouseDownCapture - TScrollerDetail 차단 우회', {
        isVideoArea,
        target: e.target?.className,
@@ -773,7 +793,7 @@ export function ProductVideoV2({
        onTouchMove={handleUserActivity}
        onWheel={handleUserActivity}
        onClick={(e) => {
-          console.log('🎬 [videoPlayerWrapper] onClick 실행됨', {
+          console.log('<<<<<<< [videoPlayerWrapper] onClick 실행됨', {
            isFullscreen,
            isPlaying,
            eventType: e.type,
@@ -813,6 +833,7 @@ export function ProductVideoV2({
          onEnded={handleVideoEnded}
          onBackButton={handleBackButton}
          onClick={handleVideoPlayerClick}
+          notifyOnClickWhenNotModal
          noAutoPlay={false}
          noAutoShowMediaControls={!isFullscreen}
          autoCloseTimeout={5000}
@@ -858,8 +879,8 @@ export function ProductVideoV2({
        {...containerProps}
        ref={containerRef}
        className={`${css.videoContainer} ${isFullscreen ? css.hideWhileFullscreen : ''}`}
-        onMouseDownCapture={handleContainerMouseDownCapture}
-        onClick={handleContainerClickFallback}
+        onMouseDownCapture={!isFullscreen ? handleContainerMouseDownCapture : undefined}
+        onClick={!isFullscreen ? handleContainerClickFallback : undefined}
      >
        {!isPlaying ? (
          // 썸네일 + 재생 버튼 표시
@@ -892,7 +913,9 @@ export function ProductVideoV2({
          <div
            ref={normalContainerRef}
            className={css.normalPlayerContainer}
-            onClick={(e) => {
+            onClick={
+              !isFullscreen
+                ? (e) => {
                    console.log('🎬 [normalContainerRef] onClick 실행됨', {
                      isPlaying,
                      isFullscreen,
@@ -900,8 +923,12 @@ export function ProductVideoV2({
                      target: e.target?.className,
                    });
                    handleVideoPlayerClick(e);
-            }}
-            onMouseDownCapture={(e) => {
+                  }
+                : undefined
+            }
+            onMouseDownCapture={
+              !isFullscreen
+                ? (e) => {
                    const isVideoPlayerArea =
                      e.target?.closest('[class*="videoPlayer"]') ||
                      e.target?.closest('[class*="VideoPlayer"]');
@@ -915,11 +942,15 @@ export function ProductVideoV2({

                    if (!isVideoPlayerArea) {
                      e.preventDefault();
-                console.log('🛑 [normalContainerRef] preventDefault - 스크롤 영역에서의 클릭');
+                      console.log(
+                        '🛑 [normalContainerRef] preventDefault - 스크롤 영역에서의 클릭'
+                      );
                    } else {
                      console.log('✅ [normalContainerRef] 이벤트 전파 허용 - VideoPlayer 영역');
                    }
-            }}
+                  }
+                : undefined
+            }
          />
        )}
      </ContainerComponent>