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

[251216] fix: 로그정리,PlayerPanel ShopNowContents

Browse Source 
🕐 커밋 시간: 2025. 12. 16. 16:07:17

📊 변경 통계:
  • 총 파일: 11개
  • 추가: +94줄
  • 삭제: -90줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/mediaActions.js
  ~ com.twin.app.shoptime/src/actions/panelActions.js
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js
  ~ com.twin.app.shoptime/src/reducers/panelReducer.js
  ~ com.twin.app.shoptime/src/utils/lodashFpEx.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.module.less
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 공통 유틸리티 함수 최적화
  • 소규모 기능 개선
  • 코드 정리 및 최적화
  • 모듈 구조 개선
This commit is contained in:
hyeon soo noh
2025-12-16 16:07:19 +09:00
parent c9b2e5daf5
commit 61f67708a9
11 changed files with 94 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
com.twin.app.shoptime/src/actions/mediaActions.js
View File

@@ -99,10 +99,10 @@ export const finishMediaPreview = () => (dispatch, getState) => {
export const finishModalMediaForce = () => (dispatch, getState) => { export const finishModalMediaForce = () => (dispatch, getState) => {
const panels = getState().panels.panels; const panels = getState().panels.panels;
console.log('[🟡UNIQUE_DETAIL_CLEANUP🟡] finishModalMediaForce called', { // console.log('[🟡UNIQUE_DETAIL_CLEANUP🟡] finishModalMediaForce called', {
panelCount: panels.length, // panelCount: panels.length,
panelNames: panels.map((p) => p.name), // panelNames: panels.map((p) => p.name),
}); // });
const hasProductVideoPanel = panels.some( const hasProductVideoPanel = panels.some(
(panel) => (panel) =>
@@ -110,14 +110,14 @@ export const finishModalMediaForce = () => (dispatch, getState) => {
(panel.panelInfo?.modal || panel.panelInfo?.modalContainerId === 'product-video-player') (panel.panelInfo?.modal || panel.panelInfo?.modalContainerId === 'product-video-player')
); );
console.log('[🟡UNIQUE_DETAIL_CLEANUP🟡] hasProductVideoPanel:', hasProductVideoPanel); // console.log('[🟡UNIQUE_DETAIL_CLEANUP🟡] hasProductVideoPanel:', hasProductVideoPanel);
if (hasProductVideoPanel) { if (hasProductVideoPanel) {
if (startMediaFocusTimer) { if (startMediaFocusTimer) {
clearTimeout(startMediaFocusTimer); clearTimeout(startMediaFocusTimer);
startMediaFocusTimer = null; startMediaFocusTimer = null;
} }
console.log('[🟡UNIQUE_DETAIL_CLEANUP🟡] Calling popPanel(panel_names.MEDIA_PANEL)'); // console.log('[🟡UNIQUE_DETAIL_CLEANUP🟡] Calling popPanel(panel_names.MEDIA_PANEL)');
dispatch(popPanel(panel_names.MEDIA_PANEL)); dispatch(popPanel(panel_names.MEDIA_PANEL));
} }
}; };

12
com.twin.app.shoptime/src/actions/panelActions.js
View File

@@ -6,7 +6,7 @@ import { updateHomeInfo } from './homeActions';
import { createDebugHelpers } from '../utils/debug'; import { createDebugHelpers } from '../utils/debug';
// 디버그 헬퍼 설정 // 디버그 헬퍼 설정
const DEBUG_MODE = true; const DEBUG_MODE = false;
const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE); const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
// 시작 메뉴 추적을 위한 상수 // 시작 메뉴 추적을 위한 상수
@@ -43,11 +43,11 @@ export const popPanel = (panelName) => {
const stack = new Error().stack; const stack = new Error().stack;
const stackLines = stack?.split('\n') || []; const stackLines = stack?.split('\n') || [];
console.log('[💜UNIQUE_PANEL_STACK💜] popPanel action dispatcher - REMOVING PANEL:', { // console.log('[💜UNIQUE_PANEL_STACK💜] popPanel action dispatcher - REMOVING PANEL:', {
panelName, // panelName,
timestamp: Date.now(), // timestamp: Date.now(),
fullStack: stackLines.slice(1, 6).map((line) => line.trim()), // fullStack: stackLines.slice(1, 6).map((line) => line.trim()),
}); // });
if (DEBUG_MODE) { if (DEBUG_MODE) {
console.log('[💜UNIQUE_PANEL_STACK💜] popPanel action creator stack:', { console.log('[💜UNIQUE_PANEL_STACK💜] popPanel action creator stack:', {

60
com.twin.app.shoptime/src/actions/playActions.js
View File

@@ -74,7 +74,7 @@ export const startVideoPlayer =
}) => }) =>
(dispatch, getState) => { (dispatch, getState) => {
const caller = new Error().stack?.split('\n')[2]?.trim(); const caller = new Error().stack?.split('\n')[2]?.trim();
console.log('[PTRACE-SP] startVideoPlayer call', { dlog('[PTRACE-SP] startVideoPlayer call', {
modal, modal,
modalContainerId, modalContainerId,
modalClassName, modalClassName,
@@ -115,7 +115,7 @@ export const startVideoPlayer =
// 기존 PlayerPanel이 어디든 있으면 완전히 초기화: 타이머 정리 후 pop → 새로 push // 기존 PlayerPanel이 어디든 있으면 완전히 초기화: 타이머 정리 후 pop → 새로 push
if (existingPlayerPanel) { if (existingPlayerPanel) {
console.log('[PTRACE-SP] startVideoPlayer: popping existing player before push', { dlog('[PTRACE-SP] startVideoPlayer: popping existing player before push', {
stack: panels.map((p) => p.name), stack: panels.map((p) => p.name),
}); });
dlog('[startVideoPlayer] 🔄 Resetting existing PLAYER_PANEL before start'); dlog('[startVideoPlayer] 🔄 Resetting existing PLAYER_PANEL before start');
@@ -148,14 +148,14 @@ export const startVideoPlayer =
// [COMMENTED OUT] 비디오 재생 시 강제 포커스 이동 비활성화 // [COMMENTED OUT] 비디오 재생 시 강제 포커스 이동 비활성화
// if (modal && modalContainerId && !spotlightDisable) { // if (modal && modalContainerId && !spotlightDisable) {
// console.log('[startVideoPlayer] 🎯 Setting Spotlight focus - containerId:', modalContainerId); // dlog('[startVideoPlayer] 🎯 Setting Spotlight focus - containerId:', modalContainerId);
// Spotlight.setPointerMode(false); // Spotlight.setPointerMode(false);
// startVideoFocusTimer = setTimeout(() => { // startVideoFocusTimer = setTimeout(() => {
// console.log('[startVideoPlayer] 🔍 Spotlight.focus called'); // dlog('[startVideoPlayer] 🔍 Spotlight.focus called');
// Spotlight.focus(modalContainerId); // Spotlight.focus(modalContainerId);
// }, 0); // }, 0);
// } else { // } else {
// console.log('[startVideoPlayer] ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable); // dlog('[startVideoPlayer] ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable);
// } // }
dlog('[startVideoPlayer] ✅ END'); dlog('[startVideoPlayer] ✅ END');
@@ -196,7 +196,7 @@ export const startVideoPlayerNew =
}) => }) =>
(dispatch, getState) => { (dispatch, getState) => {
const caller = new Error().stack?.split('\n')[2]?.trim(); const caller = new Error().stack?.split('\n')[2]?.trim();
console.log('[PTRACE-SPN] startVideoPlayerNew call', { dlog('[PTRACE-SPN] startVideoPlayerNew call', {
bannerId, bannerId,
modal, modal,
modalContainerId, modalContainerId,
@@ -239,7 +239,7 @@ export const startVideoPlayerNew =
// 기존 PlayerPanel이 있으면 완전히 초기화: 타이머 정리 후 pop → 새로 push // 기존 PlayerPanel이 있으면 완전히 초기화: 타이머 정리 후 pop → 새로 push
if (existingPlayerPanel) { if (existingPlayerPanel) {
console.log('[PTRACE-SPN] popping existing player before push', { dlog('[PTRACE-SPN] popping existing player before push', {
stack: panels.map((p) => p.name), stack: panels.map((p) => p.name),
}); });
dlog('[startVideoPlayerNew] *** 🔄 Resetting existing PLAYER_PANEL before start'); dlog('[startVideoPlayerNew] *** 🔄 Resetting existing PLAYER_PANEL before start');
@@ -332,14 +332,14 @@ export const startVideoPlayerNew =
// [COMMENTED OUT] 비디오 재생 시 강제 포커스 이동 비활성화 // [COMMENTED OUT] 비디오 재생 시 강제 포커스 이동 비활성화
// if (modal && modalContainerId && !spotlightDisable) { // if (modal && modalContainerId && !spotlightDisable) {
// console.log('[startVideoPlayerNew] *** 🎯 Setting Spotlight focus - containerId:', modalContainerId); // dlog('[startVideoPlayerNew] *** 🎯 Setting Spotlight focus - containerId:', modalContainerId);
// Spotlight.setPointerMode(false); // Spotlight.setPointerMode(false);
// startVideoFocusTimer = setTimeout(() => { // startVideoFocusTimer = setTimeout(() => {
// console.log('[startVideoPlayerNew] *** 🔍 Spotlight.focus called'); // dlog('[startVideoPlayerNew] *** 🔍 Spotlight.focus called');
// Spotlight.focus(modalContainerId); // Spotlight.focus(modalContainerId);
// }, 0); // }, 0);
// } else { // } else {
// console.log('[startVideoPlayerNew] *** ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable); // dlog('[startVideoPlayerNew] *** ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable);
// } // }
dlog('[startVideoPlayerNew] *** ✅ END'); dlog('[startVideoPlayerNew] *** ✅ END');
@@ -352,7 +352,7 @@ export const finishVideoPreview = () => (dispatch, getState) => {
const panels = getState().panels.panels; const panels = getState().panels.panels;
const topPanel = panels[panels.length - 1]; const topPanel = panels[panels.length - 1];
if (topPanel && topPanel.name === panel_names.PLAYER_PANEL && topPanel.panelInfo.modal) { if (topPanel && topPanel.name === panel_names.PLAYER_PANEL && topPanel.panelInfo.modal) {
console.log('[PANEL-TRACE] finishVideoPreview: popping modal player', { dlog('[PANEL-TRACE] finishVideoPreview: popping modal player', {
topPanelName: topPanel.name, topPanelName: topPanel.name,
modal: topPanel.panelInfo.modal, modal: topPanel.panelInfo.modal,
stack: panels.map((p) => p.name), stack: panels.map((p) => p.name),
@@ -417,7 +417,7 @@ export const pauseModalVideo = () => (dispatch, getState) => {
(panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal (panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal
); );
console.log('[Detail-BG] ⏸️ pauseModalVideo - Pausing modal video', { dlog('[Detail-BG] ⏸️ pauseModalVideo - Pausing modal video', {
found: !!modalPlayerPanel, found: !!modalPlayerPanel,
playerPanelModal: modalPlayerPanel?.panelInfo?.modal, playerPanelModal: modalPlayerPanel?.panelInfo?.modal,
currentIsPaused: modalPlayerPanel?.panelInfo?.isPaused, currentIsPaused: modalPlayerPanel?.panelInfo?.isPaused,
@@ -438,11 +438,11 @@ export const pauseModalVideo = () => (dispatch, getState) => {
}) })
); );
console.log('[Detail-BG] ✅ pauseModalVideo - Modal video paused successfully', { dlog('[Detail-BG] ✅ pauseModalVideo - Modal video paused successfully', {
timestamp: Date.now(), timestamp: Date.now(),
}); });
} else { } else {
console.log('[Detail-BG] ⚠️ pauseModalVideo - No modal PlayerPanel found', { dlog('[Detail-BG] ⚠️ pauseModalVideo - No modal PlayerPanel found', {
timestamp: Date.now(), timestamp: Date.now(),
}); });
} }
@@ -457,7 +457,7 @@ export const resumeModalVideo = () => (dispatch, getState) => {
(panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal (panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal
); );
console.log('[Detail-BG] ▶️ resumeModalVideo - Resuming modal video', { dlog('[Detail-BG] ▶️ resumeModalVideo - Resuming modal video', {
found: !!modalPlayerPanel, found: !!modalPlayerPanel,
playerPanelModal: modalPlayerPanel?.panelInfo?.modal, playerPanelModal: modalPlayerPanel?.panelInfo?.modal,
currentIsPaused: modalPlayerPanel?.panelInfo?.isPaused, currentIsPaused: modalPlayerPanel?.panelInfo?.isPaused,
@@ -478,11 +478,11 @@ export const resumeModalVideo = () => (dispatch, getState) => {
}) })
); );
console.log('[Detail-BG] ✅ resumeModalVideo - Modal video resumed successfully', { dlog('[Detail-BG] ✅ resumeModalVideo - Modal video resumed successfully', {
timestamp: Date.now(), timestamp: Date.now(),
}); });
} else { } else {
console.log('[Detail-BG] ⚠️ resumeModalVideo - Modal video not paused or panel not found', { dlog('[Detail-BG] ⚠️ resumeModalVideo - Modal video not paused or panel not found', {
found: !!modalPlayerPanel, found: !!modalPlayerPanel,
isPaused: modalPlayerPanel?.panelInfo?.isPaused, isPaused: modalPlayerPanel?.panelInfo?.isPaused,
timestamp: Date.now(), timestamp: Date.now(),
@@ -499,7 +499,7 @@ export const pauseFullscreenVideo = () => (dispatch, getState) => {
(panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal (panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal
); );
console.log('[Detail-BG] ⏸️ pauseFullscreenVideo - Pausing fullscreen video', { dlog('[Detail-BG] ⏸️ pauseFullscreenVideo - Pausing fullscreen video', {
found: !!fullscreenPlayerPanel, found: !!fullscreenPlayerPanel,
playerPanelModal: fullscreenPlayerPanel?.panelInfo?.modal, playerPanelModal: fullscreenPlayerPanel?.panelInfo?.modal,
currentIsPaused: fullscreenPlayerPanel?.panelInfo?.isPaused, currentIsPaused: fullscreenPlayerPanel?.panelInfo?.isPaused,
@@ -517,11 +517,11 @@ export const pauseFullscreenVideo = () => (dispatch, getState) => {
}) })
); );
console.log('[Detail-BG] ✅ pauseFullscreenVideo - Fullscreen video paused successfully', { dlog('[Detail-BG] ✅ pauseFullscreenVideo - Fullscreen video paused successfully', {
timestamp: Date.now(), timestamp: Date.now(),
}); });
} else { } else {
console.log('[Detail-BG] ⚠️ pauseFullscreenVideo - No fullscreen PlayerPanel found', { dlog('[Detail-BG] ⚠️ pauseFullscreenVideo - No fullscreen PlayerPanel found', {
timestamp: Date.now(), timestamp: Date.now(),
}); });
} }
@@ -536,7 +536,7 @@ export const resumeFullscreenVideo = () => (dispatch, getState) => {
(panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal (panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal
); );
console.log('[Detail-BG] ▶️ resumeFullscreenVideo - Resuming fullscreen video', { dlog('[Detail-BG] ▶️ resumeFullscreenVideo - Resuming fullscreen video', {
found: !!fullscreenPlayerPanel, found: !!fullscreenPlayerPanel,
playerPanelModal: fullscreenPlayerPanel?.panelInfo?.modal, playerPanelModal: fullscreenPlayerPanel?.panelInfo?.modal,
currentIsPaused: fullscreenPlayerPanel?.panelInfo?.isPaused, currentIsPaused: fullscreenPlayerPanel?.panelInfo?.isPaused,
@@ -554,11 +554,11 @@ export const resumeFullscreenVideo = () => (dispatch, getState) => {
}) })
); );
console.log('[Detail-BG] ✅ resumeFullscreenVideo - Fullscreen video resumed successfully', { dlog('[Detail-BG] ✅ resumeFullscreenVideo - Fullscreen video resumed successfully', {
timestamp: Date.now(), timestamp: Date.now(),
}); });
} else { } else {
console.log('[Detail-BG] ⚠️ resumeFullscreenVideo - Fullscreen video not paused or panel not found', { dlog('[Detail-BG] ⚠️ resumeFullscreenVideo - Fullscreen video not paused or panel not found', {
found: !!fullscreenPlayerPanel, found: !!fullscreenPlayerPanel,
isPaused: fullscreenPlayerPanel?.panelInfo?.isPaused, isPaused: fullscreenPlayerPanel?.panelInfo?.isPaused,
timestamp: Date.now(), timestamp: Date.now(),
@@ -601,7 +601,7 @@ export const hideModalVideo = () => (dispatch, getState) => {
}, },
}; };
// console.log('[HomePanel] hideModalVideo: saving shrinkInfo', { // dlog('[HomePanel] hideModalVideo: saving shrinkInfo', {
// shrinkInfo: updatedPlayerState.shrinkInfo, // shrinkInfo: updatedPlayerState.shrinkInfo,
// modalStyle: panelInfo.modalStyle, // modalStyle: panelInfo.modalStyle,
// }); // });
@@ -1038,7 +1038,7 @@ export const resumePlayerControl = (ownerId) => (dispatch, getState) => {
* 이 액션은 어떤 배너에서든 클릭 시 호출됩니다. * 이 액션은 어떤 배너에서든 클릭 시 호출됩니다.
*/ */
export const goToFullScreen = () => (dispatch, getState) => { export const goToFullScreen = () => (dispatch, getState) => {
console.log('[Detail-BG] 🎬 goToFullScreen - Setting PlayerPanel to fullscreen mode', { dlog('[Detail-BG] 🎬 goToFullScreen - Setting PlayerPanel to fullscreen mode', {
targetModal: false, targetModal: false,
action: 'updatePanel', action: 'updatePanel',
timestamp: Date.now(), timestamp: Date.now(),
@@ -1055,7 +1055,7 @@ export const goToFullScreen = () => (dispatch, getState) => {
}) })
); );
console.log('[Detail-BG] ✅ goToFullScreen - PlayerPanel modal set to false (fullscreen)', { dlog('[Detail-BG] ✅ goToFullScreen - PlayerPanel modal set to false (fullscreen)', {
timestamp: Date.now(), timestamp: Date.now(),
}); });
}; };
@@ -1268,7 +1268,7 @@ export const startBannerVideo = (videoInfo) => (dispatch, getState) => {
...rest ...rest
} = videoInfo; } = videoInfo;
console.log('[Detail-BG] 🎥 startBannerVideo - Starting banner video', { dlog('[Detail-BG] 🎥 startBannerVideo - Starting banner video', {
modalStatus: modal, modalStatus: modal,
bannerId, bannerId,
displayMode: modal ? 'VISIBLE (modal=true)' : 'FULLSCREEN (modal=false)', displayMode: modal ? 'VISIBLE (modal=true)' : 'FULLSCREEN (modal=false)',
@@ -1295,7 +1295,7 @@ export const startBannerVideo = (videoInfo) => (dispatch, getState) => {
// 기존 PlayerPanel이 있으면 초기화 // 기존 PlayerPanel이 있으면 초기화
if (existingPlayerPanel) { if (existingPlayerPanel) {
dlog('[startBannerVideo] 🔄 Resetting existing PLAYER_PANEL before start'); dlog('[startBannerVideo] 🔄 Resetting existing PLAYER_PANEL before start');
console.log('[Detail-BG] 🔄 startBannerVideo - Clearing existing PlayerPanel', { dlog('[Detail-BG] 🔄 startBannerVideo - Clearing existing PlayerPanel', {
existingModalStatus: existingPlayerPanel.panelInfo?.modal, existingModalStatus: existingPlayerPanel.panelInfo?.modal,
timestamp: Date.now(), timestamp: Date.now(),
}); });
@@ -1304,7 +1304,7 @@ export const startBannerVideo = (videoInfo) => (dispatch, getState) => {
} }
// 새로운 PlayerPanel push // 새로운 PlayerPanel push
console.log('[Detail-BG] ➕ startBannerVideo - Pushing new PlayerPanel with modal status', { dlog('[Detail-BG] ➕ startBannerVideo - Pushing new PlayerPanel with modal status', {
modal, modal,
modalContainerId, modalContainerId,
timestamp: Date.now(), timestamp: Date.now(),
@@ -1331,7 +1331,7 @@ export const startBannerVideo = (videoInfo) => (dispatch, getState) => {
) )
); );
console.log('[Detail-BG] ✅ startBannerVideo - PlayerPanel pushed with modal=' + modal, { dlog('[Detail-BG] ✅ startBannerVideo - PlayerPanel pushed with modal=' + modal, {
timestamp: Date.now(), timestamp: Date.now(),
}); });

6
com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js
View File

@@ -16,7 +16,7 @@ import { calculateIsPanelOnTop } from '../utils/panelUtils'; // 🎯 isOnTop 유
// DEBUG_MODE - true인 경우에만 로그 출력 // DEBUG_MODE - true인 경우에만 로그 출력
// ⚠️ [251122] panelHistory 로그 비활성화 - 로그 생성 차단 // ⚠️ [251122] panelHistory 로그 비활성화 - 로그 생성 차단
const DEBUG_MODE = true; const DEBUG_MODE = false;
/** /**
* Panel history middleware * Panel history middleware
@@ -33,8 +33,8 @@ export const panelHistoryMiddleware = (store) => (next) => (action) => {
(action.type.includes('PANEL') || action.type === 'CLEAR_PANEL_HISTORY') (action.type.includes('PANEL') || action.type === 'CLEAR_PANEL_HISTORY')
) { ) {
const caller = new Error().stack.split('\n')[1]?.trim(); const caller = new Error().stack.split('\n')[1]?.trim();
console.log(`[PANEL DEBUG] ${action.type} from: ${caller}`); // console.log(`[PANEL DEBUG] ${action.type} from: ${caller}`);
console.log(' Payload:', action.payload); // console.log(' Payload:', action.payload);
} }
// GNB 호출 식별을 위한 helper 함수 // GNB 호출 식별을 위한 helper 함수

22
com.twin.app.shoptime/src/reducers/panelReducer.js
View File

@@ -94,11 +94,11 @@ export const panelsReducer = (state = initialState, action) => {
} }
case types.POP_PANEL: { case types.POP_PANEL: {
console.log('[💜UNIQUE_PANEL_STACK💜] POP_PANEL reducer START', { // console.log('[💜UNIQUE_PANEL_STACK💜] POP_PANEL reducer START', {
targetPanel: action.payload || 'last_panel', // targetPanel: action.payload || 'last_panel',
currentPanels: state.panels.map((p) => p.name), // currentPanels: state.panels.map((p) => p.name),
timestamp: Date.now(), // timestamp: Date.now(),
}); // });
dlog('[panelReducer] 🔴 POP_PANEL START', { dlog('[panelReducer] 🔴 POP_PANEL START', {
targetPanel: action.payload || 'last_panel', targetPanel: action.payload || 'last_panel',
@@ -124,12 +124,12 @@ export const panelsReducer = (state = initialState, action) => {
resultPanels = state.panels.slice(0, state.panels.length - 1); resultPanels = state.panels.slice(0, state.panels.length - 1);
} }
console.log('[💜UNIQUE_PANEL_STACK💜] POP_PANEL reducer END', { // console.log('[💜UNIQUE_PANEL_STACK💜] POP_PANEL reducer END', {
resultPanels: resultPanels.map((p) => p.name), // resultPanels: resultPanels.map((p) => p.name),
panelCount: resultPanels.length, // panelCount: resultPanels.length,
lastAction, // lastAction,
timestamp: Date.now(), // timestamp: Date.now(),
}); // });
dlog('[panelReducer] 🔴 POP_PANEL END', { dlog('[panelReducer] 🔴 POP_PANEL END', {
resultPanels: resultPanels.map((p) => p.name), resultPanels: resultPanels.map((p) => p.name),

2
com.twin.app.shoptime/src/utils/lodashFpEx.js
View File

@@ -458,7 +458,7 @@ const tap = fp.curry((fn, value) => {
* @param {*} value 대상 값 * @param {*} value 대상 값
*/ */
const trace = fp.curry((label, value) => { const trace = fp.curry((label, value) => {
console.log(label, value); // console.log(label, value);
return value; return value;
}); });

50
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -280,7 +280,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
useEffect(() => { useEffect(() => {
return () => { return () => {
console.log('[🟡UNIQUE_DETAIL_CLEANUP🟡] DetailPanel cleanup - calling finishModalMediaForce'); // console.log('[🟡UNIQUE_DETAIL_CLEANUP🟡] DetailPanel cleanup - calling finishModalMediaForce');
dispatch(finishModalMediaForce()); dispatch(finishModalMediaForce());
}; };
}, [dispatch]); }, [dispatch]);
@@ -304,19 +304,19 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const sourcePanel = panelInfo?.sourcePanel; const sourcePanel = panelInfo?.sourcePanel;
const sourceMenu = panelInfo?.sourceMenu; const sourceMenu = panelInfo?.sourceMenu;
console.log('[🔴UNIQUE_DETAIL_UNMOUNT🔴] DetailPanel cleanup/unmount triggered', { // console.log('[🔴UNIQUE_DETAIL_UNMOUNT🔴] DetailPanel cleanup/unmount triggered', {
sourcePanel, // sourcePanel,
sourceMenu, // sourceMenu,
panelsSnapshot: panels.map((p) => p.name), // panelsSnapshot: panels.map((p) => p.name),
timestamp: Date.now(), // timestamp: Date.now(),
}); // });
// DetailPanel이 unmount되는 시점 // DetailPanel이 unmount되는 시점
console.log('[🔴UNIQUE_DETAIL_UNMOUNT🔴] DetailPanel unmount details:', { // console.log('[🔴UNIQUE_DETAIL_UNMOUNT🔴] DetailPanel unmount details:', {
sourcePanel, // sourcePanel,
sourceMenu, // sourceMenu,
timestamp: Date.now(), // timestamp: Date.now(),
}); // });
// sourcePanel에 따른 상태 업데이트 // sourcePanel에 따른 상태 업데이트
switch (sourcePanel) { switch (sourcePanel) {
@@ -385,13 +385,13 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const sourcePanel = panelInfo?.sourcePanel; const sourcePanel = panelInfo?.sourcePanel;
const sourceMenu = panelInfo?.sourceMenu; const sourceMenu = panelInfo?.sourceMenu;
console.log('[🟠UNIQUE_DETAIL_BACK🟠] onBackClick triggered', { // console.log('[🟠UNIQUE_DETAIL_BACK🟠] onBackClick triggered', {
sourcePanel, // sourcePanel,
sourceMenu, // sourceMenu,
isCancelClick, // isCancelClick,
currentPanels: panels.map((p) => p.name), // currentPanels: panels.map((p) => p.name),
timestamp: Date.now(), // timestamp: Date.now(),
}); // });
fp.pipe( fp.pipe(
() => { () => {
@@ -410,18 +410,18 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
case panel_names.SEARCH_PANEL: case panel_names.SEARCH_PANEL:
default: default:
// HomePanel, SearchPanel 등에서 온 경우: 백그라운드 비디오 일시 중지 // HomePanel, SearchPanel 등에서 온 경우: 백그라운드 비디오 일시 중지
console.log( // console.log(
'[🟠UNIQUE_DETAIL_BACK🟠] source panel:', // '[🟠UNIQUE_DETAIL_BACK🟠] source panel:',
sourcePanel, // sourcePanel,
'백그라운드 비디오 일시 중지' // '백그라운드 비디오 일시 중지'
); // );
dispatch(pauseFullscreenVideo()); // PLAYER_PANEL 비디오 중지 dispatch(pauseFullscreenVideo()); // PLAYER_PANEL 비디오 중지
dispatch(finishModalMediaForce()); // MEDIA_PANEL(ProductVideo) 강제 종료 dispatch(finishModalMediaForce()); // MEDIA_PANEL(ProductVideo) 강제 종료
dispatch(finishVideoPreview()); dispatch(finishVideoPreview());
break; break;
} }
console.log('[🟠UNIQUE_DETAIL_BACK🟠] Calling popPanel(DETAIL_PANEL)'); // console.log('[🟠UNIQUE_DETAIL_BACK🟠] Calling popPanel(DETAIL_PANEL)');
dispatch(popPanel(panel_names.DETAIL_PANEL)); dispatch(popPanel(panel_names.DETAIL_PANEL));
}, },
() => { () => {

4
com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
View File

@@ -391,7 +391,7 @@ const MediaPanel = React.forwardRef(
const onEnded = useCallback( const onEnded = useCallback(
(e) => { (e) => {
debugLog('[MediaPanel] Video ended'); debugLog('[MediaPanel] Video ended');
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] MediaPanel onEnded triggered - will pop after 1500ms'); // console.log('[🔥UNIQUE_MEDIA_ENDED🔥] MediaPanel onEnded triggered - will pop after 1500ms');
// continuousPlay는 MediaPlayer(VideoPlayer) 컴포넌트 내부에서 loop 속성으로 처리 // continuousPlay는 MediaPlayer(VideoPlayer) 컴포넌트 내부에서 loop 속성으로 처리
// onEnded가 호출되면 loop=false 인 경우이므로 패널을 닫음 // onEnded가 호출되면 loop=false 인 경우이므로 패널을 닫음
Spotlight.pause(); Spotlight.pause();
@@ -403,7 +403,7 @@ const MediaPanel = React.forwardRef(
// ✅ 새로운 타이머 저장 (cleanup 시 정리용) // ✅ 새로운 타이머 저장 (cleanup 시 정리용)
onEndedTimerRef.current = setTimeout(() => { onEndedTimerRef.current = setTimeout(() => {
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] Executing popPanel(MEDIA_PANEL) after 1500ms'); // console.log('[🔥UNIQUE_MEDIA_ENDED🔥] Executing popPanel(MEDIA_PANEL) after 1500ms');
Spotlight.resume(); Spotlight.resume();
dispatch(PanelActions.popPanel(panel_names.MEDIA_PANEL)); dispatch(PanelActions.popPanel(panel_names.MEDIA_PANEL));
onEndedTimerRef.current = null; onEndedTimerRef.current = null;

2
com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.module.less
View File

@@ -26,7 +26,7 @@
video { video {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
object-fit: contain; /* 비율 유지하면서 컨테이너 안에 맞춤 */ object-fit: contain; /* 높이 기준으로 맞추고 좌우는 잘림 */
} }
} }

10
com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx
View File

@@ -2043,14 +2043,14 @@ const MediaPanel = React.forwardRef(
(e) => { (e) => {
const currentInfo = panelInfoRef.current; const currentInfo = panelInfoRef.current;
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] onEnded triggered - shptmBanrTpNm:', currentInfo?.shptmBanrTpNm); // console.log('[🔥UNIQUE_MEDIA_ENDED🔥] onEnded triggered - shptmBanrTpNm:', currentInfo?.shptmBanrTpNm);
// MEDIA: 기존 동작 유지 (배경 복원 없이 즉시 pop) // MEDIA: 기존 동작 유지 (배경 복원 없이 즉시 pop)
if (currentInfo.shptmBanrTpNm === 'MEDIA') { if (currentInfo.shptmBanrTpNm === 'MEDIA') {
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] MEDIA type - popPanel will be called'); // console.log('[🔥UNIQUE_MEDIA_ENDED🔥] MEDIA type - popPanel will be called');
Spotlight.pause(); Spotlight.pause();
setTimeout(() => { setTimeout(() => {
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] setTimeout fired - dispatching popPanel(MEDIA_PANEL)'); // console.log('[🔥UNIQUE_MEDIA_ENDED🔥] setTimeout fired - dispatching popPanel(MEDIA_PANEL)');
Spotlight.resume(); Spotlight.resume();
dispatch(PanelActions.popPanel(panel_names.MEDIA_PANEL)); dispatch(PanelActions.popPanel(panel_names.MEDIA_PANEL));
}, VIDEO_END_ACTION_DELAY); }, VIDEO_END_ACTION_DELAY);
@@ -2061,7 +2061,7 @@ const MediaPanel = React.forwardRef(
// VOD: modal 여부에 따라 동작 분리 // VOD: modal 여부에 따라 동작 분리
if (currentInfo.shptmBanrTpNm === 'VOD') { if (currentInfo.shptmBanrTpNm === 'VOD') {
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] VOD type - popPanel will be called'); // console.log('[🔥UNIQUE_MEDIA_ENDED🔥] VOD type - popPanel will be called');
Spotlight.pause(); Spotlight.pause();
setTimeout(() => { setTimeout(() => {
stopExternalPlayer(); stopExternalPlayer();
@@ -2081,7 +2081,7 @@ const MediaPanel = React.forwardRef(
return; return;
} }
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] Unknown shptmBanrTpNm - no action taken'); // console.log('[🔥UNIQUE_MEDIA_ENDED🔥] Unknown shptmBanrTpNm - no action taken');
}, },
[dispatch, focusBackButtonOrFallback, stopExternalPlayer] [dispatch, focusBackButtonOrFallback, stopExternalPlayer]
); );

4
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
View File

@@ -407,6 +407,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
lastFocusedTargetId: panelInfo.lastFocusedTargetId, lastFocusedTargetId: panelInfo.lastFocusedTargetId,
}); });
// TabContainerV2의 tabIndex를 ShopNowContents(0)로 리셋
dlog('[PlayerPanel] 📑 TabContainerV2 tabIndex를 ShopNowContents(0)로 리셋');
setTabIndexV2(0);
// 포커스 복원 로직 추가 (1000ms 지연) // 포커스 복원 로직 추가 (1000ms 지연)
if (panelInfo.lastFocusedTargetId) { if (panelInfo.lastFocusedTargetId) {
dlog( dlog(