[251120] fix: HomePanelr modal false to true Focus

🕐 커밋 시간: 2025. 11. 20. 18:35:09

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +47줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

🔧 주요 변경 내용:
  • 소규모 기능 개선

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

@@ -149,6 +149,13 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
     return playerPanel?.panelInfo?.shouldShrinkTo1px ?? false;
   });
 
+  // ✅ PlayerPanel의 modal 상태 추적 (false → true 감지용)
+  const playerModalState = useSelector((state) => {
+    const playerPanel = state.panels.panels.find((p) => p.name === panel_names.PLAYER_PANEL);
+    return playerPanel?.panelInfo?.modal ?? false;
+  });
+  const prevPlayerModalStateRef = useRef(false);
+
   const categoryInfos = useSelector((state) => state.onSale.homeOnSaleData?.data?.categoryInfos);
 
   const categoryItemInfos = useSelector((state) => state.main.subCategoryData?.categoryItemInfos);
@@ -989,6 +996,46 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
     }
   }, [verticalPagenatorRef]);
 
+  // ✅ PlayerPanel modal 상태 변화 감지 (false → true) : Fullscreen -> Banner
+  useEffect(() => {
+    const prevModalState = prevPlayerModalStateRef.current;
+
+    console.log('[HomePanel] 🔍 Modal 상태 체크:', {
+      prevModalState,
+      playerModalState,
+      shouldExecute: prevModalState === false && playerModalState === true
+    });
+
+    if (prevModalState === false && playerModalState === true) {
+
+      console.log('>>>>>[HomePanel] ▶️ PlayerPanel이 Fullscreen에서 Banner로 전환됨');
+      // 0.5초 후 비디오가 재생되는 배너에 포커스 테두리 효과 적용
+      // const focusTimer = setTimeout(() => {
+      //   if (videoPlayIntentRef.current?.bannerId) {
+      //     const bannerId = videoPlayIntentRef.current.bannerId;
+      //     const bannerElement = document.querySelector(`[data-spotlight-id="${bannerId}"]`);
+
+      //     if (bannerElement) {
+      //       // 포커스 테두리 효과 적용 (기존 .focused mixin 스타일 적용)
+      //       bannerElement.style.border = '4px solid #c70850';
+      //       bannerElement.style.borderRadius = '12px';
+      //       bannerElement.style.boxShadow = '0 0 22px 0 rgba(0, 0, 0, 0.5)';
+      //       bannerElement.style.transition = 'all 0.3s ease';
+
+      //       // 2초 후 효과 제거
+      //       setTimeout(() => {
+      //         bannerElement.style.border = '';
+      //         bannerElement.style.borderRadius = '';
+      //         bannerElement.style.boxShadow = '';
+      //       }, 2000);
+      //     }
+      //   }
+      // }, 500);
+    }
+
+    prevPlayerModalStateRef.current = playerModalState;
+  }, [playerModalState, videoPlayIntentRef]);
+
   // ✅ Cleanup: 컴포넌트 언마운트 시 모든 타이머 정리
   useEffect(() => {
     return () => {