[251103] fix: JustForYouTestBanner 모달 비디오 표시문제 해결

🕐 커밋 시간: 2025. 11. 03. 14:40:18

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/panelNavigationActions.js
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/utils/Config.js
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomBannerType/JustForYouBanner.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 공통 유틸리티 함수 최적화
  • 타입 시스템 안정성 강화
  • 중간 규모 기능 개선

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

@@ -182,4 +182,85 @@ export const navigateToDetailFromHome = (
       }
     }));
   }, 1000);
+};
+
+/**
+ * JustForYouBanner 클릭 시 순차 네비게이션 (PlayerPanel 제거 → JustForYouTestPanel push)
+ * @returns {Function} Redux thunk function
+ */
+export const navigateToJustForYouTestPanel = () => (dispatch, getState) => {
+  const currentActionCount = getState().panels.lastPanelAction || 0;
+
+  console.log('[PanelNavigation] Starting navigation to JustForYouTestPanel:', {
+    currentActionCount
+  });
+
+  // 1. 먼저 HomePanel 상태 저장 (필요시)
+  dispatch(updatePanel({
+    name: panel_names.HOME_PANEL,
+    panelInfo: {
+      fromJustForYouBanner: true,
+      timestamp: Date.now()
+    }
+  }));
+
+  const storeUnsubscribe = (() => {
+    let isUnsubscribed = false;
+
+    const checkStateChange = () => {
+      if (isUnsubscribed) return;
+
+      const newState = getState();
+      const newActionCount = newState.panels.lastPanelAction || 0;
+
+      // updatePanel이 완료되면
+      if (newActionCount !== currentActionCount) {
+        console.log('[PanelNavigation] HomePanel update completed, pushing JustForYouTestPanel');
+        isUnsubscribed = true;
+
+        // 2. JustForYouTestPanel push
+        dispatch(pushPanel({
+          name: panel_names.JUST_FOR_YOU_TEST_PANEL,
+          panelInfo: {
+            fromJustForYouBanner: true
+          }
+        }));
+
+        // 3. JustForYouTestPanel이 렌더링된 후 PlayerPanel 제거
+        setTimeout(() => {
+          console.log('[PanelNavigation] Removing PlayerPanel after JustForYouTestPanel render');
+          const { finishAllVideoForce } = require('./playActions');
+          dispatch(finishAllVideoForce());
+        }, 200);
+      }
+    };
+
+    setTimeout(checkStateChange, 0);
+    const intervalId = setInterval(checkStateChange, 16);
+
+    return () => {
+      isUnsubscribed = true;
+      clearInterval(intervalId);
+    };
+  })();
+
+  // 타임아웃 방어 (최대 1초 대기)
+  setTimeout(() => {
+    storeUnsubscribe();
+    console.log('[PanelNavigation] Timeout fallback, pushing JustForYouTestPanel');
+
+    dispatch(pushPanel({
+      name: panel_names.JUST_FOR_YOU_TEST_PANEL,
+      panelInfo: {
+        fromJustForYouBanner: true
+      }
+    }));
+
+    // fallback으로도 PlayerPanel 제거
+    setTimeout(() => {
+      console.log('[PanelNavigation] Fallback: removing PlayerPanel');
+      const { finishAllVideoForce } = require('./playActions');
+      dispatch(finishAllVideoForce());
+    }, 200);
+  }, 1000);
 };

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

@@ -160,6 +160,25 @@ export const finishModalVideoForce = () => (dispatch, getState) => {
   }
 };
 
+// 모든 PlayerPanel을 강제 제거 (modal과 fullscreen 모두)
+export const finishAllVideoForce = () => (dispatch, getState) => {
+  const panels = getState().panels.panels;
+
+  // 모든 PlayerPanel이 존재하는지 확인 (스택 어디에 있든)
+  const hasPlayerPanel = panels.some(
+    (panel) => panel.name === panel_names.PLAYER_PANEL
+  );
+
+  if (hasPlayerPanel) {
+    if (startVideoFocusTimer) {
+      clearTimeout(startVideoFocusTimer);
+      startVideoFocusTimer = null;
+    }
+    // panelName을 지정하면 스택 어디에 있든 해당 패널을 제거
+    dispatch(popPanel(panel_names.PLAYER_PANEL));
+  }
+};
+
 // 모달 비디오를 일시정지 (패널은 유지)
 export const pauseModalVideo = () => (dispatch, getState) => {
   const panels = getState().panels.panels;

com.twin.app.shoptime/src/utils/Config.js

@@ -48,6 +48,7 @@ export const panel_names = {
 export const STANDALONE_PANELS = [
   panel_names.CHECKOUT_PANEL,
   panel_names.CART_PANEL,
+  panel_names.JUST_FOR_YOU_TEST_PANEL,
   // 향후 추가될 다른 단독 패널들 여기에 추가
 ];
 

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomBannerType/JustForYouBanner.jsx

@@ -30,7 +30,6 @@ import CustomImage from '../../../../components/CustomImage/CustomImage';
 import { panel_names } from '../../../../utils/Config';
 import cssBannerUnit from '../BannerUnit.module.less';
 import css from '../RollingUnit.module.less';
-import { finishModalVideoForce } from '../../../../actions/playActions';
 
 const SpottableComponent = Spottable("div");
 
@@ -180,8 +179,6 @@ export default function JustForSwitchBanner({
   }, [handleItemFocus]);
 
   const shelfFocus = useCallback(() => {
-    console.log('[JustForSwitchBanner] shelfFocus');
-    dispatch(finishModalVideoForce()); // PlayerPanel 완전 제거
     dispatch(
       pushPanel({
         name: panel_names.JUST_FOR_YOU_TEST_PANEL,
@@ -210,7 +207,10 @@ export default function JustForSwitchBanner({
           isHorizontal={isHorizontal}
           popupVisible={popupVisible}
           activePopup={activePopup}
-          onClick={shelfFocus}
+          onClick={() => {
+            console.log('[JustForSwitchBanner] JustForYouBanner onClick triggered');
+            shelfFocus();
+          }}
         />
       ) : (
         renderItem(3, false)