[251124] fix: PlayerPanel videoState updated

🕐 커밋 시간: 2025. 11. 24. 10:45:28

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/mainActions.js
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/api/TAxios.js
  ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
  ~ com.twin.app.shoptime/src/reducers/playReducer.js
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/actions/mainActions.js (javascript):
    ❌ Deleted: onSuccess(), onFail()
  📄 com.twin.app.shoptime/src/actions/playActions.js (javascript):
    🔄 Modified: clearAllVideoTimers(), pauseModalVideo(), hideModalVideo()
    ❌ Deleted: CLEAR_PLAYER_INFO()
  📄 com.twin.app.shoptime/src/api/TAxios.js (javascript):
    🔄 Modified: setTokenRefreshing(), createSafeApiThunk()
  📄 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()
  📄 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx (javascript):
    🔄 Modified: createPanelInfo()

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • API 서비스 레이어 개선
  • UI 컴포넌트 아키텍처 개선

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

@@ -68,24 +68,43 @@ export const startVideoPlayer =
     ...rest
   }) =>
   (dispatch, getState) => {
-    console.log('[startVideoPlayer] ✅ START - videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal);
+    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);
+      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)');
+      console.log(
+        '[startVideoPlayer] ⚠️ No videoIdentifier provided (videoId and showUrl are both missing)'
+      );
     }
 
     const panels = getState().panels.panels;
     const topPanel = panels[panels.length - 1];
     let panelWorkingAction = pushPanel;
-    
+
     const panelName = panel_names.PLAYER_PANEL;
-    console.log('[startVideoPlayer] 📊 Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name);
+    console.log(
+      '[startVideoPlayer] 📊 Panel state - panelsCount:',
+      panels.length,
+      ', topPanelName:',
+      topPanel?.name
+    );
 
     if (topPanel && topPanel.name === panelName) {
       panelWorkingAction = updatePanel;
@@ -161,13 +180,27 @@ 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');
@@ -179,11 +212,19 @@ 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);
+      console.log(
+        '[startVideoPlayerNew] *** 📋 Current PLAYER_PANEL panelInfo:',
+        topPanel.panelInfo
+      );
     }
 
     // 중복 실행 방지: 같은 배너 + 같은 modal 상태/컨테이너 + 같은 URL이면 skip
@@ -195,7 +236,18 @@ export const startVideoPlayerNew =
     const isSameShowUrl = currentPanelInfo.showUrl === showUrl;
     const isSameVideoId = currentPanelInfo.videoId === videoId;
 
-    console.log('[startVideoPlayerNew] *** 🔍 Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer, ', isSameShowUrl:', isSameShowUrl, ', isSameVideoId:', isSameVideoId);
+    console.log(
+      '[startVideoPlayerNew] *** 🔍 Duplicate check - isSameBanner:',
+      isSameBanner,
+      ', isSameModalType:',
+      isSameModalType,
+      ', isSameContainer:',
+      isSameContainer,
+      ', isSameShowUrl:',
+      isSameShowUrl,
+      ', isSameVideoId:',
+      isSameVideoId
+    );
 
     if (isSameBanner && isSameModalType && isSameContainer && isSameShowUrl && isSameVideoId) {
       console.log('[startVideoPlayerNew] *** ⏭️ SKIPPED - 동일한 요청', {
@@ -232,7 +284,10 @@ 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'
+    );
 
     // [COMMENTED OUT] 비디오 재생 시 강제 포커스 이동 비활성화
     // if (modal && modalContainerId && !spotlightDisable) {
@@ -324,7 +379,7 @@ export const pauseModalVideo = () => (dispatch, getState) => {
 // 모달 비디오를 재생 (일시정지 해제)
 export const resumeModalVideo = () => (dispatch, getState) => {
   const panels = getState().panels.panels;
-  
+
   // modal PlayerPanel 찾기
   const modalPlayerPanel = panels.find(
     (panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal
@@ -498,7 +553,10 @@ export const showModalVideo = () => (dispatch, getState) => {
       skipModalStyleRecalculation: false, // 위치 변경 시 DOM 기준으로 다시 계산하도록 허용
     };
 
-    console.log('[showModalVideo] *** 🔄 Updated panelInfo - shouldShrinkTo1px:', updatedPanelInfo.shouldShrinkTo1px);
+    console.log(
+      '[showModalVideo] *** 🔄 Updated panelInfo - shouldShrinkTo1px:',
+      updatedPanelInfo.shouldShrinkTo1px
+    );
     console.log('[showModalVideo] *** 📍 Restored modalStyle:', updatedPanelInfo.modalStyle);
 
     dispatch(
@@ -699,10 +757,27 @@ export const CLEAR_PLAYER_INFO = () => ({
  * @param {number} playState.duration - 전체 비디오 길이(초)
  * @param {number} playState.playbackRate - 재생 속도
  */
-export const updateVideoPlayState = (playState) => ({
-  type: types.UPDATE_VIDEO_PLAY_STATE,
-  payload: playState,
-});
+export const updateVideoPlayState = (playState) => (dispatch, getState) => {
+  const currentState = getState().play.videoPlayState;
+
+  // 상태 변화 감지
+  const hasChanges = Object.keys(playState).some((key) => {
+    return currentState[key] !== playState[key];
+  });
+
+  if (hasChanges) {
+    console.log('🔄 [Redux] updateVideoPlayState action created', {
+      ...playState,
+      timestamp: new Date().toISOString(),
+      caller: new Error().stack?.split('\n')[2]?.trim() || 'unknown',
+    });
+  }
+
+  dispatch({
+    type: types.UPDATE_VIDEO_PLAY_STATE,
+    payload: playState,
+  });
+};
 
 /* 🔽 [추가] 새로운 '플레이 제어 매니저' 액션들 */