feat(universal-form-modal): 범용 폼 모달 컴포넌트 신규 개발
- 섹션 기반 폼 레이아웃 지원 (접힘/펼침, 그리드 컬럼) - 반복 섹션 지원 (겸직 등 동일 필드 그룹 여러 개 추가) - 채번규칙 연동 (모달 열릴 때 또는 저장 시점 자동 생성) - 다중 행 저장 지원 (공통 필드 + 개별 필드 조합) - Select 옵션 동적 로드 (정적/테이블/공통코드) - 스크린 디자이너 설정 패널 구현
This commit is contained in:
SeongHyun Kim
parent
dfc83f6114
commit
6c751eb489
|
|
@ -74,6 +74,9 @@ import "./location-swap-selector/LocationSwapSelectorRenderer";
|
|||
// 🆕 화면 임베딩 및 분할 패널 컴포넌트
|
||||
import "./screen-split-panel/ScreenSplitPanelRenderer"; // 화면 분할 패널 (좌우 화면 임베딩 + 데이터 전달)
|
||||
|
||||
// 🆕 범용 폼 모달 컴포넌트
|
||||
import "./universal-form-modal/UniversalFormModalRenderer"; // 섹션 기반 폼, 채번규칙, 다중 행 저장 지원
|
||||
|
||||
/**
|
||||
* 컴포넌트 초기화 함수
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,951 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { ChevronDown, ChevronUp, Plus, Trash2, RefreshCw } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { generateNumberingCode } from "@/lib/api/numberingRule";
|
||||
|
||||
import {
|
||||
UniversalFormModalComponentProps,
|
||||
UniversalFormModalConfig,
|
||||
FormSectionConfig,
|
||||
FormFieldConfig,
|
||||
FormDataState,
|
||||
RepeatSectionItem,
|
||||
SelectOptionConfig,
|
||||
} from "./types";
|
||||
import { defaultConfig, generateUniqueId } from "./config";
|
||||
|
||||
/**
|
||||
* 범용 폼 모달 컴포넌트
|
||||
*
|
||||
* 섹션 기반 폼 레이아웃, 채번규칙, 다중 행 저장을 지원합니다.
|
||||
*/
|
||||
export function UniversalFormModalComponent({
|
||||
component,
|
||||
config: propConfig,
|
||||
isDesignMode = false,
|
||||
isSelected = false,
|
||||
className,
|
||||
style,
|
||||
initialData,
|
||||
onSave,
|
||||
onCancel,
|
||||
onChange,
|
||||
}: UniversalFormModalComponentProps) {
|
||||
// 설정 병합
|
||||
const config: UniversalFormModalConfig = useMemo(() => {
|
||||
const componentConfig = component?.config || {};
|
||||
return {
|
||||
...defaultConfig,
|
||||
...propConfig,
|
||||
...componentConfig,
|
||||
modal: {
|
||||
...defaultConfig.modal,
|
||||
...propConfig?.modal,
|
||||
...componentConfig.modal,
|
||||
},
|
||||
saveConfig: {
|
||||
...defaultConfig.saveConfig,
|
||||
...propConfig?.saveConfig,
|
||||
...componentConfig.saveConfig,
|
||||
multiRowSave: {
|
||||
...defaultConfig.saveConfig.multiRowSave,
|
||||
...propConfig?.saveConfig?.multiRowSave,
|
||||
...componentConfig.saveConfig?.multiRowSave,
|
||||
},
|
||||
afterSave: {
|
||||
...defaultConfig.saveConfig.afterSave,
|
||||
...propConfig?.saveConfig?.afterSave,
|
||||
...componentConfig.saveConfig?.afterSave,
|
||||
},
|
||||
},
|
||||
};
|
||||
}, [component?.config, propConfig]);
|
||||
|
||||
// 폼 데이터 상태
|
||||
const [formData, setFormData] = useState<FormDataState>({});
|
||||
const [, setOriginalData] = useState<Record<string, any>>({});
|
||||
|
||||
// 반복 섹션 데이터
|
||||
const [repeatSections, setRepeatSections] = useState<{
|
||||
[sectionId: string]: RepeatSectionItem[];
|
||||
}>({});
|
||||
|
||||
// 섹션 접힘 상태
|
||||
const [collapsedSections, setCollapsedSections] = useState<Set<string>>(new Set());
|
||||
|
||||
// Select 옵션 캐시
|
||||
const [selectOptionsCache, setSelectOptionsCache] = useState<{
|
||||
[key: string]: { value: string; label: string }[];
|
||||
}>({});
|
||||
|
||||
// 로딩 상태
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// 삭제 확인 다이얼로그
|
||||
const [deleteDialog, setDeleteDialog] = useState<{
|
||||
open: boolean;
|
||||
sectionId: string;
|
||||
itemId: string;
|
||||
}>({ open: false, sectionId: "", itemId: "" });
|
||||
|
||||
// 초기화
|
||||
useEffect(() => {
|
||||
initializeForm();
|
||||
}, [config, initialData]);
|
||||
|
||||
// 폼 초기화
|
||||
const initializeForm = useCallback(async () => {
|
||||
const newFormData: FormDataState = {};
|
||||
const newRepeatSections: { [sectionId: string]: RepeatSectionItem[] } = {};
|
||||
const newCollapsed = new Set<string>();
|
||||
|
||||
// 섹션별 초기화
|
||||
for (const section of config.sections) {
|
||||
// 접힘 상태 초기화
|
||||
if (section.defaultCollapsed) {
|
||||
newCollapsed.add(section.id);
|
||||
}
|
||||
|
||||
if (section.repeatable) {
|
||||
// 반복 섹션 초기화
|
||||
const minItems = section.repeatConfig?.minItems || 0;
|
||||
const items: RepeatSectionItem[] = [];
|
||||
for (let i = 0; i < minItems; i++) {
|
||||
items.push(createRepeatItem(section, i));
|
||||
}
|
||||
newRepeatSections[section.id] = items;
|
||||
} else {
|
||||
// 일반 섹션 필드 초기화
|
||||
for (const field of section.fields) {
|
||||
// 기본값 설정
|
||||
let value = field.defaultValue ?? "";
|
||||
|
||||
// 부모에서 전달받은 값 적용
|
||||
if (field.receiveFromParent && initialData) {
|
||||
const parentField = field.parentFieldName || field.columnName;
|
||||
if (initialData[parentField] !== undefined) {
|
||||
value = initialData[parentField];
|
||||
}
|
||||
}
|
||||
|
||||
newFormData[field.columnName] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setFormData(newFormData);
|
||||
setRepeatSections(newRepeatSections);
|
||||
setCollapsedSections(newCollapsed);
|
||||
setOriginalData(initialData || {});
|
||||
|
||||
// 채번규칙 자동 생성
|
||||
await generateNumberingValues(newFormData);
|
||||
}, [config, initialData]);
|
||||
|
||||
// 반복 섹션 아이템 생성
|
||||
const createRepeatItem = (section: FormSectionConfig, index: number): RepeatSectionItem => {
|
||||
const item: RepeatSectionItem = {
|
||||
_id: generateUniqueId("repeat"),
|
||||
_index: index,
|
||||
};
|
||||
|
||||
for (const field of section.fields) {
|
||||
item[field.columnName] = field.defaultValue ?? "";
|
||||
}
|
||||
|
||||
return item;
|
||||
};
|
||||
|
||||
// 채번규칙 자동 생성
|
||||
const generateNumberingValues = useCallback(
|
||||
async (currentFormData: FormDataState) => {
|
||||
const updatedData = { ...currentFormData };
|
||||
let hasChanges = false;
|
||||
|
||||
for (const section of config.sections) {
|
||||
if (section.repeatable) continue;
|
||||
|
||||
for (const field of section.fields) {
|
||||
if (
|
||||
field.numberingRule?.enabled &&
|
||||
field.numberingRule?.generateOnOpen &&
|
||||
field.numberingRule?.ruleId &&
|
||||
!updatedData[field.columnName]
|
||||
) {
|
||||
try {
|
||||
const response = await generateNumberingCode(field.numberingRule.ruleId);
|
||||
if (response.success && response.data?.generatedCode) {
|
||||
updatedData[field.columnName] = response.data.generatedCode;
|
||||
hasChanges = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`채번규칙 생성 실패 (${field.columnName}):`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (hasChanges) {
|
||||
setFormData(updatedData);
|
||||
}
|
||||
},
|
||||
[config],
|
||||
);
|
||||
|
||||
// 필드 값 변경 핸들러
|
||||
const handleFieldChange = useCallback(
|
||||
(columnName: string, value: any) => {
|
||||
setFormData((prev) => {
|
||||
const newData = { ...prev, [columnName]: value };
|
||||
onChange?.(newData);
|
||||
return newData;
|
||||
});
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
// 반복 섹션 필드 값 변경 핸들러
|
||||
const handleRepeatFieldChange = useCallback((sectionId: string, itemId: string, columnName: string, value: any) => {
|
||||
setRepeatSections((prev) => {
|
||||
const items = prev[sectionId] || [];
|
||||
const newItems = items.map((item) => (item._id === itemId ? { ...item, [columnName]: value } : item));
|
||||
return { ...prev, [sectionId]: newItems };
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 반복 섹션 아이템 추가
|
||||
const handleAddRepeatItem = useCallback(
|
||||
(sectionId: string) => {
|
||||
const section = config.sections.find((s) => s.id === sectionId);
|
||||
if (!section) return;
|
||||
|
||||
const maxItems = section.repeatConfig?.maxItems || 10;
|
||||
|
||||
setRepeatSections((prev) => {
|
||||
const items = prev[sectionId] || [];
|
||||
if (items.length >= maxItems) {
|
||||
toast.error(`최대 ${maxItems}개까지만 추가할 수 있습니다.`);
|
||||
return prev;
|
||||
}
|
||||
|
||||
const newItem = createRepeatItem(section, items.length);
|
||||
return { ...prev, [sectionId]: [...items, newItem] };
|
||||
});
|
||||
},
|
||||
[config],
|
||||
);
|
||||
|
||||
// 반복 섹션 아이템 삭제
|
||||
const handleRemoveRepeatItem = useCallback(
|
||||
(sectionId: string, itemId: string) => {
|
||||
const section = config.sections.find((s) => s.id === sectionId);
|
||||
if (!section) return;
|
||||
|
||||
const minItems = section.repeatConfig?.minItems || 0;
|
||||
|
||||
setRepeatSections((prev) => {
|
||||
const items = prev[sectionId] || [];
|
||||
if (items.length <= minItems) {
|
||||
toast.error(`최소 ${minItems}개는 유지해야 합니다.`);
|
||||
return prev;
|
||||
}
|
||||
|
||||
const newItems = items.filter((item) => item._id !== itemId).map((item, index) => ({ ...item, _index: index }));
|
||||
|
||||
return { ...prev, [sectionId]: newItems };
|
||||
});
|
||||
|
||||
setDeleteDialog({ open: false, sectionId: "", itemId: "" });
|
||||
},
|
||||
[config],
|
||||
);
|
||||
|
||||
// 섹션 접힘 토글
|
||||
const toggleSectionCollapse = useCallback((sectionId: string) => {
|
||||
setCollapsedSections((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(sectionId)) {
|
||||
newSet.delete(sectionId);
|
||||
} else {
|
||||
newSet.add(sectionId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Select 옵션 로드
|
||||
const loadSelectOptions = useCallback(
|
||||
async (fieldId: string, optionConfig: SelectOptionConfig): Promise<{ value: string; label: string }[]> => {
|
||||
// 캐시 확인
|
||||
if (selectOptionsCache[fieldId]) {
|
||||
return selectOptionsCache[fieldId];
|
||||
}
|
||||
|
||||
let options: { value: string; label: string }[] = [];
|
||||
|
||||
try {
|
||||
if (optionConfig.type === "static") {
|
||||
options = optionConfig.staticOptions || [];
|
||||
} else if (optionConfig.type === "table" && optionConfig.tableName) {
|
||||
const response = await apiClient.get(`/table-management/tables/${optionConfig.tableName}/data`, {
|
||||
params: { limit: 1000 },
|
||||
});
|
||||
if (response.data?.success && response.data?.data) {
|
||||
options = response.data.data.map((row: any) => ({
|
||||
value: String(row[optionConfig.valueColumn || "id"]),
|
||||
label: String(row[optionConfig.labelColumn || "name"]),
|
||||
}));
|
||||
}
|
||||
} else if (optionConfig.type === "code" && optionConfig.codeCategory) {
|
||||
const response = await apiClient.get(`/common-code/${optionConfig.codeCategory}`);
|
||||
if (response.data?.success && response.data?.data) {
|
||||
options = response.data.data.map((code: any) => ({
|
||||
value: code.code_value || code.codeValue,
|
||||
label: code.code_name || code.codeName,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// 캐시 저장
|
||||
setSelectOptionsCache((prev) => ({ ...prev, [fieldId]: options }));
|
||||
} catch (error) {
|
||||
console.error(`Select 옵션 로드 실패 (${fieldId}):`, error);
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
[selectOptionsCache],
|
||||
);
|
||||
|
||||
// 저장 처리
|
||||
const handleSave = useCallback(async () => {
|
||||
if (!config.saveConfig.tableName) {
|
||||
toast.error("저장할 테이블이 설정되지 않았습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
|
||||
try {
|
||||
const { multiRowSave } = config.saveConfig;
|
||||
|
||||
if (multiRowSave?.enabled) {
|
||||
// 다중 행 저장
|
||||
await saveMultipleRows();
|
||||
} else {
|
||||
// 단일 행 저장
|
||||
await saveSingleRow();
|
||||
}
|
||||
|
||||
// 저장 후 동작
|
||||
if (config.saveConfig.afterSave?.showToast) {
|
||||
toast.success("저장되었습니다.");
|
||||
}
|
||||
|
||||
if (config.saveConfig.afterSave?.refreshParent) {
|
||||
window.dispatchEvent(new CustomEvent("refreshParentData"));
|
||||
}
|
||||
|
||||
onSave?.(formData);
|
||||
} catch (error: any) {
|
||||
console.error("저장 실패:", error);
|
||||
toast.error(error.message || "저장에 실패했습니다.");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, [config, formData, repeatSections, onSave]);
|
||||
|
||||
// 단일 행 저장
|
||||
const saveSingleRow = async () => {
|
||||
const dataToSave = { ...formData };
|
||||
|
||||
// 메타데이터 필드 제거
|
||||
Object.keys(dataToSave).forEach((key) => {
|
||||
if (key.startsWith("_")) {
|
||||
delete dataToSave[key];
|
||||
}
|
||||
});
|
||||
|
||||
// 저장 시점 채번규칙 처리
|
||||
for (const section of config.sections) {
|
||||
for (const field of section.fields) {
|
||||
if (
|
||||
field.numberingRule?.enabled &&
|
||||
field.numberingRule?.generateOnSave &&
|
||||
field.numberingRule?.ruleId &&
|
||||
!dataToSave[field.columnName]
|
||||
) {
|
||||
const response = await generateNumberingCode(field.numberingRule.ruleId);
|
||||
if (response.success && response.data?.generatedCode) {
|
||||
dataToSave[field.columnName] = response.data.generatedCode;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const response = await apiClient.post(`/table-management/tables/${config.saveConfig.tableName}/add`, dataToSave);
|
||||
|
||||
if (!response.data?.success) {
|
||||
throw new Error(response.data?.message || "저장 실패");
|
||||
}
|
||||
};
|
||||
|
||||
// 다중 행 저장 (겸직 등)
|
||||
const saveMultipleRows = async () => {
|
||||
const { multiRowSave } = config.saveConfig;
|
||||
if (!multiRowSave) return;
|
||||
|
||||
const { commonFields = [], repeatSectionId = "", typeColumn, mainTypeValue, subTypeValue, mainSectionFields } =
|
||||
multiRowSave;
|
||||
|
||||
// 공통 필드 데이터 추출
|
||||
const commonData: Record<string, any> = {};
|
||||
for (const fieldName of commonFields) {
|
||||
if (formData[fieldName] !== undefined) {
|
||||
commonData[fieldName] = formData[fieldName];
|
||||
}
|
||||
}
|
||||
|
||||
// 메인 섹션 필드 데이터 추출
|
||||
const mainSectionData: Record<string, any> = {};
|
||||
if (mainSectionFields) {
|
||||
for (const fieldName of mainSectionFields) {
|
||||
if (formData[fieldName] !== undefined) {
|
||||
mainSectionData[fieldName] = formData[fieldName];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 저장할 행들 준비
|
||||
const rowsToSave: Record<string, any>[] = [];
|
||||
|
||||
// 1. 메인 행 생성
|
||||
const mainRow: Record<string, any> = {
|
||||
...commonData,
|
||||
...mainSectionData,
|
||||
};
|
||||
if (typeColumn) {
|
||||
mainRow[typeColumn] = mainTypeValue || "main";
|
||||
}
|
||||
rowsToSave.push(mainRow);
|
||||
|
||||
// 2. 반복 섹션 행들 생성 (겸직 등)
|
||||
const repeatItems = repeatSections[repeatSectionId] || [];
|
||||
for (const item of repeatItems) {
|
||||
const subRow: Record<string, any> = { ...commonData };
|
||||
|
||||
// 반복 섹션 필드 복사
|
||||
Object.keys(item).forEach((key) => {
|
||||
if (!key.startsWith("_")) {
|
||||
subRow[key] = item[key];
|
||||
}
|
||||
});
|
||||
|
||||
if (typeColumn) {
|
||||
subRow[typeColumn] = subTypeValue || "concurrent";
|
||||
}
|
||||
|
||||
rowsToSave.push(subRow);
|
||||
}
|
||||
|
||||
// 저장 시점 채번규칙 처리 (메인 행만)
|
||||
for (const section of config.sections) {
|
||||
if (section.repeatable) continue;
|
||||
|
||||
for (const field of section.fields) {
|
||||
if (field.numberingRule?.enabled && field.numberingRule?.generateOnSave && field.numberingRule?.ruleId) {
|
||||
const response = await generateNumberingCode(field.numberingRule.ruleId);
|
||||
if (response.success && response.data?.generatedCode) {
|
||||
// 모든 행에 동일한 채번 값 적용 (공통 필드인 경우)
|
||||
if (commonFields.includes(field.columnName)) {
|
||||
rowsToSave.forEach((row) => {
|
||||
row[field.columnName] = response.data?.generatedCode;
|
||||
});
|
||||
} else {
|
||||
rowsToSave[0][field.columnName] = response.data?.generatedCode;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 모든 행 저장
|
||||
for (const row of rowsToSave) {
|
||||
const response = await apiClient.post(`/table-management/tables/${config.saveConfig.tableName}/add`, row);
|
||||
|
||||
if (!response.data?.success) {
|
||||
throw new Error(response.data?.message || "저장 실패");
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`[UniversalFormModal] ${rowsToSave.length}개 행 저장 완료`);
|
||||
};
|
||||
|
||||
// 폼 초기화
|
||||
const handleReset = useCallback(() => {
|
||||
initializeForm();
|
||||
toast.info("폼이 초기화되었습니다.");
|
||||
}, [initializeForm]);
|
||||
|
||||
// 필드 렌더링
|
||||
const renderField = (field: FormFieldConfig, value: any, onChangeHandler: (value: any) => void, fieldKey: string) => {
|
||||
const isDisabled = field.disabled || (field.numberingRule?.enabled && !field.numberingRule?.editable);
|
||||
const isHidden = field.numberingRule?.hidden;
|
||||
|
||||
if (isHidden) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const fieldElement = (() => {
|
||||
switch (field.fieldType) {
|
||||
case "textarea":
|
||||
return (
|
||||
<Textarea
|
||||
id={fieldKey}
|
||||
value={value || ""}
|
||||
onChange={(e) => onChangeHandler(e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
disabled={isDisabled}
|
||||
readOnly={field.readOnly}
|
||||
className="min-h-[80px]"
|
||||
/>
|
||||
);
|
||||
|
||||
case "checkbox":
|
||||
return (
|
||||
<div className="flex items-center space-x-2 pt-2">
|
||||
<Checkbox
|
||||
id={fieldKey}
|
||||
checked={!!value}
|
||||
onCheckedChange={(checked) => onChangeHandler(checked)}
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
<Label htmlFor={fieldKey} className="text-sm font-normal">
|
||||
{field.placeholder || field.label}
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "select":
|
||||
return (
|
||||
<SelectField
|
||||
fieldId={fieldKey}
|
||||
value={value}
|
||||
onChange={onChangeHandler}
|
||||
optionConfig={field.selectOptions}
|
||||
placeholder={field.placeholder || "선택하세요"}
|
||||
disabled={isDisabled}
|
||||
loadOptions={loadSelectOptions}
|
||||
/>
|
||||
);
|
||||
|
||||
case "date":
|
||||
return (
|
||||
<Input
|
||||
id={fieldKey}
|
||||
type="date"
|
||||
value={value || ""}
|
||||
onChange={(e) => onChangeHandler(e.target.value)}
|
||||
disabled={isDisabled}
|
||||
readOnly={field.readOnly}
|
||||
/>
|
||||
);
|
||||
|
||||
case "datetime":
|
||||
return (
|
||||
<Input
|
||||
id={fieldKey}
|
||||
type="datetime-local"
|
||||
value={value || ""}
|
||||
onChange={(e) => onChangeHandler(e.target.value)}
|
||||
disabled={isDisabled}
|
||||
readOnly={field.readOnly}
|
||||
/>
|
||||
);
|
||||
|
||||
case "number":
|
||||
return (
|
||||
<Input
|
||||
id={fieldKey}
|
||||
type="number"
|
||||
value={value ?? ""}
|
||||
onChange={(e) => onChangeHandler(e.target.value ? Number(e.target.value) : "")}
|
||||
placeholder={field.placeholder}
|
||||
disabled={isDisabled}
|
||||
readOnly={field.readOnly}
|
||||
/>
|
||||
);
|
||||
|
||||
case "password":
|
||||
return (
|
||||
<Input
|
||||
id={fieldKey}
|
||||
type="password"
|
||||
value={value || ""}
|
||||
onChange={(e) => onChangeHandler(e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
disabled={isDisabled}
|
||||
readOnly={field.readOnly}
|
||||
/>
|
||||
);
|
||||
|
||||
case "email":
|
||||
return (
|
||||
<Input
|
||||
id={fieldKey}
|
||||
type="email"
|
||||
value={value || ""}
|
||||
onChange={(e) => onChangeHandler(e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
disabled={isDisabled}
|
||||
readOnly={field.readOnly}
|
||||
/>
|
||||
);
|
||||
|
||||
case "tel":
|
||||
return (
|
||||
<Input
|
||||
id={fieldKey}
|
||||
type="tel"
|
||||
value={value || ""}
|
||||
onChange={(e) => onChangeHandler(e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
disabled={isDisabled}
|
||||
readOnly={field.readOnly}
|
||||
/>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<Input
|
||||
id={fieldKey}
|
||||
type="text"
|
||||
value={value || ""}
|
||||
onChange={(e) => onChangeHandler(e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
disabled={isDisabled}
|
||||
readOnly={field.readOnly}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})();
|
||||
|
||||
// 체크박스는 라벨이 옆에 있으므로 별도 처리
|
||||
if (field.fieldType === "checkbox") {
|
||||
return (
|
||||
<div key={fieldKey} className="space-y-1" style={{ gridColumn: `span ${field.gridSpan || 6}` }}>
|
||||
{fieldElement}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={fieldKey} className="space-y-1" style={{ gridColumn: `span ${field.gridSpan || 6}` }}>
|
||||
<Label htmlFor={fieldKey} className="text-sm font-medium">
|
||||
{field.label}
|
||||
{field.required && <span className="text-destructive ml-1">*</span>}
|
||||
{field.numberingRule?.enabled && <span className="text-muted-foreground ml-1 text-xs">(자동생성)</span>}
|
||||
</Label>
|
||||
{fieldElement}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 섹션 렌더링
|
||||
const renderSection = (section: FormSectionConfig) => {
|
||||
const isCollapsed = collapsedSections.has(section.id);
|
||||
|
||||
if (section.repeatable) {
|
||||
return renderRepeatableSection(section, isCollapsed);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card key={section.id} className="mb-4">
|
||||
{section.collapsible ? (
|
||||
<Collapsible open={!isCollapsed} onOpenChange={() => toggleSectionCollapse(section.id)}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<CardHeader className="hover:bg-muted/50 cursor-pointer transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">{section.title}</CardTitle>
|
||||
{section.description && (
|
||||
<CardDescription className="mt-1 text-xs">{section.description}</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
{isCollapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
|
||||
</div>
|
||||
</CardHeader>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<div className="grid gap-4" style={{ gridTemplateColumns: `repeat(12, 1fr)` }}>
|
||||
{section.fields.map((field) =>
|
||||
renderField(
|
||||
field,
|
||||
formData[field.columnName],
|
||||
(value) => handleFieldChange(field.columnName, value),
|
||||
`${section.id}-${field.id}`,
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : (
|
||||
<>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">{section.title}</CardTitle>
|
||||
{section.description && <CardDescription className="text-xs">{section.description}</CardDescription>}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4" style={{ gridTemplateColumns: `repeat(12, 1fr)` }}>
|
||||
{section.fields.map((field) =>
|
||||
renderField(
|
||||
field,
|
||||
formData[field.columnName],
|
||||
(value) => handleFieldChange(field.columnName, value),
|
||||
`${section.id}-${field.id}`,
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
// 반복 섹션 렌더링
|
||||
const renderRepeatableSection = (section: FormSectionConfig, isCollapsed: boolean) => {
|
||||
const items = repeatSections[section.id] || [];
|
||||
const maxItems = section.repeatConfig?.maxItems || 10;
|
||||
const canAdd = items.length < maxItems;
|
||||
|
||||
const content = (
|
||||
<>
|
||||
{items.length === 0 ? (
|
||||
<div className="text-muted-foreground py-8 text-center">
|
||||
<p className="text-sm">등록된 항목이 없습니다.</p>
|
||||
<Button variant="outline" size="sm" className="mt-2" onClick={() => handleAddRepeatItem(section.id)}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
{section.repeatConfig?.addButtonText || "+ 추가"}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{items.map((item, index) => (
|
||||
<div key={item._id} className="bg-muted/30 relative rounded-lg border p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="text-muted-foreground text-sm font-medium">
|
||||
{(section.repeatConfig?.itemTitle || "항목 {index}").replace("{index}", String(index + 1))}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive h-8 w-8 p-0"
|
||||
onClick={() => {
|
||||
if (section.repeatConfig?.confirmRemove) {
|
||||
setDeleteDialog({ open: true, sectionId: section.id, itemId: item._id });
|
||||
} else {
|
||||
handleRemoveRepeatItem(section.id, item._id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid gap-4" style={{ gridTemplateColumns: `repeat(12, 1fr)` }}>
|
||||
{section.fields.map((field) =>
|
||||
renderField(
|
||||
field,
|
||||
item[field.columnName],
|
||||
(value) => handleRepeatFieldChange(section.id, item._id, field.columnName, value),
|
||||
`${section.id}-${item._id}-${field.id}`,
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{canAdd && (
|
||||
<Button variant="outline" size="sm" className="w-full" onClick={() => handleAddRepeatItem(section.id)}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
{section.repeatConfig?.addButtonText || "+ 추가"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card key={section.id} className="mb-4">
|
||||
{section.collapsible ? (
|
||||
<Collapsible open={!isCollapsed} onOpenChange={() => toggleSectionCollapse(section.id)}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<CardHeader className="hover:bg-muted/50 cursor-pointer transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">
|
||||
{section.title}
|
||||
<span className="text-muted-foreground ml-2 text-sm font-normal">({items.length}개)</span>
|
||||
</CardTitle>
|
||||
{section.description && (
|
||||
<CardDescription className="mt-1 text-xs">{section.description}</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
{isCollapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
|
||||
</div>
|
||||
</CardHeader>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CardContent>{content}</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : (
|
||||
<>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">
|
||||
{section.title}
|
||||
<span className="text-muted-foreground ml-2 text-sm font-normal">({items.length}개)</span>
|
||||
</CardTitle>
|
||||
{section.description && <CardDescription className="text-xs">{section.description}</CardDescription>}
|
||||
</CardHeader>
|
||||
<CardContent>{content}</CardContent>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
// 디자인 모드 렌더링
|
||||
if (isDesignMode) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"min-h-[200px] rounded-lg border-2 border-dashed p-4",
|
||||
isSelected ? "border-primary bg-primary/5" : "border-muted",
|
||||
className,
|
||||
)}
|
||||
style={style}
|
||||
>
|
||||
<div className="text-muted-foreground text-center">
|
||||
<p className="font-medium">{config.modal.title || "범용 폼 모달"}</p>
|
||||
<p className="mt-1 text-xs">
|
||||
{config.sections.length}개 섹션 |{config.sections.reduce((acc, s) => acc + s.fields.length, 0)}개 필드
|
||||
</p>
|
||||
<p className="mt-1 text-xs">저장 테이블: {config.saveConfig.tableName || "(미설정)"}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("w-full", className)} style={style}>
|
||||
{/* 섹션들 */}
|
||||
<div className="space-y-4">{config.sections.map((section) => renderSection(section))}</div>
|
||||
|
||||
{/* 버튼 영역 */}
|
||||
<div className="mt-6 flex justify-end gap-2 border-t pt-4">
|
||||
{config.modal.showResetButton && (
|
||||
<Button variant="outline" onClick={handleReset} disabled={saving}>
|
||||
<RefreshCw className="mr-1 h-4 w-4" />
|
||||
{config.modal.resetButtonText || "초기화"}
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outline" onClick={onCancel} disabled={saving}>
|
||||
{config.modal.cancelButtonText || "취소"}
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={saving || !config.saveConfig.tableName}>
|
||||
{saving ? "저장 중..." : config.modal.saveButtonText || "저장"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AlertDialog
|
||||
open={deleteDialog.open}
|
||||
onOpenChange={(open) => !open && setDeleteDialog({ open: false, sectionId: "", itemId: "" })}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>항목 삭제</AlertDialogTitle>
|
||||
<AlertDialogDescription>이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>취소</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleRemoveRepeatItem(deleteDialog.sectionId, deleteDialog.itemId)}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Select 필드 컴포넌트 (옵션 로딩 포함)
|
||||
interface SelectFieldProps {
|
||||
fieldId: string;
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
optionConfig?: SelectOptionConfig;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
loadOptions: (fieldId: string, config: SelectOptionConfig) => Promise<{ value: string; label: string }[]>;
|
||||
}
|
||||
|
||||
function SelectField({ fieldId, value, onChange, optionConfig, placeholder, disabled, loadOptions }: SelectFieldProps) {
|
||||
const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (optionConfig) {
|
||||
setLoading(true);
|
||||
loadOptions(fieldId, optionConfig)
|
||||
.then(setOptions)
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
}, [fieldId, optionConfig, loadOptions]);
|
||||
|
||||
return (
|
||||
<Select value={value || ""} onValueChange={onChange} disabled={disabled || loading}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={loading ? "로딩 중..." : placeholder} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
export default UniversalFormModalComponent;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,35 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
|
||||
import { UniversalFormModalDefinition } from "./index";
|
||||
import { UniversalFormModalComponent } from "./UniversalFormModalComponent";
|
||||
|
||||
/**
|
||||
* 범용 폼 모달 렌더러
|
||||
* 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
|
||||
*/
|
||||
export class UniversalFormModalRenderer extends AutoRegisteringComponentRenderer {
|
||||
static componentDefinition = UniversalFormModalDefinition;
|
||||
|
||||
render(): React.ReactElement {
|
||||
return <UniversalFormModalComponent {...this.props} />;
|
||||
}
|
||||
|
||||
/**
|
||||
* 폼 데이터 변경 핸들러
|
||||
*/
|
||||
protected handleFormDataChange = (data: any) => {
|
||||
this.updateComponent({ formData: data });
|
||||
};
|
||||
|
||||
/**
|
||||
* 저장 완료 핸들러
|
||||
*/
|
||||
protected handleSave = (data: any) => {
|
||||
console.log("[UniversalFormModalRenderer] 저장 완료:", data);
|
||||
};
|
||||
}
|
||||
|
||||
// 자동 등록 실행
|
||||
UniversalFormModalRenderer.registerSelf();
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
/**
|
||||
* 범용 폼 모달 컴포넌트 기본 설정
|
||||
*/
|
||||
|
||||
import { UniversalFormModalConfig } from "./types";
|
||||
|
||||
// 기본 설정값
|
||||
export const defaultConfig: UniversalFormModalConfig = {
|
||||
modal: {
|
||||
title: "데이터 입력",
|
||||
description: "",
|
||||
size: "lg",
|
||||
closeOnOutsideClick: false,
|
||||
showCloseButton: true,
|
||||
saveButtonText: "저장",
|
||||
cancelButtonText: "취소",
|
||||
showResetButton: false,
|
||||
resetButtonText: "초기화",
|
||||
},
|
||||
sections: [
|
||||
{
|
||||
id: "default",
|
||||
title: "기본 정보",
|
||||
description: "",
|
||||
collapsible: false,
|
||||
defaultCollapsed: false,
|
||||
columns: 2,
|
||||
gap: "16px",
|
||||
fields: [],
|
||||
repeatable: false,
|
||||
},
|
||||
],
|
||||
saveConfig: {
|
||||
tableName: "",
|
||||
primaryKeyColumn: "id",
|
||||
multiRowSave: {
|
||||
enabled: false,
|
||||
commonFields: [],
|
||||
repeatSectionId: "",
|
||||
typeColumn: "",
|
||||
mainTypeValue: "main",
|
||||
subTypeValue: "concurrent",
|
||||
mainSectionFields: [],
|
||||
},
|
||||
afterSave: {
|
||||
closeModal: true,
|
||||
refreshParent: true,
|
||||
showToast: true,
|
||||
},
|
||||
},
|
||||
editMode: {
|
||||
enabled: false,
|
||||
loadDataOnOpen: true,
|
||||
identifierField: "id",
|
||||
},
|
||||
};
|
||||
|
||||
// 기본 필드 설정
|
||||
export const defaultFieldConfig = {
|
||||
id: "",
|
||||
columnName: "",
|
||||
label: "",
|
||||
fieldType: "text" as const,
|
||||
required: false,
|
||||
defaultValue: "",
|
||||
placeholder: "",
|
||||
disabled: false,
|
||||
readOnly: false,
|
||||
width: "100%",
|
||||
gridSpan: 6,
|
||||
receiveFromParent: false,
|
||||
};
|
||||
|
||||
// 기본 섹션 설정
|
||||
export const defaultSectionConfig = {
|
||||
id: "",
|
||||
title: "새 섹션",
|
||||
description: "",
|
||||
collapsible: false,
|
||||
defaultCollapsed: false,
|
||||
columns: 2,
|
||||
gap: "16px",
|
||||
fields: [],
|
||||
repeatable: false,
|
||||
repeatConfig: {
|
||||
minItems: 0,
|
||||
maxItems: 10,
|
||||
addButtonText: "+ 추가",
|
||||
removeButtonText: "삭제",
|
||||
itemTitle: "항목 {index}",
|
||||
confirmRemove: false,
|
||||
},
|
||||
};
|
||||
|
||||
// 기본 채번규칙 설정
|
||||
export const defaultNumberingRuleConfig = {
|
||||
enabled: false,
|
||||
ruleId: "",
|
||||
editable: false,
|
||||
hidden: false,
|
||||
generateOnOpen: true,
|
||||
generateOnSave: false,
|
||||
};
|
||||
|
||||
// 기본 Select 옵션 설정
|
||||
export const defaultSelectOptionsConfig = {
|
||||
type: "static" as const,
|
||||
staticOptions: [],
|
||||
tableName: "",
|
||||
valueColumn: "",
|
||||
labelColumn: "",
|
||||
filterCondition: "",
|
||||
codeCategory: "",
|
||||
};
|
||||
|
||||
// 모달 크기별 너비
|
||||
export const MODAL_SIZE_MAP = {
|
||||
sm: 400,
|
||||
md: 600,
|
||||
lg: 800,
|
||||
xl: 1000,
|
||||
full: "100%",
|
||||
} as const;
|
||||
|
||||
// 유틸리티: 고유 ID 생성
|
||||
export const generateUniqueId = (prefix: string = "item"): string => {
|
||||
return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||
};
|
||||
|
||||
// 유틸리티: 섹션 ID 생성
|
||||
export const generateSectionId = (): string => {
|
||||
return generateUniqueId("section");
|
||||
};
|
||||
|
||||
// 유틸리티: 필드 ID 생성
|
||||
export const generateFieldId = (): string => {
|
||||
return generateUniqueId("field");
|
||||
};
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
"use client";
|
||||
|
||||
import { createComponentDefinition } from "../../utils/createComponentDefinition";
|
||||
import { ComponentCategory } from "@/types/component";
|
||||
import { UniversalFormModalComponent } from "./UniversalFormModalComponent";
|
||||
import { UniversalFormModalConfigPanel } from "./UniversalFormModalConfigPanel";
|
||||
import { defaultConfig } from "./config";
|
||||
|
||||
/**
|
||||
* 범용 폼 모달 컴포넌트 정의
|
||||
*
|
||||
* 섹션 기반 폼 레이아웃, 채번규칙, 다중 행 저장을 지원하는
|
||||
* 범용 모달 컴포넌트입니다.
|
||||
*/
|
||||
export const UniversalFormModalDefinition = createComponentDefinition({
|
||||
id: "universal-form-modal",
|
||||
name: "범용 폼 모달",
|
||||
nameEng: "Universal Form Modal",
|
||||
description: "섹션 기반 폼 레이아웃, 채번규칙, 다중 행 저장을 지원하는 범용 모달 컴포넌트",
|
||||
category: ComponentCategory.INPUT,
|
||||
webType: "form",
|
||||
component: UniversalFormModalComponent,
|
||||
defaultConfig: defaultConfig,
|
||||
defaultSize: {
|
||||
width: 800,
|
||||
height: 600,
|
||||
gridColumnSpan: "12",
|
||||
},
|
||||
configPanel: UniversalFormModalConfigPanel,
|
||||
icon: "FormInput",
|
||||
tags: ["폼", "모달", "입력", "저장", "채번", "겸직", "다중행"],
|
||||
version: "1.0.0",
|
||||
author: "개발팀",
|
||||
documentation: `
|
||||
## 범용 폼 모달 컴포넌트
|
||||
|
||||
### 주요 기능
|
||||
- **섹션 기반 레이아웃**: 기본 정보, 추가 정보 등 섹션별로 폼 구성
|
||||
- **반복 섹션**: 겸직처럼 동일한 필드 그룹을 여러 개 추가 가능
|
||||
- **채번규칙 연동**: 자동 코드 생성 (모달 열릴 때 또는 저장 시점)
|
||||
- **다중 행 저장**: 공통 필드 + 개별 필드 조합으로 여러 행 동시 저장
|
||||
- **외부 데이터 수신**: 부모 화면에서 전달받은 값 자동 채움
|
||||
|
||||
### 사용 예시
|
||||
1. 부서관리 사원 추가 + 겸직 등록
|
||||
2. 품목 등록 + 규격 옵션 추가
|
||||
3. 거래처 등록 + 담당자 정보 추가
|
||||
|
||||
### 설정 방법
|
||||
1. 저장 테이블 선택
|
||||
2. 섹션 추가 (기본 정보, 겸직 정보 등)
|
||||
3. 각 섹션에 필드 추가
|
||||
4. 반복 섹션 설정 (필요 시)
|
||||
5. 다중 행 저장 설정 (필요 시)
|
||||
6. 채번규칙 연동 (필요 시)
|
||||
`,
|
||||
});
|
||||
|
||||
// 컴포넌트 내보내기
|
||||
export { UniversalFormModalComponent } from "./UniversalFormModalComponent";
|
||||
export { UniversalFormModalConfigPanel } from "./UniversalFormModalConfigPanel";
|
||||
export { defaultConfig } from "./config";
|
||||
|
||||
// 타입 내보내기
|
||||
export type {
|
||||
UniversalFormModalConfig,
|
||||
UniversalFormModalComponentProps,
|
||||
UniversalFormModalConfigPanelProps,
|
||||
FormSectionConfig,
|
||||
FormFieldConfig,
|
||||
SaveConfig,
|
||||
MultiRowSaveConfig,
|
||||
NumberingRuleConfig,
|
||||
SelectOptionConfig,
|
||||
FormDataState,
|
||||
RepeatSectionItem,
|
||||
} from "./types";
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
/**
|
||||
* 범용 폼 모달 컴포넌트 타입 정의
|
||||
*
|
||||
* 섹션 기반 폼 레이아웃, 채번규칙, 다중 행 저장을 지원하는
|
||||
* 범용 모달 컴포넌트의 설정 타입입니다.
|
||||
*/
|
||||
|
||||
// Select 옵션 설정
|
||||
export interface SelectOptionConfig {
|
||||
type?: "static" | "table" | "code"; // 옵션 타입 (기본: static)
|
||||
// 정적 옵션
|
||||
staticOptions?: { value: string; label: string }[];
|
||||
// 테이블 기반 옵션
|
||||
tableName?: string;
|
||||
valueColumn?: string;
|
||||
labelColumn?: string;
|
||||
filterCondition?: string;
|
||||
// 공통코드 기반 옵션
|
||||
codeCategory?: string;
|
||||
}
|
||||
|
||||
// 채번규칙 설정
|
||||
export interface NumberingRuleConfig {
|
||||
enabled?: boolean; // 사용 여부 (기본: false)
|
||||
ruleId?: string; // 채번규칙 ID
|
||||
editable?: boolean; // 사용자 수정 가능 여부 (기본: false)
|
||||
hidden?: boolean; // 숨김 여부 - 자동 저장만 (기본: false)
|
||||
generateOnOpen?: boolean; // 모달 열릴 때 생성 (기본: true)
|
||||
generateOnSave?: boolean; // 저장 시점에 생성 (기본: false)
|
||||
}
|
||||
|
||||
// 필드 유효성 검사 설정
|
||||
export interface FieldValidationConfig {
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
pattern?: string;
|
||||
patternMessage?: string;
|
||||
customValidator?: string; // 커스텀 검증 함수명
|
||||
}
|
||||
|
||||
// 필드 설정
|
||||
export interface FormFieldConfig {
|
||||
id: string;
|
||||
columnName: string; // DB 컬럼명
|
||||
label: string; // 표시 라벨
|
||||
fieldType:
|
||||
| "text"
|
||||
| "number"
|
||||
| "date"
|
||||
| "datetime"
|
||||
| "select"
|
||||
| "checkbox"
|
||||
| "textarea"
|
||||
| "password"
|
||||
| "email"
|
||||
| "tel";
|
||||
required?: boolean;
|
||||
defaultValue?: any;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
readOnly?: boolean;
|
||||
hidden?: boolean; // 화면에 표시하지 않고 자동 저장만
|
||||
|
||||
// 레이아웃
|
||||
width?: string; // 필드 너비 (예: "50%", "100%")
|
||||
gridColumn?: number; // 그리드 컬럼 위치 (1-12)
|
||||
gridSpan?: number; // 그리드 컬럼 스팬 (1-12)
|
||||
|
||||
// 채번규칙 설정
|
||||
numberingRule?: NumberingRuleConfig;
|
||||
|
||||
// Select 옵션
|
||||
selectOptions?: SelectOptionConfig;
|
||||
|
||||
// 유효성 검사
|
||||
validation?: FieldValidationConfig;
|
||||
|
||||
// 외부 데이터 수신
|
||||
receiveFromParent?: boolean; // 부모에서 값 받기
|
||||
parentFieldName?: string; // 부모 필드명 (다르면 지정)
|
||||
|
||||
// 조건부 표시
|
||||
visibleCondition?: {
|
||||
field: string; // 참조할 필드
|
||||
operator: "eq" | "ne" | "gt" | "lt" | "in" | "notIn";
|
||||
value: any;
|
||||
};
|
||||
|
||||
// 필드 간 연동
|
||||
dependsOn?: {
|
||||
field: string; // 의존하는 필드
|
||||
action: "filter" | "setValue" | "clear";
|
||||
config?: any;
|
||||
};
|
||||
}
|
||||
|
||||
// 반복 섹션 설정
|
||||
export interface RepeatSectionConfig {
|
||||
minItems?: number; // 최소 항목 수 (기본: 0)
|
||||
maxItems?: number; // 최대 항목 수 (기본: 10)
|
||||
addButtonText?: string; // 추가 버튼 텍스트 (기본: "+ 추가")
|
||||
removeButtonText?: string; // 삭제 버튼 텍스트 (기본: "삭제")
|
||||
itemTitle?: string; // 항목 제목 템플릿 (예: "겸직 {index}")
|
||||
confirmRemove?: boolean; // 삭제 시 확인 (기본: false)
|
||||
}
|
||||
|
||||
// 섹션 설정
|
||||
export interface FormSectionConfig {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
collapsible?: boolean; // 접을 수 있는지 (기본: false)
|
||||
defaultCollapsed?: boolean; // 기본 접힘 상태 (기본: false)
|
||||
fields: FormFieldConfig[];
|
||||
|
||||
// 반복 섹션 (겸직 등)
|
||||
repeatable?: boolean;
|
||||
repeatConfig?: RepeatSectionConfig;
|
||||
|
||||
// 섹션 레이아웃
|
||||
columns?: number; // 필드 배치 컬럼 수 (기본: 2)
|
||||
gap?: string; // 필드 간 간격
|
||||
}
|
||||
|
||||
// 다중 행 저장 설정
|
||||
export interface MultiRowSaveConfig {
|
||||
enabled?: boolean; // 사용 여부 (기본: false)
|
||||
commonFields?: string[]; // 모든 행에 공통 저장할 필드 (columnName 기준)
|
||||
repeatSectionId?: string; // 반복 섹션 ID
|
||||
typeColumn?: string; // 구분 컬럼명 (예: "employment_type")
|
||||
mainTypeValue?: string; // 메인 행 값 (예: "main")
|
||||
subTypeValue?: string; // 서브 행 값 (예: "concurrent")
|
||||
|
||||
// 메인 섹션 필드 (반복 섹션이 아닌 곳의 부서/직급 등)
|
||||
mainSectionFields?: string[]; // 메인 행에만 저장할 필드
|
||||
}
|
||||
|
||||
// 저장 설정
|
||||
export interface SaveConfig {
|
||||
tableName: string;
|
||||
primaryKeyColumn?: string; // PK 컬럼 (수정 시 사용)
|
||||
|
||||
// 다중 행 저장 설정
|
||||
multiRowSave?: MultiRowSaveConfig;
|
||||
|
||||
// 저장 후 동작 (간편 설정)
|
||||
showToast?: boolean; // 토스트 메시지 (기본: true)
|
||||
refreshParent?: boolean; // 부모 새로고침 (기본: true)
|
||||
|
||||
// 저장 후 동작 (상세 설정)
|
||||
afterSave?: {
|
||||
closeModal?: boolean; // 모달 닫기 (기본: true)
|
||||
refreshParent?: boolean; // 부모 새로고침 (기본: true)
|
||||
showToast?: boolean; // 토스트 메시지 (기본: true)
|
||||
customAction?: string; // 커스텀 액션 이벤트명
|
||||
};
|
||||
}
|
||||
|
||||
// 모달 설정
|
||||
export interface ModalConfig {
|
||||
title: string;
|
||||
description?: string;
|
||||
size: "sm" | "md" | "lg" | "xl" | "full";
|
||||
closeOnOutsideClick?: boolean;
|
||||
showCloseButton?: boolean;
|
||||
|
||||
// 버튼 설정
|
||||
saveButtonText?: string; // 저장 버튼 텍스트 (기본: "저장")
|
||||
cancelButtonText?: string; // 취소 버튼 텍스트 (기본: "취소")
|
||||
showResetButton?: boolean; // 초기화 버튼 표시
|
||||
resetButtonText?: string; // 초기화 버튼 텍스트
|
||||
}
|
||||
|
||||
// 전체 설정
|
||||
export interface UniversalFormModalConfig {
|
||||
modal: ModalConfig;
|
||||
sections: FormSectionConfig[];
|
||||
saveConfig: SaveConfig;
|
||||
|
||||
// 수정 모드 설정
|
||||
editMode?: {
|
||||
enabled: boolean;
|
||||
loadDataOnOpen?: boolean; // 모달 열릴 때 데이터 로드
|
||||
identifierField?: string; // 식별자 필드 (user_id 등)
|
||||
};
|
||||
}
|
||||
|
||||
// 반복 섹션 데이터 아이템
|
||||
export interface RepeatSectionItem {
|
||||
_id: string; // 내부 고유 ID
|
||||
_index: number; // 인덱스
|
||||
[key: string]: any; // 필드 데이터
|
||||
}
|
||||
|
||||
// 폼 데이터 상태
|
||||
export interface FormDataState {
|
||||
// 일반 필드 데이터
|
||||
[key: string]: any;
|
||||
// 반복 섹션 데이터
|
||||
_repeatSections?: {
|
||||
[sectionId: string]: RepeatSectionItem[];
|
||||
};
|
||||
}
|
||||
|
||||
// 컴포넌트 Props
|
||||
export interface UniversalFormModalComponentProps {
|
||||
component?: any;
|
||||
config?: UniversalFormModalConfig;
|
||||
isDesignMode?: boolean;
|
||||
isSelected?: boolean;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
|
||||
// 외부에서 전달받는 초기 데이터
|
||||
initialData?: Record<string, any>;
|
||||
|
||||
// 이벤트 핸들러
|
||||
onSave?: (data: any) => void;
|
||||
onCancel?: () => void;
|
||||
onChange?: (data: FormDataState) => void;
|
||||
}
|
||||
|
||||
// ConfigPanel Props
|
||||
export interface UniversalFormModalConfigPanelProps {
|
||||
config: UniversalFormModalConfig;
|
||||
onChange: (config: UniversalFormModalConfig) => void;
|
||||
}
|
||||
|
||||
// 필드 타입 옵션
|
||||
export const FIELD_TYPE_OPTIONS = [
|
||||
{ value: "text", label: "텍스트" },
|
||||
{ value: "number", label: "숫자" },
|
||||
{ value: "date", label: "날짜" },
|
||||
{ value: "datetime", label: "날짜시간" },
|
||||
{ value: "select", label: "선택(드롭다운)" },
|
||||
{ value: "checkbox", label: "체크박스" },
|
||||
{ value: "textarea", label: "여러 줄 텍스트" },
|
||||
{ value: "password", label: "비밀번호" },
|
||||
{ value: "email", label: "이메일" },
|
||||
{ value: "tel", label: "전화번호" },
|
||||
] as const;
|
||||
|
||||
// 모달 크기 옵션
|
||||
export const MODAL_SIZE_OPTIONS = [
|
||||
{ value: "sm", label: "작게 (400px)" },
|
||||
{ value: "md", label: "보통 (600px)" },
|
||||
{ value: "lg", label: "크게 (800px)" },
|
||||
{ value: "xl", label: "매우 크게 (1000px)" },
|
||||
{ value: "full", label: "전체 화면" },
|
||||
] as const;
|
||||
|
||||
// Select 옵션 타입
|
||||
export const SELECT_OPTION_TYPE_OPTIONS = [
|
||||
{ value: "static", label: "직접 입력" },
|
||||
{ value: "table", label: "테이블 참조" },
|
||||
{ value: "code", label: "공통코드" },
|
||||
] as const;
|
||||
Loading…
Reference in New Issue