[251118] feat: playActions 함수 추가

🕐 커밋 시간: 2025. 11. 18. 05:08:17

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +245줄
  • 삭제: -22줄

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

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 대규모 기능 개발

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

@@ -29,9 +29,9 @@ import { getSubCategory, getTop20Show } from '../../actions/mainActions';
 import { getHomeOnSaleInfo } from '../../actions/onSaleActions';
 import { updatePanel } from '../../actions/panelActions';
 import {
-  expandVideoFrom1px,
+  showModalVideo,
   finishVideoPreview,
-  shrinkVideoTo1px,
+  hideModalVideo,
   startVideoPlayerNew,
 } from '../../actions/playActions';
 import { getBestSeller } from '../../actions/productActions';
@@ -497,7 +497,7 @@ const HomePanel = ({ isOnTop }) => {
             }
 
             // console.log('[HomePanel] Expansion attempt', expandAttemptRef.current + 1);
-            dispatch(expandVideoFrom1px());
+            dispatch(showModalVideo());
             expandAttemptRef.current++;
           }, 200);
         }
@@ -514,7 +514,7 @@ const HomePanel = ({ isOnTop }) => {
         // 아래로 스크롤: 비디오를 1px로 축소
         // console.log('[HomePanel] Scrolling down - shrinking video');
         if (!isVideoTransitionLocked) {
-          dispatch(shrinkVideoTo1px());
+          dispatch(hideModalVideo());
         }
         // 기존 타이머 취소
         if (scrollExpandTimerRef.current) {
@@ -533,7 +533,7 @@ const HomePanel = ({ isOnTop }) => {
         // 1초 후 자동으로 크기 조정
         scrollExpandTimerRef.current = setTimeout(() => {
           // console.log('[HomePanel] 1s passed - auto expanding video');
-          dispatch(expandVideoFrom1px());
+          dispatch(showModalVideo());
           scrollExpandTimerRef.current = null;
         }, 1000);
       }
@@ -705,6 +705,22 @@ const HomePanel = ({ isOnTop }) => {
       panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal }))
     );
 
+    // ✅ [251118] 현재 재생 중인 비디오 정보 상세 로그
+    const playerPanel = panels.find((p) => p.name === panel_names.PLAYER_PANEL);
+    if (playerPanel) {
+      console.log('[HomeActive] 🎬 PlayerPanel 정보:', {
+        modal: playerPanel.panelInfo?.modal,
+        shouldShrinkTo1px: playerPanel.panelInfo?.shouldShrinkTo1px,
+        currentBannerId: playerPanel.panelInfo?.playerState?.currentBannerId,
+        bannerId: playerPanel.panelInfo?.bannerId,
+        showUrl: playerPanel.panelInfo?.showUrl?.substring(0, 50),
+        patnrId: playerPanel.panelInfo?.patnrId,
+        showId: playerPanel.panelInfo?.showId,
+      });
+    } else {
+      console.log('[HomeActive] ❌ PlayerPanel을 찾을 수 없음');
+    }
+
     const isHomePanelActive = isOnTop;
     console.log('[HomeActive] isHomePanelActive:', isHomePanelActive);
 
