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

[251216] fix: TrendingNowPanel DetailPanel MediaPanel popPanel fix

Browse Source 
🕐 커밋 시간: 2025. 12. 16. 15:21:13

📊 변경 통계:
  • 총 파일: 6개
  • 추가: +62줄
  • 삭제: -14줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/mediaActions.js
  ~ com.twin.app.shoptime/src/actions/panelActions.js
  ~ com.twin.app.shoptime/src/reducers/panelReducer.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.v3.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 소규모 기능 개선
  • 모듈 구조 개선
This commit is contained in:
hyeon soo noh
2025-12-16 15:21:13 +09:00
parent 4f4887ebdb
commit c9b2e5daf5
6 changed files with 62 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -40,12 +40,20 @@ export const pushPanel = (panel, duplicatable = false) => ({
});
export const popPanel = (panelName) => {
if (DEBUG_MODE) {
console.log('[PANEL-TRACE] popPanel action creator', {
const stack = new Error().stack;
const stackLines = stack?.split('\n') || [];
console.log('[💜UNIQUE_PANEL_STACK💜] popPanel action dispatcher - REMOVING PANEL:', {
panelName,
caller: new Error().stack?.split('\n')[2]?.trim(),
timestamp: Date.now(),
fullStack: stackLines.slice(1, 6).map((line) => line.trim()),
});
if (DEBUG_MODE) {
console.log('[💜UNIQUE_PANEL_STACK💜] popPanel action creator stack:', {
panelName,
caller: stackLines[2]?.trim(),
});
console.trace('[PANEL-TRACE] popPanel stack trace');
}
return {
type: types.POP_PANEL,

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

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

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

@@ -280,6 +280,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
useEffect(() => {
return () => {
console.log('[🟡UNIQUE_DETAIL_CLEANUP🟡] DetailPanel cleanup - calling finishModalMediaForce');
dispatch(finishModalMediaForce());
};
}, [dispatch]);
@@ -303,16 +304,15 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const sourcePanel = panelInfo?.sourcePanel;
const sourceMenu = panelInfo?.sourceMenu;
console.log('[DP-TRACE] Detail unmount start', {
console.log('[🔴UNIQUE_DETAIL_UNMOUNT🔴] DetailPanel cleanup/unmount triggered', {
sourcePanel,
sourceMenu,
panelsSnapshot: panels.map((p) => p.name),
timestamp: Date.now(),
});
console.log('[Detail-BG] 306-line sourcePanel:', sourcePanel, 'sourceMenu:', sourceMenu);
// DetailPanel이 unmount되는 시점
console.log('[DetailPanel] unmount:', {
console.log('[🔴UNIQUE_DETAIL_UNMOUNT🔴] DetailPanel unmount details:', {
sourcePanel,
sourceMenu,
timestamp: Date.now(),
@@ -385,6 +385,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const sourcePanel = panelInfo?.sourcePanel;
const sourceMenu = panelInfo?.sourceMenu;
console.log('[🟠UNIQUE_DETAIL_BACK🟠] onBackClick triggered', {
sourcePanel,
sourceMenu,
isCancelClick,
currentPanels: panels.map((p) => p.name),
timestamp: Date.now(),
});
fp.pipe(
() => {
dispatch(clearAllToasts()); // BuyOption Toast 포함 모든 토스트 제거
@@ -393,7 +401,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
switch (sourcePanel) {
case panel_names.PLAYER_PANEL:
// PlayerPanel에서 온 경우: 플레이어 비디오는 그대로 두고 모달만 정리
console.log('[DetailPanel] onBackClick - PlayerPanel 출신: 모달 정리만 수행');
console.log('[🟠UNIQUE_DETAIL_BACK🟠] PlayerPanel 출신: 모달 정리만 수행');
dispatch(finishModalMediaForce()); // MEDIA_PANEL(ProductVideo) 강제 종료
dispatch(finishVideoPreview());
break;
@@ -403,7 +411,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
default:
// HomePanel, SearchPanel 등에서 온 경우: 백그라운드 비디오 일시 중지
console.log(
'[DetailPanel] onBackClick - source panel:',
'[🟠UNIQUE_DETAIL_BACK🟠] source panel:',
sourcePanel,
'백그라운드 비디오 일시 중지'
);
@@ -413,6 +421,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
break;
}
console.log('[🟠UNIQUE_DETAIL_BACK🟠] Calling popPanel(DETAIL_PANEL)');
dispatch(popPanel(panel_names.DETAIL_PANEL));
},
() => {

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

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

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

@@ -912,7 +912,7 @@ const MediaPanel = React.forwardRef(
}
if (!panelInfo.modal) {
dispatch(PanelActions.popPanel());
dispatch(PanelActions.popPanel(panel_names.MEDIA_PANEL));
dispatch(changeAppStatus({ cursorVisible: false }));
document?.dispatchEvent?.(new CustomEvent('detailpanel-scroll-reset'));
@@ -937,7 +937,7 @@ const MediaPanel = React.forwardRef(
// 패널이 2개 존재할때만 popPanel 진행
// fullscreen 전환 중이면 popPanel하지 않음
if (panelInfo.modal && !isOnTop && !isTransitioningToFullscreen.current) {
dispatch(PanelActions.popPanel());
dispatch(PanelActions.popPanel(panel_names.MEDIA_PANEL));
} else {
Spotlight.focus('tbody');
}
@@ -1576,7 +1576,7 @@ const MediaPanel = React.forwardRef(
) {
// case: Featured Brands
if (panelInfo?.sourcePanel === panel_names.FEATURED_BRANDS_PANEL) {
dispatch(PanelActions.popPanel());
dispatch(PanelActions.popPanel(panel_names.MEDIA_PANEL));
}
}
}, [
@@ -2043,19 +2043,25 @@ const MediaPanel = React.forwardRef(
(e) => {
const currentInfo = panelInfoRef.current;
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] onEnded triggered - shptmBanrTpNm:', currentInfo?.shptmBanrTpNm);
// MEDIA: 기존 동작 유지 (배경 복원 없이 즉시 pop)
if (currentInfo.shptmBanrTpNm === 'MEDIA') {
console.log('[MediaPanel] 🚫 Skipping background restoration for ended media');
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] MEDIA type - popPanel will be called');
Spotlight.pause();
setTimeout(() => {
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] setTimeout fired - dispatching popPanel(MEDIA_PANEL)');
Spotlight.resume();
dispatch(PanelActions.popPanel());
dispatch(PanelActions.popPanel(panel_names.MEDIA_PANEL));
}, VIDEO_END_ACTION_DELAY);
e?.stopPropagation();
e?.preventDefault();
return;
}
// VOD: modal 여부에 따라 동작 분리
if (currentInfo.shptmBanrTpNm === 'VOD') {
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] VOD type - popPanel will be called');
Spotlight.pause();
setTimeout(() => {
stopExternalPlayer();
@@ -2074,6 +2080,8 @@ const MediaPanel = React.forwardRef(
e?.preventDefault();
return;
}
console.log('[🔥UNIQUE_MEDIA_ENDED🔥] Unknown shptmBanrTpNm - no action taken');
},
[dispatch, focusBackButtonOrFallback, stopExternalPlayer]
);