[251006] feat: useFocusHistory,useVideoMove Migration

🕐 커밋 시간: 2025. 10. 06. 15:22:49

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

📁 추가된 파일:
  + com.twin.app.shoptime/src/actions/videoPlayActions.js
  + com.twin.app.shoptime/src/hooks/useFocusHistory/index.js
  + com.twin.app.shoptime/src/hooks/useFocusHistory/useFocusHistory.js
  + com.twin.app.shoptime/src/hooks/useVideoPlay/index.js
  + com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.complete.js
  + com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.final.js
  + com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.fixed.js
  + com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js
  + com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.old.js
  + com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.opus-improved.js
  + com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.simple.js
  + com.twin.app.shoptime/src/hooks/useVideoPlay/videoState.js
  + com.twin.app.shoptime/src/hooks/useVideoTransition/index.js
  + com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.bak.js
  + com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.brief.js
  + com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.complete.js
  + com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.fixed.js
  + com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.js
  + com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.original.js
  + com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.simple.js
  + com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoTransition.js
  + com.twin.app.shoptime/src/reducers/videoPlayReducer.js

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
  ~ com.twin.app.shoptime/src/store/store.js
  ~ com.twin.app.shoptime/src/utils/domUtils.js
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

🔧 함수 변경 내용:
  📊 Function-level changes summary across 27 files:
    • Functions added: 55
    • Functions modified: 0
    • Functions deleted: 0
  📋 By language:
    • javascript: 27 files, 55 function changes

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 핵심 비즈니스 로직 개선
  • 공통 유틸리티 함수 최적화

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

@@ -40,6 +40,9 @@ import Random from './RandomUnit';
 import RandomUnitNew from './RandomUnit';
 import Rolling from './RollingUnit';
 import SimpleVideoContainer from './SimpleVideoContainer';
+import { useFocusHistory } from '../../../hooks/useFocusHistory/useFocusHistory';
+import { useVideoPlay } from '../../../hooks/useVideoPlay/useVideoPlay';
+import { useVideoMove } from '../../../hooks/useVideoTransition/useVideoMove';
 
 const SpottableComponent = Spottable('div');
 const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
@@ -52,6 +55,24 @@ export default function HomeBanner({ firstSpot, spotlightId, handleItemFocus, ha
   const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
 
   const popupVisible = useSelector((state) => state.common.popup.popupVisible);
+  // 🔽 useFocusHistory - 경량화된 범용 포커스 히스토리
+  const focusHistory = useFocusHistory({
+    enableLogging: true,
+    useGlobalState: true,
+    logPrefix: '[HomeBanner-Focus]',
+  });
+
+  // 🔽 useVideoPlay - 동영상 재생 제어
+  const videoPlay = useVideoPlay({
+    enableLogging: true,
+    logPrefix: '[HomeBanner-VideoPlay]',
+  });
+
+  // 🔽 useVideoMove - 포커스 전환 기반 동영상 제어
+  const { playByTransition, cleanup } = useVideoMove({
+    enableLogging: true,
+    logPrefix: '[HomeBanner-VideoMove]',
+  });
 
   const selectTemplate = useMemo(() => {
     return homeTopDisplayInfo.shptmTmplCd;