[251212] fix: FeaturedBrandsPanel Debugging - 1

🕐 커밋 시간: 2025. 12. 12. 17:12:43 📊 변경 통계: • 총 파일: 5개 • 추가: +145줄 • 삭제: -13줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/panelActions.js ~ com.twin.app.shoptime/src/actions/playActions.js ~ com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • 중간 규모 기능 개선
2025-12-12 17:12:43 +09:00
parent 1ee664e8c1
commit f62ccef420
5 changed files with 145 additions and 13 deletions
--- a/com.twin.app.shoptime/src/actions/panelActions.js
+++ b/com.twin.app.shoptime/src/actions/panelActions.js
@@ -93,6 +93,11 @@ export const navigateToDetail = ({
      ...additionalInfo,
    };

+    const state = getState();
+    const panels = state.panels.panels;
+
+    
+
    // 선택적 파라미터들 추가
    if (curationId) panelInfo.curationId = curationId;
    if (nowShelf) panelInfo.nowShelf = nowShelf;
@@ -176,8 +181,21 @@ export const navigateToDetail = ({

        const isCurrentBannerVideoPlaying = playerPanelInfo.panelInfo?.modal !== false;

+        console.log('[Detail-BG] 🎯 navigateToDetail - Checking HomeBanner video status:', {
+          playerPanelModalValue: playerPanelInfo.panelInfo?.modal,
+          isCurrentBannerVideoPlaying,
+          sourceMenu,
+          timestamp: Date.now(),
+        });
+
        // HomeBanner의 modal=true 비디오가 재생 중이면 정지
        if (isCurrentBannerVideoPlaying) {
+          console.log('[Detail-BG] 🎬 navigateToDetail - HomeBanner video is playing (modal !== false)', {
+            playerPanelModal: playerPanelInfo.panelInfo?.modal,
+            sourceMenu,
+            action: 'finishVideoPreview',
+            timestamp: Date.now(),
+          });
          // 🔽 비디오 상태 저장 후 정지
          const { finishVideoPreview } = require('./playActions');

@@ -204,11 +222,15 @@ export const navigateToDetail = ({
            })
          );

-          // 비디오 상태 저장 후 정지 (로그는 개발 시 필요 시 주석 해제)
-
+          // 비디오 상태 저장 후 정지
          dispatch(finishVideoPreview());
        } else {
          // 비디오가 재생 중이 아니어도 HomePanel 상태 저장
+          console.log('[Detail-BG] ⏭️  navigateToDetail - HomeBanner video is NOT playing (modal === false or undefined)', {
+            playerPanelModal: playerPanelInfo.panelInfo?.modal,
+            sourceMenu,
+            timestamp: Date.now(),
+          });
          dispatch(
            updatePanel({
              name: panel_names.HOME_PANEL,
@@ -458,11 +480,28 @@ export const restoreVideoOnBack = () => {
    const homePanel = panels.find((p) => p.name === panel_names.HOME_PANEL);
    const videoStateToRestore = homePanel?.panelInfo?.videoStateToRestore;

+    console.log('[Detail-BG] 🔍 restoreVideoOnBack - Checking video restore state:', {
+      hasVideoStateToRestore: !!videoStateToRestore,
+      restoreOnBack: videoStateToRestore?.restoreOnBack,
+      sourceMenu: videoStateToRestore?.sourceMenu,
+      timestamp: Date.now(),
+    });
+
    if (!videoStateToRestore || !videoStateToRestore.restoreOnBack) {
+      console.log('[Detail-BG] ⏭️  restoreVideoOnBack - No video state to restore (skipping)', {
+        reason: !videoStateToRestore ? 'no videoStateToRestore' : 'restoreOnBack is false',
+        timestamp: Date.now(),
+      });
      return;
    }

-    // 비디오 복원 시작 (로그는 개발 시 필요 시 주석 해제)
+    console.log('[Detail-BG] ▶️  restoreVideoOnBack - Starting video restore', {
+      sourceMenu: videoStateToRestore.sourceMenu,
+      patnrId: videoStateToRestore.patnrId,
+      showId: videoStateToRestore.showId,
+      modal: true,
+      timestamp: Date.now(),
+    });

    // 비디오 상태 복원
    const { startVideoPlayerNew } = require('./playActions');
@@ -489,6 +528,11 @@ export const restoreVideoOnBack = () => {
      })
    );

+    console.log('[Detail-BG] ✅ restoreVideoOnBack - Video restore dispatched', {
+      restoredWithModal: restoreInfo.modal,
+      timestamp: Date.now(),
+    });
+
    // 복원 상태 정리
    dispatch(
      updatePanel({
--- a/com.twin.app.shoptime/src/actions/playActions.js
+++ b/com.twin.app.shoptime/src/actions/playActions.js
@@ -384,6 +384,13 @@ export const pauseModalVideo = () => (dispatch, getState) => {
    (panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal
  );

+  console.log('[Detail-BG] ⏸️  pauseModalVideo - Pausing modal video', {
+    found: !!modalPlayerPanel,
+    playerPanelModal: modalPlayerPanel?.panelInfo?.modal,
+    currentIsPaused: modalPlayerPanel?.panelInfo?.isPaused,
+    timestamp: Date.now(),
+  });
+
  if (modalPlayerPanel) {
    if (DEBUG_MODE === true) {
      dlog('[pauseModalVideo] Pausing modal video');
@@ -397,6 +404,14 @@ export const pauseModalVideo = () => (dispatch, getState) => {
        },
      })
    );
+
+    console.log('[Detail-BG] ✅ pauseModalVideo - Modal video paused successfully', {
+      timestamp: Date.now(),
+    });
+  } else {
+    console.log('[Detail-BG] ⚠️  pauseModalVideo - No modal PlayerPanel found', {
+      timestamp: Date.now(),
+    });
  }
 };

@@ -409,6 +424,13 @@ export const resumeModalVideo = () => (dispatch, getState) => {
    (panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal
  );

+  console.log('[Detail-BG] ▶️  resumeModalVideo - Resuming modal video', {
+    found: !!modalPlayerPanel,
+    playerPanelModal: modalPlayerPanel?.panelInfo?.modal,
+    currentIsPaused: modalPlayerPanel?.panelInfo?.isPaused,
+    timestamp: Date.now(),
+  });
+
  if (modalPlayerPanel && modalPlayerPanel.panelInfo?.isPaused) {
    if (DEBUG_MODE === true) {
      dlog('[resumeModalVideo] Resuming modal video');
@@ -422,6 +444,16 @@ export const resumeModalVideo = () => (dispatch, getState) => {
        },
      })
    );
+
+    console.log('[Detail-BG] ✅ resumeModalVideo - Modal video resumed successfully', {
+      timestamp: Date.now(),
+    });
+  } else {
+    console.log('[Detail-BG] ⚠️  resumeModalVideo - Modal video not paused or panel not found', {
+      found: !!modalPlayerPanel,
+      isPaused: modalPlayerPanel?.panelInfo?.isPaused,
+      timestamp: Date.now(),
+    });
  }
 };

@@ -434,6 +466,13 @@ export const pauseFullscreenVideo = () => (dispatch, getState) => {
    (panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal
  );

+  console.log('[Detail-BG] ⏸️  pauseFullscreenVideo - Pausing fullscreen video', {
+    found: !!fullscreenPlayerPanel,
+    playerPanelModal: fullscreenPlayerPanel?.panelInfo?.modal,
+    currentIsPaused: fullscreenPlayerPanel?.panelInfo?.isPaused,
+    timestamp: Date.now(),
+  });
+
  if (fullscreenPlayerPanel) {
    dispatch(
      updatePanel({
@@ -444,6 +483,14 @@ export const pauseFullscreenVideo = () => (dispatch, getState) => {
        },
      })
    );
+
+    console.log('[Detail-BG] ✅ pauseFullscreenVideo - Fullscreen video paused successfully', {
+      timestamp: Date.now(),
+    });
+  } else {
+    console.log('[Detail-BG] ⚠️  pauseFullscreenVideo - No fullscreen PlayerPanel found', {
+      timestamp: Date.now(),
+    });
  }
 };

@@ -451,21 +498,19 @@ export const pauseFullscreenVideo = () => (dispatch, getState) => {
 export const resumeFullscreenVideo = () => (dispatch, getState) => {
  const panels = getState().panels.panels;

-  // console.log('[BgVideo] resumeFullscreenVideo called - panels:', {
-  //   panelsCount: panels?.length,
-  //   panels: panels?.map(p => ({ name: p.name, modal: p.panelInfo?.modal, isPaused: p.panelInfo?.isPaused }))
-  // });
-
  // 전체화면 PlayerPanel 찾기 (modal이 false인 패널)
  const fullscreenPlayerPanel = panels.find(
    (panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal
  );

-  // console.log('[BgVideo] resumeFullscreenVideo - fullscreenPlayerPanel found:', !!fullscreenPlayerPanel);
-  // console.log('[BgVideo] resumeFullscreenVideo - isPaused:', fullscreenPlayerPanel?.panelInfo?.isPaused);
+  console.log('[Detail-BG] ▶️  resumeFullscreenVideo - Resuming fullscreen video', {
+    found: !!fullscreenPlayerPanel,
+    playerPanelModal: fullscreenPlayerPanel?.panelInfo?.modal,
+    currentIsPaused: fullscreenPlayerPanel?.panelInfo?.isPaused,
+    timestamp: Date.now(),
+  });

  if (fullscreenPlayerPanel && fullscreenPlayerPanel.panelInfo?.isPaused) {
-    // console.log('[BgVideo] resumeFullscreenVideo - dispatching updatePanel with isPaused: false');
    dispatch(
      updatePanel({
        name: panel_names.PLAYER_PANEL,
@@ -475,7 +520,16 @@ export const resumeFullscreenVideo = () => (dispatch, getState) => {
        },
      })
    );
+
+    console.log('[Detail-BG] ✅ resumeFullscreenVideo - Fullscreen video resumed successfully', {
+      timestamp: Date.now(),
+    });
  } else {
+    console.log('[Detail-BG] ⚠️  resumeFullscreenVideo - Fullscreen video not paused or panel not found', {
+      found: !!fullscreenPlayerPanel,
+      isPaused: fullscreenPlayerPanel?.panelInfo?.isPaused,
+      timestamp: Date.now(),
+    });
    if (DEBUG_MODE === true) {
      dlog('[BgVideo] resumeFullscreenVideo - Not resuming (not found or not paused)');
    }
@@ -951,6 +1005,12 @@ export const resumePlayerControl = (ownerId) => (dispatch, getState) => {
 * 이 액션은 어떤 배너에서든 클릭 시 호출됩니다.
 */
 export const goToFullScreen = () => (dispatch, getState) => {
+  console.log('[Detail-BG] 🎬 goToFullScreen - Setting PlayerPanel to fullscreen mode', {
+    targetModal: false,
+    action: 'updatePanel',
+    timestamp: Date.now(),
+  });
+
  // 공유 PlayerPanel의 'modal' 상태를 false로 변경하여 전체화면으로 전환
  dispatch(
    updatePanel({
@@ -961,6 +1021,10 @@ export const goToFullScreen = () => (dispatch, getState) => {
      },
    })
  );
+
+  console.log('[Detail-BG] ✅ goToFullScreen - PlayerPanel modal set to false (fullscreen)', {
+    timestamp: Date.now(),
+  });
 };

 /**
@@ -1171,6 +1235,14 @@ export const startBannerVideo = (videoInfo) => (dispatch, getState) => {
    ...rest
  } = videoInfo;

+  console.log('[Detail-BG] 🎥 startBannerVideo - Starting banner video', {
+    modalStatus: modal,
+    bannerId,
+    displayMode: modal ? 'VISIBLE (modal=true)' : 'FULLSCREEN (modal=false)',
+    videoId,
+    timestamp: Date.now(),
+  });
+
  // 비디오 식별자 생성
  const videoIdentifier = videoId || showUrl || bannerId;
  if (videoIdentifier) {
@@ -1190,11 +1262,21 @@ export const startBannerVideo = (videoInfo) => (dispatch, getState) => {
  // 기존 PlayerPanel이 있으면 초기화
  if (existingPlayerPanel) {
    dlog('[startBannerVideo] 🔄 Resetting existing PLAYER_PANEL before start');
+    console.log('[Detail-BG] 🔄 startBannerVideo - Clearing existing PlayerPanel', {
+      existingModalStatus: existingPlayerPanel.panelInfo?.modal,
+      timestamp: Date.now(),
+    });
    clearAllVideoTimers();
    dispatch(popPanel(panel_names.PLAYER_PANEL));
  }

  // 새로운 PlayerPanel push
+  console.log('[Detail-BG] ➕ startBannerVideo - Pushing new PlayerPanel with modal status', {
+    modal,
+    modalContainerId,
+    timestamp: Date.now(),
+  });
+
  dispatch(
    pushPanel(
      {
@@ -1216,6 +1298,10 @@ export const startBannerVideo = (videoInfo) => (dispatch, getState) => {
    )
  );

+  console.log('[Detail-BG] ✅ startBannerVideo - PlayerPanel pushed with modal=' + modal, {
+    timestamp: Date.now(),
+  });
+
  dlog('[startBannerVideo] ✨ Panel action dispatched');
 };

--- a/com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js
+++ b/com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js
@@ -16,7 +16,7 @@ import { calculateIsPanelOnTop } from '../utils/panelUtils'; // 🎯 isOnTop 유

 // DEBUG_MODE - true인 경우에만 로그 출력
 // ⚠️ [251122] panelHistory 로그 비활성화 - 로그 생성 차단
-const DEBUG_MODE = false;
+const DEBUG_MODE = true;

 /**
 * Panel history middleware
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -303,6 +303,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
      const sourcePanel = panelInfo?.sourcePanel;
      const sourceMenu = panelInfo?.sourceMenu;

+      console.log('[Detail-BG] 306-line sourcePanel:', sourcePanel, 'sourceMenu:', sourceMenu);
+
      // DetailPanel이 unmount되는 시점
      console.log('[DetailPanel] unmount:', {
        sourcePanel,
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
@@ -292,7 +292,7 @@ export default function ShopNowContents({

        // ===== navigateToDetail 방식 (handleYouMayLikeItemClick 참고) =====
        console.log(
-          "[ShopNowContents] ShopNow DetailPanel 진입 - sourceMenu:",
+          "[DetailPanel-BG][ShopNowContents] ShopNow DetailPanel 진입 - sourceMenu:",
          SOURCE_MENUS.PLAYER_SHOP_NOW
        );