[251119] fix: HomePanel,DetailPanel PreLoadImages

🕐 커밋 시간: 2025. 11. 19. 16:45:55

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +116줄
  • 삭제: -7줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/utils/ImagePreloader.js

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.module.less
  ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 공통 유틸리티 함수 최적화
  • 중간 규모 기능 개선

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

@@ -44,6 +44,27 @@ import useDebugKey from '../../hooks/useDebugKey';
 import { useFocusHistory } from '../../hooks/useFocusHistory/useFocusHistory';
 import usePrevious from '../../hooks/usePrevious';
 import { useVideoPlay } from '../../hooks/useVideoPlay/useVideoPlay';
+import ImagePreloader from '../../utils/ImagePreloader';
+
+// DetailPanelBackground 이미지 imports for preloading
+import hsn from '../../../assets/images/bg/hsn_new.png';
+import koreaKiosk from '../../../assets/images/bg/koreaKiosk_new.png';
+import lgelectronics from '../../../assets/images/bg/lgelectronics_new.png';
+import ontv4u from '../../../assets/images/bg/ontv4u_new.png';
+import Pinkfong from '../../../assets/images/bg/Pinkfong_new.png';
+import qvc from '../../../assets/images/bg/qvc_new.png';
+import shoplc from '../../../assets/images/bg/shoplc_new.png';
+
+// 파트너사별 배경 이미지 맵
+const BACKGROUND_IMAGES = {
+  1: qvc,      // QVC
+  2: hsn,      // HSN
+  4: ontv4u,   // ONTV
+  9: lgelectronics, // LG ELECTRONICS
+  11: shoplc,  // SHOPLC
+  16: koreaKiosk,   // KOREA KIOSK
+  19: Pinkfong,     // PINKFONG
+};
 // [COMMENTED OUT] useVideoMove 관련 코드 주석 처리 - 향후 사용 검토 필요
 // import { useVideoMove } from '../../hooks/useVideoTransition/useVideoMove';
 import {
@@ -147,6 +168,30 @@ const HomePanel = ({ isOnTop }) => {
   const verticalPagenatorRef = useRef(null);
   const currentSentMenuRef = useRef(null);
 
+  // ✅ [251119] DetailPanelBackground 이미지 프리로딩
+  // HomePanel 마운트 시 백그라운드로 모든 파트너사 배경 이미지를 미리 로드하여
+  // DetailPanel 진입 시 로딩 지연을 방지함
+  useEffect(() => {
+    console.log('[HomePanel] Starting background image preloading...');
+
+    // HomePanel의 다른 기능들에 영향을 주지 않도록 비동기로 조용히 실행
+    setTimeout(() => {
+      ImagePreloader.preloadAllImages(BACKGROUND_IMAGES)
+        .then((results) => {
+          const successCount = results.filter(r => r !== null).length;
+          console.log(`[HomePanel] Background images preloaded: ${successCount}/${results.length} images`);
+
+          // 프리로딩 통계 정보 로깅 (디버깅용)
+          const stats = ImagePreloader.getStats();
+          console.log('[HomePanel] Preloader stats:', stats);
+        })
+        .catch((error) => {
+          console.error('[HomePanel] Background image preloading failed:', error);
+          // 프리로딩 실패가 HomePanel 기능에 영향을 주지 않도록 조용히 처리
+        });
+    }, 1000); // HomePanel 안정화 후 1초 뒤 시작
+  }, []); // 마운트 시 한 번만 실행
+
   useEffect(() => {
     if (nowMenu === 'Home/Top') {
       dispatch(