Merge branch 'ksh'

- generateNumberingValues 중복 호출 방지 (ref 플래그 추가)
- generateOnOpen 시 allocateCode 직접 호출로 변경
- config 변경 시 initializeForm 재호출 비활성화
- cleanup 함수에서 플래그 초기화 추가
- 저장 시점 채번 로직 간소화 (generateOnSave만 처리)

backend-node/src/services/numberingRuleService.ts

@@ -898,9 +898,10 @@ class NumberingRuleService {
 
         switch (part.partType) {
           case "sequence": {
-            // 순번 (현재 순번으로 미리보기, 증가 안 함)
+            // 순번 (다음 할당될 순번으로 미리보기, 실제 증가는 allocate 시)
             const length = autoConfig.sequenceLength || 3;
-            return String(rule.currentSequence || 1).padStart(length, "0");
+            const nextSequence = (rule.currentSequence || 0) + 1;
+            return String(nextSequence).padStart(length, "0");
           }
 
           case "number": {

frontend/components/screen/EditModal.tsx

@@ -176,7 +176,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         loadGroupData();
       }
     }
-  }, [modalState.isOpen, modalState.screenId]);
+  }, [modalState.isOpen, modalState.screenId, modalState.groupByColumns, modalState.tableName]);
 
   // 🆕 그룹 데이터 조회 함수
   const loadGroupData = async () => {
@@ -225,7 +225,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
       const dataArray = Array.isArray(response) ? response : response?.data || [];
 
       if (dataArray.length > 0) {
-        console.log("✅ 그룹 데이터 조회 성공:", dataArray);
+        console.log("✅ 그룹 데이터 조회 성공:", dataArray.length, "건");
         setGroupData(dataArray);
         setOriginalGroupData(JSON.parse(JSON.stringify(dataArray))); // Deep copy
         toast.info(`${dataArray.length}개의 관련 품목을 불러왔습니다.`);
@@ -751,15 +751,8 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                   },
                 };
 
