[251118] fix: HomePanel return from DetailPanel video playing-1

🕐 커밋 시간: 2025. 11. 18. 10:53:59 📊 변경 통계: • 총 파일: 3개 • 추가: +66줄 • 삭제: -39줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/panelActions.js ~ com.twin.app.shoptime/src/actions/playActions.js ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • 소규모 기능 개선 • 코드 정리 및 최적화
2025-11-18 10:53:59 +09:00
parent 508e9e1042
commit 4778805dbf
3 changed files with 66 additions and 39 deletions
--- a/com.twin.app.shoptime/src/actions/panelActions.js
+++ b/com.twin.app.shoptime/src/actions/panelActions.js
@@ -396,6 +396,7 @@ export const restoreVideoOnBack = () => {
      bannerId: videoStateToRestore.bannerId || videoStateToRestore.playerState?.currentBannerId,
      patnrId: videoStateToRestore.patnrId,
      showId: videoStateToRestore.showId,
+      showUrl: videoStateToRestore.showUrl,
      shptmBanrTpNm: videoStateToRestore.shptmBanrTpNm,
      lgCatCd: videoStateToRestore.lgCatCd,
      modal: true, // HomeBanner는 항상 modal
--- a/com.twin.app.shoptime/src/actions/playActions.js
+++ b/com.twin.app.shoptime/src/actions/playActions.js
@@ -160,16 +160,16 @@ export const startVideoPlayerNew =
    ...rest
  }) =>
  (dispatch, getState) => {
-    console.log('[startVideoPlayerNew] ✅ START - bannerId:', bannerId, ', videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal);
+    console.log('[startVideoPlayerNew] *** ✅ START - bannerId:', bannerId, ', videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal);

    // 🔽 [251116] 즉시 로딩 상태 설정
    const videoIdentifier = videoId || showUrl || bannerId;
    if (videoIdentifier) {
      const displayMode = modal ? DISPLAY_STATUS.VISIBLE : DISPLAY_STATUS.FULLSCREEN;
-      console.log('[startVideoPlayerNew] 📌 Setting playback loading - identifier:', videoIdentifier, ', displayMode:', displayMode);
+      console.log('[startVideoPlayerNew] *** 📌 Setting playback loading - identifier:', videoIdentifier, ', displayMode:', displayMode);
      dispatch(setPlaybackLoading(videoIdentifier, displayMode));
    } else {
-      console.log('[startVideoPlayerNew] ⚠️ No videoIdentifier provided');
+      console.log('[startVideoPlayerNew] *** ⚠️ No videoIdentifier provided');
    }

    const panels = getState().panels.panels;
@@ -178,10 +178,11 @@ export const startVideoPlayerNew =

    // const panelName = useNewPlayer ? panel_names.PLAYER_PANEL_NEW : panel_names.PLAYER_PANEL;
    const panelName = panel_names.PLAYER_PANEL;
-    console.log('[startVideoPlayerNew] 📊 Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name);
+    console.log('[startVideoPlayerNew] *** 📊 Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name);

    if (topPanel && topPanel.name === panelName) {
      panelWorkingAction = updatePanel;
+      console.log('[startVideoPlayerNew] *** 📋 Current PLAYER_PANEL panelInfo:', topPanel.panelInfo);
    }

    // 중복 실행 방지: 같은 배너 + 같은 modal 상태/컨테이너면 skip
@@ -191,10 +192,10 @@ export const startVideoPlayerNew =
    const isSameModalType = currentPanelInfo.modal === modal;
    const isSameContainer = currentPanelInfo.modalContainerId === modalContainerId;

-    console.log('[startVideoPlayerNew] 🔍 Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer);
+    console.log('[startVideoPlayerNew] *** 🔍 Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer);

    if (isSameBanner && isSameModalType && isSameContainer) {
-      console.log('[startVideoPlayerNew] ⏭️ SKIPPED - 동일한 요청', {
+      console.log('[startVideoPlayerNew] *** ⏭️ SKIPPED - 동일한 요청', {
        bannerId,
        modal,
        modalContainerId,
@@ -206,7 +207,7 @@ export const startVideoPlayerNew =
      ...currentPlayerState,
      currentBannerId: bannerId,
    };
-    console.log('[startVideoPlayerNew] 🔄 Player state updated - currentBannerId:', bannerId);
+    console.log('[startVideoPlayerNew] *** 🔄 Player state updated - currentBannerId:', bannerId);

    dispatch(
      panelWorkingAction(
@@ -226,20 +227,20 @@ export const startVideoPlayerNew =
        true
      )
    );
-    console.log('[startVideoPlayerNew] ✨ Panel action dispatched - action:', panelWorkingAction === updatePanel ? 'updatePanel' : 'pushPanel');
+    console.log('[startVideoPlayerNew] *** ✨ Panel action dispatched - action:', panelWorkingAction === updatePanel ? 'updatePanel' : 'pushPanel');

    if (modal && modalContainerId && !spotlightDisable) {
-      console.log('[startVideoPlayerNew] 🎯 Setting Spotlight focus - containerId:', modalContainerId);
+      console.log('[startVideoPlayerNew] *** 🎯 Setting Spotlight focus - containerId:', modalContainerId);
      Spotlight.setPointerMode(false);
      startVideoFocusTimer = setTimeout(() => {
-        console.log('[startVideoPlayerNew] 🔍 Spotlight.focus called');
+        console.log('[startVideoPlayerNew] *** 🔍 Spotlight.focus called');
        Spotlight.focus(modalContainerId);
      }, 0);
    } else {
-      console.log('[startVideoPlayerNew] ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable);
+      console.log('[startVideoPlayerNew] *** ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable);
    }

-    console.log('[startVideoPlayerNew] ✅ END');
+    console.log('[startVideoPlayerNew] *** ✅ END');
  };

 export const finishVideoPreview = () => (dispatch, getState) => {
@@ -451,7 +452,9 @@ export const hideModalVideo = () => (dispatch, getState) => {

 // 축소된 모달 비디오를 원래 크기로 복구
 export const showModalVideo = () => (dispatch, getState) => {
+  console.log('[showModalVideo] *** ✅ START');
  const panels = getState().panels.panels;
+  console.log('[showModalVideo] *** 📊 Total panels count:', panels.length);

  // 축소된 modal PlayerPanel 찾기
  const shrunkModalPlayerPanel = panels.find(
@@ -461,30 +464,35 @@ export const showModalVideo = () => (dispatch, getState) => {
      panel.panelInfo?.shouldShrinkTo1px
  );

+  console.log('[showModalVideo] *** 🔍 Shrunk modal PlayerPanel found:', !!shrunkModalPlayerPanel);
+
  if (shrunkModalPlayerPanel) {
    const panelInfo = shrunkModalPlayerPanel.panelInfo;
    const shrinkInfo = panelInfo.playerState?.shrinkInfo;

-    // console.log('[HomePanel] showModalVideo: expanding video', {
-    //   hasShrinkInfo: !!shrinkInfo,
-    //   hasModalStyle: !!shrinkInfo?.modalStyle,
-    //   hasModalContainerId: !!shrinkInfo?.modalContainerId,
-    // });
+    console.log('[showModalVideo] *** 📋 ShrinkInfo available:', !!shrinkInfo);
+    console.log('[showModalVideo] *** 📋 Current panelInfo state:', {
+      shouldShrinkTo1px: panelInfo.shouldShrinkTo1px,
+      modal: panelInfo.modal,
+      modalContainerId: panelInfo.modalContainerId,
+      hasModalStyle: !!panelInfo.modalStyle,
+    });

    const updatedPanelInfo = {
      ...panelInfo,
      shouldShrinkTo1px: false, // 축소 플래그 해제
-      skipModalStyleRecalculation: true, // ← 복구 과정에서 DOM 재계산 스킵
-      // 저장된 정보로 복구
+      // 저장된 정보로 복구 (하지만 DOM 재계산은 허용)
      ...(shrinkInfo && {
        modalContainerId: shrinkInfo.modalContainerId,
        modalClassName: shrinkInfo.modalClassName,
        modalStyle: shrinkInfo.modalStyle,
        modalScale: shrinkInfo.modalScale,
      }),
+      skipModalStyleRecalculation: false, // 위치 변경 시 DOM 기준으로 다시 계산하도록 허용
    };

-    // console.log('[HomePanel] showModalVideo: updated panelInfo shouldShrinkTo1px=false, modalStyle restored, skipModalStyleRecalculation=true');
+    console.log('[showModalVideo] *** 🔄 Updated panelInfo - shouldShrinkTo1px:', updatedPanelInfo.shouldShrinkTo1px);
+    console.log('[showModalVideo] *** 📍 Restored modalStyle:', updatedPanelInfo.modalStyle);

    dispatch(
      updatePanel({
@@ -492,8 +500,9 @@ export const showModalVideo = () => (dispatch, getState) => {
        panelInfo: updatedPanelInfo,
      })
    );
+    console.log('[showModalVideo] *** ✨ updatePanel dispatched');
  } else {
-    console.log('[HomePanel] showModalVideo: No shrunk modal PlayerPanel found', {
+    console.log('[showModalVideo] *** ⚠️ No shrunk modal PlayerPanel found', {
      panels: panels.map((p) => ({
        name: p.name,
        modal: p.panelInfo?.modal,
@@ -501,6 +510,8 @@ export const showModalVideo = () => (dispatch, getState) => {
      })),
    });
  }
+
+  console.log('[showModalVideo] *** ✅ END');
 };

 // 🔽 패널은 유지하고 비디오만 중지하는 함수들
--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
@@ -754,26 +754,41 @@ const HomePanel = ({ isOnTop }) => {

  useEffect(() => {
    if (detailPanelClosedTime && isOnTop) {
-      console.log('[HomePanel] ✅ DetailPanel 닫힘 감지됨!');
-      console.log('[HomePanel] lastDetailPanelClosed:', detailPanelClosedTime);
-      console.log('[HomePanel] isOnTop:', isOnTop);
-      console.log('[HomePanel] videoPlayIntentRef.current:', videoPlayIntentRef.current);
-      console.log('[HomePanel] lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current);
+      console.log('[HomePanel] *** ✅ DetailPanel 닫힘 감지됨!');
+      console.log('[HomePanel] *** lastDetailPanelClosed:', detailPanelClosedTime);
+      console.log('[HomePanel] *** isOnTop:', isOnTop);
+      console.log('[HomePanel] *** videoPlayIntentRef.current:', videoPlayIntentRef.current);
+      console.log('[HomePanel] *** lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current);

      // [TODO] DetailPanel 닫힘 후 비디오 자동 재생 복구
      if (videoPlayIntentRef.current && lastPlayedBannerIdRef.current) {
-        dispatch(startVideoPlayerNew({
+        // 🔽 videoPlayIntentRef는 videoProps에 비디오 정보를 담고 있으므로 풀어서 전달
+        //     혹시 videoProps에 없는 필드는 상위 레벨을 fallback으로 사용
+        const intent = videoPlayIntentRef.current;
+        const videoProps = intent.videoProps || {};
+
+        // 🔽 [251118] 현재 스크롤 위치 확인하여 비디오 크기 결정
+        const currentScrollTop = prevScrollTopRef.current;
+        const shouldShrink = currentScrollTop > 1;
+        console.log('[HomePanel] *** 비디오 복구 - currentScrollTop:', currentScrollTop, ', shouldShrink:', shouldShrink);
+
+        dispatch(
+          startVideoPlayerNew({
+            ...videoProps,
            modal: true,
-          modalContainerId: 'home-video-modal',
-          modalClassName: 'home-video-modal',
+            modalContainerId: videoProps.modalContainerId || 'home-video-modal',
+            modalClassName: videoProps.modalClassName || 'home-video-modal',
+            spotlightDisable: true, // 자동 복구 시 스크롤 이동 막기 위해 포커스 이동 금지
            bannerId: lastPlayedBannerIdRef.current,
-          videoId: videoPlayIntentRef.current.videoId,
-          showUrl: videoPlayIntentRef.current.showUrl,
-          patnrId: videoPlayIntentRef.current.patnrId,
-          showId: videoPlayIntentRef.current.showId,
-          shptmBanrTpNm: videoPlayIntentRef.current.shptmBanrTpNm,
-          lgCatCd: videoPlayIntentRef.current.lgCatCd,
-        }));
+            videoId: videoProps.videoId || intent.videoId,
+            showUrl: videoProps.showUrl || intent.showUrl,
+            patnrId: videoProps.patnrId || intent.patnrId,
+            showId: videoProps.showId || intent.showId,
+            shptmBanrTpNm: videoProps.shptmBanrTpNm || intent.shptmBanrTpNm,
+            lgCatCd: videoProps.lgCatCd || intent.lgCatCd,
+            shouldShrinkTo1px: shouldShrink, // 스크롤 위치에 따라 설정
+          })
+        );

        // refs 초기화
        videoPlayIntentRef.current = null;