optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[251122] fix: Comment정리-1

Browse Source 
🕐 커밋 시간: 2025. 11. 22. 18:19:45

📊 변경 통계:
  • 총 파일: 10개
  • 추가: +150줄
  • 삭제: -152줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/App/App.js
  ~ com.twin.app.shoptime/src/actions/panelActions.js
  ~ com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js
  ~ com.twin.app.shoptime/src/utils/ImagePreloader.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.v2.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/FavoriteBtn.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/App/App.js (javascript):
    ❌ Deleted: resolveSpotlightIdFromEvent()
  📄 com.twin.app.shoptime/src/actions/panelActions.js (javascript):
    🔄 Modified: resetPanels()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    🔄 Modified: extractProductMeta()
  📄 com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.v2.jsx (javascript):
    ❌ Deleted: logDetailPanelInit(), logImageLoaded(), logImageError()
  📄 com.twin.app.shoptime/src/views/DetailPanel/components/FavoriteBtn.jsx (javascript):
    🔄 Modified: Spottable()

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

Performance: 코드 최적화로 성능 개선 기대
This commit is contained in:
hyeon soo noh
2025-11-22 18:19:45 +09:00
parent 9878c39512
commit 251e1ee3d4
10 changed files with 304 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
View File

@@ -57,13 +57,13 @@ import shoplc from '../../../assets/images/bg/shoplc_new.png';
// 파트너사별 배경 이미지 맵
const BACKGROUND_IMAGES = {
1: qvc, // QVC
2: hsn, // HSN
4: ontv4u, // ONTV
1: qvc, // QVC
2: hsn, // HSN
4: ontv4u, // ONTV
9: lgelectronics, // LG ELECTRONICS
11: shoplc, // SHOPLC
16: koreaKiosk, // KOREA KIOSK
19: Pinkfong, // PINKFONG
11: shoplc, // SHOPLC
16: koreaKiosk, // KOREA KIOSK
19: Pinkfong, // PINKFONG
};
// [COMMENTED OUT] useVideoMove 관련 코드 주석 처리 - 향후 사용 검토 필요
// import { useVideoMove } from '../../hooks/useVideoTransition/useVideoMove';
@@ -98,16 +98,16 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
const dispatch = useDispatch();
// ✅ showGradientBackground prop 변경 추적 로그
const prevShowGradientBackground = usePrevious(showGradientBackground);
useEffect(() => {
if (prevShowGradientBackground !== showGradientBackground) {
console.log('[TRACE-GRADIENT] 📊 HomePanel prop changed:', {
prev: prevShowGradientBackground,
current: showGradientBackground,
isOnTop: isOnTop
});
}
}, [showGradientBackground, prevShowGradientBackground, isOnTop]);
// const prevShowGradientBackground = usePrevious(showGradientBackground);
// useEffect(() => {
// if (prevShowGradientBackground !== showGradientBackground) {
// console.log('[TRACE-GRADIENT] 📊 HomePanel prop changed:', {
// prev: prevShowGradientBackground,
// current: showGradientBackground,
// isOnTop: isOnTop
// });
// }
// }, [showGradientBackground, prevShowGradientBackground, isOnTop]);
useDebugKey({ isLandingPage: true });
@@ -187,7 +187,6 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
const verticalPagenatorRef = useRef(null);
const currentSentMenuRef = useRef(null);
// ✅ [251119] DetailPanelBackground 이미지 프리로딩
// HomePanel 마운트 시 백그라운드로 모든 파트너사 배경 이미지를 미리 로드하여
// DetailPanel 진입 시 로딩 지연을 방지함
@@ -198,8 +197,10 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
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 successCount = results.filter((r) => r !== null).length;
console.log(
`[HomePanel] Background images preloaded: ${successCount}/${results.length} images`
);
// 프리로딩 통계 정보 로깅 (디버깅용)
const stats = ImagePreloader.getStats();
@@ -756,36 +757,36 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// 비디오가 재생이 아니면 videoPlayIntentRef의 bannerId로 비디오 재생
// [251116] isHomeOnTop인 경우에는 비디오가 항상 재생되어야 함
useEffect(() => {
console.log('[HomeActive] useEffect 실행 - isOnTop:', isOnTop);
console.log('[HomeActive] videoPlayIntentRef.current:', videoPlayIntentRef.current);
console.log(
'[HomeActive] panels 상태:',
panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal }))
);
// console.log('[HomeActive] useEffect 실행 - isOnTop:', isOnTop);
// console.log('[HomeActive] videoPlayIntentRef.current:', videoPlayIntentRef.current);
// console.log(
// '[HomeActive] panels 상태:',
// panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal }))
// );
const isHomePanelActive = isOnTop;
console.log('[HomeActive] isHomePanelActive:', isHomePanelActive);
// console.log('[HomeActive] isHomePanelActive:', isHomePanelActive);
if (!isHomePanelActive) {
console.log('[HomeActive] 조건 실패: isHomePanelActive가 false');
// console.log('[HomeActive] 조건 실패: isHomePanelActive가 false');
return;
}
if (!videoPlayIntentRef.current?.bannerId) {
console.log('[HomeActive] 조건 실패: videoPlayIntentRef.current?.bannerId가 없음', {
hasRef: !!videoPlayIntentRef.current,
hasBannerId: !!videoPlayIntentRef.current?.bannerId,
});
// console.log('[HomeActive] 조건 실패: videoPlayIntentRef.current?.bannerId가 없음', {
// hasRef: !!videoPlayIntentRef.current,
// hasBannerId: !!videoPlayIntentRef.current?.bannerId,
// });
return;
}
const bannerId = videoPlayIntentRef.current.bannerId;
console.log('[HomeActive] 비디오 재생 시도 - bannerId:', bannerId);
console.log('[HomeActive] 마지막 재생한 배너:', lastPlayedBannerIdRef.current);
// console.log('[HomeActive] 비디오 재생 시도 - bannerId:', bannerId);
// console.log('[HomeActive] 마지막 재생한 배너:', lastPlayedBannerIdRef.current);
// ✅ [251116] 중복 재생 방지: 같은 배너면 스킵
if (lastPlayedBannerIdRef.current === bannerId) {
console.log('[HomeActive] 중복 호출 감지 - 스킵 (이미 재생 중)');
// console.log('[HomeActive] 중복 호출 감지 - 스킵 (이미 재생 중)');
return;
}
@@ -799,7 +800,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// }
// ✅ [251116] startVideoPlayerNew로 비디오 자동 재생
console.log('[HomeActive] dispatch(startVideoPlayerNew) 호출 직전:', { bannerId, modal: true });
// console.log('[HomeActive] dispatch(startVideoPlayerNew) 호출 직전:', { bannerId, modal: true });
// Spotlight.focus(bannerId);
// dispatch(
@@ -809,11 +810,11 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// modalContainerId: 'banner-modal-' + bannerId,
// })
// );
console.log('[HomeActive] dispatch(startVideoPlayerNew) 호출 완료');
// console.log('[HomeActive] dispatch(startVideoPlayerNew) 호출 완료');
// 재생 기록 업데이트
lastPlayedBannerIdRef.current = bannerId;
console.log('[HomeActive] 재생 기록 업데이트:', bannerId);
// console.log('[HomeActive] 재생 기록 업데이트:', bannerId);
}, [isOnTop, dispatch]);
// ✅ [251120] DetailPanel 닫힘 감지 useEffect - detailPanelClosed flag 사용
@@ -826,13 +827,13 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
useEffect(() => {
if (detailPanelClosed && isOnTop) {
console.log('[TRACE-GRADIENT] 🔄 detailPanelClosed flag triggered - HomePanel reactivated');
console.log('[HomePanel] *** ✅ HomePanel isOnTop = true');
console.log('[HomePanel] *** detailPanelClosed:', detailPanelClosed);
console.log('[HomePanel] *** detailPanelClosedTime:', detailPanelClosedTime);
console.log('[HomePanel] *** isOnTop:', isOnTop);
console.log('[HomePanel] *** videoPlayIntentRef.current:', videoPlayIntentRef.current);
console.log('[HomePanel] *** lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current);
// console.log('[TRACE-GRADIENT] 🔄 detailPanelClosed flag triggered - HomePanel reactivated');
// console.log('[HomePanel] *** ✅ HomePanel isOnTop = true');
// console.log('[HomePanel] *** detailPanelClosed:', detailPanelClosed);
// console.log('[HomePanel] *** detailPanelClosedTime:', detailPanelClosedTime);
// console.log('[HomePanel] *** isOnTop:', isOnTop);
// console.log('[HomePanel] *** videoPlayIntentRef.current:', videoPlayIntentRef.current);
// console.log('[HomePanel] *** lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current);
// 🔽 videoPlayIntentRef가 null인 경우: 비디오 재생 가능한 첫 번째 배너 찾기
if (!videoPlayIntentRef.current && bannerDataList) {
@@ -858,7 +859,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
break;
}
} else if (
bannerDetailInfos.find((el) => el.shptmBanrTpNm === 'LIVE' || el.shptmBanrTpNm === 'VOD')
bannerDetailInfos.find(
(el) => el.shptmBanrTpNm === 'LIVE' || el.shptmBanrTpNm === 'VOD'
)
) {
targetIndex = i;
targetBannerData = data;
@@ -904,7 +907,12 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// 🔽 [251118] 현재 스크롤 위치 확인하여 비디오 크기 결정
const currentScrollTop = prevScrollTopRef.current;
const shouldShrink = currentScrollTop > 0;
console.log('[HomePanel] *** 비디오 복구 - currentScrollTop:', currentScrollTop, ', shouldShrink:', shouldShrink);
console.log(
'[HomePanel] *** 비디오 복구 - currentScrollTop:',
currentScrollTop,
', shouldShrink:',
shouldShrink
);
dispatch(
startVideoPlayerNew({
@@ -927,7 +935,15 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// 🔽 DetailPanel에서 돌아온 뒤 포커스를 마지막 포커스 대상에 복원
console.log('[HomePanel] *** 🎯 Focus 복원 준비');
const targetFocusId = panelInfo.lastFocusedTargetId || lastFocusedTargetRef.current;
console.log('[HomePanel] *** 📍 targetFocusId:', targetFocusId, '(panelInfo.lastFocusedTargetId:', panelInfo.lastFocusedTargetId, ', lastFocusedTargetRef:', lastFocusedTargetRef.current, ')');
console.log(
'[HomePanel] *** 📍 targetFocusId:',
targetFocusId,
'(panelInfo.lastFocusedTargetId:',
panelInfo.lastFocusedTargetId,
', lastFocusedTargetRef:',
lastFocusedTargetRef.current,
')'
);
if (targetFocusId) {
console.log('[HomePanel] *** ⏰ 300ms 후 Spotlight.focus 호출 예정');
setTimeout(() => {
@@ -944,14 +960,16 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
// detailPanelClosed 플래그 초기화 (다음 사이클에서 재사용 방지)
console.log('[HomePanel] *** detailPanelClosed flag 초기화');
dispatch(updateHomeInfo({
name: panel_names.HOME_PANEL,
panelInfo: {
detailPanelClosed: false,
detailPanelClosedAt: undefined,
detailPanelClosedFromSource: undefined,
}
}));
dispatch(
updateHomeInfo({
name: panel_names.HOME_PANEL,
panelInfo: {
detailPanelClosed: false,
detailPanelClosedAt: undefined,
detailPanelClosedFromSource: undefined,
},
})
);
}
}
}, [detailPanelClosed, isOnTop, bannerDataList, dispatch]);
@@ -1003,11 +1021,10 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
console.log('[HomePanel] 🔍 Modal 상태 체크:', {
prevModalState,
playerModalState,
shouldExecute: prevModalState === false && playerModalState === true
shouldExecute: prevModalState === false && playerModalState === true,
});
if (prevModalState === false && playerModalState === true) {
console.log('>>>>>[HomePanel] ▶️ PlayerPanel이 Fullscreen에서 Banner로 전환됨');
// 0.5초 후 비디오가 재생되는 배너에 포커스 테두리 효과 적용
// const focusTimer = setTimeout(() => {