선택항목 상게입력 컴포넌트 구현

frontend/stores/modalDataStore.ts

@@ -0,0 +1,163 @@
+"use client";
+
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+
+/**
+ * 모달 간 데이터 전달을 위한 전역 상태 관리
+ * 
+ * 용도:
+ * 1. 첫 번째 모달에서 선택된 데이터를 저장
+ * 2. 두 번째 모달에서 데이터를 읽어와서 사용
+ * 3. 데이터 전달 완료 후 자동 정리
+ */
+
+export interface ModalDataItem {
+  /**
+   * 항목 고유 ID (선택된 행의 ID나 키)
+   */
+  id: string | number;
+  
+  /**
+   * 원본 데이터 (테이블 행 데이터 전체)
+   */
+  originalData: Record<string, any>;
+  
+  /**
+   * 추가 입력 데이터 (사용자가 입력한 추가 정보)
+   */
+  additionalData?: Record<string, any>;
+}
+
+interface ModalDataState {
+  /**
+   * 현재 전달할 데이터
+   * key: 소스 컴포넌트 ID (예: "table-list-123")
+   * value: 선택된 항목들의 배열
+   */
+  dataRegistry: Record<string, ModalDataItem[]>;
+  
+  /**
+   * 데이터 설정 (첫 번째 모달에서 호출)
+   * @param sourceId 데이터를 전달하는 컴포넌트 ID
+   * @param items 전달할 항목들
+   */
+  setData: (sourceId: string, items: ModalDataItem[]) => void;
+  
+  /**
+   * 데이터 조회 (두 번째 모달에서 호출)
+   * @param sourceId 데이터를 전달한 컴포넌트 ID
+   * @returns 전달된 항목들 (없으면 빈 배열)
+   */
+  getData: (sourceId: string) => ModalDataItem[];
+  
+  /**
+   * 데이터 정리 (모달 닫힐 때 호출)
+   * @param sourceId 정리할 데이터의 소스 ID
+   */
+  clearData: (sourceId: string) => void;
+  
+  /**
+   * 모든 데이터 정리
+   */
+  clearAll: () => void;
+  
+  /**
+   * 특정 항목의 추가 데이터 업데이트
+   * @param sourceId 소스 컴포넌트 ID
+   * @param itemId 항목 ID
+   * @param additionalData 추가 입력 데이터
+   */
+  updateItemData: (sourceId: string, itemId: string | number, additionalData: Record<string, any>) => void;
+}
+
+export const useModalDataStore = create<ModalDataState>()(
+  devtools(
+    (set, get) => ({
+      dataRegistry: {},
+      
+      setData: (sourceId, items) => {
+        console.log("📦 [ModalDataStore] 데이터 저장:", { sourceId, itemCount: items.length, items });
+        set((state) => ({
+          dataRegistry: {
+            ...state.dataRegistry,
+            [sourceId]: items,
+          },
+        }));
+      },
+      
+      getData: (sourceId) => {
+        const items = get().dataRegistry[sourceId] || [];
+        console.log("📭 [ModalDataStore] 데이터 조회:", { sourceId, itemCount: items.length });
+        return items;
+      },
+      
+      clearData: (sourceId) => {
+        console.log("🗑️ [ModalDataStore] 데이터 정리:", { sourceId });
+        set((state) => {
+          const { [sourceId]: _, ...rest } = state.dataRegistry;
+          return { dataRegistry: rest };
+        });
+      },
+      
+      clearAll: () => {
+        console.log("🗑️ [ModalDataStore] 모든 데이터 정리");
+        set({ dataRegistry: {} });
+      },
+      
+      updateItemData: (sourceId, itemId, additionalData) => {
+        set((state) => {
+          const items = state.dataRegistry[sourceId] || [];
+          const updatedItems = items.map((item) =>
+            item.id === itemId
+              ? { ...item, additionalData: { ...item.additionalData, ...additionalData } }
+              : item
+          );
+          
+          console.log("✏️ [ModalDataStore] 항목 데이터 업데이트:", { sourceId, itemId, additionalData });
+          
+          return {
+            dataRegistry: {
+              ...state.dataRegistry,
+              [sourceId]: updatedItems,
+            },
+          };
+        });
+      },
+    }),
+    { name: "ModalDataStore" }
+  )
+);
+
+/**
+ * 모달 데이터 조회 Hook
+ * 
+ * @example
+ * const items = useModalData("table-list-123");
+ */
+export const useModalData = (sourceId: string) => {
+  return useModalDataStore((state) => state.getData(sourceId));
+};
+
+/**
+ * 모달 데이터 설정 Hook
+ * 
+ * @example
+ * const setModalData = useSetModalData();
+ * setModalData("table-list-123", selectedItems);
+ */
+export const useSetModalData = () => {
+  return useModalDataStore((state) => state.setData);
+};
+
+/**
+ * 모달 데이터 정리 Hook
+ * 
+ * @example
+ * const clearModalData = useClearModalData();
+ * clearModalData("table-list-123");
+ */
+export const useClearModalData = () => {
+  return useModalDataStore((state) => state.clearData);
+};
+