[251118] fix: HomePanel focus resotoration remove

🕐 커밋 시간: 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

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 소규모 기능 개선

com.twin.app.shoptime/src/actions/playActions.js

@@ -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) => {

com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

@@ -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);
-          setFirstSpot(true);
+        setBtnDisabled(false);
-          // 비디오가 1px로 축소된 상태가 아닐 때만 finishVideoPreview 호출
+        return;
-          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);
       }
     },
     [
@@ -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]);
 

com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less

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