Merge branch 'ksh-v2-work'

backend-node/src/routes/popActionRoutes.ts

@@ -2,6 +2,7 @@ import { Router, Request, Response } from "express";
 import { getPool } from "../database/db";
 import logger from "../utils/logger";
 import { authenticateToken } from "../middleware/authMiddleware";
+import { numberingRuleService } from "../services/numberingRuleService";
 
 const router = Router();
 
@@ -12,9 +13,26 @@ function isSafeIdentifier(name: string): boolean {
   return SAFE_IDENTIFIER.test(name);
 }
 
+interface AutoGenMappingInfo {
+  numberingRuleId: string;
+  targetColumn: string;
+  showResultModal?: boolean;
+}
+
+interface HiddenMappingInfo {
+  valueSource: "json_extract" | "db_column" | "static";
+  targetColumn: string;
+  staticValue?: string;
+  sourceJsonColumn?: string;
+  sourceJsonKey?: string;
+  sourceDbColumn?: string;
+}
+
 interface MappingInfo {
   targetTable: string;
   columnMapping: Record<string, string>;
+  autoGenMappings?: AutoGenMappingInfo[];
+  hiddenMappings?: HiddenMappingInfo[];
 }
 
 interface StatusConditionRule {
@@ -44,7 +62,8 @@ interface StatusChangeRuleBody {
 }
 
 interface ExecuteActionBody {
-  action: string;
+  action?: string;
+  tasks?: TaskBody[];
   data: {
     items?: Record<string, unknown>[];
     fieldValues?: Record<string, unknown>;
@@ -54,6 +73,36 @@ interface ExecuteActionBody {
     field?: MappingInfo | null;
   };
   statusChanges?: StatusChangeRuleBody[];
+  cartChanges?: {
+    toCreate?: Record<string, unknown>[];
+    toUpdate?: Record<string, unknown>[];
+    toDelete?: (string | number)[];
+  };
+}
+
+interface TaskBody {
+  id: string;
+  type: string;
+  targetTable?: string;
+  targetColumn?: string;
+  operationType?: "assign" | "add" | "subtract" | "multiply" | "divide" | "conditional" | "db-conditional";
+  valueSource?: "fixed" | "linked" | "reference";
+  fixedValue?: string;
+  sourceField?: string;
+  referenceTable?: string;
+  referenceColumn?: string;
+  referenceJoinKey?: string;
+  conditionalValue?: ConditionalValueRule;
+  // db-conditional 전용 (DB 컬럼 간 비교 후 값 판정)
+  compareColumn?: string;
+  compareOperator?: "=" | "!=" | ">" | "<" | ">=" | "<=";
+  compareWith?: string;
+  dbThenValue?: string;
+  dbElseValue?: string;
+  lookupMode?: "auto" | "manual";
+  manualItemField?: string;
+  manualPkColumn?: string;
+  cartScreenId?: string;
 }
 
 function resolveStatusValue(
@@ -96,26 +145,300 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
       return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
     }
 
-    const { action, data, mappings, statusChanges } = req.body as ExecuteActionBody;
+    const { action, tasks, data, mappings, statusChanges, cartChanges } = req.body as ExecuteActionBody;
     const items = data?.items ?? [];
     const fieldValues = data?.fieldValues ?? {};
 
     logger.info("[pop/execute-action] 요청", {
-      action,
+      action: action ?? "task-list",
       companyCode,
       userId,
       itemCount: items.length,
       hasFieldValues: Object.keys(fieldValues).length > 0,
       hasMappings: !!mappings,
       statusChangeCount: statusChanges?.length ?? 0,
+      taskCount: tasks?.length ?? 0,
+      hasCartChanges: !!cartChanges,
     });
 
     await client.query("BEGIN");
 
     let processedCount = 0;
     let insertedCount = 0;
+    let deletedCount = 0;
+    const generatedCodes: Array<{ targetColumn: string; code: string; showResultModal?: boolean }> = [];
 
-    if (action === "inbound-confirm") {
+    // ======== v2: tasks 배열 기반 처리 ========
+    if (tasks && tasks.length > 0) {
+      for (const task of tasks) {
+        switch (task.type) {
+          case "data-save": {
+            // 매핑 기반 INSERT (기존 inbound-confirm INSERT 로직 재사용)
+            const cardMapping = mappings?.cardList;
+            const fieldMapping = mappings?.field;
+
+            if (cardMapping?.targetTable && Object.keys(cardMapping.columnMapping).length > 0) {
+              if (!isSafeIdentifier(cardMapping.targetTable)) {
+                throw new Error(`유효하지 않은 테이블명: ${cardMapping.targetTable}`);
+              }
+
+              for (const item of items) {
+                const columns: string[] = ["company_code"];
+                const values: unknown[] = [companyCode];
+
+                for (const [sourceField, targetColumn] of Object.entries(cardMapping.columnMapping)) {
+                  if (!isSafeIdentifier(targetColumn)) continue;
+                  columns.push(`"${targetColumn}"`);
+                  values.push(item[sourceField] ?? null);
+                }
+
+                if (fieldMapping?.targetTable === cardMapping.targetTable) {
+                  for (const [sourceField, targetColumn] of Object.entries(fieldMapping.columnMapping)) {
+                    if (!isSafeIdentifier(targetColumn)) continue;
+                    if (columns.includes(`"${targetColumn}"`)) continue;
+                    columns.push(`"${targetColumn}"`);
+                    values.push(fieldValues[sourceField] ?? null);
+                  }
+                }
+
+                const allHidden = [
+                  ...(fieldMapping?.hiddenMappings ?? []),
+                  ...(cardMapping?.hiddenMappings ?? []),
+                ];
+                for (const hm of allHidden) {
+                  if (!hm.targetColumn || !isSafeIdentifier(hm.targetColumn)) continue;
+                  if (columns.includes(`"${hm.targetColumn}"`)) continue;
+                  let value: unknown = null;
+                  if (hm.valueSource === "static") {
+                    value = hm.staticValue ?? null;
+                  } else if (hm.valueSource === "json_extract" && hm.sourceJsonColumn && hm.sourceJsonKey) {
+                    const jsonCol = item[hm.sourceJsonColumn];
+                    if (typeof jsonCol === "object" && jsonCol !== null) {
+                      value = (jsonCol as Record<string, unknown>)[hm.sourceJsonKey] ?? null;
+                    } else if (typeof jsonCol === "string") {
+                      try { value = JSON.parse(jsonCol)[hm.sourceJsonKey] ?? null; } catch { /* skip */ }
+                    }
+                  } else if (hm.valueSource === "db_column" && hm.sourceDbColumn) {
+                    value = item[hm.sourceDbColumn] ?? fieldValues[hm.sourceDbColumn] ?? null;
+                  }
+                  columns.push(`"${hm.targetColumn}"`);
+                  values.push(value);
+                }
+
+                const allAutoGen = [
+                  ...(fieldMapping?.autoGenMappings ?? []),
+                  ...(cardMapping?.autoGenMappings ?? []),
+                ];
+                for (const ag of allAutoGen) {
+                  if (!ag.numberingRuleId || !ag.targetColumn) continue;
+                  if (!isSafeIdentifier(ag.targetColumn)) continue;
+                  if (columns.includes(`"${ag.targetColumn}"`)) continue;
+                  try {
+                    const generatedCode = await numberingRuleService.allocateCode(
+                      ag.numberingRuleId, companyCode, { ...fieldValues, ...item },
+                    );
+                    columns.push(`"${ag.targetColumn}"`);
+                    values.push(generatedCode);
+                    generatedCodes.push({ targetColumn: ag.targetColumn, code: generatedCode, showResultModal: ag.showResultModal ?? false });
+                  } catch (err: any) {
+                    logger.error("[pop/execute-action] 채번 실패", { ruleId: ag.numberingRuleId, error: err.message });
+                  }
+                }
+
+                if (columns.length > 1) {
+                  const placeholders = values.map((_, i) => `$${i + 1}`).join(", ");
+                  await client.query(
+                    `INSERT INTO "${cardMapping.targetTable}" (${columns.join(", ")}) VALUES (${placeholders})`,
+                    values,
+                  );
+                  insertedCount++;
+                }
+              }
+            }
+            break;
+          }
+
+          case "data-update": {
+            if (!task.targetTable || !task.targetColumn) break;
+            if (!isSafeIdentifier(task.targetTable) || !isSafeIdentifier(task.targetColumn)) break;
+
+            const opType = task.operationType ?? "assign";
+            const valSource = task.valueSource ?? "fixed";
+            const lookupMode = task.lookupMode ?? "auto";
+
+            let itemField: string;
+            let pkColumn: string;
+
+            if (lookupMode === "manual" && task.manualItemField && task.manualPkColumn) {
+              if (!isSafeIdentifier(task.manualPkColumn)) break;
+              itemField = task.manualItemField;
+              pkColumn = task.manualPkColumn;
+            } else if (task.targetTable === "cart_items") {
+              itemField = "__cart_id";
+              pkColumn = "id";
+            } else {
+              itemField = "__cart_row_key";
+              const pkResult = await client.query(
+                `SELECT a.attname FROM pg_index i JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey) WHERE i.indrelid = $1::regclass AND i.indisprimary`,
+                [task.targetTable],
+              );
+              pkColumn = pkResult.rows[0]?.attname || "id";
+            }
+
+            const lookupValues = items.map((item) => item[itemField] ?? item[itemField.replace(/^__cart_/, "")]).filter(Boolean);
+            if (lookupValues.length === 0) break;
+
+            if (opType === "conditional" && task.conditionalValue) {
+              for (let i = 0; i < lookupValues.length; i++) {
+                const item = items[i] ?? {};
+                const resolved = resolveStatusValue("conditional", task.fixedValue ?? "", task.conditionalValue, item);
+                await client.query(
+                  `UPDATE "${task.targetTable}" SET "${task.targetColumn}" = $1 WHERE company_code = $2 AND "${pkColumn}" = $3`,
+                  [resolved, companyCode, lookupValues[i]],
+                );
+                processedCount++;
+              }
+            } else if (opType === "db-conditional") {
+              // DB 컬럼 간 비교 후 값 판정 (CASE WHEN col_a >= col_b THEN '완료' ELSE '진행중')
+              if (!task.compareColumn || !task.compareOperator || !task.compareWith) break;
+              if (!isSafeIdentifier(task.compareColumn) || !isSafeIdentifier(task.compareWith)) break;
+
+              const thenVal = task.dbThenValue ?? "";
+              const elseVal = task.dbElseValue ?? "";
+              const op = task.compareOperator;
+              const validOps = ["=", "!=", ">", "<", ">=", "<="];
+              if (!validOps.includes(op)) break;
+
+              const caseSql = `CASE WHEN COALESCE("${task.compareColumn}"::numeric, 0) ${op} COALESCE("${task.compareWith}"::numeric, 0) THEN $1 ELSE $2 END`;
+
+              const placeholders = lookupValues.map((_, i) => `$${i + 4}`).join(", ");
+              await client.query(
+                `UPDATE "${task.targetTable}" SET "${task.targetColumn}" = ${caseSql} WHERE company_code = $3 AND "${pkColumn}" IN (${placeholders})`,
+                [thenVal, elseVal, companyCode, ...lookupValues],
+              );
+              processedCount += lookupValues.length;
+            } else {
+              for (let i = 0; i < lookupValues.length; i++) {
+                const item = items[i] ?? {};
+                let value: unknown;
+
+                if (valSource === "linked") {
+                  value = item[task.sourceField ?? ""] ?? null;
+                } else {
+                  value = task.fixedValue ?? "";
+                }
+
+                let setSql: string;
+                if (opType === "add") {
+                  setSql = `"${task.targetColumn}" = COALESCE("${task.targetColumn}"::numeric, 0) + $1::numeric`;
+                } else if (opType === "subtract") {
+                  setSql = `"${task.targetColumn}" = COALESCE("${task.targetColumn}"::numeric, 0) - $1::numeric`;
+                } else if (opType === "multiply") {
+                  setSql = `"${task.targetColumn}" = COALESCE("${task.targetColumn}"::numeric, 0) * $1::numeric`;
+                } else if (opType === "divide") {
+                  setSql = `"${task.targetColumn}" = CASE WHEN $1::numeric = 0 THEN COALESCE("${task.targetColumn}"::numeric, 0) ELSE COALESCE("${task.targetColumn}"::numeric, 0) / $1::numeric END`;
+                } else {
+                  setSql = `"${task.targetColumn}" = $1`;
+                }
+
+                await client.query(
+                  `UPDATE "${task.targetTable}" SET ${setSql} WHERE company_code = $2 AND "${pkColumn}" = $3`,
+                  [value, companyCode, lookupValues[i]],
+                );
+                processedCount++;
+              }
+            }
+
+            logger.info("[pop/execute-action] data-update 실행", {
+              table: task.targetTable,
+              column: task.targetColumn,
+              opType,
+              count: lookupValues.length,
+            });
+            break;
+          }
+
+          case "data-delete": {
+            if (!task.targetTable) break;
+            if (!isSafeIdentifier(task.targetTable)) break;
+
+            const pkResult = await client.query(
+              `SELECT a.attname FROM pg_index i JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey) WHERE i.indrelid = $1::regclass AND i.indisprimary`,
+              [task.targetTable],
+            );
+            const pkCol = pkResult.rows[0]?.attname || "id";
+            const deleteKeys = items.map((item) => item[pkCol] ?? item["id"]).filter(Boolean);
+
+            if (deleteKeys.length > 0) {
+              const placeholders = deleteKeys.map((_, i) => `$${i + 2}`).join(", ");
+              await client.query(
+                `DELETE FROM "${task.targetTable}" WHERE company_code = $1 AND "${pkCol}" IN (${placeholders})`,
+                [companyCode, ...deleteKeys],
+              );
+              deletedCount += deleteKeys.length;
+            }
+            break;
+          }
+
+          case "cart-save": {
+            // cartChanges 처리 (M-9에서 확장)
+            if (!cartChanges) break;
+            const { toCreate, toUpdate, toDelete } = cartChanges;
+
+            if (toCreate && toCreate.length > 0) {
+              for (const item of toCreate) {
+                const cols = Object.keys(item).filter(isSafeIdentifier);
+                if (cols.length === 0) continue;
+                const allCols = ["company_code", ...cols.map((c) => `"${c}"`)];
+                const allVals = [companyCode, ...cols.map((c) => item[c])];
+                const placeholders = allVals.map((_, i) => `$${i + 1}`).join(", ");
+                await client.query(
+                  `INSERT INTO "cart_items" (${allCols.join(", ")}) VALUES (${placeholders})`,
+                  allVals,
+                );
+                insertedCount++;
+              }
+            }
+
+            if (toUpdate && toUpdate.length > 0) {
+              for (const item of toUpdate) {
+                const id = item.id;
+                if (!id) continue;
+                const cols = Object.keys(item).filter((c) => c !== "id" && isSafeIdentifier(c));
+                if (cols.length === 0) continue;
+                const setClauses = cols.map((c, i) => `"${c}" = $${i + 3}`).join(", ");
+                await client.query(
+                  `UPDATE "cart_items" SET ${setClauses} WHERE id = $1 AND company_code = $2`,
+                  [id, companyCode, ...cols.map((c) => item[c])],
+                );
+                processedCount++;
+              }
+            }
+
+            if (toDelete && toDelete.length > 0) {
+              const placeholders = toDelete.map((_, i) => `$${i + 2}`).join(", ");
+              await client.query(
+                `DELETE FROM "cart_items" WHERE company_code = $1 AND id IN (${placeholders})`,
+                [companyCode, ...toDelete],
+              );
+              deletedCount += toDelete.length;
+            }
+
+            logger.info("[pop/execute-action] cart-save 실행", {
+              created: toCreate?.length ?? 0,
+              updated: toUpdate?.length ?? 0,
+              deleted: toDelete?.length ?? 0,
+            });
+            break;
+          }
+
+          default:
+            logger.warn("[pop/execute-action] 프론트 전용 작업 타입, 백엔드 무시", { type: task.type });
+        }
+      }
+    }
+    // ======== v1 레거시: action 기반 처리 ========
+    else if (action === "inbound-confirm") {
       // 1. 매핑 기반 INSERT (장바구니 데이터 -> 대상 테이블)
       const cardMapping = mappings?.cardList;
       const fieldMapping = mappings?.field;
@@ -144,6 +467,64 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
             }
           }
 
+          // 숨은 필드 매핑 처리 (고정값 / JSON추출 / DB컬럼)
+          const allHidden = [
+            ...(fieldMapping?.hiddenMappings ?? []),
+            ...(cardMapping?.hiddenMappings ?? []),
+          ];
+          for (const hm of allHidden) {
+            if (!hm.targetColumn || !isSafeIdentifier(hm.targetColumn)) continue;
+            if (columns.includes(`"${hm.targetColumn}"`)) continue;
+
+            let value: unknown = null;
+            if (hm.valueSource === "static") {
+              value = hm.staticValue ?? null;
+            } else if (hm.valueSource === "json_extract" && hm.sourceJsonColumn && hm.sourceJsonKey) {
+              const jsonCol = item[hm.sourceJsonColumn];
+              if (typeof jsonCol === "object" && jsonCol !== null) {
+                value = (jsonCol as Record<string, unknown>)[hm.sourceJsonKey] ?? null;
+              } else if (typeof jsonCol === "string") {
+                try { value = JSON.parse(jsonCol)[hm.sourceJsonKey] ?? null; } catch { /* skip */ }
+              }
+            } else if (hm.valueSource === "db_column" && hm.sourceDbColumn) {
+              value = item[hm.sourceDbColumn] ?? fieldValues[hm.sourceDbColumn] ?? null;
+            }
+
+            columns.push(`"${hm.targetColumn}"`);
+            values.push(value);
+          }
+
+          // 채번 규칙 실행: field + cardList의 autoGenMappings에서 코드 발급
+          const allAutoGen = [
+            ...(fieldMapping?.autoGenMappings ?? []),
+            ...(cardMapping?.autoGenMappings ?? []),
+          ];
+          for (const ag of allAutoGen) {
+            if (!ag.numberingRuleId || !ag.targetColumn) continue;
+            if (!isSafeIdentifier(ag.targetColumn)) continue;
+            if (columns.includes(`"${ag.targetColumn}"`)) continue;
+            try {
+              const generatedCode = await numberingRuleService.allocateCode(
+                ag.numberingRuleId,
+                companyCode,
+                { ...fieldValues, ...item },
+              );
+              columns.push(`"${ag.targetColumn}"`);
+              values.push(generatedCode);
+              generatedCodes.push({ targetColumn: ag.targetColumn, code: generatedCode, showResultModal: ag.showResultModal ?? false });
+              logger.info("[pop/execute-action] 채번 완료", {
+                ruleId: ag.numberingRuleId,
+                targetColumn: ag.targetColumn,
+                generatedCode,
+              });
+            } catch (err: any) {
+              logger.error("[pop/execute-action] 채번 실패", {
+                ruleId: ag.numberingRuleId,
+                error: err.message,
+              });
+            }
+          }
+
           if (columns.length > 1) {
             const placeholders = values.map((_, i) => `$${i + 1}`).join(", ");
             const sql = `INSERT INTO "${cardMapping.targetTable}" (${columns.join(", ")}) VALUES (${placeholders})`;
@@ -254,16 +635,17 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
     await client.query("COMMIT");
 
     logger.info("[pop/execute-action] 완료", {
-      action,
+      action: action ?? "task-list",
       companyCode,
       processedCount,
       insertedCount,
+      deletedCount,
     });
 
     return res.json({
       success: true,
-      message: `${processedCount}건 처리 완료${insertedCount > 0 ? `, ${insertedCount}건 생성` : ""}`,
+      message: `${processedCount}건 처리${insertedCount > 0 ? `, ${insertedCount}건 생성` : ""}${deletedCount > 0 ? `, ${deletedCount}건 삭제` : ""}`,
-      data: { processedCount, insertedCount },
+      data: { processedCount, insertedCount, deletedCount, generatedCodes },
     });
   } catch (error: any) {
     await client.query("ROLLBACK");

frontend/components/pop/management/PopCategoryTree.tsx

@@ -471,7 +471,15 @@ export function PopCategoryTree({
   // 상태 관리
   const [groups, setGroups] = useState<PopScreenGroup[]>([]);
   const [loading, setLoading] = useState(true);
-  const [expandedGroups, setExpandedGroups] = useState<Set<number>>(new Set());
+  const [expandedGroups, setExpandedGroups] = useState<Set<number>>(() => {
+    if (typeof window === "undefined") return new Set();
+    try {
+      const saved = sessionStorage.getItem("pop-tree-expanded-groups");
+      return saved ? new Set(JSON.parse(saved) as number[]) : new Set();
+    } catch {
+      return new Set();
+    }
+  });
   const [selectedGroupId, setSelectedGroupId] = useState<number | null>(null);
 
   // 그룹 모달 상태
@@ -500,7 +508,15 @@ export function PopCategoryTree({
   const [moveSearchTerm, setMoveSearchTerm] = useState("");
 
   // 미분류 회사코드별 접기/펼치기
-  const [expandedCompanyCodes, setExpandedCompanyCodes] = useState<Set<string>>(new Set());
+  const [expandedCompanyCodes, setExpandedCompanyCodes] = useState<Set<string>>(() => {
+    if (typeof window === "undefined") return new Set();
+    try {
+      const saved = sessionStorage.getItem("pop-tree-expanded-companies");
+      return saved ? new Set(JSON.parse(saved) as string[]) : new Set();
+    } catch {
+      return new Set();
+    }
+  });
 
   // 화면 맵 생성 (screen_id로 빠르게 조회)
   const screensMap = useMemo(() => {
@@ -544,6 +560,9 @@ export function PopCategoryTree({
       } else {
         next.add(groupId);
       }
+      try {
+        sessionStorage.setItem("pop-tree-expanded-groups", JSON.stringify([...next]));
+      } catch { /* noop */ }
       return next;
     });
   };
@@ -1013,6 +1032,9 @@ export function PopCategoryTree({
                         } else {
                           next.add(code);
                         }
+                        try {
+                          sessionStorage.setItem("pop-tree-expanded-companies", JSON.stringify([...next]));
+                        } catch { /* noop */ }
                         return next;
                       });
                     };

frontend/components/ui/select.tsx

@@ -28,7 +28,7 @@ function SelectTrigger({
   size?: "xs" | "sm" | "default";
 }) {
   // className에 h-full/h-[ 또는 style.height가 있으면 data-size 높이를 무시
-  const hasCustomHeight = className?.includes("h-full") || className?.includes("h-[") || !!style?.height;
+  const hasCustomHeight = className?.includes("h-full") || className?.includes("h-[") || /\bh-\d/.test(className ?? "") || !!style?.height;
   
   return (
     <SelectPrimitive.Trigger

frontend/hooks/pop/executePopAction.ts

@@ -10,7 +10,7 @@
  *   - 향후 pop-table 행 액션 등
  */
 
-import type { ButtonMainAction } from "@/lib/registry/pop-components/pop-button";
+import type { ButtonMainAction, ButtonTask } from "@/lib/registry/pop-components/pop-button";
 import { apiClient } from "@/lib/api/client";
 import { dataApi } from "@/lib/api/data";
 
@@ -197,3 +197,156 @@ export async function executePopAction(
     return { success: false, error: message };
   }
 }
+
+// ========================================
+// v2: 작업 목록 실행
+// ========================================
+
+/** 수집된 데이터 구조 */
+export interface CollectedPayload {
+  items?: Record<string, unknown>[];
+  fieldValues?: Record<string, unknown>;
+  mappings?: {
+    cardList?: Record<string, unknown> | null;
+    field?: Record<string, unknown> | null;
+  };
+  cartChanges?: {
+    toCreate?: Record<string, unknown>[];
+    toUpdate?: Record<string, unknown>[];
+    toDelete?: (string | number)[];
+  };
+}
+
+/** 작업 목록 실행 옵션 */
+interface ExecuteTaskListOptions {
+  publish: PublishFn;
+  componentId: string;
+  collectedData?: CollectedPayload;
+}
+
+/**
+ * 작업 목록을 순차 실행한다.
+ * 데이터 관련 작업(data-save, data-update, data-delete, cart-save)은
+ * 하나의 API 호출로 묶어 백엔드에서 트랜잭션 처리한다.
+ * 나머지 작업(modal-open, navigate 등)은 프론트엔드에서 직접 처리한다.
+ */
+export async function executeTaskList(
+  tasks: ButtonTask[],
+  options: ExecuteTaskListOptions,
+): Promise<ActionResult> {
+  const { publish, componentId, collectedData } = options;
+
+  // 데이터 작업과 프론트 전용 작업 분리
+  const DATA_TASK_TYPES = new Set(["data-save", "data-update", "data-delete", "cart-save"]);
+  const dataTasks = tasks.filter((t) => DATA_TASK_TYPES.has(t.type));
+  const frontTasks = tasks.filter((t) => !DATA_TASK_TYPES.has(t.type));
+
+  let backendData: Record<string, unknown> | null = null;
+
+  try {
+    // 1. 데이터 작업이 있으면 백엔드에 일괄 전송
+    if (dataTasks.length > 0) {
+      const result = await apiClient.post("/pop/execute-action", {
+        tasks: dataTasks,
+        data: {
+          items: collectedData?.items ?? [],
+          fieldValues: collectedData?.fieldValues ?? {},
+        },
+        mappings: collectedData?.mappings ?? {},
+        cartChanges: collectedData?.cartChanges,
+      });
+
+      if (!result.data?.success) {
+        return {
+          success: false,
+          error: result.data?.message || "데이터 작업 실행에 실패했습니다.",
+          data: result.data,
+        };
+      }
+      backendData = result.data;
+    }
+
+    const innerData = (backendData as Record<string, unknown>)?.data as Record<string, unknown> | undefined;
+    const generatedCodes = innerData?.generatedCodes as
+      Array<{ targetColumn: string; code: string; showResultModal?: boolean }> | undefined;
+    const hasResultModal = generatedCodes?.some((g) => g.showResultModal);
+
+    // 2. 프론트엔드 전용 작업 순차 실행 (채번 모달이 있으면 navigate 보류)
+    const deferredNavigateTasks: ButtonTask[] = [];
+    for (const task of frontTasks) {
+      switch (task.type) {
+        case "modal-open":
+          publish("__pop_modal_open__", {
+            modalId: task.modalScreenId,
+            title: task.modalTitle,
+            mode: task.modalMode,
+            items: task.modalItems,
+          });
+          break;
+
+        case "navigate":
+          if (hasResultModal) {
+            deferredNavigateTasks.push(task);
+          } else if (task.targetScreenId) {
+            publish("__pop_navigate__", { screenId: task.targetScreenId, params: task.params });
+          }
+          break;
+
+        case "close-modal":
+          publish("__pop_close_modal__");
+          break;
+
+        case "refresh":
+          if (!hasResultModal) {
+            publish("__pop_refresh__");
+          }
+          break;
+
+        case "api-call": {
+          if (!task.apiEndpoint) break;
+          const method = (task.apiMethod || "POST").toUpperCase();
+          switch (method) {
+            case "GET":
+              await apiClient.get(task.apiEndpoint);
+              break;
+            case "PUT":
+              await apiClient.put(task.apiEndpoint);
+              break;
+            case "DELETE":
+              await apiClient.delete(task.apiEndpoint);
+              break;
+            default:
+              await apiClient.post(task.apiEndpoint);
+          }
+          break;
+        }
+
+        case "custom-event":
+          if (task.eventName) {
+            publish(task.eventName, task.eventPayload ?? {});
+          }
+          break;
+      }
+    }
+
+    // 3. 완료 이벤트
+    if (!hasResultModal) {
+      publish(`__comp_output__${componentId}__action_completed`, {
+        action: "task-list",
+        success: true,
+      });
+    }
+
+    return {
+      success: true,
+      data: {
+        generatedCodes,
+        deferredTasks: deferredNavigateTasks,
+        ...(backendData ?? {}),
+      },
+    };
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : "작업 실행 중 오류가 발생했습니다.";
+    return { success: false, error: message };
+  }
+}

frontend/hooks/pop/index.ts

@@ -26,5 +26,8 @@ export { useConnectionResolver } from "./useConnectionResolver";
 export { useCartSync } from "./useCartSync";
 export type { UseCartSyncReturn } from "./useCartSync";
 
+// 설정 패널 접기/펼치기 상태 관리
+export { useCollapsibleSections } from "./useCollapsibleSections";
+
 // SQL 빌더 유틸 (고급 사용 시)
 export { buildAggregationSQL, validateDataSourceConfig } from "./popSqlBuilder";

frontend/hooks/pop/useCartSync.ts

@@ -34,6 +34,12 @@ import type {
 
 // ===== 반환 타입 =====
 
+export interface CartChanges {
+  toCreate: Record<string, unknown>[];
+  toUpdate: Record<string, unknown>[];
+  toDelete: (string | number)[];
+}
+
 export interface UseCartSyncReturn {
   cartItems: CartItemWithId[];
   savedItems: CartItemWithId[];
@@ -48,6 +54,7 @@ export interface UseCartSyncReturn {
   isItemInCart: (rowKey: string) => boolean;
   getCartItem: (rowKey: string) => CartItemWithId | undefined;
 
+  getChanges: (selectedColumns?: string[]) => CartChanges;
   saveToDb: (selectedColumns?: string[]) => Promise<boolean>;
   loadFromDb: () => Promise<void>;
   resetToSaved: () => void;
@@ -252,6 +259,29 @@ export function useCartSync(
     [cartItems],
   );
 
+  // ----- diff 계산 (백엔드 전송용) -----
+  const getChanges = useCallback((selectedColumns?: string[]): CartChanges => {
+    const currentScreenId = screenIdRef.current;
+
+    const cartRowKeys = new Set(cartItems.map((i) => i.rowKey));
+    const toDeleteItems = savedItems.filter((s) => s.cartId && !cartRowKeys.has(s.rowKey));
+    const toCreateItems = cartItems.filter((c) => !c.cartId);
+
+    const savedMap = new Map(savedItems.map((s) => [s.rowKey, s]));
+    const toUpdateItems = cartItems.filter((c) => {
+      if (!c.cartId) return false;
+      const saved = savedMap.get(c.rowKey);
+      if (!saved) return false;
+      return c.quantity !== saved.quantity || c.packageUnit !== saved.packageUnit || c.status !== saved.status;
+    });
+
+    return {
+      toCreate: toCreateItems.map((item) => cartItemToDbRecord(item, currentScreenId, selectedColumns)),
+      toUpdate: toUpdateItems.map((item) => ({ id: item.cartId, ...cartItemToDbRecord(item, currentScreenId, selectedColumns) })),
+      toDelete: toDeleteItems.map((item) => item.cartId!),
+    };
+  }, [cartItems, savedItems]);
+
   // ----- DB 저장 (일괄) -----
   const saveToDb = useCallback(async (selectedColumns?: string[]): Promise<boolean> => {
     setSyncStatus("saving");
@@ -324,6 +354,7 @@ export function useCartSync(
     updateItemQuantity,
     isItemInCart,
     getCartItem,
+    getChanges,
     saveToDb,
     loadFromDb,
     resetToSaved,

frontend/hooks/pop/useCollapsibleSections.ts

@@ -0,0 +1,58 @@
+import { useState, useCallback, useRef } from "react";
+
+/**
+ * 설정 패널 접기/펼치기 상태를 sessionStorage로 기억하는 훅
+ *
+ * - 초기 상태: 모든 섹션 접힘
+ * - 사용자가 펼친 섹션은 같은 탭 세션 내에서 기억
+ * - 탭 닫으면 초기화
+ *
+ * @param storageKey sessionStorage 키 (예: "pop-card-list")
+ */
+export function useCollapsibleSections(storageKey: string) {
+  const fullKey = `pop-config-sections-${storageKey}`;
+
+  const [openSections, setOpenSections] = useState<Set<string>>(() => {
+    if (typeof window === "undefined") return new Set<string>();
+    try {
+      const saved = sessionStorage.getItem(fullKey);
+      if (saved) return new Set<string>(JSON.parse(saved));
+    } catch {}
+    return new Set<string>();
+  });
+
+  const openSectionsRef = useRef(openSections);
+  openSectionsRef.current = openSections;
+
+  const persist = useCallback(
+    (next: Set<string>) => {
+      try {
+        sessionStorage.setItem(fullKey, JSON.stringify([...next]));
+      } catch {}
+    },
+    [fullKey],
+  );
+
+  const isOpen = useCallback(
+    (key: string) => openSectionsRef.current.has(key),
+    [],
+  );
+
+  const toggle = useCallback(
+    (key: string) => {
+      setOpenSections((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        persist(next);
+        return next;
+      });
+    },
+    [persist],
+  );
+
+  return { isOpen, toggle };
+}

frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx

@@ -702,11 +702,13 @@ export function PopCardListComponent({
             }
           : null;
 
+        const cartChanges = cart.isDirty ? cart.getChanges() : undefined;
+
         const response: CollectedDataResponse = {
           requestId: request?.requestId ?? "",
           componentId: componentId,
           componentType: "pop-card-list",
-          data: { items: selectedItems },
+          data: { items: selectedItems, cartChanges },
           mapping,
         };
 
@@ -714,7 +716,7 @@ export function PopCardListComponent({
       }
     );
     return unsub;
-  }, [componentId, subscribe, publish, isCartListMode, filteredRows, rows, selectedKeys]);
+  }, [componentId, subscribe, publish, isCartListMode, filteredRows, rows, selectedKeys, cart]);
 
   // 장바구니 목록 모드: 선택 항목 이벤트 발행
   useEffect(() => {
@@ -728,14 +730,13 @@ export function PopCardListComponent({
     gap: `${scaled.gap}px`,
     ...(isHorizontalMode
       ? {
-          gridTemplateRows: `repeat(${gridRows}, ${scaled.cardHeight}px)`,
+          gridTemplateRows: `repeat(${gridRows}, minmax(${scaled.cardHeight}px, auto))`,
           gridAutoFlow: "column",
           gridAutoColumns: `${scaled.cardWidth}px`,
         }
       : {
-          // 세로 모드: 1fr 비율 기반으로 컨테이너 너비 초과 방지
           gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
-          gridAutoRows: `${scaled.cardHeight}px`,
+          gridAutoRows: `minmax(${scaled.cardHeight}px, auto)`,
         }),
   };
 
@@ -998,16 +999,18 @@ function Card({
     return 999999;
   }, [limitCol, row]);
 
-  // 제한 컬럼이 있으면 최대값으로 자동 초기화
+  // 제한 컬럼이 있으면 최대값으로 자동 초기화 (장바구니 목록 모드에서는 cart 수량 유지)
   useEffect(() => {
+    if (isCartListMode) return;
     if (inputField?.enabled && limitCol && effectiveMax > 0 && effectiveMax < 999999) {
       setInputValue(effectiveMax);
     }
-  }, [effectiveMax, inputField?.enabled, limitCol]);
+  }, [effectiveMax, inputField?.enabled, limitCol, isCartListMode]);
+
+  const hasPackageEntries = packageEntries.length > 0;
 
   const cardStyle: React.CSSProperties = {
-    height: `${scaled.cardHeight}px`,
+    minHeight: `${scaled.cardHeight}px`,
-    overflow: "hidden",
   };
 
   const headerStyle: React.CSSProperties = {
@@ -1113,7 +1116,7 @@ function Card({
 
   return (
     <div
-      className={`relative cursor-pointer rounded-lg border bg-card shadow-sm transition-all duration-150 hover:shadow-md ${borderClass}`}
+      className={`relative flex cursor-pointer flex-col rounded-lg border bg-card shadow-sm transition-all duration-150 hover:shadow-md ${borderClass}`}
       style={cardStyle}
       onClick={handleCardClick}
       role="button"
@@ -1154,7 +1157,7 @@ function Card({
       )}
 
       {/* 본문 영역 */}
-      <div className="flex" style={bodyStyle}>
+      <div className="flex flex-1 overflow-hidden" style={bodyStyle}>
         {/* 이미지 (왼쪽) */}
         {image?.enabled && (
           <div className="shrink-0">
@@ -1196,7 +1199,7 @@ function Card({
         {/* 오른쪽: 수량 버튼 + 담기/취소/삭제 버튼 */}
         {(inputField?.enabled || cartAction || isCartListMode) && (
           <div
-            className="ml-2 flex shrink-0 flex-col items-stretch justify-center gap-2"
+            className="ml-2 flex shrink-0 flex-col items-stretch justify-start gap-2"
             style={{ minWidth: "100px" }}
           >
             {/* 수량 버튼 (입력 필드 ON일 때만) */}
@@ -1265,6 +1268,37 @@ function Card({
         )}
       </div>
 
+      {/* 포장 요약 바: 본문 아래에 표시 */}
+      {hasPackageEntries && (
+        <div className="border-t bg-emerald-50">
+          {packageEntries.map((entry, idx) => (
+            <div
+              key={idx}
+              className="flex items-center justify-between px-3 py-1.5"
+            >
+              <div className="flex items-center gap-2">
+                <span className="rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-bold text-white">
+                  포장완료
+                </span>
+                <Package className="h-4 w-4 text-emerald-600" />
+                <span
+                  className="font-medium text-emerald-700"
+                  style={{ fontSize: `${scaled.bodyTextSize}px` }}
+                >
+                  {entry.packageCount}{entry.unitLabel} x {entry.quantityPerUnit}
+                </span>
+              </div>
+              <span
+                className="font-bold text-emerald-700"
+                style={{ fontSize: `${scaled.bodyTextSize}px` }}
+              >
+                = {entry.totalQuantity.toLocaleString()}{inputField?.unit || "EA"}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
       {inputField?.enabled && (
         <NumberInputModal
           open={isModalOpen}
@@ -1304,7 +1338,7 @@ function FieldRow({
 
     // 구조화된 수식 우선
     if (field.formulaLeft && field.formulaOperator) {
-      const rightVal = field.formulaRightType === "input"
+      const rightVal = (field.formulaRightType || "input") === "input"
         ? (inputValue ?? 0)
         : Number(row[field.formulaRight || ""] ?? 0);
       const leftVal = Number(row[field.formulaLeft] ?? 0);

frontend/lib/registry/pop-components/pop-card-list/PopCardListConfig.tsx

@@ -10,6 +10,7 @@
 
 import React, { useState, useEffect, useMemo } from "react";
 import { ChevronDown, ChevronRight, Plus, Trash2, Database, Check } from "lucide-react";
+import { useCollapsibleSections } from "@/hooks/pop/useCollapsibleSections";
 import type { GridMode } from "@/components/pop/designer/types/pop-layout";
 import { GRID_BREAKPOINTS } from "@/components/pop/designer/types/pop-layout";
 import { Button } from "@/components/ui/button";
@@ -135,6 +136,7 @@ const COLOR_OPTIONS = [
 
 export function PopCardListConfigPanel({ config, onUpdate, currentMode, currentColSpan }: ConfigPanelProps) {
   const [activeTab, setActiveTab] = useState<"basic" | "template">("basic");
+  const sections = useCollapsibleSections("pop-card-list");
 
   const cfg: PopCardListConfig = config || DEFAULT_CONFIG;
 
@@ -184,6 +186,7 @@ export function PopCardListConfigPanel({ config, onUpdate, currentMode, currentC
             onUpdate={updateConfig}
             currentMode={currentMode}
             currentColSpan={currentColSpan}
+            sections={sections}
           />
         )}
         {activeTab === "template" && (
@@ -195,7 +198,7 @@ export function PopCardListConfigPanel({ config, onUpdate, currentMode, currentC
               </div>
             </div>
           ) : (
-            <CardTemplateTab config={cfg} onUpdate={updateConfig} />
+            <CardTemplateTab config={cfg} onUpdate={updateConfig} sections={sections} />
           )
         )}
       </div>
@@ -205,16 +208,20 @@ export function PopCardListConfigPanel({ config, onUpdate, currentMode, currentC
 
 // ===== 기본 설정 탭 (테이블 + 레이아웃 통합) =====
 
+type SectionsApi = { isOpen: (key: string) => boolean; toggle: (key: string) => void };
+
 function BasicSettingsTab({
   config,
   onUpdate,
   currentMode,
   currentColSpan,
+  sections,
 }: {
   config: PopCardListConfig;
   onUpdate: (partial: Partial<PopCardListConfig>) => void;
   currentMode?: GridMode;
   currentColSpan?: number;
+  sections: SectionsApi;
 }) {
   const dataSource = config.dataSource || DEFAULT_DATA_SOURCE;
   const [tables, setTables] = useState<TableInfo[]>([]);
@@ -321,7 +328,7 @@ function BasicSettingsTab({
   return (
     <div className="space-y-4">
       {/* 장바구니 목록 모드 */}
-      <CollapsibleSection title="장바구니 목록 모드" defaultOpen={isCartListMode}>
+      <CollapsibleSection sectionKey="basic-cart-mode" title="장바구니 목록 모드" sections={sections}>
         <CartListModeSection
           cartListMode={config.cartListMode}
           onUpdate={(cartListMode) => onUpdate({ cartListMode })}
@@ -330,7 +337,7 @@ function BasicSettingsTab({
 
       {/* 테이블 선택 (장바구니 모드 시 숨김) */}
       {!isCartListMode && (
-        <CollapsibleSection title="테이블 선택" defaultOpen>
+        <CollapsibleSection sectionKey="basic-table" title="테이블 선택" sections={sections}>
           <div className="space-y-3">
             <div>
               <Label className="text-[10px] text-muted-foreground">데이터 테이블</Label>
@@ -365,7 +372,9 @@ function BasicSettingsTab({
       {/* 조인 설정 (장바구니 모드 시 숨김) */}
       {!isCartListMode && dataSource.tableName && (
         <CollapsibleSection
+          sectionKey="basic-join"
           title="조인 설정"
+          sections={sections}
           badge={
             dataSource.joins && dataSource.joins.length > 0
               ? `${dataSource.joins.length}개`
@@ -383,7 +392,9 @@ function BasicSettingsTab({
       {/* 정렬 기준 (장바구니 모드 시 숨김) */}
       {!isCartListMode && dataSource.tableName && (
         <CollapsibleSection
+          sectionKey="basic-sort"
           title="정렬 기준"
+          sections={sections}
           badge={
             dataSource.sort
               ? Array.isArray(dataSource.sort)
@@ -403,7 +414,9 @@ function BasicSettingsTab({
       {/* 필터 기준 (장바구니 모드 시 숨김) */}
       {!isCartListMode && dataSource.tableName && (
         <CollapsibleSection
+          sectionKey="basic-filter"
           title="필터 기준"
+          sections={sections}
           badge={
             dataSource.filters && dataSource.filters.length > 0
               ? `${dataSource.filters.length}개`
@@ -421,7 +434,9 @@ function BasicSettingsTab({
       {/* 저장 매핑 (장바구니 모드일 때만) */}
       {isCartListMode && (
         <CollapsibleSection
+          sectionKey="basic-save-mapping"
           title="저장 매핑"
+          sections={sections}
           badge={
             config.saveMapping?.mappings && config.saveMapping.mappings.length > 0
               ? `${config.saveMapping.mappings.length}개`
@@ -437,7 +452,7 @@ function BasicSettingsTab({
       )}
 
       {/* 레이아웃 설정 */}
-      <CollapsibleSection title="레이아웃 설정" defaultOpen>
+      <CollapsibleSection sectionKey="basic-layout" title="레이아웃 설정" sections={sections}>
         <div className="space-y-3">
           {modeLabel && (
             <div className="flex items-center gap-1.5 rounded-md bg-muted/50 px-2.5 py-1.5">
@@ -526,9 +541,11 @@ function BasicSettingsTab({
 function CardTemplateTab({
   config,
   onUpdate,
+  sections,
 }: {
   config: PopCardListConfig;
   onUpdate: (partial: Partial<PopCardListConfig>) => void;
+  sections: SectionsApi;
 }) {
   const dataSource = config.dataSource || DEFAULT_DATA_SOURCE;
   const template = config.cardTemplate || DEFAULT_TEMPLATE;
@@ -634,7 +651,7 @@ function CardTemplateTab({
   return (
     <div className="space-y-4">
       {/* 헤더 설정 */}
-      <CollapsibleSection title="헤더 설정" defaultOpen>
+      <CollapsibleSection sectionKey="tpl-header" title="헤더 설정" sections={sections}>
         <HeaderSettingsSection
           header={template.header || DEFAULT_HEADER}
           columnGroups={columnGroups}
@@ -643,7 +660,7 @@ function CardTemplateTab({
       </CollapsibleSection>
 
       {/* 이미지 설정 */}
-      <CollapsibleSection title="이미지 설정" defaultOpen>
+      <CollapsibleSection sectionKey="tpl-image" title="이미지 설정" sections={sections}>
         <ImageSettingsSection
           image={template.image || DEFAULT_IMAGE}
           columnGroups={columnGroups}
@@ -653,9 +670,10 @@ function CardTemplateTab({
 
       {/* 본문 필드 */}
       <CollapsibleSection
+        sectionKey="tpl-body"
         title="본문 필드"
+        sections={sections}
         badge={`${template.body?.fields?.length || 0}개`}
-        defaultOpen
       >
         <BodyFieldsSection
           body={template.body || DEFAULT_BODY}
@@ -665,7 +683,7 @@ function CardTemplateTab({
       </CollapsibleSection>
 
       {/* 입력 필드 설정 */}
-      <CollapsibleSection title="입력 필드" defaultOpen={false}>
+      <CollapsibleSection sectionKey="tpl-input" title="입력 필드" sections={sections}>
         <InputFieldSettingsSection
           inputField={config.inputField}
           columns={columns}
@@ -675,7 +693,7 @@ function CardTemplateTab({
       </CollapsibleSection>
 
       {/* 포장등록 설정 */}
-      <CollapsibleSection title="포장등록 (계산기)" defaultOpen={false}>
+      <CollapsibleSection sectionKey="tpl-package" title="포장등록 (계산기)" sections={sections}>
         <PackageSettingsSection
           packageConfig={config.packageConfig}
           onUpdate={(packageConfig) => onUpdate({ packageConfig })}
@@ -683,7 +701,7 @@ function CardTemplateTab({
       </CollapsibleSection>
 
       {/* 담기 버튼 설정 */}
-      <CollapsibleSection title="담기 버튼" defaultOpen={false}>
+      <CollapsibleSection sectionKey="tpl-cart" title="담기 버튼" sections={sections}>
         <CartActionSettingsSection
           cartAction={config.cartAction}
           onUpdate={(cartAction) => onUpdate({ cartAction })}
@@ -693,7 +711,7 @@ function CardTemplateTab({
       </CollapsibleSection>
 
       {/* 반응형 표시 설정 */}
-      <CollapsibleSection title="반응형 표시" defaultOpen={false}>
+      <CollapsibleSection sectionKey="tpl-responsive" title="반응형 표시" sections={sections}>
         <ResponsiveDisplaySection
           config={config}
           onUpdate={onUpdate}
@@ -769,24 +787,26 @@ function GroupedColumnSelect({
 // ===== 접기/펴기 섹션 컴포넌트 =====
 
 function CollapsibleSection({
+  sectionKey,
   title,
   badge,
-  defaultOpen = false,
+  sections,
   children,
 }: {
+  sectionKey: string;
   title: string;
   badge?: string;
-  defaultOpen?: boolean;
+  sections: SectionsApi;
   children: React.ReactNode;
 }) {
-  const [open, setOpen] = useState(defaultOpen);
+  const open = sections.isOpen(sectionKey);
 
   return (
     <div className="rounded-md border">
       <button
         type="button"
         className="flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-muted/50"
-        onClick={() => setOpen(!open)}
+        onClick={() => sections.toggle(sectionKey)}
       >
         <div className="flex items-center gap-2">
           {open ? (
@@ -2784,6 +2804,13 @@ function SaveMappingSection({
               label: f.label || f.columnName,
               badge: "본문",
             });
+          } else if (f.valueType === "formula" && f.label) {
+            const formulaKey = `__formula_${f.id || f.label}`;
+            displayed.push({
+              sourceField: formulaKey,
+              label: f.label,
+              badge: "수식",
+            });
           }
         }
         if (inputFieldConfig?.enabled) {
@@ -2855,6 +2882,21 @@ function SaveMappingSection({
     [mapping.mappings]
   );
 
+  // 카드에 표시된 필드가 로드되면 매핑에 누락된 필드를 자동 추가 (매핑 안함으로)
+  useEffect(() => {
+    if (!mapping.targetTable || cardDisplayedFields.length === 0) return;
+    const existing = new Set(mapping.mappings.map((m) => m.sourceField));
+    const missing = cardDisplayedFields.filter((f) => !existing.has(f.sourceField));
+    if (missing.length === 0) return;
+    onUpdate({
+      ...mapping,
+      mappings: [
+        ...mapping.mappings,
+        ...missing.map((f) => ({ sourceField: f.sourceField, targetColumn: "" })),
+      ],
+    });
+  }, [cardDisplayedFields]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // 카드에 표시된 필드 중 아직 매핑되지 않은 것
   const unmappedCardFields = useMemo(
     () => cardDisplayedFields.filter((f) => !mappedSourceFields.has(f.sourceField)),
@@ -2937,7 +2979,7 @@ function SaveMappingSection({
           </div>
           {isCartMeta(entry.sourceField) ? (
             !badge && <span className="text-[9px] text-muted-foreground">장바구니</span>
-          ) : (
+          ) : entry.sourceField.startsWith("__formula_") ? null : (
             <span className="truncate text-[9px] text-muted-foreground">
               {entry.sourceField}
             </span>

frontend/lib/registry/pop-components/pop-dashboard/PopDashboardConfig.tsx

@@ -1937,7 +1937,7 @@ function PageEditor({
   isPreviewing?: boolean;
   onUpdateItem?: (updatedItem: DashboardItem) => void;
 }) {
-  const [expanded, setExpanded] = useState(true);
+  const [expanded, setExpanded] = useState(false);
 
   return (
     <div className="rounded-md border p-2">

frontend/lib/registry/pop-components/pop-field/PopFieldComponent.tsx

@@ -20,6 +20,7 @@ import type {
   FieldSectionStyle,
   PopFieldReadSource,
   PopFieldAutoGenMapping,
+  SelectLinkedFilter,
 } from "./types";
 import type { CollectDataRequest, CollectedDataResponse } from "../types";
 import { DEFAULT_FIELD_CONFIG, DEFAULT_SECTION_APPEARANCES } from "./types";
@@ -60,6 +61,16 @@ export function PopFieldComponent({
   const autoGenMappings = cfg.saveConfig?.autoGenMappings ?? [];
   const visibleAutoGens = autoGenMappings.filter((m) => m.showInForm);
 
+  const fieldIdToName = useMemo(() => {
+    const map: Record<string, string> = {};
+    for (const section of cfg.sections) {
+      for (const f of section.fields ?? []) {
+        map[f.id] = f.fieldName || f.id;
+      }
+    }
+    return map;
+  }, [cfg.sections]);
+
   // ResizeObserver로 컨테이너 너비 감시
   useEffect(() => {
     if (typeof window === "undefined" || !containerRef.current) return;
@@ -211,6 +222,23 @@ export function PopFieldComponent({
                 columnMapping: Object.fromEntries(
                   (cfg.saveConfig.fieldMappings || []).map((m) => [m.fieldId, m.targetColumn])
                 ),
+                autoGenMappings: (cfg.saveConfig.autoGenMappings || [])
+                  .filter((m) => m.numberingRuleId)
+                  .map((m) => ({
+                    numberingRuleId: m.numberingRuleId!,
+                    targetColumn: m.targetColumn,
+                    showResultModal: m.showResultModal,
+                  })),
+                hiddenMappings: (cfg.saveConfig.hiddenMappings || [])
+                  .filter((m) => m.targetColumn)
+                  .map((m) => ({
+                    valueSource: m.valueSource,
+                    targetColumn: m.targetColumn,
+                    staticValue: m.staticValue,
+                    sourceJsonColumn: m.sourceJsonColumn,
+                    sourceJsonKey: m.sourceJsonKey,
+                    sourceDbColumn: m.sourceDbColumn,
+                  })),
               }
             : null,
         };
@@ -360,6 +388,8 @@ export function PopFieldComponent({
                     error={errors[fKey]}
                     onChange={handleFieldChange}
                     sectionStyle={section.style}
+                    allValues={allValues}
+                    fieldIdToName={fieldIdToName}
                   />
                 );
               })}
@@ -394,6 +424,8 @@ interface FieldRendererProps {
   error?: string;
   onChange: (fieldName: string, value: unknown) => void;
   sectionStyle: FieldSectionStyle;
+  allValues?: Record<string, unknown>;
+  fieldIdToName?: Record<string, string>;
 }
 
 function FieldRenderer({
@@ -403,6 +435,8 @@ function FieldRenderer({
   error,
   onChange,
   sectionStyle,
+  allValues,
+  fieldIdToName,
 }: FieldRendererProps) {
   const handleChange = useCallback(
     (v: unknown) => onChange(field.fieldName, v),
@@ -429,7 +463,7 @@ function FieldRenderer({
           )}
         </label>
       )}
-      {renderByType(field, value, handleChange, inputClassName)}
+      {renderByType(field, value, handleChange, inputClassName, allValues, fieldIdToName)}
       {error && <p className="text-[10px] text-destructive">{error}</p>}
     </div>
   );
@@ -443,7 +477,9 @@ function renderByType(
   field: PopFieldItem,
   value: unknown,
   onChange: (v: unknown) => void,
-  className: string
+  className: string,
+  allValues?: Record<string, unknown>,
+  fieldIdToName?: Record<string, string>,
 ) {
   switch (field.inputType) {
     case "text":
@@ -482,6 +518,8 @@ function renderByType(
           value={value}
           onChange={onChange}
           className={className}
+          allValues={allValues}
+          fieldIdToName={fieldIdToName}
         />
       );
     case "auto":
@@ -554,11 +592,15 @@ function SelectFieldInput({
   value,
   onChange,
   className,
+  allValues,
+  fieldIdToName,
 }: {
   field: PopFieldItem;
   value: unknown;
   onChange: (v: unknown) => void;
   className: string;
+  allValues?: Record<string, unknown>;
+  fieldIdToName?: Record<string, string>;
 }) {
   const [options, setOptions] = useState<{ value: string; label: string }[]>(
     []
@@ -566,6 +608,30 @@ function SelectFieldInput({
   const [loading, setLoading] = useState(false);
 
   const source = field.selectSource;
+  const linkedFilters = source?.linkedFilters;
+  const hasLinkedFilters = !!linkedFilters?.length;
+
+  // 연동 필터에서 참조하는 필드의 현재 값들을 안정적인 문자열로 직렬화
+  const linkedFilterKey = useMemo(() => {
+    if (!hasLinkedFilters || !allValues || !fieldIdToName) return "";
+    return linkedFilters!
+      .map((lf) => {
+        const fieldName = fieldIdToName[lf.sourceFieldId] ?? lf.sourceFieldId;
+        const val = allValues[fieldName] ?? "";
+        return `${lf.filterColumn}=${String(val)}`;
+      })
+      .join("&");
+  }, [hasLinkedFilters, linkedFilters, allValues, fieldIdToName]);
+
+  // 연동 필터의 소스 값이 모두 채워졌는지 확인
+  const linkedFiltersFilled = useMemo(() => {
+    if (!hasLinkedFilters || !allValues || !fieldIdToName) return true;
+    return linkedFilters!.every((lf) => {
+      const fieldName = fieldIdToName[lf.sourceFieldId] ?? lf.sourceFieldId;
+      const val = allValues[fieldName];
+      return val != null && val !== "";
+    });
+  }, [hasLinkedFilters, linkedFilters, allValues, fieldIdToName]);
 
   useEffect(() => {
     if (!source) return;
@@ -581,22 +647,44 @@ function SelectFieldInput({
       source.valueColumn &&
       source.labelColumn
     ) {
+      // 연동 필터가 있는데 소스 값이 비어있으면 빈 옵션 표시
+      if (hasLinkedFilters && !linkedFiltersFilled) {
+        setOptions([]);
+        return;
+      }
+
+      // 동적 필터 구성
+      const dynamicFilters: Record<string, string> = {};
+      if (hasLinkedFilters && allValues && fieldIdToName) {
+        for (const lf of linkedFilters!) {
+          const fieldName = fieldIdToName[lf.sourceFieldId] ?? lf.sourceFieldId;
+          const val = allValues[fieldName];
+          if (val != null && val !== "" && lf.filterColumn) {
+            dynamicFilters[lf.filterColumn] = String(val);
+          }
+        }
+      }
+
       setLoading(true);
       dataApi
         .getTableData(source.tableName, {
           page: 1,
-          pageSize: 500,
+          size: 500,
-          sortColumn: source.labelColumn,
+          sortBy: source.labelColumn,
-          sortDirection: "asc",
+          sortOrder: "asc",
+          ...(Object.keys(dynamicFilters).length > 0 ? { filters: dynamicFilters } : {}),
         })
         .then((res) => {
-          if (res.data?.success && Array.isArray(res.data.data?.data)) {
+          if (Array.isArray(res.data)) {
-            setOptions(
+            const seen = new Set<string>();
-              res.data.data.data.map((row: Record<string, unknown>) => ({
+            const deduped: { value: string; label: string }[] = [];
-                value: String(row[source.valueColumn!] ?? ""),
+            for (const row of res.data) {
-                label: String(row[source.labelColumn!] ?? ""),
+              const v = String(row[source.valueColumn!] ?? "");
-              }))
+              if (!v || seen.has(v)) continue;
-            );
+              seen.add(v);
+              deduped.push({ value: v, label: String(row[source.labelColumn!] ?? "") });
+            }
+            setOptions(deduped);
           }
         })
         .catch(() => {
@@ -604,7 +692,16 @@ function SelectFieldInput({
         })
         .finally(() => setLoading(false));
     }
-  }, [source?.type, source?.tableName, source?.valueColumn, source?.labelColumn, source?.staticOptions]);
+  }, [source?.type, source?.tableName, source?.valueColumn, source?.labelColumn, source?.staticOptions, linkedFilterKey, linkedFiltersFilled]);
+
+  // W3: 옵션이 바뀌었을 때 현재 선택값이 유효하지 않으면 자동 초기화
+  useEffect(() => {
+    if (!hasLinkedFilters || !value || loading) return;
+    const currentStr = String(value);
+    if (options.length > 0 && !options.some((o) => o.value === currentStr)) {
+      onChange("");
+    }
+  }, [options, hasLinkedFilters]);
 
   if (loading) {
     return (
@@ -631,6 +728,11 @@ function SelectFieldInput({
     );
   }
 
+  // W2: 연동 필터의 소스 값이 비어있으면 안내 메시지
+  const emptyMessage = hasLinkedFilters && !linkedFiltersFilled
+    ? "상위 필드를 먼저 선택하세요"
+    : "옵션이 없습니다";
+
   return (
     <Select
       value={String(value ?? "")}
@@ -642,7 +744,7 @@ function SelectFieldInput({
       <SelectContent>
         {options.length === 0 ? (
           <div className="px-2 py-1.5 text-xs text-muted-foreground">
-            옵션이 없습니다
+            {emptyMessage}
           </div>
         ) : (
           options.map((opt) => (

frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx

@@ -9,6 +9,7 @@
  */
 
 import { useState, useEffect, useCallback, useMemo } from "react";
+import { useCollapsibleSections } from "@/hooks/pop/useCollapsibleSections";
 import {
   ChevronDown,
   ChevronRight,
@@ -52,6 +53,7 @@ import type {
   FieldSectionStyle,
   FieldSectionAppearance,
   FieldSelectSource,
+  SelectLinkedFilter,
   AutoNumberConfig,
   FieldValueSource,
   PopFieldSaveMapping,
@@ -74,7 +76,7 @@ import {
   type ColumnInfo,
 } from "../pop-dashboard/utils/dataFetcher";
 import { dataApi } from "@/lib/api/data";
-import { getAvailableNumberingRulesForScreen } from "@/lib/api/numberingRule";
+import { getAvailableNumberingRulesForScreen, getNumberingRules } from "@/lib/api/numberingRule";
 
 // ========================================
 // Props
@@ -213,6 +215,7 @@ export function PopFieldConfigPanel({
             onUpdate={(partial) => updateSection(section.id, partial)}
             onRemove={() => removeSection(section.id)}
             onMoveUp={() => moveSectionUp(idx)}
+            allSections={cfg.sections}
           />
         ))}
         <Button
@@ -462,6 +465,8 @@ function SaveTabContent({
   // --- 자동생성 필드 로직 ---
   const autoGenMappings = cfg.saveConfig?.autoGenMappings ?? [];
   const [numberingRules, setNumberingRules] = useState<{ ruleId: string; ruleName: string }[]>([]);
+  const [allNumberingRules, setAllNumberingRules] = useState<{ ruleId: string; ruleName: string; tableName: string }[]>([]);
+  const [showAllRules, setShowAllRules] = useState(false);
 
   // 레이아웃 auto 필드 → autoGenMappings 자동 동기화
   const autoFieldIdsKey = autoInputFields.map(({ field }) => field.id).join(",");
@@ -478,7 +483,7 @@ function SaveTabContent({
           label: field.labelText || "",
           targetColumn: "",
           numberingRuleId: field.autoNumber?.numberingRuleId ?? "",
-          showInForm: true,
+          showInForm: false,
           showResultModal: true,
         });
       }
@@ -513,6 +518,24 @@ function SaveTabContent({
     }
   }, [saveTableName]);
 
+  useEffect(() => {
+    if (!showAllRules) return;
+    if (allNumberingRules.length > 0) return;
+    getNumberingRules()
+      .then((res) => {
+        if (res.success && Array.isArray(res.data)) {
+          setAllNumberingRules(
+            res.data.map((r: any) => ({
+              ruleId: String(r.ruleId ?? r.rule_id ?? ""),
+              ruleName: String(r.ruleName ?? r.rule_name ?? ""),
+              tableName: String(r.tableName ?? r.table_name ?? ""),
+            }))
+          );
+        }
+      })
+      .catch(() => setAllNumberingRules([]));
+  }, [showAllRules, allNumberingRules.length]);
+
   const addAutoGenMapping = useCallback(() => {
     const newMapping: PopFieldAutoGenMapping = {
       id: `autogen_${Date.now()}`,
@@ -626,10 +649,7 @@ function SaveTabContent({
 
   const noFields = allFields.length === 0;
 
-  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const sections = useCollapsibleSections("pop-field");
-  const toggleSection = useCallback((key: string) => {
-    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
-  }, []);
 
   return (
     <div className="space-y-4">
@@ -644,16 +664,16 @@ function SaveTabContent({
         <div className="rounded-md border bg-card">
           <div
             className="flex cursor-pointer items-center gap-1.5 px-3 py-2"
-            onClick={() => toggleSection("table")}
+            onClick={() => sections.toggle("table")}
           >
-            {collapsed["table"] ? (
+            {sections.isOpen("table") ? (
-              <ChevronRight className="h-3 w-3 text-muted-foreground" />
-            ) : (
               <ChevronDown className="h-3 w-3 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="h-3 w-3 text-muted-foreground" />
             )}
             <span className="text-xs font-medium">테이블 설정</span>
           </div>
-          {!collapsed["table"] && <div className="space-y-3 border-t p-3">
+          {sections.isOpen("table") && <div className="space-y-3 border-t p-3">
             {/* 읽기 테이블 (display 섹션이 있을 때만) */}
             {hasDisplayFields && (
               <>
@@ -817,19 +837,19 @@ function SaveTabContent({
         <div className="rounded-md border bg-card">
           <div
             className="flex cursor-pointer items-center gap-1.5 px-3 py-2"
-            onClick={() => toggleSection("read")}
+            onClick={() => sections.toggle("read")}
           >
-            {collapsed["read"] ? (
+            {sections.isOpen("read") ? (
-              <ChevronRight className="h-3 w-3 text-muted-foreground" />
-            ) : (
               <ChevronDown className="h-3 w-3 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="h-3 w-3 text-muted-foreground" />
             )}
             <span className="text-xs font-medium">읽기 필드</span>
             <span className="text-[10px] text-muted-foreground">
               (읽기 폼)
             </span>
           </div>
-          {!collapsed["read"] && <div className="space-y-2 border-t p-3">
+          {sections.isOpen("read") && <div className="space-y-2 border-t p-3">
             {readColumns.length === 0 ? (
               <p className="py-2 text-xs text-muted-foreground">
                 읽기 테이블의 컬럼을 불러오는 중...
@@ -966,19 +986,19 @@ function SaveTabContent({
         <div className="rounded-md border bg-card">
           <div
             className="flex cursor-pointer items-center gap-1.5 px-3 py-2"
-            onClick={() => toggleSection("input")}
+            onClick={() => sections.toggle("input")}
           >
-            {collapsed["input"] ? (
+            {sections.isOpen("input") ? (
-              <ChevronRight className="h-3 w-3 text-muted-foreground" />
-            ) : (
               <ChevronDown className="h-3 w-3 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="h-3 w-3 text-muted-foreground" />
             )}
             <span className="text-xs font-medium">입력 필드</span>
             <span className="text-[10px] text-muted-foreground">
               (입력 폼 → 저장)
             </span>
           </div>
-          {!collapsed["input"] && <div className="space-y-2 border-t p-3">
+          {sections.isOpen("input") && <div className="space-y-2 border-t p-3">
             {saveColumns.length === 0 ? (
               <p className="py-2 text-xs text-muted-foreground">
                 저장 테이블의 컬럼을 불러오는 중...
@@ -1028,21 +1048,23 @@ function SaveTabContent({
         <div className="rounded-md border bg-card">
           <div
             className="flex cursor-pointer items-center gap-1.5 px-3 py-2"
-            onClick={() => toggleSection("hidden")}
+            onClick={() => sections.toggle("hidden")}
           >
-            {collapsed["hidden"] ? (
+            {sections.isOpen("hidden") ? (
-              <ChevronRight className="h-3 w-3 text-muted-foreground" />
-            ) : (
               <ChevronDown className="h-3 w-3 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="h-3 w-3 text-muted-foreground" />
             )}
             <span className="text-xs font-medium">숨은 필드</span>
             <span className="text-[10px] text-muted-foreground">
               (UI 미표시, 전달 데이터에서 추출하여 저장)
             </span>
           </div>
-          {!collapsed["hidden"] && <div className="space-y-3 border-t p-3">
+          {sections.isOpen("hidden") && <div className="space-y-3 border-t p-3">
             {hiddenMappings.map((m) => {
               const isJson = m.valueSource === "json_extract";
+              const isStatic = m.valueSource === "static";
+              const isDbColumn = m.valueSource === "db_column";
               return (
                 <div key={m.id} className="space-y-1.5 rounded border bg-background p-2">
                   <div className="flex items-center gap-2">
@@ -1070,6 +1092,7 @@ function SaveTabContent({
                           sourceDbColumn: undefined,
                           sourceJsonColumn: undefined,
                           sourceJsonKey: undefined,
+                          staticValue: undefined,
                         })
                       }
                     >
@@ -1079,10 +1102,10 @@ function SaveTabContent({
                       <SelectContent>
                         <SelectItem value="db_column" className="text-xs">DB 컬럼</SelectItem>
                         <SelectItem value="json_extract" className="text-xs">JSON</SelectItem>
+                        <SelectItem value="static" className="text-xs">고정값</SelectItem>
                       </SelectContent>
                     </Select>
-                    {!isJson && (
+                    {isDbColumn && (
-                      <>
                       <Select
                         value={m.sourceDbColumn || "__none__"}
                         onValueChange={(v) =>
@@ -1101,7 +1124,14 @@ function SaveTabContent({
                           ))}
                         </SelectContent>
                       </Select>
-                      </>
+                    )}
+                    {isStatic && (
+                      <Input
+                        value={m.staticValue || ""}
+                        onChange={(e) => updateHiddenMapping(m.id, { staticValue: e.target.value })}
+                        placeholder="고정값 입력"
+                        className="h-7 flex-1 text-xs"
+                      />
                     )}
                   </div>
                   {isJson && (
@@ -1183,19 +1213,19 @@ function SaveTabContent({
         <div className="rounded-md border bg-card">
           <div
             className="flex cursor-pointer items-center gap-1.5 px-3 py-2"
-            onClick={() => toggleSection("autogen")}
+            onClick={() => sections.toggle("autogen")}
           >
-            {collapsed["autogen"] ? (
+            {sections.isOpen("autogen") ? (
-              <ChevronRight className="h-3 w-3 text-muted-foreground" />
-            ) : (
               <ChevronDown className="h-3 w-3 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="h-3 w-3 text-muted-foreground" />
             )}
             <span className="text-xs font-medium">자동생성 필드</span>
             <span className="text-[10px] text-muted-foreground">
               (저장 시 서버에서 채번)
             </span>
           </div>
-          {!collapsed["autogen"] && <div className="space-y-3 border-t p-3">
+          {sections.isOpen("autogen") && <div className="space-y-3 border-t p-3">
             {autoGenMappings.map((m) => {
               const isLinked = !!m.linkedFieldId;
               return (
@@ -1248,7 +1278,19 @@ function SaveTabContent({
                     </Select>
                   </div>
                   <div>
+                    <div className="flex items-center justify-between">
                       <Label className="text-[10px]">채번 규칙</Label>
+                      <div className="flex items-center gap-1">
+                        <Switch
+                          checked={showAllRules}
+                          onCheckedChange={setShowAllRules}
+                          className="h-3.5 w-7 data-[state=checked]:bg-primary [&>span]:h-2.5 [&>span]:w-2.5"
+                        />
+                        <Label className="cursor-pointer text-[10px] text-muted-foreground" onClick={() => setShowAllRules(!showAllRules)}>
+                          전체 보기
+                        </Label>
+                      </div>
+                    </div>
                     <Select
                       value={m.numberingRuleId || "__none__"}
                       onValueChange={(v) =>
@@ -1262,11 +1304,19 @@ function SaveTabContent({
                         <SelectItem value="__none__" className="text-xs">
                           선택
                         </SelectItem>
-                        {numberingRules.map((r) => (
+                        {showAllRules
+                          ? allNumberingRules.map((r) => (
+                              <SelectItem key={r.ruleId} value={r.ruleId} className="text-xs">
+                                {r.ruleName || r.ruleId}
+                                <span className="ml-1 text-muted-foreground">({r.tableName || "-"})</span>
+                              </SelectItem>
+                            ))
+                          : numberingRules.map((r) => (
                               <SelectItem key={r.ruleId} value={r.ruleId} className="text-xs">
                                 {r.ruleName || r.ruleId}
                               </SelectItem>
-                        ))}
+                            ))
+                        }
                       </SelectContent>
                     </Select>
                   </div>
@@ -1325,6 +1375,7 @@ interface SectionEditorProps {
   onUpdate: (partial: Partial<PopFieldSection>) => void;
   onRemove: () => void;
   onMoveUp: () => void;
+  allSections: PopFieldSection[];
 }
 
 function migrateStyle(style: string): FieldSectionStyle {
@@ -1341,8 +1392,9 @@ function SectionEditor({
   onUpdate,
   onRemove,
   onMoveUp,
+  allSections,
 }: SectionEditorProps) {
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
   const resolvedStyle = migrateStyle(section.style);
 
   const sectionFields = section.fields || [];
@@ -1522,6 +1574,7 @@ function SectionEditor({
                 sectionStyle={resolvedStyle}
                 onUpdate={(partial) => updateField(field.id, partial)}
                 onRemove={() => removeField(field.id)}
+                allSections={allSections}
               />
             ))}
             <Button
@@ -1549,6 +1602,7 @@ interface FieldItemEditorProps {
   sectionStyle?: FieldSectionStyle;
   onUpdate: (partial: Partial<PopFieldItem>) => void;
   onRemove: () => void;
+  allSections?: PopFieldSection[];
 }
 
 function FieldItemEditor({
@@ -1556,6 +1610,7 @@ function FieldItemEditor({
   sectionStyle,
   onUpdate,
   onRemove,
+  allSections,
 }: FieldItemEditorProps) {
   const isDisplay = sectionStyle === "display";
   const [expanded, setExpanded] = useState(false);
@@ -1645,9 +1700,9 @@ function FieldItemEditor({
             />
           </div>
 
-          {/* 읽기전용 + 필수 (입력 폼에서만 표시) */}
+          {/* 읽기전용 + 필수 + 데이터 연동 (입력 폼에서만 표시) */}
           {!isDisplay && (
-            <div className="flex items-center gap-4">
+            <div className="flex flex-wrap items-center gap-4">
               <div className="flex items-center gap-1.5">
                 <Switch
                   checked={field.readOnly || false}
@@ -1666,6 +1721,29 @@ function FieldItemEditor({
                 />
                 <Label className="text-[10px]">필수</Label>
               </div>
+              {field.inputType === "select" && field.selectSource?.type === "table" && (
+                <div className="flex items-center gap-1.5">
+                  <Switch
+                    checked={!!field.selectSource?.linkedFilters?.length}
+                    onCheckedChange={(v) => {
+                      const src = field.selectSource ?? { type: "table" as const };
+                      if (v) {
+                        onUpdate({
+                          selectSource: {
+                            ...src,
+                            linkedFilters: [{ sourceFieldId: "", filterColumn: "" }],
+                          },
+                        });
+                      } else {
+                        onUpdate({
+                          selectSource: { ...src, linkedFilters: undefined },
+                        });
+                      }
+                    }}
+                  />
+                  <Label className="text-[10px]">데이터 연동</Label>
+                </div>
+              )}
             </div>
           )}
 
@@ -1690,13 +1768,32 @@ function FieldItemEditor({
             />
           )}
 
-          {/* auto 전용: 채번 설정 */}
+          {/* select + table + 연동 필터 활성화 시 */}
-          {field.inputType === "auto" && (
+          {field.inputType === "select" &&
-            <AutoNumberEditor
+            field.selectSource?.type === "table" &&
-              config={field.autoNumber}
+            field.selectSource?.linkedFilters &&
-              onUpdate={(autoNumber) => onUpdate({ autoNumber })}
+            field.selectSource.linkedFilters.length > 0 && (
+              <LinkedFiltersEditor
+                linkedFilters={field.selectSource.linkedFilters}
+                tableName={field.selectSource.tableName || ""}
+                currentFieldId={field.id}
+                allSections={allSections || []}
+                onUpdate={(filters) =>
+                  onUpdate({
+                    selectSource: { ...field.selectSource!, linkedFilters: filters },
+                  })
+                }
               />
             )}
+
+          {/* auto 전용: 저장 탭에서 채번 규칙을 연결하라는 안내 */}
+          {field.inputType === "auto" && (
+            <div className="rounded border bg-muted/30 p-2">
+              <p className="text-[10px] text-muted-foreground">
+                채번 규칙은 [저장] 탭 &gt; 자동생성 필드에서 설정합니다.
+              </p>
+            </div>
+          )}
         </div>
       )}
     </div>
@@ -1948,108 +2045,7 @@ function TableSourceEditor({
   );
 }
 
-// ========================================
+// AutoNumberEditor 삭제됨: 채번 규칙은 저장 탭 > 자동생성 필드에서 관리
-// AutoNumberEditor: 자동 채번 설정
-// ========================================
-
-function AutoNumberEditor({
-  config,
-  onUpdate,
-}: {
-  config?: AutoNumberConfig;
-  onUpdate: (config: AutoNumberConfig) => void;
-}) {
-  const current: AutoNumberConfig = config || {
-    prefix: "",
-    dateFormat: "YYYYMMDD",
-    separator: "-",
-    sequenceDigits: 3,
-  };
-
-  return (
-    <div className="space-y-2 rounded border bg-muted/30 p-2">
-      <Label className="text-[10px] text-muted-foreground">자동 채번 설정</Label>
-
-      <div className="grid grid-cols-2 gap-2">
-        <div>
-          <Label className="text-[10px]">접두사</Label>
-          <Input
-            value={current.prefix || ""}
-            onChange={(e) => onUpdate({ ...current, prefix: e.target.value })}
-            placeholder="IN-"
-            className="mt-0.5 h-7 text-xs"
-          />
-        </div>
-        <div>
-          <Label className="text-[10px]">날짜 형식</Label>
-          <Select
-            value={current.dateFormat || "YYYYMMDD"}
-            onValueChange={(v) => onUpdate({ ...current, dateFormat: v })}
-          >
-            <SelectTrigger className="mt-0.5 h-7 text-xs">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="YYYYMMDD" className="text-xs">
-                YYYYMMDD
-              </SelectItem>
-              <SelectItem value="YYMMDD" className="text-xs">
-                YYMMDD
-              </SelectItem>
-              <SelectItem value="YYMM" className="text-xs">
-                YYMM
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 gap-2">
-        <div>
-          <Label className="text-[10px]">구분자</Label>
-          <Input
-            value={current.separator || ""}
-            onChange={(e) => onUpdate({ ...current, separator: e.target.value })}
-            placeholder="-"
-            className="mt-0.5 h-7 text-xs"
-          />
-        </div>
-        <div>
-          <Label className="text-[10px]">시퀀스 자릿수</Label>
-          <Input
-            type="number"
-            value={current.sequenceDigits || 3}
-            onChange={(e) =>
-              onUpdate({
-                ...current,
-                sequenceDigits: Number(e.target.value) || 3,
-              })
-            }
-            min={1}
-            max={10}
-            className="mt-0.5 h-7 text-xs"
-          />
-        </div>
-      </div>
-
-      {/* 미리보기 */}
-      <div className="text-[10px] text-muted-foreground">
-        미리보기:{" "}
-        <span className="font-mono">
-          {current.prefix || ""}
-          {current.separator || ""}
-          {current.dateFormat === "YYMM"
-            ? "2602"
-            : current.dateFormat === "YYMMDD"
-              ? "260226"
-              : "20260226"}
-          {current.separator || ""}
-          {"0".repeat(current.sequenceDigits || 3).slice(0, -1)}1
-        </span>
-      </div>
-    </div>
-  );
-}
 
 // ========================================
 // JsonKeySelect: JSON 키 드롭다운 (자동 추출)
@@ -2132,6 +2128,118 @@ function JsonKeySelect({
   );
 }
 
+// ========================================
+// LinkedFiltersEditor: 데이터 연동 필터 설정
+// ========================================
+
+function LinkedFiltersEditor({
+  linkedFilters,
+  tableName,
+  currentFieldId,
+  allSections,
+  onUpdate,
+}: {
+  linkedFilters: SelectLinkedFilter[];
+  tableName: string;
+  currentFieldId: string;
+  allSections: PopFieldSection[];
+  onUpdate: (filters: SelectLinkedFilter[]) => void;
+}) {
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+
+  useEffect(() => {
+    if (tableName) {
+      fetchTableColumns(tableName).then(setColumns);
+    } else {
+      setColumns([]);
+    }
+  }, [tableName]);
+
+  const candidateFields = useMemo(() => {
+    return allSections.flatMap((sec) =>
+      (sec.fields ?? [])
+        .filter((f) => f.id !== currentFieldId)
+        .map((f) => ({ id: f.id, label: f.labelText || f.fieldName || f.id, sectionLabel: sec.label }))
+    );
+  }, [allSections, currentFieldId]);
+
+  const updateFilter = (idx: number, partial: Partial<SelectLinkedFilter>) => {
+    const next = linkedFilters.map((f, i) => (i === idx ? { ...f, ...partial } : f));
+    onUpdate(next);
+  };
+
+  const removeFilter = (idx: number) => {
+    const next = linkedFilters.filter((_, i) => i !== idx);
+    onUpdate(next.length > 0 ? next : [{ sourceFieldId: "", filterColumn: "" }]);
+  };
+
+  const addFilter = () => {
+    onUpdate([...linkedFilters, { sourceFieldId: "", filterColumn: "" }]);
+  };
+
+  return (
+    <div className="space-y-2 rounded border bg-muted/30 p-2">
+      <Label className="text-[10px] text-muted-foreground">데이터 연동</Label>
+      {linkedFilters.map((lf, idx) => (
+        <div key={idx} className="flex items-center gap-1">
+          <Select
+            value={lf.sourceFieldId || "__none__"}
+            onValueChange={(v) => updateFilter(idx, { sourceFieldId: v === "__none__" ? "" : v })}
+          >
+            <SelectTrigger className="h-7 flex-1 text-xs">
+              <SelectValue placeholder="연동 필드" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__none__" className="text-xs">필드 선택</SelectItem>
+              {candidateFields.map((cf) => (
+                <SelectItem key={cf.id} value={cf.id} className="text-xs">
+                  {cf.sectionLabel ? `[${cf.sectionLabel}] ` : ""}{cf.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-[10px] text-muted-foreground">=</span>
+          <Select
+            value={lf.filterColumn || "__none__"}
+            onValueChange={(v) => updateFilter(idx, { filterColumn: v === "__none__" ? "" : v })}
+          >
+            <SelectTrigger className="h-7 flex-1 text-xs">
+              <SelectValue placeholder="필터 컬럼" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__none__" className="text-xs">컬럼 선택</SelectItem>
+              {columns.map((c) => (
+                <SelectItem key={c.name} value={c.name} className="text-xs">
+                  {c.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {linkedFilters.length > 1 && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-5 w-5 shrink-0 text-destructive"
+              onClick={() => removeFilter(idx)}
+            >
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+      ))}
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-6 w-full text-[10px]"
+        onClick={addFilter}
+      >
+        <Plus className="mr-1 h-3 w-3" />
+        필터 추가
+      </Button>
+    </div>
+  );
+}
+
 // ========================================
 // AppearanceEditor: 섹션 외관 설정
 // ========================================

frontend/lib/registry/pop-components/pop-field/types.ts

@@ -44,6 +44,11 @@ export const DEFAULT_SECTION_APPEARANCES: Record<FieldSectionStyle, FieldSection
 
 export type FieldSelectSourceType = "static" | "table";
 
+export interface SelectLinkedFilter {
+  sourceFieldId: string;
+  filterColumn: string;
+}
+
 export interface FieldSelectSource {
   type: FieldSelectSourceType;
   staticOptions?: { value: string; label: string }[];
@@ -51,6 +56,7 @@ export interface FieldSelectSource {
   valueColumn?: string;
   labelColumn?: string;
   filters?: DataSourceFilter[];
+  linkedFilters?: SelectLinkedFilter[];
 }
 
 // ===== 자동 채번 설정 =====
@@ -124,7 +130,7 @@ export interface PopFieldSaveMapping {
 
 // ===== 숨은 필드 매핑 (UI에 미표시, 전달 데이터에서 추출하여 저장) =====
 
-export type HiddenValueSource = "json_extract" | "db_column";
+export type HiddenValueSource = "json_extract" | "db_column" | "static";
 
 export interface PopFieldHiddenMapping {
   id: string;
@@ -133,6 +139,7 @@ export interface PopFieldHiddenMapping {
   sourceJsonColumn?: string;
   sourceJsonKey?: string;
   sourceDbColumn?: string;
+  staticValue?: string;
   targetColumn: string;
 }
 

frontend/lib/registry/pop-components/types.ts

@@ -638,6 +638,19 @@ export interface CollectedDataResponse {
 export interface SaveMapping {
   targetTable: string;
   columnMapping: Record<string, string>;
+  autoGenMappings?: Array<{
+    numberingRuleId: string;
+    targetColumn: string;
+    showResultModal?: boolean;
+  }>;
+  hiddenMappings?: Array<{
+    valueSource: "json_extract" | "db_column" | "static";
+    targetColumn: string;
+    staticValue?: string;
+    sourceJsonColumn?: string;
+    sourceJsonKey?: string;
+    sourceDbColumn?: string;
+  }>;
 }
 
 export interface StatusChangeRule {