diff --git a/backend-node/src/controllers/fileController.ts b/backend-node/src/controllers/fileController.ts
index b1e31e3b..d4e8d0cf 100644
--- a/backend-node/src/controllers/fileController.ts
+++ b/backend-node/src/controllers/fileController.ts
@@ -341,6 +341,64 @@ export const uploadFiles = async (
       });
     }
 
+    // 🆕 레코드 모드: 해당 행의 attachments 컬럼 자동 업데이트
+    const isRecordMode = req.body.isRecordMode === "true" || req.body.isRecordMode === true;
+    
+    // 🔍 디버깅: 레코드 모드 조건 확인
+    console.log("🔍 [파일 업로드] 레코드 모드 조건 확인:", {
+      isRecordMode,
+      linkedTable,
+      recordId,
+      columnName,
+      finalTargetObjid,
+      "req.body.isRecordMode": req.body.isRecordMode,
+      "req.body.linkedTable": req.body.linkedTable,
+      "req.body.recordId": req.body.recordId,
+      "req.body.columnName": req.body.columnName,
+    });
+    
+    if (isRecordMode && linkedTable && recordId && columnName) {
+      try {
+        // 해당 레코드의 모든 첨부파일 조회
+        const allFiles = await query<any>(
+          `SELECT objid, real_file_name, file_size, file_ext, file_path, regdate
+           FROM attach_file_info
+           WHERE target_objid = $1 AND status = 'ACTIVE'
+           ORDER BY regdate DESC`,
+          [finalTargetObjid]
+        );
+
+        // attachments JSONB 형태로 변환
+        const attachmentsJson = allFiles.map((f: any) => ({
+          objid: f.objid.toString(),
+          realFileName: f.real_file_name,
+          fileSize: Number(f.file_size),
+          fileExt: f.file_ext,
+          filePath: f.file_path,
+          regdate: f.regdate?.toISOString(),
+        }));
+
+        // 해당 테이블의 attachments 컬럼 업데이트
+        // 🔒 멀티테넌시: company_code 필터 추가
+        await query(
+          `UPDATE ${linkedTable} 
+           SET ${columnName} = $1::jsonb, updated_date = NOW()
+           WHERE id = $2 AND company_code = $3`,
+          [JSON.stringify(attachmentsJson), recordId, companyCode]
+        );
+
+        console.log("📎 [레코드 모드] attachments 컬럼 자동 업데이트:", {
+          tableName: linkedTable,
+          recordId: recordId,
+          columnName: columnName,
+          fileCount: attachmentsJson.length,
+        });
+      } catch (updateError) {
+        // attachments 컬럼 업데이트 실패해도 파일 업로드는 성공으로 처리
+        console.warn("⚠️ attachments 컬럼 업데이트 실패 (무시):", updateError);
+      }
+    }
+
     res.json({
       success: true,
       message: `${files.length}개 파일 업로드 완료`,
@@ -405,6 +463,56 @@ export const deleteFile = async (
       ["DELETED", parseInt(objid)]
     );
 
+    // 🆕 레코드 모드: 해당 행의 attachments 컬럼 자동 업데이트
+    const targetObjid = fileRecord.target_objid;
+    if (targetObjid && !targetObjid.startsWith('screen_files:') && !targetObjid.startsWith('temp_')) {
+      // targetObjid 파싱: tableName:recordId:columnName 형식
+      const parts = targetObjid.split(':');
+      if (parts.length >= 3) {
+        const [tableName, recordId, columnName] = parts;
+        
+        try {
+          // 해당 레코드의 남은 첨부파일 조회
+          const remainingFiles = await query<any>(
+            `SELECT objid, real_file_name, file_size, file_ext, file_path, regdate
+             FROM attach_file_info
+             WHERE target_objid = $1 AND status = 'ACTIVE'
+             ORDER BY regdate DESC`,
+            [targetObjid]
+          );
+
+          // attachments JSONB 형태로 변환
+          const attachmentsJson = remainingFiles.map((f: any) => ({
+            objid: f.objid.toString(),
+            realFileName: f.real_file_name,
+            fileSize: Number(f.file_size),
+            fileExt: f.file_ext,
+            filePath: f.file_path,
+            regdate: f.regdate?.toISOString(),
+          }));
+
+          // 해당 테이블의 attachments 컬럼 업데이트
+          // 🔒 멀티테넌시: company_code 필터 추가
+          await query(
+            `UPDATE ${tableName} 
+             SET ${columnName} = $1::jsonb, updated_date = NOW()
+             WHERE id = $2 AND company_code = $3`,
+            [JSON.stringify(attachmentsJson), recordId, fileRecord.company_code]
+          );
+
+          console.log("📎 [파일 삭제] attachments 컬럼 자동 업데이트:", {
+            tableName,
+            recordId,
+            columnName,
+            remainingFiles: attachmentsJson.length,
+          });
+        } catch (updateError) {
+          // attachments 컬럼 업데이트 실패해도 파일 삭제는 성공으로 처리
+          console.warn("⚠️ attachments 컬럼 업데이트 실패 (무시):", updateError);
+        }
+      }
+    }
+
     res.json({
       success: true,
       message: "파일이 삭제되었습니다.",
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index 2dfe0770..66c70a77 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -2141,3 +2141,4 @@ export async function multiTableSave(
     client.release();
   }
 }
+
diff --git a/backend-node/src/services/adminService.ts b/backend-node/src/services/adminService.ts
index c6ab17c6..5ca6b392 100644
--- a/backend-node/src/services/adminService.ts
+++ b/backend-node/src/services/adminService.ts
@@ -19,15 +19,21 @@ export class AdminService {
 
       // menuType에 따른 WHERE 조건 생성
       const menuTypeCondition =
-        menuType !== undefined ? `MENU.MENU_TYPE = ${parseInt(menuType)}` : "1 = 1";
-      
+        menuType !== undefined
+          ? `MENU.MENU_TYPE = ${parseInt(menuType)}`
+          : "1 = 1";
+
       // 메뉴 관리 화면인지 좌측 사이드바인지 구분
       // includeInactive가 true거나 menuType이 undefined면 메뉴 관리 화면
       const includeInactive = paramMap.includeInactive === true;
       const isManagementScreen = includeInactive || menuType === undefined;
       // 메뉴 관리 화면: 모든 상태의 메뉴 표시, 좌측 사이드바: active만 표시
-      const statusCondition = isManagementScreen ? "1 = 1" : "MENU.STATUS = 'active'";
-      const subStatusCondition = isManagementScreen ? "1 = 1" : "MENU_SUB.STATUS = 'active'";
+      const statusCondition = isManagementScreen
+        ? "1 = 1"
+        : "MENU.STATUS = 'active'";
+      const subStatusCondition = isManagementScreen
+        ? "1 = 1"
+        : "MENU_SUB.STATUS = 'active'";
 
       // 1. 권한 그룹 기반 필터링 (좌측 사이드바인 경우만)
       let authFilter = "";
@@ -35,7 +41,11 @@ export class AdminService {
       let queryParams: any[] = [userLang];
       let paramIndex = 2;
 
-      if (menuType !== undefined && userType !== "SUPER_ADMIN" && !isManagementScreen) {
+      if (
+        menuType !== undefined &&
+        userType !== "SUPER_ADMIN" &&
+        !isManagementScreen
+      ) {
         // 좌측 사이드바 + SUPER_ADMIN이 아닌 경우만 권한 체크
         const userRoleGroups = await query<any>(
           `
@@ -56,45 +66,45 @@ export class AdminService {
         );
 
         if (userType === "COMPANY_ADMIN") {
-          // 회사 관리자: 자기 회사 메뉴는 모두, 공통 메뉴는 권한 있는 것만
+          // 회사 관리자: 권한 그룹 기반 필터링 적용
           if (userRoleGroups.length > 0) {
             const roleObjids = userRoleGroups.map((rg: any) => rg.role_objid);
-            // 루트 메뉴: 회사 코드만 체크 (권한 체크 X)
-            authFilter = `AND MENU.COMPANY_CODE IN ($${paramIndex}, '*')`;
+            // 회사 관리자도 권한 그룹 설정에 따라 메뉴 필터링
+            authFilter = `
+              AND MENU.COMPANY_CODE IN ($${paramIndex}, '*')
+              AND EXISTS (
+                SELECT 1
+                FROM rel_menu_auth rma
+                WHERE rma.menu_objid = MENU.OBJID
+                  AND rma.auth_objid = ANY($${paramIndex + 1})
+                  AND rma.read_yn = 'Y'
+              )
+            `;
             queryParams.push(userCompanyCode);
-            const companyParamIndex = paramIndex;
             paramIndex++;
 
-            // 하위 메뉴: 회사 메뉴는 모두, 공통 메뉴는 권한 체크
+            // 하위 메뉴도 권한 체크
             unionFilter = `
-              AND (
-                MENU_SUB.COMPANY_CODE = $${companyParamIndex}
-                OR (
-                  MENU_SUB.COMPANY_CODE = '*'
-                  AND EXISTS (
-                    SELECT 1
-                    FROM rel_menu_auth rma
-                    WHERE rma.menu_objid = MENU_SUB.OBJID
-                      AND rma.auth_objid = ANY($${paramIndex})
-                      AND rma.read_yn = 'Y'
-                  )
-                )
+              AND MENU_SUB.COMPANY_CODE IN ($${paramIndex - 1}, '*')
+              AND EXISTS (
+                SELECT 1
+                FROM rel_menu_auth rma
+                WHERE rma.menu_objid = MENU_SUB.OBJID
+                  AND rma.auth_objid = ANY($${paramIndex})
+                  AND rma.read_yn = 'Y'
               )
             `;
             queryParams.push(roleObjids);
             paramIndex++;
             logger.info(
-              `✅ 회사 관리자: 회사 ${userCompanyCode} 메뉴 전체 + 권한 있는 공통 메뉴`
+              `✅ 회사 관리자: 권한 있는 메뉴만 (${roleObjids.length}개 그룹)`
             );
           } else {
-            // 권한 그룹이 없는 회사 관리자: 자기 회사 메뉴만
-            authFilter = `AND MENU.COMPANY_CODE = $${paramIndex}`;
-            unionFilter = `AND MENU_SUB.COMPANY_CODE = $${paramIndex}`;
-            queryParams.push(userCompanyCode);
-            paramIndex++;
-            logger.info(
-              `✅ 회사 관리자 (권한 그룹 없음): 회사 ${userCompanyCode} 메뉴만`
+            // 권한 그룹이 없는 회사 관리자: 메뉴 없음
+            logger.warn(
+              `⚠️ 회사 관리자 ${userId}는 권한 그룹이 없어 메뉴가 표시되지 않습니다.`
             );
+            return [];
           }
         } else {
           // 일반 사용자: 권한 그룹 필수
@@ -131,7 +141,11 @@ export class AdminService {
             return [];
           }
         }
-      } else if (menuType !== undefined && userType === "SUPER_ADMIN" && !isManagementScreen) {
+      } else if (
+        menuType !== undefined &&
+        userType === "SUPER_ADMIN" &&
+        !isManagementScreen
+      ) {
         // 좌측 사이드바 + SUPER_ADMIN: 권한 그룹 체크 없이 모든 공통 메뉴 표시
         logger.info(`✅ 최고 관리자는 권한 그룹 체크 없이 모든 공통 메뉴 표시`);
         // unionFilter는 비워둠 (하위 메뉴도 공통 메뉴만)
@@ -167,7 +181,7 @@ export class AdminService {
           companyFilter = `AND MENU.COMPANY_CODE = $${paramIndex}`;
           queryParams.push(userCompanyCode);
           paramIndex++;
-          
+
           // 하위 메뉴에도 회사 필터링 적용 (공통 메뉴 제외)
           if (unionFilter === "") {
             unionFilter = `AND MENU_SUB.COMPANY_CODE = $${paramIndex - 1}`;
diff --git a/backend-node/src/services/dynamicFormService.ts b/backend-node/src/services/dynamicFormService.ts
index 77593fa1..65efcd1b 100644
--- a/backend-node/src/services/dynamicFormService.ts
+++ b/backend-node/src/services/dynamicFormService.ts
@@ -903,6 +903,9 @@ export class DynamicFormService {
             return `${key} = $${index + 1}::numeric`;
           } else if (dataType === "boolean") {
             return `${key} = $${index + 1}::boolean`;
+          } else if (dataType === 'jsonb' || dataType === 'json') {
+            // 🆕 JSONB/JSON 타입은 명시적 캐스팅
+            return `${key} = $${index + 1}::jsonb`;
           } else {
             // 문자열 타입은 캐스팅 불필요
             return `${key} = $${index + 1}`;
@@ -910,7 +913,17 @@ export class DynamicFormService {
         })
         .join(", ");
 
-      const values: any[] = Object.values(changedFields);
+      // 🆕 JSONB 타입 값은 JSON 문자열로 변환
+      const values: any[] = Object.keys(changedFields).map((key) => {
+        const value = changedFields[key];
+        const dataType = columnTypes[key];
+        
+        // JSONB/JSON 타입이고 배열/객체인 경우 JSON 문자열로 변환
+        if ((dataType === 'jsonb' || dataType === 'json') && (Array.isArray(value) || (typeof value === 'object' && value !== null))) {
+          return JSON.stringify(value);
+        }
+        return value;
+      });
       values.push(id); // WHERE 조건용 ID 추가
 
       // 🔑 Primary Key 타입에 맞게 캐스팅
diff --git a/backend-node/src/services/numberingRuleService.ts b/backend-node/src/services/numberingRuleService.ts
index 5272547a..7ba5c47e 100644
--- a/backend-node/src/services/numberingRuleService.ts
+++ b/backend-node/src/services/numberingRuleService.ts
@@ -607,7 +607,9 @@ class NumberingRuleService {
     }
 
     const result = await pool.query(query, params);
-    if (result.rowCount === 0) return null;
+    if (result.rowCount === 0) {
+      return null;
+    }
 
     const rule = result.rows[0];
 
diff --git a/backend-node/src/services/screenManagementService.ts b/backend-node/src/services/screenManagementService.ts
index 6628cf4c..9fc0f079 100644
--- a/backend-node/src/services/screenManagementService.ts
+++ b/backend-node/src/services/screenManagementService.ts
@@ -2360,30 +2360,33 @@ export class ScreenManagementService {
       const lockId = Buffer.from(companyCode).reduce((acc, byte) => acc + byte, 0);
       await client.query('SELECT pg_advisory_xact_lock($1)', [lockId]);
 
-      // 현재 최대 번호 조회
-      const existingScreens = await client.query<{ screen_code: string }>(
-        `SELECT screen_code FROM screen_definitions
-         WHERE company_code = $1 AND screen_code LIKE $2
-         ORDER BY screen_code DESC
-         LIMIT 10`,
-        [companyCode, `${companyCode}%`]
+      // 현재 최대 번호 조회 (숫자 추출 후 정렬)
+      // 패턴: COMPANY_CODE_XXX 또는 COMPANY_CODEXXX
+      const existingScreens = await client.query<{ screen_code: string; num: number }>(
+        `SELECT screen_code, 
+                COALESCE(
+                  NULLIF(
+                    regexp_replace(screen_code, $2, '\\1'),
+                    screen_code
+                  )::integer,
+                  0
+                ) as num
+         FROM screen_definitions
+         WHERE company_code = $1 
+           AND screen_code ~ $2
+           AND deleted_date IS NULL
+         ORDER BY num DESC
+         LIMIT 1`,
+        [companyCode, `^${companyCode.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}[_]?(\\d+)$`]
       );
 
       let maxNumber = 0;
-      const pattern = new RegExp(
-        `^${companyCode.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?:_)?(\\d+)$`
-      );
-
-      for (const screen of existingScreens.rows) {
-        const match = screen.screen_code.match(pattern);
-        if (match) {
-          const number = parseInt(match[1], 10);
-          if (number > maxNumber) {
-            maxNumber = number;
-          }
-        }
+      if (existingScreens.rows.length > 0 && existingScreens.rows[0].num) {
+        maxNumber = existingScreens.rows[0].num;
       }
 
+      console.log(`🔢 현재 최대 화면 코드 번호: ${companyCode} → ${maxNumber}`);
+
       // count개의 코드를 순차적으로 생성
       const codes: string[] = [];
       for (let i = 0; i < count; i++) {
diff --git a/frontend/components/admin/RoleDetailManagement.tsx b/frontend/components/admin/RoleDetailManagement.tsx
index 8f3d8fbb..27a6c07d 100644
--- a/frontend/components/admin/RoleDetailManagement.tsx
+++ b/frontend/components/admin/RoleDetailManagement.tsx
@@ -9,6 +9,7 @@ import { useRouter } from "next/navigation";
 import { AlertCircle } from "lucide-react";
 import { DualListBox } from "@/components/common/DualListBox";
 import { MenuPermissionsTable } from "./MenuPermissionsTable";
+import { useMenu } from "@/contexts/MenuContext";
 
 interface RoleDetailManagementProps {
   roleId: string;
@@ -25,6 +26,7 @@ interface RoleDetailManagementProps {
 export function RoleDetailManagement({ roleId }: RoleDetailManagementProps) {
   const { user: currentUser } = useAuth();
   const router = useRouter();
+  const { refreshMenus } = useMenu();
 
   const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";
 
@@ -178,6 +180,9 @@ export function RoleDetailManagement({ roleId }: RoleDetailManagementProps) {
       if (response.success) {
         alert("멤버가 성공적으로 저장되었습니다.");
         loadMembers(); // 새로고침
+
+        // 사이드바 메뉴 새로고침 (현재 사용자가 영향받을 수 있음)
+        await refreshMenus();
       } else {
         alert(response.message || "멤버 저장에 실패했습니다.");
       }
@@ -187,7 +192,7 @@ export function RoleDetailManagement({ roleId }: RoleDetailManagementProps) {
     } finally {
       setIsSavingMembers(false);
     }
-  }, [roleGroup, selectedUsers, loadMembers]);
+  }, [roleGroup, selectedUsers, loadMembers, refreshMenus]);
 
   // 메뉴 권한 저장 핸들러
   const handleSavePermissions = useCallback(async () => {
@@ -200,6 +205,9 @@ export function RoleDetailManagement({ roleId }: RoleDetailManagementProps) {
       if (response.success) {
         alert("메뉴 권한이 성공적으로 저장되었습니다.");
         loadMenuPermissions(); // 새로고침
+
+        // 사이드바 메뉴 새로고침 (권한 변경 즉시 반영)
+        await refreshMenus();
       } else {
         alert(response.message || "메뉴 권한 저장에 실패했습니다.");
       }
@@ -209,7 +217,7 @@ export function RoleDetailManagement({ roleId }: RoleDetailManagementProps) {
     } finally {
       setIsSavingPermissions(false);
     }
-  }, [roleGroup, menuPermissions, loadMenuPermissions]);
+  }, [roleGroup, menuPermissions, loadMenuPermissions, refreshMenus]);
 
   if (isLoading) {
     return (
diff --git a/frontend/components/screen/CopyScreenModal.tsx b/frontend/components/screen/CopyScreenModal.tsx
index c37603c5..f5e71c4c 100644
--- a/frontend/components/screen/CopyScreenModal.tsx
+++ b/frontend/components/screen/CopyScreenModal.tsx
@@ -166,18 +166,28 @@ export default function CopyScreenModal({
 
   // linkedScreens 로딩이 완료되면 화면 코드 생성
   useEffect(() => {
+    // 모달 화면들의 코드가 모두 설정되었는지 확인
+    const allModalCodesSet = linkedScreens.length === 0 || 
+      linkedScreens.every(screen => screen.newScreenCode);
+    
     console.log("🔍 코드 생성 조건 체크:", {
       targetCompanyCode,
       loadingLinkedScreens,
       screenCode,
       linkedScreensCount: linkedScreens.length,
+      allModalCodesSet,
     });
     
-    if (targetCompanyCode && !loadingLinkedScreens && !screenCode) {
+    // 조건: 회사 코드가 있고, 로딩이 완료되고, (메인 코드가 없거나 모달 코드가 없을 때)
+    const needsCodeGeneration = targetCompanyCode && 
+      !loadingLinkedScreens && 
+      (!screenCode || (linkedScreens.length > 0 && !allModalCodesSet));
+    
+    if (needsCodeGeneration) {
       console.log("✅ 화면 코드 생성 시작 (linkedScreens 개수:", linkedScreens.length, ")");
       generateScreenCodes();
     }
-  }, [targetCompanyCode, loadingLinkedScreens, screenCode]);
+  }, [targetCompanyCode, loadingLinkedScreens, screenCode, linkedScreens]);
 
   // 회사 목록 조회
   const loadCompanies = async () => {
diff --git a/frontend/components/screen/EditModal.tsx b/frontend/components/screen/EditModal.tsx
index 2a3050fc..0a87db3f 100644
--- a/frontend/components/screen/EditModal.tsx
+++ b/frontend/components/screen/EditModal.tsx
@@ -678,12 +678,13 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
     }
 
     // 화면관리에서 설정한 크기 = 컨텐츠 영역 크기
-    // 실제 모달 크기 = 컨텐츠 + 헤더 + gap + padding
+    // 실제 모달 크기 = 컨텐츠 + 헤더 + gap + padding + 라벨 공간
     const headerHeight = 52; // DialogHeader (타이틀 + border-b + py-3)
     const dialogGap = 16; // DialogContent gap-4
     const extraPadding = 24; // 추가 여백 (안전 마진)
+    const labelSpace = 30; // 입력 필드 위 라벨 공간 (-top-6 = 24px + 여유)
 
-    const totalHeight = screenDimensions.height + headerHeight + dialogGap + extraPadding;
+    const totalHeight = screenDimensions.height + headerHeight + dialogGap + extraPadding + labelSpace;
 
     return {
       className: "overflow-hidden p-0",
@@ -729,7 +730,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
               className="relative bg-white"
               style={{
                 width: screenDimensions?.width || 800,
-                height: screenDimensions?.height || 600,
+                height: (screenDimensions?.height || 600) + 30, // 라벨 공간 추가
                 transformOrigin: "center center",
                 maxWidth: "100%",
                 maxHeight: "100%",
@@ -739,13 +740,14 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                 // 컴포넌트 위치를 offset만큼 조정
                 const offsetX = screenDimensions?.offsetX || 0;
                 const offsetY = screenDimensions?.offsetY || 0;
+                const labelSpace = 30; // 라벨 공간 (입력 필드 위 -top-6 라벨용)
 
                 const adjustedComponent = {
                   ...component,
                   position: {
                     ...component.position,
                     x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
-                    y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
+                    y: parseFloat(component.position?.y?.toString() || "0") - offsetY + labelSpace, // 라벨 공간 추가
                   },
                 };
 
@@ -759,12 +761,27 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                   });
                 }
 
+                // 🔑 첨부파일 컴포넌트가 행(레코드) 단위로 파일을 저장할 수 있도록 tableName 추가
+                const enrichedFormData = {
+                  ...(groupData.length > 0 ? groupData[0] : formData),
+                  tableName: screenData.screenInfo?.tableName, // 테이블명 추가
+                  screenId: modalState.screenId, // 화면 ID 추가
+                };
+                
+                // 🔍 디버깅: enrichedFormData 확인
+                console.log("🔑 [EditModal] enrichedFormData 생성:", {
+                  "screenData.screenInfo": screenData.screenInfo,
+                  "screenData.screenInfo?.tableName": screenData.screenInfo?.tableName,
+                  "enrichedFormData.tableName": enrichedFormData.tableName,
+                  "enrichedFormData.id": enrichedFormData.id,
+                });
+
                 return (
                   <InteractiveScreenViewerDynamic
                     key={component.id}
                     component={adjustedComponent}
                     allComponents={screenData.components}
-                    formData={groupData.length > 0 ? groupData[0] : formData}
+                    formData={enrichedFormData}
                     onFormDataChange={(fieldName, value) => {
                       // 🆕 그룹 데이터가 있으면 처리
                       if (groupData.length > 0) {
diff --git a/frontend/lib/api/client.ts b/frontend/lib/api/client.ts
index f4a3ccf7..967e43ca 100644
--- a/frontend/lib/api/client.ts
+++ b/frontend/lib/api/client.ts
@@ -317,6 +317,11 @@ apiClient.interceptors.response.use(
       return Promise.reject(error);
     }
 
+    // 채번 규칙 미리보기 API 실패는 조용하게 처리 (화면 로드 시 자주 발생)
+    if (url?.includes("/numbering-rules/") && url?.includes("/preview")) {
+      return Promise.reject(error);
+    }
+
     // 다른 에러들은 기존처럼 상세 로그 출력
     console.error("API 응답 오류:", {
       status: status,
@@ -324,7 +329,6 @@ apiClient.interceptors.response.use(
       url: url,
       data: error.response?.data,
       message: error.message,
-      headers: error.config?.headers,
     });
 
     // 401 에러 처리
diff --git a/frontend/lib/api/numberingRule.ts b/frontend/lib/api/numberingRule.ts
index b531edce..551a8d25 100644
--- a/frontend/lib/api/numberingRule.ts
+++ b/frontend/lib/api/numberingRule.ts
@@ -109,11 +109,24 @@ export async function deleteNumberingRule(ruleId: string): Promise<ApiResponse<v
 export async function previewNumberingCode(
   ruleId: string
 ): Promise<ApiResponse<{ generatedCode: string }>> {
+  // ruleId 유효성 검사
+  if (!ruleId || ruleId === "undefined" || ruleId === "null") {
+    return { success: false, error: "채번 규칙 ID가 설정되지 않았습니다" };
+  }
+
   try {
     const response = await apiClient.post(`/numbering-rules/${ruleId}/preview`);
+    if (!response.data) {
+      return { success: false, error: "서버 응답이 비어있습니다" };
+    }
     return response.data;
   } catch (error: any) {
-    return { success: false, error: error.message || "코드 미리보기 실패" };
+    const errorMessage = 
+      error.response?.data?.error || 
+      error.response?.data?.message || 
+      error.message || 
+      "코드 미리보기 실패";
+    return { success: false, error: errorMessage };
   }
 }
 
diff --git a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
index 8dda7864..805fe755 100644
--- a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
@@ -10,6 +10,7 @@ import { apiClient } from "@/lib/api/client";
 import { FileViewerModal } from "./FileViewerModal";
 import { FileManagerModal } from "./FileManagerModal";
 import { FileUploadConfig, FileInfo, FileUploadStatus, FileUploadResponse } from "./types";
+import { useAuth } from "@/hooks/useAuth";
 import {
   Upload,
   File,
@@ -92,6 +93,9 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
   onDragEnd,
   onUpdate,
 }) => {
+  // 🔑 인증 정보 가져오기
+  const { user } = useAuth();
+  
   const [uploadedFiles, setUploadedFiles] = useState<FileInfo[]>([]);
   const [uploadStatus, setUploadStatus] = useState<FileUploadStatus>("idle");
   const [dragOver, setDragOver] = useState(false);
@@ -102,28 +106,94 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
   const [representativeImageUrl, setRepresentativeImageUrl] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // 🔑 레코드 모드 판단: formData에 id가 있으면 특정 행에 연결된 파일 관리
+  const isRecordMode = !!(formData?.id && !String(formData.id).startsWith('temp_'));
+  const recordTableName = formData?.tableName || component.tableName;
+  const recordId = formData?.id;
+  // 🔑 컬럼명 결정: 레코드 모드에서는 무조건 'attachments' 사용
+  // component.columnName이나 component.id는 '파일_업로드' 같은 한글 라벨일 수 있어서 DB 컬럼명으로 부적합
+  // 레코드 모드가 아닐 때만 component.columnName 또는 component.id 사용
+  const columnName = isRecordMode ? 'attachments' : (component.columnName || component.id || 'attachments');
+  
+  // 🔑 레코드 모드용 targetObjid 생성
+  const getRecordTargetObjid = useCallback(() => {
+    if (isRecordMode && recordTableName && recordId) {
+      return `${recordTableName}:${recordId}:${columnName}`;
+    }
+    return null;
+  }, [isRecordMode, recordTableName, recordId, columnName]);
+
+  // 🔑 레코드별 고유 키 생성 (localStorage, 전역 상태용)
+  const getUniqueKey = useCallback(() => {
+    if (isRecordMode && recordTableName && recordId) {
+      // 레코드 모드: 테이블명:레코드ID:컴포넌트ID 형태로 고유 키 생성
+      return `fileUpload_${recordTableName}_${recordId}_${component.id}`;
+    }
+    // 기본 모드: 컴포넌트 ID만 사용
+    return `fileUpload_${component.id}`;
+  }, [isRecordMode, recordTableName, recordId, component.id]);
+
+  // 🔍 디버깅: 레코드 모드 상태 로깅
+  useEffect(() => {
+    console.log("📎 [FileUploadComponent] 모드 확인:", {
+      isRecordMode,
+      recordTableName,
+      recordId,
+      columnName,
+      targetObjid: getRecordTargetObjid(),
+      uniqueKey: getUniqueKey(),
+      formDataKeys: formData ? Object.keys(formData) : [],
+      // 🔍 추가 디버깅: 어디서 tableName이 오는지 확인
+      "formData.tableName": formData?.tableName,
+      "component.tableName": component.tableName,
+      "component.columnName": component.columnName,
+      "component.id": component.id,
+    });
+  }, [isRecordMode, recordTableName, recordId, columnName, getRecordTargetObjid, getUniqueKey, formData, component.tableName, component.columnName, component.id]);
+
+  // 🆕 레코드 ID 변경 시 파일 목록 초기화 및 새로 로드
+  const prevRecordIdRef = useRef<any>(null);
+  useEffect(() => {
+    if (prevRecordIdRef.current !== recordId) {
+      console.log("📎 [FileUploadComponent] 레코드 ID 변경 감지:", {
+        prev: prevRecordIdRef.current,
+        current: recordId,
+        isRecordMode,
+      });
+      prevRecordIdRef.current = recordId;
+      
+      // 레코드 모드에서 레코드 ID가 변경되면 파일 목록 초기화
+      if (isRecordMode) {
+        setUploadedFiles([]);
+      }
+    }
+  }, [recordId, isRecordMode]);
+
   // 컴포넌트 마운트 시 즉시 localStorage에서 파일 복원
   useEffect(() => {
     if (!component?.id) return;
 
     try {
-      const backupKey = `fileUpload_${component.id}`;
+      // 🔑 레코드별 고유 키 사용
+      const backupKey = getUniqueKey();
       const backupFiles = localStorage.getItem(backupKey);
       if (backupFiles) {
         const parsedFiles = JSON.parse(backupFiles);
         if (parsedFiles.length > 0) {
           console.log("🚀 컴포넌트 마운트 시 파일 즉시 복원:", {
+            uniqueKey: backupKey,
             componentId: component.id,
+            recordId: recordId,
             restoredFiles: parsedFiles.length,
             files: parsedFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName })),
           });
           setUploadedFiles(parsedFiles);
 
-          // 전역 상태에도 복원
+          // 전역 상태에도 복원 (레코드별 고유 키 사용)
           if (typeof window !== "undefined") {
             (window as any).globalFileState = {
               ...(window as any).globalFileState,
-              [component.id]: parsedFiles,
+              [backupKey]: parsedFiles,
             };
           }
         }
@@ -131,7 +201,7 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
     } catch (e) {
       console.warn("컴포넌트 마운트 시 파일 복원 실패:", e);
     }
-  }, [component.id]); // component.id가 변경될 때만 실행
+  }, [component.id, getUniqueKey, recordId]); // 레코드별 고유 키 변경 시 재실행
 
   // 🎯 화면설계 모드에서 실제 화면으로의 실시간 동기화 이벤트 리스너
   useEffect(() => {
@@ -152,12 +222,14 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
         const newFiles = event.detail.files || [];
         setUploadedFiles(newFiles);
 
-        // localStorage 백업 업데이트
+        // localStorage 백업 업데이트 (레코드별 고유 키 사용)
         try {
-          const backupKey = `fileUpload_${component.id}`;
+          const backupKey = getUniqueKey();
           localStorage.setItem(backupKey, JSON.stringify(newFiles));
           console.log("💾 화면설계 모드 동기화 후 localStorage 백업 업데이트:", {
+            uniqueKey: backupKey,
             componentId: component.id,
+            recordId: recordId,
             fileCount: newFiles.length,
           });
         } catch (e) {
@@ -201,6 +273,16 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
     if (!component?.id) return false;
 
     try {
+      // 🔑 레코드 모드: 해당 행의 파일만 조회
+      if (isRecordMode && recordTableName && recordId) {
+        console.log("📂 [FileUploadComponent] 레코드 모드 파일 조회:", {
+          tableName: recordTableName,
+          recordId: recordId,
+          columnName: columnName,
+          targetObjid: getRecordTargetObjid(),
+        });
+      }
+
       // 1. formData에서 screenId 가져오기
       let screenId = formData?.screenId;
       
@@ -232,11 +314,13 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
       const params = {
         screenId,
         componentId: component.id,
-        tableName: formData?.tableName || component.tableName,
-        recordId: formData?.id,
-        columnName: component.columnName || component.id, // 🔑 columnName이 없으면 component.id 사용
+        tableName: recordTableName || formData?.tableName || component.tableName,
+        recordId: recordId || formData?.id,
+        columnName: columnName, // 🔑 레코드 모드에서 사용하는 columnName
       };
 
+      console.log("📂 [FileUploadComponent] 파일 조회 파라미터:", params);
+
       const response = await getComponentFiles(params);
 
       if (response.success) {
@@ -255,11 +339,11 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
         }));
 
 
-        // 🔄 localStorage의 기존 파일과 서버 파일 병합
+        // 🔄 localStorage의 기존 파일과 서버 파일 병합 (레코드별 고유 키 사용)
         let finalFiles = formattedFiles;
+        const uniqueKey = getUniqueKey();
         try {
-          const backupKey = `fileUpload_${component.id}`;
-          const backupFiles = localStorage.getItem(backupKey);
+          const backupFiles = localStorage.getItem(uniqueKey);
           if (backupFiles) {
             const parsedBackupFiles = JSON.parse(backupFiles);
 
@@ -268,7 +352,12 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             const additionalFiles = parsedBackupFiles.filter((f: any) => !serverObjIds.has(f.objid));
 
             finalFiles = [...formattedFiles, ...additionalFiles];
-
+            console.log("📂 [FileUploadComponent] 파일 병합 완료:", {
+              uniqueKey,
+              serverFiles: formattedFiles.length,
+              localFiles: parsedBackupFiles.length,
+              finalFiles: finalFiles.length,
+            });
           }
         } catch (e) {
           console.warn("파일 병합 중 오류:", e);
@@ -276,11 +365,11 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
 
         setUploadedFiles(finalFiles);
 
-        // 전역 상태에도 저장
+        // 전역 상태에도 저장 (레코드별 고유 키 사용)
         if (typeof window !== "undefined") {
           (window as any).globalFileState = {
             ...(window as any).globalFileState,
-            [component.id]: finalFiles,
+            [uniqueKey]: finalFiles,
           };
 
           // 🌐 전역 파일 저장소에 등록 (페이지 간 공유용)
@@ -288,12 +377,12 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             uploadPage: window.location.pathname,
             componentId: component.id,
             screenId: formData?.screenId,
+            recordId: recordId,
           });
 
-          // localStorage 백업도 병합된 파일로 업데이트
+          // localStorage 백업도 병합된 파일로 업데이트 (레코드별 고유 키 사용)
           try {
-            const backupKey = `fileUpload_${component.id}`;
-            localStorage.setItem(backupKey, JSON.stringify(finalFiles));
+            localStorage.setItem(uniqueKey, JSON.stringify(finalFiles));
           } catch (e) {
             console.warn("localStorage 백업 업데이트 실패:", e);
           }
@@ -304,7 +393,7 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
       console.error("파일 조회 오류:", error);
     }
     return false; // 기존 로직 사용
-  }, [component.id, component.tableName, component.columnName, formData?.screenId, formData?.tableName, formData?.id]);
+  }, [component.id, component.tableName, component.columnName, formData?.screenId, formData?.tableName, formData?.id, getUniqueKey, recordId, isRecordMode, recordTableName, columnName]);
 
   // 컴포넌트 파일 동기화 (DB 우선, localStorage는 보조)
   useEffect(() => {
@@ -316,6 +405,8 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
       componentFiles: componentFiles.length,
       formData: formData,
       screenId: formData?.screenId,
+      tableName: formData?.tableName, // 🔍 테이블명 확인
+      recordId: formData?.id, // 🔍 레코드 ID 확인
       currentUploadedFiles: uploadedFiles.length,
     });
 
@@ -371,9 +462,9 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
         setUploadedFiles(files);
         setForceUpdate((prev) => prev + 1);
 
-        // localStorage 백업도 업데이트
+        // localStorage 백업도 업데이트 (레코드별 고유 키 사용)
         try {
-          const backupKey = `fileUpload_${component.id}`;
+          const backupKey = getUniqueKey();
           localStorage.setItem(backupKey, JSON.stringify(files));
         } catch (e) {
           console.warn("localStorage 백업 실패:", e);
@@ -462,10 +553,10 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
       toast.loading("파일을 업로드하는 중...", { id: "file-upload" });
 
       try {
-        // targetObjid 생성 - 템플릿 vs 데이터 파일 구분
-        const tableName = formData?.tableName || component.tableName || "default_table";
-        const recordId = formData?.id;
-        const columnName = component.columnName || component.id;
+        // 🔑 레코드 모드 우선 사용
+        const effectiveTableName = recordTableName || formData?.tableName || component.tableName || "default_table";
+        const effectiveRecordId = recordId || formData?.id;
+        const effectiveColumnName = columnName;
         
         // screenId 추출 (우선순위: formData > URL)
         let screenId = formData?.screenId;
@@ -478,39 +569,56 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
         }
 
         let targetObjid;
-        // 우선순위: 1) 실제 데이터 (recordId가 숫자/문자열이고 temp_가 아님) > 2) 템플릿 (screenId) > 3) 기본값
-        const isRealRecord = recordId && typeof recordId !== 'undefined' && !String(recordId).startsWith('temp_');
+        // 🔑 레코드 모드 판단 개선
+        const effectiveIsRecordMode = isRecordMode || (effectiveRecordId && !String(effectiveRecordId).startsWith('temp_'));
         
-        if (isRealRecord && tableName) {
-          // 실제 데이터 파일 (진짜 레코드 ID가 있을 때만)
-          targetObjid = `${tableName}:${recordId}:${columnName}`;
-          console.log("📁 실제 데이터 파일 업로드:", targetObjid);
+        if (effectiveIsRecordMode && effectiveTableName && effectiveRecordId) {
+          // 🎯 레코드 모드: 특정 행에 파일 연결
+          targetObjid = `${effectiveTableName}:${effectiveRecordId}:${effectiveColumnName}`;
+          console.log("📁 [레코드 모드] 파일 업로드:", {
+            targetObjid,
+            tableName: effectiveTableName,
+            recordId: effectiveRecordId,
+            columnName: effectiveColumnName,
+          });
         } else if (screenId) {
           // 🔑 템플릿 파일 (백엔드 조회 형식과 동일하게)
-          targetObjid = `screen_files:${screenId}:${component.id}:${columnName}`;
+          targetObjid = `screen_files:${screenId}:${component.id}:${effectiveColumnName}`;
+          console.log("📝 [템플릿 모드] 파일 업로드:", targetObjid);
         } else {
           // 기본값 (화면관리에서 사용)
           targetObjid = `temp_${component.id}`;
-          console.log("📝 기본 파일 업로드:", targetObjid);
+          console.log("📝 [기본 모드] 파일 업로드:", targetObjid);
         }
 
         // 🔒 현재 사용자의 회사 코드 가져오기 (멀티테넌시 격리)
-        const userCompanyCode = (window as any).__user__?.companyCode;
+        const userCompanyCode = user?.companyCode || (window as any).__user__?.companyCode;
+        
+        console.log("📤 [FileUploadComponent] 파일 업로드 준비:", {
+          userCompanyCode,
+          isRecordMode: effectiveIsRecordMode,
+          tableName: effectiveTableName,
+          recordId: effectiveRecordId,
+          columnName: effectiveColumnName,
+          targetObjid,
+        });
         
         const uploadData = {
           // 🎯 formData에서 백엔드 API 설정 가져오기
           autoLink: formData?.autoLink || true,
-          linkedTable: formData?.linkedTable || tableName,
-          recordId: formData?.recordId || recordId || `temp_${component.id}`,
-          columnName: formData?.columnName || columnName,
+          linkedTable: formData?.linkedTable || effectiveTableName,
+          recordId: effectiveRecordId || `temp_${component.id}`,
+          columnName: effectiveColumnName,
           isVirtualFileColumn: formData?.isVirtualFileColumn || true,
           docType: component.fileConfig?.docType || "DOCUMENT",
           docTypeName: component.fileConfig?.docTypeName || "일반 문서",
           companyCode: userCompanyCode, // 🔒 멀티테넌시: 회사 코드 명시적 전달
           // 호환성을 위한 기존 필드들
-          tableName: tableName,
-          fieldName: columnName,
+          tableName: effectiveTableName,
+          fieldName: effectiveColumnName,
           targetObjid: targetObjid, // InteractiveDataTable 호환을 위한 targetObjid 추가
+          // 🆕 레코드 모드 플래그
+          isRecordMode: effectiveIsRecordMode,
         };
 
 
@@ -553,9 +661,9 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
           setUploadedFiles(updatedFiles);
           setUploadStatus("success");
 
-          // localStorage 백업
+          // localStorage 백업 (레코드별 고유 키 사용)
           try {
-            const backupKey = `fileUpload_${component.id}`;
+            const backupKey = getUniqueKey();
             localStorage.setItem(backupKey, JSON.stringify(updatedFiles));
           } catch (e) {
             console.warn("localStorage 백업 실패:", e);
@@ -563,9 +671,10 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
 
           // 전역 상태 업데이트 (모든 파일 컴포넌트 동기화)
           if (typeof window !== "undefined") {
-            // 전역 파일 상태 업데이트
+            // 전역 파일 상태 업데이트 (레코드별 고유 키 사용)
             const globalFileState = (window as any).globalFileState || {};
-            globalFileState[component.id] = updatedFiles;
+            const uniqueKey = getUniqueKey();
+            globalFileState[uniqueKey] = updatedFiles;
             (window as any).globalFileState = globalFileState;
 
             // 🌐 전역 파일 저장소에 새 파일 등록 (페이지 간 공유용)
@@ -573,12 +682,15 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
               uploadPage: window.location.pathname,
               componentId: component.id,
               screenId: formData?.screenId,
+              recordId: recordId, // 🆕 레코드 ID 추가
             });
 
             // 모든 파일 컴포넌트에 동기화 이벤트 발생
             const syncEvent = new CustomEvent("globalFileStateChanged", {
               detail: {
                 componentId: component.id,
+                uniqueKey: uniqueKey, // 🆕 고유 키 추가
+                recordId: recordId, // 🆕 레코드 ID 추가
                 files: updatedFiles,
                 fileCount: updatedFiles.length,
                 timestamp: Date.now(),
@@ -612,22 +724,54 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             console.warn("⚠️ onUpdate 콜백이 없습니다!");
           }
 
+          // 🆕 레코드 모드: attachments 컬럼 동기화 (formData 업데이트)
+          if (effectiveIsRecordMode && onFormDataChange) {
+            // 파일 정보를 간소화하여 attachments 컬럼에 저장할 형태로 변환
+            const attachmentsData = updatedFiles.map(file => ({
+              objid: file.objid,
+              realFileName: file.realFileName,
+              fileSize: file.fileSize,
+              fileExt: file.fileExt,
+              filePath: file.filePath,
+              regdate: file.regdate || new Date().toISOString(),
+            }));
+            
+            console.log("📎 [레코드 모드] attachments 컬럼 동기화:", {
+              tableName: effectiveTableName,
+              recordId: effectiveRecordId,
+              columnName: effectiveColumnName,
+              fileCount: attachmentsData.length,
+            });
+            
+            // onFormDataChange를 통해 부모 컴포넌트에 attachments 업데이트 알림
+            onFormDataChange({ 
+              [effectiveColumnName]: attachmentsData,
+              // 🆕 백엔드에서 attachments 컬럼 업데이트를 위한 메타 정보
+              __attachmentsUpdate: {
+                tableName: effectiveTableName,
+                recordId: effectiveRecordId,
+                columnName: effectiveColumnName,
+                files: attachmentsData,
+              }
+            });
+          }
+
           // 그리드 파일 상태 새로고침 이벤트 발생
           if (typeof window !== "undefined") {
             const refreshEvent = new CustomEvent("refreshFileStatus", {
               detail: {
-                tableName: tableName,
-                recordId: recordId,
-                columnName: columnName,
+                tableName: effectiveTableName,
+                recordId: effectiveRecordId,
+                columnName: effectiveColumnName,
                 targetObjid: targetObjid,
                 fileCount: updatedFiles.length,
               },
             });
             window.dispatchEvent(refreshEvent);
             console.log("🔄 그리드 파일 상태 새로고침 이벤트 발생:", {
-              tableName,
-              recordId,
-              columnName,
+              tableName: effectiveTableName,
+              recordId: effectiveRecordId,
+              columnName: effectiveColumnName,
               targetObjid,
               fileCount: updatedFiles.length,
             });
@@ -705,9 +849,9 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
         const updatedFiles = uploadedFiles.filter((f) => f.objid !== fileId);
         setUploadedFiles(updatedFiles);
 
-        // localStorage 백업 업데이트
+        // localStorage 백업 업데이트 (레코드별 고유 키 사용)
         try {
-          const backupKey = `fileUpload_${component.id}`;
+          const backupKey = getUniqueKey();
           localStorage.setItem(backupKey, JSON.stringify(updatedFiles));
         } catch (e) {
           console.warn("localStorage 백업 업데이트 실패:", e);
@@ -715,15 +859,18 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
 
         // 전역 상태 업데이트 (모든 파일 컴포넌트 동기화)
         if (typeof window !== "undefined") {
-          // 전역 파일 상태 업데이트
+          // 전역 파일 상태 업데이트 (레코드별 고유 키 사용)
           const globalFileState = (window as any).globalFileState || {};
-          globalFileState[component.id] = updatedFiles;
+          const uniqueKey = getUniqueKey();
+          globalFileState[uniqueKey] = updatedFiles;
           (window as any).globalFileState = globalFileState;
 
           // 모든 파일 컴포넌트에 동기화 이벤트 발생
           const syncEvent = new CustomEvent("globalFileStateChanged", {
             detail: {
               componentId: component.id,
+              uniqueKey: uniqueKey, // 🆕 고유 키 추가
+              recordId: recordId, // 🆕 레코드 ID 추가
               files: updatedFiles,
               fileCount: updatedFiles.length,
               timestamp: Date.now(),
@@ -749,13 +896,42 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
           });
         }
 
+        // 🆕 레코드 모드: attachments 컬럼 동기화 (파일 삭제 후)
+        if (isRecordMode && onFormDataChange && recordTableName && recordId) {
+          const attachmentsData = updatedFiles.map(f => ({
+            objid: f.objid,
+            realFileName: f.realFileName,
+            fileSize: f.fileSize,
+            fileExt: f.fileExt,
+            filePath: f.filePath,
+            regdate: f.regdate || new Date().toISOString(),
+          }));
+          
+          console.log("📎 [레코드 모드] 파일 삭제 후 attachments 동기화:", {
+            tableName: recordTableName,
+            recordId: recordId,
+            columnName: columnName,
+            remainingFiles: attachmentsData.length,
+          });
+          
+          onFormDataChange({ 
+            [columnName]: attachmentsData,
+            __attachmentsUpdate: {
+              tableName: recordTableName,
+              recordId: recordId,
+              columnName: columnName,
+              files: attachmentsData,
+            }
+          });
+        }
+
         toast.success(`${fileName} 삭제 완료`);
       } catch (error) {
         console.error("파일 삭제 오류:", error);
         toast.error("파일 삭제에 실패했습니다.");
       }
     },
-    [uploadedFiles, onUpdate, component.id],
+    [uploadedFiles, onUpdate, component.id, isRecordMode, onFormDataChange, recordTableName, recordId, columnName, getUniqueKey],
   );
 
   // 대표 이미지 Blob URL 로드
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
index 6e0432d1..92eb4bb7 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
 import { ItemSelectionModal } from "./ItemSelectionModal";
 import { RepeaterTable } from "./RepeaterTable";
-import { ModalRepeaterTableProps, RepeaterColumnConfig, JoinCondition } from "./types";
+import { ModalRepeaterTableProps, RepeaterColumnConfig, JoinCondition, DynamicDataSourceOption } from "./types";
 import { useCalculation } from "./useCalculation";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
@@ -293,6 +293,9 @@ export function ModalRepeaterTableComponent({
   
   // 🆕 수주일 일괄 적용 플래그 (딱 한 번만 실행)
   const [isOrderDateApplied, setIsOrderDateApplied] = useState(false);
+  
+  // 🆕 동적 데이터 소스 활성화 상태 (컬럼별로 현재 선택된 옵션 ID)
+  const [activeDataSources, setActiveDataSources] = useState<Record<string, string>>({});
 
   // columns가 비어있으면 sourceColumns로부터 자동 생성
   const columns = React.useMemo((): RepeaterColumnConfig[] => {
@@ -409,6 +412,193 @@ export function ModalRepeaterTableComponent({
   }, [localValue, columnName, component?.id, onFormDataChange, targetTable]);
 
   const { calculateRow, calculateAll } = useCalculation(calculationRules);
+  
+  /**
+   * 동적 데이터 소스 변경 시 호출
+   * 해당 컬럼의 모든 행 데이터를 새로운 소스에서 다시 조회
+   */
+  const handleDataSourceChange = async (columnField: string, optionId: string) => {
+    console.log(`🔄 데이터 소스 변경: ${columnField} → ${optionId}`);
+    
+    // 활성화 상태 업데이트
+    setActiveDataSources((prev) => ({
+      ...prev,
+      [columnField]: optionId,
+    }));
+    
+    // 해당 컬럼 찾기
+    const column = columns.find((col) => col.field === columnField);
+    if (!column?.dynamicDataSource?.enabled) {
+      console.warn(`⚠️ 컬럼 "${columnField}"에 동적 데이터 소스가 설정되지 않음`);
+      return;
+    }
+    
+    // 선택된 옵션 찾기
+    const option = column.dynamicDataSource.options.find((opt) => opt.id === optionId);
+    if (!option) {
+      console.warn(`⚠️ 옵션 "${optionId}"을 찾을 수 없음`);
+      return;
+    }
+    
+    // 모든 행에 대해 새 값 조회
+    const updatedData = await Promise.all(
+      localValue.map(async (row, index) => {
+        try {
+          const newValue = await fetchDynamicValue(option, row);
+          console.log(`  ✅ 행 ${index}: ${columnField} = ${newValue}`);
+          return {
+            ...row,
+            [columnField]: newValue,
+          };
+        } catch (error) {
+          console.error(`  ❌ 행 ${index} 조회 실패:`, error);
+          return row;
+        }
+      })
+    );
+    
+    // 계산 필드 업데이트 후 데이터 반영
+    const calculatedData = calculateAll(updatedData);
+    handleChange(calculatedData);
+  };
+  
+  /**
+   * 동적 데이터 소스 옵션에 따라 값 조회
+   */
+  async function fetchDynamicValue(
+    option: DynamicDataSourceOption,
+    rowData: any
+  ): Promise<any> {
+    if (option.sourceType === "table" && option.tableConfig) {
+      // 테이블 직접 조회 (단순 조인)
+      const { tableName, valueColumn, joinConditions } = option.tableConfig;
+      
+      const whereConditions: Record<string, any> = {};
+      for (const cond of joinConditions) {
+        const value = rowData[cond.sourceField];
+        if (value === undefined || value === null) {
+          console.warn(`⚠️ 조인 조건의 소스 필드 "${cond.sourceField}" 값이 없음`);
+          return undefined;
+        }
+        whereConditions[cond.targetField] = value;
+      }
+      
+      console.log(`🔍 테이블 조회: ${tableName}`, whereConditions);
+      
+      const response = await apiClient.post(
+        `/table-management/tables/${tableName}/data`,
+        { search: whereConditions, size: 1, page: 1 }
+      );
+      
+      if (response.data.success && response.data.data?.data?.length > 0) {
+        return response.data.data.data[0][valueColumn];
+      }
+      return undefined;
+      
+    } else if (option.sourceType === "multiTable" && option.multiTableConfig) {
+      // 테이블 복합 조인 (2개 이상 테이블 순차 조인)
+      const { joinChain, valueColumn } = option.multiTableConfig;
+      
+      if (!joinChain || joinChain.length === 0) {
+        console.warn("⚠️ 조인 체인이 비어있습니다.");
+        return undefined;
+      }
+      
+      console.log(`🔗 복합 조인 시작: ${joinChain.length}단계`);
+      
+      // 현재 값을 추적 (첫 단계는 현재 행에서 시작)
+      let currentValue: any = null;
+      let currentRow: any = null;
+      
+      for (let i = 0; i < joinChain.length; i++) {
+        const step = joinChain[i];
+        const { tableName, joinCondition, outputField } = step;
+        
+        // 조인 조건 값 가져오기
+        let fromValue: any;
+        if (i === 0) {
+          // 첫 번째 단계: 현재 행에서 값 가져오기
+          fromValue = rowData[joinCondition.fromField];
+          console.log(`  📍 단계 ${i + 1}: 현재행.${joinCondition.fromField} = ${fromValue}`);
+        } else {
+          // 이후 단계: 이전 조회 결과에서 값 가져오기
+          fromValue = currentRow?.[joinCondition.fromField] || currentValue;
+          console.log(`  📍 단계 ${i + 1}: 이전결과.${joinCondition.fromField} = ${fromValue}`);
+        }
+        
+        if (fromValue === undefined || fromValue === null) {
+          console.warn(`⚠️ 단계 ${i + 1}: 조인 조건 값이 없습니다. (${joinCondition.fromField})`);
+          return undefined;
+        }
+        
+        // 테이블 조회
+        const whereConditions: Record<string, any> = {
+          [joinCondition.toField]: fromValue
+        };
+        
+        console.log(`  🔍 단계 ${i + 1}: ${tableName} 조회`, whereConditions);
+        
+        try {
+          const response = await apiClient.post(
+            `/table-management/tables/${tableName}/data`,
+            { search: whereConditions, size: 1, page: 1 }
+          );
+          
+          if (response.data.success && response.data.data?.data?.length > 0) {
+            currentRow = response.data.data.data[0];
+            currentValue = outputField ? currentRow[outputField] : currentRow;
+            console.log(`  ✅ 단계 ${i + 1} 성공:`, { outputField, value: currentValue });
+          } else {
+            console.warn(`  ⚠️ 단계 ${i + 1}: 조회 결과 없음`);
+            return undefined;
+          }
+        } catch (error) {
+          console.error(`  ❌ 단계 ${i + 1} 조회 실패:`, error);
+          return undefined;
+        }
+      }
+      
+      // 최종 값 반환 (마지막 테이블에서 valueColumn 가져오기)
+      const finalValue = currentRow?.[valueColumn];
+      console.log(`🎯 복합 조인 완료: ${valueColumn} = ${finalValue}`);
+      return finalValue;
+      
+    } else if (option.sourceType === "api" && option.apiConfig) {
+      // 전용 API 호출 (복잡한 다중 조인)
+      const { endpoint, method = "GET", parameterMappings, responseValueField } = option.apiConfig;
+      
+      // 파라미터 빌드
+      const params: Record<string, any> = {};
+      for (const mapping of parameterMappings) {
+        const value = rowData[mapping.sourceField];
+        if (value !== undefined && value !== null) {
+          params[mapping.paramName] = value;
+        }
+      }
+      
+      console.log(`🔍 API 호출: ${method} ${endpoint}`, params);
+      
+      let response;
+      if (method === "POST") {
+        response = await apiClient.post(endpoint, params);
+      } else {
+        response = await apiClient.get(endpoint, { params });
+      }
+      
+      if (response.data.success && response.data.data) {
+        // responseValueField로 값 추출 (중첩 경로 지원: "data.price")
+        const keys = responseValueField.split(".");
+        let value = response.data.data;
+        for (const key of keys) {
+          value = value?.[key];
+        }
+        return value;
+      }
+      return undefined;
+    }
+    
+    return undefined;
+  }
 
   // 초기 데이터에 계산 필드 적용
   useEffect(() => {
@@ -579,6 +769,8 @@ export function ModalRepeaterTableComponent({
         onDataChange={handleChange}
         onRowChange={handleRowChange}
         onRowDelete={handleRowDelete}
+        activeDataSources={activeDataSources}
+        onDataSourceChange={handleDataSourceChange}
       />
 
       {/* 항목 선택 모달 */}
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
index 507ab54d..7a11bdb1 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
@@ -9,7 +9,8 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
-import { ModalRepeaterTableProps, RepeaterColumnConfig, ColumnMapping, CalculationRule } from "./types";
+import { ModalRepeaterTableProps, RepeaterColumnConfig, ColumnMapping, CalculationRule, DynamicDataSourceConfig, DynamicDataSourceOption, MultiTableJoinStep } from "./types";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { cn } from "@/lib/utils";
 
@@ -169,6 +170,10 @@ export function ModalRepeaterTableConfigPanel({
   const [openTableCombo, setOpenTableCombo] = useState(false);
   const [openTargetTableCombo, setOpenTargetTableCombo] = useState(false);
   const [openUniqueFieldCombo, setOpenUniqueFieldCombo] = useState(false);
+  
+  // 동적 데이터 소스 설정 모달
+  const [dynamicSourceModalOpen, setDynamicSourceModalOpen] = useState(false);
+  const [editingDynamicSourceColumnIndex, setEditingDynamicSourceColumnIndex] = useState<number | null>(null);
 
   // config 변경 시 localConfig 동기화 (cleanupInitialConfig 적용)
   useEffect(() => {
@@ -397,6 +402,101 @@ export function ModalRepeaterTableConfigPanel({
     updateConfig({ calculationRules: rules });
   };
 
+  // 동적 데이터 소스 설정 함수들
+  const openDynamicSourceModal = (columnIndex: number) => {
+    setEditingDynamicSourceColumnIndex(columnIndex);
+    setDynamicSourceModalOpen(true);
+  };
+
+  const toggleDynamicDataSource = (columnIndex: number, enabled: boolean) => {
+    const columns = [...(localConfig.columns || [])];
+    if (enabled) {
+      columns[columnIndex] = {
+        ...columns[columnIndex],
+        dynamicDataSource: {
+          enabled: true,
+          options: [],
+        },
+      };
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { dynamicDataSource, ...rest } = columns[columnIndex];
+      columns[columnIndex] = rest;
+    }
+    updateConfig({ columns });
+  };
+
+  const addDynamicSourceOption = (columnIndex: number) => {
+    const columns = [...(localConfig.columns || [])];
+    const col = columns[columnIndex];
+    const newOption: DynamicDataSourceOption = {
+      id: `option_${Date.now()}`,
+      label: "새 옵션",
+      sourceType: "table",
+      tableConfig: {
+        tableName: "",
+        valueColumn: "",
+        joinConditions: [],
+      },
+    };
+    
+    columns[columnIndex] = {
+      ...col,
+      dynamicDataSource: {
+        ...col.dynamicDataSource!,
+        enabled: true,
+        options: [...(col.dynamicDataSource?.options || []), newOption],
+      },
+    };
+    updateConfig({ columns });
+  };
+
+  const updateDynamicSourceOption = (columnIndex: number, optionIndex: number, updates: Partial<DynamicDataSourceOption>) => {
+    const columns = [...(localConfig.columns || [])];
+    const col = columns[columnIndex];
+    const options = [...(col.dynamicDataSource?.options || [])];
+    options[optionIndex] = { ...options[optionIndex], ...updates };
+    
+    columns[columnIndex] = {
+      ...col,
+      dynamicDataSource: {
+        ...col.dynamicDataSource!,
+        options,
+      },
+    };
+    updateConfig({ columns });
+  };
+
+  const removeDynamicSourceOption = (columnIndex: number, optionIndex: number) => {
+    const columns = [...(localConfig.columns || [])];
+    const col = columns[columnIndex];
+    const options = [...(col.dynamicDataSource?.options || [])];
+    options.splice(optionIndex, 1);
+    
+    columns[columnIndex] = {
+      ...col,
+      dynamicDataSource: {
+        ...col.dynamicDataSource!,
+        options,
+      },
+    };
+    updateConfig({ columns });
+  };
+
+  const setDefaultDynamicSourceOption = (columnIndex: number, optionId: string) => {
+    const columns = [...(localConfig.columns || [])];
+    const col = columns[columnIndex];
+    
+    columns[columnIndex] = {
+      ...col,
+      dynamicDataSource: {
+        ...col.dynamicDataSource!,
+        defaultOptionId: optionId,
+      },
+    };
+    updateConfig({ columns });
+  };
+
   return (
     <div className="space-y-6 p-4">
       {/* 소스/저장 테이블 설정 */}
@@ -1327,6 +1427,60 @@ export function ModalRepeaterTableConfigPanel({
                       )}
                     </div>
                   </div>
+
+                  {/* 6. 동적 데이터 소스 설정 */}
+                  <div className="space-y-2 border-t pt-4">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        동적 데이터 소스
+                      </Label>
+                      <Switch
+                        checked={col.dynamicDataSource?.enabled || false}
+                        onCheckedChange={(checked) => toggleDynamicDataSource(index, checked)}
+                      />
+                </div>
+                    <p className="text-[10px] text-muted-foreground">
+                      컬럼 헤더 클릭으로 데이터 소스 전환 (예: 거래처별 단가, 품목별 단가)
+                    </p>
+                    
+                    {col.dynamicDataSource?.enabled && (
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <span className="text-[10px] text-muted-foreground">
+                            {col.dynamicDataSource.options.length}개 옵션 설정됨
+                          </span>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => openDynamicSourceModal(index)}
+                            className="h-7 text-xs"
+                          >
+                            옵션 설정
+                          </Button>
+                        </div>
+                        
+                        {/* 옵션 미리보기 */}
+                        {col.dynamicDataSource.options.length > 0 && (
+                          <div className="flex flex-wrap gap-1">
+                            {col.dynamicDataSource.options.map((opt) => (
+                              <span
+                                key={opt.id}
+                                className={cn(
+                                  "text-[10px] px-2 py-0.5 rounded-full",
+                                  col.dynamicDataSource?.defaultOptionId === opt.id
+                                    ? "bg-primary text-primary-foreground"
+                                    : "bg-muted"
+                                )}
+                              >
+                                {opt.label}
+                                {col.dynamicDataSource?.defaultOptionId === opt.id && " (기본)"}
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
                 </div>
               ))}
             </div>
@@ -1493,6 +1647,650 @@ export function ModalRepeaterTableConfigPanel({
           </ul>
         </div>
       </div>
+
+      {/* 동적 데이터 소스 설정 모달 */}
+      <Dialog open={dynamicSourceModalOpen} onOpenChange={setDynamicSourceModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">
+              동적 데이터 소스 설정
+              {editingDynamicSourceColumnIndex !== null && localConfig.columns?.[editingDynamicSourceColumnIndex] && (
+                <span className="text-primary ml-2">
+                  ({localConfig.columns[editingDynamicSourceColumnIndex].label})
+                </span>
+              )}
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              컬럼 헤더 클릭 시 선택할 수 있는 데이터 소스 옵션을 설정합니다
+            </DialogDescription>
+          </DialogHeader>
+
+          {editingDynamicSourceColumnIndex !== null && localConfig.columns?.[editingDynamicSourceColumnIndex] && (
+            <div className="space-y-4">
+              {/* 옵션 목록 */}
+              <div className="space-y-3">
+                {(localConfig.columns[editingDynamicSourceColumnIndex].dynamicDataSource?.options || []).map((option, optIndex) => (
+                  <div key={option.id} className="border rounded-lg p-4 space-y-3">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-medium">옵션 {optIndex + 1}</span>
+                        {localConfig.columns![editingDynamicSourceColumnIndex].dynamicDataSource?.defaultOptionId === option.id && (
+                          <span className="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded">기본</span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-1">
+                        {localConfig.columns![editingDynamicSourceColumnIndex].dynamicDataSource?.defaultOptionId !== option.id && (
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => setDefaultDynamicSourceOption(editingDynamicSourceColumnIndex, option.id)}
+                            className="h-6 text-[10px] px-2"
+                          >
+                            기본으로 설정
+                          </Button>
+                        )}
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => removeDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex)}
+                          className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive"
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    {/* 옵션 라벨 */}
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">표시 라벨 *</Label>
+                      <Input
+                        value={option.label}
+                        onChange={(e) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, { label: e.target.value })}
+                        placeholder="예: 거래처별 단가"
+                        className="h-8 text-xs"
+                      />
+                    </div>
+
+                    {/* 소스 타입 */}
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">조회 방식 *</Label>
+                      <Select
+                        value={option.sourceType}
+                        onValueChange={(value) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, { 
+                          sourceType: value as "table" | "multiTable" | "api",
+                          tableConfig: value === "table" ? { tableName: "", valueColumn: "", joinConditions: [] } : undefined,
+                          multiTableConfig: value === "multiTable" ? { joinChain: [], valueColumn: "" } : undefined,
+                          apiConfig: value === "api" ? { endpoint: "", parameterMappings: [], responseValueField: "" } : undefined,
+                        })}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="table">테이블 직접 조회 (단순 조인)</SelectItem>
+                          <SelectItem value="multiTable">테이블 복합 조인 (2개 이상)</SelectItem>
+                          <SelectItem value="api">전용 API 호출</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* 테이블 직접 조회 설정 */}
+                    {option.sourceType === "table" && (
+                      <div className="space-y-3 p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                        <p className="text-xs font-medium">테이블 조회 설정</p>
+                        
+                        {/* 참조 테이블 */}
+                        <div className="space-y-1">
+                          <Label className="text-[10px]">참조 테이블 *</Label>
+                          <Select
+                            value={option.tableConfig?.tableName || ""}
+                            onValueChange={(value) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                              tableConfig: { ...option.tableConfig!, tableName: value },
+                            })}
+                          >
+                            <SelectTrigger className="h-8 text-xs">
+                              <SelectValue placeholder="테이블 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {allTables.map((table) => (
+                                <SelectItem key={table.tableName} value={table.tableName}>
+                                  {table.displayName || table.tableName}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 값 컬럼 */}
+                        <div className="space-y-1">
+                          <Label className="text-[10px]">값 컬럼 (가져올 컬럼) *</Label>
+                          <ReferenceColumnSelector
+                            referenceTable={option.tableConfig?.tableName || ""}
+                            value={option.tableConfig?.valueColumn || ""}
+                            onChange={(value) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                              tableConfig: { ...option.tableConfig!, valueColumn: value },
+                            })}
+                          />
+                        </div>
+
+                        {/* 조인 조건 */}
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label className="text-[10px]">조인 조건 *</Label>
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => {
+                                const newConditions = [...(option.tableConfig?.joinConditions || []), { sourceField: "", targetField: "" }];
+                                updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                  tableConfig: { ...option.tableConfig!, joinConditions: newConditions },
+                                });
+                              }}
+                              className="h-6 text-[10px] px-2"
+                            >
+                              <Plus className="h-3 w-3 mr-1" />
+                              추가
+                            </Button>
+                          </div>
+                          
+                          {(option.tableConfig?.joinConditions || []).map((cond, condIndex) => (
+                            <div key={condIndex} className="flex items-center gap-2 p-2 bg-background rounded">
+                              <Select
+                                value={cond.sourceField}
+                                onValueChange={(value) => {
+                                  const newConditions = [...(option.tableConfig?.joinConditions || [])];
+                                  newConditions[condIndex] = { ...newConditions[condIndex], sourceField: value };
+                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                    tableConfig: { ...option.tableConfig!, joinConditions: newConditions },
+                                  });
+                                }}
+                              >
+                                <SelectTrigger className="h-7 text-[10px] flex-1">
+                                  <SelectValue placeholder="현재 행 필드" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {(localConfig.columns || []).map((col) => (
+                                    <SelectItem key={col.field} value={col.field}>
+                                      {col.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <span className="text-[10px] text-muted-foreground">=</span>
+                              <ReferenceColumnSelector
+                                referenceTable={option.tableConfig?.tableName || ""}
+                                value={cond.targetField}
+                                onChange={(value) => {
+                                  const newConditions = [...(option.tableConfig?.joinConditions || [])];
+                                  newConditions[condIndex] = { ...newConditions[condIndex], targetField: value };
+                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                    tableConfig: { ...option.tableConfig!, joinConditions: newConditions },
+                                  });
+                                }}
+                              />
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => {
+                                  const newConditions = [...(option.tableConfig?.joinConditions || [])];
+                                  newConditions.splice(condIndex, 1);
+                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                    tableConfig: { ...option.tableConfig!, joinConditions: newConditions },
+                                  });
+                                }}
+                                className="h-6 w-6 p-0"
+                              >
+                                <X className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* 테이블 복합 조인 설정 (2개 이상 테이블) */}
+                    {option.sourceType === "multiTable" && (
+                      <div className="space-y-3 p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
+                        <div>
+                          <p className="text-xs font-medium">복합 조인 설정</p>
+                          <p className="text-[10px] text-muted-foreground mt-1">
+                            여러 테이블을 순차적으로 조인합니다
+                          </p>
+                        </div>
+
+                        {/* 조인 체인 */}
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label className="text-[10px]">조인 체인 *</Label>
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => {
+                                const newChain: MultiTableJoinStep[] = [
+                                  ...(option.multiTableConfig?.joinChain || []),
+                                  { tableName: "", joinCondition: { fromField: "", toField: "" }, outputField: "" }
+                                ];
+                                updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                  multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
+                                });
+                              }}
+                              className="h-6 text-[10px] px-2"
+                            >
+                              <Plus className="h-3 w-3 mr-1" />
+                              조인 추가
+                            </Button>
+                          </div>
+
+                          {/* 시작점 안내 */}
+                          <div className="p-2 bg-background rounded border-l-2 border-primary">
+                            <p className="text-[10px] font-medium text-primary">시작: 현재 행 데이터</p>
+                            <p className="text-[10px] text-muted-foreground">
+                              첫 번째 조인은 현재 행의 필드에서 시작합니다
+                            </p>
+                          </div>
+
+                          {/* 조인 단계들 */}
+                          {(option.multiTableConfig?.joinChain || []).map((step, stepIndex) => (
+                            <div key={stepIndex} className="p-3 border rounded-md bg-background space-y-3">
+                              <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                  <div className="w-5 h-5 rounded-full bg-green-500 text-white flex items-center justify-center text-[10px] font-bold">
+                                    {stepIndex + 1}
+                                  </div>
+                                  <span className="text-xs font-medium">조인 단계 {stepIndex + 1}</span>
+                                </div>
+                                <Button
+                                  size="sm"
+                                  variant="ghost"
+                                  onClick={() => {
+                                    const newChain = [...(option.multiTableConfig?.joinChain || [])];
+                                    newChain.splice(stepIndex, 1);
+                                    updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                      multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
+                                    });
+                                  }}
+                                  className="h-5 w-5 p-0"
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </div>
+
+                              {/* 조인할 테이블 */}
+                              <div className="space-y-1">
+                                <Label className="text-[10px]">조인할 테이블 *</Label>
+                                <Select
+                                  value={step.tableName}
+                                  onValueChange={(value) => {
+                                    const newChain = [...(option.multiTableConfig?.joinChain || [])];
+                                    newChain[stepIndex] = { ...newChain[stepIndex], tableName: value };
+                                    updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                      multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
+                                    });
+                                  }}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="테이블 선택" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {allTables.map((table) => (
+                                      <SelectItem key={table.tableName} value={table.tableName}>
+                                        {table.displayName || table.tableName}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </div>
+
+                              {/* 조인 조건 */}
+                              <div className="grid grid-cols-[1fr,auto,1fr] gap-2 items-end">
+                                <div className="space-y-1">
+                                  <Label className="text-[10px]">
+                                    {stepIndex === 0 ? "현재 행 필드" : "이전 단계 출력 필드"}
+                                  </Label>
+                                  {stepIndex === 0 ? (
+                                    <Select
+                                      value={step.joinCondition.fromField}
+                                      onValueChange={(value) => {
+                                        const newChain = [...(option.multiTableConfig?.joinChain || [])];
+                                        newChain[stepIndex] = {
+                                          ...newChain[stepIndex],
+                                          joinCondition: { ...newChain[stepIndex].joinCondition, fromField: value }
+                                        };
+                                        updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                          multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
+                                        });
+                                      }}
+                                    >
+                                      <SelectTrigger className="h-8 text-xs">
+                                        <SelectValue placeholder="필드 선택" />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        {(localConfig.columns || []).map((col) => (
+                                          <SelectItem key={col.field} value={col.field}>
+                                            {col.label} ({col.field})
+                                          </SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  ) : (
+                                    <Input
+                                      value={step.joinCondition.fromField}
+                                      onChange={(e) => {
+                                        const newChain = [...(option.multiTableConfig?.joinChain || [])];
+                                        newChain[stepIndex] = {
+                                          ...newChain[stepIndex],
+                                          joinCondition: { ...newChain[stepIndex].joinCondition, fromField: e.target.value }
+                                        };
+                                        updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                          multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
+                                        });
+                                      }}
+                                      placeholder={option.multiTableConfig?.joinChain[stepIndex - 1]?.outputField || "이전 출력 필드"}
+                                      className="h-8 text-xs"
+                                    />
+                                  )}
+                                </div>
+
+                                <div className="flex items-center justify-center pb-1">
+                                  <span className="text-xs text-muted-foreground">=</span>
+                                </div>
+
+                                <div className="space-y-1">
+                                  <Label className="text-[10px]">대상 테이블 필드</Label>
+                                  <ReferenceColumnSelector
+                                    referenceTable={step.tableName}
+                                    value={step.joinCondition.toField}
+                                    onChange={(value) => {
+                                      const newChain = [...(option.multiTableConfig?.joinChain || [])];
+                                      newChain[stepIndex] = {
+                                        ...newChain[stepIndex],
+                                        joinCondition: { ...newChain[stepIndex].joinCondition, toField: value }
+                                      };
+                                      updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                        multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
+                                      });
+                                    }}
+                                  />
+                                </div>
+                              </div>
+
+                              {/* 다음 단계로 전달할 필드 */}
+                              <div className="space-y-1">
+                                <Label className="text-[10px]">다음 단계로 전달할 필드 (출력)</Label>
+                                <ReferenceColumnSelector
+                                  referenceTable={step.tableName}
+                                  value={step.outputField || ""}
+                                  onChange={(value) => {
+                                    const newChain = [...(option.multiTableConfig?.joinChain || [])];
+                                    newChain[stepIndex] = { ...newChain[stepIndex], outputField: value };
+                                    updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                      multiTableConfig: { ...option.multiTableConfig!, joinChain: newChain },
+                                    });
+                                  }}
+                                />
+                                <p className="text-[10px] text-muted-foreground">
+                                  {stepIndex < (option.multiTableConfig?.joinChain.length || 0) - 1
+                                    ? "다음 조인 단계에서 사용할 필드"
+                                    : "마지막 단계면 비워두세요"}
+                                </p>
+                              </div>
+
+                              {/* 조인 미리보기 */}
+                              {step.tableName && step.joinCondition.fromField && step.joinCondition.toField && (
+                                <div className="p-2 bg-muted/50 rounded text-[10px] font-mono">
+                                  <span className="text-blue-600 dark:text-blue-400">
+                                    {stepIndex === 0 ? "현재행" : option.multiTableConfig?.joinChain[stepIndex - 1]?.tableName}
+                                  </span>
+                                  <span className="text-muted-foreground">.{step.joinCondition.fromField}</span>
+                                  <span className="mx-2 text-green-600 dark:text-green-400">=</span>
+                                  <span className="text-green-600 dark:text-green-400">{step.tableName}</span>
+                                  <span className="text-muted-foreground">.{step.joinCondition.toField}</span>
+                                  {step.outputField && (
+                                    <span className="ml-2 text-purple-600 dark:text-purple-400">
+                                      → {step.outputField}
+                                    </span>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          ))}
+
+                          {/* 조인 체인이 없을 때 안내 */}
+                          {(!option.multiTableConfig?.joinChain || option.multiTableConfig.joinChain.length === 0) && (
+                            <div className="p-4 border-2 border-dashed rounded-lg text-center">
+                              <p className="text-xs text-muted-foreground mb-2">
+                                조인 체인이 없습니다
+                              </p>
+                              <p className="text-[10px] text-muted-foreground">
+                                "조인 추가" 버튼을 클릭하여 테이블 조인을 설정하세요
+                              </p>
+                            </div>
+                          )}
+                        </div>
+
+                        {/* 최종 값 컬럼 */}
+                        {option.multiTableConfig?.joinChain && option.multiTableConfig.joinChain.length > 0 && (
+                          <div className="space-y-1 pt-2 border-t">
+                            <Label className="text-[10px]">최종 값 컬럼 (가져올 값) *</Label>
+                            <ReferenceColumnSelector
+                              referenceTable={option.multiTableConfig.joinChain[option.multiTableConfig.joinChain.length - 1]?.tableName || ""}
+                              value={option.multiTableConfig.valueColumn || ""}
+                              onChange={(value) => {
+                                updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                  multiTableConfig: { ...option.multiTableConfig!, valueColumn: value },
+                                });
+                              }}
+                            />
+                            <p className="text-[10px] text-muted-foreground">
+                              마지막 테이블에서 가져올 값
+                            </p>
+                          </div>
+                        )}
+
+                        {/* 전체 조인 경로 미리보기 */}
+                        {option.multiTableConfig?.joinChain && option.multiTableConfig.joinChain.length > 0 && (
+                          <div className="p-3 bg-muted rounded-md">
+                            <p className="text-[10px] font-medium mb-2">조인 경로 미리보기</p>
+                            <div className="text-[10px] font-mono space-y-1">
+                              {option.multiTableConfig.joinChain.map((step, idx) => (
+                                <div key={idx} className="flex items-center gap-1">
+                                  {idx === 0 && (
+                                    <>
+                                      <span className="text-blue-600">현재행</span>
+                                      <span>.{step.joinCondition.fromField}</span>
+                                      <span className="text-muted-foreground mx-1">→</span>
+                                    </>
+                                  )}
+                                  <span className="text-green-600">{step.tableName}</span>
+                                  <span>.{step.joinCondition.toField}</span>
+                                  {step.outputField && idx < option.multiTableConfig!.joinChain.length - 1 && (
+                                    <>
+                                      <span className="text-muted-foreground mx-1">→</span>
+                                      <span className="text-purple-600">{step.outputField}</span>
+                                    </>
+                                  )}
+                                </div>
+                              ))}
+                              {option.multiTableConfig.valueColumn && (
+                                <div className="pt-1 border-t mt-1">
+                                  <span className="text-orange-600">최종 값: </span>
+                                  <span>{option.multiTableConfig.joinChain[option.multiTableConfig.joinChain.length - 1]?.tableName}.{option.multiTableConfig.valueColumn}</span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+
+                    {/* API 호출 설정 */}
+                    {option.sourceType === "api" && (
+                      <div className="space-y-3 p-3 bg-purple-50 dark:bg-purple-950 rounded-md border border-purple-200 dark:border-purple-800">
+                        <p className="text-xs font-medium">API 호출 설정</p>
+                        <p className="text-[10px] text-muted-foreground">
+                          복잡한 다중 조인은 백엔드 API로 처리합니다
+                        </p>
+                        
+                        {/* API 엔드포인트 */}
+                        <div className="space-y-1">
+                          <Label className="text-[10px]">API 엔드포인트 *</Label>
+                          <Input
+                            value={option.apiConfig?.endpoint || ""}
+                            onChange={(e) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                              apiConfig: { ...option.apiConfig!, endpoint: e.target.value },
+                            })}
+                            placeholder="/api/price/customer"
+                            className="h-8 text-xs font-mono"
+                          />
+                        </div>
+
+                        {/* HTTP 메서드 */}
+                        <div className="space-y-1">
+                          <Label className="text-[10px]">HTTP 메서드</Label>
+                          <Select
+                            value={option.apiConfig?.method || "GET"}
+                            onValueChange={(value) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                              apiConfig: { ...option.apiConfig!, method: value as "GET" | "POST" },
+                            })}
+                          >
+                            <SelectTrigger className="h-8 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="GET">GET</SelectItem>
+                              <SelectItem value="POST">POST</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 파라미터 매핑 */}
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label className="text-[10px]">파라미터 매핑 *</Label>
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => {
+                                const newMappings = [...(option.apiConfig?.parameterMappings || []), { paramName: "", sourceField: "" }];
+                                updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                  apiConfig: { ...option.apiConfig!, parameterMappings: newMappings },
+                                });
+                              }}
+                              className="h-6 text-[10px] px-2"
+                            >
+                              <Plus className="h-3 w-3 mr-1" />
+                              추가
+                            </Button>
+                          </div>
+                          
+                          {(option.apiConfig?.parameterMappings || []).map((mapping, mapIndex) => (
+                            <div key={mapIndex} className="flex items-center gap-2 p-2 bg-background rounded">
+                              <Input
+                                value={mapping.paramName}
+                                onChange={(e) => {
+                                  const newMappings = [...(option.apiConfig?.parameterMappings || [])];
+                                  newMappings[mapIndex] = { ...newMappings[mapIndex], paramName: e.target.value };
+                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                    apiConfig: { ...option.apiConfig!, parameterMappings: newMappings },
+                                  });
+                                }}
+                                placeholder="파라미터명"
+                                className="h-7 text-[10px] flex-1"
+                              />
+                              <span className="text-[10px] text-muted-foreground">=</span>
+                              <Select
+                                value={mapping.sourceField}
+                                onValueChange={(value) => {
+                                  const newMappings = [...(option.apiConfig?.parameterMappings || [])];
+                                  newMappings[mapIndex] = { ...newMappings[mapIndex], sourceField: value };
+                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                    apiConfig: { ...option.apiConfig!, parameterMappings: newMappings },
+                                  });
+                                }}
+                              >
+                                <SelectTrigger className="h-7 text-[10px] flex-1">
+                                  <SelectValue placeholder="현재 행 필드" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {(localConfig.columns || []).map((col) => (
+                                    <SelectItem key={col.field} value={col.field}>
+                                      {col.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => {
+                                  const newMappings = [...(option.apiConfig?.parameterMappings || [])];
+                                  newMappings.splice(mapIndex, 1);
+                                  updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                                    apiConfig: { ...option.apiConfig!, parameterMappings: newMappings },
+                                  });
+                                }}
+                                className="h-6 w-6 p-0"
+                              >
+                                <X className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          ))}
+                        </div>
+
+                        {/* 응답 값 필드 */}
+                        <div className="space-y-1">
+                          <Label className="text-[10px]">응답 값 필드 *</Label>
+                          <Input
+                            value={option.apiConfig?.responseValueField || ""}
+                            onChange={(e) => updateDynamicSourceOption(editingDynamicSourceColumnIndex, optIndex, {
+                              apiConfig: { ...option.apiConfig!, responseValueField: e.target.value },
+                            })}
+                            placeholder="price (또는 data.price)"
+                            className="h-8 text-xs font-mono"
+                          />
+                          <p className="text-[10px] text-muted-foreground">
+                            API 응답에서 값을 가져올 필드 (중첩 경로 지원: data.price)
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+
+                {/* 옵션 추가 버튼 */}
+                <Button
+                  variant="outline"
+                  onClick={() => addDynamicSourceOption(editingDynamicSourceColumnIndex)}
+                  className="w-full h-10"
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  데이터 소스 옵션 추가
+                </Button>
+              </div>
+
+              {/* 안내 */}
+              <div className="p-3 bg-muted rounded-md text-xs text-muted-foreground">
+                <p className="font-medium mb-1">사용 예시</p>
+                <ul className="space-y-1 text-[10px]">
+                  <li>- <strong>거래처별 단가</strong>: customer_item_price 테이블에서 조회</li>
+                  <li>- <strong>품목별 단가</strong>: item_info 테이블에서 기준 단가 조회</li>
+                  <li>- <strong>계약 단가</strong>: 전용 API로 복잡한 조인 처리</li>
+                </ul>
+              </div>
+            </div>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setDynamicSourceModalOpen(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              닫기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
index 703256b2..410fd9a6 100644
--- a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
@@ -4,7 +4,8 @@ import React, { useState, useEffect } from "react";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
-import { Trash2 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Trash2, ChevronDown, Check } from "lucide-react";
 import { RepeaterColumnConfig } from "./types";
 import { cn } from "@/lib/utils";
 
@@ -14,6 +15,9 @@ interface RepeaterTableProps {
   onDataChange: (newData: any[]) => void;
   onRowChange: (index: number, newRow: any) => void;
   onRowDelete: (index: number) => void;
+  // 동적 데이터 소스 관련
+  activeDataSources?: Record<string, string>; // 컬럼별 현재 활성화된 데이터 소스 ID
+  onDataSourceChange?: (columnField: string, optionId: string) => void; // 데이터 소스 변경 콜백
 }
 
 export function RepeaterTable({
@@ -22,11 +26,16 @@ export function RepeaterTable({
   onDataChange,
   onRowChange,
   onRowDelete,
+  activeDataSources = {},
+  onDataSourceChange,
 }: RepeaterTableProps) {
   const [editingCell, setEditingCell] = useState<{
     rowIndex: number;
     field: string;
   } | null>(null);
+  
+  // 동적 데이터 소스 Popover 열림 상태
+  const [openPopover, setOpenPopover] = useState<string | null>(null);
 
   // 데이터 변경 감지 (필요시 활성화)
   // useEffect(() => {
@@ -144,16 +153,79 @@ export function RepeaterTable({
               <th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
                 #
               </th>
-              {columns.map((col) => (
+              {columns.map((col) => {
+                const hasDynamicSource = col.dynamicDataSource?.enabled && col.dynamicDataSource.options.length > 0;
+                const activeOptionId = activeDataSources[col.field] || col.dynamicDataSource?.defaultOptionId;
+                const activeOption = hasDynamicSource 
+                  ? col.dynamicDataSource!.options.find(opt => opt.id === activeOptionId) || col.dynamicDataSource!.options[0]
+                  : null;
+                
+                return (
                 <th
                   key={col.field}
                   className="px-4 py-2 text-left font-medium text-muted-foreground"
                   style={{ width: col.width }}
                 >
+                    {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"
+                            )}
+                          >
+                            <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-destructive ml-1">*</span>}
+                      </>
+                    )}
                 </th>
-              ))}
+                );
+              })}
               <th className="px-4 py-2 text-left font-medium text-muted-foreground w-20">
                 삭제
               </th>
diff --git a/frontend/lib/registry/components/modal-repeater-table/types.ts b/frontend/lib/registry/components/modal-repeater-table/types.ts
index c0cac4a9..6097aaf3 100644
--- a/frontend/lib/registry/components/modal-repeater-table/types.ts
+++ b/frontend/lib/registry/components/modal-repeater-table/types.ts
@@ -10,7 +10,7 @@ export interface ModalRepeaterTableProps {
   sourceColumnLabels?: Record<string, string>; // 모달 컬럼 라벨 (컬럼명 -> 표시 라벨)
   sourceSearchFields?: string[]; // 검색 가능한 필드들
 
-  // 🆕 저장 대상 테이블 설정
+  // 저장 대상 테이블 설정
   targetTable?: string; // 저장할 테이블 (예: "sales_order_mng")
 
   // 모달 설정
@@ -25,14 +25,14 @@ export interface ModalRepeaterTableProps {
   calculationRules?: CalculationRule[]; // 자동 계산 규칙
 
   // 데이터
-  value: any[]; // 현재 추가된 항목들
-  onChange: (newData: any[]) => void; // 데이터 변경 콜백
+  value: Record<string, unknown>[]; // 현재 추가된 항목들
+  onChange: (newData: Record<string, unknown>[]) => void; // 데이터 변경 콜백
 
   // 중복 체크
   uniqueField?: string; // 중복 체크할 필드 (예: "item_code")
 
   // 필터링
-  filterCondition?: Record<string, any>;
+  filterCondition?: Record<string, unknown>;
   companyCode?: string;
 
   // 스타일
@@ -47,11 +47,92 @@ export interface RepeaterColumnConfig {
   calculated?: boolean; // 계산 필드 여부
   width?: string; // 컬럼 너비
   required?: boolean; // 필수 입력 여부
-  defaultValue?: any; // 기본값
+  defaultValue?: string | number | boolean; // 기본값
   selectOptions?: { value: string; label: string }[]; // select일 때 옵션
   
-  // 🆕 컬럼 매핑 설정
+  // 컬럼 매핑 설정
   mapping?: ColumnMapping; // 이 컬럼의 데이터를 어디서 가져올지 설정
+
+  // 동적 데이터 소스 (컬럼 헤더 클릭으로 데이터 소스 전환)
+  dynamicDataSource?: DynamicDataSourceConfig;
+}
+
+/**
+ * 동적 데이터 소스 설정
+ * 컬럼 헤더를 클릭하여 데이터 소스를 전환할 수 있는 기능
+ * 예: 거래처별 단가, 품목별 단가, 기준 단가 등을 선택
+ */
+export interface DynamicDataSourceConfig {
+  enabled: boolean;
+  options: DynamicDataSourceOption[];
+  defaultOptionId?: string; // 기본 선택 옵션 ID
+}
+
+/**
+ * 동적 데이터 소스 옵션
+ * 각 옵션은 다른 테이블/API에서 데이터를 가져오는 방법을 정의
+ */
+export interface DynamicDataSourceOption {
+  id: string;
+  label: string; // 표시 라벨 (예: "거래처별 단가")
+
+  // 조회 방식
+  sourceType: "table" | "multiTable" | "api";
+
+  // 테이블 직접 조회 (단순 조인 - 1개 테이블)
+  tableConfig?: {
+    tableName: string; // 참조 테이블명
+    valueColumn: string; // 가져올 값 컬럼
+    joinConditions: {
+      sourceField: string; // 현재 행의 필드
+      targetField: string; // 참조 테이블의 필드
+    }[];
+  };
+
+  // 테이블 복합 조인 (2개 이상 테이블 조인)
+  multiTableConfig?: {
+    // 조인 체인 정의 (순서대로 조인)
+    joinChain: MultiTableJoinStep[];
+    // 최종적으로 가져올 값 컬럼 (마지막 테이블에서)
+    valueColumn: string;
+  };
+
+  // 전용 API 호출 (복잡한 다중 조인)
+  apiConfig?: {
+    endpoint: string; // API 엔드포인트 (예: "/api/price/customer")
+    method?: "GET" | "POST"; // HTTP 메서드 (기본: GET)
+    parameterMappings: {
+      paramName: string; // API 파라미터명
+      sourceField: string; // 현재 행의 필드
+    }[];
+    responseValueField: string; // 응답에서 값을 가져올 필드
+  };
+}
+
+/**
+ * 복합 조인 단계 정의
+ * 예: item_info.item_number → customer_item.item_code → customer_item.id → customer_item_price.customer_item_id
+ */
+export interface MultiTableJoinStep {
+  // 조인할 테이블
+  tableName: string;
+  // 조인 조건
+  joinCondition: {
+    // 이전 단계의 필드 (첫 번째 단계는 현재 행의 필드)
+    fromField: string;
+    // 이 테이블의 필드
+    toField: string;
+  };
+  // 다음 단계로 전달할 필드 (다음 조인에 사용)
+  outputField?: string;
+  // 추가 필터 조건 (선택사항)
+  additionalFilters?: {
+    field: string;
+    operator: "=" | "!=" | ">" | "<" | ">=" | "<=";
+    value: string | number | boolean;
+    // 값이 현재 행에서 오는 경우
+    valueFromField?: string;
+  }[];
 }
 
 /**
@@ -101,11 +182,10 @@ export interface ItemSelectionModalProps {
   sourceColumns: string[];
   sourceSearchFields?: string[];
   multiSelect?: boolean;
-  filterCondition?: Record<string, any>;
+  filterCondition?: Record<string, unknown>;
   modalTitle: string;
-  alreadySelected: any[]; // 이미 선택된 항목들 (중복 방지용)
+  alreadySelected: Record<string, unknown>[]; // 이미 선택된 항목들 (중복 방지용)
   uniqueField?: string;
-  onSelect: (items: any[]) => void;
+  onSelect: (items: Record<string, unknown>[]) => void;
   columnLabels?: Record<string, string>; // 컬럼명 -> 라벨명 매핑
 }
-
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
index 85e43ce9..980bbfe9 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
@@ -55,7 +55,8 @@ export function RepeatScreenModalComponent({
   ...props
 }: RepeatScreenModalComponentProps) {
   // props에서도 groupedData를 추출 (DynamicWebTypeRenderer에서 전달될 수 있음)
-  const groupedData = propsGroupedData || (props as any).groupedData;
+  // DynamicComponentRenderer에서는 _groupedData로 전달됨
+  const groupedData = propsGroupedData || (props as any).groupedData || (props as any)._groupedData;
   const componentConfig = {
     ...config,
     ...component?.config,
@@ -99,25 +100,99 @@ export function RepeatScreenModalComponent({
     contentRowId: string;
   } | null>(null);
 
+  // 🆕 v3.13: 외부에서 저장 트리거 가능하도록 이벤트 리스너 추가
+  useEffect(() => {
+    const handleTriggerSave = async (event: Event) => {
+      if (!(event instanceof CustomEvent)) return;
+      
+      console.log("[RepeatScreenModal] triggerRepeatScreenModalSave 이벤트 수신");
+      
+      try {
+        setIsSaving(true);
+        
+        // 기존 데이터 저장
+        if (cardMode === "withTable") {
+          await saveGroupedData();
+        } else {
+          await saveSimpleData();
+        }
+
+        // 외부 테이블 데이터 저장
+        await saveExternalTableData();
+
+        // 연동 저장 처리 (syncSaves)
+        await processSyncSaves();
+
+        console.log("[RepeatScreenModal] 외부 트리거 저장 완료");
+        
+        // 저장 완료 이벤트 발생
+        window.dispatchEvent(new CustomEvent("repeatScreenModalSaveComplete", {
+          detail: { success: true }
+        }));
+        
+        // 성공 콜백 실행
+        if (event.detail?.onSuccess) {
+          event.detail.onSuccess();
+        }
+      } catch (error: any) {
+        console.error("[RepeatScreenModal] 외부 트리거 저장 실패:", error);
+        
+        // 저장 실패 이벤트 발생
+        window.dispatchEvent(new CustomEvent("repeatScreenModalSaveComplete", {
+          detail: { success: false, error: error.message }
+        }));
+        
+        // 실패 콜백 실행
+        if (event.detail?.onError) {
+          event.detail.onError(error);
+        }
+      } finally {
+        setIsSaving(false);
+      }
+    };
+
+    window.addEventListener("triggerRepeatScreenModalSave", handleTriggerSave as EventListener);
+    return () => {
+      window.removeEventListener("triggerRepeatScreenModalSave", handleTriggerSave as EventListener);
+    };
+  }, [cardMode, groupedCardsData, externalTableData, contentRows]);
+
   // 🆕 v3.9: beforeFormSave 이벤트 핸들러 - ButtonPrimary 저장 시 externalTableData를 formData에 병합
   useEffect(() => {
     const handleBeforeFormSave = (event: Event) => {
       if (!(event instanceof CustomEvent) || !event.detail?.formData) return;
 
       console.log("[RepeatScreenModal] beforeFormSave 이벤트 수신");
+      console.log("[RepeatScreenModal] beforeFormSave - externalTableData:", externalTableData);
+      console.log("[RepeatScreenModal] beforeFormSave - groupedCardsData:", groupedCardsData.length, "개 카드");
 
       // 외부 테이블 데이터에서 dirty 행만 추출하여 저장 데이터 준비
       const saveDataByTable: Record<string, any[]> = {};
 
       for (const [key, rows] of Object.entries(externalTableData)) {
+        // key 형식: cardId-contentRowId
+        const keyParts = key.split("-");
+        const cardId = keyParts.slice(0, -1).join("-"); // contentRowId를 제외한 나머지가 cardId
+        
         // contentRow 찾기
         const contentRow = contentRows.find((r) => key.includes(r.id));
         if (!contentRow?.tableDataSource?.enabled) continue;
 
+        // 🆕 v3.13: 해당 카드의 대표 데이터 찾기 (joinConditions의 targetKey 값을 가져오기 위해)
+        const card = groupedCardsData.find((c) => c._cardId === cardId);
+        const representativeData = card?._representativeData || {};
+
         const targetTable = contentRow.tableCrud?.targetTable || contentRow.tableDataSource.sourceTable;
         
-        // dirty 행만 필터링 (삭제된 행 제외)
-        const dirtyRows = rows.filter((row) => row._isDirty && !row._isDeleted);
+        // dirty 행 또는 새로운 행 필터링 (삭제된 행 제외)
+        // 🆕 v3.13: _isNew 행도 포함 (새로 추가된 행은 _isDirty가 없을 수 있음)
+        const dirtyRows = rows.filter((row) => (row._isDirty || row._isNew) && !row._isDeleted);
+        
+        console.log(`[RepeatScreenModal] beforeFormSave - ${targetTable} 행 필터링:`, {
+          totalRows: rows.length,
+          dirtyRows: dirtyRows.length,
+          rowDetails: rows.map(r => ({ _isDirty: r._isDirty, _isNew: r._isNew, _isDeleted: r._isDeleted }))
+        });
         
         if (dirtyRows.length === 0) continue;
 
@@ -126,8 +201,9 @@ export function RepeatScreenModalComponent({
           .filter((col) => col.editable)
           .map((col) => col.field);
         
-        const joinKeys = (contentRow.tableDataSource.joinConditions || [])
-          .map((cond) => cond.sourceKey);
+        // 🆕 v3.13: joinConditions에서 sourceKey (저장 대상 테이블의 FK 컬럼) 추출
+        const joinConditions = contentRow.tableDataSource.joinConditions || [];
+        const joinKeys = joinConditions.map((cond) => cond.sourceKey);
 
         const allowedFields = [...new Set([...editableFields, ...joinKeys])];
 
@@ -145,6 +221,17 @@ export function RepeatScreenModalComponent({
             }
           }
           
+          // 🆕 v3.13: joinConditions를 사용하여 FK 값 자동 채우기
+          // 예: sales_order_id (sourceKey) = card의 id (targetKey)
+          for (const joinCond of joinConditions) {
+            const { sourceKey, targetKey } = joinCond;
+            // sourceKey가 저장 데이터에 없거나 null인 경우, 카드의 대표 데이터에서 targetKey 값을 가져옴
+            if (!saveData[sourceKey] && representativeData[targetKey] !== undefined) {
+              saveData[sourceKey] = representativeData[targetKey];
+              console.log(`[RepeatScreenModal] beforeFormSave - FK 자동 채우기: ${sourceKey} = ${representativeData[targetKey]} (from card.${targetKey})`);
+            }
+          }
+          
           // _isNew 플래그 유지
           saveData._isNew = row._isNew;
           saveData._targetTable = targetTable;
@@ -590,18 +677,26 @@ export function RepeatScreenModalComponent({
 
     if (!hasExternalAggregation) return;
 
-    // contentRows에서 외부 테이블 데이터 소스가 있는 table 타입 행 찾기
-    const tableRowWithExternalSource = contentRows.find(
+    // contentRows에서 외부 테이블 데이터 소스가 있는 모든 table 타입 행 찾기
+    const tableRowsWithExternalSource = contentRows.filter(
       (row) => row.type === "table" && row.tableDataSource?.enabled
     );
 
-    if (!tableRowWithExternalSource) return;
+    if (tableRowsWithExternalSource.length === 0) return;
 
     // 각 카드의 집계 재계산
     const updatedCards = groupedCardsData.map((card) => {
-      const key = `${card._cardId}-${tableRowWithExternalSource.id}`;
+      // 🆕 v3.11: 테이블 행 ID별로 외부 데이터를 구분하여 저장
+      const externalRowsByTableId: Record<string, any[]> = {};
+      const allExternalRows: any[] = [];
+      
+      for (const tableRow of tableRowsWithExternalSource) {
+        const key = `${card._cardId}-${tableRow.id}`;
       // 🆕 v3.7: 삭제된 행은 집계에서 제외
-      const externalRows = (extData[key] || []).filter((row) => !row._isDeleted);
+        const rows = (extData[key] || []).filter((row) => !row._isDeleted);
+        externalRowsByTableId[tableRow.id] = rows;
+        allExternalRows.push(...rows);
+      }
 
       // 집계 재계산
       const newAggregations: Record<string, number> = {};
@@ -616,7 +711,7 @@ export function RepeatScreenModalComponent({
           if (isExternalTable) {
             // 외부 테이블 집계
             newAggregations[agg.resultField] = calculateColumnAggregation(
-              externalRows, 
+              allExternalRows, 
               agg.sourceField || "", 
               agg.type || "sum"
             );
@@ -626,12 +721,28 @@ export function RepeatScreenModalComponent({
               calculateColumnAggregation(card._rows, agg.sourceField || "", agg.type || "sum");
           }
         } else if (sourceType === "formula" && agg.formula) {
+          // 🆕 v3.11: externalTableRefs 기반으로 필터링된 외부 데이터 사용
+          let filteredExternalRows: any[];
+          
+          if (agg.externalTableRefs && agg.externalTableRefs.length > 0) {
+            // 특정 테이블만 참조
+            filteredExternalRows = [];
+            for (const tableId of agg.externalTableRefs) {
+              if (externalRowsByTableId[tableId]) {
+                filteredExternalRows.push(...externalRowsByTableId[tableId]);
+              }
+            }
+          } else {
+            // 모든 외부 테이블 데이터 사용 (기존 동작)
+            filteredExternalRows = allExternalRows;
+          }
+          
           // 가상 집계 (연산식) - 외부 테이블 데이터 포함하여 재계산
           newAggregations[agg.resultField] = evaluateFormulaWithContext(
             agg.formula,
             card._representativeData,
             card._rows,
-            externalRows,
+            filteredExternalRows,
             newAggregations // 이전 집계 결과 참조
           );
         }
@@ -654,8 +765,8 @@ export function RepeatScreenModalComponent({
     });
   };
 
-  // 🆕 v3.1: 외부 테이블 행 추가
-  const handleAddExternalRow = (cardId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
+  // 🆕 v3.1: 외부 테이블 행 추가 (v3.13: 자동 채번 기능 추가)
+  const handleAddExternalRow = async (cardId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
     const key = `${cardId}-${contentRowId}`;
     const card = groupedCardsData.find((c) => c._cardId === cardId) || cardsData.find((c) => c._cardId === cardId);
     const representativeData = (card as GroupedCardData)?._representativeData || card || {};
@@ -707,6 +818,41 @@ export function RepeatScreenModalComponent({
       }
     }
 
+    // 🆕 v3.13: 자동 채번 처리
+    const rowNumbering = contentRow.tableCrud?.rowNumbering;
+    console.log("[RepeatScreenModal] 채번 설정 확인:", {
+      tableCrud: contentRow.tableCrud,
+      rowNumbering,
+      enabled: rowNumbering?.enabled,
+      targetColumn: rowNumbering?.targetColumn,
+      numberingRuleId: rowNumbering?.numberingRuleId,
+    });
+    if (rowNumbering?.enabled && rowNumbering.targetColumn && rowNumbering.numberingRuleId) {
+      try {
+        console.log("[RepeatScreenModal] 자동 채번 시작:", {
+          targetColumn: rowNumbering.targetColumn,
+          numberingRuleId: rowNumbering.numberingRuleId,
+        });
+        
+        // 채번 API 호출 (allocate: 실제 시퀀스 증가)
+        const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
+        const response = await allocateNumberingCode(rowNumbering.numberingRuleId);
+        
+        if (response.success && response.data) {
+          newRowData[rowNumbering.targetColumn] = response.data.generatedCode;
+          
+          console.log("[RepeatScreenModal] 자동 채번 완료:", {
+            column: rowNumbering.targetColumn,
+            generatedCode: response.data.generatedCode,
+          });
+        } else {
+          console.warn("[RepeatScreenModal] 채번 실패:", response);
+        }
+      } catch (error) {
+        console.error("[RepeatScreenModal] 채번 API 호출 실패:", error);
+      }
+    }
+
     console.log("[RepeatScreenModal] 새 행 추가:", {
       cardId,
       contentRowId,
@@ -1009,26 +1155,70 @@ export function RepeatScreenModalComponent({
     }
   };
 
-  // 🆕 v3.1: 외부 테이블 행 삭제 실행 (소프트 삭제 - _isDeleted 플래그 설정)
-  const handleDeleteExternalRow = (cardId: string, rowId: string, contentRowId: string) => {
+  // 🆕 v3.14: 외부 테이블 행 삭제 실행 (즉시 DELETE API 호출)
+  const handleDeleteExternalRow = async (cardId: string, rowId: string, contentRowId: string) => {
     const key = `${cardId}-${contentRowId}`;
+    const rows = externalTableData[key] || [];
+    const targetRow = rows.find((row) => row._rowId === rowId);
+
+    // 기존 DB 데이터인 경우 (id가 있는 경우) 즉시 삭제
+    if (targetRow?._originalData?.id) {
+      try {
+        const contentRow = contentRows.find((r) => r.id === contentRowId);
+        const targetTable = contentRow?.tableCrud?.targetTable || contentRow?.tableDataSource?.sourceTable;
+
+        if (!targetTable) {
+          console.error("[RepeatScreenModal] 삭제 대상 테이블을 찾을 수 없습니다.");
+          return;
+        }
+
+        console.log(`[RepeatScreenModal] DELETE API 호출: ${targetTable}, id=${targetRow._originalData.id}`);
+        
+        // 백엔드는 배열 형태의 데이터를 기대함
+        await apiClient.request({
+          method: "DELETE",
+          url: `/table-management/tables/${targetTable}/delete`,
+          data: [{ id: targetRow._originalData.id }],
+        });
+
+        console.log(`[RepeatScreenModal] DELETE 성공: ${targetTable}, id=${targetRow._originalData.id}`);
+
+        // 성공 시 UI에서 완전히 제거
     setExternalTableData((prev) => {
       const newData = {
         ...prev,
-        [key]: (prev[key] || []).map((row) =>
-          row._rowId === rowId
-            ? { ...row, _isDeleted: true, _isDirty: true }
-            : row
-        ),
+            [key]: prev[key].filter((row) => row._rowId !== rowId),
       };
       
-      // 🆕 v3.5: 행 삭제 시 집계 재계산 (삭제된 행 제외)
+          // 행 삭제 시 집계 재계산
       setTimeout(() => {
         recalculateAggregationsWithExternalData(newData);
       }, 0);
       
       return newData;
     });
+      } catch (error: any) {
+        console.error(`[RepeatScreenModal] DELETE 실패:`, error.response?.data || error.message);
+        // 에러 시에도 다이얼로그 닫기
+      }
+    } else {
+      // 새로 추가된 행 (아직 DB에 없음) - UI에서만 제거
+      console.log(`[RepeatScreenModal] 새 행 삭제 (DB 없음): rowId=${rowId}`);
+      setExternalTableData((prev) => {
+        const newData = {
+          ...prev,
+          [key]: prev[key].filter((row) => row._rowId !== rowId),
+        };
+
+        // 행 삭제 시 집계 재계산
+        setTimeout(() => {
+          recalculateAggregationsWithExternalData(newData);
+        }, 0);
+
+        return newData;
+      });
+    }
+
     setDeleteConfirmOpen(false);
     setPendingDeleteInfo(null);
   };
@@ -1323,8 +1513,13 @@ export function RepeatScreenModalComponent({
       for (const fn of extAggFunctions) {
         const regex = new RegExp(`${fn}\\(\\{(\\w+)\\}\\)`, "g");
         expression = expression.replace(regex, (match, fieldName) => {
-          if (!externalRows || externalRows.length === 0) return "0";
+          if (!externalRows || externalRows.length === 0) {
+            console.log(`[SUM_EXT] ${fieldName}: 외부 데이터 없음`);
+            return "0";
+          }
           const values = externalRows.map((row) => Number(row[fieldName]) || 0);
+          const sum = values.reduce((a, b) => a + b, 0);
+          console.log(`[SUM_EXT] ${fieldName}: ${externalRows.length}개 행, 값들:`, values, `합계: ${sum}`);
           const baseFn = fn.replace("_EXT", "");
           switch (baseFn) {
             case "SUM":
@@ -1525,6 +1720,9 @@ export function RepeatScreenModalComponent({
       // 🆕 v3.1: 외부 테이블 데이터 저장
       await saveExternalTableData();
 
+      // 🆕 v3.12: 연동 저장 처리 (syncSaves)
+      await processSyncSaves();
+
       alert("저장되었습니다.");
     } catch (error: any) {
       console.error("저장 실패:", error);
@@ -1582,6 +1780,102 @@ export function RepeatScreenModalComponent({
     });
   };
 
+  // 🆕 v3.12: 연동 저장 처리 (syncSaves)
+  const processSyncSaves = async () => {
+    const syncPromises: Promise<void>[] = [];
+
+    // contentRows에서 syncSaves가 설정된 테이블 행 찾기
+    for (const contentRow of contentRows) {
+      if (contentRow.type !== "table") continue;
+      if (!contentRow.tableCrud?.syncSaves?.length) continue;
+
+      const sourceTable = contentRow.tableDataSource?.sourceTable;
+      if (!sourceTable) continue;
+
+      // 이 테이블 행의 모든 카드 데이터 수집
+      for (const card of groupedCardsData) {
+        const key = `${card._cardId}-${contentRow.id}`;
+        const rows = (externalTableData[key] || []).filter((row) => !row._isDeleted);
+
+        // 각 syncSave 설정 처리
+        for (const syncSave of contentRow.tableCrud.syncSaves) {
+          if (!syncSave.enabled) continue;
+          if (!syncSave.sourceColumn || !syncSave.targetTable || !syncSave.targetColumn) continue;
+
+          // 조인 키 값 수집 (중복 제거)
+          const joinKeyValues = new Set<string | number>();
+          for (const row of rows) {
+            const keyValue = row[syncSave.joinKey.sourceField];
+            if (keyValue !== undefined && keyValue !== null) {
+              joinKeyValues.add(keyValue);
+            }
+          }
+
+          // 각 조인 키별로 집계 계산 및 업데이트
+          for (const keyValue of joinKeyValues) {
+            // 해당 조인 키에 해당하는 행들만 필터링
+            const filteredRows = rows.filter(
+              (row) => row[syncSave.joinKey.sourceField] === keyValue
+            );
+
+            // 집계 계산
+            let aggregatedValue: number = 0;
+            const values = filteredRows.map((row) => Number(row[syncSave.sourceColumn]) || 0);
+
+            switch (syncSave.aggregationType) {
+              case "sum":
+                aggregatedValue = values.reduce((a, b) => a + b, 0);
+                break;
+              case "count":
+                aggregatedValue = values.length;
+                break;
+              case "avg":
+                aggregatedValue = values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+                break;
+              case "min":
+                aggregatedValue = values.length > 0 ? Math.min(...values) : 0;
+                break;
+              case "max":
+                aggregatedValue = values.length > 0 ? Math.max(...values) : 0;
+                break;
+              case "latest":
+                aggregatedValue = values.length > 0 ? values[values.length - 1] : 0;
+                break;
+            }
+
+            console.log(`[SyncSave] ${sourceTable}.${syncSave.sourceColumn} → ${syncSave.targetTable}.${syncSave.targetColumn}`, {
+              joinKey: keyValue,
+              aggregationType: syncSave.aggregationType,
+              values,
+              aggregatedValue,
+            });
+
+            // 대상 테이블 업데이트
+            syncPromises.push(
+              apiClient
+                .put(`/table-management/tables/${syncSave.targetTable}/data/${keyValue}`, {
+                  [syncSave.targetColumn]: aggregatedValue,
+                })
+                .then(() => {
+                  console.log(`[SyncSave] 업데이트 완료: ${syncSave.targetTable}.${syncSave.targetColumn} = ${aggregatedValue} (id=${keyValue})`);
+                })
+                .catch((err) => {
+                  console.error(`[SyncSave] 업데이트 실패:`, err);
+                  throw err;
+                })
+            );
+          }
+        }
+      }
+    }
+
+    if (syncPromises.length > 0) {
+      console.log(`[SyncSave] ${syncPromises.length}개 연동 저장 처리 중...`);
+      await Promise.all(syncPromises);
+      console.log(`[SyncSave] 연동 저장 완료`);
+    }
+  };
+
   // 🆕 v3.1: Footer 버튼 클릭 핸들러
   const handleFooterButtonClick = async (btn: FooterButtonConfig) => {
     switch (btn.action) {
@@ -1928,27 +2222,10 @@ export function RepeatScreenModalComponent({
                         // 🆕 v3.1: 외부 테이블 데이터 소스 사용
                         <div className="border rounded-lg overflow-hidden">
                           {/* 테이블 헤더 영역: 제목 + 버튼들 */}
-                          {(contentRow.tableTitle || contentRow.tableCrud?.allowSave || contentRow.tableCrud?.allowCreate) && (
+                          {(contentRow.tableTitle || contentRow.tableCrud?.allowCreate) && (
                             <div className="px-4 py-2 bg-muted/30 border-b text-sm font-medium flex items-center justify-between">
                               <span>{contentRow.tableTitle || ""}</span>
                               <div className="flex items-center gap-2">
-                                {/* 저장 버튼 - allowSave가 true일 때만 표시 */}
-                                {contentRow.tableCrud?.allowSave && (
-                                  <Button
-                                    variant="default"
-                                    size="sm"
-                                    onClick={() => handleTableAreaSave(card._cardId, contentRow.id, contentRow)}
-                                    disabled={isSaving || !(externalTableData[`${card._cardId}-${contentRow.id}`] || []).some((r: any) => r._isDirty)}
-                                    className="h-7 text-xs gap-1"
-                                  >
-                                    {isSaving ? (
-                                      <Loader2 className="h-3 w-3 animate-spin" />
-                                    ) : (
-                                      <Save className="h-3 w-3" />
-                                    )}
-                                    {contentRow.tableCrud?.saveButtonLabel || "저장"}
-                                  </Button>
-                                )}
                                 {/* 추가 버튼 */}
                                 {contentRow.tableCrud?.allowCreate && (
                                   <Button
@@ -1968,7 +2245,8 @@ export function RepeatScreenModalComponent({
                             {contentRow.showTableHeader !== false && (
                               <TableHeader>
                                 <TableRow className="bg-muted/50">
-                                  {(contentRow.tableColumns || []).map((col) => (
+                                  {/* 🆕 v3.13: hidden 컬럼 필터링 */}
+                                  {(contentRow.tableColumns || []).filter(col => !col.hidden).map((col) => (
                                     <TableHead
                                       key={col.id}
                                       style={{ width: col.width }}
@@ -1987,7 +2265,7 @@ export function RepeatScreenModalComponent({
                               {(externalTableData[`${card._cardId}-${contentRow.id}`] || []).length === 0 ? (
                                 <TableRow>
                                   <TableCell
-                                    colSpan={(contentRow.tableColumns?.length || 0) + (contentRow.tableCrud?.allowDelete ? 1 : 0)}
+                                    colSpan={(contentRow.tableColumns?.filter(col => !col.hidden)?.length || 0) + (contentRow.tableCrud?.allowDelete ? 1 : 0)}
                                     className="text-center py-8 text-muted-foreground"
                                   >
                                     데이터가 없습니다.
@@ -2003,7 +2281,8 @@ export function RepeatScreenModalComponent({
                                       row._isDeleted && "bg-destructive/10 opacity-60"
                                     )}
                                   >
-                                    {(contentRow.tableColumns || []).map((col) => (
+                                    {/* 🆕 v3.13: hidden 컬럼 필터링 */}
+                                    {(contentRow.tableColumns || []).filter(col => !col.hidden).map((col) => (
                                       <TableCell
                                         key={`${row._rowId}-${col.id}`}
                                         className={cn(
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
index 44ee5ce6..6bca0181 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
@@ -21,11 +21,15 @@ import {
   TableColumnConfig,
   CardContentRowConfig,
   AggregationDisplayConfig,
+  SyncSaveConfig,
+  RowNumberingConfig,
 } from "./types";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { cn } from "@/lib/utils";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 interface RepeatScreenModalConfigPanelProps {
   config: Partial<RepeatScreenModalProps>;
@@ -729,6 +733,2006 @@ function FormulaBuilder({
   );
 }
 
+// 🆕 집계 설정 전용 모달
+function AggregationSettingsModal({
+  open,
+  onOpenChange,
+  aggregations,
+  sourceTable,
+  allTables,
+  contentRows,
+  onSave,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  aggregations: AggregationConfig[];
+  sourceTable: string;
+  allTables: { tableName: string; displayName?: string }[];
+  contentRows: CardContentRowConfig[];
+  onSave: (aggregations: AggregationConfig[]) => void;
+}) {
+  // 로컬 상태로 집계 목록 관리
+  const [localAggregations, setLocalAggregations] = useState<AggregationConfig[]>(aggregations);
+  
+  // 모달 열릴 때 초기화
+  useEffect(() => {
+    if (open) {
+      setLocalAggregations(aggregations);
+    }
+  }, [open, aggregations]);
+
+  // 집계 추가
+  const addAggregation = (type: "column" | "formula") => {
+    const newAgg: AggregationConfig = {
+      sourceType: type,
+      resultField: `agg_${Date.now()}`,
+      label: type === "column" ? "새 집계" : "새 가상 집계",
+      ...(type === "column" ? { type: "sum", sourceField: "", sourceTable: sourceTable } : { formula: "" }),
+    };
+    setLocalAggregations([...localAggregations, newAgg]);
+  };
+
+  // 집계 삭제
+  const removeAggregation = (index: number) => {
+    const newAggs = [...localAggregations];
+    newAggs.splice(index, 1);
+    setLocalAggregations(newAggs);
+  };
+
+  // 집계 업데이트
+  const updateAggregation = (index: number, updates: Partial<AggregationConfig>) => {
+    const newAggs = [...localAggregations];
+    newAggs[index] = { ...newAggs[index], ...updates };
+    setLocalAggregations(newAggs);
+  };
+
+  // 집계 순서 변경
+  const moveAggregation = (index: number, direction: "up" | "down") => {
+    const newIndex = direction === "up" ? index - 1 : index + 1;
+    if (newIndex < 0 || newIndex >= localAggregations.length) return;
+    
+    const newAggs = [...localAggregations];
+    [newAggs[index], newAggs[newIndex]] = [newAggs[newIndex], newAggs[index]];
+    setLocalAggregations(newAggs);
+  };
+
+  // 저장
+  const handleSave = () => {
+    onSave(localAggregations);
+    onOpenChange(false);
+  };
+
+  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">집계 설정</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-3 py-3 pr-3">
+              {/* 집계 추가 버튼 */}
+              <div className="flex gap-2 sticky top-0 bg-background z-10 pb-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => addAggregation("column")}
+                  className="h-8 text-xs flex-1"
+                >
+                  <Plus className="h-3 w-3 mr-1" />
+                  컬럼 집계 추가
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => addAggregation("formula")}
+                  className="h-8 text-xs flex-1 bg-purple-50 hover:bg-purple-100 border-purple-200"
+                >
+                  <Plus className="h-3 w-3 mr-1" />
+                  가상 집계 추가
+                </Button>
+              </div>
+
+              {/* 집계 목록 */}
+              {localAggregations.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-3">
+                  {localAggregations.map((agg, index) => (
+                    <AggregationConfigItemModal
+                      key={`agg-modal-${index}`}
+                      agg={agg}
+                      index={index}
+                      totalCount={localAggregations.length}
+                      sourceTable={sourceTable}
+                      allTables={allTables}
+                      existingAggregations={localAggregations}
+                      contentRows={contentRows}
+                      onUpdate={(updates) => updateAggregation(index, updates)}
+                      onRemove={() => removeAggregation(index)}
+                      onMove={(direction) => moveAggregation(index, direction)}
+                    />
+                  ))}
+                </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">
+            저장 ({localAggregations.length}개)
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// 집계 설정 아이템 (모달용 - 더 넓은 공간 활용)
+function AggregationConfigItemModal({
+  agg,
+  index,
+  totalCount,
+  sourceTable,
+  allTables,
+  existingAggregations,
+  contentRows,
+  onUpdate,
+  onRemove,
+  onMove,
+}: {
+  agg: AggregationConfig;
+  index: number;
+  totalCount: number;
+  sourceTable: string;
+  allTables: { tableName: string; displayName?: string }[];
+  existingAggregations: AggregationConfig[];
+  contentRows: CardContentRowConfig[];
+  onUpdate: (updates: Partial<AggregationConfig>) => void;
+  onRemove: () => void;
+  onMove: (direction: "up" | "down") => void;
+}) {
+  const [localLabel, setLocalLabel] = useState(agg.label || "");
+  const [localResultField, setLocalResultField] = useState(agg.resultField || "");
+  const [localFormula, setLocalFormula] = useState(agg.formula || "");
+
+  useEffect(() => {
+    setLocalLabel(agg.label || "");
+    setLocalResultField(agg.resultField || "");
+    setLocalFormula(agg.formula || "");
+  }, [agg.label, agg.resultField, agg.formula]);
+
+  // 현재 집계보다 앞에 정의된 집계들만 참조 가능 (순환 참조 방지)
+  const referenceableAggregations = existingAggregations.slice(0, index);
+
+  const currentSourceType = agg.sourceType || "column";
+  const isFormula = currentSourceType === "formula";
+
+  return (
+    <div className={cn(
+      "border rounded-lg p-4 space-y-4",
+      isFormula ? "bg-purple-50 dark:bg-purple-950 border-purple-200" : "bg-blue-50 dark:bg-blue-950 border-blue-200"
+    )}>
+      {/* 헤더 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          {/* 순서 변경 버튼 */}
+          <div className="flex flex-col">
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => onMove("up")}
+              disabled={index === 0}
+              className="h-4 w-6 p-0"
+            >
+              <ChevronUp className="h-3 w-3" />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => onMove("down")}
+              disabled={index === totalCount - 1}
+              className="h-4 w-6 p-0"
+            >
+              <ChevronDown className="h-3 w-3" />
+            </Button>
+          </div>
+          <Badge className={cn(
+            "text-xs px-2 py-0.5",
+            isFormula ? "bg-purple-100 text-purple-700" : "bg-blue-100 text-blue-700"
+          )}>
+            {isFormula ? "가상" : "집계"} {index + 1}
+          </Badge>
+          <span className="text-sm font-medium">{agg.label || "(라벨 없음)"}</span>
+        </div>
+        <Button size="sm" variant="ghost" onClick={onRemove} className="h-7 w-7 p-0 hover:bg-destructive/10 hover:text-destructive">
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* 집계 타입 선택 */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-1.5">
+          <Label className="text-xs">집계 타입</Label>
+          <Select
+            value={currentSourceType}
+            onValueChange={(value) => onUpdate({ sourceType: value as "column" | "formula" })}
+          >
+            <SelectTrigger className="h-9 text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="column">컬럼 집계 (SUM, COUNT 등)</SelectItem>
+              <SelectItem value="formula">가상 집계 (연산식)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label className="text-xs">결과 필드명 *</Label>
+          <Input
+            value={localResultField}
+            onChange={(e) => setLocalResultField(e.target.value)}
+            onBlur={() => onUpdate({ resultField: localResultField })}
+            placeholder="예: total_order_qty"
+            className="h-9 text-sm"
+          />
+        </div>
+      </div>
+
+      {/* 컬럼 집계 설정 */}
+      {!isFormula && (
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-1.5">
+            <Label className="text-xs">테이블</Label>
+            <Select
+              value={agg.sourceTable || sourceTable}
+              onValueChange={(value) => onUpdate({ sourceTable: value })}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder="테이블 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={sourceTable}>{sourceTable} (기본)</SelectItem>
+                {allTables.filter(t => t.tableName !== sourceTable).map((table) => (
+                  <SelectItem key={table.tableName} value={table.tableName}>
+                    {table.displayName || table.tableName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs">컬럼</Label>
+            <SourceColumnSelector
+              sourceTable={agg.sourceTable || sourceTable}
+              value={agg.sourceField || ""}
+              onChange={(value) => onUpdate({ sourceField: value })}
+              placeholder="컬럼 선택"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs">집계 함수</Label>
+            <Select
+              value={agg.type || "sum"}
+              onValueChange={(value) => onUpdate({ type: value as AggregationConfig["type"] })}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="sum">합계 (SUM)</SelectItem>
+                <SelectItem value="count">개수 (COUNT)</SelectItem>
+                <SelectItem value="avg">평균 (AVG)</SelectItem>
+                <SelectItem value="min">최소 (MIN)</SelectItem>
+                <SelectItem value="max">최대 (MAX)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      )}
+
+      {/* 가상 집계 (연산식) 설정 */}
+      {isFormula && (
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label className="text-xs">연산식</Label>
+            <div className="p-3 bg-background rounded-lg border min-h-[60px]">
+              <code className="text-sm break-all">{localFormula || "아래에서 요소를 추가하세요"}</code>
+            </div>
+          </div>
+
+          {/* 연산자 */}
+          <div className="space-y-1.5">
+            <Label className="text-xs">연산자</Label>
+            <div className="flex gap-1 flex-wrap">
+              {["+", "-", "*", "/", "(", ")"].map((op) => (
+                <Button
+                  key={op}
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const newFormula = localFormula + ` ${op} `;
+                    setLocalFormula(newFormula);
+                    onUpdate({ formula: newFormula });
+                  }}
+                  className="h-8 w-8 p-0 text-sm font-mono"
+                >
+                  {op}
+                </Button>
+              ))}
+              <Button
+                size="sm"
+                variant="destructive"
+                onClick={() => {
+                  setLocalFormula("");
+                  onUpdate({ formula: "" });
+                }}
+                className="h-8 px-2 text-xs ml-2"
+              >
+                초기화
+              </Button>
+            </div>
+          </div>
+
+          {/* 이전 집계 참조 */}
+          {referenceableAggregations.length > 0 && (
+            <div className="space-y-1.5 p-3 bg-blue-100 dark:bg-blue-900 rounded-lg">
+              <Label className="text-xs text-blue-700 dark:text-blue-300">이전 집계 참조</Label>
+              <div className="flex flex-wrap gap-1">
+                {referenceableAggregations.map((refAgg) => (
+                  <Button
+                    key={refAgg.resultField}
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      const newFormula = localFormula + `{${refAgg.resultField}}`;
+                      setLocalFormula(newFormula);
+                      onUpdate({ formula: newFormula });
+                    }}
+                    className="h-7 text-xs bg-blue-50 hover:bg-blue-100 border-blue-300"
+                  >
+                    {refAgg.label || refAgg.resultField}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 테이블 컬럼 집계 */}
+          <div className="space-y-2 p-3 bg-green-100 dark:bg-green-900 rounded-lg">
+            <Label className="text-xs text-green-700 dark:text-green-300">테이블 컬럼 집계</Label>
+            <FormulaColumnAggregator
+              sourceTable={sourceTable}
+              allTables={allTables}
+              onAdd={(formulaPart) => {
+                const newFormula = localFormula + formulaPart;
+                setLocalFormula(newFormula);
+                onUpdate({ formula: newFormula });
+              }}
+            />
+          </div>
+
+          {/* 🆕 v3.11: SUM_EXT 참조 테이블 선택 */}
+          {localFormula.includes("_EXT") && (
+            <ExternalTableRefSelector
+              contentRows={contentRows}
+              selectedRefs={agg.externalTableRefs || []}
+              onUpdate={(refs) => onUpdate({ externalTableRefs: refs })}
+            />
+          )}
+        </div>
+      )}
+
+      {/* 라벨 및 숨김 설정 */}
+      <div className="grid grid-cols-3 gap-4">
+        <div className="space-y-1.5 col-span-2">
+          <Label className="text-xs">표시 라벨 *</Label>
+          <Input
+            value={localLabel}
+            onChange={(e) => setLocalLabel(e.target.value)}
+            onBlur={() => onUpdate({ label: localLabel })}
+            placeholder="예: 총수주량"
+            className="h-9 text-sm"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-xs">숨김</Label>
+          <div className="flex items-center h-9 px-3 border rounded-md bg-background">
+            <Switch
+              checked={agg.hidden || false}
+              onCheckedChange={(checked) => onUpdate({ hidden: checked })}
+              className="scale-90"
+            />
+            <span className="ml-2 text-xs text-muted-foreground">
+              {agg.hidden ? "숨김" : "표시"}
+            </span>
+          </div>
+        </div>
+      </div>
+      {agg.hidden && (
+        <p className="text-[10px] text-amber-600 bg-amber-50 px-2 py-1 rounded">
+          이 집계는 연산에만 사용되며 레이아웃에서 선택할 수 없습니다.
+        </p>
+      )}
+    </div>
+  );
+}
+
+// 수식에 테이블 컬럼 집계 추가하는 컴포넌트
+function FormulaColumnAggregator({
+  sourceTable,
+  allTables,
+  onAdd,
+}: {
+  sourceTable: string;
+  allTables: { tableName: string; displayName?: string }[];
+  onAdd: (formulaPart: string) => void;
+}) {
+  // 데이터 소스 타입: "current" (현재 카드), "external" (외부 테이블 행)
+  const [dataSourceType, setDataSourceType] = useState<"current" | "external">("current");
+  const [selectedTable, setSelectedTable] = useState(sourceTable);
+  const [selectedColumn, setSelectedColumn] = useState("");
+  const [selectedFunction, setSelectedFunction] = useState<string>("SUM");
+
+  // 데이터 소스 타입 변경 시 테이블 초기화
+  useEffect(() => {
+    if (dataSourceType === "current") {
+      setSelectedTable(sourceTable);
+    }
+  }, [dataSourceType, sourceTable]);
+
+  const handleAdd = () => {
+    if (!selectedColumn) return;
+    
+    // 외부 데이터는 항상 _EXT 접미사 사용
+    const funcName = dataSourceType === "external" ? `${selectedFunction}_EXT` : selectedFunction;
+    const formulaPart = `${funcName}({${selectedColumn}})`;
+    onAdd(formulaPart);
+    setSelectedColumn("");
+  };
+
+  return (
+    <div className="space-y-2">
+      {/* 데이터 소스 선택 */}
+      <div className="grid grid-cols-2 gap-2">
+        <Button
+          size="sm"
+          variant={dataSourceType === "current" ? "default" : "outline"}
+          onClick={() => setDataSourceType("current")}
+          className="h-7 text-xs"
+        >
+          현재 카드 데이터
+        </Button>
+        <Button
+          size="sm"
+          variant={dataSourceType === "external" ? "default" : "outline"}
+          onClick={() => setDataSourceType("external")}
+          className="h-7 text-xs bg-amber-100 hover:bg-amber-200 text-amber-800 border-amber-300"
+        >
+          외부 테이블 데이터
+        </Button>
+      </div>
+      
+      {dataSourceType === "external" && (
+        <p className="text-[10px] text-amber-600 bg-amber-50 px-2 py-1 rounded">
+          레이아웃의 테이블 행에서 조회한 외부 데이터를 집계합니다 (같은 품목의 다른 수주 등)
+        </p>
+      )}
+
+      <div className="grid grid-cols-3 gap-2">
+        <div className="space-y-1">
+          <Label className="text-[10px]">테이블</Label>
+          <Select 
+            value={selectedTable} 
+            onValueChange={setSelectedTable}
+            disabled={dataSourceType === "current"}
+          >
+            <SelectTrigger className="h-7 text-xs">
+              <SelectValue placeholder="테이블" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={sourceTable}>{sourceTable}</SelectItem>
+              {allTables.filter(t => t.tableName !== sourceTable).map((table) => (
+                <SelectItem key={table.tableName} value={table.tableName}>
+                  {table.displayName || table.tableName}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-1">
+          <Label className="text-[10px]">컬럼</Label>
+          <SourceColumnSelector
+            sourceTable={selectedTable}
+            value={selectedColumn}
+            onChange={setSelectedColumn}
+            placeholder="컬럼"
+          />
+        </div>
+
+        <div className="space-y-1">
+          <Label className="text-[10px]">함수</Label>
+          <Select value={selectedFunction} onValueChange={setSelectedFunction}>
+            <SelectTrigger className="h-7 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="SUM">SUM</SelectItem>
+              <SelectItem value="COUNT">COUNT</SelectItem>
+              <SelectItem value="AVG">AVG</SelectItem>
+              <SelectItem value="MIN">MIN</SelectItem>
+              <SelectItem value="MAX">MAX</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <Button
+        size="sm"
+        onClick={handleAdd}
+        disabled={!selectedColumn}
+        className="h-7 text-xs w-full"
+      >
+        {dataSourceType === "external" ? `${selectedFunction}_EXT` : selectedFunction}({selectedColumn || "컬럼"}) 추가
+      </Button>
+    </div>
+  );
+}
+
+// 🆕 v3.11: SUM_EXT 참조 테이블 선택 컴포넌트
+function ExternalTableRefSelector({
+  contentRows,
+  selectedRefs,
+  onUpdate,
+}: {
+  contentRows: CardContentRowConfig[];
+  selectedRefs: string[];
+  onUpdate: (refs: string[]) => void;
+}) {
+  // 외부 데이터 소스가 활성화된 테이블 행만 필터링
+  const tableRowsWithExternalSource = contentRows.filter(
+    (row) => row.type === "table" && row.tableDataSource?.enabled
+  );
+
+  if (tableRowsWithExternalSource.length === 0) {
+    return (
+      <div className="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg">
+        <p className="text-xs text-muted-foreground">
+          레이아웃에 외부 데이터 소스가 설정된 테이블 행이 없습니다.
+        </p>
+      </div>
+    );
+  }
+
+  const isAllSelected = selectedRefs.length === 0;
+
+  const handleToggleTable = (tableId: string) => {
+    if (selectedRefs.includes(tableId)) {
+      // 이미 선택된 경우 제거
+      const newRefs = selectedRefs.filter((id) => id !== tableId);
+      onUpdate(newRefs);
+    } else {
+      // 선택되지 않은 경우 추가
+      onUpdate([...selectedRefs, tableId]);
+    }
+  };
+
+  const handleSelectAll = () => {
+    onUpdate([]); // 빈 배열 = 모든 테이블 사용
+  };
+
+  return (
+    <div className="p-3 bg-amber-50 dark:bg-amber-950 rounded-lg border border-amber-200 space-y-2">
+      <div className="flex items-center justify-between">
+        <Label className="text-xs text-amber-700 dark:text-amber-300 font-medium">
+          SUM_EXT 참조 테이블 (외부 데이터 소스)
+        </Label>
+        <Button
+          size="sm"
+          variant={isAllSelected ? "default" : "outline"}
+          onClick={handleSelectAll}
+          className="h-6 text-[10px] px-2"
+        >
+          전체 선택
+        </Button>
+      </div>
+      
+      <p className="text-[10px] text-amber-600">
+        SUM_EXT 함수가 참조할 테이블을 선택하세요. 선택하지 않으면 모든 외부 테이블 데이터를 사용합니다.
+      </p>
+
+      <div className="space-y-1">
+        {tableRowsWithExternalSource.map((row) => {
+          const isSelected = selectedRefs.length === 0 || selectedRefs.includes(row.id);
+          const tableTitle = row.title || row.tableDataSource?.sourceTable || row.id;
+          const tableName = row.tableDataSource?.sourceTable || "";
+
+          return (
+            <div
+              key={row.id}
+              className={cn(
+                "flex items-center gap-2 p-2 rounded border cursor-pointer transition-colors",
+                isSelected
+                  ? "bg-amber-100 border-amber-300"
+                  : "bg-white border-gray-200 hover:bg-gray-50"
+              )}
+              onClick={() => handleToggleTable(row.id)}
+            >
+              <input
+                type="checkbox"
+                checked={isSelected}
+                onChange={() => {}} // onClick에서 처리
+                className="h-4 w-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500"
+              />
+              <div className="flex-1 min-w-0">
+                <p className="text-xs font-medium truncate">{tableTitle}</p>
+                <p className="text-[10px] text-muted-foreground truncate">
+                  테이블: {tableName} | ID: {row.id.slice(-10)}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {selectedRefs.length > 0 && (
+        <p className="text-[10px] text-amber-700 bg-amber-100 px-2 py-1 rounded">
+          선택된 테이블: {selectedRefs.length}개 (특정 테이블만 참조)
+        </p>
+      )}
+    </div>
+  );
+}
+
+// 🆕 v3.12: 연동 저장 설정 섹션
+function SyncSaveConfigSection({
+  row,
+  allTables,
+  onUpdateRow,
+}: {
+  row: CardContentRowConfig;
+  allTables: { tableName: string; displayName?: string }[];
+  onUpdateRow: (updates: Partial<CardContentRowConfig>) => void;
+}) {
+  const syncSaves = row.tableCrud?.syncSaves || [];
+  const sourceTable = row.tableDataSource?.sourceTable || "";
+
+  // 연동 저장 추가
+  const addSyncSave = () => {
+    const newSyncSave: SyncSaveConfig = {
+      id: `sync-${Date.now()}`,
+      enabled: true,
+      sourceColumn: "",
+      aggregationType: "sum",
+      targetTable: "",
+      targetColumn: "",
+      joinKey: {
+        sourceField: "",
+        targetField: "id",
+      },
+    };
+    
+    onUpdateRow({
+      tableCrud: {
+        ...row.tableCrud,
+        allowCreate: row.tableCrud?.allowCreate || false,
+        allowUpdate: row.tableCrud?.allowUpdate || false,
+        allowDelete: row.tableCrud?.allowDelete || false,
+        syncSaves: [...syncSaves, newSyncSave],
+      },
+    });
+  };
+
+  // 연동 저장 삭제
+  const removeSyncSave = (index: number) => {
+    const newSyncSaves = [...syncSaves];
+    newSyncSaves.splice(index, 1);
+    
+    onUpdateRow({
+      tableCrud: {
+        ...row.tableCrud,
+        allowCreate: row.tableCrud?.allowCreate || false,
+        allowUpdate: row.tableCrud?.allowUpdate || false,
+        allowDelete: row.tableCrud?.allowDelete || false,
+        syncSaves: newSyncSaves,
+      },
+    });
+  };
+
+  // 연동 저장 업데이트
+  const updateSyncSave = (index: number, updates: Partial<SyncSaveConfig>) => {
+    const newSyncSaves = [...syncSaves];
+    newSyncSaves[index] = { ...newSyncSaves[index], ...updates };
+    
+    onUpdateRow({
+      tableCrud: {
+        ...row.tableCrud,
+        allowCreate: row.tableCrud?.allowCreate || false,
+        allowUpdate: row.tableCrud?.allowUpdate || false,
+        allowDelete: row.tableCrud?.allowDelete || false,
+        syncSaves: newSyncSaves,
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-2 p-2 bg-orange-50 dark:bg-orange-950 rounded-lg border border-orange-200">
+      <div className="flex items-center justify-between">
+        <Label className="text-[10px] font-semibold text-orange-700 dark:text-orange-300">
+          연동 저장 설정 (모달 저장 시 다른 테이블에 동기화)
+        </Label>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={addSyncSave}
+          className="h-5 text-[9px] px-1 bg-orange-100 hover:bg-orange-200 border-orange-300"
+        >
+          <Plus className="h-2 w-2 mr-0.5" />
+          추가
+        </Button>
+      </div>
+
+      {syncSaves.length === 0 ? (
+        <p className="text-[9px] text-muted-foreground text-center py-2">
+          연동 저장 설정이 없습니다. 추가 버튼을 눌러 설정하세요.
+        </p>
+      ) : (
+        <div className="space-y-2">
+          {syncSaves.map((sync, index) => (
+            <SyncSaveConfigItem
+              key={sync.id}
+              sync={sync}
+              index={index}
+              sourceTable={sourceTable}
+              allTables={allTables}
+              onUpdate={(updates) => updateSyncSave(index, updates)}
+              onRemove={() => removeSyncSave(index)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// 🆕 v3.12: 개별 연동 저장 설정 아이템
+function SyncSaveConfigItem({
+  sync,
+  index,
+  sourceTable,
+  allTables,
+  onUpdate,
+  onRemove,
+}: {
+  sync: SyncSaveConfig;
+  index: number;
+  sourceTable: string;
+  allTables: { tableName: string; displayName?: string }[];
+  onUpdate: (updates: Partial<SyncSaveConfig>) => void;
+  onRemove: () => void;
+}) {
+  return (
+    <div className={cn(
+      "p-2 rounded border space-y-2",
+      sync.enabled ? "bg-orange-100 border-orange-300" : "bg-gray-100 border-gray-300 opacity-60"
+    )}>
+      {/* 헤더 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Switch
+            checked={sync.enabled}
+            onCheckedChange={(checked) => onUpdate({ enabled: checked })}
+            className="scale-[0.6]"
+          />
+          <Badge className="text-[8px] px-1 py-0 bg-orange-200 text-orange-800">
+            연동 {index + 1}
+          </Badge>
+        </div>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onRemove}
+          className="h-4 w-4 p-0 hover:bg-destructive/10 hover:text-destructive"
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      </div>
+
+      {/* 소스 설정 */}
+      <div className="grid grid-cols-2 gap-2">
+        <div className="space-y-0.5">
+          <Label className="text-[8px] text-muted-foreground">소스 컬럼 ({sourceTable})</Label>
+          <SourceColumnSelector
+            sourceTable={sourceTable}
+            value={sync.sourceColumn}
+            onChange={(value) => onUpdate({ sourceColumn: value })}
+            placeholder="컬럼 선택"
+          />
+        </div>
+        <div className="space-y-0.5">
+          <Label className="text-[8px] text-muted-foreground">집계 방식</Label>
+          <Select
+            value={sync.aggregationType}
+            onValueChange={(value) => onUpdate({ aggregationType: value as SyncSaveConfig["aggregationType"] })}
+          >
+            <SelectTrigger className="h-6 text-[10px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="sum">합계 (SUM)</SelectItem>
+              <SelectItem value="count">개수 (COUNT)</SelectItem>
+              <SelectItem value="avg">평균 (AVG)</SelectItem>
+              <SelectItem value="min">최소 (MIN)</SelectItem>
+              <SelectItem value="max">최대 (MAX)</SelectItem>
+              <SelectItem value="latest">최신값 (LATEST)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* 대상 설정 */}
+      <div className="grid grid-cols-2 gap-2">
+        <div className="space-y-0.5">
+          <Label className="text-[8px] text-muted-foreground">대상 테이블</Label>
+          <Select
+            value={sync.targetTable}
+            onValueChange={(value) => onUpdate({ targetTable: value })}
+          >
+            <SelectTrigger className="h-6 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 className="space-y-0.5">
+          <Label className="text-[8px] text-muted-foreground">대상 컬럼</Label>
+          <SourceColumnSelector
+            sourceTable={sync.targetTable}
+            value={sync.targetColumn}
+            onChange={(value) => onUpdate({ targetColumn: value })}
+            placeholder="컬럼 선택"
+          />
+        </div>
+      </div>
+
+      {/* 조인 키 설정 */}
+      <div className="grid grid-cols-2 gap-2">
+        <div className="space-y-0.5">
+          <Label className="text-[8px] text-muted-foreground">조인 키 (소스)</Label>
+          <SourceColumnSelector
+            sourceTable={sourceTable}
+            value={sync.joinKey.sourceField}
+            onChange={(value) => onUpdate({ joinKey: { ...sync.joinKey, sourceField: value } })}
+            placeholder="예: sales_order_id"
+          />
+        </div>
+        <div className="space-y-0.5">
+          <Label className="text-[8px] text-muted-foreground">조인 키 (대상)</Label>
+          <SourceColumnSelector
+            sourceTable={sync.targetTable}
+            value={sync.joinKey.targetField}
+            onChange={(value) => onUpdate({ joinKey: { ...sync.joinKey, targetField: value } })}
+            placeholder="예: id"
+          />
+        </div>
+      </div>
+
+      {/* 설정 요약 */}
+      {sync.sourceColumn && sync.targetTable && sync.targetColumn && (
+        <p className="text-[8px] text-orange-700 bg-orange-200 px-2 py-1 rounded">
+          {sourceTable}.{sync.sourceColumn}의 {sync.aggregationType.toUpperCase()} 값을{" "}
+          {sync.targetTable}.{sync.targetColumn}에 저장
+        </p>
+      )}
+    </div>
+  );
+}
+
+// 🆕 v3.13: 행 추가 시 자동 채번 설정 섹션
+function RowNumberingConfigSection({
+  row,
+  onUpdateRow,
+}: {
+  row: CardContentRowConfig;
+  onUpdateRow: (updates: Partial<CardContentRowConfig>) => void;
+}) {
+  const [numberingRules, setNumberingRules] = useState<{ id: string; name: string; code: string }[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  
+  const rowNumbering = row.tableCrud?.rowNumbering;
+  const tableColumns = row.tableColumns || [];
+
+  // 채번 규칙 목록 로드 (옵션설정 > 코드설정에서 등록된 전체 목록)
+  useEffect(() => {
+    const loadNumberingRules = async () => {
+      setIsLoading(true);
+      try {
+        const { getNumberingRules } = await import("@/lib/api/numberingRule");
+        const response = await getNumberingRules();
+        if (response.success && response.data) {
+          setNumberingRules(response.data.map((rule: any, index: number) => ({
+            id: String(rule.ruleId || rule.id || `rule-${index}`),
+            name: rule.ruleName || rule.name || "이름 없음",
+            code: rule.ruleId || rule.code || "",
+          })));
+        }
+      } catch (error) {
+        console.error("채번 규칙 로드 실패:", error);
+        setNumberingRules([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadNumberingRules();
+  }, []);
+
+  // 채번 설정 업데이트
+  const updateRowNumbering = (updates: Partial<RowNumberingConfig>) => {
+    const currentNumbering = row.tableCrud?.rowNumbering || {
+      enabled: false,
+      targetColumn: "",
+      numberingRuleId: "",
+    };
+    
+    onUpdateRow({
+      tableCrud: {
+        ...row.tableCrud,
+        allowCreate: row.tableCrud?.allowCreate || false,
+        allowUpdate: row.tableCrud?.allowUpdate || false,
+        allowDelete: row.tableCrud?.allowDelete || false,
+        rowNumbering: {
+          ...currentNumbering,
+          ...updates,
+        },
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-2 p-3 bg-purple-50 dark:bg-purple-950 rounded-lg border border-purple-200">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Switch
+            checked={rowNumbering?.enabled || false}
+            onCheckedChange={(checked) => updateRowNumbering({ enabled: checked })}
+            className="scale-90"
+          />
+          <Label className="text-xs font-semibold text-purple-700 dark:text-purple-300">
+            행 추가 시 자동 채번
+          </Label>
+        </div>
+      </div>
+
+      <p className="text-[10px] text-purple-600 leading-tight">
+        &quot;추가&quot; 버튼 클릭 시 지정한 컬럼에 자동으로 번호를 생성합니다.
+        (옵션설정 &gt; 코드설정에서 등록한 채번 규칙 사용)
+      </p>
+
+      {rowNumbering?.enabled && (
+        <div className="space-y-3 pt-2 border-t border-purple-200">
+          {/* 대상 컬럼 선택 */}
+          <div className="space-y-1">
+            <Label className="text-[10px] text-purple-700">채번 대상 컬럼 *</Label>
+            <Select
+              value={rowNumbering.targetColumn || ""}
+              onValueChange={(value) => updateRowNumbering({ targetColumn: value })}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="컬럼 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {tableColumns.map((col, index) => (
+                  <SelectItem key={col.id || `col-${index}`} value={col.field} className="text-xs">
+                    {col.label || col.field}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-[9px] text-muted-foreground">
+              채번 결과가 저장될 컬럼 (수정 가능 여부는 컬럼 설정에서 조절)
+            </p>
+          </div>
+
+          {/* 채번 규칙 선택 */}
+          <div className="space-y-1">
+            <Label className="text-[10px] text-purple-700">채번 규칙 *</Label>
+            <Select
+              value={rowNumbering.numberingRuleId || ""}
+              onValueChange={(value) => updateRowNumbering({ numberingRuleId: value })}
+              disabled={isLoading}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder={isLoading ? "로딩 중..." : "채번 규칙 선택"} />
+              </SelectTrigger>
+              <SelectContent>
+                {numberingRules.map((rule) => (
+                  <SelectItem key={rule.id} value={rule.id} className="text-xs">
+                    {rule.name} ({rule.code})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {numberingRules.length === 0 && !isLoading && (
+              <p className="text-[9px] text-amber-600">
+                등록된 채번 규칙이 없습니다. 옵션설정 &gt; 코드설정에서 추가하세요.
+              </p>
+            )}
+          </div>
+
+          {/* 설정 요약 */}
+          {rowNumbering.targetColumn && rowNumbering.numberingRuleId && (
+            <div className="text-[10px] text-purple-700 bg-purple-100 px-2 py-1.5 rounded">
+              "추가" 클릭 시 <strong>{rowNumbering.targetColumn}</strong> 컬럼에 자동 채번
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// 🆕 레이아웃 설정 전용 모달
+function LayoutSettingsModal({
+  open,
+  onOpenChange,
+  contentRows,
+  allTables,
+  dataSourceTable,
+  aggregations,
+  onSave,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  contentRows: CardContentRowConfig[];
+  allTables: { tableName: string; displayName?: string }[];
+  dataSourceTable: string;
+  aggregations: AggregationConfig[];
+  onSave: (contentRows: CardContentRowConfig[]) => void;
+}) {
+  // 로컬 상태로 행 목록 관리
+  const [localRows, setLocalRows] = useState<CardContentRowConfig[]>(contentRows);
+  
+  // 모달 열릴 때 초기화
+  useEffect(() => {
+    if (open) {
+      setLocalRows(contentRows);
+    }
+  }, [open, contentRows]);
+
+  // 행 추가
+  const addRow = (type: CardContentRowConfig["type"]) => {
+    const newRow: CardContentRowConfig = {
+      id: `crow-${Date.now()}`,
+      type,
+      ...(type === "header" || type === "fields"
+        ? { columns: [], layout: "horizontal", gap: "16px" }
+        : {}),
+      ...(type === "aggregation"
+        ? { aggregationFields: [], aggregationLayout: "horizontal" }
+        : {}),
+      ...(type === "table"
+        ? { tableColumns: [], showTableHeader: true }
+        : {}),
+    };
+    setLocalRows([...localRows, newRow]);
+  };
+
+  // 행 삭제
+  const removeRow = (index: number) => {
+    const newRows = [...localRows];
+    newRows.splice(index, 1);
+    setLocalRows(newRows);
+  };
+
+  // 행 업데이트
+  const updateRow = (index: number, updates: Partial<CardContentRowConfig>) => {
+    const newRows = [...localRows];
+    newRows[index] = { ...newRows[index], ...updates };
+    setLocalRows(newRows);
+  };
+
+  // 행 순서 변경
+  const moveRow = (index: number, direction: "up" | "down") => {
+    const newIndex = direction === "up" ? index - 1 : index + 1;
+    if (newIndex < 0 || newIndex >= localRows.length) return;
+    
+    const newRows = [...localRows];
+    [newRows[index], newRows[newIndex]] = [newRows[newIndex], newRows[index]];
+    setLocalRows(newRows);
+  };
+
+  // 컬럼 추가 (header/fields용)
+  const addColumn = (rowIndex: number) => {
+    const newRows = [...localRows];
+    const newCol: CardColumnConfig = {
+      id: `col-${Date.now()}`,
+      field: "",
+      label: "",
+      type: "text",
+      width: "auto",
+      editable: false,
+    };
+    newRows[rowIndex].columns = [...(newRows[rowIndex].columns || []), newCol];
+    setLocalRows(newRows);
+  };
+
+  // 컬럼 삭제
+  const removeColumn = (rowIndex: number, colIndex: number) => {
+    const newRows = [...localRows];
+    newRows[rowIndex].columns?.splice(colIndex, 1);
+    setLocalRows(newRows);
+  };
+
+  // 컬럼 업데이트
+  const updateColumn = (rowIndex: number, colIndex: number, updates: Partial<CardColumnConfig>) => {
+    const newRows = [...localRows];
+    if (newRows[rowIndex].columns) {
+      newRows[rowIndex].columns![colIndex] = {
+        ...newRows[rowIndex].columns![colIndex],
+        ...updates,
+      };
+    }
+    setLocalRows(newRows);
+  };
+
+  // 집계 필드 추가
+  const addAggField = (rowIndex: number) => {
+    const newRows = [...localRows];
+    const newAggField: AggregationDisplayConfig = {
+      aggregationResultField: "",
+      label: "",
+    };
+    newRows[rowIndex].aggregationFields = [...(newRows[rowIndex].aggregationFields || []), newAggField];
+    setLocalRows(newRows);
+  };
+
+  // 집계 필드 삭제
+  const removeAggField = (rowIndex: number, fieldIndex: number) => {
+    const newRows = [...localRows];
+    newRows[rowIndex].aggregationFields?.splice(fieldIndex, 1);
+    setLocalRows(newRows);
+  };
+
+  // 집계 필드 업데이트
+  const updateAggField = (rowIndex: number, fieldIndex: number, updates: Partial<AggregationDisplayConfig>) => {
+    const newRows = [...localRows];
+    if (newRows[rowIndex].aggregationFields) {
+      newRows[rowIndex].aggregationFields![fieldIndex] = {
+        ...newRows[rowIndex].aggregationFields![fieldIndex],
+        ...updates,
+      };
+    }
+    setLocalRows(newRows);
+  };
+
+  // 집계 필드 순서 변경
+  const moveAggField = (rowIndex: number, fieldIndex: number, direction: "up" | "down") => {
+    const newRows = [...localRows];
+    const fields = newRows[rowIndex].aggregationFields;
+    if (!fields) return;
+
+    const newIndex = direction === "up" ? fieldIndex - 1 : fieldIndex + 1;
+    if (newIndex < 0 || newIndex >= fields.length) return;
+
+    [fields[fieldIndex], fields[newIndex]] = [fields[newIndex], fields[fieldIndex]];
+    setLocalRows(newRows);
+  };
+
+  // 테이블 컬럼 추가
+  const addTableColumn = (rowIndex: number) => {
+    const newRows = [...localRows];
+    const newCol: TableColumnConfig = {
+      id: `tcol-${Date.now()}`,
+      field: "",
+      label: "",
+      type: "text",
+      editable: false,
+    };
+    newRows[rowIndex].tableColumns = [...(newRows[rowIndex].tableColumns || []), newCol];
+    setLocalRows(newRows);
+  };
+
+  // 테이블 컬럼 삭제
+  const removeTableColumn = (rowIndex: number, colIndex: number) => {
+    const newRows = [...localRows];
+    newRows[rowIndex].tableColumns?.splice(colIndex, 1);
+    setLocalRows(newRows);
+  };
+
+  // 테이블 컬럼 업데이트
+  const updateTableColumn = (rowIndex: number, colIndex: number, updates: Partial<TableColumnConfig>) => {
+    const newRows = [...localRows];
+    if (newRows[rowIndex].tableColumns) {
+      newRows[rowIndex].tableColumns![colIndex] = {
+        ...newRows[rowIndex].tableColumns![colIndex],
+        ...updates,
+      };
+    }
+    setLocalRows(newRows);
+  };
+
+  // 테이블 컬럼 순서 변경
+  const moveTableColumn = (rowIndex: number, colIndex: number, direction: "up" | "down") => {
+    const newRows = [...localRows];
+    const cols = newRows[rowIndex].tableColumns;
+    if (!cols) return;
+
+    const newIndex = direction === "up" ? colIndex - 1 : colIndex + 1;
+    if (newIndex < 0 || newIndex >= cols.length) return;
+
+    [cols[colIndex], cols[newIndex]] = [cols[newIndex], cols[colIndex]];
+    setLocalRows(newRows);
+  };
+
+  // 저장
+  const handleSave = () => {
+    onSave(localRows);
+    onOpenChange(false);
+  };
+
+  // 행 타입별 색상
+  const getRowTypeColor = (type: CardContentRowConfig["type"]) => {
+    switch (type) {
+      case "header": return "bg-blue-100 border-blue-300";
+      case "aggregation": return "bg-orange-100 border-orange-300";
+      case "table": return "bg-green-100 border-green-300";
+      case "fields": return "bg-purple-100 border-purple-300";
+      default: return "bg-gray-100 border-gray-300";
+    }
+  };
+
+  const getRowTypeLabel = (type: CardContentRowConfig["type"]) => {
+    switch (type) {
+      case "header": return "헤더";
+      case "aggregation": return "집계";
+      case "table": return "테이블";
+      case "fields": return "필드";
+      default: return type;
+    }
+  };
+
+  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">레이아웃 설정</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-3 py-3 pr-3">
+              {/* 행 추가 버튼 */}
+              <div className="flex gap-2 sticky top-0 bg-background z-10 pb-2 border-b">
+                <Button size="sm" variant="outline" onClick={() => addRow("header")} className="h-8 text-xs flex-1 bg-blue-50 hover:bg-blue-100 border-blue-200">
+                  <Plus className="h-3 w-3 mr-1" />
+                  헤더
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => addRow("aggregation")} className="h-8 text-xs flex-1 bg-orange-50 hover:bg-orange-100 border-orange-200">
+                  <Plus className="h-3 w-3 mr-1" />
+                  집계
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => addRow("table")} className="h-8 text-xs flex-1 bg-green-50 hover:bg-green-100 border-green-200">
+                  <Plus className="h-3 w-3 mr-1" />
+                  테이블
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => addRow("fields")} className="h-8 text-xs flex-1 bg-purple-50 hover:bg-purple-100 border-purple-200">
+                  <Plus className="h-3 w-3 mr-1" />
+                  필드
+                </Button>
+              </div>
+
+              {/* 행 목록 */}
+              {localRows.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-3">
+                  {localRows.map((row, index) => (
+                    <LayoutRowConfigModal
+                      key={row.id}
+                      row={row}
+                      rowIndex={index}
+                      totalRows={localRows.length}
+                      allTables={allTables}
+                      dataSourceTable={dataSourceTable}
+                      aggregations={aggregations}
+                      onUpdateRow={(updates) => updateRow(index, updates)}
+                      onRemoveRow={() => removeRow(index)}
+                      onMoveRow={(direction) => moveRow(index, direction)}
+                      onAddColumn={() => addColumn(index)}
+                      onRemoveColumn={(colIndex) => removeColumn(index, colIndex)}
+                      onUpdateColumn={(colIndex, updates) => updateColumn(index, colIndex, updates)}
+                      onAddAggField={() => addAggField(index)}
+                      onRemoveAggField={(fieldIndex) => removeAggField(index, fieldIndex)}
+                      onUpdateAggField={(fieldIndex, updates) => updateAggField(index, fieldIndex, updates)}
+                      onMoveAggField={(fieldIndex, direction) => moveAggField(index, fieldIndex, direction)}
+                      onAddTableColumn={() => addTableColumn(index)}
+                      onRemoveTableColumn={(colIndex) => removeTableColumn(index, colIndex)}
+                      onUpdateTableColumn={(colIndex, updates) => updateTableColumn(index, colIndex, updates)}
+                      onMoveTableColumn={(colIndex, direction) => moveTableColumn(index, colIndex, direction)}
+                      getRowTypeColor={getRowTypeColor}
+                      getRowTypeLabel={getRowTypeLabel}
+                    />
+                  ))}
+                </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">
+            저장 ({localRows.length}개 행)
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// 레이아웃 행 설정 (모달용)
+function LayoutRowConfigModal({
+  row,
+  rowIndex,
+  totalRows,
+  allTables,
+  dataSourceTable,
+  aggregations,
+  onUpdateRow,
+  onRemoveRow,
+  onMoveRow,
+  onAddColumn,
+  onRemoveColumn,
+  onUpdateColumn,
+  onAddAggField,
+  onRemoveAggField,
+  onUpdateAggField,
+  onMoveAggField,
+  onAddTableColumn,
+  onRemoveTableColumn,
+  onUpdateTableColumn,
+  onMoveTableColumn,
+  getRowTypeColor,
+  getRowTypeLabel,
+}: {
+  row: CardContentRowConfig;
+  rowIndex: number;
+  totalRows: number;
+  allTables: { tableName: string; displayName?: string }[];
+  dataSourceTable: string;
+  aggregations: AggregationConfig[];
+  onUpdateRow: (updates: Partial<CardContentRowConfig>) => void;
+  onRemoveRow: () => void;
+  onMoveRow: (direction: "up" | "down") => void;
+  onAddColumn: () => void;
+  onRemoveColumn: (colIndex: number) => void;
+  onUpdateColumn: (colIndex: number, updates: Partial<CardColumnConfig>) => void;
+  onAddAggField: () => void;
+  onRemoveAggField: (fieldIndex: number) => void;
+  onUpdateAggField: (fieldIndex: number, updates: Partial<AggregationDisplayConfig>) => void;
+  onMoveAggField: (fieldIndex: number, direction: "up" | "down") => void;
+  onAddTableColumn: () => void;
+  onRemoveTableColumn: (colIndex: number) => void;
+  onUpdateTableColumn: (colIndex: number, updates: Partial<TableColumnConfig>) => void;
+  onMoveTableColumn: (colIndex: number, direction: "up" | "down") => void;
+  getRowTypeColor: (type: CardContentRowConfig["type"]) => string;
+  getRowTypeLabel: (type: CardContentRowConfig["type"]) => string;
+}) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  return (
+    <div className={cn("border rounded-lg overflow-hidden", getRowTypeColor(row.type))}>
+      {/* 행 헤더 */}
+      <div className="flex items-center justify-between p-3 bg-white/50">
+        <div className="flex items-center gap-2">
+          {/* 순서 변경 버튼 */}
+          <div className="flex flex-col">
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => onMoveRow("up")}
+              disabled={rowIndex === 0}
+              className="h-4 w-6 p-0"
+            >
+              <ChevronUp className="h-3 w-3" />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => onMoveRow("down")}
+              disabled={rowIndex === totalRows - 1}
+              className="h-4 w-6 p-0"
+            >
+              <ChevronDown className="h-3 w-3" />
+            </Button>
+          </div>
+          <Badge className="text-xs">{getRowTypeLabel(row.type)} {rowIndex + 1}</Badge>
+          <span className="text-xs text-muted-foreground">
+            {row.type === "header" || row.type === "fields" 
+              ? `${(row.columns || []).length}개 컬럼`
+              : row.type === "aggregation"
+              ? `${(row.aggregationFields || []).length}개 필드`
+              : row.type === "table"
+              ? `${(row.tableColumns || []).length}개 컬럼`
+              : ""}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="h-7 px-2 text-xs"
+          >
+            {isExpanded ? "접기" : "펼치기"}
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onRemoveRow}
+            className="h-7 w-7 p-0 hover:bg-destructive/10 hover:text-destructive"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 행 내용 */}
+      {isExpanded && (
+        <div className="p-4 bg-white space-y-4">
+          {/* 헤더/필드 타입 */}
+          {(row.type === "header" || row.type === "fields") && (
+            <div className="space-y-3">
+              <div className="grid grid-cols-3 gap-3">
+                <div className="space-y-1">
+                  <Label className="text-xs">레이아웃</Label>
+                  <Select
+                    value={row.layout || "horizontal"}
+                    onValueChange={(value) => onUpdateRow({ layout: value as "horizontal" | "vertical" })}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="horizontal">가로</SelectItem>
+                      <SelectItem value="vertical">세로</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs">배경색</Label>
+                  <Select
+                    value={row.backgroundColor || "none"}
+                    onValueChange={(value) => onUpdateRow({ backgroundColor: value === "none" ? undefined : value })}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">없음</SelectItem>
+                      <SelectItem value="blue">파랑</SelectItem>
+                      <SelectItem value="green">초록</SelectItem>
+                      <SelectItem value="orange">주황</SelectItem>
+                      <SelectItem value="gray">회색</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs">간격</Label>
+                  <Input
+                    value={row.gap || "16px"}
+                    onChange={(e) => onUpdateRow({ gap: e.target.value })}
+                    placeholder="16px"
+                    className="h-8 text-xs"
+                  />
+                </div>
+              </div>
+
+              {/* 컬럼 목록 */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs font-semibold">컬럼 ({(row.columns || []).length}개)</Label>
+                  <Button size="sm" variant="outline" onClick={onAddColumn} className="h-7 text-xs">
+                    <Plus className="h-3 w-3 mr-1" />
+                    컬럼 추가
+                  </Button>
+                </div>
+                {(row.columns || []).map((col, colIndex) => (
+                  <div key={col.id} className="border rounded p-3 space-y-2 bg-gray-50">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs font-medium">컬럼 {colIndex + 1}</span>
+                      <Button size="sm" variant="ghost" onClick={() => onRemoveColumn(colIndex)} className="h-6 w-6 p-0">
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    <div className="grid grid-cols-4 gap-2">
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">필드</Label>
+                        <SourceColumnSelector
+                          sourceTable={dataSourceTable}
+                          value={col.field}
+                          onChange={(value) => onUpdateColumn(colIndex, { field: value })}
+                          placeholder="필드 선택"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">라벨</Label>
+                        <Input
+                          value={col.label}
+                          onChange={(e) => onUpdateColumn(colIndex, { label: e.target.value })}
+                          placeholder="라벨"
+                          className="h-6 text-[10px]"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">타입</Label>
+                        <Select
+                          value={col.type || "text"}
+                          onValueChange={(value) => onUpdateColumn(colIndex, { type: value as CardColumnConfig["type"] })}
+                        >
+                          <SelectTrigger className="h-6 text-[10px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="text">텍스트</SelectItem>
+                            <SelectItem value="number">숫자</SelectItem>
+                            <SelectItem value="date">날짜</SelectItem>
+                            <SelectItem value="select">선택</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">너비</Label>
+                        <Input
+                          value={col.width || "auto"}
+                          onChange={(e) => onUpdateColumn(colIndex, { width: e.target.value })}
+                          placeholder="auto"
+                          className="h-6 text-[10px]"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 집계 타입 */}
+          {row.type === "aggregation" && (
+            <div className="space-y-3">
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <Label className="text-xs">레이아웃</Label>
+                  <Select
+                    value={row.aggregationLayout || "horizontal"}
+                    onValueChange={(value) => onUpdateRow({ aggregationLayout: value as "horizontal" | "grid" })}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="horizontal">가로 나열</SelectItem>
+                      <SelectItem value="grid">그리드</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                {row.aggregationLayout === "grid" && (
+                  <div className="space-y-1">
+                    <Label className="text-xs">컬럼 수</Label>
+                    <Select
+                      value={String(row.aggregationColumns || 4)}
+                      onValueChange={(value) => onUpdateRow({ aggregationColumns: parseInt(value) })}
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="2">2개</SelectItem>
+                        <SelectItem value="3">3개</SelectItem>
+                        <SelectItem value="4">4개</SelectItem>
+                        <SelectItem value="5">5개</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+              </div>
+
+              {/* 집계 필드 목록 */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs font-semibold">집계 필드 ({(row.aggregationFields || []).length}개)</Label>
+                  <Button size="sm" variant="outline" onClick={onAddAggField} className="h-7 text-xs">
+                    <Plus className="h-3 w-3 mr-1" />
+                    필드 추가
+                  </Button>
+                </div>
+                {aggregations.filter(a => !a.hidden).length === 0 && (
+                  <p className="text-xs text-amber-600 bg-amber-50 p-2 rounded">
+                    그룹 탭에서 먼저 집계를 설정해주세요
+                  </p>
+                )}
+                {(row.aggregationFields || []).map((field, fieldIndex) => (
+                  <div key={fieldIndex} className="border rounded p-3 space-y-2 bg-gray-50">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => onMoveAggField(fieldIndex, "up")}
+                          disabled={fieldIndex === 0}
+                          className="h-5 w-5 p-0"
+                        >
+                          <ChevronUp className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => onMoveAggField(fieldIndex, "down")}
+                          disabled={fieldIndex === (row.aggregationFields?.length || 0) - 1}
+                          className="h-5 w-5 p-0"
+                        >
+                          <ChevronDown className="h-3 w-3" />
+                        </Button>
+                        <span className="text-xs font-medium">집계 {fieldIndex + 1}</span>
+                      </div>
+                      <Button size="sm" variant="ghost" onClick={() => onRemoveAggField(fieldIndex)} className="h-6 w-6 p-0">
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    <div className="grid grid-cols-4 gap-2">
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">집계 필드</Label>
+                        <Select
+                          value={field.aggregationResultField}
+                          onValueChange={(value) => onUpdateAggField(fieldIndex, { aggregationResultField: value })}
+                        >
+                          <SelectTrigger className="h-6 text-[10px]">
+                            <SelectValue placeholder="선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {aggregations.filter(agg => !agg.hidden).map((agg) => (
+                              <SelectItem key={agg.resultField} value={agg.resultField}>
+                                {agg.label || agg.resultField}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">표시 라벨</Label>
+                        <Input
+                          value={field.label}
+                          onChange={(e) => onUpdateAggField(fieldIndex, { label: e.target.value })}
+                          placeholder="라벨"
+                          className="h-6 text-[10px]"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">배경색</Label>
+                        <Select
+                          value={field.backgroundColor || "none"}
+                          onValueChange={(value) => onUpdateAggField(fieldIndex, { backgroundColor: value === "none" ? undefined : value })}
+                        >
+                          <SelectTrigger className="h-6 text-[10px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="none">없음</SelectItem>
+                            <SelectItem value="blue">파랑</SelectItem>
+                            <SelectItem value="green">초록</SelectItem>
+                            <SelectItem value="orange">주황</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">폰트 크기</Label>
+                        <Select
+                          value={field.fontSize || "base"}
+                          onValueChange={(value) => onUpdateAggField(fieldIndex, { fontSize: value as AggregationDisplayConfig["fontSize"] })}
+                        >
+                          <SelectTrigger className="h-6 text-[10px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="sm">작게</SelectItem>
+                            <SelectItem value="base">보통</SelectItem>
+                            <SelectItem value="lg">크게</SelectItem>
+                            <SelectItem value="xl">매우 크게</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 테이블 타입 */}
+          {row.type === "table" && (
+            <div className="space-y-3">
+              <div className="grid grid-cols-3 gap-3">
+                <div className="space-y-1">
+                  <Label className="text-xs">테이블 제목</Label>
+                  <Input
+                    value={row.tableTitle || ""}
+                    onChange={(e) => onUpdateRow({ tableTitle: e.target.value })}
+                    placeholder="테이블 제목"
+                    className="h-8 text-xs"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs">헤더 표시</Label>
+                  <div className="flex items-center h-8 px-3 border rounded-md bg-background">
+                    <Switch
+                      checked={row.showTableHeader !== false}
+                      onCheckedChange={(checked) => onUpdateRow({ showTableHeader: checked })}
+                      className="scale-90"
+                    />
+                    <span className="ml-2 text-xs">{row.showTableHeader !== false ? "표시" : "숨김"}</span>
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-xs">최대 높이</Label>
+                  <Input
+                    value={row.tableMaxHeight || ""}
+                    onChange={(e) => onUpdateRow({ tableMaxHeight: e.target.value })}
+                    placeholder="예: 300px"
+                    className="h-8 text-xs"
+                  />
+                </div>
+              </div>
+
+              {/* 외부 데이터 소스 설정 */}
+              <div className="border rounded p-3 bg-blue-50 space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs font-semibold">외부 데이터 소스</Label>
+                  <Switch
+                    checked={row.tableDataSource?.enabled || false}
+                    onCheckedChange={(checked) => onUpdateRow({
+                      tableDataSource: { ...row.tableDataSource, enabled: checked, sourceTable: "", joinConditions: [] }
+                    })}
+                    className="scale-90"
+                  />
+                </div>
+                {row.tableDataSource?.enabled && (
+                  <div className="grid grid-cols-2 gap-2">
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">소스 테이블</Label>
+                      <Select
+                        value={row.tableDataSource?.sourceTable || ""}
+                        onValueChange={(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>
+
+              {/* CRUD 설정 */}
+              <div className="space-y-2 p-3 bg-green-100/50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800">
+                <Label className="text-xs font-semibold">CRUD 설정</Label>
+                <div className="flex flex-wrap gap-4">
+                  <div className="flex items-center gap-2">
+                    <Switch
+                      checked={row.tableCrud?.allowCreate || false}
+                      onCheckedChange={(checked) =>
+                        onUpdateRow({
+                          tableCrud: { ...row.tableCrud, allowCreate: checked, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: row.tableCrud?.allowDelete || false },
+                        })
+                      }
+                      className="scale-90"
+                    />
+                    <Label className="text-xs">추가</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Switch
+                      checked={row.tableCrud?.allowUpdate || false}
+                      onCheckedChange={(checked) =>
+                        onUpdateRow({
+                          tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: checked, allowDelete: row.tableCrud?.allowDelete || false },
+                        })
+                      }
+                      className="scale-90"
+                    />
+                    <Label className="text-xs">수정</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Switch
+                      checked={row.tableCrud?.allowDelete || false}
+                      onCheckedChange={(checked) =>
+                        onUpdateRow({
+                          tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: checked },
+                        })
+                      }
+                      className="scale-90"
+                    />
+                    <Label className="text-xs">삭제</Label>
+                  </div>
+                </div>
+                {row.tableCrud?.allowDelete && (
+                  <div className="flex items-center gap-2 pl-2 pt-1 border-t border-green-200">
+                    <Switch
+                      checked={row.tableCrud?.deleteConfirm?.enabled !== false}
+                      onCheckedChange={(checked) =>
+                        onUpdateRow({
+                          tableCrud: { ...row.tableCrud!, deleteConfirm: { enabled: checked } },
+                        })
+                      }
+                      className="scale-75"
+                    />
+                    <Label className="text-[10px]">삭제 확인 팝업</Label>
+                  </div>
+                )}
+              </div>
+
+              {/* 🆕 v3.13: 행 추가 시 자동 채번 설정 */}
+              {row.tableCrud?.allowCreate && (
+                <RowNumberingConfigSection
+                  row={row}
+                  onUpdateRow={onUpdateRow}
+                />
+              )}
+
+              {/* 🆕 v3.12: 연동 저장 설정 */}
+              <SyncSaveConfigSection
+                row={row}
+                allTables={allTables}
+                onUpdateRow={onUpdateRow}
+              />
+
+              {/* 테이블 컬럼 목록 */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs font-semibold">테이블 컬럼 ({(row.tableColumns || []).length}개)</Label>
+                  <Button size="sm" variant="outline" onClick={onAddTableColumn} className="h-7 text-xs">
+                    <Plus className="h-3 w-3 mr-1" />
+                    컬럼 추가
+                  </Button>
+                </div>
+                {(row.tableColumns || []).map((col, colIndex) => (
+                  <div key={col.id} className="border rounded p-3 space-y-2 bg-gray-50">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => onMoveTableColumn(colIndex, "up")}
+                          disabled={colIndex === 0}
+                          className="h-5 w-5 p-0"
+                        >
+                          <ChevronUp className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => onMoveTableColumn(colIndex, "down")}
+                          disabled={colIndex === (row.tableColumns?.length || 0) - 1}
+                          className="h-5 w-5 p-0"
+                        >
+                          <ChevronDown className="h-3 w-3" />
+                        </Button>
+                        <span className="text-xs font-medium">컬럼 {colIndex + 1}</span>
+                      </div>
+                      <Button size="sm" variant="ghost" onClick={() => onRemoveTableColumn(colIndex)} className="h-6 w-6 p-0">
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    <div className="grid grid-cols-5 gap-2">
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">필드</Label>
+                        <SourceColumnSelector
+                          sourceTable={row.tableDataSource?.enabled ? row.tableDataSource.sourceTable : dataSourceTable}
+                          value={col.field}
+                          onChange={(value) => onUpdateTableColumn(colIndex, { field: value })}
+                          placeholder="필드 선택"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">라벨</Label>
+                        <Input
+                          value={col.label}
+                          onChange={(e) => onUpdateTableColumn(colIndex, { label: e.target.value })}
+                          placeholder="라벨"
+                          className="h-6 text-[10px]"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">타입</Label>
+                        <Select
+                          value={col.type || "text"}
+                          onValueChange={(value) => onUpdateTableColumn(colIndex, { type: value as TableColumnConfig["type"] })}
+                        >
+                          <SelectTrigger className="h-6 text-[10px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="text">텍스트</SelectItem>
+                            <SelectItem value="number">숫자</SelectItem>
+                            <SelectItem value="date">날짜</SelectItem>
+                            <SelectItem value="select">선택</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">수정 가능</Label>
+                        <div className="flex items-center h-6 px-2 border rounded-md bg-background">
+                          <Switch
+                            checked={col.editable || false}
+                            onCheckedChange={(checked) => onUpdateTableColumn(colIndex, { editable: checked })}
+                            className="scale-75"
+                          />
+                          <span className="ml-1 text-[10px]">{col.editable ? "예" : "아니오"}</span>
+                        </div>
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">숨김</Label>
+                        <div className="flex items-center h-6 px-2 border rounded-md bg-background">
+                          <Switch
+                            checked={col.hidden || false}
+                            onCheckedChange={(checked) => onUpdateTableColumn(colIndex, { hidden: checked })}
+                            className="scale-75"
+                          />
+                          <span className="ml-1 text-[10px]">{col.hidden ? "예" : "아니오"}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 // 집계 설정 아이템 (로컬 상태 관리로 입력 시 리렌더링 방지)
 // 🆕 v3.2: 다중 테이블 및 가상 집계(formula) 지원
 function AggregationConfigItem({
@@ -1194,6 +3198,12 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
 
   const [allTables, setAllTables] = useState<{ tableName: string; displayName?: string }[]>([]);
   
+  // 집계 설정 모달 상태
+  const [aggregationModalOpen, setAggregationModalOpen] = useState(false);
+  
+  // 레이아웃 설정 모달 상태
+  const [layoutModalOpen, setLayoutModalOpen] = useState(false);
+  
   // 탭 상태 유지 (모듈 레벨 변수와 동기화)
   const [activeTab, setActiveTab] = useState(persistedActiveTab);
   
@@ -1536,6 +3546,21 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
     updateConfig({ contentRows: newRows });
   };
 
+  // 행(Row) 순서 변경
+  const moveContentRow = (rowIndex: number, direction: "up" | "down") => {
+    const rows = localConfig.contentRows || [];
+    if (rows.length <= 1) return;
+
+    const newIndex = direction === "up" ? rowIndex - 1 : rowIndex + 1;
+    if (newIndex < 0 || newIndex >= rows.length) return;
+
+    // 행 위치 교환
+    const newRows = [...rows];
+    [newRows[rowIndex], newRows[newIndex]] = [newRows[newIndex], newRows[rowIndex]];
+
+    updateConfig({ contentRows: newRows });
+  };
+
   // === (레거시) Simple 모드 행/컬럼 관련 함수 ===
   const addRow = () => {
     const newRow: CardRowConfig = {
@@ -1760,48 +3785,42 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
                   <div className="space-y-2 pt-2 border-t overflow-hidden">
                     <div className="flex items-center justify-between">
                       <Label className="text-[10px] font-semibold">집계 설정</Label>
-                      <div className="flex gap-1">
                         <Button 
                           size="sm" 
                           variant="outline" 
-                          onClick={() => addAggregation("column")} 
-                          className="h-5 text-[9px] px-1"
-                          title="컬럼 집계 추가"
+                        onClick={() => setAggregationModalOpen(true)} 
+                        className="h-6 text-[9px] px-2"
                         >
-                          <Plus className="h-2 w-2 mr-0.5" />
-                          컬럼
+                        <Layers className="h-3 w-3 mr-1" />
+                        설정 열기 ({(localConfig.grouping?.aggregations || []).length}개)
                         </Button>
-                        <Button 
-                          size="sm" 
-                          variant="outline" 
-                          onClick={() => addAggregation("formula")} 
-                          className="h-5 text-[9px] px-1 bg-purple-50 hover:bg-purple-100 border-purple-200"
-                          title="가상 집계 (연산식) 추가"
-                        >
-                          <Plus className="h-2 w-2 mr-0.5" />
-                          가상
-                        </Button>
-                      </div>
                     </div>
 
-                    <p className="text-[8px] text-muted-foreground">
-                      컬럼 집계: 테이블 컬럼의 합계/개수 등 | 가상 집계: 연산식으로 계산
-                    </p>
-
+                    {/* 현재 집계 목록 요약 */}
+                    {(localConfig.grouping?.aggregations || []).length > 0 ? (
+                      <div className="space-y-1 max-h-[120px] overflow-y-auto pr-1">
                     {(localConfig.grouping?.aggregations || []).map((agg, index) => (
-                      <AggregationConfigItem
-                        key={`agg-${index}`}
-                        agg={agg}
-                        index={index}
-                        sourceTable={localConfig.dataSource?.sourceTable || ""}
-                        allTables={allTables}
-                        existingAggregations={localConfig.grouping?.aggregations || []}
-                        onUpdate={(updates) => updateAggregation(index, updates)}
-                        onRemove={() => removeAggregation(index)}
-                      />
-                    ))}
-
-                    {(localConfig.grouping?.aggregations || []).length === 0 && (
+                          <div 
+                            key={`agg-summary-${index}`}
+                            className={cn(
+                              "flex items-center justify-between px-2 py-1 rounded text-[9px]",
+                              agg.hidden ? "opacity-50" : "",
+                              agg.sourceType === "formula" 
+                                ? "bg-purple-50 border border-purple-200" 
+                                : "bg-blue-50 border border-blue-200"
+                            )}
+                          >
+                            <span className="truncate flex-1">
+                              {agg.hidden && <span className="text-amber-600 mr-1">[숨김]</span>}
+                              {agg.label || agg.resultField}
+                            </span>
+                            <Badge variant="outline" className="text-[8px] px-1 py-0 ml-1 shrink-0">
+                              {agg.sourceType === "formula" ? "가상" : agg.type?.toUpperCase() || "SUM"}
+                            </Badge>
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
                       <p className="text-[9px] text-muted-foreground text-center py-2">
                         집계 설정이 없습니다
                       </p>
@@ -1814,86 +3833,78 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
 
           {/* === 레이아웃 설정 탭 === */}
           <TabsContent value="layout" className="space-y-3 mt-3">
-            <div className="space-y-3">
-              {/* 행 추가 버튼들 */}
-              <div className="space-y-2 border rounded-lg p-3 bg-card">
-                <h3 className="text-xs font-semibold">행 추가</h3>
-                <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-3 border rounded-lg p-3 bg-card">
+              <div className="flex items-center justify-between">
+                <h3 className="text-xs font-semibold">레이아웃 행</h3>
                   <Button
                     size="sm"
                     variant="outline"
-                    onClick={() => addContentRow("header")}
-                    className="h-8 text-[9px]"
+                  onClick={() => setLayoutModalOpen(true)} 
+                  className="h-6 text-[9px] px-2"
                   >
                     <Layers className="h-3 w-3 mr-1" />
-                    헤더
+                  설정 열기 ({(localConfig.contentRows || []).length}개)
                   </Button>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => addContentRow("aggregation")}
-                    className="h-8 text-[9px]"
-                  >
-                    <Table className="h-3 w-3 mr-1" />
-                    집계
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => addContentRow("table")}
-                    className="h-8 text-[9px]"
-                  >
-                    <Table className="h-3 w-3 mr-1" />
-                    테이블
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => addContentRow("fields")}
-                    className="h-8 text-[9px]"
-                  >
-                    <Layers className="h-3 w-3 mr-1" />
-                    필드
-                  </Button>
-                </div>
-                <p className="text-[9px] text-muted-foreground">
-                  원하는 타입의 행을 추가하세요. 순서대로 카드에 표시됩니다.
-                </p>
               </div>
 
-              {/* 행 목록 */}
+              {/* 현재 레이아웃 요약 */}
               {(localConfig.contentRows || []).length > 0 ? (
-                <div className="space-y-3">
-                  {(localConfig.contentRows || []).map((row, rowIndex) => (
-                    <ContentRowConfigSection
-                      key={row.id || `crow-${rowIndex}`}
-                      row={row}
-                      rowIndex={rowIndex}
-                      totalRows={(localConfig.contentRows || []).length}
-                      allTables={allTables}
-                      dataSourceTable={localConfig.dataSource?.sourceTable || ""}
-                      aggregations={localConfig.grouping?.aggregations || []}
-                      onUpdateRow={(updates) => updateContentRow(rowIndex, updates)}
-                      onRemoveRow={() => removeContentRow(rowIndex)}
-                      onAddColumn={() => addContentRowColumn(rowIndex)}
-                      onRemoveColumn={(colIndex) => removeContentRowColumn(rowIndex, colIndex)}
-                      onUpdateColumn={(colIndex, updates) => updateContentRowColumn(rowIndex, colIndex, updates)}
-                      onAddAggField={() => addContentRowAggField(rowIndex)}
-                      onRemoveAggField={(fieldIndex) => removeContentRowAggField(rowIndex, fieldIndex)}
-                      onUpdateAggField={(fieldIndex, updates) => updateContentRowAggField(rowIndex, fieldIndex, updates)}
-                      onMoveAggField={(fieldIndex, direction) => moveContentRowAggField(rowIndex, fieldIndex, direction)}
-                      onAddTableColumn={() => addContentRowTableColumn(rowIndex)}
-                      onRemoveTableColumn={(colIndex) => removeContentRowTableColumn(rowIndex, colIndex)}
-                      onUpdateTableColumn={(colIndex, updates) => updateContentRowTableColumn(rowIndex, colIndex, updates)}
-                      onMoveTableColumn={(colIndex, direction) => moveContentRowTableColumn(rowIndex, colIndex, direction)}
-                    />
-                  ))}
+                <div className="space-y-1 max-h-[200px] overflow-y-auto pr-1">
+                  {(localConfig.contentRows || []).map((row, index) => {
+                    const getRowTypeColor = (type: CardContentRowConfig["type"]) => {
+                      switch (type) {
+                        case "header": return "bg-blue-50 border-blue-200";
+                        case "aggregation": return "bg-orange-50 border-orange-200";
+                        case "table": return "bg-green-50 border-green-200";
+                        case "fields": return "bg-purple-50 border-purple-200";
+                        default: return "bg-gray-50 border-gray-200";
+                      }
+                    };
+                    const getRowTypeLabel = (type: CardContentRowConfig["type"]) => {
+                      switch (type) {
+                        case "header": return "헤더";
+                        case "aggregation": return "집계";
+                        case "table": return "테이블";
+                        case "fields": return "필드";
+                        default: return type;
+                      }
+                    };
+                    const getRowInfo = () => {
+                      if (row.type === "header" || row.type === "fields") {
+                        return `${(row.columns || []).length}개 컬럼`;
+                      }
+                      if (row.type === "aggregation") {
+                        return `${(row.aggregationFields || []).length}개 필드`;
+                      }
+                      if (row.type === "table") {
+                        return `${(row.tableColumns || []).length}개 컬럼${row.tableDataSource?.enabled ? " (외부)" : ""}`;
+                      }
+                      return "";
+                    };
+
+                    return (
+                      <div 
+                        key={`layout-summary-${index}`}
+                        className={cn(
+                          "flex items-center justify-between px-2 py-1.5 rounded text-[9px] border",
+                          getRowTypeColor(row.type)
+                        )}
+                      >
+                        <div className="flex items-center gap-2">
+                          <Badge variant="outline" className="text-[8px] px-1 py-0">
+                            {index + 1}
+                          </Badge>
+                          <span className="font-medium">{getRowTypeLabel(row.type)}</span>
+                        </div>
+                        <span className="text-muted-foreground">{getRowInfo()}</span>
+                      </div>
+                    );
+                  })}
                 </div>
               ) : (
-                <div className="text-center py-8 border border-dashed rounded-lg">
-                  <p className="text-[10px] text-muted-foreground mb-2">행이 없습니다</p>
+                <div className="text-center py-4 border border-dashed rounded-lg">
                   <p className="text-[9px] text-muted-foreground">
-                    위의 버튼으로 헤더/집계/테이블/필드 행을 추가하세요
+                    레이아웃 행이 없습니다. 설정 열기를 클릭하여 추가하세요.
                   </p>
                 </div>
               )}
@@ -1902,6 +3913,32 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
 
         </Tabs>
       </div>
+
+      {/* 집계 설정 모달 */}
+      <AggregationSettingsModal
+        open={aggregationModalOpen}
+        onOpenChange={setAggregationModalOpen}
+        aggregations={localConfig.grouping?.aggregations || []}
+        sourceTable={localConfig.dataSource?.sourceTable || ""}
+        allTables={allTables}
+        contentRows={localConfig.contentRows || []}
+        onSave={(newAggregations) => {
+          updateGrouping({ aggregations: newAggregations });
+        }}
+      />
+
+      {/* 레이아웃 설정 모달 */}
+      <LayoutSettingsModal
+        open={layoutModalOpen}
+        onOpenChange={setLayoutModalOpen}
+        contentRows={localConfig.contentRows || []}
+        allTables={allTables}
+        dataSourceTable={localConfig.dataSource?.sourceTable || ""}
+        aggregations={localConfig.grouping?.aggregations || []}
+        onSave={(newContentRows) => {
+          updateConfig({ contentRows: newContentRows });
+        }}
+      />
     </div>
   );
 }
@@ -1916,6 +3953,7 @@ function ContentRowConfigSection({
   aggregations,
   onUpdateRow,
   onRemoveRow,
+  onMoveRow,
   onAddColumn,
   onRemoveColumn,
   onUpdateColumn,
@@ -1936,6 +3974,7 @@ function ContentRowConfigSection({
   aggregations: AggregationConfig[];
   onUpdateRow: (updates: Partial<CardContentRowConfig>) => void;
   onRemoveRow: () => void;
+  onMoveRow: (direction: "up" | "down") => void;
   onAddColumn: () => void;
   onRemoveColumn: (colIndex: number) => void;
   onUpdateColumn: (colIndex: number, updates: Partial<CardColumnConfig>) => void;
@@ -1988,7 +4027,29 @@ function ContentRowConfigSection({
       {/* 행 헤더 */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1">
-          <GripVertical className="h-3 w-3 text-muted-foreground" />
+          {/* 순서 변경 버튼 */}
+          <div className="flex flex-col">
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => onMoveRow("up")}
+              disabled={rowIndex === 0}
+              className="h-3 w-5 p-0"
+              title="위로 이동"
+            >
+              <ChevronUp className="h-3 w-3" />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => onMoveRow("down")}
+              disabled={rowIndex === totalRows - 1}
+              className="h-3 w-5 p-0"
+              title="아래로 이동"
+            >
+              <ChevronDown className="h-3 w-3" />
+            </Button>
+          </div>
           <Badge className={cn("text-[9px] px-1 py-0", typeBadgeColors[row.type])}>
             행 {rowIndex + 1}: {typeLabels[row.type]}
           </Badge>
@@ -2189,7 +4250,7 @@ function ContentRowConfigSection({
                       <SelectValue placeholder="선택" />
                     </SelectTrigger>
                     <SelectContent>
-                      {aggregations.map((agg) => (
+                      {aggregations.filter(agg => !agg.hidden).map((agg) => (
                         <SelectItem key={agg.resultField} value={agg.resultField}>
                           {agg.label || agg.resultField}
                         </SelectItem>
@@ -2729,7 +4790,7 @@ function ContentRowConfigSection({
                   checked={row.tableCrud?.allowCreate || false}
                   onCheckedChange={(checked) =>
                     onUpdateRow({
-                      tableCrud: { ...row.tableCrud, allowCreate: checked, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: row.tableCrud?.allowDelete || false, allowSave: row.tableCrud?.allowSave || false },
+                      tableCrud: { ...row.tableCrud, allowCreate: checked, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: row.tableCrud?.allowDelete || false },
                     })
                   }
                   className="scale-[0.5]"
@@ -2741,7 +4802,7 @@ function ContentRowConfigSection({
                   checked={row.tableCrud?.allowUpdate || false}
                   onCheckedChange={(checked) =>
                     onUpdateRow({
-                      tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: checked, allowDelete: row.tableCrud?.allowDelete || false, allowSave: row.tableCrud?.allowSave || false },
+                      tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: checked, allowDelete: row.tableCrud?.allowDelete || false },
                     })
                   }
                   className="scale-[0.5]"
@@ -2753,25 +4814,13 @@ function ContentRowConfigSection({
                   checked={row.tableCrud?.allowDelete || false}
                   onCheckedChange={(checked) =>
                     onUpdateRow({
-                      tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: checked, allowSave: row.tableCrud?.allowSave || false },
+                      tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: checked },
                     })
                   }
                   className="scale-[0.5]"
                 />
                 <Label className="text-[9px]">삭제</Label>
               </div>
-              <div className="flex items-center gap-1">
-                <Switch
-                  checked={row.tableCrud?.allowSave || false}
-                  onCheckedChange={(checked) =>
-                    onUpdateRow({
-                      tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: row.tableCrud?.allowDelete || false, allowSave: checked },
-                    })
-                  }
-                  className="scale-[0.5]"
-                />
-                <Label className="text-[9px]">저장</Label>
-              </div>
             </div>
             {row.tableCrud?.allowDelete && (
               <div className="flex items-center gap-1 pl-2">
@@ -2789,6 +4838,21 @@ function ContentRowConfigSection({
             )}
           </div>
 
+          {/* 🆕 v3.12: 연동 저장 설정 */}
+          <SyncSaveConfigSection
+            row={row}
+            allTables={allTables}
+            onUpdateRow={onUpdateRow}
+          />
+
+          {/* 🆕 v3.13: 행 추가 시 자동 채번 설정 */}
+          {row.tableCrud?.allowCreate && (
+            <RowNumberingConfigSection
+              row={row}
+              onUpdateRow={onUpdateRow}
+            />
+          )}
+
           {/* 테이블 컬럼 목록 */}
           <div className="space-y-2 pl-2 border-l-2 border-blue-300">
             <div className="flex items-center justify-between">
diff --git a/frontend/lib/registry/components/repeat-screen-modal/types.ts b/frontend/lib/registry/components/repeat-screen-modal/types.ts
index 2191818f..92def760 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/types.ts
+++ b/frontend/lib/registry/components/repeat-screen-modal/types.ts
@@ -188,10 +188,6 @@ export interface TableCrudConfig {
   allowUpdate: boolean; // 행 수정 허용
   allowDelete: boolean; // 행 삭제 허용
   
-  // 🆕 v3.5: 테이블 영역 저장 버튼
-  allowSave?: boolean; // 테이블 영역에 저장 버튼 표시
-  saveButtonLabel?: string; // 저장 버튼 라벨 (기본: "저장")
-  
   // 신규 행 기본값
   newRowDefaults?: Record<string, string>; // 기본값 (예: { status: "READY", sales_order_id: "{id}" })
   
@@ -203,6 +199,54 @@ export interface TableCrudConfig {
   
   // 저장 대상 테이블 (외부 데이터 소스 사용 시)
   targetTable?: string; // 저장할 테이블 (기본: tableDataSource.sourceTable)
+  
+  // 🆕 v3.12: 연동 저장 설정 (모달 전체 저장 시 다른 테이블에도 동기화)
+  syncSaves?: SyncSaveConfig[];
+  
+  // 🆕 v3.13: 행 추가 시 자동 채번 설정
+  rowNumbering?: RowNumberingConfig;
+}
+
+/**
+ * 🆕 v3.13: 테이블 행 채번 설정
+ * "추가" 버튼 클릭 시 특정 컬럼에 자동으로 번호를 생성
+ * 
+ * 사용 예시:
+ * - 출하계획번호(shipment_plan_no) 자동 생성
+ * - 송장번호(invoice_no) 자동 생성
+ * - 작업지시번호(work_order_no) 자동 생성
+ * 
+ * 참고: 채번 후 읽기 전용 여부는 테이블 컬럼의 "수정 가능" 설정으로 제어
+ */
+export interface RowNumberingConfig {
+  enabled: boolean; // 채번 사용 여부
+  targetColumn: string; // 채번 결과를 저장할 컬럼 (예: "shipment_plan_no")
+  
+  // 채번 규칙 설정 (옵션설정 > 코드설정에서 등록된 채번 규칙)
+  numberingRuleId: string; // 채번 규칙 ID (numbering_rule 테이블)
+}
+
+/**
+ * 🆕 v3.12: 연동 저장 설정
+ * 테이블 데이터 저장 시 다른 테이블의 특정 컬럼에 집계 값을 동기화
+ */
+export interface SyncSaveConfig {
+  id: string; // 고유 ID
+  enabled: boolean; // 활성화 여부
+  
+  // 소스 설정 (이 테이블에서)
+  sourceColumn: string; // 집계할 컬럼 (예: "plan_qty")
+  aggregationType: "sum" | "count" | "avg" | "min" | "max" | "latest"; // 집계 방식
+  
+  // 대상 설정 (저장할 테이블)
+  targetTable: string; // 대상 테이블 (예: "sales_order_mng")
+  targetColumn: string; // 대상 컬럼 (예: "plan_ship_qty")
+  
+  // 조인 키 (어떤 레코드를 업데이트할지)
+  joinKey: {
+    sourceField: string; // 이 테이블의 조인 키 (예: "sales_order_id")
+    targetField: string; // 대상 테이블의 키 (예: "id")
+  };
 }
 
 /**
@@ -285,10 +329,19 @@ export interface AggregationConfig {
   // - 산술 연산: +, -, *, /, ()
   formula?: string; // 연산식 (예: "{total_balance} - SUM_EXT({plan_qty})")
   
+  // === 🆕 v3.11: SUM_EXT 참조 테이블 제한 ===
+  // SUM_EXT 함수가 참조할 외부 테이블 행 ID 목록
+  // 비어있거나 undefined면 모든 외부 테이블 데이터 사용 (기존 동작)
+  // 특정 테이블만 참조하려면 contentRow의 id를 배열로 지정
+  externalTableRefs?: string[]; // 참조할 테이블 행 ID 목록 (예: ["crow-1764571929625"])
+  
   // === 공통 ===
   resultField: string; // 결과 필드명 (예: "total_balance_qty")
   label: string; // 표시 라벨 (예: "총수주잔량")
   
+  // === 🆕 v3.10: 숨김 설정 ===
+  hidden?: boolean; // 레이아웃에서 숨김 (연산에만 사용, 기본: false)
+  
   // === 🆕 v3.9: 저장 설정 ===
   saveConfig?: AggregationSaveConfig; // 연관 테이블 저장 설정
 }
@@ -337,6 +390,9 @@ export interface TableColumnConfig {
   editable: boolean; // 편집 가능 여부
   required?: boolean; // 필수 입력 여부
   
+  // 🆕 v3.13: 숨김 설정 (화면에는 안 보이지만 데이터는 존재)
+  hidden?: boolean; // 숨김 여부
+  
   // 🆕 v3.3: 컬럼 소스 테이블 지정 (조인 테이블 컬럼 사용 시)
   fromTable?: string; // 컬럼이 속한 테이블 (비어있으면 소스 테이블)
   fromJoinId?: string; // additionalJoins의 id 참조 (조인 테이블 컬럼일 때)
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 4c6c2dd7..7bb56779 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -4064,6 +4064,35 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         );
       }
 
+      // 📎 첨부파일 타입: 파일 아이콘과 개수 표시
+      if (inputType === "file" || inputType === "attachment" || column.columnName === "attachments") {
+        // JSONB 배열 또는 JSON 문자열 파싱
+        let files: any[] = [];
+        try {
+          if (typeof value === "string") {
+            files = JSON.parse(value);
+          } else if (Array.isArray(value)) {
+            files = value;
+          }
+        } catch {
+          // 파싱 실패 시 빈 배열
+        }
+
+        if (!files || files.length === 0) {
+          return <span className="text-muted-foreground text-xs">-</span>;
+        }
+
+        // 파일 개수와 아이콘 표시
+        const { Paperclip } = require("lucide-react");
+        return (
+          <div className="flex items-center gap-1 text-sm">
+            <Paperclip className="h-4 w-4 text-gray-500" />
+            <span className="text-blue-600 font-medium">{files.length}</span>
+            <span className="text-muted-foreground text-xs">개</span>
+          </div>
+        );
+      }
+
       // 카테고리 타입: 배지로 표시 (배지 없음 옵션 지원, 다중 값 지원)
       if (inputType === "category") {
         if (!value) return "";
diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
index 83b6548e..72dabb61 100644
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from "react";
 import { ComponentRendererProps } from "@/types/component";
-import { AutoGenerationConfig } from "@/types/screen";
+import { AutoGenerationConfig, AutoGenerationType } from "@/types/screen";
 import { TextInputConfig } from "./types";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
@@ -113,22 +113,20 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
           // 채번 규칙은 비동기로 처리
           if (testAutoGeneration.type === "numbering_rule") {
             const ruleId = testAutoGeneration.options?.numberingRuleId;
-            if (ruleId) {
+            if (ruleId && ruleId !== "undefined" && ruleId !== "null") {
               try {
-                console.log("🚀 채번 규칙 API 호출 시작:", ruleId);
-                const { generateNumberingCode } = await import("@/lib/api/numberingRule");
-                const response = await generateNumberingCode(ruleId);
-                console.log("✅ 채번 규칙 API 응답:", response);
+                const { previewNumberingCode } = await import("@/lib/api/numberingRule");
+                const response = await previewNumberingCode(ruleId);
                 if (response.success && response.data) {
                   generatedValue = response.data.generatedCode;
                 }
-              } catch (error) {
-                console.error("❌ 채번 규칙 코드 생성 실패:", error);
+                // 실패 시 조용히 무시 (채번 규칙이 없어도 화면은 정상 로드)
+              } catch {
+                // 네트워크 에러 등 예외 상황은 조용히 무시
               } finally {
-                isGeneratingRef.current = false; // 생성 완료
+                isGeneratingRef.current = false;
               }
             } else {
-              console.warn("⚠️ 채번 규칙 ID가 없습니다");
               isGeneratingRef.current = false;
             }
           } else {
diff --git a/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx b/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
index 69088e96..5dd67812 100644
--- a/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
@@ -5,6 +5,8 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Plus, Trash2 } from "lucide-react";
 import { TextInputConfig } from "./types";
 import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
 import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
index 713f4999..89838c67 100644
--- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
@@ -224,6 +224,55 @@ export function UniversalFormModalComponent({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config]);
 
+  // 🆕 beforeFormSave 이벤트 리스너 - ButtonPrimary 저장 시 formData를 전달
+  // 설정된 필드(columnName)만 병합하여 의도치 않은 덮어쓰기 방지
+  useEffect(() => {
+    const handleBeforeFormSave = (event: Event) => {
+      if (!(event instanceof CustomEvent) || !event.detail?.formData) return;
+      
+      // 설정에 정의된 필드 columnName 목록 수집
+      const configuredFields = new Set<string>();
+      config.sections.forEach((section) => {
+        section.fields.forEach((field) => {
+          if (field.columnName) {
+            configuredFields.add(field.columnName);
+          }
+        });
+      });
+      
+      console.log("[UniversalFormModal] beforeFormSave 이벤트 수신");
+      console.log("[UniversalFormModal] 설정된 필드 목록:", Array.from(configuredFields));
+      
+      // UniversalFormModal에 설정된 필드만 병합 (채번 규칙 포함)
+      // 외부 formData에 이미 값이 있어도 UniversalFormModal 값으로 덮어씀
+      // (UniversalFormModal이 해당 필드의 주인이므로)
+      for (const [key, value] of Object.entries(formData)) {
+        // 설정에 정의된 필드만 병합
+        if (configuredFields.has(key)) {
+          if (value !== undefined && value !== null && value !== "") {
+            event.detail.formData[key] = value;
+            console.log(`[UniversalFormModal] 필드 병합: ${key} =`, value);
+          }
+        }
+      }
+      
+      // 반복 섹션 데이터도 병합 (필요한 경우)
+      if (Object.keys(repeatSections).length > 0) {
+        for (const [sectionId, items] of Object.entries(repeatSections)) {
+          const sectionKey = `_repeatSection_${sectionId}`;
+          event.detail.formData[sectionKey] = items;
+          console.log(`[UniversalFormModal] 반복 섹션 병합: ${sectionKey}`, items);
+        }
+      }
+    };
+    
+    window.addEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
+    
+    return () => {
+      window.removeEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
+    };
+  }, [formData, repeatSections, config.sections]);
+
   // 필드 레벨 linkedFieldGroup 데이터 로드
   useEffect(() => {
     const loadData = async () => {
@@ -1134,7 +1183,7 @@ export function UniversalFormModalComponent({
                 }}
                 disabled={isDisabled}
               >
-                <SelectTrigger id={fieldKey} className="w-full">
+                <SelectTrigger id={fieldKey} className="w-full" size="default">
                   <SelectValue placeholder={field.placeholder || "선택하세요"} />
                 </SelectTrigger>
                 <SelectContent>
@@ -1513,47 +1562,37 @@ export function UniversalFormModalComponent({
       {/* 섹션들 */}
       <div className="space-y-4">{config.sections.map((section) => renderSection(section))}</div>
 
-      {/* 버튼 영역 */}
-      <div className="mt-6 flex justify-end gap-2 border-t pt-4">
-        {config.modal.showResetButton && (
+      {/* 버튼 영역 - 저장 버튼이 표시될 때만 렌더링 */}
+      {config.modal.showSaveButton !== false && (
+        <div className="mt-6 flex justify-end gap-2 border-t pt-4">
+          {config.modal.showResetButton && (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleReset();
+              }}
+              disabled={saving}
+            >
+              <RefreshCw className="mr-1 h-4 w-4" />
+              {config.modal.resetButtonText || "초기화"}
+            </Button>
+          )}
           <Button
             type="button"
-            variant="outline"
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
-              handleReset();
+              handleSave();
             }}
-            disabled={saving}
+            disabled={saving || !config.saveConfig.tableName}
           >
-            <RefreshCw className="mr-1 h-4 w-4" />
-            {config.modal.resetButtonText || "초기화"}
+            {saving ? "저장 중..." : config.modal.saveButtonText || "저장"}
           </Button>
-        )}
-        <Button
-          type="button"
-          variant="outline"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            onCancel?.();
-          }}
-          disabled={saving}
-        >
-          {config.modal.cancelButtonText || "취소"}
-        </Button>
-        <Button
-          type="button"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            handleSave();
-          }}
-          disabled={saving || !config.saveConfig.tableName}
-        >
-          {saving ? "저장 중..." : config.modal.saveButtonText || "저장"}
-        </Button>
-      </div>
+        </div>
+      )}
 
       {/* 삭제 확인 다이얼로그 */}
       <AlertDialog
@@ -1606,7 +1645,7 @@ function SelectField({ fieldId, value, onChange, optionConfig, placeholder, disa
 
   return (
     <Select value={value || ""} onValueChange={onChange} disabled={disabled || loading}>
-      <SelectTrigger>
+      <SelectTrigger size="default">
         <SelectValue placeholder={loading ? "로딩 중..." : placeholder} />
       </SelectTrigger>
       <SelectContent>
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
index e503ebfb..48542342 100644
--- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
@@ -402,6 +402,17 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
                 </Select>
               </div>
 
+              <div className="border rounded-md p-2 space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px] font-medium">저장 버튼 표시</span>
+                  <Switch
+                    checked={config.modal.showSaveButton !== false}
+                    onCheckedChange={(checked) => updateModalConfig({ showSaveButton: checked })}
+                  />
+                </div>
+                <HelpText>ButtonPrimary 컴포넌트로 저장 버튼을 별도 구성할 경우 끄세요</HelpText>
+                
+                {config.modal.showSaveButton !== false && (
               <div>
                 <Label className="text-[10px]">저장 버튼 텍스트</Label>
                 <Input
@@ -410,13 +421,7 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
                   className="h-7 text-xs mt-1"
                 />
               </div>
-              <div>
-                <Label className="text-[10px]">취소 버튼 텍스트</Label>
-                <Input
-                  value={config.modal.cancelButtonText || "취소"}
-                  onChange={(e) => updateModalConfig({ cancelButtonText: e.target.value })}
-                  className="h-7 text-xs mt-1"
-                />
+                )}
               </div>
             </AccordionContent>
           </AccordionItem>
@@ -1896,7 +1901,7 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
                       <div className="space-y-2 pt-2 border-t">
                         <HelpText>테이블 참조: DB 테이블에서 옵션 목록을 가져옵니다.</HelpText>
                         <div>
-                          <Label className="text-[10px]">참조 테이블 (옵션을 가져올 테이블)</Label>
+                          <Label className="text-[10px]">참조 테이블</Label>
                           <Select
                             value={selectedField.selectOptions?.tableName || ""}
                             onValueChange={(value) =>
@@ -1908,7 +1913,7 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
                               })
                             }
                           >
-                            <SelectTrigger className="h-6 text-[10px] mt-1">
+                            <SelectTrigger className="h-7 text-xs mt-1">
                               <SelectValue placeholder="테이블 선택" />
                             </SelectTrigger>
                             <SelectContent>
@@ -1919,10 +1924,10 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
                               ))}
                             </SelectContent>
                           </Select>
-                          <HelpText>예: dept_info (부서 테이블)</HelpText>
+                          <HelpText>드롭다운 목록을 가져올 테이블을 선택하세요</HelpText>
                         </div>
                         <div>
-                          <Label className="text-[10px]">값 컬럼 (저장될 값)</Label>
+                          <Label className="text-[10px]">조인할 컬럼</Label>
                           <Input
                             value={selectedField.selectOptions?.valueColumn || ""}
                             onChange={(e) =>
@@ -1933,13 +1938,17 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
                                 },
                               })
                             }
-                            placeholder="dept_code"
-                            className="h-6 text-[10px] mt-1"
+                            placeholder="customer_code"
+                            className="h-7 text-xs mt-1"
                           />
-                          <HelpText>선택 시 실제 저장되는 값 (예: D001)</HelpText>
+                          <HelpText>
+                            참조 테이블에서 조인할 컬럼을 선택하세요
+                            <br />
+                            예: customer_code, customer_id
+                          </HelpText>
                         </div>
                         <div>
-                          <Label className="text-[10px]">라벨 컬럼 (화면에 표시될 텍스트)</Label>
+                          <Label className="text-[10px]">표시할 컬럼</Label>
                           <Input
                             value={selectedField.selectOptions?.labelColumn || ""}
                             onChange={(e) =>
@@ -1950,10 +1959,14 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
                                 },
                               })
                             }
-                            placeholder="dept_name"
-                            className="h-6 text-[10px] mt-1"
+                            placeholder="customer_name"
+                            className="h-7 text-xs mt-1"
                           />
-                          <HelpText>드롭다운에 보여질 텍스트 (예: 영업부)</HelpText>
+                          <HelpText>
+                            드롭다운에 표시할 컬럼을 선택하세요
+                            <br />
+                            예: customer_name, company_name
+                          </HelpText>
                         </div>
                       </div>
                     )}
diff --git a/frontend/lib/registry/components/universal-form-modal/config.ts b/frontend/lib/registry/components/universal-form-modal/config.ts
index 5383512b..66644576 100644
--- a/frontend/lib/registry/components/universal-form-modal/config.ts
+++ b/frontend/lib/registry/components/universal-form-modal/config.ts
@@ -12,6 +12,7 @@ export const defaultConfig: UniversalFormModalConfig = {
     size: "lg",
     closeOnOutsideClick: false,
     showCloseButton: true,
+    showSaveButton: true,
     saveButtonText: "저장",
     cancelButtonText: "취소",
     showResetButton: false,
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 02168e8f..1ced2836 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -2651,6 +2651,55 @@ export class ButtonActionExecutor {
       controlDataSource,
     };
 
+    // 노드 플로우 방식 실행 (flowConfig가 있는 경우)
+    const hasFlowConfig = config.dataflowConfig?.flowConfig && config.dataflowConfig.flowConfig.flowId;
+    if (hasFlowConfig) {
+      console.log("🎯 저장 후 노드 플로우 실행:", config.dataflowConfig.flowConfig);
+
+      const { flowId } = config.dataflowConfig.flowConfig;
+
+      try {
+        // 노드 플로우 실행 API 호출
+        const { executeNodeFlow } = await import("@/lib/api/nodeFlows");
+
+        // 데이터 소스 준비
+        let sourceData: any = context.formData || {};
+
+        // repeat-screen-modal 데이터가 있으면 병합
+        const repeatScreenModalKeys = Object.keys(context.formData || {}).filter((key) =>
+          key.startsWith("_repeatScreenModal_"),
+        );
+        if (repeatScreenModalKeys.length > 0) {
+          console.log("📦 repeat-screen-modal 데이터 발견:", repeatScreenModalKeys);
+        }
+
+        console.log("📦 노드 플로우에 전달할 데이터:", {
+          flowId,
+          dataSourceType: controlDataSource,
+          sourceData,
+        });
+
+        const result = await executeNodeFlow(flowId, {
+          dataSourceType: controlDataSource,
+          sourceData,
+          context: extendedContext,
+        });
+
+        if (result.success) {
+          console.log("✅ 저장 후 노드 플로우 실행 완료:", result);
+          toast.success("제어 로직 실행이 완료되었습니다.");
+        } else {
+          console.error("❌ 저장 후 노드 플로우 실행 실패:", result);
+          toast.error("저장은 완료되었으나 제어 실행 중 오류가 발생했습니다.");
+        }
+      } catch (error: any) {
+        console.error("❌ 저장 후 노드 플로우 실행 오류:", error);
+        toast.error(`제어 실행 오류: ${error.message || "알 수 없는 오류"}`);
+      }
+
+      return; // 노드 플로우 실행 후 종료
+    }
+
     // 관계 기반 제어 실행
     if (config.dataflowConfig?.controlMode === "relationship" && config.dataflowConfig?.relationshipConfig) {
       console.log("🔗 저장 후 관계 기반 제어 실행:", config.dataflowConfig.relationshipConfig);
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 845a09f7..6c2ec5f0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -34,10 +34,11 @@
         "@react-three/fiber": "^9.4.0",
         "@tanstack/react-query": "^5.86.0",
         "@tanstack/react-table": "^8.21.3",
-        "@tiptap/extension-placeholder": "^2.11.5",
+        "@tiptap/core": "^3.13.0",
+        "@tiptap/extension-placeholder": "^2.27.1",
         "@tiptap/pm": "^2.11.5",
-        "@tiptap/react": "^2.11.5",
-        "@tiptap/starter-kit": "^2.11.5",
+        "@tiptap/react": "^2.27.1",
+        "@tiptap/starter-kit": "^2.27.1",
         "@turf/buffer": "^7.2.0",
         "@turf/helpers": "^7.2.0",
         "@turf/intersect": "^7.2.0",
@@ -3301,16 +3302,16 @@
       }
     },
     "node_modules/@tiptap/core": {
-      "version": "2.27.1",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.27.1.tgz",
-      "integrity": "sha512-nkerkl8syHj44ZzAB7oA2GPmmZINKBKCa79FuNvmGJrJ4qyZwlkDzszud23YteFZEytbc87kVd/fP76ROS6sLg==",
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.13.0.tgz",
+      "integrity": "sha512-iUelgiTMgPVMpY5ZqASUpk8mC8HuR9FWKaDzK27w9oWip9tuB54Z8mePTxNcQaSPb6ErzEaC8x8egrRt7OsdGQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/pm": "^2.7.0"
+        "@tiptap/pm": "^3.13.0"
       }
     },
     "node_modules/@tiptap/extension-blockquote": {
@@ -3699,6 +3700,19 @@
         "url": "https://github.com/sponsors/ueberdosis"
       }
     },
+    "node_modules/@tiptap/starter-kit/node_modules/@tiptap/core": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.27.1.tgz",
+      "integrity": "sha512-nkerkl8syHj44ZzAB7oA2GPmmZINKBKCa79FuNvmGJrJ4qyZwlkDzszud23YteFZEytbc87kVd/fP76ROS6sLg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
     "node_modules/@turf/along": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@turf/along/-/along-7.2.0.tgz",
@@ -6070,7 +6084,7 @@
       "version": "20.19.24",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz",
       "integrity": "sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -6108,7 +6122,7 @@
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"
@@ -12524,13 +12538,6 @@
         "react-dom": ">=16"
       }
     },
-    "node_modules/react-is": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
-      "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/react-leaflet": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
@@ -14190,7 +14197,7 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/unrs-resolver": {
diff --git a/frontend/package.json b/frontend/package.json
index d5ac5f5a..2549a177 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,10 +16,6 @@
     "test:dataflow": "jest lib/services/__tests__/buttonDataflowPerformance.test.ts"
   },
   "dependencies": {
-    "@tiptap/extension-placeholder": "^2.11.5",
-    "@tiptap/pm": "^2.11.5",
-    "@tiptap/react": "^2.11.5",
-    "@tiptap/starter-kit": "^2.11.5",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -46,6 +42,11 @@
     "@react-three/fiber": "^9.4.0",
     "@tanstack/react-query": "^5.86.0",
     "@tanstack/react-table": "^8.21.3",
+    "@tiptap/core": "^3.13.0",
+    "@tiptap/extension-placeholder": "^2.27.1",
+    "@tiptap/pm": "^2.11.5",
+    "@tiptap/react": "^2.27.1",
+    "@tiptap/starter-kit": "^2.27.1",
     "@turf/buffer": "^7.2.0",
     "@turf/helpers": "^7.2.0",
     "@turf/intersect": "^7.2.0",