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

[251118] fix: HomePanel return from DetailPanel video playing-1

Browse Source 
🕐 커밋 시간: 2025. 11. 18. 10:53:59

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +66줄
  • 삭제: -39줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/panelActions.js
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 소규모 기능 개선
  • 코드 정리 및 최적화
This commit is contained in:
hyeon soo noh
2025-11-18 10:53:59 +09:00
parent 508e9e1042
commit 4778805dbf
3 changed files with 66 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -396,6 +396,7 @@ export const restoreVideoOnBack = () => {
bannerId: videoStateToRestore.bannerId || videoStateToRestore.playerState?.currentBannerId, bannerId: videoStateToRestore.bannerId || videoStateToRestore.playerState?.currentBannerId,
patnrId: videoStateToRestore.patnrId, patnrId: videoStateToRestore.patnrId,
showId: videoStateToRestore.showId, showId: videoStateToRestore.showId,
showUrl: videoStateToRestore.showUrl,
shptmBanrTpNm: videoStateToRestore.shptmBanrTpNm, shptmBanrTpNm: videoStateToRestore.shptmBanrTpNm,
lgCatCd: videoStateToRestore.lgCatCd, lgCatCd: videoStateToRestore.lgCatCd,
modal: true, // HomeBanner는 항상 modal modal: true, // HomeBanner는 항상 modal

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

@@ -160,16 +160,16 @@ export const startVideoPlayerNew =
...rest ...rest
}) => }) =>
(dispatch, getState) => { (dispatch, getState) => {
console.log('[startVideoPlayerNew] ✅ START - bannerId:', bannerId, ', videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal); console.log('[startVideoPlayerNew] *** ✅ START - bannerId:', bannerId, ', videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal);
// 🔽 [251116] 즉시 로딩 상태 설정 // 🔽 [251116] 즉시 로딩 상태 설정
const videoIdentifier = videoId || showUrl || bannerId; const videoIdentifier = videoId || showUrl || bannerId;
if (videoIdentifier) { if (videoIdentifier) {
const displayMode = modal ? DISPLAY_STATUS.VISIBLE : DISPLAY_STATUS.FULLSCREEN; const displayMode = modal ? DISPLAY_STATUS.VISIBLE : DISPLAY_STATUS.FULLSCREEN;
console.log('[startVideoPlayerNew] 📌 Setting playback loading - identifier:', videoIdentifier, ', displayMode:', displayMode); console.log('[startVideoPlayerNew] *** 📌 Setting playback loading - identifier:', videoIdentifier, ', displayMode:', displayMode);
dispatch(setPlaybackLoading(videoIdentifier, displayMode)); dispatch(setPlaybackLoading(videoIdentifier, displayMode));
} else { } else {
console.log('[startVideoPlayerNew] ⚠️ No videoIdentifier provided'); console.log('[startVideoPlayerNew] *** ⚠️ No videoIdentifier provided');
} }
const panels = getState().panels.panels; const panels = getState().panels.panels;
@@ -178,10 +178,11 @@ export const startVideoPlayerNew =
// const panelName = useNewPlayer ? panel_names.PLAYER_PANEL_NEW : panel_names.PLAYER_PANEL; // const panelName = useNewPlayer ? panel_names.PLAYER_PANEL_NEW : panel_names.PLAYER_PANEL;
const panelName = panel_names.PLAYER_PANEL; const panelName = panel_names.PLAYER_PANEL;
console.log('[startVideoPlayerNew] 📊 Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name); console.log('[startVideoPlayerNew] *** 📊 Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name);
if (topPanel && topPanel.name === panelName) { if (topPanel && topPanel.name === panelName) {
panelWorkingAction = updatePanel; panelWorkingAction = updatePanel;
console.log('[startVideoPlayerNew] *** 📋 Current PLAYER_PANEL panelInfo:', topPanel.panelInfo);
} }
// 중복 실행 방지: 같은 배너 + 같은 modal 상태/컨테이너면 skip // 중복 실행 방지: 같은 배너 + 같은 modal 상태/컨테이너면 skip
@@ -191,10 +192,10 @@ export const startVideoPlayerNew =
const isSameModalType = currentPanelInfo.modal === modal; const isSameModalType = currentPanelInfo.modal === modal;
const isSameContainer = currentPanelInfo.modalContainerId === modalContainerId; const isSameContainer = currentPanelInfo.modalContainerId === modalContainerId;
console.log('[startVideoPlayerNew] 🔍 Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer); console.log('[startVideoPlayerNew] *** 🔍 Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer);
if (isSameBanner && isSameModalType && isSameContainer) { if (isSameBanner && isSameModalType && isSameContainer) {
console.log('[startVideoPlayerNew] ⏭️ SKIPPED - 동일한 요청', { console.log('[startVideoPlayerNew] *** ⏭️ SKIPPED - 동일한 요청', {
bannerId, bannerId,
modal, modal,
modalContainerId, modalContainerId,
@@ -206,7 +207,7 @@ export const startVideoPlayerNew =
...currentPlayerState, ...currentPlayerState,
currentBannerId: bannerId, currentBannerId: bannerId,
}; };
console.log('[startVideoPlayerNew] 🔄 Player state updated - currentBannerId:', bannerId); console.log('[startVideoPlayerNew] *** 🔄 Player state updated - currentBannerId:', bannerId);
dispatch( dispatch(
panelWorkingAction( panelWorkingAction(
@@ -226,20 +227,20 @@ export const startVideoPlayerNew =
true true
) )
); );
console.log('[startVideoPlayerNew] ✨ Panel action dispatched - action:', panelWorkingAction === updatePanel ? 'updatePanel' : 'pushPanel'); console.log('[startVideoPlayerNew] *** ✨ Panel action dispatched - action:', panelWorkingAction === updatePanel ? 'updatePanel' : 'pushPanel');
if (modal && modalContainerId && !spotlightDisable) { if (modal && modalContainerId && !spotlightDisable) {
console.log('[startVideoPlayerNew] 🎯 Setting Spotlight focus - containerId:', modalContainerId); console.log('[startVideoPlayerNew] *** 🎯 Setting Spotlight focus - containerId:', modalContainerId);
Spotlight.setPointerMode(false); Spotlight.setPointerMode(false);
startVideoFocusTimer = setTimeout(() => { startVideoFocusTimer = setTimeout(() => {
console.log('[startVideoPlayerNew] 🔍 Spotlight.focus called'); console.log('[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); console.log('[startVideoPlayerNew] *** ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable);
} }
console.log('[startVideoPlayerNew] ✅ END'); console.log('[startVideoPlayerNew] *** ✅ END');
}; };
export const finishVideoPreview = () => (dispatch, getState) => { export const finishVideoPreview = () => (dispatch, getState) => {
@@ -451,7 +452,9 @@ export const hideModalVideo = () => (dispatch, getState) => {
// 축소된 모달 비디오를 원래 크기로 복구 // 축소된 모달 비디오를 원래 크기로 복구
export const showModalVideo = () => (dispatch, getState) => { export const showModalVideo = () => (dispatch, getState) => {
console.log('[showModalVideo] *** ✅ START');
const panels = getState().panels.panels; const panels = getState().panels.panels;
console.log('[showModalVideo] *** 📊 Total panels count:', panels.length);
// 축소된 modal PlayerPanel 찾기 // 축소된 modal PlayerPanel 찾기
const shrunkModalPlayerPanel = panels.find( const shrunkModalPlayerPanel = panels.find(
@@ -461,30 +464,35 @@ export const showModalVideo = () => (dispatch, getState) => {
panel.panelInfo?.shouldShrinkTo1px panel.panelInfo?.shouldShrinkTo1px
); );
console.log('[showModalVideo] *** 🔍 Shrunk modal PlayerPanel found:', !!shrunkModalPlayerPanel);
if (shrunkModalPlayerPanel) { if (shrunkModalPlayerPanel) {
const panelInfo = shrunkModalPlayerPanel.panelInfo; const panelInfo = shrunkModalPlayerPanel.panelInfo;
const shrinkInfo = panelInfo.playerState?.shrinkInfo; const shrinkInfo = panelInfo.playerState?.shrinkInfo;
// console.log('[HomePanel] showModalVideo: expanding video', { console.log('[showModalVideo] *** 📋 ShrinkInfo available:', !!shrinkInfo);
// hasShrinkInfo: !!shrinkInfo, console.log('[showModalVideo] *** 📋 Current panelInfo state:', {
// hasModalStyle: !!shrinkInfo?.modalStyle, shouldShrinkTo1px: panelInfo.shouldShrinkTo1px,
// hasModalContainerId: !!shrinkInfo?.modalContainerId, modal: panelInfo.modal,
// }); modalContainerId: panelInfo.modalContainerId,
hasModalStyle: !!panelInfo.modalStyle,
});
const updatedPanelInfo = { const updatedPanelInfo = {
...panelInfo, ...panelInfo,
shouldShrinkTo1px: false, // 축소 플래그 해제 shouldShrinkTo1px: false, // 축소 플래그 해제
skipModalStyleRecalculation: true, // ← 복구 과정에서 DOM 재계산 스킵 // 저장된 정보로 복구 (하지만 DOM 재계산은 허용)
// 저장된 정보로 복구
...(shrinkInfo && { ...(shrinkInfo && {
modalContainerId: shrinkInfo.modalContainerId, modalContainerId: shrinkInfo.modalContainerId,
modalClassName: shrinkInfo.modalClassName, modalClassName: shrinkInfo.modalClassName,
modalStyle: shrinkInfo.modalStyle, modalStyle: shrinkInfo.modalStyle,
modalScale: shrinkInfo.modalScale, modalScale: shrinkInfo.modalScale,
}), }),
skipModalStyleRecalculation: false, // 위치 변경 시 DOM 기준으로 다시 계산하도록 허용
}; };
// console.log('[HomePanel] showModalVideo: updated panelInfo shouldShrinkTo1px=false, modalStyle restored, skipModalStyleRecalculation=true'); console.log('[showModalVideo] *** 🔄 Updated panelInfo - shouldShrinkTo1px:', updatedPanelInfo.shouldShrinkTo1px);
console.log('[showModalVideo] *** 📍 Restored modalStyle:', updatedPanelInfo.modalStyle);
dispatch( dispatch(
updatePanel({ updatePanel({
@@ -492,8 +500,9 @@ export const showModalVideo = () => (dispatch, getState) => {
panelInfo: updatedPanelInfo, panelInfo: updatedPanelInfo,
}) })
); );
console.log('[showModalVideo] *** ✨ updatePanel dispatched');
} else { } else {
console.log('[HomePanel] showModalVideo: No shrunk modal PlayerPanel found', { console.log('[showModalVideo] *** ⚠️ No shrunk modal PlayerPanel found', {
panels: panels.map((p) => ({ panels: panels.map((p) => ({
name: p.name, name: p.name,
modal: p.panelInfo?.modal, modal: p.panelInfo?.modal,
@@ -501,6 +510,8 @@ export const showModalVideo = () => (dispatch, getState) => {
})), })),
}); });
} }
console.log('[showModalVideo] *** ✅ END');
}; };
// 🔽 패널은 유지하고 비디오만 중지하는 함수들 // 🔽 패널은 유지하고 비디오만 중지하는 함수들

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

@@ -754,27 +754,42 @@ const HomePanel = ({ isOnTop }) => {
useEffect(() => { useEffect(() => {
if (detailPanelClosedTime && isOnTop) { if (detailPanelClosedTime && isOnTop) {
console.log('[HomePanel] ✅ DetailPanel 닫힘 감지됨!'); console.log('[HomePanel] *** ✅ DetailPanel 닫힘 감지됨!');
console.log('[HomePanel] lastDetailPanelClosed:', detailPanelClosedTime); console.log('[HomePanel] *** lastDetailPanelClosed:', detailPanelClosedTime);
console.log('[HomePanel] isOnTop:', isOnTop); console.log('[HomePanel] *** isOnTop:', isOnTop);
console.log('[HomePanel] videoPlayIntentRef.current:', videoPlayIntentRef.current); console.log('[HomePanel] *** videoPlayIntentRef.current:', videoPlayIntentRef.current);
console.log('[HomePanel] lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current); console.log('[HomePanel] *** lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current);
// [TODO] DetailPanel 닫힘 후 비디오 자동 재생 복구 // [TODO] DetailPanel 닫힘 후 비디오 자동 재생 복구
if (videoPlayIntentRef.current && lastPlayedBannerIdRef.current) { if (videoPlayIntentRef.current && lastPlayedBannerIdRef.current) {
dispatch(startVideoPlayerNew({ // 🔽 videoPlayIntentRef는 videoProps에 비디오 정보를 담고 있으므로 풀어서 전달
modal: true, // 혹시 videoProps에 없는 필드는 상위 레벨을 fallback으로 사용
modalContainerId: 'home-video-modal', const intent = videoPlayIntentRef.current;
modalClassName: 'home-video-modal', const videoProps = intent.videoProps || {};
bannerId: lastPlayedBannerIdRef.current,
videoId: videoPlayIntentRef.current.videoId, // 🔽 [251118] 현재 스크롤 위치 확인하여 비디오 크기 결정
showUrl: videoPlayIntentRef.current.showUrl, const currentScrollTop = prevScrollTopRef.current;
patnrId: videoPlayIntentRef.current.patnrId, const shouldShrink = currentScrollTop > 1;
showId: videoPlayIntentRef.current.showId, console.log('[HomePanel] *** 비디오 복구 - currentScrollTop:', currentScrollTop, ', shouldShrink:', shouldShrink);
shptmBanrTpNm: videoPlayIntentRef.current.shptmBanrTpNm,
lgCatCd: videoPlayIntentRef.current.lgCatCd, dispatch(
})); startVideoPlayerNew({
...videoProps,
modal: true,
modalContainerId: videoProps.modalContainerId || 'home-video-modal',
modalClassName: videoProps.modalClassName || 'home-video-modal',
spotlightDisable: true, // 자동 복구 시 스크롤 이동 막기 위해 포커스 이동 금지
bannerId: lastPlayedBannerIdRef.current,
videoId: videoProps.videoId || intent.videoId,
showUrl: videoProps.showUrl || intent.showUrl,
patnrId: videoProps.patnrId || intent.patnrId,
showId: videoProps.showId || intent.showId,
shptmBanrTpNm: videoProps.shptmBanrTpNm || intent.shptmBanrTpNm,
lgCatCd: videoProps.lgCatCd || intent.lgCatCd,
shouldShrinkTo1px: shouldShrink, // 스크롤 위치에 따라 설정
})
);
// refs 초기화 // refs 초기화
videoPlayIntentRef.current = null; videoPlayIntentRef.current = null;
lastPlayedBannerIdRef.current = null; lastPlayedBannerIdRef.current = null;