164 lines
4.3 KiB
TypeScript
164 lines
4.3 KiB
TypeScript
"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);
|
|
};
|
|
|