[251115] fix: MediaPanel.v3.jsx 비디오재생-1

🕐 커밋 시간: 2025. 11. 15. 12:22:59

📊 변경 통계:
  • 총 파일: 12개
  • 추가: +246줄
  • 삭제: -27줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/utils/focusPanelGuide.js

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/actionTypes.js
  ~ com.twin.app.shoptime/src/actions/mediaActions.js
  ~ com.twin.app.shoptime/src/actions/panelActions.js
  ~ com.twin.app.shoptime/src/reducers/panelReducer.js
  ~ com.twin.app.shoptime/src/utils/SpotlightIds.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/actions/panelActions.js (javascript):
    ✅ Added: resetPanels()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    🔄 Modified: extractProductMeta()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx (javascript):
    🔄 Modified: Spottable()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()
  📄 com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx (javascript):
    🔄 Modified: normalizeModalStyle()
  📄 com.twin.app.shoptime/src/utils/focusPanelGuide.js (javascript):
    ✅ Added: DetailPanel(), handleProductSelect()

🔧 주요 변경 내용:
  • 타입 시스템 안정성 강화
  • 핵심 비즈니스 로직 개선
  • 공통 유틸리티 함수 최적화

com.twin.app.shoptime/src/reducers/panelReducer.js

@@ -5,6 +5,7 @@ const initialState = {
   // 기존 상태 - 완전히 호환됨
   panels: [],
   lastPanelAction: '', //"", "push", "pop", "update", "reset", "previewPush", "previewPop", "previewUpdate"
+  lastFocusTarget: null, // [251114] 마지막 포커스 대상 (panelName + elementId)
 
   // [251106] 패널 액션 큐 관련 상태 - 기존 기능에 전혀 영향 없음
   panelActionQueue: [], // 처리 대기 중인 패널 액션 큐
@@ -13,7 +14,7 @@ const initialState = {
   queueStats: {
     totalProcessed: 0, // 총 처리된 액션 수
     failedCount: 0, // 실패한 액션 수
-    averageProcessingTime: 0 // 평균 처리 시간
+    averageProcessingTime: 0, // 평균 처리 시간
   },
 
   // [251106] 비동기 액션 관련 상태
@@ -30,7 +31,7 @@ export const panelsReducer = (state = initialState, action) => {
     case types.PUSH_PANEL: {
       console.log('[panelReducer] 🔵 PUSH_PANEL START', {
         newPanelName: action.payload.name,
-        currentPanels: state.panels.map(p => p.name),
+        currentPanels: state.panels.map((p) => p.name),
         duplicatable: action.duplicatable,
       });
 
@@ -76,7 +77,7 @@ export const panelsReducer = (state = initialState, action) => {
       }
 
       console.log('[panelReducer] 🔵 PUSH_PANEL END', {
-        resultPanels: newState.map(p => p.name),
+        resultPanels: newState.map((p) => p.name),
         lastAction,
       });
 
@@ -90,7 +91,7 @@ export const panelsReducer = (state = initialState, action) => {
     case types.POP_PANEL: {
       console.log('[panelReducer] 🔴 POP_PANEL START', {
         targetPanel: action.payload || 'last_panel',
-        currentPanels: state.panels.map(p => p.name),
+        currentPanels: state.panels.map((p) => p.name),
       });
 
       let lastAction = 'pop';
@@ -113,7 +114,7 @@ export const panelsReducer = (state = initialState, action) => {
       }
 
       console.log('[panelReducer] 🔴 POP_PANEL END', {
-        resultPanels: resultPanels.map(p => p.name),
+        resultPanels: resultPanels.map((p) => p.name),
         lastAction,
       });
 
@@ -159,7 +160,7 @@ export const panelsReducer = (state = initialState, action) => {
     }
     case types.RESET_PANELS: {
       console.log('[panelReducer] 🟢 RESET_PANELS START', {
-        currentPanels: state.panels.map(p => p.name),
+        currentPanels: state.panels.map((p) => p.name),
         payloadProvided: !!action.payload,
       });
 
@@ -171,7 +172,7 @@ export const panelsReducer = (state = initialState, action) => {
         : [];
 
       console.log('[panelReducer] 🟢 RESET_PANELS END', {
-        resultPanels: updatedPanels.map(p => p.name),
+        resultPanels: updatedPanels.map((p) => p.name),
       });
 
       return {
@@ -267,7 +268,8 @@ export const panelsReducer = (state = initialState, action) => {
         const processingTime = Date.now() - startTime;
         const newTotalProcessed = state.queueStats.totalProcessed + 1;
         const newAverageTime =
-          (state.queueStats.averageProcessingTime * state.queueStats.totalProcessed + processingTime) /
+          (state.queueStats.averageProcessingTime * state.queueStats.totalProcessed +
+            processingTime) /
           newTotalProcessed;
 
         console.log('[panelReducer] ✅ QUEUE_ITEM_PROCESSED', {
@@ -352,7 +354,7 @@ export const panelsReducer = (state = initialState, action) => {
             ...action.payload,
             status: 'running',
             startTime: Date.now(),
-          }
+          },
         },
         queueError: null, // 에러 초기화
       };
@@ -381,16 +383,19 @@ export const panelsReducer = (state = initialState, action) => {
             result: action.payload.result,
             executionTime,
             completedAt: action.payload.timestamp,
-          }
+          },
         ].slice(-100), // 최근 100개만 유지
         queueError: null,
         queueStats: {
           ...state.queueStats,
           totalProcessed: state.queueStats.totalProcessed + 1,
-          averageProcessingTime: Math.round(
-            ((state.queueStats.averageProcessingTime * state.queueStats.totalProcessed) + executionTime) /
-            (state.queueStats.totalProcessed + 1) * 100
-          ) / 100,
+          averageProcessingTime:
+            Math.round(
+              ((state.queueStats.averageProcessingTime * state.queueStats.totalProcessed +
+                executionTime) /
+                (state.queueStats.totalProcessed + 1)) *
+                100
+            ) / 100,
         },
       };
     }
@@ -419,7 +424,7 @@ export const panelsReducer = (state = initialState, action) => {
             error: action.payload.error,
             executionTime,
             failedAt: action.payload.timestamp,
-          }
+          },
         ].slice(-100), // 최근 100개만 유지
         queueError: {
           actionId: action.payload.actionId,
@@ -433,6 +438,24 @@ export const panelsReducer = (state = initialState, action) => {
       };
     }
 
+    // [251114] 명시적 포커스 이동
+    case types.FOCUS_PANEL: {
+      console.log('[panelReducer] 🎯 FOCUS_PANEL', {
+        panelName: action.payload.panelName,
+        focusTarget: action.payload.focusTarget,
+        timestamp: action.payload.timestamp,
+      });
+
+      return {
+        ...state,
+        lastFocusTarget: {
+          panelName: action.payload.panelName,
+          focusTarget: action.payload.focusTarget,
+          timestamp: action.payload.timestamp,
+        },
+      };
+    }
+
     default:
       return state;
   }