[251026] fix: HomeBanner동영상 복구

🕐 커밋 시간: 2025. 10. 26. 23:41:38

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +77줄
  • 삭제: -6줄

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

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

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

@@ -96,6 +96,12 @@ const HomePanel = ({ isOnTop }) => {
   const enterThroughGNB = useSelector((state) => state.home.enterThroughGNB);
   const defaultFocus = useSelector((state) => state.home.defaultFocus);
 
+  // ✅ PlayerPanel의 shouldShrinkTo1px 상태 추적
+  const playerPanelShouldShrink = useSelector((state) => {
+    const playerPanel = state.panels.panels.find((p) => p.name === panel_names.PLAYER_PANEL);
+    return playerPanel?.panelInfo?.shouldShrinkTo1px ?? false;
+  });
+
   const categoryInfos = useSelector((state) => state.onSale.homeOnSaleData?.data?.categoryInfos);
 
   const categoryItemInfos = useSelector((state) => state.main.subCategoryData?.categoryItemInfos);
@@ -157,6 +163,11 @@ const HomePanel = ({ isOnTop }) => {
   const isScrollingUpRef = useRef(false); // 스크롤 위로 감지
   const scrollExpandTimerRef = useRef(null); // 스크롤 복구 타이머
 
+  // ✅ 최상단 비디오 복구 관련 Refs
+  const shouldShrinkRef = useRef(false); // PlayerPanel의 shouldShrinkTo1px 추적
+  const expandIntervalRef = useRef(null); // 최상단에서의 interval
+  const expandAttemptRef = useRef(0); // 복구 시도 횟수
+
   const focusedContainerIdRef = usePrevious(focusedContainerId);
 
   const loadingComplete = useSelector((state) => state.common?.loadingComplete);
@@ -405,6 +416,20 @@ const HomePanel = ({ isOnTop }) => {
     topInfos,
   ]);
 
+  // ✅ useEffect: Redux 상태 동기화 & Interval 정리
+  useEffect(() => {
+    // PlayerPanel의 shouldShrinkTo1px를 Ref에 동기화
+    shouldShrinkRef.current = playerPanelShouldShrink;
+
+    // shouldShrinkTo1px가 false가 되면 interval 즉시 정리
+    if (!playerPanelShouldShrink && expandIntervalRef.current) {
+      console.log('[HomePanel] shouldShrinkTo1px=false - clearing expand interval');
+      clearInterval(expandIntervalRef.current);
+      expandIntervalRef.current = null;
+      expandAttemptRef.current = 0;
+    }
+  }, [playerPanelShouldShrink]);
+
   const _onScrollStatusChanged = useCallback((status) => {
     if (status === 'end') {
       setArrowBottom(false);
@@ -413,11 +438,41 @@ const HomePanel = ({ isOnTop }) => {
     }
   }, []);
 
-  const _onScroll = (e) => {
+  // ✅ useCallback: 의존성은 dispatch만
+  const _onScroll = useCallback((e) => {
     const currentScrollTop = e.scrollTop;
     const prevScrollTop = prevScrollTopRef.current;
 
-    // 스크롤 방향 감지
+    // ✅ 최상단 도달: 1px 비디오 복구 시도 (shouldShrinkRef.current로 읽음)
+    if (currentScrollTop <= 1) {
+      if (shouldShrinkRef.current && !expandIntervalRef.current) {
+        console.log('[HomePanel] At top (scrollTop <= 1) - starting video expansion');
+        expandAttemptRef.current = 0;
+
+        // Interval 시작: 200ms마다 복구 시도
+        expandIntervalRef.current = setInterval(() => {
+          // 종료 조건: 최대 3회 시도
+          if (expandAttemptRef.current >= 3) {
+            console.log('[HomePanel] Max expansion attempts reached (3)');
+            clearInterval(expandIntervalRef.current);
+            expandIntervalRef.current = null;
+            return;
+          }
+
+          console.log('[HomePanel] Expansion attempt', expandAttemptRef.current + 1);
+          dispatch(expandVideoFrom1px());
+          expandAttemptRef.current++;
+        }, 200);
+      }
+    }
+    // 최상단 벗어남: interval 정리
+    else if (currentScrollTop > 1 && expandIntervalRef.current) {
+      console.log('[HomePanel] Left top - clearing expand interval');
+      clearInterval(expandIntervalRef.current);
+      expandIntervalRef.current = null;
+    }
+
+    // 기존 로직: 아래로 스크롤
     if (currentScrollTop > prevScrollTop) {
       // 아래로 스크롤: 비디오를 1px로 축소
       console.log('[HomePanel] Scrolling down - shrinking video');
@@ -427,9 +482,11 @@ const HomePanel = ({ isOnTop }) => {
         clearTimeout(scrollExpandTimerRef.current);
         scrollExpandTimerRef.current = null;
       }
-    } else if (currentScrollTop < prevScrollTop && currentScrollTop > 0) {
-      // 위로 스크롤 (0이 아닌): 1.5초 후 복구
-      console.log('[HomePanel] Scrolling up - will expand after 1.5s');
+    }
+    // 기존 로직: 위로 스크롤 (0이 아닌)
+    else if (currentScrollTop < prevScrollTop && currentScrollTop > 1) {
+      // 위로 스크롤 (최상단 아님): 1초 후 복구
+      console.log('[HomePanel] Scrolling up - will expand after 1s');
       // 기존 타이머 취소
       if (scrollExpandTimerRef.current) {
         clearTimeout(scrollExpandTimerRef.current);
@@ -444,7 +501,7 @@ const HomePanel = ({ isOnTop }) => {
 
     // 이전 scrollTop 업데이트
     prevScrollTopRef.current = currentScrollTop;
-  };
+  }, [dispatch]);
 
   const _onFocusedContainerId = useCallback(
     (containerId) => {
@@ -618,6 +675,20 @@ const HomePanel = ({ isOnTop }) => {
     }
   }, [verticalPagenatorRef]);
 
+  // ✅ Cleanup: 컴포넌트 언마운트 시 모든 타이머 정리
+  useEffect(() => {
+    return () => {
+      if (scrollExpandTimerRef.current) {
+        clearTimeout(scrollExpandTimerRef.current);
+        scrollExpandTimerRef.current = null;
+      }
+      if (expandIntervalRef.current) {
+        clearInterval(expandIntervalRef.current);
+        expandIntervalRef.current = null;
+      }
+    };
+  }, []);
+
   return (
     <>
       <TPanel className={css.panel} onCancel={onCancel}>