Merge branch 'feature/v2-renewal' of http://39.117.244.52:3000/kjs/ERP-node into jskim-node

- Replaced the middleware `checkAuthStatus` with the `AuthController.checkAuthStatus` method in the authentication routes for improved clarity and structure.
- Simplified token validation logic in the `useAuth` hook by removing unnecessary checks for expired tokens, allowing the API client to handle token refresh automatically.
- Enhanced logging for authentication checks to provide clearer insights into the authentication flow and potential issues.
- Adjusted the handling of user authentication status to ensure consistency and reliability in user state management.

This refactor streamlines the authentication process and improves the overall maintainability of the authentication logic.

.gitignore

@@ -163,6 +163,12 @@ uploads/
 # ===== 기타 =====
 claude.md
 
+# Agent Pipeline 로컬 파일
+_local/
+.agent-pipeline/
+.codeguard-baseline.json
+scripts/browser-test-*.js
+
 # AI 에이전트 테스트 산출물
 *-test-screenshots/
 *-screenshots/

backend-node/src/app.ts

@@ -117,6 +117,7 @@ import screenEmbeddingRoutes from "./routes/screenEmbeddingRoutes"; // 화면
 import screenGroupRoutes from "./routes/screenGroupRoutes"; // 화면 그룹 관리
 import popActionRoutes from "./routes/popActionRoutes"; // POP 액션 실행
 import vehicleTripRoutes from "./routes/vehicleTripRoutes"; // 차량 운행 이력 관리
+import approvalRoutes from "./routes/approvalRoutes"; // 결재 시스템
 import driverRoutes from "./routes/driverRoutes"; // 공차중계 운전자 관리
 import taxInvoiceRoutes from "./routes/taxInvoiceRoutes"; // 세금계산서 관리
 import cascadingRelationRoutes from "./routes/cascadingRelationRoutes"; // 연쇄 드롭다운 관계 관리
@@ -318,6 +319,7 @@ app.use("/api/process-work-standard", processWorkStandardRoutes); // 공정 작
 app.use("/api/audit-log", auditLogRoutes); // 통합 변경 이력
 app.use("/api", screenEmbeddingRoutes); // 화면 임베딩 및 데이터 전달
 app.use("/api/vehicle", vehicleTripRoutes); // 차량 운행 이력 관리
+app.use("/api/approval", approvalRoutes); // 결재 시스템
 // app.use("/api/collections", collectionRoutes); // 임시 주석
 // app.use("/api/batch", batchRoutes); // 임시 주석
 // app.use('/api/users', userRoutes);
@@ -351,11 +353,13 @@ app.listen(PORT, HOST, async () => {
       runDashboardMigration,
       runTableHistoryActionMigration,
       runDtgManagementLogMigration,
+      runApprovalSystemMigration,
     } = await import("./database/runMigration");
 
     await runDashboardMigration();
     await runTableHistoryActionMigration();
     await runDtgManagementLogMigration();
+    await runApprovalSystemMigration();
   } catch (error) {
     logger.error(`❌ 마이그레이션 실패:`, error);
   }

backend-node/src/controllers/adminController.ts

@@ -3690,6 +3690,8 @@ export async function copyMenu(
       ? {
           removeText: req.body.screenNameConfig.removeText,
           addPrefix: req.body.screenNameConfig.addPrefix,
+          replaceFrom: req.body.screenNameConfig.replaceFrom,
+          replaceTo: req.body.screenNameConfig.replaceTo,
         }
       : undefined;
 

backend-node/src/controllers/approvalController.ts

@@ -0,0 +1,892 @@
+import { Response } from "express";
+import { AuthenticatedRequest } from "../types/auth";
+import { query, queryOne, transaction } from "../database/db";
+
+// ============================================================
+// 결재 정의 (Approval Definitions) CRUD
+// ============================================================
+
+export class ApprovalDefinitionController {
+  // 결재 유형 목록 조회
+  static async getDefinitions(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { is_active, search } = req.query;
+
+      const conditions: string[] = ["company_code = $1"];
+      const params: any[] = [companyCode];
+      let idx = 2;
+
+      if (is_active) {
+        conditions.push(`is_active = $${idx}`);
+        params.push(is_active);
+        idx++;
+      }
+
+      if (search) {
+        conditions.push(`(definition_name ILIKE $${idx} OR definition_name_eng ILIKE $${idx})`);
+        params.push(`%${search}%`);
+        idx++;
+      }
+
+      const rows = await query<any>(
+        `SELECT * FROM approval_definitions WHERE ${conditions.join(" AND ")} ORDER BY definition_id ASC`,
+        params
+      );
+
+      return res.json({ success: true, data: rows });
+    } catch (error) {
+      console.error("결재 유형 목록 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 유형 목록 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 결재 유형 상세 조회
+  static async getDefinition(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const row = await queryOne<any>(
+        "SELECT * FROM approval_definitions WHERE definition_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      if (!row) {
+        return res.status(404).json({ success: false, message: "결재 유형을 찾을 수 없습니다." });
+      }
+
+      return res.json({ success: true, data: row });
+    } catch (error) {
+      console.error("결재 유형 상세 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 유형 상세 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 결재 유형 생성
+  static async createDefinition(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const {
+        definition_name,
+        definition_name_eng,
+        description,
+        default_template_id,
+        max_steps = 5,
+        allow_self_approval = false,
+        allow_cancel = true,
+        is_active = "Y",
+      } = req.body;
+
+      if (!definition_name) {
+        return res.status(400).json({ success: false, message: "결재 유형명은 필수입니다." });
+      }
+
+      const userId = req.user?.userId || "system";
+      const [row] = await query<any>(
+        `INSERT INTO approval_definitions (
+          definition_name, definition_name_eng, description, default_template_id,
+          max_steps, allow_self_approval, allow_cancel, is_active,
+          company_code, created_by, updated_by
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $10)
+        RETURNING *`,
+        [
+          definition_name, definition_name_eng, description, default_template_id,
+          max_steps, allow_self_approval, allow_cancel, is_active,
+          companyCode, userId,
+        ]
+      );
+
+      return res.status(201).json({ success: true, data: row, message: "결재 유형이 생성되었습니다." });
+    } catch (error) {
+      console.error("결재 유형 생성 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 유형 생성 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 결재 유형 수정
+  static async updateDefinition(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const existing = await queryOne<any>(
+        "SELECT definition_id FROM approval_definitions WHERE definition_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      if (!existing) {
+        return res.status(404).json({ success: false, message: "결재 유형을 찾을 수 없습니다." });
+      }
+
+      const {
+        definition_name, definition_name_eng, description, default_template_id,
+        max_steps, allow_self_approval, allow_cancel, is_active,
+      } = req.body;
+
+      const fields: string[] = [];
+      const params: any[] = [];
+      let idx = 1;
+
+      if (definition_name !== undefined) { fields.push(`definition_name = $${idx++}`); params.push(definition_name); }
+      if (definition_name_eng !== undefined) { fields.push(`definition_name_eng = $${idx++}`); params.push(definition_name_eng); }
+      if (description !== undefined) { fields.push(`description = $${idx++}`); params.push(description); }
+      if (default_template_id !== undefined) { fields.push(`default_template_id = $${idx++}`); params.push(default_template_id); }
+      if (max_steps !== undefined) { fields.push(`max_steps = $${idx++}`); params.push(max_steps); }
+      if (allow_self_approval !== undefined) { fields.push(`allow_self_approval = $${idx++}`); params.push(allow_self_approval); }
+      if (allow_cancel !== undefined) { fields.push(`allow_cancel = $${idx++}`); params.push(allow_cancel); }
+      if (is_active !== undefined) { fields.push(`is_active = $${idx++}`); params.push(is_active); }
+
+      fields.push(`updated_by = $${idx++}`, `updated_at = NOW()`);
+      params.push(req.user?.userId || "system");
+      params.push(id, companyCode);
+
+      const [row] = await query<any>(
+        `UPDATE approval_definitions SET ${fields.join(", ")}
+         WHERE definition_id = $${idx++} AND company_code = $${idx++} RETURNING *`,
+        params
+      );
+
+      return res.json({ success: true, data: row, message: "결재 유형이 수정되었습니다." });
+    } catch (error) {
+      console.error("결재 유형 수정 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 유형 수정 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 결재 유형 삭제
+  static async deleteDefinition(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const existing = await queryOne<any>(
+        "SELECT definition_id FROM approval_definitions WHERE definition_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      if (!existing) {
+        return res.status(404).json({ success: false, message: "결재 유형을 찾을 수 없습니다." });
+      }
+
+      await query<any>(
+        "DELETE FROM approval_definitions WHERE definition_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      return res.json({ success: true, message: "결재 유형이 삭제되었습니다." });
+    } catch (error) {
+      console.error("결재 유형 삭제 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 유형 삭제 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+}
+
+// ============================================================
+// 결재선 템플릿 (Approval Line Templates) CRUD
+// ============================================================
+
+export class ApprovalTemplateController {
+  // 템플릿 목록 조회
+  static async getTemplates(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { definition_id, is_active } = req.query;
+
+      const conditions: string[] = ["t.company_code = $1"];
+      const params: any[] = [companyCode];
+      let idx = 2;
+
+      if (definition_id) {
+        conditions.push(`t.definition_id = $${idx++}`);
+        params.push(definition_id);
+      }
+      if (is_active) {
+        conditions.push(`t.is_active = $${idx++}`);
+        params.push(is_active);
+      }
+
+      const rows = await query<any>(
+        `SELECT t.*, d.definition_name
+         FROM approval_line_templates t
+         LEFT JOIN approval_definitions d ON t.definition_id = d.definition_id AND t.company_code = d.company_code
+         WHERE ${conditions.join(" AND ")}
+         ORDER BY t.template_id ASC`,
+        params
+      );
+
+      return res.json({ success: true, data: rows });
+    } catch (error) {
+      console.error("결재선 템플릿 목록 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재선 템플릿 목록 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 템플릿 상세 조회 (단계 포함)
+  static async getTemplate(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const template = await queryOne<any>(
+        `SELECT t.*, d.definition_name
+         FROM approval_line_templates t
+         LEFT JOIN approval_definitions d ON t.definition_id = d.definition_id AND t.company_code = d.company_code
+         WHERE t.template_id = $1 AND t.company_code = $2`,
+        [id, companyCode]
+      );
+
+      if (!template) {
+        return res.status(404).json({ success: false, message: "결재선 템플릿을 찾을 수 없습니다." });
+      }
+
+      const steps = await query<any>(
+        "SELECT * FROM approval_line_template_steps WHERE template_id = $1 AND company_code = $2 ORDER BY step_order ASC",
+        [id, companyCode]
+      );
+
+      return res.json({ success: true, data: { ...template, steps } });
+    } catch (error) {
+      console.error("결재선 템플릿 상세 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재선 템플릿 상세 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 템플릿 생성 (단계 포함 트랜잭션)
+  static async createTemplate(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { template_name, description, definition_id, is_active = "Y", steps = [] } = req.body;
+
+      if (!template_name) {
+        return res.status(400).json({ success: false, message: "템플릿명은 필수입니다." });
+      }
+
+      const userId = req.user?.userId || "system";
+
+      let result: any;
+      await transaction(async (client) => {
+        const { rows } = await client.query(
+          `INSERT INTO approval_line_templates (template_name, description, definition_id, is_active, company_code, created_by, updated_by)
+           VALUES ($1, $2, $3, $4, $5, $6, $6) RETURNING *`,
+          [template_name, description, definition_id, is_active, companyCode, userId]
+        );
+        result = rows[0];
+
+        // 단계 일괄 삽입
+        if (Array.isArray(steps) && steps.length > 0) {
+          for (const step of steps) {
+            await client.query(
+              `INSERT INTO approval_line_template_steps
+               (template_id, step_order, approver_type, approver_user_id, approver_position, approver_dept_code, approver_label, company_code)
+               VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
+              [
+                result.template_id,
+                step.step_order,
+                step.approver_type || "user",
+                step.approver_user_id || null,
+                step.approver_position || null,
+                step.approver_dept_code || null,
+                step.approver_label || null,
+                companyCode,
+              ]
+            );
+          }
+        }
+      });
+
+      return res.status(201).json({ success: true, data: result, message: "결재선 템플릿이 생성되었습니다." });
+    } catch (error) {
+      console.error("결재선 템플릿 생성 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재선 템플릿 생성 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 템플릿 수정
+  static async updateTemplate(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const existing = await queryOne<any>(
+        "SELECT template_id FROM approval_line_templates WHERE template_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      if (!existing) {
+        return res.status(404).json({ success: false, message: "결재선 템플릿을 찾을 수 없습니다." });
+      }
+
+      const { template_name, description, definition_id, is_active, steps } = req.body;
+      const userId = req.user?.userId || "system";
+
+      let result: any;
+      await transaction(async (client) => {
+        const fields: string[] = [];
+        const params: any[] = [];
+        let idx = 1;
+
+        if (template_name !== undefined) { fields.push(`template_name = $${idx++}`); params.push(template_name); }
+        if (description !== undefined) { fields.push(`description = $${idx++}`); params.push(description); }
+        if (definition_id !== undefined) { fields.push(`definition_id = $${idx++}`); params.push(definition_id); }
+        if (is_active !== undefined) { fields.push(`is_active = $${idx++}`); params.push(is_active); }
+        fields.push(`updated_by = $${idx++}`, `updated_at = NOW()`);
+        params.push(userId, id, companyCode);
+
+        const { rows } = await client.query(
+          `UPDATE approval_line_templates SET ${fields.join(", ")}
+           WHERE template_id = $${idx++} AND company_code = $${idx++} RETURNING *`,
+          params
+        );
+        result = rows[0];
+
+        // 단계 재등록 (steps 배열이 주어진 경우 전체 교체)
+        if (Array.isArray(steps)) {
+          await client.query(
+            "DELETE FROM approval_line_template_steps WHERE template_id = $1 AND company_code = $2",
+            [id, companyCode]
+          );
+          for (const step of steps) {
+            await client.query(
+              `INSERT INTO approval_line_template_steps
+               (template_id, step_order, approver_type, approver_user_id, approver_position, approver_dept_code, approver_label, company_code)
+               VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
+              [id, step.step_order, step.approver_type || "user", step.approver_user_id || null,
+               step.approver_position || null, step.approver_dept_code || null, step.approver_label || null, companyCode]
+            );
+          }
+        }
+      });
+
+      return res.json({ success: true, data: result, message: "결재선 템플릿이 수정되었습니다." });
+    } catch (error) {
+      console.error("결재선 템플릿 수정 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재선 템플릿 수정 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 템플릿 삭제
+  static async deleteTemplate(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const existing = await queryOne<any>(
+        "SELECT template_id FROM approval_line_templates WHERE template_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      if (!existing) {
+        return res.status(404).json({ success: false, message: "결재선 템플릿을 찾을 수 없습니다." });
+      }
+
+      await query<any>(
+        "DELETE FROM approval_line_templates WHERE template_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      return res.json({ success: true, message: "결재선 템플릿이 삭제되었습니다." });
+    } catch (error) {
+      console.error("결재선 템플릿 삭제 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재선 템플릿 삭제 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+}
+
+// ============================================================
+// 결재 요청 (Approval Requests) CRUD
+// ============================================================
+
+export class ApprovalRequestController {
+  // 결재 요청 목록 조회
+  static async getRequests(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      const userId = req.user?.userId;
+      if (!companyCode || !userId) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { status, target_table, target_record_id, requester_id, my_approvals, page = "1", limit = "20" } = req.query;
+
+      const conditions: string[] = ["r.company_code = $1"];
+      const params: any[] = [companyCode];
+      let idx = 2;
+
+      if (status) {
+        conditions.push(`r.status = $${idx++}`);
+        params.push(status);
+      }
+      if (target_table) {
+        conditions.push(`r.target_table = $${idx++}`);
+        params.push(target_table);
+      }
+      if (target_record_id) {
+        conditions.push(`r.target_record_id = $${idx++}`);
+        params.push(target_record_id);
+      }
+      if (requester_id) {
+        conditions.push(`r.requester_id = $${idx++}`);
+        params.push(requester_id);
+      }
+
+      // 내 결재 대기 목록: 현재 사용자가 결재자인 라인만 조회
+      if (my_approvals === "true") {
+        conditions.push(
+          `EXISTS (SELECT 1 FROM approval_lines l WHERE l.request_id = r.request_id AND l.approver_id = $${idx++} AND l.status = 'pending' AND l.company_code = r.company_code)`
+        );
+        params.push(userId);
+      }
+
+      const offset = (parseInt(page as string) - 1) * parseInt(limit as string);
+      params.push(parseInt(limit as string), offset);
+
+      const rows = await query<any>(
+        `SELECT r.*, d.definition_name
+         FROM approval_requests r
+         LEFT JOIN approval_definitions d ON r.definition_id = d.definition_id AND r.company_code = d.company_code
+         WHERE ${conditions.join(" AND ")}
+         ORDER BY r.created_at DESC
+         LIMIT $${idx++} OFFSET $${idx++}`,
+        params
+      );
+
+      // 전체 건수 조회
+      const countParams = params.slice(0, params.length - 2);
+      const [countRow] = await query<any>(
+        `SELECT COUNT(*) as total FROM approval_requests r
+         WHERE ${conditions.join(" AND ")}`,
+        countParams
+      );
+
+      return res.json({
+        success: true,
+        data: rows,
+        total: parseInt(countRow?.total || "0"),
+        page: parseInt(page as string),
+        limit: parseInt(limit as string),
+      });
+    } catch (error) {
+      console.error("결재 요청 목록 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 요청 목록 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 결재 요청 상세 조회 (라인 포함)
+  static async getRequest(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const request = await queryOne<any>(
+        `SELECT r.*, d.definition_name
+         FROM approval_requests r
+         LEFT JOIN approval_definitions d ON r.definition_id = d.definition_id AND r.company_code = d.company_code
+         WHERE r.request_id = $1 AND r.company_code = $2`,
+        [id, companyCode]
+      );
+
+      if (!request) {
+        return res.status(404).json({ success: false, message: "결재 요청을 찾을 수 없습니다." });
+      }
+
+      const lines = await query<any>(
+        "SELECT * FROM approval_lines WHERE request_id = $1 AND company_code = $2 ORDER BY step_order ASC",
+        [id, companyCode]
+      );
+
+      return res.json({ success: true, data: { ...request, lines } });
+    } catch (error) {
+      console.error("결재 요청 상세 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 요청 상세 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 결재 요청 생성 (결재 라인 자동 생성)
+  static async createRequest(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const {
+        title, description, definition_id, target_table, target_record_id,
+        target_record_data, screen_id, button_component_id,
+        approvers, // [{ approver_id, approver_name, approver_position, approver_dept, approver_label }]
+        approval_mode, // "sequential" | "parallel"
+      } = req.body;
+
+      if (!title || !target_table) {
+        return res.status(400).json({ success: false, message: "제목과 대상 테이블은 필수입니다." });
+      }
+
+      if (!Array.isArray(approvers) || approvers.length === 0) {
+        return res.status(400).json({ success: false, message: "결재자를 1명 이상 지정해야 합니다." });
+      }
+
+      const userId = req.user?.userId || "system";
+      const userName = req.user?.userName || "";
+      const deptName = req.user?.deptName || "";
+
+      const isParallel = approval_mode === "parallel";
+      const totalSteps = approvers.length;
+
+      // approval_mode를 target_record_data에 병합 저장
+      const mergedRecordData = {
+        ...(target_record_data || {}),
+        approval_mode: approval_mode || "sequential",
+      };
+
+      let result: any;
+      await transaction(async (client) => {
+        // 결재 요청 생성
+        const { rows: reqRows } = await client.query(
+          `INSERT INTO approval_requests (
+            title, description, definition_id, target_table, target_record_id,
+            target_record_data, status, current_step, total_steps,
+            requester_id, requester_name, requester_dept,
+            screen_id, button_component_id, company_code
+          ) VALUES ($1, $2, $3, $4, $5, $6, 'requested', 1, $7, $8, $9, $10, $11, $12, $13)
+          RETURNING *`,
+          [
+            title, description, definition_id, target_table, target_record_id || null,
+            JSON.stringify(mergedRecordData),
+            totalSteps,
+            userId, userName, deptName,
+            screen_id, button_component_id, companyCode,
+          ]
+        );
+        result = reqRows[0];
+
+        // 결재 라인 생성
+        // 동시결재: 모든 결재자 pending (step_order는 고유값) / 다단결재: 첫 번째만 pending
+        for (let i = 0; i < approvers.length; i++) {
+          const approver = approvers[i];
+          const lineStatus = isParallel ? "pending" : (i === 0 ? "pending" : "waiting");
+
+          await client.query(
+            `INSERT INTO approval_lines (
+              request_id, step_order, approver_id, approver_name, approver_position,
+              approver_dept, approver_label, status, company_code
+            ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
+            [
+              result.request_id,
+              i + 1,
+              approver.approver_id,
+              approver.approver_name || null,
+              approver.approver_position || null,
+              approver.approver_dept || null,
+              approver.approver_label || (isParallel ? "동시 결재" : `${i + 1}차 결재`),
+              lineStatus,
+              companyCode,
+            ]
+          );
+        }
+
+        // 상태를 in_progress로 업데이트
+        await client.query(
+          "UPDATE approval_requests SET status = 'in_progress' WHERE request_id = $1",
+          [result.request_id]
+        );
+        result.status = "in_progress";
+      });
+
+      return res.status(201).json({ success: true, data: result, message: "결재 요청이 생성되었습니다." });
+    } catch (error) {
+      console.error("결재 요청 생성 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 요청 생성 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 결재 요청 회수 (cancel)
+  static async cancelRequest(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      const userId = req.user?.userId;
+      if (!companyCode || !userId) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const request = await queryOne<any>(
+        "SELECT * FROM approval_requests WHERE request_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      if (!request) {
+        return res.status(404).json({ success: false, message: "결재 요청을 찾을 수 없습니다." });
+      }
+
+      if (request.requester_id !== userId) {
+        return res.status(403).json({ success: false, message: "본인이 요청한 건만 회수할 수 있습니다." });
+      }
+
+      if (!["requested", "in_progress"].includes(request.status)) {
+        return res.status(400).json({ success: false, message: "이미 처리된 결재 요청은 회수할 수 없습니다." });
+      }
+
+      await query<any>(
+        "UPDATE approval_requests SET status = 'cancelled', updated_at = NOW() WHERE request_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      return res.json({ success: true, message: "결재 요청이 회수되었습니다." });
+    } catch (error) {
+      console.error("결재 요청 회수 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 요청 회수 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+}
+
+// ============================================================
+// 결재 라인 처리 (Approval Lines - 승인/반려)
+// ============================================================
+
+export class ApprovalLineController {
+  // 결재 처리 (승인/반려)
+  static async processApproval(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      const userId = req.user?.userId;
+      if (!companyCode || !userId) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { lineId } = req.params;
+      const { action, comment } = req.body; // action: 'approved' | 'rejected'
+
+      if (!["approved", "rejected"].includes(action)) {
+        return res.status(400).json({ success: false, message: "액션은 approved 또는 rejected여야 합니다." });
+      }
+
+      const line = await queryOne<any>(
+        "SELECT * FROM approval_lines WHERE line_id = $1 AND company_code = $2",
+        [lineId, companyCode]
+      );
+
+      if (!line) {
+        return res.status(404).json({ success: false, message: "결재 라인을 찾을 수 없습니다." });
+      }
+
+      if (line.approver_id !== userId) {
+        return res.status(403).json({ success: false, message: "본인이 결재자로 지정된 건만 처리할 수 있습니다." });
+      }
+
+      if (line.status !== "pending") {
+        return res.status(400).json({ success: false, message: "대기 중인 결재만 처리할 수 있습니다." });
+      }
+
+      await transaction(async (client) => {
+        // 현재 라인 처리
+        await client.query(
+          `UPDATE approval_lines SET status = $1, comment = $2, processed_at = NOW()
+           WHERE line_id = $3`,
+          [action, comment || null, lineId]
+        );
+
+        const { rows: reqRows } = await client.query(
+          "SELECT * FROM approval_requests WHERE request_id = $1 AND company_code = $2",
+          [line.request_id, companyCode]
+        );
+        const request = reqRows[0];
+
+        if (!request) return;
+
+        if (action === "rejected") {
+          // 반려: 전체 요청 반려 처리
+          await client.query(
+            `UPDATE approval_requests SET status = 'rejected', final_approver_id = $1, final_comment = $2,
+             completed_at = NOW(), updated_at = NOW()
+             WHERE request_id = $3`,
+            [userId, comment || null, line.request_id]
+          );
+          // 남은 pending/waiting 라인도 skipped 처리
+          await client.query(
+            `UPDATE approval_lines SET status = 'skipped'
+             WHERE request_id = $1 AND status IN ('pending', 'waiting') AND line_id != $2`,
+            [line.request_id, lineId]
+          );
+        } else {
+          // 승인: 동시결재 vs 다단결재 분기
+          const recordData = request.target_record_data;
+          const isParallelMode = recordData?.approval_mode === "parallel";
+
+          if (isParallelMode) {
+            // 동시결재: 남은 pending 라인이 있는지 확인
+            const { rows: remainingLines } = await client.query(
+              `SELECT COUNT(*) as cnt FROM approval_lines
+               WHERE request_id = $1 AND status = 'pending' AND line_id != $2 AND company_code = $3`,
+              [line.request_id, lineId, companyCode]
+            );
+            const remaining = parseInt(remainingLines[0]?.cnt || "0");
+
+            if (remaining === 0) {
+              // 모든 동시 결재자 승인 완료 → 최종 승인
+              await client.query(
+                `UPDATE approval_requests SET status = 'approved', final_approver_id = $1, final_comment = $2,
+                 completed_at = NOW(), updated_at = NOW()
+                 WHERE request_id = $3`,
+                [userId, comment || null, line.request_id]
+              );
+            }
+            // 아직 남은 결재자 있으면 대기 (상태 변경 없음)
+          } else {
+            // 다단결재: 다음 단계 활성화 또는 최종 완료
+            const nextStep = line.step_order + 1;
+
+            if (nextStep <= request.total_steps) {
+              await client.query(
+                `UPDATE approval_lines SET status = 'pending'
+                 WHERE request_id = $1 AND step_order = $2 AND company_code = $3`,
+                [line.request_id, nextStep, companyCode]
+              );
+              await client.query(
+                `UPDATE approval_requests SET current_step = $1, updated_at = NOW() WHERE request_id = $2`,
+                [nextStep, line.request_id]
+              );
+            } else {
+              await client.query(
+                `UPDATE approval_requests SET status = 'approved', final_approver_id = $1, final_comment = $2,
+                 completed_at = NOW(), updated_at = NOW()
+                 WHERE request_id = $3`,
+                [userId, comment || null, line.request_id]
+              );
+            }
+          }
+        }
+      });
+
+      return res.json({ success: true, message: action === "approved" ? "승인 처리되었습니다." : "반려 처리되었습니다." });
+    } catch (error) {
+      console.error("결재 처리 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "결재 처리 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 내 결재 대기 목록 조회
+  static async getMyPendingLines(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      const userId = req.user?.userId;
+      if (!companyCode || !userId) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const rows = await query<any>(
+        `SELECT l.*, r.title, r.target_table, r.target_record_id, r.requester_name, r.requester_dept, r.created_at as request_created_at
+         FROM approval_lines l
+         JOIN approval_requests r ON l.request_id = r.request_id AND l.company_code = r.company_code
+         WHERE l.approver_id = $1 AND l.status = 'pending' AND l.company_code = $2
+         ORDER BY r.created_at ASC`,
+        [userId, companyCode]
+      );
+
+      return res.json({ success: true, data: rows });
+    } catch (error) {
+      console.error("내 결재 대기 목록 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "내 결재 대기 목록 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+}

backend-node/src/database/runMigration.ts

@@ -2,6 +2,37 @@ import { PostgreSQLService } from "./PostgreSQLService";
 import fs from "fs";
 import path from "path";
 
+/**
+ * 결재 시스템 테이블 마이그레이션
+ * approval_definitions, approval_line_templates, approval_line_template_steps,
+ * approval_requests, approval_lines 테이블 생성
+ */
+export async function runApprovalSystemMigration() {
+  try {
+    console.log("🔄 결재 시스템 마이그레이션 시작...");
+
+    const sqlFilePath = path.join(
+      __dirname,
+      "../../db/migrations/100_create_approval_system.sql"
+    );
+
+    if (!fs.existsSync(sqlFilePath)) {
+      console.log("⚠️ 마이그레이션 파일이 없습니다:", sqlFilePath);
+      return;
+    }
+
+    const sqlContent = fs.readFileSync(sqlFilePath, "utf8");
+    await PostgreSQLService.query(sqlContent);
+
+    console.log("✅ 결재 시스템 마이그레이션 완료!");
+  } catch (error) {
+    console.error("❌ 결재 시스템 마이그레이션 실패:", error);
+    if (error instanceof Error && error.message.includes("already exists")) {
+      console.log("ℹ️ 테이블이 이미 존재합니다.");
+    }
+  }
+}
+
 /**
  * 데이터베이스 마이그레이션 실행
  * dashboard_elements 테이블에 custom_title, show_header 컬럼 추가

backend-node/src/routes/approvalRoutes.ts

@@ -0,0 +1,38 @@
+import express from "express";
+import {
+  ApprovalDefinitionController,
+  ApprovalTemplateController,
+  ApprovalRequestController,
+  ApprovalLineController,
+} from "../controllers/approvalController";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+const router = express.Router();
+
+router.use(authenticateToken);
+
+// ==================== 결재 유형 (Definitions) ====================
+router.get("/definitions", ApprovalDefinitionController.getDefinitions);
+router.get("/definitions/:id", ApprovalDefinitionController.getDefinition);
+router.post("/definitions", ApprovalDefinitionController.createDefinition);
+router.put("/definitions/:id", ApprovalDefinitionController.updateDefinition);
+router.delete("/definitions/:id", ApprovalDefinitionController.deleteDefinition);
+
+// ==================== 결재선 템플릿 (Templates) ====================
+router.get("/templates", ApprovalTemplateController.getTemplates);
+router.get("/templates/:id", ApprovalTemplateController.getTemplate);
+router.post("/templates", ApprovalTemplateController.createTemplate);
+router.put("/templates/:id", ApprovalTemplateController.updateTemplate);
+router.delete("/templates/:id", ApprovalTemplateController.deleteTemplate);
+
+// ==================== 결재 요청 (Requests) ====================
+router.get("/requests", ApprovalRequestController.getRequests);
+router.get("/requests/:id", ApprovalRequestController.getRequest);
+router.post("/requests", ApprovalRequestController.createRequest);
+router.post("/requests/:id/cancel", ApprovalRequestController.cancelRequest);
+
+// ==================== 결재 라인 처리 (Lines) ====================
+router.get("/my-pending", ApprovalLineController.getMyPendingLines);
+router.post("/lines/:lineId/process", ApprovalLineController.processApproval);
+
+export default router;

backend-node/src/routes/authRoutes.ts

@@ -2,7 +2,6 @@
 // Phase 2-1B: 핵심 인증 API 구현
 
 import { Router } from "express";
-import { checkAuthStatus } from "../middleware/authMiddleware";
 import { AuthController } from "../controllers/authController";
 
 const router = Router();
@@ -12,7 +11,7 @@ const router = Router();
  * 인증 상태 확인 API
  * 기존 Java ApiLoginController.checkAuthStatus() 포팅
  */
-router.get("/status", checkAuthStatus);
+router.get("/status", AuthController.checkAuthStatus);
 
 /**
  * POST /api/auth/login

backend-node/src/services/menuCopyService.ts

@@ -56,6 +56,8 @@ interface Menu {
   lang_key_desc: string | null;
   screen_code: string | null;
   menu_code: string | null;
+  menu_icon: string | null;
+  screen_group_id: number | null;
 }
 
 /**
@@ -371,7 +373,8 @@ export class MenuCopyService {
   private async collectScreens(
     menuObjids: number[],
     sourceCompanyCode: string,
-    client: PoolClient
+    client: PoolClient,
+    menus?: Menu[]
   ): Promise<Set<number>> {
     logger.info(
       `📄 화면 수집 시작: ${menuObjids.length}개 메뉴, company=${sourceCompanyCode}`
@@ -392,9 +395,25 @@ export class MenuCopyService {
       screenIds.add(assignment.screen_id);
     }
 
-    logger.info(`📌 직접 할당 화면: ${screenIds.size}개`);
+    // 1.5) menu_url에서 참조되는 화면 수집 (/screens/{screenId} 패턴)
+    if (menus) {
+      const screenIdPattern = /\/screens\/(\d+)/;
+      for (const menu of menus) {
+        if (menu.menu_url) {
+          const match = menu.menu_url.match(screenIdPattern);
+          if (match) {
+            const urlScreenId = parseInt(match[1], 10);
+            if (!isNaN(urlScreenId) && urlScreenId > 0) {
+              screenIds.add(urlScreenId);
+            }
+          }
+        }
+      }
+    }
 
-    // 2) 화면 내부에서 참조되는 화면 (재귀)
+    logger.info(`📌 직접 할당 + menu_url 화면: ${screenIds.size}개`);
+
+    // 2) 화면 내부에서 참조되는 화면 (재귀) - V1 + V2 레이아웃 모두 탐색
     const queue = Array.from(screenIds);
 
     while (queue.length > 0) {
@@ -403,17 +422,29 @@ export class MenuCopyService {
       if (visited.has(screenId)) continue;
       visited.add(screenId);
 
-      // 화면 레이아웃 조회
+      const referencedScreens: number[] = [];
+
+      // V1 레이아웃에서 참조 화면 추출
       const layoutsResult = await client.query<ScreenLayout>(
         `SELECT * FROM screen_layouts WHERE screen_id = $1`,
         [screenId]
       );
-
+      referencedScreens.push(
-      // 참조 화면 추출
+        ...this.extractReferencedScreens(layoutsResult.rows)
-      const referencedScreens = this.extractReferencedScreens(
-        layoutsResult.rows
       );
 
+      // V2 레이아웃에서 참조 화면 추출
+      const layoutsV2Result = await client.query<{ layout_data: any }>(
+        `SELECT layout_data FROM screen_layouts_v2
+         WHERE screen_id = $1 AND company_code = $2`,
+        [screenId, sourceCompanyCode]
+      );
+      for (const row of layoutsV2Result.rows) {
+        if (row.layout_data) {
+          this.extractScreenIdsFromObject(row.layout_data, referencedScreens);
+        }
+      }
+
       if (referencedScreens.length > 0) {
         logger.info(
           `    📎 화면 ${screenId}에서 참조 화면 발견: ${referencedScreens.join(", ")}`
@@ -895,6 +926,8 @@ export class MenuCopyService {
     screenNameConfig?: {
       removeText?: string;
       addPrefix?: string;
+      replaceFrom?: string;
+      replaceTo?: string;
     },
     additionalCopyOptions?: AdditionalCopyOptions
   ): Promise<MenuCopyResult> {
@@ -937,7 +970,8 @@ export class MenuCopyService {
       const screenIds = await this.collectScreens(
         menus.map((m) => m.objid),
         sourceCompanyCode,
-        client
+        client,
+        menus
       );
 
       const flowIds = await this.collectFlows(screenIds, client);
@@ -1093,6 +1127,16 @@ export class MenuCopyService {
       logger.info("\n🔄 [6.5단계] 메뉴 URL 화면 ID 재매핑");
       await this.updateMenuUrls(menuIdMap, screenIdMap, client);
 
+      // === 6.7단계: screen_group_screens 복제 ===
+      logger.info("\n🏷️ [6.7단계] screen_group_screens 복제");
+      await this.copyScreenGroupScreens(
+        screenIds,
+        screenIdMap,
+        sourceCompanyCode,
+        targetCompanyCode,
+        client
+      );
+
       // === 7단계: 테이블 타입 설정 복사 ===
       if (additionalCopyOptions?.copyTableTypeColumns) {
         logger.info("\n📦 [7단계] 테이블 타입 설정 복사");
@@ -1417,6 +1461,8 @@ export class MenuCopyService {
     screenNameConfig?: {
       removeText?: string;
       addPrefix?: string;
+      replaceFrom?: string;
+      replaceTo?: string;
     },
     numberingRuleIdMap?: Map<string, string>,
     menuIdMap?: Map<number, number>
@@ -1516,6 +1562,13 @@ export class MenuCopyService {
         // 3) 화면명 변환 적용
         let transformedScreenName = screenDef.screen_name;
         if (screenNameConfig) {
+          if (screenNameConfig.replaceFrom?.trim()) {
+            transformedScreenName = transformedScreenName.replace(
+              new RegExp(screenNameConfig.replaceFrom.trim(), "g"),
+              screenNameConfig.replaceTo?.trim() || ""
+            );
+            transformedScreenName = transformedScreenName.trim();
+          }
           if (screenNameConfig.removeText?.trim()) {
             transformedScreenName = transformedScreenName.replace(
               new RegExp(screenNameConfig.removeText.trim(), "g"),
@@ -1533,20 +1586,21 @@ export class MenuCopyService {
           // === 기존 복사본이 있는 경우: 업데이트 ===
           const existingScreenId = existingCopy.screen_id;
 
-          // 원본 V2 레이아웃 조회
+          // 원본 V2 레이아웃 조회 (모든 레이어)
           const sourceLayoutV2Result = await client.query<{ layout_data: any }>(
-            `SELECT layout_data FROM screen_layouts_v2 WHERE screen_id = $1`,
+            `SELECT layout_data FROM screen_layouts_v2 WHERE screen_id = $1 ORDER BY layer_id`,
             [originalScreenId]
           );
 
-          // 대상 V2 레이아웃 조회
+          // 대상 V2 레이아웃 조회 (모든 레이어)
           const targetLayoutV2Result = await client.query<{ layout_data: any }>(
-            `SELECT layout_data FROM screen_layouts_v2 WHERE screen_id = $1`,
+            `SELECT layout_data FROM screen_layouts_v2 WHERE screen_id = $1 ORDER BY layer_id`,
             [existingScreenId]
           );
 
-          // 변경 여부 확인 (V2 레이아웃 비교)
+          // 변경 여부 확인: 레이어 수가 다르면 무조건 변경됨
-          const hasChanges = this.hasLayoutChangesV2(
+          const layerCountDiffers = sourceLayoutV2Result.rows.length !== targetLayoutV2Result.rows.length;
+          const hasChanges = layerCountDiffers || this.hasLayoutChangesV2(
             sourceLayoutV2Result.rows[0]?.layout_data,
             targetLayoutV2Result.rows[0]?.layout_data
           );
@@ -1650,7 +1704,7 @@ export class MenuCopyService {
       }
     }
 
-    // === 2단계: screen_layouts_v2 처리 (이제 screenIdMap이 완성됨) ===
+    // === 2단계: screen_conditional_zones + screen_layouts_v2 처리 (멀티 레이어 지원) ===
     logger.info(
       `\n📐 V2 레이아웃 처리 시작 (screenIdMap 완성: ${screenIdMap.size}개)`
     );
@@ -1662,23 +1716,90 @@ export class MenuCopyService {
       isUpdate,
     } of screenDefsToProcess) {
       try {
-        // 원본 V2 레이아웃 조회
+        const sourceCompanyCode = screenDef.company_code;
-        const layoutV2Result = await client.query<{ layout_data: any }>(
+
-          `SELECT layout_data FROM screen_layouts_v2 WHERE screen_id = $1`,
+        // 원본 V2 레이아웃 전체 조회 (모든 레이어)
+        const layoutV2Result = await client.query<{
+          layout_data: any;
+          layer_id: number;
+          layer_name: string;
+          condition_config: any;
+        }>(
+          `SELECT layout_data, layer_id, layer_name, condition_config
+           FROM screen_layouts_v2
+           WHERE screen_id = $1 AND company_code = $2
+           ORDER BY layer_id`,
+          [originalScreenId, sourceCompanyCode]
+        );
+
+        if (layoutV2Result.rows.length === 0) {
+          logger.info(`    ↳ V2 레이아웃 없음 (스킵): screen_id=${originalScreenId}`);
+          continue;
+        }
+
+        // 모든 레이어에서 컴포넌트를 수집하여 componentIdMap 생성
+        const componentIdMap = new Map<string, string>();
+        const timestamp = Date.now();
+        let compIdx = 0;
+        for (const layer of layoutV2Result.rows) {
+          const components = layer.layout_data?.components || [];
+          for (const comp of components) {
+            if (!componentIdMap.has(comp.id)) {
+              const newId = `comp_${timestamp}_${compIdx++}_${Math.random().toString(36).substr(2, 5)}`;
+              componentIdMap.set(comp.id, newId);
+            }
+          }
+        }
+
+        // screen_conditional_zones 복제 + zoneIdMap 생성
+        const zoneIdMap = new Map<number, number>();
+        const zonesResult = await client.query(
+          `SELECT * FROM screen_conditional_zones WHERE screen_id = $1`,
           [originalScreenId]
         );
 
-        const layoutData = layoutV2Result.rows[0]?.layout_data;
+        if (isUpdate) {
-        const components = layoutData?.components || [];
+          await client.query(
+            `DELETE FROM screen_conditional_zones WHERE screen_id = $1 AND company_code = $2`,
+            [targetScreenId, targetCompanyCode]
+          );
+        }
 
-        if (layoutData && components.length > 0) {
+        for (const zone of zonesResult.rows) {
-          // component_id 매핑 생성 (원본 → 새 ID)
+          const newTriggerCompId = componentIdMap.get(zone.trigger_component_id) || zone.trigger_component_id;
-          const componentIdMap = new Map<string, string>();
+          const newZone = await client.query<{ zone_id: number }>(
-          const timestamp = Date.now();
+            `INSERT INTO screen_conditional_zones
-          components.forEach((comp: any, idx: number) => {
+             (screen_id, company_code, zone_name, x, y, width, height,
-            const newComponentId = `comp_${timestamp}_${idx}_${Math.random().toString(36).substr(2, 5)}`;
+              trigger_component_id, trigger_operator)
-            componentIdMap.set(comp.id, newComponentId);
+             VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
-          });
+             RETURNING zone_id`,
+            [targetScreenId, targetCompanyCode, zone.zone_name,
+             zone.x, zone.y, zone.width, zone.height,
+             newTriggerCompId, zone.trigger_operator]
+          );
+          zoneIdMap.set(zone.zone_id, newZone.rows[0].zone_id);
+        }
+
+        if (zonesResult.rows.length > 0) {
+          logger.info(`    ↳ 조건부 영역 복사: ${zonesResult.rows.length}개 (zoneIdMap: ${zoneIdMap.size}개)`);
+        }
+
+        // 업데이트인 경우 기존 레이아웃 삭제 (레이어 수 변경 대응)
+        if (isUpdate) {
+          await client.query(
+            `DELETE FROM screen_layouts_v2 WHERE screen_id = $1 AND company_code = $2`,
+            [targetScreenId, targetCompanyCode]
+          );
+        }
+
+        // 각 레이어별 처리
+        let totalComponents = 0;
+        for (const layer of layoutV2Result.rows) {
+          const layoutData = layer.layout_data;
+          const components = layoutData?.components || [];
+
+          if (!layoutData || components.length === 0) continue;
+          totalComponents += components.length;
 
           // V2 레이아웃 데이터 복사 및 참조 업데이트
           const updatedLayoutData = this.updateReferencesInLayoutDataV2(
@@ -1690,20 +1811,34 @@ export class MenuCopyService {
             menuIdMap
           );
 
-          // V2 레이아웃 저장 (UPSERT)
+          // condition_config의 zone_id 재매핑
-          await client.query(
+          let updatedConditionConfig = layer.condition_config ? { ...layer.condition_config } : null;
-            `INSERT INTO screen_layouts_v2 (screen_id, company_code, layout_data, created_at, updated_at)
+          if (updatedConditionConfig?.zone_id) {
-             VALUES ($1, $2, $3, NOW(), NOW())
+            const newZoneId = zoneIdMap.get(updatedConditionConfig.zone_id);
-             ON CONFLICT (screen_id, company_code) 
+            if (newZoneId) {
-             DO UPDATE SET layout_data = $3, updated_at = NOW()`,
+              updatedConditionConfig.zone_id = newZoneId;
-            [targetScreenId, targetCompanyCode, JSON.stringify(updatedLayoutData)]
+            }
-          );
+          }
 
-          const action = isUpdate ? "업데이트" : "복사";
+          // V2 레이아웃 저장 (레이어별 INSERT)
-          logger.info(`    ↳ V2 레이아웃 ${action}: ${components.length}개 컴포넌트`);
+          await client.query(
-        } else {
+            `INSERT INTO screen_layouts_v2 (screen_id, company_code, layer_id, layer_name, layout_data, condition_config, created_at, updated_at)
-          logger.info(`    ↳ V2 레이아웃 없음 (스킵): screen_id=${originalScreenId}`);
+             VALUES ($1, $2, $3, $4, $5, $6, NOW(), NOW())
+             ON CONFLICT (screen_id, company_code, layer_id)
+             DO UPDATE SET layout_data = $5, layer_name = $4, condition_config = $6, updated_at = NOW()`,
+            [
+              targetScreenId,
+              targetCompanyCode,
+              layer.layer_id,
+              layer.layer_name,
+              JSON.stringify(updatedLayoutData),
+              updatedConditionConfig ? JSON.stringify(updatedConditionConfig) : null,
+            ]
+          );
         }
+
+        const action = isUpdate ? "업데이트" : "복사";
+        logger.info(`    ↳ V2 레이아웃 ${action}: ${layoutV2Result.rows.length}개 레이어, ${totalComponents}개 컴포넌트`);
       } catch (error: any) {
         logger.error(
           `❌ V2 레이아웃 처리 실패: screen_id=${originalScreenId}`,
@@ -1983,6 +2118,26 @@ export class MenuCopyService {
 
     logger.info(`📂 메뉴 복사 중: ${menus.length}개`);
 
+    // screen_group_id 재매핑 맵 생성 (source company → target company)
+    const screenGroupIdMap = new Map<number, number>();
+    const sourceGroupIds = [...new Set(menus.map(m => m.screen_group_id).filter(Boolean))] as number[];
+    if (sourceGroupIds.length > 0) {
+      const sourceGroups = await client.query<{ id: number; group_name: string }>(
+        `SELECT id, group_name FROM screen_groups WHERE id = ANY($1)`,
+        [sourceGroupIds]
+      );
+      for (const sg of sourceGroups.rows) {
+        const targetGroup = await client.query<{ id: number }>(
+          `SELECT id FROM screen_groups WHERE group_name = $1 AND company_code = $2 LIMIT 1`,
+          [sg.group_name, targetCompanyCode]
+        );
+        if (targetGroup.rows.length > 0) {
+          screenGroupIdMap.set(sg.id, targetGroup.rows[0].id);
+        }
+      }
+      logger.info(`🏷️ screen_group 매핑: ${screenGroupIdMap.size}/${sourceGroupIds.length}개`);
+    }
+
     // 위상 정렬 (부모 먼저 삽입)
     const sortedMenus = this.topologicalSortMenus(menus);
 
@@ -2106,26 +2261,28 @@ export class MenuCopyService {
             objid, menu_type, parent_obj_id, menu_name_kor, menu_name_eng,
             seq, menu_url, menu_desc, writer, status, system_name,
             company_code, lang_key, lang_key_desc, screen_code, menu_code,
-            source_menu_objid
+            source_menu_objid, menu_icon, screen_group_id
-          ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17)`,
+          ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19)`,
           [
             newObjId,
             menu.menu_type,
-            newParentObjId, // 재매핑
+            newParentObjId,
             menu.menu_name_kor,
             menu.menu_name_eng,
             menu.seq,
             menu.menu_url,
             menu.menu_desc,
             userId,
-            'active', // 복제된 메뉴는 항상 활성화 상태
+            menu.status || 'active',
             menu.system_name,
-            targetCompanyCode, // 새 회사 코드
+            targetCompanyCode,
             menu.lang_key,
             menu.lang_key_desc,
-            menu.screen_code, // 그대로 유지
+            menu.screen_code,
             menu.menu_code,
-            sourceMenuObjid, // 원본 메뉴 ID (최상위만)
+            sourceMenuObjid,
+            menu.menu_icon,
+            menu.screen_group_id ? (screenGroupIdMap.get(menu.screen_group_id) || menu.screen_group_id) : null,
           ]
         );
 
@@ -2246,8 +2403,9 @@ export class MenuCopyService {
   }
 
   /**
-   * 메뉴 URL 업데이트 (화면 ID 재매핑)
+   * 메뉴 URL + screen_code 업데이트 (화면 ID 재매핑)
    * menu_url에 포함된 /screens/{screenId} 형식의 화면 ID를 복제된 화면 ID로 교체
+   * menu_info.screen_code도 복제된 screen_definitions.screen_code로 교체
    */
   private async updateMenuUrls(
     menuIdMap: Map<number, number>,
@@ -2255,56 +2413,197 @@ export class MenuCopyService {
     client: PoolClient
   ): Promise<void> {
     if (menuIdMap.size === 0 || screenIdMap.size === 0) {
-      logger.info("📭 메뉴 URL 업데이트 대상 없음");
+      logger.info("📭 메뉴 URL/screen_code 업데이트 대상 없음");
       return;
     }
 
     const newMenuObjids = Array.from(menuIdMap.values());
     
-    // 복제된 메뉴 중 menu_url이 있는 것 조회
+    // 복제된 메뉴 조회
-    const menusWithUrl = await client.query<{
+    const menusToUpdate = await client.query<{
       objid: number;
-      menu_url: string;
+      menu_url: string | null;
+      screen_code: string | null;
     }>(
-      `SELECT objid, menu_url FROM menu_info 
+      `SELECT objid, menu_url, screen_code FROM menu_info 
-       WHERE objid = ANY($1) AND menu_url IS NOT NULL AND menu_url != ''`,
+       WHERE objid = ANY($1)`,
       [newMenuObjids]
     );
 
-    if (menusWithUrl.rows.length === 0) {
+    if (menusToUpdate.rows.length === 0) {
-      logger.info("📭 menu_url 업데이트 대상 없음");
+      logger.info("📭 메뉴 URL/screen_code 업데이트 대상 없음");
       return;
     }
 
-    let updatedCount = 0;
+    // screenIdMap의 역방향: 원본 screen_id → 새 screen_id의 screen_code 조회
-    const screenIdPattern = /\/screens\/(\d+)/;
+    const newScreenIds = Array.from(screenIdMap.values());
-
+    const screenCodeMap = new Map<string, string>();
-    for (const menu of menusWithUrl.rows) {
+    if (newScreenIds.length > 0) {
-      const match = menu.menu_url.match(screenIdPattern);
+      const screenCodesResult = await client.query<{
-      if (!match) continue;
+        screen_id: number;
-
+        screen_code: string;
-      const originalScreenId = parseInt(match[1], 10);
+        source_screen_id: number;
-      const newScreenId = screenIdMap.get(originalScreenId);
+      }>(
-
+        `SELECT sd_new.screen_id, sd_new.screen_code, sd_new.source_screen_id
-      if (newScreenId && newScreenId !== originalScreenId) {
+         FROM screen_definitions sd_new
-        const newMenuUrl = menu.menu_url.replace(
+         WHERE sd_new.screen_id = ANY($1) AND sd_new.screen_code IS NOT NULL`,
-          `/screens/${originalScreenId}`,
+        [newScreenIds]
-          `/screens/${newScreenId}`
+      );
-        );
+      for (const row of screenCodesResult.rows) {
-
+        if (row.source_screen_id) {
-        await client.query(
+          // 원본의 screen_code 조회
-          `UPDATE menu_info SET menu_url = $1 WHERE objid = $2`,
+          const origResult = await client.query<{ screen_code: string }>(
-          [newMenuUrl, menu.objid]
+            `SELECT screen_code FROM screen_definitions WHERE screen_id = $1`,
-        );
+            [row.source_screen_id]
-
+          );
-        logger.info(
+          if (origResult.rows[0]?.screen_code) {
-          `  🔗 메뉴 URL 업데이트: ${menu.menu_url} → ${newMenuUrl}`
+            screenCodeMap.set(origResult.rows[0].screen_code, row.screen_code);
-        );
+          }
-        updatedCount++;
+        }
       }
     }
 
-    logger.info(`✅ 메뉴 URL 업데이트 완료: ${updatedCount}개`);
+    let updatedUrlCount = 0;
+    let updatedCodeCount = 0;
+    const screenIdPattern = /\/screens\/(\d+)/;
+
+    for (const menu of menusToUpdate.rows) {
+      let newMenuUrl = menu.menu_url;
+      let newScreenCode = menu.screen_code;
+      let changed = false;
+
+      // menu_url 재매핑
+      if (menu.menu_url) {
+        const match = menu.menu_url.match(screenIdPattern);
+        if (match) {
+          const originalScreenId = parseInt(match[1], 10);
+          const newScreenId = screenIdMap.get(originalScreenId);
+          if (newScreenId && newScreenId !== originalScreenId) {
+            newMenuUrl = menu.menu_url.replace(
+              `/screens/${originalScreenId}`,
+              `/screens/${newScreenId}`
+            );
+            changed = true;
+            updatedUrlCount++;
+            logger.info(
+              `  🔗 메뉴 URL 업데이트: ${menu.menu_url} → ${newMenuUrl}`
+            );
+          }
+        }
+        // /screen/{screen_code} 형식도 처리
+        const screenCodeUrlMatch = menu.menu_url.match(/\/screen\/(.+)/);
+        if (screenCodeUrlMatch && !menu.menu_url.match(/\/screens\//)) {
+          const origCode = screenCodeUrlMatch[1];
+          const newCode = screenCodeMap.get(origCode);
+          if (newCode && newCode !== origCode) {
+            newMenuUrl = `/screen/${newCode}`;
+            changed = true;
+            updatedUrlCount++;
+            logger.info(
+              `  🔗 메뉴 URL(코드) 업데이트: ${menu.menu_url} → ${newMenuUrl}`
+            );
+          }
+        }
+      }
+
+      // screen_code 재매핑
+      if (menu.screen_code) {
+        const mappedCode = screenCodeMap.get(menu.screen_code);
+        if (mappedCode && mappedCode !== menu.screen_code) {
+          newScreenCode = mappedCode;
+          changed = true;
+          updatedCodeCount++;
+          logger.info(
+            `  🏷️ screen_code 업데이트: ${menu.screen_code} → ${newScreenCode}`
+          );
+        }
+      }
+
+      if (changed) {
+        await client.query(
+          `UPDATE menu_info SET menu_url = $1, screen_code = $2 WHERE objid = $3`,
+          [newMenuUrl, newScreenCode, menu.objid]
+        );
+      }
+    }
+
+    logger.info(`✅ 메뉴 URL 업데이트: ${updatedUrlCount}개, screen_code 업데이트: ${updatedCodeCount}개`);
+  }
+
+  /**
+   * screen_group_screens 복제 (화면-스크린그룹 매핑)
+   */
+  private async copyScreenGroupScreens(
+    screenIds: Set<number>,
+    screenIdMap: Map<number, number>,
+    sourceCompanyCode: string,
+    targetCompanyCode: string,
+    client: PoolClient
+  ): Promise<void> {
+    if (screenIds.size === 0 || screenIdMap.size === 0) {
+      logger.info("📭 screen_group_screens 복제 대상 없음");
+      return;
+    }
+
+    // 기존 COMPANY_10의 screen_group_screens 삭제 (깨진 이전 데이터 정리)
+    await client.query(
+      `DELETE FROM screen_group_screens WHERE company_code = $1`,
+      [targetCompanyCode]
+    );
+
+    // 소스 회사의 screen_group_screens 조회
+    const sourceScreenIds = Array.from(screenIds);
+    const sourceResult = await client.query<{
+      group_id: number;
+      screen_id: number;
+      screen_role: string;
+      display_order: number;
+      is_default: string;
+    }>(
+      `SELECT group_id, screen_id, screen_role, display_order, is_default
+       FROM screen_group_screens
+       WHERE company_code = $1 AND screen_id = ANY($2)`,
+      [sourceCompanyCode, sourceScreenIds]
+    );
+
+    if (sourceResult.rows.length === 0) {
+      logger.info("📭 소스에 screen_group_screens 없음");
+      return;
+    }
+
+    // screen_group ID 매핑 (source group_name → target group_id)
+    const sourceGroupIds = [...new Set(sourceResult.rows.map(r => r.group_id))];
+    const sourceGroups = await client.query<{ id: number; group_name: string }>(
+      `SELECT id, group_name FROM screen_groups WHERE id = ANY($1)`,
+      [sourceGroupIds]
+    );
+    const groupIdMap = new Map<number, number>();
+    for (const sg of sourceGroups.rows) {
+      const targetGroup = await client.query<{ id: number }>(
+        `SELECT id FROM screen_groups WHERE group_name = $1 AND company_code = $2 LIMIT 1`,
+        [sg.group_name, targetCompanyCode]
+      );
+      if (targetGroup.rows.length > 0) {
+        groupIdMap.set(sg.id, targetGroup.rows[0].id);
+      }
+    }
+
+    let insertedCount = 0;
+    for (const row of sourceResult.rows) {
+      const newGroupId = groupIdMap.get(row.group_id);
+      const newScreenId = screenIdMap.get(row.screen_id);
+      if (!newGroupId || !newScreenId) continue;
+
+      await client.query(
+        `INSERT INTO screen_group_screens (group_id, screen_id, screen_role, display_order, is_default, company_code, writer)
+         VALUES ($1, $2, $3, $4, $5, $6, 'system')
+         ON CONFLICT DO NOTHING`,
+        [newGroupId, newScreenId, row.screen_role, row.display_order, row.is_default, targetCompanyCode]
+      );
+      insertedCount++;
+    }
+
+    logger.info(`✅ screen_group_screens 복제: ${insertedCount}개`);
   }
 
   /**

backend-node/src/services/menuScreenSyncService.ts

@@ -124,7 +124,10 @@ export async function syncScreenGroupsToMenu(
     // 모든 메뉴의 objid 집합 (삭제 확인용)
     const existingMenuObjids = new Set(existingMenusResult.rows.map((m: any) => Number(m.objid)));
 
-    // 3. 사용자 메뉴의 루트 찾기 (parent_obj_id = 0인 사용자 메뉴)
+    // 3. objid 충돌 방지: 순차 카운터 사용
+    let nextObjid = Date.now();
+
+    // 4. 사용자 메뉴의 루트 찾기 (parent_obj_id = 0인 사용자 메뉴)
     // 없으면 생성
     let userMenuRootObjid: number | null = null;
     const rootMenuQuery = `
@@ -138,19 +141,18 @@ export async function syncScreenGroupsToMenu(
     if (rootMenuResult.rows.length > 0) {
       userMenuRootObjid = Number(rootMenuResult.rows[0].objid);
     } else {
-      // 루트 메뉴가 없으면 생성
+      const rootObjid = nextObjid++;
-      const newObjid = Date.now();
       const createRootQuery = `
         INSERT INTO menu_info (objid, parent_obj_id, menu_name_kor, menu_name_eng, seq, menu_type, company_code, writer, regdate, status)
         VALUES ($1, 0, '사용자', 'User', 1, 1, $2, $3, NOW(), 'active')
         RETURNING objid
       `;
-      const createRootResult = await client.query(createRootQuery, [newObjid, companyCode, userId]);
+      const createRootResult = await client.query(createRootQuery, [rootObjid, companyCode, userId]);
       userMenuRootObjid = Number(createRootResult.rows[0].objid);
       logger.info("사용자 메뉴 루트 생성", { companyCode, objid: userMenuRootObjid });
     }
 
-    // 4. screen_groups ID → menu_objid 매핑 (순차 처리를 위해)
+    // 5. screen_groups ID → menu_objid 매핑 (순차 처리를 위해)
     const groupToMenuMap: Map<number, number> = new Map();
 
     // screen_groups의 부모 이름 조회를 위한 매핑
@@ -280,7 +282,7 @@ export async function syncScreenGroupsToMenu(
 
       } else {
         // 새 메뉴 생성
-        const newObjid = Date.now() + groupId; // 고유 ID 보장
+        const newObjid = nextObjid++;
 
         // 부모 메뉴 objid 결정
         // 우선순위: groupToMenuMap > parent_menu_objid (존재 확인 필수)
@@ -334,8 +336,8 @@ export async function syncScreenGroupsToMenu(
           INSERT INTO menu_info (
             objid, parent_obj_id, menu_name_kor, menu_name_eng, 
             seq, menu_type, company_code, writer, regdate, status, screen_group_id, menu_desc,
-            menu_url, screen_code
+            menu_url, screen_code, menu_icon
-          ) VALUES ($1, $2, $3, $4, $5, 1, $6, $7, NOW(), 'active', $8, $9, $10, $11)
+          ) VALUES ($1, $2, $3, $4, $5, 1, $6, $7, NOW(), 'active', $8, $9, $10, $11, $12)
           RETURNING objid
         `;
         await client.query(insertMenuQuery, [
@@ -350,6 +352,7 @@ export async function syncScreenGroupsToMenu(
           group.description || null,
           menuUrl,
           screenCode,
+          group.icon || null,
         ]);
 
         // screen_groups에 menu_objid 업데이트

backend-node/src/services/screenManagementService.ts

@@ -3482,8 +3482,74 @@ export class ScreenManagementService {
       }
 
       console.log(
-        `✅ screenId/modalScreenId/targetScreenId 참조 업데이트 완료: ${result.updated}개 레이아웃`,
+        `✅ V1 screenId/modalScreenId/targetScreenId 참조 업데이트 완료: ${result.updated}개 레이아웃`,
       );
+
+      // V2 레이아웃(screen_layouts_v2)도 동일하게 처리
+      const v2LayoutsResult = await client.query(
+        `SELECT screen_id, layer_id, company_code, layout_data
+         FROM screen_layouts_v2
+         WHERE screen_id IN (${placeholders})
+         AND layout_data::text ~ '"(screenId|targetScreenId|modalScreenId|leftScreenId|rightScreenId|addModalScreenId|editModalScreenId)"'`,
+        targetScreenIds,
+      );
+
+      console.log(
+        `🔍 V2 참조 업데이트 대상 레이아웃: ${v2LayoutsResult.rows.length}개`,
+      );
+
+      let v2Updated = 0;
+      for (const v2Layout of v2LayoutsResult.rows) {
+        let layoutData = v2Layout.layout_data;
+        if (!layoutData) continue;
+
+        let v2HasChanges = false;
+
+        const updateV2References = (obj: any): void => {
+          if (!obj || typeof obj !== "object") return;
+          if (Array.isArray(obj)) {
+            for (const item of obj) updateV2References(item);
+            return;
+          }
+          for (const key of Object.keys(obj)) {
+            const value = obj[key];
+            if (
+              (key === "screenId" || key === "targetScreenId" || key === "modalScreenId" ||
+               key === "leftScreenId" || key === "rightScreenId" ||
+               key === "addModalScreenId" || key === "editModalScreenId")
+            ) {
+              const numVal = typeof value === "number" ? value : parseInt(value);
+              if (!isNaN(numVal) && numVal > 0) {
+                const newId = screenMap.get(numVal);
+                if (newId) {
+                  obj[key] = typeof value === "number" ? newId : String(newId);
+                  v2HasChanges = true;
+                  console.log(`🔗 V2 ${key} 매핑: ${numVal} → ${newId}`);
+                }
+              }
+            }
+            if (typeof value === "object" && value !== null) {
+              updateV2References(value);
+            }
+          }
+        };
+
+        updateV2References(layoutData);
+
+        if (v2HasChanges) {
+          await client.query(
+            `UPDATE screen_layouts_v2 SET layout_data = $1, updated_at = NOW()
+             WHERE screen_id = $2 AND layer_id = $3 AND company_code = $4`,
+            [JSON.stringify(layoutData), v2Layout.screen_id, v2Layout.layer_id, v2Layout.company_code],
+          );
+          v2Updated++;
+        }
+      }
+
+      console.log(
+        `✅ V2 참조 업데이트 완료: ${v2Updated}개 레이아웃`,
+      );
+      result.updated += v2Updated;
     });
 
     return result;
@@ -4210,39 +4276,65 @@ export class ScreenManagementService {
 
       const newScreen = newScreenResult.rows[0];
 
-      // 4. 원본 화면의 V2 레이아웃 조회
+      // 4. 원본 화면의 V2 레이아웃 전체 조회 (모든 레이어)
-      let sourceLayoutV2Result = await client.query<{ layout_data: any }>(
+      let sourceLayoutV2Result = await client.query<{
-        `SELECT layout_data FROM screen_layouts_v2
+        layout_data: any;
-         WHERE screen_id = $1 AND company_code = $2`,
+        layer_id: number;
+        layer_name: string;
+        condition_config: any;
+      }>(
+        `SELECT layout_data, layer_id, layer_name, condition_config
+         FROM screen_layouts_v2
+         WHERE screen_id = $1 AND company_code = $2
+         ORDER BY layer_id`,
         [sourceScreenId, sourceScreen.company_code],
       );
 
       // 없으면 공통(*) 레이아웃 조회
-      let layoutData = sourceLayoutV2Result.rows[0]?.layout_data;
+      if (sourceLayoutV2Result.rows.length === 0 && sourceScreen.company_code !== "*") {
-      if (!layoutData && sourceScreen.company_code !== "*") {
+        sourceLayoutV2Result = await client.query<{
-        const fallbackResult = await client.query<{ layout_data: any }>(
+          layout_data: any;
-          `SELECT layout_data FROM screen_layouts_v2
+          layer_id: number;
-           WHERE screen_id = $1 AND company_code = '*'`,
+          layer_name: string;
+          condition_config: any;
+        }>(
+          `SELECT layout_data, layer_id, layer_name, condition_config
+           FROM screen_layouts_v2
+           WHERE screen_id = $1 AND company_code = '*'
+           ORDER BY layer_id`,
           [sourceScreenId],
         );
-        layoutData = fallbackResult.rows[0]?.layout_data;
       }
 
-      const components = layoutData?.components || [];
+      // 모든 레이어에서 컴포넌트를 수집하여 componentIdMap 생성
+      const componentIdMap = new Map<string, string>();
+      for (const layer of sourceLayoutV2Result.rows) {
+        const components = layer.layout_data?.components || [];
+        for (const comp of components) {
+          if (!componentIdMap.has(comp.id)) {
+            componentIdMap.set(comp.id, generateId());
+          }
+        }
+      }
+
+      const hasComponents = componentIdMap.size > 0;
+      // 첫 번째 레이어의 layoutData (flowId/ruleId 수집용 - 모든 레이어에서 수집)
+      const allLayoutDatas = sourceLayoutV2Result.rows.map((r: any) => r.layout_data).filter(Boolean);
 
       // 5. 노드 플로우 복사 (회사가 다른 경우)
       let flowIdMap = new Map<number, number>();
       if (
-        components.length > 0 &&
+        hasComponents &&
         sourceScreen.company_code !== targetCompanyCode
       ) {
-        // V2 레이아웃에서 flowId 수집
+        const flowIds = new Set<number>();
-        const flowIds = this.collectFlowIdsFromLayoutData(layoutData);
+        for (const ld of allLayoutDatas) {
+          const ids = this.collectFlowIdsFromLayoutData(ld);
+          ids.forEach((id: number) => flowIds.add(id));
+        }
 
         if (flowIds.size > 0) {
           console.log(`🔍 화면 복사 - flowId 수집: ${flowIds.size}개`);
-
-          // 노드 플로우 복사 및 매핑 생성
           flowIdMap = await this.copyNodeFlowsForScreen(
             flowIds,
             sourceScreen.company_code,
@@ -4255,16 +4347,17 @@ export class ScreenManagementService {
       // 5.1. 채번 규칙 복사 (회사가 다른 경우)
       let ruleIdMap = new Map<string, string>();
       if (
-        components.length > 0 &&
+        hasComponents &&
         sourceScreen.company_code !== targetCompanyCode
       ) {
-        // V2 레이아웃에서 채번 규칙 ID 수집
+        const ruleIds = new Set<string>();
-        const ruleIds = this.collectNumberingRuleIdsFromLayoutData(layoutData);
+        for (const ld of allLayoutDatas) {
+          const ids = this.collectNumberingRuleIdsFromLayoutData(ld);
+          ids.forEach((id: string) => ruleIds.add(id));
+        }
 
         if (ruleIds.size > 0) {
           console.log(`🔍 화면 복사 - 채번 규칙 ID 수집: ${ruleIds.size}개`);
-
-          // 채번 규칙 복사 및 매핑 생성
           ruleIdMap = await this.copyNumberingRulesForScreen(
             ruleIds,
             sourceScreen.company_code,
@@ -4274,39 +4367,89 @@ export class ScreenManagementService {
         }
       }
 
-      // 6. V2 레이아웃이 있다면 복사
+      // 5.2. screen_conditional_zones 복제 + zoneIdMap 생성
-      if (layoutData && components.length > 0) {
+      const zoneIdMap = new Map<number, number>();
+      if (hasComponents) {
         try {
-          // componentId 매핑 생성
+          const zonesResult = await client.query(
-          const componentIdMap = new Map<string, string>();
+            `SELECT * FROM screen_conditional_zones WHERE screen_id = $1`,
-          for (const comp of components) {
+            [sourceScreenId]
-            componentIdMap.set(comp.id, generateId());
+          );
+
+          for (const zone of zonesResult.rows) {
+            const newTriggerCompId = componentIdMap.get(zone.trigger_component_id) || zone.trigger_component_id;
+            const newZone = await client.query<{ zone_id: number }>(
+              `INSERT INTO screen_conditional_zones
+               (screen_id, company_code, zone_name, x, y, width, height,
+                trigger_component_id, trigger_operator)
+               VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
+               RETURNING zone_id`,
+              [newScreen.screen_id, targetCompanyCode, zone.zone_name,
+               zone.x, zone.y, zone.width, zone.height,
+               newTriggerCompId, zone.trigger_operator]
+            );
+            zoneIdMap.set(zone.zone_id, newZone.rows[0].zone_id);
           }
 
-          // V2 레이아웃 데이터 복사 및 참조 업데이트
+          if (zonesResult.rows.length > 0) {
-          const updatedLayoutData = this.updateReferencesInLayoutData(
+            console.log(`    ↳ 조건부 영역 복사: ${zonesResult.rows.length}개`);
-            layoutData,
+          }
-            {
+        } catch (error) {
-              componentIdMap,
+          console.error("조건부 영역 복사 중 오류:", error);
-              flowIdMap: flowIdMap.size > 0 ? flowIdMap : undefined,
+        }
-              ruleIdMap: ruleIdMap.size > 0 ? ruleIdMap : undefined,
+      }
-              // screenIdMap은 모든 화면 복제 완료 후 updateTabScreenReferences에서 일괄 처리
-            },
-          );
 
-          // V2 레이아웃 저장 (UPSERT) - layer_id 포함
+      // 6. V2 레이아웃 복사 (모든 레이어 순회)
-          await client.query(
+      if (sourceLayoutV2Result.rows.length > 0 && hasComponents) {
-            `INSERT INTO screen_layouts_v2 (screen_id, company_code, layer_id, layout_data, created_at, updated_at)
+        try {
-             VALUES ($1, $2, 1, $3, NOW(), NOW())
+          let totalComponents = 0;
-             ON CONFLICT (screen_id, company_code, layer_id) 
-             DO UPDATE SET layout_data = $3, updated_at = NOW()`,
-            [newScreen.screen_id, targetCompanyCode, JSON.stringify(updatedLayoutData)],
-          );
 
-          
+          for (const layer of sourceLayoutV2Result.rows) {
+            const layoutData = layer.layout_data;
+            const components = layoutData?.components || [];
+
+            if (!layoutData || components.length === 0) continue;
+            totalComponents += components.length;
+
+            // V2 레이아웃 데이터 복사 및 참조 업데이트
+            const updatedLayoutData = this.updateReferencesInLayoutData(
+              layoutData,
+              {
+                componentIdMap,
+                flowIdMap: flowIdMap.size > 0 ? flowIdMap : undefined,
+                ruleIdMap: ruleIdMap.size > 0 ? ruleIdMap : undefined,
+              },
+            );
+
+            // condition_config의 zone_id 재매핑
+            let updatedConditionConfig = layer.condition_config ? { ...layer.condition_config } : null;
+            if (updatedConditionConfig?.zone_id) {
+              const newZoneId = zoneIdMap.get(updatedConditionConfig.zone_id);
+              if (newZoneId) {
+                updatedConditionConfig.zone_id = newZoneId;
+              }
+            }
+
+            // V2 레이아웃 저장 (레이어별 INSERT)
+            await client.query(
+              `INSERT INTO screen_layouts_v2 (screen_id, company_code, layer_id, layer_name, layout_data, condition_config, created_at, updated_at)
+               VALUES ($1, $2, $3, $4, $5, $6, NOW(), NOW())
+               ON CONFLICT (screen_id, company_code, layer_id)
+               DO UPDATE SET layout_data = $5, layer_name = $4, condition_config = $6, updated_at = NOW()`,
+              [
+                newScreen.screen_id,
+                targetCompanyCode,
+                layer.layer_id,
+                layer.layer_name,
+                JSON.stringify(updatedLayoutData),
+                updatedConditionConfig ? JSON.stringify(updatedConditionConfig) : null,
+              ],
+            );
+          }
+
+          console.log(`    ↳ V2 레이아웃 복사: ${sourceLayoutV2Result.rows.length}개 레이어, ${totalComponents}개 컴포넌트`);
         } catch (error) {
           console.error("V2 레이아웃 복사 중 오류:", error);
-          // 레이아웃 복사 실패해도 화면 생성은 유지
         }
       }
 
@@ -4533,9 +4676,60 @@ export class ScreenManagementService {
     }
 
     console.log(
-      `✅ 총 ${updateCount}개 레이아웃의 연결된 화면 ID 업데이트 완료 (버튼 + 조건부컨테이너)`,
+      `✅ V1: ${updateCount}개 레이아웃 업데이트 완료`,
     );
-    return updateCount;
+
+    // V2 레이아웃(screen_layouts_v2)에서도 targetScreenId 등 재매핑
+    const v2Layouts = await query<any>(
+      `SELECT screen_id, layer_id, company_code, layout_data
+       FROM screen_layouts_v2
+       WHERE screen_id = $1
+       AND layout_data IS NOT NULL`,
+      [screenId],
+    );
+
+    let v2UpdateCount = 0;
+    for (const v2Layout of v2Layouts) {
+      const layoutData = v2Layout.layout_data;
+      if (!layoutData?.components) continue;
+
+      let v2Changed = false;
+      const updateV2Refs = (obj: any): void => {
+        if (!obj || typeof obj !== "object") return;
+        if (Array.isArray(obj)) { for (const item of obj) updateV2Refs(item); return; }
+        for (const key of Object.keys(obj)) {
+          const value = obj[key];
+          if (
+            (key === "targetScreenId" || key === "screenId" || key === "modalScreenId" ||
+             key === "leftScreenId" || key === "rightScreenId" ||
+             key === "addModalScreenId" || key === "editModalScreenId")
+          ) {
+            const numVal = typeof value === "number" ? value : parseInt(value);
+            if (!isNaN(numVal) && screenIdMapping.has(numVal)) {
+              obj[key] = typeof value === "number" ? screenIdMapping.get(numVal)! : screenIdMapping.get(numVal)!.toString();
+              v2Changed = true;
+            }
+          }
+          if (typeof value === "object" && value !== null) updateV2Refs(value);
+        }
+      };
+      updateV2Refs(layoutData);
+
+      if (v2Changed) {
+        await query(
+          `UPDATE screen_layouts_v2 SET layout_data = $1, updated_at = NOW()
+           WHERE screen_id = $2 AND layer_id = $3 AND company_code = $4`,
+          [JSON.stringify(layoutData), v2Layout.screen_id, v2Layout.layer_id, v2Layout.company_code],
+        );
+        v2UpdateCount++;
+      }
+    }
+
+    const total = updateCount + v2UpdateCount;
+    console.log(
+      `✅ 총 ${total}개 레이아웃 업데이트 완료 (V1: ${updateCount}, V2: ${v2UpdateCount})`,
+    );
+    return total;
   }
 
   /**

backend/gradle/wrapper/gradle-wrapper.sync-conflict-20260205-175409-RZBZWHP.properties

@@ -0,0 +1,6 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip
+networkTimeout=10000
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists 

docker/dev/docker-compose.backend.mac.yml

@@ -12,7 +12,7 @@ services:
     environment:
       - NODE_ENV=development
       - PORT=8080
-      - DATABASE_URL=postgresql://postgres:ph0909!!@39.117.244.52:11132/plm
+      - DATABASE_URL=postgresql://postgres:vexplor0909!!@211.115.91.141:11134/vexplor
       - JWT_SECRET=ilshin-plm-super-secret-jwt-key-2024
       - JWT_EXPIRES_IN=24h
       - CORS_ORIGIN=http://localhost:9771

docs/결재시스템_구현_현황.md

@@ -0,0 +1,342 @@
+# 결재 시스템 구현 현황
+
+## 1. 개요
+
+어떤 화면/테이블에서든 결재 버튼을 추가하여 다단계(순차) 및 다중(병렬) 결재를 처리할 수 있는 범용 결재 시스템.
+
+### 핵심 특징
+- **범용성**: 특정 테이블에 종속되지 않고 어떤 화면에서든 사용 가능
+- **멀티테넌시**: 모든 데이터가 `company_code`로 격리
+- **사용자 주도**: 결재 요청 시 결재 모드/결재자를 직접 설정 (관리자 사전 세팅 불필요)
+- **컴포넌트 연동**: 버튼 액션 타입 + 결재 단계 시각화 컴포넌트 제공
+
+---
+
+## 2. 아키텍처
+
+```
+[버튼 클릭 (approval 액션)]
+    ↓
+[ButtonActionExecutor] → CustomEvent('open-approval-modal') 발송
+    ↓
+[ApprovalGlobalListener] → 이벤트 수신
+    ↓
+[ApprovalRequestModal] → 결재 모드/결재자 선택 UI
+    ↓
+[POST /api/approval/requests] → 결재 요청 생성
+    ↓
+[approval_requests + approval_lines 테이블에 저장]
+    ↓
+[결재함 / 결재 단계 컴포넌트에서 조회 및 처리]
+```
+
+---
+
+## 3. 데이터베이스
+
+### 마이그레이션 파일
+- `db/migrations/100_create_approval_system.sql`
+
+### 테이블 구조
+
+| 테이블 | 용도 | 주요 컬럼 |
+|--------|------|-----------|
+| `approval_definitions` | 결재 유형 정의 (구매결재, 문서결재 등) | definition_id, definition_name, max_steps, company_code |
+| `approval_line_templates` | 결재선 템플릿 (미리 저장된 결재선) | template_id, template_name, definition_id, company_code |
+| `approval_line_template_steps` | 템플릿별 결재 단계 | step_id, template_id, step_order, approver_user_id, company_code |
+| `approval_requests` | 실제 결재 요청 건 | request_id, title, target_table, target_record_id, status, requester_id, company_code |
+| `approval_lines` | 결재 건별 각 단계 결재자 | line_id, request_id, step_order, approver_id, status, comment, company_code |
+
+### 결재 상태 흐름
+
+```
+[requested] → [in_progress] → [approved] (모든 단계 승인)
+                            → [rejected] (어느 단계에서든 반려)
+             → [cancelled]   (요청자가 취소)
+```
+
+#### approval_requests.status
+| 상태 | 의미 |
+|------|------|
+| `requested` | 결재 요청됨 (1단계 결재자 처리 대기) |
+| `in_progress` | 결재 진행 중 (2단계 이상 진행) |
+| `approved` | 최종 승인 완료 |
+| `rejected` | 반려됨 |
+| `cancelled` | 요청자에 의해 취소 |
+
+#### approval_lines.status
+| 상태 | 의미 |
+|------|------|
+| `waiting` | 아직 차례가 아님 |
+| `pending` | 현재 결재 차례 (처리 대기) |
+| `approved` | 승인 완료 |
+| `rejected` | 반려 |
+| `skipped` | 이전 단계 반려로 스킵됨 |
+
+---
+
+## 4. 백엔드 API
+
+### 파일 위치
+- **컨트롤러**: `backend-node/src/controllers/approvalController.ts`
+- **라우트**: `backend-node/src/routes/approvalRoutes.ts`
+
+### API 엔드포인트
+
+#### 결재 유형 (Definitions)
+| 메서드 | 경로 | 설명 |
+|--------|------|------|
+| GET | `/api/approval/definitions` | 결재 유형 목록 |
+| GET | `/api/approval/definitions/:id` | 결재 유형 상세 |
+| POST | `/api/approval/definitions` | 결재 유형 생성 |
+| PUT | `/api/approval/definitions/:id` | 결재 유형 수정 |
+| DELETE | `/api/approval/definitions/:id` | 결재 유형 삭제 |
+
+#### 결재선 템플릿 (Templates)
+| 메서드 | 경로 | 설명 |
+|--------|------|------|
+| GET | `/api/approval/templates` | 템플릿 목록 |
+| GET | `/api/approval/templates/:id` | 템플릿 상세 (단계 포함) |
+| POST | `/api/approval/templates` | 템플릿 생성 |
+| PUT | `/api/approval/templates/:id` | 템플릿 수정 |
+| DELETE | `/api/approval/templates/:id` | 템플릿 삭제 |
+
+#### 결재 요청 (Requests)
+| 메서드 | 경로 | 설명 |
+|--------|------|------|
+| GET | `/api/approval/requests` | 결재 요청 목록 (필터 가능) |
+| GET | `/api/approval/requests/:id` | 결재 요청 상세 (결재 라인 포함) |
+| POST | `/api/approval/requests` | 결재 요청 생성 |
+| POST | `/api/approval/requests/:id/cancel` | 결재 취소 |
+
+#### 결재 라인 처리 (Lines)
+| 메서드 | 경로 | 설명 |
+|--------|------|------|
+| GET | `/api/approval/my-pending` | 내 미처리 결재 목록 |
+| POST | `/api/approval/lines/:lineId/process` | 승인/반려 처리 |
+
+### 결재 요청 생성 시 입력
+
+```typescript
+interface CreateApprovalRequestInput {
+  title: string;                           // 결재 제목
+  description?: string;                    // 결재 설명
+  target_table: string;                    // 대상 테이블명 (예: sales_order_mng)
+  target_record_id?: string;               // 대상 레코드 ID (선택)
+  approval_mode?: "sequential" | "parallel"; // 결재 모드
+  approvers: {                             // 결재자 목록
+    approver_id: string;
+    approver_name?: string;
+    approver_position?: string;
+    approver_dept?: string;
+  }[];
+}
+```
+
+### 결재 처리 로직
+
+#### 순차 결재 (sequential)
+1. 첫 번째 결재자 `status = 'pending'`, 나머지 `'waiting'`
+2. 1단계 승인 → 2단계 `'pending'`으로 변경
+3. 모든 단계 승인 → `approval_requests.status = 'approved'`
+4. 어느 단계에서 반려 → 이후 단계 `'skipped'`, 요청 `'rejected'`
+
+#### 병렬 결재 (parallel)
+1. 모든 결재자 `status = 'pending'` (동시 처리)
+2. 모든 결재자 승인 → `'approved'`
+3. 한 명이라도 반려 → `'rejected'`
+
+---
+
+## 5. 프론트엔드
+
+### 5.1 결재 요청 모달
+
+**파일**: `frontend/components/approval/ApprovalRequestModal.tsx`
+
+- 결재 모드 선택 (다단 결재 / 다중 결재)
+- 결재자 검색 (사용자 API 검색, 한글/영문/ID 검색 가능)
+- 결재자 추가/삭제, 순서 변경 (순차 결재 시)
+- 대상 테이블/레코드 ID 자동 세팅
+
+### 5.2 결재 글로벌 리스너
+
+**파일**: `frontend/components/approval/ApprovalGlobalListener.tsx`
+
+- `open-approval-modal` CustomEvent를 전역으로 수신
+- 이벤트의 `detail`에서 `targetTable`, `targetRecordId`, `formData` 추출
+- `ApprovalRequestModal` 열기
+
+### 5.3 결재함 페이지
+
+**파일**: `frontend/app/(main)/admin/approvalBox/page.tsx`
+
+- 탭 구성: 보낸 결재 / 받은 결재 / 완료된 결재
+- 결재 상태별 필터링
+- 결재 상세 조회 및 승인/반려 처리
+
+**진입점**: 사용자 프로필 드롭다운 > "결재함"
+
+### 5.4 결재 단계 시각화 컴포넌트 (v2-approval-step)
+
+**파일 위치**: `frontend/lib/registry/components/v2-approval-step/`
+
+| 파일 | 역할 |
+|------|------|
+| `types.ts` | ApprovalStepConfig 타입 정의 |
+| `ApprovalStepComponent.tsx` | 결재 단계 시각화 UI (가로형 스테퍼 / 세로형 타임라인) |
+| `ApprovalStepConfigPanel.tsx` | 설정 패널 (대상 테이블/컬럼 Combobox, 표시 옵션) |
+| `ApprovalStepRenderer.tsx` | 컴포넌트 레지스트리 등록 |
+| `index.ts` | 컴포넌트 정의 (이름, 태그, 기본값 등) |
+
+#### 설정 항목
+| 설정 | 설명 |
+|------|------|
+| 대상 테이블 | 결재를 걸 데이터가 있는 테이블 (Combobox 검색) |
+| 레코드 ID 필드명 | 테이블의 PK 컬럼 (Combobox 검색) |
+| 표시 모드 | 가로형 스테퍼 / 세로형 타임라인 |
+| 부서/직급 표시 | 결재자의 부서/직급 정보 표시 여부 |
+| 결재 코멘트 표시 | 승인/반려 시 입력한 코멘트 표시 여부 |
+| 처리 시각 표시 | 결재 처리 시각 표시 여부 |
+| 콤팩트 모드 | 작게 표시 |
+
+### 5.5 API 클라이언트
+
+**파일**: `frontend/lib/api/approval.ts`
+
+| 함수 | 용도 |
+|------|------|
+| `getApprovalDefinitions()` | 결재 유형 목록 조회 |
+| `getApprovalTemplates()` | 결재선 템플릿 목록 조회 |
+| `getApprovalRequests()` | 결재 요청 목록 조회 (필터 지원) |
+| `getApprovalRequest(id)` | 결재 요청 상세 조회 |
+| `createApprovalRequest(data)` | 결재 요청 생성 |
+| `cancelApprovalRequest(id)` | 결재 취소 |
+| `getMyPendingApprovals()` | 내 미처리 결재 목록 |
+| `processApprovalLine(lineId, data)` | 승인/반려 처리 |
+
+### 5.6 버튼 액션 연동
+
+#### 관련 파일
+| 파일 | 수정 내용 |
+|------|-----------|
+| `frontend/lib/utils/buttonActions.ts` | `ButtonActionType`에 `"approval"` 추가, `handleApproval` 구현 |
+| `frontend/lib/utils/improvedButtonActionExecutor.ts` | `approval` 액션 핸들러 추가 |
+| `frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx` | `silentActions`에 `"approval"` 추가 |
+| `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` | 결재 액션 설정 UI (대상 테이블 자동 세팅) |
+
+#### 동작 흐름
+1. 버튼 설정에서 액션 타입 = `"approval"` 선택
+2. 대상 테이블 자동 설정 (현재 화면 테이블)
+3. 버튼 클릭 시 `CustomEvent('open-approval-modal')` 발송
+4. `ApprovalGlobalListener`가 수신하여 `ApprovalRequestModal` 오픈
+
+---
+
+## 6. 멀티테넌시 적용
+
+| 영역 | 적용 |
+|------|------|
+| DB 테이블 | 모든 테이블에 `company_code NOT NULL` 포함 |
+| 인덱스 | `company_code` 컬럼에 인덱스 생성 |
+| SELECT | `WHERE company_code = $N` 필수 |
+| INSERT | `company_code` 값 포함 필수 |
+| UPDATE/DELETE | `WHERE` 절에 `company_code` 조건 포함 |
+| 최고관리자 | `company_code = '*'` → 모든 데이터 조회 가능 |
+| JOIN | `ON` 절에 `company_code` 매칭 포함 |
+
+---
+
+## 7. 전체 파일 목록
+
+### 데이터베이스
+```
+db/migrations/100_create_approval_system.sql
+```
+
+### 백엔드
+```
+backend-node/src/controllers/approvalController.ts
+backend-node/src/routes/approvalRoutes.ts
+```
+
+### 프론트엔드 - 결재 모달/리스너
+```
+frontend/components/approval/ApprovalRequestModal.tsx
+frontend/components/approval/ApprovalGlobalListener.tsx
+```
+
+### 프론트엔드 - 결재함 페이지
+```
+frontend/app/(main)/admin/approvalBox/page.tsx
+```
+
+### 프론트엔드 - 결재 단계 컴포넌트
+```
+frontend/lib/registry/components/v2-approval-step/types.ts
+frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx
+frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx
+frontend/lib/registry/components/v2-approval-step/ApprovalStepRenderer.tsx
+frontend/lib/registry/components/v2-approval-step/index.ts
+```
+
+### 프론트엔드 - API 클라이언트
+```
+frontend/lib/api/approval.ts
+```
+
+### 프론트엔드 - 버튼 액션 연동 (수정된 파일)
+```
+frontend/lib/utils/buttonActions.ts
+frontend/lib/utils/improvedButtonActionExecutor.ts
+frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
+frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+```
+
+### 프론트엔드 - 레이아웃 (수정된 파일)
+```
+frontend/components/layout/UserDropdown.tsx     (결재함 메뉴 추가)
+frontend/components/layout/AppLayout.tsx        (결재함 메뉴 추가)
+frontend/lib/registry/components/index.ts       (v2-approval-step 렌더러 import)
+```
+
+---
+
+## 8. 사용 방법
+
+### 결재 버튼 추가
+1. 화면 디자이너에서 버튼 컴포넌트 추가
+2. 버튼 설정 > 액션 타입 = `결재` 선택
+3. 대상 테이블이 자동 설정됨 (수동 변경 가능)
+4. 저장
+
+### 결재 요청하기
+1. 데이터 행 선택 (선택적)
+2. 결재 버튼 클릭
+3. 결재 모달에서:
+   - 결재 제목 입력
+   - 결재 모드 선택 (다단 결재 / 다중 결재)
+   - 결재자 검색하여 추가
+4. 결재 요청 클릭
+
+### 결재 처리하기
+1. 프로필 드롭다운 > 결재함 클릭
+2. 받은 결재 탭에서 대기 중인 결재 확인
+3. 상세 보기 > 승인 또는 반려
+
+### 결재 단계 표시하기
+1. 화면 디자이너에서 `결재 단계` 컴포넌트 추가
+2. 설정에서 대상 테이블 / 레코드 ID 필드 선택
+3. 표시 모드 (가로/세로) 및 옵션 설정
+4. 저장 → 행 선택 시 해당 레코드의 결재 단계가 표시됨
+
+---
+
+## 9. 향후 개선 사항
+
+- [ ] 결재 알림 (실시간 알림, 이메일 연동)
+- [ ] 제어관리 시스템 연동 (결재 완료 후 자동 액션)
+- [ ] 결재 위임 기능
+- [ ] 결재 이력 조회 / 통계 대시보드
+- [ ] 결재선 즐겨찾기 (자주 쓰는 결재선 저장)
+- [ ] 모바일 결재 처리 최적화

frontend/app/(main)/admin/approvalBox/page.tsx

@@ -0,0 +1,419 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import {
+  Loader2, Send, Inbox, CheckCircle, XCircle, Clock, Eye,
+} from "lucide-react";
+import { ScrollToTop } from "@/components/common/ScrollToTop";
+import {
+  getApprovalRequests,
+  getApprovalRequest,
+  getMyPendingApprovals,
+  processApprovalLine,
+  cancelApprovalRequest,
+  type ApprovalRequest,
+  type ApprovalLine,
+} from "@/lib/api/approval";
+
+const STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  requested: { label: "요청", variant: "outline" },
+  in_progress: { label: "진행중", variant: "default" },
+  approved: { label: "승인", variant: "default" },
+  rejected: { label: "반려", variant: "destructive" },
+  cancelled: { label: "회수", variant: "secondary" },
+  waiting: { label: "대기", variant: "outline" },
+  pending: { label: "결재대기", variant: "default" },
+  skipped: { label: "건너뜀", variant: "secondary" },
+};
+
+function StatusBadge({ status }: { status: string }) {
+  const info = STATUS_MAP[status] || { label: status, variant: "outline" as const };
+  return <Badge variant={info.variant}>{info.label}</Badge>;
+}
+
+function formatDate(dateStr?: string) {
+  if (!dateStr) return "-";
+  return new Date(dateStr).toLocaleDateString("ko-KR", {
+    year: "numeric", month: "2-digit", day: "2-digit",
+    hour: "2-digit", minute: "2-digit",
+  });
+}
+
+// ============================================================
+// 상신함 (내가 올린 결재)
+// ============================================================
+function SentTab() {
+  const [requests, setRequests] = useState<ApprovalRequest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [selectedRequest, setSelectedRequest] = useState<ApprovalRequest | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  const fetchRequests = useCallback(async () => {
+    setLoading(true);
+    const res = await getApprovalRequests({ my_approvals: false });
+    if (res.success && res.data) setRequests(res.data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { fetchRequests(); }, [fetchRequests]);
+
+  const openDetail = async (req: ApprovalRequest) => {
+    setDetailLoading(true);
+    setDetailOpen(true);
+    const res = await getApprovalRequest(req.request_id);
+    if (res.success && res.data) {
+      setSelectedRequest(res.data);
+    } else {
+      setSelectedRequest(req);
+    }
+    setDetailLoading(false);
+  };
+
+  const handleCancel = async () => {
+    if (!selectedRequest) return;
+    const res = await cancelApprovalRequest(selectedRequest.request_id);
+    if (res.success) {
+      toast.success("결재가 회수되었습니다.");
+      setDetailOpen(false);
+      fetchRequests();
+    } else {
+      toast.error(res.error || "회수 실패");
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {loading ? (
+        <div className="flex h-64 items-center justify-center">
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      ) : requests.length === 0 ? (
+        <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+          <Send className="text-muted-foreground mb-2 h-8 w-8" />
+          <p className="text-muted-foreground text-sm">상신한 결재가 없습니다.</p>
+        </div>
+      ) : (
+        <div className="bg-card rounded-lg border shadow-sm">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/50 border-b hover:bg-muted/50">
+                <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
+                <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
+                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">진행</TableHead>
+                <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
+                <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
+                <TableHead className="h-12 w-[60px] text-center text-sm font-semibold">보기</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {requests.map((req) => (
+                <TableRow key={req.request_id} className="border-b transition-colors hover:bg-muted/50">
+                  <TableCell className="h-14 text-sm font-medium">{req.title}</TableCell>
+                  <TableCell className="text-muted-foreground h-14 text-sm">{req.target_table}</TableCell>
+                  <TableCell className="h-14 text-center text-sm">
+                    {req.current_step}/{req.total_steps}
+                  </TableCell>
+                  <TableCell className="h-14 text-center"><StatusBadge status={req.status} /></TableCell>
+                  <TableCell className="text-muted-foreground h-14 text-sm">{formatDate(req.created_at)}</TableCell>
+                  <TableCell className="h-14 text-center">
+                    <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openDetail(req)}>
+                      <Eye className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {/* 상세 모달 */}
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[560px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">결재 상세</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              {selectedRequest?.title}
+            </DialogDescription>
+          </DialogHeader>
+          {detailLoading ? (
+            <div className="flex h-32 items-center justify-center">
+              <Loader2 className="h-5 w-5 animate-spin" />
+            </div>
+          ) : selectedRequest && (
+            <div className="max-h-[50vh] space-y-4 overflow-y-auto">
+              <div className="grid grid-cols-2 gap-3 text-sm">
+                <div>
+                  <span className="text-muted-foreground text-xs">상태</span>
+                  <div className="mt-1"><StatusBadge status={selectedRequest.status} /></div>
+                </div>
+                <div>
+                  <span className="text-muted-foreground text-xs">진행</span>
+                  <p className="mt-1 font-medium">{selectedRequest.current_step}/{selectedRequest.total_steps}단계</p>
+                </div>
+                <div>
+                  <span className="text-muted-foreground text-xs">대상 테이블</span>
+                  <p className="mt-1 font-medium">{selectedRequest.target_table}</p>
+                </div>
+                <div>
+                  <span className="text-muted-foreground text-xs">요청일</span>
+                  <p className="mt-1">{formatDate(selectedRequest.created_at)}</p>
+                </div>
+              </div>
+              {selectedRequest.description && (
+                <div>
+                  <span className="text-muted-foreground text-xs">사유</span>
+                  <p className="mt-1 text-sm">{selectedRequest.description}</p>
+                </div>
+              )}
+              {/* 결재선 */}
+              {selectedRequest.lines && selectedRequest.lines.length > 0 && (
+                <div>
+                  <span className="text-muted-foreground text-xs">결재선</span>
+                  <div className="mt-2 space-y-2">
+                    {selectedRequest.lines
+                      .sort((a, b) => a.step_order - b.step_order)
+                      .map((line) => (
+                        <div key={line.line_id} className="bg-muted/30 flex items-center justify-between rounded-md border p-2">
+                          <div className="flex items-center gap-2">
+                            <Badge variant="outline" className="text-[10px]">{line.step_order}차</Badge>
+                            <span className="text-sm font-medium">{line.approver_name || line.approver_id}</span>
+                            {line.approver_position && (
+                              <span className="text-muted-foreground text-xs">({line.approver_position})</span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <StatusBadge status={line.status} />
+                            {line.processed_at && (
+                              <span className="text-muted-foreground text-[10px]">{formatDate(line.processed_at)}</span>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          <DialogFooter className="gap-2 sm:gap-0">
+            {selectedRequest?.status === "requested" && (
+              <Button variant="destructive" onClick={handleCancel} className="h-8 text-xs sm:h-10 sm:text-sm">
+                결재 회수
+              </Button>
+            )}
+            <Button variant="outline" onClick={() => setDetailOpen(false)} className="h-8 text-xs sm:h-10 sm:text-sm">
+              닫기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// ============================================================
+// 수신함 (내가 결재해야 할 것)
+// ============================================================
+function ReceivedTab() {
+  const [pendingLines, setPendingLines] = useState<ApprovalLine[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const [processOpen, setProcessOpen] = useState(false);
+  const [selectedLine, setSelectedLine] = useState<ApprovalLine | null>(null);
+  const [comment, setComment] = useState("");
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const fetchPending = useCallback(async () => {
+    setLoading(true);
+    const res = await getMyPendingApprovals();
+    if (res.success && res.data) setPendingLines(res.data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { fetchPending(); }, [fetchPending]);
+
+  const openProcess = (line: ApprovalLine) => {
+    setSelectedLine(line);
+    setComment("");
+    setProcessOpen(true);
+  };
+
+  const handleProcess = async (action: "approved" | "rejected") => {
+    if (!selectedLine) return;
+    setIsProcessing(true);
+    const res = await processApprovalLine(selectedLine.line_id, {
+      action,
+      comment: comment.trim() || undefined,
+    });
+    setIsProcessing(false);
+    if (res.success) {
+      toast.success(action === "approved" ? "승인되었습니다." : "반려되었습니다.");
+      setProcessOpen(false);
+      fetchPending();
+    } else {
+      toast.error(res.error || "처리 실패");
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {loading ? (
+        <div className="flex h-64 items-center justify-center">
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      ) : pendingLines.length === 0 ? (
+        <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+          <Inbox className="text-muted-foreground mb-2 h-8 w-8" />
+          <p className="text-muted-foreground text-sm">결재 대기 건이 없습니다.</p>
+        </div>
+      ) : (
+        <div className="bg-card rounded-lg border shadow-sm">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/50 border-b hover:bg-muted/50">
+                <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
+                <TableHead className="h-12 text-sm font-semibold">요청자</TableHead>
+                <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
+                <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">단계</TableHead>
+                <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
+                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">처리</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {pendingLines.map((line) => (
+                <TableRow key={line.line_id} className="border-b transition-colors hover:bg-muted/50">
+                  <TableCell className="h-14 text-sm font-medium">{line.title || "-"}</TableCell>
+                  <TableCell className="h-14 text-sm">
+                    {line.requester_name || "-"}
+                    {line.requester_dept && (
+                      <span className="text-muted-foreground ml-1 text-xs">({line.requester_dept})</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-muted-foreground h-14 text-sm">{line.target_table || "-"}</TableCell>
+                  <TableCell className="h-14 text-center text-sm">
+                    <Badge variant="outline">{line.step_order}차</Badge>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground h-14 text-sm">{formatDate(line.request_created_at || line.created_at)}</TableCell>
+                  <TableCell className="h-14 text-center">
+                    <Button size="sm" className="h-8 text-xs" onClick={() => openProcess(line)}>
+                      결재하기
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {/* 결재 처리 모달 */}
+      <Dialog open={processOpen} onOpenChange={setProcessOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[450px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">결재 처리</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              {selectedLine?.title}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-3 text-sm">
+              <div>
+                <span className="text-muted-foreground text-xs">요청자</span>
+                <p className="mt-1 font-medium">{selectedLine?.requester_name || "-"}</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground text-xs">결재 단계</span>
+                <p className="mt-1 font-medium">{selectedLine?.step_order}차 결재</p>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs sm:text-sm">의견</Label>
+              <Textarea
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                placeholder="결재 의견을 입력하세요 (선택사항)"
+                className="min-h-[80px] text-xs sm:text-sm"
+              />
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="destructive"
+              onClick={() => handleProcess("rejected")}
+              disabled={isProcessing}
+              className="h-8 flex-1 gap-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <XCircle className="h-4 w-4" />
+              반려
+            </Button>
+            <Button
+              onClick={() => handleProcess("approved")}
+              disabled={isProcessing}
+              className="h-8 flex-1 gap-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              {isProcessing ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <CheckCircle className="h-4 w-4" />
+              )}
+              승인
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// ============================================================
+// 메인 페이지
+// ============================================================
+export default function ApprovalBoxPage() {
+  return (
+    <div className="bg-background flex min-h-screen flex-col">
+      <div className="space-y-6 p-6">
+        <div className="space-y-2 border-b pb-4">
+          <h1 className="text-3xl font-bold tracking-tight">결재함</h1>
+          <p className="text-muted-foreground text-sm">
+            내가 상신한 결재와 나에게 온 결재를 관리합니다.
+          </p>
+        </div>
+
+        <Tabs defaultValue="received" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="received" className="gap-2">
+              <Inbox className="h-4 w-4" />
+              수신함 (결재 대기)
+            </TabsTrigger>
+            <TabsTrigger value="sent" className="gap-2">
+              <Send className="h-4 w-4" />
+              상신함 (내가 올린)
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="received">
+            <ReceivedTab />
+          </TabsContent>
+          <TabsContent value="sent">
+            <SentTab />
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <ScrollToTop />
+    </div>
+  );
+}

frontend/app/(main)/admin/approvalMng/page.tsx

@@ -0,0 +1,788 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { toast } from "sonner";
+import { Plus, Edit, Trash2, Search, Users, FileText, Loader2 } from "lucide-react";
+import { ScrollToTop } from "@/components/common/ScrollToTop";
+import {
+  type ApprovalDefinition,
+  type ApprovalLineTemplate,
+  type ApprovalLineTemplateStep,
+  getApprovalDefinitions,
+  createApprovalDefinition,
+  updateApprovalDefinition,
+  deleteApprovalDefinition,
+  getApprovalTemplates,
+  getApprovalTemplate,
+  createApprovalTemplate,
+  updateApprovalTemplate,
+  deleteApprovalTemplate,
+} from "@/lib/api/approval";
+
+// ============================================================
+// 결재 유형 관리 탭
+// ============================================================
+
+function DefinitionsTab() {
+  const [definitions, setDefinitions] = useState<ApprovalDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const [editOpen, setEditOpen] = useState(false);
+  const [editingDef, setEditingDef] = useState<ApprovalDefinition | null>(null);
+  const [formData, setFormData] = useState({
+    definition_name: "",
+    definition_name_eng: "",
+    description: "",
+    max_steps: 3,
+    allow_self_approval: false,
+    allow_cancel: true,
+    is_active: "Y",
+  });
+
+  const [deleteTarget, setDeleteTarget] = useState<ApprovalDefinition | null>(null);
+
+  const fetchDefinitions = useCallback(async () => {
+    setLoading(true);
+    const res = await getApprovalDefinitions({ search: searchTerm || undefined });
+    if (res.success && res.data) {
+      setDefinitions(res.data);
+    }
+    setLoading(false);
+  }, [searchTerm]);
+
+  useEffect(() => {
+    fetchDefinitions();
+  }, [fetchDefinitions]);
+
+  const openCreate = () => {
+    setEditingDef(null);
+    setFormData({
+      definition_name: "",
+      definition_name_eng: "",
+      description: "",
+      max_steps: 3,
+      allow_self_approval: false,
+      allow_cancel: true,
+      is_active: "Y",
+    });
+    setEditOpen(true);
+  };
+
+  const openEdit = (def: ApprovalDefinition) => {
+    setEditingDef(def);
+    setFormData({
+      definition_name: def.definition_name,
+      definition_name_eng: def.definition_name_eng || "",
+      description: def.description || "",
+      max_steps: def.max_steps,
+      allow_self_approval: def.allow_self_approval,
+      allow_cancel: def.allow_cancel,
+      is_active: def.is_active,
+    });
+    setEditOpen(true);
+  };
+
+  const handleSave = async () => {
+    if (!formData.definition_name.trim()) {
+      toast.warning("결재 유형명을 입력해주세요.");
+      return;
+    }
+
+    let res;
+    if (editingDef) {
+      res = await updateApprovalDefinition(editingDef.definition_id, formData);
+    } else {
+      res = await createApprovalDefinition(formData);
+    }
+
+    if (res.success) {
+      toast.success(editingDef ? "수정되었습니다." : "등록되었습니다.");
+      setEditOpen(false);
+      fetchDefinitions();
+    } else {
+      toast.error(res.error || "저장 실패");
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    const res = await deleteApprovalDefinition(deleteTarget.definition_id);
+    if (res.success) {
+      toast.success("삭제되었습니다.");
+      setDeleteTarget(null);
+      fetchDefinitions();
+    } else {
+      toast.error(res.error || "삭제 실패");
+    }
+  };
+
+  const filtered = definitions.filter(
+    (d) =>
+      d.definition_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      (d.description || "").toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* 검색 + 등록 */}
+      <div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex items-center gap-3">
+          <div className="relative w-full sm:w-[300px]">
+            <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+            <Input
+              placeholder="유형명 또는 설명 검색..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="h-10 pl-10 text-sm"
+            />
+          </div>
+          <span className="text-muted-foreground text-sm">
+            총 <span className="text-foreground font-semibold">{filtered.length}</span> 건
+          </span>
+        </div>
+        <Button onClick={openCreate} className="h-10 gap-2 text-sm font-medium">
+          <Plus className="h-4 w-4" />
+          결재 유형 등록
+        </Button>
+      </div>
+
+      {/* 테이블 */}
+      {loading ? (
+        <div className="flex h-64 items-center justify-center">
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+          <p className="text-muted-foreground text-sm">등록된 결재 유형이 없습니다.</p>
+        </div>
+      ) : (
+        <div className="bg-card rounded-lg border shadow-sm">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/50 border-b hover:bg-muted/50">
+                <TableHead className="h-12 text-sm font-semibold">유형명</TableHead>
+                <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
+                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">최대 단계</TableHead>
+                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">자가결재</TableHead>
+                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">회수가능</TableHead>
+                <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
+                <TableHead className="h-12 w-[120px] text-center text-sm font-semibold">관리</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map((def) => (
+                <TableRow key={def.definition_id} className="border-b transition-colors hover:bg-muted/50">
+                  <TableCell className="h-14 text-sm font-medium">{def.definition_name}</TableCell>
+                  <TableCell className="text-muted-foreground h-14 text-sm">{def.description || "-"}</TableCell>
+                  <TableCell className="h-14 text-center text-sm">{def.max_steps}</TableCell>
+                  <TableCell className="h-14 text-center text-sm">
+                    <Badge variant={def.allow_self_approval ? "default" : "secondary"}>
+                      {def.allow_self_approval ? "허용" : "불가"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="h-14 text-center text-sm">
+                    <Badge variant={def.allow_cancel ? "default" : "secondary"}>
+                      {def.allow_cancel ? "허용" : "불가"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="h-14 text-center text-sm">
+                    <Badge variant={def.is_active === "Y" ? "default" : "outline"}>
+                      {def.is_active === "Y" ? "활성" : "비활성"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="h-14 text-center">
+                    <div className="flex items-center justify-center gap-1">
+                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(def)}>
+                        <Edit className="h-4 w-4" />
+                      </Button>
+                      <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => setDeleteTarget(def)}>
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={editOpen} onOpenChange={setEditOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">
+              {editingDef ? "결재 유형 수정" : "결재 유형 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              결재 유형의 기본 정보를 설정합니다.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 sm:space-y-4">
+            <div>
+              <Label className="text-xs sm:text-sm">유형명 *</Label>
+              <Input
+                value={formData.definition_name}
+                onChange={(e) => setFormData((p) => ({ ...p, definition_name: e.target.value }))}
+                placeholder="예: 일반 결재, 긴급 결재"
+                className="h-8 text-xs sm:h-10 sm:text-sm"
+              />
+            </div>
+            <div>
+              <Label className="text-xs sm:text-sm">영문명</Label>
+              <Input
+                value={formData.definition_name_eng}
+                onChange={(e) => setFormData((p) => ({ ...p, definition_name_eng: e.target.value }))}
+                placeholder="예: General Approval"
+                className="h-8 text-xs sm:h-10 sm:text-sm"
+              />
+            </div>
+            <div>
+              <Label className="text-xs sm:text-sm">설명</Label>
+              <Input
+                value={formData.description}
+                onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value }))}
+                placeholder="유형에 대한 설명"
+                className="h-8 text-xs sm:h-10 sm:text-sm"
+              />
+            </div>
+            <div>
+              <Label className="text-xs sm:text-sm">최대 결재 단계</Label>
+              <Input
+                type="number"
+                min={1}
+                max={10}
+                value={formData.max_steps}
+                onChange={(e) => setFormData((p) => ({ ...p, max_steps: Number(e.target.value) }))}
+                className="h-8 text-xs sm:h-10 sm:text-sm"
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label className="text-xs sm:text-sm">자가 결재 허용</Label>
+              <Switch
+                checked={formData.allow_self_approval}
+                onCheckedChange={(v) => setFormData((p) => ({ ...p, allow_self_approval: v }))}
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label className="text-xs sm:text-sm">회수 가능</Label>
+              <Switch
+                checked={formData.allow_cancel}
+                onCheckedChange={(v) => setFormData((p) => ({ ...p, allow_cancel: v }))}
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label className="text-xs sm:text-sm">활성 상태</Label>
+              <Switch
+                checked={formData.is_active === "Y"}
+                onCheckedChange={(v) => setFormData((p) => ({ ...p, is_active: v ? "Y" : "N" }))}
+              />
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setEditOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              취소
+            </Button>
+            <Button onClick={handleSave} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {editingDef ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 */}
+      <AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>결재 유형 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &quot;{deleteTarget?.definition_name}&quot;을(를) 삭제하시겠습니까?
+              <br />이 유형에 연결된 결재 요청이 있으면 삭제할 수 없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+// ============================================================
+// 결재선 템플릿 관리 탭
+// ============================================================
+
+function TemplatesTab() {
+  const [templates, setTemplates] = useState<ApprovalLineTemplate[]>([]);
+  const [definitions, setDefinitions] = useState<ApprovalDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const [editOpen, setEditOpen] = useState(false);
+  const [editingTpl, setEditingTpl] = useState<ApprovalLineTemplate | null>(null);
+  const [formData, setFormData] = useState({
+    template_name: "",
+    description: "",
+    definition_id: null as number | null,
+    is_active: "Y",
+    steps: [] as Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[],
+  });
+
+  const [deleteTarget, setDeleteTarget] = useState<ApprovalLineTemplate | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    const [tplRes, defRes] = await Promise.all([
+      getApprovalTemplates(),
+      getApprovalDefinitions({ is_active: "Y" }),
+    ]);
+    if (tplRes.success && tplRes.data) setTemplates(tplRes.data);
+    if (defRes.success && defRes.data) setDefinitions(defRes.data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const openCreate = () => {
+    setEditingTpl(null);
+    setFormData({
+      template_name: "",
+      description: "",
+      definition_id: null,
+      is_active: "Y",
+      steps: [{ step_order: 1, approver_type: "user", approver_user_id: "", approver_label: "1차 결재자" }],
+    });
+    setEditOpen(true);
+  };
+
+  const openEdit = async (tpl: ApprovalLineTemplate) => {
+    const res = await getApprovalTemplate(tpl.template_id);
+    if (!res.success || !res.data) {
+      toast.error("템플릿 정보를 불러올 수 없습니다.");
+      return;
+    }
+    const detail = res.data;
+    setEditingTpl(detail);
+    setFormData({
+      template_name: detail.template_name,
+      description: detail.description || "",
+      definition_id: detail.definition_id || null,
+      is_active: detail.is_active,
+      steps: (detail.steps || []).map((s) => ({
+        step_order: s.step_order,
+        approver_type: s.approver_type,
+        approver_user_id: s.approver_user_id,
+        approver_position: s.approver_position,
+        approver_dept_code: s.approver_dept_code,
+        approver_label: s.approver_label,
+      })),
+    });
+    setEditOpen(true);
+  };
+
+  const addStep = () => {
+    setFormData((p) => ({
+      ...p,
+      steps: [
+        ...p.steps,
+        {
+          step_order: p.steps.length + 1,
+          approver_type: "user" as const,
+          approver_user_id: "",
+          approver_label: `${p.steps.length + 1}차 결재자`,
+        },
+      ],
+    }));
+  };
+
+  const removeStep = (idx: number) => {
+    setFormData((p) => ({
+      ...p,
+      steps: p.steps.filter((_, i) => i !== idx).map((s, i) => ({ ...s, step_order: i + 1 })),
+    }));
+  };
+
+  const updateStep = (idx: number, field: string, value: string) => {
+    setFormData((p) => ({
+      ...p,
+      steps: p.steps.map((s, i) => (i === idx ? { ...s, [field]: value } : s)),
+    }));
+  };
+
+  const handleSave = async () => {
+    if (!formData.template_name.trim()) {
+      toast.warning("템플릿명을 입력해주세요.");
+      return;
+    }
+    if (formData.steps.length === 0) {
+      toast.warning("결재 단계를 최소 1개 추가해주세요.");
+      return;
+    }
+
+    const payload = {
+      template_name: formData.template_name,
+      description: formData.description || undefined,
+      definition_id: formData.definition_id || undefined,
+      is_active: formData.is_active,
+      steps: formData.steps,
+    };
+
+    let res;
+    if (editingTpl) {
+      res = await updateApprovalTemplate(editingTpl.template_id, payload);
+    } else {
+      res = await createApprovalTemplate(payload);
+    }
+
+    if (res.success) {
+      toast.success(editingTpl ? "수정되었습니다." : "등록되었습니다.");
+      setEditOpen(false);
+      fetchData();
+    } else {
+      toast.error(res.error || "저장 실패");
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    const res = await deleteApprovalTemplate(deleteTarget.template_id);
+    if (res.success) {
+      toast.success("삭제되었습니다.");
+      setDeleteTarget(null);
+      fetchData();
+    } else {
+      toast.error(res.error || "삭제 실패");
+    }
+  };
+
+  const filtered = templates.filter(
+    (t) =>
+      t.template_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      (t.description || "").toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* 검색 + 등록 */}
+      <div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex items-center gap-3">
+          <div className="relative w-full sm:w-[300px]">
+            <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+            <Input
+              placeholder="템플릿명 또는 설명 검색..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="h-10 pl-10 text-sm"
+            />
+          </div>
+          <span className="text-muted-foreground text-sm">
+            총 <span className="text-foreground font-semibold">{filtered.length}</span> 건
+          </span>
+        </div>
+        <Button onClick={openCreate} className="h-10 gap-2 text-sm font-medium">
+          <Plus className="h-4 w-4" />
+          결재선 템플릿 등록
+        </Button>
+      </div>
+
+      {/* 테이블 */}
+      {loading ? (
+        <div className="flex h-64 items-center justify-center">
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+          <p className="text-muted-foreground text-sm">등록된 결재선 템플릿이 없습니다.</p>
+        </div>
+      ) : (
+        <div className="bg-card rounded-lg border shadow-sm">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/50 border-b hover:bg-muted/50">
+                <TableHead className="h-12 text-sm font-semibold">템플릿명</TableHead>
+                <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
+                <TableHead className="h-12 text-sm font-semibold">연결된 유형</TableHead>
+                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">단계 수</TableHead>
+                <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
+                <TableHead className="h-12 w-[120px] text-center text-sm font-semibold">관리</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map((tpl) => (
+                <TableRow key={tpl.template_id} className="border-b transition-colors hover:bg-muted/50">
+                  <TableCell className="h-14 text-sm font-medium">{tpl.template_name}</TableCell>
+                  <TableCell className="text-muted-foreground h-14 text-sm">{tpl.description || "-"}</TableCell>
+                  <TableCell className="h-14 text-sm">{tpl.definition_name || "-"}</TableCell>
+                  <TableCell className="h-14 text-center text-sm">
+                    <Badge variant="secondary">{tpl.steps?.length || 0}단계</Badge>
+                  </TableCell>
+                  <TableCell className="h-14 text-center text-sm">
+                    <Badge variant={tpl.is_active === "Y" ? "default" : "outline"}>
+                      {tpl.is_active === "Y" ? "활성" : "비활성"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="h-14 text-center">
+                    <div className="flex items-center justify-center gap-1">
+                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(tpl)}>
+                        <Edit className="h-4 w-4" />
+                      </Button>
+                      <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => setDeleteTarget(tpl)}>
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={editOpen} onOpenChange={setEditOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">
+              {editingTpl ? "결재선 템플릿 수정" : "결재선 템플릿 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              결재선의 기본 정보와 결재 단계를 설정합니다.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="max-h-[60vh] space-y-3 overflow-y-auto sm:space-y-4">
+            <div>
+              <Label className="text-xs sm:text-sm">템플릿명 *</Label>
+              <Input
+                value={formData.template_name}
+                onChange={(e) => setFormData((p) => ({ ...p, template_name: e.target.value }))}
+                placeholder="예: 일반 3단계 결재선"
+                className="h-8 text-xs sm:h-10 sm:text-sm"
+              />
+            </div>
+            <div>
+              <Label className="text-xs sm:text-sm">설명</Label>
+              <Input
+                value={formData.description}
+                onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value }))}
+                placeholder="템플릿에 대한 설명"
+                className="h-8 text-xs sm:h-10 sm:text-sm"
+              />
+            </div>
+            <div>
+              <Label className="text-xs sm:text-sm">연결 결재 유형</Label>
+              <Select
+                value={formData.definition_id ? String(formData.definition_id) : "none"}
+                onValueChange={(v) => setFormData((p) => ({ ...p, definition_id: v === "none" ? null : Number(v) }))}
+              >
+                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectValue placeholder="결재 유형 선택 (선택사항)" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">연결 없음</SelectItem>
+                  {definitions.map((d) => (
+                    <SelectItem key={d.definition_id} value={String(d.definition_id)}>
+                      {d.definition_name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between">
+              <Label className="text-xs sm:text-sm">활성 상태</Label>
+              <Switch
+                checked={formData.is_active === "Y"}
+                onCheckedChange={(v) => setFormData((p) => ({ ...p, is_active: v ? "Y" : "N" }))}
+              />
+            </div>
+
+            {/* 결재 단계 설정 */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs font-semibold sm:text-sm">결재 단계</Label>
+                <Button variant="outline" size="sm" onClick={addStep} className="h-7 gap-1 text-xs">
+                  <Plus className="h-3 w-3" />
+                  단계 추가
+                </Button>
+              </div>
+
+              {formData.steps.length === 0 && (
+                <p className="text-muted-foreground py-4 text-center text-xs">
+                  결재 단계를 추가해주세요.
+                </p>
+              )}
+
+              {formData.steps.map((step, idx) => (
+                <div key={idx} className="bg-muted/30 space-y-2 rounded-md border p-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-medium">{step.step_order}단계</span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-destructive h-6 w-6"
+                      onClick={() => removeStep(idx)}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-2">
+                    <div>
+                      <Label className="text-[10px]">결재자 유형</Label>
+                      <Select value={step.approver_type} onValueChange={(v) => updateStep(idx, "approver_type", v)}>
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="user">사용자 지정</SelectItem>
+                          <SelectItem value="position">직급 지정</SelectItem>
+                          <SelectItem value="dept">부서 지정</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div>
+                      <Label className="text-[10px]">표시 라벨</Label>
+                      <Input
+                        value={step.approver_label || ""}
+                        onChange={(e) => updateStep(idx, "approver_label", e.target.value)}
+                        placeholder="예: 팀장"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                  </div>
+                  {step.approver_type === "user" && (
+                    <div>
+                      <Label className="text-[10px]">사용자 ID</Label>
+                      <Input
+                        value={step.approver_user_id || ""}
+                        onChange={(e) => updateStep(idx, "approver_user_id", e.target.value)}
+                        placeholder="고정 결재자 ID (비워두면 요청 시 지정)"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                  )}
+                  {step.approver_type === "position" && (
+                    <div>
+                      <Label className="text-[10px]">직급</Label>
+                      <Input
+                        value={step.approver_position || ""}
+                        onChange={(e) => updateStep(idx, "approver_position", e.target.value)}
+                        placeholder="예: 부장, 이사"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                  )}
+                  {step.approver_type === "dept" && (
+                    <div>
+                      <Label className="text-[10px]">부서 코드</Label>
+                      <Input
+                        value={step.approver_dept_code || ""}
+                        onChange={(e) => updateStep(idx, "approver_dept_code", e.target.value)}
+                        placeholder="예: DEPT001"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setEditOpen(false)} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              취소
+            </Button>
+            <Button onClick={handleSave} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {editingTpl ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 */}
+      <AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>결재선 템플릿 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &quot;{deleteTarget?.template_name}&quot;을(를) 삭제하시겠습니까?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+// ============================================================
+// 메인 페이지
+// ============================================================
+
+export default function ApprovalManagementPage() {
+  return (
+    <div className="bg-background flex min-h-screen flex-col">
+      <div className="space-y-6 p-6">
+        {/* 페이지 헤더 */}
+        <div className="space-y-2 border-b pb-4">
+          <h1 className="text-3xl font-bold tracking-tight">결재 관리</h1>
+          <p className="text-muted-foreground text-sm">
+            결재 유형과 결재선 템플릿을 관리합니다.
+          </p>
+        </div>
+
+        {/* 탭 */}
+        <Tabs defaultValue="definitions" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="definitions" className="gap-2">
+              <FileText className="h-4 w-4" />
+              결재 유형
+            </TabsTrigger>
+            <TabsTrigger value="templates" className="gap-2">
+              <Users className="h-4 w-4" />
+              결재선 템플릿
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="definitions">
+            <DefinitionsTab />
+          </TabsContent>
+
+          <TabsContent value="templates">
+            <TemplatesTab />
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <ScrollToTop />
+    </div>
+  );
+}

frontend/app/(main)/approval/page.tsx

@@ -0,0 +1,426 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Loader2, CheckCircle2, XCircle, Clock, FileCheck2 } from "lucide-react";
+import {
+  getApprovalRequests,
+  getApprovalRequest,
+  getMyPendingApprovals,
+  processApprovalLine,
+  cancelApprovalRequest,
+  type ApprovalRequest,
+  type ApprovalLine,
+} from "@/lib/api/approval";
+
+// 상태 배지 색상
+const statusConfig: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
+  requested: { label: "요청됨", variant: "secondary" },
+  in_progress: { label: "진행 중", variant: "default" },
+  approved: { label: "승인됨", variant: "outline" },
+  rejected: { label: "반려됨", variant: "destructive" },
+  cancelled: { label: "취소됨", variant: "secondary" },
+};
+
+const lineStatusConfig: Record<string, { label: string; icon: React.ReactNode }> = {
+  waiting: { label: "대기", icon: <Clock className="h-3 w-3 text-muted-foreground" /> },
+  pending: { label: "진행 중", icon: <Clock className="h-3 w-3 text-primary" /> },
+  approved: { label: "승인", icon: <CheckCircle2 className="h-3 w-3 text-green-600" /> },
+  rejected: { label: "반려", icon: <XCircle className="h-3 w-3 text-destructive" /> },
+  skipped: { label: "건너뜀", icon: <Clock className="h-3 w-3 text-muted-foreground" /> },
+};
+
+// 결재 상세 모달
+interface ApprovalDetailModalProps {
+  request: ApprovalRequest | null;
+  open: boolean;
+  onClose: () => void;
+  onRefresh: () => void;
+  pendingLineId?: number; // 내가 처리해야 할 결재 라인 ID
+}
+
+function ApprovalDetailModal({ request, open, onClose, onRefresh, pendingLineId }: ApprovalDetailModalProps) {
+  const [comment, setComment] = useState("");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isCancelling, setIsCancelling] = useState(false);
+
+  useEffect(() => {
+    if (!open) setComment("");
+  }, [open]);
+
+  const handleProcess = async (action: "approved" | "rejected") => {
+    if (!pendingLineId) return;
+    setIsProcessing(true);
+    const res = await processApprovalLine(pendingLineId, { action, comment: comment.trim() || undefined });
+    setIsProcessing(false);
+    if (res.success) {
+      onRefresh();
+      onClose();
+    }
+  };
+
+  const handleCancel = async () => {
+    if (!request) return;
+    setIsCancelling(true);
+    const res = await cancelApprovalRequest(request.request_id);
+    setIsCancelling(false);
+    if (res.success) {
+      onRefresh();
+      onClose();
+    }
+  };
+
+  if (!request) return null;
+
+  const statusInfo = statusConfig[request.status] || { label: request.status, variant: "secondary" as const };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
+            <FileCheck2 className="h-5 w-5" />
+            {request.title}
+          </DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            <Badge variant={statusInfo.variant} className="mr-2">
+              {statusInfo.label}
+            </Badge>
+            요청자: {request.requester_name || request.requester_id}
+            {request.requester_dept ? ` (${request.requester_dept})` : ""}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* 결재 사유 */}
+          {request.description && (
+            <div>
+              <p className="text-muted-foreground mb-1 text-xs font-medium">결재 사유</p>
+              <p className="rounded-md bg-muted p-3 text-xs sm:text-sm">{request.description}</p>
+            </div>
+          )}
+
+          {/* 결재선 */}
+          <div>
+            <p className="text-muted-foreground mb-2 text-xs font-medium">결재선</p>
+            <div className="space-y-2">
+              {(request.lines || []).map((line) => {
+                const lineStatus = lineStatusConfig[line.status] || { label: line.status, icon: null };
+                return (
+                  <div
+                    key={line.line_id}
+                    className="flex items-start justify-between rounded-md border p-3"
+                  >
+                    <div className="flex items-center gap-2">
+                      {lineStatus.icon}
+                      <div>
+                        <p className="text-xs font-medium sm:text-sm">
+                          {line.approver_label || `${line.step_order}차 결재`} — {line.approver_name || line.approver_id}
+                        </p>
+                        {line.approver_position && (
+                          <p className="text-muted-foreground text-[10px] sm:text-xs">{line.approver_position}</p>
+                        )}
+                        {line.comment && (
+                          <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+                            의견: {line.comment}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    <span className="text-muted-foreground text-[10px] sm:text-xs">{lineStatus.label}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* 승인/반려 입력 (대기 상태일 때만) */}
+          {pendingLineId && (
+            <div>
+              <p className="text-muted-foreground mb-1 text-xs font-medium">결재 의견 (선택사항)</p>
+              <Textarea
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                placeholder="결재 의견을 입력하세요"
+                className="min-h-[60px] text-xs sm:text-sm"
+              />
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="flex-wrap gap-2 sm:gap-1">
+          {/* 요청자만 취소 가능 (요청됨/진행 중 상태) */}
+          {(request.status === "requested" || request.status === "in_progress") && !pendingLineId && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleCancel}
+              disabled={isCancelling}
+              className="h-8 text-xs"
+            >
+              {isCancelling ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : null}
+              회수
+            </Button>
+          )}
+
+          <Button
+            variant="outline"
+            onClick={onClose}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            닫기
+          </Button>
+
+          {pendingLineId && (
+            <>
+              <Button
+                variant="destructive"
+                onClick={() => handleProcess("rejected")}
+                disabled={isProcessing}
+                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+              >
+                {isProcessing ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : <XCircle className="mr-1 h-3 w-3" />}
+                반려
+              </Button>
+              <Button
+                onClick={() => handleProcess("approved")}
+                disabled={isProcessing}
+                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+              >
+                {isProcessing ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : <CheckCircle2 className="mr-1 h-3 w-3" />}
+                승인
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// 결재 대기 행 (ApprovalLine 기반)
+function ApprovalLineRow({ line, onClick }: { line: ApprovalLine; onClick: () => void }) {
+  const statusInfo = lineStatusConfig[line.status] || { label: line.status, icon: null };
+  const createdAt = line.request_created_at || line.created_at;
+  const formattedDate = createdAt
+    ? new Date(createdAt).toLocaleDateString("ko-KR", { year: "2-digit", month: "2-digit", day: "2-digit" })
+    : "-";
+
+  return (
+    <button
+      className="w-full rounded-md border p-3 text-left transition-colors hover:bg-muted/50 sm:p-4"
+      onClick={onClick}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-xs font-medium sm:text-sm">{line.title || "제목 없음"}</p>
+          {line.requester_name && (
+            <p className="text-muted-foreground mt-0.5 text-[10px] sm:text-xs">
+              요청자: {line.requester_name}
+            </p>
+          )}
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-1">
+          <span className="flex items-center gap-1 text-[10px] sm:text-xs">
+            {statusInfo.icon}
+            {statusInfo.label}
+          </span>
+          <span className="text-muted-foreground text-[10px]">{formattedDate}</span>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// 결재 요청 행 (ApprovalRequest 기반)
+function ApprovalRequestRow({ request, onClick }: { request: ApprovalRequest; onClick: () => void }) {
+  const statusInfo = statusConfig[request.status] || { label: request.status, variant: "secondary" as const };
+  const formattedDate = request.created_at
+    ? new Date(request.created_at).toLocaleDateString("ko-KR", { year: "2-digit", month: "2-digit", day: "2-digit" })
+    : "-";
+
+  return (
+    <button
+      className="w-full rounded-md border p-3 text-left transition-colors hover:bg-muted/50 sm:p-4"
+      onClick={onClick}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-xs font-medium sm:text-sm">{request.title}</p>
+          {request.requester_name && (
+            <p className="text-muted-foreground mt-0.5 text-[10px] sm:text-xs">
+              요청자: {request.requester_name}
+            </p>
+          )}
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-1">
+          <Badge variant={statusInfo.variant} className="text-[10px]">
+            {statusInfo.label}
+          </Badge>
+          <span className="text-muted-foreground text-[10px]">{formattedDate}</span>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// 빈 상태 컴포넌트
+function EmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
+        <FileCheck2 className="h-7 w-7 text-muted-foreground" />
+      </div>
+      <p className="text-muted-foreground text-sm">{message}</p>
+    </div>
+  );
+}
+
+// 메인 결재함 페이지
+export default function ApprovalPage() {
+  const [activeTab, setActiveTab] = useState("pending");
+  const [pendingLines, setPendingLines] = useState<ApprovalLine[]>([]);
+  const [myRequests, setMyRequests] = useState<ApprovalRequest[]>([]);
+  const [completedRequests, setCompletedRequests] = useState<ApprovalRequest[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 상세 모달
+  const [selectedRequest, setSelectedRequest] = useState<ApprovalRequest | null>(null);
+  const [selectedPendingLineId, setSelectedPendingLineId] = useState<number | undefined>();
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+
+  const loadData = useCallback(async () => {
+    setIsLoading(true);
+
+    const [pendingRes, myRes, completedRes] = await Promise.all([
+      getMyPendingApprovals(),
+      // my_approvals 없이 호출 → 백엔드에서 현재 사용자의 요청 건 반환
+      getApprovalRequests(),
+      getApprovalRequests({ status: "approved" }),
+    ]);
+
+    if (pendingRes.success && pendingRes.data) setPendingLines(pendingRes.data);
+    if (myRes.success && myRes.data) setMyRequests(myRes.data);
+    if (completedRes.success && completedRes.data) setCompletedRequests(completedRes.data);
+
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const handleOpenDetail = async (requestId: number, pendingLineId?: number) => {
+    const res = await getApprovalRequest(requestId);
+    if (res.success && res.data) {
+      setSelectedRequest(res.data);
+      setSelectedPendingLineId(pendingLineId);
+      setDetailModalOpen(true);
+    }
+  };
+
+  const handleOpenFromLine = async (line: ApprovalLine) => {
+    if (!line.request_id) return;
+    await handleOpenDetail(line.request_id, line.line_id);
+  };
+
+  return (
+    <div className="container mx-auto max-w-3xl p-4 sm:p-6">
+      <div className="mb-6">
+        <h1 className="text-xl font-bold sm:text-2xl">결재함</h1>
+        <p className="text-muted-foreground mt-1 text-sm">결재 요청을 확인하고 처리합니다.</p>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className="mb-4 grid w-full grid-cols-3">
+          <TabsTrigger value="pending" className="text-xs sm:text-sm">
+            대기함
+            {pendingLines.length > 0 && (
+              <Badge variant="destructive" className="ml-1 h-4 min-w-[16px] px-1 text-[10px]">
+                {pendingLines.length}
+              </Badge>
+            )}
+          </TabsTrigger>
+          <TabsTrigger value="my-requests" className="text-xs sm:text-sm">
+            요청함
+          </TabsTrigger>
+          <TabsTrigger value="completed" className="text-xs sm:text-sm">
+            완료함
+          </TabsTrigger>
+        </TabsList>
+
+        {isLoading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+          </div>
+        ) : (
+          <>
+            {/* 대기함: 내가 결재해야 할 건 */}
+            <TabsContent value="pending">
+              {pendingLines.length === 0 ? (
+                <EmptyState message="결재 대기 중인 건이 없습니다." />
+              ) : (
+                <div className="space-y-2">
+                  {pendingLines.map((line) => (
+                    <ApprovalLineRow
+                      key={line.line_id}
+                      line={line}
+                      onClick={() => handleOpenFromLine(line)}
+                    />
+                  ))}
+                </div>
+              )}
+            </TabsContent>
+
+            {/* 요청함: 내가 요청한 건 */}
+            <TabsContent value="my-requests">
+              {myRequests.length === 0 ? (
+                <EmptyState message="요청한 결재 건이 없습니다." />
+              ) : (
+                <div className="space-y-2">
+                  {myRequests.map((req) => (
+                    <ApprovalRequestRow
+                      key={req.request_id}
+                      request={req}
+                      onClick={() => handleOpenDetail(req.request_id)}
+                    />
+                  ))}
+                </div>
+              )}
+            </TabsContent>
+
+            {/* 완료함 */}
+            <TabsContent value="completed">
+              {completedRequests.length === 0 ? (
+                <EmptyState message="완료된 결재 건이 없습니다." />
+              ) : (
+                <div className="space-y-2">
+                  {completedRequests.map((req) => (
+                    <ApprovalRequestRow
+                      key={req.request_id}
+                      request={req}
+                      onClick={() => handleOpenDetail(req.request_id)}
+                    />
+                  ))}
+                </div>
+              )}
+            </TabsContent>
+          </>
+        )}
+      </Tabs>
+
+      {/* 결재 상세 모달 */}
+      <ApprovalDetailModal
+        request={selectedRequest}
+        open={detailModalOpen}
+        onClose={() => setDetailModalOpen(false)}
+        onRefresh={loadData}
+        pendingLineId={selectedPendingLineId}
+      />
+    </div>
+  );
+}

frontend/app/(main)/layout.tsx

@@ -1,12 +1,14 @@
 import { AuthProvider } from "@/contexts/AuthContext";
 import { MenuProvider } from "@/contexts/MenuContext";
 import { AppLayout } from "@/components/layout/AppLayout";
+import { ApprovalGlobalListener } from "@/components/approval/ApprovalGlobalListener";
 
 export default function MainLayout({ children }: { children: React.ReactNode }) {
   return (
     <AuthProvider>
       <MenuProvider>
         <AppLayout>{children}</AppLayout>
+        <ApprovalGlobalListener />
       </MenuProvider>
     </AuthProvider>
   );

frontend/components/approval/ApprovalGlobalListener.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { ApprovalRequestModal, type ApprovalModalEventDetail } from "./ApprovalRequestModal";
+
+/**
+ * 전역 결재 요청 모달 리스너
+ *
+ * CustomEvent('open-approval-modal')를 수신하여 ApprovalRequestModal을 엽니다.
+ *
+ * 이벤트 발송 예시:
+ * window.dispatchEvent(new CustomEvent('open-approval-modal', {
+ *   detail: {
+ *     targetTable: 'purchase_orders',
+ *     targetRecordId: '123',
+ *     targetRecordData: { ... },
+ *     definitionId: 1,
+ *     screenId: 10,
+ *     buttonComponentId: 'btn-approval-001',
+ *   }
+ * }));
+ */
+export const ApprovalGlobalListener: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [eventDetail, setEventDetail] = useState<ApprovalModalEventDetail | null>(null);
+
+  useEffect(() => {
+    const handleOpenModal = (e: Event) => {
+      const customEvent = e as CustomEvent<ApprovalModalEventDetail>;
+      setEventDetail(customEvent.detail || null);
+      setOpen(true);
+    };
+
+    window.addEventListener("open-approval-modal", handleOpenModal);
+    return () => {
+      window.removeEventListener("open-approval-modal", handleOpenModal);
+    };
+  }, []);
+
+  return (
+    <ApprovalRequestModal
+      open={open}
+      onOpenChange={(v) => {
+        setOpen(v);
+        if (!v) setEventDetail(null);
+      }}
+      eventDetail={eventDetail}
+    />
+  );
+};
+
+export default ApprovalGlobalListener;

frontend/components/approval/ApprovalRequestModal.tsx

@@ -0,0 +1,483 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Plus, X, Loader2, Search, GripVertical, Users, ArrowDown, Layers } from "lucide-react";
+import { toast } from "sonner";
+import { createApprovalRequest } from "@/lib/api/approval";
+import { getUserList } from "@/lib/api/user";
+
+// 결재 방식
+type ApprovalMode = "sequential" | "parallel";
+
+interface ApproverRow {
+  id: string;
+  user_id: string;
+  user_name: string;
+  position_name: string;
+  dept_name: string;
+}
+
+export interface ApprovalModalEventDetail {
+  targetTable: string;
+  targetRecordId: string;
+  targetRecordData?: Record<string, any>;
+  definitionId?: number;
+  screenId?: number;
+  buttonComponentId?: string;
+}
+
+interface ApprovalRequestModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  eventDetail?: ApprovalModalEventDetail | null;
+}
+
+interface UserSearchResult {
+  userId: string;
+  userName: string;
+  positionName?: string;
+  deptName?: string;
+  deptCode?: string;
+  email?: string;
+  user_id?: string;
+  user_name?: string;
+  position_name?: string;
+  dept_name?: string;
+}
+
+function genId(): string {
+  return `a_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+}
+
+export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
+  open,
+  onOpenChange,
+  eventDetail,
+}) => {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [approvalMode, setApprovalMode] = useState<ApprovalMode>("sequential");
+  const [approvers, setApprovers] = useState<ApproverRow[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // 사용자 검색 상태
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<UserSearchResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const searchTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 모달 닫힐 때 초기화
+  useEffect(() => {
+    if (!open) {
+      setTitle("");
+      setDescription("");
+      setApprovalMode("sequential");
+      setApprovers([]);
+      setError(null);
+      setSearchOpen(false);
+      setSearchQuery("");
+      setSearchResults([]);
+    }
+  }, [open]);
+
+  // 사용자 검색 (디바운스)
+  const searchUsers = useCallback(async (query: string) => {
+    if (!query.trim() || query.trim().length < 1) {
+      setSearchResults([]);
+      return;
+    }
+
+    setIsSearching(true);
+    try {
+      const res = await getUserList({ search: query.trim(), limit: 20 });
+      const data = res?.data || res || [];
+      const rawUsers: any[] = Array.isArray(data) ? data : [];
+      const users: UserSearchResult[] = rawUsers.map((u: any) => ({
+        userId: u.userId || u.user_id || "",
+        userName: u.userName || u.user_name || "",
+        positionName: u.positionName || u.position_name || "",
+        deptName: u.deptName || u.dept_name || "",
+        deptCode: u.deptCode || u.dept_code || "",
+        email: u.email || "",
+      }));
+      const existingIds = new Set(approvers.map((a) => a.user_id));
+      setSearchResults(users.filter((u) => u.userId && !existingIds.has(u.userId)));
+    } catch {
+      setSearchResults([]);
+    } finally {
+      setIsSearching(false);
+    }
+  }, [approvers]);
+
+  useEffect(() => {
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    if (!searchQuery.trim()) {
+      setSearchResults([]);
+      return;
+    }
+    searchTimerRef.current = setTimeout(() => {
+      searchUsers(searchQuery);
+    }, 300);
+    return () => {
+      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    };
+  }, [searchQuery, searchUsers]);
+
+  const addApprover = (user: UserSearchResult) => {
+    setApprovers((prev) => [
+      ...prev,
+      {
+        id: genId(),
+        user_id: user.userId,
+        user_name: user.userName,
+        position_name: user.positionName || "",
+        dept_name: user.deptName || "",
+      },
+    ]);
+    setSearchQuery("");
+    setSearchResults([]);
+    setSearchOpen(false);
+  };
+
+  const removeApprover = (id: string) => {
+    setApprovers((prev) => prev.filter((a) => a.id !== id));
+  };
+
+  const moveApprover = (idx: number, direction: "up" | "down") => {
+    setApprovers((prev) => {
+      const next = [...prev];
+      const targetIdx = direction === "up" ? idx - 1 : idx + 1;
+      if (targetIdx < 0 || targetIdx >= next.length) return prev;
+      [next[idx], next[targetIdx]] = [next[targetIdx], next[idx]];
+      return next;
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (!title.trim()) {
+      setError("결재 제목을 입력해주세요.");
+      return;
+    }
+    if (approvers.length === 0) {
+      setError("결재자를 1명 이상 추가해주세요.");
+      return;
+    }
+    if (!eventDetail?.targetTable) {
+      setError("결재 대상 테이블 정보가 없습니다. 버튼 설정을 확인해주세요.");
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    const res = await createApprovalRequest({
+      title: title.trim(),
+      description: description.trim() || undefined,
+      target_table: eventDetail.targetTable,
+      target_record_id: eventDetail.targetRecordId || undefined,
+      target_record_data: eventDetail.targetRecordData,
+      approval_mode: approvalMode,
+      screen_id: eventDetail.screenId,
+      button_component_id: eventDetail.buttonComponentId,
+      approvers: approvers.map((a, idx) => ({
+        approver_id: a.user_id,
+        approver_name: a.user_name,
+        approver_position: a.position_name || undefined,
+        approver_dept: a.dept_name || undefined,
+        approver_label:
+          approvalMode === "sequential"
+            ? `${idx + 1}차 결재`
+            : "동시 결재",
+      })),
+    });
+
+    setIsSubmitting(false);
+
+    if (res.success) {
+      toast.success("결재 요청이 완료되었습니다.");
+      onOpenChange(false);
+    } else {
+      setError(res.error || res.message || "결재 요청에 실패했습니다.");
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[560px]">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">결재 상신</DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            결재 방식을 선택하고 결재자를 검색하여 추가합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="max-h-[65vh] space-y-4 overflow-y-auto pr-1">
+          {/* 결재 제목 */}
+          <div>
+            <Label htmlFor="approval-title" className="text-xs sm:text-sm">
+              결재 제목 <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="approval-title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="결재 제목을 입력하세요"
+              className="h-8 text-xs sm:h-10 sm:text-sm"
+            />
+          </div>
+
+          {/* 결재 사유 */}
+          <div>
+            <Label htmlFor="approval-desc" className="text-xs sm:text-sm">
+              결재 사유
+            </Label>
+            <Textarea
+              id="approval-desc"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="결재 사유를 입력하세요 (선택사항)"
+              className="min-h-[60px] text-xs sm:text-sm"
+            />
+          </div>
+
+          {/* 결재 방식 */}
+          <div>
+            <Label className="text-xs sm:text-sm">결재 방식</Label>
+            <div className="mt-1.5 grid grid-cols-2 gap-2">
+              <button
+                type="button"
+                onClick={() => setApprovalMode("sequential")}
+                className={`flex items-center gap-2 rounded-md border p-3 text-left transition-colors ${
+                  approvalMode === "sequential"
+                    ? "border-primary bg-primary/5 ring-1 ring-primary"
+                    : "hover:bg-muted/50"
+                }`}
+              >
+                <ArrowDown className="h-4 w-4 shrink-0" />
+                <div>
+                  <p className="text-xs font-medium sm:text-sm">다단 결재</p>
+                  <p className="text-muted-foreground text-[10px]">순차적으로 결재</p>
+                </div>
+              </button>
+              <button
+                type="button"
+                onClick={() => setApprovalMode("parallel")}
+                className={`flex items-center gap-2 rounded-md border p-3 text-left transition-colors ${
+                  approvalMode === "parallel"
+                    ? "border-primary bg-primary/5 ring-1 ring-primary"
+                    : "hover:bg-muted/50"
+                }`}
+              >
+                <Layers className="h-4 w-4 shrink-0" />
+                <div>
+                  <p className="text-xs font-medium sm:text-sm">동시 결재</p>
+                  <p className="text-muted-foreground text-[10px]">모든 결재자 동시 진행</p>
+                </div>
+              </button>
+            </div>
+          </div>
+
+          {/* 결재자 추가 (사용자 검색) */}
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <Label className="text-xs sm:text-sm">
+                결재자 <span className="text-destructive">*</span>
+              </Label>
+              <span className="text-muted-foreground text-[10px]">
+                {approvers.length}명 선택됨
+              </span>
+            </div>
+
+            {/* 검색 입력 */}
+            <div className="relative">
+              <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+              <Input
+                ref={searchInputRef}
+                value={searchQuery}
+                onChange={(e) => {
+                  setSearchQuery(e.target.value);
+                  setSearchOpen(true);
+                }}
+                onFocus={() => setSearchOpen(true)}
+                placeholder="이름 또는 사번으로 검색..."
+                className="h-8 pl-9 text-xs sm:h-10 sm:text-sm"
+              />
+
+              {/* 검색 결과 드롭다운 */}
+              {searchOpen && searchQuery.trim() && (
+                <div className="absolute top-full left-0 z-50 mt-1 w-full rounded-md border bg-popover shadow-lg">
+                  {isSearching ? (
+                    <div className="flex items-center justify-center p-4">
+                      <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+                      <span className="text-muted-foreground ml-2 text-xs">검색 중...</span>
+                    </div>
+                  ) : searchResults.length === 0 ? (
+                    <div className="p-4 text-center">
+                      <p className="text-muted-foreground text-xs">검색 결과가 없습니다.</p>
+                    </div>
+                  ) : (
+                    <div className="max-h-48 overflow-y-auto">
+                      {searchResults.map((user) => (
+                        <button
+                          key={user.userId}
+                          type="button"
+                          onClick={() => addApprover(user)}
+                          className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-accent"
+                        >
+                          <div className="bg-muted flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
+                            <Users className="h-4 w-4" />
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate text-xs font-medium sm:text-sm">
+                              {user.userName}
+                              <span className="text-muted-foreground ml-1 text-[10px]">
+                                ({user.userId})
+                              </span>
+                            </p>
+                            <p className="text-muted-foreground truncate text-[10px]">
+                              {[user.deptName, user.positionName].filter(Boolean).join(" / ") || "-"}
+                            </p>
+                          </div>
+                          <Plus className="text-muted-foreground h-4 w-4 shrink-0" />
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* 클릭 외부 영역 닫기 */}
+            {searchOpen && (
+              <div
+                className="fixed inset-0 z-40"
+                onClick={() => setSearchOpen(false)}
+              />
+            )}
+
+            {/* 선택된 결재자 목록 */}
+            {approvers.length === 0 ? (
+              <p className="text-muted-foreground mt-3 rounded-md border border-dashed p-4 text-center text-xs">
+                위 검색창에서 결재자를 검색하여 추가하세요
+              </p>
+            ) : (
+              <div className="mt-3 space-y-2">
+                {approvers.map((approver, idx) => (
+                  <div
+                    key={approver.id}
+                    className="bg-muted/30 flex items-center gap-2 rounded-md border p-2"
+                  >
+                    {/* 순서 표시 */}
+                    {approvalMode === "sequential" ? (
+                      <div className="flex shrink-0 flex-col items-center gap-0.5">
+                        <button
+                          type="button"
+                          onClick={() => moveApprover(idx, "up")}
+                          disabled={idx === 0}
+                          className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                        >
+                          <GripVertical className="h-3 w-3 rotate-90" />
+                        </button>
+                        <Badge variant="outline" className="h-5 min-w-[24px] justify-center px-1 text-[10px]">
+                          {idx + 1}
+                        </Badge>
+                        <button
+                          type="button"
+                          onClick={() => moveApprover(idx, "down")}
+                          disabled={idx === approvers.length - 1}
+                          className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                        >
+                          <GripVertical className="h-3 w-3 rotate-90" />
+                        </button>
+                      </div>
+                    ) : (
+                      <Badge variant="secondary" className="h-5 shrink-0 px-1.5 text-[10px]">
+                        동시
+                      </Badge>
+                    )}
+
+                    {/* 사용자 정보 */}
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-xs font-medium">
+                        {approver.user_name}
+                        <span className="text-muted-foreground ml-1 text-[10px]">
+                          ({approver.user_id})
+                        </span>
+                      </p>
+                      <p className="text-muted-foreground truncate text-[10px]">
+                        {[approver.dept_name, approver.position_name].filter(Boolean).join(" / ") || "-"}
+                      </p>
+                    </div>
+
+                    {/* 제거 버튼 */}
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 shrink-0"
+                      onClick={() => removeApprover(approver.id)}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+
+                {/* 결재 흐름 시각화 */}
+                {approvalMode === "sequential" && approvers.length > 1 && (
+                  <p className="text-muted-foreground text-center text-[10px]">
+                    {approvers.map((a) => a.user_name).join(" → ")}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* 에러 메시지 */}
+          {error && (
+            <div className="bg-destructive/10 rounded-md p-2">
+              <p className="text-destructive text-xs">{error}</p>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isSubmitting}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={isSubmitting || approvers.length === 0}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                요청 중...
+              </>
+            ) : (
+              `결재 상신 (${approvers.length}명)`
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ApprovalRequestModal;

frontend/components/layout/AppLayout.tsx

@@ -18,6 +18,7 @@ import {
   LogOut,
   User,
   Building2,
+  FileCheck,
 } from "lucide-react";
 import { useMenu } from "@/contexts/MenuContext";
 import { useAuth } from "@/hooks/useAuth";
@@ -524,6 +525,11 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 <User className="mr-2 h-4 w-4" />
                 <span>프로필</span>
               </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => router.push("/admin/approvalBox")}>
+                <FileCheck className="mr-2 h-4 w-4" />
+                <span>결재함</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
               <DropdownMenuItem onClick={handleLogout}>
                 <LogOut className="mr-2 h-4 w-4" />
                 <span>로그아웃</span>
@@ -692,6 +698,11 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 <User className="mr-2 h-4 w-4" />
                 <span>프로필</span>
               </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => router.push("/admin/approvalBox")}>
+                <FileCheck className="mr-2 h-4 w-4" />
+                <span>결재함</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
               <DropdownMenuItem onClick={handleLogout}>
                 <LogOut className="mr-2 h-4 w-4" />
                 <span>로그아웃</span>

frontend/components/layout/UserDropdown.tsx

@@ -8,7 +8,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LogOut, User } from "lucide-react";
+import { LogOut, User, FileCheck } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 interface UserDropdownProps {
   user: any;
@@ -20,6 +21,8 @@ interface UserDropdownProps {
  * 사용자 드롭다운 메뉴 컴포넌트
  */
 export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownProps) {
+  const router = useRouter();
+
   if (!user) return null;
 
   return (
@@ -79,6 +82,11 @@ export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownPro
           <User className="mr-2 h-4 w-4" />
           <span>프로필</span>
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => router.push("/admin/approvalBox")}>
+          <FileCheck className="mr-2 h-4 w-4" />
+          <span>결재함</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
         <DropdownMenuItem onClick={onLogout}>
           <LogOut className="mr-2 h-4 w-4" />
           <span>로그아웃</span>

frontend/components/screen/OptimizedButtonComponent.tsx

@@ -577,8 +577,10 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
   const getActionDisplayName = (actionType: ButtonActionType): string => {
     const displayNames: Record<ButtonActionType, string> = {
       save: "저장",
+      cancel: "취소",
       delete: "삭제",
       edit: "수정",
+      copy: "복사",
       add: "추가",
       search: "검색",
       reset: "초기화",
@@ -589,6 +591,9 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
       newWindow: "새 창",
       navigate: "페이지 이동",
       control: "제어",
+      transferData: "데이터 전달",
+      quickInsert: "즉시 저장",
+      approval: "결재",
     };
     return displayNames[actionType] || actionType;
   };

frontend/components/screen/config-panels/ButtonConfigPanel.tsx

@@ -18,6 +18,7 @@ import { ButtonDataflowConfigPanel } from "./ButtonDataflowConfigPanel";
 import { ImprovedButtonControlConfigPanel } from "./ImprovedButtonControlConfigPanel";
 import { FlowVisibilityConfigPanel } from "./FlowVisibilityConfigPanel";
 import { QuickInsertConfigSection } from "./QuickInsertConfigSection";
+import { getApprovalDefinitions, type ApprovalDefinition } from "@/lib/api/approval";
 
 // 🆕 제목 블록 타입
 interface TitleBlock {
@@ -107,6 +108,10 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   const [modalSourcePopoverOpen, setModalSourcePopoverOpen] = useState<Record<number, boolean>>({});
   const [modalTargetPopoverOpen, setModalTargetPopoverOpen] = useState<Record<number, boolean>>({});
 
+  // 결재 유형 목록 상태
+  const [approvalDefinitions, setApprovalDefinitions] = useState<ApprovalDefinition[]>([]);
+  const [approvalDefinitionsLoading, setApprovalDefinitionsLoading] = useState(false);
+
   // 🆕 그룹화 컬럼 선택용 상태
   const [currentTableColumns, setCurrentTableColumns] = useState<Array<{ name: string; label: string }>>([]);
   const [groupByColumnOpen, setGroupByColumnOpen] = useState(false);
@@ -689,6 +694,25 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
     fetchScreens();
   }, [currentScreenCompanyCode]);
 
+  // 결재 유형 목록 가져오기 (approval 액션일 때)
+  useEffect(() => {
+    if (localInputs.actionType !== "approval") return;
+    const fetchApprovalDefinitions = async () => {
+      setApprovalDefinitionsLoading(true);
+      try {
+        const res = await getApprovalDefinitions({ is_active: "Y" });
+        if (res.success && res.data) {
+          setApprovalDefinitions(res.data);
+        }
+      } catch {
+        // 조용히 실패
+      } finally {
+        setApprovalDefinitionsLoading(false);
+      }
+    };
+    fetchApprovalDefinitions();
+  }, [localInputs.actionType]);
+
   // 테이블 컬럼 목록 가져오기 (테이블 이력 보기 액션일 때)
   useEffect(() => {
     const fetchTableColumns = async () => {
@@ -831,6 +855,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             {/* 고급 기능 */}
             <SelectItem value="quickInsert">즉시 저장</SelectItem>
             <SelectItem value="control">제어 흐름</SelectItem>
+            <SelectItem value="approval">결재 요청</SelectItem>
 
             {/* 특수 기능 (필요 시 사용) */}
             <SelectItem value="barcode_scan">바코드 스캔</SelectItem>
@@ -3730,6 +3755,79 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         />
       )}
 
+      {/* 결재 요청(approval) 액션 설정 */}
+      {localInputs.actionType === "approval" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">결재 요청 설정</h4>
+          <p className="text-muted-foreground text-xs">
+            버튼 클릭 시 결재 요청 모달이 열립니다. 결재 유형을 선택하면 기본 결재선이 자동으로 세팅됩니다.
+          </p>
+
+          <div>
+            <Label htmlFor="approval-definition" className="text-xs sm:text-sm">
+              결재 유형
+            </Label>
+            <Select
+              value={String(component.componentConfig?.action?.approvalDefinitionId || "")}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.approvalDefinitionId", value === "none" ? null : Number(value));
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                <SelectValue placeholder={approvalDefinitionsLoading ? "로딩 중..." : "결재 유형 선택 (선택사항)"} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">유형 없음 (직접 설정)</SelectItem>
+                {approvalDefinitions.map((def) => (
+                  <SelectItem key={def.definition_id} value={String(def.definition_id)}>
+                    {def.definition_name}
+                    {def.description ? ` - ${def.description}` : ""}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+              결재 유형을 선택하면 기본 결재선 템플릿이 자동 적용됩니다
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="approval-target-table" className="text-xs sm:text-sm">
+              대상 테이블
+            </Label>
+            <Input
+              id="approval-target-table"
+              placeholder={currentTableName || "예: purchase_orders"}
+              value={component.componentConfig?.action?.approvalTargetTable || currentTableName || ""}
+              onChange={(e) => onUpdateProperty("componentConfig.action.approvalTargetTable", e.target.value)}
+              className="h-8 text-xs sm:h-10 sm:text-sm"
+              readOnly={!!currentTableName && !component.componentConfig?.action?.approvalTargetTable}
+            />
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+              {currentTableName
+                ? `현재 화면 테이블 "${currentTableName}" 자동 적용됨`
+                : "결재 대상 레코드가 저장된 테이블명"}
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="approval-record-id-field" className="text-xs sm:text-sm">
+              레코드 ID 필드명
+            </Label>
+            <Input
+              id="approval-record-id-field"
+              placeholder="예: id, purchase_id"
+              value={component.componentConfig?.action?.approvalRecordIdField || "id"}
+              onChange={(e) => onUpdateProperty("componentConfig.action.approvalRecordIdField", e.target.value)}
+              className="h-8 text-xs sm:h-10 sm:text-sm"
+            />
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+              현재 선택된 레코드의 PK 컬럼명
+            </p>
+          </div>
+        </div>
+      )}
+
       {/* 🆕 이벤트 발송 액션 설정 */}
       {localInputs.actionType === "event" && (
         <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">

frontend/components/screen/config-panels/button/ActionTab.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import React from "react";
+
+export interface ActionTabProps {
+  config: any;
+  onChange: (key: string, value: any) => void;
+  children: React.ReactNode;
+}
+
+/**
+ * 동작 탭: 클릭 이벤트, 네비게이션, 모달 열기, 확인 다이얼로그 등 동작 설정
+ * 실제 UI는 메인 ButtonConfigPanel에서 렌더링 후 children으로 전달
+ */
+export const ActionTab: React.FC<ActionTabProps> = ({ children }) => {
+  return <div className="space-y-4">{children}</div>;
+};

frontend/components/screen/config-panels/button/BasicTab.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+
+export interface BasicTabProps {
+  config: any;
+  onChange: (key: string, value: any) => void;
+  localText?: string;
+  onTextChange?: (value: string) => void;
+}
+
+export const BasicTab: React.FC<BasicTabProps> = ({
+  config,
+  onChange,
+  localText,
+  onTextChange,
+}) => {
+  const text = localText !== undefined ? localText : (config.text !== undefined ? config.text : "버튼");
+
+  const handleChange = (newValue: string) => {
+    onTextChange?.(newValue);
+    onChange("componentConfig.text", newValue);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label htmlFor="button-text">버튼 텍스트</Label>
+        <Input
+          id="button-text"
+          value={text}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder="버튼 텍스트를 입력하세요"
+        />
+      </div>
+    </div>
+  );
+};

frontend/components/screen/config-panels/button/DataTab.tsx

@@ -0,0 +1,872 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { QuickInsertConfigSection } from "../QuickInsertConfigSection";
+import { ComponentData } from "@/types/screen";
+
+export interface DataTabProps {
+  config: any;
+  onChange: (key: string, value: any) => void;
+  component: ComponentData;
+  allComponents: ComponentData[];
+  currentTableName?: string;
+  availableTables: Array<{ name: string; label: string }>;
+  mappingTargetColumns: Array<{ name: string; label: string }>;
+  mappingSourceColumnsMap: Record<string, Array<{ name: string; label: string }>>;
+  currentTableColumns: Array<{ name: string; label: string }>;
+  mappingSourcePopoverOpen: Record<string, boolean>;
+  setMappingSourcePopoverOpen: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+  mappingTargetPopoverOpen: Record<string, boolean>;
+  setMappingTargetPopoverOpen: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+  activeMappingGroupIndex: number;
+  setActiveMappingGroupIndex: React.Dispatch<React.SetStateAction<number>>;
+  loadMappingColumns: (tableName: string) => Promise<Array<{ name: string; label: string }>>;
+  setMappingSourceColumnsMap: React.Dispatch<
+    React.SetStateAction<Record<string, Array<{ name: string; label: string }>>>
+  >;
+}
+
+export const DataTab: React.FC<DataTabProps> = ({
+  config,
+  onChange,
+  component,
+  allComponents,
+  currentTableName,
+  availableTables,
+  mappingTargetColumns,
+  mappingSourceColumnsMap,
+  currentTableColumns,
+  mappingSourcePopoverOpen,
+  setMappingSourcePopoverOpen,
+  mappingTargetPopoverOpen,
+  setMappingTargetPopoverOpen,
+  activeMappingGroupIndex,
+  setActiveMappingGroupIndex,
+  loadMappingColumns,
+  setMappingSourceColumnsMap,
+}) => {
+  const actionType = config.action?.type;
+  const onUpdateProperty = (path: string, value: any) => onChange(path, value);
+
+  if (actionType === "quickInsert") {
+    return (
+      <div className="space-y-4">
+        <QuickInsertConfigSection
+          component={component}
+          onUpdateProperty={onUpdateProperty}
+          allComponents={allComponents}
+          currentTableName={currentTableName}
+        />
+      </div>
+    );
+  }
+
+  if (actionType !== "transferData") {
+    return (
+      <div className="text-muted-foreground py-8 text-center text-sm">
+        데이터 전달 또는 즉시 저장 액션을 선택하면 설정할 수 있습니다.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-muted/50 space-y-4 rounded-lg border p-4">
+        <h4 className="text-foreground text-sm font-medium">데이터 전달 설정</h4>
+
+        <div>
+          <Label>
+            소스 컴포넌트 <span className="text-destructive">*</span>
+          </Label>
+          <Select
+            value={config.action?.dataTransfer?.sourceComponentId || ""}
+            onValueChange={(value) =>
+              onUpdateProperty("componentConfig.action.dataTransfer.sourceComponentId", value)
+            }
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="데이터를 가져올 컴포넌트 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__auto__">
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-medium">자동 탐색 (현재 활성 테이블)</span>
+                  <span className="text-muted-foreground text-[10px]">(auto)</span>
+                </div>
+              </SelectItem>
+              {allComponents
+                .filter((comp: any) => {
+                  const type = comp.componentType || comp.type || "";
+                  return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
+                    type.includes(t),
+                  );
+                })
+                .map((comp: any) => {
+                  const compType = comp.componentType || comp.type || "unknown";
+                  const compLabel = comp.label || comp.componentConfig?.title || comp.id;
+                  const layerName = comp._layerName;
+                  return (
+                    <SelectItem key={comp.id} value={comp.id}>
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-medium">{compLabel}</span>
+                        <span className="text-muted-foreground text-[10px]">({compType})</span>
+                        {layerName && (
+                          <span className="rounded bg-amber-100 px-1 text-[9px] text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+                            {layerName}
+                          </span>
+                        )}
+                      </div>
+                    </SelectItem>
+                  );
+                })}
+              {allComponents.filter((comp: any) => {
+                const type = comp.componentType || comp.type || "";
+                return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
+                  type.includes(t),
+                );
+              }).length === 0 && (
+                <SelectItem value="__none__" disabled>
+                  데이터 제공 가능한 컴포넌트가 없습니다
+                </SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+          <p className="text-muted-foreground mt-1 text-xs">
+            레이어별로 다른 테이블이 있을 경우 &quot;자동 탐색&quot;을 선택하면 현재 활성화된 레이어의 테이블을 자동으로 사용합니다
+          </p>
+        </div>
+
+        <div>
+          <Label htmlFor="target-type">
+            타겟 타입 <span className="text-destructive">*</span>
+          </Label>
+          <Select
+            value={config.action?.dataTransfer?.targetType || "component"}
+            onValueChange={(value) => onUpdateProperty("componentConfig.action.dataTransfer.targetType", value)}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="component">같은 화면의 컴포넌트</SelectItem>
+              <SelectItem value="splitPanel">분할 패널 반대편 화면</SelectItem>
+              <SelectItem value="screen" disabled>
+                다른 화면 (구현 예정)
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          {config.action?.dataTransfer?.targetType === "splitPanel" && (
+            <p className="text-muted-foreground mt-1 text-[10px]">
+              이 버튼이 분할 패널 내부에 있어야 합니다. 좌측 화면에서 우측으로, 또는 우측에서 좌측으로 데이터가 전달됩니다.
+            </p>
+          )}
+        </div>
+
+        {config.action?.dataTransfer?.targetType === "component" && (
+          <div>
+            <Label>
+              타겟 컴포넌트 <span className="text-destructive">*</span>
+            </Label>
+            <Select
+              value={config.action?.dataTransfer?.targetComponentId || ""}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", value);
+                const selectedComp = allComponents.find((c: any) => c.id === value);
+                if (selectedComp && (selectedComp as any)._layerId) {
+                  onUpdateProperty(
+                    "componentConfig.action.dataTransfer.targetLayerId",
+                    (selectedComp as any)._layerId,
+                  );
+                } else {
+                  onUpdateProperty("componentConfig.action.dataTransfer.targetLayerId", undefined);
+                }
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="데이터를 받을 컴포넌트 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {allComponents
+                  .filter((comp: any) => {
+                    const type = comp.componentType || comp.type || "";
+                    const isReceivable = ["table-list", "repeater-field-group", "form-group", "data-table"].some(
+                      (t) => type.includes(t),
+                    );
+                    return isReceivable && comp.id !== config.action?.dataTransfer?.sourceComponentId;
+                  })
+                  .map((comp: any) => {
+                    const compType = comp.componentType || comp.type || "unknown";
+                    const compLabel = comp.label || comp.componentConfig?.title || comp.id;
+                    const layerName = comp._layerName;
+                    return (
+                      <SelectItem key={comp.id} value={comp.id}>
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs font-medium">{compLabel}</span>
+                          <span className="text-muted-foreground text-[10px]">({compType})</span>
+                          {layerName && (
+                            <span className="rounded bg-amber-100 px-1 text-[9px] text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+                              {layerName}
+                            </span>
+                          )}
+                        </div>
+                      </SelectItem>
+                    );
+                  })}
+                {allComponents.filter((comp: any) => {
+                  const type = comp.componentType || comp.type || "";
+                  const isReceivable = ["table-list", "repeater-field-group", "form-group", "data-table"].some(
+                    (t) => type.includes(t),
+                  );
+                  return isReceivable && comp.id !== config.action?.dataTransfer?.sourceComponentId;
+                }).length === 0 && (
+                  <SelectItem value="__none__" disabled>
+                    데이터 수신 가능한 컴포넌트가 없습니다
+                  </SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground mt-1 text-xs">테이블, 반복 필드 그룹 등 데이터를 받는 컴포넌트</p>
+          </div>
+        )}
+
+        {config.action?.dataTransfer?.targetType === "splitPanel" && (
+          <div>
+            <Label>타겟 컴포넌트 ID (선택사항)</Label>
+            <Input
+              value={config.action?.dataTransfer?.targetComponentId || ""}
+              onChange={(e) =>
+                onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", e.target.value)
+              }
+              placeholder="비워두면 첫 번째 수신 가능 컴포넌트로 전달"
+              className="h-8 text-xs"
+            />
+            <p className="text-muted-foreground mt-1 text-xs">
+              반대편 화면의 특정 컴포넌트 ID를 지정하거나, 비워두면 자동으로 첫 번째 수신 가능 컴포넌트로 전달됩니다.
+            </p>
+          </div>
+        )}
+
+        <div>
+          <Label htmlFor="transfer-mode">데이터 전달 모드</Label>
+          <Select
+            value={config.action?.dataTransfer?.mode || "append"}
+            onValueChange={(value) => onUpdateProperty("componentConfig.action.dataTransfer.mode", value)}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="append">추가 (Append)</SelectItem>
+              <SelectItem value="replace">교체 (Replace)</SelectItem>
+              <SelectItem value="merge">병합 (Merge)</SelectItem>
+            </SelectContent>
+          </Select>
+          <p className="text-muted-foreground mt-1 text-xs">기존 데이터를 어떻게 처리할지 선택</p>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="clear-after-transfer">전달 후 소스 선택 초기화</Label>
+            <p className="text-muted-foreground text-xs">데이터 전달 후 소스의 선택을 해제합니다</p>
+          </div>
+          <Switch
+            id="clear-after-transfer"
+            checked={config.action?.dataTransfer?.clearAfterTransfer === true}
+            onCheckedChange={(checked) =>
+              onUpdateProperty("componentConfig.action.dataTransfer.clearAfterTransfer", checked)
+            }
+          />
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="confirm-before-transfer">전달 전 확인 메시지</Label>
+            <p className="text-muted-foreground text-xs">데이터 전달 전 확인 다이얼로그를 표시합니다</p>
+          </div>
+          <Switch
+            id="confirm-before-transfer"
+            checked={config.action?.dataTransfer?.confirmBeforeTransfer === true}
+            onCheckedChange={(checked) =>
+              onUpdateProperty("componentConfig.action.dataTransfer.confirmBeforeTransfer", checked)
+            }
+          />
+        </div>
+
+        {config.action?.dataTransfer?.confirmBeforeTransfer && (
+          <div>
+            <Label htmlFor="confirm-message">확인 메시지</Label>
+            <Input
+              id="confirm-message"
+              placeholder="선택한 항목을 전달하시겠습니까?"
+              value={config.action?.dataTransfer?.confirmMessage || ""}
+              onChange={(e) => onUpdateProperty("componentConfig.action.dataTransfer.confirmMessage", e.target.value)}
+              className="h-8 text-xs"
+            />
+          </div>
+        )}
+
+        <div className="space-y-2">
+          <Label>검증 설정</Label>
+          <div className="space-y-2 rounded-md border p-3">
+            <div className="flex items-center gap-2">
+              <Label htmlFor="min-selection" className="text-xs">
+                최소 선택 개수
+              </Label>
+              <Input
+                id="min-selection"
+                type="number"
+                placeholder="0"
+                value={config.action?.dataTransfer?.validation?.minSelection || ""}
+                onChange={(e) =>
+                  onUpdateProperty(
+                    "componentConfig.action.dataTransfer.validation.minSelection",
+                    parseInt(e.target.value) || 0,
+                  )
+                }
+                className="h-8 w-20 text-xs"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Label htmlFor="max-selection" className="text-xs">
+                최대 선택 개수
+              </Label>
+              <Input
+                id="max-selection"
+                type="number"
+                placeholder="제한없음"
+                value={config.action?.dataTransfer?.validation?.maxSelection || ""}
+                onChange={(e) =>
+                  onUpdateProperty(
+                    "componentConfig.action.dataTransfer.validation.maxSelection",
+                    parseInt(e.target.value) || undefined,
+                  )
+                }
+                className="h-8 w-20 text-xs"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label>추가 데이터 소스 (선택사항)</Label>
+          <p className="text-muted-foreground text-xs">
+            조건부 컨테이너의 카테고리 값 등 추가 데이터를 함께 전달할 수 있습니다
+          </p>
+          <div className="space-y-2 rounded-md border p-3">
+            <div>
+              <Label className="text-xs">추가 컴포넌트</Label>
+              <Select
+                value={config.action?.dataTransfer?.additionalSources?.[0]?.componentId || ""}
+                onValueChange={(value) => {
+                  const currentSources = config.action?.dataTransfer?.additionalSources || [];
+                  const newSources = [...currentSources];
+                  if (newSources.length === 0) {
+                    newSources.push({ componentId: value, fieldName: "" });
+                  } else {
+                    newSources[0] = { ...newSources[0], componentId: value };
+                  }
+                  onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
+                }}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="추가 데이터 컴포넌트 선택 (선택사항)" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__clear__">
+                    <span className="text-muted-foreground">선택 안 함</span>
+                  </SelectItem>
+                  {allComponents
+                    .filter((comp: any) => {
+                      const type = comp.componentType || comp.type || "";
+                      return ["conditional-container", "select-basic", "select", "combobox"].some((t) =>
+                        type.includes(t),
+                      );
+                    })
+                    .map((comp: any) => {
+                      const compType = comp.componentType || comp.type || "unknown";
+                      const compLabel = comp.label || comp.componentConfig?.controlLabel || comp.id;
+                      return (
+                        <SelectItem key={comp.id} value={comp.id}>
+                          <div className="flex items-center gap-2">
+                            <span className="text-xs font-medium">{compLabel}</span>
+                            <span className="text-muted-foreground text-[10px]">({compType})</span>
+                          </div>
+                        </SelectItem>
+                      );
+                    })}
+                </SelectContent>
+              </Select>
+              <p className="text-muted-foreground mt-1 text-xs">
+                조건부 컨테이너, 셀렉트박스 등 (카테고리 값 전달용)
+              </p>
+            </div>
+            <div>
+              <Label htmlFor="additional-field-name" className="text-xs">
+                타겟 필드명 (선택사항)
+              </Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                    {(() => {
+                      const fieldName = config.action?.dataTransfer?.additionalSources?.[0]?.fieldName;
+                      if (!fieldName) return "필드 선택 (비워두면 전체 데이터)";
+                      const cols = mappingTargetColumns.length > 0 ? mappingTargetColumns : currentTableColumns;
+                      const found = cols.find((c) => c.name === fieldName);
+                      return found ? `${found.label || found.name}` : fieldName;
+                    })()}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-[240px] p-0" align="start">
+                  <Command>
+                    <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                    <CommandList>
+                      <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        <CommandItem
+                          value="__none__"
+                          onSelect={() => {
+                            const currentSources = config.action?.dataTransfer?.additionalSources || [];
+                            const newSources = [...currentSources];
+                            if (newSources.length === 0) {
+                              newSources.push({ componentId: "", fieldName: "" });
+                            } else {
+                              newSources[0] = { ...newSources[0], fieldName: "" };
+                            }
+                            onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              !config.action?.dataTransfer?.additionalSources?.[0]?.fieldName ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          <span className="text-muted-foreground">선택 안 함 (전체 데이터 병합)</span>
+                        </CommandItem>
+                        {(mappingTargetColumns.length > 0 ? mappingTargetColumns : currentTableColumns).map((col) => (
+                          <CommandItem
+                            key={col.name}
+                            value={`${col.label || ""} ${col.name}`}
+                            onSelect={() => {
+                              const currentSources = config.action?.dataTransfer?.additionalSources || [];
+                              const newSources = [...currentSources];
+                              if (newSources.length === 0) {
+                                newSources.push({ componentId: "", fieldName: col.name });
+                              } else {
+                                newSources[0] = { ...newSources[0], fieldName: col.name };
+                              }
+                              onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.action?.dataTransfer?.additionalSources?.[0]?.fieldName === col.name
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            <span className="font-medium">{col.label || col.name}</span>
+                            {col.label && col.label !== col.name && (
+                              <span className="text-muted-foreground ml-1 text-[10px]">({col.name})</span>
+                            )}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <p className="text-muted-foreground mt-1 text-xs">추가 데이터가 저장될 타겟 테이블 컬럼</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <Label>필드 매핑 설정</Label>
+          <div className="space-y-1">
+            <Label className="text-xs">타겟 테이블</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                  {config.action?.dataTransfer?.targetTable
+                    ? availableTables.find((t) => t.name === config.action?.dataTransfer?.targetTable)?.label ||
+                      config.action?.dataTransfer?.targetTable
+                    : "타겟 테이블 선택"}
+                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[250px] p-0" align="start">
+                <Command>
+                  <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="py-2 text-center text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
+                    <CommandGroup>
+                      {availableTables.map((table) => (
+                        <CommandItem
+                          key={table.name}
+                          value={`${table.label} ${table.name}`}
+                          onSelect={() => {
+                            onUpdateProperty("componentConfig.action.dataTransfer.targetTable", table.name);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              config.action?.dataTransfer?.targetTable === table.name ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          <span className="font-medium">{table.label}</span>
+                          <span className="text-muted-foreground ml-1">({table.name})</span>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">소스 테이블별 매핑</Label>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 text-[10px]"
+                onClick={() => {
+                  const currentMappings = config.action?.dataTransfer?.multiTableMappings || [];
+                  onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", [
+                    ...currentMappings,
+                    { sourceTable: "", mappingRules: [] },
+                  ]);
+                  setActiveMappingGroupIndex(currentMappings.length);
+                }}
+                disabled={!config.action?.dataTransfer?.targetTable}
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                소스 테이블 추가
+              </Button>
+            </div>
+            <p className="text-muted-foreground text-[10px]">
+              여러 소스 테이블에서 데이터를 전달할 때, 각 테이블별로 매핑 규칙을 설정합니다. 런타임에 소스 테이블을 자동 감지합니다.
+            </p>
+
+            {!config.action?.dataTransfer?.targetTable ? (
+              <div className="rounded-md border border-dashed p-3 text-center">
+                <p className="text-muted-foreground text-xs">먼저 타겟 테이블을 선택하세요.</p>
+              </div>
+            ) : !(config.action?.dataTransfer?.multiTableMappings || []).length ? (
+              <div className="rounded-md border border-dashed p-3 text-center">
+                <p className="text-muted-foreground text-xs">매핑 그룹이 없습니다. 소스 테이블을 추가하세요.</p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <div className="flex flex-wrap gap-1">
+                  {(config.action?.dataTransfer?.multiTableMappings || []).map((group: any, gIdx: number) => (
+                    <div key={gIdx} className="flex items-center gap-0.5">
+                      <Button
+                        type="button"
+                        variant={activeMappingGroupIndex === gIdx ? "default" : "outline"}
+                        size="sm"
+                        className="h-6 text-[10px]"
+                        onClick={() => setActiveMappingGroupIndex(gIdx)}
+                      >
+                        {group.sourceTable
+                          ? availableTables.find((t) => t.name === group.sourceTable)?.label || group.sourceTable
+                          : `그룹 ${gIdx + 1}`}
+                        {group.mappingRules?.length > 0 && (
+                          <span className="bg-primary/20 ml-1 rounded-full px-1 text-[9px]">
+                            {group.mappingRules.length}
+                          </span>
+                        )}
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="text-destructive hover:bg-destructive/10 h-5 w-5"
+                        onClick={() => {
+                          const mappings = [...(config.action?.dataTransfer?.multiTableMappings || [])];
+                          mappings.splice(gIdx, 1);
+                          onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", mappings);
+                          if (activeMappingGroupIndex >= mappings.length) {
+                            setActiveMappingGroupIndex(Math.max(0, mappings.length - 1));
+                          }
+                        }}
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+
+                {(() => {
+                  const multiMappings = config.action?.dataTransfer?.multiTableMappings || [];
+                  const activeGroup = multiMappings[activeMappingGroupIndex];
+                  if (!activeGroup) return null;
+
+                  const activeSourceTable = activeGroup.sourceTable || "";
+                  const activeSourceColumns = mappingSourceColumnsMap[activeSourceTable] || [];
+                  const activeRules: any[] = activeGroup.mappingRules || [];
+
+                  const updateGroupField = (field: string, value: any) => {
+                    const mappings = [...multiMappings];
+                    mappings[activeMappingGroupIndex] = { ...mappings[activeMappingGroupIndex], [field]: value };
+                    onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", mappings);
+                  };
+
+                  return (
+                    <div className="space-y-2 rounded-md border p-3">
+                      <div className="space-y-1">
+                        <Label className="text-xs">소스 테이블</Label>
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                              {activeSourceTable
+                                ? availableTables.find((t) => t.name === activeSourceTable)?.label || activeSourceTable
+                                : "소스 테이블 선택"}
+                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-[250px] p-0" align="start">
+                            <Command>
+                              <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                              <CommandList>
+                                <CommandEmpty className="py-2 text-center text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
+                                <CommandGroup>
+                                  {availableTables.map((table) => (
+                                    <CommandItem
+                                      key={table.name}
+                                      value={`${table.label} ${table.name}`}
+                                      onSelect={async () => {
+                                        updateGroupField("sourceTable", table.name);
+                                        if (!mappingSourceColumnsMap[table.name]) {
+                                          const cols = await loadMappingColumns(table.name);
+                                          setMappingSourceColumnsMap((prev) => ({ ...prev, [table.name]: cols }));
+                                        }
+                                      }}
+                                      className="text-xs"
+                                    >
+                                      <Check
+                                        className={cn(
+                                          "mr-2 h-3 w-3",
+                                          activeSourceTable === table.name ? "opacity-100" : "opacity-0",
+                                        )}
+                                      />
+                                      <span className="font-medium">{table.label}</span>
+                                      <span className="text-muted-foreground ml-1">({table.name})</span>
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+
+                      <div className="space-y-1">
+                        <div className="flex items-center justify-between">
+                          <Label className="text-[10px]">매핑 규칙</Label>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-5 text-[10px]"
+                            onClick={() => {
+                              updateGroupField("mappingRules", [...activeRules, { sourceField: "", targetField: "" }]);
+                            }}
+                            disabled={!activeSourceTable}
+                          >
+                            <Plus className="mr-1 h-3 w-3" />
+                            추가
+                          </Button>
+                        </div>
+
+                        {!activeSourceTable ? (
+                          <p className="text-muted-foreground text-[10px]">소스 테이블을 먼저 선택하세요.</p>
+                        ) : activeRules.length === 0 ? (
+                          <p className="text-muted-foreground text-[10px]">매핑 없음 (동일 필드명 자동 매핑)</p>
+                        ) : (
+                          activeRules.map((rule: any, rIdx: number) => {
+                            const popoverKeyS = `${activeMappingGroupIndex}-${rIdx}-s`;
+                            const popoverKeyT = `${activeMappingGroupIndex}-${rIdx}-t`;
+                            return (
+                              <div key={rIdx} className="bg-background flex items-center gap-2 rounded-md border p-2">
+                                <div className="flex-1">
+                                  <Popover
+                                    open={mappingSourcePopoverOpen[popoverKeyS] || false}
+                                    onOpenChange={(open) =>
+                                      setMappingSourcePopoverOpen((prev) => ({ ...prev, [popoverKeyS]: open }))
+                                    }
+                                  >
+                                    <PopoverTrigger asChild>
+                                      <Button
+                                        variant="outline"
+                                        role="combobox"
+                                        className="h-7 w-full justify-between text-xs"
+                                      >
+                                        {rule.sourceField
+                                          ? activeSourceColumns.find((c) => c.name === rule.sourceField)?.label ||
+                                            rule.sourceField
+                                          : "소스 필드"}
+                                        <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                                      </Button>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-[200px] p-0" align="start">
+                                      <Command>
+                                        <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                                        <CommandList>
+                                          <CommandEmpty className="py-2 text-center text-xs">컬럼 없음</CommandEmpty>
+                                          <CommandGroup>
+                                            {activeSourceColumns.map((col) => (
+                                              <CommandItem
+                                                key={col.name}
+                                                value={`${col.label} ${col.name}`}
+                                                onSelect={() => {
+                                                  const newRules = [...activeRules];
+                                                  newRules[rIdx] = { ...newRules[rIdx], sourceField: col.name };
+                                                  updateGroupField("mappingRules", newRules);
+                                                  setMappingSourcePopoverOpen((prev) => ({
+                                                    ...prev,
+                                                    [popoverKeyS]: false,
+                                                  }));
+                                                }}
+                                                className="text-xs"
+                                              >
+                                                <Check
+                                                  className={cn(
+                                                    "mr-2 h-3 w-3",
+                                                    rule.sourceField === col.name ? "opacity-100" : "opacity-0",
+                                                  )}
+                                                />
+                                                <span>{col.label}</span>
+                                                {col.label !== col.name && (
+                                                  <span className="text-muted-foreground ml-1">({col.name})</span>
+                                                )}
+                                              </CommandItem>
+                                            ))}
+                                          </CommandGroup>
+                                        </CommandList>
+                                      </Command>
+                                    </PopoverContent>
+                                  </Popover>
+                                </div>
+
+                                <span className="text-muted-foreground text-xs">→</span>
+
+                                <div className="flex-1">
+                                  <Popover
+                                    open={mappingTargetPopoverOpen[popoverKeyT] || false}
+                                    onOpenChange={(open) =>
+                                      setMappingTargetPopoverOpen((prev) => ({ ...prev, [popoverKeyT]: open }))
+                                    }
+                                  >
+                                    <PopoverTrigger asChild>
+                                      <Button
+                                        variant="outline"
+                                        role="combobox"
+                                        className="h-7 w-full justify-between text-xs"
+                                      >
+                                        {rule.targetField
+                                          ? mappingTargetColumns.find((c) => c.name === rule.targetField)?.label ||
+                                            rule.targetField
+                                          : "타겟 필드"}
+                                        <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                                      </Button>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-[200px] p-0" align="start">
+                                      <Command>
+                                        <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                                        <CommandList>
+                                          <CommandEmpty className="py-2 text-center text-xs">컬럼 없음</CommandEmpty>
+                                          <CommandGroup>
+                                            {mappingTargetColumns.map((col) => (
+                                              <CommandItem
+                                                key={col.name}
+                                                value={`${col.label} ${col.name}`}
+                                                onSelect={() => {
+                                                  const newRules = [...activeRules];
+                                                  newRules[rIdx] = { ...newRules[rIdx], targetField: col.name };
+                                                  updateGroupField("mappingRules", newRules);
+                                                  setMappingTargetPopoverOpen((prev) => ({
+                                                    ...prev,
+                                                    [popoverKeyT]: false,
+                                                  }));
+                                                }}
+                                                className="text-xs"
+                                              >
+                                                <Check
+                                                  className={cn(
+                                                    "mr-2 h-3 w-3",
+                                                    rule.targetField === col.name ? "opacity-100" : "opacity-0",
+                                                  )}
+                                                />
+                                                <span>{col.label}</span>
+                                                {col.label !== col.name && (
+                                                  <span className="text-muted-foreground ml-1">({col.name})</span>
+                                                )}
+                                              </CommandItem>
+                                            ))}
+                                          </CommandGroup>
+                                        </CommandList>
+                                      </Command>
+                                    </PopoverContent>
+                                  </Popover>
+                                </div>
+
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="text-destructive hover:bg-destructive/10 h-7 w-7"
+                                  onClick={() => {
+                                    const newRules = [...activeRules];
+                                    newRules.splice(rIdx, 1);
+                                    updateGroupField("mappingRules", newRules);
+                                  }}
+                                >
+                                  <X className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            );
+                          })
+                        )}
+                      </div>
+                    </div>
+                  );
+                })()}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
+          <p className="text-xs text-blue-900 dark:text-blue-100">
+            <strong>사용 방법:</strong>
+            <br />
+            1. 소스 컴포넌트에서 데이터를 선택합니다
+            <br />
+            2. 소스 테이블별로 필드 매핑 규칙을 설정합니다
+            <br />
+            3. 이 버튼을 클릭하면 소스 테이블을 자동 감지하여 매핑된 데이터가 타겟으로 전달됩니다
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/components/screen/panels/TablesPanel.tsx

@@ -420,10 +420,7 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
               </div>
 
               {entityJoinTables.map((joinTable, idx) => {
-                // 같은 테이블이 여러 FK로 조인될 수 있으므로 sourceColumn으로 고유 키 생성
+                const uniqueKey = `entity-join-${joinTable.tableName}-${joinTable.joinConfig?.sourceColumn || ''}-${idx}`;
-                const uniqueKey = joinTable.joinConfig?.sourceColumn
-                  ? `entity-join-${joinTable.tableName}-${joinTable.joinConfig.sourceColumn}`
-                  : `entity-join-${joinTable.tableName}-${idx}`;
                 const isExpanded = expandedJoinTables.has(joinTable.tableName);
                 // 검색어로 필터링
                 const filteredColumns = searchTerm

frontend/hooks/useAuth.ts

@@ -161,13 +161,14 @@ export const useAuth = () => {
       setLoading(true);
 
       const token = TokenManager.getToken();
-      if (!token || TokenManager.isTokenExpired(token)) {
+      if (!token) {
-        AuthLogger.log("AUTH_CHECK_FAIL", `refreshUserData: 토큰 ${!token ? "없음" : "만료됨"}`);
+        AuthLogger.log("AUTH_CHECK_FAIL", "refreshUserData: 토큰 없음");
         setUser(null);
         setAuthStatus({ isLoggedIn: false, isAdmin: false });
         setLoading(false);
         return;
       }
+      // 만료된 토큰이라도 apiClient 요청 인터셉터가 자동 갱신하므로 여기서 차단하지 않음
 
       AuthLogger.log("AUTH_CHECK_START", "refreshUserData: API로 인증 상태 확인 시작");
 
@@ -177,6 +178,10 @@ export const useAuth = () => {
       });
 
       try {
+        // /auth/me 성공 = 인증 확인 완료. /auth/status는 보조 정보(isAdmin)만 참조
+        // 두 API를 Promise.all로 호출 시, 토큰 만료 타이밍에 따라
+        // /auth/me는 401→갱신→성공, /auth/status는 200 isAuthenticated:false를 반환하는
+        // 레이스 컨디션이 발생할 수 있으므로, isLoggedIn 판단은 /auth/me 성공 여부로 결정
         const [userInfo, authStatusData] = await Promise.all([fetchCurrentUser(), checkAuthStatus()]);
 
         if (userInfo) {
@@ -184,19 +189,12 @@ export const useAuth = () => {
 
           const isAdminFromUser = userInfo.userId === "plm_admin" || userInfo.userType === "ADMIN";
           const finalAuthStatus = {
-            isLoggedIn: authStatusData.isLoggedIn,
+            isLoggedIn: true,
             isAdmin: authStatusData.isAdmin || isAdminFromUser,
           };
 
           setAuthStatus(finalAuthStatus);
           AuthLogger.log("AUTH_CHECK_SUCCESS", `사용자: ${userInfo.userId}, 인증: ${finalAuthStatus.isLoggedIn}`);
-
-          if (!finalAuthStatus.isLoggedIn) {
-            AuthLogger.log("AUTH_CHECK_FAIL", "API 응답에서 비인증 상태 반환 → 토큰 제거");
-            TokenManager.removeToken();
-            setUser(null);
-            setAuthStatus({ isLoggedIn: false, isAdmin: false });
-          }
         } else {
           AuthLogger.log("AUTH_CHECK_FAIL", "userInfo 조회 실패 → 토큰 기반 임시 인증 유지 시도");
           try {
@@ -412,18 +410,19 @@ export const useAuth = () => {
 
     const token = TokenManager.getToken();
 
-    if (token && !TokenManager.isTokenExpired(token)) {
+    if (token) {
-      AuthLogger.log("AUTH_CHECK_START", `초기 인증 확인: 유효한 토큰 존재 (경로: ${window.location.pathname})`);
+      // 유효/만료 모두 refreshUserData로 처리
+      // apiClient 요청 인터셉터가 만료 토큰을 자동 갱신하므로 여기서 삭제하지 않음
+      const isExpired = TokenManager.isTokenExpired(token);
+      AuthLogger.log(
+        "AUTH_CHECK_START",
+        `초기 인증 확인: 토큰 ${isExpired ? "만료됨 → 갱신 시도" : "유효"} (경로: ${window.location.pathname})`,
+      );
       setAuthStatus({
         isLoggedIn: true,
         isAdmin: false,
       });
       refreshUserData();
-    } else if (token && TokenManager.isTokenExpired(token)) {
-      AuthLogger.log("TOKEN_EXPIRED_DETECTED", `초기 확인 시 만료된 토큰 발견 → 정리 (경로: ${window.location.pathname})`);
-      TokenManager.removeToken();
-      setAuthStatus({ isLoggedIn: false, isAdmin: false });
-      setLoading(false);
     } else {
       AuthLogger.log("AUTH_CHECK_FAIL", `초기 확인: 토큰 없음 (경로: ${window.location.pathname})`);
       setAuthStatus({ isLoggedIn: false, isAdmin: false });

frontend/lib/api/approval.ts

@@ -0,0 +1,453 @@
+/**
+ * 결재 시스템 API 클라이언트
+ * 엔드포인트: /api/approval/*
+ */
+
+// API URL 동적 설정
+const getApiBaseUrl = (): string => {
+  if (process.env.NEXT_PUBLIC_API_URL) {
+    return process.env.NEXT_PUBLIC_API_URL;
+  }
+
+  if (typeof window !== "undefined") {
+    const currentHost = window.location.hostname;
+
+    if (currentHost === "v1.vexplor.com") {
+      return "https://api.vexplor.com/api";
+    }
+
+    if (currentHost === "localhost" || currentHost === "127.0.0.1") {
+      return "http://localhost:8080/api";
+    }
+  }
+
+  return "/api";
+};
+
+const API_BASE = getApiBaseUrl();
+
+function getAuthToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem("authToken") || sessionStorage.getItem("authToken");
+}
+
+function getAuthHeaders(): HeadersInit {
+  const token = getAuthToken();
+  const headers: HeadersInit = { "Content-Type": "application/json" };
+  if (token) {
+    (headers as Record<string, string>)["Authorization"] = `Bearer ${token}`;
+  }
+  return headers;
+}
+
+// ============================================================
+// 공통 타입 정의
+// ============================================================
+
+export interface ApiResponse<T = any> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: string;
+  total?: number;
+  page?: number;
+  limit?: number;
+}
+
+export interface ApprovalDefinition {
+  definition_id: number;
+  definition_name: string;
+  definition_name_eng?: string;
+  description?: string;
+  default_template_id?: number;
+  max_steps: number;
+  allow_self_approval: boolean;
+  allow_cancel: boolean;
+  is_active: string;
+  company_code: string;
+  created_by?: string;
+  created_at: string;
+  updated_by?: string;
+  updated_at: string;
+}
+
+export interface ApprovalLineTemplate {
+  template_id: number;
+  template_name: string;
+  description?: string;
+  definition_id?: number;
+  definition_name?: string;
+  is_active: string;
+  company_code: string;
+  created_by?: string;
+  created_at: string;
+  updated_by?: string;
+  updated_at: string;
+  steps?: ApprovalLineTemplateStep[];
+}
+
+export interface ApprovalLineTemplateStep {
+  step_id: number;
+  template_id: number;
+  step_order: number;
+  approver_type: "user" | "position" | "dept";
+  approver_user_id?: string;
+  approver_position?: string;
+  approver_dept_code?: string;
+  approver_label?: string;
+  company_code: string;
+}
+
+export interface ApprovalRequest {
+  request_id: number;
+  title: string;
+  description?: string;
+  definition_id?: number;
+  definition_name?: string;
+  target_table: string;
+  target_record_id: string;
+  target_record_data?: Record<string, any>;
+  status: "requested" | "in_progress" | "approved" | "rejected" | "cancelled";
+  current_step: number;
+  total_steps: number;
+  requester_id: string;
+  requester_name?: string;
+  requester_dept?: string;
+  completed_at?: string;
+  final_approver_id?: string;
+  final_comment?: string;
+  screen_id?: number;
+  button_component_id?: string;
+  company_code: string;
+  created_at: string;
+  updated_at: string;
+  lines?: ApprovalLine[];
+}
+
+export interface ApprovalLine {
+  line_id: number;
+  request_id: number;
+  step_order: number;
+  approver_id: string;
+  approver_name?: string;
+  approver_position?: string;
+  approver_dept?: string;
+  approver_label?: string;
+  status: "waiting" | "pending" | "approved" | "rejected" | "skipped";
+  comment?: string;
+  processed_at?: string;
+  company_code: string;
+  created_at: string;
+  // 요청 정보 (my-pending 조회 시 포함)
+  title?: string;
+  target_table?: string;
+  target_record_id?: string;
+  requester_name?: string;
+  requester_dept?: string;
+  request_created_at?: string;
+}
+
+export interface CreateApprovalRequestInput {
+  title: string;
+  description?: string;
+  definition_id?: number;
+  target_table: string;
+  target_record_id?: string;
+  target_record_data?: Record<string, any>;
+  screen_id?: number;
+  button_component_id?: string;
+  approval_mode?: "sequential" | "parallel";
+  approvers: {
+    approver_id: string;
+    approver_name?: string;
+    approver_position?: string;
+    approver_dept?: string;
+    approver_label?: string;
+  }[];
+}
+
+// ============================================================
+// 결재 유형 (Definitions) API
+// ============================================================
+
+export async function getApprovalDefinitions(params?: {
+  is_active?: string;
+  search?: string;
+}): Promise<ApiResponse<ApprovalDefinition[]>> {
+  try {
+    const qs = new URLSearchParams();
+    if (params?.is_active) qs.append("is_active", params.is_active);
+    if (params?.search) qs.append("search", params.search);
+
+    const response = await fetch(
+      `${API_BASE}/approval/definitions${qs.toString() ? `?${qs}` : ""}`,
+      { headers: getAuthHeaders(), credentials: "include" }
+    );
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function getApprovalDefinition(id: number): Promise<ApiResponse<ApprovalDefinition>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/definitions/${id}`, {
+      headers: getAuthHeaders(),
+      credentials: "include",
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function createApprovalDefinition(data: {
+  definition_name: string;
+  definition_name_eng?: string;
+  description?: string;
+  default_template_id?: number;
+  max_steps?: number;
+  allow_self_approval?: boolean;
+  allow_cancel?: boolean;
+  is_active?: string;
+}): Promise<ApiResponse<ApprovalDefinition>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/definitions`, {
+      method: "POST",
+      headers: getAuthHeaders(),
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function updateApprovalDefinition(
+  id: number,
+  data: Partial<ApprovalDefinition>
+): Promise<ApiResponse<ApprovalDefinition>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/definitions/${id}`, {
+      method: "PUT",
+      headers: getAuthHeaders(),
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function deleteApprovalDefinition(id: number): Promise<ApiResponse<void>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/definitions/${id}`, {
+      method: "DELETE",
+      headers: getAuthHeaders(),
+      credentials: "include",
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+// ============================================================
+// 결재선 템플릿 (Templates) API
+// ============================================================
+
+export async function getApprovalTemplates(params?: {
+  definition_id?: number;
+  is_active?: string;
+}): Promise<ApiResponse<ApprovalLineTemplate[]>> {
+  try {
+    const qs = new URLSearchParams();
+    if (params?.definition_id) qs.append("definition_id", String(params.definition_id));
+    if (params?.is_active) qs.append("is_active", params.is_active);
+
+    const response = await fetch(
+      `${API_BASE}/approval/templates${qs.toString() ? `?${qs}` : ""}`,
+      { headers: getAuthHeaders(), credentials: "include" }
+    );
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function getApprovalTemplate(id: number): Promise<ApiResponse<ApprovalLineTemplate>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/templates/${id}`, {
+      headers: getAuthHeaders(),
+      credentials: "include",
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function createApprovalTemplate(data: {
+  template_name: string;
+  description?: string;
+  definition_id?: number;
+  is_active?: string;
+  steps?: Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[];
+}): Promise<ApiResponse<ApprovalLineTemplate>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/templates`, {
+      method: "POST",
+      headers: getAuthHeaders(),
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function updateApprovalTemplate(
+  id: number,
+  data: {
+    template_name?: string;
+    description?: string;
+    definition_id?: number;
+    is_active?: string;
+    steps?: Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[];
+  }
+): Promise<ApiResponse<ApprovalLineTemplate>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/templates/${id}`, {
+      method: "PUT",
+      headers: getAuthHeaders(),
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function deleteApprovalTemplate(id: number): Promise<ApiResponse<void>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/templates/${id}`, {
+      method: "DELETE",
+      headers: getAuthHeaders(),
+      credentials: "include",
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+// ============================================================
+// 결재 요청 (Requests) API
+// ============================================================
+
+export async function getApprovalRequests(params?: {
+  status?: string;
+  target_table?: string;
+  target_record_id?: string;
+  requester_id?: string;
+  my_approvals?: boolean;
+  page?: number;
+  limit?: number;
+}): Promise<ApiResponse<ApprovalRequest[]>> {
+  try {
+    const qs = new URLSearchParams();
+    if (params?.status) qs.append("status", params.status);
+    if (params?.target_table) qs.append("target_table", params.target_table);
+    if (params?.target_record_id) qs.append("target_record_id", params.target_record_id);
+    if (params?.requester_id) qs.append("requester_id", params.requester_id);
+    if (params?.my_approvals !== undefined) qs.append("my_approvals", String(params.my_approvals));
+    if (params?.page) qs.append("page", String(params.page));
+    if (params?.limit) qs.append("limit", String(params.limit));
+
+    const response = await fetch(
+      `${API_BASE}/approval/requests${qs.toString() ? `?${qs}` : ""}`,
+      { headers: getAuthHeaders(), credentials: "include" }
+    );
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function getApprovalRequest(id: number): Promise<ApiResponse<ApprovalRequest>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/requests/${id}`, {
+      headers: getAuthHeaders(),
+      credentials: "include",
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function createApprovalRequest(
+  data: CreateApprovalRequestInput
+): Promise<ApiResponse<ApprovalRequest>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/requests`, {
+      method: "POST",
+      headers: getAuthHeaders(),
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function cancelApprovalRequest(id: number): Promise<ApiResponse<void>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/requests/${id}/cancel`, {
+      method: "POST",
+      headers: getAuthHeaders(),
+      credentials: "include",
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+// ============================================================
+// 결재 라인 처리 (Lines) API
+// ============================================================
+
+export async function getMyPendingApprovals(): Promise<ApiResponse<ApprovalLine[]>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/my-pending`, {
+      headers: getAuthHeaders(),
+      credentials: "include",
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function processApprovalLine(
+  lineId: number,
+  data: { action: "approved" | "rejected"; comment?: string }
+): Promise<ApiResponse<void>> {
+  try {
+    const response = await fetch(`${API_BASE}/approval/lines/${lineId}/process`, {
+      method: "POST",
+      headers: getAuthHeaders(),
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+    return await response.json();
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}

frontend/lib/api/client.ts

@@ -329,6 +329,11 @@ apiClient.interceptors.request.use(
         const newToken = await refreshToken();
         if (newToken) {
           config.headers.Authorization = `Bearer ${newToken}`;
+        } else {
+          // 갱신 실패 시 인증 없는 요청을 보내면 TOKEN_MISSING 401 → 즉시 redirectToLogin 연쇄 장애
+          // 요청 자체를 차단하여 호출부의 try/catch에서 처리하도록 함
+          authLog("TOKEN_REFRESH_FAIL", `요청 인터셉터에서 갱신 실패 → 요청 차단 (${config.url})`);
+          return Promise.reject(new Error("TOKEN_REFRESH_FAILED"));
         }
       }
     }

frontend/lib/registry/components/common/ConfigField.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Plus, X } from "lucide-react";
+import { ConfigFieldDefinition, ConfigOption } from "./ConfigPanelTypes";
+
+interface ConfigFieldProps<T = any> {
+  field: ConfigFieldDefinition<T>;
+  value: any;
+  onChange: (key: string, value: any) => void;
+  tableColumns?: ConfigOption[];
+}
+
+export function ConfigField<T>({
+  field,
+  value,
+  onChange,
+  tableColumns,
+}: ConfigFieldProps<T>) {
+  const handleChange = (newValue: any) => {
+    onChange(field.key, newValue);
+  };
+
+  const renderField = () => {
+    switch (field.type) {
+      case "text":
+        return (
+          <Input
+            value={value ?? ""}
+            onChange={(e) => handleChange(e.target.value)}
+            placeholder={field.placeholder}
+            className="h-8 text-xs"
+          />
+        );
+
+      case "number":
+        return (
+          <Input
+            type="number"
+            value={value ?? ""}
+            onChange={(e) =>
+              handleChange(
+                e.target.value === "" ? undefined : Number(e.target.value),
+              )
+            }
+            placeholder={field.placeholder}
+            min={field.min}
+            max={field.max}
+            step={field.step}
+            className="h-8 text-xs"
+          />
+        );
+
+      case "switch":
+        return (
+          <Switch
+            checked={!!value}
+            onCheckedChange={handleChange}
+          />
+        );
+
+      case "select":
+        return (
+          <Select
+            value={value ?? ""}
+            onValueChange={handleChange}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder={field.placeholder || "선택"} />
+            </SelectTrigger>
+            <SelectContent>
+              {(field.options || []).map((opt) => (
+                <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+
+      case "textarea":
+        return (
+          <Textarea
+            value={value ?? ""}
+            onChange={(e) => handleChange(e.target.value)}
+            placeholder={field.placeholder}
+            className="text-xs"
+            rows={3}
+          />
+        );
+
+      case "color":
+        return (
+          <div className="flex items-center gap-2">
+            <input
+              type="color"
+              value={value ?? "#000000"}
+              onChange={(e) => handleChange(e.target.value)}
+              className="h-8 w-8 cursor-pointer rounded border"
+            />
+            <Input
+              value={value ?? ""}
+              onChange={(e) => handleChange(e.target.value)}
+              placeholder="#000000"
+              className="h-8 flex-1 text-xs"
+            />
+          </div>
+        );
+
+      case "slider":
+        return (
+          <div className="flex items-center gap-2">
+            <Input
+              type="number"
+              value={value ?? field.min ?? 0}
+              onChange={(e) => handleChange(Number(e.target.value))}
+              min={field.min}
+              max={field.max}
+              step={field.step}
+              className="h-8 w-20 text-xs"
+            />
+            <span className="text-muted-foreground text-[10px]">
+              {field.min ?? 0} ~ {field.max ?? 100}
+            </span>
+          </div>
+        );
+
+      case "multi-select":
+        return (
+          <div className="space-y-1">
+            {(field.options || []).map((opt) => {
+              const selected = Array.isArray(value) && value.includes(opt.value);
+              return (
+                <label
+                  key={opt.value}
+                  className="flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 hover:bg-muted"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selected}
+                    onChange={() => {
+                      const current = Array.isArray(value) ? [...value] : [];
+                      if (selected) {
+                        handleChange(current.filter((v: string) => v !== opt.value));
+                      } else {
+                        handleChange([...current, opt.value]);
+                      }
+                    }}
+                    className="rounded"
+                  />
+                  <span className="text-xs">{opt.label}</span>
+                </label>
+              );
+            })}
+          </div>
+        );
+
+      case "key-value": {
+        const entries: Array<[string, string]> = Object.entries(
+          (value as Record<string, string>) || {},
+        );
+        return (
+          <div className="space-y-1">
+            {entries.map(([k, v], idx) => (
+              <div key={idx} className="flex items-center gap-1">
+                <Input
+                  value={k}
+                  onChange={(e) => {
+                    const newObj = { ...(value || {}) };
+                    delete newObj[k];
+                    newObj[e.target.value] = v;
+                    handleChange(newObj);
+                  }}
+                  placeholder="키"
+                  className="h-7 flex-1 text-xs"
+                />
+                <Input
+                  value={v}
+                  onChange={(e) => {
+                    handleChange({ ...(value || {}), [k]: e.target.value });
+                  }}
+                  placeholder="값"
+                  className="h-7 flex-1 text-xs"
+                />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={() => {
+                    const newObj = { ...(value || {}) };
+                    delete newObj[k];
+                    handleChange(newObj);
+                  }}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 w-full text-xs"
+              onClick={() => {
+                handleChange({ ...(value || {}), "": "" });
+              }}
+            >
+              <Plus className="mr-1 h-3 w-3" />
+              추가
+            </Button>
+          </div>
+        );
+      }
+
+      case "column-picker": {
+        const options = tableColumns || field.options || [];
+        return (
+          <Select
+            value={value ?? ""}
+            onValueChange={handleChange}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder={field.placeholder || "컬럼 선택"} />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+      }
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <Label className="text-xs font-medium">{field.label}</Label>
+        {field.type === "switch" && renderField()}
+      </div>
+      {field.description && (
+        <p className="text-muted-foreground text-[10px]">{field.description}</p>
+      )}
+      {field.type !== "switch" && renderField()}
+    </div>
+  );
+}

frontend/lib/registry/components/common/ConfigPanelBuilder.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import React from "react";
+import { ConfigPanelBuilderProps } from "./ConfigPanelTypes";
+import { ConfigSection } from "./ConfigSection";
+import { ConfigField } from "./ConfigField";
+
+export function ConfigPanelBuilder<T extends Record<string, any>>({
+  config,
+  onChange,
+  sections,
+  presets,
+  tableColumns,
+  children,
+}: ConfigPanelBuilderProps<T>) {
+  return (
+    <div className="space-y-3">
+      {/* 프리셋 버튼 */}
+      {presets && presets.length > 0 && (
+        <div className="border-b pb-3">
+          <h4 className="mb-2 text-xs font-medium text-muted-foreground">
+            빠른 설정
+          </h4>
+          <div className="flex flex-wrap gap-1">
+            {presets.map((preset, idx) => (
+              <button
+                key={idx}
+                onClick={() => {
+                  Object.entries(preset.values).forEach(([key, value]) => {
+                    onChange(key, value);
+                  });
+                }}
+                className="rounded-full bg-muted px-2.5 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-primary hover:text-primary-foreground"
+                title={preset.description}
+              >
+                {preset.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 섹션 렌더링 */}
+      {sections.map((section) => {
+        if (section.condition && !section.condition(config)) {
+          return null;
+        }
+
+        const visibleFields = section.fields.filter(
+          (field) => !field.condition || field.condition(config),
+        );
+
+        if (visibleFields.length === 0) {
+          return null;
+        }
+
+        return (
+          <ConfigSection key={section.id} section={section}>
+            {visibleFields.map((field) => (
+              <ConfigField
+                key={field.key}
+                field={field}
+                value={(config as any)[field.key]}
+                onChange={onChange}
+                tableColumns={tableColumns}
+              />
+            ))}
+          </ConfigSection>
+        );
+      })}
+
+      {/* 커스텀 children */}
+      {children}
+    </div>
+  );
+}

frontend/lib/registry/components/common/ConfigPanelTypes.ts

@@ -0,0 +1,56 @@
+import React from "react";
+
+export type ConfigFieldType =
+  | "text"
+  | "number"
+  | "switch"
+  | "select"
+  | "textarea"
+  | "color"
+  | "slider"
+  | "multi-select"
+  | "key-value"
+  | "column-picker";
+
+export interface ConfigOption {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+export interface ConfigFieldDefinition<T = any> {
+  key: string;
+  label: string;
+  type: ConfigFieldType;
+  description?: string;
+  placeholder?: string;
+  options?: ConfigOption[];
+  min?: number;
+  max?: number;
+  step?: number;
+  condition?: (config: T) => boolean;
+  disabled?: (config: T) => boolean;
+}
+
+export interface ConfigSectionDefinition<T = any> {
+  id: string;
+  title: string;
+  description?: string;
+  collapsible?: boolean;
+  defaultOpen?: boolean;
+  fields: ConfigFieldDefinition<T>[];
+  condition?: (config: T) => boolean;
+}
+
+export interface ConfigPanelBuilderProps<T = any> {
+  config: T;
+  onChange: (key: string, value: any) => void;
+  sections: ConfigSectionDefinition<T>[];
+  presets?: Array<{
+    label: string;
+    description?: string;
+    values: Partial<T>;
+  }>;
+  tableColumns?: ConfigOption[];
+  children?: React.ReactNode;
+}

frontend/lib/registry/components/common/ConfigSection.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { ConfigSectionDefinition } from "./ConfigPanelTypes";
+
+interface ConfigSectionProps {
+  section: ConfigSectionDefinition;
+  children: React.ReactNode;
+}
+
+export function ConfigSection({ section, children }: ConfigSectionProps) {
+  const [isOpen, setIsOpen] = useState(section.defaultOpen ?? true);
+
+  if (section.collapsible) {
+    return (
+      <div className="border-b pb-3">
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="flex w-full items-center gap-1.5 py-1 text-left"
+        >
+          {isOpen ? (
+            <ChevronDown className="h-3.5 w-3.5 shrink-0" />
+          ) : (
+            <ChevronRight className="h-3.5 w-3.5 shrink-0" />
+          )}
+          <span className="text-sm font-medium">{section.title}</span>
+          {section.description && (
+            <span className="text-muted-foreground ml-auto text-[10px]">
+              {section.description}
+            </span>
+          )}
+        </button>
+        {isOpen && <div className="mt-2 space-y-3">{children}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="border-b pb-3">
+      <div className="mb-2">
+        <h4 className="text-sm font-medium">{section.title}</h4>
+        {section.description && (
+          <p className="text-muted-foreground text-[10px]">
+            {section.description}
+          </p>
+        )}
+      </div>
+      <div className="space-y-3">{children}</div>
+    </div>
+  );
+}

frontend/lib/registry/components/index.ts

@@ -117,6 +117,7 @@ import "./v2-item-routing/ItemRoutingRenderer"; // 품목별 라우팅
 import "./v2-split-line/SplitLineRenderer"; // V2 캔버스 분할선
 import "./v2-bom-tree/BomTreeRenderer"; // BOM 트리 뷰
 import "./v2-bom-item-editor/BomItemEditorRenderer"; // BOM 하위품목 편집기
+import "./v2-approval-step/ApprovalStepRenderer"; // 결재 단계 시각화
 
 /**
  * 컴포넌트 초기화 함수

frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx

@@ -0,0 +1,530 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react";
+import { ComponentRendererProps } from "@/types/component";
+import { ApprovalStepConfig } from "./types";
+import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import {
+  getApprovalRequests,
+  getApprovalRequest,
+  type ApprovalRequest,
+  type ApprovalLine,
+} from "@/lib/api/approval";
+import {
+  Check,
+  X,
+  Clock,
+  SkipForward,
+  Loader2,
+  FileCheck,
+  ChevronDown,
+  ChevronUp,
+  ArrowRight,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface ApprovalStepComponentProps extends ComponentRendererProps {}
+
+interface ApprovalStepData {
+  request: ApprovalRequest;
+  lines: ApprovalLine[];
+  approvalMode: "sequential" | "parallel";
+}
+
+const STATUS_CONFIG = {
+  approved: {
+    label: "승인",
+    icon: Check,
+    bgColor: "bg-emerald-100",
+    borderColor: "border-emerald-500",
+    textColor: "text-emerald-700",
+    iconColor: "text-emerald-600",
+    dotColor: "bg-emerald-500",
+  },
+  rejected: {
+    label: "반려",
+    icon: X,
+    bgColor: "bg-rose-100",
+    borderColor: "border-rose-500",
+    textColor: "text-rose-700",
+    iconColor: "text-rose-600",
+    dotColor: "bg-rose-500",
+  },
+  pending: {
+    label: "결재 대기",
+    icon: Clock,
+    bgColor: "bg-amber-50",
+    borderColor: "border-amber-400",
+    textColor: "text-amber-700",
+    iconColor: "text-amber-500",
+    dotColor: "bg-amber-400",
+  },
+  waiting: {
+    label: "대기",
+    icon: Clock,
+    bgColor: "bg-muted",
+    borderColor: "border-border",
+    textColor: "text-muted-foreground",
+    iconColor: "text-muted-foreground",
+    dotColor: "bg-muted-foreground/40",
+  },
+  skipped: {
+    label: "건너뜀",
+    icon: SkipForward,
+    bgColor: "bg-muted/50",
+    borderColor: "border-border/50",
+    textColor: "text-muted-foreground/70",
+    iconColor: "text-muted-foreground/50",
+    dotColor: "bg-muted-foreground/30",
+  },
+} as const;
+
+const REQUEST_STATUS_CONFIG = {
+  requested: { label: "요청됨", color: "text-blue-600", bg: "bg-blue-50" },
+  in_progress: { label: "진행 중", color: "text-amber-600", bg: "bg-amber-50" },
+  approved: { label: "승인 완료", color: "text-emerald-600", bg: "bg-emerald-50" },
+  rejected: { label: "반려", color: "text-rose-600", bg: "bg-rose-50" },
+  cancelled: { label: "취소", color: "text-muted-foreground", bg: "bg-muted" },
+} as const;
+
+/**
+ * 결재 단계 시각화 컴포넌트
+ * 결재 요청의 각 단계별 상태를 스테퍼 형태로 표시
+ */
+export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
+  component,
+  isDesignMode = false,
+  isSelected = false,
+  onClick,
+  onDragStart,
+  onDragEnd,
+  formData,
+  ...props
+}) => {
+  const componentConfig = (component.componentConfig || {}) as ApprovalStepConfig;
+  const {
+    targetTable,
+    targetRecordIdField,
+    displayMode = "horizontal",
+    showComment = true,
+    showTimestamp = true,
+    showDept = true,
+    compact = false,
+  } = componentConfig;
+
+  const [stepData, setStepData] = useState<ApprovalStepData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const targetRecordId = targetRecordIdField && formData
+    ? String(formData[targetRecordIdField] || "")
+    : "";
+
+  const fetchApprovalData = useCallback(async () => {
+    if (isDesignMode || !targetTable || !targetRecordId) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await getApprovalRequests({
+        target_table: targetTable,
+        target_record_id: targetRecordId,
+        limit: 1,
+      });
+
+      if (res.success && res.data && res.data.length > 0) {
+        const latestRequest = res.data[0];
+        const detailRes = await getApprovalRequest(latestRequest.request_id);
+
+        if (detailRes.success && detailRes.data) {
+          const request = detailRes.data;
+          const lines = request.lines || [];
+          const approvalMode =
+            (request.target_record_data?.approval_mode as "sequential" | "parallel") || "sequential";
+
+          setStepData({ request, lines, approvalMode });
+        }
+      } else {
+        setStepData(null);
+      }
+    } catch (err) {
+      setError("결재 정보를 불러올 수 없습니다.");
+    } finally {
+      setLoading(false);
+    }
+  }, [isDesignMode, targetTable, targetRecordId]);
+
+  useEffect(() => {
+    fetchApprovalData();
+  }, [fetchApprovalData]);
+
+  // 디자인 모드용 샘플 데이터
+  useEffect(() => {
+    if (isDesignMode) {
+      setStepData({
+        request: {
+          request_id: 0,
+          title: "결재 요청 샘플",
+          target_table: "sample_table",
+          target_record_id: "1",
+          status: "in_progress",
+          current_step: 2,
+          total_steps: 3,
+          requester_id: "admin",
+          requester_name: "홍길동",
+          requester_dept: "개발팀",
+          company_code: "SAMPLE",
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+        },
+        lines: [
+          {
+            line_id: 1, request_id: 0, step_order: 1,
+            approver_id: "user1", approver_name: "김부장", approver_position: "부장", approver_dept: "경영지원팀",
+            status: "approved", comment: "확인했습니다.",
+            processed_at: new Date(Date.now() - 86400000).toISOString(),
+            company_code: "SAMPLE", created_at: new Date().toISOString(),
+          },
+          {
+            line_id: 2, request_id: 0, step_order: 2,
+            approver_id: "user2", approver_name: "이과장", approver_position: "과장", approver_dept: "기획팀",
+            status: "pending",
+            company_code: "SAMPLE", created_at: new Date().toISOString(),
+          },
+          {
+            line_id: 3, request_id: 0, step_order: 3,
+            approver_id: "user3", approver_name: "박대리", approver_position: "대리", approver_dept: "개발팀",
+            status: "waiting",
+            company_code: "SAMPLE", created_at: new Date().toISOString(),
+          },
+        ],
+        approvalMode: "sequential",
+      });
+    }
+  }, [isDesignMode]);
+
+  const componentStyle: React.CSSProperties = {
+    position: "absolute",
+    left: `${component.style?.positionX || 0}px`,
+    top: `${component.style?.positionY || 0}px`,
+    width: `${component.style?.width || 500}px`,
+    height: "auto",
+    minHeight: `${component.style?.height || 80}px`,
+    zIndex: component.style?.positionZ || 1,
+    cursor: isDesignMode ? "pointer" : "default",
+    border: isSelected ? "2px solid #3b82f6" : "none",
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isDesignMode) {
+      e.stopPropagation();
+      onClick?.(e);
+    }
+  };
+
+  const domProps = filterDOMProps(props);
+
+  const formatDate = (dateStr?: string | null) => {
+    if (!dateStr) return "";
+    const d = new Date(dateStr);
+    return `${d.getMonth() + 1}/${d.getDate()} ${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  };
+
+  if (!isDesignMode && !targetTable) {
+    return (
+      <div style={componentStyle} onClick={handleClick} {...domProps}>
+        <div className="flex items-center justify-center rounded-md border border-dashed border-border p-4 text-xs text-muted-foreground">
+          대상 테이블이 설정되지 않았습니다.
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div style={componentStyle} onClick={handleClick} {...domProps}>
+        <div className="flex items-center justify-center gap-2 p-3 text-xs text-muted-foreground">
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          결재 정보 로딩 중...
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={componentStyle} onClick={handleClick} {...domProps}>
+        <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-xs text-destructive">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  if (!stepData) {
+    if (!isDesignMode && !targetRecordId) {
+      return (
+        <div style={componentStyle} onClick={handleClick} {...domProps}>
+          <div className="flex items-center gap-2 rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground">
+            <FileCheck className="h-3.5 w-3.5" />
+            레코드를 선택하면 결재 현황이 표시됩니다.
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div style={componentStyle} onClick={handleClick} {...domProps}>
+        <div className="flex items-center gap-2 rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground">
+          <FileCheck className="h-3.5 w-3.5" />
+          결재 요청 내역이 없습니다.
+        </div>
+      </div>
+    );
+  }
+
+  const { request, lines, approvalMode } = stepData;
+  const reqStatus = REQUEST_STATUS_CONFIG[request.status] || REQUEST_STATUS_CONFIG.requested;
+
+  return (
+    <div style={componentStyle} onClick={handleClick} {...domProps}>
+      <div className="rounded-md border border-border bg-card">
+        {/* 헤더 - 요약 */}
+        <button
+          type="button"
+          className="flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-muted/50"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (!isDesignMode) setExpanded((prev) => !prev);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <FileCheck className="h-4 w-4 text-muted-foreground" />
+            <span className="text-xs font-medium">{request.title}</span>
+            <span className={cn("rounded-full px-2 py-0.5 text-[10px] font-medium", reqStatus.bg, reqStatus.color)}>
+              {reqStatus.label}
+            </span>
+            {approvalMode === "parallel" && (
+              <span className="rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-600">
+                동시결재
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <span className="text-[10px]">
+              {request.current_step}/{request.total_steps}단계
+            </span>
+            {expanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
+          </div>
+        </button>
+
+        {/* 스테퍼 영역 */}
+        <div className={cn("border-t border-border", compact ? "px-2 py-1.5" : "px-3 py-2.5")}>
+          {displayMode === "horizontal" ? (
+            <HorizontalStepper
+              lines={lines}
+              approvalMode={approvalMode}
+              compact={compact}
+              showDept={showDept}
+            />
+          ) : (
+            <VerticalStepper
+              lines={lines}
+              approvalMode={approvalMode}
+              compact={compact}
+              showDept={showDept}
+              showComment={showComment}
+              showTimestamp={showTimestamp}
+              formatDate={formatDate}
+            />
+          )}
+        </div>
+
+        {/* 확장 영역 - 상세 정보 */}
+        {expanded && (
+          <div className="border-t border-border px-3 py-2">
+            <div className="space-y-2">
+              <div className="flex items-center gap-4 text-[11px] text-muted-foreground">
+                <span>상신자: {request.requester_name || request.requester_id}</span>
+                {request.requester_dept && <span>부서: {request.requester_dept}</span>}
+                <span>상신일: {formatDate(request.created_at)}</span>
+              </div>
+              {displayMode === "horizontal" && lines.length > 0 && (
+                <div className="mt-1.5 space-y-1">
+                  {lines.map((line) => {
+                    const sc = STATUS_CONFIG[line.status] || STATUS_CONFIG.waiting;
+                    return (
+                      <div key={line.line_id} className="flex items-start gap-2 text-[11px]">
+                        <span className={cn("mt-0.5 inline-block h-2 w-2 shrink-0 rounded-full", sc.dotColor)} />
+                        <span className="font-medium">{line.approver_name || line.approver_id}</span>
+                        <span className={cn("font-medium", sc.textColor)}>{sc.label}</span>
+                        {showTimestamp && line.processed_at && (
+                          <span className="text-muted-foreground">{formatDate(line.processed_at)}</span>
+                        )}
+                        {showComment && line.comment && (
+                          <span className="text-muted-foreground">- {line.comment}</span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/* ========== 가로형 스테퍼 ========== */
+interface StepperProps {
+  lines: ApprovalLine[];
+  approvalMode: "sequential" | "parallel";
+  compact: boolean;
+  showDept: boolean;
+  showComment?: boolean;
+  showTimestamp?: boolean;
+  formatDate?: (d?: string | null) => string;
+}
+
+const HorizontalStepper: React.FC<StepperProps> = ({ lines, approvalMode, compact, showDept }) => {
+  if (lines.length === 0) {
+    return <div className="py-1 text-center text-[11px] text-muted-foreground">결재선 없음</div>;
+  }
+
+  return (
+    <div className="flex items-center gap-0 overflow-x-auto">
+      {lines.map((line, idx) => {
+        const sc = STATUS_CONFIG[line.status] || STATUS_CONFIG.waiting;
+        const StatusIcon = sc.icon;
+        const isLast = idx === lines.length - 1;
+
+        return (
+          <React.Fragment key={line.line_id}>
+            <div className="flex shrink-0 flex-col items-center gap-0.5">
+              {/* 아이콘 원 */}
+              <div
+                className={cn(
+                  "flex items-center justify-center rounded-full border-2 transition-all",
+                  sc.bgColor,
+                  sc.borderColor,
+                  compact ? "h-6 w-6" : "h-8 w-8"
+                )}
+              >
+                <StatusIcon className={cn(sc.iconColor, compact ? "h-3 w-3" : "h-4 w-4")} />
+              </div>
+              {/* 결재자 이름 */}
+              <span className={cn("max-w-[60px] truncate text-center font-medium", compact ? "text-[9px]" : "text-[11px]")}>
+                {line.approver_name || line.approver_id}
+              </span>
+              {/* 직급/부서 */}
+              {showDept && !compact && (line.approver_position || line.approver_dept) && (
+                <span className="max-w-[70px] truncate text-center text-[9px] text-muted-foreground">
+                  {line.approver_position || line.approver_dept}
+                </span>
+              )}
+            </div>
+
+            {/* 연결선 */}
+            {!isLast && (
+              <div className="mx-1 flex shrink-0 items-center">
+                {approvalMode === "parallel" ? (
+                  <div className="flex h-[1px] w-4 items-center border-t border-dashed border-muted-foreground/40" />
+                ) : (
+                  <ArrowRight className="h-3 w-3 text-muted-foreground/40" />
+                )}
+              </div>
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};
+
+/* ========== 세로형 스테퍼 ========== */
+const VerticalStepper: React.FC<StepperProps> = ({
+  lines,
+  approvalMode,
+  compact,
+  showDept,
+  showComment,
+  showTimestamp,
+  formatDate,
+}) => {
+  if (lines.length === 0) {
+    return <div className="py-1 text-center text-[11px] text-muted-foreground">결재선 없음</div>;
+  }
+
+  return (
+    <div className="space-y-0">
+      {lines.map((line, idx) => {
+        const sc = STATUS_CONFIG[line.status] || STATUS_CONFIG.waiting;
+        const StatusIcon = sc.icon;
+        const isLast = idx === lines.length - 1;
+
+        return (
+          <div key={line.line_id} className="flex gap-3">
+            {/* 타임라인 바 */}
+            <div className="flex flex-col items-center">
+              <div
+                className={cn(
+                  "flex shrink-0 items-center justify-center rounded-full border-2",
+                  sc.bgColor,
+                  sc.borderColor,
+                  compact ? "h-5 w-5" : "h-7 w-7"
+                )}
+              >
+                <StatusIcon className={cn(sc.iconColor, compact ? "h-2.5 w-2.5" : "h-3.5 w-3.5")} />
+              </div>
+              {!isLast && (
+                <div
+                  className={cn(
+                    "w-[2px] flex-1",
+                    approvalMode === "parallel"
+                      ? "border-l border-dashed border-muted-foreground/30"
+                      : "bg-muted-foreground/20",
+                    compact ? "min-h-[12px]" : "min-h-[20px]"
+                  )}
+                />
+              )}
+            </div>
+
+            {/* 결재자 정보 */}
+            <div className={cn("pb-2", compact ? "pb-1" : "pb-3")}>
+              <div className="flex items-center gap-2">
+                <span className={cn("font-medium", compact ? "text-[10px]" : "text-xs")}>
+                  {line.approver_name || line.approver_id}
+                </span>
+                {showDept && (line.approver_position || line.approver_dept) && (
+                  <span className="text-[10px] text-muted-foreground">
+                    {[line.approver_position, line.approver_dept].filter(Boolean).join(" / ")}
+                  </span>
+                )}
+                <span className={cn("rounded px-1.5 py-0.5 text-[9px] font-medium", sc.bgColor, sc.textColor)}>
+                  {sc.label}
+                </span>
+              </div>
+              {showTimestamp && line.processed_at && formatDate && (
+                <div className="mt-0.5 text-[10px] text-muted-foreground">
+                  {formatDate(line.processed_at)}
+                </div>
+              )}
+              {showComment && line.comment && (
+                <div className="mt-0.5 text-[10px] text-muted-foreground">
+                  &quot;{line.comment}&quot;
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export const ApprovalStepWrapper: React.FC<ApprovalStepComponentProps> = (props) => {
+  return <ApprovalStepComponent {...props} />;
+};

frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx

@@ -0,0 +1,369 @@
+"use client";
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Check, ChevronsUpDown, Table2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { ApprovalStepConfig } from "./types";
+
+export interface ApprovalStepConfigPanelProps {
+  config: ApprovalStepConfig;
+  onChange: (config: Partial<ApprovalStepConfig>) => void;
+  tables?: any[];
+  allTables?: any[];
+  screenTableName?: string;
+  tableColumns?: any[];
+}
+
+export const ApprovalStepConfigPanel: React.FC<ApprovalStepConfigPanelProps> = ({
+  config,
+  onChange,
+  screenTableName,
+}) => {
+  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+  const [availableColumns, setAvailableColumns] = useState<Array<{ columnName: string; label: string }>>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);
+
+  const handleChange = (key: keyof ApprovalStepConfig, value: any) => {
+    onChange({ [key]: value });
+  };
+
+  const targetTableName = config.targetTable || screenTableName;
+
+  // 테이블 목록 가져오기 - tableTypeApi 사용 (다른 ConfigPanel과 동일)
+  useEffect(() => {
+    const fetchTables = async () => {
+      setLoadingTables(true);
+      try {
+        const response = await tableTypeApi.getTables();
+        setAvailableTables(
+          response.map((table: any) => ({
+            tableName: table.tableName,
+            displayName: table.displayName || table.tableName,
+          }))
+        );
+      } catch (error) {
+        console.error("테이블 목록 가져오기 실패:", error);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    fetchTables();
+  }, []);
+
+  // 선택된 테이블의 컬럼 로드 - tableManagementApi 사용 (다른 ConfigPanel과 동일)
+  useEffect(() => {
+    if (!targetTableName) {
+      setAvailableColumns([]);
+      return;
+    }
+
+    const fetchColumns = async () => {
+      setLoadingColumns(true);
+      try {
+        const result = await tableManagementApi.getColumnList(targetTableName);
+        if (result.success && result.data) {
+          const columns = Array.isArray(result.data) ? result.data : result.data.columns;
+          if (columns && Array.isArray(columns)) {
+            setAvailableColumns(
+              columns.map((col: any) => ({
+                columnName: col.columnName || col.column_name || col.name,
+                label: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
+              }))
+            );
+          }
+        }
+      } catch (error) {
+        console.error("컬럼 목록 가져오기 실패:", error);
+        setAvailableColumns([]);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    fetchColumns();
+  }, [targetTableName]);
+
+  const handleTableChange = (newTableName: string) => {
+    if (newTableName === targetTableName) return;
+    handleChange("targetTable", newTableName);
+    handleChange("targetRecordIdField", "");
+    setTableComboboxOpen(false);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="text-sm font-medium">결재 단계 설정</div>
+
+      <div className="space-y-6">
+        {/* 대상 테이블 선택 - TableListConfigPanel과 동일한 Combobox */}
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-sm font-semibold">데이터 소스</h3>
+            <p className="text-muted-foreground text-[10px]">
+              결재 상태를 조회할 대상 테이블을 선택하세요.
+            </p>
+          </div>
+          <hr className="border-border" />
+          <div className="space-y-2">
+            <Label className="text-xs">대상 테이블</Label>
+            <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={tableComboboxOpen}
+                  className="h-8 w-full justify-between text-xs"
+                  disabled={loadingTables}
+                >
+                  <div className="flex items-center gap-2 truncate">
+                    <Table2 className="h-3 w-3 shrink-0" />
+                    <span className="truncate">
+                      {loadingTables
+                        ? "테이블 로딩 중..."
+                        : targetTableName
+                          ? availableTables.find((t) => t.tableName === targetTableName)?.displayName ||
+                            targetTableName
+                          : "테이블 선택"}
+                    </span>
+                  </div>
+                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="p-0"
+                style={{ width: "var(--radix-popover-trigger-width)" }}
+                align="start"
+              >
+                <Command>
+                  <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup>
+                      {availableTables.map((table) => (
+                        <CommandItem
+                          key={table.tableName}
+                          value={`${table.tableName} ${table.displayName}`}
+                          onSelect={() => handleTableChange(table.tableName)}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              targetTableName === table.tableName ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span>{table.displayName}</span>
+                            {table.displayName !== table.tableName && (
+                              <span className="text-[10px] text-gray-400">{table.tableName}</span>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            {screenTableName && targetTableName !== screenTableName && (
+              <div className="flex items-center justify-between rounded bg-amber-50 px-2 py-1">
+                <span className="text-[10px] text-amber-700">
+                  화면 기본 테이블({screenTableName})과 다른 테이블을 사용 중
+                </span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 px-1.5 text-[10px] text-amber-700 hover:text-amber-900"
+                  onClick={() => handleTableChange(screenTableName)}
+                >
+                  기본으로
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 레코드 ID 필드 선택 - 동일한 Combobox 패턴 */}
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-sm font-semibold">레코드 식별</h3>
+            <p className="text-muted-foreground text-[10px]">
+              결재 대상 레코드를 식별할 PK 컬럼을 선택하세요.
+            </p>
+          </div>
+          <hr className="border-border" />
+          <div className="space-y-2">
+            <Label className="text-xs">레코드 ID 필드명</Label>
+            {targetTableName ? (
+              <Popover open={columnComboboxOpen} onOpenChange={setColumnComboboxOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={columnComboboxOpen}
+                    className="h-8 w-full justify-between text-xs"
+                    disabled={loadingColumns}
+                  >
+                    <span className="truncate">
+                      {loadingColumns
+                        ? "컬럼 로딩 중..."
+                        : config.targetRecordIdField
+                          ? availableColumns.find((c) => c.columnName === config.targetRecordIdField)?.label ||
+                            config.targetRecordIdField
+                          : "컬럼 선택"}
+                    </span>
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                  className="p-0"
+                  style={{ width: "var(--radix-popover-trigger-width)" }}
+                  align="start"
+                >
+                  <Command>
+                    <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                    <CommandList>
+                      <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        {availableColumns.map((col) => (
+                          <CommandItem
+                            key={col.columnName}
+                            value={`${col.columnName} ${col.label}`}
+                            onSelect={() => {
+                              handleChange("targetRecordIdField", col.columnName);
+                              setColumnComboboxOpen(false);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.targetRecordIdField === col.columnName ? "opacity-100" : "opacity-0"
+                              )}
+                            />
+                            <div className="flex flex-col">
+                              <span>{col.label}</span>
+                              {col.label !== col.columnName && (
+                                <span className="text-[10px] text-gray-400">{col.columnName}</span>
+                              )}
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            ) : (
+              <p className="text-muted-foreground text-[10px]">
+                대상 테이블을 먼저 선택하세요.
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* 표시 모드 */}
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-sm font-semibold">표시 설정</h3>
+            <p className="text-muted-foreground text-[10px]">
+              결재 단계의 표시 방식을 설정합니다.
+            </p>
+          </div>
+          <hr className="border-border" />
+          <div className="space-y-2">
+            <Label className="text-xs">표시 모드</Label>
+            <Select
+              value={config.displayMode || "horizontal"}
+              onValueChange={(v) => handleChange("displayMode", v)}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="표시 모드 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="horizontal">가로형 스테퍼</SelectItem>
+                <SelectItem value="vertical">세로형 타임라인</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 옵션 체크박스들 */}
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">표시 옵션</Label>
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="showDept"
+                checked={config.showDept !== false}
+                onCheckedChange={(checked) => handleChange("showDept", !!checked)}
+              />
+              <Label htmlFor="showDept" className="text-xs font-normal">
+                부서/직급 표시
+              </Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="showComment"
+                checked={config.showComment !== false}
+                onCheckedChange={(checked) => handleChange("showComment", !!checked)}
+              />
+              <Label htmlFor="showComment" className="text-xs font-normal">
+                결재 코멘트 표시
+              </Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="showTimestamp"
+                checked={config.showTimestamp !== false}
+                onCheckedChange={(checked) => handleChange("showTimestamp", !!checked)}
+              />
+              <Label htmlFor="showTimestamp" className="text-xs font-normal">
+                처리 시각 표시
+              </Label>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="compact"
+                checked={config.compact || false}
+                onCheckedChange={(checked) => handleChange("compact", !!checked)}
+              />
+              <Label htmlFor="compact" className="text-xs font-normal">
+                콤팩트 모드 (작게 표시)
+              </Label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/lib/registry/components/v2-approval-step/ApprovalStepRenderer.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2ApprovalStepDefinition } from "./index";
+import { ApprovalStepComponent } from "./ApprovalStepComponent";
+
+/**
+ * ApprovalStep 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class ApprovalStepRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2ApprovalStepDefinition;
+
+  render(): React.ReactElement {
+    return <ApprovalStepComponent {...this.props} renderer={this} />;
+  }
+}
+
+ApprovalStepRenderer.registerSelf();

frontend/lib/registry/components/v2-approval-step/index.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import type { WebType } from "@/types/screen";
+import { ApprovalStepWrapper } from "./ApprovalStepComponent";
+import { ApprovalStepConfigPanel } from "./ApprovalStepConfigPanel";
+import { ApprovalStepConfig } from "./types";
+
+/**
+ * ApprovalStep 컴포넌트 정의
+ * 결재 단계를 시각적으로 표시하는 스테퍼 컴포넌트
+ */
+export const V2ApprovalStepDefinition = createComponentDefinition({
+  id: "v2-approval-step",
+  name: "결재 단계",
+  nameEng: "ApprovalStep Component",
+  description: "결재 요청의 각 단계별 상태를 스테퍼 형태로 시각화합니다",
+  category: ComponentCategory.DISPLAY,
+  webType: "text",
+  component: ApprovalStepWrapper,
+  defaultConfig: {
+    targetTable: "",
+    targetRecordIdField: "",
+    displayMode: "horizontal",
+    showComment: true,
+    showTimestamp: true,
+    showDept: true,
+    compact: false,
+  },
+  defaultSize: { width: 500, height: 100 },
+  configPanel: ApprovalStepConfigPanel,
+  icon: "GitBranchPlus",
+  tags: ["결재", "승인", "단계", "스테퍼", "워크플로우"],
+  version: "1.0.0",
+  author: "개발팀",
+});
+
+export type { ApprovalStepConfig } from "./types";
+export { ApprovalStepComponent } from "./ApprovalStepComponent";
+export { ApprovalStepRenderer } from "./ApprovalStepRenderer";

frontend/lib/registry/components/v2-approval-step/types.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { ComponentConfig } from "@/types/component";
+
+/**
+ * ApprovalStep 컴포넌트 설정 타입
+ * 결재 단계를 시각적으로 표시하는 컴포넌트
+ */
+export interface ApprovalStepConfig extends ComponentConfig {
+  targetTable?: string;
+  targetRecordIdField?: string;
+  displayMode?: "horizontal" | "vertical";
+  showComment?: boolean;
+  showTimestamp?: boolean;
+  showDept?: boolean;
+  compact?: boolean;
+}

frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx

@@ -585,7 +585,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       toast.dismiss();
 
       // UI 전환 액션 및 모달 액션은 로딩 토스트 표시하지 않음
-      const silentActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan"];
+      const silentActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan", "approval"];
       if (!silentActions.includes(actionConfig.type)) {
         currentLoadingToastRef.current = toast.loading(
           actionConfig.type === "save"

frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { SplitPanelLayoutConfig } from "../types";
+
+export interface CommonConfigTabProps {
+  config: SplitPanelLayoutConfig;
+  onChange?: (key: string, value: any) => void;
+  updateConfig: (updates: Partial<SplitPanelLayoutConfig>) => void;
+  updateRightPanel: (updates: Partial<SplitPanelLayoutConfig["rightPanel"]>) => void;
+}
+
+export const CommonConfigTab: React.FC<CommonConfigTabProps> = ({
+  config,
+  updateConfig,
+  updateRightPanel,
+}) => {
+  const relationshipType = config.rightPanel?.relation?.type || "detail";
+
+  return (
+    <div className="space-y-6">
+      {/* 관계 타입 선택 */}
+      <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-4">
+        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">우측 패널 표시 방식</h3>
+        <p className="text-muted-foreground text-xs">좌측 항목 선택 시 우측에 어떤 형태로 데이터를 보여줄지 설정합니다</p>
+        <Select
+          value={relationshipType}
+          onValueChange={(value: "join" | "detail") => {
+            updateRightPanel({
+              relation: { ...config.rightPanel?.relation, type: value },
+            });
+          }}
+        >
+          <SelectTrigger className="h-10 bg-white">
+            <SelectValue placeholder="표시 방식 선택">
+              {relationshipType === "detail" ? "선택 시 표시" : "연관 목록"}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="detail">
+              <div className="flex flex-col py-1">
+                <span className="text-sm font-medium">선택 시 표시</span>
+                <span className="text-xs text-gray-500">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="join">
+              <div className="flex flex-col py-1">
+                <span className="text-sm font-medium">연관 목록</span>
+                <span className="text-xs text-gray-500">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
+              </div>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 레이아웃 설정 */}
+      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
+        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">레이아웃</h3>
+        <div className="space-y-2">
+          <Label>좌측 패널 너비: {config.splitRatio || 30}%</Label>
+          <Slider
+            value={[config.splitRatio || 30]}
+            onValueChange={(value) => updateConfig({ splitRatio: value[0] })}
+            min={20}
+            max={80}
+            step={5}
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <Label>크기 조절 가능</Label>
+          <Switch
+            checked={config.resizable ?? true}
+            onCheckedChange={(checked) => updateConfig({ resizable: checked })}
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <Label>자동 데이터 로드</Label>
+          <Switch
+            checked={config.autoLoad ?? true}
+            onCheckedChange={(checked) => updateConfig({ autoLoad: checked })}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx

@@ -0,0 +1,606 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Check, ChevronsUpDown, ChevronRight, Database, Link2, Move, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { SplitPanelLayoutConfig } from "../types";
+import { PanelInlineComponent } from "../types";
+import { ColumnInfo } from "@/types/screen";
+import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
+import { DndContext, closestCenter, type DragEndEvent } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
+import { SortableColumnRow, ScreenSelector } from "./SharedComponents";
+
+export interface LeftPanelConfigTabProps {
+  config: SplitPanelLayoutConfig;
+  onChange: (config: SplitPanelLayoutConfig) => void;
+  updateLeftPanel: (updates: Partial<SplitPanelLayoutConfig["leftPanel"]>) => void;
+  screenTableName?: string;
+  allTables: any[];
+  leftTableOpen: boolean;
+  setLeftTableOpen: (open: boolean) => void;
+  localTitles: { left: string; right: string };
+  setLocalTitles: (fn: (prev: { left: string; right: string }) => { left: string; right: string }) => void;
+  isUserEditing: boolean;
+  setIsUserEditing: (v: boolean) => void;
+  leftTableColumns: ColumnInfo[];
+  entityJoinColumns: Record<string, {
+    availableColumns: Array<{ tableName: string; columnName: string; columnLabel: string; dataType: string; joinAlias: string; suggestedLabel: string }>;
+    joinTables: Array<{ tableName: string; currentDisplayColumn: string; joinConfig?: any; availableColumns: Array<{ columnName: string; columnLabel: string; dataType: string; inputType?: string; description?: string }> }>;
+  }>;
+  menuObjid?: number;
+}
+
+export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
+  config,
+  onChange,
+  updateLeftPanel,
+  screenTableName,
+  allTables,
+  leftTableOpen,
+  setLeftTableOpen,
+  localTitles,
+  setLocalTitles,
+  setIsUserEditing,
+  leftTableColumns,
+  entityJoinColumns,
+  menuObjid,
+}) => {
+  const dbNumericTypes = ["numeric", "decimal", "integer", "bigint", "double precision", "real", "smallint", "int4", "int8", "float4", "float8"];
+  const inputNumericTypes = ["number", "decimal", "currency", "integer"];
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
+        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">좌측 패널 설정 (마스터)</h3>
+
+        <div className="space-y-2">
+          <Label className="text-xs font-medium">표시 테이블</Label>
+          <Popover open={leftTableOpen} onOpenChange={setLeftTableOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={leftTableOpen}
+                className="h-9 w-full justify-between text-xs"
+              >
+                <div className="flex items-center gap-2 truncate">
+                  <Database className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  <span className="truncate">
+                    {config.leftPanel?.tableName
+                      ? allTables.find((t) => (t.tableName || t.table_name) === config.leftPanel?.tableName)?.tableLabel ||
+                        allTables.find((t) => (t.tableName || t.table_name) === config.leftPanel?.tableName)?.displayName ||
+                        config.leftPanel?.tableName
+                      : "테이블을 선택하세요"}
+                  </span>
+                </div>
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[300px] p-0" align="start">
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                <CommandList>
+                  <CommandEmpty className="py-3 text-center text-xs text-muted-foreground">
+                    테이블을 찾을 수 없습니다.
+                  </CommandEmpty>
+                  {screenTableName && (
+                    <CommandGroup heading="기본 (화면 테이블)">
+                      <CommandItem
+                        value={screenTableName}
+                        onSelect={() => {
+                          updateLeftPanel({ tableName: screenTableName, columns: [] });
+                          setLeftTableOpen(false);
+                        }}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                        {allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
+                          allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
+                          screenTableName}
+                      </CommandItem>
+                    </CommandGroup>
+                  )}
+                  <CommandGroup heading="전체 테이블">
+                    {allTables
+                      .filter((t) => (t.tableName || t.table_name) !== screenTableName)
+                      .map((table) => {
+                        const tableName = table.tableName || table.table_name;
+                        const displayName = table.tableLabel || table.displayName || tableName;
+                        return (
+                          <CommandItem
+                            key={tableName}
+                            value={tableName}
+                            onSelect={() => {
+                              updateLeftPanel({ tableName, columns: [] });
+                              setLeftTableOpen(false);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                config.leftPanel?.tableName === tableName ? "opacity-100" : "opacity-0"
+                              )}
+                            />
+                            <Database className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
+                            <span className="truncate">{displayName}</span>
+                          </CommandItem>
+                        );
+                      })}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          {config.leftPanel?.tableName && config.leftPanel?.tableName !== screenTableName && (
+            <p className="text-[10px] text-muted-foreground">
+              화면 기본 테이블이 아닌 다른 테이블의 데이터를 표시합니다.
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <Label>패널 제목</Label>
+          <Input
+            value={localTitles.left}
+            onChange={(e) => {
+              setIsUserEditing(true);
+              setLocalTitles((prev) => ({ ...prev, left: e.target.value }));
+            }}
+            onBlur={() => {
+              setIsUserEditing(false);
+              updateLeftPanel({ title: localTitles.left });
+            }}
+            placeholder="좌측 패널 제목"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label>표시 모드</Label>
+          <Select
+            value={config.leftPanel?.displayMode || "list"}
+            onValueChange={(value: "list" | "table" | "custom") => updateLeftPanel({ displayMode: value })}
+          >
+            <SelectTrigger className="h-10 bg-white">
+              <SelectValue placeholder="표시 모드 선택">
+                {(config.leftPanel?.displayMode || "list") === "list" ? "목록 (LIST)" : (config.leftPanel?.displayMode || "list") === "table" ? "테이블 (TABLE)" : "커스텀 (CUSTOM)"}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="list">
+                <div className="flex flex-col py-1">
+                  <span className="text-sm font-medium">목록 (LIST)</span>
+                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="table">
+                <div className="flex flex-col py-1">
+                  <span className="text-sm font-medium">테이블 (TABLE)</span>
+                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="custom">
+                <div className="flex flex-col py-1">
+                  <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
+                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          {config.leftPanel?.displayMode === "custom" && (
+            <p className="text-xs text-amber-600">
+              화면 디자이너에서 좌측 패널에 컴포넌트를 드래그하여 배치하세요.
+            </p>
+          )}
+        </div>
+
+        {config.leftPanel?.displayMode === "custom" && (
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+            {!config.leftPanel?.components || config.leftPanel.components.length === 0 ? (
+              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
+                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
+                <p className="text-muted-foreground text-xs">
+                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {config.leftPanel.components.map((comp: PanelInlineComponent) => (
+                  <div
+                    key={comp.id}
+                    className="flex items-center justify-between rounded-md border bg-background p-2"
+                  >
+                    <div className="flex-1">
+                      <p className="text-xs font-medium">{comp.label || comp.componentType}</p>
+                      <p className="text-muted-foreground text-[10px]">
+                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
+                      </p>
+                    </div>
+                    <Button
+                      onClick={() => {
+                        const updatedComponents = (config.leftPanel?.components || []).filter(
+                          (c: PanelInlineComponent) => c.id !== comp.id
+                        );
+                        onChange({
+                          ...config,
+                          leftPanel: {
+                            ...config.leftPanel,
+                            components: updatedComponents,
+                          },
+                        });
+                      }}
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {config.leftPanel?.displayMode !== "custom" && (() => {
+          const selectedColumns = config.leftPanel?.columns || [];
+          const filteredTableColumns = leftTableColumns.filter((c) => !["company_code", "company_name"].includes(c.columnName));
+          const unselectedColumns = filteredTableColumns.filter((c) => !selectedColumns.some((sc) => sc.name === c.columnName));
+
+          const handleLeftDragEnd = (event: DragEndEvent) => {
+            const { active, over } = event;
+            if (over && active.id !== over.id) {
+              const oldIndex = selectedColumns.findIndex((c) => c.name === active.id);
+              const newIndex = selectedColumns.findIndex((c) => c.name === over.id);
+              if (oldIndex !== -1 && newIndex !== -1) {
+                updateLeftPanel({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) });
+              }
+            }
+          };
+
+          return (
+            <div className="space-y-2">
+              <Label className="text-xs font-medium">표시할 컬럼 ({selectedColumns.length}개 선택)</Label>
+              <div className="max-h-[400px] overflow-y-auto rounded-md border p-2">
+                {leftTableColumns.length === 0 ? (
+                  <p className="text-muted-foreground py-2 text-center text-xs">컬럼 로딩 중...</p>
+                ) : (
+                  <>
+                    {selectedColumns.length > 0 && (
+                      <DndContext collisionDetection={closestCenter} onDragEnd={handleLeftDragEnd}>
+                        <SortableContext items={selectedColumns.map((c) => c.name)} strategy={verticalListSortingStrategy}>
+                          <div className="space-y-1">
+                            {selectedColumns.map((col, index) => {
+                              const colInfo = leftTableColumns.find((c) => c.columnName === col.name);
+                              const isNumeric = colInfo && (
+                                dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") ||
+                                inputNumericTypes.includes(colInfo.input_type?.toLowerCase() || "") ||
+                                inputNumericTypes.includes(colInfo.webType?.toLowerCase() || "")
+                              );
+                              return (
+                                <SortableColumnRow
+                                  key={col.name}
+                                  id={col.name}
+                                  col={col}
+                                  index={index}
+                                  isNumeric={!!isNumeric}
+                                  isEntityJoin={!!(col as any).isEntityJoin}
+                                  onLabelChange={(value) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], label: value };
+                                    updateLeftPanel({ columns: newColumns });
+                                  }}
+                                  onWidthChange={(value) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], width: value };
+                                    updateLeftPanel({ columns: newColumns });
+                                  }}
+                                  onFormatChange={(checked) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", thousandSeparator: checked } };
+                                    updateLeftPanel({ columns: newColumns });
+                                  }}
+                                  onRemove={() => updateLeftPanel({ columns: selectedColumns.filter((_, i) => i !== index) })}
+                                />
+                              );
+                            })}
+                          </div>
+                        </SortableContext>
+                      </DndContext>
+                    )}
+
+                    {selectedColumns.length > 0 && unselectedColumns.length > 0 && (
+                      <div className="border-border/60 my-2 flex items-center gap-2 border-t pt-2">
+                        <span className="text-muted-foreground text-[10px]">미선택 컬럼</span>
+                      </div>
+                    )}
+
+                    <div className="space-y-0.5">
+                      {unselectedColumns.map((column) => (
+                        <div
+                          key={column.columnName}
+                          className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
+                          onClick={() => {
+                            updateLeftPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
+                          }}
+                        >
+                          <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
+                          <span className="text-muted-foreground truncate text-xs">{column.columnLabel || column.columnName}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    {(() => {
+                      const leftTable = config.leftPanel?.tableName || screenTableName;
+                      const joinData = leftTable ? entityJoinColumns[leftTable] : null;
+                      if (!joinData || joinData.joinTables.length === 0) return null;
+
+                      return joinData.joinTables.map((joinTable, tableIndex) => {
+                        const joinColumnsToShow = joinTable.availableColumns.filter((column) => {
+                          const matchingJoinColumn = joinData.availableColumns.find(
+                            (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                          );
+                          if (!matchingJoinColumn) return false;
+                          return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias);
+                        });
+                        const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length;
+
+                        if (joinColumnsToShow.length === 0 && addedCount === 0) return null;
+
+                        return (
+                          <details key={`join-${tableIndex}`} className="group">
+                            <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
+                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
+                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
+                              {addedCount > 0 && (
+                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
+                              )}
+                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
+                            </summary>
+                            <div className="space-y-0.5 pt-1">
+                              {joinColumnsToShow.map((column, colIndex) => {
+                                const matchingJoinColumn = joinData.availableColumns.find(
+                                  (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                                );
+                                if (!matchingJoinColumn) return null;
+
+                                return (
+                                  <div
+                                    key={colIndex}
+                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
+                                    onClick={() => {
+                                      updateLeftPanel({
+                                        columns: [...selectedColumns, {
+                                          name: matchingJoinColumn.joinAlias,
+                                          label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
+                                          width: 100,
+                                          isEntityJoin: true,
+                                          joinInfo: {
+                                            sourceTable: leftTable!,
+                                            sourceColumn: (joinTable as any).joinConfig?.sourceColumn || "",
+                                            referenceTable: matchingJoinColumn.tableName,
+                                            joinAlias: matchingJoinColumn.joinAlias,
+                                          },
+                                        }],
+                                      });
+                                    }}
+                                  >
+                                    <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
+                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                                  </div>
+                                );
+                              })}
+                              {joinColumnsToShow.length === 0 && (
+                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
+                              )}
+                            </div>
+                          </details>
+                        );
+                      });
+                    })()}
+                  </>
+                )}
+              </div>
+            </div>
+          );
+        })()}
+      </div>
+
+      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
+        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">좌측 패널 데이터 필터링</h3>
+        <p className="text-muted-foreground text-xs">특정 컬럼 값으로 좌측 패널 데이터를 필터링합니다</p>
+        <DataFilterConfigPanel
+          tableName={config.leftPanel?.tableName || screenTableName}
+          columns={leftTableColumns.map(
+            (col) =>
+              ({
+                columnName: col.columnName,
+                columnLabel: col.columnLabel || col.columnName,
+                dataType: col.dataType || "text",
+                input_type: (col as any).input_type,
+              }) as any,
+          )}
+          config={config.leftPanel?.dataFilter}
+          onConfigChange={(dataFilter) => updateLeftPanel({ dataFilter })}
+          menuObjid={menuObjid}
+        />
+      </div>
+
+      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
+        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">좌측 패널 버튼 설정</h3>
+
+        <div className="grid grid-cols-4 gap-2">
+          <div className="flex items-center gap-1">
+            <Checkbox
+              id="left-showSearch"
+              checked={config.leftPanel?.showSearch ?? false}
+              onCheckedChange={(checked) => updateLeftPanel({ showSearch: !!checked })}
+            />
+            <label htmlFor="left-showSearch" className="text-xs">검색</label>
+          </div>
+          <div className="flex items-center gap-1">
+            <Checkbox
+              id="left-showAdd"
+              checked={config.leftPanel?.showAdd ?? false}
+              onCheckedChange={(checked) => updateLeftPanel({ showAdd: !!checked })}
+            />
+            <label htmlFor="left-showAdd" className="text-xs">추가</label>
+          </div>
+          <div className="flex items-center gap-1">
+            <Checkbox
+              id="left-showEdit"
+              checked={config.leftPanel?.showEdit ?? true}
+              onCheckedChange={(checked) => updateLeftPanel({ showEdit: !!checked })}
+            />
+            <label htmlFor="left-showEdit" className="text-xs">수정</label>
+          </div>
+          <div className="flex items-center gap-1">
+            <Checkbox
+              id="left-showDelete"
+              checked={config.leftPanel?.showDelete ?? true}
+              onCheckedChange={(checked) => updateLeftPanel({ showDelete: !!checked })}
+            />
+            <label htmlFor="left-showDelete" className="text-xs">삭제</label>
+          </div>
+        </div>
+
+        {config.leftPanel?.showAdd && (
+          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
+            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">추가 버튼 설정</h3>
+            <div className="space-y-2">
+              <div className="space-y-1">
+                <Label className="text-[10px]">추가 모드</Label>
+                <Select
+                  value={config.leftPanel?.addButton?.mode || "auto"}
+                  onValueChange={(value: "auto" | "modal") =>
+                    updateLeftPanel({
+                      addButton: { ...config.leftPanel?.addButton, enabled: true, mode: value },
+                    })
+                  }
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">자동 (내장 폼)</SelectItem>
+                    <SelectItem value="modal">모달 화면</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {config.leftPanel?.addButton?.mode === "modal" && (
+                <div className="space-y-1">
+                  <Label className="text-[10px]">추가 모달 화면</Label>
+                  <ScreenSelector
+                    value={config.leftPanel?.addButton?.modalScreenId}
+                    onChange={(screenId) =>
+                      updateLeftPanel({
+                        addButton: { ...config.leftPanel?.addButton, enabled: true, mode: "modal", modalScreenId: screenId },
+                      })
+                    }
+                  />
+                </div>
+              )}
+
+              <div className="space-y-1">
+                <Label className="text-[10px]">버튼 라벨</Label>
+                <Input
+                  value={config.leftPanel?.addButton?.buttonLabel || ""}
+                  onChange={(e) =>
+                    updateLeftPanel({
+                      addButton: {
+                        ...config.leftPanel?.addButton,
+                        enabled: true,
+                        mode: config.leftPanel?.addButton?.mode || "auto",
+                        buttonLabel: e.target.value || undefined,
+                      },
+                    })
+                  }
+                  placeholder="추가"
+                  className="h-7 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {(config.leftPanel?.showEdit ?? true) && (
+          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
+            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">수정 버튼 설정</h3>
+            <div className="space-y-2">
+              <div className="space-y-1">
+                <Label className="text-[10px]">수정 모드</Label>
+                <Select
+                  value={config.leftPanel?.editButton?.mode || "auto"}
+                  onValueChange={(value: "auto" | "modal") =>
+                    updateLeftPanel({
+                      editButton: { ...config.leftPanel?.editButton, enabled: true, mode: value },
+                    })
+                  }
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">자동 (인라인)</SelectItem>
+                    <SelectItem value="modal">모달 화면</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {config.leftPanel?.editButton?.mode === "modal" && (
+                <div className="space-y-1">
+                  <Label className="text-[10px]">수정 모달 화면</Label>
+                  <ScreenSelector
+                    value={config.leftPanel?.editButton?.modalScreenId}
+                    onChange={(screenId) =>
+                      updateLeftPanel({
+                        editButton: { ...config.leftPanel?.editButton, enabled: true, mode: "modal", modalScreenId: screenId },
+                      })
+                    }
+                  />
+                </div>
+              )}
+
+              <div className="space-y-1">
+                <Label className="text-[10px]">버튼 라벨</Label>
+                <Input
+                  value={config.leftPanel?.editButton?.buttonLabel || ""}
+                  onChange={(e) =>
+                    updateLeftPanel({
+                      editButton: {
+                        ...config.leftPanel?.editButton,
+                        enabled: true,
+                        mode: config.leftPanel?.editButton?.mode || "auto",
+                        buttonLabel: e.target.value || undefined,
+                      },
+                    })
+                  }
+                  placeholder="수정"
+                  className="h-7 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx

@@ -0,0 +1,801 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Check, ChevronsUpDown, ChevronRight, Link2, Move, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { SplitPanelLayoutConfig } from "../types";
+import { PanelInlineComponent } from "../types";
+import { ColumnInfo, TableInfo } from "@/types/screen";
+import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
+import { DndContext, closestCenter, type DragEndEvent } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
+import { SortableColumnRow, ScreenSelector, GroupByColumnsSelector } from "./SharedComponents";
+
+export interface RightPanelConfigTabProps {
+  config: SplitPanelLayoutConfig;
+  onChange: (config: SplitPanelLayoutConfig) => void;
+  updateRightPanel: (updates: Partial<SplitPanelLayoutConfig["rightPanel"]>) => void;
+  relationshipType: "join" | "detail";
+  localTitles: { left: string; right: string };
+  setLocalTitles: (fn: (prev: { left: string; right: string }) => { left: string; right: string }) => void;
+  setIsUserEditing: (v: boolean) => void;
+  rightTableOpen: boolean;
+  setRightTableOpen: (open: boolean) => void;
+  availableRightTables: TableInfo[];
+  rightTableColumns: ColumnInfo[];
+  entityJoinColumns: Record<string, {
+    availableColumns: Array<{ tableName: string; columnName: string; columnLabel: string; dataType: string; joinAlias: string; suggestedLabel: string }>;
+    joinTables: Array<{ tableName: string; currentDisplayColumn: string; joinConfig?: any; availableColumns: Array<{ columnName: string; columnLabel: string; dataType: string; inputType?: string; description?: string }> }>;
+  }>;
+  menuObjid?: number;
+  renderAdditionalTabs?: () => React.ReactNode;
+}
+
+export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
+  config,
+  onChange,
+  updateRightPanel,
+  relationshipType,
+  localTitles,
+  setLocalTitles,
+  setIsUserEditing,
+  rightTableOpen,
+  setRightTableOpen,
+  availableRightTables,
+  rightTableColumns,
+  entityJoinColumns,
+  menuObjid,
+  renderAdditionalTabs,
+}) => {
+  const dbNumericTypes = ["numeric", "decimal", "integer", "bigint", "double precision", "real", "smallint", "int4", "int8", "float4", "float8"];
+  const inputNumericTypes = ["number", "decimal", "currency", "integer"];
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
+        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">우측 패널 설정 ({relationshipType === "detail" ? "선택 시 표시" : "연관 목록"})</h3>
+
+        <div className="space-y-2">
+          <Label>패널 제목</Label>
+          <Input
+            value={localTitles.right}
+            onChange={(e) => {
+              setIsUserEditing(true);
+              setLocalTitles((prev) => ({ ...prev, right: e.target.value }));
+            }}
+            onBlur={() => {
+              setIsUserEditing(false);
+              updateRightPanel({ title: localTitles.right });
+            }}
+            placeholder="우측 패널 제목"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label>우측 패널 테이블</Label>
+          <Popover open={rightTableOpen} onOpenChange={setRightTableOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={rightTableOpen}
+                className="w-full justify-between"
+              >
+                {config.rightPanel?.tableName || "테이블을 선택하세요"}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-full p-0">
+              <Command>
+                <CommandInput placeholder="테이블 검색..." />
+                <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup className="max-h-[200px] overflow-auto">
+                  {availableRightTables.map((table) => {
+                    const tableName = (table as any).tableName || (table as any).table_name;
+                    return (
+                    <CommandItem
+                      key={tableName}
+                      value={`${(table as any).displayName || ""} ${tableName}`}
+                      onSelect={() => {
+                        updateRightPanel({ tableName });
+                        setRightTableOpen(false);
+                      }}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          config.rightPanel?.tableName === tableName ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                      {(table as any).displayName || tableName}
+                      {(table as any).displayName && <span className="ml-2 text-xs text-gray-500">({tableName})</span>}
+                    </CommandItem>
+                  );
+                  })}
+                </CommandGroup>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        <div className="space-y-2">
+          <Label>표시 모드</Label>
+          <Select
+            value={config.rightPanel?.displayMode || "list"}
+            onValueChange={(value: "list" | "table" | "custom") => updateRightPanel({ displayMode: value })}
+          >
+            <SelectTrigger className="h-10 bg-white">
+              <SelectValue placeholder="표시 모드 선택">
+                {(config.rightPanel?.displayMode || "list") === "list" ? "목록 (LIST)" : (config.rightPanel?.displayMode || "list") === "table" ? "테이블 (TABLE)" : "커스텀 (CUSTOM)"}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="list">
+                <div className="flex flex-col py-1">
+                  <span className="text-sm font-medium">목록 (LIST)</span>
+                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="table">
+                <div className="flex flex-col py-1">
+                  <span className="text-sm font-medium">테이블 (TABLE)</span>
+                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="custom">
+                <div className="flex flex-col py-1">
+                  <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
+                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          {config.rightPanel?.displayMode === "custom" && (
+            <p className="text-xs text-amber-600">
+              화면 디자이너에서 우측 패널에 컴포넌트를 드래그하여 배치하세요.
+            </p>
+          )}
+        </div>
+
+        {config.rightPanel?.displayMode === "custom" && (
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+            {!config.rightPanel?.components || config.rightPanel.components.length === 0 ? (
+              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
+                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
+                <p className="text-muted-foreground text-xs">
+                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {config.rightPanel.components.map((comp: PanelInlineComponent) => (
+                  <div
+                    key={comp.id}
+                    className="flex items-center justify-between rounded-md border bg-background p-2"
+                  >
+                    <div className="flex-1">
+                      <p className="text-xs font-medium">{comp.label || comp.componentType}</p>
+                      <p className="text-muted-foreground text-[10px]">
+                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
+                      </p>
+                    </div>
+                    <Button
+                      onClick={() => {
+                        const updatedComponents = (config.rightPanel?.components || []).filter(
+                          (c: PanelInlineComponent) => c.id !== comp.id
+                        );
+                        onChange({
+                          ...config,
+                          rightPanel: {
+                            ...config.rightPanel,
+                            components: updatedComponents,
+                          },
+                        });
+                      }}
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {(config.rightPanel?.displayMode || "list") === "list" && (
+          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+            <Label className="text-sm font-semibold">요약 표시 설정</Label>
+            <div className="space-y-2">
+              <Label className="text-xs">표시할 컬럼 개수</Label>
+              <Input
+                type="number"
+                min="1"
+                max="10"
+                value={config.rightPanel?.summaryColumnCount ?? 3}
+                onChange={(e) => {
+                  const value = parseInt(e.target.value) || 3;
+                  updateRightPanel({ summaryColumnCount: value });
+                }}
+                className="bg-white"
+              />
+              <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
+            </div>
+            <div className="flex items-center justify-between space-x-2">
+              <div className="flex-1">
+                <Label className="text-xs">라벨 표시</Label>
+                <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
+              </div>
+              <Checkbox
+                checked={config.rightPanel?.summaryShowLabel ?? true}
+                onCheckedChange={(checked) => {
+                  updateRightPanel({ summaryShowLabel: checked as boolean });
+                }}
+              />
+            </div>
+          </div>
+        )}
+
+        {config.rightPanel?.displayMode !== "custom" && (() => {
+          const selectedColumns = config.rightPanel?.columns || [];
+          const filteredTableColumns = rightTableColumns.filter((c) => !["company_code", "company_name"].includes(c.columnName));
+          const unselectedColumns = filteredTableColumns.filter((c) => !selectedColumns.some((sc) => sc.name === c.columnName));
+
+          const handleRightDragEnd = (event: DragEndEvent) => {
+            const { active, over } = event;
+            if (over && active.id !== over.id) {
+              const oldIndex = selectedColumns.findIndex((c) => c.name === active.id);
+              const newIndex = selectedColumns.findIndex((c) => c.name === over.id);
+              if (oldIndex !== -1 && newIndex !== -1) {
+                updateRightPanel({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) });
+              }
+            }
+          };
+
+          return (
+            <div className="space-y-2">
+              <Label className="text-xs font-medium">표시할 컬럼 ({selectedColumns.length}개 선택)</Label>
+              <div className="max-h-[400px] overflow-y-auto rounded-md border p-2">
+                {rightTableColumns.length === 0 ? (
+                  <p className="text-muted-foreground py-2 text-center text-xs">테이블을 선택해주세요</p>
+                ) : (
+                  <>
+                    {selectedColumns.length > 0 && (
+                      <DndContext collisionDetection={closestCenter} onDragEnd={handleRightDragEnd}>
+                        <SortableContext items={selectedColumns.map((c) => c.name)} strategy={verticalListSortingStrategy}>
+                          <div className="space-y-1">
+                            {selectedColumns.map((col, index) => {
+                              const colInfo = rightTableColumns.find((c) => c.columnName === col.name);
+                              const isNumeric = colInfo && (
+                                dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") ||
+                                inputNumericTypes.includes(colInfo.input_type?.toLowerCase() || "") ||
+                                inputNumericTypes.includes(colInfo.webType?.toLowerCase() || "")
+                              );
+                              return (
+                                <SortableColumnRow
+                                  key={col.name}
+                                  id={col.name}
+                                  col={col}
+                                  index={index}
+                                  isNumeric={!!isNumeric}
+                                  isEntityJoin={!!(col as any).isEntityJoin}
+                                  onLabelChange={(value) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], label: value };
+                                    updateRightPanel({ columns: newColumns });
+                                  }}
+                                  onWidthChange={(value) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], width: value };
+                                    updateRightPanel({ columns: newColumns });
+                                  }}
+                                  onFormatChange={(checked) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", thousandSeparator: checked } };
+                                    updateRightPanel({ columns: newColumns });
+                                  }}
+                                  onRemove={() => updateRightPanel({ columns: selectedColumns.filter((_, i) => i !== index) })}
+                                  onShowInSummaryChange={(checked) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], showInSummary: checked };
+                                    updateRightPanel({ columns: newColumns });
+                                  }}
+                                  onShowInDetailChange={(checked) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], showInDetail: checked };
+                                    updateRightPanel({ columns: newColumns });
+                                  }}
+                                />
+                              );
+                            })}
+                          </div>
+                        </SortableContext>
+                      </DndContext>
+                    )}
+
+                    {selectedColumns.length > 0 && unselectedColumns.length > 0 && (
+                      <div className="border-border/60 my-2 flex items-center gap-2 border-t pt-2">
+                        <span className="text-muted-foreground text-[10px]">미선택 컬럼</span>
+                      </div>
+                    )}
+
+                    <div className="space-y-0.5">
+                      {unselectedColumns.map((column) => (
+                        <div
+                          key={column.columnName}
+                          className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
+                          onClick={() => {
+                            updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
+                          }}
+                        >
+                          <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
+                          <span className="text-muted-foreground truncate text-xs">{column.columnLabel || column.columnName}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    {(() => {
+                      const rightTable = config.rightPanel?.tableName;
+                      const joinData = rightTable ? entityJoinColumns[rightTable] : null;
+                      if (!joinData || joinData.joinTables.length === 0) return null;
+
+                      return joinData.joinTables.map((joinTable, tableIndex) => {
+                        const joinColumnsToShow = joinTable.availableColumns.filter((column) => {
+                          const matchingJoinColumn = joinData.availableColumns.find(
+                            (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                          );
+                          if (!matchingJoinColumn) return false;
+                          return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias);
+                        });
+                        const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length;
+
+                        if (joinColumnsToShow.length === 0 && addedCount === 0) return null;
+
+                        return (
+                          <details key={`join-${tableIndex}`} className="group">
+                            <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
+                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
+                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
+                              {addedCount > 0 && (
+                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
+                              )}
+                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
+                            </summary>
+                            <div className="space-y-0.5 pt-1">
+                              {joinColumnsToShow.map((column, colIndex) => {
+                                const matchingJoinColumn = joinData.availableColumns.find(
+                                  (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                                );
+                                if (!matchingJoinColumn) return null;
+
+                                return (
+                                  <div
+                                    key={colIndex}
+                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
+                                    onClick={() => {
+                                      updateRightPanel({
+                                        columns: [...selectedColumns, {
+                                          name: matchingJoinColumn.joinAlias,
+                                          label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
+                                          width: 100,
+                                          isEntityJoin: true,
+                                          joinInfo: {
+                                            sourceTable: rightTable!,
+                                            sourceColumn: (joinTable as any).joinConfig?.sourceColumn || "",
+                                            referenceTable: matchingJoinColumn.tableName,
+                                            joinAlias: matchingJoinColumn.joinAlias,
+                                          },
+                                        }],
+                                      });
+                                    }}
+                                  >
+                                    <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
+                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                                  </div>
+                                );
+                              })}
+                              {joinColumnsToShow.length === 0 && (
+                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
+                              )}
+                            </div>
+                          </details>
+                        );
+                      });
+                    })()}
+                  </>
+                )}
+              </div>
+            </div>
+          );
+        })()}
+      </div>
+
+      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
+        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">우측 패널 데이터 필터링</h3>
+        <p className="text-muted-foreground text-xs">특정 컬럼 값으로 우측 패널 데이터를 필터링합니다</p>
+        <DataFilterConfigPanel
+          tableName={config.rightPanel?.tableName}
+          columns={rightTableColumns.map(
+            (col) =>
+              ({
+                columnName: col.columnName,
+                columnLabel: col.columnLabel || col.columnName,
+                dataType: col.dataType || "text",
+                input_type: (col as any).input_type,
+              }) as any,
+          )}
+          config={config.rightPanel?.dataFilter}
+          onConfigChange={(dataFilter) => updateRightPanel({ dataFilter })}
+          menuObjid={menuObjid}
+        />
+      </div>
+
+      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">중복 데이터 제거</h3>
+            <p className="text-muted-foreground text-xs">같은 값을 가진 데이터를 하나로 통합하여 표시</p>
+          </div>
+          <Switch
+            checked={config.rightPanel?.deduplication?.enabled ?? false}
+            onCheckedChange={(checked) => {
+              if (checked) {
+                updateRightPanel({
+                  deduplication: {
+                    enabled: true,
+                    groupByColumn: "",
+                    keepStrategy: "latest",
+                    sortColumn: "start_date",
+                  },
+                });
+              } else {
+                updateRightPanel({ deduplication: undefined });
+              }
+            }}
+          />
+        </div>
+
+        {config.rightPanel?.deduplication?.enabled && (
+          <div className="space-y-3 border-l-2 pl-4">
+            <div>
+              <Label className="text-xs">중복 제거 기준 컬럼</Label>
+              <Select
+                value={config.rightPanel?.deduplication?.groupByColumn || ""}
+                onValueChange={(value) =>
+                  updateRightPanel({
+                    deduplication: { ...config.rightPanel?.deduplication!, groupByColumn: value },
+                  })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="기준 컬럼 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {rightTableColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.columnLabel || col.columnName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-muted-foreground mt-1 text-[10px]">
+                이 컬럼의 값이 같은 데이터들 중 하나만 표시합니다
+              </p>
+            </div>
+
+            <div>
+              <Label className="text-xs">유지 전략</Label>
+              <Select
+                value={config.rightPanel?.deduplication?.keepStrategy || "latest"}
+                onValueChange={(value: any) =>
+                  updateRightPanel({
+                    deduplication: { ...config.rightPanel?.deduplication!, keepStrategy: value },
+                  })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="latest">최신 데이터 (가장 최근)</SelectItem>
+                  <SelectItem value="earliest">최초 데이터 (가장 오래된)</SelectItem>
+                  <SelectItem value="current_date">현재 유효한 데이터 (날짜 기준)</SelectItem>
+                  <SelectItem value="base_price">기준단가로 설정된 데이터</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {(config.rightPanel?.deduplication?.keepStrategy === "latest" ||
+              config.rightPanel?.deduplication?.keepStrategy === "earliest") && (
+              <div>
+                <Label className="text-xs">정렬 기준 컬럼</Label>
+                <Select
+                  value={config.rightPanel?.deduplication?.sortColumn || ""}
+                  onValueChange={(value) =>
+                    updateRightPanel({
+                      deduplication: { ...config.rightPanel?.deduplication!, sortColumn: value },
+                    })
+                  }
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue placeholder="컬럼 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {rightTableColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.columnLabel || col.columnName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* 수정 버튼 설정 */}
+      {config.rightPanel?.showEdit && (
+        <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-4">
+          <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">수정 버튼 설정</h3>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Label className="text-xs">수정 모드</Label>
+              <Select
+                value={config.rightPanel?.editButton?.mode || "auto"}
+                onValueChange={(value: "auto" | "modal") =>
+                  updateRightPanel({
+                    editButton: {
+                      ...config.rightPanel?.editButton,
+                      enabled: config.rightPanel?.editButton?.enabled ?? true,
+                      mode: value,
+                    },
+                  })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="auto">자동 (인라인)</SelectItem>
+                  <SelectItem value="modal">모달 화면</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {config.rightPanel?.editButton?.mode === "modal" && (
+              <GroupByColumnsSelector
+                tableName={config.rightPanel?.tableName}
+                selectedColumns={config.rightPanel?.editButton?.groupByColumns || []}
+                onChange={(columns) => {
+                  updateRightPanel({
+                    editButton: {
+                      ...config.rightPanel?.editButton!,
+                      groupByColumns: columns,
+                      enabled: config.rightPanel?.editButton?.enabled ?? true,
+                      mode: config.rightPanel?.editButton?.mode || "auto",
+                    },
+                  });
+                }}
+              />
+            )}
+
+            {config.rightPanel?.editButton?.mode === "modal" && (
+              <div className="space-y-1">
+                <Label className="text-xs">수정 모달 화면</Label>
+                <ScreenSelector
+                  value={config.rightPanel?.editButton?.modalScreenId}
+                  onChange={(screenId) =>
+                    updateRightPanel({
+                      editButton: {
+                        ...config.rightPanel?.editButton!,
+                        modalScreenId: screenId,
+                      },
+                    })
+                  }
+                />
+              </div>
+            )}
+
+            <div className="space-y-1">
+              <Label className="text-xs">버튼 라벨</Label>
+              <Input
+                value={config.rightPanel?.editButton?.buttonLabel || ""}
+                onChange={(e) =>
+                  updateRightPanel({
+                    editButton: {
+                      ...config.rightPanel?.editButton!,
+                      buttonLabel: e.target.value || undefined,
+                      enabled: config.rightPanel?.editButton?.enabled ?? true,
+                      mode: config.rightPanel?.editButton?.mode || "auto",
+                    },
+                  })
+                }
+                placeholder="수정"
+                className="h-8 text-xs"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 추가 버튼 설정 */}
+      {config.rightPanel?.showAdd && (
+        <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-4">
+          <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">추가 버튼 설정</h3>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Label className="text-xs">추가 모드</Label>
+              <Select
+                value={config.rightPanel?.addButton?.mode || "auto"}
+                onValueChange={(value: "auto" | "modal") =>
+                  updateRightPanel({
+                    addButton: {
+                      ...config.rightPanel?.addButton,
+                      mode: value,
+                      enabled: true,
+                    },
+                  })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="auto">자동 (내장 폼)</SelectItem>
+                  <SelectItem value="modal">모달 화면</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {config.rightPanel?.addButton?.mode === "modal" && (
+              <div className="space-y-1">
+                <Label className="text-xs">모달 화면</Label>
+                <ScreenSelector
+                  value={config.rightPanel?.addButton?.modalScreenId}
+                  onChange={(screenId) =>
+                    updateRightPanel({
+                      addButton: {
+                        ...config.rightPanel?.addButton!,
+                        modalScreenId: screenId,
+                      },
+                    })
+                  }
+                />
+              </div>
+            )}
+
+            <div className="space-y-1">
+              <Label className="text-xs">버튼 라벨</Label>
+              <Input
+                value={config.rightPanel?.addButton?.buttonLabel || "추가"}
+                onChange={(e) =>
+                  updateRightPanel({
+                    addButton: {
+                      ...config.rightPanel?.addButton!,
+                      buttonLabel: e.target.value,
+                      enabled: true,
+                      mode: config.rightPanel?.addButton?.mode || "auto",
+                    },
+                  })
+                }
+                placeholder="추가"
+                className="h-8 text-xs"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 삭제 버튼 설정 */}
+      <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-4">
+        <div className="flex items-center justify-between">
+          <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">삭제 버튼 설정</h3>
+          <Switch
+            checked={config.rightPanel?.deleteButton?.enabled ?? true}
+            onCheckedChange={(checked) => {
+              updateRightPanel({
+                deleteButton: {
+                  enabled: checked,
+                  buttonLabel: config.rightPanel?.deleteButton?.buttonLabel,
+                  buttonVariant: config.rightPanel?.deleteButton?.buttonVariant,
+                },
+              });
+            }}
+          />
+        </div>
+
+        {(config.rightPanel?.deleteButton?.enabled ?? true) && (
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-xs">버튼 라벨</Label>
+                <Input
+                  value={config.rightPanel?.deleteButton?.buttonLabel || ""}
+                  placeholder="삭제"
+                  onChange={(e) => {
+                    updateRightPanel({
+                      deleteButton: {
+                        ...config.rightPanel?.deleteButton!,
+                        buttonLabel: e.target.value || undefined,
+                        enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                      },
+                    });
+                  }}
+                  className="h-8 text-xs"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs">버튼 스타일</Label>
+                <Select
+                  value={config.rightPanel?.deleteButton?.buttonVariant || "ghost"}
+                  onValueChange={(value: "default" | "outline" | "ghost" | "destructive") => {
+                    updateRightPanel({
+                      deleteButton: {
+                        ...config.rightPanel?.deleteButton!,
+                        buttonVariant: value,
+                        enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                      },
+                    });
+                  }}
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ghost">Ghost (기본)</SelectItem>
+                    <SelectItem value="outline">Outline</SelectItem>
+                    <SelectItem value="default">Default</SelectItem>
+                    <SelectItem value="destructive">Destructive (빨강)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="space-y-1">
+              <Label className="text-xs">삭제 확인 메시지</Label>
+              <Input
+                value={config.rightPanel?.deleteButton?.confirmMessage || ""}
+                placeholder="정말 삭제하시겠습니까?"
+                onChange={(e) => {
+                  updateRightPanel({
+                    deleteButton: {
+                      ...config.rightPanel?.deleteButton!,
+                      confirmMessage: e.target.value || undefined,
+                      enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                    },
+                  });
+                }}
+                className="h-8 text-xs"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 추가 탭 */}
+      {renderAdditionalTabs && (
+        <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
+          <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">추가 탭</h3>
+          <p className="text-muted-foreground text-xs">
+            우측 패널에 다른 테이블 데이터를 탭으로 추가합니다
+          </p>
+          {renderAdditionalTabs()}
+        </div>
+      )}
+    </div>
+  );
+};

frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Check, ChevronsUpDown, GripVertical, Link2, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function SortableColumnRow({
+  id, col, index, isNumeric, isEntityJoin, onLabelChange, onWidthChange, onFormatChange, onRemove, onShowInSummaryChange, onShowInDetailChange,
+}: {
+  id: string;
+  col: { name: string; label: string; width?: number; format?: any; showInSummary?: boolean; showInDetail?: boolean };
+  index: number;
+  isNumeric: boolean;
+  isEntityJoin?: boolean;
+  onLabelChange: (value: string) => void;
+  onWidthChange: (value: number) => void;
+  onFormatChange: (checked: boolean) => void;
+  onRemove: () => void;
+  onShowInSummaryChange?: (checked: boolean) => void;
+  onShowInDetailChange?: (checked: boolean) => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style = { transform: CSS.Transform.toString(transform), transition };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "flex items-center gap-1.5 rounded-md border bg-card px-2 py-1.5",
+        isDragging && "z-50 opacity-50 shadow-md",
+        isEntityJoin && "border-blue-200 bg-blue-50/30",
+      )}
+    >
+      <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
+        <GripVertical className="h-3 w-3" />
+      </div>
+      {isEntityJoin ? (
+        <Link2 className="h-3 w-3 shrink-0 text-blue-500" title="Entity 조인 컬럼" />
+      ) : (
+        <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
+      )}
+      <Input
+        value={col.label}
+        onChange={(e) => onLabelChange(e.target.value)}
+        placeholder="라벨"
+        className="h-6 min-w-0 flex-1 text-xs"
+      />
+      <Input
+        value={col.width || ""}
+        onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
+        placeholder="너비"
+        className="h-6 w-14 shrink-0 text-xs"
+      />
+      {isNumeric && (
+        <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">
+          <input
+            type="checkbox"
+            checked={col.format?.thousandSeparator ?? false}
+            onChange={(e) => onFormatChange(e.target.checked)}
+            className="h-3 w-3"
+          />
+          ,
+        </label>
+      )}
+      {onShowInSummaryChange && (
+        <label className="flex shrink-0 cursor-pointer items-center gap-0.5 text-[10px]" title="테이블 헤더에 표시">
+          <input
+            type="checkbox"
+            checked={col.showInSummary !== false}
+            onChange={(e) => onShowInSummaryChange(e.target.checked)}
+            className="h-3 w-3"
+          />
+          헤더
+        </label>
+      )}
+      {onShowInDetailChange && (
+        <label className="flex shrink-0 cursor-pointer items-center gap-0.5 text-[10px]" title="행 클릭 시 상세 정보에 표시">
+          <input
+            type="checkbox"
+            checked={col.showInDetail !== false}
+            onChange={(e) => onShowInDetailChange(e.target.checked)}
+            className="h-3 w-3"
+          />
+          상세
+        </label>
+      )}
+      <Button type="button" variant="ghost" size="sm" onClick={onRemove} className="text-muted-foreground hover:text-destructive h-5 w-5 shrink-0 p-0">
+        <X className="h-3 w-3" />
+      </Button>
+    </div>
+  );
+}
+
+export const GroupByColumnsSelector: React.FC<{
+  tableName?: string;
+  selectedColumns: string[];
+  onChange: (columns: string[]) => void;
+}> = ({ tableName, selectedColumns, onChange }) => {
+  const [columns, setColumns] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!tableName) {
+      setColumns([]);
+      return;
+    }
+    const loadColumns = async () => {
+      setLoading(true);
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const response = await tableManagementApi.getColumnList(tableName);
+        if (response.success && response.data && response.data.columns) {
+          setColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("컬럼 정보 로드 실패:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadColumns();
+  }, [tableName]);
+
+  const toggleColumn = (columnName: string) => {
+    const newSelection = selectedColumns.includes(columnName)
+      ? selectedColumns.filter((c) => c !== columnName)
+      : [...selectedColumns, columnName];
+    onChange(newSelection);
+  };
+
+  if (!tableName) {
+    return (
+      <div className="rounded-md border border-dashed p-3">
+        <p className="text-muted-foreground text-center text-xs">먼저 우측 패널의 테이블을 선택하세요</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Label className="text-xs">그룹핑 기준 컬럼</Label>
+      {loading ? (
+        <div className="rounded-md border p-3">
+          <p className="text-muted-foreground text-center text-xs">로딩 중...</p>
+        </div>
+      ) : columns.length === 0 ? (
+        <div className="rounded-md border border-dashed p-3">
+          <p className="text-muted-foreground text-center text-xs">컬럼을 찾을 수 없습니다</p>
+        </div>
+      ) : (
+        <div className="max-h-[200px] space-y-1 overflow-y-auto rounded-md border p-3">
+          {columns.map((col) => (
+            <div key={col.columnName} className="flex items-center gap-2">
+              <Checkbox
+                id={`groupby-${col.columnName}`}
+                checked={selectedColumns.includes(col.columnName)}
+                onCheckedChange={() => toggleColumn(col.columnName)}
+              />
+              <label htmlFor={`groupby-${col.columnName}`} className="flex-1 cursor-pointer text-xs">
+                {col.columnLabel || col.columnName}
+                <span className="text-muted-foreground ml-1">({col.columnName})</span>
+              </label>
+            </div>
+          ))}
+        </div>
+      )}
+      <p className="text-muted-foreground mt-1 text-[10px]">
+        선택된 컬럼: {selectedColumns.length > 0 ? selectedColumns.join(", ") : "없음"}
+        <br />
+        같은 값을 가진 모든 레코드를 함께 불러옵니다
+      </p>
+    </div>
+  );
+};
+
+export const ScreenSelector: React.FC<{
+  value?: number;
+  onChange: (screenId?: number) => void;
+}> = ({ value, onChange }) => {
+  const [open, setOpen] = useState(false);
+  const [screens, setScreens] = useState<Array<{ screenId: number; screenName: string; screenCode: string }>>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const loadScreens = async () => {
+      setLoading(true);
+      try {
+        const { screenApi } = await import("@/lib/api/screen");
+        const response = await screenApi.getScreens({ page: 1, size: 1000 });
+        setScreens(
+          response.data.map((s) => ({ screenId: s.screenId, screenName: s.screenName, screenCode: s.screenCode })),
+        );
+      } catch (error) {
+        console.error("화면 목록 로드 실패:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadScreens();
+  }, []);
+
+  const selectedScreen = screens.find((s) => s.screenId === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="h-8 w-full justify-between text-xs"
+          disabled={loading}
+        >
+          {loading ? "로딩 중..." : selectedScreen ? selectedScreen.screenName : "화면 선택"}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[400px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="화면 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="py-6 text-center text-xs">화면을 찾을 수 없습니다.</CommandEmpty>
+            <CommandGroup className="max-h-[300px] overflow-auto">
+              {screens.map((screen) => (
+                <CommandItem
+                  key={screen.screenId}
+                  value={`${screen.screenName.toLowerCase()} ${screen.screenCode.toLowerCase()} ${screen.screenId}`}
+                  onSelect={() => {
+                    onChange(screen.screenId === value ? undefined : screen.screenId);
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check className={cn("mr-2 h-4 w-4", value === screen.screenId ? "opacity-100" : "opacity-0")} />
+                  <div className="flex flex-col">
+                    <span className="font-medium">{screen.screenName}</span>
+                    <span className="text-muted-foreground text-[10px]">{screen.screenCode}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};

frontend/lib/registry/components/v2-table-list/config-panels/BasicConfigPanel.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Table2, Check, ChevronsUpDown } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+
+export interface BasicConfigPanelProps {
+  config: any;
+  onChange: (key: string, value: any) => void;
+  screenTableName?: string;
+  availableTables: Array<{ tableName: string; displayName: string }>;
+  loadingTables: boolean;
+  targetTableName: string | undefined;
+  tableComboboxOpen: boolean;
+  onTableComboboxOpenChange: (open: boolean) => void;
+  onTableChange: (newTableName: string) => void;
+}
+
+/**
+ * 기본 설정 패널: 테이블 선택, 데이터 소스
+ */
+export const BasicConfigPanel: React.FC<BasicConfigPanelProps> = ({
+  config,
+  screenTableName,
+  availableTables,
+  loadingTables,
+  targetTableName,
+  tableComboboxOpen,
+  onTableComboboxOpenChange,
+  onTableChange,
+}) => {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-sm font-semibold">데이터 소스</h3>
+          <p className="text-muted-foreground text-[10px]">
+            테이블을 선택하세요. 미선택 시 화면 메인 테이블을 사용합니다.
+          </p>
+        </div>
+        <hr className="border-border" />
+        <div className="space-y-2">
+          <Label className="text-xs">테이블 선택</Label>
+          <Popover open={tableComboboxOpen} onOpenChange={onTableComboboxOpenChange}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={tableComboboxOpen}
+                className="h-8 w-full justify-between text-xs"
+                disabled={loadingTables}
+              >
+                <div className="flex items-center gap-2 truncate">
+                  <Table2 className="h-3 w-3 shrink-0" />
+                  <span className="truncate">
+                    {loadingTables
+                      ? "테이블 로딩 중..."
+                      : targetTableName
+                        ? availableTables.find((t) => t.tableName === targetTableName)?.displayName || targetTableName
+                        : "테이블 선택"}
+                  </span>
+                </div>
+                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="p-0"
+              style={{ width: "var(--radix-popover-trigger-width)" }}
+              align="start"
+            >
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                <CommandList>
+                  <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {availableTables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={`${table.tableName} ${table.displayName}`}
+                        onSelect={() => onTableChange(table.tableName)}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3",
+                            targetTableName === table.tableName ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                        <div className="flex flex-col">
+                          <span>{table.displayName}</span>
+                          {table.displayName !== table.tableName && (
+                            <span className="text-[10px] text-gray-400">{table.tableName}</span>
+                          )}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          {screenTableName && targetTableName && targetTableName !== screenTableName && (
+            <div className="flex items-center justify-between rounded bg-amber-50 px-2 py-1">
+              <span className="text-[10px] text-amber-700">
+                화면 기본 테이블({screenTableName})과 다른 테이블을 사용 중
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-5 px-1.5 text-[10px] text-amber-700 hover:text-amber-900"
+                onClick={() => onTableChange(screenTableName)}
+              >
+                기본으로
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx

@@ -0,0 +1,534 @@
+"use client";
+
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ColumnConfig } from "../types";
+import { Database, Link2, GripVertical, X, Check, ChevronsUpDown, Lock, Unlock } from "lucide-react";
+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 { DndContext, closestCenter, type DragEndEvent } from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+function SortableColumnRow({
+  id,
+  col,
+  index,
+  isEntityJoin,
+  onLabelChange,
+  onWidthChange,
+  onRemove,
+}: {
+  id: string;
+  col: ColumnConfig;
+  index: number;
+  isEntityJoin?: boolean;
+  onLabelChange: (value: string) => void;
+  onWidthChange: (value: number) => void;
+  onRemove: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style = { transform: CSS.Transform.toString(transform), transition };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
+        isDragging && "z-50 opacity-50 shadow-md",
+        isEntityJoin && "border-blue-200 bg-blue-50/30",
+      )}
+    >
+      <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
+        <GripVertical className="h-3 w-3" />
+      </div>
+      {isEntityJoin ? (
+        <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+      ) : (
+        <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
+      )}
+      <Input
+        value={col.displayName || col.columnName}
+        onChange={(e) => onLabelChange(e.target.value)}
+        placeholder="표시명"
+        className="h-6 min-w-0 flex-1 text-xs"
+      />
+      <Input
+        value={col.width || ""}
+        onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
+        placeholder="너비"
+        className="h-6 w-14 shrink-0 text-xs"
+      />
+      <Button type="button" variant="ghost" size="sm" onClick={onRemove} className="text-muted-foreground hover:text-destructive h-5 w-5 shrink-0 p-0">
+        <X className="h-3 w-3" />
+      </Button>
+    </div>
+  );
+}
+
+export interface ColumnsConfigPanelProps {
+  config: any;
+  onChange: (key: string, value: any) => void;
+  screenTableName?: string;
+  targetTableName: string | undefined;
+  availableColumns: Array<{ columnName: string; dataType: string; label?: string; input_type?: string }>;
+  tableColumns?: any[];
+  entityJoinColumns: {
+    availableColumns: Array<{
+      tableName: string;
+      columnName: string;
+      columnLabel: string;
+      dataType: string;
+      joinAlias: string;
+      suggestedLabel: string;
+    }>;
+    joinTables: Array<{
+      tableName: string;
+      currentDisplayColumn: string;
+      availableColumns: Array<{
+        columnName: string;
+        columnLabel: string;
+        dataType: string;
+        description?: string;
+      }>;
+    }>;
+  };
+  entityDisplayConfigs: Record<
+    string,
+    {
+      sourceColumns: Array<{ columnName: string; displayName: string; dataType: string }>;
+      joinColumns: Array<{ columnName: string; displayName: string; dataType: string }>;
+      selectedColumns: string[];
+      separator: string;
+    }
+  >;
+  onAddColumn: (columnName: string) => void;
+  onAddEntityColumn: (joinColumn: {
+    tableName: string;
+    columnName: string;
+    columnLabel: string;
+    dataType: string;
+    joinAlias: string;
+    suggestedLabel: string;
+  }) => void;
+  onRemoveColumn: (columnName: string) => void;
+  onUpdateColumn: (columnName: string, updates: Partial<ColumnConfig>) => void;
+  onToggleEntityDisplayColumn: (columnName: string, selectedColumn: string) => void;
+  onUpdateEntityDisplaySeparator: (columnName: string, separator: string) => void;
+}
+
+/**
+ * 컬럼 설정 패널: 컬럼 선택, Entity 조인, DnD 순서 변경
+ */
+export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
+  config,
+  onChange,
+  screenTableName,
+  targetTableName,
+  availableColumns,
+  tableColumns,
+  entityJoinColumns,
+  entityDisplayConfigs,
+  onAddColumn,
+  onAddEntityColumn,
+  onRemoveColumn,
+  onUpdateColumn,
+  onToggleEntityDisplayColumn,
+  onUpdateEntityDisplaySeparator,
+}) => {
+  const handleChange = (key: string, value: any) => {
+    onChange(key, value);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 엔티티 컬럼 표시 설정 섹션 */}
+      {config.columns?.some((col: ColumnConfig) => col.isEntityJoin) && (
+        <div className="space-y-3">
+          {config.columns
+            ?.filter((col: ColumnConfig) => col.isEntityJoin && col.entityDisplayConfig)
+            .map((column: ColumnConfig) => (
+              <div key={column.columnName} className="space-y-2">
+                <div className="mb-2">
+                  <span className="truncate text-xs font-medium" style={{ fontSize: "12px" }}>
+                    {column.displayName || column.columnName}
+                  </span>
+                </div>
+
+                {entityDisplayConfigs[column.columnName] ? (
+                  <div className="space-y-2">
+                    <div className="space-y-1">
+                      <Label className="text-xs">구분자</Label>
+                      <Input
+                        value={entityDisplayConfigs[column.columnName].separator}
+                        onChange={(e) => onUpdateEntityDisplaySeparator(column.columnName, e.target.value)}
+                        className="h-6 w-full text-xs"
+                        style={{ fontSize: "12px" }}
+                        placeholder=" - "
+                      />
+                    </div>
+
+                    <div className="space-y-1">
+                      <Label className="text-xs">표시할 컬럼 선택</Label>
+                      {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
+                      entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
+                        <div className="py-2 text-center text-xs text-gray-400">
+                          표시 가능한 컬럼이 없습니다.
+                          {!column.entityDisplayConfig?.joinTable && (
+                            <p className="mt-1 text-[10px]">
+                              테이블 타입 관리에서 참조 테이블을 설정하면 더 많은 컬럼을 선택할 수 있습니다.
+                            </p>
+                          )}
+                        </div>
+                      ) : (
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="outline"
+                              className="h-6 w-full justify-between text-xs"
+                              style={{ fontSize: "12px" }}
+                            >
+                              {entityDisplayConfigs[column.columnName].selectedColumns.length > 0
+                                ? `${entityDisplayConfigs[column.columnName].selectedColumns.length}개 선택됨`
+                                : "컬럼 선택"}
+                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-full p-0" align="start">
+                            <Command>
+                              <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                              <CommandList>
+                                <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                {entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
+                                  <CommandGroup
+                                    heading={`기본 테이블: ${column.entityDisplayConfig?.sourceTable || config.selectedTable || screenTableName}`}
+                                  >
+                                    {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => (
+                                      <CommandItem
+                                        key={`source-${col.columnName}`}
+                                        onSelect={() => onToggleEntityDisplayColumn(column.columnName, col.columnName)}
+                                        className="text-xs"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            entityDisplayConfigs[column.columnName].selectedColumns.includes(col.columnName)
+                                              ? "opacity-100"
+                                              : "opacity-0",
+                                          )}
+                                        />
+                                        {col.displayName}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                                {entityDisplayConfigs[column.columnName].joinColumns.length > 0 && (
+                                  <CommandGroup heading={`참조 테이블: ${column.entityDisplayConfig?.joinTable}`}>
+                                    {entityDisplayConfigs[column.columnName].joinColumns.map((col) => (
+                                      <CommandItem
+                                        key={`join-${col.columnName}`}
+                                        onSelect={() => onToggleEntityDisplayColumn(column.columnName, col.columnName)}
+                                        className="text-xs"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            entityDisplayConfigs[column.columnName].selectedColumns.includes(col.columnName)
+                                              ? "opacity-100"
+                                              : "opacity-0",
+                                          )}
+                                        />
+                                        {col.displayName}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      )}
+                    </div>
+
+                    {!column.entityDisplayConfig?.joinTable &&
+                      entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
+                        <div className="rounded bg-blue-50 p-2 text-[10px] text-blue-600">
+                          현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된
+                          테이블의 컬럼도 선택할 수 있습니다.
+                        </div>
+                      )}
+
+                    {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
+                      <div className="space-y-1">
+                        <Label className="text-xs">미리보기</Label>
+                        <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
+                          {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
+                            <React.Fragment key={colName}>
+                              <Badge variant="secondary" className="text-xs">
+                                {colName}
+                              </Badge>
+                              {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
+                                <span className="text-gray-400">
+                                  {entityDisplayConfigs[column.columnName].separator}
+                                </span>
+                              )}
+                            </React.Fragment>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
+                )}
+              </div>
+            ))}
+        </div>
+      )}
+
+      {!targetTableName ? (
+        <div className="space-y-3">
+          <div className="text-center text-gray-500">
+            <p>테이블이 선택되지 않았습니다.</p>
+            <p className="text-sm">기본 설정 탭에서 테이블을 선택하세요.</p>
+          </div>
+        </div>
+      ) : availableColumns.length === 0 ? (
+        <div className="space-y-3">
+          <div className="text-center text-gray-500">
+            <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
+            <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
+            <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="space-y-2">
+            <div>
+              <h3 className="text-sm font-semibold">컬럼 선택</h3>
+              <p className="text-muted-foreground text-[10px]">표시할 컬럼을 선택하세요</p>
+            </div>
+            <hr className="border-border" />
+            <div className="max-h-48 space-y-0.5 overflow-y-auto rounded-md border p-2">
+              {availableColumns.map((column) => {
+                const isAdded = config.columns?.some((c: ColumnConfig) => c.columnName === column.columnName);
+                return (
+                  <div
+                    key={column.columnName}
+                    className={cn(
+                      "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                      isAdded && "bg-primary/10",
+                    )}
+                    onClick={() => {
+                      if (isAdded) {
+                        handleChange(
+                          "columns",
+                          config.columns?.filter((c: ColumnConfig) => c.columnName !== column.columnName) || [],
+                        );
+                      } else {
+                        onAddColumn(column.columnName);
+                      }
+                    }}
+                  >
+                    <Checkbox
+                      checked={isAdded}
+                      onCheckedChange={() => {
+                        if (isAdded) {
+                          handleChange(
+                            "columns",
+                            config.columns?.filter((c: ColumnConfig) => c.columnName !== column.columnName) || [],
+                          );
+                        } else {
+                          onAddColumn(column.columnName);
+                        }
+                      }}
+                      className="pointer-events-none h-3.5 w-3.5"
+                    />
+                    <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                    <span className="truncate text-xs">{column.label || column.columnName}</span>
+                    {isAdded && (
+                      <button
+                        type="button"
+                        title={
+                          config.columns?.find((c: ColumnConfig) => c.columnName === column.columnName)?.editable === false
+                            ? "편집 잠금 (클릭하여 해제)"
+                            : "편집 가능 (클릭하여 잠금)"
+                        }
+                        className={cn(
+                          "ml-auto flex-shrink-0 rounded p-0.5 transition-colors",
+                          config.columns?.find((c: ColumnConfig) => c.columnName === column.columnName)?.editable === false
+                            ? "text-destructive hover:bg-destructive/10"
+                            : "text-muted-foreground hover:bg-muted",
+                        )}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          const currentCol = config.columns?.find((c: ColumnConfig) => c.columnName === column.columnName);
+                          if (currentCol) {
+                            onUpdateColumn(column.columnName, {
+                              editable: currentCol.editable === false ? undefined : false,
+                            });
+                          }
+                        }}
+                      >
+                        {config.columns?.find((c: ColumnConfig) => c.columnName === column.columnName)?.editable === false ? (
+                          <Lock className="h-3 w-3" />
+                        ) : (
+                          <Unlock className="h-3 w-3" />
+                        )}
+                      </button>
+                    )}
+                    <span className={cn("text-[10px] text-gray-400", !isAdded && "ml-auto")}>
+                      {column.input_type || column.dataType}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {entityJoinColumns.joinTables.length > 0 && (
+            <div className="space-y-2">
+              <div>
+                <h3 className="text-sm font-semibold">Entity 조인 컬럼</h3>
+                <p className="text-muted-foreground text-[10px]">연관 테이블의 컬럼을 선택하세요</p>
+              </div>
+              <hr className="border-border" />
+              <div className="space-y-3">
+                {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
+                  <div key={tableIndex} className="space-y-1">
+                    <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-blue-600">
+                      <Link2 className="h-3 w-3" />
+                      <span>{joinTable.tableName}</span>
+                      <Badge variant="outline" className="text-[10px]">
+                        {joinTable.currentDisplayColumn}
+                      </Badge>
+                    </div>
+                    <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                      {joinTable.availableColumns.map((column, colIndex) => {
+                        const matchingJoinColumn = entityJoinColumns.availableColumns.find(
+                          (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                        );
+                        const isAlreadyAdded = config.columns?.some(
+                          (col: ColumnConfig) => col.columnName === matchingJoinColumn?.joinAlias,
+                        );
+                        if (!matchingJoinColumn) return null;
+
+                        return (
+                          <div
+                            key={colIndex}
+                            className={cn(
+                              "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
+                              isAlreadyAdded && "bg-blue-100",
+                            )}
+                            onClick={() => {
+                              if (isAlreadyAdded) {
+                                handleChange(
+                                  "columns",
+                                  config.columns?.filter(
+                                    (c: ColumnConfig) => c.columnName !== matchingJoinColumn.joinAlias,
+                                  ) || [],
+                                );
+                              } else {
+                                onAddEntityColumn(matchingJoinColumn);
+                              }
+                            }}
+                          >
+                            <Checkbox
+                              checked={isAlreadyAdded}
+                              onCheckedChange={() => {
+                                if (isAlreadyAdded) {
+                                  handleChange(
+                                    "columns",
+                                    config.columns?.filter(
+                                      (c: ColumnConfig) => c.columnName !== matchingJoinColumn.joinAlias,
+                                    ) || [],
+                                  );
+                                } else {
+                                  onAddEntityColumn(matchingJoinColumn);
+                                }
+                              }}
+                              className="pointer-events-none h-3.5 w-3.5"
+                            />
+                            <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                            <span className="truncate text-xs">{column.columnLabel}</span>
+                            <span className="ml-auto text-[10px] text-blue-400">
+                              {column.inputType || column.dataType}
+                            </span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {config.columns && config.columns.length > 0 && (
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-sm font-semibold">표시할 컬럼 ({config.columns.length}개 선택)</h3>
+            <p className="text-muted-foreground text-[10px]">
+              드래그하여 순서를 변경하거나 표시명/너비를 수정할 수 있습니다
+            </p>
+          </div>
+          <hr className="border-border" />
+          <DndContext
+            collisionDetection={closestCenter}
+            onDragEnd={(event: DragEndEvent) => {
+              const { active, over } = event;
+              if (!over || active.id === over.id) return;
+              const columns = [...(config.columns || [])];
+              const oldIndex = columns.findIndex((c: ColumnConfig) => c.columnName === active.id);
+              const newIndex = columns.findIndex((c: ColumnConfig) => c.columnName === over.id);
+              if (oldIndex !== -1 && newIndex !== -1) {
+                const reordered = arrayMove(columns, oldIndex, newIndex);
+                reordered.forEach((col: ColumnConfig, idx: number) => {
+                  col.order = idx;
+                });
+                handleChange("columns", reordered);
+              }
+            }}
+          >
+            <SortableContext
+              items={(config.columns || []).map((c: ColumnConfig) => c.columnName)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-1">
+                {(config.columns || []).map((column: ColumnConfig, idx: number) => {
+                  const resolvedLabel =
+                    column.displayName && column.displayName !== column.columnName
+                      ? column.displayName
+                      : availableColumns.find((c) => c.columnName === column.columnName)?.label ||
+                        column.displayName ||
+                        column.columnName;
+                  const colWithLabel = { ...column, displayName: resolvedLabel };
+                  return (
+                    <SortableColumnRow
+                      key={column.columnName}
+                      id={column.columnName}
+                      col={colWithLabel}
+                      index={idx}
+                      isEntityJoin={!!column.isEntityJoin}
+                      onLabelChange={(value) => onUpdateColumn(column.columnName, { displayName: value })}
+                      onWidthChange={(value) => onUpdateColumn(column.columnName, { width: value })}
+                      onRemove={() => onRemoveColumn(column.columnName)}
+                    />
+                  );
+                })}
+              </div>
+            </SortableContext>
+          </DndContext>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/lib/registry/components/v2-table-list/config-panels/OptionsConfigPanel.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
+
+export interface OptionsConfigPanelProps {
+  config: any;
+  onChange: (key: string, value: any) => void;
+  onNestedChange: (parentKey: string, childKey: string, value: any) => void;
+  availableColumns: Array<{ columnName: string; dataType: string; label?: string; input_type?: string }>;
+  screenTableName?: string;
+}
+
+/**
+ * 옵션 설정 패널: 툴바, 체크박스, 기본 정렬, 가로 스크롤, 데이터 필터링
+ */
+export const OptionsConfigPanel: React.FC<OptionsConfigPanelProps> = ({
+  config,
+  onChange,
+  onNestedChange,
+  availableColumns,
+  screenTableName,
+}) => {
+  return (
+    <div className="space-y-6">
+      {/* 툴바 버튼 설정 */}
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-sm font-semibold">툴바 버튼 설정</h3>
+          <p className="text-muted-foreground text-[10px]">테이블 상단에 표시할 버튼을 선택합니다</p>
+        </div>
+        <hr className="border-border" />
+        <div className="grid grid-cols-2 gap-2">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="showEditMode"
+              checked={config.toolbar?.showEditMode ?? false}
+              onCheckedChange={(checked) => onNestedChange("toolbar", "showEditMode", checked)}
+            />
+            <Label htmlFor="showEditMode" className="text-xs">
+              즉시 저장
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="showExcel"
+              checked={config.toolbar?.showExcel ?? false}
+              onCheckedChange={(checked) => onNestedChange("toolbar", "showExcel", checked)}
+            />
+            <Label htmlFor="showExcel" className="text-xs">
+              Excel
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="showPdf"
+              checked={config.toolbar?.showPdf ?? false}
+              onCheckedChange={(checked) => onNestedChange("toolbar", "showPdf", checked)}
+            />
+            <Label htmlFor="showPdf" className="text-xs">
+              PDF
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="showCopy"
+              checked={config.toolbar?.showCopy ?? false}
+              onCheckedChange={(checked) => onNestedChange("toolbar", "showCopy", checked)}
+            />
+            <Label htmlFor="showCopy" className="text-xs">
+              복사
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="showSearch"
+              checked={config.toolbar?.showSearch ?? false}
+              onCheckedChange={(checked) => onNestedChange("toolbar", "showSearch", checked)}
+            />
+            <Label htmlFor="showSearch" className="text-xs">
+              검색
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="showFilter"
+              checked={config.toolbar?.showFilter ?? false}
+              onCheckedChange={(checked) => onNestedChange("toolbar", "showFilter", checked)}
+            />
+            <Label htmlFor="showFilter" className="text-xs">
+              필터
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="showRefresh"
+              checked={config.toolbar?.showRefresh ?? false}
+              onCheckedChange={(checked) => onNestedChange("toolbar", "showRefresh", checked)}
+            />
+            <Label htmlFor="showRefresh" className="text-xs">
+              새로고침 (상단)
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="showPaginationRefresh"
+              checked={config.toolbar?.showPaginationRefresh ?? true}
+              onCheckedChange={(checked) => onNestedChange("toolbar", "showPaginationRefresh", checked)}
+            />
+            <Label htmlFor="showPaginationRefresh" className="text-xs">
+              새로고침 (하단)
+            </Label>
+          </div>
+        </div>
+      </div>
+
+      {/* 체크박스 설정 */}
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-sm font-semibold">체크박스 설정</h3>
+        </div>
+        <hr className="border-border" />
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="checkboxEnabled"
+              checked={config.checkbox?.enabled ?? true}
+              onCheckedChange={(checked) => onNestedChange("checkbox", "enabled", checked)}
+            />
+            <Label htmlFor="checkboxEnabled">체크박스 표시</Label>
+          </div>
+
+          {config.checkbox?.enabled && (
+            <>
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="checkboxSelectAll"
+                  checked={config.checkbox?.selectAll ?? true}
+                  onCheckedChange={(checked) => onNestedChange("checkbox", "selectAll", checked)}
+                />
+                <Label htmlFor="checkboxSelectAll">전체 선택 체크박스 표시</Label>
+              </div>
+
+              <div className="space-y-1">
+                <Label htmlFor="checkboxPosition" className="text-xs">
+                  체크박스 위치
+                </Label>
+                <select
+                  id="checkboxPosition"
+                  value={config.checkbox?.position || "left"}
+                  onChange={(e) => onNestedChange("checkbox", "position", e.target.value)}
+                  className="h-8 w-full rounded-md border px-2 text-xs"
+                >
+                  <option value="left">왼쪽</option>
+                  <option value="right">오른쪽</option>
+                </select>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* 기본 정렬 설정 */}
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-sm font-semibold">기본 정렬 설정</h3>
+          <p className="text-muted-foreground text-[10px]">테이블 로드 시 기본 정렬 순서를 지정합니다</p>
+        </div>
+        <hr className="border-border" />
+        <div className="space-y-2">
+          <div className="space-y-1">
+            <Label htmlFor="defaultSortColumn" className="text-xs">
+              정렬 컬럼
+            </Label>
+            <select
+              id="defaultSortColumn"
+              value={config.defaultSort?.columnName || ""}
+              onChange={(e) => {
+                if (e.target.value) {
+                  onChange("defaultSort", {
+                    columnName: e.target.value,
+                    direction: config.defaultSort?.direction || "asc",
+                  });
+                } else {
+                  onChange("defaultSort", undefined);
+                }
+              }}
+              className="h-8 w-full rounded-md border px-2 text-xs"
+            >
+              <option value="">정렬 없음</option>
+              {availableColumns.map((col) => (
+                <option key={col.columnName} value={col.columnName}>
+                  {col.label || col.columnName}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {config.defaultSort?.columnName && (
+            <div className="space-y-1">
+              <Label htmlFor="defaultSortDirection" className="text-xs">
+                정렬 방향
+              </Label>
+              <select
+                id="defaultSortDirection"
+                value={config.defaultSort?.direction || "asc"}
+                onChange={(e) =>
+                  onChange("defaultSort", {
+                    ...config.defaultSort,
+                    columnName: config.defaultSort?.columnName || "",
+                    direction: e.target.value as "asc" | "desc",
+                  })
+                }
+                className="h-8 w-full rounded-md border px-2 text-xs"
+              >
+                <option value="asc">오름차순 (A→Z, 1→9)</option>
+                <option value="desc">내림차순 (Z→A, 9→1)</option>
+              </select>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 가로 스크롤 및 컬럼 고정 */}
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-sm font-semibold">가로 스크롤 및 컬럼 고정</h3>
+        </div>
+        <hr className="border-border" />
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="horizontalScrollEnabled"
+            checked={config.horizontalScroll?.enabled}
+            onCheckedChange={(checked) => onNestedChange("horizontalScroll", "enabled", checked)}
+          />
+          <Label htmlFor="horizontalScrollEnabled">가로 스크롤 사용</Label>
+        </div>
+
+        {config.horizontalScroll?.enabled && (
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Label htmlFor="maxVisibleColumns" className="text-sm">
+                최대 표시 컬럼 수
+              </Label>
+              <Input
+                id="maxVisibleColumns"
+                type="number"
+                value={config.horizontalScroll?.maxVisibleColumns || 8}
+                onChange={(e) =>
+                  onNestedChange("horizontalScroll", "maxVisibleColumns", parseInt(e.target.value) || 8)
+                }
+                min={3}
+                max={20}
+                placeholder="8"
+                className="h-8"
+              />
+              <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 데이터 필터링 설정 */}
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-sm font-semibold">데이터 필터링</h3>
+          <p className="text-muted-foreground mt-1 text-xs">특정 컬럼 값으로 데이터를 필터링합니다</p>
+        </div>
+        <hr className="border-border" />
+        <DataFilterConfigPanel
+          tableName={config.selectedTable || screenTableName}
+          columns={availableColumns.map(
+            (col) =>
+              ({
+                columnName: col.columnName,
+                columnLabel: col.label || col.columnName,
+                dataType: col.dataType,
+                input_type: col.input_type,
+              }) as any,
+          )}
+          config={config.dataFilter}
+          onConfigChange={(dataFilter) => onChange("dataFilter", dataFilter)}
+        />
+      </div>
+    </div>
+  );
+};

frontend/lib/registry/components/v2-table-list/config-panels/StyleConfigPanel.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+
+export interface StyleConfigPanelProps {
+  config: any;
+  onChange: (key: string, value: any) => void;
+  onNestedChange: (parentKey: string, childKey: string, value: any) => void;
+}
+
+/**
+ * 스타일 설정 패널: 테이블 스타일 (theme, headerStyle, rowHeight 등)
+ */
+export const StyleConfigPanel: React.FC<StyleConfigPanelProps> = ({
+  config,
+  onNestedChange,
+}) => {
+  const tableStyle = config.tableStyle || {};
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-sm font-semibold">테이블 스타일</h3>
+          <p className="text-muted-foreground text-[10px]">테이블의 시각적 스타일을 설정합니다</p>
+        </div>
+        <hr className="border-border" />
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <Label htmlFor="tableTheme" className="text-xs">
+              테마
+            </Label>
+            <select
+              id="tableTheme"
+              value={tableStyle.theme || "default"}
+              onChange={(e) =>
+                onNestedChange("tableStyle", "theme", e.target.value as "default" | "striped" | "bordered" | "minimal")
+              }
+              className="h-8 w-full rounded-md border px-2 text-xs"
+            >
+              <option value="default">기본</option>
+              <option value="striped">줄무늬</option>
+              <option value="bordered">테두리</option>
+              <option value="minimal">미니멀</option>
+            </select>
+          </div>
+
+          <div className="space-y-1">
+            <Label htmlFor="headerStyle" className="text-xs">
+              헤더 스타일
+            </Label>
+            <select
+              id="headerStyle"
+              value={tableStyle.headerStyle || "default"}
+              onChange={(e) =>
+                onNestedChange("tableStyle", "headerStyle", e.target.value as "default" | "dark" | "light")
+              }
+              className="h-8 w-full rounded-md border px-2 text-xs"
+            >
+              <option value="default">기본</option>
+              <option value="dark">다크</option>
+              <option value="light">라이트</option>
+            </select>
+          </div>
+
+          <div className="space-y-1">
+            <Label htmlFor="rowHeight" className="text-xs">
+              행 높이
+            </Label>
+            <select
+              id="rowHeight"
+              value={tableStyle.rowHeight || "normal"}
+              onChange={(e) =>
+                onNestedChange("tableStyle", "rowHeight", e.target.value as "compact" | "normal" | "comfortable")
+              }
+              className="h-8 w-full rounded-md border px-2 text-xs"
+            >
+              <option value="compact">좁게</option>
+              <option value="normal">보통</option>
+              <option value="comfortable">넓게</option>
+            </select>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="alternateRows"
+              checked={tableStyle.alternateRows ?? false}
+              onCheckedChange={(checked) => onNestedChange("tableStyle", "alternateRows", checked)}
+            />
+            <Label htmlFor="alternateRows" className="text-xs">
+              교행 색상
+            </Label>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="hoverEffect"
+              checked={tableStyle.hoverEffect ?? true}
+              onCheckedChange={(checked) => onNestedChange("tableStyle", "hoverEffect", checked)}
+            />
+            <Label htmlFor="hoverEffect" className="text-xs">
+              호버 효과
+            </Label>
+          </div>
+
+          <div className="space-y-1">
+            <Label htmlFor="borderStyle" className="text-xs">
+              테두리 스타일
+            </Label>
+            <select
+              id="borderStyle"
+              value={tableStyle.borderStyle || "light"}
+              onChange={(e) =>
+                onNestedChange("tableStyle", "borderStyle", e.target.value as "none" | "light" | "heavy")
+              }
+              className="h-8 w-full rounded-md border px-2 text-xs"
+            >
+              <option value="none">없음</option>
+              <option value="light">얇게</option>
+              <option value="heavy">굵게</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.ts

@@ -1,367 +0,0 @@
-"use client";
-
-import { BaseLayoutRenderer, LayoutRendererProps } from "./BaseLayoutRenderer";
-import { LayoutDefinition } from "@/types/layout";
-import { LayoutRegistry } from "../LayoutRegistry";
-import { ComponentData, LayoutComponent } from "@/types/screen";
-import { LayoutZone } from "@/types/layout";
-import React from "react";
-import { DynamicComponentRenderer } from "../DynamicComponentRenderer";
-
-/**
- * 자동 등록 기능을 제공하는 베이스 레이아웃 렌더러
- *
- * 사용 방법:
- * 1. 이 클래스를 상속받습니다
- * 2. static layoutDefinition을 정의합니다
- * 3. 파일을 import하면 자동으로 등록됩니다
- */
-export class AutoRegisteringLayoutRenderer {
-  protected props: LayoutRendererProps;
-
-  constructor(props: LayoutRendererProps) {
-    this.props = props;
-  }
-
-  /**
-   * 레이아웃 정의 - 각 구현 클래스에서 반드시 정의해야 함
-   */
-  static readonly layoutDefinition: LayoutDefinition;
-
-  /**
-   * 렌더링 메서드 - 각 구현 클래스에서 오버라이드해야 함
-   */
-  render(): React.ReactElement {
-    throw new Error("render() method must be implemented by subclass");
-  }
-
-  /**
-   * 레이아웃 컨테이너 스타일을 계산합니다.
-   */
-  getLayoutContainerStyle(): React.CSSProperties {
-    const { layout, style: propStyle } = this.props;
-
-    const style: React.CSSProperties = {
-      width: layout.size.width,
-      height: layout.size.height,
-      position: "relative",
-      overflow: "hidden",
-      ...propStyle,
-    };
-
-    // 레이아웃 커스텀 스타일 적용
-    if (layout.style) {
-      Object.assign(style, this.convertComponentStyleToCSS(layout.style));
-    }
-
-    return style;
-  }
-
-  /**
-   * 컴포넌트 스타일을 CSS 스타일로 변환합니다.
-   */
-  protected convertComponentStyleToCSS(componentStyle: any): React.CSSProperties {
-    const cssStyle: React.CSSProperties = {};
-
-    if (componentStyle.backgroundColor) {
-      cssStyle.backgroundColor = componentStyle.backgroundColor;
-    }
-    if (componentStyle.borderColor) {
-      cssStyle.borderColor = componentStyle.borderColor;
-    }
-    if (componentStyle.borderWidth) {
-      cssStyle.borderWidth = `${componentStyle.borderWidth}px`;
-    }
-    if (componentStyle.borderStyle) {
-      cssStyle.borderStyle = componentStyle.borderStyle;
-    }
-    if (componentStyle.borderRadius) {
-      cssStyle.borderRadius = `${componentStyle.borderRadius}px`;
-    }
-
-    return cssStyle;
-  }
-
-  /**
-   * 존별 자식 컴포넌트들을 분류합니다.
-   */
-  getZoneChildren(zoneId: string): ComponentData[] {
-    return this.props.allComponents.filter((comp) => comp.parentId === this.props.layout.id && comp.zoneId === zoneId);
-  }
-
-  /**
-   * 레이아웃 존을 렌더링합니다.
-   */
-  renderZone(
-    zone: LayoutZone,
-    zoneChildren: ComponentData[] = [],
-    additionalProps: Record<string, any> = {},
-  ): React.ReactElement {
-    const { isDesignMode, onZoneClick, onComponentDrop } = this.props;
-
-    // 존 스타일 계산 - 항상 구역 경계 표시
-    const zoneStyle: React.CSSProperties = {
-      position: "relative",
-      // 구역 경계 시각화 - 항상 표시
-      border: "1px solid #e2e8f0",
-      borderRadius: "6px",
-      backgroundColor: "rgba(248, 250, 252, 0.5)",
-      transition: "all 0.2s ease",
-      ...this.getZoneStyle(zone),
-      ...additionalProps.style,
-    };
-
-    // 디자인 모드일 때 더 강조된 스타일
-    if (isDesignMode) {
-      zoneStyle.border = "2px dashed #cbd5e1";
-      zoneStyle.backgroundColor = "rgba(241, 245, 249, 0.8)";
-    }
-
-    // 호버 효과를 위한 추가 스타일
-    const dropZoneStyle: React.CSSProperties = {
-      minHeight: isDesignMode ? "60px" : "40px",
-      borderRadius: "4px",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: zoneChildren.length === 0 ? "center" : "stretch",
-      justifyContent: zoneChildren.length === 0 ? "flex-start" : "flex-start",
-      color: "#64748b",
-      fontSize: "12px",
-      transition: "all 0.2s ease",
-      padding: "8px",
-      position: "relative",
-    };
-
-    return (
-      <div
-        key={zone.id}
-        className={`layout-zone ${additionalProps.className || ""}`}
-        style={zoneStyle}
-        onClick={(e) => {
-          e.stopPropagation();
-          onZoneClick?.(zone.id, e);
-        }}
-        onDragOver={(e) => {
-          e.preventDefault();
-          e.dataTransfer.dropEffect = "copy";
-        }}
-        onDrop={(e) => {
-          e.preventDefault();
-          const componentData = e.dataTransfer.getData("application/json");
-          if (componentData) {
-            try {
-              const component = JSON.parse(componentData);
-              onComponentDrop?.(zone.id, component, e);
-            } catch (error) {
-              console.error("컴포넌트 드롭 데이터 파싱 오류:", error);
-            }
-          }
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.borderColor = "#3b82f6";
-          e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.05)";
-          e.currentTarget.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.1)";
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.borderColor = isDesignMode ? "#cbd5e1" : "#e2e8f0";
-          e.currentTarget.style.backgroundColor = isDesignMode
-            ? "rgba(241, 245, 249, 0.8)"
-            : "rgba(248, 250, 252, 0.5)";
-          e.currentTarget.style.boxShadow = "none";
-        }}
-        {...additionalProps}
-      >
-        {/* 존 라벨 */}
-        <div
-          className="zone-label"
-          style={{
-            position: "absolute",
-            top: "-2px",
-            left: "8px",
-            backgroundColor: isDesignMode ? "#3b82f6" : "#64748b",
-            color: "white",
-            fontSize: "10px",
-            padding: "2px 6px",
-            borderRadius: "0 0 4px 4px",
-            fontWeight: "500",
-            zIndex: 10,
-            opacity: isDesignMode ? 1 : 0.7,
-          }}
-        >
-          {zone.name || zone.id}
-        </div>
-
-        {/* 드롭존 */}
-        <div className="drop-zone" style={dropZoneStyle}>
-          {zoneChildren.length > 0 ? (
-            zoneChildren.map((child) => (
-              <DynamicComponentRenderer
-                key={child.id}
-                component={child}
-                allComponents={this.props.allComponents}
-                isDesignMode={isDesignMode}
-              />
-            ))
-          ) : (
-            <div className="empty-zone-indicator" style={{ textAlign: "center", opacity: 0.6 }}>
-              {isDesignMode ? "컴포넌트를 드래그하여 추가하세요" : ""}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  /**
-   * 존의 스타일을 계산합니다.
-   */
-  protected getZoneStyle(zone: LayoutZone): React.CSSProperties {
-    const style: React.CSSProperties = {};
-
-    if (zone.size) {
-      if (zone.size.width) {
-        style.width = typeof zone.size.width === "number" ? `${zone.size.width}px` : zone.size.width;
-      }
-      if (zone.size.height) {
-        style.height = typeof zone.size.height === "number" ? `${zone.size.height}px` : zone.size.height;
-      }
-      if (zone.size.minWidth) {
-        style.minWidth = typeof zone.size.minWidth === "number" ? `${zone.size.minWidth}px` : zone.size.minWidth;
-      }
-      if (zone.size.minHeight) {
-        style.minHeight = typeof zone.size.minHeight === "number" ? `${zone.size.minHeight}px` : zone.size.minHeight;
-      }
-    }
-
-    return style;
-  }
-
-  /**
-   * 자동 등록 상태 추적
-   */
-  private static registeredLayouts = new Set<string>();
-
-  /**
-   * 클래스가 정의될 때 자동으로 레지스트리에 등록
-   */
-  static registerSelf(): void {
-    const definition = this.layoutDefinition;
-
-    if (!definition) {
-      console.error(`❌ ${this.name}: layoutDefinition이 정의되지 않았습니다.`);
-      return;
-    }
-
-    if (this.registeredLayouts.has(definition.id)) {
-      console.warn(`⚠️ ${definition.id} 레이아웃이 이미 등록되어 있습니다.`);
-      return;
-    }
-
-    try {
-      // 레지스트리에 등록
-      LayoutRegistry.registerLayout(definition);
-      this.registeredLayouts.add(definition.id);
-
-      console.log(`✅ 자동 등록 완료: ${definition.id} (${definition.name})`);
-
-      // 개발 모드에서 추가 정보 출력
-      if (process.env.NODE_ENV === "development") {
-        console.log(`📦 ${definition.id}:`, {
-          name: definition.name,
-          category: definition.category,
-          zones: definition.defaultZones?.length || 0,
-          tags: definition.tags?.join(", ") || "none",
-        });
-      }
-    } catch (error) {
-      console.error(`❌ ${definition.id} 레이아웃 등록 실패:`, error);
-    }
-  }
-
-  /**
-   * 레이아웃 등록 해제 (개발 모드에서 Hot Reload용)
-   */
-  static unregisterSelf(): void {
-    const definition = this.layoutDefinition;
-
-    if (definition && this.registeredLayouts.has(definition.id)) {
-      LayoutRegistry.unregisterLayout(definition.id);
-      this.registeredLayouts.delete(definition.id);
-      console.log(`🗑️ 등록 해제: ${definition.id}`);
-    }
-  }
-
-  /**
-   * Hot Reload 지원 (개발 모드)
-   */
-  static reloadSelf(): void {
-    if (process.env.NODE_ENV === "development") {
-      this.unregisterSelf();
-      this.registerSelf();
-      console.log(`🔄 Hot Reload: ${this.layoutDefinition?.id}`);
-    }
-  }
-
-  /**
-   * 등록된 레이아웃 목록 조회
-   */
-  static getRegisteredLayouts(): string[] {
-    return Array.from(this.registeredLayouts);
-  }
-
-  /**
-   * 레이아웃 정의 유효성 검사
-   */
-  static validateDefinition(): { isValid: boolean; errors: string[]; warnings: string[] } {
-    const definition = this.layoutDefinition;
-
-    if (!definition) {
-      return {
-        isValid: false,
-        errors: ["layoutDefinition이 정의되지 않았습니다."],
-        warnings: [],
-      };
-    }
-
-    const errors: string[] = [];
-    const warnings: string[] = [];
-
-    // 필수 필드 검사
-    if (!definition.id) errors.push("ID가 필요합니다.");
-    if (!definition.name) errors.push("이름이 필요합니다.");
-    if (!definition.component) errors.push("컴포넌트가 필요합니다.");
-    if (!definition.category) errors.push("카테고리가 필요합니다.");
-
-    // 권장사항 검사
-    if (!definition.description || definition.description.length < 10) {
-      warnings.push("설명은 10자 이상 권장됩니다.");
-    }
-    if (!definition.defaultZones || definition.defaultZones.length === 0) {
-      warnings.push("기본 존 정의가 권장됩니다.");
-    }
-
-    return {
-      isValid: errors.length === 0,
-      errors,
-      warnings,
-    };
-  }
-}
-
-/**
- * 개발 모드에서 Hot Module Replacement 지원
- */
-if (process.env.NODE_ENV === "development" && typeof window !== "undefined") {
-  // HMR API가 있는 경우 등록
-  if ((module as any).hot) {
-    (module as any).hot.accept();
-
-    // 글로벌 Hot Reload 함수 등록
-    (window as any).__reloadLayout__ = (layoutId: string) => {
-      const layouts = AutoRegisteringLayoutRenderer.getRegisteredLayouts();
-      console.log(`🔄 Available layouts for reload:`, layouts);
-
-      // TODO: 특정 레이아웃만 리로드하는 로직 구현
-    };
-  }
-}

frontend/lib/registry/layouts/card-layout/config.ts

@@ -1,14 +1,9 @@
 /**
  * card-layout 기본 설정
  */
-export const Card-layoutLayoutConfig = {
+export const CardLayoutConfig = {
   defaultConfig: {
-    card-layout: {
+    "card-layout": {
-      // TODO: 레이아웃 전용 설정 정의
-      // 예시:
-      // spacing: 16,
-      // orientation: "vertical",
-      // allowResize: true,
     },
   },
   
@@ -51,14 +46,12 @@ export const Card-layoutLayoutConfig = {
     }
   ],
   
-  // 설정 스키마 (검증용)
   configSchema: {
     type: "object",
     properties: {
-      card-layout: {
+      "card-layout": {
         type: "object",
         properties: {
-          // TODO: 설정 스키마 정의
         },
         additionalProperties: false,
       },

frontend/lib/registry/layouts/card-layout/types.ts

@@ -3,26 +3,21 @@ import { LayoutRendererProps } from "../BaseLayoutRenderer";
 /**
  * card-layout 설정 타입
  */
-export interface Card-layoutConfig {
+export interface CardLayoutConfig {
   // TODO: 레이아웃 전용 설정 타입 정의
-  // 예시:
-  // spacing?: number;
-  // orientation?: "vertical" | "horizontal";
-  // allowResize?: boolean;
 }
 
 /**
  * card-layout Props 타입
  */
-export interface Card-layoutLayoutProps extends LayoutRendererProps {
+export interface CardLayoutLayoutProps extends LayoutRendererProps {
-  renderer: any; // Card-layoutLayoutRenderer 타입
+  renderer: any;
 }
 
 /**
  * card-layout 존 타입
  */
-export interface Card-layoutZone {
+export interface CardLayoutZone {
   id: string;
   name: string;
-  // TODO: 존별 전용 속성 정의
 }

frontend/lib/registry/layouts/hero-section/config.ts

@@ -3,7 +3,7 @@
  */
 export const HeroSectionLayoutConfig = {
   defaultConfig: {
-    hero-section: {
+    "hero-section": {
       // TODO: 레이아웃 전용 설정 정의
       // 예시:
       // spacing: 16,
@@ -37,7 +37,7 @@ export const HeroSectionLayoutConfig = {
   configSchema: {
     type: "object",
     properties: {
-      hero-section: {
+      "hero-section": {
         type: "object",
         properties: {
           // TODO: 설정 스키마 정의

frontend/lib/utils/buttonActions.ts

@@ -56,7 +56,8 @@ export type ButtonActionType =
   | "swap_fields" // 필드 값 교환 (출발지 ↔ 목적지)
   | "transferData" // 데이터 전달 (컴포넌트 간 or 화면 간)
   | "quickInsert" // 즉시 저장 (선택한 데이터를 특정 테이블에 즉시 INSERT)
-  | "event"; // 이벤트 버스로 이벤트 발송 (스케줄 생성 등)
+  | "event" // 이벤트 버스로 이벤트 발송 (스케줄 생성 등)
+  | "approval"; // 결재 요청
 
 /**
  * 버튼 액션 설정
@@ -451,6 +452,9 @@ export class ButtonActionExecutor {
         case "event":
           return await this.handleEvent(config, context);
 
+        case "approval":
+          return this.handleApproval(config, context);
+
         default:
           console.warn(`지원되지 않는 액션 타입: ${config.type}`);
           return false;
@@ -7598,6 +7602,37 @@ export class ButtonActionExecutor {
       return false;
     }
   }
+
+  /**
+   * 결재 요청 모달 열기
+   */
+  private static handleApproval(config: ButtonActionConfig, context: ButtonActionContext): boolean {
+    try {
+      const selectedRow = context.selectedRowsData?.[0] || context.formData || {};
+      const targetTable = (config as any).approvalTargetTable || context.tableName || "";
+      const recordIdField = (config as any).approvalRecordIdField || "id";
+      const targetRecordId = selectedRow?.[recordIdField] || "";
+
+      window.dispatchEvent(
+        new CustomEvent("open-approval-modal", {
+          detail: {
+            targetTable,
+            targetRecordId: targetRecordId ? String(targetRecordId) : "",
+            targetRecordData: Object.keys(selectedRow).length > 0 ? selectedRow : undefined,
+            definitionId: (config as any).approvalDefinitionId || undefined,
+            screenId: context.screenId ? Number(context.screenId) : undefined,
+            buttonComponentId: context.formData?.buttonId,
+          },
+        }),
+      );
+
+      return true;
+    } catch (error) {
+      console.error("[handleApproval] 결재 요청 오류:", error);
+      toast.error("결재 요청 모달을 열 수 없습니다.");
+      return false;
+    }
+  }
 }
 
 /**
@@ -7722,4 +7757,7 @@ export const DEFAULT_BUTTON_ACTIONS: Record<ButtonActionType, Partial<ButtonActi
   event: {
     type: "event",
   },
+  approval: {
+    type: "approval",
+  },
 };

frontend/lib/utils/improvedButtonActionExecutor.ts

@@ -976,6 +976,35 @@ export class ImprovedButtonActionExecutor {
         return await this.executeTransferDataAction(buttonConfig, formData, context);
       }
 
+      // 결재 요청 모달 열기
+      if (buttonConfig.actionType === "approval") {
+        const actionConfig = (buttonConfig as any).componentConfig?.action || buttonConfig;
+        const selectedRow = context.selectedRows?.[0] || context.formData || formData || {};
+        const targetTable = actionConfig.approvalTargetTable || "";
+        const recordIdField = actionConfig.approvalRecordIdField || "id";
+        const targetRecordId = selectedRow?.[recordIdField] || "";
+
+        window.dispatchEvent(
+          new CustomEvent("open-approval-modal", {
+            detail: {
+              targetTable,
+              targetRecordId: targetRecordId ? String(targetRecordId) : "",
+              targetRecordData: Object.keys(selectedRow).length > 0 ? selectedRow : undefined,
+              definitionId: actionConfig.approvalDefinitionId || undefined,
+              screenId: context.screenId ? Number(context.screenId) : undefined,
+              buttonComponentId: context.buttonId,
+            },
+          }),
+        );
+
+        return {
+          success: true,
+          message: "결재 요청 모달이 열렸습니다",
+          executionTime: performance.now() - startTime,
+          data: { actionType: "approval", targetTable, targetRecordId },
+        };
+      }
+
       // 기존 액션들 (임시 구현)
       const result = {
         success: true,

frontend/scripts/approval-flow-test.ts

@@ -0,0 +1,171 @@
+/**
+ * 결재함 플로우 E2E 테스트 스크립트
+ * 실행: npx tsx scripts/approval-flow-test.ts
+ */
+import { chromium } from "playwright";
+
+const BASE_URL = "http://localhost:9771";
+const LOGIN_ID = "wace";
+const LOGIN_PW = "1234";
+const FALLBACK_PW = "qlalfqjsgh11"; // 마스터 패스워드 (1234 실패 시)
+
+async function main() {
+  const results: string[] = [];
+  const consoleErrors: string[] = [];
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1280, height: 800 }, // 데스크톱 뷰 (사이드바 표시)
+  });
+  const page = await context.newPage();
+
+  // 콘솔 에러 수집
+  page.on("console", (msg) => {
+    const type = msg.type();
+    if (type === "error") {
+      const text = msg.text();
+      consoleErrors.push(text);
+    }
+  });
+
+  try {
+    // 1. http://localhost:9771 이동
+    results.push("=== 1. http://localhost:9771 이동 ===");
+    await page.goto(BASE_URL, { waitUntil: "networkidle", timeout: 15000 });
+    results.push("OK: 페이지 로드 완료");
+
+    // 2. 로그인 여부 확인
+    results.push("\n=== 2. 로그인 상태 확인 ===");
+    const isLoginPage = await page.locator('#userId, input[name="userId"]').count() > 0;
+    if (isLoginPage) {
+      results.push("로그인 페이지 감지됨. 로그인 시도...");
+      await page.fill('#userId', LOGIN_ID);
+      await page.fill('#password', LOGIN_PW);
+      await page.click('button[type="submit"]');
+      await page.waitForTimeout(4000);
+
+      // 여전히 로그인 페이지면 마스터 패스워드로 재시도
+      const stillLoginPage = await page.locator('#userId').count() > 0;
+      if (stillLoginPage) {
+        results.push("1234 로그인 실패. 마스터 패스워드로 재시도...");
+        await page.fill('#userId', LOGIN_ID);
+        await page.fill('#password', FALLBACK_PW);
+        await page.click('button[type="submit"]');
+        await page.waitForTimeout(4000);
+      }
+      results.push("로그인 폼 제출 완료");
+    } else {
+      results.push("이미 로그인된 상태로 판단 (로그인 폼 없음)");
+    }
+
+    // 3. 사용자 프로필 아바타 클릭 (사이드바 하단)
+    results.push("\n=== 3. 사용자 프로필 아바타 클릭 ===");
+    await page.waitForTimeout(2000);
+
+    // 사이드바 하단 사용자 프로필 버튼 (border-t border-slate-200 내부의 button)
+    const sidebarAvatarBtn = page.locator('aside div.border-t.border-slate-200 button').first();
+    let avatarClicked = false;
+    if ((await sidebarAvatarBtn.count()) > 0) {
+      try {
+        // force: true - Next.js dev overlay가 클릭을 가로채는 경우 우회
+        await sidebarAvatarBtn.click({ timeout: 5000, force: true });
+        avatarClicked = true;
+        results.push("OK: 사이드바 하단 아바타 클릭 완료");
+        await page.waitForTimeout(500); // 드롭다운 열림 대기
+      } catch (e) {
+        results.push(`WARN: 사이드바 아바타 클릭 실패 - ${(e as Error).message}`);
+      }
+    }
+
+    if (!avatarClicked) {
+      // 모바일 헤더 아바타 또는 fallback
+      const headerAvatar = page.locator('header button:has(div.rounded-full)').first();
+      if ((await headerAvatar.count()) > 0) {
+        await headerAvatar.click({ force: true });
+        avatarClicked = true;
+        results.push("OK: 헤더 아바타 클릭 (모바일 뷰?)");
+      }
+    }
+
+    if (!avatarClicked) {
+      results.push("WARN: 아바타 클릭 실패. 직접 /admin/approvalBox로 이동하여 페이지 검증");
+      await page.goto(`${BASE_URL}/admin/approvalBox`, { waitUntil: "networkidle", timeout: 10000 });
+    }
+
+    await page.waitForTimeout(1000);
+
+    // 4. "결재함" 메뉴 확인 (드롭다운이 열린 경우)
+    results.push("\n=== 4. 결재함 메뉴 확인 ===");
+    const approvalMenuItem = page.locator('[role="menuitem"]:has-text("결재함"), [data-radix-collection-item]:has-text("결재함")').first();
+    const hasApprovalMenu = (await approvalMenuItem.count()) > 0;
+    if (hasApprovalMenu) {
+      results.push("OK: 결재함 메뉴가 보입니다.");
+    } else {
+      results.push("FAIL: 결재함 메뉴를 찾을 수 없습니다.");
+    }
+
+    // 5. 결재함 메뉴 클릭
+    results.push("\n=== 5. 결재함 메뉴 클릭 ===");
+    if (hasApprovalMenu) {
+      await approvalMenuItem.click({ force: true });
+      await page.waitForTimeout(3000);
+      results.push("OK: 결재함 메뉴 클릭 완료");
+    } else if (!avatarClicked) {
+      results.push("(직접 이동으로 스킵 - 이미 approvalBox 페이지)");
+    } else {
+      results.push("WARN: 드롭다운에서 결재함 메뉴 미발견. 직접 이동...");
+      await page.goto(`${BASE_URL}/admin/approvalBox`, { waitUntil: "networkidle", timeout: 10000 });
+      await page.waitForTimeout(2000);
+    }
+
+    // 6. /admin/approvalBox 페이지 렌더링 확인
+    results.push("\n=== 6. /admin/approvalBox 페이지 확인 ===");
+    const currentUrl = page.url();
+    const isApprovalBoxPage = currentUrl.includes("/admin/approvalBox");
+    results.push(`현재 URL: ${currentUrl}`);
+    results.push(isApprovalBoxPage ? "OK: approvalBox 페이지에 있습니다." : "FAIL: approvalBox 페이지가 아닙니다.");
+
+    // 제목 "결재함" 확인
+    const titleEl = page.locator('h1:has-text("결재함")');
+    const hasTitle = (await titleEl.count()) > 0;
+    results.push(hasTitle ? "OK: 제목 '결재함' 확인됨" : "FAIL: 제목 '결재함' 없음");
+
+    // 탭 확인: 수신함, 상신함
+    const receivedTab = page.locator('button[role="tab"], [role="tab"]').filter({ hasText: "수신함" });
+    const sentTab = page.locator('button[role="tab"], [role="tab"]').filter({ hasText: "상신함" });
+    const hasReceivedTab = (await receivedTab.count()) > 0;
+    const hasSentTab = (await sentTab.count()) > 0;
+    results.push(hasReceivedTab ? "OK: '수신함' 탭 확인됨" : "FAIL: '수신함' 탭 없음");
+    results.push(hasSentTab ? "OK: '상신함' 탭 확인됨" : "FAIL: '상신함' 탭 없음");
+
+    // 7. 콘솔 에러 확인
+    results.push("\n=== 7. 콘솔 에러 확인 ===");
+    if (consoleErrors.length === 0) {
+      results.push("OK: 콘솔 에러 없음");
+    } else {
+      results.push(`WARN: 콘솔 에러 ${consoleErrors.length}건 발견:`);
+      consoleErrors.slice(0, 10).forEach((err, i) => {
+        results.push(`  [${i + 1}] ${err.substring(0, 200)}${err.length > 200 ? "..." : ""}`);
+      });
+      if (consoleErrors.length > 10) {
+        results.push(`  ... 외 ${consoleErrors.length - 10}건`);
+      }
+    }
+
+    // 스크린샷 저장 (프로젝트 내)
+    await page.screenshot({ path: "approval-box-result.png" }).catch(() => {});
+  } catch (err: any) {
+    results.push(`\nERROR: ${err.message}`);
+  } finally {
+    await browser.close();
+  }
+
+  // 결과 출력
+  console.log("\n" + "=".repeat(60));
+  console.log("결재함 플로우 테스트 결과");
+  console.log("=".repeat(60));
+  results.forEach((r) => console.log(r));
+  console.log("\n" + "=".repeat(60));
+}
+
+main();

frontend/tsconfig.json

@@ -24,5 +24,12 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules", ".next"]
+  "exclude": [
+    "node_modules",
+    ".next",
+    "components/screen/ScreenDesigner_old.tsx",
+    "components/admin/dashboard/widgets/yard-3d/Yard3DCanvas_NEW.tsx",
+    "components/flow/FlowDataListModal.tsx",
+    "test-scenarios"
+  ]
 }

frontend/types/control-management.ts

@@ -12,6 +12,7 @@ import {
   TimestampFields,
   BaseApiResponse,
 } from "./v2-core";
+import { FlowVisibilityConfig } from "./screen-management";
 
 // ===== 버튼 제어 관련 =====
 
@@ -58,23 +59,6 @@ export interface ExtendedButtonTypeConfig {
   borderColor?: string;
 }
 
-/**
- * 플로우 단계별 버튼 표시 설정
- */
-export interface FlowVisibilityConfig {
-  enabled: boolean;
-  targetFlowComponentId: string;
-  targetFlowId?: number;
-  targetFlowName?: string;
-  mode: "whitelist" | "blacklist" | "all";
-  visibleSteps?: number[];
-  hiddenSteps?: number[];
-  layoutBehavior: "preserve-position" | "auto-compact";
-  groupId?: string;
-  groupDirection?: "horizontal" | "vertical";
-  groupGap?: number;
-  groupAlign?: "start" | "center" | "end" | "space-between" | "space-around";
-}
 
 /**
  * 🔥 단순화된 버튼 데이터플로우 설정

frontend/types/index.ts

@@ -7,6 +7,8 @@
 
 // ===== 핵심 공통 타입들 =====
 export * from "./v2-core";
+import type { WebType, ButtonActionType, CompanyCode } from "./v2-core";
+import type { ComponentData } from "./screen-management";
 
 // ===== 시스템별 전용 타입들 =====
 export * from "./screen-management";
@@ -258,86 +260,3 @@ export type SelectedRowData = Record<string, unknown>;
  */
 export type TableData = Record<string, unknown>[];
 
-// ===== 마이그레이션 도우미 =====
-
-/**
- * 기존 screen.ts 타입을 새로운 통합 타입으로 마이그레이션하는 도우미
- */
-export namespace Migration {
-  /**
-   * 기존 screen.ts의 WebType을 새로운 WebType으로 변환
-   */
-  export const migrateWebType = (oldWebType: string): WebType => {
-    // 기존 타입이 새로운 WebType에 포함되어 있는지 확인
-    if (isWebType(oldWebType)) {
-      return oldWebType as WebType;
-    }
-
-    // 호환되지 않는 타입의 경우 기본값 반환
-    console.warn(`Unknown WebType: ${oldWebType}, defaulting to 'text'`);
-    return "text";
-  };
-
-  /**
-   * 기존 ButtonActionType을 새로운 ButtonActionType으로 변환
-   */
-  export const migrateButtonActionType = (oldActionType: string): ButtonActionType => {
-    if (isButtonActionType(oldActionType)) {
-      return oldActionType as ButtonActionType;
-    }
-
-    console.warn(`Unknown ButtonActionType: ${oldActionType}, defaulting to 'submit'`);
-    return "submit";
-  };
-
-  /**
-   * Y/N 문자열을 boolean으로 변환 (DB 호환성)
-   */
-  export const migrateYNToBoolean = (value: string | undefined): boolean => {
-    return value === "Y";
-  };
-
-  /**
-   * boolean을 Y/N 문자열로 변환 (DB 호환성)
-   */
-  export const migrateBooleanToYN = (value: boolean): string => {
-    return value ? "Y" : "N";
-  };
-}
-
-// ===== 타입 검증 도우미 =====
-
-/**
- * 런타임에서 타입 안전성을 보장하는 검증 함수들
- */
-export namespace TypeValidation {
-  /**
-   * 객체가 BaseComponent 인터페이스를 만족하는지 검증
-   */
-  export const validateBaseComponent = (obj: unknown): obj is BaseComponent => {
-    if (typeof obj !== "object" || obj === null) return false;
-
-    const component = obj as Record<string, unknown>;
-    return (
-      typeof component.id === "string" &&
-      typeof component.type === "string" &&
-      isComponentType(component.type as string) &&
-      typeof component.position === "object" &&
-      typeof component.size === "object"
-    );
-  };
-
-  /**
-   * 객체가 WebTypeConfig를 만족하는지 검증
-   */
-  export const validateWebTypeConfig = (obj: unknown): obj is WebTypeConfig => {
-    return typeof obj === "object" && obj !== null;
-  };
-
-  /**
-   * 문자열이 유효한 CompanyCode인지 검증
-   */
-  export const validateCompanyCode = (code: unknown): code is CompanyCode => {
-    return typeof code === "string" && code.length > 0;
-  };
-}

frontend/types/node-editor.ts

@@ -88,12 +88,18 @@ export interface ExternalDBSourceNodeData {
 
 // REST API 소스 노드
 export interface RestAPISourceNodeData {
-  method: "GET" | "POST" | "PUT" | "DELETE";
+  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
   url: string;
   headers?: Record<string, string>;
-  body?: string;
+  body?: any;
   responseFields: FieldDefinition[];
   displayName?: string;
+  authentication?: {
+    type: "none" | "bearer" | "basic" | "apikey";
+    token?: string;
+  };
+  timeout?: number;
+  responseMapping?: string;
 }
 
 // 조건 연산자 타입
@@ -510,21 +516,6 @@ export interface UpsertActionNodeData {
   };
 }
 
-// REST API 소스 노드
-export interface RestAPISourceNodeData {
-  url: string;
-  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
-  headers?: Record<string, string>;
-  body?: any;
-  authentication?: {
-    type: "none" | "bearer" | "basic" | "apikey";
-    token?: string;
-  };
-  timeout?: number;
-  responseMapping?: string; // JSON 경로 (예: "data.items")
-  displayName?: string;
-}
-
 // 주석 노드
 export interface CommentNodeData {
   content: string;
@@ -788,7 +779,7 @@ export type EdgeType =
   | "conditionalTrue" // 조건 TRUE
   | "conditionalFalse"; // 조건 FALSE
 
-export interface FlowEdge extends ReactFlowEdge {
+export interface FlowEdge extends Omit<ReactFlowEdge, 'type' | 'data'> {
   type?: EdgeType;
   data?: {
     dataType?: string;

frontend/types/table-management.ts

@@ -81,6 +81,7 @@ export interface V2ColumnInfo {
  * 백엔드 호환용 컬럼 타입 정보 (기존 ColumnTypeInfo)
  */
 export interface ColumnTypeInfo {
+  tableName?: string;
   columnName: string;
   displayName: string;
   dataType: string;
@@ -367,6 +368,9 @@ export const WEB_TYPE_OPTIONS = [
   { value: "email", label: "email", description: "이메일 입력" },
   { value: "tel", label: "tel", description: "전화번호 입력" },
   { value: "url", label: "url", description: "URL 입력" },
+  { value: "checkbox-group", label: "checkbox-group", description: "체크박스 그룹" },
+  { value: "radio-horizontal", label: "radio-horizontal", description: "가로 라디오" },
+  { value: "radio-vertical", label: "radio-vertical", description: "세로 라디오" },
 ] as const;
 
 /**

frontend/types/v2-core.ts

@@ -23,21 +23,40 @@ export type WebType =
   // 숫자 입력
   | "number"
   | "decimal"
+  | "percentage"
+  | "currency"
   // 날짜/시간 입력
   | "date"
   | "datetime"
+  | "month"
+  | "year"
+  | "time"
+  | "daterange"
   // 선택 입력
   | "select"
   | "dropdown"
   | "radio"
+  | "radio-horizontal"
+  | "radio-vertical"
   | "checkbox"
+  | "checkbox-group"
   | "boolean"
+  | "multiselect"
+  | "autocomplete"
   // 특수 입력
   | "code" // 공통코드 참조
+  | "code-radio" // 공통코드 라디오
+  | "code-autocomplete" // 공통코드 자동완성
   | "entity" // 엔티티 참조
   | "file" // 파일 업로드
   | "image" // 이미지 표시
+  | "password" // 비밀번호
   | "button" // 버튼 컴포넌트
+  | "category" // 카테고리
+  | "component" // 컴포넌트 참조
+  | "form" // 폼
+  | "table" // 테이블
+  | "array" // 배열
   // 레이아웃/컨테이너 타입
   | "container" // 컨테이너
   | "group" // 그룹
@@ -79,7 +98,9 @@ export type ButtonActionType =
   // 데이터 전달
   | "transferData" // 선택된 데이터를 다른 컴포넌트/화면으로 전달
   // 즉시 저장
-  | "quickInsert"; // 선택한 데이터를 특정 테이블에 즉시 INSERT
+  | "quickInsert" // 선택한 데이터를 특정 테이블에 즉시 INSERT
+  // 결재 워크플로우
+  | "approval"; // 결재 요청을 생성합니다
 
 /**
  * 컴포넌트 타입 정의
@@ -339,6 +360,7 @@ export const isButtonActionType = (value: string): value is ButtonActionType =>
     "control",
     "transferData",
     "quickInsert",
+    "approval",
   ];
   return actionTypes.includes(value as ButtonActionType);
 };

scripts/menu-copy-automation.ts

@@ -0,0 +1,161 @@
+/**
+ * 메뉴 복사 자동화 스크립트
+ *
+ * 실행: npx ts-node scripts/menu-copy-automation.ts
+ * 또는: npx playwright test scripts/menu-copy-automation.ts (playwright test 모드)
+ *
+ * 요구사항: playwright 설치 (npm install playwright)
+ */
+
+import { chromium, type Browser, type Page } from "playwright";
+import * as fs from "fs";
+import * as path from "path";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../screenshots-menu-copy");
+
+// 스크린샷 저장
+async function takeScreenshot(page: Page, stepName: string): Promise<string> {
+  if (!fs.existsSync(SCREENSHOT_DIR)) {
+    fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
+  }
+  const filename = `${Date.now()}_${stepName}.png`;
+  const filepath = path.join(SCREENSHOT_DIR, filename);
+  await page.screenshot({ path: filepath, fullPage: true });
+  console.log(`[스크린샷] ${stepName} -> ${filepath}`);
+  return filepath;
+}
+
+async function main() {
+  let browser: Browser | null = null;
+  const screenshots: { step: string; path: string }[] = [];
+
+  try {
+    console.log("=== 메뉴 복사 자동화 시작 ===\n");
+
+    browser = await chromium.launch({ headless: false });
+    const context = await browser.newContext({
+      viewport: { width: 1280, height: 900 },
+      ignoreHTTPSErrors: true,
+    });
+    const page = await context.newPage();
+
+    // 1. 로그인
+    console.log("1. 로그인 페이지 이동...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "networkidle" });
+    await takeScreenshot(page, "01_login_page").then((p) =>
+      screenshots.push({ step: "로그인 페이지", path: p })
+    );
+
+    await page.fill('#userId', "admin");
+    await page.fill('#password', "1234");
+    await page.click('button[type="submit"]');
+    await page.waitForTimeout(3000);
+
+    await takeScreenshot(page, "02_after_login").then((p) =>
+      screenshots.push({ step: "로그인 후", path: p })
+    );
+
+    // 로그인 실패 시 wace 계정 시도 (admin이 DB에 없을 수 있음)
+    const currentUrl = page.url();
+    if (currentUrl.includes("/login")) {
+      console.log("admin 로그인 실패, wace 계정으로 재시도...");
+      await page.fill('#userId', "wace");
+      await page.fill('#password', "1234");
+      await page.click('button[type="submit"]');
+      await page.waitForTimeout(3000);
+    }
+
+    // 2. 메뉴 관리 페이지로 이동
+    console.log("2. 메뉴 관리 페이지 이동...");
+    await page.goto(`${BASE_URL}/admin/menu`, { waitUntil: "networkidle" });
+    await page.waitForTimeout(2000);
+    await takeScreenshot(page, "03_menu_page").then((p) =>
+      screenshots.push({ step: "메뉴 관리 페이지", path: p })
+    );
+
+    // 3. 회사 선택 - 탑씰 (COMPANY_7)
+    console.log("3. 회사 선택: 탑씰 (COMPANY_7)...");
+    const companyDropdown = page.locator('.company-dropdown button, button:has(svg)').first();
+    await companyDropdown.click();
+    await page.waitForTimeout(500);
+
+    const topsealOption = page.getByText("탑씰", { exact: false }).first();
+    await topsealOption.click();
+    await page.waitForTimeout(1500);
+    await takeScreenshot(page, "04_company_selected").then((p) =>
+      screenshots.push({ step: "탑씰 선택 후", path: p })
+    );
+
+    // 4. "사용자" 메뉴 찾기 및 복사 버튼 클릭
+    console.log("4. 사용자 메뉴 찾기 및 복사 버튼 클릭...");
+    const userMenuRow = page.locator('tr').filter({ hasText: "사용자" }).first();
+    await userMenuRow.waitFor({ timeout: 10000 });
+    const copyButton = userMenuRow.getByRole("button", { name: "복사" });
+    await copyButton.click();
+    await page.waitForTimeout(1500);
+    await takeScreenshot(page, "05_copy_dialog_open").then((p) =>
+      screenshots.push({ step: "복사 다이얼로그", path: p })
+    );
+
+    // 5. 대상 회사 선택: 두바이 강정 단단 (COMPANY_18)
+    console.log("5. 대상 회사 선택: 두바이 강정 단단 (COMPANY_18)...");
+    const targetCompanyTrigger = page.locator('[id="company"]').or(page.getByRole("combobox")).first();
+    await targetCompanyTrigger.click();
+    await page.waitForTimeout(500);
+
+    const dubaiOption = page.getByText("두바이 강정 단단", { exact: false }).first();
+    await dubaiOption.click();
+    await page.waitForTimeout(500);
+    await takeScreenshot(page, "06_target_company_selected").then((p) =>
+      screenshots.push({ step: "대상 회사 선택 후", path: p })
+    );
+
+    // 6. 복사 시작 버튼 클릭
+    console.log("6. 복사 시작...");
+    const copyStartButton = page.getByRole("button", { name: /복사 시작|확인/ }).first();
+    await copyStartButton.click();
+
+    // 7. 복사 완료 대기 (최대 5분)
+    console.log("7. 복사 완료 대기 (최대 5분)...");
+    try {
+      await page.waitForSelector('text=완료, text=성공, [role="status"]', { timeout: 300000 });
+      await page.waitForTimeout(3000);
+    } catch {
+      console.log("타임아웃 또는 완료 메시지 대기 중...");
+    }
+    await takeScreenshot(page, "07_copy_result").then((p) =>
+      screenshots.push({ step: "복사 결과", path: p })
+    );
+
+    // 결과 확인
+    const resultText = await page.locator("body").textContent();
+    if (resultText?.includes("완료") || resultText?.includes("성공")) {
+      console.log("\n=== 메뉴 복사 성공 ===");
+    } else if (resultText?.includes("오류") || resultText?.includes("실패") || resultText?.includes("error")) {
+      console.log("\n=== 에러 발생 가능 - 스크린샷 확인 필요 ===");
+    }
+
+    console.log("\n=== 스크린샷 목록 ===");
+    screenshots.forEach((s) => console.log(`  - ${s.step}: ${s.path}`));
+  } catch (error) {
+    console.error("오류 발생:", error);
+    if (browser) {
+      const pages = (browser as any).contexts?.()?.[0]?.pages?.() || [];
+      for (const p of pages) {
+        try {
+          await takeScreenshot(p, "error_state").then((path) =>
+            screenshots.push({ step: "에러 상태", path })
+          );
+        } catch {}
+      }
+    }
+    throw error;
+  } finally {
+    if (browser) {
+      await browser.close();
+    }
+  }
+}
+
+main().catch(console.error);