-                // 🔍 디버깅: 컴포넌트 렌더링 시점의 groupData 확인
-                if (component.id === screenData.components[0]?.id) {
-                  console.log("🔍 [EditModal] InteractiveScreenViewerDynamic props:", {
-                    componentId: component.id,
-                    groupDataLength: groupData.length,
-                    groupData: groupData,
-                    formData: groupData.length > 0 ? groupData[0] : formData,
-                  });
-                }
+
+                const groupedDataProp = groupData.length > 0 ? groupData : undefined;
 
                 // 🔑 첨부파일 컴포넌트가 행(레코드) 단위로 파일을 저장할 수 있도록 tableName 추가
                 const enrichedFormData = {
@@ -811,7 +804,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                     onSave={handleSave}
                     isInModal={true}
                     // 🆕 그룹 데이터를 ModalRepeaterTable에 전달
-                    groupedData={groupData.length > 0 ? groupData : undefined}
+                    groupedData={groupedDataProp}
                     // 🆕 수정 모달에서 읽기 전용 필드 지정 (수주번호, 거래처)
                     disabledFields={["order_no", "partner_id"]}
                   />

frontend/components/screen/FloatingPanel.tsx

@@ -267,7 +267,7 @@ export const FloatingPanel: React.FC<FloatingPanelProps> = ({
       {/* 컨텐츠 */}
       <div
         ref={contentRef}
-        className={autoHeight ? "flex-1" : "flex-1 overflow-auto"}
+        className={autoHeight ? "flex-1 w-full overflow-hidden" : "flex-1 w-full overflow-y-auto overflow-x-hidden"}
         style={
           autoHeight
             ? {}

frontend/components/screen/panels/DetailSettingsPanel.tsx

@@ -878,7 +878,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
         };
 
         return (
-          <div className="space-y-4" key={selectedComponent.id}>
+          <div className="space-y-4 w-full min-w-0" key={selectedComponent.id}>
             <div className="flex items-center gap-2 border-b pb-2">
               <Settings className="h-4 w-4 text-primary" />
               <h3 className="text-sm font-semibold">{definition.name} 설정</h3>
@@ -998,7 +998,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
         </div>
 
         {/* 설정 패널 영역 */}
-        <div className="flex-1 overflow-y-auto p-4">{renderComponentConfigPanel()}</div>
+        <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 w-full">{renderComponentConfigPanel()}</div>
       </div>
     );
   }
@@ -1156,8 +1156,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
         </div>
 
         {/* 컴포넌트 설정 패널 */}
-        <div className="flex-1 overflow-y-auto px-6 pb-6">
-          <div className="space-y-6">
+        <div className="flex-1 overflow-y-auto overflow-x-hidden px-6 pb-6 w-full min-w-0">
+          <div className="space-y-6 w-full min-w-0">
             {/* DynamicComponentConfigPanel */}
             <DynamicComponentConfigPanel
               componentId={componentId}
@@ -1396,8 +1396,8 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
       </div>
 
       {/* 상세 설정 영역 */}
-      <div className="flex-1 overflow-y-auto p-4">
-        <div className="space-y-6">
+      <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 w-full min-w-0">
+        <div className="space-y-6 w-full min-w-0">
           {console.log("🔍 [DetailSettingsPanel] widget 타입:", selectedComponent?.type, "autoFill:", widget.autoFill)}
           {/* 🆕 자동 입력 섹션 */}
           <div className="space-y-4 rounded-md border border-red-500 bg-yellow-50 p-4">

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -317,7 +317,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         
         // modal-repeater-table은 배열 데이터를 다루므로 빈 배열로 초기화
         let currentValue;
-        if (componentType === "modal-repeater-table") {
+        if (componentType === "modal-repeater-table" || componentType === "repeat-screen-modal") {
           // EditModal에서 전달된 groupedData가 있으면 우선 사용
           currentValue = props.groupedData || formData?.[fieldName] || [];
         } else {
@@ -449,7 +449,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           // 🆕 그룹 데이터 전달 (EditModal → ConditionalContainer → ModalRepeaterTable)
           // Note: 이 props들은 DOM 요소에 전달되면 안 됨
           // 각 컴포넌트에서 명시적으로 destructure하여 사용해야 함
-          _groupedData: props.groupedData,
+          groupedData: props.groupedData, // ✅ 언더스코어 제거하여 직접 전달
+          _groupedData: props.groupedData, // 하위 호환성 유지
           // 🆕 UniversalFormModal용 initialData 전달
           // originalData를 사용 (최초 전달된 값, formData는 계속 변경되므로 사용하면 안됨)
           _initialData: originalData || formData,

frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx

@@ -36,6 +36,71 @@ export function RepeaterTable({
   
   // 동적 데이터 소스 Popover 열림 상태
   const [openPopover, setOpenPopover] = useState<string | null>(null);
+  
+  // 컬럼 너비 상태 관리
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>(() => {
+    const widths: Record<string, number> = {};
+    columns.forEach((col) => {
+      widths[col.field] = col.width ? parseInt(col.width) : 120;
+    });
+    return widths;
+  });
+  
+  // 기본 너비 저장 (리셋용)
+  const defaultWidths = React.useMemo(() => {
+    const widths: Record<string, number> = {};
+    columns.forEach((col) => {
+      widths[col.field] = col.width ? parseInt(col.width) : 120;
+    });
+    return widths;
+  }, [columns]);
+  
+  // 리사이즈 상태
+  const [resizing, setResizing] = useState<{ field: string; startX: number; startWidth: number } | null>(null);
+  
+  // 리사이즈 핸들러
+  const handleMouseDown = (e: React.MouseEvent, field: string) => {
+    e.preventDefault();
+    setResizing({
+      field,
+      startX: e.clientX,
+      startWidth: columnWidths[field] || 120,
+    });
+  };
+  
+  // 더블클릭으로 기본 너비로 리셋
+  const handleDoubleClick = (field: string) => {
+    setColumnWidths((prev) => ({
+      ...prev,
+      [field]: defaultWidths[field] || 120,
+    }));
+  };
+  
+  useEffect(() => {
+    if (!resizing) return;
+    
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!resizing) return;
+      const diff = e.clientX - resizing.startX;
+      const newWidth = Math.max(60, resizing.startWidth + diff);
+      setColumnWidths((prev) => ({
+        ...prev,
+        [resizing.field]: newWidth,
+      }));
+    };
+    
+    const handleMouseUp = () => {
+      setResizing(null);
+    };
+    
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizing, columns, data]);
 
   // 데이터 변경 감지 (필요시 활성화)
   // useEffect(() => {
@@ -79,7 +144,7 @@ export function RepeaterTable({
             onChange={(e) =>
               handleCellEdit(rowIndex, column.field, parseFloat(e.target.value) || 0)
             }
-            className="h-7 text-xs"
+            className="h-8 text-xs border-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded-none"
           />
         );
 
@@ -107,7 +172,7 @@ export function RepeaterTable({
             type="date"
             value={formatDateValue(value)}
             onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
-            className="h-7 text-xs"
+            className="h-8 text-xs border-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded-none"
           />
         );
 
@@ -119,7 +184,7 @@ export function RepeaterTable({
               handleCellEdit(rowIndex, column.field, newValue)
             }
           >
-            <SelectTrigger className="h-7 text-xs">
+            <SelectTrigger className="h-8 text-xs border-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded-none">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -138,19 +203,19 @@ export function RepeaterTable({
             type="text"
             value={value || ""}
             onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
-            className="h-7 text-xs"
+            className="h-8 text-xs border-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded-none"
           />
         );
     }
   };
 
   return (
-    <div className="border rounded-md overflow-hidden bg-background">
-      <div className="overflow-x-auto max-h-[240px] overflow-y-auto">
-        <table className="w-full text-xs sm:text-sm">
-          <thead className="bg-muted sticky top-0 z-10">
+    <div className="border border-gray-200 bg-white">
+      <div className="overflow-x-auto max-h-[400px] overflow-y-auto">
+        <table className="w-full text-xs border-collapse">
+          <thead className="bg-gray-50 sticky top-0 z-10">
             <tr>
-              <th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
+              <th className="px-3 py-2 text-left font-medium text-gray-700 border-b border-r border-gray-200 w-12">
                 #
               </th>
               {columns.map((col) => {
@@ -163,101 +228,113 @@ export function RepeaterTable({
                 return (
                 <th
                   key={col.field}
-                  className="px-4 py-2 text-left font-medium text-muted-foreground"
-                  style={{ width: col.width }}
+                  className="px-3 py-2 text-left font-medium text-gray-700 border-b border-r border-gray-200 relative group cursor-pointer select-none"
+                  style={{ width: `${columnWidths[col.field]}px` }}
+                  onDoubleClick={() => handleDoubleClick(col.field)}
+                  title="더블클릭하여 기본 너비로 되돌리기"
                 >
-                    {hasDynamicSource ? (
-                      <Popover 
-                        open={openPopover === col.field} 
-                        onOpenChange={(open) => setOpenPopover(open ? col.field : null)}
-                      >
-                        <PopoverTrigger asChild>
-                          <button
-                            type="button"
-                            className={cn(
-                              "inline-flex items-center gap-1 hover:text-primary transition-colors",
-                              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded px-1 -mx-1"
-                            )}
+                    <div className="flex items-center justify-between pointer-events-none">
+                      <div className="flex items-center gap-1 pointer-events-auto">
+                        {hasDynamicSource ? (
+                          <Popover 
+                            open={openPopover === col.field} 
+                            onOpenChange={(open) => setOpenPopover(open ? col.field : null)}
                           >
-                            <span>{col.label}</span>
-                            <ChevronDown className="h-3 w-3 opacity-60" />
-                          </button>
-                        </PopoverTrigger>
-                        <PopoverContent 
-                          className="w-auto min-w-[160px] p-1" 
-                          align="start"
-                          sideOffset={4}
-                        >
-                          <div className="text-[10px] text-muted-foreground px-2 py-1 border-b mb-1">
-                            데이터 소스 선택
-                          </div>
-                          {col.dynamicDataSource!.options.map((option) => (
-                            <button
-                              key={option.id}
-                              type="button"
-                              onClick={() => {
-                                onDataSourceChange?.(col.field, option.id);
-                                setOpenPopover(null);
-                              }}
-                              className={cn(
-                                "w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm",
-                                "hover:bg-accent hover:text-accent-foreground transition-colors",
-                                "focus:outline-none focus-visible:bg-accent",
-                                activeOption?.id === option.id && "bg-accent/50"
-                              )}
-                            >
-                              <Check 
+                            <PopoverTrigger asChild>
+                              <button
+                                type="button"
                                 className={cn(
-                                  "h-3 w-3",
-                                  activeOption?.id === option.id ? "opacity-100" : "opacity-0"
-                                )} 
-                              />
-                              <span>{option.label}</span>
-                            </button>
-                          ))}
-                        </PopoverContent>
-                      </Popover>
-                    ) : (
-                      <>
-                  {col.label}
-                  {col.required && <span className="text-destructive ml-1">*</span>}
-                      </>
-                    )}
-                </th>
+                                  "inline-flex items-center gap-1 hover:text-blue-600 transition-colors",
+                                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded px-1 -mx-1"
+                                )}
+                              >
+                                <span>{col.label}</span>
+                                <ChevronDown className="h-3 w-3 opacity-60" />
+                              </button>
+                            </PopoverTrigger>
+                            <PopoverContent 
+                              className="w-auto min-w-[160px] p-1" 
+                              align="start"
+                              sideOffset={4}
+                            >
+                              <div className="text-[10px] text-muted-foreground px-2 py-1 border-b mb-1">
+                                데이터 소스 선택
+                              </div>
+                              {col.dynamicDataSource!.options.map((option) => (
+                                <button
+                                  key={option.id}
+                                  type="button"
+                                  onClick={() => {
+                                    onDataSourceChange?.(col.field, option.id);
+                                    setOpenPopover(null);
+                                  }}
+                                  className={cn(
+                                    "w-full flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm",
+                                    "hover:bg-accent hover:text-accent-foreground transition-colors",
+                                    "focus:outline-none focus-visible:bg-accent",
+                                    activeOption?.id === option.id && "bg-accent/50"
+                                  )}
+                                >
+                                  <Check 
+                                    className={cn(
+                                      "h-3 w-3",
+                                      activeOption?.id === option.id ? "opacity-100" : "opacity-0"
+                                    )} 
+                                  />
+                                  <span>{option.label}</span>
+                                </button>
+                              ))}
+                            </PopoverContent>
+                          </Popover>
+                        ) : (
+                          <>
+                            {col.label}
+                            {col.required && <span className="text-red-500 ml-1">*</span>}
+                          </>
+                        )}
+                      </div>
+                      {/* 리사이즈 핸들 */}
+                      <div
+                        className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-blue-500 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-auto"
+                        onMouseDown={(e) => handleMouseDown(e, col.field)}
+                        title="드래그하여 너비 조정"
+                      />
+                    </div>
+                  </th>
                 );
               })}
-              <th className="px-4 py-2 text-left font-medium text-muted-foreground w-20">
+              <th className="px-3 py-2 text-left font-medium text-gray-700 border-b border-r border-gray-200 w-20">
                 삭제
               </th>
             </tr>
           </thead>
-          <tbody className="bg-background">
+          <tbody className="bg-white">
             {data.length === 0 ? (
               <tr>
                 <td
                   colSpan={columns.length + 2}
-                  className="px-4 py-8 text-center text-muted-foreground"
+                  className="px-4 py-8 text-center text-gray-500 border-b border-gray-200"
                 >
                   추가된 항목이 없습니다
                 </td>
               </tr>
             ) : (
               data.map((row, rowIndex) => (
-                <tr key={rowIndex} className="border-t hover:bg-accent/50">
-                  <td className="px-4 py-2 text-center text-muted-foreground">
+                <tr key={rowIndex} className="hover:bg-blue-50/50 transition-colors">
+                  <td className="px-3 py-1 text-center text-gray-600 border-b border-r border-gray-200">
                     {rowIndex + 1}
                   </td>
                   {columns.map((col) => (
-                    <td key={col.field} className="px-2 py-1">
+                    <td key={col.field} className="px-1 py-1 border-b border-r border-gray-200">
                       {renderCell(row, col, rowIndex)}
                     </td>
                   ))}
-                  <td className="px-4 py-2 text-center">
+                  <td className="px-3 py-1 text-center border-b border-r border-gray-200">
                     <Button
                       variant="ghost"
                       size="sm"
                       onClick={() => onRowDelete(rowIndex)}
-                      className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                      className="h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>

frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx

@@ -2517,7 +2517,7 @@ function LayoutRowConfigModal({
               </div>
 
               {/* 외부 데이터 소스 설정 */}
-              <div className="border rounded p-3 bg-blue-50 space-y-2">
+              <div className="border rounded p-3 bg-blue-50 space-y-3">
                 <div className="flex items-center justify-between">
                   <Label className="text-xs font-semibold">외부 데이터 소스</Label>
                   <Switch
@@ -2529,28 +2529,234 @@ function LayoutRowConfigModal({
                   />
                 </div>
                 {row.tableDataSource?.enabled && (
-                  <div className="grid grid-cols-2 gap-2">
+                  <>
                     <div className="space-y-1">
                       <Label className="text-[10px]">소스 테이블</Label>
-                      <Select
+                      <TableSelector
                         value={row.tableDataSource?.sourceTable || ""}
-                        onValueChange={(value) => onUpdateRow({
+                        onChange={(value) => onUpdateRow({
                           tableDataSource: { ...row.tableDataSource!, sourceTable: value }
                         })}
-                      >
-                        <SelectTrigger className="h-7 text-[10px]">
-                          <SelectValue placeholder="테이블 선택" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {allTables.map((table) => (
-                            <SelectItem key={table.tableName} value={table.tableName}>
-                              {table.displayName || table.tableName}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
+                      />
                     </div>
-                  </div>
+
+                    {/* 조인 조건 설정 */}
+                    <div className="space-y-2 pt-2 border-t border-blue-200">
+                      <div className="space-y-1">
+                        <Label className="text-[10px] font-semibold">조인 조건</Label>
+                        <p className="text-[9px] text-muted-foreground">
+                          두 테이블을 연결하는 키를 설정합니다
+                        </p>
+                      </div>
+                      {(row.tableDataSource?.joinConditions || []).map((condition, conditionIndex) => (
+                        <div key={`join-${conditionIndex}`} className="space-y-2 p-2 border rounded bg-white">
+                          <div className="flex items-center justify-between">
+                            <span className="text-[9px] font-medium">조인 {conditionIndex + 1}</span>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => {
+                                const newConditions = [...(row.tableDataSource?.joinConditions || [])];
+                                newConditions.splice(conditionIndex, 1);
+                                onUpdateRow({
+                                  tableDataSource: { ...row.tableDataSource!, joinConditions: newConditions }
+                                });
+                              }}
+                              className="h-5 w-5 p-0"
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+
+                          <div className="grid grid-cols-2 gap-2">
+                            <div className="space-y-1">
+                              <Label className="text-[9px]">조인 키 (소스)</Label>
+                              <SourceColumnSelector
+                                sourceTable={row.tableDataSource?.sourceTable || ""}
+                                value={condition.sourceKey}
+                                onChange={(value) => {
+                                  const newConditions = [...(row.tableDataSource?.joinConditions || [])];
+                                  newConditions[conditionIndex] = { ...condition, sourceKey: value };
+                                  onUpdateRow({
+                                    tableDataSource: { ...row.tableDataSource!, joinConditions: newConditions }
+                                  });
+                                }}
+                                placeholder="예: sales_order_id"
+                              />
+                              <p className="text-[8px] text-muted-foreground">
+                                외부 테이블의 컬럼
+                              </p>
+                            </div>
+
+                            <div className="space-y-1">
+                              <Label className="text-[9px]">조인 키 (대상)</Label>
+                              <SourceColumnSelector
+                                sourceTable={dataSourceTable || ""}
+                                value={condition.referenceKey}
+                                onChange={(value) => {
+                                  const newConditions = [...(row.tableDataSource?.joinConditions || [])];
+                                  newConditions[conditionIndex] = { ...condition, referenceKey: value };
+                                  onUpdateRow({
+                                    tableDataSource: { ...row.tableDataSource!, joinConditions: newConditions }
+                                  });
+                                }}
+                                placeholder="예: id"
+                              />
+                              <p className="text-[8px] text-muted-foreground">
+                                메인 테이블의 컬럼
+                              </p>
+                            </div>
+                          </div>
+
+                          <div className="mt-1 p-1.5 bg-blue-50 rounded border border-blue-100">
+                            <p className="text-[8px] text-blue-700 font-mono">
+                              {row.tableDataSource?.sourceTable}.{condition.sourceKey} = {dataSourceTable}.{condition.referenceKey}
+                            </p>
+                            <p className="text-[8px] text-muted-foreground mt-0.5">
+                              외부 테이블에서 메인 테이블의 값과 일치하는 데이터를 가져옵니다
+                            </p>
+                          </div>
+                        </div>
+                      ))}
+
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => {
+                          const newConditions = [
+                            ...(row.tableDataSource?.joinConditions || []),
+                            { sourceKey: "", referenceKey: "", referenceType: "card" as const },
+                          ];
+                          onUpdateRow({
+                            tableDataSource: { ...row.tableDataSource!, joinConditions: newConditions }
+                          });
+                        }}
+                        className="w-full h-7 text-[9px]"
+                      >
+                        <Plus className="h-3 w-3 mr-1" />
+                        조인 조건 추가
+                      </Button>
+                    </div>
+
+                    {/* 필터 설정 */}
+                    <div className="space-y-2 pt-2 border-t border-blue-200">
+                      <div className="flex items-center justify-between">
+                        <div className="space-y-1">
+                          <Label className="text-[10px] font-semibold">데이터 필터</Label>
+                          <p className="text-[9px] text-muted-foreground">
+                            특정 조건으로 데이터를 제외합니다
+                          </p>
+                        </div>
+                        <Switch
+                          checked={row.tableDataSource?.filterConfig?.enabled || false}
+                          onCheckedChange={(checked) => {
+                            onUpdateRow({
+                              tableDataSource: {
+                                ...row.tableDataSource!,
+                                filterConfig: {
+                                  enabled: checked,
+                                  filterField: "",
+                                  filterType: "notEquals",
+                                  referenceField: "",
+                                  referenceSource: "representativeData",
+                                },
+                              },
+                            });
+                          }}
+                          className="scale-75"
+                        />
+                      </div>
+
+                      {row.tableDataSource?.filterConfig?.enabled && (
+                        <div className="space-y-2 p-2 bg-amber-50 rounded border border-amber-200">
+                          <div className="grid grid-cols-2 gap-2">
+                            <div className="space-y-1">
+                              <Label className="text-[9px]">필터 필드</Label>
+                              <SourceColumnSelector
+                                sourceTable={row.tableDataSource?.sourceTable || ""}
+                                value={row.tableDataSource?.filterConfig?.filterField || ""}
+                                onChange={(value) => {
+                                  onUpdateRow({
+                                    tableDataSource: {
+                                      ...row.tableDataSource!,
+                                      filterConfig: {
+                                        ...row.tableDataSource!.filterConfig!,
+                                        filterField: value,
+                                      },
+                                    },
+                                  });
+                                }}
+                                placeholder="예: order_no"
+                              />
+                              <p className="text-[8px] text-muted-foreground">
+                                외부 테이블에서 비교할 컬럼
+                              </p>
+                            </div>
+
+                            <div className="space-y-1">
+                              <Label className="text-[9px]">비교 필드</Label>
+                              <SourceColumnSelector
+                                sourceTable={dataSourceTable || ""}
+                                value={row.tableDataSource?.filterConfig?.referenceField || ""}
+                                onChange={(value) => {
+                                  onUpdateRow({
+                                    tableDataSource: {
+                                      ...row.tableDataSource!,
+                                      filterConfig: {
+                                        ...row.tableDataSource!.filterConfig!,
+                                        referenceField: value,
+                                      },
+                                    },
+                                  });
+                                }}
+                                placeholder="예: order_no"
+                              />
+                              <p className="text-[8px] text-muted-foreground">
+                                현재 선택한 행의 컬럼
+                              </p>
+                            </div>
+                          </div>
+
+                          <div className="space-y-1">
+                            <Label className="text-[9px]">필터 조건</Label>
+                            <Select
+                              value={row.tableDataSource?.filterConfig?.filterType || "notEquals"}
+                              onValueChange={(value: "equals" | "notEquals") => {
+                                onUpdateRow({
+                                  tableDataSource: {
+                                    ...row.tableDataSource!,
+                                    filterConfig: {
+                                      ...row.tableDataSource!.filterConfig!,
+                                      filterType: value,
+                                    },
+                                  },
+                                });
+                              }}
+                            >
+                              <SelectTrigger className="h-7 text-[10px]">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="notEquals">같지 않은 값만 (내꺼 제외)</SelectItem>
+                                <SelectItem value="equals">같은 값만 (내꺼만)</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+
+                          <div className="mt-2 p-1.5 bg-amber-100 rounded border border-amber-200">
+                            <p className="text-[8px] text-amber-800 font-mono">
+                              {row.tableDataSource?.sourceTable}.{row.tableDataSource?.filterConfig?.filterField} != 현재행.{row.tableDataSource?.filterConfig?.referenceField}
+                            </p>
+                            <p className="text-[8px] text-muted-foreground mt-0.5">
+                              {row.tableDataSource?.filterConfig?.filterType === "notEquals"
+                                ? "현재 선택한 행과 다른 데이터만 표시합니다"
+                                : "현재 선택한 행과 같은 데이터만 표시합니다"}
+                            </p>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </>
                 )}
               </div>
 

frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx

@@ -216,14 +216,24 @@ export function UniversalFormModalComponent({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // 빈 의존성 배열 - 마운트 시 한 번만 실행
 
-  // config 변경 시에만 재초기화 (initialData 변경은 무시)
+  // config 변경 시에만 재초기화 (initialData 변경은 무시) - 채번규칙 제외
   useEffect(() => {
     if (!hasInitialized.current) return; // 최초 초기화 전이면 스킵
 
-    initializeForm();
+    console.log('[useEffect config 변경] 재초기화 스킵 (채번 중복 방지)');
+    // initializeForm(); // 주석 처리 - config 변경 시 재초기화 안 함 (채번 중복 방지)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config]);
 
+  // 컴포넌트 unmount 시 채번 플래그 초기화
+  useEffect(() => {
+    return () => {
+      console.log('[채번] 컴포넌트 unmount - 플래그 초기화');
+      numberingGeneratedRef.current = false;
+      isGeneratingRef.current = false;
+    };
+  }, []);
+
   // 🆕 beforeFormSave 이벤트 리스너 - ButtonPrimary 저장 시 formData를 전달
   // 설정된 필드(columnName)만 병합하여 의도치 않은 덮어쓰기 방지
   useEffect(() => {
@@ -301,6 +311,8 @@ export function UniversalFormModalComponent({
 
   // 폼 초기화
   const initializeForm = useCallback(async () => {
+    console.log('[initializeForm] 시작');
+    
     // 캡처된 initialData 사용 (props로 전달된 initialData가 아닌)
     const effectiveInitialData = capturedInitialData.current || initialData;
 
@@ -351,7 +363,9 @@ export function UniversalFormModalComponent({
     setOriginalData(effectiveInitialData || {});
 
     // 채번규칙 자동 생성
+    console.log('[initializeForm] generateNumberingValues 호출');
     await generateNumberingValues(newFormData);
+    console.log('[initializeForm] 완료');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config]); // initialData는 의존성에서 제거 (capturedInitialData.current 사용)
 
@@ -369,9 +383,26 @@ export function UniversalFormModalComponent({
     return item;
   };
 
-  // 채번규칙 자동 생성
+  // 채번규칙 자동 생성 (중복 호출 방지)
+  const numberingGeneratedRef = useRef(false);
+  const isGeneratingRef = useRef(false); // 진행 중 플래그 추가
+  
   const generateNumberingValues = useCallback(
     async (currentFormData: FormDataState) => {
+      // 이미 생성되었거나 진행 중이면 스킵
+      if (numberingGeneratedRef.current) {
+        console.log('[채번] 이미 생성됨 - 스킵');
+        return;
+      }
+      
+      if (isGeneratingRef.current) {
+        console.log('[채번] 생성 진행 중 - 스킵');
+        return;
+      }
+      
+      isGeneratingRef.current = true; // 진행 중 표시
+      console.log('[채번] 생성 시작');
+      
       const updatedData = { ...currentFormData };
       let hasChanges = false;
 
@@ -386,10 +417,14 @@ export function UniversalFormModalComponent({
             !updatedData[field.columnName]
           ) {
             try {
-              const response = await generateNumberingCode(field.numberingRule.ruleId);
+              console.log(`[채번 API 호출] ${field.columnName}, ruleId: ${field.numberingRule.ruleId}`);
+              // generateOnOpen: 모달 열 때 실제 순번 할당 (DB 시퀀스 즉시 증가)
+              const response = await allocateNumberingCode(field.numberingRule.ruleId);
               if (response.success && response.data?.generatedCode) {
                 updatedData[field.columnName] = response.data.generatedCode;
                 hasChanges = true;
+                numberingGeneratedRef.current = true; // 생성 완료 표시
+                console.log(`[채번 완료] ${field.columnName} = ${response.data.generatedCode}`);
               }
             } catch (error) {
               console.error(`채번규칙 생성 실패 (${field.columnName}):`, error);
@@ -398,6 +433,8 @@ export function UniversalFormModalComponent({
         }
       }
 
+      isGeneratingRef.current = false; // 진행 완료
+      
       if (hasChanges) {
         setFormData(updatedData);
       }
@@ -629,23 +666,16 @@ export function UniversalFormModalComponent({
       }
     });
 
-    // 저장 시점 채번규칙 처리 (allocateNumberingCode로 실제 순번 증가)
+    // 저장 시점 채번규칙 처리 (generateOnSave만 처리)
     for (const section of config.sections) {
       for (const field of section.fields) {
-        if (field.numberingRule?.enabled && field.numberingRule?.ruleId) {
-          // generateOnSave: 저장 시 새로 생성
-          // generateOnOpen: 열 때 미리보기로 표시했지만, 저장 시 실제 순번 할당 필요
-          if (field.numberingRule.generateOnSave && !dataToSave[field.columnName]) {
-            const response = await allocateNumberingCode(field.numberingRule.ruleId);
-            if (response.success && response.data?.generatedCode) {
-              dataToSave[field.columnName] = response.data.generatedCode;
-            }
-          } else if (field.numberingRule.generateOnOpen && dataToSave[field.columnName]) {
-            // generateOnOpen인 경우, 미리보기 값이 있더라도 실제 순번 할당
-            const response = await allocateNumberingCode(field.numberingRule.ruleId);
-            if (response.success && response.data?.generatedCode) {
-              dataToSave[field.columnName] = response.data.generatedCode;
-            }
+        if (field.numberingRule?.enabled && field.numberingRule?.generateOnSave && field.numberingRule?.ruleId) {
+          const response = await allocateNumberingCode(field.numberingRule.ruleId);
+          if (response.success && response.data?.generatedCode) {
+            dataToSave[field.columnName] = response.data.generatedCode;
+            console.log(`[채번 할당] ${field.columnName} = ${response.data.generatedCode}`);
+          } else {
+            console.error(`[채번 실패] ${field.columnName}:`, response.error);
           }
         }
       }

frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx

@@ -0,0 +1,842 @@
+"use client";
+
+import React, { useState, useEffect } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Plus, Trash2, Settings as SettingsIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  FormFieldConfig,
+  LinkedFieldMapping,
+  FIELD_TYPE_OPTIONS,
+  SELECT_OPTION_TYPE_OPTIONS,
+  LINKED_FIELD_DISPLAY_FORMAT_OPTIONS,
+} from "../types";
+
+// 도움말 텍스트 컴포넌트
+const HelpText = ({ children }: { children: React.ReactNode }) => (
+  <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
+);
+
+interface FieldDetailSettingsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  field: FormFieldConfig;
+  onSave: (updates: Partial<FormFieldConfig>) => void;
+  tables: { name: string; label: string }[];
+  tableColumns: { [tableName: string]: { name: string; type: string; label: string }[] };
+  numberingRules: { id: string; name: string }[];
+  onLoadTableColumns: (tableName: string) => void;
+}
+
+export function FieldDetailSettingsModal({
+  open,
+  onOpenChange,
+  field,
+  onSave,
+  tables,
+  tableColumns,
+  numberingRules,
+  onLoadTableColumns,
+}: FieldDetailSettingsModalProps) {
+  // 로컬 상태로 필드 설정 관리
+  const [localField, setLocalField] = useState<FormFieldConfig>(field);
+
+  // open이 변경될 때마다 필드 데이터 동기화
+  useEffect(() => {
+    if (open) {
+      setLocalField(field);
+    }
+  }, [open, field]);
+
+  // 필드 업데이트 함수
+  const updateField = (updates: Partial<FormFieldConfig>) => {
+    setLocalField((prev) => ({ ...prev, ...updates }));
+  };
+
+  // 저장 함수
+  const handleSave = () => {
+    onSave(localField);
+    onOpenChange(false);
+  };
+
+  // 연결 필드 매핑 추가
+  const addLinkedFieldMapping = () => {
+    const newMapping: LinkedFieldMapping = {
+      sourceColumn: "",
+      targetColumn: "",
+    };
+    const mappings = [...(localField.linkedFieldGroup?.mappings || []), newMapping];
+    updateField({
+      linkedFieldGroup: {
+        ...localField.linkedFieldGroup,
+        enabled: true,
+        mappings,
+      },
+    });
+  };
+
+  // 연결 필드 매핑 삭제
+  const removeLinkedFieldMapping = (index: number) => {
+    const mappings = [...(localField.linkedFieldGroup?.mappings || [])];
+    mappings.splice(index, 1);
+    updateField({
+      linkedFieldGroup: {
+        ...localField.linkedFieldGroup,
+        mappings,
+      },
+    });
+  };
+
+  // 연결 필드 매핑 업데이트
+  const updateLinkedFieldMapping = (index: number, updates: Partial<LinkedFieldMapping>) => {
+    const mappings = [...(localField.linkedFieldGroup?.mappings || [])];
+    mappings[index] = { ...mappings[index], ...updates };
+    updateField({
+      linkedFieldGroup: {
+        ...localField.linkedFieldGroup,
+        mappings,
+      },
+    });
+  };
+
+  // 소스 테이블 컬럼 목록
+  const sourceTableColumns = localField.linkedFieldGroup?.sourceTable
+    ? tableColumns[localField.linkedFieldGroup.sourceTable] || []
+    : [];
+
+  // Select 옵션의 참조 테이블 컬럼 목록
+  const selectTableColumns = localField.selectOptions?.tableName
+    ? tableColumns[localField.selectOptions.tableName] || []
+    : [];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[700px] max-h-[85vh] flex flex-col p-0">
+        <DialogHeader className="px-4 pt-4 pb-2 border-b shrink-0">
+          <DialogTitle className="text-base">필드 상세 설정: {localField.label}</DialogTitle>
+          <DialogDescription className="text-xs">
+            필드의 타입, 동작 방식, 고급 옵션을 설정합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden px-4">
+          <ScrollArea className="h-[calc(85vh-180px)]">
+            <div className="space-y-4 py-3 pr-3">
+              {/* 기본 정보 섹션 */}
+              <div className="space-y-3 border rounded-lg p-3 bg-card">
+                <h3 className="text-xs font-semibold">기본 정보</h3>
+
+                <div>
+                  <Label className="text-[10px]">필드 타입</Label>
+                  <Select
+                    value={localField.fieldType}
+                    onValueChange={(value) =>
+                      updateField({
+                        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>
+                  <HelpText>입력 필드의 유형을 선택하세요 (텍스트, 숫자, 날짜 등)</HelpText>
+                </div>
+
+                <div>
+                  <Label className="text-[10px]">그리드 너비</Label>
+                  <Select
+                    value={String(localField.gridSpan || 6)}
+                    onValueChange={(value) => updateField({ 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={localField.placeholder || ""}
+                    onChange={(e) => updateField({ placeholder: e.target.value })}
+                    placeholder="입력 힌트"
+                    className="h-7 text-xs mt-1"
+                  />
+                  <HelpText>입력 필드에 표시될 힌트 텍스트입니다</HelpText>
+                </div>
+              </div>
+
+              {/* 옵션 토글 */}
+              <div className="space-y-2 border rounded-lg p-3 bg-card">
+                <h3 className="text-xs font-semibold mb-2">필드 옵션</h3>
+
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">필수 입력</span>
+                  <Switch
+                    checked={localField.required || false}
+                    onCheckedChange={(checked) => updateField({ required: checked })}
+                  />
+                </div>
+                <HelpText>이 필드를 필수 입력으로 만듭니다</HelpText>
+
+                <Separator className="my-2" />
+
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">비활성화 (읽기전용)</span>
+                  <Switch
+                    checked={localField.disabled || false}
+                    onCheckedChange={(checked) => updateField({ disabled: checked })}
+                  />
+                </div>
+                <HelpText>필드를 비활성화하여 수정할 수 없게 만듭니다</HelpText>
+
+                <Separator className="my-2" />
+
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">숨김 (자동 저장만)</span>
+                  <Switch
+                    checked={localField.hidden || false}
+                    onCheckedChange={(checked) => updateField({ hidden: checked })}
+                  />
+                </div>
+                <HelpText>화면에 표시하지 않지만 값은 저장됩니다</HelpText>
+
+                <Separator className="my-2" />
+
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">부모에서 값 받기</span>
+                  <Switch
+                    checked={localField.receiveFromParent || false}
+                    onCheckedChange={(checked) => updateField({ receiveFromParent: checked })}
+                  />
+                </div>
+                <HelpText>부모 화면에서 전달받은 값으로 자동 채워집니다</HelpText>
+              </div>
+
+              {/* Accordion으로 고급 설정 */}
+              <Accordion type="single" collapsible className="space-y-2">
+                {/* Select 옵션 설정 */}
+                {localField.fieldType === "select" && (
+                  <AccordionItem value="select-options" className="border rounded-lg">
+                    <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-green-50/50">
+                      <div className="flex items-center gap-2">
+                        <SettingsIcon className="h-3.5 w-3.5 text-green-600" />
+                        <span>Select 옵션 설정</span>
+                        {localField.selectOptions?.type && (
+                          <span className="text-[9px] text-muted-foreground">
+                            ({localField.selectOptions.type === "table" ? "테이블 참조" : localField.selectOptions.type === "code" ? "공통코드" : "직접 입력"})
+                          </span>
+                        )}
+                      </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="px-3 pb-3 space-y-3">
+                      <HelpText>드롭다운에 표시될 옵션 목록을 어디서 가져올지 설정합니다.</HelpText>
+
+                      <div>
+                        <Label className="text-[10px]">옵션 타입</Label>
+                        <Select
+                          value={localField.selectOptions?.type || "static"}
+                          onValueChange={(value) =>
+                            updateField({
+                              selectOptions: {
+                                ...localField.selectOptions,
+                                type: value as "static" | "table" | "code",
+                              },
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-7 text-xs mt-1">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {SELECT_OPTION_TYPE_OPTIONS.map((opt) => (
+                              <SelectItem key={opt.value} value={opt.value}>
+                                {opt.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      {localField.selectOptions?.type === "table" && (
+                        <div className="space-y-3 pt-2 border-t">
+                          <HelpText>테이블 참조: DB 테이블에서 옵션 목록을 가져옵니다.</HelpText>
+
+                          <div>
+                            <Label className="text-[10px]">참조 테이블</Label>
+                            <Select
+                              value={localField.selectOptions?.tableName || ""}
+                              onValueChange={(value) => {
+                                updateField({
+                                  selectOptions: {
+                                    ...localField.selectOptions,
+                                    tableName: value,
+                                  },
+                                });
+                                onLoadTableColumns(value);
+                              }}
+                            >
+                              <SelectTrigger className="h-7 text-xs mt-1">
+                                <SelectValue placeholder="테이블 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {tables.map((t) => (
+                                  <SelectItem key={t.name} value={t.name}>
+                                    {t.label || t.name}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <HelpText>드롭다운 목록을 가져올 테이블을 선택하세요</HelpText>
+                          </div>
+
+                          <div>
+                            <Label className="text-[10px]">조인할 컬럼 (값)</Label>
+                            {selectTableColumns.length > 0 ? (
+                              <Select
+                                value={localField.selectOptions?.valueColumn || ""}
+                                onValueChange={(value) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      valueColumn: value,
+                                    },
+                                  })
+                                }
+                              >
+                                <SelectTrigger className="h-7 text-xs mt-1">
+                                  <SelectValue placeholder="컬럼 선택" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {selectTableColumns.map((col) => (
+                                    <SelectItem key={col.name} value={col.name}>
+                                      {col.name}
+                                      {col.label !== col.name && ` (${col.label})`}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            ) : (
+                              <Input
+                                value={localField.selectOptions?.valueColumn || ""}
+                                onChange={(e) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      valueColumn: e.target.value,
+                                    },
+                                  })
+                                }
+                                placeholder="customer_code"
+                                className="h-7 text-xs mt-1"
+                              />
+                            )}
+                            <HelpText>
+                              참조 테이블에서 조인할 컬럼 (기본키)
+                              <br />
+                              예: customer_code, customer_id
+                            </HelpText>
+                          </div>
+
+                          <div>
+                            <Label className="text-[10px]">표시할 컬럼 (라벨)</Label>
+                            {selectTableColumns.length > 0 ? (
+                              <Select
+                                value={localField.selectOptions?.labelColumn || ""}
+                                onValueChange={(value) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      labelColumn: value,
+                                    },
+                                  })
+                                }
+                              >
+                                <SelectTrigger className="h-7 text-xs mt-1">
+                                  <SelectValue placeholder="컬럼 선택" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {selectTableColumns.map((col) => (
+                                    <SelectItem key={col.name} value={col.name}>
+                                      {col.name}
+                                      {col.label !== col.name && ` (${col.label})`}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            ) : (
+                              <Input
+                                value={localField.selectOptions?.labelColumn || ""}
+                                onChange={(e) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      labelColumn: e.target.value,
+                                    },
+                                  })
+                                }
+                                placeholder="customer_name"
+                                className="h-7 text-xs mt-1"
+                              />
+                            )}
+                            <HelpText>
+                              드롭다운에 표시할 컬럼 (이름)
+                              <br />
+                              예: customer_name, dept_name
+                            </HelpText>
+                          </div>
+
+                          <div>
+                            <Label className="text-[10px]">저장할 컬럼</Label>
+                            {selectTableColumns.length > 0 ? (
+                              <Select
+                                value={localField.selectOptions?.saveColumn || ""}
+                                onValueChange={(value) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      saveColumn: value,
+                                    },
+                                  })
+                                }
+                              >
+                                <SelectTrigger className="h-7 text-xs mt-1">
+                                  <SelectValue placeholder="컬럼 선택 (미선택 시 조인 컬럼 저장)" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="">조인 컬럼 사용 (기본)</SelectItem>
+                                  {selectTableColumns.map((col) => (
+                                    <SelectItem key={col.name} value={col.name}>
+                                      {col.name}
+                                      {col.label !== col.name && ` (${col.label})`}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            ) : (
+                              <Input
+                                value={localField.selectOptions?.saveColumn || ""}
+                                onChange={(e) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      saveColumn: e.target.value,
+                                    },
+                                  })
+                                }
+                                placeholder="비워두면 조인 컬럼 저장"
+                                className="h-7 text-xs mt-1"
+                              />
+                            )}
+                            <HelpText>
+                              실제로 DB에 저장할 컬럼을 선택하세요
+                              <br />
+                              예: customer_name 저장 (비워두면 customer_code 저장)
+                            </HelpText>
+                          </div>
+                        </div>
+                      )}
+
+                      {localField.selectOptions?.type === "code" && (
+                        <div className="space-y-2 pt-2 border-t">
+                          <HelpText>공통코드: 시스템 공통코드에서 옵션을 가져옵니다.</HelpText>
+                          <div>
+                            <Label className="text-[10px]">코드 카테고리</Label>
+                            <Input
+                              value={localField.selectOptions?.codeCategory || ""}
+                              onChange={(e) =>
+                                updateField({
+                                  selectOptions: {
+                                    ...localField.selectOptions,
+                                    codeCategory: e.target.value,
+                                  },
+                                })
+                              }
+                              placeholder="DEPT_TYPE"
+                              className="h-7 text-xs mt-1"
+                            />
+                            <HelpText>공통코드 카테고리를 입력하세요 (예: DEPT_TYPE, USER_STATUS)</HelpText>
+                          </div>
+                        </div>
+                      )}
+                    </AccordionContent>
+                  </AccordionItem>
+                )}
+
+                {/* 연결 필드 설정 */}
+                <AccordionItem value="linked-fields" className="border rounded-lg">
+                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-orange-50/50">
+                    <div className="flex items-center gap-2">
+                      <SettingsIcon className="h-3.5 w-3.5 text-orange-600" />
+                      <span>연결 필드 설정 (다중 컬럼 저장)</span>
+                      {localField.linkedFieldGroup?.enabled && (
+                        <span className="text-[9px] text-muted-foreground">
+                          ({(localField.linkedFieldGroup?.mappings || []).length}개)
+                        </span>
+                      )}
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-3 pb-3 space-y-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-[10px] font-medium">연결 필드 사용</span>
+                      <Switch
+                        checked={localField.linkedFieldGroup?.enabled || false}
+                        onCheckedChange={(checked) =>
+                          updateField({
+                            linkedFieldGroup: {
+                              ...localField.linkedFieldGroup,
+                              enabled: checked,
+                            },
+                          })
+                        }
+                      />
+                    </div>
+                    <HelpText>
+                      드롭다운 선택 시 다른 테이블의 값도 함께 저장합니다.
+                      <br />
+                      예: 고객 선택 → 고객코드, 고객명, 연락처를 각각 저장
+                    </HelpText>
+
+                    {localField.linkedFieldGroup?.enabled && (
+                      <div className="space-y-3 pt-2 border-t">
+                        <div>
+                          <Label className="text-[10px]">소스 테이블</Label>
+                          <Select
+                            value={localField.linkedFieldGroup?.sourceTable || ""}
+                            onValueChange={(value) => {
+                              updateField({
+                                linkedFieldGroup: {
+                                  ...localField.linkedFieldGroup,
+                                  sourceTable: value,
+                                },
+                              });
+                              onLoadTableColumns(value);
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs mt-1">
+                              <SelectValue placeholder="테이블 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {tables.map((t) => (
+                                <SelectItem key={t.name} value={t.name}>
+                                  {t.label || t.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <HelpText>값을 가져올 소스 테이블 (예: customer_mng)</HelpText>
+                        </div>
+
+                        <div>
+                          <Label className="text-[10px]">표시 컬럼</Label>
+                          {sourceTableColumns.length > 0 ? (
+                            <Select
+                              value={localField.linkedFieldGroup?.displayColumn || ""}
+                              onValueChange={(value) =>
+                                updateField({
+                                  linkedFieldGroup: {
+                                    ...localField.linkedFieldGroup,
+                                    displayColumn: value,
+                                  },
+                                })
+                              }
+                            >
+                              <SelectTrigger className="h-7 text-xs mt-1">
+                                <SelectValue placeholder="컬럼 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {sourceTableColumns.map((col) => (
+                                  <SelectItem key={col.name} value={col.name}>
+                                    {col.name}
+                                    {col.label !== col.name && ` (${col.label})`}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          ) : (
+                            <Input
+                              value={localField.linkedFieldGroup?.displayColumn || ""}
+                              onChange={(e) =>
+                                updateField({
+                                  linkedFieldGroup: {
+                                    ...localField.linkedFieldGroup,
+                                    displayColumn: e.target.value,
+                                  },
+                                })
+                              }
+                              placeholder="customer_name"
+                              className="h-7 text-xs mt-1"
+                            />
+                          )}
+                          <HelpText>드롭다운에 표시할 컬럼 (예: customer_name)</HelpText>
+                        </div>
+
+                        <div>
+                          <Label className="text-[10px]">표시 형식</Label>
+                          <Select
+                            value={localField.linkedFieldGroup?.displayFormat || "name_only"}
+                            onValueChange={(value) =>
+                              updateField({
+                                linkedFieldGroup: {
+                                  ...localField.linkedFieldGroup,
+                                  displayFormat: value as "name_only" | "code_name" | "name_code",
+                                },
+                              })
+                            }
+                          >
+                            <SelectTrigger className="h-7 text-xs mt-1">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {LINKED_FIELD_DISPLAY_FORMAT_OPTIONS.map((opt) => (
+                                <SelectItem key={opt.value} value={opt.value}>
+                                  {opt.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <HelpText>드롭다운에 표시될 형식을 선택하세요</HelpText>
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label className="text-[10px] font-medium">컬럼 매핑 목록</Label>
+                            <Button size="sm" variant="outline" onClick={addLinkedFieldMapping} className="h-6 text-[9px] px-2">
+                              <Plus className="h-3 w-3 mr-1" />
+                              매핑 추가
+                            </Button>
+                          </div>
+                          <HelpText>
+                            소스 테이블의 컬럼을 현재 폼의 어느 컬럼에 저장할지 매핑합니다.
+                            <br />
+                            예: customer_code → partner_id, customer_name → partner_name
+                          </HelpText>
+
+                          {(localField.linkedFieldGroup?.mappings || []).length === 0 ? (
+                            <div className="text-center py-4 border border-dashed rounded-lg">
+                              <p className="text-[10px] text-muted-foreground">매핑이 없습니다</p>
+                              <p className="text-[9px] text-muted-foreground">위의 "매핑 추가" 버튼을 클릭하세요</p>
+                            </div>
+                          ) : (
+                            <div className="space-y-2">
+                              {(localField.linkedFieldGroup?.mappings || []).map((mapping, index) => (
+                                <div key={index} className="border rounded-lg p-2 space-y-2 bg-muted/30">
+                                  <div className="flex items-center justify-between">
+                                    <span className="text-[9px] font-medium text-muted-foreground">매핑 {index + 1}</span>
+                                    <Button
+                                      size="sm"
+                                      variant="ghost"
+                                      onClick={() => removeLinkedFieldMapping(index)}
+                                      className="h-5 w-5 p-0 text-destructive"
+                                    >
+                                      <Trash2 className="h-3 w-3" />
+                                    </Button>
+                                  </div>
+
+                                  <div>
+                                    <Label className="text-[9px]">소스 컬럼 (가져올 값)</Label>
+                                    {sourceTableColumns.length > 0 ? (
+                                      <Select
+                                        value={mapping.sourceColumn || ""}
+                                        onValueChange={(value) =>
+                                          updateLinkedFieldMapping(index, { sourceColumn: value })
+                                        }
+                                      >
+                                        <SelectTrigger className="h-6 text-[9px] mt-0.5">
+                                          <SelectValue placeholder="컬럼 선택" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                          {sourceTableColumns.map((col) => (
+                                            <SelectItem key={col.name} value={col.name}>
+                                              {col.name}
+                                              {col.label !== col.name && ` (${col.label})`}
+                                            </SelectItem>
+                                          ))}
+                                        </SelectContent>
+                                      </Select>
+                                    ) : (
+                                      <Input
+                                        value={mapping.sourceColumn || ""}
+                                        onChange={(e) =>
+                                          updateLinkedFieldMapping(index, { sourceColumn: e.target.value })
+                                        }
+                                        placeholder="customer_code"
+                                        className="h-6 text-[9px] mt-0.5"
+                                      />
+                                    )}
+                                  </div>
+
+                                  <div className="text-center text-[9px] text-muted-foreground">↓</div>
+
+                                  <div>
+                                    <Label className="text-[9px]">타겟 컬럼 (저장할 위치)</Label>
+                                    <Input
+                                      value={mapping.targetColumn || ""}
+                                      onChange={(e) =>
+                                        updateLinkedFieldMapping(index, { targetColumn: e.target.value })
+                                      }
+                                      placeholder="partner_id"
+                                      className="h-6 text-[9px] mt-0.5"
+                                    />
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </AccordionContent>
+                </AccordionItem>
+
+                {/* 채번규칙 설정 */}
+                <AccordionItem value="numbering-rule" className="border rounded-lg">
+                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-blue-50/50">
+                    <div className="flex items-center gap-2">
+                      <SettingsIcon className="h-3.5 w-3.5 text-blue-600" />
+                      <span>채번규칙 설정</span>
+                      {localField.numberingRule?.enabled && (
+                        <span className="text-[9px] text-muted-foreground">(활성화됨)</span>
+                      )}
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="px-3 pb-3 space-y-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-[10px] font-medium">채번규칙 사용</span>
+                      <Switch
+                        checked={localField.numberingRule?.enabled || false}
+                        onCheckedChange={(checked) =>
+                          updateField({
+                            numberingRule: {
+                              ...localField.numberingRule,
+                              enabled: checked,
+                            },
+                          })
+                        }
+                      />
+                    </div>
+                    <HelpText>
+                      자동으로 코드/번호를 생성합니다.
+                      <br />
+                      예: EMP-001, ORD-20240101-001
+                    </HelpText>
+
+                    {localField.numberingRule?.enabled && (
+                      <div className="space-y-2 pt-2 border-t">
+                        <div>
+                          <Label className="text-[10px]">채번규칙 선택</Label>
+                          <Select
+                            value={localField.numberingRule?.ruleId || ""}
+                            onValueChange={(value) =>
+                              updateField({
+                                numberingRule: {
+                                  ...localField.numberingRule,
+                                  ruleId: value,
+                                },
+                              })
+                            }
+                          >
+                            <SelectTrigger className="h-7 text-xs mt-1">
+                              <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>
+                          <HelpText>사용할 채번규칙을 선택하세요</HelpText>
+                        </div>
+
+                        <Separator className="my-2" />
+
+                        <div className="flex items-center justify-between">
+                          <span className="text-[10px]">사용자 수정 가능</span>
+                          <Switch
+                            checked={localField.numberingRule?.editable || false}
+                            onCheckedChange={(checked) =>
+                              updateField({
+                                numberingRule: {
+                                  ...localField.numberingRule,
+                                  editable: checked,
+                                },
+                              })
+                            }
+                          />
+                        </div>
+                        <HelpText>생성된 번호를 사용자가 수정할 수 있게 합니다</HelpText>
+
+                        <Separator className="my-2" />
+
+                        <div className="flex items-center justify-between">
+                          <span className="text-[10px]">저장 시점에 생성</span>
+                          <Switch
+                            checked={localField.numberingRule?.generateOnSave || false}
+                            onCheckedChange={(checked) =>
+                              updateField({
+                                numberingRule: {
+                                  ...localField.numberingRule,
+                                  generateOnSave: checked,
+                                  generateOnOpen: !checked,
+                                },
+                              })
+                            }
+                          />
+                        </div>
+                        <HelpText>OFF: 모달 열릴 때 생성 / ON: 저장 버튼 클릭 시 생성</HelpText>
+                      </div>
+                    )}
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </div>
+          </ScrollArea>
+        </div>
+
+        <DialogFooter className="px-4 py-3 border-t shrink-0">
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
+            취소
+          </Button>
+          <Button onClick={handleSave} className="h-9 text-sm">
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx

@@ -0,0 +1,796 @@
+"use client";
+
+import React, { useState, useEffect } 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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Plus, Trash2, Database, Layers } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { SaveConfig, SubTableSaveConfig, SubTableFieldMapping, FormSectionConfig, FormFieldConfig } from "../types";
+
+// 도움말 텍스트 컴포넌트
+const HelpText = ({ children }: { children: React.ReactNode }) => (
+  <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
+);
+
+interface SaveSettingsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  saveConfig: SaveConfig;
+  sections: FormSectionConfig[];
+  onSave: (updates: SaveConfig) => void;
+  tables: { name: string; label: string }[];
+  tableColumns: { [tableName: string]: { name: string; type: string; label: string }[] };
+  onLoadTableColumns: (tableName: string) => void;
+}
+
+export function SaveSettingsModal({
+  open,
+  onOpenChange,
+  saveConfig,
+  sections,
+  onSave,
+  tables,
+  tableColumns,
+  onLoadTableColumns,
+}: SaveSettingsModalProps) {
+  // 로컬 상태로 저장 설정 관리
+  const [localSaveConfig, setLocalSaveConfig] = useState<SaveConfig>(saveConfig);
+
+  // 저장 모드 (단일 테이블 vs 다중 테이블)
+  const [saveMode, setSaveMode] = useState<"single" | "multi">(
+    saveConfig.customApiSave?.enabled && saveConfig.customApiSave?.multiTable?.enabled ? "multi" : "single"
+  );
+
+  // open이 변경될 때마다 데이터 동기화
+  useEffect(() => {
+    if (open) {
+      setLocalSaveConfig(saveConfig);
+      setSaveMode(saveConfig.customApiSave?.enabled && saveConfig.customApiSave?.multiTable?.enabled ? "multi" : "single");
+    }
+  }, [open, saveConfig]);
+
+  // 저장 설정 업데이트 함수
+  const updateSaveConfig = (updates: Partial<SaveConfig>) => {
+    setLocalSaveConfig((prev) => ({ ...prev, ...updates }));
+  };
+
+  // 저장 함수
+  const handleSave = () => {
+    // 저장 모드에 따라 설정 조정
+    let finalConfig = { ...localSaveConfig };
+
+    if (saveMode === "single") {
+      // 단일 테이블 모드: customApiSave 비활성화
+      finalConfig = {
+        ...finalConfig,
+        customApiSave: {
+          enabled: false,
+          apiType: "custom",
+        },
+      };
+    } else {
+      // 다중 테이블 모드: customApiSave 활성화
+      finalConfig = {
+        ...finalConfig,
+        customApiSave: {
+          ...finalConfig.customApiSave,
+          enabled: true,
+          apiType: "multi-table",
+          multiTable: {
+            ...finalConfig.customApiSave?.multiTable,
+            enabled: true,
+          },
+        },
+      };
+    }
+
+    onSave(finalConfig);
+    onOpenChange(false);
+  };
+
+  // 서브 테이블 추가
+  const addSubTable = () => {
+    const newSubTable: SubTableSaveConfig = {
+      enabled: true,
+      tableName: "",
+      repeatSectionId: "",
+      linkColumn: {
+        mainField: "",
+        subColumn: "",
+      },
+      fieldMappings: [],
+    };
+
+    const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || []), newSubTable];
+    updateSaveConfig({
+      customApiSave: {
+        ...localSaveConfig.customApiSave,
+        apiType: "multi-table",
+        multiTable: {
+          ...localSaveConfig.customApiSave?.multiTable,
+          enabled: true,
+          subTables,
+        },
+      },
+    });
+  };
+
+  // 서브 테이블 삭제
+  const removeSubTable = (index: number) => {
+    const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
+    subTables.splice(index, 1);
+    updateSaveConfig({
+      customApiSave: {
+        ...localSaveConfig.customApiSave,
+        multiTable: {
+          ...localSaveConfig.customApiSave?.multiTable,
+          subTables,
+        },
+      },
+    });
+  };
+
+  // 서브 테이블 업데이트
+  const updateSubTable = (index: number, updates: Partial<SubTableSaveConfig>) => {
+    const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
+    subTables[index] = { ...subTables[index], ...updates };
+    updateSaveConfig({
+      customApiSave: {
+        ...localSaveConfig.customApiSave,
+        multiTable: {
+          ...localSaveConfig.customApiSave?.multiTable,
+          subTables,
+        },
+      },
+    });
+  };
+
+  // 필드 매핑 추가
+  const addFieldMapping = (subTableIndex: number) => {
+    const newMapping: SubTableFieldMapping = {
+      formField: "",
+      targetColumn: "",
+    };
+    const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
+    const fieldMappings = [...(subTables[subTableIndex].fieldMappings || []), newMapping];
+    subTables[subTableIndex] = { ...subTables[subTableIndex], fieldMappings };
+    updateSaveConfig({
+      customApiSave: {
+        ...localSaveConfig.customApiSave,
+        multiTable: {
+          ...localSaveConfig.customApiSave?.multiTable,
+          subTables,
+        },
+      },
+    });
+  };
+
+  // 필드 매핑 삭제
+  const removeFieldMapping = (subTableIndex: number, mappingIndex: number) => {
+    const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
+    const fieldMappings = [...(subTables[subTableIndex].fieldMappings || [])];
+    fieldMappings.splice(mappingIndex, 1);
+    subTables[subTableIndex] = { ...subTables[subTableIndex], fieldMappings };
+    updateSaveConfig({
+      customApiSave: {
+        ...localSaveConfig.customApiSave,
+        multiTable: {
+          ...localSaveConfig.customApiSave?.multiTable,
+          subTables,
+        },
+      },
+    });
+  };
+
+  // 필드 매핑 업데이트
+  const updateFieldMapping = (subTableIndex: number, mappingIndex: number, updates: Partial<SubTableFieldMapping>) => {
+    const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
+    const fieldMappings = [...(subTables[subTableIndex].fieldMappings || [])];
+    fieldMappings[mappingIndex] = { ...fieldMappings[mappingIndex], ...updates };
+    subTables[subTableIndex] = { ...subTables[subTableIndex], fieldMappings };
+    updateSaveConfig({
+      customApiSave: {
+        ...localSaveConfig.customApiSave,
+        multiTable: {
+          ...localSaveConfig.customApiSave?.multiTable,
+          subTables,
+        },
+      },
+    });
+  };
+
+  // 메인 테이블 컬럼 목록
+  const mainTableColumns = localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName
+    ? tableColumns[localSaveConfig.customApiSave.multiTable.mainTable.tableName] || []
+    : [];
+
+  // 반복 섹션 목록
+  const repeatSections = sections.filter((s) => s.repeatable);
+
+  // 모든 필드 목록 (반복 섹션 포함)
+  const getAllFields = (): { columnName: string; label: string; sectionTitle: string }[] => {
+    const fields: { columnName: string; label: string; sectionTitle: string }[] = [];
+    sections.forEach((section) => {
+      section.fields.forEach((field) => {
+        fields.push({
+          columnName: field.columnName,
+          label: field.label,
+          sectionTitle: section.title,
+        });
+      });
+    });
+    return fields;
+  };
+
+  const allFields = getAllFields();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[800px] max-h-[90vh] flex flex-col p-0">
+        <DialogHeader className="px-4 pt-4 pb-2 border-b shrink-0">
+          <DialogTitle className="text-base">저장 설정</DialogTitle>
+          <DialogDescription className="text-xs">
+            폼 데이터를 데이터베이스에 저장하는 방식을 설정합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden px-4">
+          <ScrollArea className="h-[calc(90vh-180px)]">
+            <div className="space-y-4 py-3 pr-3">
+              {/* 저장 모드 선택 */}
+              <div className="space-y-3 border rounded-lg p-3 bg-card">
+                <Label className="text-xs font-semibold">저장 모드</Label>
+                <RadioGroup value={saveMode} onValueChange={(value) => setSaveMode(value as "single" | "multi")}>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="single" id="mode-single" />
+                    <Label htmlFor="mode-single" className="text-[10px] cursor-pointer">
+                      단일 테이블 저장
+                    </Label>
+                  </div>
+                  <HelpText>모든 필드를 하나의 테이블에 저장합니다 (기본 방식)</HelpText>
+
+                  <div className="flex items-center space-x-2 pt-2">
+                    <RadioGroupItem value="multi" id="mode-multi" />
+                    <Label htmlFor="mode-multi" className="text-[10px] cursor-pointer">
+                      다중 테이블 저장
+                    </Label>
+                  </div>
+                  <HelpText>
+                    메인 테이블 + 서브 테이블에 트랜잭션으로 저장합니다
+                    <br />
+                    예: 주문(orders) + 주문상세(order_items), 사원(user_info) + 부서(user_dept)
+                  </HelpText>
+                </RadioGroup>
+              </div>
+
+              {/* 단일 테이블 저장 설정 */}
+              {saveMode === "single" && (
+                <div className="space-y-3 border rounded-lg p-3 bg-card">
+                  <div className="flex items-center gap-2">
+                    <Database className="h-4 w-4 text-blue-600" />
+                    <h3 className="text-xs font-semibold">단일 테이블 설정</h3>
+                  </div>
+
+                  <div>
+                    <Label className="text-[10px]">저장 테이블</Label>
+                    <Select
+                      value={localSaveConfig.tableName || ""}
+                      onValueChange={(value) => {
+                        updateSaveConfig({ tableName: value });
+                        onLoadTableColumns(value);
+                      }}
+                    >
+                      <SelectTrigger className="h-7 text-xs mt-1">
+                        <SelectValue placeholder="테이블 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tables.map((t) => (
+                          <SelectItem key={t.name} value={t.name}>
+                            {t.label || t.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <HelpText>폼 데이터를 저장할 테이블을 선택하세요</HelpText>
+                  </div>
+
+                  <div>
+                    <Label className="text-[10px]">키 컬럼 (Primary Key)</Label>
+                    <Input
+                      value={localSaveConfig.primaryKeyColumn || ""}
+                      onChange={(e) => updateSaveConfig({ primaryKeyColumn: e.target.value })}
+                      placeholder="id"
+                      className="h-7 text-xs mt-1"
+                    />
+                    <HelpText>
+                      수정 모드에서 사용할 기본키 컬럼명
+                      <br />
+                      예: id, user_id, order_id
+                    </HelpText>
+                  </div>
+                </div>
+              )}
+
+              {/* 다중 테이블 저장 설정 */}
+              {saveMode === "multi" && (
+                <div className="space-y-3">
+                  {/* 메인 테이블 설정 */}
+                  <div className="border rounded-lg p-3 bg-card space-y-3">
+                    <div className="flex items-center gap-2">
+                      <Database className="h-4 w-4 text-blue-600" />
+                      <h3 className="text-xs font-semibold">메인 테이블 설정</h3>
+                    </div>
+
+                    <div>
+                      <Label className="text-[10px]">메인 테이블명</Label>
+                      <Select
+                        value={localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName || ""}
+                        onValueChange={(value) => {
+                          updateSaveConfig({
+                            customApiSave: {
+                              ...localSaveConfig.customApiSave,
+                              apiType: "multi-table",
+                              multiTable: {
+                                ...localSaveConfig.customApiSave?.multiTable,
+                                enabled: true,
+                                mainTable: {
+                                  ...localSaveConfig.customApiSave?.multiTable?.mainTable,
+                                  tableName: value,
+                                },
+                              },
+                            },
+                          });
+                          onLoadTableColumns(value);
+                        }}
+                      >
+                        <SelectTrigger className="h-7 text-xs mt-1">
+                          <SelectValue placeholder="테이블 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {tables.map((t) => (
+                            <SelectItem key={t.name} value={t.name}>
+                              {t.label || t.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <HelpText>주요 데이터를 저장할 메인 테이블 (예: orders, user_info)</HelpText>
+                    </div>
+
+                    <div>
+                      <Label className="text-[10px]">메인 테이블 키 컬럼</Label>
+                      {mainTableColumns.length > 0 ? (
+                        <Select
+                          value={localSaveConfig.customApiSave?.multiTable?.mainTable?.primaryKeyColumn || ""}
+                          onValueChange={(value) =>
+                            updateSaveConfig({
+                              customApiSave: {
+                                ...localSaveConfig.customApiSave,
+                                multiTable: {
+                                  ...localSaveConfig.customApiSave?.multiTable,
+                                  mainTable: {
+                                    ...localSaveConfig.customApiSave?.multiTable?.mainTable,
+                                    primaryKeyColumn: value,
+                                  },
+                                },
+                              },
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-7 text-xs mt-1">
+                            <SelectValue placeholder="컬럼 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {mainTableColumns.map((col) => (
+                              <SelectItem key={col.name} value={col.name}>
+                                {col.name}
+                                {col.label !== col.name && ` (${col.label})`}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      ) : (
+                        <Input
+                          value={localSaveConfig.customApiSave?.multiTable?.mainTable?.primaryKeyColumn || ""}
+                          onChange={(e) =>
+                            updateSaveConfig({
+                              customApiSave: {
+                                ...localSaveConfig.customApiSave,
+                                multiTable: {
+                                  ...localSaveConfig.customApiSave?.multiTable,
+                                  mainTable: {
+                                    ...localSaveConfig.customApiSave?.multiTable?.mainTable,
+                                    primaryKeyColumn: e.target.value,
+                                  },
+                                },
+                              },
+                            })
+                          }
+                          placeholder="id"
+                          className="h-7 text-xs mt-1"
+                        />
+                      )}
+                      <HelpText>메인 테이블의 기본키 컬럼 (예: order_id, user_id)</HelpText>
+                    </div>
+                  </div>
+
+                  {/* 서브 테이블 목록 */}
+                  <div className="border rounded-lg p-3 bg-card space-y-3">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <Layers className="h-4 w-4 text-orange-600" />
+                        <h3 className="text-xs font-semibold">서브 테이블 설정</h3>
+                        <span className="text-[9px] text-muted-foreground">
+                          ({(localSaveConfig.customApiSave?.multiTable?.subTables || []).length}개)
+                        </span>
+                      </div>
+                      <Button size="sm" variant="outline" onClick={addSubTable} className="h-6 text-[9px] px-2">
+                        <Plus className="h-3 w-3 mr-1" />
+                        서브 테이블 추가
+                      </Button>
+                    </div>
+
+                    <HelpText>
+                      반복 섹션 데이터를 별도 테이블에 저장합니다.
+                      <br />
+                      예: 주문상세(order_items), 겸직부서(user_dept)
+                    </HelpText>
+
+                    {(localSaveConfig.customApiSave?.multiTable?.subTables || []).length === 0 ? (
+                      <div className="text-center py-6 border border-dashed rounded-lg">
+                        <p className="text-[10px] text-muted-foreground mb-1">서브 테이블이 없습니다</p>
+                        <p className="text-[9px] text-muted-foreground">위의 "서브 테이블 추가" 버튼을 클릭하세요</p>
+                      </div>
+                    ) : (
+                      <div className="space-y-3 pt-2">
+                        {(localSaveConfig.customApiSave?.multiTable?.subTables || []).map((subTable, subIndex) => {
+                          const subTableColumns = subTable.tableName ? tableColumns[subTable.tableName] || [] : [];
+                          return (
+                            <Accordion key={subIndex} type="single" collapsible>
+                              <AccordionItem value={`sub-${subIndex}`} className="border rounded-lg bg-orange-50/30">
+                                <AccordionTrigger className="px-3 py-2 text-xs hover:no-underline">
+                                  <div className="flex items-center justify-between flex-1">
+                                    <div className="flex items-center gap-2">
+                                      <span className="font-medium">
+                                        서브 테이블 {subIndex + 1}: {subTable.tableName || "(미설정)"}
+                                      </span>
+                                      <span className="text-[9px] text-muted-foreground">
+                                        ({subTable.fieldMappings?.length || 0}개 매핑)
+                                      </span>
+                                    </div>
+                                    <Button
+                                      size="sm"
+                                      variant="ghost"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        removeSubTable(subIndex);
+                                      }}
+                                      className="h-5 w-5 p-0 text-destructive hover:text-destructive mr-2"
+                                    >
+                                      <Trash2 className="h-3 w-3" />
+                                    </Button>
+                                  </div>
+                                </AccordionTrigger>
+                                <AccordionContent className="px-3 pb-3 space-y-3">
+                                  <div>
+                                    <Label className="text-[10px]">서브 테이블명</Label>
+                                    <Select
+                                      value={subTable.tableName || ""}
+                                      onValueChange={(value) => {
+                                        updateSubTable(subIndex, { tableName: value });
+                                        onLoadTableColumns(value);
+                                      }}
+                                    >
+                                      <SelectTrigger className="h-7 text-xs mt-1">
+                                        <SelectValue placeholder="테이블 선택" />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        {tables.map((t) => (
+                                          <SelectItem key={t.name} value={t.name}>
+                                            {t.label || t.name}
+                                          </SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                    <HelpText>반복 데이터를 저장할 서브 테이블</HelpText>
+                                  </div>
+
+                                  <div>
+                                    <Label className="text-[10px]">연결할 반복 섹션</Label>
+                                    <Select
+                                      value={subTable.repeatSectionId || ""}
+                                      onValueChange={(value) => updateSubTable(subIndex, { repeatSectionId: value })}
+                                    >
+                                      <SelectTrigger className="h-7 text-xs mt-1">
+                                        <SelectValue placeholder="섹션 선택" />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        {repeatSections.length === 0 ? (
+                                          <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                                            반복 섹션이 없습니다
+                                          </div>
+                                        ) : (
+                                          repeatSections.map((section) => (
+                                            <SelectItem key={section.id} value={section.id}>
+                                              {section.title}
+                                            </SelectItem>
+                                          ))
+                                        )}
+                                      </SelectContent>
+                                    </Select>
+                                    <HelpText>이 서브 테이블에 저장할 반복 섹션을 선택하세요</HelpText>
+                                  </div>
+
+                                  <Separator />
+
+                                  <div className="space-y-2">
+                                    <Label className="text-[10px] font-medium">테이블 연결 설정</Label>
+                                    <HelpText>메인 테이블과 서브 테이블을 연결하는 키 컬럼</HelpText>
+
+                                    <div className="grid grid-cols-2 gap-2">
+                                      <div>
+                                        <Label className="text-[9px]">메인 필드</Label>
+                                        {mainTableColumns.length > 0 ? (
+                                          <Select
+                                            value={subTable.linkColumn?.mainField || ""}
+                                            onValueChange={(value) =>
+                                              updateSubTable(subIndex, {
+                                                linkColumn: { ...subTable.linkColumn, mainField: value },
+                                              })
+                                            }
+                                          >
+                                            <SelectTrigger className="h-6 text-[9px] mt-0.5">
+                                              <SelectValue placeholder="필드 선택" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                              {mainTableColumns.map((col) => (
+                                                <SelectItem key={col.name} value={col.name}>
+                                                  {col.name}
+                                                </SelectItem>
+                                              ))}
+                                            </SelectContent>
+                                          </Select>
+                                        ) : (
+                                          <Input
+                                            value={subTable.linkColumn?.mainField || ""}
+                                            onChange={(e) =>
+                                              updateSubTable(subIndex, {
+                                                linkColumn: { ...subTable.linkColumn, mainField: e.target.value },
+                                              })
+                                            }
+                                            placeholder="order_id"
+                                            className="h-6 text-[9px] mt-0.5"
+                                          />
+                                        )}
+                                      </div>
+
+                                      <div>
+                                        <Label className="text-[9px]">서브 컬럼</Label>
+                                        {subTableColumns.length > 0 ? (
+                                          <Select
+                                            value={subTable.linkColumn?.subColumn || ""}
+                                            onValueChange={(value) =>
+                                              updateSubTable(subIndex, {
+                                                linkColumn: { ...subTable.linkColumn, subColumn: value },
+                                              })
+                                            }
+                                          >
+                                            <SelectTrigger className="h-6 text-[9px] mt-0.5">
+                                              <SelectValue placeholder="컬럼 선택" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                              {subTableColumns.map((col) => (
+                                                <SelectItem key={col.name} value={col.name}>
+                                                  {col.name}
+                                                </SelectItem>
+                                              ))}
+                                            </SelectContent>
+                                          </Select>
+                                        ) : (
+                                          <Input
+                                            value={subTable.linkColumn?.subColumn || ""}
+                                            onChange={(e) =>
+                                              updateSubTable(subIndex, {
+                                                linkColumn: { ...subTable.linkColumn, subColumn: e.target.value },
+                                              })
+                                            }
+                                            placeholder="order_id"
+                                            className="h-6 text-[9px] mt-0.5"
+                                          />
+                                        )}
+                                      </div>
+                                    </div>
+                                  </div>
+
+                                  <Separator />
+
+                                  <div className="space-y-2">
+                                    <div className="flex items-center justify-between">
+                                      <Label className="text-[10px] font-medium">필드 매핑</Label>
+                                      <Button
+                                        size="sm"
+                                        variant="outline"
+                                        onClick={() => addFieldMapping(subIndex)}
+                                        className="h-5 text-[8px] px-1.5"
+                                      >
+                                        <Plus className="h-2.5 w-2.5 mr-0.5" />
+                                        추가
+                                      </Button>
+                                    </div>
+                                    <HelpText>폼 필드를 서브 테이블 컬럼에 매핑합니다</HelpText>
+
+                                    {(subTable.fieldMappings || []).length === 0 ? (
+                                      <div className="text-center py-3 border border-dashed rounded-lg">
+                                        <p className="text-[9px] text-muted-foreground">매핑이 없습니다</p>
+                                      </div>
+                                    ) : (
+                                      <div className="space-y-2">
+                                        {(subTable.fieldMappings || []).map((mapping, mapIndex) => (
+                                          <div key={mapIndex} className="border rounded-lg p-2 bg-white space-y-1.5">
+                                            <div className="flex items-center justify-between">
+                                              <span className="text-[8px] font-medium text-muted-foreground">
+                                                매핑 {mapIndex + 1}
+                                              </span>
+                                              <Button
+                                                size="sm"
+                                                variant="ghost"
+                                                onClick={() => removeFieldMapping(subIndex, mapIndex)}
+                                                className="h-4 w-4 p-0 text-destructive"
+                                              >
+                                                <Trash2 className="h-2.5 w-2.5" />
+                                              </Button>
+                                            </div>
+
+                                            <div>
+                                              <Label className="text-[8px]">폼 필드</Label>
+                                              <Select
+                                                value={mapping.formField || ""}
+                                                onValueChange={(value) =>
+                                                  updateFieldMapping(subIndex, mapIndex, { formField: value })
+                                                }
+                                              >
+                                                <SelectTrigger className="h-5 text-[8px] mt-0.5">
+                                                  <SelectValue placeholder="필드 선택" />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                  {allFields.map((field) => (
+                                                    <SelectItem key={field.columnName} value={field.columnName}>
+                                                      {field.label} ({field.sectionTitle})
+                                                    </SelectItem>
+                                                  ))}
+                                                </SelectContent>
+                                              </Select>
+                                            </div>
+
+                                            <div className="text-center text-[8px] text-muted-foreground">↓</div>
+
+                                            <div>
+                                              <Label className="text-[8px]">서브 테이블 컬럼</Label>
+                                              {subTableColumns.length > 0 ? (
+                                                <Select
+                                                  value={mapping.targetColumn || ""}
+                                                  onValueChange={(value) =>
+                                                    updateFieldMapping(subIndex, mapIndex, { targetColumn: value })
+                                                  }
+                                                >
+                                                  <SelectTrigger className="h-5 text-[8px] mt-0.5">
+                                                    <SelectValue placeholder="컬럼 선택" />
+                                                  </SelectTrigger>
+                                                  <SelectContent>
+                                                    {subTableColumns.map((col) => (
+                                                      <SelectItem key={col.name} value={col.name}>
+                                                        {col.name}
+                                                      </SelectItem>
+                                                    ))}
+                                                  </SelectContent>
+                                                </Select>
+                                              ) : (
+                                                <Input
+                                                  value={mapping.targetColumn || ""}
+                                                  onChange={(e) =>
+                                                    updateFieldMapping(subIndex, mapIndex, {
+                                                      targetColumn: e.target.value,
+                                                    })
+                                                  }
+                                                  placeholder="item_name"
+                                                  className="h-5 text-[8px] mt-0.5"
+                                                />
+                                              )}
+                                            </div>
+                                          </div>
+                                        ))}
+                                      </div>
+                                    )}
+                                  </div>
+                                </AccordionContent>
+                              </AccordionItem>
+                            </Accordion>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* 저장 후 동작 */}
+              <div className="space-y-2 border rounded-lg p-3 bg-card">
+                <h3 className="text-xs font-semibold">저장 후 동작</h3>
+
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">토스트 메시지 표시</span>
+                  <Switch
+                    checked={localSaveConfig.afterSave?.showToast !== false}
+                    onCheckedChange={(checked) =>
+                      updateSaveConfig({
+                        afterSave: {
+                          ...localSaveConfig.afterSave,
+                          showToast: checked,
+                        },
+                      })
+                    }
+                  />
+                </div>
+                <HelpText>저장 성공 시 "저장되었습니다" 메시지를 표시합니다</HelpText>
+
+                <Separator className="my-2" />
+
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">모달 자동 닫기</span>
+                  <Switch
+                    checked={localSaveConfig.afterSave?.closeModal !== false}
+                    onCheckedChange={(checked) =>
+                      updateSaveConfig({
+                        afterSave: {
+                          ...localSaveConfig.afterSave,
+                          closeModal: checked,
+                        },
+                      })
+                    }
+                  />
+                </div>
+                <HelpText>저장 성공 시 모달을 자동으로 닫습니다</HelpText>
+
+                <Separator className="my-2" />
+
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">부모 화면 새로고침</span>
+                  <Switch
+                    checked={localSaveConfig.afterSave?.refreshParent !== false}
+                    onCheckedChange={(checked) =>
+                      updateSaveConfig({
+                        afterSave: {
+                          ...localSaveConfig.afterSave,
+                          refreshParent: checked,
+                        },
+                      })
+                    }
+                  />
+                </div>
+                <HelpText>저장 후 부모 화면의 데이터를 새로고침합니다</HelpText>
+              </div>
+            </div>
+          </ScrollArea>
+        </div>
+
+        <DialogFooter className="px-4 py-3 border-t shrink-0">
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
+            취소
+          </Button>
+          <Button onClick={handleSave} className="h-9 text-sm">
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx

@@ -0,0 +1,516 @@
+"use client";
+
+import React, { useState, useEffect } 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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings as SettingsIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { FormSectionConfig, FormFieldConfig, FIELD_TYPE_OPTIONS } from "../types";
+import { defaultFieldConfig, generateFieldId } from "../config";
+
+// 도움말 텍스트 컴포넌트
+const HelpText = ({ children }: { children: React.ReactNode }) => (
+  <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
+);
+
+interface SectionLayoutModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  section: FormSectionConfig;
+  onSave: (updates: Partial<FormSectionConfig>) => void;
+  onOpenFieldDetail: (field: FormFieldConfig) => void;
+}
+
+export function SectionLayoutModal({
+  open,
+  onOpenChange,
+  section,
+  onSave,
+  onOpenFieldDetail,
+}: SectionLayoutModalProps) {
+  // 로컬 상태로 섹션 관리
+  const [localSection, setLocalSection] = useState<FormSectionConfig>(section);
+
+  // open이 변경될 때마다 데이터 동기화
+  useEffect(() => {
+    if (open) {
+      setLocalSection(section);
+    }
+  }, [open, section]);
+
+  // 섹션 업데이트 함수
+  const updateSection = (updates: Partial<FormSectionConfig>) => {
+    setLocalSection((prev) => ({ ...prev, ...updates }));
+  };
+
+  // 저장 함수
+  const handleSave = () => {
+    onSave(localSection);
+    onOpenChange(false);
+  };
+
+  // 필드 추가
+  const addField = () => {
+    const newField: FormFieldConfig = {
+      ...defaultFieldConfig,
+      id: generateFieldId(),
+      label: `새 필드 ${localSection.fields.length + 1}`,
+      columnName: `field_${localSection.fields.length + 1}`,
+    };
+    updateSection({
+      fields: [...localSection.fields, newField],
+    });
+  };
+
+  // 필드 삭제
+  const removeField = (fieldId: string) => {
+    updateSection({
+      fields: localSection.fields.filter((f) => f.id !== fieldId),
+    });
+  };
+
+  // 필드 업데이트
+  const updateField = (fieldId: string, updates: Partial<FormFieldConfig>) => {
+    updateSection({
+      fields: localSection.fields.map((f) => (f.id === fieldId ? { ...f, ...updates } : f)),
+    });
+  };
+
+  // 필드 이동
+  const moveField = (fieldId: string, direction: "up" | "down") => {
+    const index = localSection.fields.findIndex((f) => f.id === fieldId);
+    if (index === -1) return;
+
+    if (direction === "up" && index === 0) return;
+    if (direction === "down" && index === localSection.fields.length - 1) return;
+
+    const newFields = [...localSection.fields];
+    const targetIndex = direction === "up" ? index - 1 : index + 1;
+    [newFields[index], newFields[targetIndex]] = [newFields[targetIndex], newFields[index]];
+
+    updateSection({ fields: newFields });
+  };
+
+  // 필드 타입별 색상
+  const getFieldTypeColor = (fieldType: FormFieldConfig["fieldType"]): string => {
+    switch (fieldType) {
+      case "text":
+      case "email":
+      case "password":
+      case "tel":
+        return "bg-blue-50 border-blue-200 text-blue-700";
+      case "number":
+        return "bg-cyan-50 border-cyan-200 text-cyan-700";
+      case "date":
+      case "datetime":
+        return "bg-purple-50 border-purple-200 text-purple-700";
+      case "select":
+        return "bg-green-50 border-green-200 text-green-700";
+      case "checkbox":
+        return "bg-pink-50 border-pink-200 text-pink-700";
+      case "textarea":
+        return "bg-orange-50 border-orange-200 text-orange-700";
+      default:
+        return "bg-gray-50 border-gray-200 text-gray-700";
+    }
+  };
+
+  // 필드 타입 라벨
+  const getFieldTypeLabel = (fieldType: FormFieldConfig["fieldType"]): string => {
+    const option = FIELD_TYPE_OPTIONS.find((opt) => opt.value === fieldType);
+    return option?.label || fieldType;
+  };
+
+  // 그리드 너비 라벨
+  const getGridSpanLabel = (span: number): string => {
+    switch (span) {
+      case 3:
+        return "1/4";
+      case 4:
+        return "1/3";
+      case 6:
+        return "1/2";
+      case 8:
+        return "2/3";
+      case 12:
+        return "전체";
+      default:
+        return `${span}/12`;
+    }
+  };
+
+  // 필드 상세 설정 열기
+  const handleOpenFieldDetail = (field: FormFieldConfig) => {
+    // 먼저 현재 변경사항 저장
+    onSave(localSection);
+    // 그 다음 필드 상세 모달 열기
+    onOpenFieldDetail(field);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[900px] max-h-[90vh] flex flex-col p-0">
+        <DialogHeader className="px-4 pt-4 pb-2 border-b shrink-0">
+          <DialogTitle className="text-base">섹션 레이아웃: {localSection.title}</DialogTitle>
+          <DialogDescription className="text-xs">
+            섹션의 필드 구성과 배치를 관리합니다. 필드를 추가하거나 순서를 변경할 수 있습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden px-4">
+          <ScrollArea className="h-[calc(90vh-180px)]">
+            <div className="space-y-4 py-3 pr-3">
+              {/* 섹션 기본 정보 */}
+              <div className="space-y-3 border rounded-lg p-3 bg-card">
+                <h3 className="text-xs font-semibold">섹션 기본 정보</h3>
+
+                <div>
+                  <Label className="text-[10px]">섹션 제목</Label>
+                  <Input
+                    value={localSection.title}
+                    onChange={(e) => updateSection({ title: e.target.value })}
+                    className="h-7 text-xs mt-1"
+                  />
+                  <HelpText>섹션의 제목을 입력하세요 (예: 기본 정보, 배송 정보)</HelpText>
+                </div>
+
+                <div>
+                  <Label className="text-[10px]">섹션 설명</Label>
+                  <Textarea
+                    value={localSection.description || ""}
+                    onChange={(e) => updateSection({ description: e.target.value })}
+                    className="text-xs mt-1 min-h-[50px]"
+                    placeholder="섹션에 대한 설명 (선택사항)"
+                  />
+                  <HelpText>사용자에게 표시될 섹션 설명입니다</HelpText>
+                </div>
+
+                <div>
+                  <Label className="text-[10px]">열 수 (레이아웃)</Label>
+                  <Select
+                    value={String(localSection.columns || 2)}
+                    onValueChange={(value) => updateSection({ columns: parseInt(value) })}
+                  >
+                    <SelectTrigger className="h-7 text-xs mt-1">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="1">1열 (세로 배치)</SelectItem>
+                      <SelectItem value="2">2열 (기본)</SelectItem>
+                      <SelectItem value="3">3열</SelectItem>
+                      <SelectItem value="4">4열</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <HelpText>필드들을 몇 열로 배치할지 설정합니다</HelpText>
+                </div>
+
+                <Separator />
+
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px]">접을 수 있음</span>
+                  <Switch
+                    checked={localSection.collapsible || false}
+                    onCheckedChange={(checked) => updateSection({ collapsible: checked })}
+                  />
+                </div>
+                <HelpText>섹션을 접었다 펼 수 있게 만듭니다</HelpText>
+
+                {localSection.collapsible && (
+                  <>
+                    <Separator className="my-2" />
+                    <div className="flex items-center justify-between">
+                      <span className="text-[10px]">기본으로 접힌 상태</span>
+                      <Switch
+                        checked={localSection.defaultCollapsed || false}
+                        onCheckedChange={(checked) => updateSection({ defaultCollapsed: checked })}
+                      />
+                    </div>
+                    <HelpText>처음 열릴 때 섹션이 접힌 상태로 표시됩니다</HelpText>
+                  </>
+                )}
+              </div>
+
+              {/* 반복 섹션 설정 */}
+              <div className="space-y-3 border rounded-lg p-3 bg-card">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-semibold">반복 섹션</span>
+                  <Switch
+                    checked={localSection.repeatable || false}
+                    onCheckedChange={(checked) => updateSection({ repeatable: checked })}
+                  />
+                </div>
+                <HelpText>
+                  겸직처럼 동일한 필드 그룹을 여러 개 추가할 수 있습니다
+                  <br />
+                  예: 경력사항, 학력사항, 자격증
+                </HelpText>
+
+                {localSection.repeatable && (
+                  <div className="space-y-2 pt-2 border-t">
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <Label className="text-[10px]">최소 개수</Label>
+                        <Input
+                          type="number"
+                          value={localSection.repeatConfig?.minItems || 0}
+                          onChange={(e) =>
+                            updateSection({
+                              repeatConfig: {
+                                ...localSection.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={localSection.repeatConfig?.maxItems || 10}
+                          onChange={(e) =>
+                            updateSection({
+                              repeatConfig: {
+                                ...localSection.repeatConfig,
+                                maxItems: parseInt(e.target.value) || 10,
+                              },
+                            })
+                          }
+                          className="h-6 text-[10px] mt-1"
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <Label className="text-[10px]">추가 버튼 텍스트</Label>
+                      <Input
+                        value={localSection.repeatConfig?.addButtonText || "+ 추가"}
+                        onChange={(e) =>
+                          updateSection({
+                            repeatConfig: {
+                              ...localSection.repeatConfig,
+                              addButtonText: e.target.value,
+                            },
+                          })
+                        }
+                        className="h-6 text-[10px] mt-1"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* 필드 목록 */}
+              <div className="space-y-3 border rounded-lg p-3 bg-card">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-xs font-semibold">필드 목록</h3>
+                    <Badge variant="secondary" className="text-[9px] px-1.5 py-0">
+                      {localSection.fields.length}개
+                    </Badge>
+                  </div>
+                  <Button size="sm" variant="outline" onClick={addField} className="h-7 text-[10px] px-2">
+                    <Plus className="h-3 w-3 mr-1" />
+                    필드 추가
+                  </Button>
+                </div>
+
+                <HelpText>
+                  필드를 추가하고 순서를 변경할 수 있습니다. "상세 설정"에서 필드 타입과 옵션을 설정하세요.
+                </HelpText>
+
+                {localSection.fields.length === 0 ? (
+                  <div className="text-center py-8 border border-dashed rounded-lg">
+                    <p className="text-sm text-muted-foreground mb-2">필드가 없습니다</p>
+                    <p className="text-xs text-muted-foreground">위의 "필드 추가" 버튼으로 필드를 추가하세요</p>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {localSection.fields.map((field, index) => (
+                      <div
+                        key={field.id}
+                        className={cn(
+                          "border rounded-lg overflow-hidden",
+                          getFieldTypeColor(field.fieldType)
+                        )}
+                      >
+                        {/* 필드 헤더 */}
+                        <div className="flex items-center justify-between p-2 bg-white/50">
+                          <div className="flex items-center gap-2 flex-1">
+                            {/* 순서 변경 버튼 */}
+                            <div className="flex flex-col">
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => moveField(field.id, "up")}
+                                disabled={index === 0}
+                                className="h-3 w-5 p-0"
+                              >
+                                <ChevronUp className="h-2.5 w-2.5" />
+                              </Button>
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => moveField(field.id, "down")}
+                                disabled={index === localSection.fields.length - 1}
+                                className="h-3 w-5 p-0"
+                              >
+                                <ChevronDown className="h-2.5 w-2.5" />
+                              </Button>
+                            </div>
+
+                            <GripVertical className="h-3.5 w-3.5 text-muted-foreground" />
+
+                            {/* 필드 정보 */}
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <span className="text-[11px] font-medium">{field.label}</span>
+                                <Badge
+                                  variant="outline"
+                                  className={cn("text-[8px] px-1 py-0", getFieldTypeColor(field.fieldType))}
+                                >
+                                  {getFieldTypeLabel(field.fieldType)}
+                                </Badge>
+                                {field.required && (
+                                  <Badge variant="destructive" className="text-[8px] px-1 py-0">
+                                    필수
+                                  </Badge>
+                                )}
+                                {field.hidden && (
+                                  <Badge variant="secondary" className="text-[8px] px-1 py-0">
+                                    숨김
+                                  </Badge>
+                                )}
+                              </div>
+                              <p className="text-[9px] text-muted-foreground mt-0.5">
+                                컬럼: {field.columnName} | 너비: {getGridSpanLabel(field.gridSpan || 6)}
+                              </p>
+                            </div>
+                          </div>
+
+                          {/* 액션 버튼 */}
+                          <div className="flex items-center gap-1">
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => handleOpenFieldDetail(field)}
+                              className="h-6 px-2 text-[9px]"
+                            >
+                              <SettingsIcon className="h-3 w-3 mr-1" />
+                              상세 설정
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              onClick={() => removeField(field.id)}
+                              className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                            >
+                              <Trash2 className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        </div>
+
+                        {/* 간단한 인라인 설정 */}
+                        <div className="px-2 pb-2 space-y-2 bg-white/30">
+                          <div className="grid grid-cols-2 gap-2">
+                            <div>
+                              <Label className="text-[9px]">라벨</Label>
+                              <Input
+                                value={field.label}
+                                onChange={(e) => updateField(field.id, { label: e.target.value })}
+                                className="h-6 text-[9px] mt-0.5"
+                              />
+                            </div>
+                            <div>
+                              <Label className="text-[9px]">컬럼명</Label>
+                              <Input
+                                value={field.columnName}
+                                onChange={(e) => updateField(field.id, { columnName: e.target.value })}
+                                className="h-6 text-[9px] mt-0.5"
+                              />
+                            </div>
+                          </div>
+
+                          <div className="grid grid-cols-2 gap-2">
+                            <div>
+                              <Label className="text-[9px]">필드 타입</Label>
+                              <Select
+                                value={field.fieldType}
+                                onValueChange={(value) =>
+                                  updateField(field.id, {
+                                    fieldType: value as FormFieldConfig["fieldType"],
+                                  })
+                                }
+                              >
+                                <SelectTrigger className="h-6 text-[9px] mt-0.5">
+                                  <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-[9px]">너비</Label>
+                              <Select
+                                value={String(field.gridSpan || 6)}
+                                onValueChange={(value) => updateField(field.id, { gridSpan: parseInt(value) })}
+                              >
+                                <SelectTrigger className="h-6 text-[9px] mt-0.5">
+                                  <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>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center justify-between pt-1">
+                            <span className="text-[9px]">필수</span>
+                            <Switch
+                              checked={field.required || false}
+                              onCheckedChange={(checked) => updateField(field.id, { required: checked })}
+                              className="scale-75"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </ScrollArea>
+        </div>
+
+        <DialogFooter className="px-4 py-3 border-t shrink-0">
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
+            취소
+          </Button>
+          <Button onClick={handleSave} className="h-9 text-sm">
+            저장 ({localSection.fields.length}개 필드)
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

frontend/lib/registry/components/universal-form-modal/types.ts

@@ -12,8 +12,9 @@ export interface SelectOptionConfig {
   staticOptions?: { value: string; label: string }[];
   // 테이블 기반 옵션
   tableName?: string;
-  valueColumn?: string;
-  labelColumn?: string;
+  valueColumn?: string; // 조인할 컬럼 (조회용 기본키)
+  labelColumn?: string; // 표시할 컬럼 (화면에 보여줄 텍스트)
+  saveColumn?: string; // 저장할 컬럼 (실제로 DB에 저장할 값, 미지정 시 valueColumn 사용)
   filterCondition?: string;
   // 공통코드 기반 옵션
   codeCategory?: string;

frontend/lib/utils/getComponentConfigPanel.tsx

@@ -269,7 +269,7 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
 
   if (loading) {
     return (
-      <div className="rounded-md border border-dashed border-gray-300 bg-gray-50 p-4">
+      <div className="rounded-md border border-dashed border-gray-300 bg-gray-50 p-4 w-full">
         <div className="flex items-center gap-2 text-gray-600">
           <span className="text-sm font-medium">⏳ 로딩 중...</span>
         </div>
@@ -280,7 +280,7 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
 
   if (error) {
     return (
-      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4">
+      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4 w-full">
         <div className="flex items-center gap-2 text-red-600">
           <span className="text-sm font-medium">⚠️ 로드 실패</span>
         </div>
@@ -292,7 +292,7 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
   if (!ConfigPanelComponent) {
     console.warn(`⚠️ DynamicComponentConfigPanel: ${componentId} ConfigPanelComponent가 null`);
     return (
-      <div className="rounded-md border border-dashed border-yellow-300 bg-yellow-50 p-4">
+      <div className="rounded-md border border-dashed border-yellow-300 bg-yellow-50 p-4 w-full">
         <div className="flex items-center gap-2 text-yellow-600">
           <span className="text-sm font-medium">⚠️ 설정 패널 없음</span>
         </div>