[251106] feat: Queued Panel functions

🕐 커밋 시간: 2025. 11. 06. 09:25:09

📊 변경 통계:
  • 총 파일: 7개
  • 추가: +174줄
  • 삭제: -1줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/actions/queuedPanelActions.js
  + com.twin.app.shoptime/src/middleware/panelQueueMiddleware.js
  + com.twin.app.shoptime/src/utils/panelQueueExamples.js
  + com.twin.app.shoptime/src/utils/panelQueueSetupGuide.js

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/actionTypes.js
  ~ com.twin.app.shoptime/src/reducers/panelReducer.js
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx

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

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

@@ -2,8 +2,19 @@ import { types } from '../actions/actionTypes';
 import { panel_names } from '../utils/Config';
 
 const initialState = {
+  // 기존 상태 - 완전히 호환됨
   panels: [],
   lastPanelAction: '', //"", "push", "pop", "update", "reset", "previewPush", "previewPop", "previewUpdate"
+
+  // [251106] 패널 액션 큐 관련 상태 - 기존 기능에 전혀 영향 없음
+  panelActionQueue: [], // 처리 대기 중인 패널 액션 큐
+  isProcessingQueue: false, // 현재 큐 처리 중인지 여부
+  queueError: null, // 큐 처리 중 발생한 에러
+  queueStats: {
+    totalProcessed: 0, // 총 처리된 액션 수
+    failedCount: 0, // 실패한 액션 수
+    averageProcessingTime: 0 // 평균 처리 시간
+  }
 };
 
 // last one will be on top
@@ -165,6 +176,162 @@ export const panelsReducer = (state = initialState, action) => {
       };
     }
 
+    // [251106] 패널 액션 큐 관련 reducer 케이스들
+    case types.ENQUEUE_PANEL_ACTION: {
+      console.log('[panelReducer] 🟠 ENQUEUE_PANEL_ACTION', {
+        action: action.payload.action,
+        queueId: action.payload.id,
+        currentQueueLength: state.panelActionQueue.length,
+      });
+
+      const newQueueItem = action.payload;
+      const updatedQueue = [...state.panelActionQueue, newQueueItem];
+
+      return {
+        ...state,
+        panelActionQueue: updatedQueue,
+        queueError: null, // 에러 초기화
+      };
+    }
+
+    case types.PROCESS_PANEL_QUEUE: {
+      console.log('[panelReducer] 🟡 PROCESS_PANEL_QUEUE', {
+        isProcessing: state.isProcessingQueue,
+        queueLength: state.panelActionQueue.length,
+      });
+
+      // 이미 처리 중이거나 큐가 비어있으면 아무것도 하지 않음
+      if (state.isProcessingQueue || state.panelActionQueue.length === 0) {
+        return state;
+      }
+
+      // 큐의 첫 번째 아이템을 가져옴
+      const firstQueueItem = state.panelActionQueue[0];
+      const remainingQueue = state.panelActionQueue.slice(1);
+
+      console.log('[panelReducer] 🟡 PROCESSING_QUEUE_ITEM', {
+        action: firstQueueItem.action,
+        queueId: firstQueueItem.id,
+        remainingQueueLength: remainingQueue.length,
+      });
+
+      // 실제 패널 액션을 실행하여 새로운 상태 계산
+      let newState = state;
+      const startTime = Date.now();
+
+      try {
+        switch (firstQueueItem.action) {
+          case 'PUSH_PANEL': {
+            const mockAction = {
+              type: types.PUSH_PANEL,
+              payload: firstQueueItem.panel,
+              duplicatable: firstQueueItem.duplicatable,
+            };
+            newState = panelsReducer(state, mockAction);
+            break;
+          }
+          case 'POP_PANEL': {
+            const mockAction = {
+              type: types.POP_PANEL,
+              payload: firstQueueItem.panelName,
+            };
+            newState = panelsReducer(state, mockAction);
+            break;
+          }
+          case 'UPDATE_PANEL': {
+            const mockAction = {
+              type: types.UPDATE_PANEL,
+              payload: firstQueueItem.panelInfo,
+            };
+            newState = panelsReducer(state, mockAction);
+            break;
+          }
+          case 'RESET_PANELS': {
+            const mockAction = {
+              type: types.RESET_PANELS,
+              payload: firstQueueItem.panels,
+            };
+            newState = panelsReducer(state, mockAction);
+            break;
+          }
+          default:
+            console.warn('[panelReducer] ⚠️ UNKNOWN_QUEUE_ACTION', firstQueueItem.action);
+            newState = state;
+        }
+
+        const processingTime = Date.now() - startTime;
+        const newTotalProcessed = state.queueStats.totalProcessed + 1;
+        const newAverageTime =
+          (state.queueStats.averageProcessingTime * state.queueStats.totalProcessed + processingTime) /
+          newTotalProcessed;
+
+        console.log('[panelReducer] ✅ QUEUE_ITEM_PROCESSED', {
+          action: firstQueueItem.action,
+          queueId: firstQueueItem.id,
+          processingTime,
+          newTotalProcessed,
+        });
+
+        return {
+          ...newState,
+          panelActionQueue: remainingQueue,
+          isProcessingQueue: remainingQueue.length > 0,
+          queueStats: {
+            ...newState.queueStats,
+            totalProcessed: newTotalProcessed,
+            averageProcessingTime: Math.round(newAverageTime * 100) / 100,
+          },
+        };
+      } catch (error) {
+        console.error('[panelReducer] ❌ QUEUE_PROCESSING_ERROR', {
+          action: firstQueueItem.action,
+          queueId: firstQueueItem.id,
+          error: error.message,
+        });
+
+        return {
+          ...state,
+          panelActionQueue: remainingQueue,
+          isProcessingQueue: remainingQueue.length > 0,
+          queueError: {
+            action: firstQueueItem.action,
+            queueId: firstQueueItem.id,
+            error: error.message,
+            timestamp: Date.now(),
+          },
+          queueStats: {
+            ...state.queueStats,
+            failedCount: state.queueStats.failedCount + 1,
+          },
+        };
+      }
+    }
+
+    case types.CLEAR_PANEL_QUEUE: {
+      console.log('[panelReducer] 🔵 CLEAR_PANEL_QUEUE', {
+        currentQueueLength: state.panelActionQueue.length,
+      });
+
+      return {
+        ...state,
+        panelActionQueue: [],
+        isProcessingQueue: false,
+        queueError: null,
+      };
+    }
+
+    case types.SET_QUEUE_PROCESSING: {
+      console.log('[panelReducer] 🟣 SET_QUEUE_PROCESSING', {
+        isProcessing: action.payload.isProcessing,
+        queueLength: state.panelActionQueue.length,
+      });
+
+      return {
+        ...state,
+        isProcessingQueue: action.payload.isProcessing,
+      };
+    }
+
     default:
       return state;
   }