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

[251118] fix: HomePanel focus resotoration remove

Browse Source 
🕐 커밋 시간: 2025. 11. 18. 10:14:26

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

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

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 소규모 기능 개선
This commit is contained in:
hyeon soo noh
2025-11-18 10:14:27 +09:00
parent f8acaa2c3b
commit 508e9e1042
3 changed files with 68 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -68,11 +68,16 @@ export const startVideoPlayer =
...rest
}) =>
(dispatch, getState) => {
console.log('[startVideoPlayer] ✅ START - videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal);
// 🔽 [251116] 즉시 로딩 상태 설정
const videoIdentifier = videoId || showUrl;
if (videoIdentifier) {
const displayMode = modal ? DISPLAY_STATUS.VISIBLE : DISPLAY_STATUS.FULLSCREEN;
console.log('[startVideoPlayer] 📌 Setting playback loading - identifier:', videoIdentifier, ', displayMode:', displayMode);
dispatch(setPlaybackLoading(videoIdentifier, displayMode));
} else {
console.log('[startVideoPlayer] ⚠️ No videoIdentifier provided (videoId and showUrl are both missing)');
}
const panels = getState().panels.panels;
@@ -80,10 +85,15 @@ export const startVideoPlayer =
let panelWorkingAction = pushPanel;
const panelName = panel_names.PLAYER_PANEL;
console.log('[startVideoPlayer] 📊 Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name);
if (topPanel && topPanel.name === panelName) {
panelWorkingAction = updatePanel;
console.log('[startVideoPlayer] 🔄 UPDATING existing PLAYER_PANEL');
} else {
console.log('[startVideoPlayer] ➕ PUSHING new PLAYER_PANEL');
}
dispatch(
panelWorkingAction(
{
@@ -100,12 +110,20 @@ export const startVideoPlayer =
true
)
);
console.log('[startVideoPlayer] ✨ Panel action dispatched');
if (modal && modalContainerId && !spotlightDisable) {
console.log('[startVideoPlayer] 🎯 Setting Spotlight focus - containerId:', modalContainerId);
Spotlight.setPointerMode(false);
startVideoFocusTimer = setTimeout(() => {
console.log('[startVideoPlayer] 🔍 Spotlight.focus called');
Spotlight.focus(modalContainerId);
}, 0);
} else {
console.log('[startVideoPlayer] ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable);
}
console.log('[startVideoPlayer] ✅ END');
};
// 중복 재생 방지: 정말 동일한 요청인지 확인
@@ -142,11 +160,16 @@ export const startVideoPlayerNew =
...rest
}) =>
(dispatch, getState) => {
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);
dispatch(setPlaybackLoading(videoIdentifier, displayMode));
} else {
console.log('[startVideoPlayerNew] ⚠️ No videoIdentifier provided');
}
const panels = getState().panels.panels;
@@ -155,6 +178,7 @@ 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);
if (topPanel && topPanel.name === panelName) {
panelWorkingAction = updatePanel;
@@ -167,8 +191,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);
if (isSameBanner && isSameModalType && isSameContainer) {
console.log('[playActions] startVideoPlayerNew: 동일한 요청이므로 스킵', {
console.log('[startVideoPlayerNew] ⏭️ SKIPPED - 동일한 요청', {
bannerId,
modal,
modalContainerId,
@@ -180,6 +206,7 @@ export const startVideoPlayerNew =
...currentPlayerState,
currentBannerId: bannerId,
};
console.log('[startVideoPlayerNew] 🔄 Player state updated - currentBannerId:', bannerId);
dispatch(
panelWorkingAction(
@@ -199,12 +226,20 @@ export const startVideoPlayerNew =
true
)
);
console.log('[startVideoPlayerNew] ✨ Panel action dispatched - action:', panelWorkingAction === updatePanel ? 'updatePanel' : 'pushPanel');
if (modal && modalContainerId && !spotlightDisable) {
console.log('[startVideoPlayerNew] 🎯 Setting Spotlight focus - containerId:', modalContainerId);
Spotlight.setPointerMode(false);
startVideoFocusTimer = setTimeout(() => {
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] ✅ END');
};
export const finishVideoPreview = () => (dispatch, getState) => {

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

@@ -547,7 +547,14 @@ const HomePanel = ({ isOnTop }) => {
const _onFocusedContainerId = useCallback(
(containerId) => {
setFocusedContainerId(containerId);
console.log('[_onFocusedContainerId] 호출됨:', {
containerId,
enterThroughGNB,
isOnTop,
condition: enterThroughGNB && cbChangePageRef.current && !isOnTop,
});
if (enterThroughGNB && cbChangePageRef.current && !isOnTop) {
console.log('[_onFocusedContainerId] ⚠️ 맨 위로 스크롤 강제 실행!');
Spotlight.resume();
cbChangePageRef.current(0, false);
Spotlight.focus(defaultFocus);
@@ -558,28 +565,10 @@ const HomePanel = ({ isOnTop }) => {
}
if (!firstSpot) {
setTimeout(() => {
Spotlight.resume();
// 초기 포커스 복원으로 스크롤이 튀는 현상 방지: 첫 진입 시 포커스 이동을 생략
setFirstSpot(true);
// 비디오가 1px로 축소된 상태가 아닐 때만 finishVideoPreview 호출
const isVideoShrunk = panels.some(
(panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.shouldShrinkTo1px
);
// if (Spotlight.getPointerMode() && !isVideoShrunk) {
// dispatch(finishVideoPreview());
// }
// if (panelInfo.currentCatCd) {
// Spotlight.focus('spotlightId-' + panelInfo.currentCatCd);
// }
if (panelInfo.currentSpot) {
Spotlight.focus(panelInfo.currentSpot);
}
// }
//exit popup case
Spotlight.focus(SpotlightIds.TPOPUP);
setBtnDisabled(false);
}, 0);
return;
}
},
[
@@ -770,6 +759,26 @@ const HomePanel = ({ isOnTop }) => {
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,
}));
// refs 초기화
videoPlayIntentRef.current = null;
lastPlayedBannerIdRef.current = null;
}
}
}, [detailPanelClosedTime, isOnTop]);

1
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less
View File

@@ -57,6 +57,7 @@
}
&.shrinkTo1px {
/* 모달 비디오를 1px로 축소 */
position: fixed; /* viewport 기준 배치로 스크롤 영향 제거 */
width: 1px;
height: 1px;
left: -1px;