[251116] feat: HomePanel return form DetailPanel video playing

🕐 커밋 시간: 2025. 11. 16. 23:27:35

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ 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/MainView/MainView.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()

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

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

@@ -209,6 +209,7 @@ export const startVideoPlayerNew =
   };
 
 export const finishVideoPreview = () => (dispatch, getState) => {
+  console.log('@@@@@@@@@@@@@@@@@-finishVideoPreview');
   const panels = getState().panels.panels;
   const topPanel = panels[panels.length - 1];
   if (topPanel && topPanel.name === panel_names.PLAYER_PANEL && topPanel.panelInfo.modal) {

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

@@ -264,7 +264,7 @@ export default function RandomUnit({
   }, [randomData, dispatch]);
 
   // 포커스 인
-  const onFocus = useCallback(() => {
+  const handleFocus = useCallback(() => {
     // 🔽 [251116] 현재 비디오 상태 로그 출력
     console.log('[RandomUnit] onFocus - 현재 비디오 상태', {
       playback: videoPlayState.playback,
@@ -839,7 +839,7 @@ export default function RandomUnit({
           <SpottableComponent
             className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
             onClick={videoError === true ? videoErrorClick : videoClick}
-            onFocus={onFocus}
+            onFocus={handleFocus}
             onBlur={onBlur}
             spotlightId={spotlightId}
             aria-label={

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

@@ -32,6 +32,7 @@ import {
   expandVideoFrom1px,
   finishVideoPreview,
   shrinkVideoTo1px,
+  startVideoPlayerNew,
 } from '../../actions/playActions';
 import { getBestSeller } from '../../actions/productActions';
 import TBody from '../../components/TBody/TBody';
@@ -91,6 +92,8 @@ const HomePanel = ({ isOnTop }) => {
   });
   // 🔽 비디오 재생 의도 공유 ref
   const videoPlayIntentRef = useRef(null);
+  // ✅ [251116] 비디오 중복 재생 방지 ref
+  const lastPlayedBannerIdRef = useRef(null);
 
   // 🔽 useVideoMove - 포커스 전환 기반 동영상 제어
   // [COMMENTED OUT] useVideoMove 미사용 - cleanup() 호출되지 않음
@@ -562,9 +565,9 @@ const HomePanel = ({ isOnTop }) => {
           const isVideoShrunk = panels.some(
             (panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.shouldShrinkTo1px
           );
-          if (Spotlight.getPointerMode() && !isVideoShrunk) {
+          // if (Spotlight.getPointerMode() && !isVideoShrunk) {
-            dispatch(finishVideoPreview());
+          //   dispatch(finishVideoPreview());
-          }
+          // }
           if (panelInfo.currentCatCd) {
             Spotlight.focus('spotlightId-' + panelInfo.currentCatCd);
           }
@@ -600,11 +603,11 @@ const HomePanel = ({ isOnTop }) => {
       isInitialRender.current = false;
 
       // ✅ 마운트 시 banner0 자동 재생 설정
-      console.log('[HomePanel] 마운트 - banner0 재생 시도', videoPlay);
+      // console.log('[HomePanel] 마운트 - banner0 재생 시도', videoPlay);
       videoPlayIntentRef.current = { bannerId: 'banner0' };
-      console.log('[HomePanel] videoPlayIntentRef 설정:', videoPlayIntentRef.current);
+      // console.log('[HomePanel] videoPlayIntentRef 설정:', videoPlayIntentRef.current);
-      videoPlay.playVideo('banner0', { reason: 'mount-init' });
+      // videoPlay.playVideo('banner0', { reason: 'mount-init' });
-      console.log('[HomePanel] playVideo 호출 완료');
+      // console.log('[HomePanel] playVideo 호출 완료');
 
       if (isDeepLink || (!panels.length && !panelInfo.focusedContainerId)) {
         dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: 'wait' } }));
@@ -693,25 +696,67 @@ const HomePanel = ({ isOnTop }) => {
 
   // ✅ HomePanel 활성화 조건: 최상단 패널 또는 PlayerPanel 아래의 두 번째 패널
   // 비디오가 재생이 아니면 videoPlayIntentRef의 bannerId로 비디오 재생
+  // [251116] isHomeOnTop인 경우에는 비디오가 항상 재생되어야 함
   useEffect(() => {
-    const isHomePanelActive =
+    console.log('[HomeActive] useEffect 실행 - isOnTop:', isOnTop);
-      panels[0]?.name === panel_names.HOME_PANEL ||
+    console.log('[HomeActive] videoPlayIntentRef.current:', videoPlayIntentRef.current);
-      (panels.length >= 2 &&
+    console.log(
-        panels[0]?.name === panel_names.PLAYER_PANEL &&
+      '[HomeActive] panels 상태:',
-        panels[1]?.name === panel_names.HOME_PANEL);
+      panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal }))
+    );
+
+    const isHomePanelActive = isOnTop;
+    console.log('[HomeActive] isHomePanelActive:', isHomePanelActive);
+
+    if (!isHomePanelActive) {
+      console.log('[HomeActive] 조건 실패: isHomePanelActive가 false');
+      return;
+    }
+
+    if (!videoPlayIntentRef.current?.bannerId) {
+      console.log('[HomeActive] 조건 실패: videoPlayIntentRef.current?.bannerId가 없음', {
+        hasRef: !!videoPlayIntentRef.current,
+        hasBannerId: !!videoPlayIntentRef.current?.bannerId,
+      });
+      return;
+    }
 
-    if (isHomePanelActive && videoPlayIntentRef.current?.bannerId) {
     const bannerId = videoPlayIntentRef.current.bannerId;
-      const currentPlaying = videoPlay.getCurrentPlayingBanner();
+    console.log('[HomeActive] 비디오 재생 시도 - bannerId:', bannerId);
+    console.log('[HomeActive] 마지막 재생한 배너:', lastPlayedBannerIdRef.current);
+
+    // ✅ [251116] 중복 재생 방지: 같은 배너면 스킵
+    if (lastPlayedBannerIdRef.current === bannerId) {
+      console.log('[HomeActive] 중복 호출 감지 - 스킵 (이미 재생 중)');
+      return;
+    }
+
+    // const currentPlaying = videoPlay.getCurrentPlayingBanner();
 
     // 이미 재생 중인 배너가 다르면 새로 재생
-      if (currentPlaying !== bannerId) {
+    // if (currentPlaying !== bannerId) {
-        videoPlay.playVideo(bannerId, {
+    //   videoPlay.playVideo(bannerId, {
-          reason: 'homePanel-active',
+    //     reason: 'homePanel-active',
-        });
+    //   });
-      }
+    // }
-    }
+
-  }, [panels]);
+    // ✅ [251116] startVideoPlayerNew로 비디오 자동 재생
+    console.log('[HomeActive] dispatch(startVideoPlayerNew) 호출 직전:', { bannerId, modal: true });
+
+    // Spotlight.focus(bannerId);
+    // dispatch(
+    //   startVideoPlayerNew({
+    //     bannerId: bannerId,
+    //     modal: true,
+    //     modalContainerId: 'banner-modal-' + bannerId,
+    //   })
+    // );
+    console.log('[HomeActive] dispatch(startVideoPlayerNew) 호출 완료');
+
+    // 재생 기록 업데이트
+    lastPlayedBannerIdRef.current = bannerId;
+    console.log('[HomeActive] 재생 기록 업데이트:', bannerId);
+  }, [isOnTop, dispatch]);
 
   useEffect(() => {
     return () => {

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

@@ -79,7 +79,7 @@ import WelcomeEventPanel from '../WelcomeEventPanel/WelcomeEventPanel';
 import css from './MainView.module.less';
 
 // DEBUG_MODE 상수 - true일 때만 console.log 출력
-const DEBUG_MODE = true;
+const DEBUG_MODE = false;
 
 const preloadImages = [
   LoadingPreloadImage,