[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:
2025-11-24 09:24:08 +09:00
parent 6d0cf78534
commit e2a50b62ab
5 changed files with 479 additions and 360 deletions

View File

@@ -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) {