수정할때 비밀번호 틀리면 연결안되게

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/49

backend-node/src/app.ts

@@ -31,6 +31,7 @@ import layoutRoutes from "./routes/layoutRoutes";
 import dataRoutes from "./routes/dataRoutes";
 import testButtonDataflowRoutes from "./routes/testButtonDataflowRoutes";
 import externalDbConnectionRoutes from "./routes/externalDbConnectionRoutes";
+import ddlRoutes from "./routes/ddlRoutes";
 import entityReferenceRoutes from "./routes/entityReferenceRoutes";
 // import userRoutes from './routes/userRoutes';
 // import menuRoutes from './routes/menuRoutes';
@@ -126,6 +127,7 @@ app.use("/api/screen", screenStandardRoutes);
 app.use("/api/data", dataRoutes);
 app.use("/api/test-button-dataflow", testButtonDataflowRoutes);
 app.use("/api/external-db-connections", externalDbConnectionRoutes);
+app.use("/api/ddl", ddlRoutes);
 app.use("/api/entity-reference", entityReferenceRoutes);
 // app.use('/api/users', userRoutes);
 // app.use('/api/menus', menuRoutes);

backend-node/src/controllers/ddlController.ts

@@ -0,0 +1,419 @@
+/**
+ * DDL 실행 컨트롤러
+ * 테이블/컬럼 생성 API 엔드포인트
+ */
+
+import { Response } from "express";
+import { AuthenticatedRequest } from "../middleware/superAdminMiddleware";
+import { DDLExecutionService } from "../services/ddlExecutionService";
+import { DDLAuditLogger } from "../services/ddlAuditLogger";
+import { CreateTableRequest, AddColumnRequest } from "../types/ddl";
+import { logger } from "../utils/logger";
+
+export class DDLController {
+  /**
+   * POST /api/ddl/tables - 새 테이블 생성
+   */
+  static async createTable(
+    req: AuthenticatedRequest,
+    res: Response
+  ): Promise<void> {
+    try {
+      const { tableName, columns, description }: CreateTableRequest = req.body;
+      const userId = req.user!.userId;
+      const userCompanyCode = req.user!.companyCode;
+
+      // 입력값 기본 검증
+      if (!tableName || !columns || columns.length === 0) {
+        res.status(400).json({
+          success: false,
+          error: {
+            code: "INVALID_INPUT",
+            details: "테이블명과 최소 1개의 컬럼이 필요합니다.",
+          },
+        });
+        return;
+      }
+
+      logger.info("테이블 생성 요청", {
+        tableName,
+        userId,
+        columnCount: columns.length,
+        ip: req.ip,
+      });
+
+      // inputType을 webType으로 변환 (레거시 호환성)
+      const processedColumns = columns.map((col) => ({
+        ...col,
+        webType: (col.inputType || col.webType || "text") as any,
+      }));
+
+      // DDL 실행 서비스 호출
+      const ddlService = new DDLExecutionService();
+      const result = await ddlService.createTable(
+        tableName,
+        processedColumns,
+        userCompanyCode,
+        userId,
+        description
+      );
+
+      if (result.success) {
+        res.status(200).json({
+          success: true,
+          message: result.message,
+          data: {
+            tableName,
+            columnCount: columns.length,
+            executedQuery: result.executedQuery,
+          },
+        });
+      } else {
+        res.status(400).json({
+          success: false,
+          message: result.message,
+          error: result.error,
+        });
+      }
+    } catch (error) {
+      logger.error("테이블 생성 컨트롤러 오류:", {
+        error: (error as Error).message,
+        stack: (error as Error).stack,
+        userId: req.user?.userId,
+        body: req.body,
+      });
+
+      res.status(500).json({
+        success: false,
+        error: {
+          code: "INTERNAL_SERVER_ERROR",
+          details: "테이블 생성 중 서버 오류가 발생했습니다.",
+        },
+      });
+    }
+  }
+
+  /**
+   * POST /api/ddl/tables/:tableName/columns - 컬럼 추가
+   */
+  static async addColumn(
+    req: AuthenticatedRequest,
+    res: Response
+  ): Promise<void> {
+    try {
+      const { tableName } = req.params;
+      const { column }: AddColumnRequest = req.body;
+      const userId = req.user!.userId;
+      const userCompanyCode = req.user!.companyCode;
+
+      // 입력값 기본 검증
+      if (!tableName) {
+        res.status(400).json({
+          success: false,
+          error: {
+            code: "INVALID_INPUT",
+            details: "테이블명이 필요합니다.",
+          },
+        });
+        return;
+      }
+
+      if (!column || !column.name || (!column.inputType && !column.webType)) {
+        res.status(400).json({
+          success: false,
+          error: {
+            code: "INVALID_INPUT",
+            details: "컬럼명과 입력타입이 필요합니다.",
+          },
+        });
+        return;
+      }
+
+      logger.info("컬럼 추가 요청", {
+        tableName,
+        columnName: column.name,
+        webType: column.webType,
+        userId,
+        ip: req.ip,
+      });
+
+      // inputType을 webType으로 변환 (레거시 호환성)
+      const processedColumn = {
+        ...column,
+        webType: (column.inputType || column.webType || "text") as any,
+      };
+
+      // DDL 실행 서비스 호출
+      const ddlService = new DDLExecutionService();
+      const result = await ddlService.addColumn(
+        tableName,
+        processedColumn,
+        userCompanyCode,
+        userId
+      );
+
+      if (result.success) {
+        res.status(200).json({
+          success: true,
+          message: result.message,
+          data: {
+            tableName,
+            columnName: column.name,
+            webType: column.webType,
+            executedQuery: result.executedQuery,
+          },
+        });
+      } else {
+        res.status(400).json({
+          success: false,
+          message: result.message,
+          error: result.error,
+        });
+      }
+    } catch (error) {
+      logger.error("컬럼 추가 컨트롤러 오류:", {
+        error: (error as Error).message,
+        stack: (error as Error).stack,
+        userId: req.user?.userId,
+        tableName: req.params.tableName,
+        body: req.body,
+      });
+
+      res.status(500).json({
+        success: false,
+        error: {
+          code: "INTERNAL_SERVER_ERROR",
+          details: "컬럼 추가 중 서버 오류가 발생했습니다.",
+        },
+      });
+    }
+  }
+
+  /**
+   * GET /api/ddl/logs - DDL 실행 로그 조회
+   */
+  static async getDDLLogs(
+    req: AuthenticatedRequest,
+    res: Response
+  ): Promise<void> {
+    try {
+      const { limit, userId, ddlType } = req.query;
+
+      const logs = await DDLAuditLogger.getRecentDDLLogs(
+        limit ? parseInt(limit as string) : 50,
+        userId as string,
+        ddlType as string
+      );
+
+      res.json({
+        success: true,
+        data: {
+          logs,
+          total: logs.length,
+        },
+      });
+    } catch (error) {
+      logger.error("DDL 로그 조회 오류:", error);
+
+      res.status(500).json({
+        success: false,
+        error: {
+          code: "LOG_RETRIEVAL_FAILED",
+          details: "DDL 로그 조회 중 오류가 발생했습니다.",
+        },
+      });
+    }
+  }
+
+  /**
+   * GET /api/ddl/statistics - DDL 실행 통계 조회
+   */
+  static async getDDLStatistics(
+    req: AuthenticatedRequest,
+    res: Response
+  ): Promise<void> {
+    try {
+      const { fromDate, toDate } = req.query;
+
+      const statistics = await DDLAuditLogger.getDDLStatistics(
+        fromDate ? new Date(fromDate as string) : undefined,
+        toDate ? new Date(toDate as string) : undefined
+      );
+
+      res.json({
+        success: true,
+        data: statistics,
+      });
+    } catch (error) {
+      logger.error("DDL 통계 조회 오류:", error);
+
+      res.status(500).json({
+        success: false,
+        error: {
+          code: "STATISTICS_RETRIEVAL_FAILED",
+          details: "DDL 통계 조회 중 오류가 발생했습니다.",
+        },
+      });
+    }
+  }
+
+  /**
+   * GET /api/ddl/tables/:tableName/info - 생성된 테이블 정보 조회
+   */
+  static async getTableInfo(
+    req: AuthenticatedRequest,
+    res: Response
+  ): Promise<void> {
+    try {
+      const { tableName } = req.params;
+
+      const ddlService = new DDLExecutionService();
+      const tableInfo = await ddlService.getCreatedTableInfo(tableName);
+
+      if (!tableInfo) {
+        res.status(404).json({
+          success: false,
+          error: {
+            code: "TABLE_NOT_FOUND",
+            details: `테이블 '${tableName}'을 찾을 수 없습니다.`,
+          },
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        data: tableInfo,
+      });
+    } catch (error) {
+      logger.error("테이블 정보 조회 오류:", error);
+
+      res.status(500).json({
+        success: false,
+        error: {
+          code: "TABLE_INFO_RETRIEVAL_FAILED",
+          details: "테이블 정보 조회 중 오류가 발생했습니다.",
+        },
+      });
+    }
+  }
+
+  /**
+   * GET /api/ddl/tables/:tableName/history - 테이블 DDL 히스토리 조회
+   */
+  static async getTableDDLHistory(
+    req: AuthenticatedRequest,
+    res: Response
+  ): Promise<void> {
+    try {
+      const { tableName } = req.params;
+
+      const history = await DDLAuditLogger.getTableDDLHistory(tableName);
+
+      res.json({
+        success: true,
+        data: {
+          tableName,
+          history,
+          total: history.length,
+        },
+      });
+    } catch (error) {
+      logger.error("테이블 DDL 히스토리 조회 오류:", error);
+
+      res.status(500).json({
+        success: false,
+        error: {
+          code: "HISTORY_RETRIEVAL_FAILED",
+          details: "테이블 DDL 히스토리 조회 중 오류가 발생했습니다.",
+        },
+      });
+    }
+  }
+
+  /**
+   * POST /api/ddl/validate/table - 테이블 생성 사전 검증
+   */
+  static async validateTableCreation(
+    req: AuthenticatedRequest,
+    res: Response
+  ): Promise<void> {
+    try {
+      const { tableName, columns }: CreateTableRequest = req.body;
+
+      if (!tableName || !columns) {
+        res.status(400).json({
+          success: false,
+          error: {
+            code: "INVALID_INPUT",
+            details: "테이블명과 컬럼 정보가 필요합니다.",
+          },
+        });
+        return;
+      }
+
+      // 검증만 수행 (실제 생성하지 않음)
+      const { DDLSafetyValidator } = await import(
+        "../services/ddlSafetyValidator"
+      );
+      const validationReport = DDLSafetyValidator.generateValidationReport(
+        tableName,
+        columns
+      );
+
+      res.json({
+        success: true,
+        data: {
+          isValid: validationReport.validationResult.isValid,
+          errors: validationReport.validationResult.errors,
+          warnings: validationReport.validationResult.warnings,
+          summary: validationReport.summary,
+        },
+      });
+    } catch (error) {
+      logger.error("테이블 생성 검증 오류:", error);
+
+      res.status(500).json({
+        success: false,
+        error: {
+          code: "VALIDATION_ERROR",
+          details: "테이블 생성 검증 중 오류가 발생했습니다.",
+        },
+      });
+    }
+  }
+
+  /**
+   * DELETE /api/ddl/logs/cleanup - 오래된 DDL 로그 정리
+   */
+  static async cleanupOldLogs(
+    req: AuthenticatedRequest,
+    res: Response
+  ): Promise<void> {
+    try {
+      const { retentionDays } = req.query;
+      const days = retentionDays ? parseInt(retentionDays as string) : 90;
+
+      const deletedCount = await DDLAuditLogger.cleanupOldLogs(days);
+
+      res.json({
+        success: true,
+        message: `${deletedCount}개의 오래된 DDL 로그가 삭제되었습니다.`,
+        data: {
+          deletedCount,
+          retentionDays: days,
+        },
+      });
+    } catch (error) {
+      logger.error("DDL 로그 정리 오류:", error);
+
+      res.status(500).json({
+        success: false,
+        error: {
+          code: "LOG_CLEANUP_FAILED",
+          details: "DDL 로그 정리 중 오류가 발생했습니다.",
+        },
+      });
+    }
+  }
+}

backend-node/src/controllers/dynamicFormController.ts

@@ -1,8 +1,9 @@
 import { Response } from "express";
 import { dynamicFormService } from "../services/dynamicFormService";
+import { enhancedDynamicFormService } from "../services/enhancedDynamicFormService";
 import { AuthenticatedRequest } from "../types/auth";
 
-// 폼 데이터 저장
+// 폼 데이터 저장 (기존 버전 - 레거시 지원)
 export const saveFormData = async (
   req: AuthenticatedRequest,
   res: Response
@@ -55,6 +56,55 @@ export const saveFormData = async (
   }
 };
 
+// 개선된 폼 데이터 저장 (새 버전)
+export const saveFormDataEnhanced = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode, userId } = req.user as any;
+    const { screenId, tableName, data } = req.body;
+
+    // 필수 필드 검증
+    if (screenId === undefined || screenId === null || !tableName || !data) {
+      return res.status(400).json({
+        success: false,
+        message: "필수 필드가 누락되었습니다. (screenId, tableName, data)",
+      });
+    }
+
+    // 메타데이터 추가
+    const formDataWithMeta = {
+      ...data,
+      created_by: userId,
+      updated_by: userId,
+      screen_id: screenId,
+    };
+
+    // company_code 처리
+    if (data.company_code !== undefined) {
+      formDataWithMeta.company_code = data.company_code;
+    } else if (companyCode && companyCode !== "*") {
+      formDataWithMeta.company_code = companyCode;
+    }
+
+    // 개선된 서비스 사용
+    const result = await enhancedDynamicFormService.saveFormData(
+      screenId,
+      tableName,
+      formDataWithMeta
+    );
+
+    res.json(result);
+  } catch (error: any) {
+    console.error("❌ 개선된 폼 데이터 저장 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "데이터 저장에 실패했습니다.",
+    });
+  }
+};
+
 // 폼 데이터 업데이트
 export const updateFormData = async (
   req: AuthenticatedRequest,

backend-node/src/controllers/tableManagementController.ts

@@ -443,24 +443,24 @@ export async function updateTableLabel(
 }
 
 /**
- * 컬럼 웹 타입 설정
+ * 컬럼 입력 타입 설정
  */
-export async function updateColumnWebType(
+export async function updateColumnInputType(
   req: AuthenticatedRequest,
   res: Response
 ): Promise<void> {
   try {
     const { tableName, columnName } = req.params;
-    const { webType, detailSettings, inputType } = req.body;
+    const { inputType, detailSettings } = req.body;
 
     logger.info(
-      `=== 컬럼 웹 타입 설정 시작: ${tableName}.${columnName} = ${webType} ===`
+      `=== 컬럼 입력 타입 설정 시작: ${tableName}.${columnName} = ${inputType} ===`
     );
 
-    if (!tableName || !columnName || !webType) {
+    if (!tableName || !columnName || !inputType) {
       const response: ApiResponse<null> = {
         success: false,
-        message: "테이블명, 컬럼명, 웹 타입이 모두 필요합니다.",
+        message: "테이블명, 컬럼명, 입력 타입이 모두 필요합니다.",
         error: {
           code: "MISSING_PARAMETERS",
           details: "필수 파라미터가 누락되었습니다.",
@@ -471,33 +471,32 @@ export async function updateColumnWebType(
     }
 
     const tableManagementService = new TableManagementService();
-    await tableManagementService.updateColumnWebType(
+    await tableManagementService.updateColumnInputType(
       tableName,
       columnName,
-      webType,
-      detailSettings,
-      inputType
+      inputType,
+      detailSettings
     );
 
     logger.info(
-      `컬럼 웹 타입 설정 완료: ${tableName}.${columnName} = ${webType}`
+      `컬럼 입력 타입 설정 완료: ${tableName}.${columnName} = ${inputType}`
     );
 
     const response: ApiResponse<null> = {
       success: true,
-      message: "컬럼 웹 타입이 성공적으로 설정되었습니다.",
+      message: "컬럼 입력 타입이 성공적으로 설정되었습니다.",
       data: null,
     };
 
     res.status(200).json(response);
   } catch (error) {
-    logger.error("컬럼 웹 타입 설정 중 오류 발생:", error);
+    logger.error("컬럼 입력 타입 설정 중 오류 발생:", error);
 
     const response: ApiResponse<null> = {
       success: false,
-      message: "컬럼 웹 타입 설정 중 오류가 발생했습니다.",
+      message: "컬럼 입력 타입 설정 중 오류가 발생했습니다.",
       error: {
-        code: "WEB_TYPE_UPDATE_ERROR",
+        code: "INPUT_TYPE_UPDATE_ERROR",
         details: error instanceof Error ? error.message : "Unknown error",
       },
     };
@@ -735,6 +734,208 @@ export async function editTableData(
   }
 }
 
+/**
+ * 테이블 스키마 정보 조회 (컬럼 존재 여부 검증용)
+ */
+export async function getTableSchema(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { tableName } = req.params;
+    logger.info(`=== 테이블 스키마 정보 조회 시작: ${tableName} ===`);
+
+    if (!tableName) {
+      const response: ApiResponse<null> = {
+        success: false,
+        message: "테이블명이 필요합니다.",
+        error: {
+          code: "MISSING_TABLE_NAME",
+          details: "테이블명 파라미터가 누락되었습니다.",
+        },
+      };
+      res.status(400).json(response);
+      return;
+    }
+
+    const tableManagementService = new TableManagementService();
+    const schema = await tableManagementService.getTableSchema(tableName);
+
+    logger.info(
+      `테이블 스키마 정보 조회 완료: ${tableName}, ${schema.length}개 컬럼`
+    );
+
+    const response: ApiResponse<ColumnTypeInfo[]> = {
+      success: true,
+      message: "테이블 스키마 정보를 성공적으로 조회했습니다.",
+      data: schema,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("테이블 스키마 정보 조회 중 오류 발생:", error);
+
+    const response: ApiResponse<null> = {
+      success: false,
+      message: "테이블 스키마 정보 조회 중 오류가 발생했습니다.",
+      error: {
+        code: "TABLE_SCHEMA_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    };
+
+    res.status(500).json(response);
+  }
+}
+
+/**
+ * 테이블 존재 여부 확인
+ */
+export async function checkTableExists(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { tableName } = req.params;
+    logger.info(`=== 테이블 존재 여부 확인 시작: ${tableName} ===`);
+
+    if (!tableName) {
+      const response: ApiResponse<null> = {
+        success: false,
+        message: "테이블명이 필요합니다.",
+        error: {
+          code: "MISSING_TABLE_NAME",
+          details: "테이블명 파라미터가 누락되었습니다.",
+        },
+      };
+      res.status(400).json(response);
+      return;
+    }
+
+    const tableManagementService = new TableManagementService();
+    const exists = await tableManagementService.checkTableExists(tableName);
+
+    logger.info(`테이블 존재 여부 확인 완료: ${tableName} = ${exists}`);
+
+    const response: ApiResponse<{ exists: boolean }> = {
+      success: true,
+      message: "테이블 존재 여부를 확인했습니다.",
+      data: { exists },
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("테이블 존재 여부 확인 중 오류 발생:", error);
+
+    const response: ApiResponse<null> = {
+      success: false,
+      message: "테이블 존재 여부 확인 중 오류가 발생했습니다.",
+      error: {
+        code: "TABLE_EXISTS_CHECK_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    };
+
+    res.status(500).json(response);
+  }
+}
+
+/**
+ * 컬럼 웹타입 정보 조회 (화면관리 연동용)
+ */
+export async function getColumnWebTypes(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { tableName } = req.params;
+    logger.info(`=== 컬럼 웹타입 정보 조회 시작: ${tableName} ===`);
+
+    if (!tableName) {
+      const response: ApiResponse<null> = {
+        success: false,
+        message: "테이블명이 필요합니다.",
+        error: {
+          code: "MISSING_TABLE_NAME",
+          details: "테이블명 파라미터가 누락되었습니다.",
+        },
+      };
+      res.status(400).json(response);
+      return;
+    }
+
+    const tableManagementService = new TableManagementService();
+    const inputTypes =
+      await tableManagementService.getColumnInputTypes(tableName);
+
+    logger.info(
+      `컬럼 입력타입 정보 조회 완료: ${tableName}, ${inputTypes.length}개 컬럼`
+    );
+
+    const response: ApiResponse<ColumnTypeInfo[]> = {
+      success: true,
+      message: "컬럼 입력타입 정보를 성공적으로 조회했습니다.",
+      data: inputTypes,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("컬럼 웹타입 정보 조회 중 오류 발생:", error);
+
+    const response: ApiResponse<null> = {
+      success: false,
+      message: "컬럼 웹타입 정보 조회 중 오류가 발생했습니다.",
+      error: {
+        code: "COLUMN_WEB_TYPES_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    };
+
+    res.status(500).json(response);
+  }
+}
+
+/**
+ * 데이터베이스 연결 상태 확인
+ */
+export async function checkDatabaseConnection(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    logger.info("=== 데이터베이스 연결 상태 확인 시작 ===");
+
+    const tableManagementService = new TableManagementService();
+    const connectionStatus =
+      await tableManagementService.checkDatabaseConnection();
+
+    logger.info(
+      `데이터베이스 연결 상태: ${connectionStatus.connected ? "연결됨" : "연결 안됨"}`
+    );
+
+    const response: ApiResponse<{ connected: boolean; message: string }> = {
+      success: true,
+      message: "데이터베이스 연결 상태를 확인했습니다.",
+      data: connectionStatus,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("데이터베이스 연결 상태 확인 중 오류 발생:", error);
+
+    const response: ApiResponse<null> = {
+      success: false,
+      message: "데이터베이스 연결 상태 확인 중 오류가 발생했습니다.",
+      error: {
+        code: "DATABASE_CONNECTION_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    };
+
+    res.status(500).json(response);
+  }
+}
+
 /**
  * 테이블 데이터 삭제
  */
@@ -809,3 +1010,41 @@ export async function deleteTableData(
     res.status(500).json(response);
   }
 }
+
+/**
+ * 컬럼 웹 타입 설정 (레거시 지원)
+ * @deprecated updateColumnInputType 사용 권장
+ */
+export async function updateColumnWebType(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { tableName, columnName } = req.params;
+    const { webType, detailSettings, inputType } = req.body;
+
+    logger.warn(
+      `레거시 API 사용: updateColumnWebType → updateColumnInputType 사용 권장`
+    );
+
+    // webType을 inputType으로 변환
+    const convertedInputType = inputType || webType || "text";
+
+    // 새로운 메서드 호출
+    req.body = { inputType: convertedInputType, detailSettings };
+    await updateColumnInputType(req, res);
+  } catch (error) {
+    logger.error("레거시 컬럼 웹 타입 설정 중 오류 발생:", error);
+
+    const response: ApiResponse<null> = {
+      success: false,
+      message: "컬럼 웹 타입 설정 중 오류가 발생했습니다.",
+      error: {
+        code: "WEB_TYPE_UPDATE_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    };
+
+    res.status(500).json(response);
+  }
+}

backend-node/src/middleware/superAdminMiddleware.ts

@@ -0,0 +1,200 @@
+/**
+ * 슈퍼관리자 권한 검증 미들웨어
+ * 회사코드가 '*'인 최고 관리자만 DDL 실행을 허용
+ */
+
+import { Request, Response, NextFunction } from "express";
+import { logger } from "../utils/logger";
+
+// DDL 요청 시간 추적을 위한 메모리 저장소
+const ddlRequestTimes = new Map<string, number>();
+
+// AuthenticatedRequest 타입 확장
+export interface AuthenticatedRequest extends Request {
+  user?: {
+    userId: string;
+    userName: string;
+    companyCode: string;
+    userLang?: string;
+  };
+}
+
+/**
+ * 슈퍼관리자 권한 확인 미들웨어
+ * 회사코드가 '*'이고 userId가 'plm_admin'인 사용자만 허용
+ */
+export const requireSuperAdmin = (
+  req: AuthenticatedRequest,
+  res: Response,
+  next: NextFunction
+): void => {
+  try {
+    // 인증 여부 확인
+    if (!req.user) {
+      logger.warn("DDL 실행 시도 - 인증되지 않은 사용자", {
+        ip: req.ip,
+        userAgent: req.get("User-Agent"),
+        url: req.originalUrl,
+      });
+
+      res.status(401).json({
+        success: false,
+        error: {
+          code: "AUTHENTICATION_REQUIRED",
+          details: "인증이 필요합니다.",
+        },
+      });
+      return;
+    }
+
+    // 슈퍼관리자 권한 확인 (회사코드가 '*'이고 plm_admin 사용자)
+    if (req.user.companyCode !== "*" || req.user.userId !== "plm_admin") {
+      logger.warn("DDL 실행 시도 - 권한 부족", {
+        userId: req.user.userId,
+        companyCode: req.user.companyCode,
+        ip: req.ip,
+        userAgent: req.get("User-Agent"),
+        url: req.originalUrl,
+      });
+
+      res.status(403).json({
+        success: false,
+        error: {
+          code: "SUPER_ADMIN_REQUIRED",
+          details:
+            "최고 관리자 권한이 필요합니다. DDL 실행은 회사코드가 '*'인 plm_admin 사용자만 가능합니다.",
+        },
+      });
+      return;
+    }
+
+    // 권한 확인 로깅
+    logger.info("DDL 실행 권한 확인 완료", {
+      userId: req.user.userId,
+      companyCode: req.user.companyCode,
+      ip: req.ip,
+      url: req.originalUrl,
+    });
+
+    next();
+  } catch (error) {
+    logger.error("슈퍼관리자 권한 확인 중 오류 발생:", error);
+
+    res.status(500).json({
+      success: false,
+      error: {
+        code: "AUTHORIZATION_ERROR",
+        details: "권한 확인 중 오류가 발생했습니다.",
+      },
+    });
+  }
+};
+
+/**
+ * DDL 실행 전 추가 보안 검증
+ * 세션 유효성 및 사용자 상태 재확인
+ */
+export const validateDDLPermission = (
+  req: AuthenticatedRequest,
+  res: Response,
+  next: NextFunction
+): void => {
+  try {
+    const user = req.user!; // requireSuperAdmin을 통과했으므로 user 존재 보장
+
+    // 세션 유효성 재확인
+    if (!user.userId || !user.companyCode) {
+      logger.error("DDL 실행 - 세션 데이터 불완전", {
+        userId: user.userId,
+        companyCode: user.companyCode,
+      });
+
+      res.status(401).json({
+        success: false,
+        error: {
+          code: "INVALID_SESSION",
+          details: "세션 정보가 불완전합니다. 다시 로그인해주세요.",
+        },
+      });
+      return;
+    }
+
+    // 추가 보안 체크 - 메모리 기반 요청 시간 간격 제한
+    const now = Date.now();
+    const minInterval = 5000; // 5초 간격 제한
+    const lastDDLTime = ddlRequestTimes.get(user.userId);
+
+    if (lastDDLTime && now - lastDDLTime < minInterval) {
+      logger.warn("DDL 실행 - 너무 빈번한 요청", {
+        userId: user.userId,
+        timeSinceLastDDL: now - lastDDLTime,
+      });
+
+      res.status(429).json({
+        success: false,
+        error: {
+          code: "TOO_MANY_REQUESTS",
+          details:
+            "DDL 실행 요청이 너무 빈번합니다. 잠시 후 다시 시도해주세요.",
+        },
+      });
+      return;
+    }
+
+    // 마지막 DDL 실행 시간 기록
+    ddlRequestTimes.set(user.userId, now);
+
+    logger.info("DDL 실행 추가 보안 검증 완료", {
+      userId: user.userId,
+      companyCode: user.companyCode,
+    });
+
+    next();
+  } catch (error) {
+    logger.error("DDL 권한 추가 검증 중 오류 발생:", error);
+
+    res.status(500).json({
+      success: false,
+      error: {
+        code: "VALIDATION_ERROR",
+        details: "권한 검증 중 오류가 발생했습니다.",
+      },
+    });
+  }
+};
+
+/**
+ * 사용자가 슈퍼관리자인지 확인하는 유틸리티 함수
+ */
+export const isSuperAdmin = (user: AuthenticatedRequest["user"]): boolean => {
+  return user?.companyCode === "*" && user?.userId === "plm_admin";
+};
+
+/**
+ * DDL 실행 권한 체크 (미들웨어 없이 사용)
+ */
+export const checkDDLPermission = (
+  user: AuthenticatedRequest["user"]
+): {
+  hasPermission: boolean;
+  errorCode?: string;
+  errorMessage?: string;
+} => {
+  if (!user) {
+    return {
+      hasPermission: false,
+      errorCode: "AUTHENTICATION_REQUIRED",
+      errorMessage: "인증이 필요합니다.",
+    };
+  }
+
+  if (!isSuperAdmin(user)) {
+    return {
+      hasPermission: false,
+      errorCode: "SUPER_ADMIN_REQUIRED",
+      errorMessage: "최고 관리자 권한이 필요합니다.",
+    };
+  }
+
+  return { hasPermission: true };
+};

backend-node/src/routes/ddlRoutes.ts

@@ -0,0 +1,215 @@
+/**
+ * DDL 실행 관련 라우터
+ * 테이블/컬럼 생성 API 라우팅
+ */
+
+import express from "express";
+import { DDLController } from "../controllers/ddlController";
+import {
+  requireSuperAdmin,
+  validateDDLPermission,
+} from "../middleware/superAdminMiddleware";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+const router = express.Router();
+
+// ============================================
+// DDL 실행 라우터 (최고 관리자 전용)
+// ============================================
+
+/**
+ * 테이블 생성
+ * POST /api/ddl/tables
+ */
+router.post(
+  "/tables",
+  authenticateToken, // 기본 인증
+  requireSuperAdmin, // 슈퍼관리자 권한 확인
+  validateDDLPermission, // DDL 실행 추가 검증
+  DDLController.createTable
+);
+
+/**
+ * 컬럼 추가
+ * POST /api/ddl/tables/:tableName/columns
+ */
+router.post(
+  "/tables/:tableName/columns",
+  authenticateToken,
+  requireSuperAdmin,
+  validateDDLPermission,
+  DDLController.addColumn
+);
+
+/**
+ * 테이블 생성 사전 검증 (실제 생성하지 않고 검증만)
+ * POST /api/ddl/validate/table
+ */
+router.post(
+  "/validate/table",
+  authenticateToken,
+  requireSuperAdmin,
+  DDLController.validateTableCreation
+);
+
+// ============================================
+// DDL 로그 및 모니터링 라우터
+// ============================================
+
+/**
+ * DDL 실행 로그 조회
+ * GET /api/ddl/logs
+ */
+router.get(
+  "/logs",
+  authenticateToken,
+  requireSuperAdmin,
+  DDLController.getDDLLogs
+);
+
+/**
+ * DDL 실행 통계 조회
+ * GET /api/ddl/statistics
+ */
+router.get(
+  "/statistics",
+  authenticateToken,
+  requireSuperAdmin,
+  DDLController.getDDLStatistics
+);
+
+/**
+ * 특정 테이블의 DDL 히스토리 조회
+ * GET /api/ddl/tables/:tableName/history
+ */
+router.get(
+  "/tables/:tableName/history",
+  authenticateToken,
+  requireSuperAdmin,
+  DDLController.getTableDDLHistory
+);
+
+/**
+ * 생성된 테이블 정보 조회
+ * GET /api/ddl/tables/:tableName/info
+ */
+router.get(
+  "/tables/:tableName/info",
+  authenticateToken,
+  requireSuperAdmin,
+  DDLController.getTableInfo
+);
+
+// ============================================
+// DDL 시스템 관리 라우터
+// ============================================
+
+/**
+ * 오래된 DDL 로그 정리
+ * DELETE /api/ddl/logs/cleanup
+ */
+router.delete(
+  "/logs/cleanup",
+  authenticateToken,
+  requireSuperAdmin,
+  DDLController.cleanupOldLogs
+);
+
+// ============================================
+// 라우터 정보 및 헬스체크
+// ============================================
+
+/**
+ * DDL 라우터 정보 조회
+ * GET /api/ddl/info
+ */
+router.get("/info", authenticateToken, requireSuperAdmin, (req, res) => {
+  res.json({
+    success: true,
+    data: {
+      service: "DDL Execution Service",
+      version: "1.0.0",
+      description: "PostgreSQL 테이블 및 컬럼 동적 생성 서비스",
+      endpoints: {
+        tables: {
+          create: "POST /api/ddl/tables",
+          addColumn: "POST /api/ddl/tables/:tableName/columns",
+          getInfo: "GET /api/ddl/tables/:tableName/info",
+          getHistory: "GET /api/ddl/tables/:tableName/history",
+        },
+        validation: {
+          validateTable: "POST /api/ddl/validate/table",
+        },
+        monitoring: {
+          logs: "GET /api/ddl/logs",
+          statistics: "GET /api/ddl/statistics",
+          cleanup: "DELETE /api/ddl/logs/cleanup",
+        },
+      },
+      requirements: {
+        authentication: "Bearer Token 필요",
+        authorization: "회사코드 '*'인 plm_admin 사용자만 접근 가능",
+        safety: "모든 DDL 실행은 안전성 검증 후 수행",
+        logging: "모든 DDL 실행은 감사 로그에 기록",
+      },
+      supportedWebTypes: [
+        "text",
+        "number",
+        "decimal",
+        "date",
+        "datetime",
+        "boolean",
+        "code",
+        "entity",
+        "textarea",
+        "select",
+        "checkbox",
+        "radio",
+        "file",
+        "email",
+        "tel",
+      ],
+    },
+  });
+});
+
+/**
+ * DDL 서비스 헬스체크
+ * GET /api/ddl/health
+ */
+router.get("/health", authenticateToken, async (req, res) => {
+  try {
+    // 기본적인 데이터베이스 연결 테스트
+    const { PrismaClient } = await import("@prisma/client");
+    const prisma = new PrismaClient();
+
+    await prisma.$queryRaw`SELECT 1`;
+    await prisma.$disconnect();
+
+    res.json({
+      success: true,
+      status: "healthy",
+      timestamp: new Date().toISOString(),
+      checks: {
+        database: "connected",
+        service: "operational",
+      },
+    });
+  } catch (error) {
+    res.status(503).json({
+      success: false,
+      status: "unhealthy",
+      timestamp: new Date().toISOString(),
+      error: {
+        code: "HEALTH_CHECK_FAILED",
+        details: "DDL 서비스 상태 확인 실패",
+      },
+      checks: {
+        database: "disconnected",
+        service: "error",
+      },
+    });
+  }
+});
+
+export default router;

backend-node/src/routes/dynamicFormRoutes.ts

@@ -2,6 +2,7 @@ import express from "express";
 import { authenticateToken } from "../middleware/authMiddleware";
 import {
   saveFormData,
+  saveFormDataEnhanced,
   updateFormData,
   updateFormDataPartial,
   deleteFormData,
@@ -18,7 +19,8 @@ const router = express.Router();
 router.use(authenticateToken);
 
 // 폼 데이터 CRUD
-router.post("/save", saveFormData);
+router.post("/save", saveFormData); // 기존 버전 (레거시 지원)
+router.post("/save-enhanced", saveFormDataEnhanced); // 개선된 버전
 router.put("/:id", updateFormData);
 router.patch("/:id/partial", updateFormDataPartial); // 부분 업데이트
 router.delete("/:id", deleteFormData);

backend-node/src/routes/externalDbConnectionRoutes.ts

@@ -262,7 +262,9 @@ router.post(
         });
       }
 
-      const result = await ExternalDbConnectionService.testConnectionById(id);
+      // 테스트용 비밀번호가 제공된 경우 사용
+      const testData = req.body.password ? { password: req.body.password } : undefined;
+      const result = await ExternalDbConnectionService.testConnectionById(id, testData);
 
       return res.status(200).json({
         success: result.success,

backend-node/src/routes/tableManagementRoutes.ts

@@ -8,11 +8,16 @@ import {
   getTableLabels,
   getColumnLabels,
   updateColumnWebType,
+  updateColumnInputType,
   updateTableLabel,
   getTableData,
   addTableData,
   editTableData,
   deleteTableData,
+  getTableSchema,
+  checkTableExists,
+  getColumnWebTypes,
+  checkDatabaseConnection,
 } from "../controllers/tableManagementController";
 
 const router = express.Router();
@@ -66,7 +71,7 @@ router.get("/tables/:tableName/labels", getTableLabels);
 router.get("/tables/:tableName/columns/:columnName/labels", getColumnLabels);
 
 /**
- * 컬럼 웹 타입 설정
+ * 컬럼 웹 타입 설정 (레거시 지원)
  * PUT /api/table-management/tables/:tableName/columns/:columnName/web-type
  */
 router.put(
@@ -74,6 +79,51 @@ router.put(
   updateColumnWebType
 );
 
+/**
+ * 컬럼 입력 타입 설정 (새로운 시스템)
+ * PUT /api/table-management/tables/:tableName/columns/:columnName/input-type
+ */
+router.put(
+  "/tables/:tableName/columns/:columnName/input-type",
+  updateColumnInputType
+);
+
+/**
+ * 개별 컬럼 설정 업데이트 (PUT 방식)
+ * PUT /api/table-management/tables/:tableName/columns/:columnName
+ */
+router.put("/tables/:tableName/columns/:columnName", updateColumnSettings);
+
+/**
+ * 여러 컬럼 설정 일괄 업데이트
+ * PUT /api/table-management/tables/:tableName/columns/batch
+ */
+router.put("/tables/:tableName/columns/batch", updateAllColumnSettings);
+
+/**
+ * 테이블 스키마 정보 조회 (컬럼 존재 여부 검증용)
+ * GET /api/table-management/tables/:tableName/schema
+ */
+router.get("/tables/:tableName/schema", getTableSchema);
+
+/**
+ * 테이블 존재 여부 확인
+ * GET /api/table-management/tables/:tableName/exists
+ */
+router.get("/tables/:tableName/exists", checkTableExists);
+
+/**
+ * 컬럼 웹타입 정보 조회 (화면관리 연동용)
+ * GET /api/table-management/tables/:tableName/web-types
+ */
+router.get("/tables/:tableName/web-types", getColumnWebTypes);
+
+/**
+ * 데이터베이스 연결 상태 확인
+ * GET /api/table-management/health
+ */
+router.get("/health", checkDatabaseConnection);
+
 /**
  * 테이블 데이터 조회 (페이징 + 검색)
  * POST /api/table-management/tables/:tableName/data

backend-node/src/services/ddlAuditLogger.ts

@@ -0,0 +1,368 @@
+/**
+ * DDL 실행 감사 로깅 서비스
+ * 모든 DDL 실행을 추적하고 기록
+ */
+
+import { PrismaClient } from "@prisma/client";
+import { logger } from "../utils/logger";
+
+const prisma = new PrismaClient();
+
+export class DDLAuditLogger {
+  /**
+   * DDL 실행 로그 기록
+   */
+  static async logDDLExecution(
+    userId: string,
+    companyCode: string,
+    ddlType: "CREATE_TABLE" | "ADD_COLUMN" | "DROP_TABLE" | "DROP_COLUMN",
+    tableName: string,
+    ddlQuery: string,
+    success: boolean,
+    error?: string,
+    additionalInfo?: Record<string, any>
+  ): Promise<void> {
+    try {
+      // DDL 실행 로그 데이터베이스에 저장
+      const logEntry = await prisma.$executeRaw`
+        INSERT INTO ddl_execution_log (
+          user_id, 
+          company_code, 
+          ddl_type, 
+          table_name, 
+          ddl_query, 
+          success, 
+          error_message, 
+          executed_at
+        ) VALUES (
+          ${userId}, 
+          ${companyCode}, 
+          ${ddlType}, 
+          ${tableName}, 
+          ${ddlQuery}, 
+          ${success}, 
+          ${error || null}, 
+          NOW()
+        )
+      `;
+
+      // 추가 로깅 (파일 로그)
+      const logData = {
+        userId,
+        companyCode,
+        ddlType,
+        tableName,
+        success,
+        queryLength: ddlQuery.length,
+        error: error || null,
+        additionalInfo: additionalInfo || null,
+        timestamp: new Date().toISOString(),
+      };
+
+      if (success) {
+        logger.info("DDL 실행 성공", logData);
+      } else {
+        logger.error("DDL 실행 실패", { ...logData, ddlQuery });
+      }
+
+      // 중요한 DDL 실행은 별도 알림 (필요시)
+      if (ddlType === "CREATE_TABLE" || ddlType === "DROP_TABLE") {
+        logger.warn("중요 DDL 실행", {
+          ...logData,
+          severity: "HIGH",
+          action: "TABLE_STRUCTURE_CHANGE",
+        });
+      }
+    } catch (logError) {
+      // 로그 기록 실패는 시스템에 영향을 주지 않도록 처리
+      logger.error("DDL 실행 로그 기록 실패:", {
+        originalUserId: userId,
+        originalDdlType: ddlType,
+        originalTableName: tableName,
+        originalSuccess: success,
+        logError: logError,
+      });
+
+      // 로그 기록 실패를 파일 로그로라도 남김
+      console.error("CRITICAL: DDL 로그 기록 실패", {
+        userId,
+        ddlType,
+        tableName,
+        success,
+        logError,
+        timestamp: new Date().toISOString(),
+      });
+    }
+  }
+
+  /**
+   * DDL 실행 시작 로그
+   */
+  static async logDDLStart(
+    userId: string,
+    companyCode: string,
+    ddlType: "CREATE_TABLE" | "ADD_COLUMN" | "DROP_TABLE" | "DROP_COLUMN",
+    tableName: string,
+    requestData: any
+  ): Promise<void> {
+    logger.info("DDL 실행 시작", {
+      userId,
+      companyCode,
+      ddlType,
+      tableName,
+      requestData,
+      timestamp: new Date().toISOString(),
+    });
+  }
+
+  /**
+   * 최근 DDL 실행 로그 조회
+   */
+  static async getRecentDDLLogs(
+    limit: number = 50,
+    userId?: string,
+    ddlType?: string
+  ): Promise<any[]> {
+    try {
+      let whereClause = "WHERE 1=1";
+      const params: any[] = [];
+
+      if (userId) {
+        whereClause += " AND user_id = $" + (params.length + 1);
+        params.push(userId);
+      }
+
+      if (ddlType) {
+        whereClause += " AND ddl_type = $" + (params.length + 1);
+        params.push(ddlType);
+      }
+
+      const query = `
+        SELECT 
+          id,
+          user_id,
+          company_code,
+          ddl_type,
+          table_name,
+          success,
+          error_message,
+          executed_at,
+          CASE 
+            WHEN LENGTH(ddl_query) > 100 THEN SUBSTRING(ddl_query, 1, 100) || '...'
+            ELSE ddl_query 
+          END as ddl_query_preview
+        FROM ddl_execution_log 
+        ${whereClause}
+        ORDER BY executed_at DESC 
+        LIMIT $${params.length + 1}
+      `;
+
+      params.push(limit);
+
+      const logs = await prisma.$queryRawUnsafe(query, ...params);
+      return logs as any[];
+    } catch (error) {
+      logger.error("DDL 로그 조회 실패:", error);
+      return [];
+    }
+  }
+
+  /**
+   * DDL 실행 통계 조회
+   */
+  static async getDDLStatistics(
+    fromDate?: Date,
+    toDate?: Date
+  ): Promise<{
+    totalExecutions: number;
+    successfulExecutions: number;
+    failedExecutions: number;
+    byDDLType: Record<string, number>;
+    byUser: Record<string, number>;
+    recentFailures: any[];
+  }> {
+    try {
+      let dateFilter = "";
+      const params: any[] = [];
+
+      if (fromDate) {
+        dateFilter += " AND executed_at >= $" + (params.length + 1);
+        params.push(fromDate);
+      }
+
+      if (toDate) {
+        dateFilter += " AND executed_at <= $" + (params.length + 1);
+        params.push(toDate);
+      }
+
+      // 전체 통계
+      const totalStats = (await prisma.$queryRawUnsafe(
+        `
+        SELECT 
+          COUNT(*) as total_executions,
+          SUM(CASE WHEN success = true THEN 1 ELSE 0 END) as successful_executions,
+          SUM(CASE WHEN success = false THEN 1 ELSE 0 END) as failed_executions
+        FROM ddl_execution_log 
+        WHERE 1=1 ${dateFilter}
+      `,
+        ...params
+      )) as any[];
+
+      // DDL 타입별 통계
+      const ddlTypeStats = (await prisma.$queryRawUnsafe(
+        `
+        SELECT ddl_type, COUNT(*) as count
+        FROM ddl_execution_log 
+        WHERE 1=1 ${dateFilter}
+        GROUP BY ddl_type
+        ORDER BY count DESC
+      `,
+        ...params
+      )) as any[];
+
+      // 사용자별 통계
+      const userStats = (await prisma.$queryRawUnsafe(
+        `
+        SELECT user_id, COUNT(*) as count
+        FROM ddl_execution_log 
+        WHERE 1=1 ${dateFilter}
+        GROUP BY user_id
+        ORDER BY count DESC
+        LIMIT 10
+      `,
+        ...params
+      )) as any[];
+
+      // 최근 실패 로그
+      const recentFailures = (await prisma.$queryRawUnsafe(
+        `
+        SELECT 
+          user_id,
+          ddl_type,
+          table_name,
+          error_message,
+          executed_at
+        FROM ddl_execution_log 
+        WHERE success = false ${dateFilter}
+        ORDER BY executed_at DESC
+        LIMIT 10
+      `,
+        ...params
+      )) as any[];
+
+      const stats = totalStats[0];
+
+      return {
+        totalExecutions: parseInt(stats.total_executions) || 0,
+        successfulExecutions: parseInt(stats.successful_executions) || 0,
+        failedExecutions: parseInt(stats.failed_executions) || 0,
+        byDDLType: ddlTypeStats.reduce((acc, row) => {
+          acc[row.ddl_type] = parseInt(row.count);
+          return acc;
+        }, {}),
+        byUser: userStats.reduce((acc, row) => {
+          acc[row.user_id] = parseInt(row.count);
+          return acc;
+        }, {}),
+        recentFailures,
+      };
+    } catch (error) {
+      logger.error("DDL 통계 조회 실패:", error);
+      return {
+        totalExecutions: 0,
+        successfulExecutions: 0,
+        failedExecutions: 0,
+        byDDLType: {},
+        byUser: {},
+        recentFailures: [],
+      };
+    }
+  }
+
+  /**
+   * 특정 테이블의 DDL 히스토리 조회
+   */
+  static async getTableDDLHistory(tableName: string): Promise<any[]> {
+    try {
+      const history = await prisma.$queryRawUnsafe(
+        `
+        SELECT 
+          id,
+          user_id,
+          ddl_type,
+          ddl_query,
+          success,
+          error_message,
+          executed_at
+        FROM ddl_execution_log 
+        WHERE table_name = $1
+        ORDER BY executed_at DESC
+        LIMIT 20
+      `,
+        tableName
+      );
+
+      return history as any[];
+    } catch (error) {
+      logger.error(`테이블 '${tableName}' DDL 히스토리 조회 실패:`, error);
+      return [];
+    }
+  }
+
+  /**
+   * DDL 로그 정리 (오래된 로그 삭제)
+   */
+  static async cleanupOldLogs(retentionDays: number = 90): Promise<number> {
+    try {
+      const cutoffDate = new Date();
+      cutoffDate.setDate(cutoffDate.getDate() - retentionDays);
+
+      const result = await prisma.$executeRaw`
+        DELETE FROM ddl_execution_log 
+        WHERE executed_at < ${cutoffDate}
+      `;
+
+      logger.info(`DDL 로그 정리 완료: ${result}개 레코드 삭제`, {
+        retentionDays,
+        cutoffDate: cutoffDate.toISOString(),
+      });
+
+      return result as number;
+    } catch (error) {
+      logger.error("DDL 로그 정리 실패:", error);
+      return 0;
+    }
+  }
+
+  /**
+   * 긴급 상황 로그 (시스템 테이블 접근 시도 등)
+   */
+  static async logSecurityAlert(
+    userId: string,
+    companyCode: string,
+    alertType:
+      | "SYSTEM_TABLE_ACCESS"
+      | "INVALID_PERMISSION"
+      | "SUSPICIOUS_ACTIVITY",
+    details: string,
+    requestData?: any
+  ): Promise<void> {
+    try {
+      // 보안 알림은 별도의 고급 로깅
+      logger.error("DDL 보안 알림", {
+        alertType,
+        userId,
+        companyCode,
+        details,
+        requestData,
+        severity: "CRITICAL",
+        timestamp: new Date().toISOString(),
+      });
+
+      // 필요시 외부 알림 시스템 연동 (이메일, 슬랙 등)
+      // await sendSecurityAlert(alertType, userId, details);
+    } catch (error) {
+      logger.error("보안 알림 기록 실패:", error);
+    }
+  }
+}

backend-node/src/services/ddlExecutionService.ts

@@ -0,0 +1,785 @@
+/**
+ * DDL 실행 서비스
+ * 실제 PostgreSQL 테이블 및 컬럼 생성을 담당
+ */
+
+import { PrismaClient } from "@prisma/client";
+import {
+  CreateColumnDefinition,
+  DDLExecutionResult,
+  WEB_TYPE_TO_POSTGRES_MAP,
+  WebType,
+} from "../types/ddl";
+import { DDLSafetyValidator } from "./ddlSafetyValidator";
+import { DDLAuditLogger } from "./ddlAuditLogger";
+import { logger } from "../utils/logger";
+import { cache, CacheKeys } from "../utils/cache";
+
+const prisma = new PrismaClient();
+
+export class DDLExecutionService {
+  /**
+   * 새 테이블 생성
+   */
+  async createTable(
+    tableName: string,
+    columns: CreateColumnDefinition[],
+    userCompanyCode: string,
+    userId: string,
+    description?: string
+  ): Promise<DDLExecutionResult> {
+    // DDL 실행 시작 로그
+    await DDLAuditLogger.logDDLStart(
+      userId,
+      userCompanyCode,
+      "CREATE_TABLE",
+      tableName,
+      { columns, description }
+    );
+
+    try {
+      // 1. 권한 검증
+      this.validateSuperAdminPermission(userCompanyCode);
+
+      // 2. 안전성 검증
+      const validation = DDLSafetyValidator.validateTableCreation(
+        tableName,
+        columns
+      );
+      if (!validation.isValid) {
+        const errorMessage = `테이블 생성 검증 실패: ${validation.errors.join(", ")}`;
+
+        await DDLAuditLogger.logDDLExecution(
+          userId,
+          userCompanyCode,
+          "CREATE_TABLE",
+          tableName,
+          "VALIDATION_FAILED",
+          false,
+          errorMessage
+        );
+
+        return {
+          success: false,
+          message: errorMessage,
+          error: {
+            code: "VALIDATION_FAILED",
+            details: validation.errors.join(", "),
+          },
+        };
+      }
+
+      // 3. 테이블 존재 여부 확인
+      const tableExists = await this.checkTableExists(tableName);
+      if (tableExists) {
+        const errorMessage = `테이블 '${tableName}'이 이미 존재합니다.`;
+
+        await DDLAuditLogger.logDDLExecution(
+          userId,
+          userCompanyCode,
+          "CREATE_TABLE",
+          tableName,
+          "TABLE_EXISTS",
+          false,
+          errorMessage
+        );
+
+        return {
+          success: false,
+          message: errorMessage,
+          error: {
+            code: "TABLE_EXISTS",
+            details: errorMessage,
+          },
+        };
+      }
+
+      // 4. DDL 쿼리 생성
+      const ddlQuery = this.generateCreateTableQuery(tableName, columns);
+
+      // 5. 트랜잭션으로 안전하게 실행
+      await prisma.$transaction(async (tx) => {
+        // 5-1. 테이블 생성
+        await tx.$executeRawUnsafe(ddlQuery);
+
+        // 5-2. 테이블 메타데이터 저장
+        await this.saveTableMetadata(tx, tableName, description);
+
+        // 5-3. 컬럼 메타데이터 저장
+        await this.saveColumnMetadata(tx, tableName, columns);
+      });
+
+      // 6. 성공 로그 기록
+      await DDLAuditLogger.logDDLExecution(
+        userId,
+        userCompanyCode,
+        "CREATE_TABLE",
+        tableName,
+        ddlQuery,
+        true
+      );
+
+      logger.info("테이블 생성 성공", {
+        tableName,
+        userId,
+        columnCount: columns.length,
+      });
+
+      // 테이블 생성 후 관련 캐시 무효화
+      this.invalidateTableCache(tableName);
+
+      return {
+        success: true,
+        message: `테이블 '${tableName}'이 성공적으로 생성되었습니다.`,
+        executedQuery: ddlQuery,
+      };
+    } catch (error) {
+      const errorMessage = `테이블 생성 실패: ${(error as Error).message}`;
+
+      // 실패 로그 기록
+      await DDLAuditLogger.logDDLExecution(
+        userId,
+        userCompanyCode,
+        "CREATE_TABLE",
+        tableName,
+        `FAILED: ${(error as Error).message}`,
+        false,
+        errorMessage
+      );
+
+      logger.error("테이블 생성 실패:", {
+        tableName,
+        userId,
+        error: (error as Error).message,
+        stack: (error as Error).stack,
+      });
+
+      return {
+        success: false,
+        message: errorMessage,
+        error: {
+          code: "EXECUTION_FAILED",
+          details: (error as Error).message,
+        },
+      };
+    }
+  }
+
+  /**
+   * 기존 테이블에 컬럼 추가
+   */
+  async addColumn(
+    tableName: string,
+    column: CreateColumnDefinition,
+    userCompanyCode: string,
+    userId: string
+  ): Promise<DDLExecutionResult> {
+    // DDL 실행 시작 로그
+    await DDLAuditLogger.logDDLStart(
+      userId,
+      userCompanyCode,
+      "ADD_COLUMN",
+      tableName,
+      { column }
+    );
+
+    try {
+      // 1. 권한 검증
+      this.validateSuperAdminPermission(userCompanyCode);
+
+      // 2. 안전성 검증
+      const validation = DDLSafetyValidator.validateColumnAddition(
+        tableName,
+        column
+      );
+      if (!validation.isValid) {
+        const errorMessage = `컬럼 추가 검증 실패: ${validation.errors.join(", ")}`;
+
+        await DDLAuditLogger.logDDLExecution(
+          userId,
+          userCompanyCode,
+          "ADD_COLUMN",
+          tableName,
+          "VALIDATION_FAILED",
+          false,
+          errorMessage
+        );
+
+        return {
+          success: false,
+          message: errorMessage,
+          error: {
+            code: "VALIDATION_FAILED",
+            details: validation.errors.join(", "),
+          },
+        };
+      }
+
+      // 3. 테이블 존재 여부 확인
+      const tableExists = await this.checkTableExists(tableName);
+      if (!tableExists) {
+        const errorMessage = `테이블 '${tableName}'이 존재하지 않습니다.`;
+
+        await DDLAuditLogger.logDDLExecution(
+          userId,
+          userCompanyCode,
+          "ADD_COLUMN",
+          tableName,
+          "TABLE_NOT_EXISTS",
+          false,
+          errorMessage
+        );
+
+        return {
+          success: false,
+          message: errorMessage,
+          error: {
+            code: "TABLE_NOT_EXISTS",
+            details: errorMessage,
+          },
+        };
+      }
+
+      // 4. 컬럼 존재 여부 확인
+      const columnExists = await this.checkColumnExists(tableName, column.name);
+      if (columnExists) {
+        const errorMessage = `컬럼 '${column.name}'이 이미 존재합니다.`;
+
+        await DDLAuditLogger.logDDLExecution(
+          userId,
+          userCompanyCode,
+          "ADD_COLUMN",
+          tableName,
+          "COLUMN_EXISTS",
+          false,
+          errorMessage
+        );
+
+        return {
+          success: false,
+          message: errorMessage,
+          error: {
+            code: "COLUMN_EXISTS",
+            details: errorMessage,
+          },
+        };
+      }
+
+      // 5. DDL 쿼리 생성
+      const ddlQuery = this.generateAddColumnQuery(tableName, column);
+
+      // 6. 트랜잭션으로 안전하게 실행
+      await prisma.$transaction(async (tx) => {
+        // 6-1. 컬럼 추가
+        await tx.$executeRawUnsafe(ddlQuery);
+
+        // 6-2. 컬럼 메타데이터 저장
+        await this.saveColumnMetadata(tx, tableName, [column]);
+      });
+
+      // 7. 성공 로그 기록
+      await DDLAuditLogger.logDDLExecution(
+        userId,
+        userCompanyCode,
+        "ADD_COLUMN",
+        tableName,
+        ddlQuery,
+        true
+      );
+
+      logger.info("컬럼 추가 성공", {
+        tableName,
+        columnName: column.name,
+        webType: column.webType,
+        userId,
+      });
+
+      // 컬럼 추가 후 관련 캐시 무효화
+      this.invalidateTableCache(tableName);
+
+      return {
+        success: true,
+        message: `컬럼 '${column.name}'이 성공적으로 추가되었습니다.`,
+        executedQuery: ddlQuery,
+      };
+    } catch (error) {
+      const errorMessage = `컬럼 추가 실패: ${(error as Error).message}`;
+
+      // 실패 로그 기록
+      await DDLAuditLogger.logDDLExecution(
+        userId,
+        userCompanyCode,
+        "ADD_COLUMN",
+        tableName,
+        `FAILED: ${(error as Error).message}`,
+        false,
+        errorMessage
+      );
+
+      logger.error("컬럼 추가 실패:", {
+        tableName,
+        columnName: column.name,
+        userId,
+        error: (error as Error).message,
+        stack: (error as Error).stack,
+      });
+
+      return {
+        success: false,
+        message: errorMessage,
+        error: {
+          code: "EXECUTION_FAILED",
+          details: (error as Error).message,
+        },
+      };
+    }
+  }
+
+  /**
+   * CREATE TABLE DDL 쿼리 생성
+   */
+  private generateCreateTableQuery(
+    tableName: string,
+    columns: CreateColumnDefinition[]
+  ): string {
+    // 사용자 정의 컬럼들 - 모두 VARCHAR(500)로 통일
+    const columnDefinitions = columns
+      .map((col) => {
+        // 입력 타입과 관계없이 모든 컬럼을 VARCHAR(500)로 생성
+        let definition = `"${col.name}" varchar(500)`;
+
+        if (!col.nullable) {
+          definition += " NOT NULL";
+        }
+
+        if (col.defaultValue) {
+          definition += ` DEFAULT '${col.defaultValue}'`;
+        }
+
+        return definition;
+      })
+      .join(",\n  ");
+
+    // 기본 컬럼들 (날짜는 TIMESTAMP, 나머지는 VARCHAR)
+    const baseColumns = `
+  "id" varchar(500) PRIMARY KEY DEFAULT gen_random_uuid()::text,
+  "created_date" timestamp DEFAULT now(),
+  "updated_date" timestamp DEFAULT now(),
+  "writer" varchar(500),
+  "company_code" varchar(500)`;
+
+    // 최종 CREATE TABLE 쿼리
+    return `
+CREATE TABLE "${tableName}" (${baseColumns},
+  ${columnDefinitions}
+);`.trim();
+  }
+
+  /**
+   * ALTER TABLE ADD COLUMN DDL 쿼리 생성
+   */
+  private generateAddColumnQuery(
+    tableName: string,
+    column: CreateColumnDefinition
+  ): string {
+    // 새로 추가되는 컬럼도 VARCHAR(500)로 통일
+    let definition = `"${column.name}" varchar(500)`;
+
+    if (!column.nullable) {
+      definition += " NOT NULL";
+    }
+
+    if (column.defaultValue) {
+      definition += ` DEFAULT '${column.defaultValue}'`;
+    }
+
+    return `ALTER TABLE "${tableName}" ADD COLUMN ${definition};`;
+  }
+
+  /**
+   * 입력타입을 PostgreSQL 타입으로 매핑 (날짜는 TIMESTAMP, 나머지는 VARCHAR)
+   * 날짜 타입만 TIMESTAMP로, 나머지는 VARCHAR(500)로 통일
+   */
+  private mapInputTypeToPostgresType(inputType?: string): string {
+    switch (inputType) {
+      case "date":
+        return "timestamp";
+      default:
+        // 날짜 외의 모든 타입은 VARCHAR(500)로 통일
+        return "varchar(500)";
+    }
+  }
+
+  /**
+   * 레거시 지원: 웹타입을 PostgreSQL 타입으로 매핑
+   * @deprecated 새로운 시스템에서는 mapInputTypeToPostgresType 사용
+   */
+  private mapWebTypeToPostgresType(webType: WebType, length?: number): string {
+    // 레거시 지원을 위해 유지하되, VARCHAR(500)로 통일
+    logger.info(`레거시 웹타입 사용: ${webType} → varchar(500)로 변환`);
+    return "varchar(500)";
+  }
+
+  /**
+   * 테이블 메타데이터 저장
+   */
+  private async saveTableMetadata(
+    tx: any,
+    tableName: string,
+    description?: string
+  ): Promise<void> {
+    await tx.table_labels.upsert({
+      where: { table_name: tableName },
+      update: {
+        table_label: tableName,
+        description: description || `사용자 생성 테이블: ${tableName}`,
+        updated_date: new Date(),
+      },
+      create: {
+        table_name: tableName,
+        table_label: tableName,
+        description: description || `사용자 생성 테이블: ${tableName}`,
+        created_date: new Date(),
+        updated_date: new Date(),
+      },
+    });
+  }
+
+  /**
+   * 컬럼 메타데이터 저장
+   */
+  private async saveColumnMetadata(
+    tx: any,
+    tableName: string,
+    columns: CreateColumnDefinition[]
+  ): Promise<void> {
+    // 먼저 table_labels에 테이블 정보가 있는지 확인하고 없으면 생성
+    await tx.table_labels.upsert({
+      where: {
+        table_name: tableName,
+      },
+      update: {
+        updated_date: new Date(),
+      },
+      create: {
+        table_name: tableName,
+        table_label: tableName,
+        description: `자동 생성된 테이블 메타데이터: ${tableName}`,
+        created_date: new Date(),
+        updated_date: new Date(),
+      },
+    });
+
+    // 기본 컬럼들 정의 (모든 테이블에 자동으로 추가되는 시스템 컬럼)
+    const defaultColumns = [
+      {
+        name: "id",
+        label: "ID",
+        inputType: "text",
+        description: "기본키 (자동생성)",
+        order: -5,
+        isVisible: true,
+      },
+      {
+        name: "created_date",
+        label: "생성일시",
+        inputType: "date",
+        description: "레코드 생성일시",
+        order: -4,
+        isVisible: true,
+      },
+      {
+        name: "updated_date",
+        label: "수정일시",
+        inputType: "date",
+        description: "레코드 수정일시",
+        order: -3,
+        isVisible: true,
+      },
+      {
+        name: "writer",
+        label: "작성자",
+        inputType: "text",
+        description: "레코드 작성자",
+        order: -2,
+        isVisible: true,
+      },
+      {
+        name: "company_code",
+        label: "회사코드",
+        inputType: "text",
+        description: "회사 구분 코드",
+        order: -1,
+        isVisible: true,
+      },
+    ];
+
+    // 기본 컬럼들을 table_type_columns에 등록
+    for (const defaultCol of defaultColumns) {
+      await tx.$executeRaw`
+        INSERT INTO table_type_columns (
+          table_name, column_name, input_type, detail_settings, 
+          is_nullable, display_order, created_date, updated_date
+        ) VALUES (
+          ${tableName}, ${defaultCol.name}, ${defaultCol.inputType}, '{}',
+          'Y', ${defaultCol.order}, now(), now()
+        )
+        ON CONFLICT (table_name, column_name) 
+        DO UPDATE SET 
+          input_type = ${defaultCol.inputType},
+          display_order = ${defaultCol.order},
+          updated_date = now();
+      `;
+    }
+
+    // 사용자 정의 컬럼들을 table_type_columns에 등록
+    for (let i = 0; i < columns.length; i++) {
+      const column = columns[i];
+      const inputType = this.convertWebTypeToInputType(
+        column.webType || "text"
+      );
+
+      await tx.$executeRaw`
+        INSERT INTO table_type_columns (
+          table_name, column_name, input_type, detail_settings, 
+          is_nullable, display_order, created_date, updated_date
+        ) VALUES (
+          ${tableName}, ${column.name}, ${inputType}, ${JSON.stringify(column.detailSettings || {})},
+          'Y', ${i}, now(), now()
+        )
+        ON CONFLICT (table_name, column_name) 
+        DO UPDATE SET 
+          input_type = ${inputType},
+          detail_settings = ${JSON.stringify(column.detailSettings || {})},
+          display_order = ${i},
+          updated_date = now();
+      `;
+    }
+
+    // 레거시 지원: column_labels 테이블에도 등록 (기존 시스템 호환성)
+    // 1. 기본 컬럼들을 column_labels에 등록
+    for (const defaultCol of defaultColumns) {
+      await tx.column_labels.upsert({
+        where: {
+          table_name_column_name: {
+            table_name: tableName,
+            column_name: defaultCol.name,
+          },
+        },
+        update: {
+          column_label: defaultCol.label,
+          input_type: defaultCol.inputType,
+          detail_settings: JSON.stringify({}),
+          description: defaultCol.description,
+          display_order: defaultCol.order,
+          is_visible: defaultCol.isVisible,
+          updated_date: new Date(),
+        },
+        create: {
+          table_name: tableName,
+          column_name: defaultCol.name,
+          column_label: defaultCol.label,
+          input_type: defaultCol.inputType,
+          detail_settings: JSON.stringify({}),
+          description: defaultCol.description,
+          display_order: defaultCol.order,
+          is_visible: defaultCol.isVisible,
+          created_date: new Date(),
+          updated_date: new Date(),
+        },
+      });
+    }
+
+    // 2. 사용자 정의 컬럼들을 column_labels에 등록
+    for (const column of columns) {
+      await tx.column_labels.upsert({
+        where: {
+          table_name_column_name: {
+            table_name: tableName,
+            column_name: column.name,
+          },
+        },
+        update: {
+          column_label: column.label || column.name,
+          input_type: this.convertWebTypeToInputType(column.webType || "text"),
+          detail_settings: JSON.stringify(column.detailSettings || {}),
+          description: column.description,
+          display_order: column.order || 0,
+          is_visible: true,
+          updated_date: new Date(),
+        },
+        create: {
+          table_name: tableName,
+          column_name: column.name,
+          column_label: column.label || column.name,
+          input_type: this.convertWebTypeToInputType(column.webType || "text"),
+          detail_settings: JSON.stringify(column.detailSettings || {}),
+          description: column.description,
+          display_order: column.order || 0,
+          is_visible: true,
+          created_date: new Date(),
+          updated_date: new Date(),
+        },
+      });
+    }
+  }
+
+  /**
+   * 웹 타입을 입력 타입으로 변환
+   */
+  private convertWebTypeToInputType(webType: string): string {
+    const webTypeToInputTypeMap: Record<string, string> = {
+      // 텍스트 관련
+      text: "text",
+      textarea: "text",
+      email: "text",
+      tel: "text",
+      url: "text",
+      password: "text",
+
+      // 숫자 관련
+      number: "number",
+      decimal: "number",
+
+      // 날짜 관련
+      date: "date",
+      datetime: "date",
+      time: "date",
+
+      // 선택 관련
+      select: "select",
+      dropdown: "select",
+      checkbox: "checkbox",
+      boolean: "checkbox",
+      radio: "radio",
+
+      // 참조 관련
+      code: "code",
+      entity: "entity",
+
+      // 기타
+      file: "text",
+      button: "text",
+    };
+
+    return webTypeToInputTypeMap[webType] || "text";
+  }
+
+  /**
+   * 권한 검증 (슈퍼관리자 확인)
+   */
+  private validateSuperAdminPermission(userCompanyCode: string): void {
+    if (userCompanyCode !== "*") {
+      throw new Error("최고 관리자 권한이 필요합니다.");
+    }
+  }
+
+  /**
+   * 테이블 존재 여부 확인
+   */
+  private async checkTableExists(tableName: string): Promise<boolean> {
+    try {
+      const result = await prisma.$queryRawUnsafe(
+        `
+        SELECT EXISTS (
+          SELECT FROM information_schema.tables 
+          WHERE table_schema = 'public' 
+          AND table_name = $1
+        );
+      `,
+        tableName
+      );
+
+      return (result as any)[0]?.exists || false;
+    } catch (error) {
+      logger.error("테이블 존재 확인 오류:", error);
+      return false;
+    }
+  }
+
+  /**
+   * 컬럼 존재 여부 확인
+   */
+  private async checkColumnExists(
+    tableName: string,
+    columnName: string
+  ): Promise<boolean> {
+    try {
+      const result = await prisma.$queryRawUnsafe(
+        `
+        SELECT EXISTS (
+          SELECT FROM information_schema.columns 
+          WHERE table_schema = 'public' 
+          AND table_name = $1 
+          AND column_name = $2
+        );
+      `,
+        tableName,
+        columnName
+      );
+
+      return (result as any)[0]?.exists || false;
+    } catch (error) {
+      logger.error("컬럼 존재 확인 오류:", error);
+      return false;
+    }
+  }
+
+  /**
+   * 생성된 테이블 정보 조회
+   */
+  async getCreatedTableInfo(tableName: string): Promise<{
+    tableInfo: any;
+    columns: any[];
+  } | null> {
+    try {
+      // 테이블 정보 조회
+      const tableInfo = await prisma.table_labels.findUnique({
+        where: { table_name: tableName },
+      });
+
+      // 컬럼 정보 조회
+      const columns = await prisma.column_labels.findMany({
+        where: { table_name: tableName },
+        orderBy: { display_order: "asc" },
+      });
+
+      if (!tableInfo) {
+        return null;
+      }
+
+      return {
+        tableInfo,
+        columns,
+      };
+    } catch (error) {
+      logger.error("생성된 테이블 정보 조회 실패:", error);
+      return null;
+    }
+  }
+
+  /**
+   * 테이블 관련 캐시 무효화
+   * DDL 작업 후 호출하여 캐시된 데이터를 클리어
+   */
+  private invalidateTableCache(tableName: string): void {
+    try {
+      // 테이블 컬럼 관련 캐시 무효화
+      const columnCacheDeleted = cache.deleteByPattern(
+        `table_columns:${tableName}`
+      );
+      const countCacheDeleted = cache.deleteByPattern(
+        `table_column_count:${tableName}`
+      );
+      cache.delete("table_list");
+
+      const totalDeleted = columnCacheDeleted + countCacheDeleted + 1;
+
+      logger.info(
+        `테이블 캐시 무효화 완료: ${tableName}, 삭제된 키: ${totalDeleted}개`
+      );
+    } catch (error) {
+      logger.warn(`테이블 캐시 무효화 실패: ${tableName}`, error);
+    }
+  }
+}

backend-node/src/services/ddlSafetyValidator.ts

@@ -0,0 +1,390 @@
+/**
+ * DDL 안전성 검증 서비스
+ * 테이블/컬럼 생성 전 모든 보안 검증을 수행
+ */
+
+import {
+  CreateColumnDefinition,
+  ValidationResult,
+  SYSTEM_TABLES,
+  RESERVED_WORDS,
+  RESERVED_COLUMNS,
+} from "../types/ddl";
+import { logger } from "../utils/logger";
+
+export class DDLSafetyValidator {
+  /**
+   * 테이블 생성 전 전체 검증
+   */
+  static validateTableCreation(
+    tableName: string,
+    columns: CreateColumnDefinition[]
+  ): ValidationResult {
+    const errors: string[] = [];
+    const warnings: string[] = [];
+
+    try {
+      // 1. 테이블명 기본 검증
+      const tableNameValidation = this.validateTableName(tableName);
+      if (!tableNameValidation.isValid) {
+        errors.push(...tableNameValidation.errors);
+      }
+
+      // 2. 컬럼 기본 검증
+      if (columns.length === 0) {
+        errors.push("최소 1개의 컬럼이 필요합니다.");
+      }
+
+      // 3. 컬럼 목록 검증
+      const columnsValidation = this.validateColumnList(columns);
+      if (!columnsValidation.isValid) {
+        errors.push(...columnsValidation.errors);
+      }
+      if (columnsValidation.warnings) {
+        warnings.push(...columnsValidation.warnings);
+      }
+
+      // 4. 컬럼명 중복 검증
+      const duplicateValidation = this.validateColumnDuplication(columns);
+      if (!duplicateValidation.isValid) {
+        errors.push(...duplicateValidation.errors);
+      }
+
+      logger.info("테이블 생성 검증 완료", {
+        tableName,
+        columnCount: columns.length,
+        errorCount: errors.length,
+        warningCount: warnings.length,
+      });
+
+      return {
+        isValid: errors.length === 0,
+        errors,
+        warnings,
+      };
+    } catch (error) {
+      logger.error("테이블 생성 검증 중 오류 발생:", error);
+      return {
+        isValid: false,
+        errors: ["테이블 생성 검증 중 내부 오류가 발생했습니다."],
+      };
+    }
+  }
+
+  /**
+   * 컬럼 추가 전 검증
+   */
+  static validateColumnAddition(
+    tableName: string,
+    column: CreateColumnDefinition
+  ): ValidationResult {
+    const errors: string[] = [];
+    const warnings: string[] = [];
+
+    try {
+      // 1. 테이블명 검증 (시스템 테이블 확인)
+      if (this.isSystemTable(tableName)) {
+        errors.push(
+          `'${tableName}'은 시스템 테이블이므로 컬럼을 추가할 수 없습니다.`
+        );
+      }
+
+      // 2. 컬럼 정의 검증
+      const columnValidation = this.validateSingleColumn(column);
+      if (!columnValidation.isValid) {
+        errors.push(...columnValidation.errors);
+      }
+      if (columnValidation.warnings) {
+        warnings.push(...columnValidation.warnings);
+      }
+
+      logger.info("컬럼 추가 검증 완료", {
+        tableName,
+        columnName: column.name,
+        webType: column.webType,
+        errorCount: errors.length,
+      });
+
+      return {
+        isValid: errors.length === 0,
+        errors,
+        warnings,
+      };
+    } catch (error) {
+      logger.error("컬럼 추가 검증 중 오류 발생:", error);
+      return {
+        isValid: false,
+        errors: ["컬럼 추가 검증 중 내부 오류가 발생했습니다."],
+      };
+    }
+  }
+
+  /**
+   * 테이블명 검증
+   */
+  private static validateTableName(tableName: string): ValidationResult {
+    const errors: string[] = [];
+
+    // 1. 기본 형식 검증
+    if (!this.isValidTableName(tableName)) {
+      errors.push(
+        "유효하지 않은 테이블명입니다. 영문자로 시작하고 영문자, 숫자, 언더스코어만 사용 가능합니다."
+      );
+    }
+
+    // 2. 길이 검증
+    if (tableName.length > 63) {
+      errors.push("테이블명은 63자를 초과할 수 없습니다.");
+    }
+
+    if (tableName.length < 2) {
+      errors.push("테이블명은 최소 2자 이상이어야 합니다.");
+    }
+
+    // 3. 시스템 테이블 보호
+    if (this.isSystemTable(tableName)) {
+      errors.push(
+        `'${tableName}'은 시스템 테이블명으로 사용할 수 없습니다. 다른 이름을 선택해주세요.`
+      );
+    }
+
+    // 4. 예약어 검증
+    if (this.isReservedWord(tableName)) {
+      errors.push(
+        `'${tableName}'은 SQL 예약어이므로 테이블명으로 사용할 수 없습니다.`
+      );
+    }
+
+    // 5. 일반적인 네이밍 컨벤션 검증
+    if (tableName.startsWith("_") || tableName.endsWith("_")) {
+      errors.push("테이블명은 언더스코어로 시작하거나 끝날 수 없습니다.");
+    }
+
+    if (tableName.includes("__")) {
+      errors.push("테이블명에 연속된 언더스코어는 사용할 수 없습니다.");
+    }
+
+    return {
+      isValid: errors.length === 0,
+      errors,
+    };
+  }
+
+  /**
+   * 컬럼 목록 검증
+   */
+  private static validateColumnList(
+    columns: CreateColumnDefinition[]
+  ): ValidationResult {
+    const errors: string[] = [];
+    const warnings: string[] = [];
+
+    for (let i = 0; i < columns.length; i++) {
+      const column = columns[i];
+      const columnValidation = this.validateSingleColumn(column, i + 1);
+
+      if (!columnValidation.isValid) {
+        errors.push(...columnValidation.errors);
+      }
+
+      if (columnValidation.warnings) {
+        warnings.push(...columnValidation.warnings);
+      }
+    }
+
+    return {
+      isValid: errors.length === 0,
+      errors,
+      warnings,
+    };
+  }
+
+  /**
+   * 개별 컬럼 검증
+   */
+  private static validateSingleColumn(
+    column: CreateColumnDefinition,
+    position?: number
+  ): ValidationResult {
+    const errors: string[] = [];
+    const warnings: string[] = [];
+    const prefix = position
+      ? `컬럼 ${position}(${column.name}): `
+      : `컬럼 '${column.name}': `;
+
+    // 1. 컬럼명 기본 검증
+    if (!column.name || column.name.trim() === "") {
+      errors.push(`${prefix}컬럼명은 필수입니다.`);
+      return { isValid: false, errors };
+    }
+
+    if (!this.isValidColumnName(column.name)) {
+      errors.push(
+        `${prefix}유효하지 않은 컬럼명입니다. 영문자로 시작하고 영문자, 숫자, 언더스코어만 사용 가능합니다.`
+      );
+    }
+
+    // 2. 길이 검증
+    if (column.name.length > 63) {
+      errors.push(`${prefix}컬럼명은 63자를 초과할 수 없습니다.`);
+    }
+
+    if (column.name.length < 2) {
+      errors.push(`${prefix}컬럼명은 최소 2자 이상이어야 합니다.`);
+    }
+
+    // 3. 예약된 컬럼명 검증
+    if (this.isReservedColumnName(column.name)) {
+      errors.push(
+        `${prefix}'${column.name}'은 예약된 컬럼명입니다. 기본 컬럼(id, created_date, updated_date, company_code)과 중복됩니다.`
+      );
+    }
+
+    // 4. SQL 예약어 검증
+    if (this.isReservedWord(column.name)) {
+      errors.push(
+        `${prefix}'${column.name}'은 SQL 예약어이므로 컬럼명으로 사용할 수 없습니다.`
+      );
+    }
+
+    // 5. 웹타입 검증
+    if (!column.webType) {
+      errors.push(`${prefix}웹타입이 지정되지 않았습니다.`);
+    }
+
+    // 6. 길이 설정 검증 (text, code 타입에서만 허용)
+    if (column.length !== undefined) {
+      if (
+        !["text", "code", "email", "tel", "select", "radio"].includes(
+          column.webType || "text"
+        )
+      ) {
+        warnings.push(
+          `${prefix}${column.webType || "text"} 타입에서는 길이 설정이 무시됩니다.`
+        );
+      } else if (column.length <= 0 || column.length > 65535) {
+        errors.push(`${prefix}길이는 1 이상 65535 이하여야 합니다.`);
+      }
+    }
+
+    // 7. 네이밍 컨벤션 검증
+    if (column.name.startsWith("_") || column.name.endsWith("_")) {
+      warnings.push(
+        `${prefix}컬럼명이 언더스코어로 시작하거나 끝나는 것은 권장하지 않습니다.`
+      );
+    }
+
+    if (column.name.includes("__")) {
+      errors.push(`${prefix}컬럼명에 연속된 언더스코어는 사용할 수 없습니다.`);
+    }
+
+    return {
+      isValid: errors.length === 0,
+      errors,
+      warnings,
+    };
+  }
+
+  /**
+   * 컬럼명 중복 검증
+   */
+  private static validateColumnDuplication(
+    columns: CreateColumnDefinition[]
+  ): ValidationResult {
+    const errors: string[] = [];
+    const columnNames = columns.map((col) => col.name.toLowerCase());
+    const seen = new Set<string>();
+    const duplicates = new Set<string>();
+
+    for (const name of columnNames) {
+      if (seen.has(name)) {
+        duplicates.add(name);
+      } else {
+        seen.add(name);
+      }
+    }
+
+    if (duplicates.size > 0) {
+      errors.push(
+        `중복된 컬럼명이 있습니다: ${Array.from(duplicates).join(", ")}`
+      );
+    }
+
+    return {
+      isValid: errors.length === 0,
+      errors,
+    };
+  }
+
+  /**
+   * 테이블명 유효성 검증 (정규식)
+   */
+  private static isValidTableName(tableName: string): boolean {
+    const tableNameRegex = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+    return tableNameRegex.test(tableName);
+  }
+
+  /**
+   * 컬럼명 유효성 검증 (정규식)
+   */
+  private static isValidColumnName(columnName: string): boolean {
+    const columnNameRegex = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+    return columnNameRegex.test(columnName) && columnName.length <= 63;
+  }
+
+  /**
+   * 시스템 테이블 확인
+   */
+  private static isSystemTable(tableName: string): boolean {
+    return SYSTEM_TABLES.includes(tableName.toLowerCase() as any);
+  }
+
+  /**
+   * SQL 예약어 확인
+   */
+  private static isReservedWord(word: string): boolean {
+    return RESERVED_WORDS.includes(word.toLowerCase() as any);
+  }
+
+  /**
+   * 예약된 컬럼명 확인
+   */
+  private static isReservedColumnName(columnName: string): boolean {
+    return RESERVED_COLUMNS.includes(columnName.toLowerCase() as any);
+  }
+
+  /**
+   * 전체 검증 통계 생성
+   */
+  static generateValidationReport(
+    tableName: string,
+    columns: CreateColumnDefinition[]
+  ): {
+    tableName: string;
+    totalColumns: number;
+    validationResult: ValidationResult;
+    summary: string;
+  } {
+    const validationResult = this.validateTableCreation(tableName, columns);
+
+    let summary = `테이블 '${tableName}' 검증 완료. `;
+    summary += `컬럼 ${columns.length}개 중 `;
+
+    if (validationResult.isValid) {
+      summary += "모든 검증 통과.";
+    } else {
+      summary += `${validationResult.errors.length}개 오류 발견.`;
+    }
+
+    if (validationResult.warnings && validationResult.warnings.length > 0) {
+      summary += ` ${validationResult.warnings.length}개 경고 있음.`;
+    }
+
+    return {
+      tableName,
+      totalColumns: columns.length,
+      validationResult,
+      summary,
+    };
+  }
+}

backend-node/src/services/enhancedDynamicFormService.ts

@@ -0,0 +1,786 @@
+/**
+ * 개선된 동적 폼 서비스
+ * 타입 안전성과 검증 강화
+ */
+
+import { PrismaClient } from "@prisma/client";
+import {
+  WebType,
+  DynamicWebType,
+  normalizeWebType,
+  isValidWebType,
+  WEB_TYPE_TO_POSTGRES_CONVERTER,
+  WEB_TYPE_VALIDATION_PATTERNS,
+} from "../types/unified-web-types";
+import { DataflowControlService } from "./dataflowControlService";
+
+const prisma = new PrismaClient();
+
+// 테이블 컬럼 정보
+export interface TableColumn {
+  column_name: string;
+  data_type: string;
+  is_nullable: string;
+  column_default: any;
+  character_maximum_length?: number;
+  numeric_precision?: number;
+  numeric_scale?: number;
+}
+
+// 컬럼 웹타입 정보
+export interface ColumnWebTypeInfo {
+  columnName: string;
+  webType: WebType;
+  isRequired: boolean;
+  validationRules?: Record<string, any>;
+  defaultValue?: any;
+}
+
+// 폼 데이터 검증 결과
+export interface FormValidationResult {
+  isValid: boolean;
+  errors: FormValidationError[];
+  warnings: FormValidationWarning[];
+  transformedData: Record<string, any>;
+}
+
+export interface FormValidationError {
+  field: string;
+  code: string;
+  message: string;
+  value?: any;
+}
+
+export interface FormValidationWarning {
+  field: string;
+  code: string;
+  message: string;
+  suggestion?: string;
+}
+
+// 저장 결과
+export interface FormDataResult {
+  success: boolean;
+  message: string;
+  data?: any;
+  affectedRows?: number;
+  insertedId?: any;
+  validationResult?: FormValidationResult;
+}
+
+export class EnhancedDynamicFormService {
+  private dataflowControlService = new DataflowControlService();
+  private columnCache = new Map<string, TableColumn[]>();
+  private webTypeCache = new Map<string, ColumnWebTypeInfo[]>();
+
+  /**
+   * 폼 데이터 저장 (메인 메서드)
+   */
+  async saveFormData(
+    screenId: number,
+    tableName: string,
+    data: Record<string, any>
+  ): Promise<FormDataResult> {
+    const startTime = Date.now();
+
+    try {
+      console.log(`🚀 개선된 폼 저장 시작: ${tableName}`, {
+        screenId,
+        dataKeys: Object.keys(data),
+        timestamp: new Date().toISOString(),
+      });
+
+      // 1. 테이블 존재 여부 확인
+      const tableExists = await this.validateTableExists(tableName);
+      if (!tableExists) {
+        return {
+          success: false,
+          message: `테이블 '${tableName}'이 존재하지 않습니다.`,
+        };
+      }
+
+      // 2. 스키마 정보 로드
+      const [tableColumns, columnWebTypes] = await Promise.all([
+        this.getTableColumns(tableName),
+        this.getColumnWebTypes(tableName),
+      ]);
+
+      // 3. 폼 데이터 검증
+      const validationResult = await this.validateFormData(
+        data,
+        tableColumns,
+        columnWebTypes,
+        tableName
+      );
+
+      if (!validationResult.isValid) {
+        console.error("❌ 폼 데이터 검증 실패:", validationResult.errors);
+        return {
+          success: false,
+          message: this.formatValidationErrors(validationResult.errors),
+          validationResult,
+        };
+      }
+
+      // 4. 데이터 저장 수행
+      const saveResult = await this.performDataSave(
+        tableName,
+        validationResult.transformedData,
+        tableColumns
+      );
+
+      const duration = Date.now() - startTime;
+      console.log(`✅ 폼 저장 완료: ${duration}ms`);
+
+      return {
+        success: true,
+        message: "데이터가 성공적으로 저장되었습니다.",
+        data: saveResult.data,
+        affectedRows: saveResult.affectedRows,
+        insertedId: saveResult.insertedId,
+        validationResult,
+      };
+    } catch (error: any) {
+      console.error("❌ 폼 저장 중 오류:", error);
+
+      return {
+        success: false,
+        message: this.formatErrorMessage(error),
+        data: { error: error.message, stack: error.stack },
+      };
+    }
+  }
+
+  /**
+   * 테이블 존재 여부 확인
+   */
+  private async validateTableExists(tableName: string): Promise<boolean> {
+    try {
+      const result = await prisma.$queryRawUnsafe(
+        `
+        SELECT EXISTS (
+          SELECT FROM information_schema.tables 
+          WHERE table_name = $1
+        ) as exists
+      `,
+        tableName
+      );
+
+      return (result as any)[0]?.exists || false;
+    } catch (error) {
+      console.error(`❌ 테이블 존재 여부 확인 실패: ${tableName}`, error);
+      return false;
+    }
+  }
+
+  /**
+   * 테이블 컬럼 정보 조회 (캐시 포함)
+   */
+  private async getTableColumns(tableName: string): Promise<TableColumn[]> {
+    // 캐시 확인
+    const cached = this.columnCache.get(tableName);
+    if (cached) {
+      return cached;
+    }
+
+    try {
+      const columns = (await prisma.$queryRawUnsafe(
+        `
+        SELECT 
+          column_name,
+          data_type,
+          is_nullable,
+          column_default,
+          character_maximum_length,
+          numeric_precision,
+          numeric_scale
+        FROM information_schema.columns 
+        WHERE table_name = $1
+        ORDER BY ordinal_position
+      `,
+        tableName
+      )) as TableColumn[];
+
+      // 캐시 저장 (10분)
+      this.columnCache.set(tableName, columns);
+      setTimeout(() => this.columnCache.delete(tableName), 10 * 60 * 1000);
+
+      return columns;
+    } catch (error) {
+      console.error(`❌ 테이블 컬럼 정보 조회 실패: ${tableName}`, error);
+      throw new Error(`테이블 컬럼 정보를 조회할 수 없습니다: ${error}`);
+    }
+  }
+
+  /**
+   * 컬럼 웹타입 정보 조회
+   */
+  private async getColumnWebTypes(
+    tableName: string
+  ): Promise<ColumnWebTypeInfo[]> {
+    // 캐시 확인
+    const cached = this.webTypeCache.get(tableName);
+    if (cached) {
+      return cached;
+    }
+
+    try {
+      // table_type_columns에서 웹타입 정보 조회
+      const webTypeData = (await prisma.$queryRawUnsafe(
+        `
+        SELECT 
+          column_name,
+          web_type,
+          is_nullable,
+          detail_settings
+        FROM table_type_columns 
+        WHERE table_name = $1
+      `,
+        tableName
+      )) as any[];
+
+      const columnWebTypes: ColumnWebTypeInfo[] = webTypeData.map((row) => ({
+        columnName: row.column_name,
+        webType: normalizeWebType(row.web_type || "text"),
+        isRequired: row.is_nullable === "N",
+        validationRules: this.parseDetailSettings(row.detail_settings),
+        defaultValue: null,
+      }));
+
+      // 캐시 저장 (10분)
+      this.webTypeCache.set(tableName, columnWebTypes);
+      setTimeout(() => this.webTypeCache.delete(tableName), 10 * 60 * 1000);
+
+      return columnWebTypes;
+    } catch (error) {
+      console.error(`❌ 컬럼 웹타입 정보 조회 실패: ${tableName}`, error);
+      // 실패 시 빈 배열 반환 (기본 검증만 수행)
+      return [];
+    }
+  }
+
+  /**
+   * 상세 설정 파싱
+   */
+  private parseDetailSettings(
+    detailSettings: string | null
+  ): Record<string, any> {
+    if (!detailSettings) return {};
+
+    try {
+      return JSON.parse(detailSettings);
+    } catch {
+      return {};
+    }
+  }
+
+  /**
+   * 폼 데이터 검증
+   */
+  private async validateFormData(
+    data: Record<string, any>,
+    tableColumns: TableColumn[],
+    columnWebTypes: ColumnWebTypeInfo[],
+    tableName: string
+  ): Promise<FormValidationResult> {
+    const errors: FormValidationError[] = [];
+    const warnings: FormValidationWarning[] = [];
+    const transformedData: Record<string, any> = {};
+
+    const columnMap = new Map(
+      tableColumns.map((col) => [col.column_name, col])
+    );
+    const webTypeMap = new Map(columnWebTypes.map((wt) => [wt.columnName, wt]));
+
+    console.log(`📋 폼 데이터 검증 시작: ${tableName}`, {
+      inputFields: Object.keys(data).length,
+      tableColumns: tableColumns.length,
+      webTypeColumns: columnWebTypes.length,
+    });
+
+    // 입력된 각 필드 검증
+    for (const [fieldName, value] of Object.entries(data)) {
+      const column = columnMap.get(fieldName);
+      const webTypeInfo = webTypeMap.get(fieldName);
+
+      // 1. 컬럼 존재 여부 확인
+      if (!column) {
+        errors.push({
+          field: fieldName,
+          code: "COLUMN_NOT_EXISTS",
+          message: `테이블 '${tableName}'에 '${fieldName}' 컬럼이 존재하지 않습니다.`,
+          value,
+        });
+        continue;
+      }
+
+      // 2. 필수값 검증
+      if (webTypeInfo?.isRequired && this.isEmptyValue(value)) {
+        errors.push({
+          field: fieldName,
+          code: "REQUIRED_FIELD",
+          message: `'${fieldName}'은(는) 필수 입력 항목입니다.`,
+          value,
+        });
+        continue;
+      }
+
+      // 3. 웹타입별 검증 및 변환
+      if (webTypeInfo?.webType) {
+        const validationResult = this.validateFieldByWebType(
+          fieldName,
+          value,
+          webTypeInfo.webType,
+          webTypeInfo.validationRules
+        );
+
+        if (!validationResult.isValid) {
+          errors.push(validationResult.error!);
+          continue;
+        }
+
+        transformedData[fieldName] = validationResult.transformedValue;
+      } else {
+        // 웹타입 정보가 없는 경우 DB 타입 기반 변환
+        transformedData[fieldName] = this.convertValueForPostgreSQL(
+          value,
+          column.data_type
+        );
+      }
+
+      // 4. DB 제약조건 검증
+      const constraintValidation = this.validateDatabaseConstraints(
+        fieldName,
+        transformedData[fieldName],
+        column
+      );
+
+      if (!constraintValidation.isValid) {
+        errors.push(constraintValidation.error!);
+        continue;
+      }
+    }
+
+    // 필수 컬럼 누락 확인
+    const requiredColumns = columnWebTypes.filter((wt) => wt.isRequired);
+    for (const requiredCol of requiredColumns) {
+      if (
+        !(requiredCol.columnName in data) ||
+        this.isEmptyValue(data[requiredCol.columnName])
+      ) {
+        if (!errors.some((e) => e.field === requiredCol.columnName)) {
+          errors.push({
+            field: requiredCol.columnName,
+            code: "MISSING_REQUIRED_FIELD",
+            message: `필수 입력 항목 '${requiredCol.columnName}'이 누락되었습니다.`,
+          });
+        }
+      }
+    }
+
+    console.log(`📋 폼 데이터 검증 완료:`, {
+      errors: errors.length,
+      warnings: warnings.length,
+      transformedFields: Object.keys(transformedData).length,
+    });
+
+    return {
+      isValid: errors.length === 0,
+      errors,
+      warnings,
+      transformedData,
+    };
+  }
+
+  /**
+   * 웹타입별 필드 검증
+   */
+  private validateFieldByWebType(
+    fieldName: string,
+    value: any,
+    webType: WebType,
+    validationRules?: Record<string, any>
+  ): { isValid: boolean; error?: FormValidationError; transformedValue?: any } {
+    // 빈 값 처리
+    if (this.isEmptyValue(value)) {
+      return { isValid: true, transformedValue: null };
+    }
+
+    // 웹타입 유효성 확인
+    if (!isValidWebType(webType)) {
+      return {
+        isValid: false,
+        error: {
+          field: fieldName,
+          code: "INVALID_WEB_TYPE",
+          message: `'${fieldName}'의 웹타입 '${webType}'이 올바르지 않습니다.`,
+          value,
+        },
+      };
+    }
+
+    // 패턴 검증
+    const pattern = WEB_TYPE_VALIDATION_PATTERNS[webType];
+    if (pattern && !pattern.test(String(value))) {
+      return {
+        isValid: false,
+        error: {
+          field: fieldName,
+          code: "INVALID_FORMAT",
+          message: `'${fieldName}'의 형식이 올바르지 않습니다.`,
+          value,
+        },
+      };
+    }
+
+    // 값 변환
+    try {
+      const converter = WEB_TYPE_TO_POSTGRES_CONVERTER[webType];
+      const transformedValue = converter ? converter(value) : value;
+
+      return { isValid: true, transformedValue };
+    } catch (error) {
+      return {
+        isValid: false,
+        error: {
+          field: fieldName,
+          code: "CONVERSION_ERROR",
+          message: `'${fieldName}' 값 변환 중 오류가 발생했습니다: ${error}`,
+          value,
+        },
+      };
+    }
+  }
+
+  /**
+   * 데이터베이스 제약조건 검증
+   */
+  private validateDatabaseConstraints(
+    fieldName: string,
+    value: any,
+    column: TableColumn
+  ): { isValid: boolean; error?: FormValidationError } {
+    // NULL 제약조건
+    if (
+      column.is_nullable === "NO" &&
+      (value === null || value === undefined)
+    ) {
+      return {
+        isValid: false,
+        error: {
+          field: fieldName,
+          code: "NOT_NULL_VIOLATION",
+          message: `'${fieldName}'에는 NULL 값을 입력할 수 없습니다.`,
+          value,
+        },
+      };
+    }
+
+    // 문자열 길이 제약조건
+    if (column.character_maximum_length && typeof value === "string") {
+      if (value.length > column.character_maximum_length) {
+        return {
+          isValid: false,
+          error: {
+            field: fieldName,
+            code: "STRING_TOO_LONG",
+            message: `'${fieldName}'의 길이는 최대 ${column.character_maximum_length}자까지 입력할 수 있습니다.`,
+            value,
+          },
+        };
+      }
+    }
+
+    // 숫자 정밀도 검증
+    if (column.numeric_precision && typeof value === "number") {
+      const totalDigits = Math.abs(value).toString().replace(".", "").length;
+      if (totalDigits > column.numeric_precision) {
+        return {
+          isValid: false,
+          error: {
+            field: fieldName,
+            code: "NUMERIC_OVERFLOW",
+            message: `'${fieldName}'의 숫자 자릿수가 허용 범위를 초과했습니다.`,
+            value,
+          },
+        };
+      }
+    }
+
+    return { isValid: true };
+  }
+
+  /**
+   * 빈 값 확인
+   */
+  private isEmptyValue(value: any): boolean {
+    return (
+      value === null ||
+      value === undefined ||
+      value === "" ||
+      (Array.isArray(value) && value.length === 0)
+    );
+  }
+
+  /**
+   * 데이터 저장 수행
+   */
+  private async performDataSave(
+    tableName: string,
+    data: Record<string, any>,
+    tableColumns: TableColumn[]
+  ): Promise<{ data?: any; affectedRows: number; insertedId?: any }> {
+    try {
+      // Primary Key 확인
+      const primaryKeys = await this.getPrimaryKeys(tableName);
+      const hasExistingRecord =
+        primaryKeys.length > 0 &&
+        primaryKeys.every((pk) => data[pk] !== undefined && data[pk] !== null);
+
+      if (hasExistingRecord) {
+        // UPDATE 수행
+        return await this.performUpdate(tableName, data, primaryKeys);
+      } else {
+        // INSERT 수행
+        return await this.performInsert(tableName, data);
+      }
+    } catch (error) {
+      console.error(`❌ 데이터 저장 실패: ${tableName}`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Primary Key 조회
+   */
+  private async getPrimaryKeys(tableName: string): Promise<string[]> {
+    try {
+      const result = (await prisma.$queryRawUnsafe(
+        `
+        SELECT column_name
+        FROM information_schema.key_column_usage
+        WHERE table_name = $1 
+        AND constraint_name LIKE '%_pkey'
+      `,
+        tableName
+      )) as any[];
+
+      return result.map((row) => row.column_name);
+    } catch (error) {
+      console.error(`❌ Primary Key 조회 실패: ${tableName}`, error);
+      return [];
+    }
+  }
+
+  /**
+   * INSERT 수행
+   */
+  private async performInsert(
+    tableName: string,
+    data: Record<string, any>
+  ): Promise<{ data?: any; affectedRows: number; insertedId?: any }> {
+    const columns = Object.keys(data);
+    const values = Object.values(data);
+    const placeholders = values.map((_, index) => `$${index + 1}`).join(", ");
+
+    const insertQuery = `
+      INSERT INTO ${tableName} (${columns.join(", ")})
+      VALUES (${placeholders})
+      RETURNING *
+    `;
+
+    console.log(`📝 INSERT 쿼리 실행: ${tableName}`, {
+      columns: columns.length,
+      query: insertQuery.replace(/\n\s+/g, " "),
+    });
+
+    const result = (await prisma.$queryRawUnsafe(
+      insertQuery,
+      ...values
+    )) as any[];
+
+    return {
+      data: result[0],
+      affectedRows: result.length,
+      insertedId: result[0]?.id || result[0],
+    };
+  }
+
+  /**
+   * UPDATE 수행
+   */
+  private async performUpdate(
+    tableName: string,
+    data: Record<string, any>,
+    primaryKeys: string[]
+  ): Promise<{ data?: any; affectedRows: number; insertedId?: any }> {
+    const updateColumns = Object.keys(data).filter(
+      (col) => !primaryKeys.includes(col)
+    );
+    const whereColumns = primaryKeys.filter((pk) => data[pk] !== undefined);
+
+    if (updateColumns.length === 0) {
+      throw new Error("업데이트할 컬럼이 없습니다.");
+    }
+
+    const setClause = updateColumns
+      .map((col, index) => `${col} = $${index + 1}`)
+      .join(", ");
+
+    const whereClause = whereColumns
+      .map((col, index) => `${col} = $${updateColumns.length + index + 1}`)
+      .join(" AND ");
+
+    const updateValues = [
+      ...updateColumns.map((col) => data[col]),
+      ...whereColumns.map((col) => data[col]),
+    ];
+
+    const updateQuery = `
+      UPDATE ${tableName} 
+      SET ${setClause}
+      WHERE ${whereClause}
+      RETURNING *
+    `;
+
+    console.log(`📝 UPDATE 쿼리 실행: ${tableName}`, {
+      updateColumns: updateColumns.length,
+      whereColumns: whereColumns.length,
+      query: updateQuery.replace(/\n\s+/g, " "),
+    });
+
+    const result = (await prisma.$queryRawUnsafe(
+      updateQuery,
+      ...updateValues
+    )) as any[];
+
+    return {
+      data: result[0],
+      affectedRows: result.length,
+    };
+  }
+
+  /**
+   * PostgreSQL 타입 변환 (레거시 지원)
+   */
+  private convertValueForPostgreSQL(value: any, dataType: string): any {
+    if (value === null || value === undefined || value === "") {
+      return null;
+    }
+
+    const lowerDataType = dataType.toLowerCase();
+
+    // 숫자 타입 처리
+    if (
+      lowerDataType.includes("integer") ||
+      lowerDataType.includes("bigint") ||
+      lowerDataType.includes("serial")
+    ) {
+      return parseInt(value) || null;
+    }
+
+    if (
+      lowerDataType.includes("numeric") ||
+      lowerDataType.includes("decimal") ||
+      lowerDataType.includes("real") ||
+      lowerDataType.includes("double")
+    ) {
+      return parseFloat(value) || null;
+    }
+
+    // 불린 타입 처리
+    if (lowerDataType.includes("boolean")) {
+      if (typeof value === "boolean") return value;
+      if (typeof value === "string") {
+        return value.toLowerCase() === "true" || value === "1";
+      }
+      return Boolean(value);
+    }
+
+    // 날짜/시간 타입 처리
+    if (
+      lowerDataType.includes("timestamp") ||
+      lowerDataType.includes("datetime")
+    ) {
+      const date = new Date(value);
+      return isNaN(date.getTime()) ? null : date.toISOString();
+    }
+
+    if (lowerDataType.includes("date")) {
+      const date = new Date(value);
+      return isNaN(date.getTime()) ? null : date.toISOString().split("T")[0];
+    }
+
+    // JSON 타입 처리
+    if (lowerDataType.includes("json")) {
+      if (typeof value === "string") {
+        try {
+          JSON.parse(value);
+          return value;
+        } catch {
+          return JSON.stringify(value);
+        }
+      }
+      return JSON.stringify(value);
+    }
+
+    return String(value);
+  }
+
+  /**
+   * 오류 메시지 포맷팅
+   */
+  private formatValidationErrors(errors: FormValidationError[]): string {
+    if (errors.length === 0) return "알 수 없는 오류가 발생했습니다.";
+    if (errors.length === 1) return errors[0].message;
+
+    return `다음 오류들을 수정해주세요:\n• ${errors.map((e) => e.message).join("\n• ")}`;
+  }
+
+  /**
+   * 시스템 오류 메시지 포맷팅
+   */
+  private formatErrorMessage(error: any): string {
+    if (error.code === "23505") {
+      return "중복된 데이터가 이미 존재합니다.";
+    }
+
+    if (error.code === "23503") {
+      return "참조 무결성 제약조건을 위반했습니다.";
+    }
+
+    if (error.code === "23502") {
+      return "필수 입력 항목이 누락되었습니다.";
+    }
+
+    if (
+      error.message?.includes("relation") &&
+      error.message?.includes("does not exist")
+    ) {
+      return "지정된 테이블이 존재하지 않습니다.";
+    }
+
+    return `저장 중 오류가 발생했습니다: ${error.message || error}`;
+  }
+
+  /**
+   * 캐시 클리어
+   */
+  public clearCache(): void {
+    this.columnCache.clear();
+    this.webTypeCache.clear();
+    console.log("🧹 동적 폼 서비스 캐시가 클리어되었습니다.");
+  }
+
+  /**
+   * 테이블별 캐시 클리어
+   */
+  public clearTableCache(tableName: string): void {
+    this.columnCache.delete(tableName);
+    this.webTypeCache.delete(tableName);
+    console.log(`🧹 테이블 '${tableName}' 캐시가 클리어되었습니다.`);
+  }
+}
+
+// 싱글톤 인스턴스
+export const enhancedDynamicFormService = new EnhancedDynamicFormService();

backend-node/src/services/externalDbConnectionService.ts

@@ -239,13 +239,43 @@ export class ExternalDbConnectionService {
         }
       }
 
+      // 비밀번호가 변경되는 경우, 연결 테스트 먼저 수행
+      if (data.password && data.password !== "***ENCRYPTED***") {
+        // 임시 연결 설정으로 테스트
+        const testConfig = {
+          host: data.host || existingConnection.host,
+          port: data.port || existingConnection.port,
+          database: data.database_name || existingConnection.database_name,
+          user: data.username || existingConnection.username,
+          password: data.password, // 새로 입력된 비밀번호로 테스트
+          connectionTimeoutMillis: data.connection_timeout != null ? data.connection_timeout * 1000 : undefined,
+          queryTimeoutMillis: data.query_timeout != null ? data.query_timeout * 1000 : undefined,
+          ssl: (data.ssl_enabled || existingConnection.ssl_enabled) === "Y" ? { rejectUnauthorized: false } : false
+        };
+
+        // 연결 테스트 수행
+        const testResult = await DbConnectionManager.testConnection(
+          id,
+          existingConnection.db_type,
+          testConfig
+        );
+
+        if (!testResult.success) {
+          return {
+            success: false,
+            message: "새로운 연결 정보로 테스트에 실패했습니다. 수정할 수 없습니다.",
+            error: testResult.error ? `${testResult.error.code}: ${testResult.error.details}` : undefined
+          };
+        }
+      }
+
       // 업데이트 데이터 준비
       const updateData: any = {
         ...data,
         updated_date: new Date(),
       };
 
-      // 비밀번호가 변경된 경우 암호화
+      // 비밀번호가 변경된 경우 암호화 (연결 테스트 통과 후)
       if (data.password && data.password !== "***ENCRYPTED***") {
         updateData.password = PasswordEncryption.encrypt(data.password);
       } else {
@@ -320,7 +350,8 @@ export class ExternalDbConnectionService {
    * 데이터베이스 연결 테스트 (ID 기반)
    */
   static async testConnectionById(
-    id: number
+    id: number,
+    testData?: { password?: string }
   ): Promise<import("../types/externalDbTypes").ConnectionTestResult> {
     try {
       // 저장된 연결 정보 조회
@@ -339,9 +370,15 @@ export class ExternalDbConnectionService {
         };
       }
 
-      // 비밀번호 복호화
-      const decryptedPassword = await this.getDecryptedPassword(id);
-      if (!decryptedPassword) {
+      // 비밀번호 결정 (테스트용 비밀번호가 제공된 경우 그것을 사용, 아니면 저장된 비밀번호 복호화)
+      let password: string | null;
+      if (testData?.password) {
+        password = testData.password;
+      } else {
+        password = await this.getDecryptedPassword(id);
+      }
+
+      if (!password) {
         return {
           success: false,
           message: "비밀번호 복호화에 실패했습니다.",
@@ -358,7 +395,7 @@ export class ExternalDbConnectionService {
         port: connection.port,
         database: connection.database_name,
         user: connection.username,
-        password: decryptedPassword,
+        password: password,
         connectionTimeoutMillis: connection.connection_timeout != null ? connection.connection_timeout * 1000 : undefined,
         queryTimeoutMillis: connection.query_timeout != null ? connection.query_timeout * 1000 : undefined,
         ssl: connection.ssl_enabled === "Y" ? { rejectUnauthorized: false } : false

backend-node/src/services/inputTypeService.ts

@@ -0,0 +1,282 @@
+/**
+ * 입력 타입 처리 서비스
+ * VARCHAR 통일 방식에서 입력 타입별 형변환 및 검증 처리
+ */
+
+import { InputType } from "../types/input-types";
+import { logger } from "../utils/logger";
+
+export interface ValidationResult {
+  isValid: boolean;
+  message?: string;
+  convertedValue?: string;
+}
+
+export class InputTypeService {
+  /**
+   * 데이터 저장 전 형변환 (화면 입력값 → DB 저장값)
+   * 모든 값을 VARCHAR(500)에 저장하기 위해 문자열로 변환
+   */
+  static convertForStorage(value: any, inputType: InputType): string {
+    if (value === null || value === undefined) {
+      return "";
+    }
+
+    try {
+      switch (inputType) {
+        case "text":
+        case "select":
+        case "radio":
+          return String(value).trim();
+
+        case "number":
+          if (value === "" || value === null || value === undefined) {
+            return "0";
+          }
+          const num = parseFloat(String(value));
+          return isNaN(num) ? "0" : String(num);
+
+        case "date":
+          if (!value || value === "") {
+            return "";
+          }
+          const date = new Date(value);
+          if (isNaN(date.getTime())) {
+            logger.warn(`Invalid date value: ${value}`);
+            return "";
+          }
+          return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
+
+        case "checkbox":
+          // 다양한 형태의 true 값을 "Y"로, 나머지는 "N"으로 변환
+          const truthyValues = ["true", "1", "Y", "yes", "on", true, 1];
+          return truthyValues.includes(value) ? "Y" : "N";
+
+        case "code":
+        case "entity":
+          return String(value || "").trim();
+
+        default:
+          return String(value);
+      }
+    } catch (error) {
+      logger.error(`Error converting value for storage: ${error}`, {
+        value,
+        inputType,
+      });
+      return String(value || "");
+    }
+  }
+
+  /**
+   * 화면 표시용 형변환 (DB 저장값 → 화면 표시값)
+   * VARCHAR에서 읽어온 문자열을 적절한 타입으로 변환
+   */
+  static convertForDisplay(value: string, inputType: InputType): any {
+    if (!value && value !== "0") {
+      // 빈 값 처리
+      switch (inputType) {
+        case "number":
+          return 0;
+        case "checkbox":
+          return false;
+        default:
+          return "";
+      }
+    }
+
+    try {
+      switch (inputType) {
+        case "text":
+        case "select":
+        case "radio":
+        case "code":
+        case "entity":
+          return value;
+
+        case "number":
+          const num = parseFloat(value);
+          return isNaN(num) ? 0 : num;
+
+        case "date":
+          // YYYY-MM-DD 형식 그대로 반환 (HTML date input 호환)
+          return value;
+
+        case "checkbox":
+          return value === "Y" || value === "true" || value === "1";
+
+        default:
+          return value;
+      }
+    } catch (error) {
+      logger.error(`Error converting value for display: ${error}`, {
+        value,
+        inputType,
+      });
+      return value;
+    }
+  }
+
+  /**
+   * 입력값 검증
+   * 저장 전에 값이 해당 입력 타입에 적합한지 검증
+   */
+  static validate(value: any, inputType: InputType): ValidationResult {
+    // 빈 값은 일반적으로 허용 (필수 여부는 별도 검증)
+    if (!value && value !== 0 && value !== false) {
+      return {
+        isValid: true,
+        convertedValue: this.convertForStorage(value, inputType),
+      };
+    }
+
+    try {
+      switch (inputType) {
+        case "text":
+        case "select":
+        case "radio":
+        case "code":
+        case "entity":
+          const strValue = String(value).trim();
+          if (strValue.length > 500) {
+            return {
+              isValid: false,
+              message: "입력값이 너무 깁니다. (최대 500자)",
+            };
+          }
+          return {
+            isValid: true,
+            convertedValue: this.convertForStorage(value, inputType),
+          };
+
+        case "number":
+          const num = parseFloat(String(value));
+          if (isNaN(num)) {
+            return {
+              isValid: false,
+              message: "숫자 형식이 올바르지 않습니다.",
+            };
+          }
+          return {
+            isValid: true,
+            convertedValue: this.convertForStorage(value, inputType),
+          };
+
+        case "date":
+          if (!value) {
+            return { isValid: true, convertedValue: "" };
+          }
+          const date = new Date(value);
+          if (isNaN(date.getTime())) {
+            return {
+              isValid: false,
+              message: "날짜 형식이 올바르지 않습니다.",
+            };
+          }
+          return {
+            isValid: true,
+            convertedValue: this.convertForStorage(value, inputType),
+          };
+
+        case "checkbox":
+          // 체크박스는 모든 값을 허용 (Y/N으로 변환)
+          return {
+            isValid: true,
+            convertedValue: this.convertForStorage(value, inputType),
+          };
+
+        default:
+          return {
+            isValid: true,
+            convertedValue: this.convertForStorage(value, inputType),
+          };
+      }
+    } catch (error) {
+      logger.error(`Error validating value: ${error}`, { value, inputType });
+      return {
+        isValid: false,
+        message: "값 검증 중 오류가 발생했습니다.",
+      };
+    }
+  }
+
+  /**
+   * 배치 데이터 변환 (여러 필드를 한번에 처리)
+   */
+  static convertBatchForStorage(
+    data: Record<string, any>,
+    columnTypes: Record<string, InputType>
+  ): Record<string, string> {
+    const converted: Record<string, string> = {};
+
+    for (const [columnName, value] of Object.entries(data)) {
+      const inputType = columnTypes[columnName];
+      if (inputType) {
+        converted[columnName] = this.convertForStorage(value, inputType);
+      } else {
+        // 입력 타입이 정의되지 않은 경우 기본적으로 text로 처리
+        converted[columnName] = this.convertForStorage(value, "text");
+      }
+    }
+
+    return converted;
+  }
+
+  /**
+   * 배치 데이터 표시용 변환
+   */
+  static convertBatchForDisplay(
+    data: Record<string, string>,
+    columnTypes: Record<string, InputType>
+  ): Record<string, any> {
+    const converted: Record<string, any> = {};
+
+    for (const [columnName, value] of Object.entries(data)) {
+      const inputType = columnTypes[columnName];
+      if (inputType) {
+        converted[columnName] = this.convertForDisplay(value, inputType);
+      } else {
+        // 입력 타입이 정의되지 않은 경우 문자열 그대로 반환
+        converted[columnName] = value;
+      }
+    }
+
+    return converted;
+  }
+
+  /**
+   * 배치 데이터 검증
+   */
+  static validateBatch(
+    data: Record<string, any>,
+    columnTypes: Record<string, InputType>
+  ): {
+    isValid: boolean;
+    errors: Record<string, string>;
+    convertedData: Record<string, string>;
+  } {
+    const errors: Record<string, string> = {};
+    const convertedData: Record<string, string> = {};
+
+    for (const [columnName, value] of Object.entries(data)) {
+      const inputType = columnTypes[columnName];
+      if (inputType) {
+        const result = this.validate(value, inputType);
+        if (!result.isValid) {
+          errors[columnName] = result.message || "검증 실패";
+        } else {
+          convertedData[columnName] = result.convertedValue || "";
+        }
+      } else {
+        // 입력 타입이 정의되지 않은 경우 기본적으로 text로 처리
+        convertedData[columnName] = this.convertForStorage(value, "text");
+      }
+    }
+
+    return {
+      isValid: Object.keys(errors).length === 0,
+      errors,
+      convertedData,
+    };
+  }
+}

backend-node/src/services/screenManagementService.ts

@@ -1013,23 +1013,52 @@ export class ScreenManagementService {
    * 데이터 타입으로부터 웹타입 추론
    */
   private inferWebType(dataType: string): WebType {
+    // 통합 타입 매핑에서 import
+    const { DB_TYPE_TO_WEB_TYPE } = require("../types/unified-web-types");
+
     const lowerType = dataType.toLowerCase();
 
-    if (lowerType.includes("char") || lowerType.includes("text")) {
-      return "text";
-    } else if (
-      lowerType.includes("int") ||
-      lowerType.includes("numeric") ||
-      lowerType.includes("decimal")
-    ) {
+    // 정확한 매핑 우선 확인
+    if (DB_TYPE_TO_WEB_TYPE[lowerType]) {
+      return DB_TYPE_TO_WEB_TYPE[lowerType];
+    }
+
+    // 부분 문자열 매칭 (더 정교한 규칙)
+    for (const [dbType, webType] of Object.entries(DB_TYPE_TO_WEB_TYPE)) {
+      if (
+        lowerType.includes(dbType.toLowerCase()) ||
+        dbType.toLowerCase().includes(lowerType)
+      ) {
+        return webType as WebType;
+      }
+    }
+
+    // 추가 정밀 매핑
+    if (lowerType.includes("int") && !lowerType.includes("point")) {
       return "number";
-    } else if (lowerType.includes("date") || lowerType.includes("time")) {
+    } else if (lowerType.includes("numeric") || lowerType.includes("decimal")) {
+      return "decimal";
+    } else if (
+      lowerType.includes("timestamp") ||
+      lowerType.includes("datetime")
+    ) {
+      return "datetime";
+    } else if (lowerType.includes("date")) {
       return "date";
+    } else if (lowerType.includes("time")) {
+      return "datetime";
     } else if (lowerType.includes("bool")) {
       return "checkbox";
-    } else {
-      return "text";
+    } else if (
+      lowerType.includes("char") ||
+      lowerType.includes("text") ||
+      lowerType.includes("varchar")
+    ) {
+      return lowerType.includes("text") ? "textarea" : "text";
     }
+
+    // 기본값
+    return "text";
   }
 
   // ========================================

backend-node/src/services/tableManagementService.ts

@@ -10,6 +10,7 @@ import {
   EntityJoinResponse,
   EntityJoinConfig,
 } from "../types/tableManagement";
+import { WebType } from "../types/unified-web-types";
 import { entityJoinService } from "./entityJoinService";
 import { referenceCacheService } from "./referenceCacheService";
 
@@ -210,6 +211,11 @@ export class TableManagementService {
           : null,
         numericScale: column.numericScale ? Number(column.numericScale) : null,
         displayOrder: column.displayOrder ? Number(column.displayOrder) : null,
+        // 자동 매핑: webType이 기본값('text')인 경우 DB 타입에 따라 자동 추론
+        webType:
+          column.webType === "text"
+            ? this.inferWebType(column.dataType)
+            : column.webType,
       }));
 
       const totalPages = Math.ceil(total / size);
@@ -323,7 +329,7 @@ export class TableManagementService {
         },
         update: {
           column_label: settings.columnLabel,
-          web_type: settings.webType,
+          input_type: settings.inputType,
           detail_settings: settings.detailSettings,
           code_category: settings.codeCategory,
           code_value: settings.codeValue,
@@ -339,7 +345,7 @@ export class TableManagementService {
           table_name: tableName,
           column_name: columnName,
           column_label: settings.columnLabel,
-          web_type: settings.webType,
+          input_type: settings.inputType,
           detail_settings: settings.detailSettings,
           code_category: settings.codeCategory,
           code_value: settings.codeValue,
@@ -620,7 +626,123 @@ export class TableManagementService {
   }
 
   /**
-   * 웹 타입별 기본 상세 설정 생성
+   * 컬럼 입력 타입 설정 (새로운 시스템)
+   */
+  async updateColumnInputType(
+    tableName: string,
+    columnName: string,
+    inputType: string,
+    detailSettings?: Record<string, any>
+  ): Promise<void> {
+    try {
+      logger.info(
+        `컬럼 입력 타입 설정 시작: ${tableName}.${columnName} = ${inputType}`
+      );
+
+      // 입력 타입별 기본 상세 설정 생성
+      const defaultDetailSettings =
+        this.generateDefaultInputTypeSettings(inputType);
+
+      // 사용자 정의 설정과 기본 설정 병합
+      const finalDetailSettings = {
+        ...defaultDetailSettings,
+        ...detailSettings,
+      };
+
+      // table_type_columns 테이블에서 업데이트
+      await prisma.$executeRaw`
+        INSERT INTO table_type_columns (
+          table_name, column_name, input_type, detail_settings, 
+          is_nullable, display_order, created_date, updated_date
+        ) VALUES (
+          ${tableName}, ${columnName}, ${inputType}, ${JSON.stringify(finalDetailSettings)},
+          'Y', 0, now(), now()
+        )
+        ON CONFLICT (table_name, column_name) 
+        DO UPDATE SET 
+          input_type = ${inputType},
+          detail_settings = ${JSON.stringify(finalDetailSettings)},
+          updated_date = now();
+      `;
+
+      logger.info(
+        `컬럼 입력 타입 설정 완료: ${tableName}.${columnName} = ${inputType}`
+      );
+    } catch (error) {
+      logger.error(
+        `컬럼 입력 타입 설정 실패: ${tableName}.${columnName}`,
+        error
+      );
+      throw new Error(
+        `컬럼 입력 타입 설정 실패: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+
+  /**
+   * 입력 타입별 기본 상세 설정 생성
+   */
+  private generateDefaultInputTypeSettings(
+    inputType: string
+  ): Record<string, any> {
+    switch (inputType) {
+      case "text":
+        return {
+          maxLength: 500,
+          placeholder: "텍스트를 입력하세요",
+        };
+
+      case "number":
+        return {
+          min: 0,
+          step: 1,
+          placeholder: "숫자를 입력하세요",
+        };
+
+      case "date":
+        return {
+          format: "YYYY-MM-DD",
+          placeholder: "날짜를 선택하세요",
+        };
+
+      case "code":
+        return {
+          placeholder: "코드를 선택하세요",
+          searchable: true,
+        };
+
+      case "entity":
+        return {
+          placeholder: "항목을 선택하세요",
+          searchable: true,
+        };
+
+      case "select":
+        return {
+          placeholder: "선택하세요",
+          searchable: false,
+        };
+
+      case "checkbox":
+        return {
+          defaultChecked: false,
+          trueValue: "Y",
+          falseValue: "N",
+        };
+
+      case "radio":
+        return {
+          inline: false,
+        };
+
+      default:
+        return {};
+    }
+  }
+
+  /**
+   * 웹 타입별 기본 상세 설정 생성 (레거시 지원)
+   * @deprecated generateDefaultInputTypeSettings 사용 권장
    */
   private generateDefaultDetailSettings(webType: string): Record<string, any> {
     switch (webType) {
@@ -897,6 +1019,434 @@ export class TableManagementService {
     }
   }
 
+  /**
+   * 고급 검색 조건 구성
+   */
+  private async buildAdvancedSearchCondition(
+    tableName: string,
+    columnName: string,
+    value: any,
+    paramIndex: number
+  ): Promise<{
+    whereClause: string;
+    values: any[];
+    paramCount: number;
+  } | null> {
+    try {
+      // "__ALL__" 값이거나 빈 값이면 필터 조건을 적용하지 않음
+      if (
+        value === "__ALL__" ||
+        value === "" ||
+        value === null ||
+        value === undefined
+      ) {
+        return null;
+      }
+
+      // 컬럼 타입 정보 조회
+      const columnInfo = await this.getColumnWebTypeInfo(tableName, columnName);
+
+      if (!columnInfo) {
+        // 컬럼 정보가 없으면 기본 문자열 검색
+        return {
+          whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+          values: [`%${value}%`],
+          paramCount: 1,
+        };
+      }
+
+      const webType = columnInfo.webType;
+
+      // 웹타입별 검색 조건 구성
+      switch (webType) {
+        case "date":
+        case "datetime":
+          return this.buildDateRangeCondition(columnName, value, paramIndex);
+
+        case "number":
+        case "decimal":
+          return this.buildNumberRangeCondition(columnName, value, paramIndex);
+
+        case "code":
+          return await this.buildCodeSearchCondition(
+            tableName,
+            columnName,
+            value,
+            paramIndex
+          );
+
+        case "entity":
+          return await this.buildEntitySearchCondition(
+            tableName,
+            columnName,
+            value,
+            paramIndex
+          );
+
+        default:
+          // 기본 문자열 검색
+          return {
+            whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+            values: [`%${value}%`],
+            paramCount: 1,
+          };
+      }
+    } catch (error) {
+      logger.error(
+        `고급 검색 조건 구성 실패: ${tableName}.${columnName}`,
+        error
+      );
+      // 오류 시 기본 검색으로 폴백
+      return {
+        whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+        values: [`%${value}%`],
+        paramCount: 1,
+      };
+    }
+  }
+
+  /**
+   * 날짜 범위 검색 조건 구성
+   */
+  private buildDateRangeCondition(
+    columnName: string,
+    value: any,
+    paramIndex: number
+  ): {
+    whereClause: string;
+    values: any[];
+    paramCount: number;
+  } {
+    const conditions: string[] = [];
+    const values: any[] = [];
+    let paramCount = 0;
+
+    if (typeof value === "object" && value !== null) {
+      if (value.from) {
+        conditions.push(`${columnName} >= $${paramIndex + paramCount}`);
+        values.push(value.from);
+        paramCount++;
+      }
+      if (value.to) {
+        conditions.push(`${columnName} <= $${paramIndex + paramCount}`);
+        values.push(value.to);
+        paramCount++;
+      }
+    } else if (typeof value === "string" && value.trim() !== "") {
+      // 단일 날짜 검색 (해당 날짜의 데이터)
+      conditions.push(`DATE(${columnName}) = DATE($${paramIndex})`);
+      values.push(value);
+      paramCount = 1;
+    }
+
+    if (conditions.length === 0) {
+      return {
+        whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+        values: [`%${value}%`],
+        paramCount: 1,
+      };
+    }
+
+    return {
+      whereClause: `(${conditions.join(" AND ")})`,
+      values,
+      paramCount,
+    };
+  }
+
+  /**
+   * 숫자 범위 검색 조건 구성
+   */
+  private buildNumberRangeCondition(
+    columnName: string,
+    value: any,
+    paramIndex: number
+  ): {
+    whereClause: string;
+    values: any[];
+    paramCount: number;
+  } {
+    const conditions: string[] = [];
+    const values: any[] = [];
+    let paramCount = 0;
+
+    if (typeof value === "object" && value !== null) {
+      if (value.min !== undefined && value.min !== null && value.min !== "") {
+        conditions.push(
+          `${columnName}::numeric >= $${paramIndex + paramCount}`
+        );
+        values.push(parseFloat(value.min));
+        paramCount++;
+      }
+      if (value.max !== undefined && value.max !== null && value.max !== "") {
+        conditions.push(
+          `${columnName}::numeric <= $${paramIndex + paramCount}`
+        );
+        values.push(parseFloat(value.max));
+        paramCount++;
+      }
+    } else if (typeof value === "string" || typeof value === "number") {
+      // 정확한 값 검색
+      conditions.push(`${columnName}::numeric = $${paramIndex}`);
+      values.push(parseFloat(value.toString()));
+      paramCount = 1;
+    }
+
+    if (conditions.length === 0) {
+      return {
+        whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+        values: [`%${value}%`],
+        paramCount: 1,
+      };
+    }
+
+    return {
+      whereClause: `(${conditions.join(" AND ")})`,
+      values,
+      paramCount,
+    };
+  }
+
+  /**
+   * 코드 검색 조건 구성
+   */
+  private async buildCodeSearchCondition(
+    tableName: string,
+    columnName: string,
+    value: any,
+    paramIndex: number
+  ): Promise<{
+    whereClause: string;
+    values: any[];
+    paramCount: number;
+  }> {
+    try {
+      const codeTypeInfo = await this.getCodeTypeInfo(tableName, columnName);
+
+      if (!codeTypeInfo.isCodeType || !codeTypeInfo.codeCategory) {
+        // 코드 타입이 아니면 기본 검색
+        return {
+          whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+          values: [`%${value}%`],
+          paramCount: 1,
+        };
+      }
+
+      if (typeof value === "string" && value.trim() !== "") {
+        // 코드값 또는 코드명으로 검색
+        return {
+          whereClause: `(
+            ${columnName}::text = $${paramIndex} OR 
+            EXISTS (
+              SELECT 1 FROM code_info ci 
+              WHERE ci.code_category = $${paramIndex + 1}
+              AND ci.code_value = ${columnName} 
+              AND ci.code_name ILIKE $${paramIndex + 2}
+            )
+          )`,
+          values: [value, codeTypeInfo.codeCategory, `%${value}%`],
+          paramCount: 3,
+        };
+      } else {
+        // 정확한 코드값 매칭
+        return {
+          whereClause: `${columnName} = $${paramIndex}`,
+          values: [value],
+          paramCount: 1,
+        };
+      }
+    } catch (error) {
+      logger.error(
+        `코드 검색 조건 구성 실패: ${tableName}.${columnName}`,
+        error
+      );
+      return {
+        whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+        values: [`%${value}%`],
+        paramCount: 1,
+      };
+    }
+  }
+
+  /**
+   * 엔티티 검색 조건 구성
+   */
+  private async buildEntitySearchCondition(
+    tableName: string,
+    columnName: string,
+    value: any,
+    paramIndex: number
+  ): Promise<{
+    whereClause: string;
+    values: any[];
+    paramCount: number;
+  }> {
+    try {
+      const entityTypeInfo = await this.getEntityTypeInfo(
+        tableName,
+        columnName
+      );
+
+      if (!entityTypeInfo.isEntityType || !entityTypeInfo.referenceTable) {
+        // 엔티티 타입이 아니면 기본 검색
+        return {
+          whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+          values: [`%${value}%`],
+          paramCount: 1,
+        };
+      }
+
+      if (typeof value === "string" && value.trim() !== "") {
+        const displayColumn = entityTypeInfo.displayColumn || "name";
+        const referenceColumn = entityTypeInfo.referenceColumn || "id";
+
+        // 참조 테이블의 표시 컬럼으로 검색
+        return {
+          whereClause: `EXISTS (
+            SELECT 1 FROM ${entityTypeInfo.referenceTable} ref 
+            WHERE ref.${referenceColumn} = ${columnName} 
+            AND ref.${displayColumn} ILIKE $${paramIndex}
+          )`,
+          values: [`%${value}%`],
+          paramCount: 1,
+        };
+      } else {
+        // 정확한 참조값 매칭
+        return {
+          whereClause: `${columnName} = $${paramIndex}`,
+          values: [value],
+          paramCount: 1,
+        };
+      }
+    } catch (error) {
+      logger.error(
+        `엔티티 검색 조건 구성 실패: ${tableName}.${columnName}`,
+        error
+      );
+      return {
+        whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+        values: [`%${value}%`],
+        paramCount: 1,
+      };
+    }
+  }
+
+  /**
+   * 불린 검색 조건 구성
+   */
+  private buildBooleanCondition(
+    columnName: string,
+    value: any,
+    paramIndex: number
+  ): {
+    whereClause: string;
+    values: any[];
+    paramCount: number;
+  } {
+    if (value === "true" || value === true) {
+      return {
+        whereClause: `${columnName} = true`,
+        values: [],
+        paramCount: 0,
+      };
+    } else if (value === "false" || value === false) {
+      return {
+        whereClause: `${columnName} = false`,
+        values: [],
+        paramCount: 0,
+      };
+    } else {
+      // 기본 검색
+      return {
+        whereClause: `${columnName}::text ILIKE $${paramIndex}`,
+        values: [`%${value}%`],
+        paramCount: 1,
+      };
+    }
+  }
+
+  /**
+   * 컬럼 웹타입 정보 조회
+   */
+  private async getColumnWebTypeInfo(
+    tableName: string,
+    columnName: string
+  ): Promise<{
+    webType: string;
+    codeCategory?: string;
+    referenceTable?: string;
+    referenceColumn?: string;
+    displayColumn?: string;
+  } | null> {
+    try {
+      const result = await prisma.column_labels.findFirst({
+        where: {
+          table_name: tableName,
+          column_name: columnName,
+        },
+        select: {
+          web_type: true,
+          code_category: true,
+          reference_table: true,
+          reference_column: true,
+          display_column: true,
+        },
+      });
+
+      if (!result) {
+        return null;
+      }
+
+      return {
+        webType: result.web_type || "",
+        codeCategory: result.code_category || undefined,
+        referenceTable: result.reference_table || undefined,
+        referenceColumn: result.reference_column || undefined,
+        displayColumn: result.display_column || undefined,
+      };
+    } catch (error) {
+      logger.error(
+        `컬럼 웹타입 정보 조회 실패: ${tableName}.${columnName}`,
+        error
+      );
+      return null;
+    }
+  }
+
+  /**
+   * 엔티티 타입 정보 조회
+   */
+  private async getEntityTypeInfo(
+    tableName: string,
+    columnName: string
+  ): Promise<{
+    isEntityType: boolean;
+    referenceTable?: string;
+    referenceColumn?: string;
+    displayColumn?: string;
+  }> {
+    try {
+      const columnInfo = await this.getColumnWebTypeInfo(tableName, columnName);
+
+      if (!columnInfo || columnInfo.webType !== "entity") {
+        return { isEntityType: false };
+      }
+
+      return {
+        isEntityType: true,
+        referenceTable: columnInfo.referenceTable,
+        referenceColumn: columnInfo.referenceColumn,
+        displayColumn: columnInfo.displayColumn,
+      };
+    } catch (error) {
+      logger.error(
+        `엔티티 타입 정보 조회 실패: ${tableName}.${columnName}`,
+        error
+      );
+      return { isEntityType: false };
+    }
+  }
+
   /**
    * 테이블 데이터 조회 (페이징 + 검색)
    */
@@ -949,42 +1499,19 @@ export class TableManagementService {
             // 안전한 컬럼명 검증 (SQL 인젝션 방지)
             const safeColumn = column.replace(/[^a-zA-Z0-9_]/g, "");
 
-            if (typeof value === "string") {
-              // 🎯 코드 타입 컬럼의 경우 코드값과 코드명 모두로 검색
-              const codeTypeInfo = await this.getCodeTypeInfo(
-                tableName,
-                safeColumn
-              );
+            // 🎯 고급 필터 처리
+            const condition = await this.buildAdvancedSearchCondition(
+              tableName,
+              safeColumn,
+              value,
+              paramIndex
+            );
 
-              if (codeTypeInfo.isCodeType && codeTypeInfo.codeCategory) {
-                // 코드 타입 컬럼: 코드값 또는 코드명으로 검색
-                // 1) 컬럼 값이 직접 검색어와 일치하는 경우
-                // 2) 컬럼 값이 코드값이고, 해당 코드의 코드명이 검색어와 일치하는 경우
-                whereConditions.push(`(
-                  ${safeColumn}::text ILIKE $${paramIndex} OR 
-                  EXISTS (
-                    SELECT 1 FROM code_info ci 
-                    WHERE ci.code_category = $${paramIndex + 1}
-                    AND ci.code_value = ${safeColumn} 
-                    AND ci.code_name ILIKE $${paramIndex + 2}
-                  )
-                )`);
-                searchValues.push(`%${value}%`); // 직접 값 검색용
-                searchValues.push(codeTypeInfo.codeCategory); // 코드 카테고리
-                searchValues.push(`%${value}%`); // 코드명 검색용
-                paramIndex += 2; // 추가 파라미터로 인해 인덱스 증가
-              } else {
-                // 일반 컬럼: 기존 방식
-                whereConditions.push(
-                  `${safeColumn}::text ILIKE $${paramIndex}`
-                );
-                searchValues.push(`%${value}%`);
-              }
-            } else {
-              whereConditions.push(`${safeColumn} = $${paramIndex}`);
-              searchValues.push(value);
+            if (condition) {
+              whereConditions.push(condition.whereClause);
+              searchValues.push(...condition.values);
+              paramIndex += condition.paramCount;
             }
-            paramIndex++;
           }
         }
       }
@@ -1576,7 +2103,10 @@ export class TableManagementService {
       const selectColumns = columns.data.map((col: any) => col.column_name);
 
       // WHERE 절 구성
-      const whereClause = this.buildWhereClause(options.search);
+      const whereClause = await this.buildWhereClause(
+        tableName,
+        options.search
+      );
 
       // ORDER BY 절 구성
       const orderBy = options.sortBy
@@ -1939,21 +2469,77 @@ export class TableManagementService {
   }
 
   /**
-   * WHERE 절 구성
+   * WHERE 절 구성 (고급 검색 지원)
    */
-  private buildWhereClause(search?: Record<string, any>): string {
+  private async buildWhereClause(
+    tableName: string,
+    search?: Record<string, any>
+  ): Promise<string> {
     if (!search || Object.keys(search).length === 0) {
       return "";
     }
 
     const conditions: string[] = [];
 
-    for (const [key, value] of Object.entries(search)) {
-      if (value !== undefined && value !== null && value !== "") {
+    for (const [columnName, value] of Object.entries(search)) {
+      if (
+        value === undefined ||
+        value === null ||
+        value === "" ||
+        value === "__ALL__"
+      ) {
+        continue;
+      }
+
+      try {
+        // 고급 검색 조건 구성
+        const searchCondition = await this.buildAdvancedSearchCondition(
+          tableName,
+          columnName,
+          value,
+          1 // paramIndex는 실제로는 사용되지 않음 (직접 값 삽입)
+        );
+
+        if (searchCondition) {
+          // SQL 인젝션 방지를 위해 값을 직접 삽입하는 대신 안전한 방식 사용
+          let condition = searchCondition.whereClause;
+
+          // 파라미터를 실제 값으로 치환 (안전한 방식)
+          searchCondition.values.forEach((val, index) => {
+            const paramPlaceholder = `$${index + 1}`;
+            if (typeof val === "string") {
+              condition = condition.replace(
+                paramPlaceholder,
+                `'${val.replace(/'/g, "''")}'`
+              );
+            } else if (typeof val === "number") {
+              condition = condition.replace(paramPlaceholder, val.toString());
+            } else {
+              condition = condition.replace(
+                paramPlaceholder,
+                `'${String(val).replace(/'/g, "''")}'`
+              );
+            }
+          });
+
+          // main. 접두사 추가 (조인 쿼리용)
+          condition = condition.replace(
+            new RegExp(`\\b${columnName}\\b`, "g"),
+            `main.${columnName}`
+          );
+          conditions.push(condition);
+        }
+      } catch (error) {
+        logger.warn(`검색 조건 구성 실패: ${columnName}`, error);
+        // 폴백: 기본 문자열 검색
         if (typeof value === "string") {
-          conditions.push(`main.${key} ILIKE '%${value}%'`);
+          conditions.push(
+            `main.${columnName}::text ILIKE '%${value.replace(/'/g, "''")}%'`
+          );
         } else {
-          conditions.push(`main.${key} = '${value}'`);
+          conditions.push(
+            `main.${columnName} = '${String(value).replace(/'/g, "''")}'`
+          );
         }
       }
     }
@@ -2267,4 +2853,237 @@ export class TableManagementService {
 
     return totalHitRate / cacheableJoins.length;
   }
+
+  /**
+   * 테이블 스키마 정보 조회 (컬럼 존재 여부 검증용)
+   */
+  async getTableSchema(tableName: string): Promise<ColumnTypeInfo[]> {
+    try {
+      logger.info(`테이블 스키마 정보 조회: ${tableName}`);
+
+      const rawColumns = await prisma.$queryRaw<any[]>`
+        SELECT 
+          column_name as "columnName",
+          column_name as "displayName",
+          data_type as "dataType",
+          udt_name as "dbType",
+          is_nullable as "isNullable",
+          column_default as "defaultValue",
+          character_maximum_length as "maxLength",
+          numeric_precision as "numericPrecision",
+          numeric_scale as "numericScale",
+          CASE 
+            WHEN column_name IN (
+              SELECT column_name FROM information_schema.key_column_usage 
+              WHERE table_name = ${tableName} AND constraint_name LIKE '%_pkey'
+            ) THEN true 
+            ELSE false 
+          END as "isPrimaryKey"
+        FROM information_schema.columns
+        WHERE table_name = ${tableName} 
+          AND table_schema = 'public'
+        ORDER BY ordinal_position
+      `;
+
+      const columns: ColumnTypeInfo[] = rawColumns.map((col) => ({
+        tableName: tableName,
+        columnName: col.columnName,
+        displayName: col.displayName,
+        dataType: col.dataType,
+        dbType: col.dbType,
+        webType: "text", // 기본값
+        inputType: "direct",
+        detailSettings: "{}",
+        description: "", // 필수 필드 추가
+        isNullable: col.isNullable,
+        isPrimaryKey: col.isPrimaryKey,
+        defaultValue: col.defaultValue,
+        maxLength: col.maxLength ? Number(col.maxLength) : undefined,
+        numericPrecision: col.numericPrecision
+          ? Number(col.numericPrecision)
+          : undefined,
+        numericScale: col.numericScale ? Number(col.numericScale) : undefined,
+        displayOrder: 0,
+        isVisible: true,
+      }));
+
+      logger.info(
+        `테이블 스키마 조회 완료: ${tableName}, ${columns.length}개 컬럼`
+      );
+      return columns;
+    } catch (error) {
+      logger.error(`테이블 스키마 조회 실패: ${tableName}`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * 테이블 존재 여부 확인
+   */
+  async checkTableExists(tableName: string): Promise<boolean> {
+    try {
+      logger.info(`테이블 존재 여부 확인: ${tableName}`);
+
+      const result = await prisma.$queryRaw<any[]>`
+        SELECT EXISTS (
+          SELECT 1 FROM information_schema.tables 
+          WHERE table_name = ${tableName} 
+            AND table_schema = 'public'
+            AND table_type = 'BASE TABLE'
+        ) as "exists"
+      `;
+
+      const exists = result[0]?.exists || false;
+      logger.info(`테이블 존재 여부: ${tableName} = ${exists}`);
+      return exists;
+    } catch (error) {
+      logger.error(`테이블 존재 여부 확인 실패: ${tableName}`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * 컬럼 입력타입 정보 조회 (화면관리 연동용)
+   */
+  async getColumnInputTypes(tableName: string): Promise<ColumnTypeInfo[]> {
+    try {
+      logger.info(`컬럼 입력타입 정보 조회: ${tableName}`);
+
+      // table_type_columns에서 입력타입 정보 조회
+      const rawInputTypes = await prisma.$queryRaw<any[]>`
+        SELECT 
+          ttc.column_name as "columnName",
+          ttc.column_name as "displayName",
+          COALESCE(ttc.input_type, 'text') as "inputType",
+          COALESCE(ttc.detail_settings, '{}') as "detailSettings",
+          ttc.is_nullable as "isNullable",
+          ic.data_type as "dataType"
+        FROM table_type_columns ttc
+        LEFT JOIN information_schema.columns ic 
+          ON ttc.table_name = ic.table_name AND ttc.column_name = ic.column_name
+        WHERE ttc.table_name = ${tableName}
+        ORDER BY ttc.display_order, ttc.column_name
+      `;
+
+      const inputTypes: ColumnTypeInfo[] = rawInputTypes.map((col) => ({
+        tableName: tableName,
+        columnName: col.columnName,
+        displayName: col.displayName,
+        dataType: col.dataType || "varchar",
+        inputType: col.inputType,
+        detailSettings: col.detailSettings,
+        description: "", // 필수 필드 추가
+        isNullable: col.isNullable,
+        isPrimaryKey: false,
+        displayOrder: 0,
+        isVisible: true,
+      }));
+
+      logger.info(
+        `컬럼 입력타입 정보 조회 완료: ${tableName}, ${inputTypes.length}개 컬럼`
+      );
+      return inputTypes;
+    } catch (error) {
+      logger.error(`컬럼 입력타입 정보 조회 실패: ${tableName}`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * 레거시 지원: 컬럼 웹타입 정보 조회
+   * @deprecated getColumnInputTypes 사용 권장
+   */
+  async getColumnWebTypes(tableName: string): Promise<ColumnTypeInfo[]> {
+    logger.warn(
+      `레거시 메서드 사용: getColumnWebTypes → getColumnInputTypes 사용 권장`
+    );
+    return this.getColumnInputTypes(tableName);
+  }
+
+  /**
+   * 데이터베이스 연결 상태 확인
+   */
+  async checkDatabaseConnection(): Promise<{
+    connected: boolean;
+    message: string;
+  }> {
+    try {
+      logger.info("데이터베이스 연결 상태 확인");
+
+      // 간단한 쿼리로 연결 테스트
+      const result = await prisma.$queryRaw<any[]>`SELECT 1 as "test"`;
+
+      if (result && result.length > 0) {
+        logger.info("데이터베이스 연결 성공");
+        return {
+          connected: true,
+          message: "데이터베이스에 성공적으로 연결되었습니다.",
+        };
+      } else {
+        logger.warn("데이터베이스 연결 응답 없음");
+        return {
+          connected: false,
+          message: "데이터베이스 연결 응답이 없습니다.",
+        };
+      }
+    } catch (error) {
+      logger.error("데이터베이스 연결 확인 실패:", error);
+      return {
+        connected: false,
+        message: `데이터베이스 연결 실패: ${error instanceof Error ? error.message : "알 수 없는 오류"}`,
+      };
+    }
+  }
+
+  /**
+   * 데이터 타입으로부터 웹타입 추론
+   */
+  private inferWebType(dataType: string): WebType {
+    // 통합 타입 매핑에서 import
+    const { DB_TYPE_TO_WEB_TYPE } = require("../types/unified-web-types");
+
+    const lowerType = dataType.toLowerCase();
+
+    // 정확한 매핑 우선 확인
+    if (DB_TYPE_TO_WEB_TYPE[lowerType]) {
+      return DB_TYPE_TO_WEB_TYPE[lowerType];
+    }
+
+    // 부분 문자열 매칭 (더 정교한 규칙)
+    for (const [dbType, webType] of Object.entries(DB_TYPE_TO_WEB_TYPE)) {
+      if (
+        lowerType.includes(dbType.toLowerCase()) ||
+        dbType.toLowerCase().includes(lowerType)
+      ) {
+        return webType as WebType;
+      }
+    }
+
+    // 추가 정밀 매핑
+    if (lowerType.includes("int") && !lowerType.includes("point")) {
+      return "number";
+    } else if (lowerType.includes("numeric") || lowerType.includes("decimal")) {
+      return "decimal";
+    } else if (
+      lowerType.includes("timestamp") ||
+      lowerType.includes("datetime")
+    ) {
+      return "datetime";
+    } else if (lowerType.includes("date")) {
+      return "date";
+    } else if (lowerType.includes("time")) {
+      return "datetime";
+    } else if (lowerType.includes("bool")) {
+      return "checkbox";
+    } else if (
+      lowerType.includes("char") ||
+      lowerType.includes("text") ||
+      lowerType.includes("varchar")
+    ) {
+      return lowerType.includes("text") ? "textarea" : "text";
+    }
+
+    // 기본값
+    return "text";
+  }
 }

backend-node/src/types/ddl.ts

@@ -0,0 +1,316 @@
+/**
+ * DDL 실행 관련 타입 정의
+ */
+
+// 기본 웹타입
+export type WebType =
+  | "text"
+  | "number"
+  | "decimal"
+  | "date"
+  | "datetime"
+  | "boolean"
+  | "code"
+  | "entity"
+  | "textarea"
+  | "select"
+  | "checkbox"
+  | "radio"
+  | "file"
+  | "email"
+  | "tel";
+
+// 컬럼 정의 인터페이스
+export interface CreateColumnDefinition {
+  /** 컬럼명 (영문자, 숫자, 언더스코어만 허용) */
+  name: string;
+  /** 컬럼 라벨 (화면 표시용) */
+  label?: string;
+  /** 입력타입 */
+  inputType?: string;
+  /** 웹타입 (레거시 호환용) */
+  webType?: WebType;
+  /** NULL 허용 여부 */
+  nullable?: boolean;
+  /** 컬럼 길이 (text, code 타입에서 사용) */
+  length?: number;
+  /** 기본값 */
+  defaultValue?: string;
+  /** 컬럼 설명 */
+  description?: string;
+  /** 표시 순서 */
+  order?: number;
+  /** 상세 설정 (JSON 형태) */
+  detailSettings?: Record<string, any>;
+}
+
+// 테이블 생성 요청 인터페이스
+export interface CreateTableRequest {
+  /** 테이블명 */
+  tableName: string;
+  /** 테이블 설명 */
+  description?: string;
+  /** 컬럼 정의 목록 */
+  columns: CreateColumnDefinition[];
+}
+
+// 컬럼 추가 요청 인터페이스
+export interface AddColumnRequest {
+  /** 컬럼 정의 */
+  column: CreateColumnDefinition;
+}
+
+// DDL 실행 결과 인터페이스
+export interface DDLExecutionResult {
+  /** 실행 성공 여부 */
+  success: boolean;
+  /** 결과 메시지 */
+  message: string;
+  /** 실행된 DDL 쿼리 */
+  executedQuery?: string;
+  /** 오류 정보 */
+  error?: {
+    code: string;
+    details: string;
+  };
+}
+
+// 검증 결과 인터페이스
+export interface ValidationResult {
+  /** 검증 통과 여부 */
+  isValid: boolean;
+  /** 오류 메시지 목록 */
+  errors: string[];
+  /** 경고 메시지 목록 */
+  warnings?: string[];
+}
+
+// DDL 실행 로그 인터페이스
+export interface DDLExecutionLog {
+  /** 로그 ID */
+  id: number;
+  /** 사용자 ID */
+  user_id: string;
+  /** 회사 코드 */
+  company_code: string;
+  /** DDL 유형 */
+  ddl_type: "CREATE_TABLE" | "ADD_COLUMN" | "DROP_TABLE" | "DROP_COLUMN";
+  /** 테이블명 */
+  table_name: string;
+  /** 실행된 DDL 쿼리 */
+  ddl_query: string;
+  /** 실행 성공 여부 */
+  success: boolean;
+  /** 오류 메시지 (실패 시) */
+  error_message?: string;
+  /** 실행 시간 */
+  executed_at: Date;
+}
+
+// PostgreSQL 타입 매핑
+export interface PostgreSQLTypeMapping {
+  /** 웹타입 */
+  webType: WebType;
+  /** PostgreSQL 데이터 타입 */
+  postgresType: string;
+  /** 기본 길이 (있는 경우) */
+  defaultLength?: number;
+  /** 길이 지정 가능 여부 */
+  supportsLength: boolean;
+}
+
+// 테이블 메타데이터 인터페이스
+export interface TableMetadata {
+  /** 테이블명 */
+  tableName: string;
+  /** 테이블 라벨 */
+  tableLabel: string;
+  /** 테이블 설명 */
+  description?: string;
+  /** 생성 일시 */
+  createdDate: Date;
+  /** 수정 일시 */
+  updatedDate: Date;
+}
+
+// 컬럼 메타데이터 인터페이스
+export interface ColumnMetadata {
+  /** 테이블명 */
+  tableName: string;
+  /** 컬럼명 */
+  columnName: string;
+  /** 컬럼 라벨 */
+  columnLabel: string;
+  /** 웹타입 */
+  webType: WebType;
+  /** 상세 설정 (JSON 문자열) */
+  detailSettings: string;
+  /** 컬럼 설명 */
+  description?: string;
+  /** 표시 순서 */
+  displayOrder: number;
+  /** 표시 여부 */
+  isVisible: boolean;
+  /** 코드 카테고리 (code 타입용) */
+  codeCategory?: string;
+  /** 코드 값 (code 타입용) */
+  codeValue?: string;
+  /** 참조 테이블 (entity 타입용) */
+  referenceTable?: string;
+  /** 참조 컬럼 (entity 타입용) */
+  referenceColumn?: string;
+  /** 생성 일시 */
+  createdDate: Date;
+  /** 수정 일시 */
+  updatedDate: Date;
+}
+
+// 시스템 테이블 목록 (보호 대상)
+export const SYSTEM_TABLES = [
+  "user_info",
+  "company_mng",
+  "menu_info",
+  "auth_group",
+  "table_labels",
+  "column_labels",
+  "screen_definitions",
+  "screen_layouts",
+  "common_code",
+  "multi_lang_key_master",
+  "multi_lang_text",
+  "button_action_standards",
+  "ddl_execution_log",
+] as const;
+
+// 예약어 목록
+export const RESERVED_WORDS = [
+  "user",
+  "order",
+  "group",
+  "table",
+  "column",
+  "index",
+  "select",
+  "insert",
+  "update",
+  "delete",
+  "from",
+  "where",
+  "join",
+  "on",
+  "as",
+  "and",
+  "or",
+  "not",
+  "null",
+  "true",
+  "false",
+  "create",
+  "alter",
+  "drop",
+  "primary",
+  "key",
+  "foreign",
+  "references",
+  "constraint",
+  "default",
+  "unique",
+  "check",
+  "view",
+  "procedure",
+  "function",
+] as const;
+
+// 예약된 컬럼명 목록 (자동 추가되는 기본 컬럼들)
+export const RESERVED_COLUMNS = [
+  "id",
+  "created_date",
+  "updated_date",
+  "company_code",
+] as const;
+
+// 웹타입별 PostgreSQL 타입 매핑
+export const WEB_TYPE_TO_POSTGRES_MAP: Record<WebType, PostgreSQLTypeMapping> =
+  {
+    text: {
+      webType: "text",
+      postgresType: "varchar",
+      defaultLength: 255,
+      supportsLength: true,
+    },
+    number: {
+      webType: "number",
+      postgresType: "integer",
+      supportsLength: false,
+    },
+    decimal: {
+      webType: "decimal",
+      postgresType: "numeric(10,2)",
+      supportsLength: false,
+    },
+    date: {
+      webType: "date",
+      postgresType: "date",
+      supportsLength: false,
+    },
+    datetime: {
+      webType: "datetime",
+      postgresType: "timestamp",
+      supportsLength: false,
+    },
+    boolean: {
+      webType: "boolean",
+      postgresType: "boolean",
+      supportsLength: false,
+    },
+    code: {
+      webType: "code",
+      postgresType: "varchar",
+      defaultLength: 100,
+      supportsLength: true,
+    },
+    entity: {
+      webType: "entity",
+      postgresType: "integer",
+      supportsLength: false,
+    },
+    textarea: {
+      webType: "textarea",
+      postgresType: "text",
+      supportsLength: false,
+    },
+    select: {
+      webType: "select",
+      postgresType: "varchar",
+      defaultLength: 100,
+      supportsLength: true,
+    },
+    checkbox: {
+      webType: "checkbox",
+      postgresType: "boolean",
+      supportsLength: false,
+    },
+    radio: {
+      webType: "radio",
+      postgresType: "varchar",
+      defaultLength: 100,
+      supportsLength: true,
+    },
+    file: {
+      webType: "file",
+      postgresType: "text",
+      supportsLength: false,
+    },
+    email: {
+      webType: "email",
+      postgresType: "varchar",
+      defaultLength: 255,
+      supportsLength: true,
+    },
+    tel: {
+      webType: "tel",
+      postgresType: "varchar",
+      defaultLength: 50,
+      supportsLength: true,
+    },
+  };

backend-node/src/types/input-types.ts

@@ -0,0 +1,115 @@
+/**
+ * 백엔드 입력 타입 정의 (테이블 타입 관리 개선)
+ * 프론트엔드와 동일한 8개 핵심 입력 타입 정의
+ */
+
+// 8개 핵심 입력 타입 (프론트엔드와 동일)
+export type InputType =
+  | "text" // 텍스트
+  | "number" // 숫자
+  | "date" // 날짜
+  | "code" // 코드
+  | "entity" // 엔티티
+  | "select" // 선택박스
+  | "checkbox" // 체크박스
+  | "radio"; // 라디오버튼
+
+// 입력 타입 옵션 정의
+export interface InputTypeOption {
+  value: InputType;
+  label: string;
+  description: string;
+  category: "basic" | "reference" | "selection";
+}
+
+// 입력 타입 옵션 목록
+export const INPUT_TYPE_OPTIONS: InputTypeOption[] = [
+  {
+    value: "text",
+    label: "텍스트",
+    description: "일반 텍스트 입력",
+    category: "basic",
+  },
+  {
+    value: "number",
+    label: "숫자",
+    description: "숫자 입력 (정수/소수)",
+    category: "basic",
+  },
+  { value: "date", label: "날짜", description: "날짜 선택", category: "basic" },
+  {
+    value: "code",
+    label: "코드",
+    description: "공통코드 참조",
+    category: "reference",
+  },
+  {
+    value: "entity",
+    label: "엔티티",
+    description: "다른 테이블 참조",
+    category: "reference",
+  },
+  {
+    value: "select",
+    label: "선택박스",
+    description: "드롭다운 선택",
+    category: "selection",
+  },
+  {
+    value: "checkbox",
+    label: "체크박스",
+    description: "체크박스 입력",
+    category: "selection",
+  },
+  {
+    value: "radio",
+    label: "라디오버튼",
+    description: "단일 선택",
+    category: "selection",
+  },
+];
+
+// 입력 타입 검증 함수
+export const isValidInputType = (inputType: string): inputType is InputType => {
+  return INPUT_TYPE_OPTIONS.some((option) => option.value === inputType);
+};
+
+// 레거시 웹 타입 → 입력 타입 매핑
+export const WEB_TYPE_TO_INPUT_TYPE: Record<string, InputType> = {
+  // 텍스트 관련
+  text: "text",
+  textarea: "text",
+  email: "text",
+  tel: "text",
+  url: "text",
+  password: "text",
+
+  // 숫자 관련
+  number: "number",
+  decimal: "number",
+
+  // 날짜 관련
+  date: "date",
+  datetime: "date",
+  time: "date",
+
+  // 선택 관련
+  select: "select",
+  dropdown: "select",
+  checkbox: "checkbox",
+  boolean: "checkbox",
+  radio: "radio",
+
+  // 참조 관련
+  code: "code",
+  entity: "entity",
+
+  // 기타 (기본값: text)
+  file: "text",
+  button: "text",
+};
+
+// 입력 타입 변환 함수
+export const convertWebTypeToInputType = (webType: string): InputType => {
+  return WEB_TYPE_TO_INPUT_TYPE[webType] || "text";
+};

backend-node/src/types/screen.ts

@@ -4,17 +4,8 @@
 export type ComponentType = "container" | "row" | "column" | "widget" | "group";
 
 // 웹 타입 정의
-export type WebType =
-  | "text"
-  | "number"
-  | "date"
-  | "code"
-  | "entity"
-  | "textarea"
-  | "select"
-  | "checkbox"
-  | "radio"
-  | "file";
+// WebType은 통합 타입에서 import (중복 정의 제거)
+export { WebType } from "./unified-web-types";
 
 // 위치 정보
 export interface Position {

backend-node/src/types/tableManagement.ts

@@ -8,16 +8,15 @@ export interface TableInfo {
 }
 
 export interface ColumnTypeInfo {
+  tableName?: string;
   columnName: string;
   displayName: string;
-  dataType: string; // 추가: 데이터 타입 (dbType과 동일하지만 별도 필드)
-  dbType: string;
-  webType: string;
-  inputType?: "direct" | "auto";
+  dataType: string; // DB 데이터 타입 (varchar, integer 등)
+  inputType: string; // 입력 타입 (text, number, date, code, entity, select, checkbox, radio)
   detailSettings: string;
   description: string;
   isNullable: string;
-  isPrimaryKey: boolean; // 추가: 기본키 여부
+  isPrimaryKey: boolean;
   defaultValue?: string;
   maxLength?: number;
   numericPrecision?: number;
@@ -34,7 +33,7 @@ export interface ColumnTypeInfo {
 export interface ColumnSettings {
   columnName?: string; // 컬럼명 (업데이트 시 필요)
   columnLabel: string; // 컬럼 표시명
-  webType: string; // 웹 입력 타입 (text, number, date, code, entity)
+  inputType: string; // 입력 타입 (text, number, date, code, entity, select, checkbox, radio)
   detailSettings: string; // 상세 설정
   codeCategory: string; // 코드 카테고리
   codeValue: string; // 코드 값

backend-node/src/types/unified-web-types.ts

@@ -0,0 +1,406 @@
+/**
+ * 백엔드 통합 웹 타입 정의
+ * 프론트엔드와 동일한 웹 타입 정의 유지
+ */
+
+// 기본 웹 타입 (프론트엔드와 동일)
+export type BaseWebType =
+  | "text" // 일반 텍스트
+  | "number" // 숫자 (정수)
+  | "decimal" // 소수점 숫자
+  | "date" // 날짜
+  | "datetime" // 날짜시간
+  | "time" // 시간
+  | "textarea" // 여러줄 텍스트
+  | "select" // 선택박스
+  | "dropdown" // 드롭다운 (select와 동일)
+  | "checkbox" // 체크박스
+  | "radio" // 라디오버튼
+  | "boolean" // 불린값
+  | "file" // 파일 업로드
+  | "email" // 이메일
+  | "tel" // 전화번호
+  | "url" // URL
+  | "password" // 패스워드
+  | "code" // 공통코드 참조
+  | "entity" // 엔티티 참조
+  | "button"; // 버튼
+
+// 레거시 지원용
+export type LegacyWebType = "text_area"; // textarea와 동일
+
+// 전체 웹 타입
+export type WebType = BaseWebType | LegacyWebType;
+
+// 동적 웹 타입 (런타임에 DB에서 로드되는 타입 포함)
+export type DynamicWebType = WebType | string;
+
+// 웹 타입 매핑 (레거시 지원)
+export const WEB_TYPE_MAPPINGS: Record<LegacyWebType, BaseWebType> = {
+  text_area: "textarea",
+};
+
+// 웹 타입 정규화 함수
+export const normalizeWebType = (webType: DynamicWebType): WebType => {
+  if (webType in WEB_TYPE_MAPPINGS) {
+    return WEB_TYPE_MAPPINGS[webType as LegacyWebType];
+  }
+  return webType as WebType;
+};
+
+// 웹 타입 검증 함수
+export const isValidWebType = (webType: string): webType is WebType => {
+  return (
+    [
+      "text",
+      "number",
+      "decimal",
+      "date",
+      "datetime",
+      "time",
+      "textarea",
+      "select",
+      "dropdown",
+      "checkbox",
+      "radio",
+      "boolean",
+      "file",
+      "email",
+      "tel",
+      "url",
+      "password",
+      "code",
+      "entity",
+      "button",
+      "text_area", // 레거시 지원
+    ] as string[]
+  ).includes(webType);
+};
+
+// DB 타입과 웹 타입 매핑
+export const DB_TYPE_TO_WEB_TYPE: Record<string, WebType> = {
+  // 텍스트 타입
+  "character varying": "text",
+  varchar: "text",
+  text: "textarea",
+  char: "text",
+
+  // 숫자 타입
+  integer: "number",
+  bigint: "number",
+  smallint: "number",
+  serial: "number",
+  bigserial: "number",
+  numeric: "decimal",
+  decimal: "decimal",
+  real: "decimal",
+  "double precision": "decimal",
+
+  // 날짜/시간 타입
+  date: "date",
+  timestamp: "datetime",
+  "timestamp with time zone": "datetime",
+  "timestamp without time zone": "datetime",
+  time: "time",
+  "time with time zone": "time",
+  "time without time zone": "time",
+
+  // 불린 타입
+  boolean: "boolean",
+
+  // JSON 타입 (텍스트로 처리)
+  json: "textarea",
+  jsonb: "textarea",
+
+  // 배열 타입 (텍스트로 처리)
+  ARRAY: "textarea",
+
+  // UUID 타입
+  uuid: "text",
+};
+
+// 웹 타입별 PostgreSQL 타입 변환 규칙
+export const WEB_TYPE_TO_POSTGRES_CONVERTER: Record<
+  WebType,
+  (value: any) => any
+> = {
+  text: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  number: (value) => {
+    if (value === null || value === undefined || value === "") return null;
+    const num = parseInt(String(value));
+    return isNaN(num) ? null : num;
+  },
+
+  decimal: (value) => {
+    if (value === null || value === undefined || value === "") return null;
+    const num = parseFloat(String(value));
+    return isNaN(num) ? null : num;
+  },
+
+  date: (value) => {
+    if (value === null || value === undefined || value === "") return null;
+    const date = new Date(value);
+    return isNaN(date.getTime()) ? null : date.toISOString().split("T")[0];
+  },
+
+  datetime: (value) => {
+    if (value === null || value === undefined || value === "") return null;
+    const date = new Date(value);
+    return isNaN(date.getTime()) ? null : date.toISOString();
+  },
+
+  time: (value) => {
+    if (value === null || value === undefined || value === "") return null;
+    // 시간 형식 처리 (HH:mm:ss)
+    return String(value);
+  },
+
+  textarea: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  select: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  dropdown: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  checkbox: (value) => {
+    if (value === null || value === undefined) return false;
+    if (typeof value === "boolean") return value;
+    if (typeof value === "string") {
+      return value.toLowerCase() === "true" || value === "1" || value === "Y";
+    }
+    return Boolean(value);
+  },
+
+  radio: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  boolean: (value) => {
+    if (value === null || value === undefined) return null;
+    if (typeof value === "boolean") return value;
+    if (typeof value === "string") {
+      return value.toLowerCase() === "true" || value === "1" || value === "Y";
+    }
+    return Boolean(value);
+  },
+
+  file: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  email: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  tel: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  url: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  password: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  code: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  entity: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+
+  button: (value) => null, // 버튼은 저장하지 않음
+
+  // 레거시 지원
+  text_area: (value) =>
+    value === null || value === undefined || value === ""
+      ? null
+      : String(value),
+};
+
+// 웹 타입별 검증 규칙
+export const WEB_TYPE_VALIDATION_PATTERNS: Record<WebType, RegExp | null> = {
+  text: null,
+  number: /^-?\d+$/,
+  decimal: /^-?\d+(\.\d+)?$/,
+  date: /^\d{4}-\d{2}-\d{2}$/,
+  datetime: /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/,
+  time: /^\d{2}:\d{2}(:\d{2})?$/,
+  textarea: null,
+  select: null,
+  dropdown: null,
+  checkbox: null,
+  radio: null,
+  boolean: null,
+  file: null,
+  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  tel: /^(\d{2,3}-?\d{3,4}-?\d{4}|\d{10,11})$/,
+  url: /^https?:\/\/.+/,
+  password: null,
+  code: null,
+  entity: null,
+  button: null,
+  text_area: null, // 레거시 지원
+};
+
+// 업데이트된 웹 타입 옵션 (기존 WEB_TYPE_OPTIONS 대체)
+export const UNIFIED_WEB_TYPE_OPTIONS = [
+  {
+    value: "text",
+    label: "text",
+    description: "일반 텍스트 입력",
+    category: "input",
+  },
+  {
+    value: "number",
+    label: "number",
+    description: "숫자 입력 (정수)",
+    category: "input",
+  },
+  {
+    value: "decimal",
+    label: "decimal",
+    description: "소수점 숫자 입력",
+    category: "input",
+  },
+  {
+    value: "date",
+    label: "date",
+    description: "날짜 선택기",
+    category: "input",
+  },
+  {
+    value: "datetime",
+    label: "datetime",
+    description: "날짜시간 선택기",
+    category: "input",
+  },
+  {
+    value: "time",
+    label: "time",
+    description: "시간 선택기",
+    category: "input",
+  },
+  {
+    value: "textarea",
+    label: "textarea",
+    description: "여러 줄 텍스트",
+    category: "input",
+  },
+  {
+    value: "select",
+    label: "select",
+    description: "선택박스",
+    category: "selection",
+  },
+  {
+    value: "dropdown",
+    label: "dropdown",
+    description: "드롭다운",
+    category: "selection",
+  },
+  {
+    value: "checkbox",
+    label: "checkbox",
+    description: "체크박스",
+    category: "selection",
+  },
+  {
+    value: "radio",
+    label: "radio",
+    description: "라디오 버튼",
+    category: "selection",
+  },
+  {
+    value: "boolean",
+    label: "boolean",
+    description: "불린값 (예/아니오)",
+    category: "selection",
+  },
+  {
+    value: "file",
+    label: "file",
+    description: "파일 업로드",
+    category: "upload",
+  },
+  {
+    value: "email",
+    label: "email",
+    description: "이메일 주소",
+    category: "input",
+  },
+  { value: "tel", label: "tel", description: "전화번호", category: "input" },
+  {
+    value: "url",
+    label: "url",
+    description: "웹사이트 주소",
+    category: "input",
+  },
+  {
+    value: "password",
+    label: "password",
+    description: "비밀번호",
+    category: "input",
+  },
+  {
+    value: "code",
+    label: "code",
+    description: "코드 선택 (공통코드)",
+    category: "reference",
+  },
+  {
+    value: "entity",
+    label: "entity",
+    description: "엔티티 참조 (참조테이블)",
+    category: "reference",
+  },
+  { value: "button", label: "button", description: "버튼", category: "action" },
+] as const;
+
+// 웹 타입별 기본 설정
+export const WEB_TYPE_DEFAULT_CONFIGS: Record<WebType, Record<string, any>> = {
+  text: { maxLength: 255, placeholder: "텍스트를 입력하세요" },
+  number: { min: 0, max: 2147483647, step: 1 },
+  decimal: { min: 0, step: 0.01, decimalPlaces: 2 },
+  date: { format: "YYYY-MM-DD" },
+  datetime: { format: "YYYY-MM-DD HH:mm:ss", showTime: true },
+  time: { format: "HH:mm:ss" },
+  textarea: { rows: 4, cols: 50, maxLength: 1000 },
+  select: { placeholder: "선택하세요", searchable: false },
+  dropdown: { placeholder: "선택하세요", searchable: true },
+  checkbox: { defaultChecked: false },
+  radio: { inline: false },
+  boolean: { trueValue: true, falseValue: false },
+  file: { multiple: false, preview: true },
+  email: { placeholder: "이메일을 입력하세요" },
+  tel: { placeholder: "전화번호를 입력하세요" },
+  url: { placeholder: "URL을 입력하세요" },
+  password: { placeholder: "비밀번호를 입력하세요" },
+  code: { placeholder: "코드를 선택하세요", searchable: true },
+  entity: { placeholder: "항목을 선택하세요", searchable: true },
+  button: { variant: "default" },
+  text_area: { rows: 4, cols: 50, maxLength: 1000 }, // 레거시 지원
+};

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

@@ -7,14 +7,19 @@ import { Button } from "@/components/ui/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Search, Database, RefreshCw, Settings, Menu, X } from "lucide-react";
+import { Search, Database, RefreshCw, Settings, Menu, X, Plus, Activity } from "lucide-react";
 import { LoadingSpinner } from "@/components/common/LoadingSpinner";
 import { toast } from "sonner";
 import { useMultiLang } from "@/hooks/useMultiLang";
-import { TABLE_MANAGEMENT_KEYS, WEB_TYPE_OPTIONS_WITH_KEYS } from "@/constants/tableManagement";
+import { useAuth } from "@/hooks/useAuth";
+import { TABLE_MANAGEMENT_KEYS } from "@/constants/tableManagement";
+import { INPUT_TYPE_OPTIONS } from "@/types/input-types";
 import { apiClient } from "@/lib/api/client";
 import { commonCodeApi } from "@/lib/api/commonCode";
 import { entityJoinApi, ReferenceTableColumn } from "@/lib/api/entityJoin";
+import { CreateTableModal } from "@/components/admin/CreateTableModal";
+import { AddColumnModal } from "@/components/admin/AddColumnModal";
+import { DDLLogViewer } from "@/components/admin/DDLLogViewer";
 // 가상화 스크롤링을 위한 간단한 구현
 
 interface TableInfo {
@@ -27,8 +32,7 @@ interface TableInfo {
 interface ColumnTypeInfo {
   columnName: string;
   displayName: string;
-  dbType: string;
-  webType: string;
+  inputType: string; // webType → inputType 변경
   detailSettings: string;
   description: string;
   isNullable: string;
@@ -45,6 +49,7 @@ interface ColumnTypeInfo {
 
 export default function TableManagementPage() {
   const { userLang, getText } = useMultiLang({ companyCode: "*" });
+  const { user } = useAuth();
   const [tables, setTables] = useState<TableInfo[]>([]);
   const [columns, setColumns] = useState<ColumnTypeInfo[]>([]);
   const [selectedTable, setSelectedTable] = useState<string | null>(null);
@@ -66,6 +71,14 @@ export default function TableManagementPage() {
   // 🎯 Entity 조인 관련 상태
   const [referenceTableColumns, setReferenceTableColumns] = useState<Record<string, ReferenceTableColumn[]>>({});
 
+  // DDL 기능 관련 상태
+  const [createTableModalOpen, setCreateTableModalOpen] = useState(false);
+  const [addColumnModalOpen, setAddColumnModalOpen] = useState(false);
+  const [ddlLogViewerOpen, setDdlLogViewerOpen] = useState(false);
+
+  // 최고 관리자 여부 확인
+  const isSuperAdmin = user?.companyCode === "*" && user?.userId === "plm_admin";
+
   // 다국어 텍스트 로드
   useEffect(() => {
     const loadTexts = async () => {
@@ -135,15 +148,15 @@ export default function TableManagementPage() {
     [], // 의존성 배열에서 referenceTableColumns 제거
   );
 
-  // 웹 타입 옵션 (다국어 적용)
-  const webTypeOptions = WEB_TYPE_OPTIONS_WITH_KEYS.map((option) => ({
+  // 입력 타입 옵션 (8개 핵심 타입)
+  const inputTypeOptions = INPUT_TYPE_OPTIONS.map((option) => ({
     value: option.value,
-    label: getTextFromUI(option.labelKey, option.value),
-    description: getTextFromUI(option.descriptionKey, option.value),
+    label: option.label,
+    description: option.description,
   }));
 
-  // 메모이제이션된 웹타입 옵션
-  const memoizedWebTypeOptions = useMemo(() => webTypeOptions, [uiTexts]);
+  // 메모이제이션된 입력타입 옵션
+  const memoizedInputTypeOptions = useMemo(() => inputTypeOptions, []);
 
   // 참조 테이블 옵션 (실제 테이블 목록에서 가져옴)
   const referenceTableOptions = [
@@ -218,14 +231,21 @@ export default function TableManagementPage() {
       // 응답 상태 확인
       if (response.data.success) {
         const data = response.data.data;
+
+        // 컬럼 데이터에 기본값 설정
+        const processedColumns = (data.columns || data).map((col: any) => ({
+          ...col,
+          inputType: col.inputType || "text", // 기본값: text
+        }));
+
         if (page === 1) {
-          setColumns(data.columns || data);
-          setOriginalColumns(data.columns || data);
+          setColumns(processedColumns);
+          setOriginalColumns(processedColumns);
         } else {
           // 페이지 추가 로드 시 기존 데이터에 추가
-          setColumns((prev) => [...prev, ...(data.columns || data)]);
+          setColumns((prev) => [...prev, ...processedColumns]);
         }
-        setTotalColumns(data.total || (data.columns || data).length);
+        setTotalColumns(data.total || processedColumns.length);
         toast.success("컬럼 정보를 성공적으로 로드했습니다.");
       } else {
         toast.error(response.data.message || "컬럼 정보 로드에 실패했습니다.");
@@ -255,24 +275,24 @@ export default function TableManagementPage() {
     [loadColumnTypes, pageSize, tables],
   );
 
-  // 웹 타입 변경
-  const handleWebTypeChange = useCallback(
-    (columnName: string, newWebType: string) => {
+  // 입력 타입 변경
+  const handleInputTypeChange = useCallback(
+    (columnName: string, newInputType: string) => {
       setColumns((prev) =>
         prev.map((col) => {
           if (col.columnName === columnName) {
-            const webTypeOption = memoizedWebTypeOptions.find((option) => option.value === newWebType);
+            const inputTypeOption = memoizedInputTypeOptions.find((option) => option.value === newInputType);
             return {
               ...col,
-              webType: newWebType,
-              detailSettings: webTypeOption?.description || col.detailSettings,
+              inputType: newInputType,
+              detailSettings: inputTypeOption?.description || col.detailSettings,
             };
           }
           return col;
         }),
       );
     },
-    [memoizedWebTypeOptions],
+    [memoizedInputTypeOptions],
   );
 
   // 상세 설정 변경 (코드/엔티티 타입용)
@@ -382,7 +402,7 @@ export default function TableManagementPage() {
       const columnSetting = {
         columnName: column.columnName, // 실제 DB 컬럼명 (변경 불가)
         columnLabel: column.displayName, // 사용자가 입력한 표시명
-        webType: column.webType || "text",
+        inputType: column.inputType || "text",
         detailSettings: column.detailSettings || "",
         codeCategory: column.codeCategory || "",
         codeValue: column.codeValue || "",
@@ -437,7 +457,7 @@ export default function TableManagementPage() {
         const columnSettings = columns.map((column) => ({
           columnName: column.columnName, // 실제 DB 컬럼명 (변경 불가)
           columnLabel: column.displayName, // 사용자가 입력한 표시명
-          webType: column.webType || "text",
+          inputType: column.inputType || "text",
           detailSettings: column.detailSettings || "",
           description: column.description || "",
           codeCategory: column.codeCategory || "",
@@ -531,11 +551,44 @@ export default function TableManagementPage() {
           <p className="mt-2 text-gray-600">
             {getTextFromUI(TABLE_MANAGEMENT_KEYS.PAGE_DESCRIPTION, "데이터베이스 테이블과 컬럼의 타입을 관리합니다")}
           </p>
+          {isSuperAdmin && (
+            <p className="mt-1 text-sm font-medium text-blue-600">
+              🔧 최고 관리자 권한으로 새 테이블 생성 및 컬럼 추가가 가능합니다
+            </p>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* DDL 기능 버튼들 (최고 관리자만) */}
+          {isSuperAdmin && (
+            <>
+              <Button
+                onClick={() => setCreateTableModalOpen(true)}
+                className="bg-green-600 text-white hover:bg-green-700"
+                size="sm"
+              >
+                <Plus className="mr-2 h-4 w-4" />새 테이블 생성
+              </Button>
+
+              {selectedTable && (
+                <Button onClick={() => setAddColumnModalOpen(true)} variant="outline" size="sm">
+                  <Plus className="mr-2 h-4 w-4" />
+                  컬럼 추가
+                </Button>
+              )}
+
+              <Button onClick={() => setDdlLogViewerOpen(true)} variant="outline" size="sm">
+                <Activity className="mr-2 h-4 w-4" />
+                DDL 로그
+              </Button>
+            </>
+          )}
+
+          <Button onClick={loadTables} disabled={loading} className="flex items-center gap-2" size="sm">
+            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+            {getTextFromUI(TABLE_MANAGEMENT_KEYS.BUTTON_REFRESH, "새로고침")}
+          </Button>
         </div>
-        <Button onClick={loadTables} disabled={loading} className="flex items-center gap-2">
-          <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
-          {getTextFromUI(TABLE_MANAGEMENT_KEYS.BUTTON_REFRESH, "새로고침")}
-        </Button>
       </div>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-5">
@@ -668,8 +721,7 @@ export default function TableManagementPage() {
                     <div className="flex items-center border-b border-gray-200 pb-2 text-sm font-medium text-gray-700">
                       <div className="w-40 px-4">컬럼명</div>
                       <div className="w-48 px-4">라벨</div>
-                      <div className="w-40 px-4">DB 타입</div>
-                      <div className="w-48 px-4">웹 타입</div>
+                      <div className="w-48 px-4">입력 타입</div>
                       <div className="flex-1 px-4" style={{ maxWidth: "calc(100% - 808px)" }}>
                         상세 설정
                       </div>
@@ -703,21 +755,16 @@ export default function TableManagementPage() {
                               className="h-7 text-xs"
                             />
                           </div>
-                          <div className="w-40 px-4">
-                            <Badge variant="outline" className="text-xs">
-                              {column.dbType}
-                            </Badge>
-                          </div>
                           <div className="w-48 px-4">
                             <Select
-                              value={column.webType}
-                              onValueChange={(value) => handleWebTypeChange(column.columnName, value)}
+                              value={column.inputType || "text"}
+                              onValueChange={(value) => handleInputTypeChange(column.columnName, value)}
                             >
                               <SelectTrigger className="h-7 text-xs">
-                                <SelectValue />
+                                <SelectValue placeholder="입력 타입 선택" />
                               </SelectTrigger>
                               <SelectContent>
-                                {memoizedWebTypeOptions.map((option) => (
+                                {memoizedInputTypeOptions.map((option) => (
                                   <SelectItem key={option.value} value={option.value}>
                                     {option.label}
                                   </SelectItem>
@@ -727,7 +774,7 @@ export default function TableManagementPage() {
                           </div>
                           <div className="flex-1 px-4" style={{ maxWidth: "calc(100% - 808px)" }}>
                             {/* 웹 타입이 'code'인 경우 공통코드 선택 */}
-                            {column.webType === "code" && (
+                            {column.inputType === "code" && (
                               <Select
                                 value={column.codeCategory || "none"}
                                 onValueChange={(value) => handleDetailSettingsChange(column.columnName, "code", value)}
@@ -745,7 +792,7 @@ export default function TableManagementPage() {
                               </Select>
                             )}
                             {/* 웹 타입이 'entity'인 경우 참조 테이블 선택 */}
-                            {column.webType === "entity" && (
+                            {column.inputType === "entity" && (
                               <div className="space-y-1">
                                 {/* 🎯 Entity 타입 설정 - 가로 배치 */}
                                 <div className="rounded-lg border border-blue-200 bg-blue-50 p-2">
@@ -880,7 +927,7 @@ export default function TableManagementPage() {
                               </div>
                             )}
                             {/* 다른 웹 타입인 경우 빈 공간 */}
-                            {column.webType !== "code" && column.webType !== "entity" && (
+                            {column.inputType !== "code" && column.inputType !== "entity" && (
                               <div className="flex h-7 items-center text-xs text-gray-400">-</div>
                             )}
                           </div>
@@ -927,6 +974,47 @@ export default function TableManagementPage() {
           </CardContent>
         </Card>
       </div>
+
+      {/* DDL 모달 컴포넌트들 */}
+      {isSuperAdmin && (
+        <>
+          <CreateTableModal
+            isOpen={createTableModalOpen}
+            onClose={() => setCreateTableModalOpen(false)}
+            onSuccess={async (result) => {
+              toast.success("테이블이 성공적으로 생성되었습니다!");
+              // 테이블 목록 새로고침
+              await loadTables();
+              // 새로 생성된 테이블 자동 선택 및 컬럼 로드
+              if (result.data?.tableName) {
+                setSelectedTable(result.data.tableName);
+                setCurrentPage(1);
+                setColumns([]);
+                await loadColumnTypes(result.data.tableName, 1, pageSize);
+              }
+            }}
+          />
+
+          <AddColumnModal
+            isOpen={addColumnModalOpen}
+            onClose={() => setAddColumnModalOpen(false)}
+            tableName={selectedTable || ""}
+            onSuccess={async (result) => {
+              toast.success("컬럼이 성공적으로 추가되었습니다!");
+              // 테이블 목록 새로고침 (컬럼 수 업데이트)
+              await loadTables();
+              // 선택된 테이블의 컬럼 목록 새로고침 - 페이지 리셋
+              if (selectedTable) {
+                setCurrentPage(1);
+                setColumns([]); // 기존 컬럼 목록 초기화
+                await loadColumnTypes(selectedTable, 1, pageSize);
+              }
+            }}
+          />
+
+          <DDLLogViewer isOpen={ddlLogViewerOpen} onClose={() => setDdlLogViewerOpen(false)} />
+        </>
+      )}
     </div>
   );
 }

frontend/app/(main)/admin/validation-demo/page.tsx

@@ -0,0 +1,585 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { toast } from "sonner";
+import { EnhancedInteractiveScreenViewer } from "@/components/screen/EnhancedInteractiveScreenViewer";
+import { FormValidationIndicator } from "@/components/common/FormValidationIndicator";
+import { useFormValidation } from "@/hooks/useFormValidation";
+import { enhancedFormService } from "@/lib/services/enhancedFormService";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { ComponentData, WidgetComponent, ColumnInfo, ScreenDefinition } from "@/types/screen";
+import { normalizeWebType } from "@/types/unified-web-types";
+
+// 테스트용 화면 정의
+const TEST_SCREEN_DEFINITION: ScreenDefinition = {
+  id: 999,
+  screenName: "validation-demo",
+  tableName: "test_users", // 테스트용 테이블
+  screenResolution: { width: 800, height: 600 },
+  gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
+  description: "검증 시스템 데모 화면",
+};
+
+// 테스트용 컴포넌트 데이터
+const TEST_COMPONENTS: ComponentData[] = [
+  {
+    id: "container-1",
+    type: "container",
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+    parentId: null,
+    children: ["widget-1", "widget-2", "widget-3", "widget-4", "widget-5", "widget-6"],
+  },
+  {
+    id: "widget-1",
+    type: "widget",
+    x: 20,
+    y: 20,
+    width: 200,
+    height: 40,
+    parentId: "container-1",
+    label: "사용자명",
+    widgetType: "text",
+    columnName: "user_name",
+    required: true,
+    style: {
+      labelFontSize: "14px",
+      labelColor: "#374151",
+      labelFontWeight: "500",
+    },
+  } as WidgetComponent,
+  {
+    id: "widget-2",
+    type: "widget",
+    x: 20,
+    y: 80,
+    width: 200,
+    height: 40,
+    parentId: "container-1",
+    label: "이메일",
+    widgetType: "email",
+    columnName: "email",
+    required: true,
+    style: {
+      labelFontSize: "14px",
+      labelColor: "#374151",
+      labelFontWeight: "500",
+    },
+  } as WidgetComponent,
+  {
+    id: "widget-3",
+    type: "widget",
+    x: 20,
+    y: 140,
+    width: 200,
+    height: 40,
+    parentId: "container-1",
+    label: "나이",
+    widgetType: "number",
+    columnName: "age",
+    required: false,
+    webTypeConfig: {
+      min: 0,
+      max: 120,
+    },
+    style: {
+      labelFontSize: "14px",
+      labelColor: "#374151",
+      labelFontWeight: "500",
+    },
+  } as WidgetComponent,
+  {
+    id: "widget-4",
+    type: "widget",
+    x: 20,
+    y: 200,
+    width: 200,
+    height: 40,
+    parentId: "container-1",
+    label: "생년월일",
+    widgetType: "date",
+    columnName: "birth_date",
+    required: false,
+    style: {
+      labelFontSize: "14px",
+      labelColor: "#374151",
+      labelFontWeight: "500",
+    },
+  } as WidgetComponent,
+  {
+    id: "widget-5",
+    type: "widget",
+    x: 20,
+    y: 260,
+    width: 200,
+    height: 40,
+    parentId: "container-1",
+    label: "전화번호",
+    widgetType: "tel",
+    columnName: "phone",
+    required: false,
+    style: {
+      labelFontSize: "14px",
+      labelColor: "#374151",
+      labelFontWeight: "500",
+    },
+  } as WidgetComponent,
+  {
+    id: "widget-6",
+    type: "widget",
+    x: 20,
+    y: 320,
+    width: 100,
+    height: 40,
+    parentId: "container-1",
+    label: "저장",
+    widgetType: "button",
+    columnName: "save_button",
+    required: false,
+    webTypeConfig: {
+      actionType: "save",
+      text: "저장하기",
+    },
+    style: {
+      labelFontSize: "14px",
+      labelColor: "#374151",
+      labelFontWeight: "500",
+    },
+  } as WidgetComponent,
+];
+
+// 테스트용 테이블 컬럼 정보
+const TEST_TABLE_COLUMNS: ColumnInfo[] = [
+  {
+    tableName: "test_users",
+    columnName: "id",
+    columnLabel: "ID",
+    dataType: "integer",
+    webType: "number",
+    widgetType: "number",
+    inputType: "auto",
+    isNullable: "N",
+    required: false,
+    isPrimaryKey: true,
+    isVisible: false,
+    displayOrder: 0,
+    description: "기본키",
+  },
+  {
+    tableName: "test_users",
+    columnName: "user_name",
+    columnLabel: "사용자명",
+    dataType: "character varying",
+    webType: "text",
+    widgetType: "text",
+    inputType: "direct",
+    isNullable: "N",
+    required: true,
+    characterMaximumLength: 50,
+    isVisible: true,
+    displayOrder: 1,
+    description: "사용자 이름",
+  },
+  {
+    tableName: "test_users",
+    columnName: "email",
+    columnLabel: "이메일",
+    dataType: "character varying",
+    webType: "email",
+    widgetType: "email",
+    inputType: "direct",
+    isNullable: "N",
+    required: true,
+    characterMaximumLength: 100,
+    isVisible: true,
+    displayOrder: 2,
+    description: "이메일 주소",
+  },
+  {
+    tableName: "test_users",
+    columnName: "age",
+    columnLabel: "나이",
+    dataType: "integer",
+    webType: "number",
+    widgetType: "number",
+    inputType: "direct",
+    isNullable: "Y",
+    required: false,
+    isVisible: true,
+    displayOrder: 3,
+    description: "나이",
+  },
+  {
+    tableName: "test_users",
+    columnName: "birth_date",
+    columnLabel: "생년월일",
+    dataType: "date",
+    webType: "date",
+    widgetType: "date",
+    inputType: "direct",
+    isNullable: "Y",
+    required: false,
+    isVisible: true,
+    displayOrder: 4,
+    description: "생년월일",
+  },
+  {
+    tableName: "test_users",
+    columnName: "phone",
+    columnLabel: "전화번호",
+    dataType: "character varying",
+    webType: "tel",
+    widgetType: "tel",
+    inputType: "direct",
+    isNullable: "Y",
+    required: false,
+    characterMaximumLength: 20,
+    isVisible: true,
+    displayOrder: 5,
+    description: "전화번호",
+  },
+];
+
+export default function ValidationDemoPage() {
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [selectedTable, setSelectedTable] = useState<string>("test_users");
+  const [availableTables, setAvailableTables] = useState<string[]>([]);
+  const [tableColumns, setTableColumns] = useState<ColumnInfo[]>(TEST_TABLE_COLUMNS);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 폼 검증 훅 사용
+  const { validationState, saveState, validateForm, saveForm, canSave, getFieldError, hasFieldError, isFieldValid } =
+    useFormValidation(
+      formData,
+      TEST_COMPONENTS.filter((c) => c.type === "widget") as WidgetComponent[],
+      tableColumns,
+      TEST_SCREEN_DEFINITION,
+      {
+        enableRealTimeValidation: true,
+        validationDelay: 300,
+        enableAutoSave: false,
+        showToastMessages: true,
+        validateOnMount: false,
+      },
+    );
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      try {
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setAvailableTables(response.data.map((table) => table.tableName));
+        }
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 선택된 테이블의 컬럼 정보 로드
+  useEffect(() => {
+    if (selectedTable && selectedTable !== "test_users") {
+      const loadTableColumns = async () => {
+        setIsLoading(true);
+        try {
+          const response = await tableManagementApi.getColumnList(selectedTable);
+          if (response.success && response.data) {
+            setTableColumns(response.data.columns || []);
+          }
+        } catch (error) {
+          console.error("테이블 컬럼 정보 로드 실패:", error);
+          toast.error("테이블 컬럼 정보를 불러오는데 실패했습니다.");
+        } finally {
+          setIsLoading(false);
+        }
+      };
+      loadTableColumns();
+    } else {
+      setTableColumns(TEST_TABLE_COLUMNS);
+    }
+  }, [selectedTable]);
+
+  const handleFormDataChange = (fieldName: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [fieldName]: value }));
+  };
+
+  const handleTestFormSubmit = async () => {
+    const result = await saveForm();
+    if (result) {
+      toast.success("폼 데이터가 성공적으로 저장되었습니다!");
+    }
+  };
+
+  const handleManualValidation = async () => {
+    const result = await validateForm();
+    toast.info(
+      `검증 완료: ${result.isValid ? "성공" : "실패"} (오류 ${result.errors.length}개, 경고 ${result.warnings.length}개)`,
+    );
+  };
+
+  const generateTestData = () => {
+    setFormData({
+      user_name: "테스트 사용자",
+      email: "test@example.com",
+      age: 25,
+      birth_date: "1999-01-01",
+      phone: "010-1234-5678",
+    });
+    toast.info("테스트 데이터가 입력되었습니다.");
+  };
+
+  const generateInvalidData = () => {
+    setFormData({
+      user_name: "", // 필수 필드 누락
+      email: "invalid-email", // 잘못된 이메일 형식
+      age: -5, // 음수 나이
+      birth_date: "invalid-date", // 잘못된 날짜
+      phone: "123", // 잘못된 전화번호 형식
+    });
+    toast.info("잘못된 테스트 데이터가 입력되었습니다.");
+  };
+
+  const clearForm = () => {
+    setFormData({});
+    toast.info("폼이 초기화되었습니다.");
+  };
+
+  return (
+    <div className="container mx-auto space-y-6 py-6">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">검증 시스템 데모</h1>
+          <p className="text-muted-foreground">개선된 폼 검증 시스템을 테스트해보세요</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">개발 버전</Badge>
+          <Badge variant={validationState.isValid ? "default" : "destructive"}>
+            {validationState.isValid ? "검증 통과" : "검증 실패"}
+          </Badge>
+        </div>
+      </div>
+
+      <Tabs defaultValue="demo" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="demo">데모 폼</TabsTrigger>
+          <TabsTrigger value="validation">검증 상태</TabsTrigger>
+          <TabsTrigger value="settings">설정</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="demo" className="space-y-4">
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            {/* 폼 영역 */}
+            <Card className="lg:col-span-2">
+              <CardHeader>
+                <CardTitle>테스트 폼</CardTitle>
+                <CardDescription>실시간 검증이 적용된 폼입니다. 입력하면서 검증 결과를 확인해보세요.</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="relative min-h-[400px] rounded-lg border border-dashed border-gray-300 p-4">
+                  <EnhancedInteractiveScreenViewer
+                    component={TEST_COMPONENTS[0]} // container
+                    allComponents={TEST_COMPONENTS}
+                    formData={formData}
+                    onFormDataChange={handleFormDataChange}
+                    screenInfo={TEST_SCREEN_DEFINITION}
+                    tableColumns={tableColumns}
+                    validationOptions={{
+                      enableRealTimeValidation: true,
+                      validationDelay: 300,
+                      enableAutoSave: false,
+                      showToastMessages: true,
+                    }}
+                    showValidationPanel={false}
+                    compactValidation={true}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 컨트롤 패널 */}
+            <Card>
+              <CardHeader>
+                <CardTitle>컨트롤 패널</CardTitle>
+                <CardDescription>테스트 기능들을 사용해보세요</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label>테스트 데이터</Label>
+                  <div className="grid grid-cols-1 gap-2">
+                    <Button onClick={generateTestData} variant="outline" size="sm">
+                      ✅ 유효한 데이터 입력
+                    </Button>
+                    <Button onClick={generateInvalidData} variant="outline" size="sm">
+                      ❌ 잘못된 데이터 입력
+                    </Button>
+                    <Button onClick={clearForm} variant="outline" size="sm">
+                      🧹 폼 초기화
+                    </Button>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div className="space-y-2">
+                  <Label>검증 & 저장</Label>
+                  <div className="grid grid-cols-1 gap-2">
+                    <Button onClick={handleManualValidation} variant="outline" size="sm">
+                      🔍 수동 검증
+                    </Button>
+                    <Button
+                      onClick={handleTestFormSubmit}
+                      disabled={!canSave || saveState.status === "saving"}
+                      size="sm"
+                    >
+                      {saveState.status === "saving" ? "저장 중..." : "💾 폼 저장"}
+                    </Button>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <FormValidationIndicator
+                  validationState={validationState}
+                  saveState={saveState}
+                  onSave={handleTestFormSubmit}
+                  canSave={canSave}
+                  compact={false}
+                  showDetails={true}
+                />
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="validation" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>검증 상태 상세</CardTitle>
+              <CardDescription>현재 폼의 검증 상태를 자세히 확인할 수 있습니다</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <FormValidationIndicator
+                validationState={validationState}
+                saveState={saveState}
+                onSave={handleTestFormSubmit}
+                canSave={canSave}
+                compact={false}
+                showDetails={true}
+                showPerformance={true}
+              />
+
+              <Separator />
+
+              <div className="space-y-2">
+                <h4 className="font-semibold">폼 데이터</h4>
+                <pre className="max-h-60 overflow-auto rounded-md bg-gray-100 p-3 text-sm">
+                  {JSON.stringify(formData, null, 2)}
+                </pre>
+              </div>
+
+              <div className="space-y-2">
+                <h4 className="font-semibold">검증 통계</h4>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="rounded-md bg-green-50 p-3">
+                    <div className="text-lg font-bold text-green-600">
+                      {Object.values(validationState.fieldStates).filter((f) => f.status === "valid").length}
+                    </div>
+                    <div className="text-sm text-green-700">유효한 필드</div>
+                  </div>
+                  <div className="rounded-md bg-red-50 p-3">
+                    <div className="text-lg font-bold text-red-600">{validationState.errors.length}</div>
+                    <div className="text-sm text-red-700">오류 개수</div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="settings" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>테스트 설정</CardTitle>
+              <CardDescription>검증 동작을 조정할 수 있습니다</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="table-select">테스트 테이블</Label>
+                <Select value={selectedTable} onValueChange={setSelectedTable}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="테이블을 선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="test_users">test_users (데모용)</SelectItem>
+                    {availableTables.map((table) => (
+                      <SelectItem key={table} value={table}>
+                        {table}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {isLoading && (
+                <div className="py-4 text-center">
+                  <div className="text-muted-foreground text-sm">테이블 정보를 불러오는 중...</div>
+                </div>
+              )}
+
+              <div className="space-y-2">
+                <h4 className="font-semibold">테이블 컬럼 정보</h4>
+                <div className="max-h-60 overflow-auto">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="border-b">
+                        <th className="p-2 text-left">컬럼명</th>
+                        <th className="p-2 text-left">타입</th>
+                        <th className="p-2 text-left">필수</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {tableColumns.map((column) => (
+                        <tr key={column.columnName} className="border-b">
+                          <td className="p-2">{column.columnName}</td>
+                          <td className="p-2">
+                            <Badge variant="outline" className="text-xs">
+                              {column.webType}
+                            </Badge>
+                          </td>
+                          <td className="p-2">
+                            {column.required ? (
+                              <Badge variant="destructive" className="text-xs">
+                                필수
+                              </Badge>
+                            ) : (
+                              <Badge variant="secondary" className="text-xs">
+                                선택
+                              </Badge>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -13,6 +13,7 @@ import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { initializeComponents } from "@/lib/registry/components";
 import { EditModal } from "@/components/screen/EditModal";
+// import { ResponsiveScreenContainer } from "@/components/screen/ResponsiveScreenContainer"; // 컨테이너 제거
 
 export default function ScreenViewPage() {
   const params = useParams();
@@ -364,7 +365,7 @@ export default function ScreenViewPage() {
       ) : (
         // 빈 화면일 때도 깔끔하게 표시
         <div
-          className="mx-auto flex items-center justify-center bg-gray-50"
+          className="mx-auto flex items-center justify-center bg-white"
           style={{
             width: `${screenWidth}px`,
             height: `${screenHeight}px`,

frontend/app/test-type-safety/page.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SimpleTypeSafetyTest from "./simple-test";
+
+export default function TypeSafetyTestPage() {
+  return (
+    <div className="container mx-auto space-y-6 p-6">
+      {/* 테스트 네비게이션 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">🧪 타입 안전성 테스트 센터</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">
+            화면관리, 제어관리, 테이블타입관리 시스템의 타입 안전성을 다양한 방법으로 검증합니다.
+          </p>
+
+          <div className="flex flex-wrap gap-4">
+            <Button variant="outline" className="h-auto flex-col p-4" asChild>
+              <div>
+                <div className="mb-2 text-lg">🧪 기본 테스트</div>
+                <div className="text-muted-foreground text-sm">핵심 타입 안전성 검증</div>
+              </div>
+            </Button>
+
+            <Button variant="outline" className="h-auto flex-col p-4" asChild>
+              <Link href="/test-type-safety/stress-test">
+                <div className="mb-2 text-lg">🔥 스트레스 테스트</div>
+                <div className="text-muted-foreground text-sm">극한 상황 성능 검증</div>
+              </Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 기본 테스트 실행 */}
+      <SimpleTypeSafetyTest />
+    </div>
+  );
+}

frontend/app/test-type-safety/simple-test.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  ComponentData,
+  WebType,
+  ButtonActionType,
+  WidgetComponent,
+  isWidgetComponent,
+  isWebType,
+  isButtonActionType,
+  ynToBoolean,
+  booleanToYN,
+} from "@/types";
+
+export default function SimpleTypeSafetyTest() {
+  const [testResults, setTestResults] = useState<
+    Array<{ name: string; status: "pending" | "passed" | "failed"; message?: string }>
+  >([]);
+  const [isRunning, setIsRunning] = useState(false);
+
+  const addResult = (name: string, status: "passed" | "failed", message?: string) => {
+    setTestResults((prev) => [...prev, { name, status, message }]);
+  };
+
+  const runSimpleTests = () => {
+    setIsRunning(true);
+    setTestResults([]);
+
+    try {
+      // Test 1: WebType 검증
+      const validWebTypes = ["text", "number", "date", "select", "checkbox"];
+      const invalidWebTypes = ["text_area", "VARCHAR", "submit"];
+
+      let webTypeTestPassed = true;
+      validWebTypes.forEach((type) => {
+        if (!isWebType(type)) webTypeTestPassed = false;
+      });
+      invalidWebTypes.forEach((type) => {
+        if (isWebType(type as any)) webTypeTestPassed = false;
+      });
+
+      addResult(
+        "WebType 타입 검증",
+        webTypeTestPassed ? "passed" : "failed",
+        webTypeTestPassed ? "모든 WebType 검증 통과" : "일부 WebType 검증 실패",
+      );
+
+      // Test 2: ButtonActionType 검증
+      const validActions: ButtonActionType[] = ["save", "cancel", "delete", "edit"];
+      const invalidActions = ["insert", "update", ""];
+
+      let buttonActionTestPassed = true;
+      validActions.forEach((action) => {
+        if (!isButtonActionType(action)) buttonActionTestPassed = false;
+      });
+      invalidActions.forEach((action) => {
+        if (isButtonActionType(action as any)) buttonActionTestPassed = false;
+      });
+
+      addResult(
+        "ButtonActionType 검증",
+        buttonActionTestPassed ? "passed" : "failed",
+        buttonActionTestPassed ? "모든 ButtonActionType 검증 통과" : "일부 ButtonActionType 검증 실패",
+      );
+
+      // Test 3: Y/N ↔ boolean 변환
+      const ynTests = [
+        { input: "Y", expected: true },
+        { input: "N", expected: false },
+        { input: "", expected: false },
+        { input: undefined, expected: false },
+      ];
+
+      let ynTestPassed = true;
+      ynTests.forEach(({ input, expected }) => {
+        if (ynToBoolean(input) !== expected) ynTestPassed = false;
+      });
+
+      if (booleanToYN(true) !== "Y" || booleanToYN(false) !== "N") ynTestPassed = false;
+
+      addResult(
+        "Y/N ↔ boolean 변환",
+        ynTestPassed ? "passed" : "failed",
+        ynTestPassed ? "모든 Y/N 변환 테스트 통과" : "Y/N 변환 테스트 실패",
+      );
+
+      // Test 4: 컴포넌트 타입 가드
+      const testWidget: WidgetComponent = {
+        id: "test-widget",
+        type: "widget",
+        widgetType: "text",
+        position: { x: 0, y: 0 },
+        size: { width: 200, height: 40 },
+        label: "테스트",
+        webTypeConfig: {},
+      };
+
+      const testContainer = {
+        id: "test-container",
+        type: "container",
+        position: { x: 0, y: 0 },
+        size: { width: 400, height: 300 },
+        children: [],
+      };
+
+      let typeGuardTestPassed = true;
+      if (!isWidgetComponent(testWidget)) typeGuardTestPassed = false;
+      if (isWidgetComponent(testContainer)) typeGuardTestPassed = false;
+
+      addResult(
+        "컴포넌트 타입 가드",
+        typeGuardTestPassed ? "passed" : "failed",
+        typeGuardTestPassed ? "타입 가드 모든 테스트 통과" : "타입 가드 테스트 실패",
+      );
+
+      // Test 5: 폼 데이터 처리 시뮬레이션
+      const formData = {
+        userName: "테스트 사용자",
+        userAge: 25,
+        isActive: true,
+      };
+
+      const formComponents: WidgetComponent[] = [
+        {
+          id: "userName",
+          type: "widget",
+          widgetType: "text",
+          position: { x: 0, y: 0 },
+          size: { width: 200, height: 40 },
+          label: "사용자명",
+          columnName: "user_name",
+          webTypeConfig: {},
+        },
+        {
+          id: "isActive",
+          type: "widget",
+          widgetType: "checkbox",
+          position: { x: 0, y: 50 },
+          size: { width: 200, height: 40 },
+          label: "활성화",
+          columnName: "is_active",
+          webTypeConfig: {},
+        },
+      ];
+
+      const processedData: Record<string, any> = {};
+      formComponents.forEach((component) => {
+        const fieldValue = formData[component.id as keyof typeof formData];
+        if (fieldValue !== undefined && component.columnName) {
+          switch (component.widgetType) {
+            case "text":
+              processedData[component.columnName] = String(fieldValue);
+              break;
+            case "checkbox":
+              processedData[component.columnName] = booleanToYN(Boolean(fieldValue));
+              break;
+            default:
+              processedData[component.columnName] = fieldValue;
+          }
+        }
+      });
+
+      let formProcessingTestPassed = true;
+      if (typeof processedData.user_name !== "string") formProcessingTestPassed = false;
+      if (processedData.is_active !== "Y" && processedData.is_active !== "N") formProcessingTestPassed = false;
+
+      addResult(
+        "폼 데이터 처리",
+        formProcessingTestPassed ? "passed" : "failed",
+        formProcessingTestPassed ? "폼 데이터 타입 안전 처리 성공" : "폼 데이터 처리 실패",
+      );
+    } catch (error) {
+      addResult("전체 테스트", "failed", `테스트 실행 중 오류: ${error}`);
+    }
+
+    setIsRunning(false);
+  };
+
+  const passedTests = testResults.filter((test) => test.status === "passed").length;
+  const totalTests = testResults.length;
+
+  return (
+    <div className="container mx-auto space-y-6 p-6">
+      <div className="space-y-4 text-center">
+        <h1 className="text-3xl font-bold">🧪 타입 안전성 간단 테스트</h1>
+        <p className="text-muted-foreground">
+          화면관리, 제어관리, 테이블타입관리 시스템의 핵심 타입 안전성을 검증합니다
+        </p>
+
+        <Button onClick={runSimpleTests} disabled={isRunning} size="lg">
+          {isRunning ? "테스트 실행 중..." : "🚀 간단 테스트 실행"}
+        </Button>
+      </div>
+
+      {testResults.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>📊 테스트 결과</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              <div className="text-center">
+                <div className="text-2xl font-bold">
+                  {passedTests}/{totalTests} 통과
+                </div>
+                <div className="text-muted-foreground text-sm">
+                  성공률: {totalTests > 0 ? Math.round((passedTests / totalTests) * 100) : 0}%
+                </div>
+              </div>
+
+              {testResults.map((test, index) => (
+                <div key={index} className="flex items-center justify-between rounded-lg border p-3">
+                  <div className="flex-1">
+                    <div className="font-medium">{test.name}</div>
+                    {test.message && <div className="text-muted-foreground mt-1 text-sm">{test.message}</div>}
+                  </div>
+
+                  <Badge variant={test.status === "passed" ? "default" : "destructive"}>
+                    {test.status === "passed" ? "통과" : "실패"}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+
+            {passedTests === totalTests && totalTests > 0 && (
+              <div className="mt-4 rounded-lg border border-green-200 bg-green-50 p-4">
+                <div className="font-medium text-green-800">🎉 모든 타입 안전성 테스트가 통과되었습니다!</div>
+                <div className="mt-2 text-sm text-green-600">
+                  화면관리, 제어관리, 테이블타입관리 시스템이 안전하게 작동합니다.
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

frontend/app/test-type-safety/stress-test.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import StressTestSuite from "../../test-scenarios/stress-test-scenarios";
+
+interface TestResult {
+  testName: string;
+  status: "passed" | "failed" | "warning";
+  duration: number;
+  details: string;
+  metrics?: any;
+}
+
+interface StressTestResults {
+  success: boolean;
+  totalTests: number;
+  passedTests: number;
+  failedTests: number;
+  warningTests: number;
+  totalDuration: number;
+  results: TestResult[];
+  recommendation: string[];
+}
+
+export default function StressTestPage() {
+  const [isRunning, setIsRunning] = useState(false);
+  const [currentTest, setCurrentTest] = useState<string>("");
+  const [progress, setProgress] = useState(0);
+  const [testResults, setTestResults] = useState<StressTestResults | null>(null);
+  const [testLogs, setTestLogs] = useState<string[]>([]);
+
+  const runStressTests = async () => {
+    setIsRunning(true);
+    setTestResults(null);
+    setTestLogs([]);
+    setProgress(0);
+
+    // 콘솔 로그를 캡처하기 위한 오버라이드
+    const originalLog = console.log;
+    const capturedLogs: string[] = [];
+
+    console.log = (...args) => {
+      const logMessage = args.join(" ");
+      capturedLogs.push(logMessage);
+      setTestLogs((prev) => [...prev, logMessage]);
+      originalLog(...args);
+    };
+
+    try {
+      // 개별 테스트 진행 상황 모니터링
+      const testNames = [
+        "대량 데이터 처리",
+        "타입 오염 및 손상",
+        "동시 작업 및 경합 상태",
+        "메모리 부하 및 가비지 컬렉션",
+        "API 스트레스 및 네트워크 시뮬레이션",
+      ];
+
+      // 각 테스트 시작 시 진행률 업데이트
+      let completedTests = 0;
+
+      const updateProgress = (testName: string) => {
+        setCurrentTest(testName);
+        setProgress((completedTests / testNames.length) * 100);
+      };
+
+      // 테스트 실행 (실제로는 StressTestSuite.runAllStressTests()가 모든 테스트를 순차 실행)
+      updateProgress(testNames[0]);
+
+      // 진행률 시뮬레이션을 위한 간격 업데이트
+      const progressInterval = setInterval(() => {
+        completedTests = Math.min(completedTests + 0.1, testNames.length - 0.1);
+        const currentTestIndex = Math.floor(completedTests);
+        if (currentTestIndex < testNames.length) {
+          setCurrentTest(testNames[currentTestIndex]);
+        }
+        setProgress((completedTests / testNames.length) * 100);
+      }, 200);
+
+      const results = await StressTestSuite.runAllStressTests();
+
+      clearInterval(progressInterval);
+      setProgress(100);
+      setCurrentTest("완료");
+      setTestResults(results as StressTestResults);
+    } catch (error) {
+      console.error("스트레스 테스트 실행 중 오류:", error);
+      setTestResults({
+        success: false,
+        totalTests: 0,
+        passedTests: 0,
+        failedTests: 1,
+        warningTests: 0,
+        totalDuration: 0,
+        results: [],
+        recommendation: [`스트레스 테스트 실행 중 오류가 발생했습니다: ${error}`],
+      });
+    } finally {
+      // 콘솔 로그 복원
+      console.log = originalLog;
+      setIsRunning(false);
+      setCurrentTest("");
+    }
+  };
+
+  const getStatusBadgeVariant = (status: string) => {
+    switch (status) {
+      case "passed":
+        return "default";
+      case "failed":
+        return "destructive";
+      case "warning":
+        return "secondary";
+      default:
+        return "outline";
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "passed":
+        return "✅";
+      case "failed":
+        return "❌";
+      case "warning":
+        return "⚠️";
+      default:
+        return "❓";
+    }
+  };
+
+  return (
+    <div className="container mx-auto space-y-6 p-6">
+      <div className="space-y-4 text-center">
+        <h1 className="text-3xl font-bold">🔥 타입 시스템 스트레스 테스트</h1>
+        <p className="text-muted-foreground">극한 상황에서 타입 시스템의 견고함과 성능을 검증합니다</p>
+        <div className="rounded-lg bg-orange-50 p-3 text-sm text-orange-600">
+          ⚠️ 주의: 이 테스트는 시스템에 높은 부하를 가할 수 있습니다
+        </div>
+
+        <Button
+          onClick={runStressTests}
+          disabled={isRunning}
+          size="lg"
+          className="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600"
+        >
+          {isRunning ? "🔥 스트레스 테스트 실행 중..." : "🚀 스트레스 테스트 시작"}
+        </Button>
+      </div>
+
+      {/* 진행률 표시 */}
+      {isRunning && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">📊 테스트 진행 상황</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span>현재 테스트: {currentTest}</span>
+                <span>{Math.round(progress)}%</span>
+              </div>
+              <Progress value={progress} className="h-3" />
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 테스트 결과 */}
+      {testResults && (
+        <div className="space-y-6">
+          {/* 요약 */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-2xl">
+                📈 스트레스 테스트 결과 요약
+                {testResults.success ? "🎉" : "⚠️"}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-green-600">{testResults.passedTests}</div>
+                  <div className="text-muted-foreground text-sm">통과</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-red-600">{testResults.failedTests}</div>
+                  <div className="text-muted-foreground text-sm">실패</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-yellow-600">{testResults.warningTests}</div>
+                  <div className="text-muted-foreground text-sm">경고</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-blue-600">{Math.round(testResults.totalDuration)}ms</div>
+                  <div className="text-muted-foreground text-sm">총 소요시간</div>
+                </div>
+              </div>
+
+              <div className="text-center">
+                <div className="text-lg font-semibold">
+                  성공률:{" "}
+                  {testResults.totalTests > 0
+                    ? Math.round((testResults.passedTests / testResults.totalTests) * 100)
+                    : 0}
+                  %
+                </div>
+              </div>
+
+              {testResults.success ? (
+                <div className="rounded-lg border border-green-200 bg-green-50 p-4">
+                  <div className="font-medium text-green-800">🎉 모든 스트레스 테스트 통과!</div>
+                  <div className="mt-2 text-sm text-green-600">
+                    타입 시스템이 극한 상황에서도 안정적으로 작동합니다.
+                  </div>
+                </div>
+              ) : (
+                <div className="rounded-lg border border-red-200 bg-red-50 p-4">
+                  <div className="font-medium text-red-800">⚠️ 일부 스트레스 테스트 실패</div>
+                  <div className="mt-2 text-sm text-red-600">
+                    개선이 필요한 영역이 있습니다. 아래 권장사항을 확인하세요.
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* 개별 테스트 결과 */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-xl">🔍 개별 테스트 상세 결과</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {testResults.results.map((result, index) => (
+                <div key={index} className="rounded-lg border p-4">
+                  <div className="mb-2 flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-lg">{getStatusIcon(result.status)}</span>
+                      <h3 className="font-semibold">{result.testName}</h3>
+                    </div>
+                    <Badge variant={getStatusBadgeVariant(result.status)}>
+                      {result.status === "passed" ? "통과" : result.status === "failed" ? "실패" : "경고"}
+                    </Badge>
+                  </div>
+
+                  <div className="text-muted-foreground mb-2 text-sm">{result.details}</div>
+
+                  <div className="text-muted-foreground text-xs">소요시간: {Math.round(result.duration)}ms</div>
+
+                  {/* 메트릭스 표시 */}
+                  {result.metrics && (
+                    <div className="mt-3 rounded bg-gray-50 p-3 text-xs">
+                      <div className="mb-1 font-medium">📊 상세 메트릭스:</div>
+                      <div className="grid grid-cols-2 gap-2">
+                        {Object.entries(result.metrics).map(([key, value]) => (
+                          <div key={key} className="flex justify-between">
+                            <span>{key}:</span>
+                            <span className="font-mono">
+                              {typeof value === "number"
+                                ? Number.isInteger(value)
+                                  ? value.toLocaleString()
+                                  : value.toFixed(2)
+                                : String(value)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* 권장사항 */}
+          {testResults.recommendation.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-xl">💡 개선 권장사항</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2">
+                  {testResults.recommendation.map((rec, index) => (
+                    <li key={index} className="flex items-start gap-2">
+                      <span className="mt-0.5 text-blue-500">•</span>
+                      <span className="text-sm">{rec}</span>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      )}
+
+      {/* 실시간 로그 (축소된 형태) */}
+      {testLogs.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">📋 테스트 로그 (최근 10개)</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="h-40 overflow-y-auto rounded bg-black p-4 font-mono text-xs text-green-400">
+              {testLogs.slice(-10).map((log, index) => (
+                <div key={index}>{log}</div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

frontend/app/test-type-safety/stress-test/page.tsx

@@ -0,0 +1,5 @@
+import StressTestPage from "../stress-test";
+
+export default function StressTestRoutePage() {
+  return <StressTestPage />;
+}

frontend/components/admin/AddColumnModal.tsx

@@ -0,0 +1,365 @@
+/**
+ * 컬럼 추가 모달 컴포넌트
+ * 기존 테이블에 새로운 컬럼을 추가하기 위한 모달
+ */
+
+"use client";
+
+import { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } 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 { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Loader2, Plus, AlertCircle } from "lucide-react";
+import { toast } from "sonner";
+import { ddlApi } from "../../lib/api/ddl";
+import {
+  AddColumnModalProps,
+  CreateColumnDefinition,
+  VALIDATION_RULES,
+  RESERVED_WORDS,
+  RESERVED_COLUMNS,
+} from "../../types/ddl";
+import { INPUT_TYPE_OPTIONS } from "../../types/input-types";
+
+export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddColumnModalProps) {
+  const [column, setColumn] = useState<CreateColumnDefinition>({
+    name: "",
+    label: "",
+    inputType: "text",
+    nullable: true,
+    order: 0,
+  });
+  const [loading, setLoading] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+
+  /**
+   * 모달 리셋
+   */
+  const resetModal = () => {
+    setColumn({
+      name: "",
+      label: "",
+      inputType: "text",
+      nullable: true,
+      order: 0,
+    });
+    setValidationErrors([]);
+  };
+
+  /**
+   * 모달 열림/닫힘 시 리셋
+   */
+  useEffect(() => {
+    if (isOpen) {
+      resetModal();
+    }
+  }, [isOpen]);
+
+  /**
+   * 컬럼 정보 업데이트
+   */
+  const updateColumn = (updates: Partial<CreateColumnDefinition>) => {
+    const newColumn = { ...column, ...updates };
+    setColumn(newColumn);
+
+    // 업데이트 후 검증
+    validateColumn(newColumn);
+  };
+
+  /**
+   * 컬럼 검증
+   */
+  const validateColumn = (columnData: CreateColumnDefinition) => {
+    const errors: string[] = [];
+
+    // 컬럼명 검증
+    if (!columnData.name) {
+      errors.push("컬럼명은 필수입니다.");
+    } else {
+      if (!VALIDATION_RULES.columnName.pattern.test(columnData.name)) {
+        errors.push(VALIDATION_RULES.columnName.errorMessage);
+      }
+
+      if (
+        columnData.name.length < VALIDATION_RULES.columnName.minLength ||
+        columnData.name.length > VALIDATION_RULES.columnName.maxLength
+      ) {
+        errors.push(
+          `컬럼명은 ${VALIDATION_RULES.columnName.minLength}-${VALIDATION_RULES.columnName.maxLength}자여야 합니다.`,
+        );
+      }
+
+      // 예약어 검증
+      if (RESERVED_WORDS.includes(columnData.name.toLowerCase() as any)) {
+        errors.push("SQL 예약어는 컬럼명으로 사용할 수 없습니다.");
+      }
+
+      // 예약된 컬럼명 검증
+      if (RESERVED_COLUMNS.includes(columnData.name.toLowerCase() as any)) {
+        errors.push("이미 자동 추가되는 기본 컬럼명입니다.");
+      }
+
+      // 네이밍 컨벤션 검증
+      if (columnData.name.startsWith("_") || columnData.name.endsWith("_")) {
+        errors.push("컬럼명은 언더스코어로 시작하거나 끝날 수 없습니다.");
+      }
+
+      if (columnData.name.includes("__")) {
+        errors.push("컬럼명에 연속된 언더스코어는 사용할 수 없습니다.");
+      }
+    }
+
+    // 입력타입 검증
+    if (!columnData.inputType) {
+      errors.push("입력타입을 선택해주세요.");
+    }
+
+    // 길이 검증 (길이를 지원하는 타입인 경우)
+    const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === columnData.inputType);
+    if (inputTypeOption?.supportsLength && columnData.length !== undefined) {
+      if (
+        columnData.length < VALIDATION_RULES.columnLength.min ||
+        columnData.length > VALIDATION_RULES.columnLength.max
+      ) {
+        errors.push(VALIDATION_RULES.columnLength.errorMessage);
+      }
+    }
+
+    setValidationErrors(errors);
+    return errors.length === 0;
+  };
+
+  /**
+   * 입력타입 변경 처리
+   */
+  const handleInputTypeChange = (inputType: string) => {
+    const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === inputType);
+    const updates: Partial<CreateColumnDefinition> = { inputType: inputType as any };
+
+    // 길이를 지원하는 타입이고 현재 길이가 없으면 기본값 설정
+    if (inputTypeOption?.supportsLength && !column.length && inputTypeOption.defaultLength) {
+      updates.length = inputTypeOption.defaultLength;
+    }
+
+    // 길이를 지원하지 않는 타입이면 길이 제거
+    if (!inputTypeOption?.supportsLength) {
+      updates.length = undefined;
+    }
+
+    updateColumn(updates);
+  };
+
+  /**
+   * 컬럼 추가 실행
+   */
+  const handleAddColumn = async () => {
+    if (!validateColumn(column)) {
+      toast.error("입력값을 확인해주세요.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const result = await ddlApi.addColumn(tableName, { column });
+
+      if (result.success) {
+        toast.success(result.message);
+        onSuccess(result);
+        onClose();
+      } else {
+        toast.error(result.error?.details || result.message);
+      }
+    } catch (error: any) {
+      console.error("컬럼 추가 실패:", error);
+      toast.error(error.response?.data?.error?.details || "컬럼 추가에 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * 폼 유효성 확인
+   */
+  const isFormValid = validationErrors.length === 0 && column.name && column.inputType;
+
+  const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === column.inputType);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Plus className="h-5 w-5" />
+            컬럼 추가 - {tableName}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* 검증 오류 표시 */}
+          {validationErrors.length > 0 && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                <div className="space-y-1">
+                  {validationErrors.map((error, index) => (
+                    <div key={index}>• {error}</div>
+                  ))}
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* 기본 정보 */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="columnName">
+                컬럼명 <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="columnName"
+                value={column.name}
+                onChange={(e) => updateColumn({ name: e.target.value })}
+                placeholder="column_name"
+                disabled={loading}
+                className={validationErrors.some((e) => e.includes("컬럼명")) ? "border-red-300" : ""}
+              />
+              <p className="text-muted-foreground text-xs">영문자로 시작, 영문자/숫자/언더스코어만 사용 가능</p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="columnLabel">라벨</Label>
+              <Input
+                id="columnLabel"
+                value={column.label || ""}
+                onChange={(e) => updateColumn({ label: e.target.value })}
+                placeholder="컬럼 라벨"
+                disabled={loading}
+              />
+              <p className="text-muted-foreground text-xs">화면에 표시될 라벨 (선택사항)</p>
+            </div>
+          </div>
+
+          {/* 타입 및 속성 */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>
+                입력타입 <span className="text-red-500">*</span>
+              </Label>
+              <Select value={column.inputType} onValueChange={handleInputTypeChange} disabled={loading}>
+                <SelectTrigger>
+                  <SelectValue placeholder="입력타입 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {INPUT_TYPE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      <div>
+                        <div className="font-medium">{option.label}</div>
+                        {option.description && (
+                          <div className="text-muted-foreground text-xs">{option.description}</div>
+                        )}
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="columnLength">길이</Label>
+              <Input
+                id="columnLength"
+                type="number"
+                value={column.length || ""}
+                onChange={(e) =>
+                  updateColumn({
+                    length: e.target.value ? parseInt(e.target.value) : undefined,
+                  })
+                }
+                placeholder={inputTypeOption?.defaultLength?.toString() || ""}
+                disabled={loading || !inputTypeOption?.supportsLength}
+                min={1}
+                max={65535}
+              />
+              <p className="text-muted-foreground text-xs">
+                {inputTypeOption?.supportsLength ? "1-65535 범위에서 설정 가능" : "이 타입은 길이 설정이 불가능합니다"}
+              </p>
+            </div>
+          </div>
+
+          {/* 기본값 및 NULL 허용 */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="defaultValue">기본값</Label>
+              <Input
+                id="defaultValue"
+                value={column.defaultValue || ""}
+                onChange={(e) => updateColumn({ defaultValue: e.target.value })}
+                placeholder="기본값 (선택사항)"
+                disabled={loading}
+              />
+            </div>
+
+            <div className="flex items-center space-x-2 pt-6">
+              <Checkbox
+                id="required"
+                checked={!column.nullable}
+                onCheckedChange={(checked) => updateColumn({ nullable: !checked })}
+                disabled={loading}
+              />
+              <Label htmlFor="required" className="text-sm font-medium">
+                필수 입력 (NOT NULL)
+              </Label>
+            </div>
+          </div>
+
+          {/* 설명 */}
+          <div className="space-y-2">
+            <Label htmlFor="description">설명</Label>
+            <Textarea
+              id="description"
+              value={column.description || ""}
+              onChange={(e) => updateColumn({ description: e.target.value })}
+              placeholder="컬럼에 대한 설명 (선택사항)"
+              disabled={loading}
+              rows={3}
+            />
+          </div>
+
+          {/* 안내 사항 */}
+          <Alert>
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>
+              컬럼 추가 후에는 해당 컬럼을 삭제하거나 타입을 변경할 수 없습니다. 신중하게 검토 후 추가해주세요.
+            </AlertDescription>
+          </Alert>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={loading}>
+            취소
+          </Button>
+
+          <Button
+            onClick={handleAddColumn}
+            disabled={!isFormValid || loading}
+            className="bg-blue-600 hover:bg-blue-700"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                추가 중...
+              </>
+            ) : (
+              "컬럼 추가"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/components/admin/ColumnDefinitionTable.tsx

@@ -0,0 +1,318 @@
+/**
+ * 컬럼 정의 테이블 컴포넌트
+ * 테이블 생성 시 컬럼 정의를 위한 편집 가능한 테이블
+ */
+
+"use client";
+
+import { useState } from "react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { X, AlertCircle } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  CreateColumnDefinition,
+  ColumnDefinitionTableProps,
+  VALIDATION_RULES,
+  RESERVED_WORDS,
+  RESERVED_COLUMNS,
+} from "../../types/ddl";
+import { INPUT_TYPE_OPTIONS } from "../../types/input-types";
+
+export function ColumnDefinitionTable({ columns, onChange, disabled = false }: ColumnDefinitionTableProps) {
+  const [validationErrors, setValidationErrors] = useState<Record<number, string[]>>({});
+
+  /**
+   * 컬럼 정보 업데이트
+   */
+  const updateColumn = (index: number, updates: Partial<CreateColumnDefinition>) => {
+    const newColumns = [...columns];
+    newColumns[index] = { ...newColumns[index], ...updates };
+    onChange(newColumns);
+
+    // 업데이트 후 해당 컬럼 검증
+    validateColumn(index, newColumns[index]);
+  };
+
+  /**
+   * 컬럼 제거
+   */
+  const removeColumn = (index: number) => {
+    if (columns.length <= 1) return; // 최소 1개 컬럼 유지
+
+    const newColumns = columns.filter((_, i) => i !== index);
+    onChange(newColumns);
+
+    // 검증 오류도 함께 제거
+    const newErrors = { ...validationErrors };
+    delete newErrors[index];
+
+    // 인덱스 재조정
+    const adjustedErrors: Record<number, string[]> = {};
+    Object.entries(newErrors).forEach(([key, value]) => {
+      const idx = parseInt(key);
+      if (idx > index) {
+        adjustedErrors[idx - 1] = value;
+      } else if (idx < index) {
+        adjustedErrors[idx] = value;
+      }
+    });
+
+    setValidationErrors(adjustedErrors);
+  };
+
+  /**
+   * 개별 컬럼 검증
+   */
+  const validateColumn = (index: number, column: CreateColumnDefinition) => {
+    const errors: string[] = [];
+
+    // 컬럼명 검증
+    if (!column.name) {
+      errors.push("컬럼명은 필수입니다");
+    } else {
+      if (!VALIDATION_RULES.columnName.pattern.test(column.name)) {
+        errors.push(VALIDATION_RULES.columnName.errorMessage);
+      }
+
+      if (
+        column.name.length < VALIDATION_RULES.columnName.minLength ||
+        column.name.length > VALIDATION_RULES.columnName.maxLength
+      ) {
+        errors.push(
+          `컬럼명은 ${VALIDATION_RULES.columnName.minLength}-${VALIDATION_RULES.columnName.maxLength}자여야 합니다`,
+        );
+      }
+
+      // 예약어 검증
+      if (RESERVED_WORDS.includes(column.name.toLowerCase() as any)) {
+        errors.push("예약어는 컬럼명으로 사용할 수 없습니다");
+      }
+
+      // 예약된 컬럼명 검증
+      if (RESERVED_COLUMNS.includes(column.name.toLowerCase() as any)) {
+        errors.push("이미 자동 추가되는 기본 컬럼명입니다");
+      }
+
+      // 중복 검증
+      const duplicateCount = columns.filter((col) => col.name.toLowerCase() === column.name.toLowerCase()).length;
+      if (duplicateCount > 1) {
+        errors.push("중복된 컬럼명입니다");
+      }
+    }
+
+    // 입력타입 검증
+    if (!column.inputType) {
+      errors.push("입력타입을 선택해주세요");
+    }
+
+    // 길이 검증 (길이를 지원하는 타입인 경우)
+    const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === column.inputType);
+    if (inputTypeOption?.supportsLength && column.length !== undefined) {
+      if (column.length < VALIDATION_RULES.columnLength.min || column.length > VALIDATION_RULES.columnLength.max) {
+        errors.push(VALIDATION_RULES.columnLength.errorMessage);
+      }
+    }
+
+    // 검증 오류 상태 업데이트
+    setValidationErrors((prev) => ({
+      ...prev,
+      [index]: errors,
+    }));
+
+    return errors.length === 0;
+  };
+
+  /**
+   * 입력타입 변경 시 길이 기본값 설정
+   */
+  const handleInputTypeChange = (index: number, inputType: string) => {
+    const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === inputType);
+    const updates: Partial<CreateColumnDefinition> = { inputType: inputType as any };
+
+    // 길이를 지원하는 타입이고 현재 길이가 없으면 기본값 설정
+    if (inputTypeOption?.supportsLength && !columns[index].length && inputTypeOption.defaultLength) {
+      updates.length = inputTypeOption.defaultLength;
+    }
+
+    // 길이를 지원하지 않는 타입이면 길이 제거
+    if (!inputTypeOption?.supportsLength) {
+      updates.length = undefined;
+    }
+
+    updateColumn(index, updates);
+  };
+
+  /**
+   * 전체 검증 상태 확인
+   */
+  const hasValidationErrors = Object.values(validationErrors).some((errors) => errors.length > 0);
+
+  return (
+    <div className="space-y-4">
+      {/* 검증 오류 요약 */}
+      {hasValidationErrors && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>컬럼 정의에 오류가 있습니다. 각 컬럼의 오류를 확인해주세요.</AlertDescription>
+        </Alert>
+      )}
+
+      {/* 컬럼 정의 테이블 */}
+      <div className="overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[150px]">
+                컬럼명 <span className="text-red-500">*</span>
+              </TableHead>
+              <TableHead className="w-[150px]">라벨</TableHead>
+              <TableHead className="w-[120px]">
+                입력타입 <span className="text-red-500">*</span>
+              </TableHead>
+              <TableHead className="w-[80px]">필수</TableHead>
+              <TableHead className="w-[100px]">길이</TableHead>
+              <TableHead className="w-[120px]">기본값</TableHead>
+              <TableHead>설명</TableHead>
+              <TableHead className="w-[50px]"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {columns.map((column, index) => {
+              const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === column.inputType);
+              const rowErrors = validationErrors[index] || [];
+              const hasRowError = rowErrors.length > 0;
+
+              return (
+                <TableRow key={index} className={hasRowError ? "bg-red-50" : ""}>
+                  <TableCell>
+                    <div className="space-y-1">
+                      <Input
+                        value={column.name}
+                        onChange={(e) => updateColumn(index, { name: e.target.value })}
+                        placeholder="column_name"
+                        disabled={disabled}
+                        className={hasRowError ? "border-red-300" : ""}
+                      />
+                      {rowErrors.length > 0 && (
+                        <div className="space-y-1 text-xs text-red-600">
+                          {rowErrors.map((error, i) => (
+                            <div key={i}>{error}</div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </TableCell>
+
+                  <TableCell>
+                    <Input
+                      value={column.label || ""}
+                      onChange={(e) => updateColumn(index, { label: e.target.value })}
+                      placeholder="컬럼 라벨"
+                      disabled={disabled}
+                    />
+                  </TableCell>
+
+                  <TableCell>
+                    <Select
+                      value={column.inputType}
+                      onValueChange={(value) => handleInputTypeChange(index, value)}
+                      disabled={disabled}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="입력 타입 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {INPUT_TYPE_OPTIONS.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            <div>
+                              <div className="font-medium">{option.label}</div>
+                              {option.description && (
+                                <div className="text-muted-foreground text-xs">{option.description}</div>
+                              )}
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </TableCell>
+
+                  <TableCell>
+                    <div className="flex items-center justify-center">
+                      <Checkbox
+                        checked={!column.nullable}
+                        onCheckedChange={(checked) => updateColumn(index, { nullable: !checked })}
+                        disabled={disabled}
+                      />
+                    </div>
+                  </TableCell>
+
+                  <TableCell>
+                    <Input
+                      type="number"
+                      value={column.length || ""}
+                      onChange={(e) =>
+                        updateColumn(index, {
+                          length: e.target.value ? parseInt(e.target.value) : undefined,
+                        })
+                      }
+                      placeholder={inputTypeOption?.defaultLength?.toString() || ""}
+                      disabled={disabled || !inputTypeOption?.supportsLength}
+                      min={1}
+                      max={65535}
+                    />
+                  </TableCell>
+
+                  <TableCell>
+                    <Input
+                      value={column.defaultValue || ""}
+                      onChange={(e) => updateColumn(index, { defaultValue: e.target.value })}
+                      placeholder="기본값"
+                      disabled={disabled}
+                    />
+                  </TableCell>
+
+                  <TableCell>
+                    <Textarea
+                      value={column.description || ""}
+                      onChange={(e) => updateColumn(index, { description: e.target.value })}
+                      placeholder="컬럼 설명"
+                      disabled={disabled}
+                      rows={1}
+                      className="min-h-[36px] resize-none"
+                    />
+                  </TableCell>
+
+                  <TableCell>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeColumn(index)}
+                      disabled={disabled || columns.length === 1}
+                      className="h-8 w-8 p-0"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* 도움말 */}
+      <div className="text-muted-foreground space-y-1 text-sm">
+        <div>• 컬럼명은 영문자로 시작하고 영문자, 숫자, 언더스코어만 사용 가능합니다.</div>
+        <div>• 다음 컬럼들은 자동으로 추가됩니다: id (PK), created_date, updated_date, company_code</div>
+        <div>• 필수 컬럼은 NOT NULL 제약조건이 추가됩니다.</div>
+        <div>• 길이는 text, code, email, tel 등의 타입에서만 설정 가능합니다.</div>
+      </div>
+    </div>
+  );
+}

frontend/components/admin/CreateTableModal.tsx

@@ -0,0 +1,364 @@
+/**
+ * 테이블 생성 모달 컴포넌트
+ * 새로운 테이블을 생성하기 위한 모달
+ */
+
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} 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 { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Loader2, Info, AlertCircle, CheckCircle2, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { ColumnDefinitionTable } from "./ColumnDefinitionTable";
+import { ddlApi } from "../../lib/api/ddl";
+import {
+  CreateTableModalProps,
+  CreateColumnDefinition,
+  VALIDATION_RULES,
+  SYSTEM_TABLES,
+  RESERVED_WORDS,
+} from "../../types/ddl";
+
+export function CreateTableModal({ isOpen, onClose, onSuccess }: CreateTableModalProps) {
+  const [tableName, setTableName] = useState("");
+  const [description, setDescription] = useState("");
+  const [columns, setColumns] = useState<CreateColumnDefinition[]>([
+    {
+      name: "",
+      label: "",
+      inputType: "text",
+      nullable: true,
+      order: 1,
+    },
+  ]);
+  const [loading, setLoading] = useState(false);
+  const [validating, setValidating] = useState(false);
+  const [tableNameError, setTableNameError] = useState("");
+  const [validationResult, setValidationResult] = useState<any>(null);
+
+  /**
+   * 모달 리셋
+   */
+  const resetModal = () => {
+    setTableName("");
+    setDescription("");
+    setColumns([
+      {
+        name: "",
+        label: "",
+        inputType: "text",
+        nullable: true,
+        order: 1,
+      },
+    ]);
+    setTableNameError("");
+    setValidationResult(null);
+  };
+
+  /**
+   * 모달 열림/닫힘 시 리셋
+   */
+  useEffect(() => {
+    if (isOpen) {
+      resetModal();
+    }
+  }, [isOpen]);
+
+  /**
+   * 테이블명 검증
+   */
+  const validateTableName = (name: string): string => {
+    if (!name) {
+      return "테이블명은 필수입니다.";
+    }
+
+    if (!VALIDATION_RULES.tableName.pattern.test(name)) {
+      return VALIDATION_RULES.tableName.errorMessage;
+    }
+
+    if (name.length < VALIDATION_RULES.tableName.minLength || name.length > VALIDATION_RULES.tableName.maxLength) {
+      return `테이블명은 ${VALIDATION_RULES.tableName.minLength}-${VALIDATION_RULES.tableName.maxLength}자여야 합니다.`;
+    }
+
+    if (SYSTEM_TABLES.includes(name.toLowerCase() as any)) {
+      return "시스템 테이블명으로 사용할 수 없습니다.";
+    }
+
+    if (RESERVED_WORDS.includes(name.toLowerCase() as any)) {
+      return "SQL 예약어는 테이블명으로 사용할 수 없습니다.";
+    }
+
+    if (name.startsWith("_") || name.endsWith("_")) {
+      return "테이블명은 언더스코어로 시작하거나 끝날 수 없습니다.";
+    }
+
+    if (name.includes("__")) {
+      return "테이블명에 연속된 언더스코어는 사용할 수 없습니다.";
+    }
+
+    return "";
+  };
+
+  /**
+   * 테이블명 변경 처리
+   */
+  const handleTableNameChange = (value: string) => {
+    setTableName(value);
+    const error = validateTableName(value);
+    setTableNameError(error);
+
+    // 검증 결과 초기화
+    if (validationResult) {
+      setValidationResult(null);
+    }
+  };
+
+  /**
+   * 컬럼 추가
+   */
+  const addColumn = () => {
+    setColumns([
+      ...columns,
+      {
+        name: "",
+        label: "",
+        inputType: "text",
+        nullable: true,
+        order: columns.length + 1,
+      },
+    ]);
+  };
+
+  /**
+   * 테이블 생성 사전 검증
+   */
+  const validateTable = async () => {
+    if (tableNameError || !tableName) {
+      toast.error("테이블명을 올바르게 입력해주세요.");
+      return;
+    }
+
+    const validColumns = columns.filter((col) => col.name && col.inputType);
+    if (validColumns.length === 0) {
+      toast.error("최소 1개의 유효한 컬럼이 필요합니다.");
+      return;
+    }
+
+    setValidating(true);
+    try {
+      const result = await ddlApi.validateTableCreation({
+        tableName,
+        columns: validColumns,
+        description,
+      });
+
+      setValidationResult(result);
+
+      if (result.isValid) {
+        toast.success("검증 완료! 테이블을 생성할 수 있습니다.");
+      } else {
+        toast.error("검증 실패. 오류를 확인해주세요.");
+      }
+    } catch (error: any) {
+      console.error("테이블 검증 실패:", error);
+      toast.error("검증 중 오류가 발생했습니다.");
+    } finally {
+      setValidating(false);
+    }
+  };
+
+  /**
+   * 테이블 생성 실행
+   */
+  const handleCreateTable = async () => {
+    if (tableNameError || !tableName) {
+      toast.error("테이블명을 올바르게 입력해주세요.");
+      return;
+    }
+
+    const validColumns = columns.filter((col) => col.name && col.inputType);
+    if (validColumns.length === 0) {
+      toast.error("최소 1개의 유효한 컬럼이 필요합니다.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const result = await ddlApi.createTable({
+        tableName,
+        columns: validColumns,
+        description,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        onSuccess(result);
+        onClose();
+      } else {
+        toast.error(result.error?.details || result.message);
+      }
+    } catch (error: any) {
+      console.error("테이블 생성 실패:", error);
+      toast.error(error.response?.data?.error?.details || "테이블 생성에 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * 폼 유효성 확인
+   */
+  const isFormValid = !tableNameError && tableName && columns.some((col) => col.name && col.inputType);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-h-[90vh] max-w-6xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Plus className="h-5 w-5" />새 테이블 생성
+          </DialogTitle>
+          <DialogDescription>
+            최고 관리자만 새로운 테이블을 생성할 수 있습니다. 테이블명과 컬럼 정의를 입력하고 검증 후 생성하세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* 테이블 기본 정보 */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="tableName">
+                테이블명 <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="tableName"
+                value={tableName}
+                onChange={(e) => handleTableNameChange(e.target.value)}
+                placeholder="예: customer_info"
+                className={tableNameError ? "border-red-300" : ""}
+              />
+              {tableNameError && <p className="text-sm text-red-600">{tableNameError}</p>}
+              <p className="text-muted-foreground text-xs">영문자로 시작, 영문자/숫자/언더스코어만 사용 가능</p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">설명</Label>
+              <Input
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="테이블에 대한 설명"
+              />
+            </div>
+          </div>
+
+          {/* 컬럼 정의 */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label>
+                컬럼 정의 <span className="text-red-500">*</span>
+              </Label>
+              <Button type="button" variant="outline" size="sm" onClick={addColumn} disabled={loading}>
+                <Plus className="mr-1 h-4 w-4" />
+                컬럼 추가
+              </Button>
+            </div>
+
+            <ColumnDefinitionTable columns={columns} onChange={setColumns} disabled={loading} />
+          </div>
+
+          {/* 자동 추가 컬럼 안내 */}
+          <Alert>
+            <Info className="h-4 w-4" />
+            <AlertTitle>자동 추가 컬럼</AlertTitle>
+            <AlertDescription>
+              다음 컬럼들이 자동으로 추가됩니다:
+              <code className="bg-muted mx-1 rounded px-1 py-0.5 text-sm">id</code>(기본키),
+              <code className="bg-muted mx-1 rounded px-1 py-0.5 text-sm">created_date</code>,
+              <code className="bg-muted mx-1 rounded px-1 py-0.5 text-sm">updated_date</code>,
+              <code className="bg-muted mx-1 rounded px-1 py-0.5 text-sm">company_code</code>
+            </AlertDescription>
+          </Alert>
+
+          {/* 검증 결과 */}
+          {validationResult && (
+            <Alert variant={validationResult.isValid ? "default" : "destructive"}>
+              {validationResult.isValid ? <CheckCircle2 className="h-4 w-4" /> : <AlertCircle className="h-4 w-4" />}
+              <AlertTitle>{validationResult.isValid ? "검증 성공" : "검증 실패"}</AlertTitle>
+              <AlertDescription>
+                <div>{validationResult.summary}</div>
+                {validationResult.errors && validationResult.errors.length > 0 && (
+                  <div className="mt-2 space-y-1">
+                    <div className="font-medium">오류:</div>
+                    <ul className="list-inside list-disc space-y-1">
+                      {validationResult.errors.map((error: string, index: number) => (
+                        <li key={index} className="text-sm">
+                          {error}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {validationResult.warnings && validationResult.warnings.length > 0 && (
+                  <div className="mt-2 space-y-1">
+                    <div className="font-medium">경고:</div>
+                    <ul className="list-inside list-disc space-y-1">
+                      {validationResult.warnings.map((warning: string, index: number) => (
+                        <li key={index} className="text-sm text-orange-600">
+                          {warning}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={onClose} disabled={loading}>
+            취소
+          </Button>
+
+          <Button variant="secondary" onClick={validateTable} disabled={!isFormValid || validating || loading}>
+            {validating ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                검증 중...
+              </>
+            ) : (
+              "검증하기"
+            )}
+          </Button>
+
+          <Button
+            onClick={handleCreateTable}
+            disabled={!isFormValid || loading || (validationResult && !validationResult.isValid)}
+            className="bg-green-600 hover:bg-green-700"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                생성 중...
+              </>
+            ) : (
+              "테이블 생성"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/components/admin/DDLLogViewer.tsx

@@ -0,0 +1,407 @@
+/**
+ * DDL 로그 뷰어 컴포넌트
+ * DDL 실행 로그와 통계를 표시
+ */
+
+"use client";
+
+import { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  RefreshCw,
+  Search,
+  Calendar,
+  User,
+  Database,
+  CheckCircle2,
+  XCircle,
+  BarChart3,
+  Clock,
+  Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
+import { ddlApi } from "../../lib/api/ddl";
+import { DDLLogViewerProps, DDLExecutionLog, DDLStatistics } from "../../types/ddl";
+
+export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
+  const [logs, setLogs] = useState<DDLExecutionLog[]>([]);
+  const [statistics, setStatistics] = useState<DDLStatistics | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  // 필터 상태
+  const [userFilter, setUserFilter] = useState("");
+  const [ddlTypeFilter, setDdlTypeFilter] = useState("all");
+  const [limit, setLimit] = useState(50);
+
+  /**
+   * 로그 및 통계 로드
+   */
+  const loadData = async (showLoading = true) => {
+    if (showLoading) setLoading(true);
+    setRefreshing(true);
+
+    try {
+      // 로그와 통계를 병렬로 로드
+      const [logsResult, statsResult] = await Promise.all([
+        ddlApi.getDDLLogs({
+          limit,
+          userId: userFilter || undefined,
+          ddlType: ddlTypeFilter === "all" ? undefined : ddlTypeFilter,
+        }),
+        ddlApi.getDDLStatistics(),
+      ]);
+
+      setLogs(logsResult.logs);
+      setStatistics(statsResult);
+    } catch (error) {
+      console.error("DDL 로그 로드 실패:", error);
+      toast.error("DDL 로그를 불러오는데 실패했습니다.");
+    } finally {
+      if (showLoading) setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  /**
+   * 필터 적용
+   */
+  const applyFilters = () => {
+    loadData(false);
+  };
+
+  /**
+   * 필터 초기화
+   */
+  const resetFilters = () => {
+    setUserFilter("");
+    setDdlTypeFilter("");
+    setLimit(50);
+  };
+
+  /**
+   * 로그 정리
+   */
+  const cleanupLogs = async () => {
+    if (!confirm("90일 이전의 오래된 로그를 삭제하시겠습니까?")) {
+      return;
+    }
+
+    try {
+      const result = await ddlApi.cleanupOldLogs(90);
+      toast.success(`${result.deletedCount}개의 오래된 로그가 삭제되었습니다.`);
+      loadData(false);
+    } catch (error) {
+      console.error("로그 정리 실패:", error);
+      toast.error("로그 정리에 실패했습니다.");
+    }
+  };
+
+  /**
+   * 컴포넌트 마운트 시 데이터 로드
+   */
+  useEffect(() => {
+    if (isOpen) {
+      loadData();
+    }
+  }, [isOpen]);
+
+  /**
+   * DDL 타입 배지 색상
+   */
+  const getDDLTypeBadgeVariant = (ddlType: string) => {
+    switch (ddlType) {
+      case "CREATE_TABLE":
+        return "default";
+      case "ADD_COLUMN":
+        return "secondary";
+      case "DROP_TABLE":
+        return "destructive";
+      case "DROP_COLUMN":
+        return "outline";
+      default:
+        return "outline";
+    }
+  };
+
+  /**
+   * 성공률 계산
+   */
+  const getSuccessRate = (stats: DDLStatistics) => {
+    if (stats.totalExecutions === 0) return 0;
+    return Math.round((stats.successfulExecutions / stats.totalExecutions) * 100);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-h-[90vh] max-w-7xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Database className="h-5 w-5" />
+            DDL 실행 로그 및 통계
+          </DialogTitle>
+        </DialogHeader>
+
+        <Tabs defaultValue="logs" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="logs">실행 로그</TabsTrigger>
+            <TabsTrigger value="statistics">통계</TabsTrigger>
+          </TabsList>
+
+          {/* 실행 로그 탭 */}
+          <TabsContent value="logs" className="space-y-4">
+            {/* 필터 및 컨트롤 */}
+            <div className="bg-muted/50 flex flex-wrap items-center gap-2 rounded-lg p-4">
+              <div className="flex items-center gap-2">
+                <User className="h-4 w-4" />
+                <Input
+                  placeholder="사용자 ID"
+                  value={userFilter}
+                  onChange={(e) => setUserFilter(e.target.value)}
+                  className="w-32"
+                />
+              </div>
+
+              <Select value={ddlTypeFilter} onValueChange={setDdlTypeFilter}>
+                <SelectTrigger className="w-40">
+                  <SelectValue placeholder="DDL 타입" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">전체</SelectItem>
+                  <SelectItem value="CREATE_TABLE">테이블 생성</SelectItem>
+                  <SelectItem value="ADD_COLUMN">컬럼 추가</SelectItem>
+                  <SelectItem value="DROP_TABLE">테이블 삭제</SelectItem>
+                  <SelectItem value="DROP_COLUMN">컬럼 삭제</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={limit.toString()} onValueChange={(value) => setLimit(parseInt(value))}>
+                <SelectTrigger className="w-24">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="25">25개</SelectItem>
+                  <SelectItem value="50">50개</SelectItem>
+                  <SelectItem value="100">100개</SelectItem>
+                  <SelectItem value="200">200개</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Button onClick={applyFilters} size="sm">
+                <Search className="mr-1 h-4 w-4" />
+                검색
+              </Button>
+
+              <Button onClick={resetFilters} variant="outline" size="sm">
+                초기화
+              </Button>
+
+              <div className="flex-1" />
+
+              <Button onClick={() => loadData(false)} disabled={refreshing} variant="outline" size="sm">
+                <RefreshCw className={`mr-1 h-4 w-4 ${refreshing ? "animate-spin" : ""}`} />
+                새로고침
+              </Button>
+
+              <Button onClick={cleanupLogs} variant="outline" size="sm">
+                <Trash2 className="mr-1 h-4 w-4" />
+                로그 정리
+              </Button>
+            </div>
+
+            {/* 로그 테이블 */}
+            {loading ? (
+              <div className="flex items-center justify-center py-8">
+                <RefreshCw className="mr-2 h-6 w-6 animate-spin" />
+                로그를 불러오는 중...
+              </div>
+            ) : (
+              <div className="rounded-lg border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>실행 시간</TableHead>
+                      <TableHead>사용자</TableHead>
+                      <TableHead>DDL 타입</TableHead>
+                      <TableHead>테이블명</TableHead>
+                      <TableHead>결과</TableHead>
+                      <TableHead>쿼리 미리보기</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {logs.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="text-muted-foreground py-8 text-center">
+                          표시할 로그가 없습니다.
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      logs.map((log) => (
+                        <TableRow key={log.id}>
+                          <TableCell>
+                            <div className="flex items-center gap-1 text-sm">
+                              <Clock className="h-3 w-3" />
+                              {format(new Date(log.executed_at), "yyyy-MM-dd HH:mm:ss", { locale: ko })}
+                            </div>
+                          </TableCell>
+
+                          <TableCell>
+                            <Badge variant="outline">{log.user_id}</Badge>
+                          </TableCell>
+
+                          <TableCell>
+                            <Badge variant={getDDLTypeBadgeVariant(log.ddl_type)}>{log.ddl_type}</Badge>
+                          </TableCell>
+
+                          <TableCell>
+                            <code className="bg-muted rounded px-2 py-1 text-sm">{log.table_name}</code>
+                          </TableCell>
+
+                          <TableCell>
+                            <div className="flex items-center gap-2">
+                              {log.success ? (
+                                <CheckCircle2 className="h-4 w-4 text-green-600" />
+                              ) : (
+                                <XCircle className="h-4 w-4 text-red-600" />
+                              )}
+                              <span className={log.success ? "text-green-600" : "text-red-600"}>
+                                {log.success ? "성공" : "실패"}
+                              </span>
+                            </div>
+                            {log.error_message && (
+                              <div className="mt-1 max-w-xs truncate text-xs text-red-600">{log.error_message}</div>
+                            )}
+                          </TableCell>
+
+                          <TableCell>
+                            <code className="text-muted-foreground block max-w-xs truncate text-xs">
+                              {log.ddl_query_preview}
+                            </code>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </TabsContent>
+
+          {/* 통계 탭 */}
+          <TabsContent value="statistics" className="space-y-4">
+            {statistics && (
+              <div className="grid gap-4">
+                {/* 전체 통계 */}
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+                  <Card>
+                    <CardHeader className="pb-2">
+                      <CardTitle className="text-sm font-medium">전체 실행</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-2xl font-bold">{statistics.totalExecutions}</div>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader className="pb-2">
+                      <CardTitle className="text-sm font-medium">성공</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-2xl font-bold text-green-600">{statistics.successfulExecutions}</div>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader className="pb-2">
+                      <CardTitle className="text-sm font-medium">실패</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-2xl font-bold text-red-600">{statistics.failedExecutions}</div>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader className="pb-2">
+                      <CardTitle className="text-sm font-medium">성공률</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-2xl font-bold">{getSuccessRate(statistics)}%</div>
+                    </CardContent>
+                  </Card>
+                </div>
+
+                {/* DDL 타입별 통계 */}
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">DDL 타입별 실행 횟수</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-2">
+                      {Object.entries(statistics.byDDLType).map(([type, count]) => (
+                        <div key={type} className="flex items-center justify-between">
+                          <Badge variant={getDDLTypeBadgeVariant(type)}>{type}</Badge>
+                          <span className="font-medium">{count}회</span>
+                        </div>
+                      ))}
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">사용자별 실행 횟수</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-2">
+                      {Object.entries(statistics.byUser).map(([user, count]) => (
+                        <div key={user} className="flex items-center justify-between">
+                          <Badge variant="outline">{user}</Badge>
+                          <span className="font-medium">{count}회</span>
+                        </div>
+                      ))}
+                    </CardContent>
+                  </Card>
+                </div>
+
+                {/* 최근 실패 로그 */}
+                {statistics.recentFailures.length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base text-red-600">최근 실패 로그</CardTitle>
+                      <CardDescription>최근 발생한 DDL 실행 실패 내역입니다.</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-2">
+                        {statistics.recentFailures.map((failure, index) => (
+                          <div key={index} className="rounded-lg border border-red-200 bg-red-50 p-3">
+                            <div className="mb-1 flex items-center justify-between">
+                              <div className="flex items-center gap-2">
+                                <Badge variant={getDDLTypeBadgeVariant(failure.ddl_type)}>{failure.ddl_type}</Badge>
+                                <code className="text-sm">{failure.table_name}</code>
+                              </div>
+                              <span className="text-muted-foreground text-xs">
+                                {format(new Date(failure.executed_at), "MM-dd HH:mm", { locale: ko })}
+                              </span>
+                            </div>
+                            <div className="text-sm text-red-600">{failure.error_message}</div>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/components/admin/ExternalDbConnectionModal.tsx

@@ -221,7 +221,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
         return;
       }
 
-      const result = await ExternalDbConnectionAPI.testConnection(connection.id);
+      const result = await ExternalDbConnectionAPI.testConnection(connection.id, formData.password);
       setTestResult(result);
 
       if (result.success) {

frontend/components/common/FormValidationIndicator.tsx

@@ -0,0 +1,378 @@
+/**
+ * 폼 검증 상태 표시 컴포넌트
+ * 실시간 검증 피드백과 사용자 가이드를 제공
+ */
+
+import React from "react";
+import { AlertCircle, CheckCircle, Clock, AlertTriangle, Info } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Progress } from "@/components/ui/progress";
+import { FormValidationState, SaveState, ValidationError, ValidationWarning } from "@/hooks/useFormValidation";
+
+// Props 타입
+export interface FormValidationIndicatorProps {
+  validationState: FormValidationState;
+  saveState: SaveState;
+  onValidate?: () => void;
+  onSave?: () => void;
+  canSave?: boolean;
+  compact?: boolean;
+  showDetails?: boolean;
+  showPerformance?: boolean;
+}
+
+/**
+ * 메인 검증 상태 표시 컴포넌트
+ */
+export const FormValidationIndicator: React.FC<FormValidationIndicatorProps> = ({
+  validationState,
+  saveState,
+  onValidate,
+  onSave,
+  canSave = false,
+  compact = false,
+  showDetails = true,
+  showPerformance = false,
+}) => {
+  if (compact) {
+    return (
+      <CompactValidationIndicator
+        validationState={validationState}
+        saveState={saveState}
+        onSave={onSave}
+        canSave={canSave}
+      />
+    );
+  }
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium">폼 검증 상태</CardTitle>
+          <div className="flex items-center gap-2">
+            <ValidationStatusBadge status={validationState.status} />
+            {validationState.lastValidated && (
+              <span className="text-muted-foreground text-xs">
+                {validationState.lastValidated.toLocaleTimeString()}
+              </span>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* 검증 요약 */}
+        <ValidationSummary validationState={validationState} />
+
+        {/* 액션 버튼들 */}
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onValidate}
+            disabled={validationState.status === "validating"}
+            className="flex items-center gap-2"
+          >
+            {validationState.status === "validating" ? (
+              <Clock className="h-4 w-4 animate-spin" />
+            ) : (
+              <CheckCircle className="h-4 w-4" />
+            )}
+            검증하기
+          </Button>
+
+          <Button
+            size="sm"
+            onClick={onSave}
+            disabled={!canSave || saveState.status === "saving"}
+            className="flex items-center gap-2"
+          >
+            {saveState.status === "saving" ? (
+              <Clock className="h-4 w-4 animate-spin" />
+            ) : (
+              <CheckCircle className="h-4 w-4" />
+            )}
+            저장하기
+          </Button>
+        </div>
+
+        {/* 상세 정보 */}
+        {showDetails && (
+          <>
+            <Separator />
+            <ValidationDetails validationState={validationState} />
+          </>
+        )}
+
+        {/* 성능 정보 */}
+        {showPerformance && saveState.result?.performance && (
+          <>
+            <Separator />
+            <PerformanceInfo performance={saveState.result.performance} />
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+/**
+ * 간단한 검증 상태 표시
+ */
+const CompactValidationIndicator: React.FC<{
+  validationState: FormValidationState;
+  saveState: SaveState;
+  onSave?: () => void;
+  canSave: boolean;
+}> = ({ validationState, saveState, onSave, canSave }) => {
+  return (
+    <div className="bg-muted/50 flex items-center gap-3 rounded-md p-2">
+      <ValidationStatusBadge status={validationState.status} />
+
+      <div className="flex-1 text-sm">
+        {validationState.errors.length > 0 && (
+          <span className="text-destructive">{validationState.errors.length}개 오류</span>
+        )}
+        {validationState.warnings.length > 0 && (
+          <span className="ml-2 text-orange-600">{validationState.warnings.length}개 경고</span>
+        )}
+        {validationState.isValid && <span className="text-green-600">검증 통과</span>}
+      </div>
+
+      <Button size="sm" onClick={onSave} disabled={!canSave || saveState.status === "saving"} className="h-8">
+        {saveState.status === "saving" ? "저장중..." : "저장"}
+      </Button>
+    </div>
+  );
+};
+
+/**
+ * 검증 상태 배지
+ */
+const ValidationStatusBadge: React.FC<{ status: FormValidationState["status"] }> = ({ status }) => {
+  const getStatusConfig = () => {
+    switch (status) {
+      case "idle":
+        return {
+          variant: "secondary" as const,
+          icon: Info,
+          text: "대기중",
+        };
+      case "validating":
+        return {
+          variant: "secondary" as const,
+          icon: Clock,
+          text: "검증중",
+          animate: true,
+        };
+      case "valid":
+        return {
+          variant: "default" as const,
+          icon: CheckCircle,
+          text: "유효함",
+          className: "bg-green-500 hover:bg-green-600",
+        };
+      case "invalid":
+        return {
+          variant: "destructive" as const,
+          icon: AlertCircle,
+          text: "오류",
+        };
+      default:
+        return {
+          variant: "secondary" as const,
+          icon: Info,
+          text: "알 수 없음",
+        };
+    }
+  };
+
+  const config = getStatusConfig();
+  const IconComponent = config.icon;
+
+  return (
+    <Badge variant={config.variant} className={config.className}>
+      <IconComponent className={`mr-1 h-3 w-3 ${config.animate ? "animate-spin" : ""}`} />
+      {config.text}
+    </Badge>
+  );
+};
+
+/**
+ * 검증 요약 정보
+ */
+const ValidationSummary: React.FC<{ validationState: FormValidationState }> = ({ validationState }) => {
+  const totalFields = Object.keys(validationState.fieldStates).length;
+  const validFields = Object.values(validationState.fieldStates).filter((field) => field.status === "valid").length;
+
+  const progress = totalFields > 0 ? (validFields / totalFields) * 100 : 0;
+
+  return (
+    <div className="space-y-3">
+      {/* 진행률 */}
+      {totalFields > 0 && (
+        <div className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <span>검증 진행률</span>
+            <span>
+              {validFields}/{totalFields} 필드
+            </span>
+          </div>
+          <Progress value={progress} className="h-2" />
+        </div>
+      )}
+
+      {/* 오류/경고 카운트 */}
+      <div className="flex items-center gap-4 text-sm">
+        {validationState.errors.length > 0 && (
+          <div className="text-destructive flex items-center gap-1">
+            <AlertCircle className="h-4 w-4" />
+            <span>{validationState.errors.length}개 오류</span>
+          </div>
+        )}
+
+        {validationState.warnings.length > 0 && (
+          <div className="flex items-center gap-1 text-orange-600">
+            <AlertTriangle className="h-4 w-4" />
+            <span>{validationState.warnings.length}개 경고</span>
+          </div>
+        )}
+
+        {validationState.isValid && validationState.errors.length === 0 && validationState.warnings.length === 0 && (
+          <div className="flex items-center gap-1 text-green-600">
+            <CheckCircle className="h-4 w-4" />
+            <span>모든 검증 통과</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 검증 상세 정보
+ */
+const ValidationDetails: React.FC<{ validationState: FormValidationState }> = ({ validationState }) => {
+  if (validationState.errors.length === 0 && validationState.warnings.length === 0) {
+    return (
+      <Alert>
+        <CheckCircle className="h-4 w-4" />
+        <AlertDescription>모든 검증이 성공적으로 완료되었습니다.</AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <ScrollArea className="h-32 w-full">
+      <div className="space-y-2">
+        {/* 오류 목록 */}
+        {validationState.errors.map((error, index) => (
+          <ValidationErrorItem key={`error-${index}`} error={error} />
+        ))}
+
+        {/* 경고 목록 */}
+        {validationState.warnings.map((warning, index) => (
+          <ValidationWarningItem key={`warning-${index}`} warning={warning} />
+        ))}
+      </div>
+    </ScrollArea>
+  );
+};
+
+/**
+ * 개별 오류 아이템
+ */
+const ValidationErrorItem: React.FC<{ error: ValidationError }> = ({ error }) => {
+  return (
+    <Alert variant="destructive" className="py-2">
+      <AlertCircle className="h-4 w-4" />
+      <AlertDescription className="text-sm">
+        <span className="font-medium">{error.field}:</span> {error.message}
+        {error.value !== undefined && (
+          <span className="mt-1 block text-xs opacity-75">입력값: "{String(error.value)}"</span>
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+};
+
+/**
+ * 개별 경고 아이템
+ */
+const ValidationWarningItem: React.FC<{ warning: ValidationWarning }> = ({ warning }) => {
+  return (
+    <Alert className="border-orange-200 bg-orange-50 py-2">
+      <AlertTriangle className="h-4 w-4 text-orange-600" />
+      <AlertDescription className="text-sm">
+        <span className="font-medium">{warning.field}:</span> {warning.message}
+        {warning.suggestion && <span className="mt-1 block text-xs text-orange-700">💡 {warning.suggestion}</span>}
+      </AlertDescription>
+    </Alert>
+  );
+};
+
+/**
+ * 성능 정보 표시
+ */
+const PerformanceInfo: React.FC<{
+  performance: { validationTime: number; saveTime: number; totalTime: number };
+}> = ({ performance }) => {
+  return (
+    <div className="bg-muted/50 rounded-md p-3">
+      <h4 className="mb-2 text-sm font-medium">성능 정보</h4>
+      <div className="grid grid-cols-3 gap-4 text-xs">
+        <div>
+          <span className="text-muted-foreground">검증 시간</span>
+          <div className="font-mono">{performance.validationTime.toFixed(2)}ms</div>
+        </div>
+        <div>
+          <span className="text-muted-foreground">저장 시간</span>
+          <div className="font-mono">{performance.saveTime.toFixed(2)}ms</div>
+        </div>
+        <div>
+          <span className="text-muted-foreground">총 시간</span>
+          <div className="font-mono">{performance.totalTime.toFixed(2)}ms</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 필드별 검증 상태 표시 컴포넌트
+ */
+export const FieldValidationIndicator: React.FC<{
+  fieldName: string;
+  error?: ValidationError;
+  warning?: ValidationWarning;
+  status?: "idle" | "validating" | "valid" | "invalid";
+  showIcon?: boolean;
+  className?: string;
+}> = ({ fieldName, error, warning, status = "idle", showIcon = true, className }) => {
+  if (status === "idle" && !error && !warning) {
+    return null;
+  }
+
+  return (
+    <div className={`flex items-center gap-1 text-xs ${className}`}>
+      {showIcon && (
+        <>
+          {status === "validating" && <Clock className="text-muted-foreground h-3 w-3 animate-spin" />}
+          {status === "valid" && !error && <CheckCircle className="h-3 w-3 text-green-600" />}
+          {error && <AlertCircle className="text-destructive h-3 w-3" />}
+          {warning && !error && <AlertTriangle className="h-3 w-3 text-orange-600" />}
+        </>
+      )}
+
+      {error && <span className="text-destructive">{error.message}</span>}
+
+      {warning && !error && <span className="text-orange-600">{warning.message}</span>}
+    </div>
+  );
+};

frontend/components/layout/AppLayout.tsx

@@ -365,7 +365,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   const uiMenus = convertMenuToUI(currentMenus, user as ExtendedUserInfo);
 
   return (
-    <div className="flex h-screen flex-col bg-slate-50">
+    <div className="flex h-screen flex-col bg-white">
       {/* MainHeader 컴포넌트 사용 */}
       <MainHeader
         user={user}
@@ -428,7 +428,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         </aside>
 
         {/* 가운데 컨텐츠 영역 */}
-        <main className="bg-background flex-1 p-6">{children}</main>
+        <main className="flex-1 bg-white">{children}</main>
       </div>
 
       {/* 프로필 수정 모달 */}

frontend/components/screen/EnhancedInteractiveScreenViewer.tsx

@@ -0,0 +1,441 @@
+/**
+ * 개선된 대화형 화면 뷰어
+ * 실시간 검증과 개선된 저장 시스템이 통합된 컴포넌트
+ */
+
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { CalendarIcon, AlertCircle, CheckCircle, Clock } from "lucide-react";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
+import { useAuth } from "@/hooks/useAuth";
+import { toast } from "sonner";
+import { ComponentData, WidgetComponent, DataTableComponent, ScreenDefinition, ColumnInfo } from "@/types/screen";
+import { InteractiveDataTable } from "./InteractiveDataTable";
+import { DynamicWebTypeRenderer } from "@/lib/registry/DynamicWebTypeRenderer";
+import { useFormValidation, UseFormValidationOptions } from "@/hooks/useFormValidation";
+import { FormValidationIndicator, FieldValidationIndicator } from "@/components/common/FormValidationIndicator";
+import { enhancedFormService } from "@/lib/services/enhancedFormService";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+
+interface EnhancedInteractiveScreenViewerProps {
+  component: ComponentData;
+  allComponents: ComponentData[];
+  screenInfo: ScreenDefinition;
+  tableColumns: ColumnInfo[];
+  formData?: Record<string, any>;
+  onFormDataChange?: (fieldName: string, value: any) => void;
+  hideLabel?: boolean;
+  validationOptions?: UseFormValidationOptions;
+  showValidationPanel?: boolean;
+  compactValidation?: boolean;
+}
+
+export const EnhancedInteractiveScreenViewer: React.FC<EnhancedInteractiveScreenViewerProps> = ({
+  component,
+  allComponents,
+  screenInfo,
+  tableColumns,
+  formData: externalFormData = {},
+  onFormDataChange,
+  hideLabel = false,
+  validationOptions = {},
+  showValidationPanel = true,
+  compactValidation = false,
+}) => {
+  const { userName, user } = useAuth();
+  const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
+  const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
+
+  // 최종 폼 데이터 (외부 + 로컬)
+  const finalFormData = { ...localFormData, ...externalFormData };
+
+  // 폼 검증 훅 사용
+  const {
+    validationState,
+    saveState,
+    validateForm,
+    validateField,
+    saveForm,
+    clearValidation,
+    getFieldError,
+    getFieldWarning,
+    hasFieldError,
+    isFieldValid,
+    canSave,
+  } = useFormValidation(finalFormData, allComponents, tableColumns, screenInfo, {
+    enableRealTimeValidation: true,
+    validationDelay: 300,
+    enableAutoSave: false,
+    showToastMessages: true,
+    validateOnMount: false,
+    ...validationOptions,
+  });
+
+  // 자동값 생성 함수
+  const generateAutoValue = useCallback(
+    (autoValueType: string): string => {
+      const now = new Date();
+      switch (autoValueType) {
+        case "current_datetime":
+          return now.toISOString().slice(0, 19).replace("T", " ");
+        case "current_date":
+          return now.toISOString().slice(0, 10);
+        case "current_time":
+          return now.toTimeString().slice(0, 8);
+        case "current_user":
+          return userName || "사용자";
+        case "uuid":
+          return crypto.randomUUID();
+        case "sequence":
+          return `SEQ_${Date.now()}`;
+        default:
+          return "";
+      }
+    },
+    [userName],
+  );
+
+  // 폼 데이터 변경 핸들러 (검증 포함)
+  const handleFormDataChange = useCallback(
+    async (fieldName: string, value: any) => {
+      // 로컬 상태 업데이트
+      setLocalFormData((prev) => ({
+        ...prev,
+        [fieldName]: value,
+      }));
+
+      // 외부 핸들러 호출
+      onFormDataChange?.(fieldName, value);
+
+      // 개별 필드 검증 (debounced)
+      setTimeout(() => {
+        validateField(fieldName, value);
+      }, 100);
+    },
+    [onFormDataChange, validateField],
+  );
+
+  // 자동값 설정
+  useEffect(() => {
+    const widgetComponents = allComponents.filter((c) => c.type === "widget") as WidgetComponent[];
+    const autoValueUpdates: Record<string, any> = {};
+
+    for (const widget of widgetComponents) {
+      const fieldName = widget.columnName || widget.id;
+      const currentValue = finalFormData[fieldName];
+
+      // 자동값이 설정되어 있고 현재 값이 없는 경우
+      if (widget.inputType === "auto" && widget.autoValueType && !currentValue) {
+        const autoValue = generateAutoValue(widget.autoValueType);
+        if (autoValue) {
+          autoValueUpdates[fieldName] = autoValue;
+        }
+      }
+    }
+
+    if (Object.keys(autoValueUpdates).length > 0) {
+      setLocalFormData((prev) => ({ ...prev, ...autoValueUpdates }));
+    }
+  }, [allComponents, finalFormData, generateAutoValue]);
+
+  // 향상된 저장 핸들러
+  const handleEnhancedSave = useCallback(async () => {
+    const success = await saveForm();
+
+    if (success) {
+      toast.success("데이터가 성공적으로 저장되었습니다.", {
+        description: `성능: ${saveState.result?.performance?.totalTime.toFixed(2)}ms`,
+      });
+    }
+  }, [saveForm, saveState.result]);
+
+  // 대화형 위젯 렌더링
+  const renderInteractiveWidget = (comp: ComponentData) => {
+    // 데이터 테이블 컴포넌트 처리
+    if (comp.type === "datatable") {
+      const dataTable = comp as DataTableComponent;
+      return (
+        <div key={comp.id} className="w-full">
+          <InteractiveDataTable
+            component={dataTable}
+            formData={finalFormData}
+            onFormDataChange={handleFormDataChange}
+          />
+        </div>
+      );
+    }
+
+    // 위젯 컴포넌트가 아닌 경우 일반 컨테이너 렌더링
+    if (comp.type !== "widget") {
+      return renderContainer(comp);
+    }
+
+    const widget = comp as WidgetComponent;
+    const fieldName = widget.columnName || widget.id;
+    const currentValue = finalFormData[fieldName] || "";
+
+    // 필드 검증 상태
+    const fieldError = getFieldError(fieldName);
+    const fieldWarning = getFieldWarning(fieldName);
+    const hasError = hasFieldError(fieldName);
+    const isValid = isFieldValid(fieldName);
+
+    // 스타일 적용
+    const applyStyles = (element: React.ReactElement) => {
+      const style = widget.style || {};
+      const inlineStyle: React.CSSProperties = {
+        width: style.width || "100%",
+        height: style.height || "auto",
+        fontSize: style.fontSize,
+        color: style.color,
+        backgroundColor: style.backgroundColor,
+        border: style.border,
+        borderRadius: style.borderRadius,
+        padding: style.padding,
+        margin: style.margin,
+        ...style,
+      };
+
+      // 검증 상태에 따른 스타일 조정
+      if (hasError) {
+        inlineStyle.borderColor = "#ef4444";
+        inlineStyle.boxShadow = "0 0 0 1px #ef4444";
+      } else if (isValid && finalFormData[fieldName]) {
+        inlineStyle.borderColor = "#22c55e";
+      }
+
+      return React.cloneElement(element, {
+        style: inlineStyle,
+        className:
+          `${element.props.className || ""} ${hasError ? "border-destructive" : ""} ${isValid && finalFormData[fieldName] ? "border-green-500" : ""}`.trim(),
+      });
+    };
+
+    // 라벨 렌더링
+    const renderLabel = () => {
+      if (hideLabel) return null;
+
+      const labelStyle = widget.style || {};
+      const labelElement = (
+        <label
+          className={`mb-1 block text-sm font-medium ${hasError ? "text-destructive" : ""}`}
+          style={{
+            fontSize: labelStyle.labelFontSize || "14px",
+            color: hasError ? "#ef4444" : labelStyle.labelColor || "#374151",
+            fontWeight: labelStyle.labelFontWeight || "500",
+            fontFamily: labelStyle.labelFontFamily,
+            textAlign: labelStyle.labelTextAlign || "left",
+            backgroundColor: labelStyle.labelBackgroundColor,
+            padding: labelStyle.labelPadding,
+            borderRadius: labelStyle.labelBorderRadius,
+            marginBottom: labelStyle.labelMarginBottom || "4px",
+          }}
+        >
+          {widget.label}
+          {widget.required && <span className="ml-1 text-orange-500">*</span>}
+        </label>
+      );
+
+      return labelElement;
+    };
+
+    // 필드 검증 표시기
+    const renderFieldValidation = () => {
+      if (!fieldError && !fieldWarning) return null;
+
+      return (
+        <FieldValidationIndicator
+          fieldName={fieldName}
+          error={fieldError}
+          warning={fieldWarning}
+          status={validationState.fieldStates[fieldName]?.status}
+          className="mt-1"
+        />
+      );
+    };
+
+    // 웹타입별 렌더링
+    const renderByWebType = () => {
+      const widgetType = widget.widgetType;
+      const placeholder = widget.placeholder || `${widget.label}을(를) 입력하세요`;
+      const required = widget.required;
+      const readonly = widget.readonly;
+
+      // DynamicWebTypeRenderer 사용
+      try {
+        const dynamicElement = (
+          <DynamicWebTypeRenderer
+            webType={widgetType || "text"}
+            config={widget.webTypeConfig}
+            props={{
+              component: widget,
+              value: currentValue,
+              onChange: (value: any) => handleFormDataChange(fieldName, value),
+              placeholder,
+              disabled: readonly,
+              required,
+              className: "h-full w-full",
+            }}
+          />
+        );
+
+        return applyStyles(dynamicElement);
+      } catch (error) {
+        console.warn(`DynamicWebTypeRenderer 오류 (${widgetType}):`, error);
+
+        // 폴백: 기본 input
+        const fallbackElement = (
+          <Input
+            type="text"
+            value={currentValue}
+            onChange={(e) => handleFormDataChange(fieldName, e.target.value)}
+            placeholder={placeholder}
+            disabled={readonly}
+            required={required}
+            className="h-full w-full"
+          />
+        );
+        return applyStyles(fallbackElement);
+      }
+    };
+
+    return (
+      <div key={comp.id} className="space-y-1">
+        {renderLabel()}
+        {renderByWebType()}
+        {renderFieldValidation()}
+      </div>
+    );
+  };
+
+  // 컨테이너 렌더링
+  const renderContainer = (comp: ComponentData) => {
+    const children = allComponents.filter((c) => c.parentId === comp.id);
+
+    return (
+      <div key={comp.id} className="space-y-4">
+        {comp.type === "container" && (comp as any).title && (
+          <h3 className="text-lg font-semibold">{(comp as any).title}</h3>
+        )}
+        {children.map((child) => renderInteractiveWidget(child))}
+      </div>
+    );
+  };
+
+  // 버튼 렌더링
+  const renderButton = (comp: ComponentData) => {
+    const buttonConfig = (comp as any).webTypeConfig;
+    const actionType = buttonConfig?.actionType || "save";
+
+    const handleButtonClick = async () => {
+      switch (actionType) {
+        case "save":
+          await handleEnhancedSave();
+          break;
+        case "reset":
+          setLocalFormData({});
+          clearValidation();
+          toast.info("폼이 초기화되었습니다.");
+          break;
+        case "validate":
+          await validateForm();
+          break;
+        default:
+          toast.info(`${actionType} 액션이 실행되었습니다.`);
+      }
+    };
+
+    return (
+      <Button
+        key={comp.id}
+        onClick={handleButtonClick}
+        disabled={actionType === "save" && !canSave}
+        variant={buttonConfig?.variant || "default"}
+        className="flex items-center gap-2"
+      >
+        {saveState.status === "saving" && actionType === "save" && <Clock className="h-4 w-4 animate-spin" />}
+        {validationState.status === "validating" && actionType === "validate" && (
+          <Clock className="h-4 w-4 animate-spin" />
+        )}
+        {comp.label || "버튼"}
+      </Button>
+    );
+  };
+
+  // 메인 렌더링
+  const renderComponent = () => {
+    if (component.type === "widget") {
+      const widget = component as WidgetComponent;
+      if (widget.widgetType === "button") {
+        return renderButton(component);
+      }
+      return renderInteractiveWidget(component);
+    }
+
+    return renderContainer(component);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 검증 상태 패널 */}
+      {showValidationPanel && (
+        <FormValidationIndicator
+          validationState={validationState}
+          saveState={saveState}
+          onValidate={validateForm}
+          onSave={handleEnhancedSave}
+          canSave={canSave}
+          compact={compactValidation}
+          showDetails={!compactValidation}
+          showPerformance={!compactValidation}
+        />
+      )}
+
+      {/* 메인 컴포넌트 */}
+      <div className="space-y-4">{renderComponent()}</div>
+
+      {/* 개발 정보 (개발 환경에서만 표시) */}
+      {process.env.NODE_ENV === "development" && (
+        <>
+          <Separator />
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm">개발 정보</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">테이블</Badge>
+                <span className="text-sm">{screenInfo.tableName}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">필드</Badge>
+                <span className="text-sm">{Object.keys(finalFormData).length}개</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">검증</Badge>
+                <span className="text-sm">{validationState.validationCount}회</span>
+              </div>
+              {saveState.result?.performance && (
+                <div className="flex items-center gap-2">
+                  <Badge variant="outline">성능</Badge>
+                  <span className="text-sm">{saveState.result.performance.totalTime.toFixed(2)}ms</span>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+};

frontend/components/screen/InteractiveDataTable.tsx

@@ -41,11 +41,12 @@ import {
 import { tableTypeApi } from "@/lib/api/screen";
 import { commonCodeApi } from "@/lib/api/commonCode";
 import { getCurrentUser, UserInfo } from "@/lib/api/client";
-import { DataTableComponent, DataTableColumn, DataTableFilter, AttachedFileInfo } from "@/types/screen";
+import { DataTableComponent, DataTableColumn, DataTableFilter } from "@/types/screen-legacy-backup";
 import { cn } from "@/lib/utils";
 import { downloadFile, getLinkedFiles, getFilePreviewUrl, getDirectFileUrl } from "@/lib/api/file";
 import { toast } from "sonner";
 import { FileUpload } from "@/components/screen/widgets/FileUpload";
+import { AdvancedSearchFilters } from "./filters/AdvancedSearchFilters";
 
 // 파일 데이터 타입 정의 (AttachedFileInfo와 호환)
 interface FileInfo {
@@ -332,7 +333,6 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
   // 검색 가능한 컬럼만 필터링
   const visibleColumns = component.columns?.filter((col: DataTableColumn) => col.visible) || [];
-  const searchFilters = component.filters || [];
 
   // 컬럼의 실제 웹 타입 정보 찾기
   const getColumnWebType = useCallback(
@@ -525,6 +525,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     }
   }, [component.tableName]);
 
+  // 실제 사용할 필터 (설정된 필터만 사용, 자동 생성 안함)
+  const searchFilters = useMemo(() => {
+    return component.filters || [];
+  }, [component.filters]);
+
   // 초기 데이터 로드
   useEffect(() => {
     loadData(1, searchValues);
@@ -1480,115 +1485,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     }
   };
 
-  // 검색 필터 렌더링
-  const renderSearchFilter = (filter: DataTableFilter) => {
-    const value = searchValues[filter.columnName] || "";
-
-    switch (filter.widgetType) {
-      case "text":
-      case "email":
-      case "tel":
-        return (
-          <Input
-            key={filter.columnName}
-            placeholder={`${filter.label} 검색...`}
-            value={value}
-            onChange={(e) => handleSearchValueChange(filter.columnName, e.target.value)}
-            onKeyPress={(e) => {
-              if (e.key === "Enter") {
-                handleSearch();
-              }
-            }}
-          />
-        );
-
-      case "number":
-      case "decimal":
-        return (
-          <Input
-            key={filter.columnName}
-            type="number"
-            placeholder={`${filter.label} 입력...`}
-            value={value}
-            onChange={(e) => handleSearchValueChange(filter.columnName, e.target.value)}
-            onKeyPress={(e) => {
-              if (e.key === "Enter") {
-                handleSearch();
-              }
-            }}
-          />
-        );
-
-      case "date":
-        return (
-          <Input
-            key={filter.columnName}
-            type="date"
-            value={value}
-            onChange={(e) => handleSearchValueChange(filter.columnName, e.target.value)}
-          />
-        );
-
-      case "datetime":
-        return (
-          <Input
-            key={filter.columnName}
-            type="datetime-local"
-            value={value}
-            onChange={(e) => handleSearchValueChange(filter.columnName, e.target.value)}
-          />
-        );
-
-      case "select":
-        // TODO: 선택 옵션은 추후 구현
-        return (
-          <Select
-            key={filter.columnName}
-            value={value}
-            onValueChange={(newValue) => handleSearchValueChange(filter.columnName, newValue)}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={`${filter.label} 선택...`} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="">전체</SelectItem>
-              {/* TODO: 동적 옵션 로드 */}
-            </SelectContent>
-          </Select>
-        );
-
-      case "code":
-        // 코드 타입은 텍스트 검색으로 처리 (코드명으로 검색 가능)
-        return (
-          <Input
-            key={filter.columnName}
-            placeholder={`${filter.label} 검색... (코드명 또는 코드값)`}
-            value={value}
-            onChange={(e) => handleSearchValueChange(filter.columnName, e.target.value)}
-            onKeyPress={(e) => {
-              if (e.key === "Enter") {
-                handleSearch();
-              }
-            }}
-          />
-        );
-
-      default:
-        return (
-          <Input
-            key={filter.columnName}
-            placeholder={`${filter.label} 검색...`}
-            value={value}
-            onChange={(e) => handleSearchValueChange(filter.columnName, e.target.value)}
-            onKeyPress={(e) => {
-              if (e.key === "Enter") {
-                handleSearch();
-              }
-            }}
-          />
-        );
-    }
-  };
+  // 기존 renderSearchFilter 함수는 AdvancedSearchFilters 컴포넌트로 대체됨
 
   // 파일 다운로드
   const handleDownloadFile = useCallback(async (fileInfo: FileInfo) => {
@@ -1847,31 +1744,22 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           </div>
         </div>
 
-        {/* 검색 필터 */}
-        {searchFilters.length > 0 && (
+        {/* 검색 필터 - 항상 표시 (컬럼 정보 기반 자동 생성) */}
+        {tableColumns && tableColumns.length > 0 && (
           <>
             <Separator className="my-2" />
-            <div className="space-y-3">
-              <div className="text-muted-foreground flex items-center gap-2 text-sm">
-                <Search className="h-3 w-3" />
-                검색 필터
-              </div>
-              <div
-                className="grid gap-3"
-                style={{
-                  gridTemplateColumns: searchFilters
-                    .map((filter: DataTableFilter) => `${filter.gridColumns || 3}fr`)
-                    .join(" "),
-                }}
-              >
-                {searchFilters.map((filter: DataTableFilter) => (
-                  <div key={filter.columnName} className="space-y-1">
-                    <label className="text-muted-foreground text-xs font-medium">{filter.label}</label>
-                    {renderSearchFilter(filter)}
-                  </div>
-                ))}
-              </div>
-            </div>
+            <AdvancedSearchFilters
+              filters={searchFilters.length > 0 ? searchFilters : []}
+              searchValues={searchValues}
+              onSearchValueChange={handleSearchValueChange}
+              onSearch={handleSearch}
+              onClearFilters={() => {
+                setSearchValues({});
+                loadData(1, {});
+              }}
+              tableColumns={tableColumns}
+              tableName={component.tableName}
+            />
           </>
         )}
       </div>

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -31,13 +31,17 @@ import {
   CodeTypeConfig,
   EntityTypeConfig,
   ButtonTypeConfig,
-} from "@/types/screen";
+} from "@/types";
 import { InteractiveDataTable } from "./InteractiveDataTable";
 import { FileUpload } from "./widgets/FileUpload";
 import { dynamicFormApi, DynamicFormData } from "@/lib/api/dynamicForm";
 import { useParams } from "next/navigation";
 import { screenApi } from "@/lib/api/screen";
 import { DynamicWebTypeRenderer } from "@/lib/registry/DynamicWebTypeRenderer";
+import { enhancedFormService } from "@/lib/services/enhancedFormService";
+import { FormValidationIndicator } from "@/components/common/FormValidationIndicator";
+import { useFormValidation } from "@/hooks/useFormValidation";
+import { UnifiedColumnInfo as ColumnInfo } from "@/types";
 
 interface InteractiveScreenViewerProps {
   component: ComponentData;
@@ -49,6 +53,16 @@ interface InteractiveScreenViewerProps {
     id: number;
     tableName?: string;
   };
+  // 새로운 검증 관련 옵션들
+  enableEnhancedValidation?: boolean;
+  tableColumns?: ColumnInfo[];
+  showValidationPanel?: boolean;
+  validationOptions?: {
+    enableRealTimeValidation?: boolean;
+    validationDelay?: number;
+    enableAutoSave?: boolean;
+    showToastMessages?: boolean;
+  };
 }
 
 export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = ({
@@ -58,6 +72,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   onFormDataChange,
   hideLabel = false,
   screenInfo,
+  enableEnhancedValidation = false,
+  tableColumns = [],
+  showValidationPanel = false,
+  validationOptions = {},
 }) => {
   const { userName, user } = useAuth(); // 현재 로그인한 사용자명과 사용자 정보 가져오기
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
@@ -79,6 +97,33 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   // 팝업 전용 formData 상태
   const [popupFormData, setPopupFormData] = useState<Record<string, any>>({});
 
+  // 통합된 폼 데이터
+  const finalFormData = { ...localFormData, ...externalFormData };
+
+  // 개선된 검증 시스템 (선택적 활성화)
+  const enhancedValidation = enableEnhancedValidation && screenInfo && tableColumns.length > 0 
+    ? useFormValidation(
+        finalFormData,
+        allComponents.filter(c => c.type === 'widget') as WidgetComponent[],
+        tableColumns,
+        { 
+          id: screenInfo.id, 
+          screenName: screenInfo.tableName || "unknown",
+          tableName: screenInfo.tableName,
+          screenResolution: { width: 800, height: 600 },
+          gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
+          description: "동적 화면"
+        },
+        {
+          enableRealTimeValidation: true,
+          validationDelay: 300,
+          enableAutoSave: false,
+          showToastMessages: true,
+          ...validationOptions,
+        }
+      )
+    : null;
+
   // 자동값 생성 함수
   const generateAutoValue = useCallback((autoValueType: string): string => {
     const now = new Date();
@@ -1104,20 +1149,23 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
-        // 저장 액션
+        // 저장 액션 (개선된 버전)
         const handleSaveAction = async () => {
-          // 저장 시점에서 최신 formData 구성
+          console.log("💾 저장 시작");
+
+          // 개선된 검증 시스템이 활성화된 경우
+          if (enhancedValidation) {
+            console.log("🔍 개선된 검증 시스템 사용");
+            const success = await enhancedValidation.saveForm();
+            if (success) {
+              toast.success("데이터가 성공적으로 저장되었습니다!");
+            }
+            return;
+          }
+
+          // 기존 방식 (레거시 지원)
           const currentFormData = { ...localFormData, ...externalFormData };
-          console.log("💾 저장 시작 - currentFormData:", currentFormData);
-          console.log("💾 저장 시점 formData 상세:", {
-            local: localFormData,
-            external: externalFormData,
-            merged: currentFormData
-          });
-          console.log("💾 currentFormData 키-값 상세:");
-          Object.entries(currentFormData).forEach(([key, value]) => {
-            console.log(`  ${key}: "${value}" (타입: ${typeof value})`);
-          });
+          console.log("💾 기존 방식으로 저장 - currentFormData:", currentFormData);
           
           // formData 유효성 체크를 완화 (빈 객체라도 위젯이 있으면 저장 진행)
           const hasWidgets = allComponents.some(comp => comp.type === 'widget');
@@ -1684,6 +1732,25 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         <div className="h-full w-full">{renderInteractiveWidget(component)}</div>
       </div>
 
+      {/* 개선된 검증 패널 (선택적 표시) */}
+      {showValidationPanel && enhancedValidation && (
+        <div className="absolute bottom-4 right-4 z-50">
+          <FormValidationIndicator
+            validationState={enhancedValidation.validationState}
+            saveState={enhancedValidation.saveState}
+            onSave={async () => {
+              const success = await enhancedValidation.saveForm();
+              if (success) {
+                toast.success("데이터가 성공적으로 저장되었습니다!");
+              }
+            }}
+            canSave={enhancedValidation.canSave}
+            compact={true}
+            showDetails={false}
+          />
+        </div>
+      )}
+
       {/* 모달 화면 */}
       <Dialog open={!!popupScreen} onOpenChange={() => {
         setPopupScreen(null);

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -467,8 +467,8 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     <>
       <div className="absolute" style={componentStyle}>
         <div className="h-full w-full">
-          {/* 라벨 표시 */}
-          {!hideLabel && component.label && (
+          {/* 라벨 표시 - 컴포넌트 내부에서 라벨을 처리하므로 외부에서는 표시하지 않음 */}
+          {!hideLabel && component.label && component.style?.labelDisplay === false && (
             <div className="mb-1">
               <label className="text-sm font-medium text-gray-700">
                 {component.label}

frontend/components/screen/RealtimePreview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { ComponentData, WebType, WidgetComponent, FileComponent, AreaComponent, AreaLayoutType } from "@/types/screen";
+import { ComponentData, WebType, isWidgetComponent, isContainerComponent } from "@/types";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -56,20 +56,12 @@ interface RealtimePreviewProps {
 }
 
 // 영역 레이아웃에 따른 아이콘 반환
-const getAreaIcon = (layoutType: AreaLayoutType) => {
-  switch (layoutType) {
-    case "flex-row":
+const getAreaIcon = (layoutDirection?: "horizontal" | "vertical") => {
+  switch (layoutDirection) {
+    case "horizontal":
       return <Layout className="h-4 w-4 text-blue-600" />;
-    case "grid":
-      return <Grid3x3 className="h-4 w-4 text-green-600" />;
-    case "flex-column":
+    case "vertical":
       return <Columns className="h-4 w-4 text-purple-600" />;
-    case "panel":
-      return <Rows className="h-4 w-4 text-orange-600" />;
-    case "sidebar":
-      return <SidebarOpen className="h-4 w-4 text-indigo-600" />;
-    case "tabs":
-      return <Folder className="h-4 w-4 text-pink-600" />;
     default:
       return <Square className="h-4 w-4 text-gray-500" />;
   }
@@ -77,14 +69,17 @@ const getAreaIcon = (layoutType: AreaLayoutType) => {
 
 // 영역 렌더링
 const renderArea = (component: ComponentData, children?: React.ReactNode) => {
-  const area = component as AreaComponent;
-  const { layoutType, title } = area;
+  if (!isContainerComponent(component) || component.type !== "area") {
+    return null;
+  }
+  const area = component;
+  const { layoutDirection, label } = area;
 
   const renderPlaceholder = () => (
     <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
       <div className="text-center">
-        {getAreaIcon(layoutType)}
-        <p className="mt-2 text-sm text-gray-600">{title || `${layoutType} 영역`}</p>
+        {getAreaIcon(layoutDirection)}
+        <p className="mt-2 text-sm text-gray-600">{label || `${layoutDirection || "기본"} 영역`}</p>
         <p className="text-xs text-gray-400">컴포넌트를 드래그해서 추가하세요</p>
       </div>
     </div>
@@ -102,11 +97,11 @@ const renderArea = (component: ComponentData, children?: React.ReactNode) => {
 // 동적 웹 타입 위젯 렌더링 컴포넌트
 const WidgetRenderer: React.FC<{ component: ComponentData }> = ({ component }) => {
   // 위젯 컴포넌트가 아닌 경우 빈 div 반환
-  if (component.type !== "widget") {
+  if (!isWidgetComponent(component)) {
     return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
   }
 
-  const widget = component as WidgetComponent;
+  const widget = component;
   const { widgetType, label, placeholder, required, readonly, columnName, style } = widget;
 
   // 디버깅: 실제 widgetType 값 확인
@@ -180,7 +175,6 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
     case "dropdown":
       return <List className="h-4 w-4 text-orange-600" />;
     case "textarea":
-    case "text_area":
       return <AlignLeft className="h-4 w-4 text-indigo-600" />;
     case "boolean":
     case "checkbox":
@@ -327,8 +321,8 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
         <div className="absolute -top-6 left-0 rounded bg-blue-600 px-2 py-1 text-xs text-white">
           {type === "widget" && (
             <div className="flex items-center gap-1">
-              {getWidgetIcon((component as WidgetComponent).widgetType)}
-              {(component as WidgetComponent).widgetType || "widget"}
+              {getWidgetIcon(isWidgetComponent(component) ? (component.widgetType as WebType) : undefined)}
+              {isWidgetComponent(component) ? component.widgetType || "widget" : component.type}
             </div>
           )}
           {type !== "widget" && type}

frontend/components/screen/ResponsiveDesignerContainer.tsx

@@ -0,0 +1,172 @@
+import React, { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Monitor, Maximize2, ZoomIn, ZoomOut } from "lucide-react";
+import { useContainerSize } from "@/hooks/useViewportSize";
+
+interface ResponsiveDesignerContainerProps {
+  children: React.ReactNode;
+  designWidth: number;
+  designHeight: number;
+  screenName?: string;
+  onScaleChange?: (scale: number) => void;
+}
+
+type DesignerViewMode = "fit" | "original" | "custom";
+
+/**
+ * 화면 디자이너용 반응형 컨테이너
+ * 편집 작업을 위해 원본 크기 유지하면서도 뷰포트에 맞춰 조정 가능
+ */
+export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerProps> = ({
+  children,
+  designWidth,
+  designHeight,
+  screenName,
+  onScaleChange,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [viewMode, setViewMode] = useState<DesignerViewMode>("original");
+  const [customScale, setCustomScale] = useState(1);
+  const containerSize = useContainerSize(containerRef);
+
+  // 스케일 계산
+  const calculateScale = (): number => {
+    if (containerSize.width === 0 || containerSize.height === 0) return 1;
+
+    switch (viewMode) {
+      case "fit":
+        // 컨테이너에 맞춰 비율 유지하며 조정 (여백 허용)
+        const scaleX = (containerSize.width - 40) / designWidth;
+        const scaleY = (containerSize.height - 40) / designHeight;
+        return Math.min(scaleX, scaleY, 2); // 최대 2배까지 허용
+
+      case "custom":
+        return customScale;
+
+      case "original":
+      default:
+        return 1;
+    }
+  };
+
+  const scale = calculateScale();
+
+  // 스케일 변경 시 콜백 호출
+  React.useEffect(() => {
+    onScaleChange?.(scale);
+  }, [scale, onScaleChange]);
+
+  const handleZoomIn = () => {
+    const newScale = Math.min(customScale * 1.1, 3);
+    setCustomScale(newScale);
+    setViewMode("custom");
+  };
+
+  const handleZoomOut = () => {
+    const newScale = Math.max(customScale * 0.9, 0.1);
+    setCustomScale(newScale);
+    setViewMode("custom");
+  };
+
+  const getViewModeInfo = (mode: DesignerViewMode) => {
+    switch (mode) {
+      case "fit":
+        return {
+          label: "화면 맞춤",
+          description: "뷰포트에 맞춰 자동 조정",
+          icon: <Monitor className="h-4 w-4" />,
+        };
+      case "original":
+        return {
+          label: "원본 크기",
+          description: "설계 해상도 100% 표시",
+          icon: <Maximize2 className="h-4 w-4" />,
+        };
+      case "custom":
+        return {
+          label: `사용자 정의 (${Math.round(customScale * 100)}%)`,
+          description: "사용자가 조정한 배율",
+          icon: <ZoomIn className="h-4 w-4" />,
+        };
+    }
+  };
+
+  const screenStyle = {
+    width: `${designWidth}px`,
+    height: `${designHeight}px`,
+    transform: `scale(${scale})`,
+    transformOrigin: "top left",
+    transition: "transform 0.3s ease-in-out",
+  };
+
+  const wrapperStyle = {
+    width: `${designWidth * scale}px`,
+    height: `${designHeight * scale}px`,
+    overflow: "hidden",
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col bg-gray-100">
+      {/* 상단 컨트롤 바 */}
+      <div className="flex items-center justify-between border-b bg-white px-4 py-2 shadow-sm">
+        <div className="flex items-center space-x-2">
+          <span className="text-sm font-medium text-gray-700">
+            {screenName && `${screenName} - `}
+            {designWidth} × {designHeight}
+          </span>
+          <span className="text-xs text-gray-500">
+            (배율: {Math.round(scale * 100)}% | 컨테이너: {containerSize.width}×{containerSize.height})
+          </span>
+        </div>
+
+        <div className="flex items-center space-x-1">
+          {/* 줌 컨트롤 */}
+          <Button variant="ghost" size="sm" onClick={handleZoomOut} className="h-8 w-8 p-0" title="축소">
+            <ZoomOut className="h-4 w-4" />
+          </Button>
+
+          <span className="min-w-[60px] px-2 text-center text-xs text-gray-600">{Math.round(scale * 100)}%</span>
+
+          <Button variant="ghost" size="sm" onClick={handleZoomIn} className="h-8 w-8 p-0" title="확대">
+            <ZoomIn className="h-4 w-4" />
+          </Button>
+
+          {/* 뷰 모드 버튼 */}
+          {(["fit", "original"] as DesignerViewMode[]).map((mode) => {
+            const info = getViewModeInfo(mode);
+            return (
+              <Button
+                key={mode}
+                variant={viewMode === mode ? "default" : "ghost"}
+                size="sm"
+                onClick={() => setViewMode(mode)}
+                className="h-8 text-xs"
+                title={info.description}
+              >
+                {info.icon}
+                <span className="ml-1 hidden sm:inline">{info.label}</span>
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 디자인 영역 */}
+      <div
+        ref={containerRef}
+        className="flex-1 overflow-auto p-8"
+        style={{
+          justifyContent: "center",
+          alignItems: "flex-start",
+          display: "flex",
+        }}
+      >
+        <div style={wrapperStyle}>
+          <div style={screenStyle}>{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResponsiveDesignerContainer;

frontend/components/screen/ResponsiveScreenContainer.tsx

@@ -0,0 +1,42 @@
+import React, { useRef } from "react";
+
+interface ResponsiveScreenContainerProps {
+  children: React.ReactNode;
+  designWidth: number;
+  designHeight: number;
+  screenName?: string;
+}
+
+/**
+ * 화면 컨테이너
+ * 설계된 원본 크기 그대로 화면을 표시합니다.
+ */
+export const ResponsiveScreenContainer: React.FC<ResponsiveScreenContainerProps> = ({
+  children,
+  designWidth,
+  designHeight,
+  screenName,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const screenStyle = {
+    width: `${designWidth}px`,
+    height: `${designHeight}px`,
+  };
+
+  const wrapperStyle = {
+    width: `${designWidth}px`,
+    height: `${designHeight}px`,
+    overflow: "auto",
+  };
+
+  return (
+    <div className="h-full w-full overflow-auto bg-gray-50">
+      <div style={wrapperStyle}>
+        <div style={screenStyle}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ResponsiveScreenContainer;

frontend/components/screen/ScreenDesigner.tsx

@@ -1884,7 +1884,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                   codeCategory: column.codeCategory,
                 }),
               style: {
-                labelDisplay: false, // 모든 컴포넌트의 기본 라벨 표시를 false로 설정
+                labelDisplay: true, // 테이블 패널에서 드래그한 컴포넌트는 라벨을 기본적으로 표시
                 labelFontSize: "12px",
                 labelColor: "#374151",
                 labelFontWeight: "500",

frontend/components/screen/filters/AdvancedSearchFilters.tsx

@@ -0,0 +1,427 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Search, X } from "lucide-react";
+import { ModernDatePicker } from "./ModernDatePicker";
+import { cn } from "@/lib/utils";
+import { commonCodeApi } from "@/lib/api/commonCode";
+import { EntityReferenceAPI } from "@/lib/api/entityReference";
+import type { DataTableFilter } from "@/types/screen-legacy-backup";
+import type { CodeInfo } from "@/types/commonCode";
+
+interface AdvancedSearchFiltersProps {
+  filters: DataTableFilter[];
+  searchValues: Record<string, any>;
+  onSearchValueChange: (columnName: string, value: any) => void;
+  onSearch: () => void;
+  onClearFilters: () => void;
+  className?: string;
+  tableColumns?: any[]; // 테이블 컬럼 정보
+  tableName?: string; // 테이블명
+}
+
+interface DateRangeValue {
+  from?: Date;
+  to?: Date;
+}
+
+interface CodeOption {
+  value: string;
+  label: string;
+}
+
+interface EntityOption {
+  value: string;
+  label: string;
+}
+
+export const AdvancedSearchFilters: React.FC<AdvancedSearchFiltersProps> = ({
+  filters,
+  searchValues,
+  onSearchValueChange,
+  onSearch,
+  onClearFilters,
+  className = "",
+  tableColumns = [],
+  tableName = "",
+}) => {
+  // 코드 옵션 캐시
+  const [codeOptions, setCodeOptions] = useState<Record<string, CodeOption[]>>({});
+  // 엔티티 옵션 캐시
+  const [entityOptions, setEntityOptions] = useState<Record<string, EntityOption[]>>({});
+  // 로딩 상태
+  const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});
+
+  // 자동 필터 생성 (설정된 필터가 없을 때 테이블 컬럼 기반으로 생성)
+  const autoGeneratedFilters = useMemo(() => {
+    if (filters.length > 0 || !tableColumns || tableColumns.length === 0) {
+      return [];
+    }
+
+    // 필터 가능한 웹타입들
+    const filterableWebTypes = ["text", "email", "tel", "number", "decimal", "date", "datetime", "code", "entity"];
+
+    return tableColumns
+      .filter((col) => {
+        const webType = col.webType || col.web_type;
+        return filterableWebTypes.includes(webType) && col.isVisible !== false;
+      })
+      .slice(0, 6) // 최대 6개까지만 자동 생성
+      .map((col) => ({
+        columnName: col.columnName || col.column_name,
+        widgetType: col.webType || col.web_type,
+        label: col.displayName || col.column_label || col.columnName || col.column_name,
+        gridColumns: 3,
+        codeCategory: col.codeCategory || col.code_category,
+        referenceTable: col.referenceTable || col.reference_table,
+        referenceColumn: col.referenceColumn || col.reference_column,
+        displayColumn: col.displayColumn || col.display_column,
+      }));
+  }, [filters, tableColumns]);
+
+  // 실제 사용할 필터 (설정된 필터가 있으면 우선, 없으면 자동 생성)
+  const effectiveFilters = useMemo(() => {
+    return filters.length > 0 ? filters : autoGeneratedFilters;
+  }, [filters, autoGeneratedFilters]);
+
+  // 코드 데이터 로드
+  const loadCodeOptions = useCallback(
+    async (codeCategory: string) => {
+      if (codeOptions[codeCategory] || loadingStates[codeCategory]) return;
+
+      setLoadingStates((prev) => ({ ...prev, [codeCategory]: true }));
+
+      try {
+        const response = await EntityReferenceAPI.getCodeReferenceData(codeCategory, { limit: 1000 });
+        const options = response.options.map((option) => ({
+          value: option.value,
+          label: option.label,
+        }));
+
+        setCodeOptions((prev) => ({ ...prev, [codeCategory]: options }));
+      } catch (error) {
+        console.error(`코드 카테고리 ${codeCategory} 로드 실패:`, error);
+        setCodeOptions((prev) => ({ ...prev, [codeCategory]: [] }));
+      } finally {
+        setLoadingStates((prev) => ({ ...prev, [codeCategory]: false }));
+      }
+    },
+    [codeOptions, loadingStates],
+  );
+
+  // 엔티티 데이터 로드
+  const loadEntityOptions = useCallback(
+    async (tableName: string, columnName: string) => {
+      const key = `${tableName}.${columnName}`;
+      if (entityOptions[key] || loadingStates[key]) return;
+
+      setLoadingStates((prev) => ({ ...prev, [key]: true }));
+
+      try {
+        const response = await EntityReferenceAPI.getEntityReferenceData(tableName, columnName, { limit: 1000 });
+        const options = response.options.map((option) => ({
+          value: option.value,
+          label: option.label,
+        }));
+
+        setEntityOptions((prev) => ({ ...prev, [key]: options }));
+      } catch (error) {
+        console.error(`엔티티 ${tableName}.${columnName} 로드 실패:`, error);
+        setEntityOptions((prev) => ({ ...prev, [key]: [] }));
+      } finally {
+        setLoadingStates((prev) => ({ ...prev, [key]: false }));
+      }
+    },
+    [entityOptions, loadingStates],
+  );
+
+  // 즉시 검색을 위한 onChange 핸들러
+  const handleChange = useCallback(
+    (columnName: string, newValue: any) => {
+      onSearchValueChange(columnName, newValue);
+      // 즉시 검색 실행 (디바운싱 제거)
+      onSearch();
+    },
+    [onSearchValueChange, onSearch],
+  );
+
+  // 텍스트 입력용 핸들러 (Enter 키 또는 blur 시에만 검색)
+  const handleTextChange = useCallback(
+    (columnName: string, newValue: string) => {
+      onSearchValueChange(columnName, newValue);
+      // 텍스트는 즉시 검색하지 않고 상태만 업데이트
+    },
+    [onSearchValueChange],
+  );
+
+  // Enter 키 또는 blur 시 검색 실행
+  const handleTextSearch = useCallback(() => {
+    onSearch();
+  }, [onSearch]);
+
+  // 필터별 렌더링 함수
+  const renderFilter = (filter: DataTableFilter) => {
+    const value = searchValues[filter.columnName] || "";
+
+    switch (filter.widgetType) {
+      case "text":
+      case "email":
+      case "tel":
+        return (
+          <Input
+            key={filter.columnName}
+            placeholder={`${filter.label} 검색...`}
+            value={value}
+            onChange={(e) => handleTextChange(filter.columnName, e.target.value)}
+            onKeyPress={(e) => {
+              if (e.key === "Enter") {
+                handleTextSearch();
+              }
+            }}
+            onBlur={handleTextSearch}
+          />
+        );
+
+      case "number":
+      case "decimal":
+        // 숫자 필터 모드에 따라 다른 UI 렌더링
+        if (filter.numberFilterMode === "exact") {
+          // 정확한 값 검색
+          return (
+            <Input
+              key={filter.columnName}
+              type="number"
+              placeholder={`${filter.label} 입력...`}
+              value={value || ""}
+              onChange={(e) => handleChange(filter.columnName, e.target.value)}
+            />
+          );
+        } else {
+          // 범위 검색 (기본값)
+          return (
+            <div key={filter.columnName} className="flex space-x-2">
+              <Input
+                type="number"
+                placeholder={`최소값`}
+                value={value?.min || ""}
+                onChange={(e) =>
+                  handleChange(filter.columnName, {
+                    ...value,
+                    min: e.target.value,
+                  })
+                }
+              />
+              <Input
+                type="number"
+                placeholder={`최대값`}
+                value={value?.max || ""}
+                onChange={(e) =>
+                  handleChange(filter.columnName, {
+                    ...value,
+                    max: e.target.value,
+                  })
+                }
+              />
+            </div>
+          );
+        }
+
+      case "date":
+      case "datetime":
+        return (
+          <ModernDatePicker
+            key={filter.columnName}
+            label={filter.label}
+            value={value || {}}
+            onChange={(newValue) => handleChange(filter.columnName, newValue)}
+            includeTime={filter.widgetType === "datetime"}
+          />
+        );
+
+      case "code":
+        console.log("🔍 코드 필터 렌더링:", {
+          columnName: filter.columnName,
+          codeCategory: filter.codeCategory,
+          options: codeOptions[filter.codeCategory || ""],
+          loading: loadingStates[filter.codeCategory || ""],
+        });
+        return (
+          <CodeFilter
+            key={filter.columnName}
+            filter={filter}
+            value={value}
+            onChange={(newValue) => handleChange(filter.columnName, newValue)}
+            options={codeOptions[filter.codeCategory || ""] || []}
+            loading={loadingStates[filter.codeCategory || ""]}
+            onLoadOptions={() => filter.codeCategory && loadCodeOptions(filter.codeCategory)}
+          />
+        );
+
+      case "entity":
+        return (
+          <EntityFilter
+            key={filter.columnName}
+            filter={filter}
+            value={value}
+            onChange={(newValue) => handleChange(filter.columnName, newValue)}
+            options={entityOptions[`${filter.referenceTable}.${filter.columnName}`] || []}
+            loading={loadingStates[`${filter.referenceTable}.${filter.columnName}`]}
+            onLoadOptions={() => filter.referenceTable && loadEntityOptions(filter.referenceTable, filter.columnName)}
+          />
+        );
+
+      case "select":
+      case "dropdown":
+        return (
+          <Select
+            key={filter.columnName}
+            value={value}
+            onValueChange={(newValue) => onSearchValueChange(filter.columnName, newValue)}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={`${filter.label} 선택...`} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__ALL__">전체</SelectItem>
+              {/* TODO: 동적 옵션 로드 */}
+            </SelectContent>
+          </Select>
+        );
+
+      default:
+        return (
+          <Input
+            key={filter.columnName}
+            placeholder={`${filter.label} 검색...`}
+            value={value}
+            onChange={(e) => handleTextChange(filter.columnName, e.target.value)}
+            onKeyPress={(e) => {
+              if (e.key === "Enter") {
+                handleTextSearch();
+              }
+            }}
+            onBlur={handleTextSearch}
+          />
+        );
+    }
+  };
+
+  // 활성 필터 개수 계산
+  const activeFiltersCount = Object.values(searchValues).filter((value) => {
+    if (typeof value === "string") return value.trim() !== "";
+    if (typeof value === "object" && value !== null) {
+      return Object.values(value).some((v) => v !== "" && v !== null && v !== undefined);
+    }
+    return value !== null && value !== undefined && value !== "";
+  }).length;
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {/* 필터 헤더 */}
+      <div className="text-muted-foreground flex items-center gap-2 text-sm">
+        <Search className="h-3 w-3" />
+        검색 필터
+        {autoGeneratedFilters.length > 0 && <span className="text-xs text-blue-600">(자동 생성)</span>}
+      </div>
+
+      {/* 필터 그리드 - 적절한 너비로 조정 */}
+      {effectiveFilters.length > 0 && (
+        <div className="flex flex-wrap gap-3">
+          {effectiveFilters.map((filter: DataTableFilter) => {
+            // 필터 개수에 따라 적절한 너비 계산
+            const getFilterWidth = () => {
+              const filterCount = effectiveFilters.length;
+              if (filterCount === 1) return "w-80"; // 1개일 때는 적당한 크기
+              if (filterCount === 2) return "w-64"; // 2개일 때는 조금 작게
+              if (filterCount === 3) return "w-52"; // 3개일 때는 더 작게
+              return "w-48"; // 4개 이상일 때는 가장 작게
+            };
+
+            return (
+              <div key={filter.columnName} className={`space-y-0.5 ${getFilterWidth()}`}>
+                <label className="text-muted-foreground text-xs font-medium">{filter.label}</label>
+                {renderFilter(filter)}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 필터 상태 및 초기화 버튼 */}
+      {activeFiltersCount > 0 && (
+        <div className="flex items-center justify-between">
+          <div className="text-muted-foreground text-sm">{activeFiltersCount}개 필터 적용 중</div>
+          <Button variant="outline" size="sm" onClick={onClearFilters} className="gap-2">
+            <X className="h-3 w-3" />
+            필터 초기화
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// 코드 필터 컴포넌트
+const CodeFilter: React.FC<{
+  filter: DataTableFilter;
+  value: string;
+  onChange: (value: string) => void;
+  options: CodeOption[];
+  loading: boolean;
+  onLoadOptions: () => void;
+}> = ({ filter, value, onChange, options, loading, onLoadOptions }) => {
+  useEffect(() => {
+    if (filter.codeCategory && options.length === 0 && !loading) {
+      onLoadOptions();
+    }
+  }, [filter.codeCategory, options.length, loading, onLoadOptions]);
+
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger>
+        <SelectValue placeholder={loading ? "로딩 중..." : `${filter.label} 선택...`} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="__ALL__">전체</SelectItem>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+// 엔티티 필터 컴포넌트
+const EntityFilter: React.FC<{
+  filter: DataTableFilter;
+  value: string;
+  onChange: (value: string) => void;
+  options: EntityOption[];
+  loading: boolean;
+  onLoadOptions: () => void;
+}> = ({ filter, value, onChange, options, loading, onLoadOptions }) => {
+  useEffect(() => {
+    if (filter.referenceTable && options.length === 0 && !loading) {
+      onLoadOptions();
+    }
+  }, [filter.referenceTable, options.length, loading, onLoadOptions]);
+
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger>
+        <SelectValue placeholder={loading ? "로딩 중..." : `${filter.label} 선택...`} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="__ALL__">전체</SelectItem>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};

frontend/components/screen/filters/ModernDatePicker.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  format,
+  addMonths,
+  subMonths,
+  startOfMonth,
+  endOfMonth,
+  eachDayOfInterval,
+  isSameMonth,
+  isSameDay,
+  isToday,
+} from "date-fns";
+import { ko } from "date-fns/locale";
+import { cn } from "@/lib/utils";
+
+interface DateRangeValue {
+  from?: Date;
+  to?: Date;
+}
+
+interface ModernDatePickerProps {
+  label: string;
+  value: DateRangeValue;
+  onChange: (value: DateRangeValue) => void;
+  includeTime?: boolean;
+}
+
+export const ModernDatePicker: React.FC<ModernDatePickerProps> = ({ label, value, onChange, includeTime = false }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [selectingType, setSelectingType] = useState<"from" | "to">("from");
+
+  const formatDate = (date: Date | undefined) => {
+    if (!date) return "";
+    if (includeTime) {
+      return format(date, "yyyy-MM-dd HH:mm", { locale: ko });
+    }
+    return format(date, "yyyy-MM-dd", { locale: ko });
+  };
+
+  const displayValue = () => {
+    if (value?.from && value?.to) {
+      return `${formatDate(value.from)} ~ ${formatDate(value.to)}`;
+    }
+    if (value?.from) {
+      return `${formatDate(value.from)} ~`;
+    }
+    if (value?.to) {
+      return `~ ${formatDate(value.to)}`;
+    }
+    return "";
+  };
+
+  const handleDateClick = (date: Date) => {
+    if (selectingType === "from") {
+      const newValue = { ...value, from: date };
+      onChange(newValue);
+      setSelectingType("to");
+    } else {
+      const newValue = { ...value, to: date };
+      onChange(newValue);
+      setSelectingType("from");
+    }
+  };
+
+  const handleClear = () => {
+    onChange({});
+    setSelectingType("from");
+  };
+
+  const handleConfirm = () => {
+    setIsOpen(false);
+    setSelectingType("from");
+    // 날짜는 이미 선택 시점에 onChange가 호출되므로 중복 호출 제거
+  };
+
+  const monthStart = startOfMonth(currentMonth);
+  const monthEnd = endOfMonth(currentMonth);
+  const days = eachDayOfInterval({ start: monthStart, end: monthEnd });
+
+  // 달력 시작을 월요일로 맞추기 위해 앞의 빈 칸들 계산
+  const startDate = new Date(monthStart);
+  const dayOfWeek = startDate.getDay();
+  const paddingDays = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 일요일(0)이면 6개, 나머지는 -1
+
+  const allDays = [...Array(paddingDays).fill(null), ...days];
+
+  const isInRange = (date: Date) => {
+    if (!value.from || !value.to) return false;
+    return date >= value.from && date <= value.to;
+  };
+
+  const isRangeStart = (date: Date) => {
+    return value.from && isSameDay(date, value.from);
+  };
+
+  const isRangeEnd = (date: Date) => {
+    return value.to && isSameDay(date, value.to);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !value?.from && !value?.to && "text-muted-foreground",
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {displayValue() || `${label} 기간 선택...`}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="p-4">
+          {/* 헤더 */}
+          <div className="mb-4 flex items-center justify-between">
+            <h3 className="text-sm font-medium">기간 선택</h3>
+            <div className="text-muted-foreground text-xs">
+              {selectingType === "from" ? "시작일을 선택하세요" : "종료일을 선택하세요"}
+            </div>
+          </div>
+
+          {/* 월 네비게이션 */}
+          <div className="mb-4 flex items-center justify-between">
+            <Button variant="ghost" size="sm" onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <div className="text-sm font-medium">{format(currentMonth, "yyyy년 MM월", { locale: ko })}</div>
+            <Button variant="ghost" size="sm" onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* 요일 헤더 */}
+          <div className="mb-2 grid grid-cols-7 gap-1">
+            {["월", "화", "수", "목", "금", "토", "일"].map((day) => (
+              <div key={day} className="text-muted-foreground p-2 text-center text-xs font-medium">
+                {day}
+              </div>
+            ))}
+          </div>
+
+          {/* 날짜 그리드 */}
+          <div className="mb-4 grid grid-cols-7 gap-1">
+            {allDays.map((date, index) => {
+              if (!date) {
+                return <div key={index} className="p-2" />;
+              }
+
+              const isCurrentMonth = isSameMonth(date, currentMonth);
+              const isSelected = isRangeStart(date) || isRangeEnd(date);
+              const isInRangeDate = isInRange(date);
+              const isTodayDate = isToday(date);
+
+              return (
+                <Button
+                  key={date.toISOString()}
+                  variant="ghost"
+                  size="sm"
+                  className={cn(
+                    "h-8 w-8 p-0 text-xs",
+                    !isCurrentMonth && "text-muted-foreground opacity-50",
+                    isSelected && "bg-primary text-primary-foreground hover:bg-primary",
+                    isInRangeDate && !isSelected && "bg-muted",
+                    isTodayDate && !isSelected && "border-primary border",
+                    selectingType === "from" && "hover:bg-primary/20",
+                    selectingType === "to" && "hover:bg-secondary/20",
+                  )}
+                  onClick={() => handleDateClick(date)}
+                  disabled={!isCurrentMonth}
+                >
+                  {format(date, "d")}
+                </Button>
+              );
+            })}
+          </div>
+
+          {/* 선택된 범위 표시 */}
+          {(value.from || value.to) && (
+            <div className="bg-muted mb-4 rounded-md p-2">
+              <div className="text-muted-foreground mb-1 text-xs">선택된 기간</div>
+              <div className="text-sm">
+                {value.from && <span className="font-medium">시작: {formatDate(value.from)}</span>}
+                {value.from && value.to && <span className="mx-2">~</span>}
+                {value.to && <span className="font-medium">종료: {formatDate(value.to)}</span>}
+              </div>
+            </div>
+          )}
+
+          {/* 액션 버튼 */}
+          <div className="flex justify-between">
+            <Button variant="outline" size="sm" onClick={handleClear}>
+              초기화
+            </Button>
+            <div className="space-x-2">
+              <Button variant="outline" size="sm" onClick={() => setIsOpen(false)}>
+                취소
+              </Button>
+              <Button size="sm" onClick={handleConfirm}>
+                확인
+              </Button>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

frontend/components/screen/panels/DataTableConfigPanel.tsx

@@ -320,18 +320,8 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
         columnsCount: table.columns.length,
       });
 
-      // 테이블의 모든 컬럼을 기본 설정으로 추가
-      const defaultColumns: DataTableColumn[] = table.columns.map((col, index) => ({
-        id: generateComponentId(),
-        columnName: col.columnName,
-        label: col.columnLabel || col.columnName,
-        widgetType: getWidgetTypeFromColumn(col),
-        gridColumns: 2, // 기본 2칸
-        visible: index < 6, // 처음 6개만 기본으로 표시
-        filterable: isFilterableWebType(getWidgetTypeFromColumn(col)),
-        sortable: true,
-        searchable: ["text", "email", "tel"].includes(getWidgetTypeFromColumn(col)),
-      }));
+      // 테이블 변경 시 컬럼을 자동으로 추가하지 않음 (사용자가 수동으로 추가해야 함)
+      const defaultColumns: DataTableColumn[] = [];
 
       console.log("✅ 생성된 컬럼 설정:", {
         defaultColumnsCount: defaultColumns.length,
@@ -351,71 +341,12 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
     [tables, onUpdateComponent, localValues.tableName],
   );
 
-  // 컬럼 타입 추론
+  // 컬럼 타입 추론 (통합 매핑 시스템 사용)
   const getWidgetTypeFromColumn = (column: ColumnInfo): WebType => {
-    const type = column.dataType?.toLowerCase() || "";
-    const name = column.columnName.toLowerCase();
+    // 통합 자동 매핑 유틸리티 사용
+    const { inferWebTypeFromColumn } = require("@/lib/utils/dbTypeMapping");
 
-    console.log("🔍 웹타입 추론:", {
-      columnName: column.columnName,
-      dataType: column.dataType,
-      type,
-      name,
-    });
-
-    // 숫자 타입
-    if (type.includes("int") || type.includes("integer") || type.includes("bigint") || type.includes("smallint")) {
-      return "number";
-    }
-    if (
-      type.includes("decimal") ||
-      type.includes("numeric") ||
-      type.includes("float") ||
-      type.includes("double") ||
-      type.includes("real")
-    ) {
-      return "decimal";
-    }
-
-    // 날짜/시간 타입
-    if (type.includes("timestamp") || type.includes("datetime")) {
-      return "datetime";
-    }
-    if (type.includes("date")) {
-      return "date";
-    }
-    if (type.includes("time")) {
-      return "datetime";
-    }
-
-    // 불린 타입
-    if (type.includes("bool") || type.includes("boolean")) {
-      return "checkbox";
-    }
-
-    // 컬럼명 기반 추론
-    if (name.includes("email") || name.includes("mail")) return "email";
-    if (name.includes("phone") || name.includes("tel") || name.includes("mobile")) return "tel";
-    if (name.includes("url") || name.includes("link")) return "text";
-    if (name.includes("password") || name.includes("pwd")) return "text";
-
-    // 파일 타입 추론
-    if (
-      name.includes("file") ||
-      name.includes("attach") ||
-      name.includes("upload") ||
-      name.includes("document") ||
-      name.includes("docs") ||
-      name.includes("image") ||
-      name.includes("photo") ||
-      name.includes("picture") ||
-      name.includes("media")
-    ) {
-      return "file";
-    }
-
-    // 텍스트 타입 (기본값)
-    return "text";
+    return inferWebTypeFromColumn(column.dataType || "text", column.columnName);
   };
 
   // 컬럼 업데이트
@@ -844,6 +775,11 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
       widgetType,
       label: targetColumn.columnLabel || targetColumn.columnName,
       gridColumns: 3,
+      // 웹타입별 추가 정보 설정
+      codeCategory: targetColumn.codeCategory,
+      referenceTable: targetColumn.referenceTable,
+      referenceColumn: targetColumn.referenceColumn,
+      displayColumn: targetColumn.displayColumn,
     };
 
     console.log("➕ 필터 추가 시작:", {

frontend/components/screen/templates/DataTableTemplate.tsx

@@ -121,25 +121,9 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
   className = "",
   isPreview = true,
 }) => {
-  // 미리보기용 기본 컬럼 데이터
+  // 설정된 컬럼만 사용 (자동 생성 안함)
   const defaultColumns = React.useMemo(() => {
-    if (columns.length > 0) return columns;
-
-    return [
-      { id: "id", label: "ID", type: "number", visible: true, sortable: true, filterable: false, width: 80 },
-      { id: "name", label: "이름", type: "text", visible: true, sortable: true, filterable: true, width: 150 },
-      { id: "email", label: "이메일", type: "email", visible: true, sortable: true, filterable: true, width: 200 },
-      { id: "status", label: "상태", type: "select", visible: true, sortable: true, filterable: true, width: 100 },
-      {
-        id: "created_date",
-        label: "생성일",
-        type: "date",
-        visible: true,
-        sortable: true,
-        filterable: true,
-        width: 120,
-      },
-    ];
+    return columns || [];
   }, [columns]);
 
   // 미리보기용 샘플 데이터

frontend/components/ui/progress.tsx

@@ -1,31 +1,25 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
-}
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="bg-primary h-full w-full flex-1 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };

frontend/constants/tableManagement.ts

@@ -48,6 +48,20 @@ export const TABLE_MANAGEMENT_KEYS = {
   WEB_TYPE_RADIO_DESC: "table.management.web.type.radio.description",
   WEB_TYPE_FILE: "table.management.web.type.file",
   WEB_TYPE_FILE_DESC: "table.management.web.type.file.description",
+  WEB_TYPE_DECIMAL: "table.management.web.type.decimal",
+  WEB_TYPE_DECIMAL_DESC: "table.management.web.type.decimal.description",
+  WEB_TYPE_DATETIME: "table.management.web.type.datetime",
+  WEB_TYPE_DATETIME_DESC: "table.management.web.type.datetime.description",
+  WEB_TYPE_BOOLEAN: "table.management.web.type.boolean",
+  WEB_TYPE_BOOLEAN_DESC: "table.management.web.type.boolean.description",
+  WEB_TYPE_EMAIL: "table.management.web.type.email",
+  WEB_TYPE_EMAIL_DESC: "table.management.web.type.email.description",
+  WEB_TYPE_TEL: "table.management.web.type.tel",
+  WEB_TYPE_TEL_DESC: "table.management.web.type.tel.description",
+  WEB_TYPE_URL: "table.management.web.type.url",
+  WEB_TYPE_URL_DESC: "table.management.web.type.url.description",
+  WEB_TYPE_DROPDOWN: "table.management.web.type.dropdown",
+  WEB_TYPE_DROPDOWN_DESC: "table.management.web.type.dropdown.description",
 
   // 공통 UI 요소
   BUTTON_REFRESH: "table.management.button.refresh",
@@ -135,4 +149,39 @@ export const WEB_TYPE_OPTIONS_WITH_KEYS = [
     labelKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_FILE,
     descriptionKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_FILE_DESC,
   },
+  {
+    value: "decimal",
+    labelKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_DECIMAL,
+    descriptionKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_DECIMAL_DESC,
+  },
+  {
+    value: "datetime",
+    labelKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_DATETIME,
+    descriptionKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_DATETIME_DESC,
+  },
+  {
+    value: "boolean",
+    labelKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_BOOLEAN,
+    descriptionKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_BOOLEAN_DESC,
+  },
+  {
+    value: "email",
+    labelKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_EMAIL,
+    descriptionKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_EMAIL_DESC,
+  },
+  {
+    value: "tel",
+    labelKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_TEL,
+    descriptionKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_TEL_DESC,
+  },
+  {
+    value: "url",
+    labelKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_URL,
+    descriptionKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_URL_DESC,
+  },
+  {
+    value: "dropdown",
+    labelKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_DROPDOWN,
+    descriptionKey: TABLE_MANAGEMENT_KEYS.WEB_TYPE_DROPDOWN_DESC,
+  },
 ] as const;

frontend/hooks/useFormValidation.ts

@@ -1,89 +1,472 @@
-import { useState } from "react";
+/**
+ * 폼 검증 상태 관리 훅
+ * 실시간 검증과 사용자 피드백을 위한 커스텀 훅
+ */
 
-export interface ValidationState {
-  enabled: boolean;
-  value: string;
+import { useState, useCallback, useEffect, useRef } from "react";
+import { ComponentData, ColumnInfo, ScreenDefinition } from "@/types/screen";
+import { validateFormData, ValidationResult, ValidationError, ValidationWarning } from "@/lib/utils/formValidation";
+import { enhancedFormService, SaveContext, EnhancedSaveResult } from "@/lib/services/enhancedFormService";
+import { useToast } from "@/hooks/use-toast";
+
+// 검증 상태
+export type ValidationStatus = "idle" | "validating" | "valid" | "invalid";
+
+// 필드별 검증 상태
+export interface FieldValidationState {
+  status: ValidationStatus;
+  error?: ValidationError;
+  warning?: ValidationWarning;
+  lastValidated?: Date;
 }
 
-export interface ValidationStates {
-  [fieldName: string]: ValidationState;
+// 폼 검증 상태
+export interface FormValidationState {
+  status: ValidationStatus;
+  isValid: boolean;
+  errors: ValidationError[];
+  warnings: ValidationWarning[];
+  fieldStates: Record<string, FieldValidationState>;
+  lastValidated?: Date;
+  validationCount: number;
 }
 
-export interface UseFormValidationProps {
-  fields: string[];
-  initialStates?: Partial<ValidationStates>;
+// 저장 상태
+export interface SaveState {
+  status: "idle" | "saving" | "success" | "error";
+  message?: string;
+  result?: EnhancedSaveResult;
+  lastSaved?: Date;
 }
 
-export function useFormValidation({ fields, initialStates = {} }: UseFormValidationProps) {
-  // 검증 상태 초기화
-  const initValidationStates = (): ValidationStates => {
-    const states: ValidationStates = {};
-    fields.forEach((field) => {
-      states[field] = initialStates[field] || { enabled: false, value: "" };
-    });
-    return states;
-  };
+// 훅 옵션
+export interface UseFormValidationOptions {
+  enableRealTimeValidation?: boolean;
+  validationDelay?: number; // debounce 지연시간 (ms)
+  enableAutoSave?: boolean;
+  autoSaveDelay?: number; // 자동저장 지연시간 (ms)
+  showToastMessages?: boolean;
+  validateOnMount?: boolean;
+}
 
-  const [validationStates, setValidationStates] = useState<ValidationStates>(initValidationStates);
+// 훅 반환값
+export interface UseFormValidationReturn {
+  // 상태
+  validationState: FormValidationState;
+  saveState: SaveState;
 
-  // 특정 필드의 검증 상태 업데이트
-  const updateFieldValidation = (fieldName: string, value: string) => {
-    setValidationStates((prev) => ({
+  // 액션
+  validateForm: () => Promise<ValidationResult>;
+  validateField: (fieldName: string, value: any) => Promise<void>;
+  saveForm: () => Promise<boolean>;
+  clearValidation: () => void;
+
+  // 유틸리티
+  getFieldError: (fieldName: string) => ValidationError | undefined;
+  getFieldWarning: (fieldName: string) => ValidationWarning | undefined;
+  hasFieldError: (fieldName: string) => boolean;
+  isFieldValid: (fieldName: string) => boolean;
+  canSave: boolean;
+}
+
+/**
+ * 폼 검증 관리 훅
+ */
+export const useFormValidation = (
+  formData: Record<string, any>,
+  components: ComponentData[],
+  tableColumns: ColumnInfo[],
+  screenInfo: ScreenDefinition,
+  options: UseFormValidationOptions = {},
+): UseFormValidationReturn => {
+  const {
+    enableRealTimeValidation = true,
+    validationDelay = 500,
+    enableAutoSave = false,
+    autoSaveDelay = 2000,
+    showToastMessages = true,
+    validateOnMount = false,
+  } = options;
+
+  const { toast } = useToast();
+
+  // 상태
+  const [validationState, setValidationState] = useState<FormValidationState>({
+    status: "idle",
+    isValid: false,
+    errors: [],
+    warnings: [],
+    fieldStates: {},
+    validationCount: 0,
+  });
+
+  const [saveState, setSaveState] = useState<SaveState>({
+    status: "idle",
+  });
+
+  // 타이머 참조
+  const validationTimer = useRef<NodeJS.Timeout>();
+  const autoSaveTimer = useRef<NodeJS.Timeout>();
+  const lastValidationData = useRef<string>("");
+
+  /**
+   * 전체 폼 검증
+   */
+  const validateForm = useCallback(async (): Promise<ValidationResult> => {
+    if (!screenInfo?.tableName) {
+      return {
+        isValid: false,
+        errors: [
+          {
+            field: "form",
+            code: "NO_TABLE",
+            message: "테이블명이 설정되지 않았습니다.",
+            severity: "error",
+          },
+        ],
+        warnings: [],
+      };
+    }
+
+    setValidationState((prev) => ({
       ...prev,
-      [fieldName]: { enabled: true, value: value.trim() },
+      status: "validating",
     }));
-  };
 
-  // onBlur 핸들러 생성
-  const createBlurHandler =
-    (fieldName: string) => (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const value = event.target.value.trim();
-      if (value) {
-        updateFieldValidation(fieldName, value);
+    try {
+      const result = await validateFormData(formData, components, tableColumns, screenInfo.tableName);
+
+      // 필드별 상태 업데이트
+      const fieldStates: Record<string, FieldValidationState> = {};
+
+      // 기존 필드 상태 초기화
+      Object.keys(formData).forEach((fieldName) => {
+        fieldStates[fieldName] = {
+          status: "valid",
+          lastValidated: new Date(),
+        };
+      });
+
+      // 오류가 있는 필드 업데이트
+      result.errors.forEach((error) => {
+        fieldStates[error.field] = {
+          status: "invalid",
+          error,
+          lastValidated: new Date(),
+        };
+      });
+
+      // 경고가 있는 필드 업데이트
+      result.warnings.forEach((warning) => {
+        if (fieldStates[warning.field]) {
+          fieldStates[warning.field].warning = warning;
+        } else {
+          fieldStates[warning.field] = {
+            status: "valid",
+            warning,
+            lastValidated: new Date(),
+          };
+        }
+      });
+
+      setValidationState((prev) => ({
+        status: result.isValid ? "valid" : "invalid",
+        isValid: result.isValid,
+        errors: result.errors,
+        warnings: result.warnings,
+        fieldStates,
+        lastValidated: new Date(),
+        validationCount: prev.validationCount + 1,
+      }));
+
+      if (showToastMessages) {
+        if (result.isValid && result.warnings.length > 0) {
+          toast({
+            title: "검증 완료",
+            description: `${result.warnings.length}개의 경고가 있습니다.`,
+            variant: "default",
+          });
+        } else if (!result.isValid) {
+          toast({
+            title: "검증 실패",
+            description: `${result.errors.length}개의 오류를 수정해주세요.`,
+            variant: "destructive",
+          });
+        }
+      }
+
+      return result;
+    } catch (error) {
+      console.error("❌ 폼 검증 중 오류:", error);
+
+      const errorResult: ValidationResult = {
+        isValid: false,
+        errors: [
+          {
+            field: "form",
+            code: "VALIDATION_ERROR",
+            message: `검증 중 오류가 발생했습니다: ${error}`,
+            severity: "error",
+          },
+        ],
+        warnings: [],
+      };
+
+      setValidationState((prev) => ({
+        ...prev,
+        status: "invalid",
+        isValid: false,
+        errors: errorResult.errors,
+        warnings: [],
+        lastValidated: new Date(),
+        validationCount: prev.validationCount + 1,
+      }));
+
+      return errorResult;
+    }
+  }, [formData, components, tableColumns, screenInfo, showToastMessages, toast]);
+
+  /**
+   * 개별 필드 검증
+   */
+  const validateField = useCallback(
+    async (fieldName: string, value: any): Promise<void> => {
+      const component = components.find((c) => (c as any).columnName === fieldName || c.id === fieldName);
+
+      if (!component || component.type !== "widget") return;
+
+      setValidationState((prev) => ({
+        ...prev,
+        fieldStates: {
+          ...prev.fieldStates,
+          [fieldName]: {
+            ...prev.fieldStates[fieldName],
+            status: "validating",
+          },
+        },
+      }));
+
+      // 개별 필드 검증 로직
+      // (실제 구현에서는 validateFieldValue 함수 사용)
+
+      setValidationState((prev) => ({
+        ...prev,
+        fieldStates: {
+          ...prev.fieldStates,
+          [fieldName]: {
+            status: "valid",
+            lastValidated: new Date(),
+          },
+        },
+      }));
+    },
+    [components],
+  );
+
+  /**
+   * 폼 저장
+   */
+  const saveForm = useCallback(async (): Promise<boolean> => {
+    if (!validationState.isValid) {
+      if (showToastMessages) {
+        toast({
+          title: "저장 실패",
+          description: "검증 오류를 먼저 수정해주세요.",
+          variant: "destructive",
+        });
+      }
+      return false;
+    }
+
+    setSaveState({ status: "saving" });
+
+    try {
+      const saveContext: SaveContext = {
+        tableName: screenInfo.tableName,
+        screenInfo,
+        components,
+        formData,
+        options: {
+          transformData: true,
+          showProgress: true,
+        },
+      };
+
+      const result = await enhancedFormService.saveFormData(saveContext);
+
+      setSaveState({
+        status: result.success ? "success" : "error",
+        message: result.message,
+        result,
+        lastSaved: new Date(),
+      });
+
+      if (showToastMessages) {
+        toast({
+          title: result.success ? "저장 성공" : "저장 실패",
+          description: result.message,
+          variant: result.success ? "default" : "destructive",
+        });
+      }
+
+      return result.success;
+    } catch (error) {
+      console.error("❌ 폼 저장 중 오류:", error);
+
+      setSaveState({
+        status: "error",
+        message: `저장 중 오류가 발생했습니다: ${error}`,
+        lastSaved: new Date(),
+      });
+
+      if (showToastMessages) {
+        toast({
+          title: "저장 실패",
+          description: "저장 중 오류가 발생했습니다.",
+          variant: "destructive",
+        });
+      }
+
+      return false;
+    }
+  }, [validationState.isValid, screenInfo, components, formData, showToastMessages, toast]);
+
+  /**
+   * 검증 상태 초기화
+   */
+  const clearValidation = useCallback(() => {
+    setValidationState({
+      status: "idle",
+      isValid: false,
+      errors: [],
+      warnings: [],
+      fieldStates: {},
+      validationCount: 0,
+    });
+
+    setSaveState({ status: "idle" });
+  }, []);
+
+  /**
+   * 필드 오류 조회
+   */
+  const getFieldError = useCallback(
+    (fieldName: string): ValidationError | undefined => {
+      return validationState.fieldStates[fieldName]?.error;
+    },
+    [validationState.fieldStates],
+  );
+
+  /**
+   * 필드 경고 조회
+   */
+  const getFieldWarning = useCallback(
+    (fieldName: string): ValidationWarning | undefined => {
+      return validationState.fieldStates[fieldName]?.warning;
+    },
+    [validationState.fieldStates],
+  );
+
+  /**
+   * 필드 오류 여부 확인
+   */
+  const hasFieldError = useCallback(
+    (fieldName: string): boolean => {
+      return validationState.fieldStates[fieldName]?.status === "invalid";
+    },
+    [validationState.fieldStates],
+  );
+
+  /**
+   * 필드 유효성 확인
+   */
+  const isFieldValid = useCallback(
+    (fieldName: string): boolean => {
+      const fieldState = validationState.fieldStates[fieldName];
+      return fieldState?.status === "valid" || !fieldState;
+    },
+    [validationState.fieldStates],
+  );
+
+  // 저장 가능 여부
+  const canSave = validationState.isValid && saveState.status !== "saving" && Object.keys(formData).length > 0;
+
+  // 실시간 검증 (debounced)
+  useEffect(() => {
+    if (!enableRealTimeValidation) return;
+
+    const currentDataString = JSON.stringify(formData);
+    if (currentDataString === lastValidationData.current) return;
+
+    // 이전 타이머 클리어
+    if (validationTimer.current) {
+      clearTimeout(validationTimer.current);
+    }
+
+    // 새 타이머 설정
+    validationTimer.current = setTimeout(() => {
+      lastValidationData.current = currentDataString;
+      validateForm();
+    }, validationDelay);
+
+    return () => {
+      if (validationTimer.current) {
+        clearTimeout(validationTimer.current);
       }
     };
+  }, [formData, enableRealTimeValidation, validationDelay, validateForm]);
 
-  // 모든 필수 필드가 검증되었는지 확인
-  const areAllFieldsValidated = (requiredFields?: string[]) => {
-    const fieldsToCheck = requiredFields || fields;
-    return fieldsToCheck.every((field) => validationStates[field]?.enabled);
-  };
+  // 자동 저장
+  useEffect(() => {
+    if (!enableAutoSave || !validationState.isValid) return;
 
-  // 검증 상태 초기화
-  const resetValidation = (newStates?: Partial<ValidationStates>) => {
-    if (newStates) {
-      setValidationStates((prev) => {
-        const updated = { ...prev };
-        Object.entries(newStates).forEach(([key, value]) => {
-          if (value !== undefined) {
-            updated[key] = value;
-          }
-        });
-        return updated;
-      });
-    } else {
-      setValidationStates(initValidationStates());
+    // 이전 타이머 클리어
+    if (autoSaveTimer.current) {
+      clearTimeout(autoSaveTimer.current);
     }
-  };
 
-  // 특정 필드 검증 상태 확인
-  const isFieldValidated = (fieldName: string) => validationStates[fieldName]?.enabled || false;
+    // 새 타이머 설정
+    autoSaveTimer.current = setTimeout(() => {
+      saveForm();
+    }, autoSaveDelay);
 
-  // 필드 값 가져오기
-  const getFieldValue = (fieldName: string) => validationStates[fieldName]?.value || "";
+    return () => {
+      if (autoSaveTimer.current) {
+        clearTimeout(autoSaveTimer.current);
+      }
+    };
+  }, [validationState.isValid, enableAutoSave, autoSaveDelay, saveForm]);
+
+  // 마운트 시 검증
+  useEffect(() => {
+    if (validateOnMount && Object.keys(formData).length > 0) {
+      validateForm();
+    }
+  }, [validateOnMount]); // formData는 의존성에서 제외 (무한 루프 방지)
+
+  // 클린업
+  useEffect(() => {
+    return () => {
+      if (validationTimer.current) {
+        clearTimeout(validationTimer.current);
+      }
+      if (autoSaveTimer.current) {
+        clearTimeout(autoSaveTimer.current);
+      }
+    };
+  }, []);
 
   return {
-    // 상태
-    validationStates,
-
-    // 액션
-    updateFieldValidation,
-    resetValidation,
-
-    // 유틸리티
-    createBlurHandler,
-    areAllFieldsValidated,
-    isFieldValidated,
-    getFieldValue,
+    validationState,
+    saveState,
+    validateForm,
+    validateField,
+    saveForm,
+    clearValidation,
+    getFieldError,
+    getFieldWarning,
+    hasFieldError,
+    isFieldValid,
+    canSave,
   };
-}
+};

frontend/hooks/useViewportSize.ts

@@ -0,0 +1,89 @@
+import { useState, useEffect } from "react";
+
+interface ViewportSize {
+  width: number;
+  height: number;
+  availableWidth: number;
+  availableHeight: number;
+  sidebarWidth: number;
+  headerHeight: number;
+}
+
+/**
+ * 뷰포트 크기와 레이아웃 요소들을 고려한 사용 가능한 공간을 계산하는 훅
+ */
+export const useViewportSize = () => {
+  const [viewportSize, setViewportSize] = useState<ViewportSize>({
+    width: 0,
+    height: 0,
+    availableWidth: 0,
+    availableHeight: 0,
+    sidebarWidth: 0,
+    headerHeight: 0,
+  });
+
+  useEffect(() => {
+    const updateViewportSize = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+
+      // 레이아웃 요소 크기 계산
+      const isDesktop = width >= 1024; // lg 브레이크포인트
+      const sidebarWidth = isDesktop ? 256 : 0; // w-64 = 256px
+      const headerHeight = 56; // 대략적인 헤더 높이 (h-14 = 56px)
+
+      // 사용 가능한 컨텐츠 영역 계산
+      const availableWidth = width - sidebarWidth;
+      const availableHeight = height - headerHeight;
+
+      setViewportSize({
+        width,
+        height,
+        availableWidth: Math.max(availableWidth, 300), // 최소 300px
+        availableHeight: Math.max(availableHeight, 200), // 최소 200px
+        sidebarWidth,
+        headerHeight,
+      });
+    };
+
+    updateViewportSize();
+    window.addEventListener("resize", updateViewportSize);
+    return () => window.removeEventListener("resize", updateViewportSize);
+  }, []);
+
+  return viewportSize;
+};
+
+/**
+ * 특정 컨테이너의 실제 사용 가능한 크기를 계산
+ */
+export const useContainerSize = (containerRef: React.RefObject<HTMLElement>) => {
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+  const viewportSize = useViewportSize();
+
+  useEffect(() => {
+    const updateContainerSize = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+
+        // 컨테이너 내부 여백 고려
+        const padding = 32; // p-4 * 2 = 32px
+        const controlBarHeight = 48; // 컨트롤 바 높이
+
+        const availableWidth = Math.max(rect.width - padding, 300);
+        const availableHeight = Math.max(rect.height - controlBarHeight - padding, 200);
+
+        setContainerSize({
+          width: availableWidth,
+          height: availableHeight,
+        });
+      }
+    };
+
+    updateContainerSize();
+    window.addEventListener("resize", updateContainerSize);
+    return () => window.removeEventListener("resize", updateContainerSize);
+  }, [containerRef, viewportSize]);
+
+  return containerSize;
+};

frontend/lib/api/ddl.ts

@@ -0,0 +1,127 @@
+/**
+ * DDL 실행 API 클라이언트
+ */
+
+import { apiClient } from "./client";
+import {
+  CreateTableRequest,
+  AddColumnRequest,
+  DDLExecutionResult,
+  ValidationResult,
+  DDLExecutionLog,
+  DDLStatistics,
+} from "../../types/ddl";
+
+export const ddlApi = {
+  /**
+   * 새 테이블 생성
+   */
+  createTable: async (request: CreateTableRequest): Promise<DDLExecutionResult> => {
+    const response = await apiClient.post("/ddl/tables", request);
+    return response.data;
+  },
+
+  /**
+   * 기존 테이블에 컬럼 추가
+   */
+  addColumn: async (tableName: string, request: AddColumnRequest): Promise<DDLExecutionResult> => {
+    const response = await apiClient.post(`/ddl/tables/${tableName}/columns`, request);
+    return response.data;
+  },
+
+  /**
+   * 테이블 생성 사전 검증 (실제 생성하지 않고 검증만)
+   */
+  validateTableCreation: async (request: CreateTableRequest): Promise<ValidationResult> => {
+    const response = await apiClient.post("/ddl/validate/table", request);
+    return response.data.data;
+  },
+
+  /**
+   * DDL 실행 로그 조회
+   */
+  getDDLLogs: async (params?: {
+    limit?: number;
+    userId?: string;
+    ddlType?: string;
+  }): Promise<{
+    logs: DDLExecutionLog[];
+    total: number;
+  }> => {
+    const response = await apiClient.get("/ddl/logs", { params });
+    return response.data.data;
+  },
+
+  /**
+   * DDL 실행 통계 조회
+   */
+  getDDLStatistics: async (params?: { fromDate?: string; toDate?: string }): Promise<DDLStatistics> => {
+    const response = await apiClient.get("/ddl/statistics", { params });
+    return response.data.data;
+  },
+
+  /**
+   * 특정 테이블의 DDL 히스토리 조회
+   */
+  getTableDDLHistory: async (
+    tableName: string,
+  ): Promise<{
+    tableName: string;
+    history: DDLExecutionLog[];
+    total: number;
+  }> => {
+    const response = await apiClient.get(`/ddl/tables/${tableName}/history`);
+    return response.data.data;
+  },
+
+  /**
+   * 생성된 테이블 정보 조회
+   */
+  getTableInfo: async (
+    tableName: string,
+  ): Promise<{
+    tableInfo: any;
+    columns: any[];
+  }> => {
+    const response = await apiClient.get(`/ddl/tables/${tableName}/info`);
+    return response.data.data;
+  },
+
+  /**
+   * 오래된 DDL 로그 정리
+   */
+  cleanupOldLogs: async (
+    retentionDays?: number,
+  ): Promise<{
+    deletedCount: number;
+    retentionDays: number;
+  }> => {
+    const response = await apiClient.delete("/ddl/logs/cleanup", {
+      params: { retentionDays },
+    });
+    return response.data.data;
+  },
+
+  /**
+   * DDL 서비스 정보 조회
+   */
+  getServiceInfo: async (): Promise<any> => {
+    const response = await apiClient.get("/ddl/info");
+    return response.data.data;
+  },
+
+  /**
+   * DDL 서비스 헬스체크
+   */
+  healthCheck: async (): Promise<{
+    status: string;
+    timestamp: string;
+    checks: {
+      database: string;
+      service: string;
+    };
+  }> => {
+    const response = await apiClient.get("/ddl/health");
+    return response.data;
+  },
+};

frontend/lib/api/dynamicForm.ts

@@ -28,7 +28,7 @@ export interface FormDataResponse {
 // 동적 폼 API 클래스
 export class DynamicFormApi {
   /**
-   * 폼 데이터 저장
+   * 폼 데이터 저장 (기존 버전 - 레거시 지원)
    * @param formData 저장할 폼 데이터
    * @returns 저장 결과
    */
@@ -57,6 +57,38 @@ export class DynamicFormApi {
     }
   }
 
+  /**
+   * 폼 데이터 저장 (개선된 버전)
+   * @param formData 저장할 폼 데이터
+   * @returns 저장 결과 (상세한 검증 정보 포함)
+   */
+  static async saveData(formData: DynamicFormData): Promise<ApiResponse<SaveFormDataResponse>> {
+    try {
+      console.log("🚀 개선된 폼 데이터 저장 요청:", formData);
+
+      const response = await apiClient.post("/dynamic-form/save-enhanced", formData);
+
+      console.log("✅ 개선된 폼 데이터 저장 성공:", response.data);
+      return response.data;
+    } catch (error: any) {
+      console.error("❌ 개선된 폼 데이터 저장 실패:", error);
+
+      // 개선된 오류 처리
+      const errorResponse = error.response?.data;
+      if (errorResponse && !errorResponse.success) {
+        return errorResponse; // 서버에서 온 구조화된 오류 응답 그대로 반환
+      }
+
+      const errorMessage = error.response?.data?.message || error.message || "데이터 저장 중 오류가 발생했습니다.";
+
+      return {
+        success: false,
+        message: errorMessage,
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
+
   /**
    * 폼 데이터 업데이트
    * @param id 레코드 ID

frontend/lib/api/externalDbConnection.ts

@@ -205,10 +205,11 @@ export class ExternalDbConnectionAPI {
   /**
    * 데이터베이스 연결 테스트 (ID 기반)
    */
-  static async testConnection(connectionId: number): Promise<ConnectionTestResult> {
+  static async testConnection(connectionId: number, password?: string): Promise<ConnectionTestResult> {
     try {
       const response = await apiClient.post<ApiResponse<ConnectionTestResult>>(
-        `${this.BASE_PATH}/${connectionId}/test`
+        `${this.BASE_PATH}/${connectionId}/test`,
+        password ? { password } : undefined
       );
 
       if (!response.data.success) {

frontend/lib/api/tableManagement.ts

@@ -0,0 +1,223 @@
+/**
+ * 테이블 관리 API
+ * 테이블 컬럼 정보 조회 및 관리 기능
+ */
+
+import { apiClient, ApiResponse } from "./client";
+
+// 컬럼 정보 타입 (백엔드와 일치)
+export interface ColumnTypeInfo {
+  tableName?: string;
+  columnName: string;
+  displayName: string;
+  dataType: string;
+  dbType: string;
+  webType: string;
+  inputType?: "direct" | "auto";
+  detailSettings: string;
+  description?: string;
+  isNullable: string;
+  isPrimaryKey: boolean;
+  defaultValue?: string;
+  maxLength?: number;
+  numericPrecision?: number;
+  numericScale?: number;
+  codeCategory?: string;
+  codeValue?: string;
+  referenceTable?: string;
+  referenceColumn?: string;
+  displayColumn?: string;
+  displayOrder?: number;
+  isVisible?: boolean;
+}
+
+// 테이블 정보 타입
+export interface TableInfo {
+  tableName: string;
+  displayName: string;
+  description: string;
+  columnCount: number;
+}
+
+// 컬럼 설정 타입
+export interface ColumnSettings {
+  columnName?: string;
+  columnLabel: string;
+  webType: string;
+  detailSettings: string;
+  codeCategory: string;
+  codeValue: string;
+  referenceTable: string;
+  referenceColumn: string;
+  displayColumn?: string;
+  displayOrder?: number;
+  isVisible?: boolean;
+}
+
+// API 응답 타입들
+export interface TableListResponse extends ApiResponse<TableInfo[]> {}
+export interface ColumnListResponse extends ApiResponse<ColumnTypeInfo[]> {}
+export interface ColumnSettingsResponse extends ApiResponse<void> {}
+
+/**
+ * 테이블 관리 API 클래스
+ */
+class TableManagementApi {
+  private readonly basePath = "/table-management";
+
+  /**
+   * 테이블 목록 조회
+   */
+  async getTableList(): Promise<TableListResponse> {
+    try {
+      const response = await apiClient.get(`${this.basePath}/tables`);
+      return response.data;
+    } catch (error: any) {
+      console.error("❌ 테이블 목록 조회 실패:", error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message || "테이블 목록을 조회할 수 없습니다.",
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
+
+  /**
+   * 특정 테이블의 컬럼 목록 조회
+   */
+  async getColumnList(tableName: string): Promise<ColumnListResponse> {
+    try {
+      const response = await apiClient.get(`${this.basePath}/tables/${tableName}/columns`);
+      return response.data;
+    } catch (error: any) {
+      console.error(`❌ 테이블 '${tableName}' 컬럼 목록 조회 실패:`, error);
+      return {
+        success: false,
+        message:
+          error.response?.data?.message || error.message || `테이블 '${tableName}'의 컬럼 정보를 조회할 수 없습니다.`,
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
+
+  /**
+   * 컬럼 타입 설정 저장
+   */
+  async updateColumnSettings(
+    tableName: string,
+    columnName: string,
+    settings: ColumnSettings,
+  ): Promise<ColumnSettingsResponse> {
+    try {
+      const response = await apiClient.put(`${this.basePath}/tables/${tableName}/columns/${columnName}`, settings);
+      return response.data;
+    } catch (error: any) {
+      console.error(`❌ 컬럼 '${tableName}.${columnName}' 설정 저장 실패:`, error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message || "컬럼 설정을 저장할 수 없습니다.",
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
+
+  /**
+   * 여러 컬럼 설정 일괄 저장
+   */
+  async updateMultipleColumnSettings(
+    tableName: string,
+    settingsArray: Array<{ columnName: string; settings: ColumnSettings }>,
+  ): Promise<ColumnSettingsResponse> {
+    try {
+      const response = await apiClient.put(`${this.basePath}/tables/${tableName}/columns/batch`, {
+        settings: settingsArray,
+      });
+      return response.data;
+    } catch (error: any) {
+      console.error(`❌ 테이블 '${tableName}' 컬럼 설정 일괄 저장 실패:`, error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message || "컬럼 설정을 일괄 저장할 수 없습니다.",
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
+
+  /**
+   * 테이블 스키마 정보 조회 (컬럼 존재 여부 검증용)
+   */
+  async getTableSchema(tableName: string): Promise<ApiResponse<ColumnTypeInfo[]>> {
+    try {
+      const response = await apiClient.get(`${this.basePath}/tables/${tableName}/schema`);
+      return response.data;
+    } catch (error: any) {
+      console.error(`❌ 테이블 '${tableName}' 스키마 조회 실패:`, error);
+      return {
+        success: false,
+        message:
+          error.response?.data?.message || error.message || `테이블 '${tableName}'의 스키마 정보를 조회할 수 없습니다.`,
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
+
+  /**
+   * 테이블 존재 여부 확인
+   */
+  async checkTableExists(tableName: string): Promise<ApiResponse<{ exists: boolean }>> {
+    try {
+      const response = await apiClient.get(`${this.basePath}/tables/${tableName}/exists`);
+      return response.data;
+    } catch (error: any) {
+      console.error(`❌ 테이블 '${tableName}' 존재 여부 확인 실패:`, error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message || "테이블 존재 여부를 확인할 수 없습니다.",
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
+
+  /**
+   * 컬럼 웹타입 정보 조회 (화면관리 연동용)
+   */
+  async getColumnWebTypes(tableName: string): Promise<ApiResponse<ColumnTypeInfo[]>> {
+    try {
+      const response = await apiClient.get(`${this.basePath}/tables/${tableName}/web-types`);
+      return response.data;
+    } catch (error: any) {
+      console.error(`❌ 테이블 '${tableName}' 웹타입 정보 조회 실패:`, error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message || "웹타입 정보를 조회할 수 없습니다.",
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
+
+  /**
+   * 데이터베이스 연결 상태 확인
+   */
+  async checkDatabaseConnection(): Promise<ApiResponse<{ connected: boolean; message: string }>> {
+    try {
+      const response = await apiClient.get(`${this.basePath}/health`);
+      return response.data;
+    } catch (error: any) {
+      console.error("❌ 데이터베이스 연결 상태 확인 실패:", error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message || "데이터베이스 연결 상태를 확인할 수 없습니다.",
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
+}
+
+// 싱글톤 인스턴스 생성
+export const tableManagementApi = new TableManagementApi();
+
+// 편의 함수들
+export const getTableColumns = (tableName: string) => tableManagementApi.getColumnList(tableName);
+export const updateColumnType = (tableName: string, columnName: string, settings: ColumnSettings) =>
+  tableManagementApi.updateColumnSettings(tableName, columnName, settings);
+export const checkTableExists = (tableName: string) => tableManagementApi.checkTableExists(tableName);

frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx

@@ -77,7 +77,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -92,11 +92,13 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
         >
           {component.label}
           {component.required && (
-            <span style={{
-              color: "#ef4444",
-              // isInteractive 모드에서는 사용자 스타일 우선 적용
-              ...(isInteractive && component.style ? component.style : {}),
-            }}>
+            <span
+              style={{
+                color: "#ef4444",
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
+            >
               *
             </span>
           )}
@@ -104,7 +106,8 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
       )}
 
       <label
-        style={{display: "flex",
+        style={{
+          display: "flex",
           alignItems: "center",
           gap: "8px",
           cursor: "pointer",
@@ -112,7 +115,8 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
           height: "100%",
           fontSize: "14px",
           // isInteractive 모드에서는 사용자 스타일 우선 적용
-          ...(isInteractive && component.style ? component.style : {}),}}
+          ...(isInteractive && component.style ? component.style : {}),
+        }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
@@ -122,20 +126,28 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
           checked={component.value === true || component.value === "true"}
           disabled={componentConfig.disabled || false}
           required={componentConfig.required || false}
-          style={{width: "16px",
+          style={{
+            width: "16px",
             height: "16px",
             accentColor: "#3b82f6",
-          // isInteractive 모드에서는 사용자 스타일 우선 적용
-          ...(isInteractive && component.style ? component.style : {}),}}
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
           onChange={(e) => {
             if (component.onChange) {
               component.onChange(e.target.checked);
             }
           }}
         />
-        <span style={{color: "#374151",
-          // isInteractive 모드에서는 사용자 스타일 우선 적용
-          ...(isInteractive && component.style ? component.style : {}),}}>{componentConfig.checkboxLabel || component.text || "체크박스"}</span>
+        <span
+          style={{
+            color: "#374151",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
+        >
+          {componentConfig.checkboxLabel || component.text || "체크박스"}
+        </span>
       </label>
     </div>
   );

frontend/lib/registry/components/date-input/DateInputComponent.tsx

@@ -303,15 +303,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
           }}
         >
           {component.label}
-          {component.required && (
-            <span
-              style={{
-                color: "#ef4444",
-              }}
-            >
-              *
-            </span>
-          )}
+          {component.required && <span style={{ color: "#ef4444" }}>*</span>}
         </label>
       )}
 

frontend/lib/registry/components/divider-line/DividerLineComponent.tsx

@@ -74,7 +74,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",

frontend/lib/registry/components/file-upload/FileUploadComponent.tsx

@@ -77,7 +77,7 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -91,15 +91,23 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
           }}
         >
           {component.label}
-          {component.required && <span style={{color: "#ef4444",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>*</span>}
+          {component.required && (
+            <span
+              style={{
+                color: "#ef4444",
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
+            >
+              *
+            </span>
+          )}
         </label>
       )}
 
       <div
-        style={{width: "100%",
+        style={{
+          width: "100%",
           height: "100%",
           border: "2px dashed #d1d5db",
           borderRadius: "8px",
@@ -110,9 +118,9 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
           cursor: "pointer",
           backgroundColor: "#f9fafb",
           position: "relative",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+          // isInteractive 모드에서는 사용자 스타일 우선 적용
+          ...(isInteractive && component.style ? component.style : {}),
+        }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
@@ -139,22 +147,42 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             }
           }}
         />
-        <div style={{textAlign: "center", color: "#6b7280", fontSize: "14px",
+        <div
+          style={{
+            textAlign: "center",
+            color: "#6b7280",
+            fontSize: "14px",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
-          }}>
-          <div style={{fontSize: "24px", marginBottom: "8px",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>📁</div>
-          <div style={{fontWeight: "500",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>파일을 선택하거나 드래그하세요</div>
-          <div style={{fontSize: "12px", marginTop: "4px",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>
+          }}
+        >
+          <div
+            style={{
+              fontSize: "24px",
+              marginBottom: "8px",
+              // isInteractive 모드에서는 사용자 스타일 우선 적용
+              ...(isInteractive && component.style ? component.style : {}),
+            }}
+          >
+            📁
+          </div>
+          <div
+            style={{
+              fontWeight: "500",
+              // isInteractive 모드에서는 사용자 스타일 우선 적용
+              ...(isInteractive && component.style ? component.style : {}),
+            }}
+          >
+            파일을 선택하거나 드래그하세요
+          </div>
+          <div
+            style={{
+              fontSize: "12px",
+              marginTop: "4px",
+              // isInteractive 모드에서는 사용자 스타일 우선 적용
+              ...(isInteractive && component.style ? component.style : {}),
+            }}
+          >
             {componentConfig.accept && `지원 형식: ${componentConfig.accept}`}
           </div>
         </div>

frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx

@@ -74,7 +74,7 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",

frontend/lib/registry/components/number-input/NumberInputComponent.tsx

@@ -96,15 +96,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
           }}
         >
           {component.label}
-          {component.required && (
-            <span
-              style={{
-                color: "#ef4444",
-              }}
-            >
-              *
-            </span>
-          )}
+          {component.required && <span style={{ color: "#ef4444" }}>*</span>}
         </label>
       )}
 

frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx

@@ -77,7 +77,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -91,23 +91,31 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
           }}
         >
           {component.label}
-          {component.required && <span style={{color: "#ef4444",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>*</span>}
+          {component.required && (
+            <span
+              style={{
+                color: "#ef4444",
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
+            >
+              *
+            </span>
+          )}
         </label>
       )}
 
       <div
-        style={{width: "100%",
+        style={{
+          width: "100%",
           height: "100%",
           display: "flex",
           flexDirection: componentConfig.direction === "horizontal" ? "row" : "column",
           gap: "8px",
           padding: "8px",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+          // isInteractive 모드에서는 사용자 스타일 우선 적용
+          ...(isInteractive && component.style ? component.style : {}),
+        }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
@@ -115,14 +123,15 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
         {(componentConfig.options || []).map((option, index) => (
           <label
             key={index}
-            style={{display: "flex",
+            style={{
+              display: "flex",
               alignItems: "center",
               gap: "6px",
               cursor: "pointer",
               fontSize: "14px",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+              // isInteractive 모드에서는 사용자 스타일 우선 적용
+              ...(isInteractive && component.style ? component.style : {}),
+            }}
           >
             <input
               type="radio"
@@ -131,53 +140,79 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
               checked={component.value === option.value}
               disabled={componentConfig.disabled || false}
               required={componentConfig.required || false}
-              style={{width: "16px",
+              style={{
+                width: "16px",
                 height: "16px",
                 accentColor: "#3b82f6",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
               onChange={(e) => {
                 if (component.onChange) {
                   component.onChange(e.target.value);
                 }
               }}
             />
-            <span style={{color: "#374151",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>{option.label}</span>
+            <span
+              style={{
+                color: "#374151",
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
+            >
+              {option.label}
+            </span>
           </label>
         ))}
         {(!componentConfig.options || componentConfig.options.length === 0) && (
           <>
-            <label style={{display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "14px",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>
+            <label
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                cursor: "pointer",
+                fontSize: "14px",
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
+            >
               <input
                 type="radio"
                 name={component.id || "radio-group"}
                 value="option1"
-                style={{width: "16px", height: "16px", accentColor: "#3b82f6",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+                style={{
+                  width: "16px",
+                  height: "16px",
+                  accentColor: "#3b82f6",
+                  // isInteractive 모드에서는 사용자 스타일 우선 적용
+                  ...(isInteractive && component.style ? component.style : {}),
+                }}
               />
               <span>옵션 1</span>
             </label>
-            <label style={{display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "14px",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>
+            <label
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                cursor: "pointer",
+                fontSize: "14px",
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
+            >
               <input
                 type="radio"
                 name={component.id || "radio-group"}
                 value="option2"
-                style={{width: "16px", height: "16px", accentColor: "#3b82f6",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+                style={{
+                  width: "16px",
+                  height: "16px",
+                  accentColor: "#3b82f6",
+                  // isInteractive 모드에서는 사용자 스타일 우선 적용
+                  ...(isInteractive && component.style ? component.style : {}),
+                }}
               />
               <span>옵션 2</span>
             </label>

frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx

@@ -58,7 +58,7 @@ const loadGlobalTableCodeCategory = async (tableName: string, columnName: string
     try {
       await globalState.activeRequests.get(`table_${key}`);
     } catch (error) {
-      console.error(`❌ 테이블 설정 로딩 대기 중 오류:`, error);
+      console.error("❌ 테이블 설정 로딩 대기 중 오류:", error);
     }
   }
 
@@ -111,7 +111,7 @@ const loadGlobalCodeOptions = async (codeCategory: string): Promise<Option[]> =>
     try {
       await globalState.activeRequests.get(`code_${codeCategory}`);
     } catch (error) {
-      console.error(`❌ 코드 옵션 로딩 대기 중 오류:`, error);
+      console.error("❌ 코드 옵션 로딩 대기 중 오류:", error);
     }
   }
 
@@ -281,7 +281,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
     // 값이 실제로 다른 경우에만 업데이트 (빈 문자열도 유효한 값으로 처리)
     if (newValue !== selectedValue) {
       console.log(`🔄 SelectBasicComponent value 업데이트: "${selectedValue}" → "${newValue}"`);
-      console.log(`🔍 업데이트 조건 분석:`, {
+      console.log("🔍 업데이트 조건 분석:", {
         externalValue,
         componentConfigValue: componentConfig?.value,
         configValue: config?.value,

frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx

@@ -77,7 +77,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -91,23 +91,31 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
           }}
         >
           {component.label}
-          {component.required && <span style={{color: "#ef4444",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>*</span>}
+          {component.required && (
+            <span
+              style={{
+                color: "#ef4444",
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
+            >
+              *
+            </span>
+          )}
         </label>
       )}
 
       <div
-        style={{width: "100%",
+        style={{
+          width: "100%",
           height: "100%",
           display: "flex",
           alignItems: "center",
           gap: "12px",
           padding: "8px",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+          // isInteractive 모드에서는 사용자 스타일 우선 적용
+          ...(isInteractive && component.style ? component.style : {}),
+        }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
@@ -120,7 +128,8 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
           value={component.value || componentConfig.min || 0}
           disabled={componentConfig.disabled || false}
           required={componentConfig.required || false}
-          style={{width: "70%",
+          style={{
+            width: "70%",
             height: "6px",
             outline: "none",
             borderRadius: "3px",
@@ -136,7 +145,8 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
           }}
         />
         <span
-          style={{width: "30%",
+          style={{
+            width: "30%",
             textAlign: "center",
             fontSize: "14px",
             color: "#374151",

frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import React from "react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ColumnConfig } from "./types";
+
+interface SingleTableWithStickyProps {
+  visibleColumns: ColumnConfig[];
+  data: Record<string, any>[];
+  columnLabels: Record<string, string>;
+  sortColumn: string | null;
+  sortDirection: "asc" | "desc";
+  tableConfig: any;
+  isDesignMode: boolean;
+  isAllSelected: boolean;
+  handleSort: (columnName: string) => void;
+  handleSelectAll: (checked: boolean) => void;
+  handleRowClick: (row: any) => void;
+  renderCheckboxCell: (row: any, index: number) => React.ReactNode;
+  formatCellValue: (value: any, format?: string, columnName?: string) => string;
+  getColumnWidth: (column: ColumnConfig) => number;
+}
+
+export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
+  visibleColumns,
+  data,
+  columnLabels,
+  sortColumn,
+  sortDirection,
+  tableConfig,
+  isDesignMode,
+  isAllSelected,
+  handleSort,
+  handleSelectAll,
+  handleRowClick,
+  renderCheckboxCell,
+  formatCellValue,
+  getColumnWidth,
+}) => {
+  const checkboxConfig = tableConfig.checkbox || {};
+
+  return (
+    <div className="relative h-full w-full overflow-auto">
+      <Table className="w-full">
+        <TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-white" : ""}>
+          <TableRow>
+            {visibleColumns.map((column, colIndex) => {
+              // 왼쪽 고정 컬럼들의 누적 너비 계산
+              const leftFixedWidth = visibleColumns
+                .slice(0, colIndex)
+                .filter((col) => col.fixed === "left")
+                .reduce((sum, col) => sum + getColumnWidth(col), 0);
+
+              // 오른쪽 고정 컬럼들의 누적 너비 계산
+              const rightFixedColumns = visibleColumns.filter((col) => col.fixed === "right");
+              const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
+              const rightFixedWidth =
+                rightFixedIndex >= 0
+                  ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
+                  : 0;
+
+              return (
+                <TableHead
+                  key={column.columnName}
+                  className={cn(
+                    column.columnName === "__checkbox__"
+                      ? "h-10 border-b px-4 py-2 text-center align-middle"
+                      : "h-10 cursor-pointer border-b px-4 py-2 text-left align-middle font-medium whitespace-nowrap text-gray-900 select-none",
+                    `text-${column.align}`,
+                    column.sortable && "hover:bg-gray-50",
+                    // 고정 컬럼 스타일
+                    column.fixed === "left" && "sticky z-10 border-r bg-white shadow-sm",
+                    column.fixed === "right" && "sticky z-10 border-l bg-white shadow-sm",
+                    // 숨김 컬럼 스타일 (디자인 모드에서만)
+                    isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
+                  )}
+                  style={{
+                    width: getColumnWidth(column),
+                    minWidth: getColumnWidth(column),
+                    maxWidth: getColumnWidth(column),
+                    // sticky 위치 설정
+                    ...(column.fixed === "left" && { left: leftFixedWidth }),
+                    ...(column.fixed === "right" && { right: rightFixedWidth }),
+                  }}
+                  onClick={() => column.sortable && handleSort(column.columnName)}
+                >
+                  <div className="flex items-center gap-2">
+                    {column.columnName === "__checkbox__" ? (
+                      checkboxConfig.selectAll && (
+                        <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" />
+                      )
+                    ) : (
+                      <>
+                        <span className="flex-1 truncate">
+                          {columnLabels[column.columnName] || column.displayName || column.columnName}
+                        </span>
+                        {column.sortable && (
+                          <span className="ml-1">
+                            {sortColumn === column.columnName ? (
+                              sortDirection === "asc" ? (
+                                <ArrowUp className="h-3 w-3 text-blue-600" />
+                              ) : (
+                                <ArrowDown className="h-3 w-3 text-blue-600" />
+                              )
+                            ) : (
+                              <ArrowUpDown className="h-3 w-3 text-gray-400" />
+                            )}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </TableHead>
+              );
+            })}
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          {data.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={visibleColumns.length} className="py-8 text-center text-gray-500">
+                데이터가 없습니다
+              </TableCell>
+            </TableRow>
+          ) : (
+            data.map((row, index) => (
+              <TableRow
+                key={`row-${index}`}
+                className={cn(
+                  "h-10 cursor-pointer border-b leading-none",
+                  tableConfig.tableStyle?.hoverEffect && "hover:bg-gray-50",
+                  tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/30",
+                )}
+                style={{ minHeight: "40px", height: "40px", lineHeight: "1" }}
+                onClick={() => handleRowClick(row)}
+              >
+                {visibleColumns.map((column, colIndex) => {
+                  // 왼쪽 고정 컬럼들의 누적 너비 계산
+                  const leftFixedWidth = visibleColumns
+                    .slice(0, colIndex)
+                    .filter((col) => col.fixed === "left")
+                    .reduce((sum, col) => sum + getColumnWidth(col), 0);
+
+                  // 오른쪽 고정 컬럼들의 누적 너비 계산
+                  const rightFixedColumns = visibleColumns.filter((col) => col.fixed === "right");
+                  const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
+                  const rightFixedWidth =
+                    rightFixedIndex >= 0
+                      ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
+                      : 0;
+
+                  return (
+                    <TableCell
+                      key={`cell-${column.columnName}`}
+                      className={cn(
+                        "h-10 px-4 py-2 align-middle text-sm whitespace-nowrap",
+                        `text-${column.align}`,
+                        // 고정 컬럼 스타일
+                        column.fixed === "left" && "sticky z-10 border-r bg-white",
+                        column.fixed === "right" && "sticky z-10 border-l bg-white",
+                      )}
+                      style={{
+                        minHeight: "40px",
+                        height: "40px",
+                        verticalAlign: "middle",
+                        // sticky 위치 설정
+                        ...(column.fixed === "left" && { left: leftFixedWidth }),
+                        ...(column.fixed === "right" && { right: rightFixedWidth }),
+                      }}
+                    >
+                      {column.columnName === "__checkbox__"
+                        ? renderCheckboxCell(row, index)
+                        : formatCellValue(row[column.columnName], column.format, column.columnName) || "\u00A0"}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -7,14 +7,12 @@ import { entityJoinApi } from "@/lib/api/entityJoin";
 import { codeCache } from "@/lib/caching/codeCache";
 import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import {
   ChevronLeft,
   ChevronRight,
   ChevronsLeft,
   ChevronsRight,
-  Search,
   RefreshCw,
   ArrowUpDown,
   ArrowUp,
@@ -23,6 +21,9 @@ import {
 } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
+import { AdvancedSearchFilters } from "@/components/screen/filters/AdvancedSearchFilters";
+import { Separator } from "@/components/ui/separator";
+import { SingleTableWithSticky } from "./SingleTableWithSticky";
 
 export interface TableListComponentProps {
   component: any;
@@ -96,10 +97,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [columnLabels, setColumnLabels] = useState<Record<string, string>>({});
   const [tableLabel, setTableLabel] = useState<string>("");
   const [localPageSize, setLocalPageSize] = useState<number>(tableConfig.pagination?.pageSize || 20); // 로컬 페이지 크기 상태
-  const [selectedSearchColumn, setSelectedSearchColumn] = useState<string>(""); // 선택된 검색 컬럼
   const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]); // 🎯 표시할 컬럼 (Entity 조인 적용됨)
   const [columnMeta, setColumnMeta] = useState<Record<string, { webType?: string; codeCategory?: string }>>({}); // 🎯 컬럼 메타정보 (웹타입, 코드카테고리)
 
+  // 고급 필터 관련 state
+  const [searchValues, setSearchValues] = useState<Record<string, any>>({});
+
   // 체크박스 상태 관리
   const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set()); // 선택된 행들의 키 집합
   const [isAllSelected, setIsAllSelected] = useState(false); // 전체 선택 상태
@@ -111,39 +114,67 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     maxBatchSize: 5,
   });
 
-  // 높이 계산 함수
-  const calculateOptimalHeight = () => {
-    // 50개 이상일 때는 20개 기준으로 높이 고정
-    const displayPageSize = localPageSize >= 50 ? 20 : localPageSize;
-    const headerHeight = 48; // 테이블 헤더
-    const rowHeight = 40; // 각 행 높이 (normal)
-    const searchHeight = tableConfig.filter?.enabled ? 48 : 0; // 검색 영역
-    const footerHeight = tableConfig.showFooter ? 56 : 0; // 페이지네이션
-    const padding = 8; // 여백
+  // 높이 계산 함수 (메모이제이션)
+  const optimalHeight = useMemo(() => {
+    // 50개 이상일 때는 20개 기준으로 높이 고정하고 스크롤 생성
+    // 50개 미만일 때는 실제 데이터 개수에 맞춰서 스크롤 없이 표시
+    const actualDataCount = Math.min(data.length, localPageSize);
+    const displayPageSize = localPageSize >= 50 ? 20 : Math.max(actualDataCount, 5);
 
-    return headerHeight + displayPageSize * rowHeight + searchHeight + footerHeight + padding;
-  };
+    const headerHeight = 50; // 테이블 헤더
+    const rowHeight = 42; // 각 행 높이
+    const searchHeight = tableConfig.filter?.enabled ? 80 : 0; // 검색 영역
+    const footerHeight = tableConfig.showFooter ? 60 : 0; // 페이지네이션
+    const titleHeight = tableConfig.showHeader ? 60 : 0; // 제목 영역
+    const padding = 40; // 여백
+
+    const calculatedHeight =
+      titleHeight + searchHeight + headerHeight + displayPageSize * rowHeight + footerHeight + padding;
+
+    console.log("🔍 테이블 높이 계산:", {
+      actualDataCount,
+      localPageSize,
+      displayPageSize,
+      willHaveScroll: localPageSize >= 50,
+      titleHeight,
+      searchHeight,
+      headerHeight,
+      rowHeight,
+      footerHeight,
+      padding,
+      calculatedHeight,
+      finalHeight: `${calculatedHeight}px`,
+    });
+
+    // 추가 디버깅: 실제 데이터 상황
+    console.log("🔍 실제 데이터 상황:", {
+      actualDataLength: data.length,
+      localPageSize,
+      currentPage,
+      totalItems,
+      totalPages,
+    });
+
+    return calculatedHeight;
+  }, [data.length, localPageSize, tableConfig.filter?.enabled, tableConfig.showFooter, tableConfig.showHeader]);
 
   // 스타일 계산
   const componentStyle: React.CSSProperties = {
     width: "100%",
-    height:
-      tableConfig.height === "fixed"
-        ? `${tableConfig.fixedHeight || calculateOptimalHeight()}px`
-        : tableConfig.height === "auto"
-          ? `${calculateOptimalHeight()}px`
-          : "100%",
+    height: `${optimalHeight}px`, // 20개 데이터를 모두 보여주는 높이
+    minHeight: `${optimalHeight}px`, // 최소 높이 보장
     ...component.style,
     ...style,
     display: "flex",
     flexDirection: "column",
+    boxSizing: "border-box", // 패딩/보더 포함한 크기 계산
   };
 
   // 디자인 모드 스타일
   if (isDesignMode) {
     componentStyle.border = "1px dashed #cbd5e1";
     componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
-    componentStyle.minHeight = "200px";
+    // minHeight 제거 - 실제 데이터에 맞는 높이 사용
   }
 
   // 컬럼 라벨 정보 가져오기
@@ -234,56 +265,66 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       const result = await entityJoinApi.getTableDataWithJoins(tableConfig.selectedTable, {
         page: currentPage,
         size: localPageSize,
-        search: searchTerm?.trim()
-          ? (() => {
-              // 스마트한 단일 컬럼 선택 로직 (서버가 OR 검색을 지원하지 않음)
-              let searchColumn = selectedSearchColumn || sortColumn; // 사용자 선택 컬럼 최우선, 그 다음 정렬된 컬럼
+        search: (() => {
+          // 고급 필터 값이 있으면 우선 사용
+          const hasAdvancedFilters = Object.values(searchValues).some((value) => {
+            if (typeof value === "string") return value.trim() !== "";
+            if (typeof value === "object" && value !== null) {
+              return Object.values(value).some((v) => v !== "" && v !== null && v !== undefined);
+            }
+            return value !== null && value !== undefined && value !== "";
+          });
 
-              if (!searchColumn) {
-                // 1순위: name 관련 컬럼 (가장 검색에 적합)
-                const nameColumns = visibleColumns.filter(
-                  (col) =>
-                    col.columnName.toLowerCase().includes("name") ||
-                    col.columnName.toLowerCase().includes("title") ||
-                    col.columnName.toLowerCase().includes("subject"),
-                );
+          if (hasAdvancedFilters) {
+            console.log("🔍 고급 검색 필터 사용:", searchValues);
+            console.log("🔍 고급 검색 필터 상세:", JSON.stringify(searchValues, null, 2));
+            return searchValues;
+          }
 
-                // 2순위: text/varchar 타입 컬럼
-                const textColumns = visibleColumns.filter(
-                  (col) => col.dataType === "text" || col.dataType === "varchar",
-                );
+          // 고급 필터가 없으면 기존 단순 검색 사용
+          if (searchTerm?.trim()) {
+            // 스마트한 단일 컬럼 선택 로직 (서버가 OR 검색을 지원하지 않음)
+            let searchColumn = sortColumn; // 정렬된 컬럼 우선
 
-                // 3순위: description 관련 컬럼
-                const descColumns = visibleColumns.filter(
-                  (col) =>
-                    col.columnName.toLowerCase().includes("desc") ||
-                    col.columnName.toLowerCase().includes("comment") ||
-                    col.columnName.toLowerCase().includes("memo"),
-                );
-
-                // 우선순위에 따라 선택
-                if (nameColumns.length > 0) {
-                  searchColumn = nameColumns[0].columnName;
-                } else if (textColumns.length > 0) {
-                  searchColumn = textColumns[0].columnName;
-                } else if (descColumns.length > 0) {
-                  searchColumn = descColumns[0].columnName;
-                } else {
-                  // 마지막 대안: 첫 번째 컬럼
-                  searchColumn = visibleColumns[0]?.columnName || "id";
-                }
-              }
-
-              console.log("🔍 선택된 검색 컬럼:", searchColumn);
-              console.log("🔍 검색어:", searchTerm);
-              console.log(
-                "🔍 사용 가능한 컬럼들:",
-                visibleColumns.map((col) => `${col.columnName}(${col.dataType || "unknown"})`),
+            if (!searchColumn) {
+              // 1순위: name 관련 컬럼 (가장 검색에 적합)
+              const nameColumns = visibleColumns.filter(
+                (col) =>
+                  col.columnName.toLowerCase().includes("name") ||
+                  col.columnName.toLowerCase().includes("title") ||
+                  col.columnName.toLowerCase().includes("subject"),
               );
 
-              return { [searchColumn]: searchTerm };
-            })()
-          : undefined,
+              // 2순위: text/varchar 타입 컬럼
+              const textColumns = visibleColumns.filter((col) => col.dataType === "text" || col.dataType === "varchar");
+
+              // 3순위: description 관련 컬럼
+              const descColumns = visibleColumns.filter(
+                (col) =>
+                  col.columnName.toLowerCase().includes("desc") ||
+                  col.columnName.toLowerCase().includes("comment") ||
+                  col.columnName.toLowerCase().includes("memo"),
+              );
+
+              // 우선순위에 따라 선택
+              if (nameColumns.length > 0) {
+                searchColumn = nameColumns[0].columnName;
+              } else if (textColumns.length > 0) {
+                searchColumn = textColumns[0].columnName;
+              } else if (descColumns.length > 0) {
+                searchColumn = descColumns[0].columnName;
+              } else {
+                // 마지막 대안: 첫 번째 컬럼
+                searchColumn = visibleColumns[0]?.columnName || "id";
+              }
+            }
+
+            console.log("🔍 기존 검색 방식 사용:", { [searchColumn]: searchTerm });
+            return { [searchColumn]: searchTerm };
+          }
+
+          return undefined;
+        })(),
         sortBy: sortColumn || undefined,
         sortOrder: sortDirection,
         enableEntityJoin: true, // 🎯 Entity 조인 활성화
@@ -410,10 +451,23 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
   };
 
-  // 검색
-  const handleSearch = (term: string) => {
-    setSearchTerm(term);
-    setCurrentPage(1); // 검색 시 첫 페이지로 이동
+  // 고급 필터 핸들러
+  const handleSearchValueChange = (columnName: string, value: any) => {
+    setSearchValues((prev) => ({
+      ...prev,
+      [columnName]: value,
+    }));
+  };
+
+  const handleAdvancedSearch = () => {
+    setCurrentPage(1);
+    fetchTableData();
+  };
+
+  const handleClearAdvancedFilters = () => {
+    setSearchValues({});
+    setCurrentPage(1);
+    fetchTableData();
   };
 
   // 새로고침
@@ -522,7 +576,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     if (tableConfig.autoLoad && !isDesignMode) {
       fetchTableData();
     }
-  }, [tableConfig.selectedTable, localPageSize, currentPage, searchTerm, sortColumn, sortDirection, columnLabels]);
+  }, [
+    tableConfig.selectedTable,
+    localPageSize,
+    currentPage,
+    searchTerm,
+    sortColumn,
+    sortDirection,
+    columnLabels,
+    searchValues,
+  ]);
 
   // refreshKey 변경 시 테이블 데이터 새로고침
   useEffect(() => {
@@ -577,8 +640,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         .sort((a, b) => a.order - b.order);
     }
 
-    // 체크박스가 활성화된 경우 체크박스 컬럼을 추가
-    if (checkboxConfig.enabled) {
+    // 체크박스가 활성화되고 실제 데이터 컬럼이 있는 경우에만 체크박스 컬럼을 추가
+    if (checkboxConfig.enabled && columns.length > 0) {
       const checkboxColumn: ColumnConfig = {
         columnName: "__checkbox__",
         displayName: "",
@@ -603,28 +666,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return columns;
   }, [displayColumns, tableConfig.columns, tableConfig.checkbox]);
 
-  // 컬럼을 고정 위치별로 분류
-  const columnsByPosition = useMemo(() => {
-    const leftFixed: ColumnConfig[] = [];
-    const rightFixed: ColumnConfig[] = [];
-    const normal: ColumnConfig[] = [];
-
-    visibleColumns.forEach((col) => {
-      if (col.fixed === "left") {
-        leftFixed.push(col);
-      } else if (col.fixed === "right") {
-        rightFixed.push(col);
-      } else {
-        normal.push(col);
-      }
-    });
-
-    // 고정 컬럼들은 fixedOrder로 정렬
-    leftFixed.sort((a, b) => (a.fixedOrder || 0) - (b.fixedOrder || 0));
-    rightFixed.sort((a, b) => (a.fixedOrder || 0) - (b.fixedOrder || 0));
-
-    return { leftFixed, rightFixed, normal };
-  }, [visibleColumns]);
+  // columnsByPosition은 SingleTableWithSticky에서 사용하지 않으므로 제거
+  // 기존 테이블에서만 필요한 경우 다시 추가 가능
 
   // 가로 스크롤이 필요한지 계산
   const needsHorizontalScroll = useMemo(() => {
@@ -819,8 +862,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               </div>
             )}
 
-            {/* 검색 */}
-            {tableConfig.filter?.enabled && tableConfig.filter?.quickSearch && (
+            {/* 검색 - 기존 방식은 주석처리 */}
+            {/* {tableConfig.filter?.enabled && tableConfig.filter?.quickSearch && (
               <div className="flex items-center space-x-2">
                 <div className="relative">
                   <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
@@ -831,7 +874,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                     className="w-64 pl-8"
                   />
                 </div>
-                {/* 검색 컬럼 선택 드롭다운 */}
                 {tableConfig.filter?.showColumnSelector && (
                   <select
                     value={selectedSearchColumn}
@@ -847,7 +889,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   </select>
                 )}
               </div>
-            )}
+            )} */}
 
             {/* 새로고침 */}
             <Button variant="outline" size="sm" onClick={handleRefresh} disabled={loading}>
@@ -857,8 +899,35 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         </div>
       )}
 
+      {/* 고급 검색 필터 - 항상 표시 (컬럼 정보 기반 자동 생성) */}
+      {tableConfig.filter?.enabled && visibleColumns && visibleColumns.length > 0 && (
+        <>
+          <Separator className="my-1" />
+          <AdvancedSearchFilters
+            filters={tableConfig.filter?.filters || []} // 설정된 필터 사용, 없으면 자동 생성
+            searchValues={searchValues}
+            onSearchValueChange={handleSearchValueChange}
+            onSearch={handleAdvancedSearch}
+            onClearFilters={handleClearAdvancedFilters}
+            tableColumns={visibleColumns.map((col) => ({
+              columnName: col.columnName,
+              webType: columnMeta[col.columnName]?.webType || "text",
+              displayName: columnLabels[col.columnName] || col.displayName || col.columnName,
+              codeCategory: columnMeta[col.columnName]?.codeCategory,
+              isVisible: col.visible,
+              // 추가 메타데이터 전달 (필터 자동 생성용)
+              web_type: columnMeta[col.columnName]?.webType || "text",
+              column_name: col.columnName,
+              column_label: columnLabels[col.columnName] || col.displayName || col.columnName,
+              code_category: columnMeta[col.columnName]?.codeCategory,
+            }))}
+            tableName={tableConfig.selectedTable}
+          />
+        </>
+      )}
+
       {/* 테이블 컨텐츠 */}
-      <div className={`flex-1 ${localPageSize >= 50 ? "overflow-auto" : "overflow-hidden"}`}>
+      <div className={`w-full ${localPageSize >= 50 ? "flex-1 overflow-auto" : ""}`}>
         {loading ? (
           <div className="flex h-full items-center justify-center">
             <div className="text-center">
@@ -874,317 +943,43 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             </div>
           </div>
         ) : needsHorizontalScroll ? (
-          // 가로 스크롤이 필요한 경우 - 고정 컬럼 지원 테이블
-          <div className="relative flex h-full">
-            {/* 왼쪽 고정 컬럼 */}
-            {columnsByPosition.leftFixed.length > 0 && (
-              <div className="flex-shrink-0 border-r bg-gray-50/50">
-                <table
-                  className="table-fixed-layout table-auto"
-                  style={{ borderCollapse: "collapse", margin: 0, padding: 0 }}
-                >
-                  <thead className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-white" : ""}>
-                    <tr>
-                      {columnsByPosition.leftFixed.map((column) => (
-                        <th
-                          key={`fixed-left-${column.columnName}`}
-                          className={cn(
-                            column.columnName === "__checkbox__"
-                              ? "h-12 border-b px-4 py-3 text-center align-middle"
-                              : "h-12 cursor-pointer border-b px-4 py-3 text-left align-middle font-medium whitespace-nowrap text-gray-900 select-none",
-                            `text-${column.align}`,
-                            column.sortable && "hover:bg-gray-50",
-                            // 숨김 컬럼 스타일 (디자인 모드에서만)
-                            isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
-                          )}
-                          style={{
-                            minWidth: `${getColumnWidth(column)}px`,
-                            minHeight: "48px",
-                            height: "48px",
-                            verticalAlign: "middle",
-                            lineHeight: "1",
-                            boxSizing: "border-box",
-                          }}
-                          onClick={() => column.sortable && handleSort(column.columnName)}
-                        >
-                          {column.columnName === "__checkbox__" ? (
-                            renderCheckboxHeader()
-                          ) : (
-                            <div className="flex items-center space-x-1">
-                              <span className="text-sm">{columnLabels[column.columnName] || column.displayName}</span>
-                              {column.sortable && (
-                                <div className="flex flex-col">
-                                  {sortColumn === column.columnName ? (
-                                    sortDirection === "asc" ? (
-                                      <ArrowUp className="h-3 w-3" />
-                                    ) : (
-                                      <ArrowDown className="h-3 w-3" />
-                                    )
-                                  ) : (
-                                    <ArrowUpDown className="h-3 w-3 text-gray-400" />
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          )}
-                        </th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {data.length === 0 ? (
-                      <tr>
-                        <td colSpan={columnsByPosition.leftFixed.length} className="py-8 text-center text-gray-500">
-                          데이터가 없습니다
-                        </td>
-                      </tr>
-                    ) : (
-                      data.map((row, index) => (
-                        <tr
-                          key={`fixed-left-row-${index}`}
-                          className={cn(
-                            "h-12 cursor-pointer border-b leading-none",
-                            tableConfig.tableStyle?.hoverEffect && "hover:bg-gray-50",
-                            tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/50",
-                          )}
-                          style={{ minHeight: "48px", height: "48px", lineHeight: "1" }}
-                          onClick={() => handleRowClick(row)}
-                        >
-                          {columnsByPosition.leftFixed.map((column) => (
-                            <td
-                              key={`fixed-left-cell-${column.columnName}`}
-                              className={cn(
-                                "h-12 px-4 py-3 align-middle text-sm whitespace-nowrap",
-                                `text-${column.align}`,
-                              )}
-                              style={{ minHeight: "48px", height: "48px", verticalAlign: "middle" }}
-                            >
-                              {column.columnName === "__checkbox__"
-                                ? renderCheckboxCell(row, index)
-                                : formatCellValue(row[column.columnName], column.format, column.columnName) || "\u00A0"}
-                            </td>
-                          ))}
-                        </tr>
-                      ))
-                    )}
-                  </tbody>
-                </table>
-              </div>
-            )}
-
-            {/* 스크롤 가능한 중앙 컬럼들 */}
-            <div className="flex-1 overflow-x-auto">
-              <table
-                className="table-fixed-layout w-full table-auto"
-                style={{ borderCollapse: "collapse", margin: 0, padding: 0 }}
-              >
-                <thead className={tableConfig.stickyHeader ? "sticky top-0 z-10 bg-white" : ""}>
-                  <tr>
-                    {columnsByPosition.normal.map((column) => (
-                      <th
-                        key={`normal-${column.columnName}`}
-                        style={{
-                          minWidth: `${getColumnWidth(column)}px`,
-                          minHeight: "48px",
-                          height: "48px",
-                          verticalAlign: "middle",
-                          lineHeight: "1",
-                          boxSizing: "border-box",
-                        }}
-                        className={cn(
-                          column.columnName === "__checkbox__"
-                            ? "h-12 border-b px-4 py-3 text-center align-middle"
-                            : "cursor-pointer border-b px-4 py-3 text-left align-middle font-medium whitespace-nowrap text-gray-900 select-none",
-                          `text-${column.align}`,
-                          column.sortable && "hover:bg-gray-50",
-                          // 숨김 컬럼 스타일 (디자인 모드에서만)
-                          isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
-                        )}
-                        onClick={() => column.sortable && handleSort(column.columnName)}
-                      >
-                        {column.columnName === "__checkbox__" ? (
-                          renderCheckboxHeader()
-                        ) : (
-                          <div className="flex items-center space-x-1">
-                            <span className="text-sm">{columnLabels[column.columnName] || column.displayName}</span>
-                            {column.sortable && (
-                              <div className="flex flex-col">
-                                {sortColumn === column.columnName ? (
-                                  sortDirection === "asc" ? (
-                                    <ArrowUp className="h-3 w-3" />
-                                  ) : (
-                                    <ArrowDown className="h-3 w-3" />
-                                  )
-                                ) : (
-                                  <ArrowUpDown className="h-3 w-3 text-gray-400" />
-                                )}
-                              </div>
-                            )}
-                          </div>
-                        )}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {data.length === 0 ? (
-                    <tr>
-                      <td colSpan={columnsByPosition.normal.length} className="py-8 text-center text-gray-500">
-                        {columnsByPosition.leftFixed.length === 0 && columnsByPosition.rightFixed.length === 0
-                          ? "데이터가 없습니다"
-                          : ""}
-                      </td>
-                    </tr>
-                  ) : (
-                    data.map((row, index) => (
-                      <tr
-                        key={`normal-row-${index}`}
-                        className={cn(
-                          "cursor-pointer border-b",
-                          tableConfig.tableStyle?.hoverEffect && "hover:bg-gray-50",
-                          tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/50",
-                        )}
-                        onClick={() => handleRowClick(row)}
-                      >
-                        {columnsByPosition.normal.map((column) => (
-                          <td
-                            key={`normal-cell-${column.columnName}`}
-                            className={cn(
-                              "h-12 px-4 py-3 align-middle text-sm whitespace-nowrap",
-                              `text-${column.align}`,
-                            )}
-                            style={{ minHeight: "48px", height: "48px", verticalAlign: "middle" }}
-                          >
-                            {column.columnName === "__checkbox__"
-                              ? renderCheckboxCell(row, index)
-                              : formatCellValue(row[column.columnName], column.format, column.columnName) || "\u00A0"}
-                          </td>
-                        ))}
-                      </tr>
-                    ))
-                  )}
-                </tbody>
-              </table>
-            </div>
-
-            {/* 오른쪽 고정 컬럼 */}
-            {columnsByPosition.rightFixed.length > 0 && (
-              <div className="flex-shrink-0 border-l bg-gray-50/50">
-                <table
-                  className="table-fixed-layout table-auto"
-                  style={{ borderCollapse: "collapse", margin: 0, padding: 0 }}
-                >
-                  <thead className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-white" : ""}>
-                    <tr>
-                      {columnsByPosition.rightFixed.map((column) => (
-                        <th
-                          key={`fixed-right-${column.columnName}`}
-                          className={cn(
-                            column.columnName === "__checkbox__"
-                              ? "h-12 border-b px-4 py-3 text-center align-middle"
-                              : "h-12 cursor-pointer border-b px-4 py-3 text-left align-middle font-medium whitespace-nowrap text-gray-900 select-none",
-                            `text-${column.align}`,
-                            column.sortable && "hover:bg-gray-50",
-                            // 숨김 컬럼 스타일 (디자인 모드에서만)
-                            isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
-                          )}
-                          style={{
-                            minWidth: `${getColumnWidth(column)}px`,
-                            minHeight: "48px",
-                            height: "48px",
-                            verticalAlign: "middle",
-                            lineHeight: "1",
-                            boxSizing: "border-box",
-                          }}
-                          onClick={() => column.sortable && handleSort(column.columnName)}
-                        >
-                          {column.columnName === "__checkbox__" ? (
-                            renderCheckboxHeader()
-                          ) : (
-                            <div className="flex items-center space-x-1">
-                              <span className="text-sm">{columnLabels[column.columnName] || column.displayName}</span>
-                              {column.sortable && (
-                                <div className="flex flex-col">
-                                  {sortColumn === column.columnName ? (
-                                    sortDirection === "asc" ? (
-                                      <ArrowUp className="h-3 w-3" />
-                                    ) : (
-                                      <ArrowDown className="h-3 w-3" />
-                                    )
-                                  ) : (
-                                    <ArrowUpDown className="h-3 w-3 text-gray-400" />
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          )}
-                        </th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {data.length === 0 ? (
-                      <tr>
-                        <td colSpan={columnsByPosition.rightFixed.length} className="py-8 text-center text-gray-500">
-                          {columnsByPosition.leftFixed.length === 0 && columnsByPosition.normal.length === 0
-                            ? "데이터가 없습니다"
-                            : ""}
-                        </td>
-                      </tr>
-                    ) : (
-                      data.map((row, index) => (
-                        <tr
-                          key={`fixed-right-row-${index}`}
-                          className={cn(
-                            "h-12 cursor-pointer border-b leading-none",
-                            tableConfig.tableStyle?.hoverEffect && "hover:bg-gray-50",
-                            tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/50",
-                          )}
-                          style={{ minHeight: "48px", height: "48px", lineHeight: "1" }}
-                          onClick={() => handleRowClick(row)}
-                        >
-                          {columnsByPosition.rightFixed.map((column) => (
-                            <td
-                              key={`fixed-right-cell-${column.columnName}`}
-                              className={cn(
-                                "h-12 px-4 py-3 align-middle text-sm whitespace-nowrap",
-                                `text-${column.align}`,
-                              )}
-                              style={{ minHeight: "48px", height: "48px", verticalAlign: "middle" }}
-                            >
-                              {column.columnName === "__checkbox__"
-                                ? renderCheckboxCell(row, index)
-                                : formatCellValue(row[column.columnName], column.format, column.columnName) || "\u00A0"}
-                            </td>
-                          ))}
-                        </tr>
-                      ))
-                    )}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </div>
+          // 가로 스크롤이 필요한 경우 - 단일 테이블에서 sticky 컬럼 사용
+          <SingleTableWithSticky
+            visibleColumns={visibleColumns}
+            data={data}
+            columnLabels={columnLabels}
+            sortColumn={sortColumn}
+            sortDirection={sortDirection}
+            tableConfig={tableConfig}
+            isDesignMode={isDesignMode}
+            isAllSelected={isAllSelected}
+            handleSort={handleSort}
+            handleSelectAll={handleSelectAll}
+            handleRowClick={handleRowClick}
+            renderCheckboxCell={renderCheckboxCell}
+            formatCellValue={formatCellValue}
+            getColumnWidth={getColumnWidth}
+          />
         ) : (
           // 기존 테이블 (가로 스크롤이 필요 없는 경우)
           <Table>
             <TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-10 bg-white" : ""}>
-              <TableRow style={{ minHeight: "48px !important", height: "48px !important", lineHeight: "1" }}>
+              <TableRow style={{ minHeight: "40px !important", height: "40px !important", lineHeight: "1" }}>
                 {visibleColumns.map((column) => (
                   <TableHead
                     key={column.columnName}
                     style={{
                       width: column.width ? `${column.width}px` : undefined,
-                      minHeight: "48px !important",
-                      height: "48px !important",
+                      minHeight: "40px !important",
+                      height: "40px !important",
                       verticalAlign: "middle",
                       lineHeight: "1",
                       boxSizing: "border-box",
                     }}
                     className={cn(
                       column.columnName === "__checkbox__"
-                        ? "h-12 text-center align-middle"
-                        : "h-12 cursor-pointer align-middle whitespace-nowrap select-none",
+                        ? "h-10 text-center align-middle"
+                        : "h-10 cursor-pointer align-middle whitespace-nowrap select-none",
                       `text-${column.align}`,
                       column.sortable && "hover:bg-gray-50",
                     )}
@@ -1226,18 +1021,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   <TableRow
                     key={index}
                     className={cn(
-                      "h-12 cursor-pointer leading-none",
+                      "h-10 cursor-pointer leading-none",
                       tableConfig.tableStyle?.hoverEffect && "hover:bg-gray-50",
                       tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/50",
                     )}
-                    style={{ minHeight: "48px", height: "48px", lineHeight: "1" }}
+                    style={{ minHeight: "40px", height: "40px", lineHeight: "1" }}
                     onClick={() => handleRowClick(row)}
                   >
                     {visibleColumns.map((column) => (
                       <TableCell
                         key={column.columnName}
-                        className={cn("h-12 align-middle whitespace-nowrap", `text-${column.align}`)}
-                        style={{ minHeight: "48px", height: "48px", verticalAlign: "middle" }}
+                        className={cn("h-10 align-middle whitespace-nowrap", `text-${column.align}`)}
+                        style={{ minHeight: "40px", height: "40px", verticalAlign: "middle" }}
                       >
                         {column.columnName === "__checkbox__"
                           ? renderCheckboxCell(row, index)

frontend/lib/registry/components/table-list/TableListConfigPanel.tsx

@@ -95,20 +95,33 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
     fetchTables();
   }, []);
 
-  // 선택된 테이블의 컬럼 목록 설정 (tableColumns prop 우선 사용)
+  // 선택된 테이블의 컬럼 목록 설정
   useEffect(() => {
-    console.log("🔍 useEffect 실행됨 - tableColumns:", tableColumns, "length:", tableColumns?.length);
-    if (tableColumns && tableColumns.length > 0) {
-      // tableColumns prop이 있으면 사용
+    console.log(
+      "🔍 useEffect 실행됨 - config.selectedTable:",
+      config.selectedTable,
+      "screenTableName:",
+      screenTableName,
+    );
+
+    // 컴포넌트에 명시적으로 테이블이 선택되었거나, 화면에 연결된 테이블이 있는 경우에만 컬럼 목록 표시
+    const shouldShowColumns = config.selectedTable || (screenTableName && config.columns && config.columns.length > 0);
+
+    if (!shouldShowColumns) {
+      console.log("🔧 컬럼 목록 숨김 - 명시적 테이블 선택 또는 설정된 컬럼이 없음");
+      setAvailableColumns([]);
+      return;
+    }
+
+    // tableColumns prop을 우선 사용하되, 컴포넌트가 명시적으로 설정되었을 때만
+    if (tableColumns && tableColumns.length > 0 && (config.selectedTable || config.columns?.length > 0)) {
       console.log("🔧 tableColumns prop 사용:", tableColumns);
-      console.log("🔧 첫 번째 컬럼 상세:", tableColumns[0]);
       const mappedColumns = tableColumns.map((column: any) => ({
         columnName: column.columnName || column.name,
         dataType: column.dataType || column.type || "text",
         label: column.label || column.displayName || column.columnLabel || column.columnName || column.name,
       }));
       console.log("🏷️ availableColumns 설정됨:", mappedColumns);
-      console.log("🏷️ 첫 번째 mappedColumn:", mappedColumns[0]);
       setAvailableColumns(mappedColumns);
     } else if (config.selectedTable || screenTableName) {
       // API에서 컬럼 정보 가져오기
@@ -144,7 +157,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
     } else {
       setAvailableColumns([]);
     }
-  }, [config.selectedTable, screenTableName, tableColumns]);
+  }, [config.selectedTable, screenTableName, tableColumns, config.columns]);
 
   // Entity 조인 컬럼 정보 가져오기
   useEffect(() => {
@@ -274,6 +287,72 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
     handleChange("columns", columns);
   };
 
+  // 필터 추가
+  const addFilter = (columnName: string) => {
+    const existingFilter = config.filter?.filters?.find((f) => f.columnName === columnName);
+    if (existingFilter) return;
+
+    const column = availableColumns.find((col) => col.columnName === columnName);
+    if (!column) return;
+
+    // tableColumns에서 해당 컬럼의 메타정보 찾기
+    const tableColumn = tableColumns?.find((tc) => tc.columnName === columnName || tc.column_name === columnName);
+
+    // 컬럼의 데이터 타입과 웹타입에 따라 위젯 타입 결정
+    const inferWidgetType = (dataType: string, webType?: string): string => {
+      // 웹타입이 있으면 우선 사용
+      if (webType) {
+        return webType;
+      }
+
+      // 데이터 타입으로 추론
+      const type = dataType.toLowerCase();
+      if (type.includes("int") || type.includes("numeric") || type.includes("decimal")) return "number";
+      if (type.includes("date") || type.includes("timestamp")) return "date";
+      if (type.includes("bool")) return "boolean";
+      return "text";
+    };
+
+    const widgetType = inferWidgetType(column.dataType, tableColumn?.webType || tableColumn?.web_type);
+
+    const newFilter = {
+      columnName,
+      widgetType,
+      label: column.label || column.columnName,
+      gridColumns: 3,
+      numberFilterMode: "range" as const,
+      // 코드 타입인 경우 코드 카테고리 추가
+      ...(widgetType === "code" && {
+        codeCategory: tableColumn?.codeCategory || tableColumn?.code_category,
+      }),
+      // 엔티티 타입인 경우 참조 정보 추가
+      ...(widgetType === "entity" && {
+        referenceTable: tableColumn?.referenceTable || tableColumn?.reference_table,
+        referenceColumn: tableColumn?.referenceColumn || tableColumn?.reference_column,
+        displayColumn: tableColumn?.displayColumn || tableColumn?.display_column,
+      }),
+    };
+
+    console.log("🔍 필터 추가:", newFilter);
+
+    const currentFilters = config.filter?.filters || [];
+    handleNestedChange("filter", "filters", [...currentFilters, newFilter]);
+  };
+
+  // 필터 제거
+  const removeFilter = (index: number) => {
+    const currentFilters = config.filter?.filters || [];
+    const updatedFilters = currentFilters.filter((_, i) => i !== index);
+    handleNestedChange("filter", "filters", updatedFilters);
+  };
+
+  // 필터 업데이트
+  const updateFilter = (index: number, key: string, value: any) => {
+    const currentFilters = config.filter?.filters || [];
+    const updatedFilters = currentFilters.map((filter, i) => (i === index ? { ...filter, [key]: value } : filter));
+    handleNestedChange("filter", "filters", updatedFilters);
+  };
+
   return (
     <div className="space-y-4">
       <div className="text-sm font-medium">테이블 리스트 설정</div>
@@ -620,6 +699,16 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                   </div>
                 </CardContent>
               </Card>
+            ) : availableColumns.length === 0 ? (
+              <Card>
+                <CardContent className="pt-6">
+                  <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>
+                </CardContent>
+              </Card>
             ) : (
               <>
                 <Card>
@@ -990,54 +1079,141 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
         {/* 필터 설정 탭 */}
         <TabsContent value="filter" className="space-y-4">
           <ScrollArea className="h-[600px] pr-4">
+            {/* 필터 기능 활성화 */}
             <Card>
               <CardHeader>
-                <CardTitle className="text-base">검색 및 필터</CardTitle>
+                <CardTitle className="text-base">필터 설정</CardTitle>
+                <CardDescription>테이블에서 사용할 검색 필터를 설정하세요</CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="flex items-center space-x-2">
                   <Checkbox
                     id="filterEnabled"
-                    checked={config.filter?.enabled}
+                    checked={config.filter?.enabled || false}
                     onCheckedChange={(checked) => handleNestedChange("filter", "enabled", checked)}
                   />
                   <Label htmlFor="filterEnabled">필터 기능 사용</Label>
                 </div>
-
-                {config.filter?.enabled && (
-                  <>
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="quickSearch"
-                        checked={config.filter?.quickSearch}
-                        onCheckedChange={(checked) => handleNestedChange("filter", "quickSearch", checked)}
-                      />
-                      <Label htmlFor="quickSearch">빠른 검색</Label>
-                    </div>
-
-                    {config.filter?.quickSearch && (
-                      <div className="ml-6 flex items-center space-x-2">
-                        <Checkbox
-                          id="showColumnSelector"
-                          checked={config.filter?.showColumnSelector}
-                          onCheckedChange={(checked) => handleNestedChange("filter", "showColumnSelector", checked)}
-                        />
-                        <Label htmlFor="showColumnSelector">검색 컬럼 선택기 표시</Label>
-                      </div>
-                    )}
-
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="advancedFilter"
-                        checked={config.filter?.advancedFilter}
-                        onCheckedChange={(checked) => handleNestedChange("filter", "advancedFilter", checked)}
-                      />
-                      <Label htmlFor="advancedFilter">고급 필터</Label>
-                    </div>
-                  </>
-                )}
               </CardContent>
             </Card>
+
+            {/* 필터 목록 */}
+            {config.filter?.enabled && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-base">사용할 필터</CardTitle>
+                  <CardDescription>검색에 사용할 컬럼 필터를 추가하고 설정하세요</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {/* 필터 추가 버튼 */}
+                  {availableColumns.length > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                      {availableColumns
+                        .filter((col) => !config.filter?.filters?.find((f) => f.columnName === col.columnName))
+                        .map((column) => (
+                          <Button
+                            key={column.columnName}
+                            variant="outline"
+                            size="sm"
+                            onClick={() => addFilter(column.columnName)}
+                            className="flex items-center gap-1"
+                          >
+                            <Plus className="h-3 w-3" />
+                            {column.label || column.columnName}
+                            <Badge variant="secondary" className="text-xs">
+                              {column.dataType}
+                            </Badge>
+                          </Button>
+                        ))}
+                    </div>
+                  )}
+
+                  {/* 설정된 필터 목록 */}
+                  {config.filter?.filters && config.filter.filters.length > 0 && (
+                    <div className="space-y-3">
+                      <h4 className="text-sm font-medium">설정된 필터</h4>
+                      {config.filter.filters.map((filter, index) => (
+                        <div key={filter.columnName} className="space-y-3 rounded-lg border p-4">
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                              <Badge variant="outline">{filter.widgetType}</Badge>
+                              <span className="font-medium">{filter.label}</span>
+                            </div>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => removeFilter(index)}
+                              className="text-red-600 hover:text-red-700"
+                            >
+                              <Trash2 className="h-3 w-3" />
+                            </Button>
+                          </div>
+
+                          <div className="grid grid-cols-2 gap-3">
+                            <div>
+                              <Label className="text-xs">표시명</Label>
+                              <Input
+                                value={filter.label}
+                                onChange={(e) => updateFilter(index, "label", e.target.value)}
+                                placeholder="필터 라벨"
+                              />
+                            </div>
+                            <div>
+                              <Label className="text-xs">그리드 컬럼</Label>
+                              <Select
+                                value={filter.gridColumns.toString()}
+                                onValueChange={(value) => updateFilter(index, "gridColumns", parseInt(value))}
+                              >
+                                <SelectTrigger>
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="2">2칸</SelectItem>
+                                  <SelectItem value="3">3칸</SelectItem>
+                                  <SelectItem value="4">4칸</SelectItem>
+                                  <SelectItem value="6">6칸</SelectItem>
+                                </SelectContent>
+                              </Select>
+                            </div>
+
+                            {/* 숫자 타입인 경우 검색 모드 선택 */}
+                            {(filter.widgetType === "number" || filter.widgetType === "decimal") && (
+                              <div>
+                                <Label className="text-xs">검색 모드</Label>
+                                <Select
+                                  value={filter.numberFilterMode || "range"}
+                                  onValueChange={(value) => updateFilter(index, "numberFilterMode", value)}
+                                >
+                                  <SelectTrigger>
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    <SelectItem value="exact">정확한 값</SelectItem>
+                                    <SelectItem value="range">범위 검색</SelectItem>
+                                  </SelectContent>
+                                </Select>
+                              </div>
+                            )}
+
+                            {/* 코드 타입인 경우 코드 카테고리 */}
+                            {filter.widgetType === "code" && (
+                              <div>
+                                <Label className="text-xs">코드 카테고리</Label>
+                                <Input
+                                  value={filter.codeCategory || ""}
+                                  onChange={(e) => updateFilter(index, "codeCategory", e.target.value)}
+                                  placeholder="코드 카테고리"
+                                />
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            )}
           </ScrollArea>
         </TabsContent>
 

frontend/lib/registry/components/table-list/index.ts

@@ -59,10 +59,7 @@ export const TableListDefinition = createComponentDefinition({
     // 필터 설정
     filter: {
       enabled: true,
-      quickSearch: true,
-      showColumnSelector: true, // 검색컬럼 선택기 표시 기본값
-      advancedFilter: false,
-      filterableColumns: [],
+      filters: [], // 사용자가 설정할 필터 목록
     },
 
     // 액션 설정

frontend/lib/registry/components/table-list/types.ts

@@ -71,14 +71,17 @@ export interface ColumnConfig {
  */
 export interface FilterConfig {
   enabled: boolean;
-  quickSearch: boolean;
-  showColumnSelector?: boolean; // 검색 컬럼 선택기 표시 여부
-  advancedFilter: boolean;
-  filterableColumns: string[];
-  defaultFilters?: Array<{
-    column: string;
-    operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE" | "IN";
-    value: any;
+  // 사용할 필터 목록 (DataTableFilter 타입 사용)
+  filters: Array<{
+    columnName: string;
+    widgetType: string;
+    label: string;
+    gridColumns: number;
+    numberFilterMode?: "exact" | "range"; // 숫자 필터 모드
+    codeCategory?: string;
+    referenceTable?: string;
+    referenceColumn?: string;
+    displayColumn?: string;
   }>;
 }
 

frontend/lib/registry/components/test-input/TestInputComponent.tsx

@@ -71,10 +71,10 @@ export const TestInputComponent: React.FC<TestInputComponentProps> = ({
     ...domProps
   } = props;
 
-    return (
+  return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -89,7 +89,7 @@ export const TestInputComponent: React.FC<TestInputComponentProps> = ({
           {component.required && <span style={{ color: "#ef4444" }}>*</span>}
         </label>
       )}
-      
+
       <input
         type="text"
         value={component.value || ""}

frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx

@@ -77,7 +77,7 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -91,10 +91,17 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
           }}
         >
           {component.label}
-          {component.required && <span style={{color: "#ef4444",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>*</span>}
+          {component.required && (
+            <span
+              style={{
+                color: "#ef4444",
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
+            >
+              *
+            </span>
+          )}
         </label>
       )}
 
@@ -105,7 +112,8 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
         required={componentConfig.required || false}
         readOnly={componentConfig.readonly || false}
         rows={componentConfig.rows || 3}
-        style={{width: "100%",
+        style={{
+          width: "100%",
           height: "100%",
           border: "1px solid #d1d5db",
           borderRadius: "4px",
@@ -113,9 +121,9 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
           fontSize: "14px",
           outline: "none",
           resize: "none",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+          // isInteractive 모드에서는 사용자 스타일 우선 적용
+          ...(isInteractive && component.style ? component.style : {}),
+        }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}

frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx

@@ -77,7 +77,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && (
+      {component.label && component.style?.labelDisplay !== false && (
         <label
           style={{
             position: "absolute",
@@ -91,30 +91,39 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
           }}
         >
           {component.label}
-          {component.required && <span style={{color: "#ef4444",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>*</span>}
+          {component.required && (
+            <span
+              style={{
+                color: "#ef4444",
+                // isInteractive 모드에서는 사용자 스타일 우선 적용
+                ...(isInteractive && component.style ? component.style : {}),
+              }}
+            >
+              *
+            </span>
+          )}
         </label>
       )}
 
       <label
-        style={{display: "flex",
+        style={{
+          display: "flex",
           alignItems: "center",
           gap: "12px",
           cursor: "pointer",
           width: "100%",
           height: "100%",
           fontSize: "14px",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+          // isInteractive 모드에서는 사용자 스타일 우선 적용
+          ...(isInteractive && component.style ? component.style : {}),
+        }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
         <div
-          style={{position: "relative",
+          style={{
+            position: "relative",
             width: "48px",
             height: "24px",
             backgroundColor: component.value === true ? "#3b82f6" : "#d1d5db",
@@ -132,14 +141,14 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
             disabled={componentConfig.disabled || false}
             required={componentConfig.required || false}
             style={{
-            position: "absolute",
+              position: "absolute",
               opacity: 0,
               width: "100%",
               height: "100%",
               cursor: "pointer",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}
+              // isInteractive 모드에서는 사용자 스타일 우선 적용
+              ...(isInteractive && component.style ? component.style : {}),
+            }}
             onChange={(e) => {
               if (component.onChange) {
                 component.onChange(e.target.checked);
@@ -148,7 +157,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
           />
           <div
             style={{
-            position: "absolute",
+              position: "absolute",
               top: "2px",
               left: component.value === true ? "26px" : "2px",
               width: "20px",
@@ -157,15 +166,20 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
               borderRadius: "50%",
               transition: "left 0.2s",
               boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+              // isInteractive 모드에서는 사용자 스타일 우선 적용
+              ...(isInteractive && component.style ? component.style : {}),
+            }}
+          />
+        </div>
+        <span
+          style={{
+            color: "#374151",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
           }}
-          />
-        </div>
-        <span style={{color: "#374151",
-            // isInteractive 모드에서는 사용자 스타일 우선 적용
-            ...(isInteractive && component.style ? component.style : {}),
-          }}>{componentConfig.toggleLabel || (component.value ? "켜짐" : "꺼짐")}</span>
+        >
+          {componentConfig.toggleLabel || (component.value ? "켜짐" : "꺼짐")}
+        </span>
       </label>
     </div>
   );

frontend/lib/services/enhancedFormService.ts

@@ -0,0 +1,480 @@
+/**
+ * 개선된 폼 데이터 저장 서비스
+ * 클라이언트 측 사전 검증과 서버 측 검증을 조합한 안전한 저장 로직
+ */
+
+import { ComponentData, ColumnInfo, ScreenDefinition } from "@/types/screen";
+import { validateFormData, ValidationResult } from "@/lib/utils/formValidation";
+import { dynamicFormApi } from "@/lib/api/dynamicForm";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { screenApi } from "@/lib/api/screen";
+
+// 저장 결과 타입
+export interface EnhancedSaveResult {
+  success: boolean;
+  message: string;
+  data?: any;
+  validationResult?: ValidationResult;
+  performance?: {
+    validationTime: number;
+    saveTime: number;
+    totalTime: number;
+  };
+  warnings?: string[];
+}
+
+// 저장 옵션
+export interface SaveOptions {
+  skipClientValidation?: boolean;
+  skipServerValidation?: boolean;
+  transformData?: boolean;
+  showProgress?: boolean;
+  retryOnError?: boolean;
+  maxRetries?: number;
+}
+
+// 저장 컨텍스트
+export interface SaveContext {
+  tableName: string;
+  screenInfo: ScreenDefinition;
+  components: ComponentData[];
+  formData: Record<string, any>;
+  options?: SaveOptions;
+}
+
+/**
+ * 향상된 폼 데이터 저장 클래스
+ */
+export class EnhancedFormService {
+  private static instance: EnhancedFormService;
+  private columnCache = new Map<string, ColumnInfo[]>();
+  private validationCache = new Map<string, ValidationResult>();
+
+  public static getInstance(): EnhancedFormService {
+    if (!EnhancedFormService.instance) {
+      EnhancedFormService.instance = new EnhancedFormService();
+    }
+    return EnhancedFormService.instance;
+  }
+
+  /**
+   * 메인 저장 메서드
+   */
+  async saveFormData(context: SaveContext): Promise<EnhancedSaveResult> {
+    const startTime = performance.now();
+    let validationTime = 0;
+    let saveTime = 0;
+
+    try {
+      const { tableName, screenInfo, components, formData, options = {} } = context;
+
+      console.log("🚀 향상된 폼 저장 시작:", {
+        tableName,
+        screenId: screenInfo.screenId,
+        dataKeys: Object.keys(formData),
+        componentsCount: components.length,
+      });
+
+      // 1. 사전 검증 수행
+      let validationResult: ValidationResult | undefined;
+      if (!options.skipClientValidation) {
+        const validationStart = performance.now();
+        validationResult = await this.performClientValidation(formData, components, tableName);
+        validationTime = performance.now() - validationStart;
+
+        if (!validationResult.isValid) {
+          console.error("❌ 클라이언트 검증 실패:", validationResult.errors);
+          return {
+            success: false,
+            message: this.formatValidationMessage(validationResult),
+            validationResult,
+            performance: {
+              validationTime,
+              saveTime: 0,
+              totalTime: performance.now() - startTime,
+            },
+          };
+        }
+      }
+
+      // 2. 데이터 변환 및 정제
+      let processedData = formData;
+      if (options.transformData !== false) {
+        processedData = await this.transformFormData(formData, components, tableName);
+      }
+
+      // 3. 서버 저장 수행
+      const saveStart = performance.now();
+      const saveResult = await this.performServerSave(screenInfo.screenId, tableName, processedData, options);
+      saveTime = performance.now() - saveStart;
+
+      if (!saveResult.success) {
+        console.error("❌ 서버 저장 실패:", saveResult.message);
+        return {
+          success: false,
+          message: saveResult.message || "저장 중 서버 오류가 발생했습니다.",
+          data: saveResult.data,
+          validationResult,
+          performance: {
+            validationTime,
+            saveTime,
+            totalTime: performance.now() - startTime,
+          },
+        };
+      }
+
+      console.log("✅ 폼 저장 성공:", {
+        validationTime: `${validationTime.toFixed(2)}ms`,
+        saveTime: `${saveTime.toFixed(2)}ms`,
+        totalTime: `${(performance.now() - startTime).toFixed(2)}ms`,
+      });
+
+      return {
+        success: true,
+        message: "데이터가 성공적으로 저장되었습니다.",
+        data: saveResult.data,
+        validationResult,
+        performance: {
+          validationTime,
+          saveTime,
+          totalTime: performance.now() - startTime,
+        },
+        warnings: validationResult?.warnings.map((w) => w.message),
+      };
+    } catch (error: any) {
+      console.error("❌ 폼 저장 중 예외 발생:", error);
+
+      return {
+        success: false,
+        message: `저장 중 오류가 발생했습니다: ${error.message || error}`,
+        performance: {
+          validationTime,
+          saveTime,
+          totalTime: performance.now() - startTime,
+        },
+      };
+    }
+  }
+
+  /**
+   * 클라이언트 측 검증 수행
+   */
+  private async performClientValidation(
+    formData: Record<string, any>,
+    components: ComponentData[],
+    tableName: string,
+  ): Promise<ValidationResult> {
+    try {
+      // 캐시된 검증 결과 확인
+      const cacheKey = this.generateValidationCacheKey(formData, components, tableName);
+      const cached = this.validationCache.get(cacheKey);
+      if (cached) {
+        console.log("📋 캐시된 검증 결과 사용");
+        return cached;
+      }
+
+      // 테이블 컬럼 정보 조회 (캐시 사용)
+      const tableColumns = await this.getTableColumns(tableName);
+
+      // 폼 데이터 검증 수행
+      const validationResult = await validateFormData(formData, components, tableColumns, tableName);
+
+      // 결과 캐시 저장 (5분간)
+      setTimeout(
+        () => {
+          this.validationCache.delete(cacheKey);
+        },
+        5 * 60 * 1000,
+      );
+
+      this.validationCache.set(cacheKey, validationResult);
+      return validationResult;
+    } catch (error) {
+      console.error("❌ 클라이언트 검증 중 오류:", error);
+      return {
+        isValid: false,
+        errors: [
+          {
+            field: "validation",
+            code: "VALIDATION_ERROR",
+            message: `검증 중 오류가 발생했습니다: ${error}`,
+            severity: "error",
+          },
+        ],
+        warnings: [],
+      };
+    }
+  }
+
+  /**
+   * 테이블 컬럼 정보 조회 (캐시 포함)
+   */
+  private async getTableColumns(tableName: string): Promise<ColumnInfo[]> {
+    // 캐시 확인
+    const cached = this.columnCache.get(tableName);
+    if (cached) {
+      return cached;
+    }
+
+    try {
+      const response = await tableManagementApi.getColumnList(tableName);
+      if (response.success && response.data) {
+        const columns = response.data.map((col) => ({
+          tableName: col.tableName || tableName,
+          columnName: col.columnName,
+          columnLabel: col.displayName,
+          dataType: col.dataType,
+          webType: col.webType,
+          inputType: col.inputType,
+          isNullable: col.isNullable,
+          required: col.isNullable === "N",
+          detailSettings: col.detailSettings,
+          codeCategory: col.codeCategory,
+          referenceTable: col.referenceTable,
+          referenceColumn: col.referenceColumn,
+          displayColumn: col.displayColumn,
+          isVisible: col.isVisible,
+          displayOrder: col.displayOrder,
+          description: col.description,
+        })) as ColumnInfo[];
+
+        // 캐시 저장 (10분간)
+        this.columnCache.set(tableName, columns);
+        setTimeout(
+          () => {
+            this.columnCache.delete(tableName);
+          },
+          10 * 60 * 1000,
+        );
+
+        return columns;
+      } else {
+        throw new Error(response.message || "컬럼 정보 조회 실패");
+      }
+    } catch (error) {
+      console.error("❌ 컬럼 정보 조회 실패:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 폼 데이터 변환 및 정제
+   */
+  private async transformFormData(
+    formData: Record<string, any>,
+    components: ComponentData[],
+    tableName: string,
+  ): Promise<Record<string, any>> {
+    const transformed = { ...formData };
+    const tableColumns = await this.getTableColumns(tableName);
+    const columnMap = new Map(tableColumns.map((col) => [col.columnName, col]));
+
+    for (const [key, value] of Object.entries(transformed)) {
+      const column = columnMap.get(key);
+      if (!column) continue;
+
+      // 빈 문자열을 null로 변환 (nullable 컬럼인 경우)
+      if (value === "" && column.isNullable === "Y") {
+        transformed[key] = null;
+        continue;
+      }
+
+      // 데이터 타입별 변환
+      if (value !== null && value !== undefined) {
+        transformed[key] = this.convertValueByDataType(value, column.dataType);
+      }
+    }
+
+    // 시스템 필드 자동 추가
+    const now = new Date().toISOString();
+    if (!transformed.created_date && tableColumns.some((col) => col.columnName === "created_date")) {
+      transformed.created_date = now;
+    }
+    if (!transformed.updated_date && tableColumns.some((col) => col.columnName === "updated_date")) {
+      transformed.updated_date = now;
+    }
+
+    console.log("🔄 데이터 변환 완료:", {
+      original: Object.keys(formData).length,
+      transformed: Object.keys(transformed).length,
+      changes: Object.keys(transformed).filter((key) => transformed[key] !== formData[key]),
+    });
+
+    return transformed;
+  }
+
+  /**
+   * 데이터 타입별 값 변환
+   */
+  private convertValueByDataType(value: any, dataType: string): any {
+    const lowerDataType = dataType.toLowerCase();
+
+    // 숫자 타입
+    if (lowerDataType.includes("integer") || lowerDataType.includes("bigint") || lowerDataType.includes("serial")) {
+      const num = parseInt(value);
+      return isNaN(num) ? null : num;
+    }
+
+    if (
+      lowerDataType.includes("numeric") ||
+      lowerDataType.includes("decimal") ||
+      lowerDataType.includes("real") ||
+      lowerDataType.includes("double")
+    ) {
+      const num = parseFloat(value);
+      return isNaN(num) ? null : num;
+    }
+
+    // 불린 타입
+    if (lowerDataType.includes("boolean")) {
+      if (typeof value === "boolean") return value;
+      if (typeof value === "string") {
+        return value.toLowerCase() === "true" || value === "1" || value === "Y";
+      }
+      return Boolean(value);
+    }
+
+    // 날짜/시간 타입
+    if (lowerDataType.includes("timestamp") || lowerDataType.includes("datetime")) {
+      const date = new Date(value);
+      return isNaN(date.getTime()) ? null : date.toISOString();
+    }
+
+    if (lowerDataType.includes("date")) {
+      const date = new Date(value);
+      return isNaN(date.getTime()) ? null : date.toISOString().split("T")[0];
+    }
+
+    if (lowerDataType.includes("time")) {
+      // 시간 형식 변환 로직
+      return value;
+    }
+
+    // JSON 타입
+    if (lowerDataType.includes("json")) {
+      if (typeof value === "string") {
+        try {
+          JSON.parse(value);
+          return value;
+        } catch {
+          return JSON.stringify(value);
+        }
+      }
+      return JSON.stringify(value);
+    }
+
+    // 기본값: 문자열
+    return String(value);
+  }
+
+  /**
+   * 서버 저장 수행
+   */
+  private async performServerSave(
+    screenId: number,
+    tableName: string,
+    formData: Record<string, any>,
+    options: SaveOptions,
+  ): Promise<{ success: boolean; message?: string; data?: any }> {
+    try {
+      const result = await dynamicFormApi.saveData({
+        screenId,
+        tableName,
+        data: formData,
+      });
+
+      return {
+        success: result.success,
+        message: result.message || "저장이 완료되었습니다.",
+        data: result.data,
+      };
+    } catch (error: any) {
+      console.error("❌ 서버 저장 오류:", error);
+
+      // 에러 타입별 처리
+      if (error.response?.status === 400) {
+        return {
+          success: false,
+          message: "잘못된 요청: " + (error.response.data?.message || "데이터 형식을 확인해주세요."),
+        };
+      }
+
+      if (error.response?.status === 500) {
+        return {
+          success: false,
+          message: "서버 오류: " + (error.response.data?.message || "잠시 후 다시 시도해주세요."),
+        };
+      }
+
+      return {
+        success: false,
+        message: error.message || "저장 중 알 수 없는 오류가 발생했습니다.",
+      };
+    }
+  }
+
+  /**
+   * 검증 캐시 키 생성
+   */
+  private generateValidationCacheKey(
+    formData: Record<string, any>,
+    components: ComponentData[],
+    tableName: string,
+  ): string {
+    const dataHash = JSON.stringify(formData);
+    const componentsHash = JSON.stringify(
+      components.map((c) => ({ id: c.id, type: c.type, columnName: (c as any).columnName })),
+    );
+    return `${tableName}:${btoa(dataHash + componentsHash).substring(0, 32)}`;
+  }
+
+  /**
+   * 검증 메시지 포맷팅
+   */
+  private formatValidationMessage(validationResult: ValidationResult): string {
+    const errorMessages = validationResult.errors.filter((e) => e.severity === "error").map((e) => e.message);
+
+    if (errorMessages.length === 0) {
+      return "알 수 없는 검증 오류가 발생했습니다.";
+    }
+
+    if (errorMessages.length === 1) {
+      return errorMessages[0];
+    }
+
+    return `다음 오류들을 수정해주세요:\n• ${errorMessages.join("\n• ")}`;
+  }
+
+  /**
+   * 캐시 클리어
+   */
+  public clearCache(): void {
+    this.columnCache.clear();
+    this.validationCache.clear();
+    console.log("🧹 폼 서비스 캐시가 클리어되었습니다.");
+  }
+
+  /**
+   * 테이블별 캐시 클리어
+   */
+  public clearTableCache(tableName: string): void {
+    this.columnCache.delete(tableName);
+    console.log(`🧹 테이블 '${tableName}' 캐시가 클리어되었습니다.`);
+  }
+}
+
+// 싱글톤 인스턴스 내보내기
+export const enhancedFormService = EnhancedFormService.getInstance();
+
+// 편의 함수들
+export const saveFormDataEnhanced = (context: SaveContext): Promise<EnhancedSaveResult> => {
+  return enhancedFormService.saveFormData(context);
+};
+
+export const clearFormCache = (): void => {
+  enhancedFormService.clearCache();
+};
+
+export const clearTableFormCache = (tableName: string): void => {
+  enhancedFormService.clearTableCache(tableName);
+};

frontend/lib/services/optimizedButtonDataflowService.ts

@@ -7,11 +7,11 @@
 
 import {
   ButtonActionType,
-  ButtonTypeConfig,
+  ExtendedButtonTypeConfig,
   ButtonDataflowConfig,
   DataflowExecutionResult,
   DataflowCondition,
-} from "@/types/screen";
+} from "@/types";
 import { dataflowConfigCache } from "./dataflowCache";
 import { dataflowJobQueue, JobPriority } from "./dataflowJobQueue";
 import { apiClient } from "@/lib/api/client";
@@ -72,7 +72,7 @@ export class OptimizedButtonDataflowService {
   static async executeButtonWithDataflow(
     buttonId: string,
     actionType: ButtonActionType,
-    buttonConfig: ButtonTypeConfig,
+    buttonConfig: ExtendedExtendedButtonTypeConfig,
     contextData: Record<string, any>,
     companyCode: string,
   ): Promise<OptimizedExecutionResult> {
@@ -115,7 +115,7 @@ export class OptimizedButtonDataflowService {
   private static async executeAfterTiming(
     buttonId: string,
     actionType: ButtonActionType,
-    buttonConfig: ButtonTypeConfig,
+    buttonConfig: ExtendedButtonTypeConfig,
     contextData: Record<string, any>,
     companyCode: string,
   ): Promise<OptimizedExecutionResult> {
@@ -155,7 +155,7 @@ export class OptimizedButtonDataflowService {
   private static async executeBeforeTiming(
     buttonId: string,
     actionType: ButtonActionType,
-    buttonConfig: ButtonTypeConfig,
+    buttonConfig: ExtendedButtonTypeConfig,
     contextData: Record<string, any>,
     companyCode: string,
   ): Promise<OptimizedExecutionResult> {
@@ -228,7 +228,7 @@ export class OptimizedButtonDataflowService {
   private static async executeReplaceTiming(
     buttonId: string,
     actionType: ButtonActionType,
-    buttonConfig: ButtonTypeConfig,
+    buttonConfig: ExtendedButtonTypeConfig,
     contextData: Record<string, any>,
     companyCode: string,
   ): Promise<OptimizedExecutionResult> {
@@ -623,7 +623,7 @@ export class OptimizedButtonDataflowService {
    */
   private static async executeOriginalAction(
     actionType: ButtonActionType,
-    buttonConfig: ButtonTypeConfig,
+    buttonConfig: ExtendedButtonTypeConfig,
     contextData: Record<string, any>,
   ): Promise<any> {
     const startTime = performance.now();
@@ -677,42 +677,42 @@ export class OptimizedButtonDataflowService {
   /**
    * 개별 액션 구현들
    */
-  private static async executeSaveAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executeSaveAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     // TODO: 실제 저장 로직 구현
     return { success: true, message: "저장되었습니다." };
   }
 
-  private static async executeDeleteAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executeDeleteAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     // TODO: 실제 삭제 로직 구현
     return { success: true, message: "삭제되었습니다." };
   }
 
-  private static async executeSearchAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executeSearchAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     // TODO: 실제 검색 로직 구현
     return { success: true, message: "검색되었습니다.", data: [] };
   }
 
-  private static async executeEditAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executeEditAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     return { success: true, message: "수정 모드로 전환되었습니다." };
   }
 
-  private static async executeAddAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executeAddAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     return { success: true, message: "추가 모드로 전환되었습니다." };
   }
 
-  private static async executeResetAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executeResetAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     return { success: true, message: "초기화되었습니다." };
   }
 
-  private static async executeSubmitAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executeSubmitAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     return { success: true, message: "제출되었습니다." };
   }
 
-  private static async executeCloseAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executeCloseAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     return { success: true, message: "닫기 액션이 실행되었습니다." };
   }
 
-  private static async executePopupAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executePopupAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     return {
       success: true,
       message: "팝업이 열렸습니다.",
@@ -721,7 +721,7 @@ export class OptimizedButtonDataflowService {
     };
   }
 
-  private static async executeNavigateAction(config: ButtonTypeConfig, data: Record<string, any>) {
+  private static async executeNavigateAction(config: ExtendedButtonTypeConfig, data: Record<string, any>) {
     return {
       success: true,
       message: "페이지 이동이 실행되었습니다.",

frontend/lib/utils/dbTypeMapping.ts

@@ -0,0 +1,323 @@
+/**
+ * DB 타입 → 웹 타입 자동 매핑 유틸리티
+ *
+ * 백엔드의 unified-web-types.ts와 동기화된 매핑 로직을 제공합니다.
+ * 테이블 정보를 불러올 때 DB 타입을 적절한 웹 타입으로 자동 변환합니다.
+ */
+
+import { WebType } from "@/types";
+
+/**
+ * PostgreSQL DB 타입 → 웹 타입 매핑 테이블
+ * (백엔드 unified-web-types.ts와 동기화됨)
+ */
+export const DB_TYPE_TO_WEB_TYPE: Record<string, WebType> = {
+  // 텍스트 타입
+  "character varying": "text",
+  varchar: "text",
+  text: "textarea",
+  char: "text",
+
+  // 숫자 타입
+  integer: "number",
+  bigint: "number",
+  smallint: "number",
+  serial: "number",
+  bigserial: "number",
+  numeric: "decimal",
+  decimal: "decimal",
+  real: "decimal",
+  "double precision": "decimal",
+  float: "decimal",
+  double: "decimal",
+
+  // 날짜/시간 타입
+  date: "date",
+  timestamp: "datetime",
+  "timestamp with time zone": "datetime",
+  "timestamp without time zone": "datetime",
+  datetime: "datetime",
+  time: "datetime",
+  "time with time zone": "datetime",
+  "time without time zone": "datetime",
+
+  // 불린 타입
+  boolean: "checkbox",
+  bool: "checkbox",
+
+  // JSON 타입 (텍스트로 처리)
+  json: "textarea",
+  jsonb: "textarea",
+
+  // 배열 타입 (텍스트로 처리)
+  ARRAY: "textarea",
+
+  // UUID 타입
+  uuid: "text",
+};
+
+/**
+ * 컬럼명 기반 스마트 웹 타입 추론 규칙
+ */
+export const COLUMN_NAME_TO_WEB_TYPE: Record<string, WebType> = {
+  // 이메일 관련
+  email: "email",
+  mail: "email",
+  e_mail: "email",
+
+  // 전화번호 관련
+  phone: "tel",
+  tel: "tel",
+  telephone: "tel",
+  mobile: "tel",
+  cellphone: "tel",
+
+  // URL 관련
+  url: "text",
+  link: "text",
+  website: "text",
+  homepage: "text",
+
+  // 비밀번호 관련
+  password: "text",
+  pwd: "text",
+  pass: "text",
+  passwd: "text",
+
+  // 파일 관련
+  file: "file",
+  attach: "file",
+  attachment: "file",
+  upload: "file",
+  document: "file",
+  doc: "file",
+  docs: "file",
+  image: "file",
+  img: "file",
+  photo: "file",
+  picture: "file",
+  media: "file",
+
+  // 코드 관련 (선택박스로 처리)
+  code: "code",
+  status: "code",
+  state: "code",
+  category: "code",
+  type: "code",
+
+  // 긴 텍스트 관련
+  description: "textarea",
+  desc: "textarea",
+  content: "textarea",
+  comment: "textarea",
+  note: "textarea",
+  memo: "textarea",
+  remark: "textarea",
+  detail: "textarea",
+};
+
+/**
+ * 컬럼 정보를 기반으로 최적의 웹 타입을 자동 추론합니다.
+ *
+ * @param dataType PostgreSQL 데이터 타입 (예: "integer", "varchar", "timestamp")
+ * @param columnName 컬럼명 (스마트 추론용)
+ * @returns 추론된 웹 타입
+ */
+export function inferWebTypeFromColumn(dataType: string, columnName: string = ""): WebType {
+  const type = dataType.toLowerCase();
+  const name = columnName.toLowerCase();
+
+  console.log("🔍 웹타입 자동 추론:", {
+    dataType,
+    columnName,
+    normalizedType: type,
+    normalizedName: name,
+  });
+
+  // 1. 정확한 DB 타입 매칭 우선
+  if (DB_TYPE_TO_WEB_TYPE[type]) {
+    console.log(`✅ 정확한 매핑: ${type} → ${DB_TYPE_TO_WEB_TYPE[type]}`);
+    return DB_TYPE_TO_WEB_TYPE[type];
+  }
+
+  // 2. 부분 문자열 매칭 (PostgreSQL 타입 변형 대응)
+  for (const [dbType, webType] of Object.entries(DB_TYPE_TO_WEB_TYPE)) {
+    if (type.includes(dbType.toLowerCase()) || dbType.toLowerCase().includes(type)) {
+      console.log(`✅ 부분 매핑: ${type} → ${webType} (기준: ${dbType})`);
+      return webType;
+    }
+  }
+
+  // 3. 추가 정밀 매핑 (일반적인 패턴)
+  if (type.includes("int") && !type.includes("point")) {
+    console.log(`✅ 패턴 매핑: ${type} → number (정수 패턴)`);
+    return "number";
+  }
+  if (type.includes("numeric") || type.includes("decimal")) {
+    console.log(`✅ 패턴 매핑: ${type} → decimal (실수 패턴)`);
+    return "decimal";
+  }
+  if (type.includes("timestamp") || type.includes("datetime")) {
+    console.log(`✅ 패턴 매핑: ${type} → datetime (타임스탬프 패턴)`);
+    return "datetime";
+  }
+  if (type.includes("date")) {
+    console.log(`✅ 패턴 매핑: ${type} → date (날짜 패턴)`);
+    return "date";
+  }
+  if (type.includes("time")) {
+    console.log(`✅ 패턴 매핑: ${type} → datetime (시간 패턴)`);
+    return "datetime";
+  }
+  if (type.includes("bool")) {
+    console.log(`✅ 패턴 매핑: ${type} → checkbox (불린 패턴)`);
+    return "checkbox";
+  }
+
+  // 4. 컬럼명 기반 스마트 추론
+  for (const [namePattern, webType] of Object.entries(COLUMN_NAME_TO_WEB_TYPE)) {
+    if (name.includes(namePattern)) {
+      console.log(`✅ 컬럼명 기반 매핑: ${columnName} → ${webType} (패턴: ${namePattern})`);
+      return webType;
+    }
+  }
+
+  // 5. 텍스트 타입 세분화
+  if (type.includes("char") || type.includes("varchar") || type.includes("text")) {
+    const webType = type.includes("text") ? "textarea" : "text";
+    console.log(`✅ 텍스트 타입 매핑: ${type} → ${webType}`);
+    return webType;
+  }
+
+  // 6. 최종 기본값
+  console.log(`⚠️ 기본값 사용: ${type} → text (매핑 규칙 없음)`);
+  return "text";
+}
+
+/**
+ * 웹 타입이 DB 타입과 호환되는지 확인합니다.
+ *
+ * @param webType 설정된 웹 타입
+ * @param dbType DB 데이터 타입
+ * @returns 호환성 검사 결과
+ */
+export function checkWebTypeCompatibility(
+  webType: WebType,
+  dbType: string,
+): {
+  compatible: boolean;
+  risk: "none" | "low" | "medium" | "high";
+  warning?: string;
+} {
+  const normalizedDbType = dbType.toLowerCase();
+  const recommendedWebType = inferWebTypeFromColumn(dbType);
+
+  // 완전 호환
+  if (webType === recommendedWebType) {
+    return { compatible: true, risk: "none" };
+  }
+
+  // 위험도별 분류
+  const incompatiblePairs: Record<string, { risk: "low" | "medium" | "high"; warning: string }> = {
+    // 높은 위험: 데이터 손실 가능성 높음
+    "text-integer": {
+      risk: "high",
+      warning: "텍스트 입력에서 정수 DB로 저장 시 숫자가 아닌 데이터는 손실됩니다.",
+    },
+    "text-numeric": {
+      risk: "high",
+      warning: "텍스트 입력에서 숫자 DB로 저장 시 숫자가 아닌 데이터는 손실됩니다.",
+    },
+    "text-boolean": {
+      risk: "high",
+      warning: "텍스트 입력에서 불린 DB로 저장 시 예상치 못한 변환이 발생할 수 있습니다.",
+    },
+
+    // 중간 위험: 일부 데이터 손실 또는 형식 문제
+    "number-varchar": {
+      risk: "medium",
+      warning: "숫자 입력이 텍스트로 저장되어 숫자 연산에 제한이 있을 수 있습니다.",
+    },
+    "date-varchar": {
+      risk: "medium",
+      warning: "날짜 입력이 텍스트로 저장되어 날짜 연산에 제한이 있을 수 있습니다.",
+    },
+
+    // 낮은 위험: 호환 가능하지만 최적이 아님
+    "textarea-varchar": {
+      risk: "low",
+      warning: "긴 텍스트 입력이 짧은 텍스트 필드에 저장될 수 있습니다.",
+    },
+    "text-varchar": {
+      risk: "low",
+      warning: "일반적으로 호환되지만 길이 제한에 주의하세요.",
+    },
+  };
+
+  // DB 타입 정규화
+  let normalizedPair = "";
+  if (normalizedDbType.includes("int") || normalizedDbType.includes("serial")) {
+    normalizedPair = `${webType}-integer`;
+  } else if (normalizedDbType.includes("numeric") || normalizedDbType.includes("decimal")) {
+    normalizedPair = `${webType}-numeric`;
+  } else if (normalizedDbType.includes("bool")) {
+    normalizedPair = `${webType}-boolean`;
+  } else if (normalizedDbType.includes("varchar") || normalizedDbType.includes("char")) {
+    normalizedPair = `${webType}-varchar`;
+  } else if (normalizedDbType.includes("text")) {
+    normalizedPair = `${webType}-text`;
+  } else if (normalizedDbType.includes("date") || normalizedDbType.includes("timestamp")) {
+    normalizedPair = `${webType}-date`;
+  }
+
+  const incompatibility = incompatiblePairs[normalizedPair];
+  if (incompatibility) {
+    return {
+      compatible: false,
+      risk: incompatibility.risk,
+      warning: incompatibility.warning,
+    };
+  }
+
+  // 알려지지 않은 조합은 중간 위험으로 처리
+  return {
+    compatible: false,
+    risk: "medium",
+    warning: `웹 타입 '${webType}'와 DB 타입 '${dbType}'의 호환성을 확인해주세요.`,
+  };
+}
+
+/**
+ * 테이블의 모든 컬럼에 대해 자동 웹 타입 매핑을 수행합니다.
+ */
+export function autoMapTableColumns(
+  columns: Array<{ columnName: string; dataType: string }>,
+): Array<{ columnName: string; dataType: string; recommendedWebType: WebType; confidence: "high" | "medium" | "low" }> {
+  return columns.map((column) => {
+    const recommendedWebType = inferWebTypeFromColumn(column.dataType, column.columnName);
+
+    // 신뢰도 계산
+    let confidence: "high" | "medium" | "low" = "medium";
+
+    // 정확한 매핑이 있으면 높은 신뢰도
+    if (DB_TYPE_TO_WEB_TYPE[column.dataType.toLowerCase()]) {
+      confidence = "high";
+    }
+    // 컬럼명 기반 매핑이 있으면 높은 신뢰도
+    else if (
+      Object.keys(COLUMN_NAME_TO_WEB_TYPE).some((pattern) => column.columnName.toLowerCase().includes(pattern))
+    ) {
+      confidence = "high";
+    }
+    // 기본값을 사용한 경우 낮은 신뢰도
+    else if (recommendedWebType === "text") {
+      confidence = "low";
+    }
+
+    return {
+      ...column,
+      recommendedWebType,
+      confidence,
+    };
+  });
+}

frontend/lib/utils/formValidation.ts

@@ -0,0 +1,663 @@
+/**
+ * 화면관리 폼 데이터 검증 유틸리티
+ * 클라이언트 측에서 사전 검증을 수행하여 사용자 경험 향상
+ */
+
+import { WebType, DynamicWebType, isValidWebType, normalizeWebType } from "@/types/unified-web-types";
+import { ColumnInfo, ComponentData, WidgetComponent } from "@/types/screen";
+
+// 검증 결과 타입
+export interface ValidationResult {
+  isValid: boolean;
+  errors: ValidationError[];
+  warnings: ValidationWarning[];
+}
+
+export interface ValidationError {
+  field: string;
+  code: string;
+  message: string;
+  severity: "error" | "warning";
+  value?: any;
+}
+
+export interface ValidationWarning {
+  field: string;
+  code: string;
+  message: string;
+  suggestion?: string;
+}
+
+// 필드 검증 결과
+export interface FieldValidationResult {
+  isValid: boolean;
+  error?: ValidationError;
+  transformedValue?: any;
+}
+
+// 스키마 검증 결과
+export interface SchemaValidationResult {
+  isValid: boolean;
+  missingColumns: string[];
+  invalidTypes: { field: string; expected: WebType; actual: string }[];
+  suggestions: string[];
+}
+
+/**
+ * 폼 데이터 전체 검증
+ */
+export const validateFormData = async (
+  formData: Record<string, any>,
+  components: ComponentData[],
+  tableColumns: ColumnInfo[],
+  tableName: string,
+): Promise<ValidationResult> => {
+  const errors: ValidationError[] = [];
+  const warnings: ValidationWarning[] = [];
+
+  try {
+    // 1. 스키마 검증 (컬럼 존재 여부, 타입 일치)
+    const schemaValidation = validateFormSchema(formData, components, tableColumns);
+    if (!schemaValidation.isValid) {
+      errors.push(
+        ...schemaValidation.missingColumns.map((col) => ({
+          field: col,
+          code: "COLUMN_NOT_EXISTS",
+          message: `테이블 '${tableName}'에 '${col}' 컬럼이 존재하지 않습니다.`,
+          severity: "error" as const,
+        })),
+      );
+
+      errors.push(
+        ...schemaValidation.invalidTypes.map((type) => ({
+          field: type.field,
+          code: "INVALID_WEB_TYPE",
+          message: `필드 '${type.field}'의 웹타입이 올바르지 않습니다. 예상: ${type.expected}, 실제: ${type.actual}`,
+          severity: "error" as const,
+        })),
+      );
+    }
+
+    // 2. 필수 필드 검증
+    const requiredValidation = validateRequiredFields(formData, components);
+    errors.push(...requiredValidation);
+
+    // 3. 데이터 타입 검증 및 변환
+    const widgetComponents = components.filter((c) => c.type === "widget") as WidgetComponent[];
+
+    for (const component of widgetComponents) {
+      const fieldName = component.columnName || component.id;
+      const value = formData[fieldName];
+
+      if (value !== undefined && value !== null && value !== "") {
+        const fieldValidation = validateFieldValue(
+          fieldName,
+          value,
+          component.widgetType,
+          component.webTypeConfig,
+          component.validationRules,
+        );
+
+        if (!fieldValidation.isValid && fieldValidation.error) {
+          errors.push(fieldValidation.error);
+        }
+      }
+    }
+
+    // 4. 비즈니스 로직 검증 (커스텀 규칙)
+    const businessValidation = await validateBusinessRules(formData, tableName, components);
+    errors.push(...businessValidation.errors);
+    warnings.push(...businessValidation.warnings);
+  } catch (error) {
+    errors.push({
+      field: "form",
+      code: "VALIDATION_ERROR",
+      message: `검증 중 오류가 발생했습니다: ${error}`,
+      severity: "error",
+    });
+  }
+
+  return {
+    isValid: errors.filter((e) => e.severity === "error").length === 0,
+    errors,
+    warnings,
+  };
+};
+
+/**
+ * 스키마 검증 (컬럼 존재 여부, 타입 일치)
+ */
+export const validateFormSchema = (
+  formData: Record<string, any>,
+  components: ComponentData[],
+  tableColumns: ColumnInfo[],
+): SchemaValidationResult => {
+  const missingColumns: string[] = [];
+  const invalidTypes: { field: string; expected: WebType; actual: string }[] = [];
+  const suggestions: string[] = [];
+
+  const columnMap = new Map(tableColumns.map((col) => [col.columnName, col]));
+  const widgetComponents = components.filter((c) => c.type === "widget") as WidgetComponent[];
+
+  for (const component of widgetComponents) {
+    const fieldName = component.columnName;
+    if (!fieldName) continue;
+
+    // 컬럼 존재 여부 확인
+    const columnInfo = columnMap.get(fieldName);
+    if (!columnInfo) {
+      missingColumns.push(fieldName);
+
+      // 유사한 컬럼명 제안
+      const similar = findSimilarColumns(fieldName, tableColumns);
+      if (similar.length > 0) {
+        suggestions.push(`'${fieldName}' 대신 '${similar.join("', '")}'을 사용하시겠습니까?`);
+      }
+      continue;
+    }
+
+    // 웹타입 일치 여부 확인
+    const componentWebType = normalizeWebType(component.widgetType);
+    const columnWebType = columnInfo.webType ? normalizeWebType(columnInfo.webType) : null;
+
+    if (columnWebType && componentWebType !== columnWebType) {
+      invalidTypes.push({
+        field: fieldName,
+        expected: columnWebType,
+        actual: componentWebType,
+      });
+    }
+
+    // 웹타입 유효성 확인
+    if (!isValidWebType(component.widgetType)) {
+      invalidTypes.push({
+        field: fieldName,
+        expected: "text", // 기본값
+        actual: component.widgetType,
+      });
+    }
+  }
+
+  return {
+    isValid: missingColumns.length === 0 && invalidTypes.length === 0,
+    missingColumns,
+    invalidTypes,
+    suggestions,
+  };
+};
+
+/**
+ * 필수 필드 검증
+ */
+export const validateRequiredFields = (
+  formData: Record<string, any>,
+  components: ComponentData[],
+): ValidationError[] => {
+  const errors: ValidationError[] = [];
+  const widgetComponents = components.filter((c) => c.type === "widget") as WidgetComponent[];
+
+  for (const component of widgetComponents) {
+    if (!component.required) continue;
+
+    const fieldName = component.columnName || component.id;
+    const value = formData[fieldName];
+
+    if (
+      value === undefined ||
+      value === null ||
+      (typeof value === "string" && value.trim() === "") ||
+      (Array.isArray(value) && value.length === 0)
+    ) {
+      errors.push({
+        field: fieldName,
+        code: "REQUIRED_FIELD",
+        message: `'${component.label || fieldName}'은(는) 필수 입력 항목입니다.`,
+        severity: "error",
+        value,
+      });
+    }
+  }
+
+  return errors;
+};
+
+/**
+ * 개별 필드 값 검증
+ */
+export const validateFieldValue = (
+  fieldName: string,
+  value: any,
+  webType: DynamicWebType,
+  config?: Record<string, any>,
+  rules?: any[],
+): FieldValidationResult => {
+  try {
+    const normalizedWebType = normalizeWebType(webType);
+
+    // 타입별 검증
+    switch (normalizedWebType) {
+      case "number":
+        return validateNumberField(fieldName, value, config);
+
+      case "decimal":
+        return validateDecimalField(fieldName, value, config);
+
+      case "date":
+        return validateDateField(fieldName, value, config);
+
+      case "datetime":
+        return validateDateTimeField(fieldName, value, config);
+
+      case "email":
+        return validateEmailField(fieldName, value, config);
+
+      case "tel":
+        return validateTelField(fieldName, value, config);
+
+      case "url":
+        return validateUrlField(fieldName, value, config);
+
+      case "text":
+      case "textarea":
+        return validateTextField(fieldName, value, config);
+
+      case "boolean":
+      case "checkbox":
+        return validateBooleanField(fieldName, value, config);
+
+      default:
+        // 기본 문자열 검증
+        return validateTextField(fieldName, value, config);
+    }
+  } catch (error) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "VALIDATION_ERROR",
+        message: `필드 '${fieldName}' 검증 중 오류: ${error}`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+};
+
+/**
+ * 숫자 필드 검증
+ */
+const validateNumberField = (fieldName: string, value: any, config?: Record<string, any>): FieldValidationResult => {
+  const numValue = Number(value);
+
+  if (isNaN(numValue)) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "INVALID_NUMBER",
+        message: `'${fieldName}'에는 숫자만 입력할 수 있습니다.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  if (!Number.isInteger(numValue)) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "NOT_INTEGER",
+        message: `'${fieldName}'에는 정수만 입력할 수 있습니다.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  // 범위 검증
+  if (config?.min !== undefined && numValue < config.min) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "VALUE_TOO_SMALL",
+        message: `'${fieldName}'의 값은 ${config.min} 이상이어야 합니다.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  if (config?.max !== undefined && numValue > config.max) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "VALUE_TOO_LARGE",
+        message: `'${fieldName}'의 값은 ${config.max} 이하여야 합니다.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  return { isValid: true, transformedValue: numValue };
+};
+
+/**
+ * 소수 필드 검증
+ */
+const validateDecimalField = (fieldName: string, value: any, config?: Record<string, any>): FieldValidationResult => {
+  const numValue = Number(value);
+
+  if (isNaN(numValue)) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "INVALID_DECIMAL",
+        message: `'${fieldName}'에는 숫자만 입력할 수 있습니다.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  // 소수점 자릿수 검증
+  if (config?.decimalPlaces !== undefined) {
+    const decimalPart = value.toString().split(".")[1];
+    if (decimalPart && decimalPart.length > config.decimalPlaces) {
+      return {
+        isValid: false,
+        error: {
+          field: fieldName,
+          code: "TOO_MANY_DECIMAL_PLACES",
+          message: `'${fieldName}'의 소수점은 ${config.decimalPlaces}자리까지만 입력할 수 있습니다.`,
+          severity: "error",
+          value,
+        },
+      };
+    }
+  }
+
+  return { isValid: true, transformedValue: numValue };
+};
+
+/**
+ * 날짜 필드 검증
+ */
+const validateDateField = (fieldName: string, value: any, config?: Record<string, any>): FieldValidationResult => {
+  const dateValue = new Date(value);
+
+  if (isNaN(dateValue.getTime())) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "INVALID_DATE",
+        message: `'${fieldName}'에는 올바른 날짜를 입력해주세요.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  // 날짜 범위 검증
+  if (config?.minDate) {
+    const minDate = new Date(config.minDate);
+    if (dateValue < minDate) {
+      return {
+        isValid: false,
+        error: {
+          field: fieldName,
+          code: "DATE_TOO_EARLY",
+          message: `'${fieldName}'의 날짜는 ${config.minDate} 이후여야 합니다.`,
+          severity: "error",
+          value,
+        },
+      };
+    }
+  }
+
+  if (config?.maxDate) {
+    const maxDate = new Date(config.maxDate);
+    if (dateValue > maxDate) {
+      return {
+        isValid: false,
+        error: {
+          field: fieldName,
+          code: "DATE_TOO_LATE",
+          message: `'${fieldName}'의 날짜는 ${config.maxDate} 이전이어야 합니다.`,
+          severity: "error",
+          value,
+        },
+      };
+    }
+  }
+
+  return { isValid: true, transformedValue: dateValue.toISOString().split("T")[0] };
+};
+
+/**
+ * 날짜시간 필드 검증
+ */
+const validateDateTimeField = (fieldName: string, value: any, config?: Record<string, any>): FieldValidationResult => {
+  const dateValue = new Date(value);
+
+  if (isNaN(dateValue.getTime())) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "INVALID_DATETIME",
+        message: `'${fieldName}'에는 올바른 날짜시간을 입력해주세요.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  return { isValid: true, transformedValue: dateValue.toISOString() };
+};
+
+/**
+ * 이메일 필드 검증
+ */
+const validateEmailField = (fieldName: string, value: any, config?: Record<string, any>): FieldValidationResult => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  if (!emailRegex.test(value)) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "INVALID_EMAIL",
+        message: `'${fieldName}'에는 올바른 이메일 주소를 입력해주세요.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  return { isValid: true, transformedValue: value };
+};
+
+/**
+ * 전화번호 필드 검증
+ */
+const validateTelField = (fieldName: string, value: any, config?: Record<string, any>): FieldValidationResult => {
+  // 기본 전화번호 형식 검증 (한국)
+  const telRegex = /^(\d{2,3}-?\d{3,4}-?\d{4}|\d{10,11})$/;
+
+  if (!telRegex.test(value.replace(/\s/g, ""))) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "INVALID_TEL",
+        message: `'${fieldName}'에는 올바른 전화번호를 입력해주세요.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  return { isValid: true, transformedValue: value };
+};
+
+/**
+ * URL 필드 검증
+ */
+const validateUrlField = (fieldName: string, value: any, config?: Record<string, any>): FieldValidationResult => {
+  try {
+    new URL(value);
+    return { isValid: true, transformedValue: value };
+  } catch {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "INVALID_URL",
+        message: `'${fieldName}'에는 올바른 URL을 입력해주세요.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+};
+
+/**
+ * 텍스트 필드 검증
+ */
+const validateTextField = (fieldName: string, value: any, config?: Record<string, any>): FieldValidationResult => {
+  const strValue = String(value);
+
+  // 길이 검증
+  if (config?.minLength && strValue.length < config.minLength) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "TOO_SHORT",
+        message: `'${fieldName}'은(는) 최소 ${config.minLength}자 이상이어야 합니다.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  if (config?.maxLength && strValue.length > config.maxLength) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "TOO_LONG",
+        message: `'${fieldName}'은(는) 최대 ${config.maxLength}자까지만 입력할 수 있습니다.`,
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  // 패턴 검증
+  if (config?.pattern) {
+    const regex = new RegExp(config.pattern);
+    if (!regex.test(strValue)) {
+      return {
+        isValid: false,
+        error: {
+          field: fieldName,
+          code: "PATTERN_MISMATCH",
+          message: `'${fieldName}'의 형식이 올바르지 않습니다.`,
+          severity: "error",
+          value,
+        },
+      };
+    }
+  }
+
+  return { isValid: true, transformedValue: strValue };
+};
+
+/**
+ * 불린 필드 검증
+ */
+const validateBooleanField = (fieldName: string, value: any, config?: Record<string, any>): FieldValidationResult => {
+  let boolValue: boolean;
+
+  if (typeof value === "boolean") {
+    boolValue = value;
+  } else if (typeof value === "string") {
+    boolValue = value.toLowerCase() === "true" || value === "1";
+  } else if (typeof value === "number") {
+    boolValue = value === 1;
+  } else {
+    boolValue = Boolean(value);
+  }
+
+  return { isValid: true, transformedValue: boolValue };
+};
+
+/**
+ * 비즈니스 로직 검증 (커스텀)
+ */
+const validateBusinessRules = async (
+  formData: Record<string, any>,
+  tableName: string,
+  components: ComponentData[],
+): Promise<{ errors: ValidationError[]; warnings: ValidationWarning[] }> => {
+  const errors: ValidationError[] = [];
+  const warnings: ValidationWarning[] = [];
+
+  // 여기에 테이블별 비즈니스 로직 검증 추가
+  // 예: 중복 체크, 외래키 제약조건, 커스텀 규칙 등
+
+  return { errors, warnings };
+};
+
+/**
+ * 유사한 컬럼명 찾기 (오타 제안용)
+ */
+const findSimilarColumns = (targetColumn: string, columns: ColumnInfo[], threshold: number = 0.6): string[] => {
+  const similar: string[] = [];
+
+  for (const column of columns) {
+    const similarity = calculateStringSimilarity(targetColumn, column.columnName);
+    if (similarity >= threshold) {
+      similar.push(column.columnName);
+    }
+  }
+
+  return similar.slice(0, 3); // 최대 3개까지
+};
+
+/**
+ * 문자열 유사도 계산 (Levenshtein distance 기반)
+ */
+const calculateStringSimilarity = (str1: string, str2: string): number => {
+  const len1 = str1.length;
+  const len2 = str2.length;
+
+  const matrix: number[][] = [];
+
+  for (let i = 0; i <= len1; i++) {
+    matrix[i] = [i];
+  }
+
+  for (let j = 0; j <= len2; j++) {
+    matrix[0][j] = j;
+  }
+
+  for (let i = 1; i <= len1; i++) {
+    for (let j = 1; j <= len2; j++) {
+      const cost = str1[i - 1] === str2[j - 1] ? 0 : 1;
+      matrix[i][j] = Math.min(matrix[i - 1][j] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j - 1] + cost);
+    }
+  }
+
+  const distance = matrix[len1][len2];
+  const maxLen = Math.max(len1, len2);
+
+  return maxLen === 0 ? 1 : (maxLen - distance) / maxLen;
+};

frontend/test-scenarios/api-integration-tests.ts

@@ -0,0 +1,420 @@
+/**
+ * 🌐 API 연동 타입 안전성 테스트
+ *
+ * 실제 백엔드 API와 연동하여 타입 안전성을 검증합니다.
+ */
+
+import { apiClient } from "@/lib/api/client";
+import {
+  ComponentData,
+  WidgetComponent,
+  ScreenDefinition,
+  LayoutData,
+  TableInfo,
+  UnifiedColumnInfo,
+  ColumnTypeInfo,
+  ButtonActionType,
+  WebType,
+  isWebType,
+  isButtonActionType,
+  ynToBoolean,
+  booleanToYN,
+} from "@/types";
+
+export class APIIntegrationTestSuite {
+  /**
+   * 🧪 Test 1: 테이블 정보 API 타입 안전성
+   */
+  static async testTableInfoAPI() {
+    console.log("🧪 API Test 1: 테이블 정보 API 타입 안전성");
+
+    try {
+      // 실제 API 호출
+      const response = await apiClient.get("/api/admin/table-management/tables", {
+        params: { companyCode: "COMPANY_1" },
+      });
+
+      if (response.data && Array.isArray(response.data)) {
+        const tables = response.data as TableInfo[];
+
+        tables.forEach((table, index) => {
+          // 필수 필드 검증
+          console.assert(typeof table.tableName === "string", `테이블 ${index}: tableName이 문자열이 아님`);
+          console.assert(typeof table.tableLabel === "string", `테이블 ${index}: tableLabel이 문자열이 아님`);
+
+          if (table.columns && Array.isArray(table.columns)) {
+            table.columns.forEach((column, colIndex) => {
+              // 컬럼 타입 검증
+              console.assert(
+                typeof column.columnName === "string",
+                `테이블 ${index}, 컬럼 ${colIndex}: columnName이 문자열이 아님`,
+              );
+
+              // WebType 안전성 검증
+              if (column.webType) {
+                const isValidWebType = isWebType(column.webType);
+                if (!isValidWebType) {
+                  console.warn(
+                    `테이블 ${table.tableName}, 컬럼 ${column.columnName}: 유효하지 않은 webType: ${column.webType}`,
+                  );
+                }
+              }
+            });
+          }
+        });
+
+        console.log(`✅ 테이블 정보 API: ${tables.length}개 테이블 검증 완료`);
+        return true;
+      }
+    } catch (error) {
+      console.error("❌ 테이블 정보 API 테스트 실패:", error);
+      return false;
+    }
+  }
+
+  /**
+   * 🧪 Test 2: 컬럼 타입 정보 API 호환성
+   */
+  static async testColumnTypeAPI() {
+    console.log("🧪 API Test 2: 컬럼 타입 정보 API 호환성");
+
+    try {
+      const response = await apiClient.get("/api/admin/table-management/columns", {
+        params: {
+          tableName: "user_info",
+          companyCode: "COMPANY_1",
+        },
+      });
+
+      if (response.data && Array.isArray(response.data)) {
+        const columns = response.data as ColumnTypeInfo[];
+
+        // 백엔드 타입을 프론트엔드 통합 타입으로 변환 테스트
+        const unifiedColumns: UnifiedColumnInfo[] = columns.map((col) => ({
+          columnName: col.columnName,
+          displayName: col.displayName,
+          dataType: col.dataType,
+          dbType: col.dbType,
+          webType: isWebType(col.webType) ? (col.webType as WebType) : "text",
+          inputType: col.inputType || "direct",
+          detailSettings: col.detailSettings ? JSON.parse(col.detailSettings) : {},
+          description: col.description || "",
+          isNullable: ynToBoolean(col.isNullable),
+          isPrimaryKey: col.isPrimaryKey,
+          defaultValue: col.defaultValue,
+          maxLength: col.maxLength,
+          companyCode: col.companyCode,
+        }));
+
+        // 변환 검증
+        unifiedColumns.forEach((unifiedCol, index) => {
+          const originalCol = columns[index];
+
+          // WebType 변환 검증
+          console.assert(isWebType(unifiedCol.webType), `컬럼 ${unifiedCol.columnName}: WebType 변환 실패`);
+
+          // Y/N → boolean 변환 검증
+          console.assert(
+            typeof unifiedCol.isNullable === "boolean",
+            `컬럼 ${unifiedCol.columnName}: isNullable boolean 변환 실패`,
+          );
+
+          // JSON 파싱 검증
+          console.assert(
+            typeof unifiedCol.detailSettings === "object",
+            `컬럼 ${unifiedCol.columnName}: detailSettings 객체 변환 실패`,
+          );
+        });
+
+        console.log(`✅ 컬럼 타입 API: ${unifiedColumns.length}개 컬럼 변환 완료`);
+        return true;
+      }
+    } catch (error) {
+      console.error("❌ 컬럼 타입 API 테스트 실패:", error);
+      return false;
+    }
+  }
+
+  /**
+   * 🧪 Test 3: 화면 정의 저장/불러오기 API
+   */
+  static async testScreenDefinitionAPI() {
+    console.log("🧪 API Test 3: 화면 정의 저장/불러오기 API");
+
+    try {
+      // 테스트용 화면 정의 생성
+      const testScreenDefinition: ScreenDefinition = {
+        screenId: 9999, // 테스트용 임시 ID
+        screenName: "API 테스트 화면",
+        screenCode: "API_TEST_SCREEN",
+        tableName: "test_table",
+        tableLabel: "테스트 테이블",
+        description: "API 타입 안전성 테스트용 화면",
+        isActive: "Y",
+        layoutData: {
+          screenId: 9999,
+          components: [
+            {
+              id: "testWidget",
+              type: "widget",
+              widgetType: "text",
+              position: { x: 10, y: 10 },
+              size: { width: 200, height: 40 },
+              label: "테스트 입력",
+              columnName: "test_column",
+              required: true,
+              webTypeConfig: { maxLength: 100 },
+            } as WidgetComponent,
+          ],
+          gridSettings: {
+            enabled: true,
+            size: 10,
+            snapToGrid: true,
+            showGrid: true,
+            color: "#e0e0e0",
+            opacity: 0.5,
+          },
+        },
+      };
+
+      // 화면 정의 저장 시도
+      const saveResponse = await apiClient.post("/api/admin/screen-management/screens", testScreenDefinition);
+
+      if (saveResponse.status === 200 || saveResponse.status === 201) {
+        console.log("✅ 화면 정의 저장 성공");
+
+        // 저장된 화면 불러오기 시도
+        const loadResponse = await apiClient.get(
+          `/api/admin/screen-management/screens/${testScreenDefinition.screenId}`,
+        );
+
+        if (loadResponse.data) {
+          const loadedScreen = loadResponse.data as ScreenDefinition;
+
+          // 데이터 무결성 검증
+          console.assert(loadedScreen.screenName === testScreenDefinition.screenName, "화면명 불일치");
+          console.assert(loadedScreen.layoutData.components.length > 0, "컴포넌트 데이터 손실");
+
+          // 컴포넌트 타입 안전성 검증
+          loadedScreen.layoutData.components.forEach((component) => {
+            if (component.type === "widget") {
+              const widget = component as WidgetComponent;
+              console.assert(isWebType(widget.widgetType), `위젯 타입 검증 실패: ${widget.widgetType}`);
+            }
+          });
+
+          console.log("✅ 화면 정의 불러오기 및 검증 완료");
+        }
+
+        // 테스트 데이터 정리
+        try {
+          await apiClient.delete(`/api/admin/screen-management/screens/${testScreenDefinition.screenId}`);
+          console.log("✅ 테스트 데이터 정리 완료");
+        } catch (cleanupError) {
+          console.warn("⚠️ 테스트 데이터 정리 실패 (정상적일 수 있음):", cleanupError);
+        }
+
+        return true;
+      }
+    } catch (error) {
+      console.error("❌ 화면 정의 API 테스트 실패:", error);
+      return false;
+    }
+  }
+
+  /**
+   * 🧪 Test 4: 폼 데이터 저장 API 타입 안전성
+   */
+  static async testFormDataSaveAPI() {
+    console.log("🧪 API Test 4: 폼 데이터 저장 API 타입 안전성");
+
+    try {
+      // 다양한 웹타입의 폼 데이터 준비
+      const formData = {
+        textField: "테스트 텍스트",
+        numberField: 123,
+        booleanField: true,
+        dateField: "2024-01-01",
+        selectField: "option1",
+        emailField: "test@example.com",
+      };
+
+      // 컴포넌트 정의 (폼 구조)
+      const formComponents: WidgetComponent[] = [
+        {
+          id: "textField",
+          type: "widget",
+          widgetType: "text",
+          position: { x: 0, y: 0 },
+          size: { width: 200, height: 40 },
+          label: "텍스트",
+          columnName: "text_column",
+          webTypeConfig: {},
+        },
+        {
+          id: "numberField",
+          type: "widget",
+          widgetType: "number",
+          position: { x: 0, y: 50 },
+          size: { width: 200, height: 40 },
+          label: "숫자",
+          columnName: "number_column",
+          webTypeConfig: {},
+        },
+        {
+          id: "booleanField",
+          type: "widget",
+          widgetType: "checkbox",
+          position: { x: 0, y: 100 },
+          size: { width: 200, height: 40 },
+          label: "체크박스",
+          columnName: "boolean_column",
+          webTypeConfig: {},
+        },
+      ];
+
+      // 타입 안전한 데이터 변환
+      const processedData: Record<string, any> = {};
+
+      formComponents.forEach((component) => {
+        const fieldValue = formData[component.id as keyof typeof formData];
+
+        if (fieldValue !== undefined && component.columnName) {
+          switch (component.widgetType) {
+            case "text":
+            case "email":
+              processedData[component.columnName] = String(fieldValue);
+              break;
+
+            case "number":
+              processedData[component.columnName] = Number(fieldValue);
+              break;
+
+            case "checkbox":
+            case "boolean":
+              processedData[component.columnName] = booleanToYN(Boolean(fieldValue));
+              break;
+
+            case "date":
+              processedData[component.columnName] = fieldValue ? String(fieldValue) : null;
+              break;
+
+            default:
+              processedData[component.columnName] = fieldValue;
+          }
+        }
+      });
+
+      // 실제 API 호출 시뮬레이션 (일반적인 폼 저장 엔드포인트)
+      console.log("📤 처리된 폼 데이터:", processedData);
+
+      // 타입 검증
+      console.assert(typeof processedData.text_column === "string", "텍스트 필드 타입 오류");
+      console.assert(typeof processedData.number_column === "number", "숫자 필드 타입 오류");
+      console.assert(
+        processedData.boolean_column === "Y" || processedData.boolean_column === "N",
+        "불린 필드 Y/N 변환 오류",
+      );
+
+      console.log("✅ 폼 데이터 저장 타입 안전성 검증 완료");
+      return true;
+    } catch (error) {
+      console.error("❌ 폼 데이터 저장 API 테스트 실패:", error);
+      return false;
+    }
+  }
+
+  /**
+   * 🧪 Test 5: 버튼 액션 실행 API 타입 안전성
+   */
+  static async testButtonActionAPI() {
+    console.log("🧪 API Test 5: 버튼 액션 실행 API 타입 안전성");
+
+    try {
+      const buttonActions: ButtonActionType[] = [
+        "save",
+        "cancel",
+        "delete",
+        "edit",
+        "add",
+        "search",
+        "reset",
+        "submit",
+        "close",
+        "popup",
+        "modal",
+        "navigate",
+        "control",
+      ];
+
+      // 각 버튼 액션 타입 검증
+      buttonActions.forEach((action) => {
+        console.assert(isButtonActionType(action), `유효하지 않은 버튼 액션: ${action}`);
+      });
+
+      // 잘못된 액션 타입들 검증
+      const invalidActions = ["insert", "update", "remove", ""];
+      invalidActions.forEach((action) => {
+        console.assert(!isButtonActionType(action), `잘못된 액션이 허용됨: ${action}`);
+      });
+
+      console.log("✅ 버튼 액션 타입 안전성 검증 완료");
+      return true;
+    } catch (error) {
+      console.error("❌ 버튼 액션 API 테스트 실패:", error);
+      return false;
+    }
+  }
+
+  /**
+   * 🎯 모든 API 연동 테스트 실행
+   */
+  static async runAllAPITests() {
+    console.log("🎯 API 연동 타입 안전성 테스트 시작\n");
+
+    const results = {
+      tableInfoAPI: false,
+      columnTypeAPI: false,
+      screenDefinitionAPI: false,
+      formDataSaveAPI: false,
+      buttonActionAPI: false,
+    };
+
+    try {
+      results.tableInfoAPI = await this.testTableInfoAPI();
+      results.columnTypeAPI = await this.testColumnTypeAPI();
+      results.screenDefinitionAPI = await this.testScreenDefinitionAPI();
+      results.formDataSaveAPI = await this.testFormDataSaveAPI();
+      results.buttonActionAPI = await this.testButtonActionAPI();
+
+      const passedTests = Object.values(results).filter(Boolean).length;
+      const totalTests = Object.keys(results).length;
+
+      console.log(`\n🎉 API 연동 테스트 완료: ${passedTests}/${totalTests} 통과`);
+
+      if (passedTests === totalTests) {
+        console.log("✅ 모든 API 연동 타입 안전성 테스트 통과!");
+      } else {
+        console.log("⚠️ 일부 API 연동 테스트 실패");
+      }
+
+      return {
+        success: passedTests === totalTests,
+        passedTests,
+        totalTests,
+        results,
+      };
+    } catch (error) {
+      console.error("❌ API 연동 테스트 실행 실패:", error);
+      return {
+        success: false,
+        passedTests: 0,
+        totalTests: Object.keys(results).length,
+        results,
+        error: String(error),
+      };
+    }
+  }
+}
+
+export default APIIntegrationTestSuite;

frontend/test-scenarios/stress-test-scenarios.ts

@@ -0,0 +1,800 @@
+/**
+ * 🔥 스트레스 테스트 시나리오
+ *
+ * 타입 시스템의 견고함을 검증하기 위한 극한 상황 테스트
+ */
+
+import {
+  ComponentData,
+  WidgetComponent,
+  WebType,
+  ScreenDefinition,
+  LayoutData,
+
+  // 타입 가드 및 유틸리티
+  isWebType,
+  isButtonActionType,
+  isWidgetComponent,
+  asWidgetComponent,
+  ynToBoolean,
+  booleanToYN,
+} from "@/types";
+
+// 스트레스 테스트용 확장된 화면 정의
+interface TestScreenDefinition extends ScreenDefinition {
+  layoutData?: LayoutData;
+}
+
+export class StressTestSuite {
+  private static results: Array<{
+    testName: string;
+    status: "passed" | "failed" | "warning";
+    duration: number;
+    details: string;
+    metrics?: Record<string, unknown>;
+  }> = [];
+
+  /**
+   * 🔥 Test 1: 대량 데이터 처리 스트레스 테스트
+   */
+  static async testMassiveDataProcessing() {
+    console.log("🔥 스트레스 테스트 1: 대량 데이터 처리");
+    const startTime = performance.now();
+
+    try {
+      // 10,000개의 컴포넌트 생성 및 타입 검증
+      const componentCount = 10000;
+      const components: ComponentData[] = [];
+      const webTypes: WebType[] = ["text", "number", "date", "select", "checkbox", "textarea", "email", "decimal"];
+
+      console.log(`📊 ${componentCount}개의 컴포넌트 생성 중...`);
+
+      for (let i = 0; i < componentCount; i++) {
+        const randomWebType = webTypes[i % webTypes.length];
+        const component: WidgetComponent = {
+          id: `stress-widget-${i}`,
+          type: "widget",
+          widgetType: randomWebType,
+          position: { x: Math.random() * 1000, y: Math.random() * 1000 },
+          size: { width: 100 + Math.random() * 200, height: 30 + Math.random() * 50 },
+          label: `스트레스 테스트 컴포넌트 ${i}`,
+          columnName: `stress_column_${i}`,
+          required: Math.random() > 0.5,
+          readonly: Math.random() > 0.7,
+          webTypeConfig: {
+            maxLength: Math.floor(Math.random() * 500),
+            placeholder: `테스트 플레이스홀더 ${i}`,
+          },
+        };
+        components.push(component);
+      }
+
+      console.log("🔍 타입 검증 시작...");
+      let validComponents = 0;
+      let invalidComponents = 0;
+
+      // 모든 컴포넌트 타입 검증
+      for (const component of components) {
+        if (isWidgetComponent(component)) {
+          const widget = asWidgetComponent(component);
+          if (widget && isWebType(widget.widgetType)) {
+            validComponents++;
+          } else {
+            invalidComponents++;
+          }
+        } else {
+          invalidComponents++;
+        }
+      }
+
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+
+      const metrics = {
+        totalComponents: componentCount,
+        validComponents,
+        invalidComponents,
+        processingTimeMs: duration,
+        componentsPerSecond: Math.round(componentCount / (duration / 1000)),
+      };
+
+      console.log("📈 대량 데이터 처리 결과:", metrics);
+
+      this.results.push({
+        testName: "대량 데이터 처리",
+        status: invalidComponents === 0 ? "passed" : "failed",
+        duration,
+        details: `${validComponents}/${componentCount} 컴포넌트 검증 성공`,
+        metrics,
+      });
+
+      return metrics;
+    } catch (error) {
+      const endTime = performance.now();
+      this.results.push({
+        testName: "대량 데이터 처리",
+        status: "failed",
+        duration: endTime - startTime,
+        details: `오류 발생: ${error}`,
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * 🔥 Test 2: 타입 오염 및 손상 시나리오
+   */
+  static async testTypeCorruption() {
+    console.log("🔥 스트레스 테스트 2: 타입 오염 및 손상");
+    const startTime = performance.now();
+
+    try {
+      // 다양한 잘못된 데이터들로 타입 시스템 공격
+      const corruptedInputs = [
+        // 잘못된 WebType들
+        { webType: null, expected: false },
+        { webType: undefined, expected: false },
+        { webType: "", expected: false },
+        { webType: "invalid_type", expected: false },
+        { webType: "VARCHAR(255)", expected: false },
+        { webType: "submit", expected: false }, // ButtonActionType과 혼동
+        { webType: "widget", expected: false }, // ComponentType과 혼동
+        { webType: 123, expected: false },
+        { webType: {}, expected: false },
+        { webType: [], expected: false },
+        { webType: "text", expected: true }, // 유일한 올바른 값
+
+        // 잘못된 ButtonActionType들
+        { buttonAction: "insert", expected: false },
+        { buttonAction: "update", expected: false },
+        { buttonAction: "remove", expected: false },
+        { buttonAction: "text", expected: false }, // WebType과 혼동
+        { buttonAction: null, expected: false },
+        { buttonAction: 456, expected: false },
+        { buttonAction: "save", expected: true }, // 올바른 값
+      ];
+
+      let passedChecks = 0;
+      let failedChecks = 0;
+
+      console.log("🦠 타입 오염 데이터 검증 중...");
+
+      corruptedInputs.forEach((input, index) => {
+        if ("webType" in input) {
+          const isValid = isWebType(input.webType as unknown);
+          if (isValid === input.expected) {
+            passedChecks++;
+          } else {
+            failedChecks++;
+            console.warn(
+              `❌ WebType 검증 실패 #${index}:`,
+              input.webType,
+              "expected:",
+              input.expected,
+              "got:",
+              isValid,
+            );
+          }
+        }
+
+        if ("buttonAction" in input) {
+          const isValid = isButtonActionType(input.buttonAction as unknown);
+          if (isValid === input.expected) {
+            passedChecks++;
+          } else {
+            failedChecks++;
+            console.warn(
+              `❌ ButtonActionType 검증 실패 #${index}:`,
+              input.buttonAction,
+              "expected:",
+              input.expected,
+              "got:",
+              isValid,
+            );
+          }
+        }
+      });
+
+      // 극한 메모리 오염 시뮬레이션
+      const memoryCorruptionTest = () => {
+        const largeString = "x".repeat(1000000); // 1MB 문자열
+        const corruptedComponent = {
+          id: largeString,
+          type: "widget", // 올바른 타입이지만
+          widgetType: largeString, // 잘못된 웹타입 (매우 긴 문자열)
+          position: { x: Infinity, y: -Infinity }, // 잘못된 위치값
+          size: { width: NaN, height: -1 }, // 잘못된 크기값
+          label: null, // null 라벨
+          // 필수 필드들이 누락됨
+        };
+
+        // 더 엄격한 검증을 위해 실제 WidgetComponent 인터페이스와 비교
+        const isValidWidget = isWidgetComponent(corruptedComponent as unknown);
+
+        // 추가 검증: widgetType이 유효한 WebType인지 확인
+        const hasValidWebType = corruptedComponent.widgetType && isWebType(corruptedComponent.widgetType);
+
+        // 추가 검증: 필수 필드들이 존재하고 유효한지 확인
+        const hasValidStructure =
+          corruptedComponent.position &&
+          typeof corruptedComponent.position.x === "number" &&
+          typeof corruptedComponent.position.y === "number" &&
+          !isNaN(corruptedComponent.position.x) &&
+          !isNaN(corruptedComponent.position.y) &&
+          corruptedComponent.size &&
+          typeof corruptedComponent.size.width === "number" &&
+          typeof corruptedComponent.size.height === "number" &&
+          !isNaN(corruptedComponent.size.width) &&
+          !isNaN(corruptedComponent.size.height) &&
+          corruptedComponent.size.width > 0 &&
+          corruptedComponent.size.height > 0;
+
+        // 모든 검증이 통과해야 true 반환 (실제로는 모두 실패해야 함)
+        return isValidWidget && hasValidWebType && hasValidStructure;
+      };
+
+      const memoryTestResult = memoryCorruptionTest();
+
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+
+      const metrics = {
+        totalChecks: corruptedInputs.length,
+        passedChecks,
+        failedChecks,
+        memoryCorruptionHandled: !memoryTestResult, // 오염된 컴포넌트는 거부되어야 함
+        duration,
+      };
+
+      console.log("🦠 타입 오염 테스트 결과:", metrics);
+
+      this.results.push({
+        testName: "타입 오염 및 손상",
+        status: failedChecks === 0 && metrics.memoryCorruptionHandled ? "passed" : "failed",
+        duration,
+        details: `${passedChecks}/${corruptedInputs.length} 오염 데이터 차단 성공`,
+        metrics,
+      });
+
+      return metrics;
+    } catch (error) {
+      const endTime = performance.now();
+      this.results.push({
+        testName: "타입 오염 및 손상",
+        status: "failed",
+        duration: endTime - startTime,
+        details: `오류 발생: ${error}`,
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * 🔥 Test 3: 동시 작업 및 경합 상태 테스트
+   */
+  static async testConcurrentOperations() {
+    console.log("🔥 스트레스 테스트 3: 동시 작업 및 경합 상태");
+    const startTime = performance.now();
+
+    try {
+      const concurrentTasks = 100;
+      const operationsPerTask = 100;
+
+      console.log(`⚡ ${concurrentTasks}개의 동시 작업 시작 (각각 ${operationsPerTask}개 연산)...`);
+
+      // 동시에 실행될 작업들
+      const concurrentPromises = Array.from({ length: concurrentTasks }, async (_, taskIndex) => {
+        const taskResults = {
+          taskIndex,
+          successfulOperations: 0,
+          failedOperations: 0,
+          typeGuardCalls: 0,
+          conversionCalls: 0,
+        };
+
+        for (let i = 0; i < operationsPerTask; i++) {
+          try {
+            // 타입 가드 테스트
+            const randomWebType = ["text", "number", "invalid"][Math.floor(Math.random() * 3)];
+            isWebType(randomWebType as unknown);
+            taskResults.typeGuardCalls++;
+
+            // Y/N 변환 테스트
+            const randomBoolean = Math.random() > 0.5;
+            const ynValue = booleanToYN(randomBoolean);
+            const backToBoolean = ynToBoolean(ynValue);
+            taskResults.conversionCalls++;
+
+            if (backToBoolean === randomBoolean) {
+              taskResults.successfulOperations++;
+            } else {
+              taskResults.failedOperations++;
+            }
+
+            // 컴포넌트 생성 및 타입 가드 테스트
+            const component: WidgetComponent = {
+              id: `concurrent-${taskIndex}-${i}`,
+              type: "widget",
+              widgetType: "text",
+              position: { x: 0, y: 0 },
+              size: { width: 100, height: 30 },
+              label: `Concurrent ${taskIndex}-${i}`,
+              webTypeConfig: {},
+            };
+
+            if (isWidgetComponent(component)) {
+              taskResults.successfulOperations++;
+            } else {
+              taskResults.failedOperations++;
+            }
+          } catch {
+            taskResults.failedOperations++;
+          }
+        }
+
+        return taskResults;
+      });
+
+      // 모든 동시 작업 완료 대기
+      const allResults = await Promise.all(concurrentPromises);
+
+      const aggregatedResults = allResults.reduce(
+        (acc, result) => ({
+          totalTasks: acc.totalTasks + 1,
+          totalSuccessfulOperations: acc.totalSuccessfulOperations + result.successfulOperations,
+          totalFailedOperations: acc.totalFailedOperations + result.failedOperations,
+          totalTypeGuardCalls: acc.totalTypeGuardCalls + result.typeGuardCalls,
+          totalConversionCalls: acc.totalConversionCalls + result.conversionCalls,
+        }),
+        {
+          totalTasks: 0,
+          totalSuccessfulOperations: 0,
+          totalFailedOperations: 0,
+          totalTypeGuardCalls: 0,
+          totalConversionCalls: 0,
+        },
+      );
+
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+
+      const metrics = {
+        ...aggregatedResults,
+        concurrentTasks,
+        operationsPerTask,
+        totalOperations: concurrentTasks * operationsPerTask * 3, // 각 루프에서 3개 연산
+        duration,
+        operationsPerSecond: Math.round(
+          (aggregatedResults.totalSuccessfulOperations + aggregatedResults.totalFailedOperations) / (duration / 1000),
+        ),
+        successRate:
+          (aggregatedResults.totalSuccessfulOperations /
+            (aggregatedResults.totalSuccessfulOperations + aggregatedResults.totalFailedOperations)) *
+          100,
+      };
+
+      console.log("⚡ 동시 작업 테스트 결과:", metrics);
+
+      this.results.push({
+        testName: "동시 작업 및 경합 상태",
+        status: metrics.successRate > 95 ? "passed" : "failed",
+        duration,
+        details: `${metrics.successRate.toFixed(2)}% 성공률`,
+        metrics,
+      });
+
+      return metrics;
+    } catch (error) {
+      const endTime = performance.now();
+      this.results.push({
+        testName: "동시 작업 및 경합 상태",
+        status: "failed",
+        duration: endTime - startTime,
+        details: `오류 발생: ${error}`,
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * 🔥 Test 4: 메모리 부하 및 가비지 컬렉션 스트레스
+   */
+  static async testMemoryStress() {
+    console.log("🔥 스트레스 테스트 4: 메모리 부하 및 가비지 컬렉션");
+    const startTime = performance.now();
+
+    try {
+      const iterations = 1000;
+      const objectsPerIteration = 1000;
+
+      console.log(`🧠 메모리 스트레스 테스트: ${iterations}회 반복, 매회 ${objectsPerIteration}개 객체 생성`);
+
+      let totalObjectsCreated = 0;
+      let gcTriggered = 0;
+
+      // 메모리 사용량 모니터링 (가능한 경우)
+      const initialMemory =
+        (performance as unknown as { memory?: { usedJSHeapSize: number } }).memory?.usedJSHeapSize || 0;
+
+      for (let iteration = 0; iteration < iterations; iteration++) {
+        // 대량의 객체 생성
+        const tempObjects: ComponentData[] = [];
+
+        for (let i = 0; i < objectsPerIteration; i++) {
+          const largeComponent: WidgetComponent = {
+            id: `memory-stress-${iteration}-${i}`,
+            type: "widget",
+            widgetType: "textarea",
+            position: { x: Math.random() * 10000, y: Math.random() * 10000 },
+            size: { width: Math.random() * 1000, height: Math.random() * 1000 },
+            label: "메모리 스트레스 테스트 컴포넌트 ".repeat(10), // 긴 문자열
+            columnName: `stress_test_column_with_very_long_name_${iteration}_${i}`,
+            placeholder: "매우 긴 플레이스홀더 텍스트 ".repeat(20),
+            webTypeConfig: {
+              maxLength: 10000,
+              rows: 50,
+              placeholder: "대용량 텍스트 영역 ".repeat(50),
+              validation: {
+                pattern: "매우 복잡한 정규식 패턴 ".repeat(10),
+                errorMessage: "복잡한 오류 메시지 ".repeat(10),
+              },
+            },
+          };
+
+          // 타입 검증
+          if (isWidgetComponent(largeComponent)) {
+            tempObjects.push(largeComponent);
+            totalObjectsCreated++;
+          }
+        }
+
+        // 더 적극적인 메모리 해제 (가비지 컬렉션 유도)
+        if (iteration % 50 === 0) {
+          // 더 자주 정리 (100 → 50)
+          tempObjects.length = 0; // 배열 초기화
+
+          // 강제적인 가비지 컬렉션 힌트 제공
+          if (typeof global !== "undefined" && (global as unknown as { gc?: () => void }).gc) {
+            (global as unknown as { gc: () => void }).gc();
+            gcTriggered++;
+          }
+
+          // 추가적인 메모리 정리 시뮬레이션
+          // 큰 객체들을 null로 설정하여 참조 해제
+          for (let cleanupIndex = 0; cleanupIndex < 10; cleanupIndex++) {
+            const dummyCleanup = new Array(1000).fill(null);
+            dummyCleanup.length = 0;
+          }
+
+          console.log(`🗑️  가비지 컬렉션 시뮬레이션 (반복 ${iteration}/${iterations})`);
+        }
+      }
+
+      const finalMemory =
+        (performance as unknown as { memory?: { usedJSHeapSize: number } }).memory?.usedJSHeapSize || 0;
+      const memoryDelta = finalMemory - initialMemory;
+
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+
+      const metrics = {
+        iterations,
+        objectsPerIteration,
+        totalObjectsCreated,
+        gcTriggered,
+        initialMemoryBytes: initialMemory,
+        finalMemoryBytes: finalMemory,
+        memoryDeltaBytes: memoryDelta,
+        memoryDeltaMB: Math.round((memoryDelta / (1024 * 1024)) * 100) / 100,
+        duration,
+        objectsPerSecond: Math.round(totalObjectsCreated / (duration / 1000)),
+      };
+
+      console.log("🧠 메모리 스트레스 테스트 결과:", metrics);
+
+      // 메모리 누수 체크 (매우 단순한 휴리스틱)
+      const suspectedMemoryLeak = metrics.memoryDeltaMB > 100; // 100MB 이상 증가 시 의심
+
+      this.results.push({
+        testName: "메모리 부하 및 가비지 컬렉션",
+        status: suspectedMemoryLeak ? "warning" : "passed",
+        duration,
+        details: `${metrics.totalObjectsCreated}개 객체 생성, 메모리 변화: ${metrics.memoryDeltaMB}MB`,
+        metrics,
+      });
+
+      return metrics;
+    } catch (error) {
+      const endTime = performance.now();
+      this.results.push({
+        testName: "메모리 부하 및 가비지 컬렉션",
+        status: "failed",
+        duration: endTime - startTime,
+        details: `오류 발생: ${error}`,
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * 🔥 Test 5: API 스트레스 및 네트워크 시뮬레이션
+   */
+  static async testAPIStress() {
+    console.log("🔥 스트레스 테스트 5: API 스트레스 및 네트워크 시뮬레이션");
+    const startTime = performance.now();
+
+    try {
+      // 대량의 API 요청 시뮬레이션
+      const apiCalls = 100;
+      const batchSize = 10;
+
+      console.log(`🌐 ${apiCalls}개의 API 호출을 ${batchSize}개씩 배치로 처리...`);
+
+      let successfulCalls = 0;
+      let failedCalls = 0;
+      const responseTimes: number[] = [];
+
+      // 배치별로 API 호출 시뮬레이션
+      for (let batch = 0; batch < Math.ceil(apiCalls / batchSize); batch++) {
+        const batchPromises = [];
+
+        for (let i = 0; i < batchSize && batch * batchSize + i < apiCalls; i++) {
+          const callIndex = batch * batchSize + i;
+
+          // API 호출 시뮬레이션 (실제로는 타입 처리 로직)
+          const apiCallSimulation = async () => {
+            const callStart = performance.now();
+
+            try {
+              // 복잡한 데이터 구조 생성 및 검증
+              const components: ComponentData[] = Array.from(
+                { length: 50 },
+                (_, idx) =>
+                  ({
+                    id: `stress-component-${callIndex}-${idx}`,
+                    type: "widget" as const,
+                    widgetType: "text" as WebType,
+                    position: { x: idx * 10, y: idx * 5 },
+                    size: { width: 200, height: 40 },
+                    label: `컴포넌트 ${idx}`,
+                    webTypeConfig: {},
+                  }) as WidgetComponent,
+              );
+
+              const complexScreenData: TestScreenDefinition = {
+                screenId: callIndex,
+                screenName: `스트레스 테스트 화면 ${callIndex}`,
+                screenCode: `STRESS_SCREEN_${callIndex}`,
+                tableName: `stress_table_${callIndex}`,
+                tableLabel: `스트레스 테이블 ${callIndex}`,
+                companyCode: "COMPANY_1",
+                description: `API 스트레스 테스트용 화면 ${callIndex}`,
+                isActive: Math.random() > 0.5 ? "Y" : "N",
+                createdDate: new Date(),
+                updatedDate: new Date(),
+                layoutData: {
+                  screenId: callIndex,
+                  components,
+                  gridSettings: {
+                    enabled: true,
+                    size: 10,
+                    color: "#e0e0e0",
+                    opacity: 0.5,
+                    snapToGrid: true,
+                  },
+                },
+              };
+
+              // 모든 컴포넌트 타입 검증
+              let validComponents = 0;
+              if (complexScreenData.layoutData?.components) {
+                for (const component of complexScreenData.layoutData.components) {
+                  if (isWidgetComponent(component)) {
+                    validComponents++;
+                  }
+                }
+              }
+
+              const callEnd = performance.now();
+              const responseTime = callEnd - callStart;
+              responseTimes.push(responseTime);
+
+              const totalComponents = complexScreenData.layoutData?.components?.length || 0;
+              if (validComponents === totalComponents) {
+                successfulCalls++;
+                return { success: true, responseTime, validComponents };
+              } else {
+                failedCalls++;
+                return { success: false, responseTime, validComponents };
+              }
+            } catch (error) {
+              const callEnd = performance.now();
+              const responseTime = callEnd - callStart;
+              responseTimes.push(responseTime);
+              failedCalls++;
+              return { success: false, responseTime, error };
+            }
+          };
+
+          batchPromises.push(apiCallSimulation());
+        }
+
+        // 배치 완료 대기
+        await Promise.all(batchPromises);
+
+        // 배치 간 짧은 대기 (실제 네트워크 지연 시뮬레이션)
+        await new Promise((resolve) => setTimeout(resolve, 10));
+      }
+
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+
+      // 응답 시간 통계
+      const avgResponseTime = responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length;
+      const maxResponseTime = Math.max(...responseTimes);
+      const minResponseTime = Math.min(...responseTimes);
+
+      const metrics = {
+        totalAPICalls: apiCalls,
+        successfulCalls,
+        failedCalls,
+        successRate: (successfulCalls / apiCalls) * 100,
+        avgResponseTimeMs: Math.round(avgResponseTime * 100) / 100,
+        maxResponseTimeMs: Math.round(maxResponseTime * 100) / 100,
+        minResponseTimeMs: Math.round(minResponseTime * 100) / 100,
+        totalDuration: duration,
+        callsPerSecond: Math.round(apiCalls / (duration / 1000)),
+      };
+
+      console.log("🌐 API 스트레스 테스트 결과:", metrics);
+
+      this.results.push({
+        testName: "API 스트레스 및 네트워크 시뮬레이션",
+        status: metrics.successRate > 95 ? "passed" : "failed",
+        duration,
+        details: `${metrics.successRate.toFixed(2)}% 성공률, 평균 응답시간: ${metrics.avgResponseTimeMs}ms`,
+        metrics,
+      });
+
+      return metrics;
+    } catch (error) {
+      const endTime = performance.now();
+      this.results.push({
+        testName: "API 스트레스 및 네트워크 시뮬레이션",
+        status: "failed",
+        duration: endTime - startTime,
+        details: `오류 발생: ${error}`,
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * 🎯 모든 스트레스 테스트 실행
+   */
+  static async runAllStressTests() {
+    console.log("🎯 스트레스 테스트 스위트 시작");
+    console.log("⚠️  시스템에 높은 부하를 가할 예정입니다...\n");
+
+    const overallStart = performance.now();
+    this.results = []; // 결과 초기화
+
+    try {
+      // 1. 대량 데이터 처리
+      console.log("=".repeat(60));
+      await this.testMassiveDataProcessing();
+
+      // 2. 타입 오염 및 손상
+      console.log("=".repeat(60));
+      await this.testTypeCorruption();
+
+      // 3. 동시 작업 및 경합 상태
+      console.log("=".repeat(60));
+      await this.testConcurrentOperations();
+
+      // 4. 메모리 부하
+      console.log("=".repeat(60));
+      await this.testMemoryStress();
+
+      // 5. API 스트레스
+      console.log("=".repeat(60));
+      await this.testAPIStress();
+
+      const overallEnd = performance.now();
+      const totalDuration = overallEnd - overallStart;
+
+      // 결과 분석
+      const passedTests = this.results.filter((r) => r.status === "passed").length;
+      const failedTests = this.results.filter((r) => r.status === "failed").length;
+      const warningTests = this.results.filter((r) => r.status === "warning").length;
+
+      console.log("\n" + "=".repeat(60));
+      console.log("🎉 스트레스 테스트 완료!");
+      console.log("=".repeat(60));
+      console.log(`📊 총 테스트: ${this.results.length}`);
+      console.log(`✅ 통과: ${passedTests}`);
+      console.log(`❌ 실패: ${failedTests}`);
+      console.log(`⚠️  경고: ${warningTests}`);
+      console.log(`⏱️  총 소요시간: ${Math.round(totalDuration)}ms`);
+      console.log("");
+
+      // 개별 테스트 결과 출력
+      this.results.forEach((result, index) => {
+        const statusIcon = result.status === "passed" ? "✅" : result.status === "failed" ? "❌" : "⚠️";
+        console.log(`${statusIcon} ${index + 1}. ${result.testName}`);
+        console.log(`   └─ ${result.details} (${Math.round(result.duration)}ms)`);
+      });
+
+      return {
+        success: failedTests === 0,
+        totalTests: this.results.length,
+        passedTests,
+        failedTests,
+        warningTests,
+        totalDuration,
+        results: this.results,
+        recommendation: this.generateRecommendations(),
+      };
+    } catch (error) {
+      console.error("❌ 스트레스 테스트 실행 중 치명적 오류:", error);
+      return {
+        success: false,
+        error: String(error),
+        results: this.results,
+      };
+    }
+  }
+
+  /**
+   * 📋 테스트 결과 기반 권장사항 생성
+   */
+  private static generateRecommendations(): string[] {
+    const recommendations: string[] = [];
+
+    this.results.forEach((result) => {
+      if (result.status === "failed") {
+        recommendations.push(`🔧 ${result.testName}: 실패 원인을 분석하고 타입 시스템을 강화하세요.`);
+      }
+
+      if (result.status === "warning") {
+        recommendations.push(`⚠️ ${result.testName}: 잠재적 문제가 감지되었습니다. 모니터링을 강화하세요.`);
+      }
+
+      if (result.metrics) {
+        // 성능 기반 권장사항
+        if (result.metrics.operationsPerSecond && result.metrics.operationsPerSecond < 1000) {
+          recommendations.push(
+            `⚡ ${result.testName}: 성능 최적화를 고려하세요 (${result.metrics.operationsPerSecond} ops/sec).`,
+          );
+        }
+
+        if (result.metrics.memoryDeltaMB && result.metrics.memoryDeltaMB > 50) {
+          recommendations.push(
+            `🧠 ${result.testName}: 메모리 사용량 최적화를 권장합니다 (${result.metrics.memoryDeltaMB}MB 증가).`,
+          );
+        }
+
+        if (result.metrics.successRate && result.metrics.successRate < 99) {
+          recommendations.push(
+            `🎯 ${result.testName}: 성공률 개선이 필요합니다 (${result.metrics.successRate.toFixed(2)}%).`,
+          );
+        }
+      }
+    });
+
+    if (recommendations.length === 0) {
+      recommendations.push("🎉 모든 스트레스 테스트를 성공적으로 통과했습니다! 타입 시스템이 매우 견고합니다.");
+    }
+
+    return recommendations;
+  }
+
+  /**
+   * 📊 테스트 결과 반환 (외부에서 접근 가능)
+   */
+  static getResults() {
+    return this.results;
+  }
+}
+
+export default StressTestSuite;

frontend/test-scenarios/type-safety-tests.ts

@@ -0,0 +1,541 @@
+/**
+ * 🧪 타입 안전성 종합 테스트 시나리오
+ *
+ * 화면관리, 제어관리, 테이블 타입관리 시스템의 타입 안전성을 검증합니다.
+ * 실제 사용자 시나리오에서 발생할 수 있는 모든 타입 오류 상황을 테스트합니다.
+ */
+
+import {
+  ComponentData,
+  WebType,
+  ButtonActionType,
+  WidgetComponent,
+  ContainerComponent,
+
+  // 타입 가드 함수들
+  isWidgetComponent,
+  isContainerComponent,
+  isWebType,
+  isButtonActionType,
+
+  // 안전한 캐스팅 함수들
+  asWidgetComponent,
+  asContainerComponent,
+
+  // 변환 함수들
+  ynToBoolean,
+  booleanToYN,
+
+  // 테이블 관련
+  UnifiedColumnInfo,
+  ColumnTypeInfo,
+
+  // 제어 관련
+  ExtendedButtonTypeConfig,
+
+  // 화면 관련
+  ScreenDefinition,
+  GroupState,
+} from "@/types";
+
+// ===== 1단계: 기본 타입 검증 테스트 =====
+
+export class TypeSafetyTestSuite {
+  /**
+   * 🧪 Test 1: WebType 타입 안전성 검증
+   */
+  static testWebTypeValidation() {
+    console.log("🧪 Test 1: WebType 타입 안전성 검증");
+
+    // 유효한 WebType들
+    const validWebTypes = [
+      "text",
+      "number",
+      "decimal",
+      "date",
+      "datetime",
+      "select",
+      "dropdown",
+      "radio",
+      "checkbox",
+      "boolean",
+      "textarea",
+      "code",
+      "entity",
+      "file",
+      "email",
+      "tel",
+      "url",
+      "button",
+    ];
+
+    // 무효한 타입들 (기존 시스템에서 문제가 되었던 것들)
+    const invalidWebTypes = [
+      "text_area", // 기존에 사용되던 잘못된 타입
+      "VARCHAR", // DB 타입과 혼동
+      "submit", // ButtonActionType과 혼동
+      "container", // ComponentType과 혼동
+      "",
+      null,
+      undefined,
+    ];
+
+    validWebTypes.forEach((type) => {
+      const isValid = isWebType(type);
+      console.assert(isValid, `유효한 WebType이 거부됨: ${type}`);
+      if (isValid) {
+        console.log(`✅ Valid WebType: ${type}`);
+      }
+    });
+
+    invalidWebTypes.forEach((type) => {
+      const isValid = isWebType(type as any);
+      console.assert(!isValid, `무효한 WebType이 허용됨: ${type}`);
+      if (!isValid) {
+        console.log(`❌ Invalid WebType rejected: ${type}`);
+      }
+    });
+  }
+
+  /**
+   * 🧪 Test 2: ComponentData 타입 가드 안전성
+   */
+  static testComponentTypeGuards() {
+    console.log("\n🧪 Test 2: ComponentData 타입 가드 안전성");
+
+    // 올바른 컴포넌트 생성
+    const widgetComponent: WidgetComponent = {
+      id: "widget-1",
+      type: "widget",
+      position: { x: 0, y: 0 },
+      size: { width: 200, height: 40 },
+      widgetType: "text",
+      label: "테스트 텍스트",
+      placeholder: "입력하세요",
+      required: false,
+      readonly: false,
+      webTypeConfig: {},
+    };
+
+    const containerComponent: ContainerComponent = {
+      id: "container-1",
+      type: "container",
+      position: { x: 0, y: 0 },
+      size: { width: 400, height: 300 },
+      label: "컨테이너",
+      children: [],
+      layoutDirection: "vertical",
+    };
+
+    // 타입 가드 테스트
+    console.assert(isWidgetComponent(widgetComponent), "WidgetComponent 타입 가드 실패");
+    console.assert(isContainerComponent(containerComponent), "ContainerComponent 타입 가드 실패");
+    console.assert(!isWidgetComponent(containerComponent), "잘못된 타입이 통과됨");
+    console.assert(!isContainerComponent(widgetComponent), "잘못된 타입이 통과됨");
+
+    // 안전한 캐스팅 테스트
+    const safeWidget = asWidgetComponent(widgetComponent);
+    const safeContainer = asContainerComponent(containerComponent);
+
+    console.assert(safeWidget !== null, "안전한 위젯 캐스팅 실패");
+    console.assert(safeContainer !== null, "안전한 컨테이너 캐스팅 실패");
+    console.assert(asWidgetComponent(containerComponent) === null, "잘못된 캐스팅이 허용됨");
+
+    console.log("✅ Component 타입 가드 모든 테스트 통과");
+  }
+
+  /**
+   * 🧪 Test 3: DB 호환성 (Y/N ↔ boolean) 변환 테스트
+   */
+  static testYNBooleanConversion() {
+    console.log("\n🧪 Test 3: DB 호환성 Y/N ↔ boolean 변환 테스트");
+
+    // Y/N → boolean 변환
+    console.assert(ynToBoolean("Y") === true, "Y → true 변환 실패");
+    console.assert(ynToBoolean("N") === false, "N → false 변환 실패");
+    console.assert(ynToBoolean("") === false, "빈 문자열 → false 변환 실패");
+    console.assert(ynToBoolean(undefined) === false, "undefined → false 변환 실패");
+
+    // boolean → Y/N 변환
+    console.assert(booleanToYN(true) === "Y", "true → Y 변환 실패");
+    console.assert(booleanToYN(false) === "N", "false → N 변환 실패");
+
+    // 실제 DB 시나리오 시뮬레이션
+    const dbColumnData = {
+      isActive: "Y",
+      isVisible: "N",
+      isPrimaryKey: "Y",
+      isNullable: "N",
+    };
+
+    const convertedData = {
+      isActive: ynToBoolean(dbColumnData.isActive),
+      isVisible: ynToBoolean(dbColumnData.isVisible),
+      isPrimaryKey: ynToBoolean(dbColumnData.isPrimaryKey),
+      isNullable: ynToBoolean(dbColumnData.isNullable),
+    };
+
+    console.assert(convertedData.isActive === true, "DB isActive 변환 실패");
+    console.assert(convertedData.isVisible === false, "DB isVisible 변환 실패");
+
+    console.log("✅ Y/N ↔ boolean 변환 모든 테스트 통과");
+  }
+
+  /**
+   * 🧪 Test 4: 실제 폼 저장 시나리오 시뮬레이션
+   */
+  static async testFormSaveScenarios() {
+    console.log("\n🧪 Test 4: 실제 폼 저장 시나리오 시뮬레이션");
+
+    // 시나리오 1: 혼합 웹타입 폼 데이터
+    const formData = {
+      userName: "홍길동",
+      userAge: 25,
+      userEmail: "hong@example.com",
+      isActive: true,
+      birthDate: "1999-01-01",
+      userRole: "admin",
+      description: "테스트 사용자입니다.",
+    };
+
+    // 시나리오 2: 컴포넌트별 웹타입 매핑
+    const formComponents: ComponentData[] = [
+      {
+        id: "userName",
+        type: "widget",
+        widgetType: "text",
+        position: { x: 0, y: 0 },
+        size: { width: 200, height: 40 },
+        label: "사용자명",
+        columnName: "user_name",
+        webTypeConfig: {},
+      } as WidgetComponent,
+      {
+        id: "userAge",
+        type: "widget",
+        widgetType: "number",
+        position: { x: 0, y: 50 },
+        size: { width: 200, height: 40 },
+        label: "나이",
+        columnName: "user_age",
+        webTypeConfig: { min: 0, max: 120 },
+      } as WidgetComponent,
+      {
+        id: "isActive",
+        type: "widget",
+        widgetType: "checkbox",
+        position: { x: 0, y: 100 },
+        size: { width: 200, height: 40 },
+        label: "활성화",
+        columnName: "is_active",
+        webTypeConfig: {},
+      } as WidgetComponent,
+    ];
+
+    // 타입 안전한 데이터 처리
+    const processedData: Record<string, any> = {};
+
+    for (const component of formComponents) {
+      if (isWidgetComponent(component)) {
+        const { columnName, widgetType } = component;
+
+        if (columnName && widgetType && formData.hasOwnProperty(component.id)) {
+          const rawValue = formData[component.id as keyof typeof formData];
+
+          // 웹타입별 안전한 변환
+          switch (widgetType) {
+            case "text":
+            case "email":
+            case "textarea":
+              processedData[columnName] = String(rawValue);
+              break;
+
+            case "number":
+            case "decimal":
+              processedData[columnName] = Number(rawValue);
+              break;
+
+            case "checkbox":
+            case "boolean":
+              processedData[columnName] = booleanToYN(Boolean(rawValue));
+              break;
+
+            case "date":
+            case "datetime":
+              processedData[columnName] = rawValue ? String(rawValue) : null;
+              break;
+
+            default:
+              console.warn(`처리되지 않은 웹타입: ${widgetType}`);
+              processedData[columnName] = rawValue;
+          }
+        }
+      }
+    }
+
+    console.log("✅ 폼 데이터 타입 안전 변환:", processedData);
+
+    // 검증: 모든 값이 올바른 타입으로 변환되었는지 확인
+    console.assert(typeof processedData.user_name === "string", "사용자명 타입 변환 실패");
+    console.assert(typeof processedData.user_age === "number", "나이 타입 변환 실패");
+    console.assert(processedData.is_active === "Y" || processedData.is_active === "N", "활성화 상태 변환 실패");
+  }
+
+  /**
+   * 🧪 Test 5: 버튼 제어관리 타입 안전성 테스트
+   */
+  static testButtonControlTypesSafety() {
+    console.log("\n🧪 Test 5: 버튼 제어관리 타입 안전성 테스트");
+
+    // ButtonActionType 안전성 검증
+    const validActions: ButtonActionType[] = [
+      "save",
+      "cancel",
+      "delete",
+      "edit",
+      "add",
+      "search",
+      "reset",
+      "submit",
+      "close",
+      "popup",
+      "modal",
+      "navigate",
+      "control",
+    ];
+
+    validActions.forEach((action) => {
+      console.assert(isButtonActionType(action), `유효한 ButtonActionType 거부: ${action}`);
+    });
+
+    // 무효한 액션 타입들
+    const invalidActions = ["insert", "update", "remove", ""];
+    invalidActions.forEach((action) => {
+      console.assert(!isButtonActionType(action), `무효한 ButtonActionType 허용: ${action}`);
+    });
+
+    console.log("✅ 버튼 제어관리 타입 안전성 테스트 통과");
+  }
+
+  /**
+   * 🧪 Test 6: 테이블 컬럼 정보 타입 호환성 테스트
+   */
+  static testTableColumnTypeCompatibility() {
+    console.log("\n🧪 Test 6: 테이블 컬럼 정보 타입 호환성 테스트");
+
+    // 백엔드에서 받은 원시 컬럼 정보 (ColumnTypeInfo)
+    const backendColumnInfo: ColumnTypeInfo = {
+      columnName: "user_name",
+      displayName: "사용자명",
+      dataType: "varchar",
+      dbType: "character varying(100)",
+      webType: "text", // string 타입 (백엔드)
+      inputType: "direct",
+      detailSettings: JSON.stringify({ maxLength: 100 }),
+      description: "사용자의 이름을 저장하는 컬럼",
+      isNullable: "N", // Y/N 문자열
+      isPrimaryKey: false,
+      defaultValue: "",
+      maxLength: 100,
+    };
+
+    // 프론트엔드 통합 컬럼 정보로 변환 (UnifiedColumnInfo)
+    const unifiedColumnInfo: UnifiedColumnInfo = {
+      columnName: backendColumnInfo.columnName,
+      displayName: backendColumnInfo.displayName,
+      dataType: backendColumnInfo.dataType,
+      dbType: backendColumnInfo.dbType,
+      webType: isWebType(backendColumnInfo.webType) ? (backendColumnInfo.webType as WebType) : "text", // 안전한 타입 변환
+      inputType: backendColumnInfo.inputType,
+      detailSettings: JSON.parse(backendColumnInfo.detailSettings || "{}"),
+      description: backendColumnInfo.description,
+      isNullable: ynToBoolean(backendColumnInfo.isNullable), // Y/N → boolean
+      isPrimaryKey: backendColumnInfo.isPrimaryKey,
+      defaultValue: backendColumnInfo.defaultValue,
+      maxLength: backendColumnInfo.maxLength,
+      companyCode: backendColumnInfo.companyCode,
+    };
+
+    // 검증
+    console.assert(isWebType(unifiedColumnInfo.webType), "WebType 변환 실패");
+    console.assert(typeof unifiedColumnInfo.isNullable === "boolean", "isNullable 타입 변환 실패");
+    console.assert(typeof unifiedColumnInfo.detailSettings === "object", "detailSettings JSON 파싱 실패");
+
+    console.log("✅ 테이블 컬럼 타입 호환성 테스트 통과");
+    console.log("변환된 컬럼 정보:", unifiedColumnInfo);
+  }
+
+  /**
+   * 🧪 Test 7: 복합 시나리오 - 화면 설계 + 데이터 저장 + 제어 실행
+   */
+  static async testComplexScenario() {
+    console.log("\n🧪 Test 7: 복합 시나리오 - 화면 설계 + 데이터 저장 + 제어 실행");
+
+    try {
+      // Step 1: 화면 정의 생성 (단순화된 버전)
+      const screenDefinition: ScreenDefinition = {
+        screenId: 1001,
+        screenName: "사용자 관리",
+        screenCode: "USER_MANAGEMENT",
+        tableName: "user_info",
+        tableLabel: "사용자 정보",
+        description: "사용자 정보를 관리하는 화면",
+        isActive: "Y",
+      };
+
+      // 개별 컴포넌트 생성
+      const components: ComponentData[] = [
+        {
+          id: "userName",
+          type: "widget",
+          widgetType: "text",
+          position: { x: 10, y: 10 },
+          size: { width: 200, height: 40 },
+          label: "사용자명",
+          columnName: "user_name",
+          required: true,
+          webTypeConfig: { maxLength: 50 },
+        } as WidgetComponent,
+      ];
+
+      // Step 2: 컴포넌트 타입 안전성 검증
+      components.forEach((component) => {
+        if (isWidgetComponent(component)) {
+          console.assert(isWebType(component.widgetType), `잘못된 위젯타입: ${component.widgetType}`);
+        }
+      });
+
+      // Step 3: 그룹 상태 시뮬레이션
+      const groupState: GroupState = {
+        isGrouping: true,
+        selectedComponents: ["userName", "saveButton"],
+        groupTarget: "userForm",
+        groupMode: "create",
+        groupTitle: "사용자 입력 폼",
+      };
+
+      // Step 4: 실제 저장 시뮬레이션
+      const formData = {
+        userName: "테스트 사용자",
+        userEmail: "test@example.com",
+        isActive: true,
+      };
+
+      console.log("✅ 복합 시나리오 모든 단계 성공");
+      console.log("- 화면 정의 생성: ✓");
+      console.log("- 컴포넌트 타입 검증: ✓");
+      console.log("- 그룹 상태 관리: ✓");
+      console.log("- 데이터 저장 시뮬레이션: ✓");
+    } catch (error) {
+      console.error("❌ 복합 시나리오 실패:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 🎯 모든 테스트 실행
+   */
+  static async runAllTests() {
+    console.log("🎯 타입 안전성 종합 테스트 시작\n");
+
+    try {
+      this.testWebTypeValidation();
+      this.testComponentTypeGuards();
+      this.testYNBooleanConversion();
+      await this.testFormSaveScenarios();
+      this.testButtonControlTypesSafety();
+      this.testTableColumnTypeCompatibility();
+      await this.testComplexScenario();
+
+      console.log("\n🎉 모든 타입 안전성 테스트 통과!");
+      console.log("✅ 화면관리, 제어관리, 테이블타입관리 시스템의 타입 안전성이 보장됩니다.");
+
+      return {
+        success: true,
+        passedTests: 7,
+        failedTests: 0,
+        message: "모든 타입 안전성 테스트 통과",
+      };
+    } catch (error) {
+      console.error("❌ 타입 안전성 테스트 실패:", error);
+      return {
+        success: false,
+        passedTests: 0,
+        failedTests: 1,
+        message: `테스트 실패: ${error}`,
+      };
+    }
+  }
+}
+
+// 🔥 스트레스 테스트 시나리오
+export class StressTestScenarios {
+  /**
+   * 🔥 극한 상황 테스트: 잘못된 타입들의 혼재
+   */
+  static testMixedInvalidTypes() {
+    console.log("🔥 극한 상황 테스트: 잘못된 타입들의 혼재");
+
+    // API로부터 받을 수 있는 다양한 잘못된 데이터들
+    const corruptedData = [
+      { webType: "text_area", expected: false }, // 기존 잘못된 타입
+      { webType: "VARCHAR(255)", expected: false }, // DB 타입 혼입
+      { webType: "submit", expected: false }, // ButtonActionType 혼입
+      { webType: "", expected: false }, // 빈 문자열
+      { webType: null, expected: false }, // null
+      { webType: undefined, expected: false }, // undefined
+      { webType: 123, expected: false }, // 숫자
+      { webType: {}, expected: false }, // 객체
+      { webType: "text", expected: true }, // 올바른 타입
+    ];
+
+    corruptedData.forEach(({ webType, expected }) => {
+      const result = isWebType(webType as any);
+      console.assert(
+        result === expected,
+        `타입 검증 실패: ${JSON.stringify(webType)} → expected: ${expected}, got: ${result}`,
+      );
+    });
+
+    console.log("✅ 극한 상황 타입 검증 테스트 통과");
+  }
+
+  /**
+   * 🔥 대량 데이터 처리 시나리오
+   */
+  static testBulkDataProcessing() {
+    console.log("🔥 대량 데이터 처리 시나리오");
+
+    // 1000개의 컴포넌트 생성 및 타입 검증
+    const components: ComponentData[] = [];
+    const webTypes: WebType[] = ["text", "number", "date", "select", "checkbox"];
+
+    for (let i = 0; i < 1000; i++) {
+      const randomWebType = webTypes[i % webTypes.length];
+      const component: WidgetComponent = {
+        id: `widget-${i}`,
+        type: "widget",
+        widgetType: randomWebType,
+        position: { x: i % 100, y: Math.floor(i / 100) * 50 },
+        size: { width: 200, height: 40 },
+        label: `Component ${i}`,
+        webTypeConfig: {},
+      };
+      components.push(component);
+    }
+
+    // 모든 컴포넌트 타입 검증
+    let validCount = 0;
+    components.forEach((component) => {
+      if (isWidgetComponent(component) && isWebType(component.widgetType)) {
+        validCount++;
+      }
+    });
+
+    console.assert(validCount === 1000, `대량 데이터 검증 실패: ${validCount}/1000`);
+    console.log(`✅ 대량 데이터 처리 성공: ${validCount}/1000 컴포넌트 검증 완료`);
+  }
+}
+
+// Export for use in tests
+export default TypeSafetyTestSuite;

frontend/types/control-management.ts

@@ -0,0 +1,514 @@
+/**
+ * 🎮 제어관리 시스템 전용 타입 정의
+ *
+ * 버튼 액션, 데이터플로우, 조건부 실행, 트랜잭션 처리 등 제어관리에서만 사용하는 타입들
+ */
+
+import {
+  ButtonActionType,
+  ConditionOperator,
+  CompanyCode,
+  ActiveStatus,
+  TimestampFields,
+  BaseApiResponse,
+} from "./unified-core";
+
+// ===== 버튼 제어 관련 =====
+
+/**
+ * 확장된 버튼 설정 (화면관리의 ButtonTypeConfig 확장)
+ */
+export interface ExtendedButtonTypeConfig {
+  // 기본 버튼 설정
+  actionType: ButtonActionType;
+  text?: string;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "sm" | "md" | "lg";
+  icon?: string;
+
+  // 확인 및 검증
+  confirmMessage?: string;
+  requiresConfirmation?: boolean;
+
+  // 모달 관련 설정
+  popupTitle?: string;
+  popupContent?: string;
+  popupScreenId?: number;
+
+  // 네비게이션 관련 설정
+  navigateType?: "url" | "screen";
+  navigateUrl?: string;
+  navigateScreenId?: number;
+  navigateTarget?: "_self" | "_blank";
+
+  // 커스텀 액션 설정
+  customAction?: string;
+
+  // 🎯 제어관리 기능
+  enableDataflowControl?: boolean;
+  dataflowConfig?: ButtonDataflowConfig;
+  dataflowTiming?: "before" | "after" | "replace";
+
+  // 스타일 설정
+  backgroundColor?: string;
+  textColor?: string;
+  borderColor?: string;
+}
+
+/**
+ * 버튼 데이터플로우 설정
+ */
+export interface ButtonDataflowConfig {
+  // 제어 방식 선택
+  controlMode: "simple" | "advanced";
+
+  // 관계도 방식 (diagram 기반)
+  selectedDiagramId?: number;
+  selectedRelationshipId?: number;
+
+  // 직접 설정 방식
+  directControl?: DirectControlConfig;
+
+  // 제어 데이터 소스
+  controlDataSource?: ControlDataSource;
+
+  // 실행 옵션
+  executionOptions?: ExecutionOptions;
+}
+
+/**
+ * 제어 데이터 소스 타입
+ */
+export type ControlDataSource = "form" | "table-selection" | "both";
+
+/**
+ * 직접 제어 설정
+ */
+export interface DirectControlConfig {
+  conditions: DataflowCondition[];
+  actions: DataflowAction[];
+  logic?: "AND" | "OR" | "CUSTOM";
+  customLogic?: string; // "(A AND B) OR (C AND D)"
+}
+
+/**
+ * 실행 옵션
+ */
+export interface ExecutionOptions {
+  timeout?: number; // ms
+  retryCount?: number;
+  parallelExecution?: boolean;
+  continueOnError?: boolean;
+}
+
+// ===== 데이터플로우 조건 및 액션 =====
+
+/**
+ * 데이터플로우 조건
+ */
+export interface DataflowCondition {
+  id: string;
+  type: "condition" | "group";
+
+  // 단일 조건
+  field?: string;
+  operator?: ConditionOperator;
+  value?: unknown;
+  dataSource?: ControlDataSource;
+
+  // 그룹 조건
+  conditions?: DataflowCondition[];
+  logic?: "AND" | "OR";
+
+  // 메타데이터
+  name?: string;
+  description?: string;
+}
+
+/**
+ * 데이터플로우 액션
+ */
+export interface DataflowAction {
+  id: string;
+  name: string;
+  type: ActionType;
+
+  // 데이터베이스 액션
+  tableName?: string;
+  operation?: DatabaseOperation;
+  fields?: ActionField[];
+  conditions?: DataflowCondition[];
+
+  // API 액션
+  endpoint?: string;
+  method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+  headers?: Record<string, string>;
+  body?: unknown;
+
+  // 알림 액션
+  notificationType?: NotificationType;
+  message?: string;
+  recipients?: string[];
+
+  // 리다이렉트 액션
+  redirectUrl?: string;
+  redirectTarget?: "_self" | "_blank";
+
+  // 실행 옵션
+  timeout?: number;
+  retryCount?: number;
+  rollbackable?: boolean;
+
+  // 메타데이터
+  description?: string;
+  order?: number;
+}
+
+/**
+ * 액션 타입
+ */
+export type ActionType = "database" | "api" | "notification" | "redirect" | "custom";
+
+/**
+ * 데이터베이스 작업 타입
+ */
+export type DatabaseOperation = "INSERT" | "UPDATE" | "DELETE" | "SELECT";
+
+/**
+ * 액션 필드
+ */
+export interface ActionField {
+  name: string;
+  value: unknown;
+  type?: "static" | "dynamic" | "computed";
+  source?: string; // 동적 값의 소스 (form field, selected row 등)
+}
+
+/**
+ * 알림 타입
+ */
+export type NotificationType = "success" | "error" | "warning" | "info" | "toast" | "modal" | "email";
+
+// ===== 트랜잭션 관리 =====
+
+/**
+ * 트랜잭션 그룹
+ */
+export interface TransactionGroup {
+  id: string;
+  name: string;
+  description?: string;
+  actions: DataflowAction[];
+  rollbackStrategy: RollbackStrategy;
+  executionMode: "sequential" | "parallel";
+  onFailure: FailureHandling;
+}
+
+/**
+ * 롤백 전략
+ */
+export type RollbackStrategy =
+  | "none" // 롤백 안함
+  | "partial" // 실패한 액션만 롤백
+  | "complete"; // 전체 트랜잭션 롤백
+
+/**
+ * 실패 처리 방식
+ */
+export type FailureHandling =
+  | "stop" // 실패 시 중단
+  | "continue" // 실패해도 계속 진행
+  | "alternative"; // 대안 액션 실행
+
+/**
+ * 조건부 실행 계획
+ */
+export interface ConditionalExecutionPlan {
+  id: string;
+  name: string;
+  conditions: ExecutionCondition[];
+  logic: "AND" | "OR" | "CUSTOM";
+  customLogic?: string;
+}
+
+/**
+ * 실행 조건
+ */
+export interface ExecutionCondition {
+  id: string;
+  type: "action_group" | "validation" | "data_check";
+
+  // 액션 그룹 조건
+  actionGroup?: TransactionGroup;
+
+  // 검증 조건
+  validation?: {
+    field: string;
+    operator: ConditionOperator;
+    value: unknown;
+  };
+
+  // 성공/실패 조건
+  expectedResult: "success" | "failure" | "any";
+}
+
+/**
+ * 조건부 액션 그룹
+ */
+export interface ConditionalActionGroup {
+  id: string;
+  name: string;
+  description?: string;
+
+  // 실행 조건
+  executionCondition: {
+    type: "always" | "conditional" | "fallback";
+    conditions?: DataflowCondition[];
+    logic?: "AND" | "OR";
+  };
+
+  // 액션들
+  actions: DataflowAction[];
+
+  // 성공/실패 조건 정의
+  successCriteria: {
+    type: "all_success" | "any_success" | "custom";
+    customLogic?: string;
+  };
+
+  // 다음 단계 정의
+  onSuccess?: {
+    nextGroup?: string;
+    completeTransaction?: boolean;
+  };
+
+  onFailure?: {
+    retryCount?: number;
+    fallbackGroup?: string;
+    rollbackStrategy?: RollbackStrategy;
+  };
+}
+
+// ===== 실행 결과 및 상태 =====
+
+/**
+ * 액션 실행 결과
+ */
+export interface ActionExecutionResult {
+  actionId: string;
+  transactionId?: string;
+  status: "pending" | "running" | "success" | "failed" | "rolled_back";
+  startTime: Date;
+  endTime?: Date;
+  result?: unknown;
+  error?: {
+    code: string;
+    message: string;
+    details?: unknown;
+  };
+  rollbackData?: unknown;
+}
+
+/**
+ * 트랜잭션 실행 상태
+ */
+export interface TransactionExecutionState {
+  transactionId: string;
+  status: "pending" | "running" | "success" | "failed" | "rolling_back" | "rolled_back";
+  actions: ActionExecutionResult[];
+  rollbackActions?: ActionExecutionResult[];
+  startTime: Date;
+  endTime?: Date;
+}
+
+/**
+ * 트랜잭션 실행 결과
+ */
+export interface TransactionExecutionResult {
+  success: boolean;
+  message: string;
+  requiresRollback: boolean;
+  results: [string, boolean][];
+  transactionId?: string;
+}
+
+/**
+ * 데이터플로우 실행 결과
+ */
+export interface DataflowExecutionResult {
+  success: boolean;
+  message: string;
+  data?: unknown;
+  executedActions?: ActionExecutionResult[];
+  failedActions?: ActionExecutionResult[];
+  totalActions?: number;
+  executionTime?: number;
+}
+
+// ===== 제어 컨텍스트 =====
+
+/**
+ * 확장된 제어 컨텍스트
+ */
+export interface ExtendedControlContext {
+  // 기존 폼 데이터
+  formData: Record<string, unknown>;
+
+  // 테이블 선택 데이터
+  selectedRows?: unknown[];
+  selectedRowsData?: Record<string, unknown>[];
+
+  // 제어 데이터 소스 타입
+  controlDataSource: ControlDataSource;
+
+  // 기타 컨텍스트
+  buttonId: string;
+  componentData?: unknown;
+  timestamp: string;
+  clickCount?: number;
+
+  // 사용자 정보
+  userId?: string;
+  companyCode?: CompanyCode;
+
+  // 화면 정보
+  screenId?: number;
+  screenCode?: string;
+}
+
+/**
+ * 빠른 검증 결과
+ */
+export interface QuickValidationResult {
+  success: boolean;
+  message?: string;
+  canExecuteImmediately: boolean;
+  actions?: DataflowAction[];
+}
+
+// ===== 버튼 액션 표준 (DB 기반) =====
+
+/**
+ * 버튼 액션 표준 정의 (DB의 button_action_standards 테이블)
+ */
+export interface ButtonActionStandard extends TimestampFields {
+  action_type: string;
+  action_name: string;
+  action_name_eng?: string;
+  description?: string;
+  category: string;
+  default_text?: string;
+  default_text_eng?: string;
+  default_icon?: string;
+  default_color?: string;
+  default_variant?: string;
+  confirmation_required: boolean;
+  confirmation_message?: string;
+  validation_rules?: unknown;
+  action_config?: unknown;
+  sort_order?: number;
+  is_active: ActiveStatus;
+}
+
+/**
+ * 버튼 액션 생성/수정 요청
+ */
+export interface ButtonActionFormData {
+  action_type: string;
+  action_name: string;
+  action_name_eng?: string;
+  description?: string;
+  category: string;
+  default_text?: string;
+  default_text_eng?: string;
+  default_icon?: string;
+  default_color?: string;
+  default_variant?: string;
+  confirmation_required: boolean;
+  confirmation_message?: string;
+  validation_rules?: unknown;
+  action_config?: unknown;
+  sort_order?: number;
+  is_active: ActiveStatus;
+}
+
+// ===== API 응답 타입들 =====
+
+/**
+ * 버튼 액션 목록 응답
+ */
+export interface ButtonActionListResponse extends BaseApiResponse<ButtonActionStandard[]> {}
+
+/**
+ * 데이터플로우 실행 응답
+ */
+export interface DataflowExecutionResponse extends BaseApiResponse<DataflowExecutionResult> {}
+
+/**
+ * 트랜잭션 실행 응답
+ */
+export interface TransactionExecutionResponse extends BaseApiResponse<TransactionExecutionResult> {}
+
+// ===== 유틸리티 타입들 =====
+
+/**
+ * 롤백 핸들러
+ */
+export interface RollbackHandler {
+  actionId: string;
+  rollbackFn: () => Promise<void>;
+}
+
+/**
+ * 최적화된 실행 결과
+ */
+export interface OptimizedExecutionResult {
+  jobId: string;
+  immediateResult?: unknown;
+  isBackground?: boolean;
+  timing?: "before" | "after" | "replace";
+}
+
+// ===== 타입 가드 및 유틸리티 함수들 =====
+
+/**
+ * DataflowCondition이 단일 조건인지 확인
+ */
+export const isSingleCondition = (condition: DataflowCondition): boolean => {
+  return condition.type === "condition" && !!condition.field;
+};
+
+/**
+ * DataflowCondition이 그룹 조건인지 확인
+ */
+export const isGroupCondition = (condition: DataflowCondition): boolean => {
+  return condition.type === "group" && !!condition.conditions?.length;
+};
+
+/**
+ * DataflowAction이 데이터베이스 액션인지 확인
+ */
+export const isDatabaseAction = (action: DataflowAction): boolean => {
+  return action.type === "database" && !!action.tableName;
+};
+
+/**
+ * DataflowAction이 API 액션인지 확인
+ */
+export const isApiAction = (action: DataflowAction): boolean => {
+  return action.type === "api" && !!action.endpoint;
+};
+
+/**
+ * 액션 실행 결과가 성공인지 확인
+ */
+export const isActionSuccess = (result: ActionExecutionResult): boolean => {
+  return result.status === "success";
+};
+
+/**
+ * 트랜잭션이 완료되었는지 확인 (성공 또는 실패)
+ */
+export const isTransactionCompleted = (state: TransactionExecutionState): boolean => {
+  return ["success", "failed", "rolled_back"].includes(state.status);
+};

frontend/types/ddl.ts

@@ -0,0 +1,343 @@
+/**
+ * DDL 실행 관련 타입 정의 (프론트엔드)
+ */
+
+// 기본 웹타입
+export type WebType =
+  | "text"
+  | "number"
+  | "decimal"
+  | "date"
+  | "datetime"
+  | "boolean"
+  | "code"
+  | "entity"
+  | "textarea"
+  | "select"
+  | "checkbox"
+  | "radio"
+  | "file"
+  | "email"
+  | "tel";
+
+// 컬럼 정의 인터페이스
+export interface CreateColumnDefinition {
+  /** 컬럼명 (영문자, 숫자, 언더스코어만 허용) */
+  name: string;
+  /** 컬럼 라벨 (화면 표시용) */
+  label?: string;
+  /** 입력타입 */
+  inputType: string;
+  /** 웹타입 (레거시 호환용) */
+  webType?: WebType;
+  /** NULL 허용 여부 */
+  nullable?: boolean;
+  /** 컬럼 길이 (text, code 타입에서 사용) */
+  length?: number;
+  /** 기본값 */
+  defaultValue?: string;
+  /** 컬럼 설명 */
+  description?: string;
+  /** 표시 순서 */
+  order?: number;
+  /** 상세 설정 (JSON 형태) */
+  detailSettings?: Record<string, any>;
+}
+
+// 테이블 생성 요청 인터페이스
+export interface CreateTableRequest {
+  /** 테이블명 */
+  tableName: string;
+  /** 테이블 설명 */
+  description?: string;
+  /** 컬럼 정의 목록 */
+  columns: CreateColumnDefinition[];
+}
+
+// 컬럼 추가 요청 인터페이스
+export interface AddColumnRequest {
+  /** 컬럼 정의 */
+  column: CreateColumnDefinition;
+}
+
+// DDL 실행 결과 인터페이스
+export interface DDLExecutionResult {
+  /** 실행 성공 여부 */
+  success: boolean;
+  /** 결과 메시지 */
+  message: string;
+  /** 결과 데이터 */
+  data?: any;
+  /** 오류 정보 */
+  error?: {
+    code: string;
+    details: string;
+  };
+}
+
+// 검증 결과 인터페이스
+export interface ValidationResult {
+  /** 검증 통과 여부 */
+  isValid: boolean;
+  /** 오류 메시지 목록 */
+  errors: string[];
+  /** 경고 메시지 목록 */
+  warnings?: string[];
+  /** 검증 요약 */
+  summary?: string;
+}
+
+// DDL 실행 로그 인터페이스
+export interface DDLExecutionLog {
+  /** 로그 ID */
+  id: number;
+  /** 사용자 ID */
+  user_id: string;
+  /** 회사 코드 */
+  company_code: string;
+  /** DDL 유형 */
+  ddl_type: "CREATE_TABLE" | "ADD_COLUMN" | "DROP_TABLE" | "DROP_COLUMN";
+  /** 테이블명 */
+  table_name: string;
+  /** 실행된 DDL 쿼리 (미리보기용) */
+  ddl_query_preview?: string;
+  /** 실행 성공 여부 */
+  success: boolean;
+  /** 오류 메시지 (실패 시) */
+  error_message?: string;
+  /** 실행 시간 */
+  executed_at: string;
+}
+
+// DDL 통계 인터페이스
+export interface DDLStatistics {
+  /** 전체 실행 횟수 */
+  totalExecutions: number;
+  /** 성공 횟수 */
+  successfulExecutions: number;
+  /** 실패 횟수 */
+  failedExecutions: number;
+  /** DDL 타입별 통계 */
+  byDDLType: Record<string, number>;
+  /** 사용자별 통계 */
+  byUser: Record<string, number>;
+  /** 최근 실패 로그 */
+  recentFailures: any[];
+}
+
+// 웹타입 옵션 (UI용)
+export interface WebTypeOption {
+  value: WebType;
+  label: string;
+  description?: string;
+  supportsLength: boolean;
+  defaultLength?: number;
+}
+
+// 웹타입 옵션 목록
+export const WEB_TYPE_OPTIONS: WebTypeOption[] = [
+  {
+    value: "text",
+    label: "텍스트",
+    description: "일반 텍스트 입력",
+    supportsLength: true,
+    defaultLength: 255,
+  },
+  {
+    value: "number",
+    label: "숫자",
+    description: "정수 입력",
+    supportsLength: false,
+  },
+  {
+    value: "decimal",
+    label: "소수",
+    description: "소수점 숫자 입력",
+    supportsLength: false,
+  },
+  {
+    value: "date",
+    label: "날짜",
+    description: "날짜 선택",
+    supportsLength: false,
+  },
+  {
+    value: "datetime",
+    label: "날짜시간",
+    description: "날짜와 시간 선택",
+    supportsLength: false,
+  },
+  {
+    value: "boolean",
+    label: "불린",
+    description: "참/거짓 값",
+    supportsLength: false,
+  },
+  {
+    value: "code",
+    label: "코드",
+    description: "공통코드 선택",
+    supportsLength: true,
+    defaultLength: 100,
+  },
+  {
+    value: "entity",
+    label: "엔티티",
+    description: "다른 테이블 참조",
+    supportsLength: false,
+  },
+  {
+    value: "textarea",
+    label: "긴 텍스트",
+    description: "여러 줄 텍스트 입력",
+    supportsLength: false,
+  },
+  {
+    value: "select",
+    label: "선택박스",
+    description: "드롭다운 선택",
+    supportsLength: true,
+    defaultLength: 100,
+  },
+  {
+    value: "checkbox",
+    label: "체크박스",
+    description: "체크박스 입력",
+    supportsLength: false,
+  },
+  {
+    value: "radio",
+    label: "라디오버튼",
+    description: "단일 선택 라디오버튼",
+    supportsLength: true,
+    defaultLength: 100,
+  },
+  {
+    value: "file",
+    label: "파일",
+    description: "파일 업로드",
+    supportsLength: false,
+  },
+  {
+    value: "email",
+    label: "이메일",
+    description: "이메일 주소 입력",
+    supportsLength: true,
+    defaultLength: 255,
+  },
+  {
+    value: "tel",
+    label: "전화번호",
+    description: "전화번호 입력",
+    supportsLength: true,
+    defaultLength: 50,
+  },
+];
+
+// 컬럼 정의 테이블 속성
+export interface ColumnDefinitionTableProps {
+  columns: CreateColumnDefinition[];
+  onChange: (columns: CreateColumnDefinition[]) => void;
+  disabled?: boolean;
+}
+
+// 테이블 생성 모달 속성
+export interface CreateTableModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (result: DDLExecutionResult) => void;
+}
+
+// 컬럼 추가 모달 속성
+export interface AddColumnModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  tableName: string;
+  onSuccess: (result: DDLExecutionResult) => void;
+}
+
+// DDL 로그 뷰어 속성
+export interface DDLLogViewerProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+// 유효성 검사 규칙
+export const VALIDATION_RULES = {
+  tableName: {
+    pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/,
+    minLength: 2,
+    maxLength: 63,
+    errorMessage: "테이블명은 영문자로 시작하고, 영문자/숫자/언더스코어만 사용 가능합니다 (2-63자)",
+  },
+  columnName: {
+    pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/,
+    minLength: 2,
+    maxLength: 63,
+    errorMessage: "컬럼명은 영문자로 시작하고, 영문자/숫자/언더스코어만 사용 가능합니다 (2-63자)",
+  },
+  columnLength: {
+    min: 1,
+    max: 65535,
+    errorMessage: "컬럼 길이는 1 이상 65535 이하여야 합니다",
+  },
+} as const;
+
+// 시스템 테이블 목록 (보호 대상)
+export const SYSTEM_TABLES = [
+  "user_info",
+  "company_mng",
+  "menu_info",
+  "auth_group",
+  "table_labels",
+  "column_labels",
+  "screen_definitions",
+  "screen_layouts",
+  "common_code",
+  "multi_lang_key_master",
+  "multi_lang_text",
+  "button_action_standards",
+  "ddl_execution_log",
+] as const;
+
+// 예약어 목록
+export const RESERVED_WORDS = [
+  "user",
+  "order",
+  "group",
+  "table",
+  "column",
+  "index",
+  "select",
+  "insert",
+  "update",
+  "delete",
+  "from",
+  "where",
+  "join",
+  "on",
+  "as",
+  "and",
+  "or",
+  "not",
+  "null",
+  "true",
+  "false",
+  "create",
+  "alter",
+  "drop",
+  "primary",
+  "key",
+  "foreign",
+  "references",
+  "constraint",
+  "default",
+  "unique",
+  "check",
+  "view",
+  "procedure",
+  "function",
+] as const;
+
+// 예약된 컬럼명 목록 (자동 추가되는 기본 컬럼들)
+export const RESERVED_COLUMNS = ["id", "created_date", "updated_date", "company_code"] as const;

frontend/types/index.ts

@@ -0,0 +1,343 @@
+/**
+ * 🎯 통합 타입 시스템 Index
+ *
+ * 모든 타입 정의를 중앙에서 관리하고 re-export합니다.
+ * 이 파일을 통해 모든 타입에 일관성 있게 접근할 수 있습니다.
+ */
+
+// ===== 핵심 공통 타입들 =====
+export * from "./unified-core";
+
+// ===== 시스템별 전용 타입들 =====
+export * from "./screen-management";
+export * from "./control-management";
+export * from "./table-management";
+
+// ===== 기존 호환성을 위한 re-export =====
+
+// unified-core에서 제공하는 주요 타입들을 직접 export
+export type {
+  // 핵심 타입들
+  WebType,
+  DynamicWebType,
+  ButtonActionType,
+  ComponentType,
+  Position,
+  Size,
+  CommonStyle,
+  ValidationRule,
+  ConditionOperator,
+
+  // API 관련
+  BaseApiResponse,
+  PaginatedResponse,
+
+  // 공통 필드들
+  CompanyCode,
+  ActiveStatus,
+  TimestampFields,
+  AuditFields,
+
+  // 이벤트 타입들
+  WebTypeEvent,
+  ComponentEvent,
+} from "./unified-core";
+
+// screen-management에서 제공하는 주요 타입들
+export type {
+  // 컴포넌트 타입들
+  ComponentData,
+  BaseComponent,
+  WidgetComponent,
+  ContainerComponent,
+  GroupComponent,
+  DataTableComponent,
+  FileComponent,
+
+  // 웹타입 설정들
+  WebTypeConfig,
+  DateTypeConfig,
+  NumberTypeConfig,
+  SelectTypeConfig,
+  TextTypeConfig,
+  FileTypeConfig,
+  EntityTypeConfig,
+  ButtonTypeConfig,
+
+  // 화면 관련
+  ScreenDefinition,
+  CreateScreenRequest,
+  UpdateScreenRequest,
+  LayoutData,
+  GridSettings,
+  ScreenTemplate,
+  ScreenResolution,
+  GroupState,
+
+  // 화면 해상도 상수
+  SCREEN_RESOLUTIONS,
+
+  // 데이터 테이블
+  DataTableColumn,
+  DataTableFilter,
+
+  // 파일 업로드
+  UploadedFile,
+} from "./screen-management";
+
+// control-management에서 제공하는 주요 타입들
+export type {
+  // 버튼 제어
+  ExtendedButtonTypeConfig,
+  ButtonDataflowConfig,
+  ControlDataSource,
+
+  // 데이터플로우
+  DataflowCondition,
+  DataflowAction,
+  ActionType,
+  DatabaseOperation,
+  NotificationType,
+
+  // 트랜잭션 관리
+  TransactionGroup,
+  RollbackStrategy,
+  FailureHandling,
+  ConditionalExecutionPlan,
+  ExecutionCondition,
+
+  // 실행 결과
+  ActionExecutionResult,
+  TransactionExecutionState,
+  DataflowExecutionResult,
+
+  // 컨텍스트
+  ExtendedControlContext,
+  QuickValidationResult,
+
+  // 버튼 액션 표준
+  ButtonActionStandard,
+  ButtonActionFormData,
+} from "./control-management";
+
+// table-management에서 제공하는 주요 타입들
+export type {
+  // 테이블 정보
+  TableInfo,
+  UnifiedColumnInfo,
+  ColumnTypeInfo,
+  ColumnSettings,
+
+  // 웹타입 표준
+  WebTypeStandard,
+  WebTypeDefinition,
+
+  // 라벨 관리
+  TableLabels,
+  ColumnLabels,
+
+  // 엔티티 조인
+  EntityJoinConfig,
+  EntityJoinResponse,
+  BatchLookupRequest,
+  BatchLookupResponse,
+
+  // 테이블 관계
+  TableRelationship,
+  DataRelationshipBridge,
+
+  // 컬럼 웹타입 설정
+  ColumnWebTypeSetting,
+
+  // API 응답들
+  TableListResponse,
+  ColumnListResponse,
+  ColumnTypeInfoResponse,
+  WebTypeStandardListResponse,
+  TableDataResponse,
+} from "./table-management";
+
+// ===== 타입 가드 함수들 통합 export =====
+
+// unified-core 타입 가드들
+export { isWebType, isButtonActionType, isComponentType, ynToBoolean, booleanToYN } from "./unified-core";
+
+// screen-management 타입 가드들
+export {
+  isWidgetComponent,
+  isContainerComponent,
+  isGroupComponent,
+  isDataTableComponent,
+  isFileComponent,
+  asWidgetComponent,
+  asContainerComponent,
+  asGroupComponent,
+  asDataTableComponent,
+  asFileComponent,
+} from "./screen-management";
+
+// control-management 타입 가드들
+export {
+  isSingleCondition,
+  isGroupCondition,
+  isDatabaseAction,
+  isApiAction,
+  isActionSuccess,
+  isTransactionCompleted,
+} from "./control-management";
+
+// table-management 타입 가드들
+export {
+  isReferenceWebType,
+  isNumericWebType,
+  isDateWebType,
+  isSelectWebType,
+  isRequiredColumn,
+  isSystemColumn,
+  mapWebTypeStandardToDefinition,
+  mapColumnTypeInfoToUnified,
+  mapUnifiedToColumnTypeInfo,
+} from "./table-management";
+
+// ===== 상수들 통합 export =====
+
+// table-management 상수들
+export { WEB_TYPE_OPTIONS } from "./table-management";
+
+// ===== 타입 별칭 (기존 호환성) =====
+
+/**
+ * @deprecated screen.ts에서 이전하세요. unified-core.ts의 WebType을 사용하세요.
+ */
+export type LegacyWebType = WebType;
+
+/**
+ * @deprecated screen.ts에서 이전하세요. unified-core.ts의 ButtonActionType을 사용하세요.
+ */
+export type LegacyButtonActionType = ButtonActionType;
+
+/**
+ * @deprecated screen.ts에서 이전하세요. screen-management.ts의 ComponentData를 사용하세요.
+ */
+export type LegacyComponentData = ComponentData;
+
+// ===== 유틸리티 타입들 =====
+
+/**
+ * 컴포넌트 업데이트를 위한 부분 타입
+ */
+export type ComponentUpdate<T extends ComponentData> = Partial<Omit<T, "id" | "type">> & {
+  id: string;
+  type: T["type"];
+};
+
+/**
+ * API 요청을 위한 기본 파라미터
+ */
+export interface BaseRequestParams {
+  companyCode?: CompanyCode;
+  page?: number;
+  size?: number;
+  sortBy?: string;
+  sortDirection?: "asc" | "desc";
+  searchTerm?: string;
+}
+
+/**
+ * 폼 데이터 타입 (모든 시스템에서 공통 사용)
+ */
+export type FormData = Record<string, unknown>;
+
+/**
+ * 선택된 행 데이터 타입
+ */
+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/input-types.ts

@@ -0,0 +1,235 @@
+/**
+ * 입력 타입 정의 (테이블 타입 관리 개선)
+ * 기존 웹 타입을 8개 핵심 입력 타입으로 단순화
+ *
+ * 주의: 이 파일을 수정할 때는 반드시 백엔드 타입도 함께 업데이트 해야 합니다.
+ */
+
+// 8개 핵심 입력 타입
+export type InputType =
+  | "text" // 텍스트
+  | "number" // 숫자
+  | "date" // 날짜
+  | "code" // 코드
+  | "entity" // 엔티티
+  | "select" // 선택박스
+  | "checkbox" // 체크박스
+  | "radio"; // 라디오버튼
+
+// 입력 타입 옵션 정의
+export interface InputTypeOption {
+  value: InputType;
+  label: string;
+  description: string;
+  category: InputTypeCategory;
+  icon?: string;
+}
+
+// 입력 타입 카테고리
+export type InputTypeCategory =
+  | "basic" // 기본 입력 (text, number, date)
+  | "reference" // 참조 입력 (code, entity)
+  | "selection"; // 선택 입력 (select, checkbox, radio)
+
+// 입력 타입 옵션 목록
+export const INPUT_TYPE_OPTIONS: InputTypeOption[] = [
+  {
+    value: "text",
+    label: "텍스트",
+    description: "일반 텍스트 입력",
+    category: "basic",
+    icon: "Type",
+  },
+  {
+    value: "number",
+    label: "숫자",
+    description: "숫자 입력 (정수/소수)",
+    category: "basic",
+    icon: "Hash",
+  },
+  {
+    value: "date",
+    label: "날짜",
+    description: "날짜 선택",
+    category: "basic",
+    icon: "Calendar",
+  },
+  {
+    value: "code",
+    label: "코드",
+    description: "공통코드 참조",
+    category: "reference",
+    icon: "Code",
+  },
+  {
+    value: "entity",
+    label: "엔티티",
+    description: "다른 테이블 참조",
+    category: "reference",
+    icon: "Database",
+  },
+  {
+    value: "select",
+    label: "선택박스",
+    description: "드롭다운 선택",
+    category: "selection",
+    icon: "ChevronDown",
+  },
+  {
+    value: "checkbox",
+    label: "체크박스",
+    description: "체크박스 입력",
+    category: "selection",
+    icon: "CheckSquare",
+  },
+  {
+    value: "radio",
+    label: "라디오버튼",
+    description: "단일 선택",
+    category: "selection",
+    icon: "Circle",
+  },
+];
+
+// 카테고리별 입력 타입 그룹화
+export const INPUT_TYPE_GROUPS = {
+  basic: INPUT_TYPE_OPTIONS.filter((option) => option.category === "basic"),
+  reference: INPUT_TYPE_OPTIONS.filter((option) => option.category === "reference"),
+  selection: INPUT_TYPE_OPTIONS.filter((option) => option.category === "selection"),
+};
+
+// 입력 타입 검증 함수
+export const isValidInputType = (inputType: string): inputType is InputType => {
+  return INPUT_TYPE_OPTIONS.some((option) => option.value === inputType);
+};
+
+// 입력 타입 정보 조회
+export const getInputTypeInfo = (inputType: InputType): InputTypeOption | undefined => {
+  return INPUT_TYPE_OPTIONS.find((option) => option.value === inputType);
+};
+
+// 입력 타입별 기본 설정
+export const INPUT_TYPE_DEFAULT_CONFIGS: Record<InputType, Record<string, any>> = {
+  text: {
+    maxLength: 500,
+    placeholder: "텍스트를 입력하세요",
+  },
+  number: {
+    min: 0,
+    step: 1,
+    placeholder: "숫자를 입력하세요",
+  },
+  date: {
+    format: "YYYY-MM-DD",
+    placeholder: "날짜를 선택하세요",
+  },
+  code: {
+    placeholder: "코드를 선택하세요",
+    searchable: true,
+  },
+  entity: {
+    placeholder: "항목을 선택하세요",
+    searchable: true,
+  },
+  select: {
+    placeholder: "선택하세요",
+    searchable: false,
+  },
+  checkbox: {
+    defaultChecked: false,
+    trueValue: "Y",
+    falseValue: "N",
+  },
+  radio: {
+    inline: false,
+  },
+};
+
+// 레거시 웹 타입 → 입력 타입 매핑
+export const WEB_TYPE_TO_INPUT_TYPE: Record<string, InputType> = {
+  // 텍스트 관련
+  text: "text",
+  textarea: "text",
+  email: "text",
+  tel: "text",
+  url: "text",
+  password: "text",
+
+  // 숫자 관련
+  number: "number",
+  decimal: "number",
+
+  // 날짜 관련
+  date: "date",
+  datetime: "date",
+  time: "date",
+
+  // 선택 관련
+  select: "select",
+  dropdown: "select",
+  checkbox: "checkbox",
+  boolean: "checkbox",
+  radio: "radio",
+
+  // 참조 관련
+  code: "code",
+  entity: "entity",
+
+  // 기타 (기본값: text)
+  file: "text",
+  button: "text",
+};
+
+// 입력 타입 → 웹 타입 역매핑 (화면관리 시스템 호환용)
+export const INPUT_TYPE_TO_WEB_TYPE: Record<InputType, string> = {
+  text: "text",
+  number: "number",
+  date: "date",
+  code: "code",
+  entity: "entity",
+  select: "select",
+  checkbox: "checkbox",
+  radio: "radio",
+};
+
+// 입력 타입 변환 함수
+export const convertWebTypeToInputType = (webType: string): InputType => {
+  return WEB_TYPE_TO_INPUT_TYPE[webType] || "text";
+};
+
+// 입력 타입별 검증 규칙
+export const INPUT_TYPE_VALIDATION_RULES: Record<InputType, Record<string, any>> = {
+  text: {
+    type: "string",
+    trim: true,
+    maxLength: 500,
+  },
+  number: {
+    type: "number",
+    allowFloat: true,
+  },
+  date: {
+    type: "date",
+    format: "YYYY-MM-DD",
+  },
+  code: {
+    type: "string",
+    required: false,
+  },
+  entity: {
+    type: "string",
+    required: false,
+  },
+  select: {
+    type: "string",
+    options: true,
+  },
+  checkbox: {
+    type: "boolean",
+    values: ["Y", "N"],
+  },
+  radio: {
+    type: "string",
+    options: true,
+  },
+};

frontend/types/screen-management.ts

@@ -0,0 +1,583 @@
+/**
+ * 🖥️ 화면관리 시스템 전용 타입 정의
+ *
+ * 화면 설계, 컴포넌트 관리, 레이아웃 등 화면관리 시스템에서만 사용하는 타입들
+ */
+
+import {
+  ComponentType,
+  WebType,
+  DynamicWebType,
+  Position,
+  Size,
+  CommonStyle,
+  ValidationRule,
+  TimestampFields,
+  CompanyCode,
+  ActiveStatus,
+  isWebType,
+} from "./unified-core";
+
+// ===== 기본 컴포넌트 인터페이스 =====
+
+/**
+ * 모든 컴포넌트의 기본 인터페이스
+ */
+export interface BaseComponent {
+  id: string;
+  type: ComponentType;
+  position: Position;
+  size: Size;
+  parentId?: string;
+  label?: string;
+  required?: boolean;
+  readonly?: boolean;
+  style?: ComponentStyle;
+  className?: string;
+}
+
+/**
+ * 화면관리용 확장 스타일 (CommonStyle 기반)
+ */
+export interface ComponentStyle extends CommonStyle {
+  // 화면관리 전용 스타일 확장 가능
+}
+
+/**
+ * 위젯 컴포넌트 (입력 요소)
+ */
+export interface WidgetComponent extends BaseComponent {
+  type: "widget";
+  widgetType: DynamicWebType;
+  placeholder?: string;
+  columnName?: string;
+  webTypeConfig?: WebTypeConfig;
+  validationRules?: ValidationRule[];
+
+  // 웹타입별 추가 설정
+  dateConfig?: DateTypeConfig;
+  numberConfig?: NumberTypeConfig;
+  selectConfig?: SelectTypeConfig;
+  textConfig?: TextTypeConfig;
+  fileConfig?: FileTypeConfig;
+  entityConfig?: EntityTypeConfig;
+  buttonConfig?: ButtonTypeConfig;
+}
+
+/**
+ * 컨테이너 컴포넌트 (레이아웃)
+ */
+export interface ContainerComponent extends BaseComponent {
+  type: "container" | "row" | "column" | "area";
+  children?: string[]; // 자식 컴포넌트 ID 배열
+  layoutDirection?: "horizontal" | "vertical";
+  justifyContent?: "start" | "center" | "end" | "space-between" | "space-around";
+  alignItems?: "start" | "center" | "end" | "stretch";
+  gap?: number;
+}
+
+/**
+ * 그룹 컴포넌트 (논리적 그룹핑)
+ */
+export interface GroupComponent extends BaseComponent {
+  type: "group";
+  groupName: string;
+  children: string[]; // 그룹에 속한 컴포넌트 ID 배열
+  isCollapsible?: boolean;
+  isCollapsed?: boolean;
+}
+
+/**
+ * 데이터 테이블 컴포넌트
+ */
+export interface DataTableComponent extends BaseComponent {
+  type: "datatable";
+  tableName?: string;
+  columns: DataTableColumn[];
+  pagination?: boolean;
+  pageSize?: number;
+  searchable?: boolean;
+  sortable?: boolean;
+  filters?: DataTableFilter[];
+}
+
+/**
+ * 파일 업로드 컴포넌트
+ */
+export interface FileComponent extends BaseComponent {
+  type: "file";
+  fileConfig: FileTypeConfig;
+  uploadedFiles?: UploadedFile[];
+}
+
+/**
+ * 통합 컴포넌트 데이터 타입
+ */
+export type ComponentData = WidgetComponent | ContainerComponent | GroupComponent | DataTableComponent | FileComponent;
+
+// ===== 웹타입별 설정 인터페이스 =====
+
+/**
+ * 기본 웹타입 설정
+ */
+export interface WebTypeConfig {
+  [key: string]: unknown;
+}
+
+/**
+ * 날짜/시간 타입 설정
+ */
+export interface DateTypeConfig {
+  format: "YYYY-MM-DD" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH:mm:ss";
+  showTime: boolean;
+  minDate?: string;
+  maxDate?: string;
+  defaultValue?: string;
+  placeholder?: string;
+}
+
+/**
+ * 숫자 타입 설정
+ */
+export interface NumberTypeConfig {
+  min?: number;
+  max?: number;
+  step?: number;
+  format?: "integer" | "decimal" | "currency" | "percentage";
+  decimalPlaces?: number;
+  thousandSeparator?: boolean;
+  placeholder?: string;
+}
+
+/**
+ * 선택박스 타입 설정
+ */
+export interface SelectTypeConfig {
+  options: Array<{ label: string; value: string }>;
+  multiple?: boolean;
+  searchable?: boolean;
+  placeholder?: string;
+  allowCustomValue?: boolean;
+}
+
+/**
+ * 텍스트 타입 설정
+ */
+export interface TextTypeConfig {
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  format?: "none" | "email" | "phone" | "url" | "korean" | "english";
+  placeholder?: string;
+  multiline?: boolean;
+  rows?: number;
+}
+
+/**
+ * 파일 타입 설정
+ */
+export interface FileTypeConfig {
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number; // bytes
+  maxFiles?: number;
+  preview?: boolean;
+  docType?: string;
+  companyCode?: CompanyCode;
+}
+
+/**
+ * 엔티티 타입 설정
+ */
+export interface EntityTypeConfig {
+  referenceTable: string;
+  referenceColumn: string;
+  displayColumn: string;
+  searchColumns?: string[];
+  filters?: Record<string, unknown>;
+  placeholder?: string;
+}
+
+/**
+ * 버튼 타입 설정
+ */
+export interface ButtonTypeConfig {
+  text?: string;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "sm" | "md" | "lg";
+  icon?: string;
+  // ButtonActionType과 관련된 설정은 control-management.ts에서 정의
+}
+
+// ===== 데이터 테이블 관련 =====
+
+/**
+ * 데이터 테이블 컬럼
+ */
+export interface DataTableColumn {
+  id: string;
+  columnName: string;
+  label: string;
+  dataType?: string;
+  widgetType?: DynamicWebType;
+  width?: number;
+  sortable?: boolean;
+  searchable?: boolean;
+  visible: boolean;
+  frozen?: boolean;
+  align?: "left" | "center" | "right";
+}
+
+/**
+ * 데이터 테이블 필터
+ */
+export interface DataTableFilter {
+  id: string;
+  columnName: string;
+  operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE" | "IN";
+  value: unknown;
+  logicalOperator?: "AND" | "OR";
+}
+
+// ===== 파일 업로드 관련 =====
+
+/**
+ * 업로드된 파일 정보
+ */
+export interface UploadedFile {
+  objid: string;
+  realFileName: string;
+  savedFileName: string;
+  fileSize: number;
+  fileExt: string;
+  filePath: string;
+  docType?: string;
+  docTypeName?: string;
+  writer?: string;
+  regdate?: string;
+  status?: "uploading" | "completed" | "error";
+  companyCode?: CompanyCode;
+}
+
+// ===== 화면 정의 관련 =====
+
+/**
+ * 화면 정의
+ */
+export interface ScreenDefinition {
+  screenId: number;
+  screenName: string;
+  screenCode: string;
+  tableName: string;
+  tableLabel?: string;
+  companyCode: CompanyCode;
+  description?: string;
+  isActive: ActiveStatus;
+  createdDate: Date;
+  updatedDate: Date;
+  createdBy?: string;
+  updatedBy?: string;
+}
+
+/**
+ * 화면 생성 요청
+ */
+export interface CreateScreenRequest {
+  screenName: string;
+  screenCode?: string;
+  tableName: string;
+  tableLabel?: string;
+  companyCode: CompanyCode;
+  description?: string;
+}
+
+/**
+ * 화면 수정 요청
+ */
+export interface UpdateScreenRequest {
+  screenName?: string;
+  screenCode?: string;
+  tableName?: string;
+  tableLabel?: string;
+  description?: string;
+  isActive?: ActiveStatus;
+}
+
+/**
+ * 화면 해상도 설정
+ */
+export interface ScreenResolution {
+  width: number;
+  height: number;
+  name: string;
+  category: "desktop" | "tablet" | "mobile" | "custom";
+}
+
+/**
+ * 미리 정의된 해상도 프리셋
+ */
+export const SCREEN_RESOLUTIONS: ScreenResolution[] = [
+  // Desktop
+  { width: 1920, height: 1080, name: "Full HD (1920×1080)", category: "desktop" },
+  { width: 1366, height: 768, name: "HD (1366×768)", category: "desktop" },
+  { width: 1440, height: 900, name: "WXGA+ (1440×900)", category: "desktop" },
+  { width: 1280, height: 1024, name: "SXGA (1280×1024)", category: "desktop" },
+
+  // Tablet
+  { width: 1024, height: 768, name: "iPad Landscape (1024×768)", category: "tablet" },
+  { width: 768, height: 1024, name: "iPad Portrait (768×1024)", category: "tablet" },
+  { width: 1112, height: 834, name: 'iPad Pro 10.5" Landscape', category: "tablet" },
+  { width: 834, height: 1112, name: 'iPad Pro 10.5" Portrait', category: "tablet" },
+
+  // Mobile
+  { width: 375, height: 667, name: "iPhone 8 (375×667)", category: "mobile" },
+  { width: 414, height: 896, name: "iPhone 11 (414×896)", category: "mobile" },
+  { width: 390, height: 844, name: "iPhone 12/13 (390×844)", category: "mobile" },
+  { width: 360, height: 640, name: "Android Medium (360×640)", category: "mobile" },
+];
+
+/**
+ * 그룹화 상태
+ */
+export interface GroupState {
+  isGrouping: boolean;
+  selectedComponents: string[];
+  groupTarget?: string | null;
+  groupMode?: "create" | "add" | "remove" | "ungroup";
+  groupTitle?: string;
+}
+
+/**
+ * 레이아웃 데이터
+ */
+export interface LayoutData {
+  screenId: number;
+  components: ComponentData[];
+  gridSettings?: GridSettings;
+  metadata?: LayoutMetadata;
+  screenResolution?: ScreenResolution;
+}
+
+/**
+ * 격자 설정
+ */
+export interface GridSettings {
+  enabled: boolean;
+  size: number;
+  color: string;
+  opacity: number;
+  snapToGrid: boolean;
+}
+
+/**
+ * 레이아웃 메타데이터
+ */
+export interface LayoutMetadata {
+  version: string;
+  lastModified: Date;
+  modifiedBy: string;
+  description?: string;
+  tags?: string[];
+}
+
+// ===== 템플릿 관련 =====
+
+/**
+ * 화면 템플릿
+ */
+export interface ScreenTemplate {
+  id: string;
+  name: string;
+  description?: string;
+  category: string;
+  components: ComponentData[];
+  previewImage?: string;
+  isActive: boolean;
+}
+
+/**
+ * 템플릿 컴포넌트 (템플릿 패널에서 사용)
+ */
+export interface TemplateComponent {
+  id: string;
+  name: string;
+  description?: string;
+  icon?: string;
+  category: string;
+  defaultProps: Partial<ComponentData>;
+  children?: Array<{
+    id: string;
+    name: string;
+    defaultProps: Partial<ComponentData>;
+  }>;
+}
+
+// ===== 타입 가드 함수들 =====
+
+/**
+ * WidgetComponent 타입 가드 (강화된 검증)
+ */
+export const isWidgetComponent = (component: ComponentData): component is WidgetComponent => {
+  if (!component || typeof component !== "object") {
+    return false;
+  }
+
+  // 기본 타입 체크
+  if (component.type !== "widget") {
+    return false;
+  }
+
+  // 필수 필드 존재 여부 체크
+  if (!component.id || typeof component.id !== "string") {
+    return false;
+  }
+
+  // widgetType이 유효한 WebType인지 체크
+  if (!component.widgetType || !isWebType(component.widgetType)) {
+    return false;
+  }
+
+  // position 검증
+  if (
+    !component.position ||
+    typeof component.position.x !== "number" ||
+    typeof component.position.y !== "number" ||
+    !Number.isFinite(component.position.x) ||
+    !Number.isFinite(component.position.y)
+  ) {
+    return false;
+  }
+
+  // size 검증
+  if (
+    !component.size ||
+    typeof component.size.width !== "number" ||
+    typeof component.size.height !== "number" ||
+    !Number.isFinite(component.size.width) ||
+    !Number.isFinite(component.size.height) ||
+    component.size.width <= 0 ||
+    component.size.height <= 0
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * ContainerComponent 타입 가드 (강화된 검증)
+ */
+export const isContainerComponent = (component: ComponentData): component is ContainerComponent => {
+  if (!component || typeof component !== "object") {
+    return false;
+  }
+
+  // 기본 타입 체크
+  if (!["container", "row", "column", "area"].includes(component.type)) {
+    return false;
+  }
+
+  // 필수 필드 존재 여부 체크
+  if (!component.id || typeof component.id !== "string") {
+    return false;
+  }
+
+  // position 검증
+  if (
+    !component.position ||
+    typeof component.position.x !== "number" ||
+    typeof component.position.y !== "number" ||
+    !Number.isFinite(component.position.x) ||
+    !Number.isFinite(component.position.y)
+  ) {
+    return false;
+  }
+
+  // size 검증
+  if (
+    !component.size ||
+    typeof component.size.width !== "number" ||
+    typeof component.size.height !== "number" ||
+    !Number.isFinite(component.size.width) ||
+    !Number.isFinite(component.size.height) ||
+    component.size.width <= 0 ||
+    component.size.height <= 0
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * GroupComponent 타입 가드
+ */
+export const isGroupComponent = (component: ComponentData): component is GroupComponent => {
+  return component.type === "group";
+};
+
+/**
+ * DataTableComponent 타입 가드
+ */
+export const isDataTableComponent = (component: ComponentData): component is DataTableComponent => {
+  return component.type === "datatable";
+};
+
+/**
+ * FileComponent 타입 가드
+ */
+export const isFileComponent = (component: ComponentData): component is FileComponent => {
+  return component.type === "file";
+};
+
+// ===== 안전한 타입 캐스팅 유틸리티 =====
+
+/**
+ * ComponentData를 WidgetComponent로 안전하게 캐스팅
+ */
+export const asWidgetComponent = (component: ComponentData): WidgetComponent => {
+  if (!isWidgetComponent(component)) {
+    throw new Error(`Expected WidgetComponent, got ${component.type}`);
+  }
+  return component;
+};
+
+/**
+ * ComponentData를 ContainerComponent로 안전하게 캐스팅
+ */
+export const asContainerComponent = (component: ComponentData): ContainerComponent => {
+  if (!isContainerComponent(component)) {
+    throw new Error(`Expected ContainerComponent, got ${component.type}`);
+  }
+  return component;
+};
+
+/**
+ * ComponentData를 GroupComponent로 안전하게 캐스팅
+ */
+export const asGroupComponent = (component: ComponentData): GroupComponent => {
+  if (!isGroupComponent(component)) {
+    throw new Error(`Expected GroupComponent, got ${component.type}`);
+  }
+  return component;
+};
+
+/**
+ * ComponentData를 DataTableComponent로 안전하게 캐스팅
+ */
+export const asDataTableComponent = (component: ComponentData): DataTableComponent => {
+  if (!isDataTableComponent(component)) {
+    throw new Error(`Expected DataTableComponent, got ${component.type}`);
+  }
+  return component;
+};
+
+/**
+ * ComponentData를 FileComponent로 안전하게 캐스팅
+ */
+export const asFileComponent = (component: ComponentData): FileComponent => {
+  if (!isFileComponent(component)) {
+    throw new Error(`Expected FileComponent, got ${component.type}`);
+  }
+  return component;
+};

frontend/types/table-management.ts

@@ -0,0 +1,505 @@
+/**
+ * 🗄️ 테이블 타입관리 시스템 전용 타입 정의
+ *
+ * 데이터베이스 테이블 스키마, 컬럼 타입, 웹타입 매핑 등 테이블 관리에서만 사용하는 타입들
+ */
+
+import {
+  DynamicWebType,
+  CompanyCode,
+  ActiveStatus,
+  TimestampFields,
+  BaseApiResponse,
+  PaginatedResponse,
+  ConditionOperator,
+} from "./unified-core";
+
+// ===== 기본 테이블 정보 =====
+
+/**
+ * 테이블 정보
+ */
+export interface TableInfo {
+  tableName: string;
+  displayName: string;
+  description: string;
+  columnCount: number;
+  companyCode?: CompanyCode;
+  isActive?: ActiveStatus;
+  createdDate?: Date;
+  updatedDate?: Date;
+}
+
+/**
+ * 통합된 컬럼 정보 (프론트엔드/백엔드 호환)
+ */
+export interface UnifiedColumnInfo {
+  // 기본 정보
+  tableName: string;
+  columnName: string;
+  displayName: string;
+
+  // 데이터 타입
+  dataType: string; // DB 데이터 타입 (varchar, integer, timestamp 등)
+  dbType: string; // DB 내부 타입
+  webType: DynamicWebType; // 웹 입력 타입 (text, number, date 등)
+
+  // 입력 설정
+  inputType: "direct" | "auto";
+  detailSettings?: Record<string, unknown>; // JSON 파싱된 객체
+  description?: string;
+
+  // 제약 조건
+  isNullable: boolean; // Y/N → boolean 변환
+  isPrimaryKey: boolean;
+  defaultValue?: string;
+
+  // 크기 제한
+  maxLength?: number;
+  numericPrecision?: number;
+  numericScale?: number;
+
+  // 표시 옵션
+  isVisible?: boolean;
+  displayOrder?: number;
+
+  // 참조 관계
+  codeCategory?: string;
+  codeValue?: string;
+  referenceTable?: string;
+  referenceColumn?: string;
+  displayColumn?: string;
+
+  // 메타데이터
+  companyCode?: CompanyCode;
+  createdDate?: Date;
+  updatedDate?: Date;
+}
+
+/**
+ * 백엔드 호환용 컬럼 타입 정보 (기존 ColumnTypeInfo)
+ */
+export interface ColumnTypeInfo {
+  columnName: string;
+  displayName: string;
+  dataType: string;
+  dbType: string;
+  webType: string; // string 타입 (백엔드 호환)
+  inputType?: "direct" | "auto";
+  detailSettings: string; // JSON 문자열
+  description: string; // 필수 필드
+  isNullable: string; // Y/N 문자열
+  isPrimaryKey: boolean;
+  defaultValue?: string;
+  maxLength?: number;
+  numericPrecision?: number;
+  numericScale?: number;
+  codeCategory?: string;
+  codeValue?: string;
+  referenceTable?: string;
+  referenceColumn?: string;
+  displayColumn?: string;
+  displayOrder?: number;
+  isVisible?: boolean;
+}
+
+/**
+ * 컬럼 설정 (업데이트용)
+ */
+export interface ColumnSettings {
+  columnName?: string; // 컬럼명 (업데이트 시 필요)
+  columnLabel: string; // 컬럼 표시명
+  webType: string; // 웹 입력 타입
+  detailSettings: string; // 상세 설정 (JSON 문자열)
+  codeCategory: string; // 코드 카테고리
+  codeValue: string; // 코드 값
+  referenceTable: string; // 참조 테이블
+  referenceColumn: string; // 참조 컬럼
+  displayColumn?: string; // 표시할 컬럼명
+  displayOrder?: number; // 표시 순서
+  isVisible?: boolean; // 표시 여부
+}
+
+// ===== 웹타입 표준 정의 =====
+
+/**
+ * 웹타입 표준 정보 (DB의 web_type_standards 테이블)
+ */
+export interface WebTypeStandard extends TimestampFields {
+  web_type: string;
+  type_name: string;
+  type_name_eng?: string;
+  description?: string;
+  category: string;
+  default_config?: unknown; // JSON
+  validation_rules?: unknown; // JSON
+  default_style?: unknown; // JSON
+  input_properties?: unknown; // JSON
+  sort_order?: number;
+  is_active: ActiveStatus;
+  component_name?: string;
+  config_panel?: string;
+}
+
+/**
+ * 프론트엔드용 웹타입 정의 (WebTypeStandard 변환)
+ */
+export interface WebTypeDefinition {
+  webType: string; // web_type 필드
+  typeName: string; // type_name 필드
+  typeNameEng?: string; // type_name_eng 필드
+  description?: string;
+  category: string;
+  defaultConfig: Record<string, unknown>; // JSON 타입 매핑
+  validationRules?: Record<string, unknown>; // JSON 타입 매핑
+  defaultStyle?: Record<string, unknown>; // JSON 타입 매핑
+  inputProperties?: Record<string, unknown>; // JSON 타입 매핑
+  componentName?: string; // component_name 필드
+  configPanel?: string; // config_panel 필드
+  sortOrder?: number; // sort_order 필드
+  isActive: boolean; // is_active Y/N → boolean 변환
+}
+
+// ===== 테이블 라벨 관리 =====
+
+/**
+ * 테이블 라벨
+ */
+export interface TableLabels extends TimestampFields {
+  tableName: string;
+  tableLabel?: string;
+  description?: string;
+  companyCode?: CompanyCode;
+}
+
+/**
+ * 컬럼 라벨
+ */
+export interface ColumnLabels extends TimestampFields {
+  id?: number;
+  tableName: string;
+  columnName: string;
+  columnLabel?: string;
+  webType?: string;
+  detailSettings?: string;
+  description?: string;
+  displayOrder?: number;
+  isVisible?: boolean;
+  codeCategory?: string;
+  codeValue?: string;
+  referenceTable?: string;
+  referenceColumn?: string;
+  displayColumn?: string;
+  companyCode?: CompanyCode;
+}
+
+// ===== 엔티티 조인 관리 =====
+
+/**
+ * 엔티티 조인 설정
+ */
+export interface EntityJoinConfig {
+  sourceTable: string; // 원본 테이블 (예: companies)
+  sourceColumn: string; // 원본 컬럼 (예: writer)
+  referenceTable: string; // 참조 테이블 (예: user_info)
+  referenceColumn: string; // 조인 키 (예: user_id)
+  displayColumn: string; // 표시할 값 (예: user_name)
+  aliasColumn: string; // 결과 컬럼명 (예: writer_name)
+  companyCode?: CompanyCode;
+}
+
+/**
+ * 엔티티 조인 응답
+ */
+export interface EntityJoinResponse {
+  data: Record<string, unknown>[];
+  total: number;
+  page: number;
+  size: number;
+  totalPages: number;
+  entityJoinInfo?: {
+    joinConfigs: EntityJoinConfig[];
+    strategy: "full_join" | "cache_lookup" | "hybrid";
+    performance: {
+      queryTime: number;
+      cacheHitRate?: number;
+      hybridBreakdown?: {
+        dbJoins: number;
+        cacheJoins: number;
+      };
+    };
+  };
+}
+
+/**
+ * 배치 조회 요청
+ */
+export interface BatchLookupRequest {
+  table: string;
+  key: string;
+  displayColumn: string;
+  companyCode?: CompanyCode;
+}
+
+/**
+ * 배치 조회 응답
+ */
+export interface BatchLookupResponse {
+  key: string;
+  value: unknown;
+}
+
+// ===== 테이블 관계 관리 =====
+
+/**
+ * 테이블 관계 정의
+ */
+export interface TableRelationship extends TimestampFields {
+  relationship_id?: number;
+  relationship_name?: string;
+  from_table_name?: string;
+  from_column_name?: string;
+  to_table_name?: string;
+  to_column_name?: string;
+  relationship_type?: string;
+  connection_type?: string;
+  company_code?: CompanyCode;
+  settings?: unknown; // JSON
+  is_active?: ActiveStatus;
+  diagram_id?: number;
+}
+
+/**
+ * 데이터 관계 브릿지
+ */
+export interface DataRelationshipBridge extends TimestampFields {
+  bridge_id?: number;
+  relationship_id?: number;
+  from_table_name: string;
+  from_column_name: string;
+  to_table_name: string;
+  to_column_name: string;
+  connection_type: string;
+  company_code: CompanyCode;
+  is_active?: ActiveStatus;
+  bridge_data?: unknown; // JSON
+  from_key_value?: string;
+  from_record_id?: string;
+  to_key_value?: string;
+  to_record_id?: string;
+}
+
+// ===== 컬럼 웹타입 설정 =====
+
+/**
+ * 컬럼 웹타입 설정
+ */
+export interface ColumnWebTypeSetting {
+  tableName: string;
+  columnName: string;
+  webType: DynamicWebType;
+  detailSettings?: Record<string, unknown>;
+  codeCategory?: string;
+  referenceTable?: string;
+  referenceColumn?: string;
+  displayColumn?: string;
+  companyCode?: CompanyCode;
+}
+
+// ===== API 응답 타입들 =====
+
+/**
+ * 테이블 목록 응답
+ */
+export interface TableListResponse extends BaseApiResponse<TableInfo[]> {}
+
+/**
+ * 컬럼 목록 응답
+ */
+export interface ColumnListResponse extends BaseApiResponse<UnifiedColumnInfo[]> {}
+
+/**
+ * 컬럼 타입 정보 응답 (백엔드 호환)
+ */
+export interface ColumnTypeInfoResponse extends BaseApiResponse<ColumnTypeInfo[]> {}
+
+/**
+ * 컬럼 설정 응답
+ */
+export interface ColumnSettingsResponse extends BaseApiResponse<void> {}
+
+/**
+ * 웹타입 표준 목록 응답
+ */
+export interface WebTypeStandardListResponse extends BaseApiResponse<WebTypeStandard[]> {}
+
+/**
+ * 웹타입 정의 목록 응답
+ */
+export interface WebTypeDefinitionListResponse extends BaseApiResponse<WebTypeDefinition[]> {}
+
+/**
+ * 테이블 데이터 조회 응답
+ */
+export interface TableDataResponse extends PaginatedResponse<Record<string, unknown>> {}
+
+// ===== 웹타입 옵션 상수 =====
+
+/**
+ * 웹타입 옵션 (기존 호환성 유지)
+ */
+export const WEB_TYPE_OPTIONS = [
+  { value: "text", label: "text", description: "일반 텍스트 입력" },
+  { value: "number", label: "number", description: "숫자 입력" },
+  { value: "decimal", label: "decimal", description: "소수 입력" },
+  { value: "date", label: "date", description: "날짜 선택기" },
+  { value: "datetime", label: "datetime", description: "날짜시간 선택기" },
+  { value: "code", label: "code", description: "코드 선택 (공통코드 지정)" },
+  { value: "entity", label: "entity", description: "엔티티 참조 (참조테이블 지정)" },
+  { value: "textarea", label: "textarea", description: "여러 줄 텍스트" },
+  { value: "select", label: "select", description: "드롭다운 선택" },
+  { value: "dropdown", label: "dropdown", description: "드롭다운 선택" },
+  { value: "checkbox", label: "checkbox", description: "체크박스" },
+  { value: "boolean", label: "boolean", description: "참/거짓" },
+  { value: "radio", label: "radio", description: "라디오 버튼" },
+  { value: "file", label: "file", description: "파일 업로드" },
+  { value: "email", label: "email", description: "이메일 입력" },
+  { value: "tel", label: "tel", description: "전화번호 입력" },
+  { value: "url", label: "url", description: "URL 입력" },
+] as const;
+
+/**
+ * 웹타입 (기존 호환성)
+ */
+export type WebType = (typeof WEB_TYPE_OPTIONS)[number]["value"];
+
+// ===== 변환 유틸리티 함수들 =====
+
+/**
+ * WebTypeStandard를 WebTypeDefinition으로 변환
+ */
+export const mapWebTypeStandardToDefinition = (standard: WebTypeStandard): WebTypeDefinition => ({
+  webType: standard.web_type,
+  typeName: standard.type_name,
+  typeNameEng: standard.type_name_eng || undefined,
+  description: standard.description || undefined,
+  category: standard.category || "input",
+  defaultConfig: (standard.default_config as Record<string, unknown>) || {},
+  validationRules: (standard.validation_rules as Record<string, unknown>) || undefined,
+  defaultStyle: (standard.default_style as Record<string, unknown>) || undefined,
+  inputProperties: (standard.input_properties as Record<string, unknown>) || undefined,
+  componentName: standard.component_name || undefined,
+  configPanel: standard.config_panel || undefined,
+  sortOrder: standard.sort_order || 0,
+  isActive: standard.is_active === "Y",
+});
+
+/**
+ * ColumnTypeInfo를 UnifiedColumnInfo로 변환
+ */
+export const mapColumnTypeInfoToUnified = (columnInfo: ColumnTypeInfo): UnifiedColumnInfo => ({
+  tableName: columnInfo.tableName || "",
+  columnName: columnInfo.columnName,
+  displayName: columnInfo.displayName,
+  dataType: columnInfo.dataType,
+  dbType: columnInfo.dbType,
+  webType: columnInfo.webType,
+  inputType: columnInfo.inputType || "direct",
+  detailSettings: columnInfo.detailSettings ? JSON.parse(columnInfo.detailSettings) : undefined,
+  description: columnInfo.description,
+  isNullable: columnInfo.isNullable === "Y",
+  isPrimaryKey: columnInfo.isPrimaryKey,
+  defaultValue: columnInfo.defaultValue,
+  maxLength: columnInfo.maxLength,
+  numericPrecision: columnInfo.numericPrecision,
+  numericScale: columnInfo.numericScale,
+  isVisible: columnInfo.isVisible,
+  displayOrder: columnInfo.displayOrder,
+  codeCategory: columnInfo.codeCategory,
+  codeValue: columnInfo.codeValue,
+  referenceTable: columnInfo.referenceTable,
+  referenceColumn: columnInfo.referenceColumn,
+  displayColumn: columnInfo.displayColumn,
+});
+
+/**
+ * UnifiedColumnInfo를 ColumnTypeInfo로 변환
+ */
+export const mapUnifiedToColumnTypeInfo = (unified: UnifiedColumnInfo): ColumnTypeInfo => ({
+  tableName: unified.tableName,
+  columnName: unified.columnName,
+  displayName: unified.displayName,
+  dataType: unified.dataType,
+  dbType: unified.dbType,
+  webType: unified.webType,
+  inputType: unified.inputType,
+  detailSettings: unified.detailSettings ? JSON.stringify(unified.detailSettings) : "{}",
+  description: unified.description || "",
+  isNullable: unified.isNullable ? "Y" : "N",
+  isPrimaryKey: unified.isPrimaryKey,
+  defaultValue: unified.defaultValue,
+  maxLength: unified.maxLength,
+  numericPrecision: unified.numericPrecision,
+  numericScale: unified.numericScale,
+  isVisible: unified.isVisible,
+  displayOrder: unified.displayOrder,
+  codeCategory: unified.codeCategory,
+  codeValue: unified.codeValue,
+  referenceTable: unified.referenceTable,
+  referenceColumn: unified.referenceColumn,
+  displayColumn: unified.displayColumn,
+});
+
+// ===== 타입 가드 함수들 =====
+
+/**
+ * 웹타입이 참조 타입인지 확인
+ */
+export const isReferenceWebType = (webType: string): boolean => {
+  return ["code", "entity"].includes(webType);
+};
+
+/**
+ * 웹타입이 숫자 타입인지 확인
+ */
+export const isNumericWebType = (webType: string): boolean => {
+  return ["number", "decimal"].includes(webType);
+};
+
+/**
+ * 웹타입이 날짜 타입인지 확인
+ */
+export const isDateWebType = (webType: string): boolean => {
+  return ["date", "datetime"].includes(webType);
+};
+
+/**
+ * 웹타입이 선택 타입인지 확인
+ */
+export const isSelectWebType = (webType: string): boolean => {
+  return ["select", "dropdown", "radio", "checkbox", "boolean"].includes(webType);
+};
+
+/**
+ * 컬럼이 필수 필드인지 확인
+ */
+export const isRequiredColumn = (column: UnifiedColumnInfo): boolean => {
+  return !column.isNullable || column.isPrimaryKey;
+};
+
+/**
+ * 컬럼이 시스템 컬럼인지 확인
+ */
+export const isSystemColumn = (columnName: string): boolean => {
+  const systemColumns = [
+    "created_date",
+    "updated_date",
+    "created_by",
+    "updated_by",
+    "is_active",
+    "company_code",
+    "version",
+    "id",
+  ];
+  return systemColumns.includes(columnName.toLowerCase());
+};

frontend/types/unified-core.ts

@@ -0,0 +1,355 @@
+/**
+ * 🎯 통합 핵심 타입 정의
+ *
+ * 모든 시스템에서 공통으로 사용하는 핵심 타입들을 중앙집중식으로 관리합니다.
+ * - 화면관리 시스템
+ * - 제어관리 시스템
+ * - 테이블 타입관리 시스템
+ */
+
+// ===== 핵심 공통 타입들 =====
+
+/**
+ * 통합 WebType 정의
+ * 모든 시스템에서 사용하는 웹 입력 타입의 표준 정의
+ */
+export type WebType =
+  // 기본 텍스트 입력
+  | "text"
+  | "textarea"
+  | "email"
+  | "tel"
+  | "url"
+  // 숫자 입력
+  | "number"
+  | "decimal"
+  // 날짜/시간 입력
+  | "date"
+  | "datetime"
+  // 선택 입력
+  | "select"
+  | "dropdown"
+  | "radio"
+  | "checkbox"
+  | "boolean"
+  // 특수 입력
+  | "code" // 공통코드 참조
+  | "entity" // 엔티티 참조
+  | "file" // 파일 업로드
+  | "button"; // 버튼 컴포넌트
+
+/**
+ * 동적 WebType 지원
+ * DB에서 동적으로 로드되는 웹타입도 지원
+ */
+export type DynamicWebType = WebType | string;
+
+/**
+ * 통합 ButtonActionType 정의
+ * 모든 버튼 액션 타입의 표준 정의
+ */
+export type ButtonActionType =
+  // 데이터 조작
+  | "save"
+  | "cancel"
+  | "delete"
+  | "edit"
+  | "add"
+  // 검색 및 초기화
+  | "search"
+  | "reset"
+  | "submit"
+  // UI 제어
+  | "close"
+  | "popup"
+  | "modal"
+  // 네비게이션
+  | "navigate"
+  | "newWindow"
+  // 제어관리 전용
+  | "control";
+
+/**
+ * 컴포넌트 타입 정의
+ */
+export type ComponentType =
+  | "container"
+  | "row"
+  | "column"
+  | "widget"
+  | "group"
+  | "datatable"
+  | "file"
+  | "area"
+  | "layout";
+
+/**
+ * 기본 위치 정보
+ */
+export interface Position {
+  x: number;
+  y: number;
+  z?: number;
+}
+
+/**
+ * 기본 크기 정보
+ */
+export interface Size {
+  width: number;
+  height: number;
+}
+
+/**
+ * 공통 스타일 속성
+ */
+export interface CommonStyle {
+  // 여백
+  margin?: string;
+  marginTop?: string;
+  marginRight?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  padding?: string;
+  paddingTop?: string;
+  paddingRight?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+
+  // 테두리
+  border?: string;
+  borderWidth?: string;
+  borderStyle?: string;
+  borderColor?: string;
+  borderRadius?: string;
+
+  // 배경
+  backgroundColor?: string;
+  backgroundImage?: string;
+
+  // 텍스트
+  color?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  fontFamily?: string;
+  textAlign?: "left" | "center" | "right" | "justify";
+  lineHeight?: string;
+
+  // 라벨 스타일
+  labelFontSize?: string;
+  labelColor?: string;
+  labelFontWeight?: string;
+  labelMarginBottom?: string;
+
+  // 레이아웃
+  display?: string;
+  width?: string;
+  height?: string;
+  minWidth?: string;
+  minHeight?: string;
+  maxWidth?: string;
+  maxHeight?: string;
+
+  // 기타
+  opacity?: string;
+  zIndex?: string;
+  overflow?: "visible" | "hidden" | "scroll" | "auto";
+}
+
+/**
+ * 검증 규칙
+ */
+export interface ValidationRule {
+  type: "required" | "minLength" | "maxLength" | "pattern" | "min" | "max" | "email" | "url";
+  value?: unknown;
+  message: string;
+}
+
+/**
+ * 조건 연산자
+ */
+export type ConditionOperator =
+  | "="
+  | "!="
+  | ">"
+  | "<"
+  | ">="
+  | "<="
+  | "LIKE"
+  | "IN"
+  | "NOT IN"
+  | "IS NULL"
+  | "IS NOT NULL";
+
+/**
+ * 기본 API 응답 형태
+ */
+export interface BaseApiResponse<T = unknown> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: {
+    code: string;
+    message: string;
+    details?: unknown;
+  };
+}
+
+/**
+ * 페이지네이션 응답
+ */
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  size: number;
+  totalPages: number;
+}
+
+/**
+ * 회사 코드 (모든 데이터에 공통)
+ */
+export type CompanyCode = string;
+
+/**
+ * 활성 상태 (DB의 Y/N을 boolean으로 변환)
+ */
+export type ActiveStatus = "Y" | "N";
+
+/**
+ * boolean으로 변환하는 유틸리티 타입
+ */
+export type BooleanFromYN<T extends ActiveStatus> = T extends "Y" ? true : false;
+
+// ===== 공통 유틸리티 타입들 =====
+
+/**
+ * 선택적 ID (신규 생성 시에는 없고, 기존 데이터는 있음)
+ */
+export type OptionalId<T> = Omit<T, "id"> & { id?: string | number };
+
+/**
+ * 타임스탬프 필드
+ */
+export interface TimestampFields {
+  createdDate?: Date;
+  updatedDate?: Date;
+  createdBy?: string;
+  updatedBy?: string;
+}
+
+/**
+ * 감사 필드 (DB 표준)
+ */
+export interface AuditFields {
+  created_date?: Date;
+  updated_date?: Date;
+  created_by?: string;
+  updated_by?: string;
+  is_active?: ActiveStatus;
+}
+
+// ===== 이벤트 타입들 =====
+
+/**
+ * 웹타입 이벤트
+ */
+export interface WebTypeEvent {
+  type: "change" | "blur" | "focus" | "click" | "submit";
+  value: unknown;
+  field?: string;
+  component?: unknown;
+}
+
+/**
+ * 컴포넌트 이벤트
+ */
+export interface ComponentEvent {
+  type: "select" | "drag" | "drop" | "resize" | "delete" | "update";
+  componentId: string;
+  data?: unknown;
+}
+
+// ===== 타입 가드용 유틸리티 =====
+
+/**
+ * 문자열이 WebType인지 확인
+ */
+export const isWebType = (value: string): value is WebType => {
+  const webTypes: WebType[] = [
+    "text",
+    "textarea",
+    "email",
+    "tel",
+    "url",
+    "number",
+    "decimal",
+    "date",
+    "datetime",
+    "select",
+    "dropdown",
+    "radio",
+    "checkbox",
+    "boolean",
+    "code",
+    "entity",
+    "file",
+    "button",
+  ];
+  return webTypes.includes(value as WebType);
+};
+
+/**
+ * 문자열이 ButtonActionType인지 확인
+ */
+export const isButtonActionType = (value: string): value is ButtonActionType => {
+  const actionTypes: ButtonActionType[] = [
+    "save",
+    "cancel",
+    "delete",
+    "edit",
+    "add",
+    "search",
+    "reset",
+    "submit",
+    "close",
+    "popup",
+    "modal",
+    "navigate",
+    "newWindow",
+    "control",
+  ];
+  return actionTypes.includes(value as ButtonActionType);
+};
+
+/**
+ * 문자열이 ComponentType인지 확인
+ */
+export const isComponentType = (value: string): value is ComponentType => {
+  const componentTypes: ComponentType[] = [
+    "container",
+    "row",
+    "column",
+    "widget",
+    "group",
+    "datatable",
+    "file",
+    "area",
+    "layout",
+  ];
+  return componentTypes.includes(value as ComponentType);
+};
+
+/**
+ * Y/N 문자열을 boolean으로 변환
+ */
+export const ynToBoolean = (value: ActiveStatus | string | undefined): boolean => {
+  return value === "Y";
+};
+
+/**
+ * boolean을 Y/N 문자열로 변환
+ */
+export const booleanToYN = (value: boolean): ActiveStatus => {
+  return value ? "Y" : "N";
+};

frontend/types/unified-web-types.ts

@@ -0,0 +1,195 @@
+/**
+ * 통합 웹 타입 정의
+ * 프론트엔드와 백엔드에서 공통으로 사용하는 웹 타입 정의
+ *
+ * 주의: 이 파일을 수정할 때는 반드시 백엔드 타입도 함께 업데이트 해야 합니다.
+ */
+
+// 기본 웹 타입 (DB web_type_standards와 동기화)
+export type BaseWebType =
+  | "text" // 일반 텍스트
+  | "number" // 숫자 (정수)
+  | "decimal" // 소수점 숫자
+  | "date" // 날짜
+  | "datetime" // 날짜시간
+  | "time" // 시간
+  | "textarea" // 여러줄 텍스트
+  | "select" // 선택박스
+  | "dropdown" // 드롭다운 (select와 동일)
+  | "checkbox" // 체크박스
+  | "radio" // 라디오버튼
+  | "boolean" // 불린값
+  | "file" // 파일 업로드
+  | "email" // 이메일
+  | "tel" // 전화번호
+  | "url" // URL
+  | "password" // 패스워드
+  | "code" // 공통코드 참조
+  | "entity" // 엔티티 참조
+  | "button"; // 버튼
+
+// 레거시 지원용 (기존 시스템과의 호환성)
+export type LegacyWebType = "text_area"; // textarea와 동일
+
+// 전체 웹 타입 (DB 동적 로딩 지원)
+export type WebType = BaseWebType | LegacyWebType;
+
+// 동적 웹 타입 (런타임에 DB에서 로드되는 타입 포함)
+export type DynamicWebType = WebType | string;
+
+// 웹 타입 카테고리
+export type WebTypeCategory =
+  | "input" // 입력 컴포넌트
+  | "selection" // 선택 컴포넌트
+  | "display" // 표시 컴포넌트
+  | "action" // 액션 컴포넌트
+  | "upload" // 업로드 컴포넌트
+  | "reference"; // 참조 컴포넌트
+
+// 웹 타입 정보
+export interface WebTypeInfo {
+  webType: WebType;
+  typeName: string;
+  typeNameEng?: string;
+  description?: string;
+  category: WebTypeCategory;
+  defaultConfig?: Record<string, any>;
+  validationRules?: Record<string, any>;
+  componentName?: string;
+  configPanel?: string;
+  isActive: boolean;
+}
+
+// 웹 타입 매핑 (레거시 지원)
+export const WEB_TYPE_MAPPINGS: Record<LegacyWebType, BaseWebType> = {
+  text_area: "textarea",
+};
+
+// 웹 타입 정규화 함수
+export const normalizeWebType = (webType: DynamicWebType): WebType => {
+  if (webType in WEB_TYPE_MAPPINGS) {
+    return WEB_TYPE_MAPPINGS[webType as LegacyWebType];
+  }
+  return webType as WebType;
+};
+
+// 웹 타입 검증 함수
+export const isValidWebType = (webType: string): webType is WebType => {
+  return (
+    [
+      "text",
+      "number",
+      "decimal",
+      "date",
+      "datetime",
+      "time",
+      "textarea",
+      "select",
+      "dropdown",
+      "checkbox",
+      "radio",
+      "boolean",
+      "file",
+      "email",
+      "tel",
+      "url",
+      "password",
+      "code",
+      "entity",
+      "button",
+      "text_area", // 레거시 지원
+    ] as string[]
+  ).includes(webType);
+};
+
+// DB 타입과 웹 타입 매핑
+export const DB_TYPE_TO_WEB_TYPE: Record<string, WebType> = {
+  // 텍스트 타입
+  "character varying": "text",
+  varchar: "text",
+  text: "textarea",
+  char: "text",
+
+  // 숫자 타입
+  integer: "number",
+  bigint: "number",
+  smallint: "number",
+  serial: "number",
+  bigserial: "number",
+  numeric: "decimal",
+  decimal: "decimal",
+  real: "decimal",
+  "double precision": "decimal",
+
+  // 날짜/시간 타입
+  date: "date",
+  timestamp: "datetime",
+  "timestamp with time zone": "datetime",
+  "timestamp without time zone": "datetime",
+  time: "time",
+  "time with time zone": "time",
+  "time without time zone": "time",
+
+  // 불린 타입
+  boolean: "boolean",
+
+  // JSON 타입 (텍스트로 처리)
+  json: "textarea",
+  jsonb: "textarea",
+
+  // 배열 타입 (텍스트로 처리)
+  ARRAY: "textarea",
+
+  // UUID 타입
+  uuid: "text",
+};
+
+// 웹 타입별 기본 설정
+export const WEB_TYPE_DEFAULT_CONFIGS: Record<WebType, Record<string, any>> = {
+  text: { maxLength: 255, placeholder: "텍스트를 입력하세요" },
+  number: { min: 0, max: 2147483647, step: 1 },
+  decimal: { min: 0, step: 0.01, decimalPlaces: 2 },
+  date: { format: "YYYY-MM-DD" },
+  datetime: { format: "YYYY-MM-DD HH:mm:ss", showTime: true },
+  time: { format: "HH:mm:ss" },
+  textarea: { rows: 4, cols: 50, maxLength: 1000 },
+  select: { placeholder: "선택하세요", searchable: false },
+  dropdown: { placeholder: "선택하세요", searchable: true },
+  checkbox: { defaultChecked: false },
+  radio: { inline: false },
+  boolean: { trueValue: true, falseValue: false },
+  file: { multiple: false, preview: true },
+  email: { placeholder: "이메일을 입력하세요" },
+  tel: { placeholder: "전화번호를 입력하세요" },
+  url: { placeholder: "URL을 입력하세요" },
+  password: { placeholder: "비밀번호를 입력하세요" },
+  code: { placeholder: "코드를 선택하세요", searchable: true },
+  entity: { placeholder: "항목을 선택하세요", searchable: true },
+  button: { variant: "default" },
+  text_area: { rows: 4, cols: 50, maxLength: 1000 }, // 레거시 지원
+};
+
+// 웹 타입별 검증 규칙
+export const WEB_TYPE_VALIDATION_RULES: Record<WebType, Record<string, any>> = {
+  text: { type: "string", trim: true },
+  number: { type: "number", integer: true },
+  decimal: { type: "number", float: true },
+  date: { type: "date", format: "YYYY-MM-DD" },
+  datetime: { type: "datetime" },
+  time: { type: "time" },
+  textarea: { type: "string", multiline: true },
+  select: { type: "string", options: true },
+  dropdown: { type: "string", options: true },
+  checkbox: { type: "boolean" },
+  radio: { type: "string", options: true },
+  boolean: { type: "boolean" },
+  file: { type: "file" },
+  email: { type: "email" },
+  tel: { type: "tel" },
+  url: { type: "url" },
+  password: { type: "string", password: true },
+  code: { type: "string", code: true },
+  entity: { type: "string", entity: true },
+  button: { type: "action" },
+  text_area: { type: "string", multiline: true }, // 레거시 지원
+};

제어관리_트랜잭션_및_조건부실행_개선방안.md

@@ -0,0 +1,852 @@
+# 제어관리 시스템 트랜잭션 및 조건부 실행 개선방안
+
+## 🚨 현재 문제점 분석
+
+### 1. 트랜잭션 처리 부재
+
+**문제**: 여러 액션 중 하나가 실패해도 이전 액션들이 그대로 유지됨
+
+#### 현재 상황:
+
+```
+저장액션1 (성공) → 저장액션2 (실패)
+결과: 저장액션1의 데이터는 DB에 그대로 남아있음 (데이터 불일치)
+```
+
+#### 예시 시나리오:
+
+1. **고객정보 저장** (성공)
+2. **주문정보 저장** (실패)
+3. **결제정보 저장** (실행되지 않음)
+
+→ 고객정보만 저장되어 데이터 정합성 깨짐
+
+### 2. 조건부 실행 로직 부재
+
+**문제**: AND/OR 조건에 따른 유연한 액션 실행이 불가능
+
+#### 현재 한계:
+
+- 모든 액션이 순차적으로 실행됨
+- 하나 실패하면 전체 중단
+- 대안 액션 실행 불가
+
+#### 원하는 동작:
+
+```
+액션그룹1: (저장액션1 AND 저장액션2) OR 저장액션3
+→ 저장액션1,2가 모두 성공하면 완료
+→ 둘 중 하나라도 실패하면 저장액션3 실행
+```
+
+## 🎯 해결방안 설계
+
+## Phase 1: 트랜잭션 관리 시스템 구축
+
+### 1.1 트랜잭션 단위 정의
+
+```typescript
+// frontend/types/control-management.ts
+
+export interface TransactionGroup {
+  id: string;
+  name: string;
+  description?: string;
+  actions: DataflowAction[];
+  rollbackStrategy: RollbackStrategy;
+  executionMode: "sequential" | "parallel";
+  onFailure: FailureHandling;
+}
+
+export type RollbackStrategy =
+  | "none" // 롤백 안함 (현재 방식)
+  | "partial" // 실패한 액션만 롤백
+  | "complete"; // 전체 트랜잭션 롤백
+
+export type FailureHandling =
+  | "stop" // 실패 시 중단 (현재 방식)
+  | "continue" // 실패해도 계속 진행
+  | "alternative"; // 대안 액션 실행
+```
+
+### 1.2 조건부 실행 로직 구조
+
+```typescript
+export interface ConditionalExecutionPlan {
+  id: string;
+  name: string;
+  conditions: ExecutionCondition[];
+  logic: "AND" | "OR" | "CUSTOM";
+  customLogic?: string; // "(A AND B) OR (C AND D)"
+}
+
+export interface ExecutionCondition {
+  id: string;
+  type: "action_group" | "validation" | "data_check";
+
+  // 액션 그룹 조건
+  actionGroup?: TransactionGroup;
+
+  // 검증 조건
+  validation?: {
+    field: string;
+    operator: ConditionOperator;
+    value: unknown;
+  };
+
+  // 성공/실패 조건
+  expectedResult: "success" | "failure" | "any";
+}
+```
+
+### 1.3 액션 실행 결과 추적
+
+```typescript
+export interface ActionExecutionResult {
+  actionId: string;
+  transactionId: string;
+  status: "pending" | "running" | "success" | "failed" | "rolled_back";
+  startTime: Date;
+  endTime?: Date;
+  result?: unknown;
+  error?: {
+    code: string;
+    message: string;
+    details?: unknown;
+  };
+  rollbackData?: unknown; // 롤백을 위한 데이터
+}
+
+export interface TransactionExecutionState {
+  transactionId: string;
+  status:
+    | "pending"
+    | "running"
+    | "success"
+    | "failed"
+    | "rolling_back"
+    | "rolled_back";
+  actions: ActionExecutionResult[];
+  rollbackActions?: ActionExecutionResult[];
+  startTime: Date;
+  endTime?: Date;
+}
+```
+
+## Phase 2: 고급 조건부 실행 시스템
+
+### 2.1 조건부 액션 그룹 정의
+
+```typescript
+export interface ConditionalActionGroup {
+  id: string;
+  name: string;
+  description?: string;
+
+  // 실행 조건
+  executionCondition: {
+    type: "always" | "conditional" | "fallback";
+    conditions?: DataflowCondition[];
+    logic?: "AND" | "OR";
+  };
+
+  // 액션들
+  actions: DataflowAction[];
+
+  // 성공/실패 조건 정의
+  successCriteria: {
+    type: "all_success" | "any_success" | "custom";
+    customLogic?: string; // "action1 AND (action2 OR action3)"
+  };
+
+  // 다음 단계 정의
+  onSuccess?: {
+    nextGroup?: string;
+    completeTransaction?: boolean;
+  };
+
+  onFailure?: {
+    retryCount?: number;
+    fallbackGroup?: string;
+    rollbackStrategy?: RollbackStrategy;
+  };
+}
+```
+
+### 2.2 복잡한 실행 계획 예시
+
+```typescript
+// 예시: 주문 처리 시스템
+const orderProcessingPlan: ConditionalExecutionPlan = {
+  id: "order_processing",
+  name: "주문 처리",
+  conditions: [
+    {
+      id: "primary_payment",
+      type: "action_group",
+      actionGroup: {
+        id: "payment_group_1",
+        name: "주결제 수단",
+        actions: [
+          {
+            type: "database",
+            operation: "UPDATE",
+            tableName: "customer" /* ... */,
+          },
+          {
+            type: "database",
+            operation: "INSERT",
+            tableName: "orders" /* ... */,
+          },
+          { type: "api", endpoint: "/payment/card" /* ... */ },
+        ],
+        rollbackStrategy: "complete",
+        executionMode: "sequential",
+      },
+      expectedResult: "success",
+    },
+    {
+      id: "alternative_payment",
+      type: "action_group",
+      actionGroup: {
+        id: "payment_group_2",
+        name: "대안 결제 수단",
+        actions: [
+          { type: "api", endpoint: "/payment/bank" /* ... */ },
+          {
+            type: "database",
+            operation: "UPDATE",
+            tableName: "orders" /* ... */,
+          },
+        ],
+        rollbackStrategy: "complete",
+        executionMode: "sequential",
+      },
+      expectedResult: "success",
+    },
+  ],
+  logic: "OR", // primary_payment OR alternative_payment
+  customLogic: "primary_payment OR alternative_payment",
+};
+```
+
+## Phase 3: 트랜잭션 실행 엔진 구현
+
+### 3.1 트랜잭션 매니저 클래스
+
+```typescript
+// frontend/lib/services/transactionManager.ts
+
+export class TransactionManager {
+  private activeTransactions: Map<string, TransactionExecutionState> =
+    new Map();
+  private rollbackHandlers: Map<string, RollbackHandler[]> = new Map();
+
+  /**
+   * 트랜잭션 실행
+   */
+  async executeTransaction(
+    plan: ConditionalExecutionPlan,
+    context: ExtendedControlContext
+  ): Promise<TransactionExecutionResult> {
+    const transactionId = this.generateTransactionId();
+    const state: TransactionExecutionState = {
+      transactionId,
+      status: "pending",
+      actions: [],
+      startTime: new Date(),
+    };
+
+    this.activeTransactions.set(transactionId, state);
+
+    try {
+      state.status = "running";
+
+      // 조건부 실행 로직 평가
+      const executionResult = await this.evaluateExecutionPlan(
+        plan,
+        context,
+        transactionId
+      );
+
+      if (executionResult.success) {
+        state.status = "success";
+      } else {
+        state.status = "failed";
+
+        // 실패 시 롤백 처리
+        if (executionResult.requiresRollback) {
+          await this.rollbackTransaction(transactionId);
+        }
+      }
+
+      state.endTime = new Date();
+      return executionResult;
+    } catch (error) {
+      state.status = "failed";
+      state.endTime = new Date();
+
+      await this.rollbackTransaction(transactionId);
+
+      throw error;
+    } finally {
+      // 트랜잭션 정리 (일정 시간 후)
+      setTimeout(() => this.cleanupTransaction(transactionId), 300000); // 5분 후
+    }
+  }
+
+  /**
+   * 실행 계획 평가
+   */
+  private async evaluateExecutionPlan(
+    plan: ConditionalExecutionPlan,
+    context: ExtendedControlContext,
+    transactionId: string
+  ): Promise<TransactionExecutionResult> {
+    const results: Map<string, boolean> = new Map();
+
+    // 각 조건별로 실행
+    for (const condition of plan.conditions) {
+      const result = await this.executeCondition(
+        condition,
+        context,
+        transactionId
+      );
+      results.set(condition.id, result.success);
+
+      // 실패 시 즉시 중단할지 결정
+      if (!result.success && this.shouldStopOnFailure(plan, condition)) {
+        return {
+          success: false,
+          message: `조건 ${condition.id} 실행 실패`,
+          requiresRollback: true,
+          results: Array.from(results.entries()),
+        };
+      }
+    }
+
+    // 전체 로직 평가
+    const overallSuccess = this.evaluateLogic(
+      plan.logic,
+      plan.customLogic,
+      results
+    );
+
+    return {
+      success: overallSuccess,
+      message: overallSuccess ? "모든 조건 실행 성공" : "조건 실행 실패",
+      requiresRollback: !overallSuccess,
+      results: Array.from(results.entries()),
+    };
+  }
+
+  /**
+   * 개별 조건 실행
+   */
+  private async executeCondition(
+    condition: ExecutionCondition,
+    context: ExtendedControlContext,
+    transactionId: string
+  ): Promise<{ success: boolean; result?: unknown }> {
+    if (condition.type === "action_group" && condition.actionGroup) {
+      return await this.executeActionGroup(
+        condition.actionGroup,
+        context,
+        transactionId
+      );
+    }
+
+    // 다른 조건 타입들 처리...
+    return { success: true };
+  }
+
+  /**
+   * 액션 그룹 실행
+   */
+  private async executeActionGroup(
+    group: TransactionGroup,
+    context: ExtendedControlContext,
+    transactionId: string
+  ): Promise<{ success: boolean; result?: unknown }> {
+    const state = this.activeTransactions.get(transactionId)!;
+    const groupResults: ActionExecutionResult[] = [];
+
+    try {
+      if (group.executionMode === "sequential") {
+        // 순차 실행
+        for (const action of group.actions) {
+          const result = await this.executeAction(
+            action,
+            context,
+            transactionId
+          );
+          groupResults.push(result);
+          state.actions.push(result);
+
+          if (result.status === "failed" && group.onFailure === "stop") {
+            throw new Error(
+              `액션 ${action.id} 실행 실패: ${result.error?.message}`
+            );
+          }
+        }
+      } else {
+        // 병렬 실행
+        const promises = group.actions.map((action) =>
+          this.executeAction(action, context, transactionId)
+        );
+        const results = await Promise.allSettled(promises);
+
+        results.forEach((result, index) => {
+          const actionResult: ActionExecutionResult = {
+            actionId: group.actions[index].id,
+            transactionId,
+            status:
+              result.status === "fulfilled" && result.value.status === "success"
+                ? "success"
+                : "failed",
+            startTime: new Date(),
+            endTime: new Date(),
+            result:
+              result.status === "fulfilled" ? result.value.result : undefined,
+            error:
+              result.status === "rejected"
+                ? { code: "EXECUTION_ERROR", message: result.reason }
+                : undefined,
+          };
+
+          groupResults.push(actionResult);
+          state.actions.push(actionResult);
+        });
+      }
+
+      // 성공 기준 평가
+      const success = this.evaluateSuccessCriteria(
+        group.successCriteria,
+        groupResults
+      );
+
+      if (!success && group.rollbackStrategy === "complete") {
+        // 그룹 내 모든 액션 롤백
+        await this.rollbackActionGroup(group, groupResults, transactionId);
+      }
+
+      return { success, result: groupResults };
+    } catch (error) {
+      // 오류 발생 시 롤백
+      if (group.rollbackStrategy !== "none") {
+        await this.rollbackActionGroup(group, groupResults, transactionId);
+      }
+
+      return { success: false, result: error };
+    }
+  }
+
+  /**
+   * 개별 액션 실행
+   */
+  private async executeAction(
+    action: DataflowAction,
+    context: ExtendedControlContext,
+    transactionId: string
+  ): Promise<ActionExecutionResult> {
+    const result: ActionExecutionResult = {
+      actionId: action.id,
+      transactionId,
+      status: "running",
+      startTime: new Date(),
+    };
+
+    try {
+      // 액션 타입별 실행
+      let executionResult: unknown;
+
+      switch (action.type) {
+        case "database":
+          executionResult = await this.executeDatabaseAction(action, context);
+
+          // 롤백 데이터 저장 (UPDATE/DELETE의 경우)
+          if (action.operation === "UPDATE" || action.operation === "DELETE") {
+            result.rollbackData = await this.captureRollbackData(
+              action,
+              context
+            );
+          }
+          break;
+
+        case "api":
+          executionResult = await this.executeApiAction(action, context);
+          break;
+
+        case "notification":
+          executionResult = await this.executeNotificationAction(
+            action,
+            context
+          );
+          break;
+
+        default:
+          throw new Error(`Unsupported action type: ${action.type}`);
+      }
+
+      result.status = "success";
+      result.result = executionResult;
+      result.endTime = new Date();
+
+      return result;
+    } catch (error) {
+      result.status = "failed";
+      result.error = {
+        code: "ACTION_EXECUTION_ERROR",
+        message: error.message,
+        details: error,
+      };
+      result.endTime = new Date();
+
+      return result;
+    }
+  }
+
+  /**
+   * 트랜잭션 롤백
+   */
+  private async rollbackTransaction(transactionId: string): Promise<void> {
+    const state = this.activeTransactions.get(transactionId);
+    if (!state) return;
+
+    state.status = "rolling_back";
+
+    // 성공한 액션들을 역순으로 롤백
+    const successfulActions = state.actions
+      .filter((action) => action.status === "success")
+      .reverse();
+
+    const rollbackResults: ActionExecutionResult[] = [];
+
+    for (const action of successfulActions) {
+      try {
+        const rollbackResult = await this.rollbackAction(action);
+        rollbackResults.push(rollbackResult);
+      } catch (error) {
+        console.error(`롤백 실패: ${action.actionId}`, error);
+        // 롤백 실패는 로그만 남기고 계속 진행
+      }
+    }
+
+    state.rollbackActions = rollbackResults;
+    state.status = "rolled_back";
+    state.endTime = new Date();
+  }
+
+  /**
+   * 개별 액션 롤백
+   */
+  private async rollbackAction(
+    action: ActionExecutionResult
+  ): Promise<ActionExecutionResult> {
+    // 롤백 액션 실행
+    // 이 부분은 액션 타입별로 구체적인 롤백 로직 구현 필요
+
+    return {
+      actionId: `rollback_${action.actionId}`,
+      transactionId: action.transactionId,
+      status: "success",
+      startTime: new Date(),
+      endTime: new Date(),
+      result: "롤백 완료",
+    };
+  }
+
+  /**
+   * 로직 평가 (AND/OR/CUSTOM)
+   */
+  private evaluateLogic(
+    logic: "AND" | "OR" | "CUSTOM",
+    customLogic: string | undefined,
+    results: Map<string, boolean>
+  ): boolean {
+    switch (logic) {
+      case "AND":
+        return Array.from(results.values()).every((result) => result);
+
+      case "OR":
+        return Array.from(results.values()).some((result) => result);
+
+      case "CUSTOM":
+        if (!customLogic) return false;
+        return this.evaluateCustomLogic(customLogic, results);
+
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * 커스텀 로직 평가
+   */
+  private evaluateCustomLogic(
+    logic: string,
+    results: Map<string, boolean>
+  ): boolean {
+    // "(A AND B) OR (C AND D)" 형태의 로직 파싱 및 평가
+    let expression = logic;
+
+    // 변수를 실제 결과값으로 치환
+    for (const [id, result] of results) {
+      expression = expression.replace(
+        new RegExp(`\\b${id}\\b`, "g"),
+        result.toString()
+      );
+    }
+
+    // AND/OR를 JavaScript 연산자로 변환
+    expression = expression
+      .replace(/\bAND\b/g, "&&")
+      .replace(/\bOR\b/g, "||")
+      .replace(/\btrue\b/g, "true")
+      .replace(/\bfalse\b/g, "false");
+
+    try {
+      // 안전한 평가를 위해 Function 생성자 사용
+      return new Function(`return ${expression}`)();
+    } catch (error) {
+      console.error("커스텀 로직 평가 오류:", error);
+      return false;
+    }
+  }
+
+  // ... 기타 헬퍼 메서드들
+}
+
+export interface TransactionExecutionResult {
+  success: boolean;
+  message: string;
+  requiresRollback: boolean;
+  results: [string, boolean][];
+}
+
+export interface RollbackHandler {
+  actionId: string;
+  rollbackFn: () => Promise<void>;
+}
+```
+
+### 3.2 데이터베이스 액션 실행기
+
+```typescript
+// frontend/lib/services/databaseActionExecutor.ts
+
+export class DatabaseActionExecutor {
+  /**
+   * 데이터베이스 액션 실행
+   */
+  static async executeAction(
+    action: DataflowAction,
+    context: ExtendedControlContext
+  ): Promise<unknown> {
+    const { tableName, operation, fields, conditions } = action;
+
+    switch (operation) {
+      case "INSERT":
+        return await this.executeInsert(tableName!, fields!, context);
+
+      case "UPDATE":
+        return await this.executeUpdate(
+          tableName!,
+          fields!,
+          conditions!,
+          context
+        );
+
+      case "DELETE":
+        return await this.executeDelete(tableName!, conditions!, context);
+
+      case "SELECT":
+        return await this.executeSelect(
+          tableName!,
+          fields!,
+          conditions!,
+          context
+        );
+
+      default:
+        throw new Error(`Unsupported database operation: ${operation}`);
+    }
+  }
+
+  /**
+   * 롤백 데이터 캡처
+   */
+  static async captureRollbackData(
+    action: DataflowAction,
+    context: ExtendedControlContext
+  ): Promise<unknown> {
+    const { tableName, conditions } = action;
+
+    if (action.operation === "UPDATE" || action.operation === "DELETE") {
+      // 변경 전 데이터를 조회하여 저장
+      return await this.executeSelect(tableName!, ["*"], conditions!, context);
+    }
+
+    return null;
+  }
+
+  /**
+   * 롤백 실행
+   */
+  static async executeRollback(
+    originalAction: ActionExecutionResult,
+    rollbackData: unknown
+  ): Promise<void> {
+    // 원본 액션의 반대 작업 수행
+    // INSERT -> DELETE
+    // UPDATE -> UPDATE (원본 데이터로)
+    // DELETE -> INSERT (원본 데이터로)
+    // 구체적인 롤백 로직 구현...
+  }
+
+  // ... 개별 operation 구현 메서드들
+}
+```
+
+## Phase 4: 사용자 인터페이스 개선
+
+### 4.1 조건부 실행 설정 UI
+
+```typescript
+// frontend/components/screen/config-panels/ConditionalExecutionPanel.tsx
+
+export const ConditionalExecutionPanel: React.FC<{
+  config: ButtonDataflowConfig;
+  onConfigChange: (config: ButtonDataflowConfig) => void;
+}> = ({ config, onConfigChange }) => {
+  return (
+    <div className="space-y-6">
+      {/* 실행 모드 선택 */}
+      <div>
+        <Label>실행 모드</Label>
+        <Select>
+          <SelectItem value="simple">단순 실행</SelectItem>
+          <SelectItem value="conditional">조건부 실행</SelectItem>
+          <SelectItem value="transaction">트랜잭션 실행</SelectItem>
+        </Select>
+      </div>
+
+      {/* 트랜잭션 설정 */}
+      <div>
+        <Label>트랜잭션 롤백 전략</Label>
+        <Select>
+          <SelectItem value="none">롤백 안함</SelectItem>
+          <SelectItem value="partial">부분 롤백</SelectItem>
+          <SelectItem value="complete">전체 롤백</SelectItem>
+        </Select>
+      </div>
+
+      {/* 액션 그룹 설정 */}
+      <div>
+        <Label>액션 그룹</Label>
+        <ActionGroupEditor />
+      </div>
+
+      {/* 조건부 로직 설정 */}
+      <div>
+        <Label>실행 조건</Label>
+        <ConditionalLogicEditor />
+      </div>
+    </div>
+  );
+};
+```
+
+### 4.2 트랜잭션 모니터링 UI
+
+```typescript
+// frontend/components/screen/TransactionMonitor.tsx
+
+export const TransactionMonitor: React.FC = () => {
+  const [transactions, setTransactions] = useState<TransactionExecutionState[]>(
+    []
+  );
+
+  return (
+    <div className="space-y-4">
+      <h3>트랜잭션 실행 현황</h3>
+
+      {transactions.map((transaction) => (
+        <Card key={transaction.transactionId}>
+          <CardHeader>
+            <div className="flex justify-between">
+              <span>트랜잭션 {transaction.transactionId}</span>
+              <Badge variant={getStatusVariant(transaction.status)}>
+                {transaction.status}
+              </Badge>
+            </div>
+          </CardHeader>
+
+          <CardContent>
+            <div className="space-y-2">
+              {transaction.actions.map((action) => (
+                <div key={action.actionId} className="flex justify-between">
+                  <span>{action.actionId}</span>
+                  <Badge variant={getStatusVariant(action.status)}>
+                    {action.status}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+
+            {transaction.status === "failed" && (
+              <Button
+                onClick={() => retryTransaction(transaction.transactionId)}
+              >
+                재시도
+              </Button>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+};
+```
+
+## 📋 구현 우선순위
+
+### 🔥 즉시 구현 (Critical)
+
+1. **TransactionManager 기본 구조** - 트랜잭션 단위 실행
+2. **롤백 메커니즘** - 실패 시 이전 상태 복구
+3. **AND/OR 조건부 실행** - 기본적인 조건부 로직
+
+### ⚡ 단기 구현 (High)
+
+4. **데이터베이스 액션 실행기** - 실제 DB 작업 처리
+5. **에러 핸들링 강화** - 상세한 오류 정보 제공
+6. **트랜잭션 상태 추적** - 실행 과정 모니터링
+
+### 📅 중장기 구현 (Medium)
+
+7. **복잡한 조건부 로직** - 커스텀 로직 지원
+8. **병렬 실행 지원** - 성능 최적화
+9. **모니터링 UI** - 실시간 트랜잭션 추적
+
+## 💡 기대 효과
+
+### 데이터 일관성 보장
+
+- 트랜잭션 롤백으로 부분 실행 방지
+- All-or-Nothing 원칙 적용
+- 데이터 정합성 확보
+
+### 유연한 비즈니스 로직
+
+- 복잡한 조건부 실행 지원
+- 대안 액션 자동 실행
+- 비즈니스 요구사항 정확한 반영
+
+### 시스템 안정성 향상
+
+- 실패 시 자동 복구
+- 상세한 실행 로그
+- 문제 상황 신속 파악
+
+이 개선방안에 대한 의견이나 우선순위 조정이 필요한 부분이 있으시면 말씀해 주세요!

테이블_타입_관리_개선_사용_가이드.md

@@ -0,0 +1,301 @@
+# 테이블 타입 관리 개선 사용 가이드
+
+## 🎯 개선 내용 요약
+
+테이블 타입 관리 시스템이 다음과 같이 개선되었습니다:
+
+### 주요 변경사항
+
+- **용어 통일**: 웹 타입 → **입력 타입**
+- **타입 단순화**: 20개 → **8개 핵심 타입**
+- **DB 타입 제거**: dbType 필드 완전 삭제
+- **저장 방식**: 모든 사용자 정의 컬럼을 **VARCHAR(500)로 통일**
+- **형변환**: 애플리케이션 레벨에서 입력 타입별 처리
+
+## 📋 8개 핵심 입력 타입
+
+| 번호 | 입력 타입  | 설명       | 예시                 | 저장 형태    |
+| ---- | ---------- | ---------- | -------------------- | ------------ |
+| 1    | `text`     | 텍스트     | 이름, 제목, 설명     | "홍길동"     |
+| 2    | `number`   | 숫자       | 수량, 건수, 순번     | "15000.50"   |
+| 3    | `date`     | 날짜       | 생성일, 완료일, 기한 | "2024-03-15" |
+| 4    | `code`     | 코드       | 상태코드, 유형코드   | "ACTIVE"     |
+| 5    | `entity`   | 엔티티     | 고객선택, 제품선택   | "123"        |
+| 6    | `select`   | 선택박스   | 드롭다운 목록        | "option1"    |
+| 7    | `checkbox` | 체크박스   | Y/N, 사용여부        | "Y" / "N"    |
+| 8    | `radio`    | 라디오버튼 | 단일선택 옵션        | "high"       |
+
+## 🚀 마이그레이션 실행
+
+### 1. 데이터베이스 마이그레이션
+
+```bash
+# 백엔드 디렉토리에서 실행
+cd backend-node
+node scripts/migrate-to-input-types.js
+```
+
+**실행 결과:**
+
+- `web_type` → `input_type` 컬럼명 변경
+- `db_type` 컬럼 제거
+- 기존 웹 타입을 8개 입력 타입으로 자동 변환
+- 기존 데이터 백업 (`table_type_columns_backup`)
+
+### 2. 서비스 재시작
+
+```bash
+# 백엔드 서비스 재시작
+npm run dev
+
+# 프론트엔드 서비스 재시작 (별도 터미널)
+cd ../frontend
+npm run dev
+```
+
+## 💻 사용법
+
+### 1. 테이블 생성
+
+새로운 테이블 생성 시 자동으로 기본 컬럼이 추가됩니다:
+
+```sql
+CREATE TABLE "products" (
+  -- 기본 컬럼 (자동 추가)
+  "id" serial PRIMARY KEY,
+  "created_date" timestamp DEFAULT now(),
+  "updated_date" timestamp DEFAULT now(),
+  "writer" varchar(100),
+  "company_code" varchar(50) DEFAULT '*',
+
+  -- 사용자 정의 컬럼 (모두 VARCHAR(500))
+  "product_name" varchar(500),    -- 입력타입: text
+  "price" varchar(500),           -- 입력타입: number
+  "launch_date" varchar(500),     -- 입력타입: date
+  "is_active" varchar(500)        -- 입력타입: checkbox
+);
+```
+
+### 2. 데이터 입력/조회
+
+#### 백엔드에서 데이터 처리
+
+```typescript
+import { InputTypeService } from "./services/inputTypeService";
+
+// 데이터 저장 시
+const inputData = {
+  product_name: "테스트 제품",
+  price: 15000.5,
+  launch_date: new Date("2024-03-15"),
+  is_active: true,
+};
+
+const columnTypes = {
+  product_name: "text",
+  price: "number",
+  launch_date: "date",
+  is_active: "checkbox",
+};
+
+// 저장용 변환 (모든 값을 문자열로)
+const convertedData = InputTypeService.convertBatchForStorage(
+  inputData,
+  columnTypes
+);
+// 결과: { product_name: "테스트 제품", price: "15000.5", launch_date: "2024-03-15", is_active: "Y" }
+
+// 데이터베이스에 저장
+await prisma.products.create({ data: convertedData });
+```
+
+#### 데이터 조회 시
+
+```typescript
+// 데이터베이스에서 조회 (모든 값이 문자열)
+const rawData = await prisma.products.findFirst();
+// 결과: { product_name: "테스트 제품", price: "15000.5", launch_date: "2024-03-15", is_active: "Y" }
+
+// 표시용 변환 (적절한 타입으로)
+const displayData = InputTypeService.convertBatchForDisplay(
+  rawData,
+  columnTypes
+);
+// 결과: { product_name: "테스트 제품", price: 15000.5, launch_date: "2024-03-15", is_active: true }
+```
+
+### 3. 프론트엔드에서 사용
+
+#### 테이블 관리 화면
+
+1. **관리자 > 테이블 관리** 메뉴 접속
+2. 테이블 선택 후 컬럼 목록 확인
+3. **입력 타입** 컬럼에서 8개 타입 중 선택
+4. **DB 타입** 컬럼은 제거됨 (더 이상 표시되지 않음)
+
+#### 화면 관리 시스템 연동
+
+```typescript
+import { INPUT_TYPE_OPTIONS } from "@/types/input-types";
+
+// 입력 타입 옵션 사용
+const inputTypeSelect = (
+  <Select>
+    {INPUT_TYPE_OPTIONS.map((option) => (
+      <SelectItem key={option.value} value={option.value}>
+        {option.label} - {option.description}
+      </SelectItem>
+    ))}
+  </Select>
+);
+```
+
+## 🧪 테스트
+
+### 전체 시스템 테스트
+
+```bash
+cd backend-node
+node scripts/test-input-type-system.js
+```
+
+**테스트 내용:**
+
+- ✅ 테이블 생성 (기본 컬럼 자동 추가)
+- ✅ VARCHAR(500) 통일 저장
+- ✅ 입력 타입별 형변환
+- ✅ 배치 데이터 처리
+- ✅ 입력값 검증
+- ✅ 성능 테스트
+
+## 🔧 개발자 가이드
+
+### 새로운 입력 타입 추가
+
+1. **타입 정의 업데이트**
+
+```typescript
+// frontend/types/input-types.ts & backend-node/src/types/input-types.ts
+export type InputType =
+  | "text"
+  | "number"
+  | "date"
+  | "code"
+  | "entity"
+  | "select"
+  | "checkbox"
+  | "radio"
+  | "new_type"; // 새 타입 추가
+```
+
+2. **변환 로직 추가**
+
+```typescript
+// backend-node/src/services/inputTypeService.ts
+case "new_type":
+  return processNewType(value);
+```
+
+3. **UI 옵션 추가**
+
+```typescript
+// frontend/types/input-types.ts
+export const INPUT_TYPE_OPTIONS = [
+  // ... 기존 옵션들
+  {
+    value: "new_type",
+    label: "새 타입",
+    description: "새로운 입력 타입",
+    category: "basic",
+  },
+];
+```
+
+### API 엔드포인트
+
+#### 입력 타입 변경
+
+```http
+PUT /api/table-management/tables/{tableName}/columns/{columnName}/input-type
+Content-Type: application/json
+
+{
+  "inputType": "number",
+  "detailSettings": "{}"
+}
+```
+
+#### 컬럼 입력 타입 조회
+
+```http
+GET /api/table-management/tables/{tableName}/input-types
+```
+
+## ⚠️ 주의사항
+
+### 1. 데이터 검증 강화 필요
+
+VARCHAR 통일 방식에서는 애플리케이션 레벨 검증이 중요합니다:
+
+```typescript
+// 반드시 검증 후 저장
+const validation = InputTypeService.validate(value, inputType);
+if (!validation.isValid) {
+  throw new Error(validation.message);
+}
+```
+
+### 2. 기존 데이터 호환성
+
+- **기존 테이블**: 현재 타입 구조 유지
+- **신규 테이블**: 새로운 입력 타입 체계 적용
+- **점진적 전환**: 필요에 따라 기존 테이블도 단계적 전환
+
+### 3. 성능 고려사항
+
+- 대용량 데이터 처리 시 배치 변환 사용
+- 자주 사용되는 변환 결과는 캐싱 고려
+- 복잡한 검증 로직은 비동기 처리
+
+## 🆘 문제 해결
+
+### 마이그레이션 실패 시 롤백
+
+```sql
+-- 1. 기존 테이블 삭제
+DROP TABLE table_type_columns;
+
+-- 2. 백업에서 복원
+ALTER TABLE table_type_columns_backup RENAME TO table_type_columns;
+```
+
+### 입력 타입 변환 오류
+
+```typescript
+// 안전한 변환을 위한 try-catch 사용
+try {
+  const converted = InputTypeService.convertForStorage(value, inputType);
+  return converted;
+} catch (error) {
+  logger.error("변환 실패", { value, inputType, error });
+  return String(value); // 기본값으로 문자열 반환
+}
+```
+
+### UI에서 입력 타입이 표시되지 않는 경우
+
+1. 브라우저 캐시 클리어
+2. 프론트엔드 서비스 재시작
+3. `INPUT_TYPE_OPTIONS` import 확인
+
+## 📞 지원
+
+문제가 발생하거나 추가 기능이 필요한 경우:
+
+1. **로그 확인**: 백엔드 콘솔에서 상세 로그 확인
+2. **테스트 실행**: `test-input-type-system.js`로 시스템 상태 점검
+3. **데이터 백업**: 중요한 변경 전 항상 백업 실행
+
+---
+
+**🎉 테이블 타입 관리 개선으로 더욱 유연하고 안정적인 시스템을 경험하세요!**

화면관리_검증_시스템_사용_가이드.md

@@ -0,0 +1,332 @@
+# 화면관리 검증 시스템 사용 가이드
+
+## 📋 개요
+
+이 문서는 화면관리에서 입력 폼 저장 시 발생하던 타입 불일치와 컬럼 오류 문제를 해결하기 위해 개발된 **개선된 검증 시스템**의 사용 방법을 안내합니다.
+
+## 🚀 주요 개선 사항
+
+### ✅ 해결된 문제점
+
+- **타입 불일치 오류**: WebType 정의 통합으로 프론트엔드-백엔드 타입 일관성 확보
+- **없는 컬럼 참조**: 클라이언트 사전 검증으로 존재하지 않는 컬럼 접근 방지
+- **불명확한 오류 메시지**: 사용자 친화적인 상세 오류 메시지 제공
+- **느린 저장 성능**: 캐싱 및 사전 검증으로 불필요한 서버 호출 최소화
+
+### 🎯 새로운 기능
+
+- **실시간 폼 검증**: 입력과 동시에 유효성 검사
+- **스마트 오류 제안**: 오타나 잘못된 컬럼명에 대한 추천
+- **향상된 타입 변환**: PostgreSQL 타입에 맞는 안전한 데이터 변환
+- **성능 최적화**: 테이블 컬럼 정보 캐싱으로 빠른 응답
+
+## 🛠️ 기술 스택
+
+### 프론트엔드
+
+- **TypeScript**: 통합 타입 정의 (`unified-web-types.ts`)
+- **React Hooks**: 실시간 검증 (`useFormValidation`)
+- **Validation Utils**: 클라이언트 검증 로직 (`formValidation.ts`)
+- **Enhanced Service**: 통합 폼 서비스 (`enhancedFormService.ts`)
+
+### 백엔드
+
+- **Enhanced Service**: 개선된 동적 폼 서비스 (`enhancedDynamicFormService.ts`)
+- **Table Management API**: 테이블 관리 API (`tableManagementController.ts`)
+- **Type Safety**: 통합 웹타입 정의 (`unified-web-types.ts`)
+
+## 🎮 사용 방법
+
+### 1. 데모 페이지에서 테스트
+
+개선된 검증 시스템을 직접 체험할 수 있는 데모 페이지가 제공됩니다:
+
+```
+http://localhost:9771/admin/validation-demo
+```
+
+#### 데모 기능
+
+- **유효한 데이터 입력**: 모든 검증을 통과하는 테스트 데이터
+- **잘못된 데이터 입력**: 다양한 검증 오류를 확인할 수 있는 데이터
+- **실시간 검증**: 입력과 동시에 검증 결과 확인
+- **상세 검증 상태**: 필드별 검증 상태 및 오류 메시지
+
+### 2. 기존 화면에서 검증 기능 활성화
+
+기존 `InteractiveScreenViewer` 컴포넌트에 검증 기능을 추가할 수 있습니다:
+
+```tsx
+<InteractiveScreenViewer
+  component={component}
+  allComponents={allComponents}
+  formData={formData}
+  onFormDataChange={handleFormDataChange}
+  screenInfo={screenInfo}
+  // 검증 기능 활성화
+  enableEnhancedValidation={true}
+  tableColumns={tableColumns}
+  showValidationPanel={true}
+  validationOptions={{
+    enableRealTimeValidation: true,
+    validationDelay: 300,
+    enableAutoSave: false,
+    showToastMessages: true,
+  }}
+/>
+```
+
+### 3. 새로운 Enhanced 컴포넌트 사용
+
+완전히 새로운 검증 기능을 위해서는 `EnhancedInteractiveScreenViewer`를 사용하세요:
+
+```tsx
+import { EnhancedInteractiveScreenViewer } from "@/components/screen/EnhancedInteractiveScreenViewer";
+
+<EnhancedInteractiveScreenViewer
+  component={component}
+  allComponents={allComponents}
+  formData={formData}
+  onFormDataChange={handleFormDataChange}
+  screenInfo={screenInfo}
+  tableColumns={tableColumns}
+  showValidationPanel={true}
+  showDeveloperInfo={false} // 개발 모드에서만 true
+/>;
+```
+
+## ⚙️ 설정 옵션
+
+### 검증 옵션 (`validationOptions`)
+
+```typescript
+interface ValidationOptions {
+  enableRealTimeValidation?: boolean; // 실시간 검증 활성화 (기본: true)
+  validationDelay?: number; // 검증 지연 시간 ms (기본: 300)
+  enableAutoSave?: boolean; // 자동 저장 (기본: false)
+  autoSaveDelay?: number; // 자동 저장 지연 시간 ms (기본: 2000)
+  showToastMessages?: boolean; // 토스트 메시지 표시 (기본: true)
+  validateOnMount?: boolean; // 마운트 시 검증 (기본: false)
+}
+```
+
+### 표시 옵션
+
+```typescript
+interface DisplayOptions {
+  showValidationPanel?: boolean; // 검증 패널 표시 (기본: false)
+  compactValidation?: boolean; // 간소화된 검증 UI (기본: false)
+  showDeveloperInfo?: boolean; // 개발자 정보 표시 (기본: false)
+}
+```
+
+## 🔧 개발자 가이드
+
+### 1. 새로운 WebType 추가
+
+새로운 웹타입을 추가하려면 양쪽 모두 업데이트해야 합니다:
+
+**프론트엔드** (`frontend/types/unified-web-types.ts`):
+
+```typescript
+export type BaseWebType =
+  | "text"
+  | "number"
+  // ... 기존 타입들
+  | "new-type"; // 새 타입 추가
+```
+
+**백엔드** (`backend-node/src/types/unified-web-types.ts`):
+
+```typescript
+export type BaseWebType =
+  | "text"
+  | "number"
+  // ... 기존 타입들
+  | "new-type"; // 동일하게 추가
+```
+
+### 2. 커스텀 검증 규칙 추가
+
+`formValidation.ts`에서 새로운 검증 로직을 추가할 수 있습니다:
+
+```typescript
+const validateCustomField = (
+  fieldName: string,
+  value: any,
+  config?: Record<string, any>
+): FieldValidationResult => {
+  // 커스텀 검증 로직
+  if (customValidationFails) {
+    return {
+      isValid: false,
+      error: {
+        field: fieldName,
+        code: "CUSTOM_ERROR",
+        message: "커스텀 오류 메시지",
+        severity: "error",
+        value,
+      },
+    };
+  }
+
+  return { isValid: true };
+};
+```
+
+### 3. 테이블 컬럼 정보 캐싱
+
+시스템은 자동으로 테이블 컬럼 정보를 캐싱합니다:
+
+- **클라이언트**: 10분간 캐싱
+- **서버**: 10분간 캐싱
+- **수동 캐시 클리어**: `enhancedFormService.clearTableCache(tableName)`
+
+## 🚨 트러블슈팅
+
+### 자주 발생하는 문제
+
+#### 1. "테이블 정보를 찾을 수 없습니다"
+
+```
+해결책:
+1. 테이블명이 정확한지 확인
+2. table_type_columns 테이블에 해당 테이블 정보가 있는지 확인
+3. 데이터베이스 연결 상태 확인 (http://localhost:8080/api/table-management/health)
+```
+
+#### 2. "컬럼이 존재하지 않습니다"
+
+```
+해결책:
+1. WidgetComponent의 columnName 속성 확인
+2. 데이터베이스 스키마와 일치하는지 확인
+3. 제안된 유사한 컬럼명 사용 고려
+```
+
+#### 3. "타입 변환 오류"
+
+```
+해결책:
+1. webType과 PostgreSQL 데이터 타입 호환성 확인
+2. detailSettings의 제약조건 검토
+3. 입력값 형식 확인 (예: 날짜는 YYYY-MM-DD)
+```
+
+#### 4. 검증이 작동하지 않음
+
+```
+해결책:
+1. enableEnhancedValidation={true} 설정 확인
+2. tableColumns 배열이 올바르게 전달되었는지 확인
+3. screenInfo에 id와 tableName이 있는지 확인
+```
+
+### 로그 분석
+
+개발 모드에서는 상세한 로그가 제공됩니다:
+
+```javascript
+// 클라이언트 로그
+console.log("🔍 개선된 검증 시스템 사용");
+console.log("💾 폼 데이터 저장 요청:", formData);
+
+// 서버 로그
+logger.info("개선된 폼 저장 시작: tableName");
+logger.debug("Data after validation:", transformedData);
+```
+
+## 📊 성능 모니터링
+
+### 성능 지표
+
+시스템은 다음 성능 지표를 추적합니다:
+
+- **검증 시간**: 클라이언트 검증 수행 시간
+- **저장 시간**: 서버 저장 처리 시간
+- **전체 시간**: 요청부터 응답까지 총 시간
+- **캐시 히트율**: 테이블 컬럼 정보 캐시 사용률
+
+### 성능 최적화 팁
+
+1. **테이블 컬럼 정보 사전 로드**:
+
+   ```typescript
+   // 화면 로드 시 테이블 정보 미리 캐싱
+   await enhancedFormService.getTableColumns(tableName);
+   ```
+
+2. **검증 지연 시간 조정**:
+
+   ```typescript
+   // 빠른 응답이 필요한 경우
+   validationOptions={{ validationDelay: 100 }}
+
+   // 서버 부하를 줄이려는 경우
+   validationOptions={{ validationDelay: 1000 }}
+   ```
+
+3. **불필요한 실시간 검증 비활성화**:
+   ```typescript
+   // 단순한 폼의 경우
+   validationOptions={{ enableRealTimeValidation: false }}
+   ```
+
+## 🔄 마이그레이션 가이드
+
+### 기존 코드에서 새 시스템으로
+
+1. **단계별 마이그레이션**:
+
+   ```typescript
+   // 1단계: 기존 코드 유지하면서 검증만 추가
+   <InteractiveScreenViewer
+     {...existingProps}
+     enableEnhancedValidation={true}
+     tableColumns={tableColumns}
+   />
+
+   // 2단계: 검증 패널 추가
+   <InteractiveScreenViewer
+     {...existingProps}
+     enableEnhancedValidation={true}
+     tableColumns={tableColumns}
+     showValidationPanel={true}
+   />
+
+   // 3단계: 완전 마이그레이션
+   <EnhancedInteractiveScreenViewer
+     {...existingProps}
+     tableColumns={tableColumns}
+     showValidationPanel={true}
+   />
+   ```
+
+2. **API 호출 변경**:
+
+   ```typescript
+   // 기존 방식
+   await dynamicFormApi.saveFormData(formData);
+
+   // 새로운 방식 (권장)
+   await dynamicFormApi.saveData(formData);
+   ```
+
+## 📞 지원 및 문의
+
+### 개발 지원
+
+- **데모 페이지**: `/admin/validation-demo`
+- **API 상태 확인**: `/api/table-management/health`
+- **로그 레벨**: 개발 환경에서 DEBUG 로그 활성화
+
+### 추가 개발 계획
+
+1. **Phase 2**: 웹타입별 상세 설정 UI
+2. **Phase 3**: 고급 검증 규칙 (정규식, 범위 등)
+3. **Phase 4**: 조건부 필드 및 계산 필드
+4. **Phase 5**: 실시간 협업 기능
+
+---
+
+이 가이드는 화면관리 검증 시스템의 핵심 기능과 사용법을 다룹니다. 추가 질문이나 개선 제안은 개발팀에 문의해주세요! 🚀