diff --git a/com.twin.app.shoptime/src/App/App.js b/com.twin.app.shoptime/src/App/App.js index a52e5f09..b46adb1f 100644 --- a/com.twin.app.shoptime/src/App/App.js +++ b/com.twin.app.shoptime/src/App/App.js @@ -424,20 +424,20 @@ const resolveSpotlightIdFromEvent = (event) => { // Spotlight Focus 추적 로그 [251115] // DOM 이벤트 리스너로 대체 -document.addEventListener('focusin', (ev) => { - console.log('[SPOTLIGHT FOCUS-IN]', ev.target); -}); +// document.addEventListener('focusin', (ev) => { +// console.log('[SPOTLIGHT FOCUS-IN]', ev.target); +// }); -document.addEventListener('focusout', (ev) => { - console.log('[SPOTLIGHT FOCUS-OUT]', ev.target); -}); +// document.addEventListener('focusout', (ev) => { +// console.log('[SPOTLIGHT FOCUS-OUT]', ev.target); +// }); -// Spotlight 커스텀 이벤트가 있다면 추가 -if (typeof Spotlight !== 'undefined' && Spotlight.addEventListener) { - Spotlight.addEventListener('focus', (ev) => { - console.log('[SPOTLIGHT: focus]', ev.target); - }); -} +// // Spotlight 커스텀 이벤트가 있다면 추가 +// if (typeof Spotlight !== 'undefined' && Spotlight.addEventListener) { +// Spotlight.addEventListener('focus', (ev) => { +// console.log('[SPOTLIGHT: focus]', ev.target); +// }); +// } function AppBase(props) { const dispatch = useDispatch(); diff --git a/com.twin.app.shoptime/src/actions/panelActions.js b/com.twin.app.shoptime/src/actions/panelActions.js index fd585009..3cc765ad 100644 --- a/com.twin.app.shoptime/src/actions/panelActions.js +++ b/com.twin.app.shoptime/src/actions/panelActions.js @@ -17,8 +17,8 @@ export const SOURCE_MENUS = { HOME_GENERAL: 'home_general', THEMED_PRODUCT: 'themed_product', GENERAL_PRODUCT: 'general_product', - PLAYER_SHOP_NOW: 'player_shop_now', // PlayerPanel의 ShopNow에서 진입 - PLAYER_MEDIA: 'player_media', // PlayerPanel의 Media에서 진입 + PLAYER_SHOP_NOW: 'player_shop_now', // PlayerPanel의 ShopNow에서 진입 + PLAYER_MEDIA: 'player_media', // PlayerPanel의 Media에서 진입 }; /* @@ -117,19 +117,22 @@ export const navigateToDetail = ({ case SOURCE_MENUS.HOME_RANDOM_UNIT: case SOURCE_MENUS.HOME_ROLLING_UNIT: case SOURCE_MENUS.HOME_GENERAL: { - // ✅ 그라데이션 배경 표시 - HomePanel→DetailPanel 전환 시 (PlayerPanel 출신 제외) - + if (!panelInfo.launchedFromPlayer) { - dispatch(updateHomeInfo({ - name: panel_names.HOME_PANEL, - panelInfo: { - showGradientBackground: true, - } - })); - console.log('[TRACE-GRADIENT] 🟢 navigateToDetail set showGradientBackground: true - source:', sourceMenu); + dispatch( + updateHomeInfo({ + name: panel_names.HOME_PANEL, + panelInfo: { + showGradientBackground: true, + }, + }) + ); + // console.log('[TRACE-GRADIENT] 🟢 navigateToDetail set showGradientBackground: true - source:', sourceMenu); } else { - console.log('[TRACE-GRADIENT] 🔵 navigateToDetail skipped gradient - launchedFromPlayer: true'); + console.log( + '[TRACE-GRADIENT] 🔵 navigateToDetail skipped gradient - launchedFromPlayer: true' + ); } // HomePanel Redux 상태에 포커스 스냅샷 저장 (Detail→Home 복귀 시 사용) @@ -228,7 +231,7 @@ export const navigateToDetail = ({ }, }) ); - panelInfo.sourcePanel = panel_names.HOME_PANEL; // ✅ source panel 정보 + panelInfo.sourcePanel = panel_names.HOME_PANEL; // ✅ source panel 정보 panelInfo.fromHome = true; break; } @@ -247,14 +250,14 @@ export const navigateToDetail = ({ }) ); } - panelInfo.sourcePanel = panel_names.SEARCH_PANEL; // ✅ source panel 정보 + panelInfo.sourcePanel = panel_names.SEARCH_PANEL; // ✅ source panel 정보 panelInfo.fromSearch = true; panelInfo.searchQuery = additionalInfo.searchVal; break; case SOURCE_MENUS.THEMED_PRODUCT: // 테마 상품: 별도 처리 필요할 경우 - panelInfo.sourcePanel = panel_names.HOME_PANEL; // ✅ source panel 정보 (HOME으로 간주) + panelInfo.sourcePanel = panel_names.HOME_PANEL; // ✅ source panel 정보 (HOME으로 간주) break; case SOURCE_MENUS.PLAYER_SHOP_NOW: @@ -271,7 +274,7 @@ export const navigateToDetail = ({ } // PlayerPanel 정보 보존 (복귀 시 필요) - panelInfo.sourcePanel = panel_names.PLAYER_PANEL; // ✅ source panel 정보 + panelInfo.sourcePanel = panel_names.PLAYER_PANEL; // ✅ source panel 정보 panelInfo.fromPlayer = true; break; } diff --git a/com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js b/com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js index 81ca099f..8c38901b 100644 --- a/com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js +++ b/com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js @@ -4,6 +4,10 @@ * * Panel action (PUSH, POP, UPDATE, RESET)을 감지하고 * 자동으로 panel history에 기록 + * + * ⚠️ [251122] DEBUG_MODE = false로 설정되어 모든 로그 출력 비활성화됨 + * - 로그가 필요하면 DEBUG_MODE를 true로 변경하면 됨 + * - middleware 동작 자체는 영향받지 않음 (로그만 출력 안됨) */ import { types } from '../actions/actionTypes'; @@ -11,7 +15,8 @@ import { enqueuePanelHistory, clearPanelHistory } from '../actions/panelHistoryA import { calculateIsPanelOnTop } from '../utils/panelUtils'; // 🎯 isOnTop 유틸리티 함수 import // DEBUG_MODE - true인 경우에만 로그 출력 -const DEBUG_MODE = true; +// ⚠️ [251122] panelHistory 로그 비활성화 - 로그 생성 차단 +const DEBUG_MODE = false; /** * Panel history middleware diff --git a/com.twin.app.shoptime/src/utils/ImagePreloader.js b/com.twin.app.shoptime/src/utils/ImagePreloader.js index ab11bee8..49ecc090 100644 --- a/com.twin.app.shoptime/src/utils/ImagePreloader.js +++ b/com.twin.app.shoptime/src/utils/ImagePreloader.js @@ -3,6 +3,10 @@ * HomePanel에서 백그라운드로 DetailPanelBackground 이미지들을 미리 로드하여 * DetailPanel 진입 시 로딩 지연을 방지 */ + +// DEBUG_MODE - true인 경우에만 로그 출력 +const DEBUG_MODE = false; + class ImagePreloader { constructor() { this.cache = new Map(); // 로드된 이미지 캐시 @@ -33,13 +37,13 @@ class ImagePreloader { img.onload = () => { this.cache.set(src, img); this.loadPromises.delete(src); - console.log(`[ImagePreloader] Image loaded: ${src}`); + if (DEBUG_MODE) console.log(`[ImagePreloader] Image loaded: ${src}`); resolve(img); }; img.onerror = () => { this.loadPromises.delete(src); - console.error(`[ImagePreloader] Failed to load: ${src}`); + if (DEBUG_MODE) console.error(`[ImagePreloader] Failed to load: ${src}`); reject(new Error(`Failed to load image: ${src}`)); }; @@ -58,17 +62,17 @@ class ImagePreloader { */ preloadAllImages(imageMap) { if (this.preloadStarted) { - console.log('[ImagePreloader] Preloading already started'); + if (DEBUG_MODE) console.log('[ImagePreloader] Preloading already started'); return Promise.resolve([]); } this.preloadStarted = true; - console.log('[ImagePreloader] Starting background preload...'); + if (DEBUG_MODE) console.log('[ImagePreloader] Starting background preload...'); - const promises = Object.values(imageMap).map(src => - this.preloadImage(src).catch(error => { + const promises = Object.values(imageMap).map((src) => + this.preloadImage(src).catch((error) => { // 개별 이미지 로드 실패 시 전체 작업을 중단하지 않음 - console.warn('[ImagePreloader] Single image load failed:', error.message); + if (DEBUG_MODE) console.warn('[ImagePreloader] Single image load failed:', error.message); return null; }) ); @@ -102,7 +106,7 @@ class ImagePreloader { return { cached: this.cache.size, loading: this.loadPromises.size, - preloadStarted: this.preloadStarted + preloadStarted: this.preloadStarted, }; } @@ -119,4 +123,4 @@ class ImagePreloader { // 싱글톤 인스턴스 생성 const imagePreloader = new ImagePreloader(); -export default imagePreloader; \ No newline at end of file +export default imagePreloader; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx index 55ac0cb7..a1eb17b7 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx @@ -1,32 +1,16 @@ // src/views/DetailPanel/DetailPanel.new.jsx -import React, { - useCallback, - useEffect, - useLayoutEffect, - useMemo, - useRef, - useState, -} from 'react'; +import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; -import { - useDispatch, - useSelector, -} from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import Spotlight from '@enact/spotlight'; import { setContainerLastFocusedElement } from '@enact/spotlight/src/container'; import { getDeviceAdditionInfo } from '../../actions/deviceActions'; import { getThemeCurationDetailInfo, updateHomeInfo } from '../../actions/homeActions'; -import { - getMainCategoryDetail, - getMainYouMayLike, -} from '../../actions/mainActions'; +import { getMainCategoryDetail, getMainYouMayLike } from '../../actions/mainActions'; import { finishModalMediaForce } from '../../actions/mediaActions'; -import { - popPanel, - updatePanel, -} from '../../actions/panelActions'; +import { popPanel, updatePanel } from '../../actions/panelActions'; import { finishVideoPreview, pauseFullscreenVideo, @@ -34,10 +18,7 @@ import { pauseModalVideo, resumeModalVideo, } from '../../actions/playActions'; -import { - clearProductDetail, - getProductOptionId, -} from '../../actions/productActions'; +import { clearProductDetail, getProductOptionId } from '../../actions/productActions'; import { clearAllToasts } from '../../actions/toastActions'; import TBody from '../../components/TBody/TBody'; import TPanel from '../../components/TPanel/TPanel'; @@ -152,13 +133,15 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { // ✅ DetailPanelBackground 이미지 완전 렌더링 후 그라데이션 배경 숨기기 const handleBackgroundImageReady = useCallback(() => { - console.log('[TRACE-GRADIENT] ✅ DetailPanel - BackgroundImage fully rendered, hiding gradient'); - dispatch(updateHomeInfo({ - name: panel_names.HOME_PANEL, - panelInfo: { - showGradientBackground: false, - } - })); + // console.log('[TRACE-GRADIENT] ✅ DetailPanel - BackgroundImage fully rendered, hiding gradient'); + dispatch( + updateHomeInfo({ + name: panel_names.HOME_PANEL, + panelInfo: { + showGradientBackground: false, + }, + }) + ); }, [dispatch]); // ✅ [251120] DetailPanel이 사라질 때 처리 - sourcePanel에 따라 switch 문으로 처리 @@ -179,32 +162,36 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { case panel_names.PLAYER_PANEL: { // PlayerPanel에서 온 경우: PlayerPanel에 detailPanelClosed flag 전달 console.log('[DetailPanel] unmount - PlayerPanel에 detailPanelClosed flag 전달'); - dispatch(updatePanel({ - name: panel_names.PLAYER_PANEL, - panelInfo: { - detailPanelClosed: true, // ✅ flag - detailPanelClosedAt: Date.now(), // ✅ 시점 기록 - detailPanelClosedFromSource: sourceMenu, // ✅ 출처 - lastFocusedTargetId: panelInfo?.lastFocusedTargetId, // ✅ 포커스 복원 타겟 전달 - } - })); + dispatch( + updatePanel({ + name: panel_names.PLAYER_PANEL, + panelInfo: { + detailPanelClosed: true, // ✅ flag + detailPanelClosedAt: Date.now(), // ✅ 시점 기록 + detailPanelClosedFromSource: sourceMenu, // ✅ 출처 + lastFocusedTargetId: panelInfo?.lastFocusedTargetId, // ✅ 포커스 복원 타겟 전달 + }, + }) + ); break; } case panel_names.HOME_PANEL: { // HomePanel에서 온 경우: HomePanel에 detailPanelClosed flag 전달 - console.log('[DetailPanel] unmount - HomePanel에 detailPanelClosed flag 전달'); - console.log('[TRACE-GRADIENT] 🔶 DetailPanel unmount - HomePanel 복귀'); + // console.log('[DetailPanel] unmount - HomePanel에 detailPanelClosed flag 전달'); + // console.log('[TRACE-GRADIENT] 🔶 DetailPanel unmount - HomePanel 복귀'); - dispatch(updateHomeInfo({ - name: panel_names.HOME_PANEL, - panelInfo: { - detailPanelClosed: true, // ✅ flag - detailPanelClosedAt: Date.now(), // ✅ 시점 기록 - detailPanelClosedFromSource: sourceMenu, // ✅ 출처 - showGradientBackground: false, // ✅ 명시적으로 그라데이션 끔기 - } - })); + dispatch( + updateHomeInfo({ + name: panel_names.HOME_PANEL, + panelInfo: { + detailPanelClosed: true, // ✅ flag + detailPanelClosedAt: Date.now(), // ✅ 시점 기록 + detailPanelClosedFromSource: sourceMenu, // ✅ 출처 + showGradientBackground: false, // ✅ 명시적으로 그라데이션 끔기 + }, + }) + ); break; } @@ -215,8 +202,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { updatePanel({ name: panel_names.SEARCH_PANEL, panelInfo: { - detailPanelClosed: true, // ✅ flag - detailPanelClosedAt: Date.now(), // ✅ 시점 기록 + detailPanelClosed: true, // ✅ flag + detailPanelClosedAt: Date.now(), // ✅ 시점 기록 detailPanelClosedFromSource: sourceMenu, // ✅ 출처 }, }) @@ -253,7 +240,11 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { case panel_names.SEARCH_PANEL: default: // HomePanel, SearchPanel 등에서 온 경우: 백그라운드 비디오 일시 중지 - console.log('[DetailPanel] onBackClick - source panel:', sourcePanel, '백그라운드 비디오 일시 중지'); + console.log( + '[DetailPanel] onBackClick - source panel:', + sourcePanel, + '백그라운드 비디오 일시 중지' + ); dispatch(pauseFullscreenVideo()); // PLAYER_PANEL 비디오 중지 dispatch(finishModalMediaForce()); // MEDIA_PANEL(ProductVideo) 강제 종료 dispatch(finishVideoPreview()); @@ -271,7 +262,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { fp.pipe( () => panels, fp.get('length'), - (length) => length === 3 // PlayerPanel이 [1]에 있고 DetailPanel이 [2]에 있는 상태 + (length) => length === 3 // PlayerPanel이 [1]에 있고 DetailPanel이 [2]에 있는 상태 )() && fp.pipe( () => panels, @@ -280,14 +271,16 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { )(); if (shouldUpdatePanel) { - console.log('[DetailPanel] onBackClick - PlayerPanel에 detailPanelClosed flag 전달'); + console.log( + '[DetailPanel] onBackClick - PlayerPanel에 detailPanelClosed flag 전달' + ); dispatch( updatePanel({ name: panel_names.PLAYER_PANEL, panelInfo: { thumbnail: fp.pipe(() => panelInfo, fp.get('thumbnailUrl'))(), - detailPanelClosed: true, // ✅ flag - detailPanelClosedAt: Date.now(), // ✅ 시점 기록 + detailPanelClosed: true, // ✅ flag + detailPanelClosedAt: Date.now(), // ✅ 시점 기록 detailPanelClosedFromSource: sourceMenu, // ✅ 출처 lastFocusedTargetId: panelInfo?.lastFocusedTargetId, // ✅ 포커스 복원 타겟 전달 }, @@ -300,15 +293,17 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { case panel_names.HOME_PANEL: { // HomePanel에서 온 경우: HomePanel에 detailPanelClosed flag 전달 console.log('[DetailPanel] onBackClick - HomePanel에 detailPanelClosed flag 전달'); - dispatch(updateHomeInfo({ - name: panel_names.HOME_PANEL, - panelInfo: { - detailPanelClosed: true, // ✅ flag - detailPanelClosedAt: Date.now(), // ✅ 시점 기록 - detailPanelClosedFromSource: sourceMenu, // ✅ 출처 - showGradientBackground: false, - } - })); + dispatch( + updateHomeInfo({ + name: panel_names.HOME_PANEL, + panelInfo: { + detailPanelClosed: true, // ✅ flag + detailPanelClosedAt: Date.now(), // ✅ 시점 기록 + detailPanelClosedFromSource: sourceMenu, // ✅ 출처 + showGradientBackground: false, + }, + }) + ); break; } @@ -319,8 +314,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { updatePanel({ name: panel_names.SEARCH_PANEL, panelInfo: { - detailPanelClosed: true, // ✅ flag - detailPanelClosedAt: Date.now(), // ✅ 시점 기록 + detailPanelClosed: true, // ✅ flag + detailPanelClosedAt: Date.now(), // ✅ 시점 기록 detailPanelClosedFromSource: sourceMenu, // ✅ 출처 }, }) @@ -843,9 +838,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { // 백그라운드 전체화면 비디오 제어: DetailPanel 진입/퇴장 시 useEffect(() => { // PlayerPanel이 존재하는지 확인 (Modal 또는 Fullscreen) - const playerPanel = panels.find( - (panel) => panel.name === panel_names.PLAYER_PANEL - ); + const playerPanel = panels.find((panel) => panel.name === panel_names.PLAYER_PANEL); const hasPlayerPanel = !!playerPanel; const isModal = playerPanel?.panelInfo?.modal; @@ -856,7 +849,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { hasPlayerPanel, isModal, hasProductVideo, - sourceMenu: panelInfo?.sourceMenu + sourceMenu: panelInfo?.sourceMenu, }); // PlayerPanel이 있고, 제품에 비디오가 있을 때만 비디오 멈춤 @@ -916,7 +909,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { return (
- { - console.log('📱 [ProductAllSection] TScrollerDetail onClick 감지됨', { - eventType: e.type, - target: e.target?.className, - currentTarget: e.currentTarget?.className, - bubbles: e.bubbles, - defaultPrevented: e.defaultPrevented, - timestamp: new Date().getTime(), - eventPath: e - .composedPath?.() - .slice(0, 5) - .map((el) => ({ - tag: el.tagName, - className: el.className, - id: el.id, - })), - }); + // console.log('📱 [ProductAllSection] TScrollerDetail onClick 감지됨', { + // eventType: e.type, + // target: e.target?.className, + // currentTarget: e.currentTarget?.className, + // bubbles: e.bubbles, + // defaultPrevented: e.defaultPrevented, + // timestamp: new Date().getTime(), + // eventPath: e + // .composedPath?.() + // .slice(0, 5) + // .map((el) => ({ + // tag: el.tagName, + // className: el.className, + // id: el.id, + // })), + // }); }, []); // ContentContainer 레벨 클릭 이벤트 추적 const handleContentContainerClick = useCallback((e) => { - console.log('🎯 [ProductAllSection] ContentContainer onClick 감지됨', { - eventType: e.type, - target: e.target?.className, - currentTarget: e.currentTarget?.className, - bubbles: e.bubbles, - defaultPrevented: e.defaultPrevented, - eventPath: e - .composedPath?.() - .slice(0, 8) - .map((el) => ({ - tag: el.tagName, - className: el.className, - id: el.id, - })), - }); + // console.log('🎯 [ProductAllSection] ContentContainer onClick 감지됨', { + // eventType: e.type, + // target: e.target?.className, + // currentTarget: e.currentTarget?.className, + // bubbles: e.bubbles, + // defaultPrevented: e.defaultPrevented, + // eventPath: e + // .composedPath?.() + // .slice(0, 8) + // .map((el) => ({ + // tag: el.tagName, + // className: el.className, + // id: el.id, + // })), + // }); }, []); // ADD TO CART 버튼 클릭 핸들러 @@ -998,7 +998,7 @@ export default function ProductAllSection({ // 아래로 스크롤: 즉시 1px 축소 (HomePanel과 동일) if (isScrollingDown && currentScrollTop > 0) { - console.log('🚀 [ProductVideo.v3] onScroll Down - immediate minimize'); + // console.log('🚀 [ProductVideo.v3] onScroll Down - immediate minimize'); dispatch(minimizeModalMedia()); setShouldMinimizeMedia(true); @@ -1010,7 +1010,7 @@ export default function ProductAllSection({ } // 위로 스크롤 (최상단 아님): 1초 후 복구 else if (!isScrollingDown && currentScrollTop > 1) { - console.log('🚀 [ProductVideo.v3] onScroll Up - expand after 1s'); + // console.log('🚀 [ProductVideo.v3] onScroll Up - expand after 1s'); if (scrollExpandTimerRef.current) { clearTimeout(scrollExpandTimerRef.current); @@ -1023,7 +1023,7 @@ export default function ProductAllSection({ } // 최상단 도달: 즉시 복구 (HomePanel과 동일) else if (currentScrollTop <= 1) { - console.log('🚀 [ProductVideo.v3] onScroll AtTop - immediate expand'); + // console.log('🚀 [ProductVideo.v3] onScroll AtTop - immediate expand'); dispatch(restoreModalMedia()); setShouldMinimizeMedia(false); @@ -1053,12 +1053,12 @@ export default function ProductAllSection({ } } - console.log('📍 [ProductAllSection] 스크롤 멈춤 - 위치:', currentScrollTop); + // console.log('📍 [ProductAllSection] 스크롤 멈춤 - 위치:', currentScrollTop); const shouldMinimize = currentScrollTop > 0; setShouldMinimizeMedia((prev) => { if (prev === shouldMinimize) return prev; - console.log('📍 [ProductAllSection] setShouldMinimizeMedia 호출:', shouldMinimize); + // console.log('📍 [ProductAllSection] setShouldMinimizeMedia 호출:', shouldMinimize); return shouldMinimize; }); }, @@ -1067,11 +1067,11 @@ export default function ProductAllSection({ useEffect(() => { if (shouldMinimizeMedia && !mediaMinimizedRef.current) { - console.log('📍 [ProductAllSection] MediaPanel 최소화 (effect)'); + // console.log('📍 [ProductAllSection] MediaPanel 최소화 (effect)'); dispatch(minimizeModalMedia()); mediaMinimizedRef.current = true; } else if (!shouldMinimizeMedia && mediaMinimizedRef.current) { - console.log('📍 [ProductAllSection] MediaPanel 복원 (effect)'); + // console.log('📍 [ProductAllSection] MediaPanel 복원 (effect)'); dispatch(restoreModalMedia()); mediaMinimizedRef.current = false; } @@ -1181,7 +1181,7 @@ export default function ProductAllSection({ // 컴포넌트 unmount 시 timer cleanup useEffect(() => { return () => { - console.log('[ProductAllSection] unmount - cleanup 시작'); + // console.log('[ProductAllSection] unmount - cleanup 시작'); // QR code timer cleanup if (timerRef.current) { @@ -1208,7 +1208,7 @@ export default function ProductAllSection({ // 🔽 useDetailFocus 포커스 타이머는 Hook의 useEffect cleanup에서 자동으로 정리됨 - console.log('[ProductAllSection] cleanup 완료 on unmount'); + // console.log('[ProductAllSection] cleanup 완료 on unmount'); }; }, []); @@ -1501,7 +1501,7 @@ export default function ProductAllSection({ continuousPlay={true} onVideoPlaying={() => setIsVideoPlaying(true)} onScrollToImages={handleScrollToImagesV1} - onFocus={() => console.log('[ProductVideo V1] Focused')} + onFocus={() => {}} data-spotlight-id="product-video-player-container" /> ) : ( diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx index 375808b2..f38d04f5 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx @@ -1,18 +1,11 @@ // src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import ImagePreloader from '../../../../utils/ImagePreloader'; 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 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'; @@ -29,7 +22,11 @@ import css from './DetailPanelBackground.module.less'; * - 이 값에 따라 배경 UI를 다르게 표시할 수 있음 * @param {Function} onImageReady - 이미지가 DOM에 완전히 렌더링되었을 때 호출되는 콜백 */ -export default function DetailPanelBackground({ launchedFromPlayer = false, patnrId, onImageReady }) { +export default function DetailPanelBackground({ + launchedFromPlayer = false, + patnrId, + onImageReady, +}) { const [imageReady, setImageReady] = useState(false); const imgRef = useRef(null); @@ -59,16 +56,16 @@ export default function DetailPanelBackground({ launchedFromPlayer = false, patn const isDOMReady = isLoaded && isRendered; - if (isDOMReady) { - console.log('[DetailPanelBackground] ✅ 이미지 DOM 완전 렌더링 완료:', { - imgSrc: detailPanelBg, - complete: img.complete, - naturalWidth: img.naturalWidth, - naturalHeight: img.naturalHeight, - offsetHeight: img.offsetHeight, - offsetWidth: img.offsetWidth, - }); - } + // if (isDOMReady) { + // console.log('[DetailPanelBackground] ✅ 이미지 DOM 완전 렌더링 완료:', { + // imgSrc: detailPanelBg, + // complete: img.complete, + // naturalWidth: img.naturalWidth, + // naturalHeight: img.naturalHeight, + // offsetHeight: img.offsetHeight, + // offsetWidth: img.offsetWidth, + // }); + // } return isDOMReady; }, [detailPanelBg]); @@ -78,26 +75,26 @@ export default function DetailPanelBackground({ launchedFromPlayer = false, patn useEffect(() => { // launchedFromPlayer가 true이면 배경 이미지를 로드하지 않음 (PlayerPanel 비디오 보이도록) if (launchedFromPlayer) { - console.log('[DetailPanelBackground] Skip background image loading - launchedFromPlayer=true (showing PlayerPanel video)'); + // console.log('[DetailPanelBackground] Skip background image loading - launchedFromPlayer=true (showing PlayerPanel video)'); setImageReady(false); return; } // launchedFromPlayer가 false일 때만 배경 이미지 로드 - console.log('[DetailPanelBackground] Loading background image - launchedFromPlayer=false'); + // console.log('[DetailPanelBackground] Loading background image - launchedFromPlayer=false'); if (ImagePreloader.isLoaded(detailPanelBg)) { - console.log('[DetailPanelBackground] Using preloaded image:', detailPanelBg); + // console.log('[DetailPanelBackground] Using preloaded image:', detailPanelBg); setImageReady(true); } else { // 프리로드되지 않았다면 즉시 로드 시도 - console.log('[DetailPanelBackground] Image not preloaded, loading on-demand:', detailPanelBg); + // console.log('[DetailPanelBackground] Image not preloaded, loading on-demand:', detailPanelBg); ImagePreloader.preloadImage(detailPanelBg) .then(() => { - console.log('[DetailPanelBackground] On-demand image loaded:', detailPanelBg); + // console.log('[DetailPanelBackground] On-demand image loaded:', detailPanelBg); setImageReady(true); }) .catch((e) => { - console.error('[DetailPanelBackground] On-demand image load failed:', e); + // console.error('[DetailPanelBackground] On-demand image load failed:', e); // 실패해도 이미지를 표시해야 함 setImageReady(true); }); @@ -137,23 +134,18 @@ export default function DetailPanelBackground({ launchedFromPlayer = false, patn } }, [imageReady, onImageReady, checkImageFullyLoaded]); - useEffect(() => { - console.log('[DetailPanelBackground] 배경 이미지 경로:', detailPanelBg); - console.log('[DetailPanelBackground] launchedFromPlayer:', launchedFromPlayer); - console.log('[DetailPanelBackground] imageReady:', imageReady); - }, [detailPanelBg, launchedFromPlayer, imageReady]); + // useEffect(() => { + // console.log('[DetailPanelBackground] 배경 이미지 경로:', detailPanelBg); + // console.log('[DetailPanelBackground] launchedFromPlayer:', launchedFromPlayer); + // console.log('[DetailPanelBackground] imageReady:', imageReady); + // }, [detailPanelBg, launchedFromPlayer, imageReady]); //partnrId 1 = QVC, 2 = HSN, 4 = ONTV, 9 = LG ELECTRONICS, 11 = SHOPLC, 19 = PINKPONG, 16 = KOREA KIOSK, return (
{/* 이미지가 준비되지 않았을 때 placeholder 표시 */} - {!imageReady && ( -