[251025] feat: usePanelHistory

🕐 커밋 시간: 2025. 10. 25. 05:33:22

📊 변경 통계:
  • 총 파일: 8개
  • 추가: +83줄
  • 삭제: -217줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/actions/panelHistoryActions.js
  + com.twin.app.shoptime/src/hooks/usePanelHistory/index.js
  + com.twin.app.shoptime/src/hooks/usePanelHistory/usePanelHistory.js
  + com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js
  + com.twin.app.shoptime/src/reducers/panelHistoryReducer.js

📝 수정된 파일:
  ~ com.twin.app.shoptime/package-lock.json
  ~ com.twin.app.shoptime/src/actions/actionTypes.js
  ~ com.twin.app.shoptime/src/store/store.js

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/reducers/panelHistoryReducer.js (javascript):
    ✅ Added: enqueuePanel()

🔧 주요 변경 내용:
  • 타입 시스템 안정성 강화
  • 핵심 비즈니스 로직 개선

Performance: 코드 최적화로 성능 개선 기대

com.twin.app.shoptime/src/middleware/panelHistoryMiddleware.js

@@ -0,0 +1,83 @@
+/**
+ * src/middleware/panelHistoryMiddleware.js
+ * Panel history 자동 추적 middleware
+ *
+ * Panel action (PUSH, POP, UPDATE, RESET)을 감지하고
+ * 자동으로 panel history에 기록합니다.
+ */
+
+import { types } from '../actions/actionTypes';
+import { enqueuePanelHistory, clearPanelHistory } from '../actions/panelHistoryActions';
+
+/**
+ * Panel history middleware
+ * 모든 panel action을 감지하여 panelHistory reducer로 자동 기록
+ *
+ * @param {Object} store - Redux store
+ * @returns {Function} middleware function
+ */
+export const panelHistoryMiddleware = (store) => (next) => (action) => {
+  // 원래 액션 실행
+  const result = next(action);
+
+  // Panel action 후 history 업데이트
+  const state = store.getState();
+  const panels = state.panels?.panels || [];
+
+  try {
+    switch (action.type) {
+      // PUSH_PANEL: 새 panel 추가
+      case types.PUSH_PANEL: {
+        if (action.payload) {
+          const { name: panelName, panelInfo = {} } = action.payload;
+
+          if (panelName) {
+            store.dispatch(enqueuePanelHistory(panelName, panelInfo, 'PUSH'));
+          }
+        }
+        break;
+      }
+
+      // POP_PANEL: panel 제거 후 이전 panel 기록
+      case types.POP_PANEL: {
+        // POP 후 top panel을 기록 (이전 패널로 돌아감)
+        if (panels.length > 0) {
+          const topPanel = panels[panels.length - 1];
+          if (topPanel && topPanel.name) {
+            store.dispatch(enqueuePanelHistory(topPanel.name, topPanel.panelInfo || {}, 'POP'));
+          }
+        }
+        break;
+      }
+
+      // UPDATE_PANEL: panel 정보 업데이트 기록
+      case types.UPDATE_PANEL: {
+        if (action.payload) {
+          const { name: panelName, panelInfo = {} } = action.payload;
+
+          if (panelName) {
+            store.dispatch(enqueuePanelHistory(panelName, panelInfo, 'UPDATE'));
+          }
+        }
+        break;
+      }
+
+      // RESET_PANELS: 히스토리 초기화
+      case types.RESET_PANELS: {
+        store.dispatch(clearPanelHistory());
+        break;
+      }
+
+      default:
+        // Other actions are ignored
+        break;
+    }
+  } catch (error) {
+    console.error('[panelHistoryMiddleware] 오류:', error);
+    // Middleware 오류가 앱 전체에 영향 주지 않도록 처리
+  }
+
+  return result;
+};
+
+export default panelHistoryMiddleware;