[251124] fix: Log정리-2
🕐 커밋 시간: 2025. 11. 24. 12:03:52 📊 변경 통계: • 총 파일: 5개 • 추가: +306줄 • 삭제: -256줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/productActions.js ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js ~ com.twin.app.shoptime/src/reducers/panelReducer.js ~ com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx 🔧 함수 변경 내용: 📄 com.twin.app.shoptime/src/actions/productActions.js (javascript): ✅ Added: dwarn(), derror(), onSuccess() 🔄 Modified: pickParams(), createGetThunk(), async() ❌ Deleted: onSuccess() 📄 com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js (javascript): ✅ Added: dwarn(), derror() 📄 com.twin.app.shoptime/src/reducers/panelReducer.js (javascript): ✅ Added: dwarn(), derror() 📄 com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.jsx (javascript): ✅ Added: dwarn(), derror(), onSuccess(), onTestSuccess() ❌ Deleted: onSuccess(), onTestSuccess() 📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx (javascript): ✅ Added: dwarn(), derror() 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • UI 컴포넌트 아키텍처 개선 • API 서비스 레이어 개선
This commit is contained in:
@@ -66,6 +66,21 @@ import TabContainerV2 from './PlayerTabContents/v2/TabContainer.v2';
|
||||
|
||||
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused', preserveId: true }, 'div');
|
||||
|
||||
// Toggle debug logging for this view
|
||||
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);
|
||||
};
|
||||
|
||||
const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
|
||||
try {
|
||||
if (currentAttempts >= maxAttempts) {
|
||||
@@ -363,7 +378,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
// PlayerPanel.jsx의 라인 313-327 useEffect 수정 - detailPanelClosed flag 감지 추가
|
||||
useEffect(() => {
|
||||
console.log('[PlayerPanel] 🔍 isOnTop useEffect 호출:', {
|
||||
dlog('[PlayerPanel] 🔍 isOnTop useEffect 호출:', {
|
||||
isOnTop,
|
||||
modal: panelInfo?.modal,
|
||||
isPaused: panelInfo?.isPaused,
|
||||
@@ -374,18 +389,18 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
// 1. Resume Video if needed (isPaused or detailPanelClosed)
|
||||
if (panelInfo.isPaused || panelInfo.detailPanelClosed) {
|
||||
if (panelInfo.modal) {
|
||||
console.log('[PlayerPanel] ▶️ Back on top (Modal) - resuming video');
|
||||
dlog('[PlayerPanel] ▶️ Back on top (Modal) - resuming video');
|
||||
dispatch(resumeModalVideo());
|
||||
} else {
|
||||
console.log('[PlayerPanel] ▶️ Back on top (Fullscreen) - resuming video');
|
||||
dlog('[PlayerPanel] ▶️ Back on top (Fullscreen) - resuming video');
|
||||
dispatch(resumeFullscreenVideo());
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Reset detailPanelClosed flag
|
||||
if (panelInfo.detailPanelClosed) {
|
||||
console.log('[PlayerPanel] 🔄 detailPanelClosed flag 초기화 시작');
|
||||
console.log('[PlayerPanel] 🔙 DetailPanel에서 복귀 정보:', {
|
||||
dlog('[PlayerPanel] 🔄 detailPanelClosed flag 초기화 시작');
|
||||
dlog('[PlayerPanel] 🔙 DetailPanel에서 복귀 정보:', {
|
||||
detailPanelClosedAt: panelInfo.detailPanelClosedAt,
|
||||
detailPanelClosedFromSource: panelInfo.detailPanelClosedFromSource,
|
||||
lastFocusedTargetId: panelInfo.lastFocusedTargetId,
|
||||
@@ -393,13 +408,13 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
// 포커스 복원 로직 추가 (1000ms 지연)
|
||||
if (panelInfo.lastFocusedTargetId) {
|
||||
console.log(
|
||||
dlog(
|
||||
'[PlayerPanel] 🎯 DetailPanel 복귀 후 1000ms 지연 포커스 복원 예약:',
|
||||
panelInfo.lastFocusedTargetId
|
||||
);
|
||||
|
||||
const focusTimeoutId = setTimeout(() => {
|
||||
console.log(
|
||||
dlog(
|
||||
'[PlayerPanel] 🔍 DetailPanel 복귀 후 포커스 복원 실행:',
|
||||
panelInfo.lastFocusedTargetId
|
||||
);
|
||||
@@ -410,7 +425,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
return () => {
|
||||
if (focusTimeoutId) {
|
||||
clearTimeout(focusTimeoutId);
|
||||
console.log('[PlayerPanel] 🧹 포커스 복원 타이머 정리됨');
|
||||
dlog('[PlayerPanel] 🧹 포커스 복원 타이머 정리됨');
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -426,12 +441,12 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
},
|
||||
})
|
||||
);
|
||||
console.log('[PlayerPanel] 🏁 detailPanelClosed flag 초기화 완료');
|
||||
dlog('[PlayerPanel] 🏁 detailPanelClosed flag 초기화 완료');
|
||||
}
|
||||
} else {
|
||||
// Not on top
|
||||
if (panelInfo && panelInfo.modal) {
|
||||
console.log('[PlayerPanel] ⏸️ Not on top (Modal) - pausing video logic commented out');
|
||||
dlog('[PlayerPanel] ⏸️ Not on top (Modal) - pausing video logic commented out');
|
||||
// dispatch(pauseModalVideo());
|
||||
}
|
||||
}
|
||||
@@ -464,7 +479,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
(isOnTop && videoPlayState && hasSignificantChange) ||
|
||||
(isDetailPanelOnTop && (isPlayingChanged || isPausedChanged))
|
||||
) {
|
||||
console.log('📊 [PlayerPanel] Significant videoPlayState change', {
|
||||
dlog('📊 [PlayerPanel] Significant videoPlayState change', {
|
||||
previousState: previousVideoPlayState.current,
|
||||
currentState: videoPlayState,
|
||||
topPanelName: topPanel?.name,
|
||||
@@ -492,7 +507,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
if (isOnTop && panelInfo?.isPaused !== undefined && isPausedChanged) {
|
||||
// 상태 변경 시에만 디버깅 로그 출력
|
||||
console.log('🔍 [PlayerPanel] PanelInfo isPaused changed', {
|
||||
dlog('🔍 [PlayerPanel] PanelInfo isPaused changed', {
|
||||
previousIsPaused: previousPanelInfo.current?.isPaused,
|
||||
currentIsPaused: panelInfo.isPaused,
|
||||
isOnTop,
|
||||
@@ -500,7 +515,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
currentPlayingUrl,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
console.log('🎮 [PlayerPanel] PanelInfo isPaused changed', {
|
||||
dlog('🎮 [PlayerPanel] PanelInfo isPaused changed', {
|
||||
previousIsPaused: previousPanelInfo.current?.isPaused,
|
||||
currentIsPaused: panelInfo.isPaused,
|
||||
videoPlayerExists: !!videoPlayer.current,
|
||||
@@ -513,10 +528,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
if (videoPlayer.current) {
|
||||
if (panelInfo.isPaused === true) {
|
||||
console.log('🔴 [PlayerPanel] Calling VideoPlayer.pause() due to PanelInfo change');
|
||||
dlog('🔴 [PlayerPanel] Calling VideoPlayer.pause() due to PanelInfo change');
|
||||
videoPlayer.current.pause();
|
||||
} else if (panelInfo.isPaused === false) {
|
||||
console.log('🟢 [PlayerPanel] Calling VideoPlayer.play() due to PanelInfo change');
|
||||
dlog('🟢 [PlayerPanel] Calling VideoPlayer.play() due to PanelInfo change');
|
||||
videoPlayer.current.play();
|
||||
}
|
||||
}
|
||||
@@ -550,7 +565,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
? 'Top panel changed'
|
||||
: 'VideoPlayer created';
|
||||
|
||||
console.log('🎬 [PlayerPanel] VideoPlayer state change', {
|
||||
dlog('🎬 [PlayerPanel] VideoPlayer state change', {
|
||||
hasVideoPlayer: !!videoPlayer.current,
|
||||
currentPlayingUrl,
|
||||
previousVideoSource: previousVideoSource.current,
|
||||
@@ -570,7 +585,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
if (isVideoSourceChanged || videoPlayerJustCreated || isDetailPanelOnTopChanged) {
|
||||
const mediaState = videoPlayer.current.getMediaState?.();
|
||||
if (mediaState) {
|
||||
console.log('📊 [PlayerPanel] VideoPlayer current state', {
|
||||
dlog('📊 [PlayerPanel] VideoPlayer current state', {
|
||||
mediaState,
|
||||
videoPlayState,
|
||||
changeReason,
|
||||
@@ -590,7 +605,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
const currentModalState = panelInfo?.modal;
|
||||
const prevModalState = modalPrevRef.current;
|
||||
|
||||
console.log('[PlayerPanel] 🔍 Modal 상태 체크:', {
|
||||
dlog('[PlayerPanel] 🔍 Modal 상태 체크:', {
|
||||
prevModalState,
|
||||
currentModalState,
|
||||
shouldExecuteTrueToFalse: prevModalState === true && currentModalState === false,
|
||||
@@ -599,8 +614,8 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
// true → false 변화 감지
|
||||
if (prevModalState === true && currentModalState === false) {
|
||||
console.log('[PlayerPanel] ▶️ Modal 상태 변화: true → false (전체화면 모드로 복귀)');
|
||||
console.log(
|
||||
dlog('[PlayerPanel] ▶️ Modal 상태 변화: true → false (전체화면 모드로 복귀)');
|
||||
dlog(
|
||||
'[PlayerPanel] 🎯 포커스 복원 준비 - lastFocusedTargetId:',
|
||||
panelInfo?.lastFocusedTargetId
|
||||
);
|
||||
@@ -612,7 +627,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
if (lastFocusedTargetId) {
|
||||
// ShopNowContents가 렌더링될 때까지 대기 후 포커스 복원
|
||||
setTimeout(() => {
|
||||
console.log('[PlayerPanel] 🔍 800ms 후 포커스 복원 시도:', lastFocusedTargetId);
|
||||
dlog('[PlayerPanel] 🔍 800ms 후 포커스 복원 시도:', lastFocusedTargetId);
|
||||
Spotlight.focus(lastFocusedTargetId);
|
||||
}, 800);
|
||||
}
|
||||
@@ -620,7 +635,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
// false → true 변화 감지 (모달이 열림)
|
||||
if (prevModalState === false && currentModalState === true) {
|
||||
console.log('[PlayerPanel] 📱 Modal 상태 변화: false → true (모달 열림)');
|
||||
dlog('[PlayerPanel] 📱 Modal 상태 변화: false → true (모달 열림)');
|
||||
setIsModalClosed(false); // 모달이 열렸음을 표시
|
||||
}
|
||||
|
||||
@@ -1273,7 +1288,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
// 🔍 DetailPanel 상태 변화 로깅
|
||||
if (result) {
|
||||
console.log('🎬 [PlayerPanel] DetailPanel is now on top (from Player)', {
|
||||
dlog('🎬 [PlayerPanel] DetailPanel is now on top (from Player)', {
|
||||
topPanelName: topPanel?.name,
|
||||
launchedFromPlayer: topPanel?.panelInfo?.launchedFromPlayer,
|
||||
modalPlayerPanelExists: panels.some(
|
||||
@@ -1299,7 +1314,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
// PlayerPanel이 modal이고 밑에 깔렸을 때
|
||||
if (isModalPlayerPanel && !isCurrentPanelOnTop && isDetailPanelOnTop) {
|
||||
console.log('🔴 [PlayerPanel] Self-pausing due to DetailPanel on top', {
|
||||
dlog('🔴 [PlayerPanel] Self-pausing due to DetailPanel on top', {
|
||||
isDetailPanelOnTop,
|
||||
isModalPlayerPanel,
|
||||
isCurrentPanelOnTop,
|
||||
@@ -1310,7 +1325,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
// PlayerPanel 자신의 상태를 일시정지로 업데이트
|
||||
if (videoPlayState?.isPlaying === true || videoPlayState?.isPaused === false) {
|
||||
console.log('🔄 [PlayerPanel] Dispatching self-pause to Redux');
|
||||
dlog('🔄 [PlayerPanel] Dispatching self-pause to Redux');
|
||||
dispatch(
|
||||
updateVideoPlayState({
|
||||
isPlaying: false,
|
||||
@@ -1404,7 +1419,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
}
|
||||
} else {
|
||||
// showId가 일치하지 않으면 이전 상태를 재활용하지 않고 초기화
|
||||
console.log('[PlayerPanel] VOD showDetailInfo mismatch. Clearing playListInfo.', {
|
||||
dlog('[PlayerPanel] VOD showDetailInfo mismatch. Clearing playListInfo.', {
|
||||
panelInfoShowId: panelInfo.showId,
|
||||
showDetailInfoId: showDetailInfo[0]?.showId,
|
||||
});
|
||||
@@ -1686,7 +1701,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
(ev) => {
|
||||
const type = ev.type;
|
||||
if (type !== 'timeupdate' && type !== 'durationchange') {
|
||||
console.log('mediainfoHandler....', type, ev, videoPlayer.current?.getMediaState());
|
||||
dlog('mediainfoHandler....', type, ev, videoPlayer.current?.getMediaState());
|
||||
}
|
||||
if (ev === 'hlsError' && isNaN(Number(videoPlayer.current?.getMediaState().playbackRate))) {
|
||||
dispatch(
|
||||
@@ -1717,7 +1732,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
const mediaId = videoPlayer.current?.video?.media?.mediaId;
|
||||
setMediaId(mediaId);
|
||||
setVideoLoaded(true);
|
||||
console.log(
|
||||
dlog(
|
||||
'[PlayerPanel] 🎬 Video Loaded - shptmBanrTpNm:',
|
||||
panelInfoRef.current?.shptmBanrTpNm
|
||||
);
|
||||
@@ -1751,7 +1766,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
useEffect(() => {
|
||||
// 복구 직후: skipModalStyleRecalculation이 true면 저장된 modalStyle 적용
|
||||
if (panelInfo.skipModalStyleRecalculation && !panelInfo.shouldShrinkTo1px) {
|
||||
console.log('[PlayerPanel] Condition 2.5: Using saved modalStyle from expand');
|
||||
dlog('[PlayerPanel] Condition 2.5: Using saved modalStyle from expand');
|
||||
const shrinkInfo = panelInfo.playerState?.shrinkInfo;
|
||||
|
||||
// 저장된 modalStyle 사용 (top, left 포함)
|
||||
@@ -1767,7 +1782,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
if (typeof window !== 'undefined') {
|
||||
window.requestAnimationFrame(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
console.log('[PlayerPanel] Condition 2.5: Removing skipFlag after DOM render');
|
||||
dlog('[PlayerPanel] Condition 2.5: Removing skipFlag after DOM render');
|
||||
dispatch(
|
||||
updatePanel({
|
||||
name: panel_names.PLAYER_PANEL,
|
||||
@@ -1788,7 +1803,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
panelInfo.modalContainerId &&
|
||||
(lastPanelAction === 'previewPush' || lastPanelAction === 'previewUpdate')
|
||||
) {
|
||||
console.log('[PlayerPanel] Condition 1: Calculating modalStyle from DOM', {
|
||||
dlog('[PlayerPanel] Condition 1: Calculating modalStyle from DOM', {
|
||||
lastPanelAction,
|
||||
});
|
||||
const node = document.querySelector(`[data-spotlight-id="${panelInfo.modalContainerId}"]`);
|
||||
@@ -1815,17 +1830,17 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
})
|
||||
);
|
||||
} else {
|
||||
console.log('[PlayerPanel] Condition 1: Node not found, using saved modalStyle');
|
||||
dlog('[PlayerPanel] Condition 1: Node not found, using saved modalStyle');
|
||||
setModalStyle(panelInfo.modalStyle);
|
||||
setModalScale(panelInfo.modalScale);
|
||||
}
|
||||
} else if (panelInfo.shouldShrinkTo1px) {
|
||||
console.log('[PlayerPanel] Condition 2: Shrinking - clearing modalStyle');
|
||||
dlog('[PlayerPanel] Condition 2: Shrinking - clearing modalStyle');
|
||||
// 축소 상태: 인라인 스타일 제거 (CSS만 적용)
|
||||
setModalStyle({});
|
||||
setModalScale(1);
|
||||
} else if (isOnTop && !panelInfo.modal && videoPlayer.current) {
|
||||
console.log('[PlayerPanel] Condition 3: Playing fullscreen video');
|
||||
dlog('[PlayerPanel] Condition 3: Playing fullscreen video');
|
||||
if (videoPlayer.current?.getMediaState()?.paused) {
|
||||
videoPlayer.current.play();
|
||||
}
|
||||
@@ -1923,7 +1938,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
// 비디오가 새로 선택될 때 타이머 초기화
|
||||
useEffect(() => {
|
||||
if (currentPlayingUrl) {
|
||||
console.log('[PlayerPanel] 🎬 비디오 선택됨 - tabIndexV2 타이머 초기화');
|
||||
dlog('[PlayerPanel] 🎬 비디오 선택됨 - tabIndexV2 타이머 초기화');
|
||||
resetTimerTabAutoAdvance(10000);
|
||||
}
|
||||
}, [selectedIndex, resetTimerTabAutoAdvance]);
|
||||
@@ -2322,10 +2337,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
const clearTimerV2 = useCallback(() => {
|
||||
if (timerIdV2.current) {
|
||||
console.log('[clearTimerV2] 타이머 클리어됨');
|
||||
dlog('[clearTimerV2] 타이머 클리어됨');
|
||||
const stack = new Error().stack;
|
||||
const lines = stack.split('\n').slice(1, 4).join(' → ');
|
||||
console.log('[clearTimerV2] 호출 스택:', lines);
|
||||
dlog('[clearTimerV2] 호출 스택:', lines);
|
||||
}
|
||||
clearTimeout(timerIdV2.current);
|
||||
timerIdV2.current = null;
|
||||
@@ -2333,19 +2348,19 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
const resetTimerV2 = useCallback(
|
||||
(timeout) => {
|
||||
console.log('[TabContainerV2] resetTimerV2 호출', timeout);
|
||||
dlog('[TabContainerV2] resetTimerV2 호출', timeout);
|
||||
if (timerIdV2.current) {
|
||||
console.log('[TabContainerV2] 기존 타이머 클리어');
|
||||
dlog('[TabContainerV2] 기존 타이머 클리어');
|
||||
clearTimerV2();
|
||||
}
|
||||
|
||||
if (initialEnterV2) {
|
||||
console.log('[TabContainerV2] initialEnterV2 false로 변경');
|
||||
dlog('[TabContainerV2] initialEnterV2 false로 변경');
|
||||
setInitialEnterV2(false);
|
||||
}
|
||||
|
||||
timerIdV2.current = setTimeout(() => {
|
||||
console.log('[TabContainerV2] 타이머 실행 - belowContentsVisible false로 변경 (30초 경과)');
|
||||
dlog('[TabContainerV2] 타이머 실행 - belowContentsVisible false로 변경 (30초 경과)');
|
||||
setBelowContentsVisible(false);
|
||||
}, timeout);
|
||||
},
|
||||
@@ -2373,9 +2388,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
// Redux로 오버레이 숨김
|
||||
useEffect(() => {
|
||||
if (shouldHideOverlays) {
|
||||
console.log('[PlayerPanel] shouldHideOverlays true - 오버레이 숨김');
|
||||
dlog('[PlayerPanel] shouldHideOverlays true - 오버레이 숨김');
|
||||
setSideContentsVisible(false);
|
||||
console.log('[setBelowContentsVisible] Redux로 오버레이 숨김 - false로 변경');
|
||||
dlog('[setBelowContentsVisible] Redux로 오버레이 숨김 - false로 변경');
|
||||
setBelowContentsVisible(false);
|
||||
|
||||
if (videoPlayer.current?.hideControls) {
|
||||
@@ -2400,9 +2415,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
// Redux로 오버레이 표시
|
||||
useEffect(() => {
|
||||
if (shouldShowOverlays) {
|
||||
console.log('[PlayerPanel] shouldShowOverlays true - 오버레이 표시');
|
||||
dlog('[PlayerPanel] shouldShowOverlays true - 오버레이 표시');
|
||||
setSideContentsVisible(true);
|
||||
console.log('[setBelowContentsVisible] Redux로 오버레이 표시 - true로 변경');
|
||||
dlog('[setBelowContentsVisible] Redux로 오버레이 표시 - true로 변경');
|
||||
setBelowContentsVisible(true);
|
||||
|
||||
if (videoPlayer.current?.showControls) {
|
||||
@@ -2424,33 +2439,33 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
const isDetailPanelReturn = prevIsTopPanelDetailFromPlayerRef.current === true;
|
||||
|
||||
if (isDetailPanelReturn) {
|
||||
console.log('[PlayerPanel] ✅ PlayerPanel 내부 DetailPanel에서 복귀함! - 오버레이 표시');
|
||||
dlog('[PlayerPanel] ✅ PlayerPanel 내부 DetailPanel에서 복귀함! - 오버레이 표시');
|
||||
} else if (isHomePanelReturn) {
|
||||
console.log('[PlayerPanel] 📺 HomePanel에서 복귀함 - 오버레이 표시');
|
||||
dlog('[PlayerPanel] 📺 HomePanel에서 복귀함 - 오버레이 표시');
|
||||
// HomePanel에서 복귀 시 콘텐츠 타입에 따라 tabIndex 설정
|
||||
console.log('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 콘텐츠 타입에 따라 설정');
|
||||
dlog('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 콘텐츠 타입에 따라 설정');
|
||||
if (tabContainerVersion === 2) {
|
||||
if (panelInfoRef.current.shptmBanrTpNm === 'VOD') {
|
||||
setTabIndexV2(2);
|
||||
console.log('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
|
||||
dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
|
||||
} else {
|
||||
setTabIndexV2(1);
|
||||
console.log('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
|
||||
dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('[PlayerPanel] 🔄 그 외 복귀 - 오버레이 표시');
|
||||
dlog('[PlayerPanel] 🔄 그 외 복귀 - 오버레이 표시');
|
||||
}
|
||||
|
||||
setSideContentsVisible(true);
|
||||
console.log('[setBelowContentsVisible] 복귀 - true로 변경');
|
||||
dlog('[setBelowContentsVisible] 복귀 - true로 변경');
|
||||
setBelowContentsVisible(true);
|
||||
// VideoPlayer가 belowContentsVisible prop을 감지해서 자동으로 controls 표시함
|
||||
|
||||
// PlayerPanel 내부 DetailPanel에서 복귀 시에만 포커스 복원 시도
|
||||
if (isDetailPanelReturn) {
|
||||
const lastFocusedTargetId = panelInfo?.lastFocusedTargetId;
|
||||
console.log(
|
||||
dlog(
|
||||
'[PlayerPanel] 🎯 PlayerPanel DetailPanel 복귀 - lastFocusedTargetId:',
|
||||
lastFocusedTargetId
|
||||
);
|
||||
@@ -2458,7 +2473,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
if (lastFocusedTargetId) {
|
||||
// ShopNowContents가 렌더링될 때까지 잠시 대기 후 포커스 복원
|
||||
setTimeout(() => {
|
||||
console.log('[PlayerPanel] 🔍 500ms 후 포커스 복원 시도:', lastFocusedTargetId);
|
||||
dlog('[PlayerPanel] 🔍 500ms 후 포커스 복원 시도:', lastFocusedTargetId);
|
||||
Spotlight.focus(lastFocusedTargetId);
|
||||
}, 500);
|
||||
}
|
||||
@@ -2484,17 +2499,17 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(
|
||||
dlog(
|
||||
'[PlayerPanel] 📺 Modal false 상태 - shptmBanrTpNm:',
|
||||
panelInfoRef.current?.shptmBanrTpNm
|
||||
);
|
||||
|
||||
if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') {
|
||||
setTabIndexV2(2);
|
||||
console.log('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
|
||||
dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
|
||||
} else {
|
||||
setTabIndexV2(1);
|
||||
console.log('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
|
||||
dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
|
||||
}
|
||||
}
|
||||
}, [isOnTop, panelInfo.modal, videoVerticalVisible, tabContainerVersion]);
|
||||
@@ -2566,30 +2581,30 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
if (!isTransitionedTo2) {
|
||||
if (timerIdV2.current) {
|
||||
console.log('[TabContainerV2] 타이머 클리어 - tabIndex가 2가 아님', tabIndexV2);
|
||||
dlog('[TabContainerV2] 타이머 클리어 - tabIndex가 2가 아님', tabIndexV2);
|
||||
clearTimerV2();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[TabContainerV2] tabIndex 1 → 2 감지, 타이머 시작');
|
||||
dlog('[TabContainerV2] tabIndex 1 → 2 감지, 타이머 시작');
|
||||
|
||||
if (!belowContentsVisible || videoVerticalVisible) {
|
||||
console.log(
|
||||
dlog(
|
||||
'[TabContainerV2] early return - belowContentsVisible 또는 videoVerticalVisible 조건 불만족'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// tabIndex 1 → 2로 변경된 정확한 시점에 30초 타이머 시작
|
||||
console.log('[TabContainerV2] 30초 타이머 시작');
|
||||
dlog('[TabContainerV2] 30초 타이머 시작');
|
||||
resetTimerV2(REGULAR_TIMEOUT);
|
||||
|
||||
return () => {
|
||||
// cleanup: tabIndex가 2가 아니거나 오버레이가 사라질 때만 타이머 클리어
|
||||
if (!belowContentsVisible || videoVerticalVisible || tabIndexV2 !== 2) {
|
||||
if (timerIdV2.current) {
|
||||
console.log('[TabContainerV2] cleanup - 타이머 클리어');
|
||||
dlog('[TabContainerV2] cleanup - 타이머 클리어');
|
||||
clearTimerV2();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user