diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index 746e2c2d..2a5d45e4 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -74,6 +74,9 @@ import "./location-swap-selector/LocationSwapSelectorRenderer";
 // 🆕 화면 임베딩 및 분할 패널 컴포넌트
 import "./screen-split-panel/ScreenSplitPanelRenderer"; // 화면 분할 패널 (좌우 화면 임베딩 + 데이터 전달)
 
+// 🆕 범용 폼 모달 컴포넌트
+import "./universal-form-modal/UniversalFormModalRenderer"; // 섹션 기반 폼, 채번규칙, 다중 행 저장 지원
+
 /**
  * 컴포넌트 초기화 함수
  */
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
new file mode 100644
index 00000000..c4501f6b
--- /dev/null
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
@@ -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;
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
new file mode 100644
index 00000000..d7acba41
--- /dev/null
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
@@ -0,0 +1,1152 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+  Plus,
+  Trash2,
+  GripVertical,
+  ChevronUp,
+  ChevronDown,
+  Settings,
+  Database,
+  Layout,
+  Hash,
+  Check,
+  ChevronsUpDown,
+} from "lucide-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import { apiClient } from "@/lib/api/client";
+import { getNumberingRules } from "@/lib/api/numberingRule";
+
+import {
+  UniversalFormModalConfig,
+  UniversalFormModalConfigPanelProps,
+  FormSectionConfig,
+  FormFieldConfig,
+  FIELD_TYPE_OPTIONS,
+  MODAL_SIZE_OPTIONS,
+  SELECT_OPTION_TYPE_OPTIONS,
+} from "./types";
+import {
+  defaultFieldConfig,
+  defaultSectionConfig,
+  defaultNumberingRuleConfig,
+  defaultSelectOptionsConfig,
+  generateSectionId,
+  generateFieldId,
+} from "./config";
+
+// 도움말 텍스트 컴포넌트
+const HelpText = ({ children }: { children: React.ReactNode }) => (
+  <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
+);
+
+export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFormModalConfigPanelProps) {
+  // 테이블 목록
+  const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
+  const [tableColumns, setTableColumns] = useState<{
+    [tableName: string]: { name: string; type: string; label: string }[];
+  }>({});
+
+  // 채번규칙 목록
+  const [numberingRules, setNumberingRules] = useState<{ id: string; name: string }[]>([]);
+
+  // 선택된 섹션/필드
+  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(null);
+  const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
+
+  // 테이블 선택 Combobox 상태
+  const [tableSelectOpen, setTableSelectOpen] = useState(false);
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    console.log("[UniversalFormModal ConfigPanel] 초기화 - 테이블 및 채번규칙 로드");
+    loadTables();
+    loadNumberingRules();
+  }, []);
+
+  // 저장 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    if (config.saveConfig.tableName) {
+      loadTableColumns(config.saveConfig.tableName);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.saveConfig.tableName]);
+
+  const loadTables = async () => {
+    try {
+      const response = await apiClient.get("/table-management/tables");
+      const data = response.data?.data;
+      if (response.data?.success && Array.isArray(data)) {
+        setTables(
+          data.map((t: { tableName?: string; table_name?: string; tableLabel?: string; table_label?: string }) => ({
+            name: t.tableName || t.table_name || "",
+            label: t.tableLabel || t.table_label || t.tableName || t.table_name || "",
+          })),
+        );
+      }
+    } catch (error) {
+      console.error("테이블 목록 로드 실패:", error);
+    }
+  };
+
+  const loadTableColumns = async (tableName: string) => {
+    console.log(`[UniversalFormModal] 테이블 컬럼 로드 시도: ${tableName}`);
+    if (!tableName || (tableColumns[tableName] && tableColumns[tableName].length > 0)) return;
+
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+      console.log("[UniversalFormModal] 테이블 컬럼 응답:", response.data);
+
+      // API 응답 구조: { success: true, data: { columns: [...] } }
+      const data = response.data?.data?.columns || response.data?.data;
+
+      if (response.data?.success && Array.isArray(data)) {
+        console.log(`[UniversalFormModal] 파싱된 컬럼 ${data.length}개:`, data);
+        setTableColumns((prev) => ({
+          ...prev,
+          [tableName]: data.map(
+            (c: {
+              columnName?: string;
+              column_name?: string;
+              dataType?: string;
+              data_type?: string;
+              columnLabel?: string;
+              column_label?: string;
+              name?: string;
+            }) => ({
+              name: c.columnName || c.column_name || c.name || "",
+              type: c.dataType || c.data_type || "",
+              label: c.columnLabel || c.column_label || c.columnName || c.column_name || c.name || "",
+            }),
+          ),
+        }));
+      } else {
+        console.warn("[UniversalFormModal] 컬럼 데이터 없음 또는 형식 오류:", response.data);
+        setTableColumns((prev) => ({ ...prev, [tableName]: [] }));
+      }
+    } catch (error) {
+      console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
+      setTableColumns((prev) => ({ ...prev, [tableName]: [] }));
+    }
+  };
+
+  const loadNumberingRules = async () => {
+    try {
+      console.log("[UniversalFormModal] 채번규칙 로드 시도");
+      const response = await getNumberingRules();
+      console.log("[UniversalFormModal] 채번규칙 응답:", response);
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const data: any = response.data;
+
+      if (response.success && Array.isArray(data) && data.length > 0) {
+        const rules = data.map(
+          (r: {
+            id?: string | number;
+            ruleId?: string;
+            rule_id?: string;
+            name?: string;
+            ruleName?: string;
+            rule_name?: string;
+          }) => ({
+            id: String(r.id || r.ruleId || r.rule_id || ""),
+            name: r.name || r.ruleName || r.rule_name || "",
+          }),
+        );
+        console.log("[UniversalFormModal] 파싱된 채번규칙:", rules);
+        setNumberingRules(rules);
+      } else {
+        console.warn("[UniversalFormModal] 채번규칙 데이터 없음:", data);
+      }
+    } catch (error) {
+      console.error("[UniversalFormModal] 채번규칙 목록 로드 실패:", error);
+    }
+  };
+
+  // 설정 업데이트 헬퍼
+  const updateModalConfig = useCallback(
+    (updates: Partial<UniversalFormModalConfig["modal"]>) => {
+      onChange({
+        ...config,
+        modal: { ...config.modal, ...updates },
+      });
+    },
+    [config, onChange],
+  );
+
+  const updateSaveConfig = useCallback(
+    (updates: Partial<UniversalFormModalConfig["saveConfig"]>) => {
+      onChange({
+        ...config,
+        saveConfig: { ...config.saveConfig, ...updates },
+      });
+    },
+    [config, onChange],
+  );
+
+  // 섹션 관리
+  const addSection = useCallback(() => {
+    const newSection: FormSectionConfig = {
+      ...defaultSectionConfig,
+      id: generateSectionId(),
+      title: `섹션 ${config.sections.length + 1}`,
+    };
+    onChange({
+      ...config,
+      sections: [...config.sections, newSection],
+    });
+    setSelectedSectionId(newSection.id);
+  }, [config, onChange]);
+
+  const updateSection = useCallback(
+    (sectionId: string, updates: Partial<FormSectionConfig>) => {
+      onChange({
+        ...config,
+        sections: config.sections.map((s) => (s.id === sectionId ? { ...s, ...updates } : s)),
+      });
+    },
+    [config, onChange],
+  );
+
+  const removeSection = useCallback(
+    (sectionId: string) => {
+      onChange({
+        ...config,
+        sections: config.sections.filter((s) => s.id !== sectionId),
+      });
+      if (selectedSectionId === sectionId) {
+        setSelectedSectionId(null);
+        setSelectedFieldId(null);
+      }
+    },
+    [config, onChange, selectedSectionId],
+  );
+
+  const moveSectionUp = useCallback(
+    (index: number) => {
+      if (index <= 0) return;
+      const newSections = [...config.sections];
+      [newSections[index - 1], newSections[index]] = [newSections[index], newSections[index - 1]];
+      onChange({ ...config, sections: newSections });
+    },
+    [config, onChange],
+  );
+
+  const moveSectionDown = useCallback(
+    (index: number) => {
+      if (index >= config.sections.length - 1) return;
+      const newSections = [...config.sections];
+      [newSections[index], newSections[index + 1]] = [newSections[index + 1], newSections[index]];
+      onChange({ ...config, sections: newSections });
+    },
+    [config, onChange],
+  );
+
+  // 필드 관리
+  const addField = useCallback(
+    (sectionId: string) => {
+      const newField: FormFieldConfig = {
+        ...defaultFieldConfig,
+        id: generateFieldId(),
+        label: "새 필드",
+        numberingRule: { ...defaultNumberingRuleConfig },
+        selectOptions: { ...defaultSelectOptionsConfig },
+      };
+      onChange({
+        ...config,
+        sections: config.sections.map((s) =>
+          s.id === sectionId ? { ...s, fields: [...s.fields, newField] } : s,
+        ),
+      });
+      setSelectedSectionId(sectionId);
+      setSelectedFieldId(newField.id);
+    },
+    [config, onChange],
+  );
+
+  const updateField = useCallback(
+    (sectionId: string, fieldId: string, updates: Partial<FormFieldConfig>) => {
+      onChange({
+        ...config,
+        sections: config.sections.map((s) =>
+          s.id === sectionId
+            ? {
+                ...s,
+                fields: s.fields.map((f) => (f.id === fieldId ? { ...f, ...updates } : f)),
+              }
+            : s,
+        ),
+      });
+    },
+    [config, onChange],
+  );
+
+  const removeField = useCallback(
+    (sectionId: string, fieldId: string) => {
+      onChange({
+        ...config,
+        sections: config.sections.map((s) =>
+          s.id === sectionId ? { ...s, fields: s.fields.filter((f) => f.id !== fieldId) } : s,
+        ),
+      });
+      if (selectedFieldId === fieldId) {
+        setSelectedFieldId(null);
+      }
+    },
+    [config, onChange, selectedFieldId],
+  );
+
+  // 선택된 섹션/필드 가져오기
+  const selectedSection = config.sections.find((s) => s.id === selectedSectionId);
+  const selectedField = selectedSection?.fields.find((f) => f.id === selectedFieldId);
+
+  // 현재 테이블의 컬럼 목록
+  const currentColumns = tableColumns[config.saveConfig.tableName] || [];
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="p-3 space-y-4">
+        {/* 모달 기본 설정 */}
+        <Accordion type="single" collapsible defaultValue="modal-settings">
+          <AccordionItem value="modal-settings" className="border rounded-lg">
+            <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
+              <div className="flex items-center gap-2">
+                <Layout className="h-3.5 w-3.5" />
+                모달 기본 설정
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-3 pb-3 space-y-3">
+              <div>
+                <Label className="text-[10px]">모달 제목</Label>
+                <Input
+                  value={config.modal.title || ""}
+                  onChange={(e) => updateModalConfig({ title: e.target.value })}
+                  placeholder="모달 제목 입력"
+                  className="h-7 text-xs mt-1"
+                />
+              </div>
+
+              <div>
+                <Label className="text-[10px]">모달 크기</Label>
+                <Select
+                  value={config.modal.size || "lg"}
+                  onValueChange={(value) =>
+                    updateModalConfig({ size: value as UniversalFormModalConfig["modal"]["size"] })
+                  }
+                >
+                  <SelectTrigger className="h-7 text-xs mt-1">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {MODAL_SIZE_OPTIONS.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div>
+                <Label className="text-[10px]">저장 버튼 텍스트</Label>
+                <Input
+                  value={config.modal.saveButtonText || "저장"}
+                  onChange={(e) => updateModalConfig({ saveButtonText: e.target.value })}
+                  className="h-7 text-xs mt-1"
+                />
+              </div>
+              <div>
+                <Label className="text-[10px]">취소 버튼 텍스트</Label>
+                <Input
+                  value={config.modal.cancelButtonText || "취소"}
+                  onChange={(e) => updateModalConfig({ cancelButtonText: e.target.value })}
+                  className="h-7 text-xs mt-1"
+                />
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+
+        {/* 저장 설정 */}
+        <Accordion type="single" collapsible defaultValue="save-settings">
+          <AccordionItem value="save-settings" className="border rounded-lg">
+            <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
+              <div className="flex items-center gap-2">
+                <Database className="h-3.5 w-3.5" />
+                저장 설정
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-3 pb-3 space-y-3">
+              {/* 저장 테이블 - Combobox */}
+              <div>
+                <Label className="text-[10px]">저장 테이블</Label>
+                <Popover open={tableSelectOpen} onOpenChange={setTableSelectOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={tableSelectOpen}
+                      className="w-full h-7 justify-between text-xs mt-1"
+                    >
+                      {config.saveConfig.tableName
+                        ? tables.find((t) => t.name === config.saveConfig.tableName)?.label ||
+                          config.saveConfig.tableName
+                        : "테이블 선택 또는 직접 입력"}
+                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                    <Command>
+                      <CommandInput placeholder="테이블 검색..." className="text-xs h-8" />
+                      <CommandList>
+                        <CommandEmpty className="text-xs py-2 text-center">테이블을 찾을 수 없습니다</CommandEmpty>
+                        <CommandGroup>
+                          {tables.map((t) => (
+                            <CommandItem
+                              key={t.name}
+                              value={`${t.name} ${t.label}`}
+                              onSelect={() => {
+                                updateSaveConfig({ tableName: t.name });
+                                setTableSelectOpen(false);
+                              }}
+                              className="text-xs"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-3 w-3",
+                                  config.saveConfig.tableName === t.name ? "opacity-100" : "opacity-0",
+                                )}
+                              />
+                              <span className="font-medium">{t.name}</span>
+                              {t.label !== t.name && (
+                                <span className="ml-1 text-muted-foreground">({t.label})</span>
+                              )}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                {config.saveConfig.tableName && (
+                  <p className="text-[10px] text-muted-foreground mt-1">
+                    컬럼 {currentColumns.length}개 로드됨
+                  </p>
+                )}
+              </div>
+
+              {/* 다중 행 저장 설정 */}
+              <div className="border rounded-md p-2 space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px] font-medium">다중 행 저장</span>
+                  <Switch
+                    checked={config.saveConfig.multiRowSave?.enabled || false}
+                    onCheckedChange={(checked) =>
+                      updateSaveConfig({
+                        multiRowSave: { ...config.saveConfig.multiRowSave, enabled: checked },
+                      })
+                    }
+                  />
+                </div>
+                <HelpText>겸직처럼 하나의 폼에서 여러 행을 저장할 때 사용합니다.</HelpText>
+
+                {config.saveConfig.multiRowSave?.enabled && (
+                  <div className="space-y-2 pt-2 border-t">
+                    <div>
+                      <Label className="text-[10px]">구분 컬럼</Label>
+                      <Input
+                        value={config.saveConfig.multiRowSave?.typeColumn || "employment_type"}
+                        onChange={(e) =>
+                          updateSaveConfig({
+                            multiRowSave: { ...config.saveConfig.multiRowSave, typeColumn: e.target.value },
+                          })
+                        }
+                        placeholder="employment_type"
+                        className="h-6 text-[10px] mt-1"
+                      />
+                      <HelpText>메인/서브를 구분하는 컬럼명</HelpText>
+                    </div>
+                    <div>
+                      <Label className="text-[10px]">메인 값</Label>
+                      <Input
+                        value={config.saveConfig.multiRowSave?.mainTypeValue || "main"}
+                        onChange={(e) =>
+                          updateSaveConfig({
+                            multiRowSave: { ...config.saveConfig.multiRowSave, mainTypeValue: e.target.value },
+                          })
+                        }
+                        className="h-6 text-[10px] mt-1"
+                      />
+                    </div>
+                    <div>
+                      <Label className="text-[10px]">서브 값</Label>
+                      <Input
+                        value={config.saveConfig.multiRowSave?.subTypeValue || "concurrent"}
+                        onChange={(e) =>
+                          updateSaveConfig({
+                            multiRowSave: { ...config.saveConfig.multiRowSave, subTypeValue: e.target.value },
+                          })
+                        }
+                        className="h-6 text-[10px] mt-1"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* 저장 후 동작 */}
+              <div className="space-y-2">
+                <Label className="text-[10px] font-medium">저장 후 동작</Label>
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">모달 닫기</span>
+                  <Switch
+                    checked={config.saveConfig.afterSave?.closeModal !== false}
+                    onCheckedChange={(checked) =>
+                      updateSaveConfig({
+                        afterSave: { ...config.saveConfig.afterSave, closeModal: checked },
+                      })
+                    }
+                  />
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">부모 화면 새로고침</span>
+                  <Switch
+                    checked={config.saveConfig.afterSave?.refreshParent || false}
+                    onCheckedChange={(checked) =>
+                      updateSaveConfig({
+                        afterSave: { ...config.saveConfig.afterSave, refreshParent: checked },
+                      })
+                    }
+                  />
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">토스트 메시지 표시</span>
+                  <Switch
+                    checked={config.saveConfig.afterSave?.showToast !== false}
+                    onCheckedChange={(checked) =>
+                      updateSaveConfig({
+                        afterSave: { ...config.saveConfig.afterSave, showToast: checked },
+                      })
+                    }
+                  />
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+
+        {/* 섹션 관리 */}
+        <Accordion type="single" collapsible defaultValue="sections">
+          <AccordionItem value="sections" className="border rounded-lg">
+            <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
+              <div className="flex items-center gap-2">
+                <Settings className="h-3.5 w-3.5" />
+                섹션 관리 ({config.sections.length})
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-3 pb-3 space-y-2">
+              <Button onClick={addSection} variant="outline" size="sm" className="w-full h-7 text-xs">
+                <Plus className="h-3 w-3 mr-1" />
+                섹션 추가
+              </Button>
+
+              {config.sections.map((section, sectionIndex) => (
+                <Card
+                  key={section.id}
+                  className={cn(
+                    "cursor-pointer transition-colors",
+                    selectedSectionId === section.id && "ring-2 ring-primary",
+                  )}
+                  onClick={() => {
+                    setSelectedSectionId(section.id);
+                    setSelectedFieldId(null);
+                  }}
+                >
+                  <CardHeader className="p-2">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1">
+                        <GripVertical className="h-3 w-3 text-muted-foreground" />
+                        <CardTitle className="text-xs">{section.title}</CardTitle>
+                        {section.repeatable && (
+                          <span className="text-[9px] bg-blue-100 text-blue-700 px-1 rounded">반복</span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-0.5">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-5 w-5"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            moveSectionUp(sectionIndex);
+                          }}
+                          disabled={sectionIndex === 0}
+                        >
+                          <ChevronUp className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-5 w-5"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            moveSectionDown(sectionIndex);
+                          }}
+                          disabled={sectionIndex === config.sections.length - 1}
+                        >
+                          <ChevronDown className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-5 w-5 text-destructive"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            removeSection(section.id);
+                          }}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                    <CardDescription className="text-[10px]">필드 {section.fields.length}개</CardDescription>
+                  </CardHeader>
+                </Card>
+              ))}
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+
+        {/* 선택된 섹션 설정 */}
+        {selectedSection && (
+          <Accordion type="single" collapsible defaultValue="section-detail">
+            <AccordionItem value="section-detail" className="border rounded-lg border-primary/50">
+              <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
+                <div className="flex items-center gap-2">
+                  <Layout className="h-3.5 w-3.5 text-primary" />
+                  섹션: {selectedSection.title}
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="px-3 pb-3 space-y-3">
+                <div>
+                  <Label className="text-[10px]">섹션 제목</Label>
+                  <Input
+                    value={selectedSection.title}
+                    onChange={(e) => updateSection(selectedSection.id, { title: e.target.value })}
+                    className="h-7 text-xs mt-1"
+                  />
+                </div>
+
+                <div>
+                  <Label className="text-[10px]">섹션 설명</Label>
+                  <Textarea
+                    value={selectedSection.description || ""}
+                    onChange={(e) => updateSection(selectedSection.id, { description: e.target.value })}
+                    className="text-xs mt-1 min-h-[50px]"
+                    placeholder="섹션에 대한 설명 (선택)"
+                  />
+                </div>
+
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">접을 수 있음</span>
+                  <Switch
+                    checked={selectedSection.collapsible || false}
+                    onCheckedChange={(checked) => updateSection(selectedSection.id, { collapsible: checked })}
+                  />
+                </div>
+
+                <div className="border rounded-md p-2 space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] font-medium">반복 섹션</span>
+                    <Switch
+                      checked={selectedSection.repeatable || false}
+                      onCheckedChange={(checked) => updateSection(selectedSection.id, { repeatable: checked })}
+                    />
+                  </div>
+                  <HelpText>겸직처럼 동일한 필드 그룹을 여러 개 추가할 수 있습니다.</HelpText>
+
+                  {selectedSection.repeatable && (
+                    <div className="space-y-2 pt-2 border-t">
+                      <div>
+                        <Label className="text-[10px]">최소 개수</Label>
+                        <Input
+                          type="number"
+                          value={selectedSection.repeatConfig?.minItems || 0}
+                          onChange={(e) =>
+                            updateSection(selectedSection.id, {
+                              repeatConfig: {
+                                ...selectedSection.repeatConfig,
+                                minItems: parseInt(e.target.value) || 0,
+                              },
+                            })
+                          }
+                          className="h-6 text-[10px] mt-1"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[10px]">최대 개수</Label>
+                        <Input
+                          type="number"
+                          value={selectedSection.repeatConfig?.maxItems || 10}
+                          onChange={(e) =>
+                            updateSection(selectedSection.id, {
+                              repeatConfig: {
+                                ...selectedSection.repeatConfig,
+                                maxItems: parseInt(e.target.value) || 10,
+                              },
+                            })
+                          }
+                          className="h-6 text-[10px] mt-1"
+                        />
+                      </div>
+                      <div>
+                        <Label className="text-[10px]">추가 버튼 텍스트</Label>
+                        <Input
+                          value={selectedSection.repeatConfig?.addButtonText || "+ 추가"}
+                          onChange={(e) =>
+                            updateSection(selectedSection.id, {
+                              repeatConfig: {
+                                ...selectedSection.repeatConfig,
+                                addButtonText: e.target.value,
+                              },
+                            })
+                          }
+                          className="h-6 text-[10px] mt-1"
+                        />
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <Separator />
+
+                {/* 필드 목록 */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-[10px] font-medium">필드 목록</Label>
+                    <Button
+                      onClick={() => addField(selectedSection.id)}
+                      variant="outline"
+                      size="sm"
+                      className="h-6 text-[10px]"
+                    >
+                      <Plus className="h-3 w-3 mr-1" />
+                      필드 추가
+                    </Button>
+                  </div>
+
+                  {selectedSection.fields.length === 0 ? (
+                    <p className="text-[10px] text-muted-foreground text-center py-2">필드가 없습니다</p>
+                  ) : (
+                    <div className="space-y-1">
+                      {selectedSection.fields.map((field) => (
+                        <div
+                          key={field.id}
+                          className={cn(
+                            "flex items-center justify-between p-1.5 rounded border cursor-pointer hover:bg-accent/50",
+                            selectedFieldId === field.id && "bg-accent ring-1 ring-primary",
+                          )}
+                          onClick={() => setSelectedFieldId(field.id)}
+                        >
+                          <div className="flex items-center gap-1.5">
+                            <GripVertical className="h-3 w-3 text-muted-foreground" />
+                            <span className="text-[10px] font-medium">{field.label}</span>
+                            {field.columnName && (
+                              <span className="text-[9px] text-muted-foreground">({field.columnName})</span>
+                            )}
+                            {field.required && <span className="text-[9px] text-destructive">*</span>}
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-5 w-5 text-destructive"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              removeField(selectedSection.id, field.id);
+                            }}
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        )}
+
+        {/* 선택된 필드 설정 */}
+        {selectedSection && selectedField && (
+          <Accordion type="single" collapsible defaultValue="field-detail">
+            <AccordionItem value="field-detail" className="border rounded-lg border-blue-500/50">
+              <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline">
+                <div className="flex items-center gap-2">
+                  <Hash className="h-3.5 w-3.5 text-blue-500" />
+                  필드: {selectedField.label}
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="px-3 pb-3 space-y-3">
+                {/* 기본 정보 */}
+                <div>
+                  <Label className="text-[10px]">라벨</Label>
+                  <Input
+                    value={selectedField.label}
+                    onChange={(e) => updateField(selectedSection.id, selectedField.id, { label: e.target.value })}
+                    className="h-7 text-xs mt-1"
+                  />
+                </div>
+                <div>
+                  <Label className="text-[10px]">컬럼명</Label>
+                  {currentColumns.length > 0 ? (
+                    <Select
+                      value={selectedField.columnName}
+                      onValueChange={(value) =>
+                        updateField(selectedSection.id, selectedField.id, { columnName: value })
+                      }
+                    >
+                      <SelectTrigger className="h-7 text-xs mt-1">
+                        <SelectValue placeholder="컬럼 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {currentColumns.map((col) => (
+                          <SelectItem key={col.name} value={col.name}>
+                            {col.name}
+                            {col.label !== col.name && ` (${col.label})`}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ) : (
+                    <Input
+                      value={selectedField.columnName}
+                      onChange={(e) =>
+                        updateField(selectedSection.id, selectedField.id, { columnName: e.target.value })
+                      }
+                      placeholder="테이블을 먼저 선택하세요"
+                      className="h-7 text-xs mt-1"
+                    />
+                  )}
+                </div>
+
+                <div>
+                  <Label className="text-[10px]">필드 타입</Label>
+                  <Select
+                    value={selectedField.fieldType}
+                    onValueChange={(value) =>
+                      updateField(selectedSection.id, selectedField.id, {
+                        fieldType: value as FormFieldConfig["fieldType"],
+                      })
+                    }
+                  >
+                    <SelectTrigger className="h-7 text-xs mt-1">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {FIELD_TYPE_OPTIONS.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <Label className="text-[10px]">그리드 너비</Label>
+                  <Select
+                    value={String(selectedField.gridSpan || 6)}
+                    onValueChange={(value) =>
+                      updateField(selectedSection.id, selectedField.id, { gridSpan: parseInt(value) })
+                    }
+                  >
+                    <SelectTrigger className="h-7 text-xs mt-1">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="3">1/4 너비</SelectItem>
+                      <SelectItem value="4">1/3 너비</SelectItem>
+                      <SelectItem value="6">1/2 너비</SelectItem>
+                      <SelectItem value="8">2/3 너비</SelectItem>
+                      <SelectItem value="12">전체 너비</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <HelpText>12칸 그리드 기준입니다.</HelpText>
+                </div>
+
+                <div>
+                  <Label className="text-[10px]">플레이스홀더</Label>
+                  <Input
+                    value={selectedField.placeholder || ""}
+                    onChange={(e) =>
+                      updateField(selectedSection.id, selectedField.id, { placeholder: e.target.value })
+                    }
+                    placeholder="입력 힌트"
+                    className="h-7 text-xs mt-1"
+                  />
+                </div>
+
+                <Separator />
+
+                {/* 옵션 토글 */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px]">필수 입력</span>
+                    <Switch
+                      checked={selectedField.required || false}
+                      onCheckedChange={(checked) =>
+                        updateField(selectedSection.id, selectedField.id, { required: checked })
+                      }
+                    />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px]">비활성화 (읽기전용)</span>
+                    <Switch
+                      checked={selectedField.disabled || false}
+                      onCheckedChange={(checked) =>
+                        updateField(selectedSection.id, selectedField.id, { disabled: checked })
+                      }
+                    />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px]">숨김 (자동 저장만)</span>
+                    <Switch
+                      checked={selectedField.hidden || false}
+                      onCheckedChange={(checked) =>
+                        updateField(selectedSection.id, selectedField.id, { hidden: checked })
+                      }
+                    />
+                  </div>
+                  <HelpText>숨김 필드는 화면에 표시되지 않지만 값이 저장됩니다.</HelpText>
+
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px]">부모에서 값 받기</span>
+                    <Switch
+                      checked={selectedField.receiveFromParent || false}
+                      onCheckedChange={(checked) =>
+                        updateField(selectedSection.id, selectedField.id, { receiveFromParent: checked })
+                      }
+                    />
+                  </div>
+                  <HelpText>부모 화면에서 전달받은 값으로 자동 채워집니다.</HelpText>
+                </div>
+
+                <Separator />
+
+                {/* 채번규칙 설정 */}
+                <div className="border rounded-md p-2 space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] font-medium">채번규칙 사용</span>
+                    <Switch
+                      checked={selectedField.numberingRule?.enabled || false}
+                      onCheckedChange={(checked) =>
+                        updateField(selectedSection.id, selectedField.id, {
+                          numberingRule: {
+                            ...selectedField.numberingRule,
+                            enabled: checked,
+                          },
+                        })
+                      }
+                    />
+                  </div>
+                  <HelpText>자동으로 코드/번호를 생성합니다. (예: EMP-001)</HelpText>
+
+                  {selectedField.numberingRule?.enabled && (
+                    <div className="space-y-2 pt-2 border-t">
+                      <Select
+                        value={selectedField.numberingRule?.ruleId || ""}
+                        onValueChange={(value) =>
+                          updateField(selectedSection.id, selectedField.id, {
+                            numberingRule: {
+                              ...selectedField.numberingRule,
+                              ruleId: value,
+                            },
+                          })
+                        }
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="규칙 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {numberingRules.length === 0 ? (
+                            <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                              등록된 채번규칙이 없습니다
+                            </div>
+                          ) : (
+                            numberingRules.map((rule) => (
+                              <SelectItem key={rule.id} value={rule.id}>
+                                {rule.name}
+                              </SelectItem>
+                            ))
+                          )}
+                        </SelectContent>
+                      </Select>
+
+                      <div className="flex items-center justify-between">
+                        <span className="text-[10px]">사용자 수정 가능</span>
+                        <Switch
+                          checked={selectedField.numberingRule?.editable || false}
+                          onCheckedChange={(checked) =>
+                            updateField(selectedSection.id, selectedField.id, {
+                              numberingRule: {
+                                ...selectedField.numberingRule,
+                                editable: checked,
+                              },
+                            })
+                          }
+                        />
+                      </div>
+
+                      <div className="flex items-center justify-between">
+                        <span className="text-[10px]">저장 시점에 생성</span>
+                        <Switch
+                          checked={selectedField.numberingRule?.generateOnSave || false}
+                          onCheckedChange={(checked) =>
+                            updateField(selectedSection.id, selectedField.id, {
+                              numberingRule: {
+                                ...selectedField.numberingRule,
+                                generateOnSave: checked,
+                                generateOnOpen: !checked,
+                              },
+                            })
+                          }
+                        />
+                      </div>
+                      <HelpText>OFF: 모달 열릴 때 생성 / ON: 저장 버튼 클릭 시 생성</HelpText>
+                    </div>
+                  )}
+                </div>
+
+                {/* Select 옵션 설정 */}
+                {selectedField.fieldType === "select" && (
+                  <div className="border rounded-md p-2 space-y-2">
+                    <Label className="text-[10px] font-medium">선택 옵션 설정</Label>
+                    <Select
+                      value={selectedField.selectOptions?.type || "static"}
+                      onValueChange={(value) =>
+                        updateField(selectedSection.id, selectedField.id, {
+                          selectOptions: {
+                            ...selectedField.selectOptions,
+                            type: value as "static" | "table" | "code",
+                          },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {SELECT_OPTION_TYPE_OPTIONS.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    {selectedField.selectOptions?.type === "table" && (
+                      <div className="space-y-2 pt-2 border-t">
+                        <div>
+                          <Label className="text-[10px]">참조 테이블</Label>
+                          <Select
+                            value={selectedField.selectOptions?.tableName || ""}
+                            onValueChange={(value) =>
+                              updateField(selectedSection.id, selectedField.id, {
+                                selectOptions: {
+                                  ...selectedField.selectOptions,
+                                  tableName: value,
+                                },
+                              })
+                            }
+                          >
+                            <SelectTrigger className="h-6 text-[10px] mt-1">
+                              <SelectValue placeholder="테이블 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {tables.map((t) => (
+                                <SelectItem key={t.name} value={t.name}>
+                                  {t.label || t.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div>
+                          <Label className="text-[10px]">값 컬럼</Label>
+                          <Input
+                            value={selectedField.selectOptions?.valueColumn || ""}
+                            onChange={(e) =>
+                              updateField(selectedSection.id, selectedField.id, {
+                                selectOptions: {
+                                  ...selectedField.selectOptions,
+                                  valueColumn: e.target.value,
+                                },
+                              })
+                            }
+                            placeholder="code"
+                            className="h-6 text-[10px] mt-1"
+                          />
+                        </div>
+                        <div>
+                          <Label className="text-[10px]">라벨 컬럼</Label>
+                          <Input
+                            value={selectedField.selectOptions?.labelColumn || ""}
+                            onChange={(e) =>
+                              updateField(selectedSection.id, selectedField.id, {
+                                selectOptions: {
+                                  ...selectedField.selectOptions,
+                                  labelColumn: e.target.value,
+                                },
+                              })
+                            }
+                            placeholder="name"
+                            className="h-6 text-[10px] mt-1"
+                          />
+                        </div>
+                      </div>
+                    )}
+
+                    {selectedField.selectOptions?.type === "code" && (
+                      <div className="pt-2 border-t">
+                        <Label className="text-[10px]">공통코드 카테고리</Label>
+                        <Input
+                          value={selectedField.selectOptions?.codeCategory || ""}
+                          onChange={(e) =>
+                            updateField(selectedSection.id, selectedField.id, {
+                              selectOptions: {
+                                ...selectedField.selectOptions,
+                                codeCategory: e.target.value,
+                              },
+                            })
+                          }
+                          placeholder="POSITION_CODE"
+                          className="h-6 text-[10px] mt-1"
+                        />
+                      </div>
+                    )}
+                  </div>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}
+
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalRenderer.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalRenderer.tsx
new file mode 100644
index 00000000..f342db37
--- /dev/null
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalRenderer.tsx
@@ -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();
diff --git a/frontend/lib/registry/components/universal-form-modal/config.ts b/frontend/lib/registry/components/universal-form-modal/config.ts
new file mode 100644
index 00000000..9da7b46c
--- /dev/null
+++ b/frontend/lib/registry/components/universal-form-modal/config.ts
@@ -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");
+};
diff --git a/frontend/lib/registry/components/universal-form-modal/index.ts b/frontend/lib/registry/components/universal-form-modal/index.ts
new file mode 100644
index 00000000..f98bf438
--- /dev/null
+++ b/frontend/lib/registry/components/universal-form-modal/index.ts
@@ -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";
diff --git a/frontend/lib/registry/components/universal-form-modal/types.ts b/frontend/lib/registry/components/universal-form-modal/types.ts
new file mode 100644
index 00000000..e8d2ffd6
--- /dev/null
+++ b/frontend/lib/registry/components/universal-form-modal/types.ts
@@ -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;