From 4778805dbf91dfeb9860d7d848b3471fc6981442 Mon Sep 17 00:00:00 2001 From: optrader Date: Tue, 18 Nov 2025 10:53:59 +0900 Subject: [PATCH] [251118] fix: HomePanel return from DetailPanel video playing-1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit πŸ• 컀밋 μ‹œκ°„: 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 πŸ”§ μ£Όμš” λ³€κ²½ λ‚΄μš©: β€’ 핡심 λΉ„μ¦ˆλ‹ˆμŠ€ 둜직 κ°œμ„  β€’ μ†Œκ·œλͺ¨ κΈ°λŠ₯ κ°œμ„  β€’ μ½”λ“œ 정리 및 μ΅œμ ν™” --- .../src/actions/panelActions.js | 1 + .../src/actions/playActions.js | 53 +++++++++++-------- .../src/views/HomePanel/HomePanel.jsx | 51 +++++++++++------- 3 files changed, 66 insertions(+), 39 deletions(-) diff --git a/com.twin.app.shoptime/src/actions/panelActions.js b/com.twin.app.shoptime/src/actions/panelActions.js index 802248c6..2d91355e 100644 --- a/com.twin.app.shoptime/src/actions/panelActions.js +++ b/com.twin.app.shoptime/src/actions/panelActions.js @@ -396,6 +396,7 @@ export const restoreVideoOnBack = () => { bannerId: videoStateToRestore.bannerId || videoStateToRestore.playerState?.currentBannerId, patnrId: videoStateToRestore.patnrId, showId: videoStateToRestore.showId, + showUrl: videoStateToRestore.showUrl, shptmBanrTpNm: videoStateToRestore.shptmBanrTpNm, lgCatCd: videoStateToRestore.lgCatCd, modal: true, // HomeBannerλŠ” 항상 modal diff --git a/com.twin.app.shoptime/src/actions/playActions.js b/com.twin.app.shoptime/src/actions/playActions.js index 54525013..c669101b 100644 --- a/com.twin.app.shoptime/src/actions/playActions.js +++ b/com.twin.app.shoptime/src/actions/playActions.js @@ -160,16 +160,16 @@ export const startVideoPlayerNew = ...rest }) => (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] μ¦‰μ‹œ λ‘œλ”© μƒνƒœ μ„€μ • const videoIdentifier = videoId || showUrl || bannerId; if (videoIdentifier) { 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)); } else { - console.log('[startVideoPlayerNew] ⚠️ No videoIdentifier provided'); + console.log('[startVideoPlayerNew] *** ⚠️ No videoIdentifier provided'); } 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 = 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) { panelWorkingAction = updatePanel; + console.log('[startVideoPlayerNew] *** πŸ“‹ Current PLAYER_PANEL panelInfo:', topPanel.panelInfo); } // 쀑볡 μ‹€ν–‰ 방지: 같은 λ°°λ„ˆ + 같은 modal μƒνƒœ/μ»¨ν…Œμ΄λ„ˆλ©΄ skip @@ -191,10 +192,10 @@ export const startVideoPlayerNew = const isSameModalType = currentPanelInfo.modal === modal; 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) { - console.log('[startVideoPlayerNew] ⏭️ SKIPPED - λ™μΌν•œ μš”μ²­', { + console.log('[startVideoPlayerNew] *** ⏭️ SKIPPED - λ™μΌν•œ μš”μ²­', { bannerId, modal, modalContainerId, @@ -206,7 +207,7 @@ export const startVideoPlayerNew = ...currentPlayerState, currentBannerId: bannerId, }; - console.log('[startVideoPlayerNew] πŸ”„ Player state updated - currentBannerId:', bannerId); + console.log('[startVideoPlayerNew] *** πŸ”„ Player state updated - currentBannerId:', bannerId); dispatch( panelWorkingAction( @@ -226,20 +227,20 @@ export const startVideoPlayerNew = 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) { - console.log('[startVideoPlayerNew] 🎯 Setting Spotlight focus - containerId:', modalContainerId); + console.log('[startVideoPlayerNew] *** 🎯 Setting Spotlight focus - containerId:', modalContainerId); Spotlight.setPointerMode(false); startVideoFocusTimer = setTimeout(() => { - console.log('[startVideoPlayerNew] πŸ” Spotlight.focus called'); + console.log('[startVideoPlayerNew] *** πŸ” Spotlight.focus called'); Spotlight.focus(modalContainerId); }, 0); } 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) => { @@ -451,7 +452,9 @@ export const hideModalVideo = () => (dispatch, getState) => { // μΆ•μ†Œλœ λͺ¨λ‹¬ λΉ„λ””μ˜€λ₯Ό μ›λž˜ 크기둜 볡ꡬ export const showModalVideo = () => (dispatch, getState) => { + console.log('[showModalVideo] *** βœ… START'); const panels = getState().panels.panels; + console.log('[showModalVideo] *** πŸ“Š Total panels count:', panels.length); // μΆ•μ†Œλœ modal PlayerPanel μ°ΎκΈ° const shrunkModalPlayerPanel = panels.find( @@ -461,30 +464,35 @@ export const showModalVideo = () => (dispatch, getState) => { panel.panelInfo?.shouldShrinkTo1px ); + console.log('[showModalVideo] *** πŸ” Shrunk modal PlayerPanel found:', !!shrunkModalPlayerPanel); + if (shrunkModalPlayerPanel) { const panelInfo = shrunkModalPlayerPanel.panelInfo; const shrinkInfo = panelInfo.playerState?.shrinkInfo; - // console.log('[HomePanel] showModalVideo: expanding video', { - // hasShrinkInfo: !!shrinkInfo, - // hasModalStyle: !!shrinkInfo?.modalStyle, - // hasModalContainerId: !!shrinkInfo?.modalContainerId, - // }); + console.log('[showModalVideo] *** πŸ“‹ ShrinkInfo available:', !!shrinkInfo); + console.log('[showModalVideo] *** πŸ“‹ Current panelInfo state:', { + shouldShrinkTo1px: panelInfo.shouldShrinkTo1px, + modal: panelInfo.modal, + modalContainerId: panelInfo.modalContainerId, + hasModalStyle: !!panelInfo.modalStyle, + }); const updatedPanelInfo = { ...panelInfo, shouldShrinkTo1px: false, // μΆ•μ†Œ ν”Œλž˜κ·Έ ν•΄μ œ - skipModalStyleRecalculation: true, // ← 볡ꡬ κ³Όμ •μ—μ„œ DOM μž¬κ³„μ‚° μŠ€ν‚΅ - // μ €μž₯된 μ •λ³΄λ‘œ 볡ꡬ + // μ €μž₯된 μ •λ³΄λ‘œ 볡ꡬ (ν•˜μ§€λ§Œ DOM μž¬κ³„μ‚°μ€ ν—ˆμš©) ...(shrinkInfo && { modalContainerId: shrinkInfo.modalContainerId, modalClassName: shrinkInfo.modalClassName, modalStyle: shrinkInfo.modalStyle, 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( updatePanel({ @@ -492,8 +500,9 @@ export const showModalVideo = () => (dispatch, getState) => { panelInfo: updatedPanelInfo, }) ); + console.log('[showModalVideo] *** ✨ updatePanel dispatched'); } else { - console.log('[HomePanel] showModalVideo: No shrunk modal PlayerPanel found', { + console.log('[showModalVideo] *** ⚠️ No shrunk modal PlayerPanel found', { panels: panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal, @@ -501,6 +510,8 @@ export const showModalVideo = () => (dispatch, getState) => { })), }); } + + console.log('[showModalVideo] *** βœ… END'); }; // πŸ”½ νŒ¨λ„μ€ μœ μ§€ν•˜κ³  λΉ„λ””μ˜€λ§Œ μ€‘μ§€ν•˜λŠ” ν•¨μˆ˜λ“€ diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 95e4d667..9ea8033f 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -754,27 +754,42 @@ const HomePanel = ({ isOnTop }) => { useEffect(() => { if (detailPanelClosedTime && isOnTop) { - console.log('[HomePanel] βœ… DetailPanel λ‹«νž˜ 감지됨!'); - console.log('[HomePanel] lastDetailPanelClosed:', detailPanelClosedTime); - console.log('[HomePanel] isOnTop:', isOnTop); - console.log('[HomePanel] videoPlayIntentRef.current:', videoPlayIntentRef.current); - console.log('[HomePanel] lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current); + console.log('[HomePanel] *** βœ… DetailPanel λ‹«νž˜ 감지됨!'); + console.log('[HomePanel] *** lastDetailPanelClosed:', detailPanelClosedTime); + console.log('[HomePanel] *** isOnTop:', isOnTop); + console.log('[HomePanel] *** videoPlayIntentRef.current:', videoPlayIntentRef.current); + console.log('[HomePanel] *** lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current); // [TODO] DetailPanel λ‹«νž˜ ν›„ λΉ„λ””μ˜€ μžλ™ μž¬μƒ 볡ꡬ if (videoPlayIntentRef.current && lastPlayedBannerIdRef.current) { - dispatch(startVideoPlayerNew({ - modal: true, - modalContainerId: 'home-video-modal', - modalClassName: 'home-video-modal', - bannerId: lastPlayedBannerIdRef.current, - videoId: videoPlayIntentRef.current.videoId, - showUrl: videoPlayIntentRef.current.showUrl, - patnrId: videoPlayIntentRef.current.patnrId, - showId: videoPlayIntentRef.current.showId, - shptmBanrTpNm: videoPlayIntentRef.current.shptmBanrTpNm, - lgCatCd: videoPlayIntentRef.current.lgCatCd, - })); - + // πŸ”½ videoPlayIntentRefλŠ” videoProps에 λΉ„λ””μ˜€ 정보λ₯Ό λ‹΄κ³  μžˆμœΌλ―€λ‘œ ν’€μ–΄μ„œ 전달 + // ν˜Ήμ‹œ videoProps에 μ—†λŠ” ν•„λ“œλŠ” μƒμœ„ λ ˆλ²¨μ„ fallback으둜 μ‚¬μš© + const intent = videoPlayIntentRef.current; + const videoProps = intent.videoProps || {}; + + // πŸ”½ [251118] ν˜„μž¬ 슀크둀 μœ„μΉ˜ ν™•μΈν•˜μ—¬ λΉ„λ””μ˜€ 크기 κ²°μ • + const currentScrollTop = prevScrollTopRef.current; + const shouldShrink = currentScrollTop > 1; + console.log('[HomePanel] *** λΉ„λ””μ˜€ 볡ꡬ - currentScrollTop:', currentScrollTop, ', shouldShrink:', shouldShrink); + + 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 μ΄ˆκΈ°ν™” videoPlayIntentRef.current = null; lastPlayedBannerIdRef.current = null;