), }, { id: "form", label: "폼형", description: "입력 필드 + 저장 버튼", icon: (

), }, { id: "master-detail", label: "마스터-디테일", description: "좌측 목록 + 우측 상세", icon: (

), }, { id: "card", label: "카드형", description: "카드 그리드 뷰", icon: (

), }, ]; export function AutoGenerateModal({ isOpen, onClose, tableName, tableLabel, columns, onGenerate, }: AutoGenerateModalProps) { // 템플릿 타입 선택 const [templateType, setTemplateType] = useState("list"); // 컬럼 선택 (기본: 시스템 컬럼 제외한 모든 컬럼 선택) const [selectedColumns, setSelectedColumns] = useState>(() => { const initial = new Set(); columns.forEach((col) => { if (!isSystemColumn(col.columnName)) { initial.add(col.columnName); } }); return initial; }); // 모달이 열릴 때마다 선택 상태 리셋 (columns가 변경되면) useEffect(() => { if (isOpen) { const initial = new Set(); columns.forEach((col) => { if (!isSystemColumn(col.columnName)) { initial.add(col.columnName); } }); setSelectedColumns(initial); setTemplateType("list"); } }, [isOpen, columns]); // 옵션 const [includeSearch, setIncludeSearch] = useState(true); const [includeCrud, setIncludeCrud] = useState(true); const [includeModal, setIncludeModal] = useState(true); // 컬럼 체크박스 토글 const toggleColumn = (columnName: string) => { setSelectedColumns((prev) => { const next = new Set(prev); if (next.has(columnName)) { next.delete(columnName); } else { next.add(columnName); } return next; }); }; // 전체 선택/해제 const toggleAll = () => { if (selectedColumns.size === columns.length) { setSelectedColumns(new Set()); } else { setSelectedColumns(new Set(columns.map((c) => c.columnName))); } }; // 생성 핸들러 const handleGenerate = () => { const config: AutoGenerateConfig = { templateType, selectedColumns: Array.from(selectedColumns), includeSearch, includeCrud, includeModal, }; onGenerate(config); }; // 선택된 컬럼 개수 const selectedCount = selectedColumns.size; return ( ); }