+ {/* 날짜 형식 */}
+
+
+ 날짜 형식
+
+ {
+ console.log("📅 날짜 형식 변경:", {
+ oldFormat: localValues.format,
+ newFormat: value,
+ oldShowTime: localValues.showTime,
+ });
+
+ // format 변경 시 showTime도 자동 동기화
+ const hasTime = value.includes("HH:mm");
+
+ // 한 번에 두 값을 모두 업데이트 - 현재 로컬 상태 기반으로 생성
+ const newConfig = JSON.parse(
+ JSON.stringify({
+ ...localValues,
+ format: value,
+ showTime: hasTime,
+ }),
+ );
+
+ console.log("🔄 format+showTime 동시 업데이트:", {
+ newFormat: value,
+ newShowTime: hasTime,
+ newConfig,
+ });
+
+ // 로컬 상태도 동시 업데이트
+ setLocalValues((prev) => ({
+ ...prev,
+ format: value,
+ showTime: hasTime,
+ }));
+
+ // 한 번에 업데이트
+ setTimeout(() => {
+ onConfigChange(newConfig);
+ }, 0);
+ }}
+ >
+
+
+
+ YYYY-MM-DD
+ YYYY-MM-DD HH:mm
+ YYYY-MM-DD HH:mm:ss
+
+
+
+
+ {/* 시간 표시 여부 */}
+
+
+ 시간 표시
+
+ {
+ const newShowTime = !!checked;
+ console.log("⏰ 시간 표시 체크박스 변경:", {
+ oldShowTime: localValues.showTime,
+ newShowTime,
+ currentFormat: localValues.format,
+ });
+
+ // showTime 변경 시 format도 적절히 조정
+ let newFormat = localValues.format;
+ if (newShowTime && !localValues.format.includes("HH:mm")) {
+ // 시간 표시를 켰는데 format에 시간이 없으면 기본 시간 format으로 변경
+ newFormat = "YYYY-MM-DD HH:mm";
+ } else if (!newShowTime && localValues.format.includes("HH:mm")) {
+ // 시간 표시를 껐는데 format에 시간이 있으면 날짜만 format으로 변경
+ newFormat = "YYYY-MM-DD";
+ }
+
+ console.log("🔄 showTime+format 동시 업데이트:", {
+ newShowTime,
+ oldFormat: localValues.format,
+ newFormat,
+ });
+
+ // 한 번에 두 값을 모두 업데이트 - 현재 로컬 상태 기반으로 생성
+ const newConfig = JSON.parse(
+ JSON.stringify({
+ ...localValues,
+ showTime: newShowTime,
+ format: newFormat,
+ }),
+ );
+
+ // 로컬 상태도 동시 업데이트
+ setLocalValues((prev) => ({
+ ...prev,
+ showTime: newShowTime,
+ format: newFormat,
+ }));
+
+ // 한 번에 업데이트
+ setTimeout(() => {
+ onConfigChange(newConfig);
+ }, 0);
+ }}
+ />
+
+
+ {/* 플레이스홀더 */}
+
+
+ 플레이스홀더
+
+
+
+ {/* 최소 날짜 */}
+
+
+ 최소 날짜
+
+
+
+ {/* 최대 날짜 */}
+
+
+ 최대 날짜
+
+
+
+ {/* 기본값 */}
+
+
+ 기본값
+
+
+
= ({ config, onConfigChange }) => {
+ // 기본값이 설정된 config 사용
+ const safeConfig = {
+ entityName: "",
+ displayField: "name",
+ valueField: "id",
+ searchable: true,
+ multiple: false,
+ allowClear: true,
+ placeholder: "",
+ apiEndpoint: "",
+ filters: [],
+ displayFormat: "simple",
+ maxSelections: undefined,
+ ...config,
+ };
+
+ // 로컬 상태로 실시간 입력 관리
+ const [localValues, setLocalValues] = useState({
+ entityName: safeConfig.entityName,
+ displayField: safeConfig.displayField,
+ valueField: safeConfig.valueField,
+ searchable: safeConfig.searchable,
+ multiple: safeConfig.multiple,
+ allowClear: safeConfig.allowClear,
+ placeholder: safeConfig.placeholder,
+ apiEndpoint: safeConfig.apiEndpoint,
+ displayFormat: safeConfig.displayFormat,
+ maxSelections: safeConfig.maxSelections?.toString() || "",
+ });
+
+ const [newFilter, setNewFilter] = useState({ field: "", operator: "=", value: "" });
+
+ // 표시 형식 옵션
+ const displayFormats = [
+ { value: "simple", label: "단순 (이름만)" },
+ { value: "detailed", label: "상세 (이름 + 설명)" },
+ { value: "custom", label: "사용자 정의" },
+ ];
+
+ // 필터 연산자들
+ const operators = [
+ { value: "=", label: "같음 (=)" },
+ { value: "!=", label: "다름 (!=)" },
+ { value: "like", label: "포함 (LIKE)" },
+ { value: ">", label: "초과 (>)" },
+ { value: "<", label: "미만 (<)" },
+ { value: ">=", label: "이상 (>=)" },
+ { value: "<=", label: "이하 (<=)" },
+ { value: "in", label: "포함됨 (IN)" },
+ { value: "not_in", label: "포함안됨 (NOT IN)" },
+ ];
+
+ // config가 변경될 때 로컬 상태 동기화
+ useEffect(() => {
+ setLocalValues({
+ entityName: safeConfig.entityName,
+ displayField: safeConfig.displayField,
+ valueField: safeConfig.valueField,
+ searchable: safeConfig.searchable,
+ multiple: safeConfig.multiple,
+ allowClear: safeConfig.allowClear,
+ placeholder: safeConfig.placeholder,
+ apiEndpoint: safeConfig.apiEndpoint,
+ displayFormat: safeConfig.displayFormat,
+ maxSelections: safeConfig.maxSelections?.toString() || "",
+ });
+ }, [
+ safeConfig.entityName,
+ safeConfig.displayField,
+ safeConfig.valueField,
+ safeConfig.searchable,
+ safeConfig.multiple,
+ safeConfig.allowClear,
+ safeConfig.placeholder,
+ safeConfig.apiEndpoint,
+ safeConfig.displayFormat,
+ safeConfig.maxSelections,
+ ]);
+
+ const updateConfig = (key: keyof EntityTypeConfig, value: any) => {
+ // 로컬 상태 즉시 업데이트
+ if (key === "maxSelections") {
+ setLocalValues((prev) => ({ ...prev, [key]: value?.toString() || "" }));
+ } else {
+ setLocalValues((prev) => ({ ...prev, [key]: value }));
+ }
+
+ // 실제 config 업데이트
+ const newConfig = { ...safeConfig, [key]: value };
+ console.log("🏢 EntityTypeConfig 업데이트:", {
+ key,
+ value,
+ oldConfig: safeConfig,
+ newConfig,
+ });
+ onConfigChange(newConfig);
+ };
+
+ const addFilter = () => {
+ if (newFilter.field.trim() && newFilter.value.trim()) {
+ const updatedFilters = [...(safeConfig.filters || []), { ...newFilter }];
+ updateConfig("filters", updatedFilters);
+ setNewFilter({ field: "", operator: "=", value: "" });
+ }
+ };
+
+ const removeFilter = (index: number) => {
+ const updatedFilters = (safeConfig.filters || []).filter((_, i) => i !== index);
+ updateConfig("filters", updatedFilters);
+ };
+
+ const updateFilter = (index: number, field: keyof typeof newFilter, value: string) => {
+ const updatedFilters = [...(safeConfig.filters || [])];
+ updatedFilters[index] = { ...updatedFilters[index], [field]: value };
+ updateConfig("filters", updatedFilters);
+ };
+
+ return (
+
+ {/* 엔터티 이름 */}
+
+
+ 엔터티 이름
+
+
+
+ {/* API 엔드포인트 */}
+
+
+ API 엔드포인트
+
+
+
+ {/* 필드 설정 */}
+
+
+ {/* 표시 형식 */}
+
+
+ 표시 형식
+
+ updateConfig("displayFormat", value)}>
+
+
+
+ {displayFormats.map((format) => (
+
+ {format.label}
+
+ ))}
+
+
+
+
+ {/* 플레이스홀더 */}
+
+
+ 플레이스홀더
+
+
+
+ {/* 옵션들 */}
+
+
+
+ 검색 가능
+
+ updateConfig("searchable", !!checked)}
+ />
+
+
+
+
+ 다중 선택
+
+ updateConfig("multiple", !!checked)}
+ />
+
+
+
+
+ 선택 해제 허용
+
+ updateConfig("allowClear", !!checked)}
+ />
+
+
+
+ {/* 최대 선택 개수 (다중 선택 시) */}
+ {localValues.multiple && (
+
+
+ 최대 선택 개수
+
+
+ )}
+
+ {/* 필터 관리 */}
+
+
데이터 필터
+
+ {/* 기존 필터 목록 */}
+
+
+ {/* 새 필터 추가 */}
+
+
+
총 {(safeConfig.filters || []).length}개 필터
+
+
+ {/* 미리보기 */}
+
+
미리보기
+
+
+ {localValues.searchable &&
}
+
+ {localValues.placeholder || `${localValues.entityName || "엔터티"}를 선택하세요`}
+
+
+
+
+
+ 엔터티: {localValues.entityName || "없음"}, API: {localValues.apiEndpoint || "없음"}, 값필드:{" "}
+ {localValues.valueField}, 표시필드: {localValues.displayField}
+ {localValues.multiple && `, 다중선택`}
+ {localValues.searchable && `, 검색가능`}
+
+
+
+ {/* 안내 메시지 */}
+
+
엔터티 참조 설정
+
+ • 엔터티 참조는 다른 테이블의 데이터를 선택할 때 사용됩니다
+
+
+
= ({ config, onConfigChange }) => {
+ // 기본값이 설정된 config 사용
+ const safeConfig = {
+ accept: "",
+ multiple: false,
+ maxSize: 10, // MB
+ maxFiles: 1,
+ preview: true,
+ dragDrop: true,
+ allowedExtensions: [],
+ ...config,
+ };
+
+ // 로컬 상태로 실시간 입력 관리
+ const [localValues, setLocalValues] = useState({
+ accept: safeConfig.accept,
+ multiple: safeConfig.multiple,
+ maxSize: safeConfig.maxSize,
+ maxFiles: safeConfig.maxFiles,
+ preview: safeConfig.preview,
+ dragDrop: safeConfig.dragDrop,
+ });
+
+ const [newExtension, setNewExtension] = useState("");
+
+ // 미리 정의된 파일 타입들
+ const fileTypePresets = [
+ { label: "이미지", accept: "image/*", extensions: [".jpg", ".jpeg", ".png", ".gif", ".webp"], icon: Image },
+ {
+ label: "문서",
+ accept: ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx",
+ extensions: [".pdf", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx"],
+ icon: FileText,
+ },
+ { label: "비디오", accept: "video/*", extensions: [".mp4", ".avi", ".mov", ".mkv"], icon: FileVideo },
+ { label: "오디오", accept: "audio/*", extensions: [".mp3", ".wav", ".ogg", ".m4a"], icon: FileAudio },
+ ];
+
+ // config가 변경될 때 로컬 상태 동기화
+ useEffect(() => {
+ setLocalValues({
+ accept: safeConfig.accept,
+ multiple: safeConfig.multiple,
+ maxSize: safeConfig.maxSize,
+ maxFiles: safeConfig.maxFiles,
+ preview: safeConfig.preview,
+ dragDrop: safeConfig.dragDrop,
+ });
+ }, [
+ safeConfig.accept,
+ safeConfig.multiple,
+ safeConfig.maxSize,
+ safeConfig.maxFiles,
+ safeConfig.preview,
+ safeConfig.dragDrop,
+ ]);
+
+ const updateConfig = (key: keyof FileTypeConfig, value: any) => {
+ // 로컬 상태 즉시 업데이트
+ setLocalValues((prev) => ({ ...prev, [key]: value }));
+
+ // 실제 config 업데이트
+ const newConfig = { ...safeConfig, [key]: value };
+ console.log("📁 FileTypeConfig 업데이트:", {
+ key,
+ value,
+ oldConfig: safeConfig,
+ newConfig,
+ });
+ onConfigChange(newConfig);
+ };
+
+ const applyFileTypePreset = (preset: (typeof fileTypePresets)[0]) => {
+ updateConfig("accept", preset.accept);
+ updateConfig("allowedExtensions", preset.extensions);
+ };
+
+ const addExtension = () => {
+ if (newExtension.trim() && !newExtension.includes(" ")) {
+ const extension = newExtension.startsWith(".") ? newExtension : `.${newExtension}`;
+ const updatedExtensions = [...(safeConfig.allowedExtensions || []), extension];
+ updateConfig("allowedExtensions", updatedExtensions);
+ setNewExtension("");
+ }
+ };
+
+ const removeExtension = (index: number) => {
+ const updatedExtensions = (safeConfig.allowedExtensions || []).filter((_, i) => i !== index);
+ updateConfig("allowedExtensions", updatedExtensions);
+ };
+
+ const formatFileSize = (sizeInMB: number) => {
+ if (sizeInMB < 1) {
+ return `${Math.round(sizeInMB * 1024)} KB`;
+ }
+ return `${sizeInMB} MB`;
+ };
+
+ return (
+
+ {/* 파일 타입 프리셋 */}
+
+
빠른 설정
+
+ {fileTypePresets.map((preset) => {
+ const IconComponent = preset.icon;
+ return (
+ applyFileTypePreset(preset)}
+ className="flex items-center space-x-2"
+ >
+ {preset.label}
+
+ );
+ })}
+
+
+
+ {/* Accept 속성 */}
+
+
+ 허용 파일 타입 (accept)
+
+
updateConfig("accept", e.target.value)}
+ placeholder="예: image/*,.pdf,.docx"
+ className="mt-1"
+ />
+
MIME 타입 또는 파일 확장자를 쉼표로 구분하여 입력
+
+
+ {/* 허용 확장자 관리 */}
+
+
허용 확장자
+
+ {(safeConfig.allowedExtensions || []).map((extension, index) => (
+
+ {extension}
+ removeExtension(index)} />
+
+ ))}
+
+
+
+ 추가
+
+
+
+
+ {/* 다중 파일 선택 */}
+
+
+ 다중 파일 선택
+
+ updateConfig("multiple", !!checked)}
+ />
+
+
+ {/* 최대 파일 크기 */}
+
+
+ 최대 파일 크기: {formatFileSize(localValues.maxSize)}
+
+
+
updateConfig("maxSize", value[0])}
+ min={0.1}
+ max={100}
+ step={0.1}
+ className="w-full"
+ />
+
+ 100 KB
+ 100 MB
+
+
+
+
+ {/* 최대 파일 개수 (다중 선택 시) */}
+ {localValues.multiple && (
+
+
+ 최대 파일 개수: {localValues.maxFiles}
+
+
+
updateConfig("maxFiles", value[0])}
+ min={1}
+ max={20}
+ step={1}
+ className="w-full"
+ />
+
+ 1
+ 20
+
+
+
+ )}
+
+ {/* 미리보기 표시 */}
+
+
+ 미리보기 표시 (이미지)
+
+ updateConfig("preview", !!checked)}
+ />
+
+
+ {/* 드래그 앤 드롭 */}
+
+
+ 드래그 앤 드롭 지원
+
+ updateConfig("dragDrop", !!checked)}
+ />
+
+
+ {/* 미리보기 */}
+
+
미리보기
+
+
+
+
+ {localValues.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
+
+
+ {localValues.accept && `허용 타입: ${localValues.accept}`}
+ {(safeConfig.allowedExtensions || []).length > 0 && (
+
확장자: {(safeConfig.allowedExtensions || []).join(", ")}
+ )}
+ 최대 크기: {formatFileSize(localValues.maxSize)}
+ {localValues.multiple && `, 최대 ${localValues.maxFiles}개`}
+
+
+
+
+
+ {/* 안내 메시지 */}
+
+
파일 업로드 설정
+
+ • Accept 속성은 파일 선택 다이얼로그에서 필터링됩니다
+
+
+
= ({ config, onConfigChange }) => {
+ // 기본값이 설정된 config 사용
+ const safeConfig = {
+ format: "integer" as const,
+ min: undefined,
+ max: undefined,
+ step: undefined,
+ decimalPlaces: undefined,
+ thousandSeparator: false,
+ prefix: "",
+ suffix: "",
+ placeholder: "",
+ ...config,
+ };
+
+ // 로컬 상태로 실시간 입력 관리
+ const [localValues, setLocalValues] = useState({
+ format: safeConfig.format,
+ min: safeConfig.min?.toString() || "",
+ max: safeConfig.max?.toString() || "",
+ step: safeConfig.step?.toString() || "",
+ decimalPlaces: safeConfig.decimalPlaces?.toString() || "",
+ thousandSeparator: safeConfig.thousandSeparator,
+ prefix: safeConfig.prefix,
+ suffix: safeConfig.suffix,
+ placeholder: safeConfig.placeholder,
+ });
+
+ // config가 변경될 때 로컬 상태 동기화
+ useEffect(() => {
+ setLocalValues({
+ format: safeConfig.format,
+ min: safeConfig.min?.toString() || "",
+ max: safeConfig.max?.toString() || "",
+ step: safeConfig.step?.toString() || "",
+ decimalPlaces: safeConfig.decimalPlaces?.toString() || "",
+ thousandSeparator: safeConfig.thousandSeparator,
+ prefix: safeConfig.prefix,
+ suffix: safeConfig.suffix,
+ placeholder: safeConfig.placeholder,
+ });
+ }, [
+ safeConfig.format,
+ safeConfig.min,
+ safeConfig.max,
+ safeConfig.step,
+ safeConfig.decimalPlaces,
+ safeConfig.thousandSeparator,
+ safeConfig.prefix,
+ safeConfig.suffix,
+ safeConfig.placeholder,
+ ]);
+
+ const updateConfig = (key: keyof NumberTypeConfig, value: any) => {
+ // 로컬 상태 즉시 업데이트
+ if (key === "min" || key === "max" || key === "step" || key === "decimalPlaces") {
+ setLocalValues((prev) => ({ ...prev, [key]: value?.toString() || "" }));
+ } else {
+ setLocalValues((prev) => ({ ...prev, [key]: value }));
+ }
+
+ // 실제 config 업데이트 - 깊은 복사로 새 객체 보장
+ const newConfig = JSON.parse(JSON.stringify({ ...safeConfig, [key]: value }));
+ console.log("🔢 NumberTypeConfig 업데이트:", {
+ key,
+ value,
+ oldConfig: safeConfig,
+ newConfig,
+ timestamp: new Date().toISOString(),
+ });
+
+ // 약간의 지연을 두고 업데이트 (배치 업데이트 방지)
+ setTimeout(() => {
+ onConfigChange(newConfig);
+ }, 0);
+ };
+
+ return (
+
+ {/* 숫자 형식 */}
+
+
+ 숫자 형식
+
+ updateConfig("format", value)}>
+
+
+
+ 정수
+ 소수
+ 통화
+ 퍼센트
+
+
+
+
+ {/* 범위 설정 */}
+
+
+ {/* 단계값 */}
+
+
+ 단계값 (증감 단위)
+
+
+
+ {/* 소수점 자릿수 (decimal 형식인 경우) */}
+ {localValues.format === "decimal" && (
+
+
+ 소수점 자릿수
+
+
+ )}
+
+ {/* 천 단위 구분자 */}
+
+
+ 천 단위 구분자 사용
+
+ updateConfig("thousandSeparator", !!checked)}
+ />
+
+
+ {/* 접두사/접미사 */}
+
+
+ {/* 플레이스홀더 */}
+
+
+ 플레이스홀더
+
+
+
= ({ config, onConfigChange }) => {
+ // 기본값이 설정된 config 사용
+ const safeConfig = {
+ options: [],
+ layout: "vertical" as const,
+ defaultValue: "",
+ allowNone: false,
+ ...config,
+ };
+
+ // 로컬 상태로 실시간 입력 관리
+ const [localValues, setLocalValues] = useState({
+ layout: safeConfig.layout,
+ defaultValue: safeConfig.defaultValue,
+ allowNone: safeConfig.allowNone,
+ });
+
+ const [newOption, setNewOption] = useState({ label: "", value: "" });
+
+ // 옵션들의 로컬 편집 상태
+ const [localOptions, setLocalOptions] = useState(
+ (safeConfig.options || []).map((option) => ({
+ label: option.label || "",
+ value: option.value || "",
+ })),
+ );
+
+ // config가 변경될 때 로컬 상태 동기화
+ useEffect(() => {
+ setLocalValues({
+ layout: safeConfig.layout,
+ defaultValue: safeConfig.defaultValue,
+ allowNone: safeConfig.allowNone,
+ });
+
+ setLocalOptions(
+ (safeConfig.options || []).map((option) => ({
+ label: option.label || "",
+ value: option.value || "",
+ })),
+ );
+ }, [safeConfig.layout, safeConfig.defaultValue, safeConfig.allowNone, JSON.stringify(safeConfig.options)]);
+
+ const updateConfig = (key: keyof RadioTypeConfig, value: any) => {
+ // "__none__" 값을 빈 문자열로 변환
+ const processedValue = key === "defaultValue" && value === "__none__" ? "" : value;
+
+ // 로컬 상태 즉시 업데이트
+ setLocalValues((prev) => ({ ...prev, [key]: processedValue }));
+
+ // 실제 config 업데이트 - 깊은 복사로 새 객체 보장
+ const newConfig = JSON.parse(JSON.stringify({ ...safeConfig, [key]: processedValue }));
+ console.log("📻 RadioTypeConfig 업데이트:", {
+ key,
+ value,
+ processedValue,
+ oldConfig: safeConfig,
+ newConfig,
+ timestamp: new Date().toISOString(),
+ });
+
+ // 약간의 지연을 두고 업데이트 (배치 업데이트 방지)
+ setTimeout(() => {
+ onConfigChange(newConfig);
+ }, 0);
+ };
+
+ const addOption = () => {
+ if (newOption.label.trim() && newOption.value.trim()) {
+ const newOptionData = { ...newOption };
+ const updatedOptions = [...(safeConfig.options || []), newOptionData];
+
+ console.log("➕ RadioType 옵션 추가:", {
+ newOption: newOptionData,
+ updatedOptions,
+ currentLocalOptions: localOptions,
+ timestamp: new Date().toISOString(),
+ });
+
+ // 로컬 상태 즉시 업데이트
+ setLocalOptions((prev) => {
+ const newLocalOptions = [
+ ...prev,
+ {
+ label: newOption.label,
+ value: newOption.value,
+ },
+ ];
+ console.log("📻 RadioType 로컬 옵션 업데이트:", newLocalOptions);
+ return newLocalOptions;
+ });
+
+ updateConfig("options", updatedOptions);
+ setNewOption({ label: "", value: "" });
+ }
+ };
+
+ const removeOption = (index: number) => {
+ console.log("➖ RadioType 옵션 삭제:", {
+ removeIndex: index,
+ currentOptions: safeConfig.options,
+ currentLocalOptions: localOptions,
+ });
+
+ // 로컬 상태 즉시 업데이트
+ setLocalOptions((prev) => {
+ const newLocalOptions = prev.filter((_, i) => i !== index);
+ console.log("📻 RadioType 로컬 옵션 삭제 후:", newLocalOptions);
+ return newLocalOptions;
+ });
+
+ const updatedOptions = (safeConfig.options || []).filter((_, i) => i !== index);
+ updateConfig("options", updatedOptions);
+ };
+
+ const updateOption = (index: number, field: "label" | "value", value: string) => {
+ // 로컬 상태 즉시 업데이트 (실시간 입력 반영)
+ const updatedLocalOptions = [...localOptions];
+ updatedLocalOptions[index] = { ...updatedLocalOptions[index], [field]: value };
+ setLocalOptions(updatedLocalOptions);
+
+ // 실제 config 업데이트
+ const updatedOptions = [...(safeConfig.options || [])];
+ updatedOptions[index] = { ...updatedOptions[index], [field]: value };
+ updateConfig("options", updatedOptions);
+ };
+
+ return (
+
+ {/* 레이아웃 방향 */}
+
+
+ 레이아웃 방향
+
+ updateConfig("layout", value)}>
+
+
+
+ 세로
+ 가로
+ 격자 (2열)
+
+
+
+
+ {/* 기본값 */}
+
+
+ 기본 선택값
+
+ updateConfig("defaultValue", value)}
+ >
+
+
+
+ 선택 안함
+ {(safeConfig.options || []).map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+ {/* 선택 안함 허용 */}
+
+
+ 선택 해제 허용
+
+ updateConfig("allowNone", !!checked)}
+ />
+
+
+ {/* 옵션 관리 */}
+
+
옵션 관리
+
+ {/* 기존 옵션 목록 */}
+
+
+ {/* 새 옵션 추가 */}
+
+
+
총 {(safeConfig.options || []).length}개 옵션
+
+
+ {/* 미리보기 */}
+ {(safeConfig.options || []).length > 0 && (
+
+
미리보기
+
+
+ {(safeConfig.options || []).map((option) => (
+
+
+ {option.label}
+
+
+ ))}
+
+
+
+ 레이아웃:{" "}
+ {localValues.layout === "vertical" ? "세로" : localValues.layout === "horizontal" ? "가로" : "격자"},
+ 기본값: {localValues.defaultValue || "없음"}
+ {localValues.allowNone && ", 선택해제 가능"}
+
+
+ )}
+
+ {/* 안내 메시지 */}
+ {localValues.allowNone && (
+
+
선택 해제 허용
+
+ 사용자가 같은 라디오 버튼을 다시 클릭하여 선택을 해제할 수 있습니다.
+
+
+ )}
+
= ({ config, onConfigChange }) => {
+ // 기본값이 설정된 config 사용
+ const safeConfig = {
+ options: [],
+ multiple: false,
+ searchable: false,
+ placeholder: "",
+ allowClear: false,
+ maxSelections: undefined,
+ ...config,
+ };
+
+ // 로컬 상태로 실시간 입력 관리
+ const [localValues, setLocalValues] = useState({
+ multiple: safeConfig.multiple,
+ searchable: safeConfig.searchable,
+ placeholder: safeConfig.placeholder,
+ allowClear: safeConfig.allowClear,
+ maxSelections: safeConfig.maxSelections?.toString() || "",
+ });
+
+ const [newOption, setNewOption] = useState({ label: "", value: "" });
+
+ // 옵션들의 로컬 편집 상태
+ const [localOptions, setLocalOptions] = useState(
+ (safeConfig.options || []).map((option) => ({
+ label: option.label || "",
+ value: option.value || "",
+ disabled: option.disabled || false,
+ })),
+ );
+
+ // config가 변경될 때 로컬 상태 동기화
+ useEffect(() => {
+ setLocalValues({
+ multiple: safeConfig.multiple,
+ searchable: safeConfig.searchable,
+ placeholder: safeConfig.placeholder,
+ allowClear: safeConfig.allowClear,
+ maxSelections: safeConfig.maxSelections?.toString() || "",
+ });
+
+ setLocalOptions(
+ (safeConfig.options || []).map((option) => ({
+ label: option.label || "",
+ value: option.value || "",
+ disabled: option.disabled || false,
+ })),
+ );
+ }, [
+ safeConfig.multiple,
+ safeConfig.searchable,
+ safeConfig.placeholder,
+ safeConfig.allowClear,
+ safeConfig.maxSelections,
+ JSON.stringify(safeConfig.options), // 옵션 배열의 전체 내용 변화 감지
+ ]);
+
+ const updateConfig = (key: keyof SelectTypeConfig, value: any) => {
+ // 로컬 상태 즉시 업데이트
+ if (key === "maxSelections") {
+ setLocalValues((prev) => ({ ...prev, [key]: value?.toString() || "" }));
+ } else {
+ setLocalValues((prev) => ({ ...prev, [key]: value }));
+ }
+
+ // 실제 config 업데이트 - 깊은 복사로 새 객체 보장
+ const newConfig = JSON.parse(JSON.stringify({ ...safeConfig, [key]: value }));
+ console.log("📋 SelectTypeConfig 업데이트:", {
+ key,
+ value,
+ oldConfig: safeConfig,
+ newConfig,
+ timestamp: new Date().toISOString(),
+ });
+
+ // 약간의 지연을 두고 업데이트 (배치 업데이트 방지)
+ setTimeout(() => {
+ onConfigChange(newConfig);
+ }, 0);
+ };
+
+ const addOption = () => {
+ if (newOption.label.trim() && newOption.value.trim()) {
+ const newOptionData = { ...newOption, disabled: false };
+ const updatedOptions = [...(safeConfig.options || []), newOptionData];
+
+ console.log("➕ SelectType 옵션 추가:", {
+ newOption: newOptionData,
+ updatedOptions,
+ currentLocalOptions: localOptions,
+ timestamp: new Date().toISOString(),
+ });
+
+ // 로컬 상태 즉시 업데이트
+ setLocalOptions((prev) => {
+ const newLocalOptions = [
+ ...prev,
+ {
+ label: newOption.label,
+ value: newOption.value,
+ disabled: false,
+ },
+ ];
+ console.log("📋 SelectType 로컬 옵션 업데이트:", newLocalOptions);
+ return newLocalOptions;
+ });
+
+ updateConfig("options", updatedOptions);
+ setNewOption({ label: "", value: "" });
+ }
+ };
+
+ const removeOption = (index: number) => {
+ console.log("➖ SelectType 옵션 삭제:", {
+ removeIndex: index,
+ currentOptions: safeConfig.options,
+ currentLocalOptions: localOptions,
+ });
+
+ // 로컬 상태 즉시 업데이트
+ setLocalOptions((prev) => {
+ const newLocalOptions = prev.filter((_, i) => i !== index);
+ console.log("📋 SelectType 로컬 옵션 삭제 후:", newLocalOptions);
+ return newLocalOptions;
+ });
+
+ const updatedOptions = (safeConfig.options || []).filter((_, i) => i !== index);
+ updateConfig("options", updatedOptions);
+ };
+
+ const updateOption = (index: number, field: "label" | "value" | "disabled", value: any) => {
+ // 로컬 상태 즉시 업데이트 (실시간 입력 반영)
+ const updatedLocalOptions = [...localOptions];
+ updatedLocalOptions[index] = { ...updatedLocalOptions[index], [field]: value };
+ setLocalOptions(updatedLocalOptions);
+
+ // 실제 config 업데이트
+ const updatedOptions = [...(safeConfig.options || [])];
+ updatedOptions[index] = { ...updatedOptions[index], [field]: value };
+ updateConfig("options", updatedOptions);
+ };
+
+ return (
+
+ {/* 기본 설정 */}
+
+ {/* 플레이스홀더 */}
+
+
+ 플레이스홀더
+
+
+
+ {/* 다중 선택 */}
+
+
+ 다중 선택 허용
+
+ updateConfig("multiple", !!checked)}
+ />
+
+
+ {/* 검색 가능 */}
+
+
+ 검색 가능
+
+ updateConfig("searchable", !!checked)}
+ />
+
+
+ {/* 클리어 허용 */}
+
+
+ 선택 해제 허용
+
+ updateConfig("allowClear", !!checked)}
+ />
+
+
+ {/* 최대 선택 개수 (다중 선택인 경우) */}
+ {localValues.multiple && (
+
+
+ 최대 선택 개수
+
+
+ )}
+
+
+ {/* 옵션 관리 */}
+
+
옵션 관리
+
+ {/* 기존 옵션 목록 */}
+
+
+ {/* 새 옵션 추가 */}
+
+
+
= ({ config, onConfigChange }) => {
+ // 기본값이 설정된 config 사용
+ const safeConfig = {
+ minLength: undefined,
+ maxLength: undefined,
+ pattern: "",
+ format: "none" as const,
+ placeholder: "",
+ multiline: false,
+ ...config,
+ };
+
+ // 로컬 상태로 실시간 입력 관리
+ const [localValues, setLocalValues] = useState({
+ minLength: safeConfig.minLength?.toString() || "",
+ maxLength: safeConfig.maxLength?.toString() || "",
+ pattern: safeConfig.pattern,
+ format: safeConfig.format,
+ placeholder: safeConfig.placeholder,
+ multiline: safeConfig.multiline,
+ });
+
+ // config가 변경될 때 로컬 상태 동기화
+ useEffect(() => {
+ setLocalValues({
+ minLength: safeConfig.minLength?.toString() || "",
+ maxLength: safeConfig.maxLength?.toString() || "",
+ pattern: safeConfig.pattern,
+ format: safeConfig.format,
+ placeholder: safeConfig.placeholder,
+ multiline: safeConfig.multiline,
+ });
+ }, [
+ safeConfig.minLength,
+ safeConfig.maxLength,
+ safeConfig.pattern,
+ safeConfig.format,
+ safeConfig.placeholder,
+ safeConfig.multiline,
+ ]);
+
+ const updateConfig = (key: keyof TextTypeConfig, value: any) => {
+ // 로컬 상태 즉시 업데이트
+ if (key === "minLength" || key === "maxLength") {
+ setLocalValues((prev) => ({ ...prev, [key]: value?.toString() || "" }));
+ } else {
+ setLocalValues((prev) => ({ ...prev, [key]: value }));
+ }
+
+ // 실제 config 업데이트
+ const newConfig = { ...safeConfig, [key]: value };
+ console.log("📝 TextTypeConfig 업데이트:", {
+ key,
+ value,
+ oldConfig: safeConfig,
+ newConfig,
+ });
+ onConfigChange(newConfig);
+ };
+
+ return (
+
+ {/* 입력 형식 */}
+
+
+ 입력 형식
+
+ updateConfig("format", value)}>
+
+
+
+ 제한 없음
+ 이메일
+ 전화번호
+ URL
+ 한글만
+ 영어만
+ 영숫자만
+ 숫자만
+
+
+
+
+ {/* 길이 제한 */}
+
+
+ {/* 정규식 패턴 */}
+
+
+ 정규식 패턴
+
+
updateConfig("pattern", e.target.value)}
+ className="mt-1"
+ placeholder="예: ^[0-9]{3}-[0-9]{4}-[0-9]{4}$"
+ />
+
JavaScript 정규식 패턴을 입력하세요 (선택사항)
+
+
+ {/* 플레이스홀더 */}
+
+
+ 플레이스홀더
+
+
+
+ {/* 여러 줄 입력 */}
+
+
+ 여러 줄 입력 (textarea)
+
+ updateConfig("multiline", !!checked)}
+ />
+
+
+ {/* 형식별 안내 메시지 */}
+ {localValues.format !== "none" && (
+
+
형식 안내
+
+ {localValues.format === "email" && "유효한 이메일 주소를 입력해야 합니다 (예: user@example.com)"}
+ {localValues.format === "phone" && "전화번호 형식으로 입력해야 합니다 (예: 010-1234-5678)"}
+ {localValues.format === "url" && "유효한 URL을 입력해야 합니다 (예: https://example.com)"}
+ {localValues.format === "korean" && "한글만 입력할 수 있습니다"}
+ {localValues.format === "english" && "영어만 입력할 수 있습니다"}
+ {localValues.format === "alphanumeric" && "영문자와 숫자만 입력할 수 있습니다"}
+ {localValues.format === "numeric" && "숫자만 입력할 수 있습니다"}
+
+
+ )}
+
= ({ config, onConfigChange }) => {
+ // 기본값이 설정된 config 사용
+ const safeConfig = {
+ rows: 3,
+ maxLength: undefined,
+ minLength: undefined,
+ placeholder: "",
+ resizable: true,
+ autoResize: false,
+ wordWrap: true,
+ ...config,
+ };
+
+ // 로컬 상태로 실시간 입력 관리
+ const [localValues, setLocalValues] = useState({
+ rows: safeConfig.rows,
+ maxLength: safeConfig.maxLength?.toString() || "",
+ minLength: safeConfig.minLength?.toString() || "",
+ placeholder: safeConfig.placeholder,
+ resizable: safeConfig.resizable,
+ autoResize: safeConfig.autoResize,
+ wordWrap: safeConfig.wordWrap,
+ });
+
+ // config가 변경될 때 로컬 상태 동기화
+ useEffect(() => {
+ setLocalValues({
+ rows: safeConfig.rows,
+ maxLength: safeConfig.maxLength?.toString() || "",
+ minLength: safeConfig.minLength?.toString() || "",
+ placeholder: safeConfig.placeholder,
+ resizable: safeConfig.resizable,
+ autoResize: safeConfig.autoResize,
+ wordWrap: safeConfig.wordWrap,
+ });
+ }, [
+ safeConfig.rows,
+ safeConfig.maxLength,
+ safeConfig.minLength,
+ safeConfig.placeholder,
+ safeConfig.resizable,
+ safeConfig.autoResize,
+ safeConfig.wordWrap,
+ ]);
+
+ const updateConfig = (key: keyof TextareaTypeConfig, value: any) => {
+ // 로컬 상태 즉시 업데이트
+ if (key === "maxLength" || key === "minLength") {
+ setLocalValues((prev) => ({ ...prev, [key]: value?.toString() || "" }));
+ } else {
+ setLocalValues((prev) => ({ ...prev, [key]: value }));
+ }
+
+ // 실제 config 업데이트
+ const newConfig = { ...safeConfig, [key]: value };
+ console.log("📄 TextareaTypeConfig 업데이트:", {
+ key,
+ value,
+ oldConfig: safeConfig,
+ newConfig,
+ });
+ onConfigChange(newConfig);
+ };
+
+ return (
+
+ {/* 기본 행 수 */}
+
+
+ 기본 행 수: {localValues.rows}
+
+
+
updateConfig("rows", value[0])}
+ min={1}
+ max={20}
+ step={1}
+ className="w-full"
+ />
+
+ 1
+ 20
+
+
+
+
+ {/* 길이 제한 */}
+
+
+ {/* 플레이스홀더 */}
+
+
+ 플레이스홀더
+
+
+
+ {/* 크기 조정 가능 */}
+
+
+ 사용자가 크기 조정 가능
+
+ updateConfig("resizable", !!checked)}
+ />
+
+
+ {/* 자동 크기 조정 */}
+
+
+ 내용에 따라 자동 크기 조정
+
+ updateConfig("autoResize", !!checked)}
+ />
+
+
+ {/* 단어 자동 줄바꿈 */}
+
+
+ 단어 자동 줄바꿈
+
+ updateConfig("wordWrap", !!checked)}
+ />
+
+
+ {/* 설정 미리보기 */}
+
+
미리보기
+
+
+
+
+ 행 수: {localValues.rows},{localValues.minLength && ` 최소: ${localValues.minLength}자,`}
+ {localValues.maxLength && ` 최대: ${localValues.maxLength}자,`}
+ {localValues.resizable ? " 크기조정 가능" : " 크기고정"}
+
+
+
;
+ displayProperties?: Record; // 레거시 지원용 (향후 제거 예정)
+ webTypeConfig?: WebTypeConfig; // 웹타입별 상세 설정
}
// 컴포넌트 유니온 타입
@@ -388,3 +390,115 @@ export interface PaginatedResponse {
size: number;
totalPages: number;
}
+
+// ===== 웹타입별 상세 설정 인터페이스 =====
+
+// 날짜/시간 타입 설정
+export interface DateTypeConfig {
+ format: "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss";
+ showTime: boolean;
+ minDate?: string;
+ maxDate?: string;
+ defaultValue?: string;
+ placeholder?: string;
+}
+
+// 숫자 타입 설정
+export interface NumberTypeConfig {
+ min?: number;
+ max?: number;
+ step?: number;
+ format?: "integer" | "decimal" | "currency" | "percentage";
+ decimalPlaces?: number;
+ thousandSeparator?: boolean;
+ prefix?: string; // 접두사 (예: $, ₩)
+ suffix?: string; // 접미사 (예: %, kg)
+ placeholder?: string;
+}
+
+// 선택박스 타입 설정
+export interface SelectTypeConfig {
+ options: Array<{ label: string; value: string; disabled?: boolean }>;
+ multiple?: boolean;
+ searchable?: boolean;
+ placeholder?: string;
+ allowClear?: boolean;
+ maxSelections?: number; // 다중 선택 시 최대 선택 개수
+}
+
+// 텍스트 타입 설정
+export interface TextTypeConfig {
+ minLength?: number;
+ maxLength?: number;
+ pattern?: string; // 정규식 패턴
+ format?: "none" | "email" | "phone" | "url" | "korean" | "english";
+ placeholder?: string;
+ autocomplete?: string;
+ spellcheck?: boolean;
+}
+
+// 파일 타입 설정
+export interface FileTypeConfig {
+ accept?: string; // MIME 타입 또는 확장자 (예: ".jpg,.png" 또는 "image/*")
+ multiple?: boolean;
+ maxSize?: number; // bytes
+ maxFiles?: number; // 다중 업로드 시 최대 파일 개수
+ preview?: boolean; // 미리보기 표시 여부
+ dragDrop?: boolean; // 드래그 앤 드롭 지원 여부
+}
+
+// 텍스트 영역 타입 설정
+export interface TextareaTypeConfig extends TextTypeConfig {
+ rows?: number;
+ cols?: number;
+ resize?: "none" | "both" | "horizontal" | "vertical";
+ wrap?: "soft" | "hard" | "off";
+}
+
+// 체크박스 타입 설정
+export interface CheckboxTypeConfig {
+ defaultChecked?: boolean;
+ trueValue?: string | number | boolean; // 체크 시 값
+ falseValue?: string | number | boolean; // 미체크 시 값
+ indeterminate?: boolean; // 불확실한 상태 지원
+}
+
+// 라디오 타입 설정
+export interface RadioTypeConfig {
+ options: Array<{ label: string; value: string; disabled?: boolean }>;
+ inline?: boolean; // 가로 배치 여부
+ defaultValue?: string;
+}
+
+// 코드 타입 설정 (공통코드 연계)
+export interface CodeTypeConfig {
+ codeCategory: string; // 공통코드 카테고리
+ displayFormat?: "label" | "value" | "both"; // 표시 형식
+ searchable?: boolean;
+ placeholder?: string;
+ allowClear?: boolean;
+}
+
+// 엔티티 타입 설정 (참조 테이블 연계)
+export interface EntityTypeConfig {
+ referenceTable: string;
+ referenceColumn: string;
+ displayColumn?: string; // 표시할 컬럼명 (기본값: referenceColumn)
+ searchable?: boolean;
+ placeholder?: string;
+ allowClear?: boolean;
+ filters?: Record; // 추가 필터 조건
+}
+
+// 웹타입별 설정 유니온 타입
+export type WebTypeConfig =
+ | DateTypeConfig
+ | NumberTypeConfig
+ | SelectTypeConfig
+ | TextTypeConfig
+ | FileTypeConfig
+ | TextareaTypeConfig
+ | CheckboxTypeConfig
+ | RadioTypeConfig
+ | CodeTypeConfig
+ | EntityTypeConfig;