@@ -756,7 +772,7 @@ const HomePanel = ({ isOnTop }) => {
     // 재생 기록 업데이트
     lastPlayedBannerIdRef.current = bannerId;
     console.log('[HomeActive] 재생 기록 업데이트:', bannerId);
-  }, [isOnTop, dispatch]);
+  }, [isOnTop, dispatch, panels]);
 
   // ✅ [251118] DetailPanel 닫힘 감지 useEffect
   const detailPanelClosedTime = useSelector(
@@ -770,8 +786,99 @@ const HomePanel = ({ isOnTop }) => {
       console.log('[HomePanel] isOnTop:', isOnTop);
       console.log('[HomePanel] videoPlayIntentRef.current:', videoPlayIntentRef.current);
       console.log('[HomePanel] lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current);
+
+      // ✅ [핵심] videoPlayIntentRef.current.videoProps가 있으면 비디오 재생
+      if (videoPlayIntentRef.current?.videoProps) {
+        const videoProps = videoPlayIntentRef.current.videoProps;
+        const bannerId = videoPlayIntentRef.current.bannerId;
+
+        console.log('[HomePanel] 비디오 재생 정보 있음:', {
+          bannerId,
+          showUrl: videoProps.showUrl,
+          patnrId: videoProps.patnrId,
+          showId: videoProps.showId,
+        });
+
+        // ✅ 중복 체크 우회를 위해 ref 초기화
+        lastPlayedBannerIdRef.current = null;
+
+        // ✅ scrollTop 상태 확인 (0이면 normal, 아니면 1px로 축소)
+        const currentScrollTop = prevScrollTopRef.current;
+        console.log('[HomePanel] 현재 scrollTop:', currentScrollTop);
+
+        // modalContainerId 변경으로 중복 체크 우회
+        const modifiedVideoProps = {
+          ...videoProps,
+          modalContainerId: 'banner-modal-' + bannerId,
+        };
+
+        console.log('[HomePanel] dispatch(startVideoPlayerNew) 호출:', modifiedVideoProps);
+        dispatch(startVideoPlayerNew(modifiedVideoProps));
+      } else {
+        console.log('[HomePanel] ❌ videoProps가 없어서 비디오 재생 불가');
+      }
     }
-  }, [detailPanelClosedTime, isOnTop]);
+  }, [detailPanelClosedTime, isOnTop, dispatch]);
+
+  // ✅ [251118] DetailPanel 복귀 후 비디오 크기 자동 조정
+  useEffect(() => {
+    // ✅ [251118] videoProps가 없으면 PlayerPanel에서 직접 읽기
+    const hasVideoInfo = videoPlayIntentRef.current?.videoProps ||
+                         (panels.find((p) => p.name === panel_names.PLAYER_PANEL)?.panelInfo?.modal);
+
+    if (detailPanelClosedTime && isOnTop && hasVideoInfo) {
+      console.log('[HomePanel] 비디오 크기 조정 타이머 시작...');
+      console.log('[HomePanel] videoProps 여부:', !!videoPlayIntentRef.current?.videoProps);
+
+      // 약간의 지연 후 비디오 상태 확인 (재생이 완료된 후)
+      const timer = setTimeout(() => {
+        const currentScrollTop = prevScrollTopRef.current;
+        const playerPanelInfo = panels.find((p) => p.name === panel_names.PLAYER_PANEL);
+        const shouldShrink = playerPanelInfo?.panelInfo?.shouldShrinkTo1px;
+
+        // ✅ [251118] 더 자세한 로그 추가
+        console.log('[HomePanel] 비디오 크기 조정 체크:', {
+          currentScrollTop,
+          shouldShrink,
+          bannerId: videoPlayIntentRef.current?.bannerId,
+          playerPanelExists: !!playerPanelInfo,
+        });
+
+        console.log('[HomePanel] 📊 PlayerPanel 전체 정보:', {
+          hasPlayerPanel: !!playerPanelInfo,
+          modal: playerPanelInfo?.panelInfo?.modal,
+          shouldShrinkTo1px: playerPanelInfo?.panelInfo?.shouldShrinkTo1px,
+          currentBannerId: playerPanelInfo?.panelInfo?.playerState?.currentBannerId,
+          panelName: playerPanelInfo?.name,
+        });
+
+        console.log('[HomePanel] 📍 Ref 정보:', {
+          prevScrollTopRef: prevScrollTopRef.current,
+          shouldShrinkRef: shouldShrinkRef.current,
+          videoPlayIntentRef: videoPlayIntentRef.current?.bannerId,
+        });
+
+        if (currentScrollTop <= 1 && shouldShrink) {
+          // scrollTop = 0이고 현재 1px 상태면 → 확대
+          console.log('[HomePanel] ▲ 비디오 확대 (scrollTop <= 1 && shouldShrink)');
+          dispatch(showModalVideo());
+        } else if (currentScrollTop > 1 && !shouldShrink) {
+          // scrollTop > 0이고 normal size면 → 축소
+          console.log('[HomePanel] ▼ 비디오 축소 (scrollTop > 1 && !shouldShrink)');
+          dispatch(hideModalVideo());
+        } else {
+          console.log('[HomePanel] ⚠️ 비디오 크기 조정 불필요', {
+            reason: currentScrollTop <= 1 && !shouldShrink ? 'scrollTop 최상단이고 이미 normal size' :
+                    currentScrollTop > 1 && shouldShrink ? 'scrollTop > 1이고 이미 1px 상태' : '기타',
+            condition1: `currentScrollTop <= 1: ${currentScrollTop <= 1}`,
+            condition2: `shouldShrink: ${shouldShrink}`,
+          });
+        }
+      }, 500); // 비디오 재생 완료 대기
+
+      return () => clearTimeout(timer);
+    }
+  }, [detailPanelClosedTime, isOnTop, dispatch, panels]);
 
   useEffect(() => {
     return () => {