[251124] fix: App.js 로그 정리 및 최적화-2
🕐 커밋 시간: 2025. 11. 24. 09:24:08 📊 변경 통계: • 총 파일: 5개 • 추가: +156줄 • 삭제: -111줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/empActions.js ~ com.twin.app.shoptime/src/hooks/useFocusHistory/useFocusHistory.js ~ com.twin.app.shoptime/src/lunaSend/common.js ~ com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx 🔧 함수 변경 내용: 📄 com.twin.app.shoptime/src/hooks/useFocusHistory/useFocusHistory.js (javascript): ✅ Added: dwarn(), derror() 🔄 Modified: getOrCreateGlobalBuffer() 📄 com.twin.app.shoptime/src/lunaSend/common.js (javascript): ✅ Added: dwarn(), derror() 📄 com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx (javascript): ✅ Added: dwarn(), derror() 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선
This commit is contained in:
@@ -53,6 +53,21 @@ import usePrevious from '../../hooks/usePrevious';
|
||||
import { useVideoPlay } from '../../hooks/useVideoPlay/useVideoPlay';
|
||||
import ImagePreloader from '../../utils/ImagePreloader';
|
||||
|
||||
// Toggle debug logging for this module (false by default)
|
||||
const DEBUG_MODE = false;
|
||||
|
||||
const dlog = (...args) => {
|
||||
if (DEBUG_MODE) console.log(...args);
|
||||
};
|
||||
|
||||
const dwarn = (...args) => {
|
||||
if (DEBUG_MODE) console.warn(...args);
|
||||
};
|
||||
|
||||
const derror = (...args) => {
|
||||
console.error(...args);
|
||||
};
|
||||
|
||||
// DetailPanelBackground 이미지 imports for preloading
|
||||
import hsn from '../../../assets/images/bg/hsn_new.png';
|
||||
import koreaKiosk from '../../../assets/images/bg/koreaKiosk_new.png';
|
||||
@@ -233,23 +248,21 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
// HomePanel 마운트 시 백그라운드로 모든 파트너사 배경 이미지를 미리 로드하여
|
||||
// DetailPanel 진입 시 로딩 지연을 방지함
|
||||
useEffect(() => {
|
||||
console.log('[HomePanel] Starting background image preloading...');
|
||||
dlog('[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`
|
||||
);
|
||||
dlog(`[HomePanel] Background images preloaded: ${successCount}/${results.length} images`);
|
||||
|
||||
// 프리로딩 통계 정보 로깅 (디버깅용)
|
||||
const stats = ImagePreloader.getStats();
|
||||
console.log('[HomePanel] Preloader stats:', stats);
|
||||
dlog('[HomePanel] Preloader stats:', stats);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('[HomePanel] Background image preloading failed:', error);
|
||||
derror('[HomePanel] Background image preloading failed:', error);
|
||||
// 프리로딩 실패가 HomePanel 기능에 영향을 주지 않도록 조용히 처리
|
||||
});
|
||||
}, 1000); // HomePanel 안정화 후 1초 뒤 시작
|
||||
@@ -299,7 +312,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
const handleOptionalAgree = useCallback(() => {
|
||||
if (!termsIdMap || Object.keys(termsIdMap).length === 0) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error('[HomePanel] termsIdMap이 없습니다:', termsIdMap);
|
||||
derror('[HomePanel] termsIdMap이 없습니다:', termsIdMap);
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -309,7 +322,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
|
||||
if (missingTerms.length > 0) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error('[HomePanel] 누락된 약관 타입:', missingTerms);
|
||||
derror('[HomePanel] 누락된 약관 타입:', missingTerms);
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -329,8 +342,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
const notTermsList = [];
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('[HomePanel] 현재 termsIdMap:', termsIdMap);
|
||||
console.log('[HomePanel] 약관 동의 API 호출 파라미터:', {
|
||||
dlog('[HomePanel] 현재 termsIdMap:', termsIdMap);
|
||||
dlog('[HomePanel] 약관 동의 API 호출 파라미터:', {
|
||||
termsList,
|
||||
notTermsList,
|
||||
});
|
||||
@@ -339,13 +352,13 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
const callback = (response) => {
|
||||
if (response.retCode === '000' || response.retCode === 0) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('[HomePanel] 약관 동의 성공:', response);
|
||||
dlog('[HomePanel] 약관 동의 성공:', response);
|
||||
}
|
||||
dispatch(updateOptionalTermsAgreement(true));
|
||||
setOptionalTermsAgreed(true);
|
||||
} else {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error('[HomePanel] 약관 동의 실패:', response);
|
||||
derror('[HomePanel] 약관 동의 실패:', response);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -355,7 +368,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
|
||||
const handleOptionalTermsClick = useCallback(() => {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('[HomePanel] 약관 자세히 보기 클릭');
|
||||
dlog('[HomePanel] 약관 자세히 보기 클릭');
|
||||
}
|
||||
setIsOptionalConfirmVisible(false);
|
||||
setIsOptionalTermsVisible(true);
|
||||
@@ -375,7 +388,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
|
||||
const handleOptionalDeclineClick = useCallback(() => {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('[HomePanel] 거절/다음에 하기 버튼 클릭');
|
||||
dlog('[HomePanel] 거절/다음에 하기 버튼 클릭');
|
||||
}
|
||||
dispatch(updateOptionalTermsAgreement(false));
|
||||
setIsOptionalConfirmVisible(false);
|
||||
@@ -389,7 +402,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
|
||||
const handleTermsPopupAgree = useCallback(() => {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('[HomePanel] handleTermsPopupAgree');
|
||||
dlog('[HomePanel] handleTermsPopupAgree');
|
||||
}
|
||||
handleOptionalAgree();
|
||||
setIsOptionalTermsVisible(false);
|
||||
@@ -439,8 +452,8 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
}
|
||||
|
||||
if (shouldShowOptionalTermsPopup && !isOptionalConfirmVisible) {
|
||||
console.log('shouldShowOptionalTermsPopup', shouldShowOptionalTermsPopup);
|
||||
console.log('HomePanel optionalTermsConfirm 팝업 표시');
|
||||
dlog('shouldShowOptionalTermsPopup', shouldShowOptionalTermsPopup);
|
||||
dlog('HomePanel optionalTermsConfirm 팝업 표시');
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setIsOptionalConfirmVisible(true);
|
||||
@@ -812,14 +825,14 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
const _onFocusedContainerId = useCallback(
|
||||
(containerId) => {
|
||||
setFocusedContainerId(containerId);
|
||||
console.log('[_onFocusedContainerId] 호출됨:', {
|
||||
dlog('[_onFocusedContainerId] 호출됨:', {
|
||||
containerId,
|
||||
enterThroughGNB,
|
||||
isOnTop,
|
||||
condition: enterThroughGNB && cbChangePageRef.current && !isOnTop,
|
||||
});
|
||||
if (enterThroughGNB && cbChangePageRef.current && !isOnTop) {
|
||||
console.log('[_onFocusedContainerId] ⚠️ 맨 위로 스크롤 강제 실행!');
|
||||
dlog('[_onFocusedContainerId] ⚠️ 맨 위로 스크롤 강제 실행!');
|
||||
Spotlight.resume();
|
||||
cbChangePageRef.current(0, false);
|
||||
Spotlight.focus(defaultFocus);
|
||||
@@ -1034,7 +1047,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
|
||||
// 🔽 videoPlayIntentRef가 null인 경우: 비디오 재생 가능한 첫 번째 배너 찾기
|
||||
if (!videoPlayIntentRef.current && bannerDataList) {
|
||||
console.log('[HomePanel] *** videoPlayIntentRef가 null - 첫 번째 비디오 배너 검색');
|
||||
dlog('[HomePanel] *** videoPlayIntentRef가 null - 첫 번째 비디오 배너 검색');
|
||||
|
||||
// HomeBanner.jsx의 defaultFocus 계산 로직과 동일
|
||||
let targetIndex = 0;
|
||||
@@ -1069,7 +1082,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
|
||||
if (targetBannerData && videoData) {
|
||||
const bannerId = 'banner' + targetIndex;
|
||||
console.log('[HomePanel] *** 찾은 비디오 배너:', bannerId, videoData);
|
||||
dlog('[HomePanel] *** 찾은 비디오 배너:', bannerId, videoData);
|
||||
|
||||
// videoPlayIntentRef에 값 할당 (HomeBanner.jsx의 초기 재생 로직과 동일)
|
||||
videoPlayIntentRef.current = {
|
||||
@@ -1088,9 +1101,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
};
|
||||
|
||||
lastPlayedBannerIdRef.current = bannerId;
|
||||
console.log('[HomePanel] *** videoPlayIntentRef 설정 완료:', videoPlayIntentRef.current);
|
||||
dlog('[HomePanel] *** videoPlayIntentRef 설정 완료:', videoPlayIntentRef.current);
|
||||
} else {
|
||||
console.log('[HomePanel] *** ⚠️ 비디오 재생 가능한 배너를 찾지 못함');
|
||||
dlog('[HomePanel] *** ⚠️ 비디오 재생 가능한 배너를 찾지 못함');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1104,7 +1117,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
// 🔽 [251118] 현재 스크롤 위치 확인하여 비디오 크기 결정
|
||||
const currentScrollTop = prevScrollTopRef.current;
|
||||
const shouldShrink = currentScrollTop > 0;
|
||||
console.log(
|
||||
dlog(
|
||||
'[HomePanel] *** 비디오 복구 - currentScrollTop:',
|
||||
currentScrollTop,
|
||||
', shouldShrink:',
|
||||
@@ -1130,9 +1143,9 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
);
|
||||
|
||||
// 🔽 DetailPanel에서 돌아온 뒤 포커스를 마지막 포커스 대상에 복원
|
||||
console.log('[HomePanel] *** 🎯 Focus 복원 준비');
|
||||
dlog('[HomePanel] *** 🎯 Focus 복원 준비');
|
||||
const targetFocusId = panelInfo.lastFocusedTargetId || lastFocusedTargetRef.current;
|
||||
console.log(
|
||||
dlog(
|
||||
'[HomePanel] *** 📍 targetFocusId:',
|
||||
targetFocusId,
|
||||
'(panelInfo.lastFocusedTargetId:',
|
||||
@@ -1142,13 +1155,13 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
')'
|
||||
);
|
||||
if (targetFocusId) {
|
||||
console.log('[HomePanel] *** ⏰ 300ms 후 Spotlight.focus 호출 예정');
|
||||
dlog('[HomePanel] *** ⏰ 300ms 후 Spotlight.focus 호출 예정');
|
||||
setTimeout(() => {
|
||||
console.log('[HomePanel] *** 🔍 Spotlight.focus 호출:', targetFocusId);
|
||||
dlog('[HomePanel] *** 🔍 Spotlight.focus 호출:', targetFocusId);
|
||||
Spotlight.focus(targetFocusId);
|
||||
}, 300);
|
||||
} else {
|
||||
console.log('[HomePanel] *** ⚠️ targetFocusId가 없음 - Focus 복원 스킵');
|
||||
dlog('[HomePanel] *** ⚠️ targetFocusId가 없음 - Focus 복원 스킵');
|
||||
}
|
||||
|
||||
// refs 초기화
|
||||
@@ -1156,7 +1169,7 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
lastPlayedBannerIdRef.current = null;
|
||||
|
||||
// detailPanelClosed 플래그 초기화 (다음 사이클에서 재사용 방지)
|
||||
console.log('[HomePanel] *** detailPanelClosed flag 초기화');
|
||||
dlog('[HomePanel] *** detailPanelClosed flag 초기화');
|
||||
dispatch(
|
||||
updateHomeInfo({
|
||||
name: panel_names.HOME_PANEL,
|
||||
@@ -1236,14 +1249,14 @@ const HomePanel = ({ isOnTop, showGradientBackground = false }) => {
|
||||
useEffect(() => {
|
||||
const prevModalState = prevPlayerModalStateRef.current;
|
||||
|
||||
console.log('[HomePanel] 🔍 Modal 상태 체크:', {
|
||||
dlog('[HomePanel] 🔍 Modal 상태 체크:', {
|
||||
prevModalState,
|
||||
playerModalState,
|
||||
shouldExecute: prevModalState === false && playerModalState === true,
|
||||
});
|
||||
|
||||
if (prevModalState === false && playerModalState === true) {
|
||||
console.log('>>>>>[HomePanel] ▶️ PlayerPanel이 Fullscreen에서 Banner로 전환됨');
|
||||
dlog('>>>>>[HomePanel] ▶️ PlayerPanel이 Fullscreen에서 Banner로 전환됨');
|
||||
// 0.5초 후 비디오가 재생되는 배너에 포커스 테두리 효과 적용
|
||||
// const focusTimer = setTimeout(() => {
|
||||
// if (videoPlayIntentRef.current?.bannerId) {
|
||||
|
||||
Reference in New Issue
Block a user