diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts
index 3b5e74da..d214c19a 100644
--- a/backend-node/src/app.ts
+++ b/backend-node/src/app.ts
@@ -72,6 +72,7 @@ import numberingRuleRoutes from "./routes/numberingRuleRoutes"; // 채번 규칙
 import entitySearchRoutes from "./routes/entitySearchRoutes"; // 엔티티 검색
 import orderRoutes from "./routes/orderRoutes"; // 수주 관리
 import screenEmbeddingRoutes from "./routes/screenEmbeddingRoutes"; // 화면 임베딩 및 데이터 전달
+import vehicleTripRoutes from "./routes/vehicleTripRoutes"; // 차량 운행 이력 관리
 import driverRoutes from "./routes/driverRoutes"; // 공차중계 운전자 관리
 import { BatchSchedulerService } from "./services/batchSchedulerService";
 // import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
@@ -240,6 +241,7 @@ app.use("/api/entity-search", entitySearchRoutes); // 엔티티 검색
 app.use("/api/orders", orderRoutes); // 수주 관리
 app.use("/api/driver", driverRoutes); // 공차중계 운전자 관리
 app.use("/api", screenEmbeddingRoutes); // 화면 임베딩 및 데이터 전달
+app.use("/api/vehicle", vehicleTripRoutes); // 차량 운행 이력 관리
 // app.use("/api/collections", collectionRoutes); // 임시 주석
 // app.use("/api/batch", batchRoutes); // 임시 주석
 // app.use('/api/users', userRoutes);
diff --git a/backend-node/src/controllers/DashboardController.ts b/backend-node/src/controllers/DashboardController.ts
index 76b666f0..e324c332 100644
--- a/backend-node/src/controllers/DashboardController.ts
+++ b/backend-node/src/controllers/DashboardController.ts
@@ -708,6 +708,12 @@ export class DashboardController {
         });
       }
 
+      // 기상청 API 등 EUC-KR 인코딩을 사용하는 경우 arraybuffer로 받아서 디코딩
+      const isKmaApi = urlObj.hostname.includes('kma.go.kr');
+      if (isKmaApi) {
+        requestConfig.responseType = 'arraybuffer';
+      }
+
       const response = await axios(requestConfig);
 
       if (response.status >= 400) {
@@ -719,8 +725,24 @@ export class DashboardController {
       let data = response.data;
       const contentType = response.headers["content-type"];
 
+      // 기상청 API 인코딩 처리 (UTF-8 우선, 실패 시 EUC-KR)
+      if (isKmaApi && Buffer.isBuffer(data)) {
+        const iconv = require('iconv-lite');
+        const buffer = Buffer.from(data);
+        const utf8Text = buffer.toString('utf-8');
+        
+        // UTF-8로 정상 디코딩되었는지 확인
+        if (utf8Text.includes('특보') || utf8Text.includes('경보') || utf8Text.includes('주의보') || 
+            (utf8Text.includes('#START7777') && !utf8Text.includes('�'))) {
+          data = { text: utf8Text, contentType, encoding: 'utf-8' };
+        } else {
+          // EUC-KR로 디코딩
+          const eucKrText = iconv.decode(buffer, 'EUC-KR');
+          data = { text: eucKrText, contentType, encoding: 'euc-kr' };
+        }
+      }
       // 텍스트 응답인 경우 포맷팅
-      if (typeof data === "string") {
+      else if (typeof data === "string") {
         data = { text: data, contentType };
       }
 
diff --git a/backend-node/src/controllers/adminController.ts b/backend-node/src/controllers/adminController.ts
index da0ea772..3ac5d26b 100644
--- a/backend-node/src/controllers/adminController.ts
+++ b/backend-node/src/controllers/adminController.ts
@@ -1428,10 +1428,51 @@ export async function deleteMenu(
       }
     }
 
+    // 외래키 제약 조건이 있는 관련 테이블 데이터 먼저 정리
+    const menuObjid = Number(menuId);
+    
+    // 1. category_column_mapping에서 menu_objid를 NULL로 설정
+    await query(
+      `UPDATE category_column_mapping SET menu_objid = NULL WHERE menu_objid = $1`,
+      [menuObjid]
+    );
+    
+    // 2. code_category에서 menu_objid를 NULL로 설정
+    await query(
+      `UPDATE code_category SET menu_objid = NULL WHERE menu_objid = $1`,
+      [menuObjid]
+    );
+    
+    // 3. code_info에서 menu_objid를 NULL로 설정
+    await query(
+      `UPDATE code_info SET menu_objid = NULL WHERE menu_objid = $1`,
+      [menuObjid]
+    );
+    
+    // 4. numbering_rules에서 menu_objid를 NULL로 설정
+    await query(
+      `UPDATE numbering_rules SET menu_objid = NULL WHERE menu_objid = $1`,
+      [menuObjid]
+    );
+    
+    // 5. rel_menu_auth에서 관련 권한 삭제
+    await query(
+      `DELETE FROM rel_menu_auth WHERE menu_objid = $1`,
+      [menuObjid]
+    );
+    
+    // 6. screen_menu_assignments에서 관련 할당 삭제
+    await query(
+      `DELETE FROM screen_menu_assignments WHERE menu_objid = $1`,
+      [menuObjid]
+    );
+
+    logger.info("메뉴 관련 데이터 정리 완료", { menuObjid });
+
     // Raw Query를 사용한 메뉴 삭제
     const [deletedMenu] = await query<any>(
       `DELETE FROM menu_info WHERE objid = $1 RETURNING *`,
-      [Number(menuId)]
+      [menuObjid]
     );
 
     logger.info("메뉴 삭제 성공", { deletedMenu });
diff --git a/backend-node/src/controllers/entitySearchController.ts b/backend-node/src/controllers/entitySearchController.ts
index 880c54fc..4d911c57 100644
--- a/backend-node/src/controllers/entitySearchController.ts
+++ b/backend-node/src/controllers/entitySearchController.ts
@@ -32,10 +32,32 @@ export async function searchEntity(req: AuthenticatedRequest, res: Response) {
     const companyCode = req.user!.companyCode;
 
     // 검색 필드 파싱
-    const fields = searchFields
+    const requestedFields = searchFields
       ? (searchFields as string).split(",").map((f) => f.trim())
       : [];
 
+    // 🆕 테이블의 실제 컬럼 목록 조회
+    const pool = getPool();
+    const columnsResult = await pool.query(
+      `SELECT column_name FROM information_schema.columns 
+       WHERE table_schema = 'public' AND table_name = $1`,
+      [tableName]
+    );
+    const existingColumns = new Set(columnsResult.rows.map((r: any) => r.column_name));
+
+    // 🆕 존재하는 컬럼만 필터링
+    const fields = requestedFields.filter((field) => {
+      if (existingColumns.has(field)) {
+        return true;
+      } else {
+        logger.warn(`엔티티 검색: 테이블 "${tableName}"에 컬럼 "${field}"이(가) 존재하지 않아 제외`);
+        return false;
+      }
+    });
+
+    const existingColumnsArray = Array.from(existingColumns);
+    logger.info(`엔티티 검색 필드 확인 - 테이블: ${tableName}, 요청필드: [${requestedFields.join(", ")}], 유효필드: [${fields.join(", ")}], 테이블컬럼(샘플): [${existingColumnsArray.slice(0, 10).join(", ")}]`);
+
     // WHERE 조건 생성
     const whereConditions: string[] = [];
     const params: any[] = [];
@@ -43,32 +65,57 @@ export async function searchEntity(req: AuthenticatedRequest, res: Response) {
 
     // 멀티테넌시 필터링
     if (companyCode !== "*") {
-      whereConditions.push(`company_code = $${paramIndex}`);
-      params.push(companyCode);
-      paramIndex++;
+      // 🆕 company_code 컬럼이 있는 경우에만 필터링
+      if (existingColumns.has("company_code")) {
+        whereConditions.push(`company_code = $${paramIndex}`);
+        params.push(companyCode);
+        paramIndex++;
+      }
     }
 
     // 검색 조건
-    if (searchText && fields.length > 0) {
-      const searchConditions = fields.map((field) => {
-        const condition = `${field}::text ILIKE $${paramIndex}`;
-        paramIndex++;
-        return condition;
-      });
-      whereConditions.push(`(${searchConditions.join(" OR ")})`);
+    if (searchText) {
+      // 유효한 검색 필드가 없으면 기본 텍스트 컬럼에서 검색
+      let searchableFields = fields;
+      if (searchableFields.length === 0) {
+        // 기본 검색 컬럼: name, code, description 등 일반적인 컬럼명
+        const defaultSearchColumns = [
+          'name', 'code', 'description', 'title', 'label', 
+          'item_name', 'item_code', 'item_number',
+          'equipment_name', 'equipment_code', 
+          'inspection_item', 'consumable_name', // 소모품명 추가
+          'supplier_name', 'customer_name', 'product_name',
+        ];
+        searchableFields = defaultSearchColumns.filter(col => existingColumns.has(col));
+        
+        logger.info(`엔티티 검색: 기본 검색 필드 사용 - 테이블: ${tableName}, 검색필드: [${searchableFields.join(", ")}]`);
+      }
+      
+      if (searchableFields.length > 0) {
+        const searchConditions = searchableFields.map((field) => {
+          const condition = `${field}::text ILIKE $${paramIndex}`;
+          paramIndex++;
+          return condition;
+        });
+        whereConditions.push(`(${searchConditions.join(" OR ")})`);
 
-      // 검색어 파라미터 추가
-      fields.forEach(() => {
-        params.push(`%${searchText}%`);
-      });
+        // 검색어 파라미터 추가
+        searchableFields.forEach(() => {
+          params.push(`%${searchText}%`);
+        });
+      }
     }
 
-    // 추가 필터 조건
+    // 추가 필터 조건 (존재하는 컬럼만)
     const additionalFilter = JSON.parse(filterCondition as string);
     for (const [key, value] of Object.entries(additionalFilter)) {
-      whereConditions.push(`${key} = $${paramIndex}`);
-      params.push(value);
-      paramIndex++;
+      if (existingColumns.has(key)) {
+        whereConditions.push(`${key} = $${paramIndex}`);
+        params.push(value);
+        paramIndex++;
+      } else {
+        logger.warn("엔티티 검색: 필터 조건에 존재하지 않는 컬럼 제외", { tableName, key });
+      }
     }
 
     // 페이징
@@ -78,8 +125,7 @@ export async function searchEntity(req: AuthenticatedRequest, res: Response) {
         ? `WHERE ${whereConditions.join(" AND ")}`
         : "";
 
-    // 쿼리 실행
-    const pool = getPool();
+    // 쿼리 실행 (pool은 위에서 이미 선언됨)
     const countQuery = `SELECT COUNT(*) FROM ${tableName} ${whereClause}`;
     const dataQuery = `
       SELECT * FROM ${tableName} ${whereClause} 
diff --git a/backend-node/src/controllers/flowController.ts b/backend-node/src/controllers/flowController.ts
index 85ad2259..9459e1f6 100644
--- a/backend-node/src/controllers/flowController.ts
+++ b/backend-node/src/controllers/flowController.ts
@@ -32,8 +32,17 @@ export class FlowController {
    */
   createFlowDefinition = async (req: Request, res: Response): Promise<void> => {
     try {
-      const { name, description, tableName, dbSourceType, dbConnectionId } =
-        req.body;
+      const { 
+        name, 
+        description, 
+        tableName, 
+        dbSourceType, 
+        dbConnectionId,
+        // REST API 관련 필드
+        restApiConnectionId,
+        restApiEndpoint,
+        restApiJsonPath,
+      } = req.body;
       const userId = (req as any).user?.userId || "system";
       const userCompanyCode = (req as any).user?.companyCode;
 
@@ -43,6 +52,9 @@ export class FlowController {
         tableName,
         dbSourceType,
         dbConnectionId,
+        restApiConnectionId,
+        restApiEndpoint,
+        restApiJsonPath,
         userCompanyCode,
       });
 
@@ -54,8 +66,12 @@ export class FlowController {
         return;
       }
 
-      // 테이블 이름이 제공된 경우에만 존재 확인
-      if (tableName) {
+      // REST API 또는 다중 연결인 경우 테이블 존재 확인 스킵
+      const isRestApi = dbSourceType === "restapi" || dbSourceType === "multi_restapi";
+      const isMultiConnection = dbSourceType === "multi_restapi" || dbSourceType === "multi_external_db";
+      
+      // 테이블 이름이 제공된 경우에만 존재 확인 (REST API 및 다중 연결 제외)
+      if (tableName && !isRestApi && !isMultiConnection && !tableName.startsWith("_restapi_") && !tableName.startsWith("_multi_restapi_") && !tableName.startsWith("_multi_external_db_")) {
         const tableExists =
           await this.flowDefinitionService.checkTableExists(tableName);
         if (!tableExists) {
@@ -68,7 +84,17 @@ export class FlowController {
       }
 
       const flowDef = await this.flowDefinitionService.create(
-        { name, description, tableName, dbSourceType, dbConnectionId },
+        { 
+          name, 
+          description, 
+          tableName, 
+          dbSourceType, 
+          dbConnectionId,
+          restApiConnectionId,
+          restApiEndpoint,
+          restApiJsonPath,
+          restApiConnections: req.body.restApiConnections, // 다중 REST API 설정
+        },
         userId,
         userCompanyCode
       );
diff --git a/backend-node/src/controllers/screenManagementController.ts b/backend-node/src/controllers/screenManagementController.ts
index 0ff80988..5605031e 100644
--- a/backend-node/src/controllers/screenManagementController.ts
+++ b/backend-node/src/controllers/screenManagementController.ts
@@ -148,11 +148,42 @@ export const updateScreenInfo = async (
   try {
     const { id } = req.params;
     const { companyCode } = req.user as any;
-    const { screenName, tableName, description, isActive } = req.body;
+    const {
+      screenName,
+      tableName,
+      description,
+      isActive,
+      // REST API 관련 필드 추가
+      dataSourceType,
+      dbSourceType,
+      dbConnectionId,
+      restApiConnectionId,
+      restApiEndpoint,
+      restApiJsonPath,
+    } = req.body;
+
+    console.log("화면 정보 수정 요청:", {
+      screenId: id,
+      dataSourceType,
+      restApiConnectionId,
+      restApiEndpoint,
+      restApiJsonPath,
+    });
 
     await screenManagementService.updateScreenInfo(
       parseInt(id),
-      { screenName, tableName, description, isActive },
+      {
+        screenName,
+        tableName,
+        description,
+        isActive,
+        dataSourceType,
+        dbSourceType,
+        dbConnectionId,
+        restApiConnectionId,
+        restApiEndpoint,
+        restApiJsonPath,
+      },
       companyCode
     );
     res.json({ success: true, message: "화면 정보가 수정되었습니다." });
@@ -294,6 +325,53 @@ export const getDeletedScreens = async (
   }
 };
 
+// 활성 화면 일괄 삭제 (휴지통으로 이동)
+export const bulkDeleteScreens = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
+  try {
+    const { companyCode, userId } = req.user as any;
+    const { screenIds, deleteReason, force } = req.body;
+
+    if (!Array.isArray(screenIds) || screenIds.length === 0) {
+      return res.status(400).json({
+        success: false,
+        message: "삭제할 화면 ID 목록이 필요합니다.",
+      });
+    }
+
+    const result = await screenManagementService.bulkDeleteScreens(
+      screenIds,
+      companyCode,
+      userId,
+      deleteReason,
+      force || false
+    );
+
+    let message = `${result.deletedCount}개 화면이 휴지통으로 이동되었습니다.`;
+    if (result.skippedCount > 0) {
+      message += ` (${result.skippedCount}개 화면은 삭제되지 않았습니다.)`;
+    }
+
+    return res.json({
+      success: true,
+      message,
+      result: {
+        deletedCount: result.deletedCount,
+        skippedCount: result.skippedCount,
+        errors: result.errors,
+      },
+    });
+  } catch (error) {
+    console.error("활성 화면 일괄 삭제 실패:", error);
+    return res.status(500).json({
+      success: false,
+      message: "일괄 삭제에 실패했습니다.",
+    });
+  }
+};
+
 // 휴지통 화면 일괄 영구 삭제
 export const bulkPermanentDeleteScreens = async (
   req: AuthenticatedRequest,
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index f552124f..4a80b007 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -870,6 +870,17 @@ export async function addTableData(
 
     const tableManagementService = new TableManagementService();
 
+    // 🆕 멀티테넌시: company_code 자동 추가 (테이블에 company_code 컬럼이 있는 경우)
+    const companyCode = req.user?.companyCode;
+    if (companyCode && !data.company_code) {
+      // 테이블에 company_code 컬럼이 있는지 확인
+      const hasCompanyCodeColumn = await tableManagementService.hasColumn(tableName, "company_code");
+      if (hasCompanyCodeColumn) {
+        data.company_code = companyCode;
+        logger.info(`🔒 멀티테넌시: company_code 자동 추가 - ${companyCode}`);
+      }
+    }
+
     // 데이터 추가
     await tableManagementService.addTableData(tableName, data);
 
diff --git a/backend-node/src/controllers/vehicleReportController.ts b/backend-node/src/controllers/vehicleReportController.ts
new file mode 100644
index 00000000..db17dd24
--- /dev/null
+++ b/backend-node/src/controllers/vehicleReportController.ts
@@ -0,0 +1,206 @@
+/**
+ * 차량 운행 리포트 컨트롤러
+ */
+import { Response } from "express";
+import { AuthenticatedRequest } from "../middleware/authMiddleware";
+import { vehicleReportService } from "../services/vehicleReportService";
+
+/**
+ * 일별 통계 조회
+ * GET /api/vehicle/reports/daily
+ */
+export const getDailyReport = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode } = req.user as any;
+    const { startDate, endDate, userId, vehicleId } = req.query;
+
+    console.log("📊 [getDailyReport] 요청:", { companyCode, startDate, endDate });
+
+    const result = await vehicleReportService.getDailyReport(companyCode, {
+      startDate: startDate as string,
+      endDate: endDate as string,
+      userId: userId as string,
+      vehicleId: vehicleId ? parseInt(vehicleId as string) : undefined,
+    });
+
+    res.json({
+      success: true,
+      data: result,
+    });
+  } catch (error: any) {
+    console.error("❌ [getDailyReport] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "일별 통계 조회에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 주별 통계 조회
+ * GET /api/vehicle/reports/weekly
+ */
+export const getWeeklyReport = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode } = req.user as any;
+    const { year, month, userId, vehicleId } = req.query;
+
+    console.log("📊 [getWeeklyReport] 요청:", { companyCode, year, month });
+
+    const result = await vehicleReportService.getWeeklyReport(companyCode, {
+      year: year ? parseInt(year as string) : new Date().getFullYear(),
+      month: month ? parseInt(month as string) : new Date().getMonth() + 1,
+      userId: userId as string,
+      vehicleId: vehicleId ? parseInt(vehicleId as string) : undefined,
+    });
+
+    res.json({
+      success: true,
+      data: result,
+    });
+  } catch (error: any) {
+    console.error("❌ [getWeeklyReport] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "주별 통계 조회에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 월별 통계 조회
+ * GET /api/vehicle/reports/monthly
+ */
+export const getMonthlyReport = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode } = req.user as any;
+    const { year, userId, vehicleId } = req.query;
+
+    console.log("📊 [getMonthlyReport] 요청:", { companyCode, year });
+
+    const result = await vehicleReportService.getMonthlyReport(companyCode, {
+      year: year ? parseInt(year as string) : new Date().getFullYear(),
+      userId: userId as string,
+      vehicleId: vehicleId ? parseInt(vehicleId as string) : undefined,
+    });
+
+    res.json({
+      success: true,
+      data: result,
+    });
+  } catch (error: any) {
+    console.error("❌ [getMonthlyReport] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "월별 통계 조회에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 요약 통계 조회 (대시보드용)
+ * GET /api/vehicle/reports/summary
+ */
+export const getSummaryReport = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode } = req.user as any;
+    const { period } = req.query; // today, week, month, year
+
+    console.log("📊 [getSummaryReport] 요청:", { companyCode, period });
+
+    const result = await vehicleReportService.getSummaryReport(
+      companyCode,
+      (period as string) || "today"
+    );
+
+    res.json({
+      success: true,
+      data: result,
+    });
+  } catch (error: any) {
+    console.error("❌ [getSummaryReport] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "요약 통계 조회에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 운전자별 통계 조회
+ * GET /api/vehicle/reports/by-driver
+ */
+export const getDriverReport = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode } = req.user as any;
+    const { startDate, endDate, limit } = req.query;
+
+    console.log("📊 [getDriverReport] 요청:", { companyCode, startDate, endDate });
+
+    const result = await vehicleReportService.getDriverReport(companyCode, {
+      startDate: startDate as string,
+      endDate: endDate as string,
+      limit: limit ? parseInt(limit as string) : 10,
+    });
+
+    res.json({
+      success: true,
+      data: result,
+    });
+  } catch (error: any) {
+    console.error("❌ [getDriverReport] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "운전자별 통계 조회에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 구간별 통계 조회
+ * GET /api/vehicle/reports/by-route
+ */
+export const getRouteReport = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode } = req.user as any;
+    const { startDate, endDate, limit } = req.query;
+
+    console.log("📊 [getRouteReport] 요청:", { companyCode, startDate, endDate });
+
+    const result = await vehicleReportService.getRouteReport(companyCode, {
+      startDate: startDate as string,
+      endDate: endDate as string,
+      limit: limit ? parseInt(limit as string) : 10,
+    });
+
+    res.json({
+      success: true,
+      data: result,
+    });
+  } catch (error: any) {
+    console.error("❌ [getRouteReport] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "구간별 통계 조회에 실패했습니다.",
+    });
+  }
+};
+
diff --git a/backend-node/src/controllers/vehicleTripController.ts b/backend-node/src/controllers/vehicleTripController.ts
new file mode 100644
index 00000000..d1604ede
--- /dev/null
+++ b/backend-node/src/controllers/vehicleTripController.ts
@@ -0,0 +1,301 @@
+/**
+ * 차량 운행 이력 컨트롤러
+ */
+import { Response } from "express";
+import { AuthenticatedRequest } from "../middleware/authMiddleware";
+import { vehicleTripService } from "../services/vehicleTripService";
+
+/**
+ * 운행 시작
+ * POST /api/vehicle/trip/start
+ */
+export const startTrip = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode, userId } = req.user as any;
+    const { vehicleId, departure, arrival, departureName, destinationName, latitude, longitude } = req.body;
+
+    console.log("🚗 [startTrip] 요청:", { userId, companyCode, departure, arrival });
+
+    if (latitude === undefined || longitude === undefined) {
+      return res.status(400).json({
+        success: false,
+        message: "위치 정보(latitude, longitude)가 필요합니다.",
+      });
+    }
+
+    const result = await vehicleTripService.startTrip({
+      userId,
+      companyCode,
+      vehicleId,
+      departure,
+      arrival,
+      departureName,
+      destinationName,
+      latitude,
+      longitude,
+    });
+
+    console.log("✅ [startTrip] 성공:", result);
+
+    res.json({
+      success: true,
+      data: result,
+      message: "운행이 시작되었습니다.",
+    });
+  } catch (error: any) {
+    console.error("❌ [startTrip] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "운행 시작에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 운행 종료
+ * POST /api/vehicle/trip/end
+ */
+export const endTrip = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode, userId } = req.user as any;
+    const { tripId, latitude, longitude } = req.body;
+
+    console.log("🚗 [endTrip] 요청:", { userId, companyCode, tripId });
+
+    if (!tripId) {
+      return res.status(400).json({
+        success: false,
+        message: "tripId가 필요합니다.",
+      });
+    }
+
+    if (latitude === undefined || longitude === undefined) {
+      return res.status(400).json({
+        success: false,
+        message: "위치 정보(latitude, longitude)가 필요합니다.",
+      });
+    }
+
+    const result = await vehicleTripService.endTrip({
+      tripId,
+      userId,
+      companyCode,
+      latitude,
+      longitude,
+    });
+
+    console.log("✅ [endTrip] 성공:", result);
+
+    res.json({
+      success: true,
+      data: result,
+      message: "운행이 종료되었습니다.",
+    });
+  } catch (error: any) {
+    console.error("❌ [endTrip] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "운행 종료에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 위치 기록 추가 (연속 추적)
+ * POST /api/vehicle/trip/location
+ */
+export const addTripLocation = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode, userId } = req.user as any;
+    const { tripId, latitude, longitude, accuracy, speed } = req.body;
+
+    if (!tripId) {
+      return res.status(400).json({
+        success: false,
+        message: "tripId가 필요합니다.",
+      });
+    }
+
+    if (latitude === undefined || longitude === undefined) {
+      return res.status(400).json({
+        success: false,
+        message: "위치 정보(latitude, longitude)가 필요합니다.",
+      });
+    }
+
+    const result = await vehicleTripService.addLocation({
+      tripId,
+      userId,
+      companyCode,
+      latitude,
+      longitude,
+      accuracy,
+      speed,
+    });
+
+    res.json({
+      success: true,
+      data: result,
+    });
+  } catch (error: any) {
+    console.error("❌ [addTripLocation] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "위치 기록에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 운행 이력 목록 조회
+ * GET /api/vehicle/trips
+ */
+export const getTripList = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode } = req.user as any;
+    const { userId, vehicleId, status, startDate, endDate, departure, arrival, limit, offset } = req.query;
+
+    console.log("🚗 [getTripList] 요청:", { companyCode, userId, status, startDate, endDate });
+
+    const result = await vehicleTripService.getTripList(companyCode, {
+      userId: userId as string,
+      vehicleId: vehicleId ? parseInt(vehicleId as string) : undefined,
+      status: status as string,
+      startDate: startDate as string,
+      endDate: endDate as string,
+      departure: departure as string,
+      arrival: arrival as string,
+      limit: limit ? parseInt(limit as string) : 50,
+      offset: offset ? parseInt(offset as string) : 0,
+    });
+
+    res.json({
+      success: true,
+      data: result.data,
+      total: result.total,
+    });
+  } catch (error: any) {
+    console.error("❌ [getTripList] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "운행 이력 조회에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 운행 상세 조회 (경로 포함)
+ * GET /api/vehicle/trips/:tripId
+ */
+export const getTripDetail = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode } = req.user as any;
+    const { tripId } = req.params;
+
+    console.log("🚗 [getTripDetail] 요청:", { companyCode, tripId });
+
+    const result = await vehicleTripService.getTripDetail(tripId, companyCode);
+
+    if (!result) {
+      return res.status(404).json({
+        success: false,
+        message: "운행 정보를 찾을 수 없습니다.",
+      });
+    }
+
+    res.json({
+      success: true,
+      data: result,
+    });
+  } catch (error: any) {
+    console.error("❌ [getTripDetail] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "운행 상세 조회에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 활성 운행 조회 (현재 진행 중)
+ * GET /api/vehicle/trip/active
+ */
+export const getActiveTrip = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode, userId } = req.user as any;
+
+    const result = await vehicleTripService.getActiveTrip(userId, companyCode);
+
+    res.json({
+      success: true,
+      data: result,
+      hasActiveTrip: !!result,
+    });
+  } catch (error: any) {
+    console.error("❌ [getActiveTrip] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "활성 운행 조회에 실패했습니다.",
+    });
+  }
+};
+
+/**
+ * 운행 취소
+ * POST /api/vehicle/trip/cancel
+ */
+export const cancelTrip = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response | void> => {
+  try {
+    const { companyCode } = req.user as any;
+    const { tripId } = req.body;
+
+    if (!tripId) {
+      return res.status(400).json({
+        success: false,
+        message: "tripId가 필요합니다.",
+      });
+    }
+
+    const result = await vehicleTripService.cancelTrip(tripId, companyCode);
+
+    if (!result) {
+      return res.status(404).json({
+        success: false,
+        message: "취소할 운행을 찾을 수 없습니다.",
+      });
+    }
+
+    res.json({
+      success: true,
+      message: "운행이 취소되었습니다.",
+    });
+  } catch (error: any) {
+    console.error("❌ [cancelTrip] 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: error.message || "운행 취소에 실패했습니다.",
+    });
+  }
+};
+
diff --git a/backend-node/src/routes/screenManagementRoutes.ts b/backend-node/src/routes/screenManagementRoutes.ts
index 4207c719..67263277 100644
--- a/backend-node/src/routes/screenManagementRoutes.ts
+++ b/backend-node/src/routes/screenManagementRoutes.ts
@@ -8,6 +8,7 @@ import {
   updateScreen,
   updateScreenInfo,
   deleteScreen,
+  bulkDeleteScreens,
   checkScreenDependencies,
   restoreScreen,
   permanentDeleteScreen,
@@ -44,6 +45,7 @@ router.put("/screens/:id", updateScreen);
 router.put("/screens/:id/info", updateScreenInfo); // 화면 정보만 수정
 router.get("/screens/:id/dependencies", checkScreenDependencies); // 의존성 체크
 router.delete("/screens/:id", deleteScreen); // 휴지통으로 이동
+router.delete("/screens/bulk/delete", bulkDeleteScreens); // 활성 화면 일괄 삭제 (휴지통으로 이동)
 router.get("/screens/:id/linked-modals", detectLinkedScreens); // 연결된 모달 화면 감지
 router.post("/screens/check-duplicate-name", checkDuplicateScreenName); // 화면명 중복 체크
 router.post("/screens/:id/copy", copyScreen); // 단일 화면 복사 (하위 호환용)
diff --git a/backend-node/src/routes/vehicleTripRoutes.ts b/backend-node/src/routes/vehicleTripRoutes.ts
new file mode 100644
index 00000000..c70a7394
--- /dev/null
+++ b/backend-node/src/routes/vehicleTripRoutes.ts
@@ -0,0 +1,71 @@
+/**
+ * 차량 운행 이력 및 리포트 라우트
+ */
+import { Router } from "express";
+import {
+  startTrip,
+  endTrip,
+  addTripLocation,
+  getTripList,
+  getTripDetail,
+  getActiveTrip,
+  cancelTrip,
+} from "../controllers/vehicleTripController";
+import {
+  getDailyReport,
+  getWeeklyReport,
+  getMonthlyReport,
+  getSummaryReport,
+  getDriverReport,
+  getRouteReport,
+} from "../controllers/vehicleReportController";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+const router = Router();
+
+// 모든 라우트에 인증 적용
+router.use(authenticateToken);
+
+// === 운행 관리 ===
+// 운행 시작
+router.post("/trip/start", startTrip);
+
+// 운행 종료
+router.post("/trip/end", endTrip);
+
+// 위치 기록 추가 (연속 추적)
+router.post("/trip/location", addTripLocation);
+
+// 활성 운행 조회 (현재 진행 중)
+router.get("/trip/active", getActiveTrip);
+
+// 운행 취소
+router.post("/trip/cancel", cancelTrip);
+
+// 운행 이력 목록 조회
+router.get("/trips", getTripList);
+
+// 운행 상세 조회 (경로 포함)
+router.get("/trips/:tripId", getTripDetail);
+
+// === 리포트 ===
+// 요약 통계 (대시보드용)
+router.get("/reports/summary", getSummaryReport);
+
+// 일별 통계
+router.get("/reports/daily", getDailyReport);
+
+// 주별 통계
+router.get("/reports/weekly", getWeeklyReport);
+
+// 월별 통계
+router.get("/reports/monthly", getMonthlyReport);
+
+// 운전자별 통계
+router.get("/reports/by-driver", getDriverReport);
+
+// 구간별 통계
+router.get("/reports/by-route", getRouteReport);
+
+export default router;
+
diff --git a/backend-node/src/services/externalRestApiConnectionService.ts b/backend-node/src/services/externalRestApiConnectionService.ts
index 63622951..2632a6e6 100644
--- a/backend-node/src/services/externalRestApiConnectionService.ts
+++ b/backend-node/src/services/externalRestApiConnectionService.ts
@@ -1094,4 +1094,150 @@ export class ExternalRestApiConnectionService {
       throw new Error("올바르지 않은 인증 타입입니다.");
     }
   }
+
+  /**
+   * 다중 REST API 데이터 조회 및 병합
+   * 여러 REST API의 응답을 병합하여 하나의 데이터셋으로 반환
+   */
+  static async fetchMultipleData(
+    configs: Array<{
+      connectionId: number;
+      endpoint: string;
+      jsonPath: string;
+      alias: string;
+    }>,
+    userCompanyCode?: string
+  ): Promise<ApiResponse<{
+    rows: any[];
+    columns: Array<{ columnName: string; columnLabel: string; dataType: string; sourceApi: string }>;
+    total: number;
+    sources: Array<{ connectionId: number; connectionName: string; rowCount: number }>;
+  }>> {
+    try {
+      logger.info(`다중 REST API 데이터 조회 시작: ${configs.length}개 API`);
+      
+      // 각 API에서 데이터 조회
+      const results = await Promise.all(
+        configs.map(async (config) => {
+          try {
+            const result = await this.fetchData(
+              config.connectionId,
+              config.endpoint,
+              config.jsonPath,
+              userCompanyCode
+            );
+            
+            if (result.success && result.data) {
+              return {
+                success: true,
+                connectionId: config.connectionId,
+                connectionName: result.data.connectionInfo.connectionName,
+                alias: config.alias,
+                rows: result.data.rows,
+                columns: result.data.columns,
+              };
+            } else {
+              logger.warn(`API ${config.connectionId} 조회 실패:`, result.message);
+              return {
+                success: false,
+                connectionId: config.connectionId,
+                connectionName: "",
+                alias: config.alias,
+                rows: [],
+                columns: [],
+                error: result.message,
+              };
+            }
+          } catch (error) {
+            logger.error(`API ${config.connectionId} 조회 오류:`, error);
+            return {
+              success: false,
+              connectionId: config.connectionId,
+              connectionName: "",
+              alias: config.alias,
+              rows: [],
+              columns: [],
+              error: error instanceof Error ? error.message : "알 수 없는 오류",
+            };
+          }
+        })
+      );
+
+      // 성공한 결과만 필터링
+      const successfulResults = results.filter(r => r.success);
+      
+      if (successfulResults.length === 0) {
+        return {
+          success: false,
+          message: "모든 REST API 조회에 실패했습니다.",
+          error: {
+            code: "ALL_APIS_FAILED",
+            details: results.map(r => ({ connectionId: r.connectionId, error: r.error })),
+          },
+        };
+      }
+
+      // 컬럼 병합 (별칭 적용)
+      const mergedColumns: Array<{ columnName: string; columnLabel: string; dataType: string; sourceApi: string }> = [];
+      
+      for (const result of successfulResults) {
+        for (const col of result.columns) {
+          const prefixedColumnName = result.alias ? `${result.alias}${col.columnName}` : col.columnName;
+          mergedColumns.push({
+            columnName: prefixedColumnName,
+            columnLabel: `${col.columnLabel} (${result.connectionName})`,
+            dataType: col.dataType,
+            sourceApi: result.connectionName,
+          });
+        }
+      }
+
+      // 데이터 병합 (가로 병합: 각 API의 첫 번째 행끼리 병합)
+      // 참고: 실제 사용 시에는 조인 키가 필요할 수 있음
+      const maxRows = Math.max(...successfulResults.map(r => r.rows.length));
+      const mergedRows: any[] = [];
+
+      for (let i = 0; i < maxRows; i++) {
+        const mergedRow: any = {};
+        
+        for (const result of successfulResults) {
+          const row = result.rows[i] || {};
+          
+          for (const [key, value] of Object.entries(row)) {
+            const prefixedKey = result.alias ? `${result.alias}${key}` : key;
+            mergedRow[prefixedKey] = value;
+          }
+        }
+        
+        mergedRows.push(mergedRow);
+      }
+
+      logger.info(`다중 REST API 데이터 병합 완료: ${mergedRows.length}개 행, ${mergedColumns.length}개 컬럼`);
+
+      return {
+        success: true,
+        data: {
+          rows: mergedRows,
+          columns: mergedColumns,
+          total: mergedRows.length,
+          sources: successfulResults.map(r => ({
+            connectionId: r.connectionId,
+            connectionName: r.connectionName,
+            rowCount: r.rows.length,
+          })),
+        },
+        message: `${successfulResults.length}개 API에서 총 ${mergedRows.length}개 데이터를 조회했습니다.`,
+      };
+    } catch (error) {
+      logger.error("다중 REST API 데이터 조회 오류:", error);
+      return {
+        success: false,
+        message: "다중 REST API 데이터 조회에 실패했습니다.",
+        error: {
+          code: "MULTI_FETCH_ERROR",
+          details: error instanceof Error ? error.message : "알 수 없는 오류",
+        },
+      };
+    }
+  }
 }
diff --git a/backend-node/src/services/flowDefinitionService.ts b/backend-node/src/services/flowDefinitionService.ts
index 759178c1..80c920ad 100644
--- a/backend-node/src/services/flowDefinitionService.ts
+++ b/backend-node/src/services/flowDefinitionService.ts
@@ -27,13 +27,21 @@ export class FlowDefinitionService {
       tableName: request.tableName,
       dbSourceType: request.dbSourceType,
       dbConnectionId: request.dbConnectionId,
+      restApiConnectionId: request.restApiConnectionId,
+      restApiEndpoint: request.restApiEndpoint,
+      restApiJsonPath: request.restApiJsonPath,
+      restApiConnections: request.restApiConnections,
       companyCode,
       userId,
     });
 
     const query = `
-      INSERT INTO flow_definition (name, description, table_name, db_source_type, db_connection_id, company_code, created_by)
-      VALUES ($1, $2, $3, $4, $5, $6, $7)
+      INSERT INTO flow_definition (
+        name, description, table_name, db_source_type, db_connection_id, 
+        rest_api_connection_id, rest_api_endpoint, rest_api_json_path,
+        rest_api_connections, company_code, created_by
+      )
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)
       RETURNING *
     `;
 
@@ -43,6 +51,10 @@ export class FlowDefinitionService {
       request.tableName || null,
       request.dbSourceType || "internal",
       request.dbConnectionId || null,
+      request.restApiConnectionId || null,
+      request.restApiEndpoint || null,
+      request.restApiJsonPath || "response",
+      request.restApiConnections ? JSON.stringify(request.restApiConnections) : null,
       companyCode,
       userId,
     ];
@@ -199,6 +211,19 @@ export class FlowDefinitionService {
    * DB 행을 FlowDefinition 객체로 변환
    */
   private mapToFlowDefinition(row: any): FlowDefinition {
+    // rest_api_connections 파싱 (JSONB → 배열)
+    let restApiConnections = undefined;
+    if (row.rest_api_connections) {
+      try {
+        restApiConnections = typeof row.rest_api_connections === 'string' 
+          ? JSON.parse(row.rest_api_connections) 
+          : row.rest_api_connections;
+      } catch (e) {
+        console.warn("Failed to parse rest_api_connections:", e);
+        restApiConnections = [];
+      }
+    }
+
     return {
       id: row.id,
       name: row.name,
@@ -206,6 +231,12 @@ export class FlowDefinitionService {
       tableName: row.table_name,
       dbSourceType: row.db_source_type || "internal",
       dbConnectionId: row.db_connection_id,
+      // REST API 관련 필드 (단일)
+      restApiConnectionId: row.rest_api_connection_id,
+      restApiEndpoint: row.rest_api_endpoint,
+      restApiJsonPath: row.rest_api_json_path,
+      // 다중 REST API 관련 필드
+      restApiConnections: restApiConnections,
       companyCode: row.company_code || "*",
       isActive: row.is_active,
       createdBy: row.created_by,
diff --git a/backend-node/src/services/menuCopyService.ts b/backend-node/src/services/menuCopyService.ts
index 70b45af4..a0e707c1 100644
--- a/backend-node/src/services/menuCopyService.ts
+++ b/backend-node/src/services/menuCopyService.ts
@@ -53,6 +53,7 @@ interface ScreenDefinition {
   layout_metadata: any;
   db_source_type: string | null;
   db_connection_id: number | null;
+  source_screen_id: number | null; // 원본 화면 ID (복사 추적용)
 }
 
 /**
@@ -234,6 +235,27 @@ export class MenuCopyService {
           }
         }
       }
+
+      // 4) 화면 분할 패널 (screen-split-panel: leftScreenId, rightScreenId)
+      if (props?.componentConfig?.leftScreenId) {
+        const leftScreenId = props.componentConfig.leftScreenId;
+        const numId =
+          typeof leftScreenId === "number" ? leftScreenId : parseInt(leftScreenId);
+        if (!isNaN(numId) && numId > 0) {
+          referenced.push(numId);
+          logger.debug(`    📐 분할 패널 좌측 화면 참조 발견: ${numId}`);
+        }
+      }
+
+      if (props?.componentConfig?.rightScreenId) {
+        const rightScreenId = props.componentConfig.rightScreenId;
+        const numId =
+          typeof rightScreenId === "number" ? rightScreenId : parseInt(rightScreenId);
+        if (!isNaN(numId) && numId > 0) {
+          referenced.push(numId);
+          logger.debug(`    📐 분할 패널 우측 화면 참조 발견: ${numId}`);
+        }
+      }
     }
 
     return referenced;
@@ -431,14 +453,16 @@ export class MenuCopyService {
       const value = obj[key];
       const currentPath = path ? `${path}.${key}` : key;
 
-      // screen_id, screenId, targetScreenId 매핑 (숫자 또는 숫자 문자열)
+      // screen_id, screenId, targetScreenId, leftScreenId, rightScreenId 매핑 (숫자 또는 숫자 문자열)
       if (
         key === "screen_id" ||
         key === "screenId" ||
-        key === "targetScreenId"
+        key === "targetScreenId" ||
+        key === "leftScreenId" ||
+        key === "rightScreenId"
       ) {
         const numValue = typeof value === "number" ? value : parseInt(value);
-        if (!isNaN(numValue)) {
+        if (!isNaN(numValue) && numValue > 0) {
           const newId = screenIdMap.get(numValue);
           if (newId) {
             obj[key] = typeof value === "number" ? newId : String(newId); // 원래 타입 유지
@@ -856,7 +880,10 @@ export class MenuCopyService {
   }
 
   /**
-   * 화면 복사
+   * 화면 복사 (업데이트 또는 신규 생성)
+   * - source_screen_id로 기존 복사본 찾기
+   * - 변경된 내용이 있으면 업데이트
+   * - 없으면 새로 복사
    */
   private async copyScreens(
     screenIds: Set<number>,
@@ -876,18 +903,19 @@ export class MenuCopyService {
       return screenIdMap;
     }
 
-    logger.info(`📄 화면 복사 중: ${screenIds.size}개`);
+    logger.info(`📄 화면 복사/업데이트 중: ${screenIds.size}개`);
 
-    // === 1단계: 모든 screen_definitions 먼저 복사 (screenIdMap 생성) ===
+    // === 1단계: 모든 screen_definitions 처리 (screenIdMap 생성) ===
     const screenDefsToProcess: Array<{
       originalScreenId: number;
-      newScreenId: number;
+      targetScreenId: number;
       screenDef: ScreenDefinition;
+      isUpdate: boolean; // 업데이트인지 신규 생성인지
     }> = [];
 
     for (const originalScreenId of screenIds) {
       try {
-        // 1) screen_definitions 조회
+        // 1) 원본 screen_definitions 조회
         const screenDefResult = await client.query<ScreenDefinition>(
           `SELECT * FROM screen_definitions WHERE screen_id = $1`,
           [originalScreenId]
@@ -900,122 +928,198 @@ export class MenuCopyService {
 
         const screenDef = screenDefResult.rows[0];
 
-        // 2) 중복 체크: 같은 screen_code가 대상 회사에 이미 있는지 확인
-        const existingScreenResult = await client.query<{ screen_id: number }>(
-          `SELECT screen_id FROM screen_definitions 
-           WHERE screen_code = $1 AND company_code = $2 AND deleted_date IS NULL
+        // 2) 기존 복사본 찾기: source_screen_id로 검색
+        const existingCopyResult = await client.query<{
+          screen_id: number;
+          screen_name: string;
+          updated_date: Date;
+        }>(
+          `SELECT screen_id, screen_name, updated_date 
+           FROM screen_definitions 
+           WHERE source_screen_id = $1 AND company_code = $2 AND deleted_date IS NULL
            LIMIT 1`,
-          [screenDef.screen_code, targetCompanyCode]
+          [originalScreenId, targetCompanyCode]
         );
 
-        if (existingScreenResult.rows.length > 0) {
-          // 이미 존재하는 화면 - 복사하지 않고 기존 ID 매핑
-          const existingScreenId = existingScreenResult.rows[0].screen_id;
-          screenIdMap.set(originalScreenId, existingScreenId);
-          logger.info(
-            `  ⏭️  화면 이미 존재 (스킵): ${originalScreenId} → ${existingScreenId} (${screenDef.screen_code})`
-          );
-          continue; // 레이아웃 복사도 스킵
-        }
-
-        // 3) 새 screen_code 생성
-        const newScreenCode = await this.generateUniqueScreenCode(
-          targetCompanyCode,
-          client
-        );
-
-        // 4) 화면명 변환 적용
+        // 3) 화면명 변환 적용
         let transformedScreenName = screenDef.screen_name;
         if (screenNameConfig) {
-          // 1. 제거할 텍스트 제거
           if (screenNameConfig.removeText?.trim()) {
             transformedScreenName = transformedScreenName.replace(
               new RegExp(screenNameConfig.removeText.trim(), "g"),
               ""
             );
-            transformedScreenName = transformedScreenName.trim(); // 앞뒤 공백 제거
+            transformedScreenName = transformedScreenName.trim();
           }
-
-          // 2. 접두사 추가
           if (screenNameConfig.addPrefix?.trim()) {
             transformedScreenName =
               screenNameConfig.addPrefix.trim() + " " + transformedScreenName;
           }
         }
 
-        // 5) screen_definitions 복사 (deleted 필드는 NULL로 설정, 삭제된 화면도 활성화)
-        const newScreenResult = await client.query<{ screen_id: number }>(
-          `INSERT INTO screen_definitions (
-            screen_name, screen_code, table_name, company_code,
-            description, is_active, layout_metadata,
-            db_source_type, db_connection_id, created_by,
-            deleted_date, deleted_by, delete_reason
-          ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13)
-          RETURNING screen_id`,
-          [
-            transformedScreenName, // 변환된 화면명
-            newScreenCode, // 새 화면 코드
-            screenDef.table_name,
-            targetCompanyCode, // 새 회사 코드
-            screenDef.description,
-            screenDef.is_active === "D" ? "Y" : screenDef.is_active, // 삭제된 화면은 활성화
-            screenDef.layout_metadata,
-            screenDef.db_source_type,
-            screenDef.db_connection_id,
-            userId,
-            null, // deleted_date: NULL (새 화면은 삭제되지 않음)
-            null, // deleted_by: NULL
-            null, // delete_reason: NULL
-          ]
-        );
+        if (existingCopyResult.rows.length > 0) {
+          // === 기존 복사본이 있는 경우: 업데이트 ===
+          const existingScreen = existingCopyResult.rows[0];
+          const existingScreenId = existingScreen.screen_id;
 
-        const newScreenId = newScreenResult.rows[0].screen_id;
-        screenIdMap.set(originalScreenId, newScreenId);
+          // 원본 레이아웃 조회
+          const sourceLayoutsResult = await client.query<ScreenLayout>(
+            `SELECT * FROM screen_layouts WHERE screen_id = $1 ORDER BY display_order`,
+            [originalScreenId]
+          );
 
-        logger.info(
-          `  ✅ 화면 정의 복사: ${originalScreenId} → ${newScreenId} (${screenDef.screen_name})`
-        );
+          // 대상 레이아웃 조회
+          const targetLayoutsResult = await client.query<ScreenLayout>(
+            `SELECT * FROM screen_layouts WHERE screen_id = $1 ORDER BY display_order`,
+            [existingScreenId]
+          );
 
-        // 저장해서 2단계에서 처리
-        screenDefsToProcess.push({ originalScreenId, newScreenId, screenDef });
+          // 변경 여부 확인 (레이아웃 개수 또는 내용 비교)
+          const hasChanges = this.hasLayoutChanges(
+            sourceLayoutsResult.rows,
+            targetLayoutsResult.rows
+          );
+
+          if (hasChanges) {
+            // 변경 사항이 있으면 업데이트
+            logger.info(
+              `  🔄 화면 업데이트 필요: ${originalScreenId} → ${existingScreenId} (${screenDef.screen_name})`
+            );
+
+            // screen_definitions 업데이트
+            await client.query(
+              `UPDATE screen_definitions SET
+                screen_name = $1,
+                table_name = $2,
+                description = $3,
+                is_active = $4,
+                layout_metadata = $5,
+                db_source_type = $6,
+                db_connection_id = $7,
+                updated_by = $8,
+                updated_date = NOW()
+              WHERE screen_id = $9`,
+              [
+                transformedScreenName,
+                screenDef.table_name,
+                screenDef.description,
+                screenDef.is_active === "D" ? "Y" : screenDef.is_active,
+                screenDef.layout_metadata,
+                screenDef.db_source_type,
+                screenDef.db_connection_id,
+                userId,
+                existingScreenId,
+              ]
+            );
+
+            screenIdMap.set(originalScreenId, existingScreenId);
+            screenDefsToProcess.push({
+              originalScreenId,
+              targetScreenId: existingScreenId,
+              screenDef,
+              isUpdate: true,
+            });
+          } else {
+            // 변경 사항이 없으면 스킵
+            screenIdMap.set(originalScreenId, existingScreenId);
+            logger.info(
+              `  ⏭️  화면 변경 없음 (스킵): ${originalScreenId} → ${existingScreenId} (${screenDef.screen_name})`
+            );
+          }
+        } else {
+          // === 기존 복사본이 없는 경우: 신규 생성 ===
+          const newScreenCode = await this.generateUniqueScreenCode(
+            targetCompanyCode,
+            client
+          );
+
+          const newScreenResult = await client.query<{ screen_id: number }>(
+            `INSERT INTO screen_definitions (
+              screen_name, screen_code, table_name, company_code,
+              description, is_active, layout_metadata,
+              db_source_type, db_connection_id, created_by,
+              deleted_date, deleted_by, delete_reason, source_screen_id
+            ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
+            RETURNING screen_id`,
+            [
+              transformedScreenName,
+              newScreenCode,
+              screenDef.table_name,
+              targetCompanyCode,
+              screenDef.description,
+              screenDef.is_active === "D" ? "Y" : screenDef.is_active,
+              screenDef.layout_metadata,
+              screenDef.db_source_type,
+              screenDef.db_connection_id,
+              userId,
+              null,
+              null,
+              null,
+              originalScreenId, // source_screen_id 저장
+            ]
+          );
+
+          const newScreenId = newScreenResult.rows[0].screen_id;
+          screenIdMap.set(originalScreenId, newScreenId);
+
+          logger.info(
+            `  ✅ 화면 신규 복사: ${originalScreenId} → ${newScreenId} (${screenDef.screen_name})`
+          );
+
+          screenDefsToProcess.push({
+            originalScreenId,
+            targetScreenId: newScreenId,
+            screenDef,
+            isUpdate: false,
+          });
+        }
       } catch (error: any) {
         logger.error(
-          `❌ 화면 정의 복사 실패: screen_id=${originalScreenId}`,
+          `❌ 화면 처리 실패: screen_id=${originalScreenId}`,
           error
         );
         throw error;
       }
     }
 
-    // === 2단계: screen_layouts 복사 (이제 screenIdMap이 완성됨) ===
+    // === 2단계: screen_layouts 처리 (이제 screenIdMap이 완성됨) ===
     logger.info(
-      `\n📐 레이아웃 복사 시작 (screenIdMap 완성: ${screenIdMap.size}개)`
+      `\n📐 레이아웃 처리 시작 (screenIdMap 완성: ${screenIdMap.size}개)`
     );
 
     for (const {
       originalScreenId,
-      newScreenId,
+      targetScreenId,
       screenDef,
+      isUpdate,
     } of screenDefsToProcess) {
       try {
-        // screen_layouts 복사
+        // 원본 레이아웃 조회
         const layoutsResult = await client.query<ScreenLayout>(
           `SELECT * FROM screen_layouts WHERE screen_id = $1 ORDER BY display_order`,
           [originalScreenId]
         );
 
-        // 1단계: component_id 매핑 생성 (원본 → 새 ID)
+        if (isUpdate) {
+          // 업데이트: 기존 레이아웃 삭제 후 새로 삽입
+          await client.query(
+            `DELETE FROM screen_layouts WHERE screen_id = $1`,
+            [targetScreenId]
+          );
+          logger.info(`    ↳ 기존 레이아웃 삭제 (업데이트 준비)`);
+        }
+
+        // component_id 매핑 생성 (원본 → 새 ID)
         const componentIdMap = new Map<string, string>();
         for (const layout of layoutsResult.rows) {
           const newComponentId = `comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
           componentIdMap.set(layout.component_id, newComponentId);
         }
 
-        // 2단계: screen_layouts 복사 (parent_id, zone_id도 매핑)
+        // 레이아웃 삽입
         for (const layout of layoutsResult.rows) {
           const newComponentId = componentIdMap.get(layout.component_id)!;
 
-          // parent_id와 zone_id 매핑 (다른 컴포넌트를 참조하는 경우)
           const newParentId = layout.parent_id
             ? componentIdMap.get(layout.parent_id) || layout.parent_id
             : null;
@@ -1023,7 +1127,6 @@ export class MenuCopyService {
             ? componentIdMap.get(layout.zone_id) || layout.zone_id
             : null;
 
-          // properties 내부 참조 업데이트
           const updatedProperties = this.updateReferencesInProperties(
             layout.properties,
             screenIdMap,
@@ -1037,38 +1140,94 @@ export class MenuCopyService {
               display_order, layout_type, layout_config, zones_config, zone_id
             ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)`,
             [
-              newScreenId, // 새 화면 ID
+              targetScreenId,
               layout.component_type,
-              newComponentId, // 새 컴포넌트 ID
-              newParentId, // 매핑된 parent_id
+              newComponentId,
+              newParentId,
               layout.position_x,
               layout.position_y,
               layout.width,
               layout.height,
-              updatedProperties, // 업데이트된 속성
+              updatedProperties,
               layout.display_order,
               layout.layout_type,
               layout.layout_config,
               layout.zones_config,
-              newZoneId, // 매핑된 zone_id
+              newZoneId,
             ]
           );
         }
 
-        logger.info(`    ↳ 레이아웃 복사: ${layoutsResult.rows.length}개`);
+        const action = isUpdate ? "업데이트" : "복사";
+        logger.info(`    ↳ 레이아웃 ${action}: ${layoutsResult.rows.length}개`);
       } catch (error: any) {
         logger.error(
-          `❌ 레이아웃 복사 실패: screen_id=${originalScreenId}`,
+          `❌ 레이아웃 처리 실패: screen_id=${originalScreenId}`,
           error
         );
         throw error;
       }
     }
 
-    logger.info(`\n✅ 화면 복사 완료: ${screenIdMap.size}개`);
+    // 통계 출력
+    const newCount = screenDefsToProcess.filter((s) => !s.isUpdate).length;
+    const updateCount = screenDefsToProcess.filter((s) => s.isUpdate).length;
+    const skipCount = screenIds.size - screenDefsToProcess.length;
+
+    logger.info(`
+✅ 화면 처리 완료:
+   - 신규 복사: ${newCount}개
+   - 업데이트: ${updateCount}개
+   - 스킵 (변경 없음): ${skipCount}개
+   - 총 매핑: ${screenIdMap.size}개
+    `);
+
     return screenIdMap;
   }
 
+  /**
+   * 레이아웃 변경 여부 확인
+   */
+  private hasLayoutChanges(
+    sourceLayouts: ScreenLayout[],
+    targetLayouts: ScreenLayout[]
+  ): boolean {
+    // 1. 레이아웃 개수가 다르면 변경됨
+    if (sourceLayouts.length !== targetLayouts.length) {
+      return true;
+    }
+
+    // 2. 각 레이아웃의 주요 속성 비교
+    for (let i = 0; i < sourceLayouts.length; i++) {
+      const source = sourceLayouts[i];
+      const target = targetLayouts[i];
+
+      // component_type이 다르면 변경됨
+      if (source.component_type !== target.component_type) {
+        return true;
+      }
+
+      // 위치/크기가 다르면 변경됨
+      if (
+        source.position_x !== target.position_x ||
+        source.position_y !== target.position_y ||
+        source.width !== target.width ||
+        source.height !== target.height
+      ) {
+        return true;
+      }
+
+      // properties의 JSON 문자열 비교 (깊은 비교)
+      const sourceProps = JSON.stringify(source.properties || {});
+      const targetProps = JSON.stringify(target.properties || {});
+      if (sourceProps !== targetProps) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
   /**
    * 메뉴 위상 정렬 (부모 먼저)
    */
diff --git a/backend-node/src/services/riskAlertService.ts b/backend-node/src/services/riskAlertService.ts
index f3561bbe..03a3fdf1 100644
--- a/backend-node/src/services/riskAlertService.ts
+++ b/backend-node/src/services/riskAlertService.ts
@@ -47,9 +47,24 @@ export class RiskAlertService {
 
         console.log('✅ 기상청 특보 현황 API 응답 수신 완료');
 
-        // 텍스트 응답 파싱 (EUC-KR 인코딩)
+        // 텍스트 응답 파싱 (인코딩 자동 감지)
         const iconv = require('iconv-lite');
-        const responseText = iconv.decode(Buffer.from(warningResponse.data), 'EUC-KR');
+        const buffer = Buffer.from(warningResponse.data);
+        
+        // UTF-8 먼저 시도, 실패하면 EUC-KR 시도
+        let responseText: string;
+        const utf8Text = buffer.toString('utf-8');
+        
+        // UTF-8로 정상 디코딩되었는지 확인 (한글이 깨지지 않았는지)
+        if (utf8Text.includes('특보') || utf8Text.includes('경보') || utf8Text.includes('주의보') || 
+            (utf8Text.includes('#START7777') && !utf8Text.includes('�'))) {
+          responseText = utf8Text;
+          console.log('📝 UTF-8 인코딩으로 디코딩');
+        } else {
+          // EUC-KR로 디코딩
+          responseText = iconv.decode(buffer, 'EUC-KR');
+          console.log('📝 EUC-KR 인코딩으로 디코딩');
+        }
         
         if (typeof responseText === 'string' && responseText.includes('#START7777')) {
           const lines = responseText.split('\n');
diff --git a/backend-node/src/services/screenManagementService.ts b/backend-node/src/services/screenManagementService.ts
index 71550fd6..6628cf4c 100644
--- a/backend-node/src/services/screenManagementService.ts
+++ b/backend-node/src/services/screenManagementService.ts
@@ -326,7 +326,19 @@ export class ScreenManagementService {
    */
   async updateScreenInfo(
     screenId: number,
-    updateData: { screenName: string; tableName?: string; description?: string; isActive: string },
+    updateData: {
+      screenName: string;
+      tableName?: string;
+      description?: string;
+      isActive: string;
+      // REST API 관련 필드 추가
+      dataSourceType?: string;
+      dbSourceType?: string;
+      dbConnectionId?: number;
+      restApiConnectionId?: number;
+      restApiEndpoint?: string;
+      restApiJsonPath?: string;
+    },
     userCompanyCode: string
   ): Promise<void> {
     // 권한 확인
@@ -348,24 +360,43 @@ export class ScreenManagementService {
       throw new Error("이 화면을 수정할 권한이 없습니다.");
     }
 
-    // 화면 정보 업데이트 (tableName 포함)
+    // 화면 정보 업데이트 (REST API 필드 포함)
     await query(
       `UPDATE screen_definitions
        SET screen_name = $1,
            table_name = $2,
            description = $3,
            is_active = $4,
-           updated_date = $5
-       WHERE screen_id = $6`,
+           updated_date = $5,
+           data_source_type = $6,
+           db_source_type = $7,
+           db_connection_id = $8,
+           rest_api_connection_id = $9,
+           rest_api_endpoint = $10,
+           rest_api_json_path = $11
+       WHERE screen_id = $12`,
       [
         updateData.screenName,
         updateData.tableName || null,
         updateData.description || null,
         updateData.isActive,
         new Date(),
+        updateData.dataSourceType || "database",
+        updateData.dbSourceType || "internal",
+        updateData.dbConnectionId || null,
+        updateData.restApiConnectionId || null,
+        updateData.restApiEndpoint || null,
+        updateData.restApiJsonPath || null,
         screenId,
       ]
     );
+
+    console.log(`화면 정보 업데이트 완료: screenId=${screenId}`, {
+      dataSourceType: updateData.dataSourceType,
+      restApiConnectionId: updateData.restApiConnectionId,
+      restApiEndpoint: updateData.restApiEndpoint,
+      restApiJsonPath: updateData.restApiJsonPath,
+    });
   }
 
   /**
@@ -861,6 +892,134 @@ export class ScreenManagementService {
     };
   }
 
+  /**
+   * 활성 화면 일괄 삭제 (휴지통으로 이동)
+   */
+  async bulkDeleteScreens(
+    screenIds: number[],
+    userCompanyCode: string,
+    deletedBy: string,
+    deleteReason?: string,
+    force: boolean = false
+  ): Promise<{
+    deletedCount: number;
+    skippedCount: number;
+    errors: Array<{ screenId: number; error: string }>;
+  }> {
+    if (screenIds.length === 0) {
+      throw new Error("삭제할 화면을 선택해주세요.");
+    }
+
+    let deletedCount = 0;
+    let skippedCount = 0;
+    const errors: Array<{ screenId: number; error: string }> = [];
+
+    // 각 화면을 개별적으로 삭제 처리
+    for (const screenId of screenIds) {
+      try {
+        // 권한 확인 (Raw Query)
+        const existingResult = await query<{
+          company_code: string | null;
+          is_active: string;
+          screen_name: string;
+        }>(
+          `SELECT company_code, is_active, screen_name FROM screen_definitions WHERE screen_id = $1 LIMIT 1`,
+          [screenId]
+        );
+
+        if (existingResult.length === 0) {
+          skippedCount++;
+          errors.push({
+            screenId,
+            error: "화면을 찾을 수 없습니다.",
+          });
+          continue;
+        }
+
+        const existingScreen = existingResult[0];
+
+        // 권한 확인
+        if (
+          userCompanyCode !== "*" &&
+          existingScreen.company_code !== userCompanyCode
+        ) {
+          skippedCount++;
+          errors.push({
+            screenId,
+            error: "이 화면을 삭제할 권한이 없습니다.",
+          });
+          continue;
+        }
+
+        // 이미 삭제된 화면인지 확인
+        if (existingScreen.is_active === "D") {
+          skippedCount++;
+          errors.push({
+            screenId,
+            error: "이미 삭제된 화면입니다.",
+          });
+          continue;
+        }
+
+        // 강제 삭제가 아닌 경우 의존성 체크
+        if (!force) {
+          const dependencyCheck = await this.checkScreenDependencies(
+            screenId,
+            userCompanyCode
+          );
+          if (dependencyCheck.hasDependencies) {
+            skippedCount++;
+            errors.push({
+              screenId,
+              error: `다른 화면에서 사용 중 (${dependencyCheck.dependencies.length}개 참조)`,
+            });
+            continue;
+          }
+        }
+
+        // 트랜잭션으로 화면 삭제와 메뉴 할당 정리를 함께 처리
+        await transaction(async (client) => {
+          const now = new Date();
+          
+          // 소프트 삭제 (휴지통으로 이동)
+          await client.query(
+            `UPDATE screen_definitions
+             SET is_active = 'D',
+                 deleted_date = $1,
+                 deleted_by = $2,
+                 delete_reason = $3,
+                 updated_date = $4,
+                 updated_by = $5
+             WHERE screen_id = $6`,
+            [now, deletedBy, deleteReason || null, now, deletedBy, screenId]
+          );
+
+          // 메뉴 할당 정리 (삭제된 화면의 메뉴 할당 제거)
+          await client.query(
+            `DELETE FROM screen_menu_assignments WHERE screen_id = $1`,
+            [screenId]
+          );
+        });
+
+        deletedCount++;
+        logger.info(`화면 삭제 완료: ${screenId} (${existingScreen.screen_name})`);
+      } catch (error) {
+        skippedCount++;
+        errors.push({
+          screenId,
+          error: error instanceof Error ? error.message : "알 수 없는 오류",
+        });
+        logger.error(`화면 삭제 실패: ${screenId}`, error);
+      }
+    }
+
+    logger.info(
+      `일괄 삭제 완료: 성공 ${deletedCount}개, 실패 ${skippedCount}개`
+    );
+
+    return { deletedCount, skippedCount, errors };
+  }
+
   /**
    * 휴지통 화면 일괄 영구 삭제
    */
@@ -1486,11 +1645,23 @@ export class ScreenManagementService {
       };
     }
 
+    // 🔥 최신 inputType 정보 조회 (table_type_columns에서)
+    const inputTypeMap = await this.getLatestInputTypes(componentLayouts, companyCode);
+
     const components: ComponentData[] = componentLayouts.map((layout) => {
       const properties = layout.properties as any;
+      
+      // 🔥 최신 inputType으로 widgetType 및 componentType 업데이트
+      const tableName = properties?.tableName;
+      const columnName = properties?.columnName;
+      const latestTypeInfo = tableName && columnName 
+        ? inputTypeMap.get(`${tableName}.${columnName}`) 
+        : null;
+      
       const component = {
         id: layout.component_id,
-        type: layout.component_type as any,
+        // 🔥 최신 componentType이 있으면 type 덮어쓰기
+        type: latestTypeInfo?.componentType || layout.component_type as any,
         position: {
           x: layout.position_x,
           y: layout.position_y,
@@ -1499,6 +1670,17 @@ export class ScreenManagementService {
         size: { width: layout.width, height: layout.height },
         parentId: layout.parent_id,
         ...properties,
+        // 🔥 최신 inputType이 있으면 widgetType, componentType 덮어쓰기
+        ...(latestTypeInfo && { 
+          widgetType: latestTypeInfo.inputType,
+          inputType: latestTypeInfo.inputType,
+          componentType: latestTypeInfo.componentType,
+          componentConfig: {
+            ...properties?.componentConfig,
+            type: latestTypeInfo.componentType,
+            inputType: latestTypeInfo.inputType,
+          },
+        }),
       };
 
       console.log(`로드된 컴포넌트:`, {
@@ -1508,6 +1690,9 @@ export class ScreenManagementService {
         size: component.size,
         parentId: component.parentId,
         title: (component as any).title,
+        widgetType: (component as any).widgetType,
+        componentType: (component as any).componentType,
+        latestTypeInfo,
       });
 
       return component;
@@ -1527,6 +1712,112 @@ export class ScreenManagementService {
     };
   }
 
+  /**
+   * 입력 타입에 해당하는 컴포넌트 ID 반환
+   * (프론트엔드 webTypeMapping.ts와 동일한 매핑)
+   */
+  private getComponentIdFromInputType(inputType: string): string {
+    const mapping: Record<string, string> = {
+      // 텍스트 입력
+      text: "text-input",
+      email: "text-input",
+      password: "text-input",
+      tel: "text-input",
+      // 숫자 입력
+      number: "number-input",
+      decimal: "number-input",
+      // 날짜/시간
+      date: "date-input",
+      datetime: "date-input",
+      time: "date-input",
+      // 텍스트 영역
+      textarea: "textarea-basic",
+      // 선택
+      select: "select-basic",
+      dropdown: "select-basic",
+      // 체크박스/라디오
+      checkbox: "checkbox-basic",
+      radio: "radio-basic",
+      boolean: "toggle-switch",
+      // 파일
+      file: "file-upload",
+      // 이미지
+      image: "image-widget",
+      img: "image-widget",
+      picture: "image-widget",
+      photo: "image-widget",
+      // 버튼
+      button: "button-primary",
+      // 기타
+      label: "text-display",
+      code: "select-basic",
+      entity: "select-basic",
+      category: "select-basic",
+    };
+
+    return mapping[inputType] || "text-input";
+  }
+
+  /**
+   * 컴포넌트들의 최신 inputType 정보 조회
+   * @param layouts - 레이아웃 목록
+   * @param companyCode - 회사 코드
+   * @returns Map<"tableName.columnName", { inputType, componentType }>
+   */
+  private async getLatestInputTypes(
+    layouts: any[],
+    companyCode: string
+  ): Promise<Map<string, { inputType: string; componentType: string }>> {
+    const inputTypeMap = new Map<string, { inputType: string; componentType: string }>();
+
+    // tableName과 columnName이 있는 컴포넌트들의 고유 조합 추출
+    const tableColumnPairs = new Set<string>();
+    for (const layout of layouts) {
+      const properties = layout.properties as any;
+      if (properties?.tableName && properties?.columnName) {
+        tableColumnPairs.add(`${properties.tableName}|${properties.columnName}`);
+      }
+    }
+
+    if (tableColumnPairs.size === 0) {
+      return inputTypeMap;
+    }
+
+    // 각 테이블-컬럼 조합에 대해 최신 inputType 조회
+    const pairs = Array.from(tableColumnPairs).map(pair => {
+      const [tableName, columnName] = pair.split('|');
+      return { tableName, columnName };
+    });
+
+    // 배치 쿼리로 한 번에 조회
+    const placeholders = pairs.map((_, i) => `($${i * 2 + 1}, $${i * 2 + 2})`).join(', ');
+    const params = pairs.flatMap(p => [p.tableName, p.columnName]);
+    
+    try {
+      const results = await query<{ table_name: string; column_name: string; input_type: string }>(
+        `SELECT table_name, column_name, input_type 
+         FROM table_type_columns 
+         WHERE (table_name, column_name) IN (${placeholders})
+           AND company_code = $${params.length + 1}`,
+        [...params, companyCode]
+      );
+
+      for (const row of results) {
+        const componentType = this.getComponentIdFromInputType(row.input_type);
+        inputTypeMap.set(`${row.table_name}.${row.column_name}`, {
+          inputType: row.input_type,
+          componentType: componentType,
+        });
+      }
+
+      console.log(`최신 inputType 조회 완료: ${results.length}개`);
+    } catch (error) {
+      console.warn(`최신 inputType 조회 실패 (무시됨):`, error);
+    }
+
+    return inputTypeMap;
+  }
+
   // ========================================
   // 템플릿 관리
   // ========================================
@@ -2016,37 +2307,40 @@ export class ScreenManagementService {
       // Advisory lock 획득 (다른 트랜잭션이 같은 회사 코드를 생성하는 동안 대기)
       await client.query('SELECT pg_advisory_xact_lock($1)', [lockId]);
 
-      // 해당 회사의 기존 화면 코드들 조회
+      // 해당 회사의 기존 화면 코드들 조회 (모든 화면 - 삭제된 코드도 재사용 방지)
+      // LIMIT 제거하고 숫자 추출하여 최대값 찾기
       const existingScreens = await client.query<{ screen_code: string }>(
         `SELECT screen_code FROM screen_definitions
-         WHERE company_code = $1 AND screen_code LIKE $2
-         ORDER BY screen_code DESC
-         LIMIT 10`,
-        [companyCode, `${companyCode}%`]
+         WHERE screen_code LIKE $1
+         ORDER BY screen_code DESC`,
+        [`${companyCode}_%`]
       );
 
       // 회사 코드 뒤의 숫자 부분 추출하여 최대값 찾기
       let maxNumber = 0;
       const pattern = new RegExp(
-        `^${companyCode.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?:_)?(\\d+)$`
+        `^${companyCode.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}_(\\d+)$`
       );
 
+      console.log(`🔍 화면 코드 생성 - 조회된 화면 수: ${existingScreens.rows.length}`);
+      console.log(`🔍 패턴: ${pattern}`);
+
       for (const screen of existingScreens.rows) {
         const match = screen.screen_code.match(pattern);
         if (match) {
           const number = parseInt(match[1], 10);
+          console.log(`🔍 매칭: ${screen.screen_code} → 숫자: ${number}`);
           if (number > maxNumber) {
             maxNumber = number;
           }
         }
       }
 
-      // 다음 순번으로 화면 코드 생성 (3자리 패딩)
+      // 다음 순번으로 화면 코드 생성
       const nextNumber = maxNumber + 1;
-      const paddedNumber = nextNumber.toString().padStart(3, "0");
-
-      const newCode = `${companyCode}_${paddedNumber}`;
-      console.log(`🔢 화면 코드 생성: ${companyCode} → ${newCode} (maxNumber: ${maxNumber})`);
+      // 숫자가 3자리 이상이면 패딩 없이, 아니면 3자리 패딩
+      const newCode = `${companyCode}_${nextNumber}`;
+      console.log(`🔢 화면 코드 생성: ${companyCode} → ${newCode} (maxNumber: ${maxNumber}, nextNumber: ${nextNumber})`);
       
       return newCode;
       // Advisory lock은 트랜잭션 종료 시 자동으로 해제됨
diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts
index 28da136e..8e01903b 100644
--- a/backend-node/src/services/tableManagementService.ts
+++ b/backend-node/src/services/tableManagementService.ts
@@ -797,6 +797,9 @@ export class TableManagementService {
         ]
       );
 
+      // 🔥 해당 컬럼을 사용하는 화면 레이아웃의 widgetType도 업데이트
+      await this.syncScreenLayoutsInputType(tableName, columnName, inputType, companyCode);
+
       // 🔥 캐시 무효화: 해당 테이블의 컬럼 캐시 삭제
       const cacheKeyPattern = `${CacheKeys.TABLE_COLUMNS(tableName, 1, 1000)}_${companyCode}`;
       cache.delete(cacheKeyPattern);
@@ -816,6 +819,135 @@ export class TableManagementService {
     }
   }
 
+  /**
+   * 입력 타입에 해당하는 컴포넌트 ID 반환
+   * (프론트엔드 webTypeMapping.ts와 동일한 매핑)
+   */
+  private getComponentIdFromInputType(inputType: string): string {
+    const mapping: Record<string, string> = {
+      // 텍스트 입력
+      text: "text-input",
+      email: "text-input",
+      password: "text-input",
+      tel: "text-input",
+      // 숫자 입력
+      number: "number-input",
+      decimal: "number-input",
+      // 날짜/시간
+      date: "date-input",
+      datetime: "date-input",
+      time: "date-input",
+      // 텍스트 영역
+      textarea: "textarea-basic",
+      // 선택
+      select: "select-basic",
+      dropdown: "select-basic",
+      // 체크박스/라디오
+      checkbox: "checkbox-basic",
+      radio: "radio-basic",
+      boolean: "toggle-switch",
+      // 파일
+      file: "file-upload",
+      // 이미지
+      image: "image-widget",
+      img: "image-widget",
+      picture: "image-widget",
+      photo: "image-widget",
+      // 버튼
+      button: "button-primary",
+      // 기타
+      label: "text-display",
+      code: "select-basic",
+      entity: "select-basic",
+      category: "select-basic",
+    };
+
+    return mapping[inputType] || "text-input";
+  }
+
+  /**
+   * 컬럼 입력 타입 변경 시 해당 컬럼을 사용하는 화면 레이아웃의 widgetType 및 componentType 동기화
+   * @param tableName - 테이블명
+   * @param columnName - 컬럼명
+   * @param inputType - 새로운 입력 타입
+   * @param companyCode - 회사 코드
+   */
+  private async syncScreenLayoutsInputType(
+    tableName: string,
+    columnName: string,
+    inputType: string,
+    companyCode: string
+  ): Promise<void> {
+    try {
+      // 해당 컬럼을 사용하는 화면 레이아웃 조회
+      const affectedLayouts = await query<{
+        layout_id: number;
+        screen_id: number;
+        component_id: string;
+        component_type: string;
+        properties: any;
+      }>(
+        `SELECT sl.layout_id, sl.screen_id, sl.component_id, sl.component_type, sl.properties
+         FROM screen_layouts sl
+         JOIN screen_definitions sd ON sl.screen_id = sd.screen_id
+         WHERE sl.properties->>'tableName' = $1
+           AND sl.properties->>'columnName' = $2
+           AND (sd.company_code = $3 OR $3 = '*')`,
+        [tableName, columnName, companyCode]
+      );
+
+      if (affectedLayouts.length === 0) {
+        logger.info(
+          `화면 레이아웃 동기화: ${tableName}.${columnName}을 사용하는 화면 없음`
+        );
+        return;
+      }
+
+      logger.info(
+        `화면 레이아웃 동기화 시작: ${affectedLayouts.length}개 컴포넌트 발견`
+      );
+
+      // 새로운 componentType 계산
+      const newComponentType = this.getComponentIdFromInputType(inputType);
+
+      // 각 레이아웃의 widgetType, componentType 업데이트
+      for (const layout of affectedLayouts) {
+        const updatedProperties = {
+          ...layout.properties,
+          widgetType: inputType,
+          inputType: inputType,
+          // componentConfig 내부의 type도 업데이트
+          componentConfig: {
+            ...layout.properties?.componentConfig,
+            type: newComponentType,
+            inputType: inputType,
+          },
+        };
+
+        await query(
+          `UPDATE screen_layouts 
+           SET properties = $1, component_type = $2
+           WHERE layout_id = $3`,
+          [JSON.stringify(updatedProperties), newComponentType, layout.layout_id]
+        );
+
+        logger.info(
+          `화면 레이아웃 업데이트: screen_id=${layout.screen_id}, component_id=${layout.component_id}, widgetType=${inputType}, componentType=${newComponentType}`
+        );
+      }
+
+      logger.info(
+        `화면 레이아웃 동기화 완료: ${affectedLayouts.length}개 컴포넌트 업데이트됨`
+      );
+    } catch (error) {
+      // 화면 레이아웃 동기화 실패는 치명적이지 않으므로 로그만 남기고 계속 진행
+      logger.warn(
+        `화면 레이아웃 동기화 실패 (무시됨): ${tableName}.${columnName}`,
+        error
+      );
+    }
+  }
+
   /**
    * 입력 타입별 기본 상세 설정 생성
    */
@@ -1516,6 +1648,26 @@ export class TableManagementService {
         columnName
       );
 
+      // 🆕 배열 처리: IN 절 사용
+      if (Array.isArray(value)) {
+        if (value.length === 0) {
+          // 빈 배열이면 항상 false 조건
+          return {
+            whereClause: `1 = 0`,
+            values: [],
+            paramCount: 0,
+          };
+        }
+        
+        // IN 절로 여러 값 검색
+        const placeholders = value.map((_, idx) => `$${paramIndex + idx}`).join(", ");
+        return {
+          whereClause: `${columnName} IN (${placeholders})`,
+          values: value,
+          paramCount: value.length,
+        };
+      }
+
       if (!entityTypeInfo.isEntityType || !entityTypeInfo.referenceTable) {
         // 엔티티 타입이 아니면 기본 검색
         return {
@@ -4070,4 +4222,22 @@ export class TableManagementService {
       throw error;
     }
   }
+
+  /**
+   * 테이블에 특정 컬럼이 존재하는지 확인
+   */
+  async hasColumn(tableName: string, columnName: string): Promise<boolean> {
+    try {
+      const result = await query<any>(
+        `SELECT column_name 
+         FROM information_schema.columns 
+         WHERE table_name = $1 AND column_name = $2`,
+        [tableName, columnName]
+      );
+      return result.length > 0;
+    } catch (error) {
+      logger.error(`컬럼 존재 여부 확인 실패: ${tableName}.${columnName}`, error);
+      return false;
+    }
+  }
 }
diff --git a/backend-node/src/services/vehicleReportService.ts b/backend-node/src/services/vehicleReportService.ts
new file mode 100644
index 00000000..842dff19
--- /dev/null
+++ b/backend-node/src/services/vehicleReportService.ts
@@ -0,0 +1,403 @@
+/**
+ * 차량 운행 리포트 서비스
+ */
+import { getPool } from "../database/db";
+
+interface DailyReportFilters {
+  startDate?: string;
+  endDate?: string;
+  userId?: string;
+  vehicleId?: number;
+}
+
+interface WeeklyReportFilters {
+  year: number;
+  month: number;
+  userId?: string;
+  vehicleId?: number;
+}
+
+interface MonthlyReportFilters {
+  year: number;
+  userId?: string;
+  vehicleId?: number;
+}
+
+interface DriverReportFilters {
+  startDate?: string;
+  endDate?: string;
+  limit?: number;
+}
+
+interface RouteReportFilters {
+  startDate?: string;
+  endDate?: string;
+  limit?: number;
+}
+
+class VehicleReportService {
+  private get pool() {
+    return getPool();
+  }
+
+  /**
+   * 일별 통계 조회
+   */
+  async getDailyReport(companyCode: string, filters: DailyReportFilters) {
+    const conditions: string[] = ["company_code = $1"];
+    const params: any[] = [companyCode];
+    let paramIndex = 2;
+
+    // 기본값: 최근 30일
+    const endDate = filters.endDate || new Date().toISOString().split("T")[0];
+    const startDate =
+      filters.startDate ||
+      new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0];
+
+    conditions.push(`DATE(start_time) >= $${paramIndex++}`);
+    params.push(startDate);
+    conditions.push(`DATE(start_time) <= $${paramIndex++}`);
+    params.push(endDate);
+
+    if (filters.userId) {
+      conditions.push(`user_id = $${paramIndex++}`);
+      params.push(filters.userId);
+    }
+
+    if (filters.vehicleId) {
+      conditions.push(`vehicle_id = $${paramIndex++}`);
+      params.push(filters.vehicleId);
+    }
+
+    const whereClause = conditions.join(" AND ");
+
+    const query = `
+      SELECT 
+        DATE(start_time) as date,
+        COUNT(*) as trip_count,
+        COUNT(CASE WHEN status = 'completed' THEN 1 END) as completed_count,
+        COUNT(CASE WHEN status = 'cancelled' THEN 1 END) as cancelled_count,
+        COALESCE(SUM(CASE WHEN status = 'completed' THEN total_distance ELSE 0 END), 0) as total_distance,
+        COALESCE(SUM(CASE WHEN status = 'completed' THEN duration_minutes ELSE 0 END), 0) as total_duration,
+        COALESCE(AVG(CASE WHEN status = 'completed' THEN total_distance END), 0) as avg_distance,
+        COALESCE(AVG(CASE WHEN status = 'completed' THEN duration_minutes END), 0) as avg_duration
+      FROM vehicle_trip_summary
+      WHERE ${whereClause}
+      GROUP BY DATE(start_time)
+      ORDER BY DATE(start_time) DESC
+    `;
+
+    const result = await this.pool.query(query, params);
+
+    return {
+      startDate,
+      endDate,
+      data: result.rows.map((row) => ({
+        date: row.date,
+        tripCount: parseInt(row.trip_count),
+        completedCount: parseInt(row.completed_count),
+        cancelledCount: parseInt(row.cancelled_count),
+        totalDistance: parseFloat(row.total_distance),
+        totalDuration: parseInt(row.total_duration),
+        avgDistance: parseFloat(row.avg_distance),
+        avgDuration: parseFloat(row.avg_duration),
+      })),
+    };
+  }
+
+  /**
+   * 주별 통계 조회
+   */
+  async getWeeklyReport(companyCode: string, filters: WeeklyReportFilters) {
+    const { year, month, userId, vehicleId } = filters;
+
+    const conditions: string[] = ["company_code = $1"];
+    const params: any[] = [companyCode];
+    let paramIndex = 2;
+
+    conditions.push(`EXTRACT(YEAR FROM start_time) = $${paramIndex++}`);
+    params.push(year);
+    conditions.push(`EXTRACT(MONTH FROM start_time) = $${paramIndex++}`);
+    params.push(month);
+
+    if (userId) {
+      conditions.push(`user_id = $${paramIndex++}`);
+      params.push(userId);
+    }
+
+    if (vehicleId) {
+      conditions.push(`vehicle_id = $${paramIndex++}`);
+      params.push(vehicleId);
+    }
+
+    const whereClause = conditions.join(" AND ");
+
+    const query = `
+      SELECT 
+        EXTRACT(WEEK FROM start_time) as week_number,
+        MIN(DATE(start_time)) as week_start,
+        MAX(DATE(start_time)) as week_end,
+        COUNT(*) as trip_count,
+        COUNT(CASE WHEN status = 'completed' THEN 1 END) as completed_count,
+        COALESCE(SUM(CASE WHEN status = 'completed' THEN total_distance ELSE 0 END), 0) as total_distance,
+        COALESCE(SUM(CASE WHEN status = 'completed' THEN duration_minutes ELSE 0 END), 0) as total_duration,
+        COALESCE(AVG(CASE WHEN status = 'completed' THEN total_distance END), 0) as avg_distance
+      FROM vehicle_trip_summary
+      WHERE ${whereClause}
+      GROUP BY EXTRACT(WEEK FROM start_time)
+      ORDER BY week_number
+    `;
+
+    const result = await this.pool.query(query, params);
+
+    return {
+      year,
+      month,
+      data: result.rows.map((row) => ({
+        weekNumber: parseInt(row.week_number),
+        weekStart: row.week_start,
+        weekEnd: row.week_end,
+        tripCount: parseInt(row.trip_count),
+        completedCount: parseInt(row.completed_count),
+        totalDistance: parseFloat(row.total_distance),
+        totalDuration: parseInt(row.total_duration),
+        avgDistance: parseFloat(row.avg_distance),
+      })),
+    };
+  }
+
+  /**
+   * 월별 통계 조회
+   */
+  async getMonthlyReport(companyCode: string, filters: MonthlyReportFilters) {
+    const { year, userId, vehicleId } = filters;
+
+    const conditions: string[] = ["company_code = $1"];
+    const params: any[] = [companyCode];
+    let paramIndex = 2;
+
+    conditions.push(`EXTRACT(YEAR FROM start_time) = $${paramIndex++}`);
+    params.push(year);
+
+    if (userId) {
+      conditions.push(`user_id = $${paramIndex++}`);
+      params.push(userId);
+    }
+
+    if (vehicleId) {
+      conditions.push(`vehicle_id = $${paramIndex++}`);
+      params.push(vehicleId);
+    }
+
+    const whereClause = conditions.join(" AND ");
+
+    const query = `
+      SELECT 
+        EXTRACT(MONTH FROM start_time) as month,
+        COUNT(*) as trip_count,
+        COUNT(CASE WHEN status = 'completed' THEN 1 END) as completed_count,
+        COUNT(CASE WHEN status = 'cancelled' THEN 1 END) as cancelled_count,
+        COALESCE(SUM(CASE WHEN status = 'completed' THEN total_distance ELSE 0 END), 0) as total_distance,
+        COALESCE(SUM(CASE WHEN status = 'completed' THEN duration_minutes ELSE 0 END), 0) as total_duration,
+        COALESCE(AVG(CASE WHEN status = 'completed' THEN total_distance END), 0) as avg_distance,
+        COALESCE(AVG(CASE WHEN status = 'completed' THEN duration_minutes END), 0) as avg_duration,
+        COUNT(DISTINCT user_id) as driver_count
+      FROM vehicle_trip_summary
+      WHERE ${whereClause}
+      GROUP BY EXTRACT(MONTH FROM start_time)
+      ORDER BY month
+    `;
+
+    const result = await this.pool.query(query, params);
+
+    return {
+      year,
+      data: result.rows.map((row) => ({
+        month: parseInt(row.month),
+        tripCount: parseInt(row.trip_count),
+        completedCount: parseInt(row.completed_count),
+        cancelledCount: parseInt(row.cancelled_count),
+        totalDistance: parseFloat(row.total_distance),
+        totalDuration: parseInt(row.total_duration),
+        avgDistance: parseFloat(row.avg_distance),
+        avgDuration: parseFloat(row.avg_duration),
+        driverCount: parseInt(row.driver_count),
+      })),
+    };
+  }
+
+  /**
+   * 요약 통계 조회 (대시보드용)
+   */
+  async getSummaryReport(companyCode: string, period: string) {
+    let dateCondition = "";
+    
+    switch (period) {
+      case "today":
+        dateCondition = "DATE(start_time) = CURRENT_DATE";
+        break;
+      case "week":
+        dateCondition = "start_time >= CURRENT_DATE - INTERVAL '7 days'";
+        break;
+      case "month":
+        dateCondition = "start_time >= CURRENT_DATE - INTERVAL '30 days'";
+        break;
+      case "year":
+        dateCondition = "EXTRACT(YEAR FROM start_time) = EXTRACT(YEAR FROM CURRENT_DATE)";
+        break;
+      default:
+        dateCondition = "DATE(start_time) = CURRENT_DATE";
+    }
+
+    const query = `
+      SELECT 
+        COUNT(*) as total_trips,
+        COUNT(CASE WHEN status = 'completed' THEN 1 END) as completed_trips,
+        COUNT(CASE WHEN status = 'active' THEN 1 END) as active_trips,
+        COUNT(CASE WHEN status = 'cancelled' THEN 1 END) as cancelled_trips,
+        COALESCE(SUM(CASE WHEN status = 'completed' THEN total_distance ELSE 0 END), 0) as total_distance,
+        COALESCE(SUM(CASE WHEN status = 'completed' THEN duration_minutes ELSE 0 END), 0) as total_duration,
+        COALESCE(AVG(CASE WHEN status = 'completed' THEN total_distance END), 0) as avg_distance,
+        COALESCE(AVG(CASE WHEN status = 'completed' THEN duration_minutes END), 0) as avg_duration,
+        COUNT(DISTINCT user_id) as active_drivers
+      FROM vehicle_trip_summary
+      WHERE company_code = $1 AND ${dateCondition}
+    `;
+
+    const result = await this.pool.query(query, [companyCode]);
+    const row = result.rows[0];
+
+    // 완료율 계산
+    const totalTrips = parseInt(row.total_trips) || 0;
+    const completedTrips = parseInt(row.completed_trips) || 0;
+    const completionRate = totalTrips > 0 ? (completedTrips / totalTrips) * 100 : 0;
+
+    return {
+      period,
+      totalTrips,
+      completedTrips,
+      activeTrips: parseInt(row.active_trips) || 0,
+      cancelledTrips: parseInt(row.cancelled_trips) || 0,
+      completionRate: parseFloat(completionRate.toFixed(1)),
+      totalDistance: parseFloat(row.total_distance) || 0,
+      totalDuration: parseInt(row.total_duration) || 0,
+      avgDistance: parseFloat(row.avg_distance) || 0,
+      avgDuration: parseFloat(row.avg_duration) || 0,
+      activeDrivers: parseInt(row.active_drivers) || 0,
+    };
+  }
+
+  /**
+   * 운전자별 통계 조회
+   */
+  async getDriverReport(companyCode: string, filters: DriverReportFilters) {
+    const conditions: string[] = ["vts.company_code = $1"];
+    const params: any[] = [companyCode];
+    let paramIndex = 2;
+
+    if (filters.startDate) {
+      conditions.push(`DATE(vts.start_time) >= $${paramIndex++}`);
+      params.push(filters.startDate);
+    }
+
+    if (filters.endDate) {
+      conditions.push(`DATE(vts.start_time) <= $${paramIndex++}`);
+      params.push(filters.endDate);
+    }
+
+    const whereClause = conditions.join(" AND ");
+    const limit = filters.limit || 10;
+
+    const query = `
+      SELECT 
+        vts.user_id,
+        ui.user_name,
+        COUNT(*) as trip_count,
+        COUNT(CASE WHEN vts.status = 'completed' THEN 1 END) as completed_count,
+        COALESCE(SUM(CASE WHEN vts.status = 'completed' THEN vts.total_distance ELSE 0 END), 0) as total_distance,
+        COALESCE(SUM(CASE WHEN vts.status = 'completed' THEN vts.duration_minutes ELSE 0 END), 0) as total_duration,
+        COALESCE(AVG(CASE WHEN vts.status = 'completed' THEN vts.total_distance END), 0) as avg_distance
+      FROM vehicle_trip_summary vts
+      LEFT JOIN user_info ui ON vts.user_id = ui.user_id
+      WHERE ${whereClause}
+      GROUP BY vts.user_id, ui.user_name
+      ORDER BY total_distance DESC
+      LIMIT $${paramIndex}
+    `;
+
+    params.push(limit);
+    const result = await this.pool.query(query, params);
+
+    return result.rows.map((row) => ({
+      userId: row.user_id,
+      userName: row.user_name || row.user_id,
+      tripCount: parseInt(row.trip_count),
+      completedCount: parseInt(row.completed_count),
+      totalDistance: parseFloat(row.total_distance),
+      totalDuration: parseInt(row.total_duration),
+      avgDistance: parseFloat(row.avg_distance),
+    }));
+  }
+
+  /**
+   * 구간별 통계 조회
+   */
+  async getRouteReport(companyCode: string, filters: RouteReportFilters) {
+    const conditions: string[] = ["company_code = $1"];
+    const params: any[] = [companyCode];
+    let paramIndex = 2;
+
+    if (filters.startDate) {
+      conditions.push(`DATE(start_time) >= $${paramIndex++}`);
+      params.push(filters.startDate);
+    }
+
+    if (filters.endDate) {
+      conditions.push(`DATE(start_time) <= $${paramIndex++}`);
+      params.push(filters.endDate);
+    }
+
+    // 출발지/도착지가 있는 것만
+    conditions.push("departure IS NOT NULL");
+    conditions.push("arrival IS NOT NULL");
+
+    const whereClause = conditions.join(" AND ");
+    const limit = filters.limit || 10;
+
+    const query = `
+      SELECT 
+        departure,
+        arrival,
+        departure_name,
+        destination_name,
+        COUNT(*) as trip_count,
+        COUNT(CASE WHEN status = 'completed' THEN 1 END) as completed_count,
+        COALESCE(SUM(CASE WHEN status = 'completed' THEN total_distance ELSE 0 END), 0) as total_distance,
+        COALESCE(AVG(CASE WHEN status = 'completed' THEN total_distance END), 0) as avg_distance,
+        COALESCE(AVG(CASE WHEN status = 'completed' THEN duration_minutes END), 0) as avg_duration
+      FROM vehicle_trip_summary
+      WHERE ${whereClause}
+      GROUP BY departure, arrival, departure_name, destination_name
+      ORDER BY trip_count DESC
+      LIMIT $${paramIndex}
+    `;
+
+    params.push(limit);
+    const result = await this.pool.query(query, params);
+
+    return result.rows.map((row) => ({
+      departure: row.departure,
+      arrival: row.arrival,
+      departureName: row.departure_name || row.departure,
+      destinationName: row.destination_name || row.arrival,
+      tripCount: parseInt(row.trip_count),
+      completedCount: parseInt(row.completed_count),
+      totalDistance: parseFloat(row.total_distance),
+      avgDistance: parseFloat(row.avg_distance),
+      avgDuration: parseFloat(row.avg_duration),
+    }));
+  }
+}
+
+export const vehicleReportService = new VehicleReportService();
+
diff --git a/backend-node/src/services/vehicleTripService.ts b/backend-node/src/services/vehicleTripService.ts
new file mode 100644
index 00000000..ee640e24
--- /dev/null
+++ b/backend-node/src/services/vehicleTripService.ts
@@ -0,0 +1,456 @@
+/**
+ * 차량 운행 이력 서비스
+ */
+import { getPool } from "../database/db";
+import { v4 as uuidv4 } from "uuid";
+import { calculateDistance } from "../utils/geoUtils";
+
+interface StartTripParams {
+  userId: string;
+  companyCode: string;
+  vehicleId?: number;
+  departure?: string;
+  arrival?: string;
+  departureName?: string;
+  destinationName?: string;
+  latitude: number;
+  longitude: number;
+}
+
+interface EndTripParams {
+  tripId: string;
+  userId: string;
+  companyCode: string;
+  latitude: number;
+  longitude: number;
+}
+
+interface AddLocationParams {
+  tripId: string;
+  userId: string;
+  companyCode: string;
+  latitude: number;
+  longitude: number;
+  accuracy?: number;
+  speed?: number;
+}
+
+interface TripListFilters {
+  userId?: string;
+  vehicleId?: number;
+  status?: string;
+  startDate?: string;
+  endDate?: string;
+  departure?: string;
+  arrival?: string;
+  limit?: number;
+  offset?: number;
+}
+
+class VehicleTripService {
+  private get pool() {
+    return getPool();
+  }
+
+  /**
+   * 운행 시작
+   */
+  async startTrip(params: StartTripParams) {
+    const {
+      userId,
+      companyCode,
+      vehicleId,
+      departure,
+      arrival,
+      departureName,
+      destinationName,
+      latitude,
+      longitude,
+    } = params;
+
+    const tripId = `TRIP-${Date.now()}-${uuidv4().substring(0, 8)}`;
+
+    // 1. vehicle_trip_summary에 운행 기록 생성
+    const summaryQuery = `
+      INSERT INTO vehicle_trip_summary (
+        trip_id, user_id, vehicle_id, departure, arrival, 
+        departure_name, destination_name, start_time, status, company_code
+      ) VALUES ($1, $2, $3, $4, $5, $6, $7, NOW(), 'active', $8)
+      RETURNING *
+    `;
+
+    const summaryResult = await this.pool.query(summaryQuery, [
+      tripId,
+      userId,
+      vehicleId || null,
+      departure || null,
+      arrival || null,
+      departureName || null,
+      destinationName || null,
+      companyCode,
+    ]);
+
+    // 2. 시작 위치 기록
+    const locationQuery = `
+      INSERT INTO vehicle_location_history (
+        trip_id, user_id, vehicle_id, latitude, longitude, 
+        trip_status, departure, arrival, departure_name, destination_name,
+        recorded_at, company_code
+      ) VALUES ($1, $2, $3, $4, $5, 'start', $6, $7, $8, $9, NOW(), $10)
+      RETURNING id
+    `;
+
+    await this.pool.query(locationQuery, [
+      tripId,
+      userId,
+      vehicleId || null,
+      latitude,
+      longitude,
+      departure || null,
+      arrival || null,
+      departureName || null,
+      destinationName || null,
+      companyCode,
+    ]);
+
+    return {
+      tripId,
+      summary: summaryResult.rows[0],
+      startLocation: { latitude, longitude },
+    };
+  }
+
+  /**
+   * 운행 종료
+   */
+  async endTrip(params: EndTripParams) {
+    const { tripId, userId, companyCode, latitude, longitude } = params;
+
+    // 1. 운행 정보 조회
+    const tripQuery = `
+      SELECT * FROM vehicle_trip_summary 
+      WHERE trip_id = $1 AND company_code = $2 AND status = 'active'
+    `;
+    const tripResult = await this.pool.query(tripQuery, [tripId, companyCode]);
+
+    if (tripResult.rows.length === 0) {
+      throw new Error("활성 운행을 찾을 수 없습니다.");
+    }
+
+    const trip = tripResult.rows[0];
+
+    // 2. 마지막 위치 기록
+    const locationQuery = `
+      INSERT INTO vehicle_location_history (
+        trip_id, user_id, vehicle_id, latitude, longitude, 
+        trip_status, departure, arrival, departure_name, destination_name,
+        recorded_at, company_code
+      ) VALUES ($1, $2, $3, $4, $5, 'end', $6, $7, $8, $9, NOW(), $10)
+      RETURNING id
+    `;
+
+    await this.pool.query(locationQuery, [
+      tripId,
+      userId,
+      trip.vehicle_id,
+      latitude,
+      longitude,
+      trip.departure,
+      trip.arrival,
+      trip.departure_name,
+      trip.destination_name,
+      companyCode,
+    ]);
+
+    // 3. 총 거리 및 위치 수 계산
+    const statsQuery = `
+      SELECT 
+        COUNT(*) as location_count,
+        MIN(recorded_at) as start_time,
+        MAX(recorded_at) as end_time
+      FROM vehicle_location_history
+      WHERE trip_id = $1 AND company_code = $2
+    `;
+    const statsResult = await this.pool.query(statsQuery, [tripId, companyCode]);
+    const stats = statsResult.rows[0];
+
+    // 4. 모든 위치 데이터로 총 거리 계산
+    const locationsQuery = `
+      SELECT latitude, longitude 
+      FROM vehicle_location_history
+      WHERE trip_id = $1 AND company_code = $2
+      ORDER BY recorded_at ASC
+    `;
+    const locationsResult = await this.pool.query(locationsQuery, [tripId, companyCode]);
+    
+    let totalDistance = 0;
+    const locations = locationsResult.rows;
+    for (let i = 1; i < locations.length; i++) {
+      const prev = locations[i - 1];
+      const curr = locations[i];
+      totalDistance += calculateDistance(
+        prev.latitude,
+        prev.longitude,
+        curr.latitude,
+        curr.longitude
+      );
+    }
+
+    // 5. 운행 시간 계산 (분)
+    const startTime = new Date(stats.start_time);
+    const endTime = new Date(stats.end_time);
+    const durationMinutes = Math.round((endTime.getTime() - startTime.getTime()) / 60000);
+
+    // 6. 운행 요약 업데이트
+    const updateQuery = `
+      UPDATE vehicle_trip_summary 
+      SET 
+        end_time = NOW(),
+        total_distance = $1,
+        duration_minutes = $2,
+        location_count = $3,
+        status = 'completed'
+      WHERE trip_id = $4 AND company_code = $5
+      RETURNING *
+    `;
+
+    const updateResult = await this.pool.query(updateQuery, [
+      totalDistance.toFixed(3),
+      durationMinutes,
+      stats.location_count,
+      tripId,
+      companyCode,
+    ]);
+
+    return {
+      tripId,
+      summary: updateResult.rows[0],
+      totalDistance: parseFloat(totalDistance.toFixed(3)),
+      durationMinutes,
+      locationCount: parseInt(stats.location_count),
+    };
+  }
+
+  /**
+   * 위치 기록 추가 (연속 추적)
+   */
+  async addLocation(params: AddLocationParams) {
+    const { tripId, userId, companyCode, latitude, longitude, accuracy, speed } = params;
+
+    // 1. 운행 정보 조회
+    const tripQuery = `
+      SELECT * FROM vehicle_trip_summary 
+      WHERE trip_id = $1 AND company_code = $2 AND status = 'active'
+    `;
+    const tripResult = await this.pool.query(tripQuery, [tripId, companyCode]);
+
+    if (tripResult.rows.length === 0) {
+      throw new Error("활성 운행을 찾을 수 없습니다.");
+    }
+
+    const trip = tripResult.rows[0];
+
+    // 2. 이전 위치 조회 (거리 계산용)
+    const prevLocationQuery = `
+      SELECT latitude, longitude 
+      FROM vehicle_location_history
+      WHERE trip_id = $1 AND company_code = $2
+      ORDER BY recorded_at DESC
+      LIMIT 1
+    `;
+    const prevResult = await this.pool.query(prevLocationQuery, [tripId, companyCode]);
+    
+    let distanceFromPrev = 0;
+    if (prevResult.rows.length > 0) {
+      const prev = prevResult.rows[0];
+      distanceFromPrev = calculateDistance(
+        prev.latitude,
+        prev.longitude,
+        latitude,
+        longitude
+      );
+    }
+
+    // 3. 위치 기록 추가
+    const locationQuery = `
+      INSERT INTO vehicle_location_history (
+        trip_id, user_id, vehicle_id, latitude, longitude, 
+        accuracy, speed, distance_from_prev,
+        trip_status, departure, arrival, departure_name, destination_name,
+        recorded_at, company_code
+      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, 'tracking', $9, $10, $11, $12, NOW(), $13)
+      RETURNING id
+    `;
+
+    const result = await this.pool.query(locationQuery, [
+      tripId,
+      userId,
+      trip.vehicle_id,
+      latitude,
+      longitude,
+      accuracy || null,
+      speed || null,
+      distanceFromPrev > 0 ? distanceFromPrev.toFixed(3) : null,
+      trip.departure,
+      trip.arrival,
+      trip.departure_name,
+      trip.destination_name,
+      companyCode,
+    ]);
+
+    // 4. 운행 요약의 위치 수 업데이트
+    await this.pool.query(
+      `UPDATE vehicle_trip_summary SET location_count = location_count + 1 WHERE trip_id = $1`,
+      [tripId]
+    );
+
+    return {
+      locationId: result.rows[0].id,
+      distanceFromPrev: parseFloat(distanceFromPrev.toFixed(3)),
+    };
+  }
+
+  /**
+   * 운행 이력 목록 조회
+   */
+  async getTripList(companyCode: string, filters: TripListFilters) {
+    const conditions: string[] = ["company_code = $1"];
+    const params: any[] = [companyCode];
+    let paramIndex = 2;
+
+    if (filters.userId) {
+      conditions.push(`user_id = $${paramIndex++}`);
+      params.push(filters.userId);
+    }
+
+    if (filters.vehicleId) {
+      conditions.push(`vehicle_id = $${paramIndex++}`);
+      params.push(filters.vehicleId);
+    }
+
+    if (filters.status) {
+      conditions.push(`status = $${paramIndex++}`);
+      params.push(filters.status);
+    }
+
+    if (filters.startDate) {
+      conditions.push(`start_time >= $${paramIndex++}`);
+      params.push(filters.startDate);
+    }
+
+    if (filters.endDate) {
+      conditions.push(`start_time <= $${paramIndex++}`);
+      params.push(filters.endDate + " 23:59:59");
+    }
+
+    if (filters.departure) {
+      conditions.push(`departure = $${paramIndex++}`);
+      params.push(filters.departure);
+    }
+
+    if (filters.arrival) {
+      conditions.push(`arrival = $${paramIndex++}`);
+      params.push(filters.arrival);
+    }
+
+    const whereClause = conditions.join(" AND ");
+
+    // 총 개수 조회
+    const countQuery = `SELECT COUNT(*) as total FROM vehicle_trip_summary WHERE ${whereClause}`;
+    const countResult = await this.pool.query(countQuery, params);
+    const total = parseInt(countResult.rows[0].total);
+
+    // 목록 조회
+    const limit = filters.limit || 50;
+    const offset = filters.offset || 0;
+
+    const listQuery = `
+      SELECT 
+        vts.*,
+        ui.user_name,
+        v.vehicle_number
+      FROM vehicle_trip_summary vts
+      LEFT JOIN user_info ui ON vts.user_id = ui.user_id
+      LEFT JOIN vehicles v ON vts.vehicle_id = v.id
+      WHERE ${whereClause}
+      ORDER BY vts.start_time DESC
+      LIMIT $${paramIndex++} OFFSET $${paramIndex++}
+    `;
+
+    params.push(limit, offset);
+    const listResult = await this.pool.query(listQuery, params);
+
+    return {
+      data: listResult.rows,
+      total,
+    };
+  }
+
+  /**
+   * 운행 상세 조회 (경로 포함)
+   */
+  async getTripDetail(tripId: string, companyCode: string) {
+    // 1. 운행 요약 조회
+    const summaryQuery = `
+      SELECT 
+        vts.*,
+        ui.user_name,
+        v.vehicle_number
+      FROM vehicle_trip_summary vts
+      LEFT JOIN user_info ui ON vts.user_id = ui.user_id
+      LEFT JOIN vehicles v ON vts.vehicle_id = v.id
+      WHERE vts.trip_id = $1 AND vts.company_code = $2
+    `;
+    const summaryResult = await this.pool.query(summaryQuery, [tripId, companyCode]);
+
+    if (summaryResult.rows.length === 0) {
+      return null;
+    }
+
+    // 2. 경로 데이터 조회
+    const routeQuery = `
+      SELECT 
+        id, latitude, longitude, accuracy, speed, 
+        distance_from_prev, trip_status, recorded_at
+      FROM vehicle_location_history
+      WHERE trip_id = $1 AND company_code = $2
+      ORDER BY recorded_at ASC
+    `;
+    const routeResult = await this.pool.query(routeQuery, [tripId, companyCode]);
+
+    return {
+      summary: summaryResult.rows[0],
+      route: routeResult.rows,
+    };
+  }
+
+  /**
+   * 활성 운행 조회
+   */
+  async getActiveTrip(userId: string, companyCode: string) {
+    const query = `
+      SELECT * FROM vehicle_trip_summary 
+      WHERE user_id = $1 AND company_code = $2 AND status = 'active'
+      ORDER BY start_time DESC
+      LIMIT 1
+    `;
+    const result = await this.pool.query(query, [userId, companyCode]);
+    return result.rows[0] || null;
+  }
+
+  /**
+   * 운행 취소
+   */
+  async cancelTrip(tripId: string, companyCode: string) {
+    const query = `
+      UPDATE vehicle_trip_summary 
+      SET status = 'cancelled', end_time = NOW()
+      WHERE trip_id = $1 AND company_code = $2 AND status = 'active'
+      RETURNING *
+    `;
+    const result = await this.pool.query(query, [tripId, companyCode]);
+    return result.rows[0] || null;
+  }
+}
+
+export const vehicleTripService = new VehicleTripService();
diff --git a/backend-node/src/types/flow.ts b/backend-node/src/types/flow.ts
index c127eccc..9f105a49 100644
--- a/backend-node/src/types/flow.ts
+++ b/backend-node/src/types/flow.ts
@@ -2,14 +2,38 @@
  * 플로우 관리 시스템 타입 정의
  */
 
+// 다중 REST API 연결 설정
+export interface RestApiConnectionConfig {
+  connectionId: number;
+  connectionName: string;
+  endpoint: string;
+  jsonPath: string;
+  alias: string; // 컬럼 접두어 (예: "api1_")
+}
+
+// 다중 외부 DB 연결 설정
+export interface ExternalDbConnectionConfig {
+  connectionId: number;
+  connectionName: string;
+  dbType: string;
+  tableName: string;
+  alias: string; // 컬럼 접두어 (예: "db1_")
+}
+
 // 플로우 정의
 export interface FlowDefinition {
   id: number;
   name: string;
   description?: string;
   tableName: string;
-  dbSourceType?: "internal" | "external"; // 데이터베이스 소스 타입
+  dbSourceType?: "internal" | "external" | "restapi" | "multi_restapi" | "multi_external_db"; // 데이터 소스 타입
   dbConnectionId?: number; // 외부 DB 연결 ID (external인 경우)
+  // REST API 관련 필드 (단일)
+  restApiConnectionId?: number; // REST API 연결 ID (restapi인 경우)
+  restApiEndpoint?: string; // REST API 엔드포인트
+  restApiJsonPath?: string; // JSON 응답에서 데이터 경로 (기본: data)
+  // 다중 REST API 관련 필드
+  restApiConnections?: RestApiConnectionConfig[]; // 다중 REST API 설정 배열
   companyCode: string; // 회사 코드 (* = 공통)
   isActive: boolean;
   createdBy?: string;
@@ -22,8 +46,14 @@ export interface CreateFlowDefinitionRequest {
   name: string;
   description?: string;
   tableName: string;
-  dbSourceType?: "internal" | "external"; // 데이터베이스 소스 타입
+  dbSourceType?: "internal" | "external" | "restapi" | "multi_restapi" | "multi_external_db"; // 데이터 소스 타입
   dbConnectionId?: number; // 외부 DB 연결 ID
+  // REST API 관련 필드 (단일)
+  restApiConnectionId?: number; // REST API 연결 ID
+  restApiEndpoint?: string; // REST API 엔드포인트
+  restApiJsonPath?: string; // JSON 응답에서 데이터 경로
+  // 다중 REST API 관련 필드
+  restApiConnections?: RestApiConnectionConfig[]; // 다중 REST API 설정 배열
   companyCode?: string; // 회사 코드 (미제공 시 사용자의 company_code 사용)
 }
 
diff --git a/backend-node/src/utils/geoUtils.ts b/backend-node/src/utils/geoUtils.ts
new file mode 100644
index 00000000..50f370ad
--- /dev/null
+++ b/backend-node/src/utils/geoUtils.ts
@@ -0,0 +1,176 @@
+/**
+ * 지리 좌표 관련 유틸리티 함수
+ */
+
+/**
+ * Haversine 공식을 사용하여 두 좌표 간의 거리 계산 (km)
+ * 
+ * @param lat1 - 첫 번째 지점의 위도
+ * @param lon1 - 첫 번째 지점의 경도
+ * @param lat2 - 두 번째 지점의 위도
+ * @param lon2 - 두 번째 지점의 경도
+ * @returns 두 지점 간의 거리 (km)
+ */
+export function calculateDistance(
+  lat1: number,
+  lon1: number,
+  lat2: number,
+  lon2: number
+): number {
+  const R = 6371; // 지구 반경 (km)
+  
+  const dLat = toRadians(lat2 - lat1);
+  const dLon = toRadians(lon2 - lon1);
+  
+  const a =
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos(toRadians(lat1)) *
+      Math.cos(toRadians(lat2)) *
+      Math.sin(dLon / 2) *
+      Math.sin(dLon / 2);
+  
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  
+  return R * c;
+}
+
+/**
+ * 각도를 라디안으로 변환
+ */
+function toRadians(degrees: number): number {
+  return degrees * (Math.PI / 180);
+}
+
+/**
+ * 라디안을 각도로 변환
+ */
+export function toDegrees(radians: number): number {
+  return radians * (180 / Math.PI);
+}
+
+/**
+ * 좌표 배열에서 총 거리 계산
+ * 
+ * @param coordinates - { latitude, longitude }[] 형태의 좌표 배열
+ * @returns 총 거리 (km)
+ */
+export function calculateTotalDistance(
+  coordinates: Array<{ latitude: number; longitude: number }>
+): number {
+  let totalDistance = 0;
+  
+  for (let i = 1; i < coordinates.length; i++) {
+    const prev = coordinates[i - 1];
+    const curr = coordinates[i];
+    totalDistance += calculateDistance(
+      prev.latitude,
+      prev.longitude,
+      curr.latitude,
+      curr.longitude
+    );
+  }
+  
+  return totalDistance;
+}
+
+/**
+ * 좌표가 특정 반경 내에 있는지 확인
+ * 
+ * @param centerLat - 중심점 위도
+ * @param centerLon - 중심점 경도
+ * @param pointLat - 확인할 지점의 위도
+ * @param pointLon - 확인할 지점의 경도
+ * @param radiusKm - 반경 (km)
+ * @returns 반경 내에 있으면 true
+ */
+export function isWithinRadius(
+  centerLat: number,
+  centerLon: number,
+  pointLat: number,
+  pointLon: number,
+  radiusKm: number
+): boolean {
+  const distance = calculateDistance(centerLat, centerLon, pointLat, pointLon);
+  return distance <= radiusKm;
+}
+
+/**
+ * 두 좌표 사이의 방위각(bearing) 계산
+ * 
+ * @param lat1 - 시작점 위도
+ * @param lon1 - 시작점 경도
+ * @param lat2 - 도착점 위도
+ * @param lon2 - 도착점 경도
+ * @returns 방위각 (0-360도)
+ */
+export function calculateBearing(
+  lat1: number,
+  lon1: number,
+  lat2: number,
+  lon2: number
+): number {
+  const dLon = toRadians(lon2 - lon1);
+  const lat1Rad = toRadians(lat1);
+  const lat2Rad = toRadians(lat2);
+  
+  const x = Math.sin(dLon) * Math.cos(lat2Rad);
+  const y =
+    Math.cos(lat1Rad) * Math.sin(lat2Rad) -
+    Math.sin(lat1Rad) * Math.cos(lat2Rad) * Math.cos(dLon);
+  
+  let bearing = toDegrees(Math.atan2(x, y));
+  bearing = (bearing + 360) % 360; // 0-360 범위로 정규화
+  
+  return bearing;
+}
+
+/**
+ * 좌표 배열의 경계 상자(bounding box) 계산
+ * 
+ * @param coordinates - 좌표 배열
+ * @returns { minLat, maxLat, minLon, maxLon }
+ */
+export function getBoundingBox(
+  coordinates: Array<{ latitude: number; longitude: number }>
+): { minLat: number; maxLat: number; minLon: number; maxLon: number } | null {
+  if (coordinates.length === 0) return null;
+  
+  let minLat = coordinates[0].latitude;
+  let maxLat = coordinates[0].latitude;
+  let minLon = coordinates[0].longitude;
+  let maxLon = coordinates[0].longitude;
+  
+  for (const coord of coordinates) {
+    minLat = Math.min(minLat, coord.latitude);
+    maxLat = Math.max(maxLat, coord.latitude);
+    minLon = Math.min(minLon, coord.longitude);
+    maxLon = Math.max(maxLon, coord.longitude);
+  }
+  
+  return { minLat, maxLat, minLon, maxLon };
+}
+
+/**
+ * 좌표 배열의 중심점 계산
+ * 
+ * @param coordinates - 좌표 배열
+ * @returns { latitude, longitude } 중심점
+ */
+export function getCenterPoint(
+  coordinates: Array<{ latitude: number; longitude: number }>
+): { latitude: number; longitude: number } | null {
+  if (coordinates.length === 0) return null;
+  
+  let sumLat = 0;
+  let sumLon = 0;
+  
+  for (const coord of coordinates) {
+    sumLat += coord.latitude;
+    sumLon += coord.longitude;
+  }
+  
+  return {
+    latitude: sumLat / coordinates.length,
+    longitude: sumLon / coordinates.length,
+  };
+}
diff --git a/frontend/app/(admin)/admin/vehicle-reports/page.tsx b/frontend/app/(admin)/admin/vehicle-reports/page.tsx
new file mode 100644
index 00000000..ce84f584
--- /dev/null
+++ b/frontend/app/(admin)/admin/vehicle-reports/page.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const VehicleReport = dynamic(
+  () => import("@/components/vehicle/VehicleReport"),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex h-64 items-center justify-center">
+        <div className="text-muted-foreground">로딩 중...</div>
+      </div>
+    ),
+  }
+);
+
+export default function VehicleReportsPage() {
+  return (
+    <div className="container mx-auto py-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold">운행 리포트</h1>
+        <p className="text-muted-foreground">
+          차량 운행 통계 및 분석 리포트를 확인합니다.
+        </p>
+      </div>
+      <VehicleReport />
+    </div>
+  );
+}
+
diff --git a/frontend/app/(admin)/admin/vehicle-trips/page.tsx b/frontend/app/(admin)/admin/vehicle-trips/page.tsx
new file mode 100644
index 00000000..fea63166
--- /dev/null
+++ b/frontend/app/(admin)/admin/vehicle-trips/page.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const VehicleTripHistory = dynamic(
+  () => import("@/components/vehicle/VehicleTripHistory"),
+  { 
+    ssr: false,
+    loading: () => (
+      <div className="flex h-64 items-center justify-center">
+        <div className="text-muted-foreground">로딩 중...</div>
+      </div>
+    ),
+  }
+);
+
+export default function VehicleTripsPage() {
+  return (
+    <div className="container mx-auto py-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold">운행 이력 관리</h1>
+        <p className="text-muted-foreground">
+          차량 운행 이력을 조회하고 관리합니다.
+        </p>
+      </div>
+      <VehicleTripHistory />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/admin/flow-management/[id]/page.tsx b/frontend/app/(main)/admin/flow-management/[id]/page.tsx
index a311bc63..b8d14e19 100644
--- a/frontend/app/(main)/admin/flow-management/[id]/page.tsx
+++ b/frontend/app/(main)/admin/flow-management/[id]/page.tsx
@@ -319,6 +319,10 @@ export default function FlowEditorPage() {
           flowTableName={flowDefinition?.tableName} // 플로우 정의의 테이블명 전달
           flowDbSourceType={flowDefinition?.dbSourceType} // DB 소스 타입 전달
           flowDbConnectionId={flowDefinition?.dbConnectionId} // 외부 DB 연결 ID 전달
+          flowRestApiConnectionId={flowDefinition?.restApiConnectionId} // REST API 연결 ID 전달
+          flowRestApiEndpoint={flowDefinition?.restApiEndpoint} // REST API 엔드포인트 전달
+          flowRestApiJsonPath={flowDefinition?.restApiJsonPath} // REST API JSON 경로 전달
+          flowRestApiConnections={flowDefinition?.restApiConnections} // 다중 REST API 설정 전달
           onClose={() => setSelectedStep(null)}
           onUpdate={loadFlowData}
         />
diff --git a/frontend/app/(main)/admin/flow-management/page.tsx b/frontend/app/(main)/admin/flow-management/page.tsx
index bb2bf04a..d283f72d 100644
--- a/frontend/app/(main)/admin/flow-management/page.tsx
+++ b/frontend/app/(main)/admin/flow-management/page.tsx
@@ -34,6 +34,7 @@ import { formatErrorMessage } from "@/lib/utils/errorUtils";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
+import { ExternalRestApiConnectionAPI, ExternalRestApiConnection } from "@/lib/api/externalRestApiConnection";
 
 export default function FlowManagementPage() {
   const router = useRouter();
@@ -52,13 +53,42 @@ export default function FlowManagementPage() {
   );
   const [loadingTables, setLoadingTables] = useState(false);
   const [openTableCombobox, setOpenTableCombobox] = useState(false);
-  const [selectedDbSource, setSelectedDbSource] = useState<"internal" | number>("internal"); // "internal" 또는 외부 DB connection ID
+  // 데이터 소스 타입: "internal" (내부 DB), "external_db_숫자" (외부 DB), "restapi_숫자" (REST API)
+  const [selectedDbSource, setSelectedDbSource] = useState<string>("internal");
   const [externalConnections, setExternalConnections] = useState<
     Array<{ id: number; connection_name: string; db_type: string }>
   >([]);
   const [externalTableList, setExternalTableList] = useState<string[]>([]);
   const [loadingExternalTables, setLoadingExternalTables] = useState(false);
 
+  // REST API 연결 관련 상태
+  const [restApiConnections, setRestApiConnections] = useState<ExternalRestApiConnection[]>([]);
+  const [restApiEndpoint, setRestApiEndpoint] = useState("");
+  const [restApiJsonPath, setRestApiJsonPath] = useState("response");
+  
+  // 다중 REST API 선택 상태
+  interface RestApiConfig {
+    connectionId: number;
+    connectionName: string;
+    endpoint: string;
+    jsonPath: string;
+    alias: string; // 컬럼 접두어 (예: "api1_")
+  }
+  const [selectedRestApis, setSelectedRestApis] = useState<RestApiConfig[]>([]);
+  const [isMultiRestApi, setIsMultiRestApi] = useState(false); // 다중 REST API 모드
+
+  // 다중 외부 DB 선택 상태
+  interface ExternalDbConfig {
+    connectionId: number;
+    connectionName: string;
+    dbType: string;
+    tableName: string;
+    alias: string; // 컬럼 접두어 (예: "db1_")
+  }
+  const [selectedExternalDbs, setSelectedExternalDbs] = useState<ExternalDbConfig[]>([]);
+  const [isMultiExternalDb, setIsMultiExternalDb] = useState(false); // 다중 외부 DB 모드
+  const [multiDbTableLists, setMultiDbTableLists] = useState<Record<number, string[]>>({}); // 각 DB별 테이블 목록
+
   // 생성 폼 상태
   const [formData, setFormData] = useState({
     name: "",
@@ -135,75 +165,288 @@ export default function FlowManagementPage() {
     loadConnections();
   }, []);
 
+  // REST API 연결 목록 로드
+  useEffect(() => {
+    const loadRestApiConnections = async () => {
+      try {
+        const connections = await ExternalRestApiConnectionAPI.getConnections({ is_active: "Y" });
+        setRestApiConnections(connections);
+      } catch (error) {
+        console.error("Failed to load REST API connections:", error);
+        setRestApiConnections([]);
+      }
+    };
+    loadRestApiConnections();
+  }, []);
+
   // 외부 DB 테이블 목록 로드
   useEffect(() => {
-    if (selectedDbSource === "internal" || !selectedDbSource) {
+    // REST API인 경우 테이블 목록 로드 불필요
+    if (selectedDbSource === "internal" || !selectedDbSource || selectedDbSource.startsWith("restapi_")) {
       setExternalTableList([]);
       return;
     }
 
-    const loadExternalTables = async () => {
-      try {
-        setLoadingExternalTables(true);
-        const token = localStorage.getItem("authToken");
+    // 외부 DB인 경우
+    if (selectedDbSource.startsWith("external_db_")) {
+      const connectionId = selectedDbSource.replace("external_db_", "");
+      
+      const loadExternalTables = async () => {
+        try {
+          setLoadingExternalTables(true);
+          const token = localStorage.getItem("authToken");
 
-        const response = await fetch(`/api/multi-connection/connections/${selectedDbSource}/tables`, {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        });
+          const response = await fetch(`/api/multi-connection/connections/${connectionId}/tables`, {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
 
-        if (response && response.ok) {
-          const data = await response.json();
-          if (data.success && data.data) {
-            const tables = Array.isArray(data.data) ? data.data : [];
-            const tableNames = tables
-              .map((t: string | { tableName?: string; table_name?: string; tablename?: string; name?: string }) =>
-                typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name,
-              )
-              .filter(Boolean);
-            setExternalTableList(tableNames);
+          if (response && response.ok) {
+            const data = await response.json();
+            if (data.success && data.data) {
+              const tables = Array.isArray(data.data) ? data.data : [];
+              const tableNames = tables
+                .map((t: string | { tableName?: string; table_name?: string; tablename?: string; name?: string }) =>
+                  typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name,
+                )
+                .filter(Boolean);
+              setExternalTableList(tableNames);
+            } else {
+              setExternalTableList([]);
+            }
           } else {
             setExternalTableList([]);
           }
-        } else {
+        } catch (error) {
+          console.error("외부 DB 테이블 목록 조회 오류:", error);
           setExternalTableList([]);
+        } finally {
+          setLoadingExternalTables(false);
         }
-      } catch (error) {
-        console.error("외부 DB 테이블 목록 조회 오류:", error);
-        setExternalTableList([]);
-      } finally {
-        setLoadingExternalTables(false);
-      }
-    };
+      };
 
-    loadExternalTables();
+      loadExternalTables();
+    }
   }, [selectedDbSource]);
 
+  // 다중 외부 DB 추가
+  const addExternalDbConfig = async (connectionId: number) => {
+    const connection = externalConnections.find(c => c.id === connectionId);
+    if (!connection) return;
+    
+    // 이미 추가된 경우 스킵
+    if (selectedExternalDbs.some(db => db.connectionId === connectionId)) {
+      toast({
+        title: "이미 추가됨",
+        description: "해당 외부 DB가 이미 추가되어 있습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+    
+    // 해당 DB의 테이블 목록 로드
+    try {
+      const data = await ExternalDbConnectionAPI.getTables(connectionId);
+      if (data.success && data.data) {
+        const tables = Array.isArray(data.data) ? data.data : [];
+        const tableNames = tables
+          .map((t: string | { tableName?: string; table_name?: string; tablename?: string; name?: string }) =>
+            typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name,
+          )
+          .filter(Boolean);
+        setMultiDbTableLists(prev => ({ ...prev, [connectionId]: tableNames }));
+      }
+    } catch (error) {
+      console.error("외부 DB 테이블 목록 조회 오류:", error);
+    }
+    
+    const newConfig: ExternalDbConfig = {
+      connectionId,
+      connectionName: connection.connection_name,
+      dbType: connection.db_type,
+      tableName: "",
+      alias: `db${selectedExternalDbs.length + 1}_`, // 자동 별칭 생성
+    };
+    
+    setSelectedExternalDbs([...selectedExternalDbs, newConfig]);
+  };
+  
+  // 다중 외부 DB 삭제
+  const removeExternalDbConfig = (connectionId: number) => {
+    setSelectedExternalDbs(selectedExternalDbs.filter(db => db.connectionId !== connectionId));
+  };
+  
+  // 다중 외부 DB 설정 업데이트
+  const updateExternalDbConfig = (connectionId: number, field: keyof ExternalDbConfig, value: string) => {
+    setSelectedExternalDbs(selectedExternalDbs.map(db => 
+      db.connectionId === connectionId ? { ...db, [field]: value } : db
+    ));
+  };
+
+  // 다중 REST API 추가
+  const addRestApiConfig = (connectionId: number) => {
+    const connection = restApiConnections.find(c => c.id === connectionId);
+    if (!connection) return;
+    
+    // 이미 추가된 경우 스킵
+    if (selectedRestApis.some(api => api.connectionId === connectionId)) {
+      toast({
+        title: "이미 추가됨",
+        description: "해당 REST API가 이미 추가되어 있습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+    
+    // 연결 테이블의 기본값 사용
+    const newConfig: RestApiConfig = {
+      connectionId,
+      connectionName: connection.connection_name,
+      endpoint: connection.endpoint_path || "", // 연결 테이블의 기본 엔드포인트
+      jsonPath: "response", // 기본값
+      alias: `api${selectedRestApis.length + 1}_`, // 자동 별칭 생성
+    };
+    
+    setSelectedRestApis([...selectedRestApis, newConfig]);
+  };
+  
+  // 다중 REST API 삭제
+  const removeRestApiConfig = (connectionId: number) => {
+    setSelectedRestApis(selectedRestApis.filter(api => api.connectionId !== connectionId));
+  };
+  
+  // 다중 REST API 설정 업데이트
+  const updateRestApiConfig = (connectionId: number, field: keyof RestApiConfig, value: string) => {
+    setSelectedRestApis(selectedRestApis.map(api => 
+      api.connectionId === connectionId ? { ...api, [field]: value } : api
+    ));
+  };
+
   // 플로우 생성
   const handleCreate = async () => {
     console.log("🚀 handleCreate called with formData:", formData);
 
-    if (!formData.name || !formData.tableName) {
-      console.log("❌ Validation failed:", { name: formData.name, tableName: formData.tableName });
+    // REST API 또는 다중 선택인 경우 테이블 이름 검증 스킵
+    const isRestApi = selectedDbSource.startsWith("restapi_") || isMultiRestApi;
+    const isMultiMode = isMultiRestApi || isMultiExternalDb;
+    
+    if (!formData.name || (!isRestApi && !isMultiMode && !formData.tableName)) {
+      console.log("❌ Validation failed:", { name: formData.name, tableName: formData.tableName, isRestApi, isMultiMode });
       toast({
         title: "입력 오류",
-        description: "플로우 이름과 테이블 이름은 필수입니다.",
+        description: (isRestApi || isMultiMode) ? "플로우 이름은 필수입니다." : "플로우 이름과 테이블 이름은 필수입니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // 다중 REST API 모드인 경우 검증
+    if (isMultiRestApi) {
+      if (selectedRestApis.length === 0) {
+        toast({
+          title: "입력 오류",
+          description: "최소 하나의 REST API를 추가해주세요.",
+          variant: "destructive",
+        });
+        return;
+      }
+      
+      // 각 API의 엔드포인트 검증
+      const missingEndpoint = selectedRestApis.find(api => !api.endpoint);
+      if (missingEndpoint) {
+        toast({
+          title: "입력 오류",
+          description: `${missingEndpoint.connectionName}의 엔드포인트를 입력해주세요.`,
+          variant: "destructive",
+        });
+        return;
+      }
+    } else if (isMultiExternalDb) {
+      // 다중 외부 DB 모드인 경우 검증
+      if (selectedExternalDbs.length === 0) {
+        toast({
+          title: "입력 오류",
+          description: "최소 하나의 외부 DB를 추가해주세요.",
+          variant: "destructive",
+        });
+        return;
+      }
+      
+      // 각 DB의 테이블 선택 검증
+      const missingTable = selectedExternalDbs.find(db => !db.tableName);
+      if (missingTable) {
+        toast({
+          title: "입력 오류",
+          description: `${missingTable.connectionName}의 테이블을 선택해주세요.`,
+          variant: "destructive",
+        });
+        return;
+      }
+    } else if (isRestApi && !restApiEndpoint) {
+      // 단일 REST API인 경우 엔드포인트 검증
+      toast({
+        title: "입력 오류",
+        description: "REST API 엔드포인트는 필수입니다.",
         variant: "destructive",
       });
       return;
     }
 
     try {
-      // DB 소스 정보 추가
-      const requestData = {
+      // 데이터 소스 타입 및 ID 파싱
+      let dbSourceType: "internal" | "external" | "restapi" | "multi_restapi" | "multi_external_db" = "internal";
+      let dbConnectionId: number | undefined = undefined;
+      let restApiConnectionId: number | undefined = undefined;
+
+      if (isMultiRestApi) {
+        dbSourceType = "multi_restapi";
+      } else if (isMultiExternalDb) {
+        dbSourceType = "multi_external_db";
+      } else if (selectedDbSource === "internal") {
+        dbSourceType = "internal";
+      } else if (selectedDbSource.startsWith("external_db_")) {
+        dbSourceType = "external";
+        dbConnectionId = parseInt(selectedDbSource.replace("external_db_", ""));
+      } else if (selectedDbSource.startsWith("restapi_")) {
+        dbSourceType = "restapi";
+        restApiConnectionId = parseInt(selectedDbSource.replace("restapi_", ""));
+      }
+
+      // 요청 데이터 구성
+      const requestData: Record<string, unknown> = {
         ...formData,
-        dbSourceType: selectedDbSource === "internal" ? "internal" : "external",
-        dbConnectionId: selectedDbSource === "internal" ? undefined : Number(selectedDbSource),
+        dbSourceType,
+        dbConnectionId,
       };
 
+      // 다중 REST API인 경우
+      if (dbSourceType === "multi_restapi") {
+        requestData.restApiConnections = selectedRestApis;
+        // 다중 REST API는 첫 번째 API의 ID를 기본으로 사용
+        requestData.restApiConnectionId = selectedRestApis[0]?.connectionId;
+        requestData.restApiEndpoint = selectedRestApis[0]?.endpoint;
+        requestData.restApiJsonPath = selectedRestApis[0]?.jsonPath || "response";
+        // 가상 테이블명: 모든 연결 ID를 조합
+        requestData.tableName = `_multi_restapi_${selectedRestApis.map(a => a.connectionId).join("_")}`;
+      } else if (dbSourceType === "multi_external_db") {
+        // 다중 외부 DB인 경우
+        requestData.externalDbConnections = selectedExternalDbs;
+        // 첫 번째 DB의 ID를 기본으로 사용
+        requestData.dbConnectionId = selectedExternalDbs[0]?.connectionId;
+        // 가상 테이블명: 모든 연결 ID와 테이블명 조합
+        requestData.tableName = `_multi_external_db_${selectedExternalDbs.map(db => `${db.connectionId}_${db.tableName}`).join("_")}`;
+      } else if (dbSourceType === "restapi") {
+        // 단일 REST API인 경우
+        requestData.restApiConnectionId = restApiConnectionId;
+        requestData.restApiEndpoint = restApiEndpoint;
+        requestData.restApiJsonPath = restApiJsonPath || "response";
+        // REST API는 가상 테이블명 사용
+        requestData.tableName = `_restapi_${restApiConnectionId}`;
+      }
+
       console.log("✅ Calling createFlowDefinition with:", requestData);
-      const response = await createFlowDefinition(requestData);
+      const response = await createFlowDefinition(requestData as Parameters<typeof createFlowDefinition>[0]);
       if (response.success && response.data) {
         toast({
           title: "생성 완료",
@@ -212,6 +455,12 @@ export default function FlowManagementPage() {
         setIsCreateDialogOpen(false);
         setFormData({ name: "", description: "", tableName: "" });
         setSelectedDbSource("internal");
+        setRestApiEndpoint("");
+        setRestApiJsonPath("response");
+        setSelectedRestApis([]);
+        setSelectedExternalDbs([]);
+        setIsMultiRestApi(false);
+        setIsMultiExternalDb(false);
         loadFlows();
       } else {
         toast({
@@ -415,125 +664,373 @@ export default function FlowManagementPage() {
                 />
               </div>
 
-              {/* DB 소스 선택 */}
+              {/* 데이터 소스 선택 */}
               <div>
-                <Label className="text-xs sm:text-sm">데이터베이스 소스</Label>
+                <Label className="text-xs sm:text-sm">데이터 소스</Label>
                 <Select
-                  value={selectedDbSource.toString()}
+                  value={isMultiRestApi ? "multi_restapi" : isMultiExternalDb ? "multi_external_db" : selectedDbSource}
                   onValueChange={(value) => {
-                    const dbSource = value === "internal" ? "internal" : parseInt(value);
-                    setSelectedDbSource(dbSource);
-                    // DB 소스 변경 시 테이블 선택 초기화
+                    if (value === "multi_restapi") {
+                      setIsMultiRestApi(true);
+                      setIsMultiExternalDb(false);
+                      setSelectedDbSource("internal");
+                    } else if (value === "multi_external_db") {
+                      setIsMultiExternalDb(true);
+                      setIsMultiRestApi(false);
+                      setSelectedDbSource("internal");
+                    } else {
+                      setIsMultiRestApi(false);
+                      setIsMultiExternalDb(false);
+                      setSelectedDbSource(value);
+                    }
+                    // 소스 변경 시 초기화
                     setFormData({ ...formData, tableName: "" });
+                    setRestApiEndpoint("");
+                    setRestApiJsonPath("response");
+                    setSelectedRestApis([]);
+                    setSelectedExternalDbs([]);
                   }}
                 >
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                    <SelectValue placeholder="데이터베이스 선택" />
+                    <SelectValue placeholder="데이터 소스 선택" />
                   </SelectTrigger>
                   <SelectContent>
+                    {/* 내부 DB */}
                     <SelectItem value="internal">내부 데이터베이스</SelectItem>
-                    {externalConnections.map((conn) => (
-                      <SelectItem key={conn.id} value={conn.id.toString()}>
-                        {conn.connection_name} ({conn.db_type?.toUpperCase()})
-                      </SelectItem>
-                    ))}
+                    
+                    {/* 외부 DB 연결 */}
+                    {externalConnections.length > 0 && (
+                      <>
+                        <SelectItem value="__divider_db__" disabled className="text-muted-foreground text-xs">
+                          -- 외부 데이터베이스 --
+                        </SelectItem>
+                        {externalConnections.map((conn) => (
+                          <SelectItem key={`db_${conn.id}`} value={`external_db_${conn.id}`}>
+                            {conn.connection_name} ({conn.db_type?.toUpperCase()})
+                          </SelectItem>
+                        ))}
+                      </>
+                    )}
+                    
+                    {/* REST API 연결 */}
+                    {restApiConnections.length > 0 && (
+                      <>
+                        <SelectItem value="__divider_api__" disabled className="text-muted-foreground text-xs">
+                          -- REST API --
+                        </SelectItem>
+                        {restApiConnections.map((conn) => (
+                          <SelectItem key={`api_${conn.id}`} value={`restapi_${conn.id}`}>
+                            {conn.connection_name} (REST API)
+                          </SelectItem>
+                        ))}
+                      </>
+                    )}
+
+                    {/* 다중 연결 옵션 */}
+                    {(externalConnections.length > 0 || restApiConnections.length > 0) && (
+                      <>
+                        <SelectItem value="__divider_multi__" disabled className="text-muted-foreground text-xs">
+                          -- 다중 연결 (데이터 병합) --
+                        </SelectItem>
+                        {externalConnections.length > 0 && (
+                          <SelectItem value="multi_external_db">
+                            다중 외부 DB (데이터 병합)
+                          </SelectItem>
+                        )}
+                        {restApiConnections.length > 0 && (
+                          <SelectItem value="multi_restapi">
+                            다중 REST API (데이터 병합)
+                          </SelectItem>
+                        )}
+                      </>
+                    )}
                   </SelectContent>
                 </Select>
                 <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
-                  플로우에서 사용할 데이터베이스를 선택합니다
+                  플로우에서 사용할 데이터 소스를 선택합니다
                 </p>
               </div>
 
-              {/* 테이블 선택 */}
-              <div>
-                <Label htmlFor="tableName" className="text-xs sm:text-sm">
-                  연결 테이블 *
-                </Label>
-                <Popover open={openTableCombobox} onOpenChange={setOpenTableCombobox}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      aria-expanded={openTableCombobox}
-                      className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
-                      disabled={loadingTables || (selectedDbSource !== "internal" && loadingExternalTables)}
+              {/* 다중 REST API 선택 UI */}
+              {isMultiRestApi && (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs sm:text-sm">REST API 연결 목록</Label>
+                    <Select
+                      value=""
+                      onValueChange={(value) => {
+                        if (value) {
+                          addRestApiConfig(parseInt(value));
+                        }
+                      }}
                     >
-                      {formData.tableName
-                        ? selectedDbSource === "internal"
-                          ? tableList.find((table) => table.tableName === formData.tableName)?.displayName ||
-                            formData.tableName
-                          : formData.tableName
-                        : loadingTables || loadingExternalTables
-                          ? "로딩 중..."
-                          : "테이블 선택"}
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
-                    <Command>
-                      <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
-                      <CommandList>
-                        <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
-                        <CommandGroup>
-                          {selectedDbSource === "internal"
-                            ? // 내부 DB 테이블 목록
-                              tableList.map((table) => (
-                                <CommandItem
-                                  key={table.tableName}
-                                  value={table.tableName}
-                                  onSelect={(currentValue) => {
-                                    console.log("📝 Internal table selected:", {
-                                      tableName: table.tableName,
-                                      currentValue,
-                                    });
-                                    setFormData({ ...formData, tableName: currentValue });
-                                    setOpenTableCombobox(false);
-                                  }}
-                                  className="text-xs sm:text-sm"
-                                >
-                                  <Check
-                                    className={cn(
-                                      "mr-2 h-4 w-4",
-                                      formData.tableName === table.tableName ? "opacity-100" : "opacity-0",
-                                    )}
-                                  />
-                                  <div className="flex flex-col">
-                                    <span className="font-medium">{table.displayName || table.tableName}</span>
-                                    {table.description && (
-                                      <span className="text-[10px] text-gray-500">{table.description}</span>
-                                    )}
-                                  </div>
-                                </CommandItem>
-                              ))
-                            : // 외부 DB 테이블 목록
-                              externalTableList.map((tableName, index) => (
-                                <CommandItem
-                                  key={`external-${selectedDbSource}-${tableName}-${index}`}
-                                  value={tableName}
-                                  onSelect={(currentValue) => {
-                                    setFormData({ ...formData, tableName: currentValue });
-                                    setOpenTableCombobox(false);
-                                  }}
-                                  className="text-xs sm:text-sm"
-                                >
-                                  <Check
-                                    className={cn(
-                                      "mr-2 h-4 w-4",
-                                      formData.tableName === tableName ? "opacity-100" : "opacity-0",
-                                    )}
-                                  />
-                                  <div>{tableName}</div>
-                                </CommandItem>
-                              ))}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-                <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
-                  플로우의 모든 단계에서 사용할 기본 테이블입니다 (단계마다 상태 컬럼만 지정합니다)
-                </p>
-              </div>
+                      <SelectTrigger className="h-8 w-[180px] text-xs sm:h-9 sm:text-sm">
+                        <SelectValue placeholder="API 추가..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {restApiConnections
+                          .filter(conn => !selectedRestApis.some(api => api.connectionId === conn.id))
+                          .map((conn) => (
+                            <SelectItem key={conn.id} value={String(conn.id)}>
+                              {conn.connection_name}
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  {selectedRestApis.length === 0 ? (
+                    <div className="rounded-md border border-dashed p-4 text-center">
+                      <p className="text-muted-foreground text-xs sm:text-sm">
+                        위에서 REST API를 추가해주세요
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {selectedRestApis.map((api) => (
+                        <div key={api.connectionId} className="flex items-center justify-between rounded-md border bg-muted/30 px-3 py-2">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium">{api.connectionName}</span>
+                            <span className="text-muted-foreground text-xs">
+                              ({api.endpoint || "기본 엔드포인트"})
+                            </span>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0"
+                            onClick={() => removeRestApiConfig(api.connectionId)}
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  <p className="text-muted-foreground text-[10px] sm:text-xs">
+                    선택한 REST API들의 데이터가 자동으로 병합됩니다.
+                  </p>
+                </div>
+              )}
+
+              {/* 다중 외부 DB 선택 UI */}
+              {isMultiExternalDb && (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs sm:text-sm">외부 DB 연결 목록</Label>
+                    <Select
+                      value=""
+                      onValueChange={(value) => {
+                        if (value) {
+                          addExternalDbConfig(parseInt(value));
+                        }
+                      }}
+                    >
+                      <SelectTrigger className="h-8 w-[180px] text-xs sm:h-9 sm:text-sm">
+                        <SelectValue placeholder="DB 추가..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {externalConnections
+                          .filter(conn => !selectedExternalDbs.some(db => db.connectionId === conn.id))
+                          .map((conn) => (
+                            <SelectItem key={conn.id} value={String(conn.id)}>
+                              {conn.connection_name} ({conn.db_type?.toUpperCase()})
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  {selectedExternalDbs.length === 0 ? (
+                    <div className="rounded-md border border-dashed p-4 text-center">
+                      <p className="text-muted-foreground text-xs sm:text-sm">
+                        위에서 외부 DB를 추가해주세요
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {selectedExternalDbs.map((db) => (
+                        <div key={db.connectionId} className="rounded-md border p-3 space-y-2">
+                          <div className="flex items-center justify-between">
+                            <span className="text-sm font-medium">
+                              {db.connectionName} ({db.dbType?.toUpperCase()})
+                            </span>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-6 w-6 p-0"
+                              onClick={() => removeExternalDbConfig(db.connectionId)}
+                            >
+                              <Trash2 className="h-3 w-3" />
+                            </Button>
+                          </div>
+                          <div className="grid grid-cols-2 gap-2">
+                            <div>
+                              <Label className="text-[10px]">테이블</Label>
+                              <Select
+                                value={db.tableName}
+                                onValueChange={(value) => updateExternalDbConfig(db.connectionId, "tableName", value)}
+                              >
+                                <SelectTrigger className="h-7 text-xs">
+                                  <SelectValue placeholder="테이블 선택" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {(multiDbTableLists[db.connectionId] || []).map((table) => (
+                                    <SelectItem key={table} value={table}>
+                                      {table}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            <div>
+                              <Label className="text-[10px]">별칭 (접두어)</Label>
+                              <Input
+                                value={db.alias}
+                                onChange={(e) => updateExternalDbConfig(db.connectionId, "alias", e.target.value)}
+                                placeholder="db1_"
+                                className="h-7 text-xs"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  <p className="text-muted-foreground text-[10px] sm:text-xs">
+                    선택한 외부 DB들의 데이터가 자동으로 병합됩니다. 각 DB별 테이블을 선택해주세요.
+                  </p>
+                </div>
+              )}
+
+              {/* 단일 REST API인 경우 엔드포인트 설정 */}
+              {!isMultiRestApi && selectedDbSource.startsWith("restapi_") && (
+                <>
+                  <div>
+                    <Label htmlFor="restApiEndpoint" className="text-xs sm:text-sm">
+                      API 엔드포인트 *
+                    </Label>
+                    <Input
+                      id="restApiEndpoint"
+                      value={restApiEndpoint}
+                      onChange={(e) => setRestApiEndpoint(e.target.value)}
+                      placeholder="예: /api/data/list"
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                    <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+                      데이터를 조회할 API 엔드포인트 경로입니다
+                    </p>
+                  </div>
+                  <div>
+                    <Label htmlFor="restApiJsonPath" className="text-xs sm:text-sm">
+                      JSON 경로
+                    </Label>
+                    <Input
+                      id="restApiJsonPath"
+                      value={restApiJsonPath}
+                      onChange={(e) => setRestApiJsonPath(e.target.value)}
+                      placeholder="예: data 또는 result.items"
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                    <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+                      응답 JSON에서 데이터 배열의 경로입니다 (기본: data)
+                    </p>
+                  </div>
+                </>
+              )}
+
+              {/* 테이블 선택 (내부 DB 또는 단일 외부 DB - 다중 선택 모드가 아닌 경우만) */}
+              {!isMultiRestApi && !isMultiExternalDb && !selectedDbSource.startsWith("restapi_") && (
+                <div>
+                  <Label htmlFor="tableName" className="text-xs sm:text-sm">
+                    연결 테이블 *
+                  </Label>
+                  <Popover open={openTableCombobox} onOpenChange={setOpenTableCombobox}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={openTableCombobox}
+                        className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                        disabled={loadingTables || (selectedDbSource !== "internal" && loadingExternalTables)}
+                      >
+                        {formData.tableName
+                          ? selectedDbSource === "internal"
+                            ? tableList.find((table) => table.tableName === formData.tableName)?.displayName ||
+                              formData.tableName
+                            : formData.tableName
+                          : loadingTables || loadingExternalTables
+                            ? "로딩 중..."
+                            : "테이블 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                      <Command>
+                        <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+                        <CommandList>
+                          <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+                          <CommandGroup>
+                            {selectedDbSource === "internal"
+                              ? // 내부 DB 테이블 목록
+                                tableList.map((table) => (
+                                  <CommandItem
+                                    key={table.tableName}
+                                    value={table.tableName}
+                                    onSelect={(currentValue) => {
+                                      console.log("📝 Internal table selected:", {
+                                        tableName: table.tableName,
+                                        currentValue,
+                                      });
+                                      setFormData({ ...formData, tableName: currentValue });
+                                      setOpenTableCombobox(false);
+                                    }}
+                                    className="text-xs sm:text-sm"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-4 w-4",
+                                        formData.tableName === table.tableName ? "opacity-100" : "opacity-0",
+                                      )}
+                                    />
+                                    <div className="flex flex-col">
+                                      <span className="font-medium">{table.displayName || table.tableName}</span>
+                                      {table.description && (
+                                        <span className="text-[10px] text-gray-500">{table.description}</span>
+                                      )}
+                                    </div>
+                                  </CommandItem>
+                                ))
+                              : // 외부 DB 테이블 목록
+                                externalTableList.map((tableName, index) => (
+                                  <CommandItem
+                                    key={`external-${selectedDbSource}-${tableName}-${index}`}
+                                    value={tableName}
+                                    onSelect={(currentValue) => {
+                                      setFormData({ ...formData, tableName: currentValue });
+                                      setOpenTableCombobox(false);
+                                    }}
+                                    className="text-xs sm:text-sm"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-4 w-4",
+                                        formData.tableName === tableName ? "opacity-100" : "opacity-0",
+                                      )}
+                                    />
+                                    <div>{tableName}</div>
+                                  </CommandItem>
+                                ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                  <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+                    플로우의 모든 단계에서 사용할 기본 테이블입니다 (단계마다 상태 컬럼만 지정합니다)
+                  </p>
+                </div>
+              )}
 
               <div>
                 <Label htmlFor="description" className="text-xs sm:text-sm">
diff --git a/frontend/app/(main)/admin/tableMng/page.tsx b/frontend/app/(main)/admin/tableMng/page.tsx
index 5dcbb6be..cd0c462d 100644
--- a/frontend/app/(main)/admin/tableMng/page.tsx
+++ b/frontend/app/(main)/admin/tableMng/page.tsx
@@ -1093,229 +1093,283 @@ export default function TableManagementPage() {
 
           {/* 우측 메인 영역: 컬럼 타입 관리 (80%) */}
           <div className="flex h-full w-[80%] flex-col overflow-hidden pl-0">
-            <div className="flex h-full flex-col space-y-4 overflow-hidden">
-              <div className="flex-1 overflow-y-auto">
-                {!selectedTable ? (
-                  <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border">
-                    <div className="flex flex-col items-center gap-2 text-center">
-                      <p className="text-muted-foreground text-sm">
-                        {getTextFromUI(TABLE_MANAGEMENT_KEYS.SELECT_TABLE_PLACEHOLDER, "테이블을 선택해주세요")}
-                      </p>
-                    </div>
+            <div className="flex h-full flex-col overflow-hidden">
+              {!selectedTable ? (
+                <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border">
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    <p className="text-muted-foreground text-sm">
+                      {getTextFromUI(TABLE_MANAGEMENT_KEYS.SELECT_TABLE_PLACEHOLDER, "테이블을 선택해주세요")}
+                    </p>
                   </div>
-                ) : (
-                  <>
-                    {/* 테이블 라벨 설정 */}
-                    <div className="mb-4 flex items-center gap-4">
-                      <div className="flex-1">
-                        <Input
-                          value={tableLabel}
-                          onChange={(e) => setTableLabel(e.target.value)}
-                          placeholder="테이블 표시명"
-                          className="h-10 text-sm"
-                        />
-                      </div>
-                      <div className="flex-1">
-                        <Input
-                          value={tableDescription}
-                          onChange={(e) => setTableDescription(e.target.value)}
-                          placeholder="테이블 설명"
-                          className="h-10 text-sm"
-                        />
-                      </div>
+                </div>
+              ) : (
+                <>
+                  {/* 테이블 라벨 설정 + 저장 버튼 (고정 영역) */}
+                  <div className="mb-4 flex items-center gap-4">
+                    <div className="flex-1">
+                      <Input
+                        value={tableLabel}
+                        onChange={(e) => setTableLabel(e.target.value)}
+                        placeholder="테이블 표시명"
+                        className="h-10 text-sm"
+                      />
                     </div>
+                    <div className="flex-1">
+                      <Input
+                        value={tableDescription}
+                        onChange={(e) => setTableDescription(e.target.value)}
+                        placeholder="테이블 설명"
+                        className="h-10 text-sm"
+                      />
+                    </div>
+                    {/* 저장 버튼 (항상 보이도록 상단에 배치) */}
+                    <Button
+                      onClick={saveAllSettings}
+                      disabled={!selectedTable || columns.length === 0}
+                      className="h-10 gap-2 text-sm font-medium"
+                    >
+                      <Settings className="h-4 w-4" />
+                      전체 설정 저장
+                    </Button>
+                  </div>
 
-                    {columnsLoading ? (
-                      <div className="flex items-center justify-center py-8">
-                        <LoadingSpinner />
-                        <span className="text-muted-foreground ml-2 text-sm">
-                          {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_LOADING_COLUMNS, "컬럼 정보 로딩 중...")}
-                        </span>
+                  {columnsLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <LoadingSpinner />
+                      <span className="text-muted-foreground ml-2 text-sm">
+                        {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_LOADING_COLUMNS, "컬럼 정보 로딩 중...")}
+                      </span>
+                    </div>
+                  ) : columns.length === 0 ? (
+                    <div className="text-muted-foreground py-8 text-center text-sm">
+                      {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_NO_COLUMNS, "컬럼이 없습니다")}
+                    </div>
+                  ) : (
+                    <div className="flex flex-1 flex-col overflow-hidden">
+                      {/* 컬럼 헤더 (고정) */}
+                      <div className="text-foreground grid h-12 flex-shrink-0 items-center border-b px-6 py-3 text-sm font-semibold" style={{ gridTemplateColumns: "160px 200px 250px 1fr" }}>
+                        <div className="pr-4">컬럼명</div>
+                        <div className="px-4">라벨</div>
+                        <div className="pr-6">입력 타입</div>
+                        <div className="pl-4">설명</div>
                       </div>
-                    ) : columns.length === 0 ? (
-                      <div className="text-muted-foreground py-8 text-center text-sm">
-                        {getTextFromUI(TABLE_MANAGEMENT_KEYS.MESSAGE_NO_COLUMNS, "컬럼이 없습니다")}
-                      </div>
-                    ) : (
-                      <div className="space-y-4">
-                        {/* 컬럼 헤더 */}
-                        <div className="text-foreground grid h-12 items-center border-b px-6 py-3 text-sm font-semibold" style={{ gridTemplateColumns: "160px 200px 250px 1fr" }}>
-                          <div className="pr-4">컬럼명</div>
-                          <div className="px-4">라벨</div>
-                          <div className="pr-6">입력 타입</div>
-                          <div className="pl-4">설명</div>
-                        </div>
 
-                        {/* 컬럼 리스트 */}
-                        <div
-                          className="max-h-96 overflow-y-auto"
-                          onScroll={(e) => {
-                            const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-                            // 스크롤이 끝에 가까워지면 더 많은 데이터 로드
-                            if (scrollHeight - scrollTop <= clientHeight + 100) {
-                              loadMoreColumns();
-                            }
-                          }}
-                        >
-                          {columns.map((column, index) => (
-                            <div
-                              key={column.columnName}
-                              className="bg-background hover:bg-muted/50 grid min-h-16 items-start border-b px-6 py-3 transition-colors"
-                              style={{ gridTemplateColumns: "160px 200px 250px 1fr" }}
-                            >
-                              <div className="pr-4 pt-1">
-                                <div className="font-mono text-sm">{column.columnName}</div>
-                              </div>
-                              <div className="px-4">
-                                <Input
-                                  value={column.displayName || ""}
-                                  onChange={(e) => handleLabelChange(column.columnName, e.target.value)}
-                                  placeholder={column.columnName}
-                                  className="h-8 text-xs"
-                                />
-                              </div>
-                              <div className="pr-6">
-                                <div className="space-y-3">
-                                  {/* 입력 타입 선택 */}
+                      {/* 컬럼 리스트 (스크롤 영역) */}
+                      <div
+                        className="flex-1 overflow-y-auto"
+                        onScroll={(e) => {
+                          const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+                          // 스크롤이 끝에 가까워지면 더 많은 데이터 로드
+                          if (scrollHeight - scrollTop <= clientHeight + 100) {
+                            loadMoreColumns();
+                          }
+                        }}
+                      >
+                        {columns.map((column, index) => (
+                          <div
+                            key={column.columnName}
+                            className="bg-background hover:bg-muted/50 grid min-h-16 items-start border-b px-6 py-3 transition-colors"
+                            style={{ gridTemplateColumns: "160px 200px 250px 1fr" }}
+                          >
+                            <div className="pr-4 pt-1">
+                              <div className="font-mono text-sm">{column.columnName}</div>
+                            </div>
+                            <div className="px-4">
+                              <Input
+                                value={column.displayName || ""}
+                                onChange={(e) => handleLabelChange(column.columnName, e.target.value)}
+                                placeholder={column.columnName}
+                                className="h-8 text-xs"
+                              />
+                            </div>
+                            <div className="pr-6">
+                              <div className="space-y-3">
+                                {/* 입력 타입 선택 */}
+                                <Select
+                                  value={column.inputType || "text"}
+                                  onValueChange={(value) => handleInputTypeChange(column.columnName, value)}
+                                >
+                                  <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="입력 타입 선택" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {memoizedInputTypeOptions.map((option) => (
+                                      <SelectItem key={option.value} value={option.value}>
+                                        {option.label}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                                {/* 입력 타입이 'code'인 경우 공통코드 선택 */}
+                                {column.inputType === "code" && (
                                   <Select
-                                    value={column.inputType || "text"}
-                                    onValueChange={(value) => handleInputTypeChange(column.columnName, value)}
+                                    value={column.codeCategory || "none"}
+                                    onValueChange={(value) =>
+                                      handleDetailSettingsChange(column.columnName, "code", value)
+                                    }
                                   >
                                     <SelectTrigger className="h-8 text-xs">
-                                      <SelectValue placeholder="입력 타입 선택" />
+                                      <SelectValue placeholder="공통코드 선택" />
                                     </SelectTrigger>
                                     <SelectContent>
-                                      {memoizedInputTypeOptions.map((option) => (
-                                        <SelectItem key={option.value} value={option.value}>
+                                      {commonCodeOptions.map((option, index) => (
+                                        <SelectItem key={`code-${option.value}-${index}`} value={option.value}>
                                           {option.label}
                                         </SelectItem>
                                       ))}
                                     </SelectContent>
                                   </Select>
-                                  {/* 입력 타입이 'code'인 경우 공통코드 선택 */}
-                                  {column.inputType === "code" && (
-                                    <Select
-                                      value={column.codeCategory || "none"}
-                                      onValueChange={(value) =>
-                                        handleDetailSettingsChange(column.columnName, "code", value)
-                                      }
-                                    >
-                                      <SelectTrigger className="h-8 text-xs">
-                                        <SelectValue placeholder="공통코드 선택" />
-                                      </SelectTrigger>
-                                      <SelectContent>
-                                        {commonCodeOptions.map((option, index) => (
-                                          <SelectItem key={`code-${option.value}-${index}`} value={option.value}>
-                                            {option.label}
-                                          </SelectItem>
-                                        ))}
-                                      </SelectContent>
-                                    </Select>
-                                  )}
-                                  {/* 입력 타입이 'category'인 경우 2레벨 메뉴 다중 선택 */}
-                                  {column.inputType === "category" && (
-                                    <div className="space-y-2">
-                                      <label className="text-muted-foreground mb-1 block text-xs">
-                                        적용할 메뉴 (2레벨)
-                                      </label>
-                                      <div className="border rounded-lg p-3 space-y-2 max-h-48 overflow-y-auto">
-                                        {secondLevelMenus.length === 0 ? (
-                                          <p className="text-xs text-muted-foreground">
-                                            2레벨 메뉴가 없습니다. 메뉴를 선택하지 않으면 모든 메뉴에서 사용 가능합니다.
-                                          </p>
-                                        ) : (
-                                          secondLevelMenus.map((menu) => {
-                                            // menuObjid를 숫자로 변환하여 비교
-                                            const menuObjidNum = Number(menu.menuObjid);
-                                            const isChecked = (column.categoryMenus || []).includes(menuObjidNum);
-                                            
-                                            return (
-                                              <div key={menu.menuObjid} className="flex items-center gap-2">
-                                                <input
-                                                  type="checkbox"
-                                                  id={`category-menu-${column.columnName}-${menu.menuObjid}`}
-                                                  checked={isChecked}
-                                                  onChange={(e) => {
-                                                    const currentMenus = column.categoryMenus || [];
-                                                    const newMenus = e.target.checked
-                                                      ? [...currentMenus, menuObjidNum]
-                                                      : currentMenus.filter((id) => id !== menuObjidNum);
-
-                                                    setColumns((prev) =>
-                                                      prev.map((col) =>
-                                                        col.columnName === column.columnName
-                                                          ? { ...col, categoryMenus: newMenus }
-                                                          : col
-                                                      )
-                                                    );
-                                                  }}
-                                                  className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring"
-                                                />
-                                                <label
-                                                  htmlFor={`category-menu-${column.columnName}-${menu.menuObjid}`}
-                                                  className="text-xs cursor-pointer flex-1"
-                                                >
-                                                  {menu.parentMenuName} → {menu.menuName}
-                                                </label>
-                                              </div>
-                                            );
-                                          })
-                                        )}
-                                      </div>
-                                      {column.categoryMenus && column.categoryMenus.length > 0 && (
-                                        <p className="text-primary text-xs">
-                                          {column.categoryMenus.length}개 메뉴 선택됨
+                                )}
+                                {/* 입력 타입이 'category'인 경우 2레벨 메뉴 다중 선택 */}
+                                {column.inputType === "category" && (
+                                  <div className="space-y-2">
+                                    <label className="text-muted-foreground mb-1 block text-xs">
+                                      적용할 메뉴 (2레벨)
+                                    </label>
+                                    <div className="border rounded-lg p-3 space-y-2 max-h-48 overflow-y-auto">
+                                      {secondLevelMenus.length === 0 ? (
+                                        <p className="text-xs text-muted-foreground">
+                                          2레벨 메뉴가 없습니다. 메뉴를 선택하지 않으면 모든 메뉴에서 사용 가능합니다.
                                         </p>
+                                      ) : (
+                                        secondLevelMenus.map((menu) => {
+                                          // menuObjid를 숫자로 변환하여 비교
+                                          const menuObjidNum = Number(menu.menuObjid);
+                                          const isChecked = (column.categoryMenus || []).includes(menuObjidNum);
+                                          
+                                          return (
+                                            <div key={menu.menuObjid} className="flex items-center gap-2">
+                                              <input
+                                                type="checkbox"
+                                                id={`category-menu-${column.columnName}-${menu.menuObjid}`}
+                                                checked={isChecked}
+                                                onChange={(e) => {
+                                                  const currentMenus = column.categoryMenus || [];
+                                                  const newMenus = e.target.checked
+                                                    ? [...currentMenus, menuObjidNum]
+                                                    : currentMenus.filter((id) => id !== menuObjidNum);
+
+                                                  setColumns((prev) =>
+                                                    prev.map((col) =>
+                                                      col.columnName === column.columnName
+                                                        ? { ...col, categoryMenus: newMenus }
+                                                        : col
+                                                    )
+                                                  );
+                                                }}
+                                                className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring"
+                                              />
+                                              <label
+                                                htmlFor={`category-menu-${column.columnName}-${menu.menuObjid}`}
+                                                className="text-xs cursor-pointer flex-1"
+                                              >
+                                                {menu.parentMenuName} → {menu.menuName}
+                                              </label>
+                                            </div>
+                                          );
+                                        })
                                       )}
                                     </div>
-                                  )}
-                                  {/* 입력 타입이 'entity'인 경우 참조 테이블 선택 */}
-                                  {column.inputType === "entity" && (
-                                    <>
-                                      {/* 참조 테이블 */}
+                                    {column.categoryMenus && column.categoryMenus.length > 0 && (
+                                      <p className="text-primary text-xs">
+                                        {column.categoryMenus.length}개 메뉴 선택됨
+                                      </p>
+                                    )}
+                                  </div>
+                                )}
+                                {/* 입력 타입이 'entity'인 경우 참조 테이블 선택 */}
+                                {column.inputType === "entity" && (
+                                  <>
+                                    {/* 참조 테이블 */}
+                                    <div className="w-48">
+                                      <label className="text-muted-foreground mb-1 block text-xs">
+                                        참조 테이블
+                                      </label>
+                                      <Select
+                                        value={column.referenceTable || "none"}
+                                        onValueChange={(value) =>
+                                          handleDetailSettingsChange(column.columnName, "entity", value)
+                                        }
+                                      >
+                                        <SelectTrigger className="bg-background h-8 w-full text-xs">
+                                          <SelectValue placeholder="선택" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                          {referenceTableOptions.map((option, index) => (
+                                            <SelectItem
+                                              key={`entity-${option.value}-${index}`}
+                                              value={option.value}
+                                            >
+                                              <div className="flex flex-col">
+                                                <span className="font-medium">{option.label}</span>
+                                                <span className="text-muted-foreground text-xs">
+                                                  {option.value}
+                                                </span>
+                                              </div>
+                                            </SelectItem>
+                                          ))}
+                                        </SelectContent>
+                                      </Select>
+                                    </div>
+
+                                    {/* 조인 컬럼 */}
+                                    {column.referenceTable && column.referenceTable !== "none" && (
                                       <div className="w-48">
                                         <label className="text-muted-foreground mb-1 block text-xs">
-                                          참조 테이블
+                                          조인 컬럼
                                         </label>
                                         <Select
-                                          value={column.referenceTable || "none"}
+                                          value={column.referenceColumn || "none"}
                                           onValueChange={(value) =>
-                                            handleDetailSettingsChange(column.columnName, "entity", value)
+                                            handleDetailSettingsChange(
+                                              column.columnName,
+                                              "entity_reference_column",
+                                              value,
+                                            )
                                           }
                                         >
                                           <SelectTrigger className="bg-background h-8 w-full text-xs">
                                             <SelectValue placeholder="선택" />
                                           </SelectTrigger>
                                           <SelectContent>
-                                            {referenceTableOptions.map((option, index) => (
+                                            <SelectItem value="none">-- 선택 안함 --</SelectItem>
+                                            {referenceTableColumns[column.referenceTable]?.map((refCol, index) => (
                                               <SelectItem
-                                                key={`entity-${option.value}-${index}`}
-                                                value={option.value}
+                                                key={`ref-col-${refCol.columnName}-${index}`}
+                                                value={refCol.columnName}
                                               >
-                                                <div className="flex flex-col">
-                                                  <span className="font-medium">{option.label}</span>
-                                                  <span className="text-muted-foreground text-xs">
-                                                    {option.value}
-                                                  </span>
-                                                </div>
+                                                <span className="font-medium">{refCol.columnName}</span>
                                               </SelectItem>
                                             ))}
+                                            {(!referenceTableColumns[column.referenceTable] ||
+                                              referenceTableColumns[column.referenceTable].length === 0) && (
+                                              <SelectItem value="loading" disabled>
+                                                <div className="flex items-center gap-2">
+                                                  <div className="border-primary h-3 w-3 animate-spin rounded-full border border-t-transparent"></div>
+                                                  로딩중
+                                                </div>
+                                              </SelectItem>
+                                            )}
                                           </SelectContent>
                                         </Select>
                                       </div>
+                                    )}
 
-                                      {/* 조인 컬럼 */}
-                                      {column.referenceTable && column.referenceTable !== "none" && (
+                                    {/* 표시 컬럼 */}
+                                    {column.referenceTable &&
+                                      column.referenceTable !== "none" &&
+                                      column.referenceColumn &&
+                                      column.referenceColumn !== "none" && (
                                         <div className="w-48">
                                           <label className="text-muted-foreground mb-1 block text-xs">
-                                            조인 컬럼
+                                            표시 컬럼
                                           </label>
                                           <Select
-                                            value={column.referenceColumn || "none"}
+                                            value={column.displayColumn || "none"}
                                             onValueChange={(value) =>
                                               handleDetailSettingsChange(
                                                 column.columnName,
-                                                "entity_reference_column",
+                                                "entity_display_column",
                                                 value,
                                               )
                                             }
@@ -1347,79 +1401,32 @@ export default function TableManagementPage() {
                                         </div>
                                       )}
 
-                                      {/* 표시 컬럼 */}
-                                      {column.referenceTable &&
-                                        column.referenceTable !== "none" &&
-                                        column.referenceColumn &&
-                                        column.referenceColumn !== "none" && (
-                                          <div className="w-48">
-                                            <label className="text-muted-foreground mb-1 block text-xs">
-                                              표시 컬럼
-                                            </label>
-                                            <Select
-                                              value={column.displayColumn || "none"}
-                                              onValueChange={(value) =>
-                                                handleDetailSettingsChange(
-                                                  column.columnName,
-                                                  "entity_display_column",
-                                                  value,
-                                                )
-                                              }
-                                            >
-                                              <SelectTrigger className="bg-background h-8 w-full text-xs">
-                                                <SelectValue placeholder="선택" />
-                                              </SelectTrigger>
-                                              <SelectContent>
-                                                <SelectItem value="none">-- 선택 안함 --</SelectItem>
-                                                {referenceTableColumns[column.referenceTable]?.map((refCol, index) => (
-                                                  <SelectItem
-                                                    key={`ref-col-${refCol.columnName}-${index}`}
-                                                    value={refCol.columnName}
-                                                  >
-                                                    <span className="font-medium">{refCol.columnName}</span>
-                                                  </SelectItem>
-                                                ))}
-                                                {(!referenceTableColumns[column.referenceTable] ||
-                                                  referenceTableColumns[column.referenceTable].length === 0) && (
-                                                  <SelectItem value="loading" disabled>
-                                                    <div className="flex items-center gap-2">
-                                                      <div className="border-primary h-3 w-3 animate-spin rounded-full border border-t-transparent"></div>
-                                                      로딩중
-                                                    </div>
-                                                  </SelectItem>
-                                                )}
-                                              </SelectContent>
-                                            </Select>
-                                          </div>
-                                        )}
-
-                                      {/* 설정 완료 표시 */}
-                                      {column.referenceTable &&
-                                        column.referenceTable !== "none" &&
-                                        column.referenceColumn &&
-                                        column.referenceColumn !== "none" &&
-                                        column.displayColumn &&
-                                        column.displayColumn !== "none" && (
-                                          <div className="bg-primary/10 text-primary flex items-center gap-1 rounded px-2 py-1 text-xs w-48">
-                                            <span>✓</span>
-                                            <span className="truncate">설정 완료</span>
-                                          </div>
-                                        )}
-                                    </>
-                                  )}
-                                </div>
-                              </div>
-                              <div className="pl-4">
-                                <Input
-                                  value={column.description || ""}
-                                  onChange={(e) => handleColumnChange(index, "description", e.target.value)}
-                                  placeholder="설명"
-                                  className="h-8 w-full text-xs"
-                                />
+                                    {/* 설정 완료 표시 */}
+                                    {column.referenceTable &&
+                                      column.referenceTable !== "none" &&
+                                      column.referenceColumn &&
+                                      column.referenceColumn !== "none" &&
+                                      column.displayColumn &&
+                                      column.displayColumn !== "none" && (
+                                        <div className="bg-primary/10 text-primary flex items-center gap-1 rounded px-2 py-1 text-xs w-48">
+                                          <span>✓</span>
+                                          <span className="truncate">설정 완료</span>
+                                        </div>
+                                      )}
+                                  </>
+                                )}
                               </div>
                             </div>
-                          ))}
-                        </div>
+                            <div className="pl-4">
+                              <Input
+                                value={column.description || ""}
+                                onChange={(e) => handleColumnChange(index, "description", e.target.value)}
+                                placeholder="설명"
+                                className="h-8 w-full text-xs"
+                              />
+                            </div>
+                          </div>
+                        ))}
 
                         {/* 로딩 표시 */}
                         {columnsLoading && (
@@ -1428,28 +1435,16 @@ export default function TableManagementPage() {
                             <span className="text-muted-foreground ml-2 text-sm">더 많은 컬럼 로딩 중...</span>
                           </div>
                         )}
-
-                        {/* 페이지 정보 */}
-                        <div className="text-muted-foreground text-center text-sm">
-                          {columns.length} / {totalColumns} 컬럼 표시됨
-                        </div>
-
-                        {/* 전체 저장 버튼 */}
-                        <div className="flex justify-end pt-4">
-                          <Button
-                            onClick={saveAllSettings}
-                            disabled={!selectedTable || columns.length === 0}
-                            className="h-10 gap-2 text-sm font-medium"
-                          >
-                            <Settings className="h-4 w-4" />
-                            전체 설정 저장
-                          </Button>
-                        </div>
                       </div>
-                    )}
-                  </>
-                )}
-              </div>
+
+                      {/* 페이지 정보 (고정 하단) */}
+                      <div className="text-muted-foreground flex-shrink-0 border-t py-2 text-center text-sm">
+                        {columns.length} / {totalColumns} 컬럼 표시됨
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
             </div>
           </div>
         </div>
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index 8ab31ff7..5ce253cb 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -308,7 +308,7 @@ function ScreenViewPage() {
       <TableOptionsProvider>
         <div
           ref={containerRef}
-          className="bg-background flex h-full w-full items-center justify-center overflow-auto pt-8"
+          className="bg-background flex h-full w-full items-center justify-center overflow-auto"
         >
           {/* 레이아웃 준비 중 로딩 표시 */}
           {!layoutReady && (
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index 53fd0852..a048bbe4 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -17,6 +17,7 @@ import { toast } from "sonner";
 import { useAuth } from "@/hooks/useAuth";
 import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
 import { TableSearchWidgetHeightProvider } from "@/contexts/TableSearchWidgetHeightContext";
+import { useSplitPanelContext } from "@/contexts/SplitPanelContext";
 
 interface ScreenModalState {
   isOpen: boolean;
@@ -32,6 +33,7 @@ interface ScreenModalProps {
 
 export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   const { userId, userName, user } = useAuth();
+  const splitPanelContext = useSplitPanelContext();
 
   const [modalState, setModalState] = useState<ScreenModalState>({
     isOpen: false,
@@ -60,6 +62,9 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   // 🆕 원본 데이터 상태 (수정 모드에서 UPDATE 판단용)
   const [originalData, setOriginalData] = useState<Record<string, any> | null>(null);
 
+  // 🆕 선택된 데이터 상태 (RepeatScreenModal 등에서 사용)
+  const [selectedData, setSelectedData] = useState<Record<string, any>[]>([]);
+
   // 연속 등록 모드 상태 (state로 변경 - 체크박스 UI 업데이트를 위해)
   const [continuousMode, setContinuousMode] = useState(false);
 
@@ -129,12 +134,37 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   // 전역 모달 이벤트 리스너
   useEffect(() => {
     const handleOpenModal = (event: CustomEvent) => {
-      const { screenId, title, description, size, urlParams, editData } = event.detail;
+      const {
+        screenId,
+        title,
+        description,
+        size,
+        urlParams,
+        editData,
+        splitPanelParentData,
+        selectedData: eventSelectedData,
+        selectedIds,
+      } = event.detail;
+
+      console.log("📦 [ScreenModal] 모달 열기 이벤트 수신:", {
+        screenId,
+        title,
+        selectedData: eventSelectedData,
+        selectedIds,
+      });
 
       // 🆕 모달 열린 시간 기록
       modalOpenedAtRef.current = Date.now();
       console.log("🕐 [ScreenModal] 모달 열림 시간 기록:", modalOpenedAtRef.current);
 
+      // 🆕 선택된 데이터 저장 (RepeatScreenModal 등에서 사용)
+      if (eventSelectedData && Array.isArray(eventSelectedData)) {
+        setSelectedData(eventSelectedData);
+        console.log("📦 [ScreenModal] 선택된 데이터 저장:", eventSelectedData.length, "건");
+      } else {
+        setSelectedData([]);
+      }
+
       // 🆕 URL 파라미터가 있으면 현재 URL에 추가
       if (urlParams && typeof window !== "undefined") {
         const currentUrl = new URL(window.location.href);
@@ -152,6 +182,20 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         setFormData(editData);
         setOriginalData(editData); // 🆕 원본 데이터 저장 (UPDATE 판단용)
       } else {
+        // 🆕 신규 등록 모드: 분할 패널 부모 데이터가 있으면 미리 설정
+        // 1순위: 이벤트로 전달된 splitPanelParentData (탭 안에서 열린 모달)
+        // 2순위: splitPanelContext에서 직접 가져온 데이터 (분할 패널 내에서 열린 모달)
+        const parentData =
+          splitPanelParentData && Object.keys(splitPanelParentData).length > 0
+            ? splitPanelParentData
+            : splitPanelContext?.getMappedParentData() || {};
+
+        if (Object.keys(parentData).length > 0) {
+          console.log("🔗 [ScreenModal] 분할 패널 부모 데이터 초기값 설정:", parentData);
+          setFormData(parentData);
+        } else {
+          setFormData({});
+        }
         setOriginalData(null); // 신규 등록 모드
       }
 
@@ -184,6 +228,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       setScreenData(null);
       setFormData({});
       setOriginalData(null); // 🆕 원본 데이터 초기화
+      setSelectedData([]); // 🆕 선택된 데이터 초기화
       setContinuousMode(false);
       localStorage.setItem("screenModal_continuousMode", "false"); // localStorage에 저장
       console.log("🔄 연속 모드 초기화: false");
@@ -649,6 +694,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                         id: modalState.screenId!,
                         tableName: screenData.screenInfo?.tableName,
                       }}
+                      groupedData={selectedData}
                       userId={userId}
                       userName={userName}
                       companyCode={user?.companyCode}
diff --git a/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx b/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
index 19aa0a71..6e41fdaf 100644
--- a/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
+++ b/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
@@ -34,7 +34,7 @@ interface Vehicle {
   driver: string;
   lat: number;
   lng: number;
-  status: "active" | "inactive" | "maintenance" | "warning";
+  status: "active" | "inactive" | "maintenance" | "warning" | "off";
   speed: number;
   destination: string;
 }
@@ -88,24 +88,45 @@ export default function VehicleMapOnlyWidget({ element, refreshInterval = 30000
           const statusCol = element.chartConfig.statusColumn || "status";
 
           // DB 데이터를 Vehicle 형식으로 변환
-          const vehiclesFromDB: Vehicle[] = result.data.rows.map((row: any, index: number) => ({
-            id: row.id || row.vehicle_number || `V${index + 1}`,
-            name: row[labelCol] || `차량 ${index + 1}`,
-            driver: row.driver_name || row.driver || "미배정",
-            lat: parseFloat(row[latCol]),
-            lng: parseFloat(row[lngCol]),
-            status:
-              row[statusCol] === "warning"
-                ? "warning"
-                : row[statusCol] === "active"
-                  ? "active"
-                  : row[statusCol] === "maintenance"
-                    ? "maintenance"
-                    : "inactive",
-            speed: parseFloat(row.speed) || 0,
-            destination: row.destination || "대기 중",
-          }));
+          console.log("🗺️ [VehicleMapOnlyWidget] 원본 데이터:", result.data.rows);
+          console.log("🗺️ [VehicleMapOnlyWidget] 컬럼 매핑:", { latCol, lngCol, labelCol, statusCol });
+          
+          const vehiclesFromDB: Vehicle[] = result.data.rows
+            .map((row: any, index: number) => {
+              const lat = parseFloat(row[latCol]);
+              const lng = parseFloat(row[lngCol]);
+              
+              console.log(`🗺️ [VehicleMapOnlyWidget] 차량 ${index + 1}:`, {
+                id: row.id || row.vehicle_number,
+                latRaw: row[latCol],
+                lngRaw: row[lngCol],
+                latParsed: lat,
+                lngParsed: lng,
+                status: row[statusCol],
+              });
+              
+              return {
+                id: row.id || row.vehicle_number || `V${index + 1}`,
+                name: row[labelCol] || `차량 ${index + 1}`,
+                driver: row.driver_name || row.driver || "미배정",
+                lat,
+                lng,
+                status:
+                  row[statusCol] === "warning"
+                    ? "warning"
+                    : row[statusCol] === "active"
+                      ? "active"
+                      : row[statusCol] === "maintenance"
+                        ? "maintenance"
+                        : "inactive",
+                speed: parseFloat(row.speed) || 0,
+                destination: row.destination || "대기 중",
+              };
+            })
+            // 유효한 위도/경도가 있는 차량만 필터링
+            .filter((v: Vehicle) => !isNaN(v.lat) && !isNaN(v.lng) && v.lat !== 0 && v.lng !== 0);
 
+          console.log("🗺️ [VehicleMapOnlyWidget] 유효한 차량 수:", vehiclesFromDB.length);
           setVehicles(vehiclesFromDB);
           setLastUpdate(new Date());
           setIsLoading(false);
diff --git a/frontend/components/flow/FlowConditionBuilder.tsx b/frontend/components/flow/FlowConditionBuilder.tsx
index 70e8b91d..5bccc2c7 100644
--- a/frontend/components/flow/FlowConditionBuilder.tsx
+++ b/frontend/components/flow/FlowConditionBuilder.tsx
@@ -14,13 +14,27 @@ import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { FlowConditionGroup, FlowCondition, ConditionOperator } from "@/types/flow";
 import { getTableColumns } from "@/lib/api/tableManagement";
+import { ExternalRestApiConnectionAPI } from "@/lib/api/externalRestApiConnection";
 import { cn } from "@/lib/utils";
 
+// 다중 REST API 연결 설정
+interface RestApiConnectionConfig {
+  connectionId: number;
+  connectionName: string;
+  endpoint: string;
+  jsonPath: string;
+  alias: string;
+}
+
 interface FlowConditionBuilderProps {
   flowId: number;
   tableName?: string; // 조회할 테이블명
-  dbSourceType?: "internal" | "external"; // DB 소스 타입
+  dbSourceType?: "internal" | "external" | "restapi" | "multi_restapi"; // DB 소스 타입
   dbConnectionId?: number; // 외부 DB 연결 ID
+  restApiConnectionId?: number; // REST API 연결 ID (단일)
+  restApiEndpoint?: string; // REST API 엔드포인트 (단일)
+  restApiJsonPath?: string; // REST API JSON 경로 (단일)
+  restApiConnections?: RestApiConnectionConfig[]; // 다중 REST API 설정
   condition?: FlowConditionGroup;
   onChange: (condition: FlowConditionGroup | undefined) => void;
 }
@@ -45,6 +59,10 @@ export function FlowConditionBuilder({
   tableName,
   dbSourceType = "internal",
   dbConnectionId,
+  restApiConnectionId,
+  restApiEndpoint,
+  restApiJsonPath,
+  restApiConnections,
   condition,
   onChange,
 }: FlowConditionBuilderProps) {
@@ -65,9 +83,10 @@ export function FlowConditionBuilder({
     }
   }, [condition]);
 
-  // 테이블 컬럼 로드 - 내부/외부 DB 모두 지원
+  // 테이블 컬럼 로드 - 내부/외부 DB 및 REST API 모두 지원
   useEffect(() => {
-    if (!tableName) {
+    // REST API인 경우 tableName이 없어도 진행 가능
+    if (!tableName && dbSourceType !== "restapi" && dbSourceType !== "multi_restapi") {
       setColumns([]);
       return;
     }
@@ -79,8 +98,106 @@ export function FlowConditionBuilder({
           tableName,
           dbSourceType,
           dbConnectionId,
+          restApiConnectionId,
+          restApiEndpoint,
+          restApiJsonPath,
+          restApiConnections,
         });
 
+        // 다중 REST API인 경우
+        if (dbSourceType === "multi_restapi" && restApiConnections && restApiConnections.length > 0) {
+          try {
+            console.log("🌐 [FlowConditionBuilder] 다중 REST API 컬럼 로드 시작:", restApiConnections);
+            
+            // 각 API에서 컬럼 정보 수집
+            const allColumns: any[] = [];
+            
+            for (const config of restApiConnections) {
+              try {
+                const effectiveJsonPath = (!config.jsonPath || config.jsonPath === "data") ? "response" : config.jsonPath;
+                
+                const restApiData = await ExternalRestApiConnectionAPI.fetchData(
+                  config.connectionId,
+                  config.endpoint,
+                  effectiveJsonPath,
+                );
+                
+                if (restApiData.columns && restApiData.columns.length > 0) {
+                  // 별칭 적용
+                  const prefixedColumns = restApiData.columns.map((col) => ({
+                    column_name: config.alias ? `${config.alias}${col.columnName}` : col.columnName,
+                    data_type: col.dataType || "varchar",
+                    displayName: `${col.columnLabel || col.columnName} (${config.connectionName})`,
+                    sourceApi: config.connectionName,
+                  }));
+                  allColumns.push(...prefixedColumns);
+                }
+              } catch (apiError) {
+                console.warn(`API ${config.connectionId} 컬럼 로드 실패:`, apiError);
+              }
+            }
+            
+            console.log("✅ [FlowConditionBuilder] 다중 REST API 컬럼 로드 완료:", allColumns.length, "items");
+            setColumns(allColumns);
+          } catch (multiApiError) {
+            console.error("❌ 다중 REST API 컬럼 로드 실패:", multiApiError);
+            setColumns([]);
+          }
+          return;
+        }
+
+        // 단일 REST API인 경우 (dbSourceType이 restapi이거나 tableName이 _restapi_로 시작)
+        const isRestApi = dbSourceType === "restapi" || tableName?.startsWith("_restapi_");
+        
+        // tableName에서 REST API 연결 ID 추출 (restApiConnectionId가 없는 경우)
+        let effectiveRestApiConnectionId = restApiConnectionId;
+        if (isRestApi && !effectiveRestApiConnectionId && tableName) {
+          const match = tableName.match(/_restapi_(\d+)/);
+          if (match) {
+            effectiveRestApiConnectionId = parseInt(match[1]);
+            console.log("🔍 tableName에서 REST API 연결 ID 추출:", effectiveRestApiConnectionId);
+          }
+        }
+        
+        if (isRestApi && effectiveRestApiConnectionId) {
+          try {
+            // jsonPath가 "data"이거나 없으면 "response"로 변경 (thiratis API 응답 구조에 맞춤)
+            const effectiveJsonPath = (!restApiJsonPath || restApiJsonPath === "data") ? "response" : restApiJsonPath;
+            
+            console.log("🌐 [FlowConditionBuilder] REST API 컬럼 로드 시작:", {
+              connectionId: effectiveRestApiConnectionId,
+              endpoint: restApiEndpoint,
+              jsonPath: restApiJsonPath,
+              effectiveJsonPath,
+            });
+            
+            const restApiData = await ExternalRestApiConnectionAPI.fetchData(
+              effectiveRestApiConnectionId,
+              restApiEndpoint,
+              effectiveJsonPath,
+            );
+            
+            console.log("✅ [FlowConditionBuilder] REST API columns response:", restApiData);
+            
+            if (restApiData.columns && restApiData.columns.length > 0) {
+              const columnList = restApiData.columns.map((col) => ({
+                column_name: col.columnName,
+                data_type: col.dataType || "varchar",
+                displayName: col.columnLabel || col.columnName,
+              }));
+              console.log("✅ Setting REST API columns:", columnList.length, "items", columnList);
+              setColumns(columnList);
+            } else {
+              console.warn("❌ No columns in REST API response");
+              setColumns([]);
+            }
+          } catch (restApiError) {
+            console.error("❌ REST API 컬럼 로드 실패:", restApiError);
+            setColumns([]);
+          }
+          return;
+        }
+
         // 외부 DB인 경우
         if (dbSourceType === "external" && dbConnectionId) {
           const token = localStorage.getItem("authToken");
@@ -148,7 +265,7 @@ export function FlowConditionBuilder({
     };
 
     loadColumns();
-  }, [tableName, dbSourceType, dbConnectionId]);
+  }, [tableName, dbSourceType, dbConnectionId, restApiConnectionId, restApiEndpoint, restApiJsonPath]);
 
   // 조건 변경 시 부모에 전달
   useEffect(() => {
diff --git a/frontend/components/flow/FlowStepPanel.tsx b/frontend/components/flow/FlowStepPanel.tsx
index 8930704a..855596cb 100644
--- a/frontend/components/flow/FlowStepPanel.tsx
+++ b/frontend/components/flow/FlowStepPanel.tsx
@@ -30,12 +30,25 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
 
+// 다중 REST API 연결 설정
+interface RestApiConnectionConfig {
+  connectionId: number;
+  connectionName: string;
+  endpoint: string;
+  jsonPath: string;
+  alias: string;
+}
+
 interface FlowStepPanelProps {
   step: FlowStep;
   flowId: number;
   flowTableName?: string; // 플로우 정의에서 선택한 테이블명
-  flowDbSourceType?: "internal" | "external"; // 플로우의 DB 소스 타입
+  flowDbSourceType?: "internal" | "external" | "restapi" | "multi_restapi"; // 플로우의 DB 소스 타입
   flowDbConnectionId?: number; // 플로우의 외부 DB 연결 ID
+  flowRestApiConnectionId?: number; // 플로우의 REST API 연결 ID (단일)
+  flowRestApiEndpoint?: string; // REST API 엔드포인트 (단일)
+  flowRestApiJsonPath?: string; // REST API JSON 경로 (단일)
+  flowRestApiConnections?: RestApiConnectionConfig[]; // 다중 REST API 설정
   onClose: () => void;
   onUpdate: () => void;
 }
@@ -46,6 +59,10 @@ export function FlowStepPanel({
   flowTableName,
   flowDbSourceType = "internal",
   flowDbConnectionId,
+  flowRestApiConnectionId,
+  flowRestApiEndpoint,
+  flowRestApiJsonPath,
+  flowRestApiConnections,
   onClose,
   onUpdate,
 }: FlowStepPanelProps) {
@@ -56,6 +73,9 @@ export function FlowStepPanel({
     flowTableName,
     flowDbSourceType,
     flowDbConnectionId,
+    flowRestApiConnectionId,
+    flowRestApiEndpoint,
+    flowRestApiJsonPath,
     final: step.tableName || flowTableName || "",
   });
 
@@ -315,10 +335,11 @@ export function FlowStepPanel({
     setFormData(newFormData);
   }, [step.id, flowTableName]); // flowTableName도 의존성 추가
 
-  // 테이블 선택 시 컬럼 로드 - 내부/외부 DB 모두 지원
+  // 테이블 선택 시 컬럼 로드 - 내부/외부 DB 및 REST API 모두 지원
   useEffect(() => {
     const loadColumns = async () => {
-      if (!formData.tableName) {
+      // 다중 REST API인 경우 tableName 없이도 컬럼 로드 가능
+      if (!formData.tableName && flowDbSourceType !== "multi_restapi") {
         setColumns([]);
         return;
       }
@@ -329,8 +350,74 @@ export function FlowStepPanel({
           tableName: formData.tableName,
           flowDbSourceType,
           flowDbConnectionId,
+          flowRestApiConnectionId,
+          flowRestApiConnections,
         });
 
+        // 다중 REST API인 경우
+        if (flowDbSourceType === "multi_restapi" && flowRestApiConnections && flowRestApiConnections.length > 0) {
+          console.log("🌐 다중 REST API 컬럼 로드 시작");
+          const { ExternalRestApiConnectionAPI } = await import("@/lib/api/externalRestApiConnection");
+          
+          const allColumns: any[] = [];
+          
+          for (const config of flowRestApiConnections) {
+            try {
+              const effectiveJsonPath = (!config.jsonPath || config.jsonPath === "data") ? "response" : config.jsonPath;
+              
+              const restApiData = await ExternalRestApiConnectionAPI.fetchData(
+                config.connectionId,
+                config.endpoint,
+                effectiveJsonPath,
+              );
+              
+              if (restApiData.columns && restApiData.columns.length > 0) {
+                const prefixedColumns = restApiData.columns.map((col) => ({
+                  column_name: config.alias ? `${config.alias}${col.columnName}` : col.columnName,
+                  data_type: col.dataType || "varchar",
+                  displayName: `${col.columnLabel || col.columnName} (${config.connectionName})`,
+                }));
+                allColumns.push(...prefixedColumns);
+              }
+            } catch (apiError) {
+              console.warn(`API ${config.connectionId} 컬럼 로드 실패:`, apiError);
+            }
+          }
+          
+          console.log("✅ 다중 REST API 컬럼 로드 완료:", allColumns.length, "items");
+          setColumns(allColumns);
+          return;
+        }
+
+        // 단일 REST API인 경우
+        const isRestApi = flowDbSourceType === "restapi" || formData.tableName?.startsWith("_restapi_");
+        
+        if (isRestApi && flowRestApiConnectionId) {
+          console.log("🌐 단일 REST API 컬럼 로드 시작");
+          const { ExternalRestApiConnectionAPI } = await import("@/lib/api/externalRestApiConnection");
+          
+          const effectiveJsonPath = (!flowRestApiJsonPath || flowRestApiJsonPath === "data") ? "response" : flowRestApiJsonPath;
+          
+          const restApiData = await ExternalRestApiConnectionAPI.fetchData(
+            flowRestApiConnectionId,
+            flowRestApiEndpoint,
+            effectiveJsonPath,
+          );
+          
+          if (restApiData.columns && restApiData.columns.length > 0) {
+            const columnList = restApiData.columns.map((col) => ({
+              column_name: col.columnName,
+              data_type: col.dataType || "varchar",
+              displayName: col.columnLabel || col.columnName,
+            }));
+            console.log("✅ REST API 컬럼 로드 완료:", columnList.length, "items");
+            setColumns(columnList);
+          } else {
+            setColumns([]);
+          }
+          return;
+        }
+
         // 외부 DB인 경우
         if (flowDbSourceType === "external" && flowDbConnectionId) {
           const token = localStorage.getItem("authToken");
@@ -399,7 +486,7 @@ export function FlowStepPanel({
     };
 
     loadColumns();
-  }, [formData.tableName, flowDbSourceType, flowDbConnectionId]);
+  }, [formData.tableName, flowDbSourceType, flowDbConnectionId, flowRestApiConnectionId, flowRestApiEndpoint, flowRestApiJsonPath, flowRestApiConnections]);
 
   // formData의 최신 값을 항상 참조하기 위한 ref
   const formDataRef = useRef(formData);
@@ -661,6 +748,10 @@ export function FlowStepPanel({
                 tableName={formData.tableName}
                 dbSourceType={flowDbSourceType}
                 dbConnectionId={flowDbConnectionId}
+                restApiConnectionId={flowRestApiConnectionId}
+                restApiEndpoint={flowRestApiEndpoint}
+                restApiJsonPath={flowRestApiJsonPath}
+                restApiConnections={flowRestApiConnections}
                 condition={formData.conditionJson}
                 onChange={(condition) => setFormData({ ...formData, conditionJson: condition })}
               />
@@ -852,7 +943,7 @@ export function FlowStepPanel({
                     <SelectItem
                       key={opt.value}
                       value={opt.value}
-                      disabled={opt.value !== "internal" && opt.value !== "external_db"}
+                      disabled={opt.value !== "internal" && opt.value !== "external_db" && opt.value !== "rest_api"}
                     >
                       {opt.label}
                     </SelectItem>
@@ -1044,6 +1135,132 @@ export function FlowStepPanel({
                 )}
               </div>
             )}
+
+            {/* REST API 연동 설정 */}
+            {formData.integrationType === "rest_api" && (
+              <div className="space-y-4 rounded-lg border p-4">
+                <div>
+                  <Label>REST API 연결</Label>
+                  <Select
+                    value={formData.integrationConfig?.connectionId?.toString() || ""}
+                    onValueChange={(value) => {
+                      const connectionId = parseInt(value);
+                      setFormData({
+                        ...formData,
+                        integrationConfig: {
+                          type: "rest_api",
+                          connectionId,
+                          operation: "update",
+                          endpoint: "",
+                          method: "POST",
+                          bodyTemplate: "{}",
+                        } as any,
+                      });
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="REST API 연결 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {flowRestApiConnections && flowRestApiConnections.length > 0 ? (
+                        flowRestApiConnections.map((api) => (
+                          <SelectItem key={api.connectionId} value={api.connectionId.toString()}>
+                            {api.connectionName}
+                          </SelectItem>
+                        ))
+                      ) : flowRestApiConnectionId ? (
+                        <SelectItem value={flowRestApiConnectionId.toString()}>
+                          기본 REST API 연결
+                        </SelectItem>
+                      ) : (
+                        <SelectItem value="" disabled>
+                          연결된 REST API가 없습니다
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {formData.integrationConfig?.connectionId && (
+                  <>
+                    <div>
+                      <Label>HTTP 메서드</Label>
+                      <Select
+                        value={(formData.integrationConfig as any).method || "POST"}
+                        onValueChange={(value) =>
+                          setFormData({
+                            ...formData,
+                            integrationConfig: {
+                              ...formData.integrationConfig!,
+                              method: value,
+                            } as any,
+                          })
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="GET">GET</SelectItem>
+                          <SelectItem value="POST">POST</SelectItem>
+                          <SelectItem value="PUT">PUT</SelectItem>
+                          <SelectItem value="PATCH">PATCH</SelectItem>
+                          <SelectItem value="DELETE">DELETE</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div>
+                      <Label>엔드포인트</Label>
+                      <Input
+                        value={(formData.integrationConfig as any).endpoint || ""}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            integrationConfig: {
+                              ...formData.integrationConfig!,
+                              endpoint: e.target.value,
+                            } as any,
+                          })
+                        }
+                        placeholder="/api/update"
+                      />
+                      <p className="text-muted-foreground mt-1 text-xs">
+                        데이터 이동 시 호출할 API 엔드포인트
+                      </p>
+                    </div>
+
+                    <div>
+                      <Label>요청 바디 (JSON)</Label>
+                      <Textarea
+                        value={(formData.integrationConfig as any).bodyTemplate || "{}"}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            integrationConfig: {
+                              ...formData.integrationConfig!,
+                              bodyTemplate: e.target.value,
+                            } as any,
+                          })
+                        }
+                        placeholder='{"id": "{{dataId}}", "status": "approved"}'
+                        rows={4}
+                        className="font-mono text-sm"
+                      />
+                    </div>
+
+                    <div className="rounded-md bg-blue-50 p-3">
+                      <p className="text-sm text-blue-900">
+                        💡 템플릿 변수를 사용하여 동적 값을 삽입할 수 있습니다:
+                        <br />• {`{{dataId}}`} - 이동하는 데이터의 ID
+                        <br />• {`{{currentUser}}`} - 현재 사용자
+                        <br />• {`{{currentTimestamp}}`} - 현재 시간
+                      </p>
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
           </CardContent>
         </Card>
 
diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 318266da..0d23a88e 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -15,6 +15,8 @@ import {
   ChevronDown,
   ChevronRight,
   UserCheck,
+  LogOut,
+  User,
 } from "lucide-react";
 import { useMenu } from "@/contexts/MenuContext";
 import { useAuth } from "@/hooks/useAuth";
@@ -22,8 +24,17 @@ import { useProfile } from "@/hooks/useProfile";
 import { MenuItem } from "@/lib/api/menu";
 import { menuScreenApi } from "@/lib/api/screen";
 import { toast } from "sonner";
-import { MainHeader } from "./MainHeader";
 import { ProfileModal } from "./ProfileModal";
+import { Logo } from "./Logo";
+import { SideMenu } from "./SideMenu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 // useAuth의 UserInfo 타입을 확장
 interface ExtendedUserInfo {
@@ -412,82 +423,152 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   const uiMenus = convertMenuToUI(currentMenus, user as ExtendedUserInfo);
 
   return (
-    <div className="flex h-screen flex-col bg-white">
-      {/* MainHeader 컴포넌트 사용 */}
-      <MainHeader
-        user={user}
-        onSidebarToggle={() => {
-          // 모바일에서만 토글 동작
-          if (isMobile) {
-            setSidebarOpen(!sidebarOpen);
-          }
-        }}
-        onProfileClick={openProfileModal}
-        onLogout={handleLogout}
-      />
+    <div className="flex h-screen bg-white">
+      {/* 모바일 사이드바 오버레이 */}
+      {sidebarOpen && isMobile && (
+        <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setSidebarOpen(false)} />
+      )}
 
-      <div className="flex flex-1 pt-14">
-        {/* 모바일 사이드바 오버레이 */}
-        {sidebarOpen && isMobile && (
-          <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setSidebarOpen(false)} />
+      {/* 왼쪽 사이드바 */}
+      <aside
+        className={`${
+          isMobile
+            ? (sidebarOpen ? "translate-x-0" : "-translate-x-full") + " fixed top-0 left-0 z-40"
+            : "relative z-auto translate-x-0"
+        } flex h-screen w-[200px] flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
+      >
+        {/* 사이드바 최상단 - 로고 + 모바일 햄버거 메뉴 */}
+        <div className="flex h-14 items-center justify-between border-b border-slate-200 px-4">
+          <Logo />
+          {/* 모바일 햄버거 메뉴 버튼 */}
+          <div className="lg:hidden">
+            <SideMenu onSidebarToggle={() => setSidebarOpen(!sidebarOpen)} />
+          </div>
+        </div>
+
+        {/* Admin/User 모드 전환 버튼 (관리자만) */}
+        {((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" ||
+          (user as ExtendedUserInfo)?.userType === "COMPANY_ADMIN" ||
+          (user as ExtendedUserInfo)?.userType === "admin") && (
+          <div className="border-b border-slate-200 p-3">
+            <Button
+              onClick={handleModeSwitch}
+              className={`flex w-full items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 hover:cursor-pointer ${
+                isAdminMode
+                  ? "border border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100"
+                  : "border-primary/20 bg-accent hover:bg-primary/20 border text-blue-700"
+              }`}
+            >
+              {isAdminMode ? (
+                <>
+                  <UserCheck className="h-4 w-4" />
+                  사용자 메뉴로 전환
+                </>
+              ) : (
+                <>
+                  <Shield className="h-4 w-4" />
+                  관리자 메뉴로 전환
+                </>
+              )}
+            </Button>
+          </div>
         )}
 
-        {/* 왼쪽 사이드바 */}
-        <aside
-          className={`${
-            isMobile
-              ? (sidebarOpen ? "translate-x-0" : "-translate-x-full") + " fixed top-14 left-0 z-40"
-              : "relative top-0 z-auto translate-x-0"
-          } flex h-[calc(100vh-3.5rem)] w-[200px] flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
-        >
-          {/* 사이드바 상단 - Admin/User 모드 전환 버튼 (관리자만) */}
-          {((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" ||
-            (user as ExtendedUserInfo)?.userType === "COMPANY_ADMIN" ||
-            (user as ExtendedUserInfo)?.userType === "admin") && (
-            <div className="border-b border-slate-200 p-3">
-              <Button
-                onClick={handleModeSwitch}
-                className={`flex w-full items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 hover:cursor-pointer ${
-                  isAdminMode
-                    ? "border border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100"
-                    : "border-primary/20 bg-accent hover:bg-primary/20 border text-blue-700"
-                }`}
-              >
-                {isAdminMode ? (
-                  <>
-                    <UserCheck className="h-4 w-4" />
-                    사용자 메뉴로 전환
-                  </>
-                ) : (
-                  <>
-                    <Shield className="h-4 w-4" />
-                    관리자 메뉴로 전환
-                  </>
-                )}
-              </Button>
-            </div>
-          )}
+        {/* 메뉴 영역 */}
+        <div className="flex-1 overflow-y-auto py-4">
+          <nav className="space-y-1 px-3">
+            {loading ? (
+              <div className="animate-pulse space-y-2">
+                {[...Array(5)].map((_, i) => (
+                  <div key={i} className="h-8 rounded bg-slate-200"></div>
+                ))}
+              </div>
+            ) : (
+              uiMenus.map((menu) => renderMenu(menu))
+            )}
+          </nav>
+        </div>
 
-          <div className="flex-1 overflow-y-auto py-4">
-            <nav className="space-y-1 px-3">
-              {loading ? (
-                <div className="animate-pulse space-y-2">
-                  {[...Array(5)].map((_, i) => (
-                    <div key={i} className="h-8 rounded bg-slate-200"></div>
-                  ))}
+        {/* 사이드바 하단 - 사용자 프로필 */}
+        <div className="border-t border-slate-200 p-3">
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <button className="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors hover:bg-slate-100">
+                {/* 프로필 아바타 */}
+                <div className="relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full">
+                  {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
+                    <img
+                      src={user.photo}
+                      alt={user.userName || "User"}
+                      className="aspect-square h-full w-full object-cover"
+                    />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-sm font-semibold text-slate-700">
+                      {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
+                    </div>
+                  )}
                 </div>
-              ) : (
-                uiMenus.map((menu) => renderMenu(menu))
-              )}
-            </nav>
-          </div>
-        </aside>
+                {/* 사용자 정보 */}
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium text-slate-900">
+                    {user.userName || "사용자"}
+                  </p>
+                  <p className="truncate text-xs text-slate-500">
+                    {user.deptName || user.email || user.userId}
+                  </p>
+                </div>
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="start" side="top">
+              <DropdownMenuLabel className="font-normal">
+                <div className="flex items-center space-x-3">
+                  {/* 프로필 사진 표시 */}
+                  <div className="relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full">
+                    {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
+                      <img
+                        src={user.photo}
+                        alt={user.userName || "User"}
+                        className="aspect-square h-full w-full object-cover"
+                      />
+                    ) : (
+                      <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-base font-semibold text-slate-700">
+                        {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
+                      </div>
+                    )}
+                  </div>
 
-        {/* 가운데 컨텐츠 영역 - 스크롤 가능 */}
-        <main className="h-[calc(100vh-3.5rem)] min-w-0 flex-1 overflow-auto bg-white">
-          {children}
-        </main>
-      </div>
+                  {/* 사용자 정보 */}
+                  <div className="flex flex-col space-y-1">
+                    <p className="text-sm leading-none font-medium">
+                      {user.userName || "사용자"} ({user.userId || ""})
+                    </p>
+                    <p className="text-muted-foreground text-xs leading-none font-semibold">{user.email || ""}</p>
+                    <p className="text-muted-foreground text-xs leading-none font-semibold">
+                      {user.deptName && user.positionName
+                        ? `${user.deptName}, ${user.positionName}`
+                        : user.deptName || user.positionName || "부서 정보 없음"}
+                    </p>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={openProfileModal}>
+                <User className="mr-2 h-4 w-4" />
+                <span>프로필</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleLogout}>
+                <LogOut className="mr-2 h-4 w-4" />
+                <span>로그아웃</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </aside>
+
+      {/* 가운데 컨텐츠 영역 - 스크롤 가능 */}
+      <main className="h-screen min-w-0 flex-1 overflow-auto bg-white">
+        {children}
+      </main>
 
       {/* 프로필 수정 모달 */}
       <ProfileModal
diff --git a/frontend/components/screen-embedding/EmbeddedScreen.tsx b/frontend/components/screen-embedding/EmbeddedScreen.tsx
index ce7030eb..3880fc54 100644
--- a/frontend/components/screen-embedding/EmbeddedScreen.tsx
+++ b/frontend/components/screen-embedding/EmbeddedScreen.tsx
@@ -91,6 +91,21 @@ export const EmbeddedScreen = forwardRef<EmbeddedScreenHandle, EmbeddedScreenPro
       }
     }, [initialFormData]);
 
+    // 🆕 분할 패널에서 좌측 선택 데이터가 변경되면 우측 화면의 formData에 자동 반영
+    useEffect(() => {
+      // 우측 화면인 경우에만 적용
+      if (position !== "right" || !splitPanelContext) return;
+      
+      const mappedData = splitPanelContext.getMappedParentData();
+      if (Object.keys(mappedData).length > 0) {
+        console.log("🔗 [EmbeddedScreen] 분할 패널 부모 데이터 자동 반영:", mappedData);
+        setFormData((prev) => ({
+          ...prev,
+          ...mappedData,
+        }));
+      }
+    }, [position, splitPanelContext, splitPanelContext?.selectedLeftData]);
+
     // 선택 변경 이벤트 전파
     useEffect(() => {
       onSelectionChanged?.(selectedRows);
diff --git a/frontend/components/screen-embedding/ScreenSplitPanel.tsx b/frontend/components/screen-embedding/ScreenSplitPanel.tsx
index 2e43fcc6..60b6bf24 100644
--- a/frontend/components/screen-embedding/ScreenSplitPanel.tsx
+++ b/frontend/components/screen-embedding/ScreenSplitPanel.tsx
@@ -33,6 +33,7 @@ export function ScreenSplitPanel({ screenId, config, initialFormData }: ScreenSp
     leftScreenId: config?.leftScreenId,
     rightScreenId: config?.rightScreenId,
     configSplitRatio,
+    parentDataMapping: config?.parentDataMapping,
     configKeys: config ? Object.keys(config) : [],
   });
   
@@ -125,6 +126,8 @@ export function ScreenSplitPanel({ screenId, config, initialFormData }: ScreenSp
       splitPanelId={splitPanelId}
       leftScreenId={config?.leftScreenId || null}
       rightScreenId={config?.rightScreenId || null}
+      parentDataMapping={config?.parentDataMapping || []}
+      linkedFilters={config?.linkedFilters || []}
     >
       <div className="flex h-full">
         {/* 좌측 패널 */}
diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 1119e698..88d11447 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -54,6 +54,7 @@ import { SaveModal } from "./SaveModal";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 import { useTableOptions } from "@/contexts/TableOptionsContext";
 import { TableFilter, ColumnVisibility } from "@/types/table-options";
+import { useSplitPanelContext } from "@/contexts/SplitPanelContext";
 
 // 파일 데이터 타입 정의 (AttachedFileInfo와 호환)
 interface FileInfo {
@@ -105,6 +106,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { user } = useAuth(); // 사용자 정보 가져오기
   const { registerTable, unregisterTable } = useTableOptions(); // Context 훅
+  const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
   
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
@@ -575,12 +577,72 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
       setLoading(true);
       try {
-        console.log("🔍 데이터 조회 시작:", { tableName: component.tableName, page, pageSize });
+        // 🆕 연결 필터 값 가져오기 (분할 패널 내부일 때)
+        let linkedFilterValues: Record<string, any> = {};
+        let hasLinkedFiltersConfigured = false; // 연결 필터가 설정되어 있는지 여부
+        let hasSelectedLeftData = false; // 좌측에서 데이터가 선택되었는지 여부
+        
+        if (splitPanelContext) {
+          // 연결 필터 설정 여부 확인 (현재 테이블에 해당하는 필터가 있는지)
+          const linkedFiltersConfig = splitPanelContext.linkedFilters || [];
+          hasLinkedFiltersConfigured = linkedFiltersConfig.some(
+            (filter) => filter.targetColumn?.startsWith(component.tableName + ".") ||
+                        filter.targetColumn === component.tableName
+          );
+          
+          // 좌측 데이터 선택 여부 확인
+          hasSelectedLeftData = splitPanelContext.selectedLeftData && 
+                                Object.keys(splitPanelContext.selectedLeftData).length > 0;
+          
+          linkedFilterValues = splitPanelContext.getLinkedFilterValues();
+          // 현재 테이블에 해당하는 필터만 추출 (테이블명.컬럼명 형식에서)
+          const tableSpecificFilters: Record<string, any> = {};
+          for (const [key, value] of Object.entries(linkedFilterValues)) {
+            // key가 "테이블명.컬럼명" 형식인 경우
+            if (key.includes(".")) {
+              const [tableName, columnName] = key.split(".");
+              if (tableName === component.tableName) {
+                tableSpecificFilters[columnName] = value;
+                hasLinkedFiltersConfigured = true; // 이 테이블에 대한 필터가 있음
+              }
+            } else {
+              // 테이블명 없이 컬럼명만 있는 경우 그대로 사용
+              tableSpecificFilters[key] = value;
+            }
+          }
+          linkedFilterValues = tableSpecificFilters;
+        }
+        
+        // 🆕 연결 필터가 설정되어 있지만 좌측에서 데이터가 선택되지 않은 경우
+        // → 빈 데이터 표시 (모든 데이터를 보여주지 않음)
+        if (hasLinkedFiltersConfigured && !hasSelectedLeftData) {
+          console.log("⚠️ [InteractiveDataTable] 연결 필터 설정됨 but 좌측 데이터 미선택 → 빈 데이터 표시");
+          setData([]);
+          setTotal(0);
+          setTotalPages(0);
+          setCurrentPage(1);
+          setLoading(false);
+          return;
+        }
+        
+        // 검색 파라미터와 연결 필터 병합
+        const mergedSearchParams = {
+          ...searchParams,
+          ...linkedFilterValues,
+        };
+        
+        console.log("🔍 데이터 조회 시작:", { 
+          tableName: component.tableName, 
+          page, 
+          pageSize,
+          linkedFilterValues,
+          mergedSearchParams,
+        });
         
         const result = await tableTypeApi.getTableData(component.tableName, {
           page,
           size: pageSize,
-          search: searchParams,
+          search: mergedSearchParams,
           autoFilter: component.autoFilter, // 🆕 자동 필터 설정 전달
         });
 
@@ -680,7 +742,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         setLoading(false);
       }
     },
-    [component.tableName, pageSize, component.autoFilter], // 🆕 autoFilter 추가
+    [component.tableName, pageSize, component.autoFilter, splitPanelContext?.selectedLeftData], // 🆕 autoFilter, 연결필터 추가
   );
 
   // 현재 사용자 정보 로드
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index c9535285..3c9d16f5 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -19,6 +19,7 @@ import { FlowButtonGroup } from "./widgets/FlowButtonGroup";
 import { FlowVisibilityConfig } from "@/types/control-management";
 import { findAllButtonGroups } from "@/lib/utils/flowButtonGroupUtils";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
+import { useSplitPanelContext } from "@/contexts/SplitPanelContext";
 
 // 컴포넌트 렌더러들을 강제로 로드하여 레지스트리에 등록
 import "@/lib/registry/components/ButtonRenderer";
@@ -78,6 +79,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 }) => {
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName: authUserName, user: authUser } = useAuth();
+  const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
 
   // 외부에서 전달받은 사용자 정보가 있으면 우선 사용 (ScreenModal 등에서)
   const userName = externalUserName || authUserName;
@@ -116,8 +118,30 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   // 팝업 전용 formData 상태
   const [popupFormData, setPopupFormData] = useState<Record<string, any>>({});
 
-  // formData 결정 (외부에서 전달받은 것이 있으면 우선 사용)
-  const formData = externalFormData || localFormData;
+  // 🆕 분할 패널에서 매핑된 부모 데이터 가져오기
+  const splitPanelMappedData = React.useMemo(() => {
+    if (splitPanelContext) {
+      return splitPanelContext.getMappedParentData();
+    }
+    return {};
+  }, [splitPanelContext, splitPanelContext?.selectedLeftData]);
+
+  // formData 결정 (외부에서 전달받은 것이 있으면 우선 사용, 분할 패널 데이터도 병합)
+  const formData = React.useMemo(() => {
+    const baseData = externalFormData || localFormData;
+    // 분할 패널 매핑 데이터가 있으면 병합 (기존 값이 없는 경우에만)
+    if (Object.keys(splitPanelMappedData).length > 0) {
+      const merged = { ...baseData };
+      for (const [key, value] of Object.entries(splitPanelMappedData)) {
+        // 기존 값이 없거나 빈 값인 경우에만 매핑 데이터 적용
+        if (merged[key] === undefined || merged[key] === null || merged[key] === "") {
+          merged[key] = value;
+        }
+      }
+      return merged;
+    }
+    return baseData;
+  }, [externalFormData, localFormData, splitPanelMappedData]);
 
   // formData 업데이트 함수
   const updateFormData = useCallback(
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 90d6c18d..2118bca3 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -838,18 +838,53 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
   // 화면의 기본 테이블/REST API 정보 로드
   useEffect(() => {
     const loadScreenDataSource = async () => {
+      console.log("🔍 [ScreenDesigner] 데이터 소스 로드 시작:", {
+        screenId: selectedScreen?.screenId,
+        screenName: selectedScreen?.screenName,
+        dataSourceType: selectedScreen?.dataSourceType,
+        tableName: selectedScreen?.tableName,
+        restApiConnectionId: selectedScreen?.restApiConnectionId,
+        restApiEndpoint: selectedScreen?.restApiEndpoint,
+        restApiJsonPath: selectedScreen?.restApiJsonPath,
+        // 전체 selectedScreen 객체도 출력
+        fullScreen: selectedScreen,
+      });
+      
       // REST API 데이터 소스인 경우
-      if (selectedScreen?.dataSourceType === "restapi" && selectedScreen?.restApiConnectionId) {
+      // 1. dataSourceType이 "restapi"인 경우
+      // 2. tableName이 restapi_ 또는 _restapi_로 시작하는 경우
+      // 3. restApiConnectionId가 있는 경우
+      const isRestApi = selectedScreen?.dataSourceType === "restapi" || 
+                        selectedScreen?.tableName?.startsWith("restapi_") ||
+                        selectedScreen?.tableName?.startsWith("_restapi_") ||
+                        !!selectedScreen?.restApiConnectionId;
+      
+      console.log("🔍 [ScreenDesigner] REST API 여부:", { isRestApi });
+      
+      if (isRestApi && (selectedScreen?.restApiConnectionId || selectedScreen?.tableName)) {
         try {
+          // 연결 ID 추출 (restApiConnectionId가 없으면 tableName에서 추출)
+          let connectionId = selectedScreen?.restApiConnectionId;
+          if (!connectionId && selectedScreen?.tableName) {
+            const match = selectedScreen.tableName.match(/restapi_(\d+)/);
+            connectionId = match ? parseInt(match[1]) : undefined;
+          }
+          
+          if (!connectionId) {
+            throw new Error("REST API 연결 ID를 찾을 수 없습니다.");
+          }
+          
+          console.log("🌐 [ScreenDesigner] REST API 데이터 로드:", { connectionId });
+          
           const restApiData = await ExternalRestApiConnectionAPI.fetchData(
-            selectedScreen.restApiConnectionId,
-            selectedScreen.restApiEndpoint,
-            selectedScreen.restApiJsonPath || "data",
+            connectionId,
+            selectedScreen?.restApiEndpoint,
+            selectedScreen?.restApiJsonPath || "response", // 기본값을 response로 변경
           );
 
           // REST API 응답에서 컬럼 정보 생성
           const columns: ColumnInfo[] = restApiData.columns.map((col) => ({
-            tableName: `restapi_${selectedScreen.restApiConnectionId}`,
+            tableName: `restapi_${connectionId}`,
             columnName: col.columnName,
             columnLabel: col.columnLabel,
             dataType: col.dataType === "string" ? "varchar" : col.dataType === "number" ? "numeric" : col.dataType,
@@ -861,10 +896,17 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           }));
 
           const tableInfo: TableInfo = {
-            tableName: `restapi_${selectedScreen.restApiConnectionId}`,
+            tableName: `restapi_${connectionId}`,
             tableLabel: restApiData.connectionInfo.connectionName || "REST API 데이터",
             columns,
           };
+          
+          console.log("✅ [ScreenDesigner] REST API 컬럼 로드 완료:", {
+            tableName: tableInfo.tableName,
+            tableLabel: tableInfo.tableLabel,
+            columnsCount: columns.length,
+            columns: columns.map(c => c.columnName),
+          });
 
           setTables([tableInfo]);
           console.log("REST API 데이터 소스 로드 완료:", {
@@ -1223,7 +1265,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     [layout, screenResolution, saveToHistory],
   );
 
-  // 해상도 변경 핸들러 (자동 스케일링 포함)
+  // 해상도 변경 핸들러 (컴포넌트 크기/위치 유지)
   const handleResolutionChange = useCallback(
     (newResolution: ScreenResolution) => {
       const oldWidth = screenResolution.width;
@@ -1231,122 +1273,28 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
       const newWidth = newResolution.width;
       const newHeight = newResolution.height;
 
-      console.log("📱 해상도 변경 시작:", {
+      console.log("📱 해상도 변경:", {
         from: `${oldWidth}x${oldHeight}`,
         to: `${newWidth}x${newHeight}`,
-        hasComponents: layout.components.length > 0,
-        snapToGrid: layout.gridSettings?.snapToGrid || false,
+        componentsCount: layout.components.length,
       });
 
       setScreenResolution(newResolution);
 
-      // 컴포넌트가 없으면 해상도만 변경
-      if (layout.components.length === 0) {
-        const updatedLayout = {
-          ...layout,
-          screenResolution: newResolution,
-        };
-        setLayout(updatedLayout);
-        saveToHistory(updatedLayout);
-        console.log("✅ 해상도 변경 완료 (컴포넌트 없음)");
-        return;
-      }
-
-      // 비율 계산
-      const scaleX = newWidth / oldWidth;
-      const scaleY = newHeight / oldHeight;
-
-      console.log("📐 스케일링 비율:", {
-        scaleX: `${(scaleX * 100).toFixed(2)}%`,
-        scaleY: `${(scaleY * 100).toFixed(2)}%`,
-      });
-
-      // 컴포넌트 재귀적으로 스케일링하는 함수
-      const scaleComponent = (comp: ComponentData): ComponentData => {
-        // 위치 스케일링
-        const scaledPosition = {
-          x: comp.position.x * scaleX,
-          y: comp.position.y * scaleY,
-          z: comp.position.z || 1,
-        };
-
-        // 크기 스케일링
-        const scaledSize = {
-          width: comp.size.width * scaleX,
-          height: comp.size.height * scaleY,
-        };
-
-        return {
-          ...comp,
-          position: scaledPosition,
-          size: scaledSize,
-        };
-      };
-
-      // 모든 컴포넌트 스케일링 (그룹의 자식도 자동으로 스케일링됨)
-      const scaledComponents = layout.components.map(scaleComponent);
-
-      console.log("🔄 컴포넌트 스케일링 완료:", {
-        totalComponents: scaledComponents.length,
-        groupComponents: scaledComponents.filter((c) => c.type === "group").length,
-        note: "그룹의 자식 컴포넌트도 모두 스케일링됨",
-      });
-
-      // 격자 스냅이 활성화된 경우 격자에 맞춰 재조정
-      let finalComponents = scaledComponents;
-      if (layout.gridSettings?.snapToGrid) {
-        const newGridInfo = calculateGridInfo(newWidth, newHeight, {
-          columns: layout.gridSettings.columns,
-          gap: layout.gridSettings.gap,
-          padding: layout.gridSettings.padding,
-          snapToGrid: layout.gridSettings.snapToGrid || false,
-        });
-
-        const gridUtilSettings = {
-          columns: layout.gridSettings.columns,
-          gap: layout.gridSettings.gap,
-          padding: layout.gridSettings.padding,
-          snapToGrid: true,
-        };
-
-        finalComponents = scaledComponents.map((comp) => {
-          const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings);
-          const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings);
-
-          // gridColumns 재계산
-          const adjustedGridColumns = adjustGridColumnsFromSize({ size: snappedSize }, newGridInfo, gridUtilSettings);
-
-          return {
-            ...comp,
-            position: snappedPosition,
-            size: snappedSize,
-            gridColumns: adjustedGridColumns,
-          };
-        });
-
-        console.log("🧲 격자 스냅 적용 완료");
-      }
-
+      // 해상도만 변경하고 컴포넌트 크기/위치는 그대로 유지
       const updatedLayout = {
         ...layout,
-        components: finalComponents,
         screenResolution: newResolution,
       };
 
       setLayout(updatedLayout);
       saveToHistory(updatedLayout);
 
-      toast.success(`해상도 변경 완료! ${scaledComponents.length}개 컴포넌트가 자동으로 조정되었습니다.`, {
+      toast.success(`해상도가 변경되었습니다.`, {
         description: `${oldWidth}×${oldHeight} → ${newWidth}×${newHeight}`,
       });
 
-      console.log("✅ 해상도 변경 완료:", {
-        newResolution: `${newWidth}x${newHeight}`,
-        scaledComponents: finalComponents.length,
-        scaleX: `${(scaleX * 100).toFixed(2)}%`,
-        scaleY: `${(scaleY * 100).toFixed(2)}%`,
-        note: "모든 컴포넌트가 비율에 맞게 자동 조정됨",
-      });
+      console.log("✅ 해상도 변경 완료 (컴포넌트 크기/위치 유지)");
     },
     [layout, saveToHistory, screenResolution],
   );
@@ -4256,8 +4204,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
             {/* 통합 패널 */}
             {panelStates.unified?.isOpen && (
-              <div className="border-border bg-card flex h-full w-[240px] flex-col border-r shadow-sm">
-                <div className="border-border flex items-center justify-between border-b px-4 py-3">
+              <div className="border-border bg-card flex h-full w-[240px] flex-col border-r shadow-sm overflow-hidden">
+                <div className="border-border flex items-center justify-between border-b px-4 py-3 shrink-0">
                   <h3 className="text-foreground text-sm font-semibold">패널</h3>
                   <button
                     onClick={() => closePanel("unified")}
@@ -4266,7 +4214,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                     ✕
                   </button>
                 </div>
-                <div className="flex min-h-0 flex-1 flex-col">
+                <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
                   <Tabs defaultValue="components" className="flex min-h-0 flex-1 flex-col">
                     <TabsList className="mx-4 mt-2 grid h-8 w-auto grid-cols-2 gap-1">
                       <TabsTrigger value="components" className="text-xs">
diff --git a/frontend/components/screen/ScreenList.tsx b/frontend/components/screen/ScreenList.tsx
index 8e5ba1d2..916fe60e 100644
--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@@ -41,6 +41,7 @@ import { cn } from "@/lib/utils";
 import { MoreHorizontal, Edit, Trash2, Copy, Eye, Plus, Search, Palette, RotateCcw, Trash, Check, ChevronsUpDown } from "lucide-react";
 import { ScreenDefinition } from "@/types/screen";
 import { screenApi } from "@/lib/api/screen";
+import { ExternalRestApiConnectionAPI, ExternalRestApiConnection } from "@/lib/api/externalRestApiConnection";
 import CreateScreenModal from "./CreateScreenModal";
 import CopyScreenModal from "./CopyScreenModal";
 import dynamic from "next/dynamic";
@@ -119,11 +120,17 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
   const [permanentDeleteDialogOpen, setPermanentDeleteDialogOpen] = useState(false);
   const [screenToPermanentDelete, setScreenToPermanentDelete] = useState<DeletedScreenDefinition | null>(null);
 
-  // 일괄삭제 관련 상태
+  // 휴지통 일괄삭제 관련 상태
   const [selectedScreenIds, setSelectedScreenIds] = useState<number[]>([]);
   const [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState(false);
   const [bulkDeleting, setBulkDeleting] = useState(false);
 
+  // 활성 화면 일괄삭제 관련 상태
+  const [selectedActiveScreenIds, setSelectedActiveScreenIds] = useState<number[]>([]);
+  const [activeBulkDeleteDialogOpen, setActiveBulkDeleteDialogOpen] = useState(false);
+  const [activeBulkDeleteReason, setActiveBulkDeleteReason] = useState("");
+  const [activeBulkDeleting, setActiveBulkDeleting] = useState(false);
+
   // 편집 관련 상태
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [screenToEdit, setScreenToEdit] = useState<ScreenDefinition | null>(null);
@@ -132,10 +139,18 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     description: "",
     isActive: "Y",
     tableName: "",
+    dataSourceType: "database" as "database" | "restapi",
+    restApiConnectionId: null as number | null,
+    restApiEndpoint: "",
+    restApiJsonPath: "data",
   });
   const [tables, setTables] = useState<Array<{ tableName: string; tableLabel: string }>>([]);
   const [loadingTables, setLoadingTables] = useState(false);
   const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+  
+  // REST API 연결 관련 상태 (편집용)
+  const [editRestApiConnections, setEditRestApiConnections] = useState<ExternalRestApiConnection[]>([]);
+  const [editRestApiComboboxOpen, setEditRestApiComboboxOpen] = useState(false);
 
   // 미리보기 관련 상태
   const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
@@ -272,11 +287,19 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
 
   const handleEdit = async (screen: ScreenDefinition) => {
     setScreenToEdit(screen);
+    
+    // 데이터 소스 타입 결정
+    const isRestApi = screen.dataSourceType === "restapi" || screen.tableName?.startsWith("_restapi_");
+    
     setEditFormData({
       screenName: screen.screenName,
       description: screen.description || "",
       isActive: screen.isActive,
       tableName: screen.tableName || "",
+      dataSourceType: isRestApi ? "restapi" : "database",
+      restApiConnectionId: (screen as any).restApiConnectionId || null,
+      restApiEndpoint: (screen as any).restApiEndpoint || "",
+      restApiJsonPath: (screen as any).restApiJsonPath || "data",
     });
     setEditDialogOpen(true);
 
@@ -298,14 +321,50 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     } finally {
       setLoadingTables(false);
     }
+    
+    // REST API 연결 목록 로드
+    try {
+      const connections = await ExternalRestApiConnectionAPI.getConnections({ is_active: "Y" });
+      setEditRestApiConnections(connections);
+    } catch (error) {
+      console.error("REST API 연결 목록 조회 실패:", error);
+      setEditRestApiConnections([]);
+    }
   };
 
   const handleEditSave = async () => {
     if (!screenToEdit) return;
 
     try {
+      // 데이터 소스 타입에 따라 업데이트 데이터 구성
+      const updateData: any = {
+        screenName: editFormData.screenName,
+        description: editFormData.description,
+        isActive: editFormData.isActive,
+        dataSourceType: editFormData.dataSourceType,
+      };
+
+      if (editFormData.dataSourceType === "database") {
+        updateData.tableName = editFormData.tableName;
+        updateData.restApiConnectionId = null;
+        updateData.restApiEndpoint = null;
+        updateData.restApiJsonPath = null;
+      } else {
+        // REST API
+        updateData.tableName = `_restapi_${editFormData.restApiConnectionId}`;
+        updateData.restApiConnectionId = editFormData.restApiConnectionId;
+        updateData.restApiEndpoint = editFormData.restApiEndpoint;
+        updateData.restApiJsonPath = editFormData.restApiJsonPath || "data";
+      }
+
+      console.log("📤 화면 편집 저장 요청:", {
+        screenId: screenToEdit.screenId,
+        editFormData,
+        updateData,
+      });
+
       // 화면 정보 업데이트 API 호출
-      await screenApi.updateScreenInfo(screenToEdit.screenId, editFormData);
+      await screenApi.updateScreenInfo(screenToEdit.screenId, updateData);
 
       // 선택된 테이블의 라벨 찾기
       const selectedTable = tables.find((t) => t.tableName === editFormData.tableName);
@@ -318,10 +377,11 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
             ? {
                 ...s,
                 screenName: editFormData.screenName,
-                tableName: editFormData.tableName,
+                tableName: updateData.tableName,
                 tableLabel: tableLabel,
                 description: editFormData.description,
                 isActive: editFormData.isActive,
+                dataSourceType: editFormData.dataSourceType,
               }
             : s,
         ),
@@ -425,7 +485,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     }
   };
 
-  // 체크박스 선택 처리
+  // 휴지통 체크박스 선택 처리
   const handleScreenCheck = (screenId: number, checked: boolean) => {
     if (checked) {
       setSelectedScreenIds((prev) => [...prev, screenId]);
@@ -434,7 +494,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     }
   };
 
-  // 전체 선택/해제
+  // 휴지통 전체 선택/해제
   const handleSelectAll = (checked: boolean) => {
     if (checked) {
       setSelectedScreenIds(deletedScreens.map((screen) => screen.screenId));
@@ -443,7 +503,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     }
   };
 
-  // 일괄삭제 실행
+  // 휴지통 일괄삭제 실행
   const handleBulkDelete = () => {
     if (selectedScreenIds.length === 0) {
       alert("삭제할 화면을 선택해주세요.");
@@ -452,6 +512,70 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     setBulkDeleteDialogOpen(true);
   };
 
+  // 활성 화면 체크박스 선택 처리
+  const handleActiveScreenCheck = (screenId: number, checked: boolean) => {
+    if (checked) {
+      setSelectedActiveScreenIds((prev) => [...prev, screenId]);
+    } else {
+      setSelectedActiveScreenIds((prev) => prev.filter((id) => id !== screenId));
+    }
+  };
+
+  // 활성 화면 전체 선택/해제
+  const handleActiveSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedActiveScreenIds(screens.map((screen) => screen.screenId));
+    } else {
+      setSelectedActiveScreenIds([]);
+    }
+  };
+
+  // 활성 화면 일괄삭제 실행
+  const handleActiveBulkDelete = () => {
+    if (selectedActiveScreenIds.length === 0) {
+      alert("삭제할 화면을 선택해주세요.");
+      return;
+    }
+    setActiveBulkDeleteDialogOpen(true);
+  };
+
+  // 활성 화면 일괄삭제 확인
+  const confirmActiveBulkDelete = async () => {
+    if (selectedActiveScreenIds.length === 0) return;
+
+    try {
+      setActiveBulkDeleting(true);
+      const result = await screenApi.bulkDeleteScreens(
+        selectedActiveScreenIds,
+        activeBulkDeleteReason || undefined,
+        true // 강제 삭제 (의존성 무시)
+      );
+
+      // 삭제된 화면들을 목록에서 제거
+      setScreens((prev) => prev.filter((screen) => !selectedActiveScreenIds.includes(screen.screenId)));
+
+      setSelectedActiveScreenIds([]);
+      setActiveBulkDeleteDialogOpen(false);
+      setActiveBulkDeleteReason("");
+
+      // 결과 메시지 표시
+      let message = `${result.deletedCount}개 화면이 휴지통으로 이동되었습니다.`;
+      if (result.skippedCount > 0) {
+        message += `\n${result.skippedCount}개 화면은 삭제되지 않았습니다.`;
+      }
+      if (result.errors.length > 0) {
+        message += `\n오류 발생: ${result.errors.map((e) => `화면 ${e.screenId}: ${e.error}`).join(", ")}`;
+      }
+
+      alert(message);
+    } catch (error) {
+      console.error("일괄 삭제 실패:", error);
+      alert("일괄 삭제에 실패했습니다.");
+    } finally {
+      setActiveBulkDeleting(false);
+    }
+  };
+
   const confirmBulkDelete = async () => {
     if (selectedScreenIds.length === 0) return;
 
@@ -579,7 +703,12 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
       </div>
 
       {/* 탭 구조 */}
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
+      <Tabs value={activeTab} onValueChange={(value) => {
+        setActiveTab(value);
+        // 탭 전환 시 선택 상태 초기화
+        setSelectedActiveScreenIds([]);
+        setSelectedScreenIds([]);
+      }}>
         <TabsList className="grid w-full grid-cols-2">
           <TabsTrigger value="active">활성 화면</TabsTrigger>
           <TabsTrigger value="trash">휴지통</TabsTrigger>
@@ -587,11 +716,47 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
 
         {/* 활성 화면 탭 */}
         <TabsContent value="active">
+          {/* 선택 삭제 헤더 (선택된 항목이 있을 때만 표시) */}
+          {selectedActiveScreenIds.length > 0 && (
+            <div className="bg-muted/50 mb-4 flex items-center justify-between rounded-lg border p-3">
+              <span className="text-sm font-medium">
+                {selectedActiveScreenIds.length}개 화면 선택됨
+              </span>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setSelectedActiveScreenIds([])}
+                  className="h-8 text-xs"
+                >
+                  선택 해제
+                </Button>
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={handleActiveBulkDelete}
+                  disabled={activeBulkDeleting}
+                  className="h-8 gap-1 text-xs"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  {activeBulkDeleting ? "삭제 중..." : "선택 삭제"}
+                </Button>
+              </div>
+            </div>
+          )}
+
           {/* 데스크톱 테이블 뷰 (lg 이상) */}
           <div className="bg-card hidden shadow-sm lg:block">
             <Table>
               <TableHeader>
                 <TableRow>
+                  <TableHead className="h-12 w-12 px-4 py-3">
+                    <Checkbox
+                      checked={screens.length > 0 && selectedActiveScreenIds.length === screens.length}
+                      onCheckedChange={handleActiveSelectAll}
+                      aria-label="전체 선택"
+                    />
+                  </TableHead>
                   <TableHead className="h-12 px-6 py-3 text-sm font-semibold">화면명</TableHead>
                   <TableHead className="h-12 px-6 py-3 text-sm font-semibold">테이블명</TableHead>
                   <TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
@@ -605,9 +770,17 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                     key={screen.screenId}
                     className={`bg-background hover:bg-muted/50 cursor-pointer border-b transition-colors ${
                       selectedScreen?.screenId === screen.screenId ? "border-primary/20 bg-accent" : ""
-                    }`}
+                    } ${selectedActiveScreenIds.includes(screen.screenId) ? "bg-muted/30" : ""}`}
                     onClick={() => onDesignScreen(screen)}
                   >
+                    <TableCell className="h-16 px-4 py-3">
+                      <Checkbox
+                        checked={selectedActiveScreenIds.includes(screen.screenId)}
+                        onCheckedChange={(checked) => handleActiveScreenCheck(screen.screenId, checked as boolean)}
+                        onClick={(e) => e.stopPropagation()}
+                        aria-label={`${screen.screenName} 선택`}
+                      />
+                    </TableCell>
                     <TableCell className="h-16 px-6 py-3 cursor-pointer">
                       <div>
                         <div className="font-medium">{screen.screenName}</div>
@@ -703,24 +876,57 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
           </div>
 
           {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-            {screens.map((screen) => (
-              <div
-                key={screen.screenId}
-                className={`bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 shadow-sm transition-colors ${
-                  selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : ""
-                }`}
-                onClick={() => handleScreenSelect(screen)}
-              >
-                {/* 헤더 */}
-                <div className="mb-4 flex items-start justify-between">
-                  <div className="flex-1">
-                    <h3 className="text-base font-semibold">{screen.screenName}</h3>
+          <div className="space-y-4 lg:hidden">
+            {/* 선택 헤더 */}
+            <div className="bg-card flex items-center justify-between rounded-lg border p-4 shadow-sm">
+              <div className="flex items-center gap-3">
+                <Checkbox
+                  checked={screens.length > 0 && selectedActiveScreenIds.length === screens.length}
+                  onCheckedChange={handleActiveSelectAll}
+                  aria-label="전체 선택"
+                />
+                <span className="text-sm text-muted-foreground">전체 선택</span>
+              </div>
+              {selectedActiveScreenIds.length > 0 && (
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={handleActiveBulkDelete}
+                  disabled={activeBulkDeleting}
+                  className="h-9 gap-2 text-sm"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  {activeBulkDeleting ? "삭제 중..." : `${selectedActiveScreenIds.length}개 삭제`}
+                </Button>
+              )}
+            </div>
+
+            {/* 카드 목록 */}
+            <div className="grid gap-4 sm:grid-cols-2">
+              {screens.map((screen) => (
+                <div
+                  key={screen.screenId}
+                  className={`bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 shadow-sm transition-colors ${
+                    selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : ""
+                  } ${selectedActiveScreenIds.includes(screen.screenId) ? "bg-muted/30 border-primary/50" : ""}`}
+                  onClick={() => handleScreenSelect(screen)}
+                >
+                  {/* 헤더 */}
+                  <div className="mb-4 flex items-start gap-3">
+                    <Checkbox
+                      checked={selectedActiveScreenIds.includes(screen.screenId)}
+                      onCheckedChange={(checked) => handleActiveScreenCheck(screen.screenId, checked as boolean)}
+                      onClick={(e) => e.stopPropagation()}
+                      className="mt-1"
+                      aria-label={`${screen.screenName} 선택`}
+                    />
+                    <div className="flex-1">
+                      <h3 className="text-base font-semibold">{screen.screenName}</h3>
+                    </div>
+                    <Badge variant={screen.isActive === "Y" ? "default" : "secondary"}>
+                      {screen.isActive === "Y" ? "활성" : "비활성"}
+                    </Badge>
                   </div>
-                  <Badge variant={screen.isActive === "Y" ? "default" : "secondary"}>
-                    {screen.isActive === "Y" ? "활성" : "비활성"}
-                  </Badge>
-                </div>
 
                 {/* 설명 */}
                 {screen.description && <p className="text-muted-foreground mb-4 text-sm">{screen.description}</p>}
@@ -809,11 +1015,12 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
               </div>
             ))}
 
-            {filteredScreens.length === 0 && (
-              <div className="bg-card col-span-2 flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
-                <p className="text-muted-foreground text-sm">검색 결과가 없습니다.</p>
-              </div>
-            )}
+              {filteredScreens.length === 0 && (
+                <div className="bg-card col-span-2 flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+                  <p className="text-muted-foreground text-sm">검색 결과가 없습니다.</p>
+                </div>
+              )}
+            </div>
           </div>
         </TabsContent>
 
@@ -1171,13 +1378,13 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
         </AlertDialogContent>
       </AlertDialog>
 
-      {/* 일괄삭제 확인 다이얼로그 */}
+      {/* 휴지통 일괄삭제 확인 다이얼로그 */}
       <AlertDialog open={bulkDeleteDialogOpen} onOpenChange={setBulkDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>일괄 영구 삭제 확인</AlertDialogTitle>
             <AlertDialogDescription className="text-destructive">
-              ⚠️ 선택된 {selectedScreenIds.length}개 화면을 영구적으로 삭제하시겠습니까?
+              선택된 {selectedScreenIds.length}개 화면을 영구적으로 삭제하시겠습니까?
               <br />
               <strong>이 작업은 되돌릴 수 없습니다!</strong>
               <br />
@@ -1200,6 +1407,44 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
         </AlertDialogContent>
       </AlertDialog>
 
+      {/* 활성 화면 일괄삭제 확인 다이얼로그 */}
+      <AlertDialog open={activeBulkDeleteDialogOpen} onOpenChange={setActiveBulkDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>선택 화면 삭제 확인</AlertDialogTitle>
+            <AlertDialogDescription>
+              선택된 {selectedActiveScreenIds.length}개 화면을 휴지통으로 이동하시겠습니까?
+              <br />
+              휴지통에서 언제든지 복원할 수 있습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="space-y-2">
+            <Label htmlFor="activeBulkDeleteReason">삭제 사유 (선택사항)</Label>
+            <Textarea
+              id="activeBulkDeleteReason"
+              placeholder="삭제 사유를 입력하세요..."
+              value={activeBulkDeleteReason}
+              onChange={(e) => setActiveBulkDeleteReason(e.target.value)}
+              rows={3}
+            />
+          </div>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              onClick={() => {
+                setActiveBulkDeleteDialogOpen(false);
+                setActiveBulkDeleteReason("");
+              }}
+              disabled={activeBulkDeleting}
+            >
+              취소
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={confirmActiveBulkDelete} variant="destructive" disabled={activeBulkDeleting}>
+              {activeBulkDeleting ? "삭제 중..." : `${selectedActiveScreenIds.length}개 휴지통으로 이동`}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       {/* 화면 편집 다이얼로그 */}
       <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
         <DialogContent className="sm:max-w-[500px]">
@@ -1216,65 +1461,184 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                 placeholder="화면명을 입력하세요"
               />
             </div>
+            
+            {/* 데이터 소스 타입 선택 */}
             <div className="space-y-2">
-              <Label htmlFor="edit-tableName">테이블 *</Label>
-              <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={tableComboboxOpen}
-                    className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
-                    disabled={loadingTables}
-                  >
-                    {loadingTables
-                      ? "로딩 중..."
-                      : editFormData.tableName
-                        ? tables.find((table) => table.tableName === editFormData.tableName)?.tableLabel || editFormData.tableName
-                        : "테이블을 선택하세요"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                  className="p-0"
-                  style={{ width: "var(--radix-popover-trigger-width)" }}
-                  align="start"
-                >
-                  <Command>
-                    <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
-                    <CommandList>
-                      <CommandEmpty className="text-xs sm:text-sm">
-                        테이블을 찾을 수 없습니다.
-                      </CommandEmpty>
-                      <CommandGroup>
-                        {tables.map((table) => (
-                          <CommandItem
-                            key={table.tableName}
-                            value={`${table.tableName} ${table.tableLabel}`}
-                            onSelect={() => {
-                              setEditFormData({ ...editFormData, tableName: table.tableName });
-                              setTableComboboxOpen(false);
-                            }}
-                            className="text-xs sm:text-sm"
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                editFormData.tableName === table.tableName ? "opacity-100" : "opacity-0"
-                              )}
-                            />
-                            <div className="flex flex-col">
-                              <span className="font-medium">{table.tableLabel}</span>
-                              <span className="text-[10px] text-gray-500">{table.tableName}</span>
-                            </div>
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
+              <Label>데이터 소스 타입</Label>
+              <Select
+                value={editFormData.dataSourceType}
+                onValueChange={(value: "database" | "restapi") => {
+                  setEditFormData({ 
+                    ...editFormData, 
+                    dataSourceType: value,
+                    tableName: "",
+                    restApiConnectionId: null,
+                    restApiEndpoint: "",
+                    restApiJsonPath: "data",
+                  });
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="database">데이터베이스</SelectItem>
+                  <SelectItem value="restapi">REST API</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
+            
+            {/* 데이터베이스 선택 (database 타입인 경우) */}
+            {editFormData.dataSourceType === "database" && (
+              <div className="space-y-2">
+                <Label htmlFor="edit-tableName">테이블 *</Label>
+                <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={tableComboboxOpen}
+                      className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                      disabled={loadingTables}
+                    >
+                      {loadingTables
+                        ? "로딩 중..."
+                        : editFormData.tableName
+                          ? tables.find((table) => table.tableName === editFormData.tableName)?.tableLabel || editFormData.tableName
+                          : "테이블을 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+                      <CommandList>
+                        <CommandEmpty className="text-xs sm:text-sm">
+                          테이블을 찾을 수 없습니다.
+                        </CommandEmpty>
+                        <CommandGroup>
+                          {tables.map((table) => (
+                            <CommandItem
+                              key={table.tableName}
+                              value={`${table.tableName} ${table.tableLabel}`}
+                              onSelect={() => {
+                                setEditFormData({ ...editFormData, tableName: table.tableName });
+                                setTableComboboxOpen(false);
+                              }}
+                              className="text-xs sm:text-sm"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  editFormData.tableName === table.tableName ? "opacity-100" : "opacity-0"
+                                )}
+                              />
+                              <div className="flex flex-col">
+                                <span className="font-medium">{table.tableLabel}</span>
+                                <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                              </div>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+            
+            {/* REST API 선택 (restapi 타입인 경우) */}
+            {editFormData.dataSourceType === "restapi" && (
+              <>
+                <div className="space-y-2">
+                  <Label>REST API 연결 *</Label>
+                  <Popover open={editRestApiComboboxOpen} onOpenChange={setEditRestApiComboboxOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={editRestApiComboboxOpen}
+                        className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                      >
+                        {editFormData.restApiConnectionId
+                          ? editRestApiConnections.find((c) => c.id === editFormData.restApiConnectionId)?.connection_name || "선택된 연결"
+                          : "REST API 연결 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                      className="p-0"
+                      style={{ width: "var(--radix-popover-trigger-width)" }}
+                      align="start"
+                    >
+                      <Command>
+                        <CommandInput placeholder="연결 검색..." className="text-xs sm:text-sm" />
+                        <CommandList>
+                          <CommandEmpty className="text-xs sm:text-sm">
+                            연결을 찾을 수 없습니다.
+                          </CommandEmpty>
+                          <CommandGroup>
+                            {editRestApiConnections.map((conn) => (
+                              <CommandItem
+                                key={conn.id}
+                                value={conn.connection_name}
+                                onSelect={() => {
+                                  setEditFormData({ ...editFormData, restApiConnectionId: conn.id || null });
+                                  setEditRestApiComboboxOpen(false);
+                                }}
+                                className="text-xs sm:text-sm"
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    editFormData.restApiConnectionId === conn.id ? "opacity-100" : "opacity-0"
+                                  )}
+                                />
+                                <div className="flex flex-col">
+                                  <span className="font-medium">{conn.connection_name}</span>
+                                  <span className="text-[10px] text-gray-500">{conn.base_url}</span>
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                
+                <div className="space-y-2">
+                  <Label htmlFor="edit-restApiEndpoint">API 엔드포인트</Label>
+                  <Input
+                    id="edit-restApiEndpoint"
+                    value={editFormData.restApiEndpoint}
+                    onChange={(e) => setEditFormData({ ...editFormData, restApiEndpoint: e.target.value })}
+                    placeholder="예: /api/data/list"
+                  />
+                  <p className="text-muted-foreground text-[10px]">
+                    데이터를 조회할 API 엔드포인트 경로입니다
+                  </p>
+                </div>
+                
+                <div className="space-y-2">
+                  <Label htmlFor="edit-restApiJsonPath">JSON 경로</Label>
+                  <Input
+                    id="edit-restApiJsonPath"
+                    value={editFormData.restApiJsonPath}
+                    onChange={(e) => setEditFormData({ ...editFormData, restApiJsonPath: e.target.value })}
+                    placeholder="예: data 또는 result.items"
+                  />
+                  <p className="text-muted-foreground text-[10px]">
+                    응답 JSON에서 데이터 배열의 경로입니다 (기본: data)
+                  </p>
+                </div>
+              </>
+            )}
+            
             <div className="space-y-2">
               <Label htmlFor="edit-description">설명</Label>
               <Textarea
@@ -1305,7 +1669,14 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
             <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
               취소
             </Button>
-            <Button onClick={handleEditSave} disabled={!editFormData.screenName.trim() || !editFormData.tableName.trim()}>
+            <Button 
+              onClick={handleEditSave} 
+              disabled={
+                !editFormData.screenName.trim() || 
+                (editFormData.dataSourceType === "database" && !editFormData.tableName.trim()) ||
+                (editFormData.dataSourceType === "restapi" && !editFormData.restApiConnectionId)
+              }
+            >
               저장
             </Button>
           </DialogFooter>
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 1ed37a49..ba88befd 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -503,7 +503,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             <SelectItem value="excel_upload">엑셀 업로드</SelectItem>
             <SelectItem value="barcode_scan">바코드 스캔</SelectItem>
             <SelectItem value="code_merge">코드 병합</SelectItem>
-            <SelectItem value="empty_vehicle">공차등록</SelectItem>
+            {/* <SelectItem value="empty_vehicle">공차등록</SelectItem> */}
             <SelectItem value="operation_control">운행알림 및 종료</SelectItem>
           </SelectContent>
         </Select>
@@ -1664,190 +1664,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         </div>
       )}
 
-      {/* 위치정보 가져오기 설정 */}
-      {(component.componentConfig?.action?.type || "save") === "empty_vehicle" && (
+      {/* 공차등록 설정 - 운행알림으로 통합되어 주석 처리 */}
+      {/* {(component.componentConfig?.action?.type || "save") === "empty_vehicle" && (
         <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          <h4 className="text-sm font-medium text-foreground">🚛 공차등록 설정</h4>
-
-          {/* 테이블 선택 */}
-          <div>
-            <Label htmlFor="geolocation-table">저장할 테이블</Label>
-            <Select
-              value={config.action?.geolocationTableName || currentTableName || ""}
-              onValueChange={(value) => onUpdateProperty("componentConfig.action.geolocationTableName", value)}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder="테이블 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                {availableTables.map((table) => (
-                  <SelectItem key={table.name} value={table.name} className="text-xs">
-                    {table.label || table.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <Label htmlFor="geolocation-lat-field">
-                위도 필드 <span className="text-destructive">*</span>
-              </Label>
-              <Input
-                id="geolocation-lat-field"
-                placeholder="latitude"
-                value={config.action?.geolocationLatField || "latitude"}
-                onChange={(e) => onUpdateProperty("componentConfig.action.geolocationLatField", e.target.value)}
-                className="h-8 text-xs"
-              />
-            </div>
-            <div>
-              <Label htmlFor="geolocation-lng-field">
-                경도 필드 <span className="text-destructive">*</span>
-              </Label>
-              <Input
-                id="geolocation-lng-field"
-                placeholder="longitude"
-                value={config.action?.geolocationLngField || "longitude"}
-                onChange={(e) => onUpdateProperty("componentConfig.action.geolocationLngField", e.target.value)}
-                className="h-8 text-xs"
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <Label htmlFor="geolocation-accuracy-field">정확도 필드 (선택)</Label>
-              <Input
-                id="geolocation-accuracy-field"
-                placeholder="accuracy"
-                value={config.action?.geolocationAccuracyField || ""}
-                onChange={(e) => onUpdateProperty("componentConfig.action.geolocationAccuracyField", e.target.value)}
-                className="h-8 text-xs"
-              />
-            </div>
-            <div>
-              <Label htmlFor="geolocation-timestamp-field">타임스탬프 필드 (선택)</Label>
-              <Input
-                id="geolocation-timestamp-field"
-                placeholder="location_time"
-                value={config.action?.geolocationTimestampField || ""}
-                onChange={(e) => onUpdateProperty("componentConfig.action.geolocationTimestampField", e.target.value)}
-                className="h-8 text-xs"
-              />
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="geolocation-high-accuracy">고정밀 모드</Label>
-              <p className="text-xs text-muted-foreground">GPS 사용 (배터리 소모 증가)</p>
-            </div>
-            <Switch
-              id="geolocation-high-accuracy"
-              checked={config.action?.geolocationHighAccuracy !== false}
-              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.geolocationHighAccuracy", checked)}
-            />
-          </div>
-
-          {/* 자동 저장 옵션 */}
-          <div className="border-t pt-4">
-            <div className="flex items-center justify-between">
-              <div className="space-y-0.5">
-                <Label htmlFor="geolocation-auto-save">DB 자동 저장</Label>
-                <p className="text-xs text-muted-foreground">위치 정보를 바로 DB에 저장</p>
-              </div>
-              <Switch
-                id="geolocation-auto-save"
-                checked={config.action?.geolocationAutoSave === true}
-                onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.geolocationAutoSave", checked)}
-              />
-            </div>
-
-            {config.action?.geolocationAutoSave && (
-              <div className="mt-3 space-y-3 rounded-md bg-amber-50 p-3 dark:bg-amber-950">
-                <div className="grid grid-cols-2 gap-2">
-                  <div>
-                    <Label>키 필드 (WHERE 조건)</Label>
-                    <Input
-                      placeholder="user_id"
-                      value={config.action?.geolocationKeyField || "user_id"}
-                      onChange={(e) => onUpdateProperty("componentConfig.action.geolocationKeyField", e.target.value)}
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                  <div>
-                    <Label>키 값 소스</Label>
-                    <Select
-                      value={config.action?.geolocationKeySourceField || "__userId__"}
-                      onValueChange={(value) => onUpdateProperty("componentConfig.action.geolocationKeySourceField", value)}
-                    >
-                      <SelectTrigger className="h-8 text-xs">
-                        <SelectValue placeholder="소스 선택" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="__userId__" className="text-xs font-medium text-blue-600">
-                          🔑 로그인 사용자 ID
-                        </SelectItem>
-                        <SelectItem value="__companyCode__" className="text-xs font-medium text-blue-600">
-                          🏢 회사 코드
-                        </SelectItem>
-                        <SelectItem value="__userName__" className="text-xs font-medium text-blue-600">
-                          👤 사용자 이름
-                        </SelectItem>
-                        {tableColumns.length > 0 && (
-                          <>
-                            <SelectItem value="__divider__" disabled className="text-xs text-muted-foreground">
-                              ── 폼 필드 ──
-                            </SelectItem>
-                            {tableColumns.map((col) => (
-                              <SelectItem key={col} value={col} className="text-xs">
-                                {col}
-                              </SelectItem>
-                            ))}
-                          </>
-                        )}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                {/* 추가 필드 변경 (status 등) */}
-                <div className="grid grid-cols-2 gap-2">
-                  <div>
-                    <Label>추가 변경 필드 (선택)</Label>
-                    <Input
-                      placeholder="status"
-                      value={config.action?.geolocationExtraField || ""}
-                      onChange={(e) => onUpdateProperty("componentConfig.action.geolocationExtraField", e.target.value)}
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                  <div>
-                    <Label>변경할 값</Label>
-                    <Input
-                      placeholder="inactive"
-                      value={config.action?.geolocationExtraValue || ""}
-                      onChange={(e) => onUpdateProperty("componentConfig.action.geolocationExtraValue", e.target.value)}
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                </div>
-                <p className="text-[10px] text-amber-700 dark:text-amber-300">
-                  위치 정보와 함께 status 같은 필드도 변경할 수 있습니다.
-                </p>
-              </div>
-            )}
-          </div>
-
-          <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-            <p className="text-xs text-blue-900 dark:text-blue-100">
-              <strong>참고:</strong> HTTPS 환경에서만 작동합니다.
-            </p>
-          </div>
+          ... 공차등록 설정 UI 생략 ...
         </div>
-      )}
+      )} */}
 
       {/* 운행알림 및 종료 설정 */}
       {(component.componentConfig?.action?.type || "save") === "operation_control" && (
diff --git a/frontend/components/screen/widgets/TabsWidget.tsx b/frontend/components/screen/widgets/TabsWidget.tsx
index 73b53783..200e2db3 100644
--- a/frontend/components/screen/widgets/TabsWidget.tsx
+++ b/frontend/components/screen/widgets/TabsWidget.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { X, Loader2 } from "lucide-react";
 import type { TabsComponent, TabItem } from "@/types/screen-management";
 import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";
+import { cn } from "@/lib/utils";
 
 interface TabsWidgetProps {
   component: TabsComponent;
@@ -48,6 +49,8 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
   const [visibleTabs, setVisibleTabs] = useState<TabItem[]>(tabs);
   const [loadingScreens, setLoadingScreens] = useState<Record<string, boolean>>({});
   const [screenLayouts, setScreenLayouts] = useState<Record<number, any>>({});
+  // 🆕 한 번이라도 선택된 탭 추적 (지연 로딩 + 캐싱)
+  const [mountedTabs, setMountedTabs] = useState<Set<string>>(() => new Set([getInitialTab()]));
 
   // 컴포넌트 탭 목록 변경 시 동기화
   useEffect(() => {
@@ -109,6 +112,14 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
   const handleTabChange = (tabId: string) => {
     console.log("🔄 탭 변경:", tabId);
     setSelectedTab(tabId);
+    
+    // 🆕 마운트된 탭 목록에 추가 (한 번 마운트되면 유지)
+    setMountedTabs(prev => {
+      if (prev.has(tabId)) return prev;
+      const newSet = new Set(prev);
+      newSet.add(tabId);
+      return newSet;
+    });
 
     // 해당 탭의 화면 로드
     const tab = visibleTabs.find((t) => t.id === tabId);
@@ -191,72 +202,95 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
           </TabsList>
         </div>
 
+        {/* 🆕 forceMount + CSS 숨김으로 탭 전환 시 리렌더링 방지 */}
         <div className="relative flex-1 overflow-hidden">
-          {visibleTabs.map((tab) => (
-            <TabsContent key={tab.id} value={tab.id} className="h-full">
-              {tab.screenId ? (
-                loadingScreens[tab.screenId] ? (
-                  <div className="flex h-full w-full items-center justify-center">
-                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
-                    <span className="text-muted-foreground ml-2">화면 로딩 중...</span>
-                  </div>
-                ) : screenLayouts[tab.screenId] ? (
-                  (() => {
-                    const layoutData = screenLayouts[tab.screenId];
-                    const { components = [], screenResolution } = layoutData;
-                    
-                    console.log("🎯 렌더링할 화면 데이터:", {
-                      screenId: tab.screenId,
-                      componentsCount: components.length,
-                      screenResolution,
-                    });
-
-                    const designWidth = screenResolution?.width || 1920;
-                    const designHeight = screenResolution?.height || 1080;
-
-                    return (
-                      <div 
-                        className="relative h-full w-full overflow-auto bg-background"
-                        style={{
-                          minHeight: `${designHeight}px`,
-                        }}
-                      >
-                        <div
-                          className="relative"
-                          style={{
-                            width: `${designWidth}px`,
-                            height: `${designHeight}px`,
-                            margin: "0 auto",
-                          }}
-                        >
-                          {components.map((component: any) => (
-                            <InteractiveScreenViewerDynamic
-                              key={component.id}
-                              component={component}
-                              allComponents={components}
-                              screenInfo={{
-                                id: tab.screenId,
-                                tableName: layoutData.tableName,
-                              }}
-                              menuObjid={menuObjid} // 🆕 부모의 menuObjid 전달
-                            />
-                          ))}
+          {visibleTabs.map((tab) => {
+            // 한 번도 선택되지 않은 탭은 렌더링하지 않음 (지연 로딩)
+            const shouldRender = mountedTabs.has(tab.id);
+            const isActive = selectedTab === tab.id;
+            
+            return (
+              <TabsContent 
+                key={tab.id} 
+                value={tab.id} 
+                forceMount // 🆕 DOM에 항상 유지
+                className={cn(
+                  "h-full",
+                  !isActive && "hidden" // 🆕 비활성 탭은 CSS로 숨김
+                )}
+              >
+                {/* 한 번 마운트된 탭만 내용 렌더링 */}
+                {shouldRender && (
+                  <>
+                    {tab.screenId ? (
+                      loadingScreens[tab.screenId] ? (
+                        <div className="flex h-full w-full items-center justify-center">
+                          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                          <span className="text-muted-foreground ml-2">화면 로딩 중...</span>
                         </div>
+                      ) : screenLayouts[tab.screenId] ? (
+                        (() => {
+                          const layoutData = screenLayouts[tab.screenId];
+                          const { components = [], screenResolution } = layoutData;
+                          
+                          // 비활성 탭은 로그 생략
+                          if (isActive) {
+                            console.log("🎯 렌더링할 화면 데이터:", {
+                              screenId: tab.screenId,
+                              componentsCount: components.length,
+                              screenResolution,
+                            });
+                          }
+
+                          const designWidth = screenResolution?.width || 1920;
+                          const designHeight = screenResolution?.height || 1080;
+
+                          return (
+                            <div 
+                              className="relative h-full w-full overflow-auto bg-background"
+                              style={{
+                                minHeight: `${designHeight}px`,
+                              }}
+                            >
+                              <div
+                                className="relative"
+                                style={{
+                                  width: `${designWidth}px`,
+                                  height: `${designHeight}px`,
+                                  margin: "0 auto",
+                                }}
+                              >
+                                {components.map((component: any) => (
+                                  <InteractiveScreenViewerDynamic
+                                    key={component.id}
+                                    component={component}
+                                    allComponents={components}
+                                    screenInfo={{
+                                      id: tab.screenId,
+                                      tableName: layoutData.tableName,
+                                    }}
+                                    menuObjid={menuObjid}
+                                  />
+                                ))}
+                              </div>
+                            </div>
+                          );
+                        })()
+                      ) : (
+                        <div className="flex h-full w-full items-center justify-center">
+                          <p className="text-muted-foreground text-sm">화면을 불러올 수 없습니다</p>
+                        </div>
+                      )
+                    ) : (
+                      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+                        <p className="text-muted-foreground text-sm">연결된 화면이 없습니다</p>
                       </div>
-                    );
-                  })()
-                ) : (
-                  <div className="flex h-full w-full items-center justify-center">
-                    <p className="text-muted-foreground text-sm">화면을 불러올 수 없습니다</p>
-                  </div>
-                )
-              ) : (
-                <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
-                  <p className="text-muted-foreground text-sm">연결된 화면이 없습니다</p>
-                </div>
-              )}
-            </TabsContent>
-          ))}
+                    )}
+                  </>
+                )}
+              </TabsContent>
+            );
+          })}
         </div>
       </Tabs>
     </div>
diff --git a/frontend/components/table-category/CategoryValueAddDialog.tsx b/frontend/components/table-category/CategoryValueAddDialog.tsx
index c486cc1d..9d962b22 100644
--- a/frontend/components/table-category/CategoryValueAddDialog.tsx
+++ b/frontend/components/table-category/CategoryValueAddDialog.tsx
@@ -52,23 +52,12 @@ export const CategoryValueAddDialog: React.FC<
   const [description, setDescription] = useState("");
   const [color, setColor] = useState("none");
 
-  // 라벨에서 코드 자동 생성
-  const generateCode = (label: string): string => {
-    // 한글을 영문으로 변환하거나, 영문/숫자만 추출하여 대문자로
-    const cleaned = label
-      .replace(/[^a-zA-Z0-9가-힣\s]/g, "") // 특수문자 제거
-      .trim()
-      .toUpperCase();
-    
-    // 영문이 있으면 영문만, 없으면 타임스탬프 기반
-    const englishOnly = cleaned.replace(/[^A-Z0-9\s]/g, "").replace(/\s+/g, "_");
-    
-    if (englishOnly.length > 0) {
-      return englishOnly.substring(0, 20); // 최대 20자
-    }
-    
-    // 영문이 없으면 CATEGORY_TIMESTAMP 형식
-    return `CATEGORY_${Date.now().toString().slice(-6)}`;
+  // 라벨에서 코드 자동 생성 (항상 고유한 코드 생성)
+  const generateCode = (): string => {
+    // 항상 CATEGORY_TIMESTAMP_RANDOM 형식으로 고유 코드 생성
+    const timestamp = Date.now().toString().slice(-6);
+    const random = Math.random().toString(36).substring(2, 6).toUpperCase();
+    return `CATEGORY_${timestamp}${random}`;
   };
 
   const handleSubmit = () => {
@@ -76,7 +65,7 @@ export const CategoryValueAddDialog: React.FC<
       return;
     }
 
-    const valueCode = generateCode(valueLabel);
+    const valueCode = generateCode();
 
     onAdd({
       tableName: "", // CategoryValueManager에서 오버라이드됨
diff --git a/frontend/components/table-category/CategoryValueEditDialog.tsx b/frontend/components/table-category/CategoryValueEditDialog.tsx
index 7ad415f0..18880eef 100644
--- a/frontend/components/table-category/CategoryValueEditDialog.tsx
+++ b/frontend/components/table-category/CategoryValueEditDialog.tsx
@@ -66,8 +66,8 @@ export const CategoryValueEditDialog: React.FC<
 
     onUpdate(value.valueId!, {
       valueLabel: valueLabel.trim(),
-      description: description.trim(),
-      color: color,
+      description: description.trim() || undefined, // 빈 문자열 대신 undefined
+      color: color === "none" ? null : color, // "none"은 null로 (배지 없음)
     });
   };
 
diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx
index aef7dd9d..81e90fd3 100644
--- a/frontend/components/ui/select.tsx
+++ b/frontend/components/ui/select.tsx
@@ -31,7 +31,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-48 items-center justify-between gap-2 rounded-md border bg-transparent text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=default]:px-3 data-[size=default]:py-2 data-[size=sm]:h-9 data-[size=sm]:px-3 data-[size=sm]:py-1 data-[size=xs]:h-6 data-[size=xs]:px-2 data-[size=xs]:py-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=default]:px-3 data-[size=default]:py-2 data-[size=sm]:h-9 data-[size=sm]:px-3 data-[size=sm]:py-1 data-[size=xs]:h-6 data-[size=xs]:px-2 data-[size=xs]:py-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
diff --git a/frontend/components/vehicle/VehicleReport.tsx b/frontend/components/vehicle/VehicleReport.tsx
new file mode 100644
index 00000000..51773c98
--- /dev/null
+++ b/frontend/components/vehicle/VehicleReport.tsx
@@ -0,0 +1,660 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  getSummaryReport,
+  getDailyReport,
+  getMonthlyReport,
+  getDriverReport,
+  getRouteReport,
+  formatDistance,
+  formatDuration,
+  SummaryReport,
+  DailyStat,
+  MonthlyStat,
+  DriverStat,
+  RouteStat,
+} from "@/lib/api/vehicleTrip";
+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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  RefreshCw,
+  Car,
+  Route,
+  Clock,
+  Users,
+  TrendingUp,
+  MapPin,
+} from "lucide-react";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
+
+export default function VehicleReport() {
+  // 요약 통계
+  const [summary, setSummary] = useState<SummaryReport | null>(null);
+  const [summaryPeriod, setSummaryPeriod] = useState("month");
+  const [summaryLoading, setSummaryLoading] = useState(false);
+
+  // 일별 통계
+  const [dailyData, setDailyData] = useState<DailyStat[]>([]);
+  const [dailyStartDate, setDailyStartDate] = useState(
+    new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0]
+  );
+  const [dailyEndDate, setDailyEndDate] = useState(
+    new Date().toISOString().split("T")[0]
+  );
+  const [dailyLoading, setDailyLoading] = useState(false);
+
+  // 월별 통계
+  const [monthlyData, setMonthlyData] = useState<MonthlyStat[]>([]);
+  const [monthlyYear, setMonthlyYear] = useState(new Date().getFullYear());
+  const [monthlyLoading, setMonthlyLoading] = useState(false);
+
+  // 운전자별 통계
+  const [driverData, setDriverData] = useState<DriverStat[]>([]);
+  const [driverLoading, setDriverLoading] = useState(false);
+
+  // 구간별 통계
+  const [routeData, setRouteData] = useState<RouteStat[]>([]);
+  const [routeLoading, setRouteLoading] = useState(false);
+
+  // 요약 로드
+  const loadSummary = useCallback(async () => {
+    setSummaryLoading(true);
+    try {
+      const response = await getSummaryReport(summaryPeriod);
+      if (response.success) {
+        setSummary(response.data);
+      }
+    } catch (error) {
+      console.error("요약 통계 조회 실패:", error);
+    } finally {
+      setSummaryLoading(false);
+    }
+  }, [summaryPeriod]);
+
+  // 일별 로드
+  const loadDaily = useCallback(async () => {
+    setDailyLoading(true);
+    try {
+      const response = await getDailyReport({
+        startDate: dailyStartDate,
+        endDate: dailyEndDate,
+      });
+      if (response.success) {
+        setDailyData(response.data?.data || []);
+      }
+    } catch (error) {
+      console.error("일별 통계 조회 실패:", error);
+    } finally {
+      setDailyLoading(false);
+    }
+  }, [dailyStartDate, dailyEndDate]);
+
+  // 월별 로드
+  const loadMonthly = useCallback(async () => {
+    setMonthlyLoading(true);
+    try {
+      const response = await getMonthlyReport({ year: monthlyYear });
+      if (response.success) {
+        setMonthlyData(response.data?.data || []);
+      }
+    } catch (error) {
+      console.error("월별 통계 조회 실패:", error);
+    } finally {
+      setMonthlyLoading(false);
+    }
+  }, [monthlyYear]);
+
+  // 운전자별 로드
+  const loadDrivers = useCallback(async () => {
+    setDriverLoading(true);
+    try {
+      const response = await getDriverReport({ limit: 20 });
+      if (response.success) {
+        setDriverData(response.data || []);
+      }
+    } catch (error) {
+      console.error("운전자별 통계 조회 실패:", error);
+    } finally {
+      setDriverLoading(false);
+    }
+  }, []);
+
+  // 구간별 로드
+  const loadRoutes = useCallback(async () => {
+    setRouteLoading(true);
+    try {
+      const response = await getRouteReport({ limit: 20 });
+      if (response.success) {
+        setRouteData(response.data || []);
+      }
+    } catch (error) {
+      console.error("구간별 통계 조회 실패:", error);
+    } finally {
+      setRouteLoading(false);
+    }
+  }, []);
+
+  // 초기 로드
+  useEffect(() => {
+    loadSummary();
+  }, [loadSummary]);
+
+  // 기간 레이블
+  const getPeriodLabel = (period: string) => {
+    switch (period) {
+      case "today":
+        return "오늘";
+      case "week":
+        return "최근 7일";
+      case "month":
+        return "최근 30일";
+      case "year":
+        return "올해";
+      default:
+        return period;
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 요약 통계 카드 */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold">요약 통계</h2>
+          <div className="flex items-center gap-2">
+            <Select value={summaryPeriod} onValueChange={setSummaryPeriod}>
+              <SelectTrigger className="w-[140px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="today">오늘</SelectItem>
+                <SelectItem value="week">최근 7일</SelectItem>
+                <SelectItem value="month">최근 30일</SelectItem>
+                <SelectItem value="year">올해</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={loadSummary}
+              disabled={summaryLoading}
+            >
+              <RefreshCw
+                className={`h-4 w-4 ${summaryLoading ? "animate-spin" : ""}`}
+              />
+            </Button>
+          </div>
+        </div>
+
+        {summary && (
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Car className="h-3 w-3" />
+                  총 운행
+                </div>
+                <div className="mt-1 text-2xl font-bold">
+                  {summary.totalTrips.toLocaleString()}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {getPeriodLabel(summaryPeriod)}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <TrendingUp className="h-3 w-3" />
+                  완료율
+                </div>
+                <div className="mt-1 text-2xl font-bold">
+                  {summary.completionRate}%
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {summary.completedTrips} / {summary.totalTrips}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Route className="h-3 w-3" />
+                  총 거리
+                </div>
+                <div className="mt-1 text-2xl font-bold">
+                  {formatDistance(summary.totalDistance)}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  평균 {formatDistance(summary.avgDistance)}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Clock className="h-3 w-3" />
+                  총 시간
+                </div>
+                <div className="mt-1 text-2xl font-bold">
+                  {formatDuration(summary.totalDuration)}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  평균 {formatDuration(Math.round(summary.avgDuration))}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Users className="h-3 w-3" />
+                  운전자
+                </div>
+                <div className="mt-1 text-2xl font-bold">
+                  {summary.activeDrivers}
+                </div>
+                <div className="text-xs text-muted-foreground">활동 중</div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Car className="h-3 w-3" />
+                  진행 중
+                </div>
+                <div className="mt-1 text-2xl font-bold text-green-600">
+                  {summary.activeTrips}
+                </div>
+                <div className="text-xs text-muted-foreground">현재 운행</div>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </div>
+
+      {/* 상세 통계 탭 */}
+      <Tabs defaultValue="daily" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="daily" onClick={loadDaily}>
+            일별 통계
+          </TabsTrigger>
+          <TabsTrigger value="monthly" onClick={loadMonthly}>
+            월별 통계
+          </TabsTrigger>
+          <TabsTrigger value="drivers" onClick={loadDrivers}>
+            운전자별
+          </TabsTrigger>
+          <TabsTrigger value="routes" onClick={loadRoutes}>
+            구간별
+          </TabsTrigger>
+        </TabsList>
+
+        {/* 일별 통계 */}
+        <TabsContent value="daily">
+          <Card>
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base">일별 운행 통계</CardTitle>
+                <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-1">
+                    <Label className="text-xs">시작</Label>
+                    <Input
+                      type="date"
+                      value={dailyStartDate}
+                      onChange={(e) => setDailyStartDate(e.target.value)}
+                      className="h-8 w-[130px]"
+                    />
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Label className="text-xs">종료</Label>
+                    <Input
+                      type="date"
+                      value={dailyEndDate}
+                      onChange={(e) => setDailyEndDate(e.target.value)}
+                      className="h-8 w-[130px]"
+                    />
+                  </div>
+                  <Button size="sm" onClick={loadDaily} disabled={dailyLoading}>
+                    조회
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>날짜</TableHead>
+                      <TableHead className="text-right">운행 수</TableHead>
+                      <TableHead className="text-right">완료</TableHead>
+                      <TableHead className="text-right">취소</TableHead>
+                      <TableHead className="text-right">총 거리</TableHead>
+                      <TableHead className="text-right">평균 거리</TableHead>
+                      <TableHead className="text-right">총 시간</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {dailyLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={7} className="h-24 text-center">
+                          로딩 중...
+                        </TableCell>
+                      </TableRow>
+                    ) : dailyData.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={7} className="h-24 text-center">
+                          데이터가 없습니다.
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      dailyData.map((row) => (
+                        <TableRow key={row.date}>
+                          <TableCell>
+                            {format(new Date(row.date), "MM/dd (E)", {
+                              locale: ko,
+                            })}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.tripCount}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.completedCount}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.cancelledCount}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDistance(row.totalDistance)}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDistance(row.avgDistance)}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDuration(row.totalDuration)}
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 월별 통계 */}
+        <TabsContent value="monthly">
+          <Card>
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base">월별 운행 통계</CardTitle>
+                <div className="flex items-center gap-2">
+                  <Select
+                    value={String(monthlyYear)}
+                    onValueChange={(v) => setMonthlyYear(parseInt(v))}
+                  >
+                    <SelectTrigger className="w-[100px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {[0, 1, 2].map((offset) => {
+                        const year = new Date().getFullYear() - offset;
+                        return (
+                          <SelectItem key={year} value={String(year)}>
+                            {year}년
+                          </SelectItem>
+                        );
+                      })}
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    size="sm"
+                    onClick={loadMonthly}
+                    disabled={monthlyLoading}
+                  >
+                    조회
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>월</TableHead>
+                      <TableHead className="text-right">운행 수</TableHead>
+                      <TableHead className="text-right">완료</TableHead>
+                      <TableHead className="text-right">취소</TableHead>
+                      <TableHead className="text-right">총 거리</TableHead>
+                      <TableHead className="text-right">평균 거리</TableHead>
+                      <TableHead className="text-right">운전자 수</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {monthlyLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={7} className="h-24 text-center">
+                          로딩 중...
+                        </TableCell>
+                      </TableRow>
+                    ) : monthlyData.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={7} className="h-24 text-center">
+                          데이터가 없습니다.
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      monthlyData.map((row) => (
+                        <TableRow key={row.month}>
+                          <TableCell>{row.month}월</TableCell>
+                          <TableCell className="text-right">
+                            {row.tripCount}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.completedCount}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.cancelledCount}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDistance(row.totalDistance)}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDistance(row.avgDistance)}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.driverCount}
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 운전자별 통계 */}
+        <TabsContent value="drivers">
+          <Card>
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base">운전자별 통계</CardTitle>
+                <Button
+                  size="sm"
+                  onClick={loadDrivers}
+                  disabled={driverLoading}
+                >
+                  <RefreshCw
+                    className={`mr-1 h-4 w-4 ${driverLoading ? "animate-spin" : ""}`}
+                  />
+                  새로고침
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>운전자</TableHead>
+                      <TableHead className="text-right">운행 수</TableHead>
+                      <TableHead className="text-right">완료</TableHead>
+                      <TableHead className="text-right">총 거리</TableHead>
+                      <TableHead className="text-right">평균 거리</TableHead>
+                      <TableHead className="text-right">총 시간</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {driverLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="h-24 text-center">
+                          로딩 중...
+                        </TableCell>
+                      </TableRow>
+                    ) : driverData.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="h-24 text-center">
+                          데이터가 없습니다.
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      driverData.map((row) => (
+                        <TableRow key={row.userId}>
+                          <TableCell className="font-medium">
+                            {row.userName}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.tripCount}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {row.completedCount}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDistance(row.totalDistance)}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDistance(row.avgDistance)}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDuration(row.totalDuration)}
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 구간별 통계 */}
+        <TabsContent value="routes">
+          <Card>
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base">구간별 통계</CardTitle>
+                <Button size="sm" onClick={loadRoutes} disabled={routeLoading}>
+                  <RefreshCw
+                    className={`mr-1 h-4 w-4 ${routeLoading ? "animate-spin" : ""}`}
+                  />
+                  새로고침
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>
+                        <div className="flex items-center gap-1">
+                          <MapPin className="h-3 w-3" />
+                          출발지
+                        </div>
+                      </TableHead>
+                      <TableHead>
+                        <div className="flex items-center gap-1">
+                          <MapPin className="h-3 w-3" />
+                          도착지
+                        </div>
+                      </TableHead>
+                      <TableHead className="text-right">운행 수</TableHead>
+                      <TableHead className="text-right">총 거리</TableHead>
+                      <TableHead className="text-right">평균 거리</TableHead>
+                      <TableHead className="text-right">평균 시간</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {routeLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="h-24 text-center">
+                          로딩 중...
+                        </TableCell>
+                      </TableRow>
+                    ) : routeData.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="h-24 text-center">
+                          데이터가 없습니다.
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      routeData.map((row, idx) => (
+                        <TableRow key={idx}>
+                          <TableCell>{row.departureName}</TableCell>
+                          <TableCell>{row.destinationName}</TableCell>
+                          <TableCell className="text-right">
+                            {row.tripCount}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDistance(row.totalDistance)}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDistance(row.avgDistance)}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            {formatDuration(Math.round(row.avgDuration))}
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
diff --git a/frontend/components/vehicle/VehicleTripHistory.tsx b/frontend/components/vehicle/VehicleTripHistory.tsx
new file mode 100644
index 00000000..3c4bcb57
--- /dev/null
+++ b/frontend/components/vehicle/VehicleTripHistory.tsx
@@ -0,0 +1,531 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  getTripList,
+  getTripDetail,
+  formatDistance,
+  formatDuration,
+  getStatusLabel,
+  getStatusColor,
+  TripSummary,
+  TripDetail,
+  TripListFilters,
+} from "@/lib/api/vehicleTrip";
+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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Search,
+  RefreshCw,
+  MapPin,
+  Clock,
+  Route,
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+} from "lucide-react";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
+
+const PAGE_SIZE = 20;
+
+export default function VehicleTripHistory() {
+  // 상태
+  const [trips, setTrips] = useState<TripSummary[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+
+  // 필터
+  const [filters, setFilters] = useState<TripListFilters>({
+    status: "",
+    startDate: "",
+    endDate: "",
+    departure: "",
+    arrival: "",
+  });
+
+  // 상세 모달
+  const [selectedTrip, setSelectedTrip] = useState<TripDetail | null>(null);
+  const [detailModalOpen, setDetailModalOpen] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  // 데이터 로드
+  const loadTrips = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await getTripList({
+        ...filters,
+        status: filters.status || undefined,
+        startDate: filters.startDate || undefined,
+        endDate: filters.endDate || undefined,
+        departure: filters.departure || undefined,
+        arrival: filters.arrival || undefined,
+        limit: PAGE_SIZE,
+        offset: (page - 1) * PAGE_SIZE,
+      });
+
+      if (response.success) {
+        setTrips(response.data || []);
+        setTotal(response.total || 0);
+      }
+    } catch (error) {
+      console.error("운행 이력 조회 실패:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [filters, page]);
+
+  useEffect(() => {
+    loadTrips();
+  }, [loadTrips]);
+
+  // 상세 조회
+  const handleViewDetail = async (tripId: string) => {
+    setDetailLoading(true);
+    setDetailModalOpen(true);
+    try {
+      const response = await getTripDetail(tripId);
+      if (response.success && response.data) {
+        setSelectedTrip(response.data);
+      }
+    } catch (error) {
+      console.error("운행 상세 조회 실패:", error);
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  // 필터 변경
+  const handleFilterChange = (key: keyof TripListFilters, value: string) => {
+    setFilters((prev) => ({ ...prev, [key]: value }));
+    setPage(1);
+  };
+
+  // 검색
+  const handleSearch = () => {
+    setPage(1);
+    loadTrips();
+  };
+
+  // 초기화
+  const handleReset = () => {
+    setFilters({
+      status: "",
+      startDate: "",
+      endDate: "",
+      departure: "",
+      arrival: "",
+    });
+    setPage(1);
+  };
+
+  // 페이지네이션
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  return (
+    <div className="space-y-4">
+      {/* 필터 영역 */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-lg">검색 조건</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-5">
+            {/* 상태 */}
+            <div className="space-y-1">
+              <Label className="text-xs">상태</Label>
+              <Select
+                value={filters.status || "all"}
+                onValueChange={(v) =>
+                  handleFilterChange("status", v === "all" ? "" : v)
+                }
+              >
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="전체" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">전체</SelectItem>
+                  <SelectItem value="active">운행 중</SelectItem>
+                  <SelectItem value="completed">완료</SelectItem>
+                  <SelectItem value="cancelled">취소됨</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 시작일 */}
+            <div className="space-y-1">
+              <Label className="text-xs">시작일</Label>
+              <Input
+                type="date"
+                value={filters.startDate || ""}
+                onChange={(e) => handleFilterChange("startDate", e.target.value)}
+                className="h-9"
+              />
+            </div>
+
+            {/* 종료일 */}
+            <div className="space-y-1">
+              <Label className="text-xs">종료일</Label>
+              <Input
+                type="date"
+                value={filters.endDate || ""}
+                onChange={(e) => handleFilterChange("endDate", e.target.value)}
+                className="h-9"
+              />
+            </div>
+
+            {/* 출발지 */}
+            <div className="space-y-1">
+              <Label className="text-xs">출발지</Label>
+              <Input
+                placeholder="출발지"
+                value={filters.departure || ""}
+                onChange={(e) => handleFilterChange("departure", e.target.value)}
+                className="h-9"
+              />
+            </div>
+
+            {/* 도착지 */}
+            <div className="space-y-1">
+              <Label className="text-xs">도착지</Label>
+              <Input
+                placeholder="도착지"
+                value={filters.arrival || ""}
+                onChange={(e) => handleFilterChange("arrival", e.target.value)}
+                className="h-9"
+              />
+            </div>
+          </div>
+
+          <div className="mt-4 flex gap-2">
+            <Button onClick={handleSearch} size="sm">
+              <Search className="mr-1 h-4 w-4" />
+              검색
+            </Button>
+            <Button onClick={handleReset} variant="outline" size="sm">
+              <RefreshCw className="mr-1 h-4 w-4" />
+              초기화
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 목록 */}
+      <Card>
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg">
+              운행 이력 ({total.toLocaleString()}건)
+            </CardTitle>
+            <Button onClick={loadTrips} variant="ghost" size="sm">
+              <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[120px]">운행ID</TableHead>
+                  <TableHead>운전자</TableHead>
+                  <TableHead>출발지</TableHead>
+                  <TableHead>도착지</TableHead>
+                  <TableHead>시작 시간</TableHead>
+                  <TableHead>종료 시간</TableHead>
+                  <TableHead className="text-right">거리</TableHead>
+                  <TableHead className="text-right">시간</TableHead>
+                  <TableHead className="text-center">상태</TableHead>
+                  <TableHead className="w-[80px]"></TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loading ? (
+                  <TableRow>
+                    <TableCell colSpan={10} className="h-24 text-center">
+                      로딩 중...
+                    </TableCell>
+                  </TableRow>
+                ) : trips.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={10} className="h-24 text-center">
+                      운행 이력이 없습니다.
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  trips.map((trip) => (
+                    <TableRow key={trip.trip_id}>
+                      <TableCell className="font-mono text-xs">
+                        {trip.trip_id.substring(0, 15)}...
+                      </TableCell>
+                      <TableCell>{trip.user_name || trip.user_id}</TableCell>
+                      <TableCell>{trip.departure_name || trip.departure || "-"}</TableCell>
+                      <TableCell>{trip.destination_name || trip.arrival || "-"}</TableCell>
+                      <TableCell className="text-xs">
+                        {format(new Date(trip.start_time), "MM/dd HH:mm", {
+                          locale: ko,
+                        })}
+                      </TableCell>
+                      <TableCell className="text-xs">
+                        {trip.end_time
+                          ? format(new Date(trip.end_time), "MM/dd HH:mm", {
+                              locale: ko,
+                            })
+                          : "-"}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {trip.total_distance
+                          ? formatDistance(Number(trip.total_distance))
+                          : "-"}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {trip.duration_minutes
+                          ? formatDuration(trip.duration_minutes)
+                          : "-"}
+                      </TableCell>
+                      <TableCell className="text-center">
+                        <Badge className={getStatusColor(trip.status)}>
+                          {getStatusLabel(trip.status)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleViewDetail(trip.trip_id)}
+                        >
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* 페이지네이션 */}
+          {totalPages > 1 && (
+            <div className="mt-4 flex items-center justify-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page === 1}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="text-sm">
+                {page} / {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 상세 모달 */}
+      <Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>운행 상세 정보</DialogTitle>
+          </DialogHeader>
+
+          {detailLoading ? (
+            <div className="flex h-48 items-center justify-center">
+              로딩 중...
+            </div>
+          ) : selectedTrip ? (
+            <div className="space-y-4">
+              {/* 요약 정보 */}
+              <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+                <div className="rounded-lg bg-muted p-3">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <MapPin className="h-3 w-3" />
+                    출발지
+                  </div>
+                  <div className="mt-1 font-medium">
+                    {selectedTrip.summary.departure_name ||
+                      selectedTrip.summary.departure ||
+                      "-"}
+                  </div>
+                </div>
+                <div className="rounded-lg bg-muted p-3">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <MapPin className="h-3 w-3" />
+                    도착지
+                  </div>
+                  <div className="mt-1 font-medium">
+                    {selectedTrip.summary.destination_name ||
+                      selectedTrip.summary.arrival ||
+                      "-"}
+                  </div>
+                </div>
+                <div className="rounded-lg bg-muted p-3">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <Route className="h-3 w-3" />
+                    총 거리
+                  </div>
+                  <div className="mt-1 font-medium">
+                    {selectedTrip.summary.total_distance
+                      ? formatDistance(Number(selectedTrip.summary.total_distance))
+                      : "-"}
+                  </div>
+                </div>
+                <div className="rounded-lg bg-muted p-3">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <Clock className="h-3 w-3" />
+                    운행 시간
+                  </div>
+                  <div className="mt-1 font-medium">
+                    {selectedTrip.summary.duration_minutes
+                      ? formatDuration(selectedTrip.summary.duration_minutes)
+                      : "-"}
+                  </div>
+                </div>
+              </div>
+
+              {/* 운행 정보 */}
+              <div className="rounded-lg border p-4">
+                <h4 className="mb-3 font-medium">운행 정보</h4>
+                <div className="grid grid-cols-2 gap-x-8 gap-y-2 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">운행 ID</span>
+                    <span className="font-mono text-xs">
+                      {selectedTrip.summary.trip_id}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">운전자</span>
+                    <span>
+                      {selectedTrip.summary.user_name ||
+                        selectedTrip.summary.user_id}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">시작 시간</span>
+                    <span>
+                      {format(
+                        new Date(selectedTrip.summary.start_time),
+                        "yyyy-MM-dd HH:mm:ss",
+                        { locale: ko }
+                      )}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">종료 시간</span>
+                    <span>
+                      {selectedTrip.summary.end_time
+                        ? format(
+                            new Date(selectedTrip.summary.end_time),
+                            "yyyy-MM-dd HH:mm:ss",
+                            { locale: ko }
+                          )
+                        : "-"}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">상태</span>
+                    <Badge className={getStatusColor(selectedTrip.summary.status)}>
+                      {getStatusLabel(selectedTrip.summary.status)}
+                    </Badge>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">위치 기록 수</span>
+                    <span>{selectedTrip.summary.location_count}개</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* 경로 데이터 */}
+              {selectedTrip.route && selectedTrip.route.length > 0 && (
+                <div className="rounded-lg border p-4">
+                  <h4 className="mb-3 font-medium">
+                    경로 데이터 ({selectedTrip.route.length}개 지점)
+                  </h4>
+                  <div className="max-h-48 overflow-auto">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead className="w-[60px]">#</TableHead>
+                          <TableHead>위도</TableHead>
+                          <TableHead>경도</TableHead>
+                          <TableHead>정확도</TableHead>
+                          <TableHead>이전 거리</TableHead>
+                          <TableHead>기록 시간</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {selectedTrip.route.map((loc, idx) => (
+                          <TableRow key={loc.id}>
+                            <TableCell className="text-xs">{idx + 1}</TableCell>
+                            <TableCell className="font-mono text-xs">
+                              {loc.latitude.toFixed(6)}
+                            </TableCell>
+                            <TableCell className="font-mono text-xs">
+                              {loc.longitude.toFixed(6)}
+                            </TableCell>
+                            <TableCell className="text-xs">
+                              {loc.accuracy ? `${loc.accuracy.toFixed(0)}m` : "-"}
+                            </TableCell>
+                            <TableCell className="text-xs">
+                              {loc.distance_from_prev
+                                ? formatDistance(Number(loc.distance_from_prev))
+                                : "-"}
+                            </TableCell>
+                            <TableCell className="text-xs">
+                              {format(new Date(loc.recorded_at), "HH:mm:ss", {
+                                locale: ko,
+                              })}
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="flex h-48 items-center justify-center">
+              데이터를 불러올 수 없습니다.
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
diff --git a/frontend/contexts/SplitPanelContext.tsx b/frontend/contexts/SplitPanelContext.tsx
index bfb9610b..99cccdd8 100644
--- a/frontend/contexts/SplitPanelContext.tsx
+++ b/frontend/contexts/SplitPanelContext.tsx
@@ -17,6 +17,24 @@ export interface SplitPanelDataReceiver {
   receiveData: (data: any[], mode: "append" | "replace" | "merge") => Promise<void>;
 }
 
+/**
+ * 부모 데이터 매핑 설정
+ * 좌측 화면에서 선택한 데이터를 우측 화면 저장 시 자동으로 포함
+ */
+export interface ParentDataMapping {
+  sourceColumn: string;  // 좌측 화면의 컬럼명 (예: equipment_code)
+  targetColumn: string;  // 우측 화면 저장 시 사용할 컬럼명 (예: equipment_code)
+}
+
+/**
+ * 연결 필터 설정
+ * 좌측 화면에서 선택한 데이터로 우측 화면의 테이블을 자동 필터링
+ */
+export interface LinkedFilter {
+  sourceColumn: string;  // 좌측 화면의 컬럼명 (예: equipment_code)
+  targetColumn: string;  // 우측 화면 필터링에 사용할 컬럼명 (예: equipment_code)
+}
+
 /**
  * 분할 패널 컨텍스트 값
  */
@@ -54,6 +72,22 @@ interface SplitPanelContextValue {
   addItemIds: (ids: string[]) => void;
   removeItemIds: (ids: string[]) => void;
   clearItemIds: () => void;
+  
+  // 🆕 좌측 선택 데이터 관리 (우측 화면 저장 시 부모 키 전달용)
+  selectedLeftData: Record<string, any> | null;
+  setSelectedLeftData: (data: Record<string, any> | null) => void;
+  
+  // 🆕 부모 데이터 매핑 설정
+  parentDataMapping: ParentDataMapping[];
+  
+  // 🆕 매핑된 부모 데이터 가져오기 (우측 화면 저장 시 사용)
+  getMappedParentData: () => Record<string, any>;
+  
+  // 🆕 연결 필터 설정 (좌측 선택 → 우측 테이블 필터링)
+  linkedFilters: LinkedFilter[];
+  
+  // 🆕 연결 필터 값 가져오기 (우측 테이블 조회 시 사용)
+  getLinkedFilterValues: () => Record<string, any>;
 }
 
 const SplitPanelContext = createContext<SplitPanelContextValue | null>(null);
@@ -62,6 +96,8 @@ interface SplitPanelProviderProps {
   splitPanelId: string;
   leftScreenId: number | null;
   rightScreenId: number | null;
+  parentDataMapping?: ParentDataMapping[];  // 🆕 부모 데이터 매핑 설정
+  linkedFilters?: LinkedFilter[];  // 🆕 연결 필터 설정
   children: React.ReactNode;
 }
 
@@ -72,6 +108,8 @@ export function SplitPanelProvider({
   splitPanelId,
   leftScreenId,
   rightScreenId,
+  parentDataMapping = [],
+  linkedFilters = [],
   children,
 }: SplitPanelProviderProps) {
   // 좌측/우측 화면의 데이터 수신자 맵
@@ -83,6 +121,9 @@ export function SplitPanelProvider({
   
   // 🆕 우측에 추가된 항목 ID 상태
   const [addedItemIds, setAddedItemIds] = useState<Set<string>>(new Set());
+  
+  // 🆕 좌측에서 선택된 데이터 상태
+  const [selectedLeftData, setSelectedLeftData] = useState<Record<string, any> | null>(null);
 
   /**
    * 데이터 수신자 등록
@@ -232,6 +273,82 @@ export function SplitPanelProvider({
     logger.debug(`[SplitPanelContext] 항목 ID 초기화`);
   }, []);
 
+  /**
+   * 🆕 좌측 선택 데이터 설정
+   */
+  const handleSetSelectedLeftData = useCallback((data: Record<string, any> | null) => {
+    logger.info(`[SplitPanelContext] 좌측 선택 데이터 설정:`, {
+      hasData: !!data,
+      dataKeys: data ? Object.keys(data) : [],
+    });
+    setSelectedLeftData(data);
+  }, []);
+
+  /**
+   * 🆕 매핑된 부모 데이터 가져오기
+   * 우측 화면에서 저장 시 이 함수를 호출하여 부모 키 값을 가져옴
+   * 
+   * 동작 방식:
+   * 1. 좌측 데이터의 모든 컬럼을 자동으로 전달 (동일한 컬럼명이면 자동 매핑)
+   * 2. 명시적 매핑이 있으면 소스→타겟 변환 적용 (다른 컬럼명으로 매핑 시)
+   */
+  const getMappedParentData = useCallback((): Record<string, any> => {
+    if (!selectedLeftData) {
+      return {};
+    }
+
+    const mappedData: Record<string, any> = {};
+    
+    // 1단계: 좌측 데이터의 모든 컬럼을 자동으로 전달 (동일 컬럼명 자동 매핑)
+    for (const [key, value] of Object.entries(selectedLeftData)) {
+      if (value !== undefined && value !== null) {
+        mappedData[key] = value;
+      }
+    }
+    
+    // 2단계: 명시적 매핑이 있으면 추가 적용 (다른 컬럼명으로 변환)
+    for (const mapping of parentDataMapping) {
+      const value = selectedLeftData[mapping.sourceColumn];
+      if (value !== undefined && value !== null) {
+        // 소스와 타겟이 다른 경우에만 추가 매핑
+        if (mapping.sourceColumn !== mapping.targetColumn) {
+          mappedData[mapping.targetColumn] = value;
+          logger.debug(`[SplitPanelContext] 명시적 매핑: ${mapping.sourceColumn} → ${mapping.targetColumn} = ${value}`);
+        }
+      }
+    }
+
+    logger.info(`[SplitPanelContext] 매핑된 부모 데이터 (자동+명시적):`, {
+      autoMappedKeys: Object.keys(selectedLeftData),
+      explicitMappings: parentDataMapping.length,
+      finalKeys: Object.keys(mappedData),
+    });
+    return mappedData;
+  }, [selectedLeftData, parentDataMapping]);
+
+  /**
+   * 🆕 연결 필터 값 가져오기
+   * 우측 화면의 테이블 조회 시 이 값으로 필터링
+   */
+  const getLinkedFilterValues = useCallback((): Record<string, any> => {
+    if (!selectedLeftData || linkedFilters.length === 0) {
+      return {};
+    }
+
+    const filterValues: Record<string, any> = {};
+    
+    for (const filter of linkedFilters) {
+      const value = selectedLeftData[filter.sourceColumn];
+      if (value !== undefined && value !== null && value !== "") {
+        filterValues[filter.targetColumn] = value;
+        logger.debug(`[SplitPanelContext] 연결 필터: ${filter.sourceColumn} → ${filter.targetColumn} = ${value}`);
+      }
+    }
+
+    logger.info(`[SplitPanelContext] 연결 필터 값:`, filterValues);
+    return filterValues;
+  }, [selectedLeftData, linkedFilters]);
+
   // 🆕 useMemo로 value 객체 메모이제이션 (무한 루프 방지)
   const value = React.useMemo<SplitPanelContextValue>(() => ({
     splitPanelId,
@@ -247,6 +364,14 @@ export function SplitPanelProvider({
     addItemIds,
     removeItemIds,
     clearItemIds,
+    // 🆕 좌측 선택 데이터 관련
+    selectedLeftData,
+    setSelectedLeftData: handleSetSelectedLeftData,
+    parentDataMapping,
+    getMappedParentData,
+    // 🆕 연결 필터 관련
+    linkedFilters,
+    getLinkedFilterValues,
   }), [
     splitPanelId,
     leftScreenId,
@@ -260,6 +385,12 @@ export function SplitPanelProvider({
     addItemIds,
     removeItemIds,
     clearItemIds,
+    selectedLeftData,
+    handleSetSelectedLeftData,
+    parentDataMapping,
+    getMappedParentData,
+    linkedFilters,
+    getLinkedFilterValues,
   ]);
 
   return (
diff --git a/frontend/lib/api/screen.ts b/frontend/lib/api/screen.ts
index 046996bf..6a394413 100644
--- a/frontend/lib/api/screen.ts
+++ b/frontend/lib/api/screen.ts
@@ -112,6 +112,22 @@ export const screenApi = {
     });
   },
 
+  // 활성 화면 일괄 삭제 (휴지통으로 이동)
+  bulkDeleteScreens: async (
+    screenIds: number[],
+    deleteReason?: string,
+    force?: boolean,
+  ): Promise<{
+    deletedCount: number;
+    skippedCount: number;
+    errors: Array<{ screenId: number; error: string }>;
+  }> => {
+    const response = await apiClient.delete("/screen-management/screens/bulk/delete", {
+      data: { screenIds, deleteReason, force },
+    });
+    return response.data.result;
+  },
+
   // 휴지통 화면 목록 조회
   getDeletedScreens: async (params: {
     page?: number;
diff --git a/frontend/lib/api/vehicleTrip.ts b/frontend/lib/api/vehicleTrip.ts
new file mode 100644
index 00000000..2e452dd6
--- /dev/null
+++ b/frontend/lib/api/vehicleTrip.ts
@@ -0,0 +1,368 @@
+/**
+ * 차량 운행 이력 API 클라이언트
+ */
+import { apiClient } from "./client";
+
+// 타입 정의
+export interface TripSummary {
+  id: number;
+  trip_id: string;
+  user_id: string;
+  user_name?: string;
+  vehicle_id?: number;
+  vehicle_number?: string;
+  departure?: string;
+  arrival?: string;
+  departure_name?: string;
+  destination_name?: string;
+  start_time: string;
+  end_time?: string;
+  total_distance: number;
+  duration_minutes?: number;
+  status: "active" | "completed" | "cancelled";
+  location_count: number;
+  company_code: string;
+  created_at: string;
+}
+
+export interface TripLocation {
+  id: number;
+  latitude: number;
+  longitude: number;
+  accuracy?: number;
+  speed?: number;
+  distance_from_prev?: number;
+  trip_status: "start" | "tracking" | "end";
+  recorded_at: string;
+}
+
+export interface TripDetail {
+  summary: TripSummary;
+  route: TripLocation[];
+}
+
+export interface TripListFilters {
+  userId?: string;
+  vehicleId?: number;
+  status?: string;
+  startDate?: string;
+  endDate?: string;
+  departure?: string;
+  arrival?: string;
+  limit?: number;
+  offset?: number;
+}
+
+export interface StartTripParams {
+  vehicleId?: number;
+  departure?: string;
+  arrival?: string;
+  departureName?: string;
+  destinationName?: string;
+  latitude: number;
+  longitude: number;
+}
+
+export interface EndTripParams {
+  tripId: string;
+  latitude: number;
+  longitude: number;
+}
+
+export interface AddLocationParams {
+  tripId: string;
+  latitude: number;
+  longitude: number;
+  accuracy?: number;
+  speed?: number;
+}
+
+// API 함수들
+
+/**
+ * 운행 시작
+ */
+export async function startTrip(params: StartTripParams) {
+  const response = await apiClient.post("/vehicle/trip/start", params);
+  return response.data;
+}
+
+/**
+ * 운행 종료
+ */
+export async function endTrip(params: EndTripParams) {
+  const response = await apiClient.post("/vehicle/trip/end", params);
+  return response.data;
+}
+
+/**
+ * 위치 기록 추가 (연속 추적)
+ */
+export async function addTripLocation(params: AddLocationParams) {
+  const response = await apiClient.post("/vehicle/trip/location", params);
+  return response.data;
+}
+
+/**
+ * 활성 운행 조회
+ */
+export async function getActiveTrip() {
+  const response = await apiClient.get("/vehicle/trip/active");
+  return response.data;
+}
+
+/**
+ * 운행 취소
+ */
+export async function cancelTrip(tripId: string) {
+  const response = await apiClient.post("/vehicle/trip/cancel", { tripId });
+  return response.data;
+}
+
+/**
+ * 운행 이력 목록 조회
+ */
+export async function getTripList(filters?: TripListFilters) {
+  const params = new URLSearchParams();
+  
+  if (filters) {
+    if (filters.userId) params.append("userId", filters.userId);
+    if (filters.vehicleId) params.append("vehicleId", String(filters.vehicleId));
+    if (filters.status) params.append("status", filters.status);
+    if (filters.startDate) params.append("startDate", filters.startDate);
+    if (filters.endDate) params.append("endDate", filters.endDate);
+    if (filters.departure) params.append("departure", filters.departure);
+    if (filters.arrival) params.append("arrival", filters.arrival);
+    if (filters.limit) params.append("limit", String(filters.limit));
+    if (filters.offset) params.append("offset", String(filters.offset));
+  }
+  
+  const queryString = params.toString();
+  const url = queryString ? `/vehicle/trips?${queryString}` : "/vehicle/trips";
+  
+  const response = await apiClient.get(url);
+  return response.data;
+}
+
+/**
+ * 운행 상세 조회 (경로 포함)
+ */
+export async function getTripDetail(tripId: string): Promise<{ success: boolean; data?: TripDetail; message?: string }> {
+  const response = await apiClient.get(`/vehicle/trips/${tripId}`);
+  return response.data;
+}
+
+/**
+ * 거리 포맷팅 (km)
+ */
+export function formatDistance(distanceKm: number): string {
+  if (distanceKm < 1) {
+    return `${Math.round(distanceKm * 1000)}m`;
+  }
+  return `${distanceKm.toFixed(2)}km`;
+}
+
+/**
+ * 운행 시간 포맷팅
+ */
+export function formatDuration(minutes: number): string {
+  if (minutes < 60) {
+    return `${minutes}분`;
+  }
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  return mins > 0 ? `${hours}시간 ${mins}분` : `${hours}시간`;
+}
+
+/**
+ * 상태 한글 변환
+ */
+export function getStatusLabel(status: string): string {
+  switch (status) {
+    case "active":
+      return "운행 중";
+    case "completed":
+      return "완료";
+    case "cancelled":
+      return "취소됨";
+    default:
+      return status;
+  }
+}
+
+/**
+ * 상태별 색상
+ */
+export function getStatusColor(status: string): string {
+  switch (status) {
+    case "active":
+      return "bg-green-100 text-green-800";
+    case "completed":
+      return "bg-blue-100 text-blue-800";
+    case "cancelled":
+      return "bg-gray-100 text-gray-800";
+    default:
+      return "bg-gray-100 text-gray-800";
+  }
+}
+
+// ============== 리포트 API ==============
+
+export interface DailyStat {
+  date: string;
+  tripCount: number;
+  completedCount: number;
+  cancelledCount: number;
+  totalDistance: number;
+  totalDuration: number;
+  avgDistance: number;
+  avgDuration: number;
+}
+
+export interface WeeklyStat {
+  weekNumber: number;
+  weekStart: string;
+  weekEnd: string;
+  tripCount: number;
+  completedCount: number;
+  totalDistance: number;
+  totalDuration: number;
+  avgDistance: number;
+}
+
+export interface MonthlyStat {
+  month: number;
+  tripCount: number;
+  completedCount: number;
+  cancelledCount: number;
+  totalDistance: number;
+  totalDuration: number;
+  avgDistance: number;
+  avgDuration: number;
+  driverCount: number;
+}
+
+export interface SummaryReport {
+  period: string;
+  totalTrips: number;
+  completedTrips: number;
+  activeTrips: number;
+  cancelledTrips: number;
+  completionRate: number;
+  totalDistance: number;
+  totalDuration: number;
+  avgDistance: number;
+  avgDuration: number;
+  activeDrivers: number;
+}
+
+export interface DriverStat {
+  userId: string;
+  userName: string;
+  tripCount: number;
+  completedCount: number;
+  totalDistance: number;
+  totalDuration: number;
+  avgDistance: number;
+}
+
+export interface RouteStat {
+  departure: string;
+  arrival: string;
+  departureName: string;
+  destinationName: string;
+  tripCount: number;
+  completedCount: number;
+  totalDistance: number;
+  avgDistance: number;
+  avgDuration: number;
+}
+
+/**
+ * 요약 통계 조회 (대시보드용)
+ */
+export async function getSummaryReport(period?: string) {
+  const url = period ? `/vehicle/reports/summary?period=${period}` : "/vehicle/reports/summary";
+  const response = await apiClient.get(url);
+  return response.data;
+}
+
+/**
+ * 일별 통계 조회
+ */
+export async function getDailyReport(filters?: { startDate?: string; endDate?: string; userId?: string }) {
+  const params = new URLSearchParams();
+  if (filters?.startDate) params.append("startDate", filters.startDate);
+  if (filters?.endDate) params.append("endDate", filters.endDate);
+  if (filters?.userId) params.append("userId", filters.userId);
+  
+  const queryString = params.toString();
+  const url = queryString ? `/vehicle/reports/daily?${queryString}` : "/vehicle/reports/daily";
+  
+  const response = await apiClient.get(url);
+  return response.data;
+}
+
+/**
+ * 주별 통계 조회
+ */
+export async function getWeeklyReport(filters?: { year?: number; month?: number; userId?: string }) {
+  const params = new URLSearchParams();
+  if (filters?.year) params.append("year", String(filters.year));
+  if (filters?.month) params.append("month", String(filters.month));
+  if (filters?.userId) params.append("userId", filters.userId);
+  
+  const queryString = params.toString();
+  const url = queryString ? `/vehicle/reports/weekly?${queryString}` : "/vehicle/reports/weekly";
+  
+  const response = await apiClient.get(url);
+  return response.data;
+}
+
+/**
+ * 월별 통계 조회
+ */
+export async function getMonthlyReport(filters?: { year?: number; userId?: string }) {
+  const params = new URLSearchParams();
+  if (filters?.year) params.append("year", String(filters.year));
+  if (filters?.userId) params.append("userId", filters.userId);
+  
+  const queryString = params.toString();
+  const url = queryString ? `/vehicle/reports/monthly?${queryString}` : "/vehicle/reports/monthly";
+  
+  const response = await apiClient.get(url);
+  return response.data;
+}
+
+/**
+ * 운전자별 통계 조회
+ */
+export async function getDriverReport(filters?: { startDate?: string; endDate?: string; limit?: number }) {
+  const params = new URLSearchParams();
+  if (filters?.startDate) params.append("startDate", filters.startDate);
+  if (filters?.endDate) params.append("endDate", filters.endDate);
+  if (filters?.limit) params.append("limit", String(filters.limit));
+  
+  const queryString = params.toString();
+  const url = queryString ? `/vehicle/reports/by-driver?${queryString}` : "/vehicle/reports/by-driver";
+  
+  const response = await apiClient.get(url);
+  return response.data;
+}
+
+/**
+ * 구간별 통계 조회
+ */
+export async function getRouteReport(filters?: { startDate?: string; endDate?: string; limit?: number }) {
+  const params = new URLSearchParams();
+  if (filters?.startDate) params.append("startDate", filters.startDate);
+  if (filters?.endDate) params.append("endDate", filters.endDate);
+  if (filters?.limit) params.append("limit", String(filters.limit));
+  
+  const queryString = params.toString();
+  const url = queryString ? `/vehicle/reports/by-route?${queryString}` : "/vehicle/reports/by-route";
+  
+  const response = await apiClient.get(url);
+  return response.data;
+}
+
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index 0ea687bf..c0e0c87e 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -374,6 +374,11 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           height: component.size?.height ? `${component.size.height}px` : component.style?.height,
         };
 
+        // 🆕 엔티티 검색 컴포넌트는 componentConfig.tableName을 사용해야 함 (화면 테이블이 아닌 검색 대상 테이블)
+        const useConfigTableName = componentType === "entity-search-input" || 
+                                   componentType === "autocomplete-search-input" ||
+                                   componentType === "modal-repeater-table";
+        
         const rendererProps = {
           component,
           isSelected,
@@ -396,7 +401,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           formData,
           onFormDataChange,
           onChange: handleChange, // 개선된 onChange 핸들러 전달
-          tableName,
+          // 🆕 엔티티 검색 컴포넌트는 componentConfig.tableName 유지, 그 외는 화면 테이블명 사용
+          tableName: useConfigTableName ? (component.componentConfig?.tableName || tableName) : tableName,
           menuId, // 🆕 메뉴 ID
           menuObjid, // 🆕 메뉴 OBJID (메뉴 스코프)
           selectedScreen, // 🆕 화면 정보
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index 180dacaa..0bf8bea2 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -692,6 +692,25 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         effectiveScreenId,
       });
 
+      // 🆕 분할 패널 부모 데이터 가져오기 (우측 화면에서 저장 시 좌측 선택 데이터 포함)
+      // 조건 완화: splitPanelContext가 있고 selectedLeftData가 있으면 가져옴
+      // (탭 안에서도 분할 패널 컨텍스트에 접근 가능하도록)
+      let splitPanelParentData: Record<string, any> | undefined;
+      if (splitPanelContext) {
+        // 우측 화면이거나, 탭 안의 화면(splitPanelPosition이 undefined)인 경우 모두 처리
+        // 좌측 화면이 아닌 경우에만 부모 데이터 포함 (좌측에서 저장 시 자신의 데이터를 부모로 포함하면 안됨)
+        if (splitPanelPosition !== "left") {
+          splitPanelParentData = splitPanelContext.getMappedParentData();
+          if (Object.keys(splitPanelParentData).length > 0) {
+            console.log("🔗 [ButtonPrimaryComponent] 분할 패널 부모 데이터 포함:", {
+              splitPanelParentData,
+              splitPanelPosition,
+              isInTab: !splitPanelPosition, // splitPanelPosition이 없으면 탭 안
+            });
+          }
+        }
+      }
+
       const context: ButtonActionContext = {
         formData: formData || {},
         originalData: originalData, // 🔧 빈 객체 대신 undefined 유지 (UPDATE 판단에 사용)
@@ -720,6 +739,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         flowSelectedStepId,
         // 🆕 컴포넌트별 설정 (parentDataMapping 등)
         componentConfigs,
+        // 🆕 분할 패널 부모 데이터 (좌측 화면에서 선택된 데이터)
+        splitPanelParentData,
       } as ButtonActionContext;
 
       // 확인이 필요한 액션인지 확인
diff --git a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
index 0912afd7..a84ee354 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
@@ -1,13 +1,18 @@
 "use client";
 
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useState, useMemo, useCallback } from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { CardDisplayConfig } from "./types";
 import { tableTypeApi } from "@/lib/api/screen";
+import { getFullImageUrl, apiClient } from "@/lib/api/client";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { useScreenContextOptional } from "@/contexts/ScreenContext";
+import { useSplitPanelContext } from "@/contexts/SplitPanelContext";
+import { useModalDataStore } from "@/stores/modalDataStore";
 
 export interface CardDisplayComponentProps extends ComponentRendererProps {
   config?: CardDisplayConfig;
@@ -38,10 +43,26 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
   tableColumns = [],
   ...props
 }) => {
+  // 컨텍스트 (선택적 - 디자인 모드에서는 없을 수 있음)
+  const screenContext = useScreenContextOptional();
+  const splitPanelContext = useSplitPanelContext();
+  const splitPanelPosition = screenContext?.splitPanelPosition;
+
   // 테이블 데이터 상태 관리
   const [loadedTableData, setLoadedTableData] = useState<any[]>([]);
   const [loadedTableColumns, setLoadedTableColumns] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
+  
+  // 카테고리 매핑 상태 (카테고리 코드 -> 라벨/색상)
+  const [columnMeta, setColumnMeta] = useState<
+    Record<string, { webType?: string; codeCategory?: string; inputType?: string }>
+  >({});
+  const [categoryMappings, setCategoryMappings] = useState<
+    Record<string, Record<string, { label: string; color?: string }>>
+  >({});
+
+  // 선택된 카드 상태 (Set으로 변경하여 테이블 리스트와 동일하게)
+  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
 
   // 상세보기 모달 상태
   const [viewModalOpen, setViewModalOpen] = useState(false);
@@ -108,44 +129,78 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
       const tableNameToUse = tableName || component.componentConfig?.tableName || 'user_info'; // 기본 테이블명 설정
 
       if (!tableNameToUse) {
-        // console.log("📋 CardDisplay: 테이블명이 설정되지 않음", {
-        //   tableName,
-        //   componentTableName: component.componentConfig?.tableName,
-        // });
         return;
       }
 
-      // console.log("📋 CardDisplay: 사용할 테이블명", {
-      //   tableName,
-      //   componentTableName: component.componentConfig?.tableName,
-      //   finalTableName: tableNameToUse,
-      // });
-
       try {
         setLoading(true);
-        // console.log(`📋 CardDisplay: ${tableNameToUse} 테이블 데이터 로딩 시작`);
 
-        // 테이블 데이터와 컬럼 정보를 병렬로 로드
-        const [dataResponse, columnsResponse] = await Promise.all([
+        // 테이블 데이터, 컬럼 정보, 입력 타입 정보를 병렬로 로드
+        const [dataResponse, columnsResponse, inputTypesResponse] = await Promise.all([
           tableTypeApi.getTableData(tableNameToUse, {
             page: 1,
             size: 50, // 카드 표시용으로 적당한 개수
           }),
           tableTypeApi.getColumns(tableNameToUse),
+          tableTypeApi.getColumnInputTypes(tableNameToUse),
         ]);
 
-        // console.log(`📋 CardDisplay: ${tableNameToUse} 데이터 로딩 완료`, {
-        //   total: dataResponse.total,
-        //   dataLength: dataResponse.data.length,
-        //   columnsLength: columnsResponse.length,
-        //   sampleData: dataResponse.data.slice(0, 2),
-        //   sampleColumns: columnsResponse.slice(0, 3),
-        // });
-
         setLoadedTableData(dataResponse.data);
         setLoadedTableColumns(columnsResponse);
+        
+        // 컬럼 메타 정보 설정 (inputType 포함)
+        const meta: Record<string, { webType?: string; codeCategory?: string; inputType?: string }> = {};
+        inputTypesResponse.forEach((item: any) => {
+          meta[item.columnName || item.column_name] = {
+            webType: item.webType || item.web_type,
+            inputType: item.inputType || item.input_type,
+            codeCategory: item.codeCategory || item.code_category,
+          };
+        });
+        console.log("📋 [CardDisplay] 컬럼 메타 정보:", meta);
+        setColumnMeta(meta);
+        
+        // 카테고리 타입 컬럼 찾기 및 매핑 로드
+        const categoryColumns = Object.entries(meta)
+          .filter(([_, m]) => m.inputType === "category")
+          .map(([columnName]) => columnName);
+        
+        console.log("📋 [CardDisplay] 카테고리 컬럼:", categoryColumns);
+        
+        if (categoryColumns.length > 0) {
+          const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
+          
+          for (const columnName of categoryColumns) {
+            try {
+              console.log(`📋 [CardDisplay] 카테고리 매핑 로드 시작: ${tableNameToUse}/${columnName}`);
+              const response = await apiClient.get(`/table-categories/${tableNameToUse}/${columnName}/values`);
+              
+              console.log(`📋 [CardDisplay] 카테고리 API 응답 [${columnName}]:`, response.data);
+              
+              if (response.data.success && response.data.data) {
+                const mapping: Record<string, { label: string; color?: string }> = {};
+                response.data.data.forEach((item: any) => {
+                  // API 응답 형식: valueCode, valueLabel (camelCase)
+                  const code = item.valueCode || item.value_code || item.category_code || item.code || item.value;
+                  const label = item.valueLabel || item.value_label || item.category_name || item.name || item.label || code;
+                  // color가 null/undefined/"none"이면 undefined로 유지 (배지 없음)
+                  const rawColor = item.color ?? item.badge_color;
+                  const color = (rawColor && rawColor !== "none") ? rawColor : undefined;
+                  mapping[code] = { label, color };
+                  console.log(`📋 [CardDisplay] 매핑 추가: ${code} -> ${label} (color: ${color})`);
+                });
+                mappings[columnName] = mapping;
+              }
+            } catch (error) {
+              console.error(`❌ CardDisplay: 카테고리 매핑 로드 실패 [${columnName}]`, error);
+            }
+          }
+          
+          console.log("📋 [CardDisplay] 최종 카테고리 매핑:", mappings);
+          setCategoryMappings(mappings);
+        }
       } catch (error) {
-        console.error(`❌ CardDisplay: ${tableNameToUse} 데이터 로딩 실패`, error);
+        console.error(`❌ CardDisplay: 데이터 로딩 실패`, error);
         setLoadedTableData([]);
         setLoadedTableColumns([]);
       } finally {
@@ -196,38 +251,135 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
 
   // 표시할 데이터 결정 (로드된 테이블 데이터 우선 사용)
   const displayData = useMemo(() => {
-    // console.log("📋 CardDisplay: displayData 결정 중", {
-    //   dataSource: componentConfig.dataSource,
-    //   loadedTableDataLength: loadedTableData.length,
-    //   tableDataLength: tableData.length,
-    //   staticDataLength: componentConfig.staticData?.length || 0,
-    // });
-
     // 로드된 테이블 데이터가 있으면 항상 우선 사용 (dataSource 설정 무시)
     if (loadedTableData.length > 0) {
-      // console.log("📋 CardDisplay: 로드된 테이블 데이터 사용", loadedTableData.slice(0, 2));
       return loadedTableData;
     }
 
     // props로 전달받은 테이블 데이터가 있으면 사용
     if (tableData.length > 0) {
-      // console.log("📋 CardDisplay: props 테이블 데이터 사용", tableData.slice(0, 2));
       return tableData;
     }
 
     if (componentConfig.staticData && componentConfig.staticData.length > 0) {
-      // console.log("📋 CardDisplay: 정적 데이터 사용", componentConfig.staticData.slice(0, 2));
       return componentConfig.staticData;
     }
 
     // 데이터가 없으면 빈 배열 반환
-    // console.log("📋 CardDisplay: 표시할 데이터가 없음");
     return [];
   }, [componentConfig.dataSource, loadedTableData, tableData, componentConfig.staticData]);
 
   // 실제 사용할 테이블 컬럼 정보 (로드된 컬럼 우선 사용)
   const actualTableColumns = loadedTableColumns.length > 0 ? loadedTableColumns : tableColumns;
 
+  // 카드 ID 가져오기 함수 (훅은 조기 리턴 전에 선언)
+  const getCardKey = useCallback((data: any, index: number): string => {
+    return String(data.id || data.objid || data.ID || index);
+  }, []);
+
+  // 카드 선택 핸들러 (단일 선택 - 다른 카드 선택 시 기존 선택 해제)
+  const handleCardSelection = useCallback((cardKey: string, data: any, checked: boolean) => {
+    // 단일 선택: 새로운 Set 생성 (기존 선택 초기화)
+    const newSelectedRows = new Set<string>();
+    
+    if (checked) {
+      // 선택 시 해당 카드만 선택
+      newSelectedRows.add(cardKey);
+    }
+    // checked가 false면 빈 Set (선택 해제)
+    
+    setSelectedRows(newSelectedRows);
+
+    // 선택된 카드 데이터 계산
+    const selectedRowsData = displayData.filter((item, index) => 
+      newSelectedRows.has(getCardKey(item, index))
+    );
+
+    // onFormDataChange 호출
+    if (onFormDataChange) {
+      onFormDataChange({
+        selectedRows: Array.from(newSelectedRows),
+        selectedRowsData,
+      });
+    }
+
+    // modalDataStore에 선택된 데이터 저장
+    const tableNameToUse = componentConfig.dataSource?.tableName || tableName;
+    if (tableNameToUse && selectedRowsData.length > 0) {
+      const modalItems = selectedRowsData.map((row, idx) => ({
+        id: getCardKey(row, idx),
+        originalData: row,
+        additionalData: {},
+      }));
+      useModalDataStore.getState().setData(tableNameToUse, modalItems);
+      console.log("[CardDisplay] modalDataStore에 데이터 저장:", {
+        dataSourceId: tableNameToUse,
+        count: modalItems.length,
+      });
+    } else if (tableNameToUse && selectedRowsData.length === 0) {
+      useModalDataStore.getState().clearData(tableNameToUse);
+      console.log("[CardDisplay] modalDataStore 데이터 제거:", tableNameToUse);
+    }
+
+    // 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
+    if (splitPanelContext && splitPanelPosition === "left") {
+      if (checked) {
+        splitPanelContext.setSelectedLeftData(data);
+        console.log("[CardDisplay] 분할 패널 좌측 데이터 저장:", {
+          data,
+          parentDataMapping: splitPanelContext.parentDataMapping,
+        });
+      } else {
+        splitPanelContext.setSelectedLeftData(null);
+        console.log("[CardDisplay] 분할 패널 좌측 데이터 초기화");
+      }
+    }
+  }, [displayData, getCardKey, onFormDataChange, componentConfig.dataSource?.tableName, tableName, splitPanelContext, splitPanelPosition]);
+
+  const handleCardClick = useCallback((data: any, index: number) => {
+    const cardKey = getCardKey(data, index);
+    const isCurrentlySelected = selectedRows.has(cardKey);
+    
+    // 단일 선택: 이미 선택된 카드 클릭 시 선택 해제, 아니면 새로 선택
+    handleCardSelection(cardKey, data, !isCurrentlySelected);
+    
+    if (componentConfig.onCardClick) {
+      componentConfig.onCardClick(data);
+    }
+  }, [getCardKey, selectedRows, handleCardSelection, componentConfig.onCardClick]);
+
+  // DataProvidable 인터페이스 구현 (테이블 리스트와 동일)
+  const dataProvider = useMemo(() => ({
+    componentId: component.id,
+    componentType: "card-display" as const,
+    
+    getSelectedData: () => {
+      const selectedData = displayData.filter((item, index) => 
+        selectedRows.has(getCardKey(item, index))
+      );
+      return selectedData;
+    },
+    
+    getAllData: () => {
+      return displayData;
+    },
+    
+    clearSelection: () => {
+      setSelectedRows(new Set());
+    },
+  }), [component.id, displayData, selectedRows, getCardKey]);
+
+  // ScreenContext에 데이터 제공자로 등록
+  useEffect(() => {
+    if (screenContext && component.id) {
+      screenContext.registerDataProvider(component.id, dataProvider);
+      
+      return () => {
+        screenContext.unregisterDataProvider(component.id);
+      };
+    }
+  }, [screenContext, component.id, dataProvider]);
+
   // 로딩 중인 경우 로딩 표시
   if (loading) {
     return (
@@ -261,26 +413,19 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     borderRadius: "12px", // 컨테이너 자체도 라운드 처리
   };
 
-  // 카드 스타일 - 통일된 디자인 시스템 적용
+  // 카드 스타일 - 컴팩트한 디자인
   const cardStyle: React.CSSProperties = {
     backgroundColor: "white",
-    border: "2px solid #e5e7eb", // 더 명확한 테두리
-    borderRadius: "12px", // 통일된 라운드 처리
-    padding: "24px", // 더 여유로운 패딩
-    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 더 깊은 그림자
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)", // 부드러운 트랜지션
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    padding: "16px",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)",
+    transition: "all 0.2s ease",
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
     position: "relative",
-    minHeight: "240px", // 최소 높이 더 증가
     cursor: isDesignMode ? "pointer" : "default",
-    // 호버 효과를 위한 추가 스타일
-    "&:hover": {
-      transform: "translateY(-2px)",
-      boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-      borderColor: "#f59e0b", // 호버 시 오렌지 테두리
-    }
   };
 
   // 텍스트 자르기 함수
@@ -290,17 +435,80 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     return text.substring(0, maxLength) + "...";
   };
 
-  // 컬럼 매핑에서 값 가져오기
-  const getColumnValue = (data: any, columnName?: string) => {
+  // 컬럼 값을 문자열로 가져오기 (카테고리 타입인 경우 매핑된 라벨 반환)
+  const getColumnValueAsString = (data: any, columnName?: string): string => {
     if (!columnName) return "";
-    return data[columnName] || "";
+    const value = data[columnName];
+    if (value === null || value === undefined || value === "") return "";
+    
+    // 카테고리 타입인 경우 매핑된 라벨 반환
+    const meta = columnMeta[columnName];
+    if (meta?.inputType === "category") {
+      const mapping = categoryMappings[columnName];
+      const valueStr = String(value);
+      const categoryData = mapping?.[valueStr];
+      return categoryData?.label || valueStr;
+    }
+    
+    return String(value);
+  };
+  
+  // 컬럼 매핑에서 값 가져오기 (카테고리 타입인 경우 배지로 표시)
+  const getColumnValue = (data: any, columnName?: string): React.ReactNode => {
+    if (!columnName) return "";
+    const value = data[columnName];
+    if (value === null || value === undefined || value === "") return "";
+    
+    // 카테고리 타입인 경우 매핑된 라벨과 배지로 표시
+    const meta = columnMeta[columnName];
+    if (meta?.inputType === "category") {
+      const mapping = categoryMappings[columnName];
+      const valueStr = String(value);
+      const categoryData = mapping?.[valueStr];
+      const displayLabel = categoryData?.label || valueStr;
+      const displayColor = categoryData?.color;
+      
+      // 색상이 없거나(null/undefined), 빈 문자열이거나, "none"이면 일반 텍스트로 표시 (배지 없음)
+      if (!displayColor || displayColor === "none") {
+        return displayLabel;
+      }
+      
+      return (
+        <Badge
+          style={{
+            backgroundColor: displayColor,
+            borderColor: displayColor,
+          }}
+          className="text-white text-xs"
+        >
+          {displayLabel}
+        </Badge>
+      );
+    }
+    
+    return String(value);
   };
 
   // 컬럼명을 라벨로 변환하는 헬퍼 함수
   const getColumnLabel = (columnName: string) => {
-    if (!actualTableColumns || actualTableColumns.length === 0) return columnName;
-    const column = actualTableColumns.find((col) => col.columnName === columnName);
-    return column?.columnLabel || columnName;
+    if (!actualTableColumns || actualTableColumns.length === 0) {
+      // 컬럼 정보가 없으면 컬럼명을 보기 좋게 변환
+      return formatColumnName(columnName);
+    }
+    const column = actualTableColumns.find(
+      (col) => col.columnName === columnName || col.column_name === columnName
+    );
+    // 다양한 라벨 필드명 지원 (displayName이 API에서 반환하는 라벨)
+    const label = column?.displayName || column?.columnLabel || column?.column_label || column?.label;
+    return label || formatColumnName(columnName);
+  };
+
+  // 컬럼명을 보기 좋은 형태로 변환 (snake_case -> 공백 구분)
+  const formatColumnName = (columnName: string) => {
+    // 언더스코어를 공백으로 변환하고 각 단어 첫 글자 대문자화
+    return columnName
+      .replace(/_/g, ' ')
+      .replace(/\b\w/g, (char) => char.toUpperCase());
   };
 
   // 자동 폴백 로직 - 컬럼이 설정되지 않은 경우 적절한 기본값 찾기
@@ -327,12 +535,6 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     onClick?.();
   };
 
-  const handleCardClick = (data: any) => {
-    if (componentConfig.onCardClick) {
-      componentConfig.onCardClick(data);
-    }
-  };
-
   // DOM 안전한 props만 필터링 (filterDOMProps 유틸리티 사용)
   const safeDomProps = filterDOMProps(props);
 
@@ -405,99 +607,145 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
             </div>
           ) : (
             displayData.map((data, index) => {
-              // 타이틀, 서브타이틀, 설명 값 결정 (원래 카드 레이아웃과 동일한 로직)
+              // 타이틀, 서브타이틀, 설명 값 결정 (문자열로 가져와서 표시)
               const titleValue =
-                getColumnValue(data, componentConfig.columnMapping?.titleColumn) || getAutoFallbackValue(data, "title");
+                getColumnValueAsString(data, componentConfig.columnMapping?.titleColumn) || getAutoFallbackValue(data, "title");
 
               const subtitleValue =
-                getColumnValue(data, componentConfig.columnMapping?.subtitleColumn) ||
+                getColumnValueAsString(data, componentConfig.columnMapping?.subtitleColumn) ||
                 getAutoFallbackValue(data, "subtitle");
 
               const descriptionValue =
-                getColumnValue(data, componentConfig.columnMapping?.descriptionColumn) ||
+                getColumnValueAsString(data, componentConfig.columnMapping?.descriptionColumn) ||
                 getAutoFallbackValue(data, "description");
 
-              const imageValue = componentConfig.columnMapping?.imageColumn
-                ? getColumnValue(data, componentConfig.columnMapping.imageColumn)
-                : data.avatar || data.image || "";
+              // 이미지 컬럼 자동 감지 (image_path, photo 등) - 대소문자 무시
+              const imageColumn = componentConfig.columnMapping?.imageColumn || 
+                Object.keys(data).find(key => {
+                  const lowerKey = key.toLowerCase();
+                  return lowerKey.includes('image') || lowerKey.includes('photo') || 
+                         lowerKey.includes('avatar') || lowerKey.includes('thumbnail') ||
+                         lowerKey.includes('picture') || lowerKey.includes('img');
+                });
+              
+              // 이미지 값 가져오기 (직접 접근 + 폴백)
+              const imageValue = imageColumn 
+                ? data[imageColumn] 
+                : (data.image_path || data.imagePath || data.avatar || data.image || data.photo || "");
+              
+              // 이미지 표시 여부 결정: 이미지 값이 있거나, 설정에서 활성화된 경우
+              const shouldShowImage = componentConfig.cardStyle?.showImage !== false;
+              
+              // 이미지 URL 생성 (TableListComponent와 동일한 로직 사용)
+              const imageUrl = imageValue ? getFullImageUrl(imageValue) : "";
+
+              const cardKey = getCardKey(data, index);
+              const isCardSelected = selectedRows.has(cardKey);
 
               return (
                 <div
-                  key={data.id || index}
-                  style={cardStyle}
-                  className="card-hover group cursor-pointer"
-                  onClick={() => handleCardClick(data)}
+                  key={cardKey}
+                  style={{
+                    ...cardStyle,
+                    borderColor: isCardSelected ? "#000" : "#e5e7eb",
+                    borderWidth: isCardSelected ? "2px" : "1px",
+                    boxShadow: isCardSelected 
+                      ? "0 4px 6px -1px rgba(0, 0, 0, 0.15)" 
+                      : "0 1px 3px rgba(0, 0, 0, 0.08)",
+                    flexDirection: "row", // 가로 배치
+                  }}
+                  className="card-hover group cursor-pointer transition-all duration-150"
+                  onClick={() => handleCardClick(data, index)}
                 >
-                  {/* 카드 이미지 - 통일된 디자인 */}
-                  {componentConfig.cardStyle?.showImage && componentConfig.columnMapping?.imageColumn && (
-                    <div className="mb-4 flex justify-center">
-                      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-primary/10 to-primary/20 shadow-sm border-2 border-background">
-                        <span className="text-2xl text-primary">👤</span>
-                      </div>
+                  {/* 카드 이미지 - 좌측 전체 높이 (이미지 컬럼이 있으면 자동 표시) */}
+                  {shouldShowImage && (
+                    <div className="flex-shrink-0 flex items-center justify-center mr-4">
+                      {imageUrl ? (
+                        <img 
+                          src={imageUrl} 
+                          alt={titleValue || "이미지"}
+                          className="h-16 w-16 rounded-lg object-cover border border-gray-200"
+                          onError={(e) => {
+                            // 이미지 로드 실패 시 기본 아이콘으로 대체
+                            e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23e0e7ff' rx='8'/%3E%3Ctext x='32' y='40' text-anchor='middle' fill='%236366f1' font-size='24'%3E👤%3C/text%3E%3C/svg%3E";
+                          }}
+                        />
+                      ) : (
+                        <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary/10">
+                          <span className="text-2xl text-primary">👤</span>
+                        </div>
+                      )}
                     </div>
                   )}
 
-                  {/* 카드 타이틀 - 통일된 디자인 */}
-                  {componentConfig.cardStyle?.showTitle && (
-                    <div className="mb-3">
-                      <h3 className="text-xl font-bold text-foreground leading-tight">{titleValue}</h3>
-                    </div>
-                  )}
-
-                  {/* 카드 서브타이틀 - 통일된 디자인 */}
-                  {componentConfig.cardStyle?.showSubtitle && (
-                    <div className="mb-3">
-                      <p className="text-sm font-semibold text-primary bg-primary/10 px-3 py-1 rounded-full inline-block">{subtitleValue}</p>
-                    </div>
-                  )}
-
-                  {/* 카드 설명 - 통일된 디자인 */}
-                  {componentConfig.cardStyle?.showDescription && (
-                    <div className="mb-4 flex-1">
-                      <p className="text-sm leading-relaxed text-foreground bg-muted p-3 rounded-lg">
-                        {truncateText(descriptionValue, componentConfig.cardStyle?.maxDescriptionLength || 100)}
-                      </p>
-                    </div>
-                  )}
-
-                  {/* 추가 표시 컬럼들 - 통일된 디자인 */}
-                  {componentConfig.columnMapping?.displayColumns &&
-                    componentConfig.columnMapping.displayColumns.length > 0 && (
-                      <div className="space-y-2 border-t border-border pt-4">
-                        {componentConfig.columnMapping.displayColumns.map((columnName, idx) => {
-                          const value = getColumnValue(data, columnName);
-                          if (!value) return null;
-
-                          return (
-                            <div key={idx} className="flex justify-between items-center text-sm bg-background/50 px-3 py-2 rounded-lg border border-border">
-                              <span className="text-muted-foreground font-medium capitalize">{getColumnLabel(columnName)}:</span>
-                              <span className="font-semibold text-foreground bg-muted px-2 py-1 rounded-md text-xs">{value}</span>
-                            </div>
-                          );
-                        })}
+                  {/* 우측 컨텐츠 영역 */}
+                  <div className="flex flex-col flex-1 min-w-0">
+                    {/* 타이틀 + 서브타이틀 */}
+                    {(componentConfig.cardStyle?.showTitle || componentConfig.cardStyle?.showSubtitle) && (
+                      <div className="mb-1 flex items-center gap-2 flex-wrap">
+                        {componentConfig.cardStyle?.showTitle && (
+                          <h3 className="text-base font-semibold text-foreground leading-tight">{titleValue}</h3>
+                        )}
+                        {componentConfig.cardStyle?.showSubtitle && subtitleValue && (
+                          <span className="text-xs font-medium text-primary bg-primary/10 px-2 py-0.5 rounded-full">{subtitleValue}</span>
+                        )}
                       </div>
                     )}
 
-                  {/* 카드 액션 (선택사항) */}
-                  <div className="mt-3 flex justify-end space-x-2">
-                    <button 
-                      className="text-xs font-medium text-blue-600 hover:text-blue-800 transition-colors"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleCardView(data);
-                      }}
-                    >
-                      상세보기
-                    </button>
-                    <button 
-                      className="text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleCardEdit(data);
-                      }}
-                    >
-                      편집
-                    </button>
+                    {/* 추가 표시 컬럼들 - 가로 배치 */}
+                    {componentConfig.columnMapping?.displayColumns &&
+                      componentConfig.columnMapping.displayColumns.length > 0 && (
+                        <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground">
+                          {componentConfig.columnMapping.displayColumns.map((columnName, idx) => {
+                            const value = getColumnValue(data, columnName);
+                            if (!value) return null;
+
+                            return (
+                              <div key={idx} className="flex items-center gap-1">
+                                <span>{getColumnLabel(columnName)}:</span>
+                                <span className="font-medium text-foreground">{value}</span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+
+                    {/* 카드 설명 */}
+                    {componentConfig.cardStyle?.showDescription && descriptionValue && (
+                      <div className="mt-1 flex-1">
+                        <p className="text-xs text-muted-foreground leading-relaxed">
+                          {truncateText(descriptionValue, componentConfig.cardStyle?.maxDescriptionLength || 100)}
+                        </p>
+                      </div>
+                    )}
+
+                    {/* 카드 액션 - 설정에 따라 표시 */}
+                    {(componentConfig.cardStyle?.showActions ?? true) && (
+                      <div className="mt-2 flex justify-end space-x-2">
+                        {(componentConfig.cardStyle?.showViewButton ?? true) && (
+                          <button 
+                            className="text-xs text-blue-600 hover:text-blue-800 transition-colors"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleCardView(data);
+                            }}
+                          >
+                            상세보기
+                          </button>
+                        )}
+                        {(componentConfig.cardStyle?.showEditButton ?? true) && (
+                          <button 
+                            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleCardEdit(data);
+                            }}
+                          >
+                            편집
+                          </button>
+                        )}
+                      </div>
+                    )}
                   </div>
                 </div>
               );
@@ -521,16 +769,48 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 {Object.entries(selectedData)
                   .filter(([key, value]) => value !== null && value !== undefined && value !== '')
-                  .map(([key, value]) => (
-                    <div key={key} className="bg-muted rounded-lg p-3">
-                      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
-                        {key.replace(/_/g, ' ')}
+                  .map(([key, value]) => {
+                    // 카테고리 타입인 경우 배지로 표시
+                    const meta = columnMeta[key];
+                    let displayValue: React.ReactNode = String(value);
+                    
+                    if (meta?.inputType === "category") {
+                      const mapping = categoryMappings[key];
+                      const valueStr = String(value);
+                      const categoryData = mapping?.[valueStr];
+                      const displayLabel = categoryData?.label || valueStr;
+                      const displayColor = categoryData?.color;
+                      
+                      // 색상이 있고 "none"이 아닌 경우에만 배지로 표시
+                      if (displayColor && displayColor !== "none") {
+                        displayValue = (
+                          <Badge
+                            style={{
+                              backgroundColor: displayColor,
+                              borderColor: displayColor,
+                            }}
+                            className="text-white"
+                          >
+                            {displayLabel}
+                          </Badge>
+                        );
+                      } else {
+                        // 배지 없음: 일반 텍스트로 표시
+                        displayValue = displayLabel;
+                      }
+                    }
+                    
+                    return (
+                      <div key={key} className="bg-muted rounded-lg p-3">
+                        <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
+                          {getColumnLabel(key)}
+                        </div>
+                        <div className="text-sm font-medium text-foreground break-words">
+                          {displayValue}
+                        </div>
                       </div>
-                      <div className="text-sm font-medium text-foreground break-words">
-                        {String(value)}
-                      </div>
-                    </div>
-                  ))
+                    );
+                  })
                 }
               </div>
               
diff --git a/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx b/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
index dc993238..beff4783 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
@@ -277,6 +277,37 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
               액션 버튼 표시
             </label>
           </div>
+
+          {/* 개별 버튼 설정 (액션 버튼이 활성화된 경우에만 표시) */}
+          {(config.cardStyle?.showActions ?? true) && (
+            <div className="ml-4 space-y-2 border-l-2 border-gray-200 pl-3">
+              <div className="flex items-center space-x-2">
+                <input
+                  type="checkbox"
+                  id="showViewButton"
+                  checked={config.cardStyle?.showViewButton ?? true}
+                  onChange={(e) => handleNestedChange("cardStyle.showViewButton", e.target.checked)}
+                  className="rounded border-gray-300"
+                />
+                <label htmlFor="showViewButton" className="text-xs text-gray-600">
+                  상세보기 버튼
+                </label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <input
+                  type="checkbox"
+                  id="showEditButton"
+                  checked={config.cardStyle?.showEditButton ?? true}
+                  onChange={(e) => handleNestedChange("cardStyle.showEditButton", e.target.checked)}
+                  className="rounded border-gray-300"
+                />
+                <label htmlFor="showEditButton" className="text-xs text-gray-600">
+                  편집 버튼
+                </label>
+              </div>
+            </div>
+          )}
         </div>
 
         <div>
diff --git a/frontend/lib/registry/components/card-display/types.ts b/frontend/lib/registry/components/card-display/types.ts
index c711125a..7154eb72 100644
--- a/frontend/lib/registry/components/card-display/types.ts
+++ b/frontend/lib/registry/components/card-display/types.ts
@@ -13,7 +13,9 @@ export interface CardStyleConfig {
   maxDescriptionLength?: number;
   imagePosition?: "top" | "left" | "right";
   imageSize?: "small" | "medium" | "large";
-  showActions?: boolean; // 액션 버튼 표시 여부
+  showActions?: boolean; // 액션 버튼 표시 여부 (전체)
+  showViewButton?: boolean; // 상세보기 버튼 표시 여부
+  showEditButton?: boolean; // 편집 버튼 표시 여부
 }
 
 /**
diff --git a/frontend/lib/registry/components/repeat-screen-modal/README.md b/frontend/lib/registry/components/repeat-screen-modal/README.md
index 6ba2783a..cb22964d 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/README.md
+++ b/frontend/lib/registry/components/repeat-screen-modal/README.md
@@ -1,10 +1,63 @@
-# RepeatScreenModal 컴포넌트 v3
+# RepeatScreenModal 컴포넌트 v3.1
 
 ## 개요
 
 `RepeatScreenModal`은 선택한 데이터를 기반으로 여러 개의 카드를 생성하고, 각 카드의 내부 레이아웃을 자유롭게 구성할 수 있는 컴포넌트입니다.
 
-## v3 주요 변경사항
+## v3.1 주요 변경사항 (2025-11-28)
+
+### 1. 외부 테이블 데이터 소스
+
+테이블 행에서 **외부 테이블의 데이터를 조회**하여 표시할 수 있습니다.
+
+```
+예시: 수주 관리에서 출하 계획 이력 조회
+┌─────────────────────────────────────────────────────────────────┐
+│ 카드: 품목 A                                                     │
+├─────────────────────────────────────────────────────────────────┤
+│ [행 1] 헤더: 품목코드, 품목명                                    │
+├─────────────────────────────────────────────────────────────────┤
+│ [행 2] 테이블: shipment_plan 테이블에서 조회                     │
+│        → sales_order_id로 조인하여 출하 계획 이력 표시           │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 2. 테이블 행 CRUD
+
+테이블 행에서 **행 추가/수정/삭제** 기능을 지원합니다.
+
+- **추가**: 새 행 추가 버튼으로 빈 행 생성
+- **수정**: 편집 가능한 컬럼 직접 수정
+- **삭제**: 행 삭제 (확인 팝업 옵션)
+
+### 3. Footer 버튼 영역
+
+모달 하단에 **커스터마이징 가능한 버튼 영역**을 제공합니다.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ 카드 내용...                                                     │
+├─────────────────────────────────────────────────────────────────┤
+│                                    [초기화] [취소] [저장]        │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 4. 집계 연산식 지원
+
+집계 행에서 **컬럼 간 사칙연산**을 지원합니다.
+
+```typescript
+// 예: 미출하 수량 = 수주수량 - 출하수량
+{
+  sourceType: "formula",
+  formula: "{order_qty} - {ship_qty}",
+  label: "미출하 수량"
+}
+```
+
+---
+
+## v3 주요 변경사항 (기존)
 
 ### 자유 레이아웃 시스템
 
@@ -33,29 +86,7 @@
 | **집계 (aggregation)** | 그룹 내 데이터 집계값 표시 | 총수량, 합계금액 등 |
 | **테이블 (table)** | 그룹 내 각 행을 테이블로 표시 | 수주목록, 품목목록 등 |
 
-### 자유로운 조합
-
-```
-예시 1: 헤더 + 집계 + 테이블 (출하계획)
-├── [행 1] 헤더: 품목코드, 품목명
-├── [행 2] 집계: 총수주잔량, 현재고
-└── [행 3] 테이블: 수주별 출하계획
-
-예시 2: 집계만
-└── [행 1] 집계: 총매출, 총비용, 순이익
-
-예시 3: 테이블만
-└── [행 1] 테이블: 품목 목록
-
-예시 4: 테이블 2개
-├── [행 1] 테이블: 입고 내역
-└── [행 2] 테이블: 출고 내역
-
-예시 5: 헤더 + 헤더 + 필드
-├── [행 1] 헤더: 기본 정보 (읽기전용)
-├── [행 2] 헤더: 상세 정보 (읽기전용)
-└── [행 3] 필드: 입력 필드 (편집가능)
-```
+---
 
 ## 설정 방법
 
@@ -107,13 +138,34 @@
 - **집계 필드**: 그룹 탭에서 정의한 집계 결과 선택
 - **스타일**: 배경색, 폰트 크기
 
-#### 테이블 행 설정
+#### 테이블 행 설정 (v3.1 확장)
 
 - **테이블 제목**: 선택사항
 - **헤더 표시**: 테이블 헤더 표시 여부
+- **외부 테이블 데이터 소스**: (v3.1 신규)
+  - 소스 테이블: 조회할 외부 테이블
+  - 조인 조건: 외부 테이블 키 ↔ 카드 데이터 키
+  - 정렬: 정렬 컬럼 및 방향
+- **CRUD 설정**: (v3.1 신규)
+  - 추가: 새 행 추가 허용
+  - 수정: 행 수정 허용
+  - 삭제: 행 삭제 허용 (확인 팝업 옵션)
 - **테이블 컬럼**: 필드명, 라벨, 타입, 너비, 편집 가능
 - **저장 설정**: 편집 가능한 컬럼의 저장 위치
 
+### 5. Footer 탭 (v3.1 신규)
+
+- **Footer 사용**: Footer 영역 활성화
+- **위치**: 컨텐츠 아래 / 하단 고정 (sticky)
+- **정렬**: 왼쪽 / 가운데 / 오른쪽
+- **버튼 설정**:
+  - 라벨: 버튼 텍스트
+  - 액션: 저장 / 취소 / 닫기 / 초기화 / 커스텀
+  - 스타일: 기본 / 보조 / 외곽선 / 삭제 / 고스트
+  - 아이콘: 저장 / X / 초기화 / 없음
+
+---
+
 ## 데이터 흐름
 
 ```
@@ -125,16 +177,22 @@
    ↓
 4. 각 그룹에 대해 집계값 계산
    ↓
-5. 카드 렌더링 (contentRows 기반)
+5. 외부 테이블 데이터 소스가 설정된 테이블 행의 데이터 로드 (v3.1)
    ↓
-6. 사용자 편집
+6. 카드 렌더링 (contentRows 기반)
    ↓
-7. 저장 시 targetConfig에 따라 테이블별로 데이터 분류 후 저장
+7. 사용자 편집 (CRUD 포함)
+   ↓
+8. Footer 버튼 또는 기본 저장 버튼으로 저장
+   ↓
+9. 기본 데이터 + 외부 테이블 데이터 일괄 저장
 ```
 
+---
+
 ## 사용 예시
 
-### 출하계획 등록
+### 출하계획 등록 (v3.1 - 외부 테이블 + CRUD)
 
 ```typescript
 {
@@ -167,40 +225,185 @@
       type: "aggregation",
       aggregationLayout: "horizontal",
       aggregationFields: [
-        { aggregationResultField: "total_balance", label: "총수주잔량", backgroundColor: "blue" },
-        { aggregationResultField: "order_count", label: "수주건수", backgroundColor: "green" }
+        { sourceType: "aggregation", aggregationResultField: "total_balance", label: "총수주잔량", backgroundColor: "blue" },
+        { sourceType: "formula", formula: "{order_qty} - {ship_qty}", label: "미출하 수량", backgroundColor: "orange" }
       ]
     },
     {
       id: "row-3",
       type: "table",
-      tableTitle: "수주 목록",
+      tableTitle: "출하 계획 이력",
       showTableHeader: true,
+      // 외부 테이블에서 데이터 조회
+      tableDataSource: {
+        enabled: true,
+        sourceTable: "shipment_plan",
+        joinConditions: [
+          { sourceKey: "sales_order_id", referenceKey: "id" }
+        ],
+        orderBy: { column: "created_date", direction: "desc" }
+      },
+      // CRUD 설정
+      tableCrud: {
+        allowCreate: true,
+        allowUpdate: true,
+        allowDelete: true,
+        newRowDefaults: {
+          sales_order_id: "{id}",
+          status: "READY"
+        },
+        deleteConfirm: { enabled: true }
+      },
       tableColumns: [
-        { id: "tc1", field: "order_no", label: "수주번호", type: "text", editable: false },
-        { id: "tc2", field: "partner_name", label: "거래처", type: "text", editable: false },
-        { id: "tc3", field: "balance_qty", label: "미출하", type: "number", editable: false },
-        { 
-          id: "tc4", 
-          field: "plan_qty", 
-          label: "출하계획", 
-          type: "number", 
-          editable: true,
-          targetConfig: { targetTable: "shipment_plan", targetColumn: "plan_qty", saveEnabled: true }
-        }
+        { id: "tc1", field: "plan_date", label: "계획일", type: "date", editable: true },
+        { id: "tc2", field: "plan_qty", label: "계획수량", type: "number", editable: true },
+        { id: "tc3", field: "status", label: "상태", type: "text", editable: false },
+        { id: "tc4", field: "memo", label: "비고", type: "text", editable: true }
       ]
     }
-  ]
+  ],
+  // Footer 설정
+  footerConfig: {
+    enabled: true,
+    position: "sticky",
+    alignment: "right",
+    buttons: [
+      { id: "btn-cancel", label: "취소", action: "cancel", variant: "outline" },
+      { id: "btn-save", label: "저장", action: "save", variant: "default", icon: "save" }
+    ]
+  }
 }
 ```
 
+---
+
+## 타입 정의 (v3.1)
+
+### TableDataSourceConfig
+
+```typescript
+interface TableDataSourceConfig {
+  enabled: boolean;           // 외부 데이터 소스 사용 여부
+  sourceTable: string;        // 조회할 테이블
+  joinConditions: JoinCondition[];  // 조인 조건
+  orderBy?: {
+    column: string;           // 정렬 컬럼
+    direction: "asc" | "desc"; // 정렬 방향
+  };
+  limit?: number;             // 최대 행 수
+}
+
+interface JoinCondition {
+  sourceKey: string;          // 외부 테이블의 조인 키
+  referenceKey: string;       // 카드 데이터의 참조 키
+  referenceType?: "card" | "row"; // 참조 소스
+}
+```
+
+### TableCrudConfig
+
+```typescript
+interface TableCrudConfig {
+  allowCreate: boolean;       // 행 추가 허용
+  allowUpdate: boolean;       // 행 수정 허용
+  allowDelete: boolean;       // 행 삭제 허용
+  newRowDefaults?: Record<string, string>; // 신규 행 기본값 ({field} 형식 지원)
+  deleteConfirm?: {
+    enabled: boolean;         // 삭제 확인 팝업
+    message?: string;         // 확인 메시지
+  };
+  targetTable?: string;       // 저장 대상 테이블
+}
+```
+
+### FooterConfig
+
+```typescript
+interface FooterConfig {
+  enabled: boolean;           // Footer 사용 여부
+  buttons?: FooterButtonConfig[];
+  position?: "sticky" | "static";
+  alignment?: "left" | "center" | "right";
+}
+
+interface FooterButtonConfig {
+  id: string;
+  label: string;
+  action: "save" | "cancel" | "close" | "reset" | "custom";
+  variant?: "default" | "secondary" | "outline" | "destructive" | "ghost";
+  icon?: string;
+  disabled?: boolean;
+  customAction?: {
+    type: string;
+    config?: Record<string, any>;
+  };
+}
+```
+
+### AggregationDisplayConfig (v3.1 확장)
+
+```typescript
+interface AggregationDisplayConfig {
+  // 값 소스 타입
+  sourceType: "aggregation" | "formula" | "external" | "externalFormula";
+  
+  // aggregation: 기존 집계 결과 참조
+  aggregationResultField?: string;
+  
+  // formula: 컬럼 간 연산
+  formula?: string;  // 예: "{order_qty} - {ship_qty}"
+  
+  // external: 외부 테이블 조회 (향후 구현)
+  externalSource?: ExternalValueSource;
+  
+  // externalFormula: 외부 테이블 + 연산 (향후 구현)
+  externalSources?: ExternalValueSource[];
+  externalFormula?: string;
+  
+  // 표시 설정
+  label: string;
+  icon?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  fontSize?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl";
+  format?: "number" | "currency" | "percent";
+  decimalPlaces?: number;
+}
+```
+
+---
+
 ## 레거시 호환
 
 v2에서 사용하던 `cardMode`, `cardLayout`, `tableLayout` 설정도 계속 지원됩니다.
 새로운 프로젝트에서는 `contentRows`를 사용하는 것을 권장합니다.
 
+---
+
 ## 주의사항
 
 1. **집계는 그룹핑 필수**: 집계 행은 그룹핑이 활성화되어 있어야 의미가 있습니다.
 2. **테이블은 그룹핑 필수**: 테이블 행도 그룹핑이 활성화되어 있어야 그룹 내 행들을 표시할 수 있습니다.
 3. **단순 모드**: 그룹핑 없이 사용하면 1행 = 1카드로 동작합니다. 이 경우 헤더/필드 타입만 사용 가능합니다.
+4. **외부 테이블 CRUD**: 외부 테이블 데이터 소스가 설정된 테이블에서만 CRUD가 동작합니다.
+5. **연산식**: 사칙연산(+, -, *, /)과 괄호만 지원됩니다. 복잡한 함수는 지원하지 않습니다.
+
+---
+
+## 변경 이력
+
+### v3.1 (2025-11-28)
+- 외부 테이블 데이터 소스 기능 추가
+- 테이블 행 CRUD (추가/수정/삭제) 기능 추가
+- Footer 버튼 영역 기능 추가
+- 집계 연산식 (formula) 지원 추가
+- 다단계 조인 타입 정의 추가 (향후 구현 예정)
+
+### v3.0
+- 자유 레이아웃 시스템 도입
+- contentRows 기반 행 타입 선택 방식
+- 헤더/필드/집계/테이블 4가지 행 타입 지원
+
+### v2.0
+- simple 모드 / withTable 모드 구분
+- cardLayout / tableLayout 분리
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
index 997b381c..85e43ce9 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
@@ -9,7 +9,17 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Loader2, Save, X, Layers, Table as TableIcon } from "lucide-react";
+import { Loader2, Save, X, Layers, Table as TableIcon, Plus, Trash2, RotateCcw, Pencil } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   RepeatScreenModalProps,
   CardData,
@@ -20,6 +30,10 @@ import {
   TableColumnConfig,
   CardContentRowConfig,
   AggregationDisplayConfig,
+  FooterConfig,
+  FooterButtonConfig,
+  TableDataSourceConfig,
+  TableCrudConfig,
 } from "./types";
 import { ComponentRendererProps } from "@/types/component";
 import { cn } from "@/lib/utils";
@@ -59,6 +73,9 @@ export function RepeatScreenModalComponent({
   // 🆕 v3: 자유 레이아웃
   const contentRows = componentConfig?.contentRows || [];
   
+  // 🆕 v3.1: Footer 설정
+  const footerConfig = componentConfig?.footerConfig;
+  
   // (레거시 호환)
   const cardLayout = componentConfig?.cardLayout || [];
   const cardMode = componentConfig?.cardMode || "simple";
@@ -71,6 +88,133 @@ export function RepeatScreenModalComponent({
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
+  
+  // 🆕 v3.1: 외부 테이블 데이터 (테이블 행별로 관리)
+  const [externalTableData, setExternalTableData] = useState<Record<string, any[]>>({});
+  // 🆕 v3.1: 삭제 확인 다이얼로그
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [pendingDeleteInfo, setPendingDeleteInfo] = useState<{
+    cardId: string;
+    rowId: string;
+    contentRowId: string;
+  } | null>(null);
+
+  // 🆕 v3.9: beforeFormSave 이벤트 핸들러 - ButtonPrimary 저장 시 externalTableData를 formData에 병합
+  useEffect(() => {
+    const handleBeforeFormSave = (event: Event) => {
+      if (!(event instanceof CustomEvent) || !event.detail?.formData) return;
+
+      console.log("[RepeatScreenModal] beforeFormSave 이벤트 수신");
+
+      // 외부 테이블 데이터에서 dirty 행만 추출하여 저장 데이터 준비
+      const saveDataByTable: Record<string, any[]> = {};
+
+      for (const [key, rows] of Object.entries(externalTableData)) {
+        // contentRow 찾기
+        const contentRow = contentRows.find((r) => key.includes(r.id));
+        if (!contentRow?.tableDataSource?.enabled) continue;
+
+        const targetTable = contentRow.tableCrud?.targetTable || contentRow.tableDataSource.sourceTable;
+        
+        // dirty 행만 필터링 (삭제된 행 제외)
+        const dirtyRows = rows.filter((row) => row._isDirty && !row._isDeleted);
+        
+        if (dirtyRows.length === 0) continue;
+
+        // 저장할 필드만 추출
+        const editableFields = (contentRow.tableColumns || [])
+          .filter((col) => col.editable)
+          .map((col) => col.field);
+        
+        const joinKeys = (contentRow.tableDataSource.joinConditions || [])
+          .map((cond) => cond.sourceKey);
+
+        const allowedFields = [...new Set([...editableFields, ...joinKeys])];
+
+        if (!saveDataByTable[targetTable]) {
+          saveDataByTable[targetTable] = [];
+        }
+
+        for (const row of dirtyRows) {
+          const saveData: Record<string, any> = {};
+          
+          // 허용된 필드만 포함
+          for (const field of allowedFields) {
+            if (row[field] !== undefined) {
+              saveData[field] = row[field];
+            }
+          }
+          
+          // _isNew 플래그 유지
+          saveData._isNew = row._isNew;
+          saveData._targetTable = targetTable;
+          
+          // 기존 레코드의 경우 id 포함
+          if (!row._isNew && row._originalData?.id) {
+            saveData.id = row._originalData.id;
+          }
+
+          saveDataByTable[targetTable].push(saveData);
+        }
+      }
+
+      // formData에 테이블별 저장 데이터 추가
+      for (const [tableName, rows] of Object.entries(saveDataByTable)) {
+        const fieldKey = `_repeatScreenModal_${tableName}`;
+        event.detail.formData[fieldKey] = rows;
+        console.log(`[RepeatScreenModal] beforeFormSave - ${tableName} 저장 데이터:`, rows);
+      }
+
+      // 🆕 v3.9: 집계 저장 설정 정보도 formData에 추가
+      if (grouping?.aggregations && groupedCardsData.length > 0) {
+        const aggregationSaveConfigs: Array<{
+          resultField: string;
+          aggregatedValue: number;
+          targetTable: string;
+          targetColumn: string;
+          joinKey: { sourceField: string; targetField: string };
+          sourceValue: any; // 조인 키 값
+        }> = [];
+
+        for (const card of groupedCardsData) {
+          for (const agg of grouping.aggregations) {
+            if (agg.saveConfig?.enabled) {
+              const { saveConfig, resultField } = agg;
+              const { targetTable, targetColumn, joinKey } = saveConfig;
+
+              if (!targetTable || !targetColumn || !joinKey?.sourceField || !joinKey?.targetField) {
+                continue;
+              }
+
+              const aggregatedValue = card._aggregations?.[resultField] ?? 0;
+              const sourceValue = card._representativeData?.[joinKey.sourceField];
+
+              if (sourceValue !== undefined) {
+                aggregationSaveConfigs.push({
+                  resultField,
+                  aggregatedValue,
+                  targetTable,
+                  targetColumn,
+                  joinKey,
+                  sourceValue,
+                });
+              }
+            }
+          }
+        }
+
+        if (aggregationSaveConfigs.length > 0) {
+          event.detail.formData._repeatScreenModal_aggregations = aggregationSaveConfigs;
+          console.log("[RepeatScreenModal] beforeFormSave - 집계 저장 설정:", aggregationSaveConfigs);
+        }
+      }
+    };
+
+    window.addEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
+    return () => {
+      window.removeEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
+    };
+  }, [externalTableData, contentRows, grouping, groupedCardsData]);
 
   // 초기 데이터 로드
   useEffect(() => {
@@ -208,6 +352,765 @@ export function RepeatScreenModalComponent({
     loadInitialData();
   }, [dataSource, formData, groupedData, contentRows, grouping?.enabled, grouping?.groupByField]);
 
+  // 🆕 v3.1: 외부 테이블 데이터 로드
+  useEffect(() => {
+    const loadExternalTableData = async () => {
+      // contentRows에서 외부 테이블 데이터 소스가 있는 table 타입 행 찾기
+      const tableRowsWithExternalSource = contentRows.filter(
+        (row) => row.type === "table" && row.tableDataSource?.enabled
+      );
+
+      if (tableRowsWithExternalSource.length === 0) return;
+      if (groupedCardsData.length === 0 && cardsData.length === 0) return;
+
+      const newExternalData: Record<string, any[]> = {};
+
+      for (const contentRow of tableRowsWithExternalSource) {
+        const dataSourceConfig = contentRow.tableDataSource!;
+        const cards = groupedCardsData.length > 0 ? groupedCardsData : cardsData;
+
+        for (const card of cards) {
+          const cardId = card._cardId;
+          const representativeData = (card as GroupedCardData)._representativeData || card;
+
+          try {
+            // 조인 조건 생성
+            const filters: Record<string, any> = {};
+            for (const condition of dataSourceConfig.joinConditions) {
+              const refValue = representativeData[condition.referenceKey];
+              if (refValue !== undefined && refValue !== null) {
+                filters[condition.sourceKey] = refValue;
+              }
+            }
+
+            if (Object.keys(filters).length === 0) {
+              console.warn(`[RepeatScreenModal] 조인 조건이 없습니다: ${contentRow.id}`);
+              continue;
+            }
+
+            // API 호출 - 메인 테이블 데이터
+            const response = await apiClient.post(
+              `/table-management/tables/${dataSourceConfig.sourceTable}/data`,
+              {
+                search: filters,
+                page: 1,
+                size: dataSourceConfig.limit || 100,
+                sort: dataSourceConfig.orderBy
+                  ? {
+                      column: dataSourceConfig.orderBy.column,
+                      direction: dataSourceConfig.orderBy.direction,
+                    }
+                  : undefined,
+              }
+            );
+
+            if (response.data.success && response.data.data?.data) {
+              let tableData = response.data.data.data;
+              
+              console.log(`[RepeatScreenModal] 소스 테이블 데이터 로드 완료:`, {
+                sourceTable: dataSourceConfig.sourceTable,
+                rowCount: tableData.length,
+                sampleRow: tableData[0] ? Object.keys(tableData[0]) : [],
+                firstRowData: tableData[0],
+                // 디버그: plan_date 필드 확인
+                plan_date_value: tableData[0]?.plan_date,
+              });
+
+              // 🆕 v3.3: 추가 조인 테이블 데이터 로드 및 병합
+              if (dataSourceConfig.additionalJoins && dataSourceConfig.additionalJoins.length > 0) {
+                console.log(`[RepeatScreenModal] 조인 설정:`, dataSourceConfig.additionalJoins);
+                tableData = await loadAndMergeJoinData(tableData, dataSourceConfig.additionalJoins);
+                console.log(`[RepeatScreenModal] 조인 후 데이터:`, {
+                  rowCount: tableData.length,
+                  sampleRow: tableData[0] ? Object.keys(tableData[0]) : [],
+                  firstRowData: tableData[0],
+                });
+              }
+
+              // 🆕 v3.4: 필터 조건 적용
+              if (dataSourceConfig.filterConfig?.enabled) {
+                const { filterField, filterType, referenceField, referenceSource } = dataSourceConfig.filterConfig;
+                
+                // 비교 값 가져오기
+                let referenceValue: any;
+                if (referenceSource === "formData") {
+                  referenceValue = formData?.[referenceField];
+                } else {
+                  // representativeData
+                  referenceValue = representativeData[referenceField];
+                }
+
+                if (referenceValue !== undefined && referenceValue !== null) {
+                  tableData = tableData.filter((row: any) => {
+                    const rowValue = row[filterField];
+                    if (filterType === "equals") {
+                      return rowValue === referenceValue;
+                    } else {
+                      // notEquals
+                      return rowValue !== referenceValue;
+                    }
+                  });
+                  
+                  console.log(`[RepeatScreenModal] 필터 적용: ${filterField} ${filterType} ${referenceValue}, 결과: ${tableData.length}건`);
+                }
+              }
+
+              const key = `${cardId}-${contentRow.id}`;
+              newExternalData[key] = tableData.map((row: any, idx: number) => ({
+                _rowId: `ext-row-${cardId}-${contentRow.id}-${idx}-${Date.now()}`,
+                _originalData: { ...row },
+                _isDirty: false,
+                _isNew: false,
+                _isEditing: false, // 🆕 v3.8: 로드된 데이터는 읽기 전용
+                _isDeleted: false,
+                ...row,
+              }));
+              
+              // 디버그: 저장된 외부 테이블 데이터 확인
+              console.log(`[RepeatScreenModal] 외부 테이블 데이터 저장:`, {
+                key,
+                rowCount: newExternalData[key].length,
+                firstRow: newExternalData[key][0],
+                plan_date_in_firstRow: newExternalData[key][0]?.plan_date,
+              });
+            }
+          } catch (error) {
+            console.error(`[RepeatScreenModal] 외부 테이블 데이터 로드 실패:`, error);
+          }
+        }
+      }
+
+      setExternalTableData((prev) => {
+        // 이전 데이터와 동일하면 업데이트하지 않음 (무한 루프 방지)
+        const prevKeys = Object.keys(prev).sort().join(",");
+        const newKeys = Object.keys(newExternalData).sort().join(",");
+        if (prevKeys === newKeys) {
+          // 키가 같으면 데이터 내용 비교
+          const isSame = Object.keys(newExternalData).every(
+            (key) => JSON.stringify(prev[key]) === JSON.stringify(newExternalData[key])
+          );
+          if (isSame) return prev;
+        }
+        
+        // 🆕 v3.2: 외부 테이블 데이터 로드 후 집계 재계산
+        // 비동기적으로 처리하여 무한 루프 방지
+        setTimeout(() => {
+          recalculateAggregationsWithExternalData(newExternalData);
+        }, 0);
+        
+        return newExternalData;
+      });
+    };
+
+    loadExternalTableData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentRows, groupedCardsData.length, cardsData.length]);
+
+  // 🆕 v3.3: 추가 조인 테이블 데이터 로드 및 병합
+  const loadAndMergeJoinData = async (
+    mainData: any[],
+    additionalJoins: { id: string; joinTable: string; joinType: string; sourceKey: string; targetKey: string }[]
+  ): Promise<any[]> => {
+    if (mainData.length === 0) return mainData;
+
+    // 각 조인 테이블별로 필요한 키 값들 수집
+    for (const joinConfig of additionalJoins) {
+      if (!joinConfig.joinTable || !joinConfig.sourceKey || !joinConfig.targetKey) continue;
+
+      // 메인 데이터에서 조인 키 값들 추출
+      const joinKeyValues = [...new Set(mainData.map((row) => row[joinConfig.sourceKey]).filter(Boolean))];
+      
+      if (joinKeyValues.length === 0) continue;
+
+      try {
+        // 조인 테이블 데이터 조회
+        const joinResponse = await apiClient.post(
+          `/table-management/tables/${joinConfig.joinTable}/data`,
+          {
+            search: { [joinConfig.targetKey]: joinKeyValues },
+            page: 1,
+            size: 1000, // 충분히 큰 값
+          }
+        );
+
+        if (joinResponse.data.success && joinResponse.data.data?.data) {
+          const joinData = joinResponse.data.data.data;
+          
+          // 조인 데이터를 맵으로 변환 (빠른 조회를 위해)
+          const joinDataMap = new Map<any, any>();
+          for (const joinRow of joinData) {
+            joinDataMap.set(joinRow[joinConfig.targetKey], joinRow);
+          }
+
+          // 메인 데이터에 조인 데이터 병합
+          mainData = mainData.map((row) => {
+            const joinKey = row[joinConfig.sourceKey];
+            const joinRow = joinDataMap.get(joinKey);
+            
+            if (joinRow) {
+              // 조인 테이블의 컬럼들을 메인 데이터에 추가 (접두사 없이)
+              const mergedRow = { ...row };
+              for (const [key, value] of Object.entries(joinRow)) {
+                // 이미 존재하는 키가 아닌 경우에만 추가 (메인 테이블 우선)
+                if (!(key in mergedRow)) {
+                  mergedRow[key] = value;
+                } else {
+                  // 충돌하는 경우 조인 테이블명을 접두사로 사용
+                  mergedRow[`${joinConfig.joinTable}_${key}`] = value;
+                }
+              }
+              return mergedRow;
+            }
+            return row;
+          });
+        }
+      } catch (error) {
+        console.error(`[RepeatScreenModal] 조인 테이블 데이터 로드 실패 (${joinConfig.joinTable}):`, error);
+      }
+    }
+
+    return mainData;
+  };
+
+  // 🆕 v3.2: 외부 테이블 데이터가 로드된 후 집계 재계산
+  const recalculateAggregationsWithExternalData = (extData: Record<string, any[]>) => {
+    if (!grouping?.aggregations || grouping.aggregations.length === 0) return;
+    if (groupedCardsData.length === 0) return;
+
+    // 외부 테이블 집계 또는 formula가 있는지 확인
+    const hasExternalAggregation = grouping.aggregations.some((agg) => {
+      const sourceType = agg.sourceType || "column";
+      if (sourceType === "formula") return true; // formula는 외부 테이블 참조 가능
+      if (sourceType === "column") {
+        const sourceTable = agg.sourceTable || dataSource?.sourceTable;
+        return sourceTable && sourceTable !== dataSource?.sourceTable;
+      }
+      return false;
+    });
+
+    if (!hasExternalAggregation) return;
+
+    // contentRows에서 외부 테이블 데이터 소스가 있는 table 타입 행 찾기
+    const tableRowWithExternalSource = contentRows.find(
+      (row) => row.type === "table" && row.tableDataSource?.enabled
+    );
+
+    if (!tableRowWithExternalSource) return;
+
+    // 각 카드의 집계 재계산
+    const updatedCards = groupedCardsData.map((card) => {
+      const key = `${card._cardId}-${tableRowWithExternalSource.id}`;
+      // 🆕 v3.7: 삭제된 행은 집계에서 제외
+      const externalRows = (extData[key] || []).filter((row) => !row._isDeleted);
+
+      // 집계 재계산
+      const newAggregations: Record<string, number> = {};
+      
+      grouping.aggregations!.forEach((agg) => {
+        const sourceType = agg.sourceType || "column";
+        
+        if (sourceType === "column") {
+          const sourceTable = agg.sourceTable || dataSource?.sourceTable;
+          const isExternalTable = sourceTable && sourceTable !== dataSource?.sourceTable;
+          
+          if (isExternalTable) {
+            // 외부 테이블 집계
+            newAggregations[agg.resultField] = calculateColumnAggregation(
+              externalRows, 
+              agg.sourceField || "", 
+              agg.type || "sum"
+            );
+          } else {
+            // 기본 테이블 집계 (기존 값 유지)
+            newAggregations[agg.resultField] = card._aggregations[agg.resultField] || 
+              calculateColumnAggregation(card._rows, agg.sourceField || "", agg.type || "sum");
+          }
+        } else if (sourceType === "formula" && agg.formula) {
+          // 가상 집계 (연산식) - 외부 테이블 데이터 포함하여 재계산
+          newAggregations[agg.resultField] = evaluateFormulaWithContext(
+            agg.formula,
+            card._representativeData,
+            card._rows,
+            externalRows,
+            newAggregations // 이전 집계 결과 참조
+          );
+        }
+      });
+
+      return {
+        ...card,
+        _aggregations: newAggregations,
+      };
+    });
+
+    // 변경된 경우에만 업데이트 (무한 루프 방지)
+    setGroupedCardsData((prev) => {
+      const hasChanges = updatedCards.some((card, idx) => {
+        const prevCard = prev[idx];
+        if (!prevCard) return true;
+        return JSON.stringify(card._aggregations) !== JSON.stringify(prevCard._aggregations);
+      });
+      return hasChanges ? updatedCards : prev;
+    });
+  };
+
+  // 🆕 v3.1: 외부 테이블 행 추가
+  const handleAddExternalRow = (cardId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
+    const key = `${cardId}-${contentRowId}`;
+    const card = groupedCardsData.find((c) => c._cardId === cardId) || cardsData.find((c) => c._cardId === cardId);
+    const representativeData = (card as GroupedCardData)?._representativeData || card || {};
+
+    // 기본값 생성
+    const newRowData: Record<string, any> = {
+      _rowId: `new-row-${Date.now()}`,
+      _originalData: {},
+      _isDirty: true,
+      _isNew: true,
+    };
+
+    // 🆕 v3.5: 카드 대표 데이터에서 조인 테이블 컬럼 값 자동 채우기
+    // tableColumns에서 정의된 필드들 중 representativeData에 있는 값을 자동으로 채움
+    if (contentRow.tableColumns) {
+      for (const col of contentRow.tableColumns) {
+        // representativeData에 해당 필드가 있으면 자동으로 채움
+        if (representativeData[col.field] !== undefined && representativeData[col.field] !== null) {
+          newRowData[col.field] = representativeData[col.field];
+        }
+      }
+    }
+
+    // 🆕 v3.5: 조인 조건의 키 값도 자동으로 채움 (예: sales_order_id)
+    if (contentRow.tableDataSource?.joinConditions) {
+      for (const condition of contentRow.tableDataSource.joinConditions) {
+        // sourceKey는 소스 테이블(예: shipment_plan)의 컬럼
+        // referenceKey는 카드 대표 데이터의 컬럼 (예: id)
+        const refValue = representativeData[condition.referenceKey];
+        if (refValue !== undefined && refValue !== null) {
+          newRowData[condition.sourceKey] = refValue;
+        }
+      }
+    }
+
+    // newRowDefaults 적용 (사용자 정의 기본값이 우선)
+    if (contentRow.tableCrud?.newRowDefaults) {
+      for (const [field, template] of Object.entries(contentRow.tableCrud.newRowDefaults)) {
+        // {fieldName} 형식의 템플릿 치환
+        let value = template;
+        const matches = template.match(/\{(\w+)\}/g);
+        if (matches) {
+          for (const match of matches) {
+            const fieldName = match.slice(1, -1);
+            value = value.replace(match, String(representativeData[fieldName] || ""));
+          }
+        }
+        newRowData[field] = value;
+      }
+    }
+
+    console.log("[RepeatScreenModal] 새 행 추가:", {
+      cardId,
+      contentRowId,
+      representativeData,
+      newRowData,
+    });
+
+    setExternalTableData((prev) => {
+      const newData = {
+        ...prev,
+        [key]: [...(prev[key] || []), newRowData],
+      };
+      
+      // 🆕 v3.5: 새 행 추가 시 집계 재계산
+      setTimeout(() => {
+        recalculateAggregationsWithExternalData(newData);
+      }, 0);
+      
+      return newData;
+    });
+  };
+
+  // 🆕 v3.6: 테이블 영역 저장 기능
+  const saveTableAreaData = async (cardId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
+    const key = `${cardId}-${contentRowId}`;
+    const rows = externalTableData[key] || [];
+    
+    console.log("[RepeatScreenModal] saveTableAreaData 시작:", {
+      key,
+      rowsCount: rows.length,
+      contentRowId,
+      tableDataSource: contentRow?.tableDataSource,
+      tableCrud: contentRow?.tableCrud,
+    });
+    
+    if (!contentRow?.tableDataSource?.enabled) {
+      console.warn("[RepeatScreenModal] 외부 테이블 데이터 소스가 설정되지 않음");
+      return { success: false, message: "데이터 소스가 설정되지 않았습니다." };
+    }
+
+    const targetTable = contentRow.tableCrud?.targetTable || contentRow.tableDataSource.sourceTable;
+    const dirtyRows = rows.filter((row) => row._isDirty);
+
+    console.log("[RepeatScreenModal] 저장 대상:", {
+      targetTable,
+      dirtyRowsCount: dirtyRows.length,
+      dirtyRows: dirtyRows.map(r => ({ _isNew: r._isNew, _isDirty: r._isDirty, data: r })),
+    });
+
+    if (dirtyRows.length === 0) {
+      return { success: true, message: "저장할 변경사항이 없습니다.", savedCount: 0 };
+    }
+
+    const savePromises: Promise<any>[] = [];
+    const savedIds: number[] = [];
+
+    // 🆕 v3.6: editable한 컬럼 + 조인 키만 추출 (읽기 전용 컬럼은 제외)
+    const allowedFields = new Set<string>();
+    
+    // tableColumns에서 editable: true인 필드만 추가 (읽기 전용 컬럼 제외)
+    if (contentRow.tableColumns) {
+      contentRow.tableColumns.forEach((col) => {
+        // editable이 명시적으로 true이거나, editable이 undefined가 아니고 false가 아닌 경우
+        // 또는 inputType이 있는 경우 (입력 가능한 컬럼)
+        if (col.field && (col.editable === true || col.inputType)) {
+          allowedFields.add(col.field);
+        }
+      });
+    }
+    
+    // 조인 조건의 sourceKey 추가 (예: sales_order_id) - 이건 항상 필요
+    if (contentRow.tableDataSource?.joinConditions) {
+      contentRow.tableDataSource.joinConditions.forEach((cond) => {
+        if (cond.sourceKey) allowedFields.add(cond.sourceKey);
+      });
+    }
+    
+    console.log("[RepeatScreenModal] 저장 허용 필드 (editable + 조인키):", Array.from(allowedFields));
+    console.log("[RepeatScreenModal] tableColumns 정보:", contentRow.tableColumns?.map(c => ({ 
+      field: c.field, 
+      editable: c.editable, 
+      inputType: c.inputType 
+    })));
+
+    // 삭제할 행 (기존 데이터 중 _isDeleted가 true인 것)
+    const deletedRows = dirtyRows.filter((row) => row._isDeleted && row._originalData?.id);
+    // 저장할 행 (삭제되지 않은 것)
+    const rowsToSave = dirtyRows.filter((row) => !row._isDeleted);
+
+    console.log("[RepeatScreenModal] 삭제 대상:", deletedRows.length, "건");
+    console.log("[RepeatScreenModal] 저장 대상:", rowsToSave.length, "건");
+
+    // 🆕 v3.7: 삭제 처리 (배열 형태로 body에 전달)
+    for (const row of deletedRows) {
+      const deleteId = row._originalData.id;
+      console.log(`[RepeatScreenModal] DELETE 요청: /table-management/tables/${targetTable}/delete`, [{ id: deleteId }]);
+      savePromises.push(
+        apiClient.request({
+          method: "DELETE",
+          url: `/table-management/tables/${targetTable}/delete`,
+          data: [{ id: deleteId }],
+        }).then((res) => {
+          console.log("[RepeatScreenModal] DELETE 응답:", res.data);
+          return { type: "delete", id: deleteId };
+        }).catch((err) => {
+          console.error("[RepeatScreenModal] DELETE 실패:", err.response?.data || err.message);
+          throw err;
+        })
+      );
+    }
+
+    for (const row of rowsToSave) {
+      const { _rowId, _originalData, _isDirty, _isNew, _isDeleted, ...allData } = row;
+      
+      // 허용된 필드만 필터링
+      const dataToSave: Record<string, any> = {};
+      for (const field of allowedFields) {
+        if (allData[field] !== undefined) {
+          dataToSave[field] = allData[field];
+        }
+      }
+
+      console.log("[RepeatScreenModal] 저장할 데이터:", {
+        _isNew,
+        _originalData,
+        allData,
+        dataToSave,
+      });
+
+      if (_isNew) {
+        // INSERT - /add 엔드포인트 사용
+        console.log(`[RepeatScreenModal] INSERT 요청: /table-management/tables/${targetTable}/add`, dataToSave);
+        savePromises.push(
+          apiClient.post(`/table-management/tables/${targetTable}/add`, dataToSave).then((res) => {
+            console.log("[RepeatScreenModal] INSERT 응답:", res.data);
+            if (res.data?.data?.id) {
+              savedIds.push(res.data.data.id);
+            }
+            return res;
+          }).catch((err) => {
+            console.error("[RepeatScreenModal] INSERT 실패:", err.response?.data || err.message);
+            throw err;
+          })
+        );
+      } else if (_originalData?.id) {
+        // UPDATE - /edit 엔드포인트 사용 (originalData와 updatedData 형식)
+        const updatePayload = {
+          originalData: _originalData,
+          updatedData: { ...dataToSave, id: _originalData.id },
+        };
+        console.log(`[RepeatScreenModal] UPDATE 요청: /table-management/tables/${targetTable}/edit`, updatePayload);
+        savePromises.push(
+          apiClient.put(`/table-management/tables/${targetTable}/edit`, updatePayload).then((res) => {
+            console.log("[RepeatScreenModal] UPDATE 응답:", res.data);
+            savedIds.push(_originalData.id);
+            return res;
+          }).catch((err) => {
+            console.error("[RepeatScreenModal] UPDATE 실패:", err.response?.data || err.message);
+            throw err;
+          })
+        );
+      }
+    }
+
+    try {
+      await Promise.all(savePromises);
+
+      // 저장 후: 삭제된 행은 제거, 나머지는 dirty/editing 플래그 초기화
+      setExternalTableData((prev) => {
+        const updated = { ...prev };
+        if (updated[key]) {
+          // 삭제된 행은 완전히 제거
+          updated[key] = updated[key]
+            .filter((row) => !row._isDeleted)
+            .map((row) => ({
+              ...row,
+              _isDirty: false,
+              _isNew: false,
+              _isEditing: false, // 🆕 v3.8: 수정 모드 해제
+              _originalData: { ...row, _rowId: undefined, _originalData: undefined, _isDirty: undefined, _isNew: undefined, _isDeleted: undefined, _isEditing: undefined },
+            }));
+        }
+        return updated;
+      });
+
+      const savedCount = rowsToSave.length;
+      const deletedCount = deletedRows.length;
+      const message = deletedCount > 0 
+        ? `${savedCount}건 저장, ${deletedCount}건 삭제 완료`
+        : `${savedCount}건 저장 완료`;
+
+      return { success: true, message, savedCount, deletedCount, savedIds };
+    } catch (error: any) {
+      console.error("[RepeatScreenModal] 테이블 영역 저장 실패:", error);
+      return { success: false, message: error.message || "저장 중 오류가 발생했습니다." };
+    }
+  };
+
+  // 🆕 v3.6: 테이블 영역 저장 핸들러
+  const handleTableAreaSave = async (cardId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
+    setIsSaving(true);
+    try {
+      const result = await saveTableAreaData(cardId, contentRowId, contentRow);
+      if (result.success) {
+        console.log("[RepeatScreenModal] 테이블 영역 저장 성공:", result);
+        
+        // 🆕 v3.9: 집계 저장 설정이 있는 경우 연관 테이블 동기화
+        const card = groupedCardsData.find((c) => c._cardId === cardId);
+        if (card && grouping?.aggregations) {
+          await saveAggregationsToRelatedTables(card, contentRowId);
+        }
+      } else {
+        console.error("[RepeatScreenModal] 테이블 영역 저장 실패:", result.message);
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 🆕 v3.9: 집계 결과를 연관 테이블에 저장
+  const saveAggregationsToRelatedTables = async (card: GroupedCardData, contentRowId: string) => {
+    if (!grouping?.aggregations) return;
+
+    const savePromises: Promise<any>[] = [];
+
+    for (const agg of grouping.aggregations) {
+      const saveConfig = agg.saveConfig;
+      
+      // 저장 설정이 없거나 비활성화된 경우 스킵
+      if (!saveConfig?.enabled) continue;
+      
+      // 자동 저장이 아닌 경우, 레이아웃에 연결되어 있는지 확인 필요
+      // (현재는 자동 저장과 동일하게 처리 - 추후 레이아웃 연결 체크 추가 가능)
+      
+      // 집계 결과 값 가져오기
+      const aggregatedValue = card._aggregations[agg.resultField];
+      
+      if (aggregatedValue === undefined) {
+        console.warn(`[RepeatScreenModal] 집계 결과 없음: ${agg.resultField}`);
+        continue;
+      }
+
+      // 조인 키로 대상 레코드 식별
+      const sourceKeyValue = card._representativeData[saveConfig.joinKey.sourceField];
+      
+      if (!sourceKeyValue) {
+        console.warn(`[RepeatScreenModal] 조인 키 값 없음: ${saveConfig.joinKey.sourceField}`);
+        continue;
+      }
+
+      console.log(`[RepeatScreenModal] 집계 저장 시작:`, {
+        aggregation: agg.resultField,
+        value: aggregatedValue,
+        targetTable: saveConfig.targetTable,
+        targetColumn: saveConfig.targetColumn,
+        joinKey: `${saveConfig.joinKey.sourceField}=${sourceKeyValue} -> ${saveConfig.joinKey.targetField}`,
+      });
+
+      // UPDATE API 호출
+      const updatePayload = {
+        originalData: { [saveConfig.joinKey.targetField]: sourceKeyValue },
+        updatedData: { 
+          [saveConfig.targetColumn]: aggregatedValue,
+          [saveConfig.joinKey.targetField]: sourceKeyValue,
+        },
+      };
+
+      savePromises.push(
+        apiClient.put(`/table-management/tables/${saveConfig.targetTable}/edit`, updatePayload)
+          .then((res) => {
+            console.log(`[RepeatScreenModal] 집계 저장 성공: ${agg.resultField} -> ${saveConfig.targetTable}.${saveConfig.targetColumn}`);
+            return res;
+          })
+          .catch((err) => {
+            console.error(`[RepeatScreenModal] 집계 저장 실패: ${agg.resultField}`, err.response?.data || err.message);
+            throw err;
+          })
+      );
+    }
+
+    if (savePromises.length > 0) {
+      try {
+        await Promise.all(savePromises);
+        console.log(`[RepeatScreenModal] 모든 집계 저장 완료: ${savePromises.length}건`);
+      } catch (error) {
+        console.error("[RepeatScreenModal] 일부 집계 저장 실패:", error);
+      }
+    }
+  };
+
+  // 🆕 v3.1: 외부 테이블 행 삭제 요청
+  const handleDeleteExternalRowRequest = (cardId: string, rowId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
+    if (contentRow.tableCrud?.deleteConfirm?.enabled !== false) {
+      // 삭제 확인 팝업 표시
+      setPendingDeleteInfo({ cardId, rowId, contentRowId });
+      setDeleteConfirmOpen(true);
+    } else {
+      // 바로 삭제
+      handleDeleteExternalRow(cardId, rowId, contentRowId);
+    }
+  };
+
+  // 🆕 v3.1: 외부 테이블 행 삭제 실행 (소프트 삭제 - _isDeleted 플래그 설정)
+  const handleDeleteExternalRow = (cardId: string, rowId: string, contentRowId: string) => {
+    const key = `${cardId}-${contentRowId}`;
+    setExternalTableData((prev) => {
+      const newData = {
+        ...prev,
+        [key]: (prev[key] || []).map((row) =>
+          row._rowId === rowId
+            ? { ...row, _isDeleted: true, _isDirty: true }
+            : row
+        ),
+      };
+      
+      // 🆕 v3.5: 행 삭제 시 집계 재계산 (삭제된 행 제외)
+      setTimeout(() => {
+        recalculateAggregationsWithExternalData(newData);
+      }, 0);
+      
+      return newData;
+    });
+    setDeleteConfirmOpen(false);
+    setPendingDeleteInfo(null);
+  };
+
+  // 🆕 v3.7: 삭제 취소 (소프트 삭제 복원)
+  const handleRestoreExternalRow = (cardId: string, rowId: string, contentRowId: string) => {
+    const key = `${cardId}-${contentRowId}`;
+    setExternalTableData((prev) => {
+      const newData = {
+        ...prev,
+        [key]: (prev[key] || []).map((row) =>
+          row._rowId === rowId
+            ? { ...row, _isDeleted: false, _isDirty: true }
+            : row
+        ),
+      };
+      
+      setTimeout(() => {
+        recalculateAggregationsWithExternalData(newData);
+      }, 0);
+      
+      return newData;
+    });
+  };
+
+  // 🆕 v3.8: 수정 모드 전환
+  const handleEditExternalRow = (cardId: string, rowId: string, contentRowId: string) => {
+    const key = `${cardId}-${contentRowId}`;
+    setExternalTableData((prev) => ({
+      ...prev,
+      [key]: (prev[key] || []).map((row) =>
+        row._rowId === rowId
+          ? { ...row, _isEditing: true }
+          : row
+      ),
+    }));
+  };
+
+  // 🆕 v3.8: 수정 취소
+  const handleCancelEditExternalRow = (cardId: string, rowId: string, contentRowId: string) => {
+    const key = `${cardId}-${contentRowId}`;
+    setExternalTableData((prev) => ({
+      ...prev,
+      [key]: (prev[key] || []).map((row) =>
+        row._rowId === rowId
+          ? { 
+              ...row._originalData, 
+              _rowId: row._rowId, 
+              _originalData: row._originalData,
+              _isEditing: false, 
+              _isDirty: false,
+              _isNew: false,
+              _isDeleted: false,
+            }
+          : row
+      ),
+    }));
+  };
+
+  // 🆕 v3.1: 외부 테이블 행 데이터 변경
+  const handleExternalRowDataChange = (cardId: string, contentRowId: string, rowId: string, field: string, value: any) => {
+    const key = `${cardId}-${contentRowId}`;
+    
+    // 데이터 업데이트
+    setExternalTableData((prev) => {
+      const newData = {
+        ...prev,
+        [key]: (prev[key] || []).map((row) =>
+          row._rowId === rowId ? { ...row, [field]: value, _isDirty: true } : row
+        ),
+      };
+      
+      // 🆕 v3.5: 데이터 변경 시 집계 실시간 재계산
+      // setTimeout으로 비동기 처리하여 상태 업데이트 후 재계산
+      setTimeout(() => {
+        recalculateAggregationsWithExternalData(newData);
+      }, 0);
+      
+      return newData;
+    });
+  };
+
   // 그룹화된 데이터 처리
   const processGroupedData = (data: any[], groupingConfig: typeof grouping): GroupedCardData[] => {
     if (!groupingConfig?.enabled) {
@@ -240,14 +1143,6 @@ export function RepeatScreenModalComponent({
     let cardIndex = 0;
 
     groupMap.forEach((rows, groupKey) => {
-      // 집계 계산
-      const aggregations: Record<string, number> = {};
-      if (groupingConfig.aggregations) {
-        groupingConfig.aggregations.forEach((agg) => {
-          aggregations[agg.resultField] = calculateAggregation(rows, agg);
-        });
-      }
-
       // 행 데이터 생성
       const cardRows: CardRowData[] = rows.map((row, idx) => ({
         _rowId: `row-${cardIndex}-${idx}-${Date.now()}`,
@@ -256,13 +1151,59 @@ export function RepeatScreenModalComponent({
         ...row,
       }));
 
+      const representativeData = rows[0] || {};
+
+      // 🆕 v3.2: 집계 계산 (순서대로 - 이전 집계 결과 참조 가능)
+      // 1단계: 기본 테이블 컬럼 집계만 (외부 테이블 데이터는 아직 없음)
+      const aggregations: Record<string, number> = {};
+      if (groupingConfig.aggregations) {
+        groupingConfig.aggregations.forEach((agg) => {
+          const sourceType = agg.sourceType || "column";
+          
+          if (sourceType === "column") {
+            // 컬럼 집계 (기본 테이블만 - 외부 테이블은 나중에 처리)
+            const sourceTable = agg.sourceTable || dataSource?.sourceTable;
+            const isExternalTable = sourceTable && sourceTable !== dataSource?.sourceTable;
+            
+            if (!isExternalTable) {
+              // 기본 테이블 집계
+              aggregations[agg.resultField] = calculateColumnAggregation(
+                rows, 
+                agg.sourceField || "", 
+                agg.type || "sum"
+              );
+            } else {
+              // 외부 테이블 집계는 나중에 계산 (placeholder)
+              aggregations[agg.resultField] = 0;
+            }
+          } else if (sourceType === "formula") {
+            // 가상 집계 (연산식) - 외부 테이블 없이 먼저 계산 시도
+            // 외부 테이블 데이터가 필요한 경우 나중에 재계산됨
+            if (agg.formula) {
+              aggregations[agg.resultField] = evaluateFormulaWithContext(
+                agg.formula,
+                representativeData,
+                rows,
+                [], // 외부 테이블 데이터 없음
+                aggregations // 이전 집계 결과 참조
+              );
+            } else {
+              aggregations[agg.resultField] = 0;
+            }
+          }
+        });
+      }
+
+      // 안정적인 _cardId 생성 (Date.now() 대신 groupKey 사용)
+      // groupKey가 없으면 대표 데이터의 id 사용
+      const stableId = groupKey || representativeData.id || cardIndex;
       result.push({
-        _cardId: `grouped-card-${cardIndex}-${Date.now()}`,
+        _cardId: `grouped-card-${cardIndex}-${stableId}`,
         _groupKey: groupKey,
         _groupField: groupByField || "",
         _aggregations: aggregations,
         _rows: cardRows,
-        _representativeData: rows[0] || {},
+        _representativeData: representativeData,
       });
 
       cardIndex++;
@@ -271,11 +1212,15 @@ export function RepeatScreenModalComponent({
     return result;
   };
 
-  // 집계 계산
-  const calculateAggregation = (rows: any[], agg: AggregationConfig): number => {
-    const values = rows.map((row) => Number(row[agg.sourceField]) || 0);
+  // 집계 계산 (컬럼 집계용)
+  const calculateColumnAggregation = (
+    rows: any[], 
+    sourceField: string, 
+    type: "sum" | "count" | "avg" | "min" | "max"
+  ): number => {
+    const values = rows.map((row) => Number(row[sourceField]) || 0);
 
-    switch (agg.type) {
+    switch (type) {
       case "sum":
         return values.reduce((a, b) => a + b, 0);
       case "count":
@@ -291,6 +1236,175 @@ export function RepeatScreenModalComponent({
     }
   };
 
+  // 🆕 v3.2: 집계 계산 (다중 테이블 및 formula 지원)
+  const calculateAggregation = (
+    agg: AggregationConfig,
+    cardRows: any[], // 기본 테이블 행들
+    externalRows: any[], // 외부 테이블 행들
+    previousAggregations: Record<string, number>, // 이전 집계 결과들
+    representativeData: Record<string, any> // 카드 대표 데이터
+  ): number => {
+    const sourceType = agg.sourceType || "column";
+
+    if (sourceType === "column") {
+      // 컬럼 집계
+      const sourceTable = agg.sourceTable || dataSource?.sourceTable;
+      const isExternalTable = sourceTable && sourceTable !== dataSource?.sourceTable;
+      
+      // 외부 테이블인 경우 externalRows 사용, 아니면 cardRows 사용
+      const targetRows = isExternalTable ? externalRows : cardRows;
+      
+      return calculateColumnAggregation(
+        targetRows, 
+        agg.sourceField || "", 
+        agg.type || "sum"
+      );
+    } else if (sourceType === "formula") {
+      // 가상 집계 (연산식)
+      if (!agg.formula) return 0;
+      
+      return evaluateFormulaWithContext(
+        agg.formula,
+        representativeData,
+        cardRows,
+        externalRows,
+        previousAggregations
+      );
+    }
+
+    return 0;
+  };
+
+  // 🆕 v3.1: 집계 표시값 계산 (formula, external 등 지원)
+  const calculateAggregationDisplayValue = (
+    aggField: AggregationDisplayConfig,
+    card: GroupedCardData
+  ): number | string => {
+    const sourceType = aggField.sourceType || "aggregation";
+
+    switch (sourceType) {
+      case "aggregation":
+        // 기존 집계 결과 참조
+        return card._aggregations?.[aggField.aggregationResultField || ""] || 0;
+
+      case "formula":
+        // 컬럼 간 연산
+        if (!aggField.formula) return 0;
+        return evaluateFormula(aggField.formula, card._representativeData, card._rows);
+
+      case "external":
+        // 외부 테이블 값 (별도 로드 필요 - 현재는 placeholder)
+        // TODO: 외부 테이블 값 로드 구현
+        return 0;
+
+      case "externalFormula":
+        // 외부 테이블 + 연산 (별도 로드 필요 - 현재는 placeholder)
+        // TODO: 외부 테이블 값 로드 후 연산 구현
+        return 0;
+
+      default:
+        return 0;
+    }
+  };
+
+  // 🆕 v3.2: 연산식 평가 (다중 테이블, 이전 집계 결과 참조 지원)
+  const evaluateFormulaWithContext = (
+    formula: string,
+    representativeData: Record<string, any>,
+    cardRows: any[], // 기본 테이블 행들
+    externalRows: any[], // 외부 테이블 행들
+    previousAggregations: Record<string, number> // 이전 집계 결과들
+  ): number => {
+    try {
+      let expression = formula;
+
+      // 1. 외부 테이블 집계 함수 처리: SUM_EXT({field}), COUNT_EXT({field}) 등
+      const extAggFunctions = ["SUM_EXT", "COUNT_EXT", "AVG_EXT", "MIN_EXT", "MAX_EXT"];
+      for (const fn of extAggFunctions) {
+        const regex = new RegExp(`${fn}\\(\\{(\\w+)\\}\\)`, "g");
+        expression = expression.replace(regex, (match, fieldName) => {
+          if (!externalRows || externalRows.length === 0) return "0";
+          const values = externalRows.map((row) => Number(row[fieldName]) || 0);
+          const baseFn = fn.replace("_EXT", "");
+          switch (baseFn) {
+            case "SUM":
+              return String(values.reduce((a, b) => a + b, 0));
+            case "COUNT":
+              return String(values.length);
+            case "AVG":
+              return String(values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0);
+            case "MIN":
+              return String(values.length > 0 ? Math.min(...values) : 0);
+            case "MAX":
+              return String(values.length > 0 ? Math.max(...values) : 0);
+            default:
+              return "0";
+          }
+        });
+      }
+
+      // 2. 기본 테이블 집계 함수 처리: SUM({field}), COUNT({field}) 등
+      const aggFunctions = ["SUM", "COUNT", "AVG", "MIN", "MAX"];
+      for (const fn of aggFunctions) {
+        // SUM_EXT는 이미 처리했으므로 제외
+        const regex = new RegExp(`(?<!_)${fn}\\(\\{(\\w+)\\}\\)`, "g");
+        expression = expression.replace(regex, (match, fieldName) => {
+          if (!cardRows || cardRows.length === 0) return "0";
+          const values = cardRows.map((row) => Number(row[fieldName]) || 0);
+          switch (fn) {
+            case "SUM":
+              return String(values.reduce((a, b) => a + b, 0));
+            case "COUNT":
+              return String(values.length);
+            case "AVG":
+              return String(values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0);
+            case "MIN":
+              return String(values.length > 0 ? Math.min(...values) : 0);
+            case "MAX":
+              return String(values.length > 0 ? Math.max(...values) : 0);
+            default:
+              return "0";
+          }
+        });
+      }
+
+      // 3. 단순 필드 참조 치환 (이전 집계 결과 또는 대표 데이터)
+      const fieldRegex = /\{(\w+)\}/g;
+      expression = expression.replace(fieldRegex, (match, fieldName) => {
+        // 먼저 이전 집계 결과에서 찾기
+        if (previousAggregations && fieldName in previousAggregations) {
+          return String(previousAggregations[fieldName]);
+        }
+        // 대표 데이터에서 값 가져오기
+        const value = representativeData[fieldName];
+        return String(Number(value) || 0);
+      });
+
+      // 4. 안전한 수식 평가 (사칙연산만 허용)
+      // 허용 문자: 숫자, 소수점, 사칙연산, 괄호, 공백
+      if (!/^[\d\s+\-*/().]+$/.test(expression)) {
+        console.warn("[RepeatScreenModal] 허용되지 않는 연산식:", expression);
+        return 0;
+      }
+
+      // eval 대신 Function 사용 (더 안전)
+      const result = new Function(`return ${expression}`)();
+      return Number(result) || 0;
+    } catch (error) {
+      console.error("[RepeatScreenModal] 연산식 평가 실패:", formula, error);
+      return 0;
+    }
+  };
+
+  // 레거시 호환: 기존 evaluateFormula 유지
+  const evaluateFormula = (
+    formula: string,
+    representativeData: Record<string, any>,
+    rows?: any[]
+  ): number => {
+    return evaluateFormulaWithContext(formula, representativeData, rows || [], [], {});
+  };
+
   // 카드 데이터 로드 (소스 설정에 따라)
   const loadCardData = async (originalData: any): Promise<Record<string, any>> => {
     const cardData: Record<string, any> = {};
@@ -401,12 +1515,16 @@ export function RepeatScreenModalComponent({
     setIsSaving(true);
 
     try {
+      // 기존 데이터 저장
       if (cardMode === "withTable") {
         await saveGroupedData();
       } else {
         await saveSimpleData();
       }
 
+      // 🆕 v3.1: 외부 테이블 데이터 저장
+      await saveExternalTableData();
+
       alert("저장되었습니다.");
     } catch (error: any) {
       console.error("저장 실패:", error);
@@ -416,6 +1534,92 @@ export function RepeatScreenModalComponent({
     }
   };
 
+  // 🆕 v3.1: 외부 테이블 데이터 저장
+  const saveExternalTableData = async () => {
+    const savePromises: Promise<void>[] = [];
+
+    for (const [key, rows] of Object.entries(externalTableData)) {
+      // key 형식: cardId-contentRowId
+      const [cardId, contentRowId] = key.split("-").slice(0, 2);
+      const contentRow = contentRows.find((r) => r.id === contentRowId || key.includes(r.id));
+      
+      if (!contentRow?.tableDataSource?.enabled) continue;
+
+      const targetTable = contentRow.tableCrud?.targetTable || contentRow.tableDataSource.sourceTable;
+      const dirtyRows = rows.filter((row) => row._isDirty);
+
+      for (const row of dirtyRows) {
+        const { _rowId, _originalData, _isDirty, _isNew, ...dataToSave } = row;
+
+        if (_isNew) {
+          // INSERT
+          savePromises.push(
+            apiClient.post(`/table-management/tables/${targetTable}/data`, dataToSave).then(() => {})
+          );
+        } else if (_originalData?.id) {
+          // UPDATE
+          savePromises.push(
+            apiClient.put(`/table-management/tables/${targetTable}/data/${_originalData.id}`, dataToSave).then(() => {})
+          );
+        }
+      }
+    }
+
+    await Promise.all(savePromises);
+
+    // 저장 후 dirty 플래그 초기화
+    setExternalTableData((prev) => {
+      const updated: Record<string, any[]> = {};
+      for (const [key, rows] of Object.entries(prev)) {
+        updated[key] = rows.map((row) => ({
+          ...row,
+          _isDirty: false,
+          _isNew: false,
+          _originalData: { ...row, _rowId: undefined, _originalData: undefined, _isDirty: undefined, _isNew: undefined },
+        }));
+      }
+      return updated;
+    });
+  };
+
+  // 🆕 v3.1: Footer 버튼 클릭 핸들러
+  const handleFooterButtonClick = async (btn: FooterButtonConfig) => {
+    switch (btn.action) {
+      case "save":
+        await handleSaveAll();
+        break;
+      case "cancel":
+      case "close":
+        // 모달 닫기 이벤트 발생
+        window.dispatchEvent(new CustomEvent("closeScreenModal"));
+        break;
+      case "reset":
+        // 데이터 초기화
+        if (confirm("변경 사항을 모두 취소하시겠습니까?")) {
+          // 외부 테이블 데이터 초기화
+          setExternalTableData({});
+          // 기존 데이터 재로드
+          setCardsData([]);
+          setGroupedCardsData([]);
+        }
+        break;
+      case "custom":
+        // 커스텀 액션 이벤트 발생
+        if (btn.customAction) {
+          window.dispatchEvent(
+            new CustomEvent("repeatScreenModalCustomAction", {
+              detail: {
+                actionType: btn.customAction.type,
+                config: btn.customAction.config,
+                componentId: component?.id,
+              },
+            })
+          );
+        }
+        break;
+    }
+  };
+
   // Simple 모드 저장
   const saveSimpleData = async () => {
     const dirtyCards = cardsData.filter((card) => card._isDirty);
@@ -536,11 +1740,21 @@ export function RepeatScreenModalComponent({
 
   // 수정 여부 확인
   const hasDirtyData = useMemo(() => {
+    // 기존 데이터 수정 여부
+    let hasBaseDirty = false;
     if (cardMode === "withTable") {
-      return groupedCardsData.some((card) => card._rows.some((row) => row._isDirty));
+      hasBaseDirty = groupedCardsData.some((card) => card._rows.some((row) => row._isDirty));
+    } else {
+      hasBaseDirty = cardsData.some((c) => c._isDirty);
     }
-    return cardsData.some((c) => c._isDirty);
-  }, [cardMode, cardsData, groupedCardsData]);
+
+    // 🆕 v3.1: 외부 테이블 데이터 수정 여부
+    const hasExternalDirty = Object.values(externalTableData).some((rows) =>
+      rows.some((row) => row._isDirty)
+    );
+
+    return hasBaseDirty || hasExternalDirty;
+  }, [cardMode, cardsData, groupedCardsData, externalTableData]);
 
   // 디자인 모드 렌더링
   if (isDesignMode) {
@@ -710,7 +1924,166 @@ export function RepeatScreenModalComponent({
                 {useNewLayout ? (
                   contentRows.map((contentRow, rowIndex) => (
                     <div key={contentRow.id || `crow-${rowIndex}`}>
-                      {renderContentRow(contentRow, card, grouping?.aggregations || [], handleRowDataChange)}
+                      {contentRow.type === "table" && contentRow.tableDataSource?.enabled ? (
+                        // 🆕 v3.1: 외부 테이블 데이터 소스 사용
+                        <div className="border rounded-lg overflow-hidden">
+                          {/* 테이블 헤더 영역: 제목 + 버튼들 */}
+                          {(contentRow.tableTitle || contentRow.tableCrud?.allowSave || contentRow.tableCrud?.allowCreate) && (
+                            <div className="px-4 py-2 bg-muted/30 border-b text-sm font-medium flex items-center justify-between">
+                              <span>{contentRow.tableTitle || ""}</span>
+                              <div className="flex items-center gap-2">
+                                {/* 저장 버튼 - allowSave가 true일 때만 표시 */}
+                                {contentRow.tableCrud?.allowSave && (
+                                  <Button
+                                    variant="default"
+                                    size="sm"
+                                    onClick={() => handleTableAreaSave(card._cardId, contentRow.id, contentRow)}
+                                    disabled={isSaving || !(externalTableData[`${card._cardId}-${contentRow.id}`] || []).some((r: any) => r._isDirty)}
+                                    className="h-7 text-xs gap-1"
+                                  >
+                                    {isSaving ? (
+                                      <Loader2 className="h-3 w-3 animate-spin" />
+                                    ) : (
+                                      <Save className="h-3 w-3" />
+                                    )}
+                                    {contentRow.tableCrud?.saveButtonLabel || "저장"}
+                                  </Button>
+                                )}
+                                {/* 추가 버튼 */}
+                                {contentRow.tableCrud?.allowCreate && (
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => handleAddExternalRow(card._cardId, contentRow.id, contentRow)}
+                                    className="h-7 text-xs gap-1"
+                                  >
+                                    <Plus className="h-3 w-3" />
+                                    추가
+                                  </Button>
+                                )}
+                              </div>
+                            </div>
+                          )}
+                          <Table>
+                            {contentRow.showTableHeader !== false && (
+                              <TableHeader>
+                                <TableRow className="bg-muted/50">
+                                  {(contentRow.tableColumns || []).map((col) => (
+                                    <TableHead
+                                      key={col.id}
+                                      style={{ width: col.width }}
+                                      className={cn("text-xs", col.align && `text-${col.align}`)}
+                                    >
+                                      {col.label}
+                                    </TableHead>
+                                  ))}
+                                  {(contentRow.tableCrud?.allowUpdate || contentRow.tableCrud?.allowDelete) && (
+                                    <TableHead className="w-[80px] text-center text-xs">작업</TableHead>
+                                  )}
+                                </TableRow>
+                              </TableHeader>
+                            )}
+                            <TableBody>
+                              {(externalTableData[`${card._cardId}-${contentRow.id}`] || []).length === 0 ? (
+                                <TableRow>
+                                  <TableCell
+                                    colSpan={(contentRow.tableColumns?.length || 0) + (contentRow.tableCrud?.allowDelete ? 1 : 0)}
+                                    className="text-center py-8 text-muted-foreground"
+                                  >
+                                    데이터가 없습니다.
+                                  </TableCell>
+                                </TableRow>
+                              ) : (
+                                (externalTableData[`${card._cardId}-${contentRow.id}`] || []).map((row) => (
+                                  <TableRow
+                                    key={row._rowId}
+                                    className={cn(
+                                      row._isDirty && "bg-primary/5", 
+                                      row._isNew && "bg-green-50 dark:bg-green-950",
+                                      row._isDeleted && "bg-destructive/10 opacity-60"
+                                    )}
+                                  >
+                                    {(contentRow.tableColumns || []).map((col) => (
+                                      <TableCell
+                                        key={`${row._rowId}-${col.id}`}
+                                        className={cn(
+                                          "text-sm", 
+                                          col.align && `text-${col.align}`,
+                                          row._isDeleted && "line-through text-muted-foreground"
+                                        )}
+                                      >
+                                        {renderTableCell(
+                                          col, 
+                                          row, 
+                                          (value) => handleExternalRowDataChange(card._cardId, contentRow.id, row._rowId, col.field, value),
+                                          row._isNew || row._isEditing // 신규 행이거나 수정 모드일 때만 편집 가능
+                                        )}
+                                      </TableCell>
+                                    ))}
+                                    {(contentRow.tableCrud?.allowUpdate || contentRow.tableCrud?.allowDelete) && (
+                                      <TableCell className="text-center">
+                                        <div className="flex items-center justify-center gap-1">
+                                          {/* 수정 버튼: 저장된 행(isNew가 아닌)이고 편집 모드가 아닐 때만 표시 */}
+                                          {contentRow.tableCrud?.allowUpdate && !row._isNew && !row._isEditing && !row._isDeleted && (
+                                            <Button
+                                              variant="ghost"
+                                              size="sm"
+                                              onClick={() => handleEditExternalRow(card._cardId, row._rowId, contentRow.id)}
+                                              className="h-7 w-7 p-0 text-blue-600 hover:text-blue-700 hover:bg-blue-50"
+                                              title="수정"
+                                            >
+                                              <Pencil className="h-4 w-4" />
+                                            </Button>
+                                          )}
+                                          {/* 수정 취소 버튼: 편집 모드일 때만 표시 */}
+                                          {row._isEditing && !row._isNew && (
+                                            <Button
+                                              variant="ghost"
+                                              size="sm"
+                                              onClick={() => handleCancelEditExternalRow(card._cardId, row._rowId, contentRow.id)}
+                                              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-muted"
+                                              title="수정 취소"
+                                            >
+                                              <X className="h-4 w-4" />
+                                            </Button>
+                                          )}
+                                          {/* 삭제/복원 버튼 */}
+                                          {contentRow.tableCrud?.allowDelete && (
+                                            row._isDeleted ? (
+                                              <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() => handleRestoreExternalRow(card._cardId, row._rowId, contentRow.id)}
+                                                className="h-7 w-7 p-0 text-primary hover:text-primary hover:bg-primary/10"
+                                                title="삭제 취소"
+                                              >
+                                                <RotateCcw className="h-4 w-4" />
+                                              </Button>
+                                            ) : (
+                                              <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() => handleDeleteExternalRowRequest(card._cardId, row._rowId, contentRow.id, contentRow)}
+                                                className="h-7 w-7 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                                                title="삭제"
+                                              >
+                                                <Trash2 className="h-4 w-4" />
+                                              </Button>
+                                            )
+                                          )}
+                                        </div>
+                                      </TableCell>
+                                    )}
+                                  </TableRow>
+                                ))
+                              )}
+                            </TableBody>
+                          </Table>
+                        </div>
+                      ) : (
+                        // 기존 renderContentRow 사용
+                        renderContentRow(contentRow, card, grouping?.aggregations || [], handleRowDataChange)
+                      )}
                     </div>
                   ))
                 ) : (
@@ -764,8 +2137,11 @@ export function RepeatScreenModalComponent({
                                     key={`${row._rowId}-${col.id}`}
                                     className={cn("text-sm", col.align && `text-${col.align}`)}
                                   >
-                                    {renderTableCell(col, row, (value) =>
-                                      handleRowDataChange(card._cardId, row._rowId, col.field, value)
+                                    {renderTableCell(
+                                      col, 
+                                      row, 
+                                      (value) => handleRowDataChange(card._cardId, row._rowId, col.field, value),
+                                      row._isNew || row._isEditing
                                     )}
                                   </TableCell>
                                 ))}
@@ -782,20 +2158,74 @@ export function RepeatScreenModalComponent({
           ))}
         </div>
 
-        {/* 저장 버튼 */}
-        {groupedCardsData.length > 0 && (
-          <div className="flex justify-end gap-2">
-            <Button onClick={handleSaveAll} disabled={isSaving || !hasDirtyData} className="gap-2">
-              {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-              전체 저장
-            </Button>
+        {/* 🆕 v3.1: Footer 버튼 영역 */}
+        {footerConfig?.enabled && footerConfig.buttons && footerConfig.buttons.length > 0 ? (
+          <div
+            className={cn(
+              "flex gap-2 pt-4",
+              footerConfig.position === "sticky" && "sticky bottom-0 bg-background py-4 border-t",
+              footerConfig.alignment === "left" && "justify-start",
+              footerConfig.alignment === "center" && "justify-center",
+              footerConfig.alignment === "right" && "justify-end",
+              !footerConfig.alignment && "justify-end"
+            )}
+          >
+            {footerConfig.buttons.map((btn) => (
+              <Button
+                key={btn.id}
+                variant={btn.variant || "default"}
+                disabled={btn.disabled || (btn.action === "save" && (isSaving || !hasDirtyData))}
+                onClick={() => handleFooterButtonClick(btn)}
+                className="gap-2"
+              >
+                {btn.action === "save" && isSaving ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : btn.icon === "save" ? (
+                  <Save className="h-4 w-4" />
+                ) : btn.icon === "x" ? (
+                  <X className="h-4 w-4" />
+                ) : btn.icon === "reset" ? (
+                  <RotateCcw className="h-4 w-4" />
+                ) : null}
+                {btn.label}
+              </Button>
+            ))}
           </div>
-        )}
+        ) : null}
 
         {/* 데이터 없음 */}
         {groupedCardsData.length === 0 && !isLoading && (
           <div className="text-center py-12 text-muted-foreground">표시할 데이터가 없습니다.</div>
         )}
+
+        {/* 🆕 v3.1: 삭제 확인 다이얼로그 */}
+        <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>삭제 확인</AlertDialogTitle>
+              <AlertDialogDescription>
+                이 행을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>취소</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => {
+                  if (pendingDeleteInfo) {
+                    handleDeleteExternalRow(
+                      pendingDeleteInfo.cardId,
+                      pendingDeleteInfo.rowId,
+                      pendingDeleteInfo.contentRowId
+                    );
+                  }
+                }}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                삭제
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
     );
   }
@@ -852,15 +2282,40 @@ export function RepeatScreenModalComponent({
         ))}
       </div>
 
-      {/* 저장 버튼 */}
-      {cardsData.length > 0 && (
-        <div className="flex justify-end gap-2">
-          <Button onClick={handleSaveAll} disabled={isSaving || !hasDirtyData} className="gap-2">
-            {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-            {saveMode === "all" ? "전체 저장" : "저장"}
-          </Button>
+      {/* 🆕 v3.1: Footer 버튼 영역 */}
+      {footerConfig?.enabled && footerConfig.buttons && footerConfig.buttons.length > 0 ? (
+        <div
+          className={cn(
+            "flex gap-2 pt-4",
+            footerConfig.position === "sticky" && "sticky bottom-0 bg-background py-4 border-t",
+            footerConfig.alignment === "left" && "justify-start",
+            footerConfig.alignment === "center" && "justify-center",
+            footerConfig.alignment === "right" && "justify-end",
+            !footerConfig.alignment && "justify-end"
+          )}
+        >
+          {footerConfig.buttons.map((btn) => (
+            <Button
+              key={btn.id}
+              variant={btn.variant || "default"}
+              disabled={btn.disabled || (btn.action === "save" && (isSaving || !hasDirtyData))}
+              onClick={() => handleFooterButtonClick(btn)}
+              className="gap-2"
+            >
+              {btn.action === "save" && isSaving ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : btn.icon === "save" ? (
+                <Save className="h-4 w-4" />
+              ) : btn.icon === "x" ? (
+                <X className="h-4 w-4" />
+              ) : btn.icon === "reset" ? (
+                <RotateCcw className="h-4 w-4" />
+              ) : null}
+              {btn.label}
+            </Button>
+          ))}
         </div>
-      )}
+      ) : null}
 
       {/* 데이터 없음 */}
       {cardsData.length === 0 && !isLoading && (
@@ -1000,8 +2455,11 @@ function renderContentRow(
                       key={`${row._rowId}-${col.id}`}
                       className={cn("text-sm", col.align && `text-${col.align}`)}
                     >
-                      {renderTableCell(col, row, (value) =>
-                        onRowDataChange(card._cardId, row._rowId, col.field, value)
+                      {renderTableCell(
+                        col, 
+                        row, 
+                        (value) => onRowDataChange(card._cardId, row._rowId, col.field, value),
+                        row._isNew || row._isEditing
                       )}
                     </TableCell>
                   ))}
@@ -1275,7 +2733,8 @@ function renderHeaderColumn(
 }
 
 // 테이블 셀 렌더링
-function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (value: any) => void) {
+// 🆕 v3.8: isRowEditable 파라미터 추가 - 행이 편집 가능한 상태인지 (신규 행이거나 수정 모드)
+function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (value: any) => void, isRowEditable?: boolean) {
   const value = row[col.field];
 
   // Badge 타입
@@ -1284,11 +2743,20 @@ function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (va
     return <Badge variant={badgeColor as any}>{value || "-"}</Badge>;
   }
 
+  // 🆕 v3.8: 행 수준 편집 가능 여부 체크
+  // isRowEditable이 false이면 컬럼 설정과 관계없이 읽기 전용
+  const canEdit = col.editable && (isRowEditable !== false);
+
   // 읽기 전용
-  if (!col.editable) {
+  if (!canEdit) {
     if (col.type === "number") {
       return <span>{typeof value === "number" ? value.toLocaleString() : value || "-"}</span>;
     }
+    if (col.type === "date") {
+      // ISO 8601 형식을 표시용으로 변환
+      const displayDate = value ? (typeof value === 'string' && value.includes('T') ? value.split('T')[0] : value) : "-";
+      return <span>{displayDate}</span>;
+    }
     return <span>{value || "-"}</span>;
   }
 
@@ -1312,10 +2780,12 @@ function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (va
         />
       );
     case "date":
+      // ISO 8601 형식('2025-12-02T00:00:00.000Z')을 'YYYY-MM-DD' 형식으로 변환
+      const dateValue = value ? (typeof value === 'string' && value.includes('T') ? value.split('T')[0] : value) : "";
       return (
         <Input
           type="date"
-          value={value || ""}
+          value={dateValue}
           onChange={(e) => onChange(e.target.value)}
           className="h-8 text-sm"
         />
@@ -1367,7 +2837,7 @@ function renderColumn(col: CardColumnConfig, card: CardData, onChange: (value: a
           {col.type === "date" && (
             <Input
               type="date"
-              value={value || ""}
+              value={value ? (typeof value === 'string' && value.includes('T') ? value.split('T')[0] : value) : ""}
               onChange={(e) => onChange(e.target.value)}
               className="h-10 text-sm"
             />
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
index ab8c962d..44ee5ce6 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
@@ -6,17 +6,15 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { Plus, X, GripVertical, Check, ChevronsUpDown, Table, Layers } from "lucide-react";
+import { Plus, X, GripVertical, Check, ChevronsUpDown, Table, Layers, ChevronUp, ChevronDown } from "lucide-react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   RepeatScreenModalProps,
   CardRowConfig,
   CardColumnConfig,
   ColumnSourceConfig,
   ColumnTargetConfig,
-  DataSourceConfig,
   GroupingConfig,
   AggregationConfig,
   TableLayoutConfig,
@@ -84,14 +82,14 @@ function SourceColumnSelector({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="h-6 w-full justify-between text-[10px]"
+          className="h-6 w-full justify-between text-[10px] min-w-0 shrink"
           disabled={!sourceTable || isLoading}
         >
           <span className="truncate">{isLoading ? "..." : displayText}</span>
           <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="p-0 max-h-[200px] w-[200px]" align="start">
+      <PopoverContent className="p-0 max-h-[200px]" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
         <Command>
           <CommandInput placeholder="검색..." className="text-[10px] h-7" />
           <CommandList className="max-h-[160px] overflow-y-auto">
@@ -315,75 +313,583 @@ function CardTitleEditor({
   );
 }
 
+// 🆕 v3.2: 시각적 수식 빌더
+interface FormulaToken {
+  id: string;
+  type: "aggregation" | "column" | "operator" | "number";
+  // aggregation: 이전 집계 결과 참조
+  aggregationField?: string;
+  // column: 테이블 컬럼 집계
+  table?: string;
+  column?: string;
+  aggFunction?: "SUM" | "COUNT" | "AVG" | "MIN" | "MAX" | "SUM_EXT" | "COUNT_EXT" | "AVG_EXT" | "MIN_EXT" | "MAX_EXT" | "VALUE";
+  isExternal?: boolean;
+  // operator: 연산자
+  operator?: "+" | "-" | "*" | "/" | "(" | ")";
+  // number: 숫자
+  value?: number;
+}
+
+function FormulaBuilder({
+  formula,
+  sourceTable,
+  allTables,
+  referenceableAggregations,
+  onChange,
+}: {
+  formula: string;
+  sourceTable: string;
+  allTables: { tableName: string; displayName?: string }[];
+  referenceableAggregations: AggregationConfig[];
+  onChange: (formula: string) => void;
+}) {
+  // 수식 토큰 상태
+  const [tokens, setTokens] = useState<FormulaToken[]>([]);
+  
+  // 새 토큰 추가용 상태
+  const [newTokenType, setNewTokenType] = useState<"aggregation" | "column">("aggregation");
+  const [newTokenTable, setNewTokenTable] = useState(sourceTable || "");
+  const [newTokenColumn, setNewTokenColumn] = useState("");
+  const [newTokenAggFunction, setNewTokenAggFunction] = useState<FormulaToken["aggFunction"]>("SUM");
+  const [newTokenAggField, setNewTokenAggField] = useState("");
+
+  // formula 문자열에서 토큰 파싱 (초기화용)
+  useEffect(() => {
+    if (!formula) {
+      setTokens([]);
+      return;
+    }
+    
+    // 간단한 파싱: 기존 formula가 있으면 토큰으로 변환 시도
+    const parsed = parseFormulaToTokens(formula, sourceTable);
+    if (parsed.length > 0) {
+      setTokens(parsed);
+    }
+  }, []);
+
+  // 토큰을 formula 문자열로 변환
+  const tokensToFormula = (tokenList: FormulaToken[]): string => {
+    return tokenList.map((token) => {
+      switch (token.type) {
+        case "aggregation":
+          return `{${token.aggregationField}}`;
+        case "column":
+          if (token.aggFunction === "VALUE") {
+            return `{${token.column}}`;
+          }
+          return `${token.aggFunction}({${token.column}})`;
+        case "operator":
+          return ` ${token.operator} `;
+        case "number":
+          return String(token.value);
+        default:
+          return "";
+      }
+    }).join("");
+  };
+
+  // formula 문자열에서 토큰 파싱 (간단한 버전)
+  const parseFormulaToTokens = (formulaStr: string, defaultTable: string): FormulaToken[] => {
+    const result: FormulaToken[] = [];
+    // 간단한 파싱 - 복잡한 경우는 수동 입력 모드로 전환
+    // 이 함수는 기존 formula가 있을 때 최대한 파싱 시도
+    const parts = formulaStr.split(/(\s*[+\-*/()]\s*)/);
+    
+    for (const part of parts) {
+      const trimmed = part.trim();
+      if (!trimmed) continue;
+      
+      // 연산자
+      if (["+", "-", "*", "/", "(", ")"].includes(trimmed)) {
+        result.push({
+          id: `op-${Date.now()}-${Math.random()}`,
+          type: "operator",
+          operator: trimmed as FormulaToken["operator"],
+        });
+        continue;
+      }
+      
+      // 집계 함수: SUM({column}), SUM_EXT({column})
+      const aggMatch = trimmed.match(/^(SUM|COUNT|AVG|MIN|MAX)(_EXT)?\(\{(\w+)\}\)$/);
+      if (aggMatch) {
+        result.push({
+          id: `col-${Date.now()}-${Math.random()}`,
+          type: "column",
+          table: aggMatch[2] ? "" : defaultTable, // _EXT면 외부 테이블
+          column: aggMatch[3],
+          aggFunction: (aggMatch[1] + (aggMatch[2] || "")) as FormulaToken["aggFunction"],
+          isExternal: !!aggMatch[2],
+        });
+        continue;
+      }
+      
+      // 필드 참조: {fieldName}
+      const fieldMatch = trimmed.match(/^\{(\w+)\}$/);
+      if (fieldMatch) {
+        result.push({
+          id: `agg-${Date.now()}-${Math.random()}`,
+          type: "aggregation",
+          aggregationField: fieldMatch[1],
+        });
+        continue;
+      }
+      
+      // 숫자
+      const num = parseFloat(trimmed);
+      if (!isNaN(num)) {
+        result.push({
+          id: `num-${Date.now()}-${Math.random()}`,
+          type: "number",
+          value: num,
+        });
+      }
+    }
+    
+    return result;
+  };
+
+  // 토큰 추가
+  const addToken = (token: FormulaToken) => {
+    const newTokens = [...tokens, token];
+    setTokens(newTokens);
+    onChange(tokensToFormula(newTokens));
+  };
+
+  // 토큰 삭제
+  const removeToken = (tokenId: string) => {
+    const newTokens = tokens.filter((t) => t.id !== tokenId);
+    setTokens(newTokens);
+    onChange(tokensToFormula(newTokens));
+  };
+
+  // 연산자 추가
+  const addOperator = (op: FormulaToken["operator"]) => {
+    addToken({
+      id: `op-${Date.now()}`,
+      type: "operator",
+      operator: op,
+    });
+  };
+
+  // 집계 참조 추가
+  const addAggregationRef = () => {
+    if (!newTokenAggField) return;
+    addToken({
+      id: `agg-${Date.now()}`,
+      type: "aggregation",
+      aggregationField: newTokenAggField,
+    });
+    setNewTokenAggField("");
+  };
+
+  // 컬럼 집계 추가
+  const addColumnAgg = () => {
+    if (!newTokenColumn) return;
+    const isExternal = newTokenTable !== sourceTable;
+    let aggFunc = newTokenAggFunction;
+    
+    // 외부 테이블이면 _EXT 붙이기
+    if (isExternal && aggFunc && !aggFunc.endsWith("_EXT") && aggFunc !== "VALUE") {
+      aggFunc = (aggFunc + "_EXT") as FormulaToken["aggFunction"];
+    }
+    
+    addToken({
+      id: `col-${Date.now()}`,
+      type: "column",
+      table: newTokenTable,
+      column: newTokenColumn,
+      aggFunction: aggFunc,
+      isExternal,
+    });
+    setNewTokenColumn("");
+  };
+
+  // 토큰 표시 텍스트
+  const getTokenDisplay = (token: FormulaToken): string => {
+    switch (token.type) {
+      case "aggregation":
+        const refAgg = referenceableAggregations.find((a) => a.resultField === token.aggregationField);
+        return refAgg?.label || token.aggregationField || "";
+      case "column":
+        if (token.aggFunction === "VALUE") {
+          return `${token.column}`;
+        }
+        return `${token.aggFunction}(${token.column})`;
+      case "operator":
+        return token.operator || "";
+      case "number":
+        return String(token.value);
+      default:
+        return "";
+    }
+  };
+
+  // 토큰 배지 색상
+  const getTokenBadgeClass = (token: FormulaToken): string => {
+    switch (token.type) {
+      case "aggregation":
+        return "bg-blue-100 text-blue-700 border-blue-200";
+      case "column":
+        return token.isExternal 
+          ? "bg-orange-100 text-orange-700 border-orange-200" 
+          : "bg-green-100 text-green-700 border-green-200";
+      case "operator":
+        return "bg-gray-100 text-gray-700 border-gray-200";
+      case "number":
+        return "bg-purple-100 text-purple-700 border-purple-200";
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <div className="space-y-2 overflow-hidden min-w-0">
+      {/* 현재 수식 표시 */}
+      <div className="space-y-1 min-w-0">
+        <Label className="text-[9px]">수식</Label>
+        <div className="min-h-[32px] p-1.5 bg-muted/50 rounded border border-dashed flex flex-wrap gap-1 items-center overflow-hidden">
+          {tokens.length === 0 ? (
+            <span className="text-[9px] text-muted-foreground">아래에서 요소를 추가하세요</span>
+          ) : (
+            tokens.map((token) => (
+              <Badge
+                key={token.id}
+                variant="outline"
+                className={cn(
+                  "text-[9px] px-1.5 py-0.5 cursor-pointer hover:opacity-70 flex items-center gap-0.5",
+                  getTokenBadgeClass(token)
+                )}
+                onClick={() => removeToken(token.id)}
+                title="클릭하여 삭제"
+              >
+                {getTokenDisplay(token)}
+                <X className="h-2 w-2" />
+              </Badge>
+            ))
+          )}
+        </div>
+        {/* 생성된 수식 미리보기 */}
+        {tokens.length > 0 && (
+          <p className="text-[8px] font-mono text-muted-foreground bg-muted/30 px-1.5 py-0.5 rounded">
+            {tokensToFormula(tokens)}
+          </p>
+        )}
+      </div>
+
+      {/* 연산자 버튼 */}
+      <div className="space-y-1">
+        <Label className="text-[9px]">연산자</Label>
+        <div className="flex gap-1">
+          {["+", "-", "*", "/", "(", ")"].map((op) => (
+            <Button
+              key={op}
+              size="sm"
+              variant="outline"
+              onClick={() => addOperator(op as FormulaToken["operator"])}
+              className="h-6 w-6 p-0 text-[10px] font-mono"
+            >
+              {op}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* 집계 참조 추가 */}
+      {referenceableAggregations.length > 0 && (
+        <div className="space-y-2 p-2 bg-blue-50 dark:bg-blue-950 rounded border border-blue-200 dark:border-blue-800 overflow-hidden min-w-0">
+          <Label className="text-[9px] text-blue-700 dark:text-blue-300">이전 집계 참조</Label>
+          <div className="space-y-1">
+            <span className="text-[8px] text-muted-foreground">참조할 집계 선택</span>
+            <div className="flex gap-1">
+              <Select value={newTokenAggField} onValueChange={setNewTokenAggField}>
+                <SelectTrigger className="h-6 text-[10px] flex-1">
+                  <SelectValue placeholder="집계 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {referenceableAggregations.map((agg) => (
+                    <SelectItem key={agg.resultField} value={agg.resultField} className="text-[10px]">
+                      {agg.label || agg.resultField}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={addAggregationRef}
+                disabled={!newTokenAggField}
+                className="h-6 text-[9px] px-3 shrink-0"
+              >
+                <Plus className="h-3 w-3 mr-1" />
+                추가
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 테이블 컬럼 집계 추가 */}
+      <div className="space-y-2 p-2 bg-green-50 dark:bg-green-950 rounded border border-green-200 dark:border-green-800 overflow-hidden min-w-0">
+        <Label className="text-[9px] text-green-700 dark:text-green-300">테이블 컬럼 집계</Label>
+        
+        {/* 테이블 선택 */}
+        <div className="space-y-1">
+          <span className="text-[8px] text-muted-foreground">테이블</span>
+          <Select value={newTokenTable} onValueChange={(v) => { setNewTokenTable(v); setNewTokenColumn(""); }}>
+            <SelectTrigger className="h-6 text-[10px] w-full">
+              <SelectValue placeholder="테이블 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              {sourceTable && (
+                <SelectItem value={sourceTable} className="text-[10px]">
+                  {sourceTable} (기본)
+                </SelectItem>
+              )}
+              {allTables
+                .filter((t) => t.tableName !== sourceTable)
+                .map((t) => (
+                  <SelectItem key={t.tableName} value={t.tableName} className="text-[10px]">
+                    {t.displayName || t.tableName} (외부)
+                  </SelectItem>
+                ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* 컬럼 선택 */}
+        <div className="space-y-1">
+          <span className="text-[8px] text-muted-foreground">컬럼</span>
+          <SourceColumnSelector
+            sourceTable={newTokenTable}
+            value={newTokenColumn}
+            onChange={setNewTokenColumn}
+            placeholder="컬럼 선택"
+          />
+        </div>
+
+        {/* 집계 함수 및 추가 버튼 */}
+        <div className="flex gap-1">
+          <div className="flex-1 space-y-1">
+            <span className="text-[8px] text-muted-foreground">집계 함수</span>
+            <Select value={newTokenAggFunction} onValueChange={(v) => setNewTokenAggFunction(v as FormulaToken["aggFunction"])}>
+              <SelectTrigger className="h-6 text-[10px] w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="SUM" className="text-[10px]">SUM (합계)</SelectItem>
+                <SelectItem value="COUNT" className="text-[10px]">COUNT (개수)</SelectItem>
+                <SelectItem value="AVG" className="text-[10px]">AVG (평균)</SelectItem>
+                <SelectItem value="MIN" className="text-[10px]">MIN (최소)</SelectItem>
+                <SelectItem value="MAX" className="text-[10px]">MAX (최대)</SelectItem>
+                <SelectItem value="VALUE" className="text-[10px]">VALUE (값)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-end">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={addColumnAgg}
+              disabled={!newTokenColumn}
+              className="h-6 text-[9px] px-3"
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              추가
+            </Button>
+          </div>
+        </div>
+        
+        {newTokenTable !== sourceTable && newTokenTable && (
+          <p className="text-[8px] text-orange-600">외부 테이블: _EXT 함수 사용</p>
+        )}
+      </div>
+
+      {/* 수동 입력 모드 토글 */}
+      <details className="text-[9px]">
+        <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
+          수동 입력 모드
+        </summary>
+        <div className="mt-1 space-y-1">
+          <Input
+            value={tokensToFormula(tokens)}
+            onChange={(e) => {
+              const parsed = parseFormulaToTokens(e.target.value, sourceTable);
+              setTokens(parsed);
+              onChange(e.target.value);
+            }}
+            placeholder="{total_balance} - SUM_EXT({plan_qty})"
+            className="h-6 text-[10px] font-mono"
+          />
+          <p className="text-[8px] text-muted-foreground">
+            직접 수식 입력. 예: {"{"}resultField{"}"}, SUM({"{"}column{"}"}), SUM_EXT({"{"}column{"}"})
+          </p>
+        </div>
+      </details>
+    </div>
+  );
+}
+
 // 집계 설정 아이템 (로컬 상태 관리로 입력 시 리렌더링 방지)
+// 🆕 v3.2: 다중 테이블 및 가상 집계(formula) 지원
 function AggregationConfigItem({
   agg,
   index,
   sourceTable,
+  allTables,
+  existingAggregations,
   onUpdate,
   onRemove,
 }: {
   agg: AggregationConfig;
   index: number;
   sourceTable: string;
+  allTables: { tableName: string; displayName?: string }[];
+  existingAggregations: AggregationConfig[]; // 연산식에서 참조할 수 있는 기존 집계들
   onUpdate: (updates: Partial<AggregationConfig>) => void;
   onRemove: () => void;
 }) {
   const [localLabel, setLocalLabel] = useState(agg.label || "");
   const [localResultField, setLocalResultField] = useState(agg.resultField || "");
+  const [localFormula, setLocalFormula] = useState(agg.formula || "");
 
   // agg 변경 시 로컬 상태 동기화
   useEffect(() => {
     setLocalLabel(agg.label || "");
     setLocalResultField(agg.resultField || "");
-  }, [agg.label, agg.resultField]);
+    setLocalFormula(agg.formula || "");
+  }, [agg.label, agg.resultField, agg.formula]);
+
+  // 현재 집계보다 앞에 정의된 집계들만 참조 가능 (순환 참조 방지)
+  const referenceableAggregations = existingAggregations.slice(0, index);
+
+  // sourceType 기본값 처리
+  const currentSourceType = agg.sourceType || "column";
 
   return (
-    <div className="border rounded p-2 space-y-1.5 bg-background">
+    <div className="border rounded p-2 space-y-1.5 bg-background min-w-0">
       <div className="flex items-center justify-between">
-        <Badge variant="secondary" className="text-[9px] px-1 py-0">
-          집계 {index + 1}
-        </Badge>
+        <div className="flex items-center gap-1 min-w-0">
+          <Badge 
+            variant={currentSourceType === "formula" ? "default" : "secondary"} 
+            className={cn(
+              "text-[9px] px-1 py-0 shrink-0",
+              currentSourceType === "formula" && "bg-purple-100 text-purple-700"
+            )}
+          >
+            {currentSourceType === "formula" ? "가상" : "집계"} {index + 1}
+          </Badge>
+        </div>
         <Button
           size="sm"
           variant="ghost"
           onClick={onRemove}
-          className="h-5 w-5 p-0"
+          className="h-5 w-5 p-0 shrink-0"
         >
           <X className="h-3 w-3" />
         </Button>
       </div>
 
-      <div className="space-y-1">
-        <Label className="text-[9px]">원본 필드</Label>
-        <SourceColumnSelector
-          sourceTable={sourceTable}
-          value={agg.sourceField}
-          onChange={(value) => onUpdate({ sourceField: value })}
-          placeholder="합계할 필드"
-        />
+      {/* 집계 타입 선택 */}
+      <div className="space-y-1 min-w-0">
+        <Label className="text-[9px]">집계 타입</Label>
+        <Select
+          value={currentSourceType}
+          onValueChange={(value) => onUpdate({ sourceType: value as "column" | "formula" })}
+        >
+          <SelectTrigger className="h-6 text-[10px] w-full min-w-0">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="column">컬럼 집계 (SUM, COUNT 등)</SelectItem>
+            <SelectItem value="formula">가상 집계 (연산식)</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
 
-      <div className="flex gap-2">
-        <div className="flex-1 space-y-1 min-w-0">
-          <Label className="text-[9px]">집계 타입</Label>
-          <Select
-            value={agg.type}
-            onValueChange={(value) => onUpdate({ type: value as AggregationConfig["type"] })}
-          >
-            <SelectTrigger className="h-6 text-[10px] w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="sum">합계</SelectItem>
-              <SelectItem value="count">개수</SelectItem>
-              <SelectItem value="avg">평균</SelectItem>
-              <SelectItem value="min">최소</SelectItem>
-              <SelectItem value="max">최대</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
+      {/* === 컬럼 집계 설정 === */}
+      {currentSourceType === "column" && (
+        <>
+          {/* 테이블 선택 */}
+          <div className="space-y-1 min-w-0">
+            <Label className="text-[9px]">테이블</Label>
+            <Select
+              value={agg.sourceTable || sourceTable || ""}
+              onValueChange={(value) => onUpdate({ sourceTable: value, sourceField: "" })}
+            >
+              <SelectTrigger className="h-6 text-[10px] w-full min-w-0">
+                <SelectValue placeholder="테이블 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {/* 기본 테이블 (dataSource) */}
+                {sourceTable && (
+                  <SelectItem value={sourceTable} className="text-[10px]">
+                    {sourceTable} (기본)
+                  </SelectItem>
+                )}
+                {/* 외부 테이블들 */}
+                {allTables
+                  .filter((t) => t.tableName !== sourceTable)
+                  .map((t) => (
+                    <SelectItem key={t.tableName} value={t.tableName} className="text-[10px]">
+                      {t.displayName || t.tableName}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+            <p className="text-[8px] text-muted-foreground">
+              기본 테이블 외 다른 테이블도 선택 가능
+            </p>
+          </div>
 
+          {/* 컬럼 선택 */}
+          <div className="space-y-1 min-w-0">
+            <Label className="text-[9px]">원본 필드</Label>
+            <SourceColumnSelector
+              sourceTable={agg.sourceTable || sourceTable}
+              value={agg.sourceField || ""}
+              onChange={(value) => onUpdate({ sourceField: value })}
+              placeholder="합계할 필드"
+            />
+          </div>
+
+          {/* 집계 함수 */}
+          <div className="space-y-1 min-w-0">
+            <Label className="text-[9px]">집계 함수</Label>
+            <Select
+              value={agg.type || "sum"}
+              onValueChange={(value) => onUpdate({ type: value as AggregationConfig["type"] })}
+            >
+              <SelectTrigger className="h-6 text-[10px] w-full min-w-0">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="sum">합계 (SUM)</SelectItem>
+                <SelectItem value="count">개수 (COUNT)</SelectItem>
+                <SelectItem value="avg">평균 (AVG)</SelectItem>
+                <SelectItem value="min">최소 (MIN)</SelectItem>
+                <SelectItem value="max">최대 (MAX)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </>
+      )}
+
+      {/* === 가상 집계 (연산식) 설정 === */}
+      {currentSourceType === "formula" && (
+        <FormulaBuilder
+          formula={localFormula}
+          sourceTable={sourceTable}
+          allTables={allTables}
+          referenceableAggregations={referenceableAggregations}
+          onChange={(newFormula) => {
+            setLocalFormula(newFormula);
+            onUpdate({ formula: newFormula });
+          }}
+        />
+      )}
+
+      {/* 공통: 라벨 및 결과 필드명 */}
+      <div className="flex gap-2 pt-1 border-t">
         <div className="flex-1 space-y-1 min-w-0">
           <Label className="text-[9px]">라벨</Label>
           <Input
@@ -399,42 +905,213 @@ function AggregationConfigItem({
             className="h-6 text-[10px]"
           />
         </div>
+
+        <div className="flex-1 space-y-1 min-w-0">
+          <Label className="text-[9px]">결과 필드명</Label>
+          <Input
+            value={localResultField}
+            onChange={(e) => setLocalResultField(e.target.value)}
+            onBlur={() => onUpdate({ resultField: localResultField })}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                onUpdate({ resultField: localResultField });
+              }
+            }}
+            placeholder="total_balance_qty"
+            className="h-6 text-[10px] font-mono"
+          />
+        </div>
       </div>
 
-      <div className="space-y-1">
-        <Label className="text-[9px]">결과 필드명</Label>
-        <Input
-          value={localResultField}
-          onChange={(e) => setLocalResultField(e.target.value)}
-          onBlur={() => onUpdate({ resultField: localResultField })}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              onUpdate({ resultField: localResultField });
-            }
-          }}
-          placeholder="total_balance_qty"
-          className="h-6 text-[10px]"
+      {/* 🆕 v3.9: 저장 설정 */}
+      <AggregationSaveConfigSection
+        agg={agg}
+        sourceTable={sourceTable}
+        allTables={allTables}
+        onUpdate={onUpdate}
+      />
+    </div>
+  );
+}
+
+// 🆕 v3.9: 집계 저장 설정 섹션
+function AggregationSaveConfigSection({
+  agg,
+  sourceTable,
+  allTables,
+  onUpdate,
+}: {
+  agg: AggregationConfig;
+  sourceTable: string;
+  allTables: { tableName: string; displayName?: string }[];
+  onUpdate: (updates: Partial<AggregationConfig>) => void;
+}) {
+  const saveConfig = agg.saveConfig || { enabled: false, autoSave: false, targetTable: "", targetColumn: "", joinKey: { sourceField: "", targetField: "" } };
+
+  const updateSaveConfig = (updates: Partial<typeof saveConfig>) => {
+    onUpdate({
+      saveConfig: {
+        ...saveConfig,
+        ...updates,
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-2 pt-2 border-t border-dashed">
+      <div className="flex items-center justify-between">
+        <Label className="text-[9px] font-semibold">연관 테이블 저장</Label>
+        <Switch
+          checked={saveConfig.enabled}
+          onCheckedChange={(checked) => updateSaveConfig({ enabled: checked })}
+          className="scale-[0.6]"
         />
       </div>
+
+      {saveConfig.enabled && (
+        <div className="space-y-2 p-2 bg-blue-50/50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
+          {/* 자동 저장 옵션 */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label className="text-[9px]">자동 저장</Label>
+              <p className="text-[8px] text-muted-foreground">
+                레이아웃에 없어도 저장
+              </p>
+            </div>
+            <Switch
+              checked={saveConfig.autoSave}
+              onCheckedChange={(checked) => updateSaveConfig({ autoSave: checked })}
+              className="scale-[0.6]"
+            />
+          </div>
+
+          {/* 대상 테이블 */}
+          <div className="space-y-1">
+            <Label className="text-[9px]">대상 테이블</Label>
+            <Select
+              value={saveConfig.targetTable}
+              onValueChange={(value) => {
+                updateSaveConfig({ targetTable: value, targetColumn: "" });
+              }}
+            >
+              <SelectTrigger className="h-6 text-[10px]">
+                <SelectValue placeholder="테이블 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {allTables.map((t) => (
+                  <SelectItem key={t.tableName} value={t.tableName} className="text-[10px]">
+                    {t.displayName || t.tableName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 대상 컬럼 */}
+          <div className="space-y-1">
+            <Label className="text-[9px]">대상 컬럼</Label>
+            <SourceColumnSelector
+              sourceTable={saveConfig.targetTable}
+              value={saveConfig.targetColumn}
+              onChange={(value) => updateSaveConfig({ targetColumn: value })}
+              placeholder="컬럼 선택"
+            />
+          </div>
+
+          {/* 조인 키 설정 */}
+          <div className="space-y-2">
+            <Label className="text-[9px]">조인 키</Label>
+            <div className="space-y-1.5">
+              <div className="space-y-0.5">
+                <span className="text-[8px] text-muted-foreground">카드 키 (현재 카드 데이터)</span>
+                <SourceColumnSelector
+                  sourceTable={sourceTable}
+                  value={saveConfig.joinKey?.sourceField || ""}
+                  onChange={(value) =>
+                    updateSaveConfig({
+                      joinKey: { ...saveConfig.joinKey, sourceField: value },
+                    })
+                  }
+                  placeholder="카드 키 선택"
+                />
+              </div>
+              <div className="flex justify-center">
+                <span className="text-[10px] text-muted-foreground">↓</span>
+              </div>
+              <div className="space-y-0.5">
+                <span className="text-[8px] text-muted-foreground">대상 키 (업데이트할 레코드 식별)</span>
+                <SourceColumnSelector
+                  sourceTable={saveConfig.targetTable}
+                  value={saveConfig.joinKey?.targetField || ""}
+                  onChange={(value) =>
+                    updateSaveConfig({
+                      joinKey: { ...saveConfig.joinKey, targetField: value },
+                    })
+                  }
+                  placeholder="대상 키 선택"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* 설정 요약 */}
+          {saveConfig.targetTable && saveConfig.targetColumn && (
+            <div className="p-1.5 bg-white/50 dark:bg-black/20 rounded text-[9px] space-y-1">
+              <div>
+                <span className="font-medium">저장 경로:</span>
+                {saveConfig.autoSave && (
+                  <Badge variant="secondary" className="ml-1 text-[8px] px-1 py-0">
+                    자동
+                  </Badge>
+                )}
+              </div>
+              <div className="font-mono text-blue-600 dark:text-blue-400 break-all">
+                {saveConfig.targetTable}.{saveConfig.targetColumn}
+              </div>
+              {saveConfig.joinKey?.sourceField && saveConfig.joinKey?.targetField && (
+                <div className="text-[8px] text-muted-foreground">
+                  조인: {saveConfig.joinKey.sourceField} → {saveConfig.joinKey.targetField}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }
 
 // 테이블 선택기 (Combobox) - 240px 최적화
-function TableSelector({ value, onChange }: { value: string; onChange: (value: string) => void }) {
+function TableSelector({
+  value,
+  onChange,
+  allTables,
+  placeholder = "테이블 선택",
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  allTables?: { tableName: string; displayName?: string }[];
+  placeholder?: string;
+}) {
   const [tables, setTables] = useState<{ tableName: string; displayName?: string }[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
+    // allTables가 전달되면 API 호출 없이 사용
+    if (allTables && allTables.length > 0) {
+      setTables(allTables);
+      return;
+    }
+
     const loadTables = async () => {
       setIsLoading(true);
       try {
         const response = await tableManagementApi.getTableList();
         if (response.success && response.data) {
           // API 응답이 배열인 경우와 객체인 경우 모두 처리
-          const tableData = Array.isArray(response.data) 
-            ? response.data 
+          const tableData = Array.isArray(response.data)
+            ? response.data
             : (response.data as any).tables || response.data || [];
           setTables(tableData);
         }
@@ -446,10 +1123,10 @@ function TableSelector({ value, onChange }: { value: string; onChange: (value: s
       }
     };
     loadTables();
-  }, []);
+  }, [allTables]);
 
   const selectedTable = (tables || []).find((t) => t.tableName === value);
-  const displayText = selectedTable ? selectedTable.tableName : "테이블 선택";
+  const displayText = selectedTable ? selectedTable.tableName : placeholder;
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -587,10 +1264,19 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
     });
   };
 
-  const addAggregation = () => {
+  const addAggregation = (sourceType: "column" | "formula" = "column") => {
     const newAgg: AggregationConfig = {
-      sourceField: "",
-      type: "sum",
+      sourceType,
+      // column 타입 기본값
+      ...(sourceType === "column" && {
+        sourceTable: localConfig.dataSource?.sourceTable || "",
+        sourceField: "",
+        type: "sum" as const,
+      }),
+      // formula 타입 기본값
+      ...(sourceType === "formula" && {
+        formula: "",
+      }),
       resultField: `agg_${Date.now()}`,
       label: "",
     };
@@ -766,6 +1452,7 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
   const addContentRowAggField = (rowIndex: number) => {
     const newRows = [...(localConfig.contentRows || [])];
     const newAggField: AggregationDisplayConfig = {
+      sourceType: "aggregation",
       aggregationResultField: "",
       label: "",
     };
@@ -790,6 +1477,20 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
     updateConfig({ contentRows: newRows });
   };
 
+  // 🆕 집계 필드 순서 변경
+  const moveContentRowAggField = (rowIndex: number, fieldIndex: number, direction: "up" | "down") => {
+    const newRows = [...(localConfig.contentRows || [])];
+    const fields = newRows[rowIndex].aggregationFields;
+    if (!fields) return;
+
+    const newIndex = direction === "up" ? fieldIndex - 1 : fieldIndex + 1;
+    if (newIndex < 0 || newIndex >= fields.length) return;
+
+    // 배열 요소 교환
+    [fields[fieldIndex], fields[newIndex]] = [fields[newIndex], fields[fieldIndex]];
+    updateConfig({ contentRows: newRows });
+  };
+
   // contentRow 내 테이블 컬럼 관리 (table 타입)
   const addContentRowTableColumn = (rowIndex: number) => {
     const newRows = [...(localConfig.contentRows || [])];
@@ -818,6 +1519,23 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
     updateConfig({ contentRows: newRows });
   };
 
+  // 테이블 컬럼 순서 변경
+  const moveContentRowTableColumn = (rowIndex: number, colIndex: number, direction: "up" | "down") => {
+    const newRows = [...(localConfig.contentRows || [])];
+    const columns = newRows[rowIndex].tableColumns;
+    if (!columns) return;
+
+    const newIndex = direction === "up" ? colIndex - 1 : colIndex + 1;
+    if (newIndex < 0 || newIndex >= columns.length) return;
+
+    // 컬럼 위치 교환
+    const newColumns = [...columns];
+    [newColumns[colIndex], newColumns[newIndex]] = [newColumns[newIndex], newColumns[colIndex]];
+    newRows[rowIndex].tableColumns = newColumns;
+
+    updateConfig({ contentRows: newRows });
+  };
+
   // === (레거시) Simple 모드 행/컬럼 관련 함수 ===
   const addRow = () => {
     const newRow: CardRowConfig = {
@@ -874,10 +1592,10 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
   };
 
   return (
-    <ScrollArea className="h-[calc(100vh-200px)]">
-      <div className="space-y-4 p-2">
+    <div className="h-[calc(100vh-200px)] overflow-y-auto overflow-x-hidden">
+      <div className="space-y-4 p-2 w-full">
         <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-          <TabsList className="grid w-full grid-cols-4 h-auto p-1">
+          <TabsList className="grid w-full grid-cols-5 h-auto p-1">
             <TabsTrigger value="basic" className="text-[9px] px-1 py-1">
               기본
             </TabsTrigger>
@@ -1014,8 +1732,8 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
           </TabsContent>
 
           {/* === 그룹핑 설정 탭 === */}
-          <TabsContent value="grouping" className="space-y-3 mt-3">
-            <div className="space-y-3 border rounded-lg p-3 bg-card">
+          <TabsContent value="grouping" className="space-y-3 mt-3 overflow-hidden">
+            <div className="space-y-3 border rounded-lg p-3 bg-card overflow-hidden">
               <div className="flex items-center justify-between">
                 <h3 className="text-xs font-semibold">그룹핑</h3>
                 <Switch
@@ -1039,21 +1757,45 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
                   </div>
 
                   {/* 집계 설정 */}
-                  <div className="space-y-2 pt-2 border-t">
+                  <div className="space-y-2 pt-2 border-t overflow-hidden">
                     <div className="flex items-center justify-between">
                       <Label className="text-[10px] font-semibold">집계 설정</Label>
-                      <Button size="sm" variant="outline" onClick={addAggregation} className="h-5 text-[9px] px-1">
-                        <Plus className="h-2 w-2 mr-0.5" />
-                        추가
-                      </Button>
+                      <div className="flex gap-1">
+                        <Button 
+                          size="sm" 
+                          variant="outline" 
+                          onClick={() => addAggregation("column")} 
+                          className="h-5 text-[9px] px-1"
+                          title="컬럼 집계 추가"
+                        >
+                          <Plus className="h-2 w-2 mr-0.5" />
+                          컬럼
+                        </Button>
+                        <Button 
+                          size="sm" 
+                          variant="outline" 
+                          onClick={() => addAggregation("formula")} 
+                          className="h-5 text-[9px] px-1 bg-purple-50 hover:bg-purple-100 border-purple-200"
+                          title="가상 집계 (연산식) 추가"
+                        >
+                          <Plus className="h-2 w-2 mr-0.5" />
+                          가상
+                        </Button>
+                      </div>
                     </div>
 
+                    <p className="text-[8px] text-muted-foreground">
+                      컬럼 집계: 테이블 컬럼의 합계/개수 등 | 가상 집계: 연산식으로 계산
+                    </p>
+
                     {(localConfig.grouping?.aggregations || []).map((agg, index) => (
                       <AggregationConfigItem
                         key={`agg-${index}`}
                         agg={agg}
                         index={index}
                         sourceTable={localConfig.dataSource?.sourceTable || ""}
+                        allTables={allTables}
+                        existingAggregations={localConfig.grouping?.aggregations || []}
                         onUpdate={(updates) => updateAggregation(index, updates)}
                         onRemove={() => removeAggregation(index)}
                       />
@@ -1139,9 +1881,11 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
                       onAddAggField={() => addContentRowAggField(rowIndex)}
                       onRemoveAggField={(fieldIndex) => removeContentRowAggField(rowIndex, fieldIndex)}
                       onUpdateAggField={(fieldIndex, updates) => updateContentRowAggField(rowIndex, fieldIndex, updates)}
+                      onMoveAggField={(fieldIndex, direction) => moveContentRowAggField(rowIndex, fieldIndex, direction)}
                       onAddTableColumn={() => addContentRowTableColumn(rowIndex)}
                       onRemoveTableColumn={(colIndex) => removeContentRowTableColumn(rowIndex, colIndex)}
                       onUpdateTableColumn={(colIndex, updates) => updateContentRowTableColumn(rowIndex, colIndex, updates)}
+                      onMoveTableColumn={(colIndex, direction) => moveContentRowTableColumn(rowIndex, colIndex, direction)}
                     />
                   ))}
                 </div>
@@ -1155,9 +1899,10 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
               )}
             </div>
           </TabsContent>
+
         </Tabs>
       </div>
-    </ScrollArea>
+    </div>
   );
 }
 
@@ -1177,9 +1922,11 @@ function ContentRowConfigSection({
   onAddAggField,
   onRemoveAggField,
   onUpdateAggField,
+  onMoveAggField,
   onAddTableColumn,
   onRemoveTableColumn,
   onUpdateTableColumn,
+  onMoveTableColumn,
 }: {
   row: CardContentRowConfig;
   rowIndex: number;
@@ -1195,9 +1942,11 @@ function ContentRowConfigSection({
   onAddAggField: () => void;
   onRemoveAggField: (fieldIndex: number) => void;
   onUpdateAggField: (fieldIndex: number, updates: Partial<AggregationDisplayConfig>) => void;
+  onMoveAggField: (fieldIndex: number, direction: "up" | "down") => void;
   onAddTableColumn: () => void;
   onRemoveTableColumn: (colIndex: number) => void;
   onUpdateTableColumn: (colIndex: number, updates: Partial<TableColumnConfig>) => void;
+  onMoveTableColumn?: (colIndex: number, direction: "up" | "down") => void;
 }) {
   // 로컬 상태로 Input 필드 관리 (타이핑 시 리렌더링 방지)
   const [localTableTitle, setLocalTableTitle] = useState(row.tableTitle || "");
@@ -1397,9 +2146,34 @@ function ContentRowConfigSection({
             {(row.aggregationFields || []).map((field, fieldIndex) => (
               <div key={fieldIndex} className="border rounded p-2 space-y-1.5 bg-background">
                 <div className="flex items-center justify-between">
-                  <Badge variant="secondary" className="text-[9px] px-1 py-0">
-                    집계 {fieldIndex + 1}
-                  </Badge>
+                  <div className="flex items-center gap-1">
+                    {/* 순서 변경 버튼 */}
+                    <div className="flex flex-col">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => onMoveAggField(fieldIndex, "up")}
+                        disabled={fieldIndex === 0}
+                        className="h-3 w-5 p-0"
+                        title="위로 이동"
+                      >
+                        <ChevronUp className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => onMoveAggField(fieldIndex, "down")}
+                        disabled={fieldIndex === (row.aggregationFields?.length || 0) - 1}
+                        className="h-3 w-5 p-0"
+                        title="아래로 이동"
+                      >
+                        <ChevronDown className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    <Badge variant="secondary" className="text-[9px] px-1 py-0">
+                      집계 {fieldIndex + 1}
+                    </Badge>
+                  </div>
                   <Button size="sm" variant="ghost" onClick={() => onRemoveAggField(fieldIndex)} className="h-5 w-5 p-0">
                     <X className="h-3 w-3" />
                   </Button>
@@ -1507,6 +2281,514 @@ function ContentRowConfigSection({
             </div>
           </div>
 
+          {/* 외부 테이블 데이터 소스 설정 */}
+          <div className="space-y-2 p-2 bg-blue-100/50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={row.tableDataSource?.enabled || false}
+                onCheckedChange={(checked) =>
+                  onUpdateRow({
+                    tableDataSource: checked
+                      ? { enabled: true, sourceTable: "", joinConditions: [] }
+                      : undefined,
+                  })
+                }
+                className="scale-[0.6]"
+              />
+              <Label className="text-[9px] font-semibold">외부 테이블 데이터 소스</Label>
+            </div>
+
+            {row.tableDataSource?.enabled && (
+              <div className="space-y-2 pl-2">
+                <div className="space-y-1">
+                  <Label className="text-[9px]">소스 테이블</Label>
+                  <Select
+                    value={row.tableDataSource.sourceTable || ""}
+                    onValueChange={(value) =>
+                      onUpdateRow({
+                        tableDataSource: { ...row.tableDataSource!, sourceTable: value },
+                      })
+                    }
+                  >
+                    <SelectTrigger className="h-6 text-[10px]">
+                      <SelectValue placeholder="테이블 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {allTables.map((t) => (
+                        <SelectItem key={t.tableName} value={t.tableName} className="text-[10px]">
+                          {t.displayName || t.tableName}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label className="text-[9px]">조인 조건</Label>
+                  <div className="space-y-1">
+                    <div className="space-y-0.5">
+                      <span className="text-[8px] text-muted-foreground">외부 테이블 키</span>
+                      <SourceColumnSelector
+                        sourceTable={row.tableDataSource.sourceTable}
+                        value={row.tableDataSource.joinConditions?.[0]?.sourceKey || ""}
+                        onChange={(value) =>
+                          onUpdateRow({
+                            tableDataSource: {
+                              ...row.tableDataSource!,
+                              joinConditions: [
+                                {
+                                  ...row.tableDataSource?.joinConditions?.[0],
+                                  sourceKey: value,
+                                  referenceKey: row.tableDataSource?.joinConditions?.[0]?.referenceKey || "",
+                                },
+                              ],
+                            },
+                          })
+                        }
+                        placeholder="키 선택"
+                      />
+                    </div>
+                    <div className="space-y-0.5">
+                      <span className="text-[8px] text-muted-foreground">카드 데이터 키</span>
+                      <SourceColumnSelector
+                        sourceTable={dataSourceTable}
+                        value={row.tableDataSource.joinConditions?.[0]?.referenceKey || ""}
+                        onChange={(value) =>
+                          onUpdateRow({
+                            tableDataSource: {
+                              ...row.tableDataSource!,
+                              joinConditions: [
+                                {
+                                  ...row.tableDataSource?.joinConditions?.[0],
+                                  sourceKey: row.tableDataSource?.joinConditions?.[0]?.sourceKey || "",
+                                  referenceKey: value,
+                                },
+                              ],
+                            },
+                          })
+                        }
+                        placeholder="키 선택"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <div className="space-y-1">
+                    <Label className="text-[9px]">정렬 컬럼</Label>
+                    <SourceColumnSelector
+                      sourceTable={row.tableDataSource.sourceTable}
+                      value={row.tableDataSource.orderBy?.column || ""}
+                      onChange={(value) =>
+                        onUpdateRow({
+                          tableDataSource: {
+                            ...row.tableDataSource!,
+                            orderBy: value ? { column: value, direction: row.tableDataSource?.orderBy?.direction || "desc" } : undefined,
+                          },
+                        })
+                      }
+                      placeholder="선택"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[9px]">정렬 방향</Label>
+                    <Select
+                      value={row.tableDataSource.orderBy?.direction || "desc"}
+                      onValueChange={(value) =>
+                        onUpdateRow({
+                          tableDataSource: {
+                            ...row.tableDataSource!,
+                            orderBy: row.tableDataSource?.orderBy?.column
+                              ? { ...row.tableDataSource.orderBy, direction: value as "asc" | "desc" }
+                              : undefined,
+                          },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-6 text-[10px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="asc">오름차순</SelectItem>
+                        <SelectItem value="desc">내림차순</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                {/* 🆕 추가 조인 테이블 설정 */}
+                <div className="space-y-2 pt-2 border-t">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-[9px] font-semibold">조인 테이블 (선택)</Label>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        const newJoin = {
+                          id: `join-${Date.now()}`,
+                          joinTable: "",
+                          joinType: "left" as const,
+                          sourceKey: "",
+                          targetKey: "",
+                        };
+                        onUpdateRow({
+                          tableDataSource: {
+                            ...row.tableDataSource!,
+                            additionalJoins: [...(row.tableDataSource?.additionalJoins || []), newJoin],
+                          },
+                        });
+                      }}
+                      className="h-5 text-[9px] px-1"
+                    >
+                      <Plus className="h-2 w-2 mr-0.5" />
+                      추가
+                    </Button>
+                  </div>
+                  <p className="text-[8px] text-muted-foreground">
+                    소스 테이블에 없는 컬럼을 다른 테이블에서 조인하여 가져옵니다
+                  </p>
+
+                  {(row.tableDataSource?.additionalJoins || []).map((join, joinIndex) => (
+                    <div key={join.id} className="space-y-1.5 p-2 bg-purple-50 dark:bg-purple-900/20 rounded border border-purple-200 dark:border-purple-800">
+                      <div className="flex items-center justify-between">
+                        <Badge variant="secondary" className="text-[8px] px-1 py-0">
+                          조인 {joinIndex + 1}
+                        </Badge>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            const newJoins = [...(row.tableDataSource?.additionalJoins || [])];
+                            newJoins.splice(joinIndex, 1);
+                            onUpdateRow({
+                              tableDataSource: {
+                                ...row.tableDataSource!,
+                                additionalJoins: newJoins,
+                              },
+                            });
+                          }}
+                          className="h-4 w-4 p-0"
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      {/* 조인 테이블 선택 */}
+                      <div className="space-y-1">
+                        <Label className="text-[9px]">조인 테이블</Label>
+                        <TableSelector
+                          allTables={allTables}
+                          value={join.joinTable}
+                          onChange={(value) => {
+                            const newJoins = [...(row.tableDataSource?.additionalJoins || [])];
+                            newJoins[joinIndex] = { ...join, joinTable: value };
+                            onUpdateRow({
+                              tableDataSource: {
+                                ...row.tableDataSource!,
+                                additionalJoins: newJoins,
+                              },
+                            });
+                          }}
+                          placeholder="테이블 선택"
+                        />
+                      </div>
+
+                      {/* 조인 조건 */}
+                      {join.joinTable && (
+                        <div className="space-y-1">
+                          <Label className="text-[9px]">조인 조건</Label>
+                          <div className="flex gap-1 items-center">
+                            <div className="flex-1">
+                              <SourceColumnSelector
+                                sourceTable={row.tableDataSource?.sourceTable || ""}
+                                value={join.sourceKey}
+                                onChange={(value) => {
+                                  const newJoins = [...(row.tableDataSource?.additionalJoins || [])];
+                                  newJoins[joinIndex] = { ...join, sourceKey: value };
+                                  onUpdateRow({
+                                    tableDataSource: {
+                                      ...row.tableDataSource!,
+                                      additionalJoins: newJoins,
+                                    },
+                                  });
+                                }}
+                                placeholder="소스 키"
+                              />
+                            </div>
+                            <span className="text-[9px] text-muted-foreground">=</span>
+                            <div className="flex-1">
+                              <SourceColumnSelector
+                                sourceTable={join.joinTable}
+                                value={join.targetKey}
+                                onChange={(value) => {
+                                  const newJoins = [...(row.tableDataSource?.additionalJoins || [])];
+                                  newJoins[joinIndex] = { ...join, targetKey: value };
+                                  onUpdateRow({
+                                    tableDataSource: {
+                                      ...row.tableDataSource!,
+                                      additionalJoins: newJoins,
+                                    },
+                                  });
+                                }}
+                                placeholder="조인 키"
+                              />
+                            </div>
+                          </div>
+                          <p className="text-[8px] text-muted-foreground">
+                            {row.tableDataSource?.sourceTable}.{join.sourceKey || "?"} = {join.joinTable}.{join.targetKey || "?"}
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+
+                  {(row.tableDataSource?.additionalJoins || []).length === 0 && (
+                    <div className="text-center py-2 text-[8px] text-muted-foreground border border-dashed rounded">
+                      조인 테이블 없음 (소스 테이블 컬럼만 사용)
+                    </div>
+                  )}
+                </div>
+
+                {/* 🆕 v3.4: 필터 설정 */}
+                <div className="space-y-2 pt-2 border-t">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-[9px] font-semibold">데이터 필터 (선택)</Label>
+                    <Switch
+                      checked={row.tableDataSource?.filterConfig?.enabled || false}
+                      onCheckedChange={(checked) =>
+                        onUpdateRow({
+                          tableDataSource: {
+                            ...row.tableDataSource!,
+                            filterConfig: checked
+                              ? {
+                                  enabled: true,
+                                  filterField: "",
+                                  filterType: "equals",
+                                  referenceField: "",
+                                  referenceSource: "representativeData",
+                                }
+                              : undefined,
+                          },
+                        })
+                      }
+                      className="scale-[0.6]"
+                    />
+                  </div>
+                  <p className="text-[8px] text-muted-foreground">
+                    그룹 내 데이터를 특정 조건으로 필터링합니다 (같은 값만 / 다른 값만)
+                  </p>
+
+                  {row.tableDataSource?.filterConfig?.enabled && (
+                    <div className="space-y-2 p-2 bg-amber-50 dark:bg-amber-900/20 rounded border border-amber-200 dark:border-amber-800">
+                      {/* 필터 타입 */}
+                      <div className="space-y-1">
+                        <Label className="text-[9px]">필터 타입</Label>
+                        <Select
+                          value={row.tableDataSource.filterConfig.filterType}
+                          onValueChange={(value) =>
+                            onUpdateRow({
+                              tableDataSource: {
+                                ...row.tableDataSource!,
+                                filterConfig: {
+                                  ...row.tableDataSource!.filterConfig!,
+                                  filterType: value as "equals" | "notEquals",
+                                },
+                              },
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-6 text-[10px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="equals">같은 값만 (equals)</SelectItem>
+                            <SelectItem value="notEquals">다른 값만 (notEquals)</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      {/* 필터 필드 */}
+                      <div className="space-y-1">
+                        <Label className="text-[9px]">필터 필드 (소스 테이블)</Label>
+                        <SourceColumnSelector
+                          sourceTable={row.tableDataSource.sourceTable}
+                          value={row.tableDataSource.filterConfig.filterField}
+                          onChange={(value) =>
+                            onUpdateRow({
+                              tableDataSource: {
+                                ...row.tableDataSource!,
+                                filterConfig: {
+                                  ...row.tableDataSource!.filterConfig!,
+                                  filterField: value,
+                                },
+                              },
+                            })
+                          }
+                          placeholder="필터링할 컬럼 선택"
+                        />
+                        <p className="text-[8px] text-muted-foreground">
+                          이 컬럼 값을 기준으로 필터링합니다
+                        </p>
+                      </div>
+
+                      {/* 비교 기준 소스 */}
+                      <div className="space-y-1">
+                        <Label className="text-[9px]">비교 값 소스</Label>
+                        <Select
+                          value={row.tableDataSource.filterConfig.referenceSource}
+                          onValueChange={(value) =>
+                            onUpdateRow({
+                              tableDataSource: {
+                                ...row.tableDataSource!,
+                                filterConfig: {
+                                  ...row.tableDataSource!.filterConfig!,
+                                  referenceSource: value as "formData" | "representativeData",
+                                },
+                              },
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-6 text-[10px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="representativeData">카드 대표 데이터</SelectItem>
+                            <SelectItem value="formData">폼 데이터 (formData)</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      {/* 비교 기준 필드 */}
+                      <div className="space-y-1">
+                        <Label className="text-[9px]">비교 기준 필드</Label>
+                        {row.tableDataSource.filterConfig.referenceSource === "representativeData" ? (
+                          <SourceColumnSelector
+                            sourceTable={dataSourceTable}
+                            value={row.tableDataSource.filterConfig.referenceField}
+                            onChange={(value) =>
+                              onUpdateRow({
+                                tableDataSource: {
+                                  ...row.tableDataSource!,
+                                  filterConfig: {
+                                    ...row.tableDataSource!.filterConfig!,
+                                    referenceField: value,
+                                  },
+                                },
+                              })
+                            }
+                            placeholder="비교할 필드 선택"
+                          />
+                        ) : (
+                          <Input
+                            value={row.tableDataSource.filterConfig.referenceField}
+                            onChange={(e) =>
+                              onUpdateRow({
+                                tableDataSource: {
+                                  ...row.tableDataSource!,
+                                  filterConfig: {
+                                    ...row.tableDataSource!.filterConfig!,
+                                    referenceField: e.target.value,
+                                  },
+                                },
+                              })
+                            }
+                            placeholder="formData 필드명 (예: selectedOrderNo)"
+                            className="h-6 text-[10px]"
+                          />
+                        )}
+                        <p className="text-[8px] text-muted-foreground">
+                          이 값과 비교하여 필터링합니다
+                        </p>
+                      </div>
+
+                      {/* 필터 조건 미리보기 */}
+                      {row.tableDataSource.filterConfig.filterField && row.tableDataSource.filterConfig.referenceField && (
+                        <div className="p-1.5 bg-amber-100 dark:bg-amber-800/30 rounded text-[9px]">
+                          <span className="font-medium">조건: </span>
+                          {row.tableDataSource.sourceTable}.{row.tableDataSource.filterConfig.filterField}
+                          {row.tableDataSource.filterConfig.filterType === "equals" ? " = " : " != "}
+                          {row.tableDataSource.filterConfig.referenceSource === "representativeData" 
+                            ? `카드.${row.tableDataSource.filterConfig.referenceField}`
+                            : `formData.${row.tableDataSource.filterConfig.referenceField}`
+                          }
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* CRUD 설정 */}
+          <div className="space-y-2 p-2 bg-green-100/50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800">
+            <Label className="text-[9px] font-semibold">CRUD 설정</Label>
+            <div className="flex flex-wrap gap-3">
+              <div className="flex items-center gap-1">
+                <Switch
+                  checked={row.tableCrud?.allowCreate || false}
+                  onCheckedChange={(checked) =>
+                    onUpdateRow({
+                      tableCrud: { ...row.tableCrud, allowCreate: checked, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: row.tableCrud?.allowDelete || false, allowSave: row.tableCrud?.allowSave || false },
+                    })
+                  }
+                  className="scale-[0.5]"
+                />
+                <Label className="text-[9px]">추가</Label>
+              </div>
+              <div className="flex items-center gap-1">
+                <Switch
+                  checked={row.tableCrud?.allowUpdate || false}
+                  onCheckedChange={(checked) =>
+                    onUpdateRow({
+                      tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: checked, allowDelete: row.tableCrud?.allowDelete || false, allowSave: row.tableCrud?.allowSave || false },
+                    })
+                  }
+                  className="scale-[0.5]"
+                />
+                <Label className="text-[9px]">수정</Label>
+              </div>
+              <div className="flex items-center gap-1">
+                <Switch
+                  checked={row.tableCrud?.allowDelete || false}
+                  onCheckedChange={(checked) =>
+                    onUpdateRow({
+                      tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: checked, allowSave: row.tableCrud?.allowSave || false },
+                    })
+                  }
+                  className="scale-[0.5]"
+                />
+                <Label className="text-[9px]">삭제</Label>
+              </div>
+              <div className="flex items-center gap-1">
+                <Switch
+                  checked={row.tableCrud?.allowSave || false}
+                  onCheckedChange={(checked) =>
+                    onUpdateRow({
+                      tableCrud: { ...row.tableCrud, allowCreate: row.tableCrud?.allowCreate || false, allowUpdate: row.tableCrud?.allowUpdate || false, allowDelete: row.tableCrud?.allowDelete || false, allowSave: checked },
+                    })
+                  }
+                  className="scale-[0.5]"
+                />
+                <Label className="text-[9px]">저장</Label>
+              </div>
+            </div>
+            {row.tableCrud?.allowDelete && (
+              <div className="flex items-center gap-1 pl-2">
+                <Switch
+                  checked={row.tableCrud?.deleteConfirm?.enabled !== false}
+                  onCheckedChange={(checked) =>
+                    onUpdateRow({
+                      tableCrud: { ...row.tableCrud!, deleteConfirm: { enabled: checked } },
+                    })
+                  }
+                  className="scale-[0.5]"
+                />
+                <Label className="text-[9px]">삭제 확인 팝업</Label>
+              </div>
+            )}
+          </div>
+
           {/* 테이블 컬럼 목록 */}
           <div className="space-y-2 pl-2 border-l-2 border-blue-300">
             <div className="flex items-center justify-between">
@@ -1523,9 +2805,14 @@ function ContentRowConfigSection({
                 col={col}
                 colIndex={colIndex}
                 allTables={allTables}
-                dataSourceTable={dataSourceTable}
+                dataSourceTable={row.tableDataSource?.enabled ? row.tableDataSource.sourceTable : dataSourceTable}
+                additionalJoins={row.tableDataSource?.additionalJoins || []}
                 onUpdate={(updates) => onUpdateTableColumn(colIndex, updates)}
                 onRemove={() => onRemoveTableColumn(colIndex)}
+                onMoveUp={() => onMoveTableColumn?.(colIndex, "up")}
+                onMoveDown={() => onMoveTableColumn?.(colIndex, "down")}
+                isFirst={colIndex === 0}
+                isLast={colIndex === (row.tableColumns || []).length - 1}
               />
             ))}
 
@@ -1945,20 +3232,42 @@ function TableColumnConfigSection({
   colIndex,
   allTables,
   dataSourceTable,
+  additionalJoins,
   onUpdate,
   onRemove,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
 }: {
   col: TableColumnConfig;
   colIndex: number;
   allTables: { tableName: string; displayName?: string }[];
   dataSourceTable: string;
+  additionalJoins: { id: string; joinTable: string; joinType: string; sourceKey: string; targetKey: string }[];
   onUpdate: (updates: Partial<TableColumnConfig>) => void;
   onRemove: () => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  isFirst?: boolean;
+  isLast?: boolean;
 }) {
   // 로컬 상태로 Input 필드 관리 (타이핑 시 리렌더링 방지)
   const [localLabel, setLocalLabel] = useState(col.label || "");
   const [localWidth, setLocalWidth] = useState(col.width || "");
 
+  // 선택된 테이블 (소스 테이블 또는 조인 테이블)
+  const selectedTable = col.fromTable || dataSourceTable;
+  const selectedJoinId = col.fromJoinId || "";
+
+  // 사용 가능한 테이블 목록 (소스 테이블 + 조인 테이블들)
+  const availableTables = [
+    { id: "", table: dataSourceTable, label: `${dataSourceTable} (소스)` },
+    ...additionalJoins
+      .filter(j => j.joinTable)
+      .map(j => ({ id: j.id, table: j.joinTable, label: `${j.joinTable} (조인)` })),
+  ];
+
   useEffect(() => {
     setLocalLabel(col.label || "");
     setLocalWidth(col.width || "");
@@ -1979,19 +3288,80 @@ function TableColumnConfigSection({
   return (
     <div className="border rounded p-2 space-y-2 bg-background">
       <div className="flex items-center justify-between">
-        <Badge variant="secondary" className="text-[9px] px-1 py-0">
-          컬럼 {colIndex + 1}
-        </Badge>
+        <div className="flex items-center gap-1">
+          {/* 순서 변경 버튼 */}
+          <div className="flex flex-col gap-0.5 mr-1">
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onMoveUp}
+              disabled={isFirst}
+              className="h-3 w-4 p-0"
+              title="위로 이동"
+            >
+              <ChevronUp className="h-2.5 w-2.5" />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onMoveDown}
+              disabled={isLast}
+              className="h-3 w-4 p-0"
+              title="아래로 이동"
+            >
+              <ChevronDown className="h-2.5 w-2.5" />
+            </Button>
+          </div>
+          <Badge variant="secondary" className="text-[9px] px-1 py-0">
+            컬럼 {colIndex + 1}
+          </Badge>
+          {col.fromJoinId && (
+            <Badge variant="outline" className="text-[8px] px-1 py-0 bg-purple-50 text-purple-700 border-purple-200">
+              조인
+            </Badge>
+          )}
+        </div>
         <Button size="sm" variant="ghost" onClick={onRemove} className="h-5 w-5 p-0">
           <X className="h-3 w-3" />
         </Button>
       </div>
 
       <div className="space-y-1.5">
+        {/* 테이블 선택 (조인 테이블이 있을 때만 표시) */}
+        {additionalJoins.length > 0 && (
+          <div className="space-y-1">
+            <Label className="text-[9px]">테이블</Label>
+            <Select
+              value={selectedJoinId ? `join:${selectedJoinId}` : "source"}
+              onValueChange={(value) => {
+                if (value === "source") {
+                  onUpdate({ fromTable: undefined, fromJoinId: undefined, field: "" });
+                } else {
+                  const joinId = value.replace("join:", "");
+                  const join = additionalJoins.find(j => j.id === joinId);
+                  onUpdate({ fromTable: join?.joinTable, fromJoinId: joinId, field: "" });
+                }
+              }}
+            >
+              <SelectTrigger className="h-6 text-[10px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="source">{dataSourceTable} (소스)</SelectItem>
+                {additionalJoins.filter(j => j.joinTable).map(j => (
+                  <SelectItem key={j.id} value={`join:${j.id}`}>
+                    {j.joinTable} (조인)
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
         <div className="space-y-1">
           <Label className="text-[9px]">필드명</Label>
           <SourceColumnSelector
-            sourceTable={dataSourceTable}
+            sourceTable={selectedTable}
             value={col.field}
             onChange={(value) => onUpdate({ field: value })}
             placeholder="필드 선택"
diff --git a/frontend/lib/registry/components/repeat-screen-modal/types.ts b/frontend/lib/registry/components/repeat-screen-modal/types.ts
index b2c8d861..2191818f 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/types.ts
+++ b/frontend/lib/registry/components/repeat-screen-modal/types.ts
@@ -23,6 +23,9 @@ export interface RepeatScreenModalProps {
   // === 🆕 v3: 자유 레이아웃 ===
   contentRows?: CardContentRowConfig[]; // 카드 내부 행들 (각 행마다 타입 선택)
 
+  // === 🆕 v3.1: Footer 버튼 설정 ===
+  footerConfig?: FooterConfig; // Footer 영역 설정
+
   // === (레거시 호환) ===
   cardMode?: "simple" | "withTable"; // @deprecated - contentRows 사용 권장
   cardLayout?: CardRowConfig[]; // @deprecated - contentRows 사용 권장
@@ -33,6 +36,34 @@ export interface RepeatScreenModalProps {
   onChange?: (newData: any[]) => void;
 }
 
+/**
+ * 🆕 v3.1: Footer 설정
+ */
+export interface FooterConfig {
+  enabled: boolean; // Footer 사용 여부
+  buttons?: FooterButtonConfig[]; // Footer 버튼들
+  position?: "sticky" | "static"; // sticky: 하단 고정, static: 컨텐츠 아래
+  alignment?: "left" | "center" | "right"; // 버튼 정렬
+}
+
+/**
+ * 🆕 v3.1: Footer 버튼 설정
+ */
+export interface FooterButtonConfig {
+  id: string; // 버튼 고유 ID
+  label: string; // 버튼 라벨
+  action: "save" | "cancel" | "close" | "reset" | "custom"; // 액션 타입
+  variant?: "default" | "secondary" | "outline" | "destructive" | "ghost"; // 버튼 스타일
+  icon?: string; // 아이콘 (lucide 아이콘명)
+  disabled?: boolean; // 비활성화 여부
+  
+  // custom 액션일 때
+  customAction?: {
+    type: string; // 커스텀 액션 타입
+    config?: Record<string, any>; // 커스텀 설정
+  };
+}
+
 /**
  * 데이터 소스 설정
  */
@@ -79,28 +110,206 @@ export interface CardContentRowConfig {
   tableTitle?: string; // 테이블 제목
   showTableHeader?: boolean; // 테이블 헤더 표시 여부
   tableMaxHeight?: string; // 테이블 최대 높이
+  
+  // 🆕 v3.1: 테이블 외부 데이터 소스
+  tableDataSource?: TableDataSourceConfig; // 외부 테이블에서 데이터 조회
+  
+  // 🆕 v3.1: 테이블 CRUD 설정
+  tableCrud?: TableCrudConfig; // 행 추가/수정/삭제 설정
+}
+
+/**
+ * 🆕 v3.1: 테이블 데이터 소스 설정
+ * 외부 테이블에서 연관 데이터를 조회
+ */
+export interface TableDataSourceConfig {
+  enabled: boolean; // 외부 데이터 소스 사용 여부
+  sourceTable: string; // 조회할 테이블 (예: "shipment_plan")
+  
+  // 조인 설정
+  joinConditions: JoinCondition[]; // 조인 조건 (복합 키 지원)
+  
+  // 🆕 v3.3: 추가 조인 테이블 설정 (소스 테이블에 없는 컬럼 조회)
+  additionalJoins?: AdditionalJoinConfig[];
+  
+  // 🆕 v3.4: 필터 조건 설정 (그룹 내 특정 조건으로 필터링)
+  filterConfig?: TableFilterConfig;
+  
+  // 정렬 설정
+  orderBy?: {
+    column: string; // 정렬 컬럼
+    direction: "asc" | "desc"; // 정렬 방향
+  };
+  
+  // 제한
+  limit?: number; // 최대 행 수
+}
+
+/**
+ * 🆕 v3.4: 테이블 필터 설정
+ * 그룹 내 데이터를 특정 조건으로 필터링
+ */
+export interface TableFilterConfig {
+  enabled: boolean; // 필터 사용 여부
+  filterField: string; // 필터링할 필드 (예: "order_no")
+  filterType: "equals" | "notEquals"; // equals: 같은 값만, notEquals: 다른 값만
+  referenceField: string; // 비교 기준 필드 (formData 또는 카드 대표 데이터에서)
+  referenceSource: "formData" | "representativeData"; // 비교 값 소스
+}
+
+/**
+ * 🆕 v3.3: 추가 조인 테이블 설정
+ * 소스 테이블에서 다른 테이블을 조인하여 컬럼 가져오기
+ */
+export interface AdditionalJoinConfig {
+  id: string; // 조인 설정 고유 ID
+  joinTable: string; // 조인할 테이블 (예: "sales_order_mng")
+  joinType: "left" | "inner"; // 조인 타입
+  sourceKey: string; // 소스 테이블의 조인 키 (예: "sales_order_id")
+  targetKey: string; // 조인 테이블의 키 (예: "id")
+  alias?: string; // 테이블 별칭 (예: "so")
+  selectColumns?: string[]; // 가져올 컬럼 목록 (비어있으면 전체)
+}
+
+/**
+ * 🆕 v3.1: 조인 조건
+ */
+export interface JoinCondition {
+  sourceKey: string; // 외부 테이블의 조인 키 (예: "sales_order_id")
+  referenceKey: string; // 현재 카드 데이터의 참조 키 (예: "id")
+  referenceType?: "card" | "row"; // card: 카드 대표 데이터, row: 각 행 데이터 (기본: card)
+}
+
+/**
+ * 🆕 v3.1: 테이블 CRUD 설정
+ */
+export interface TableCrudConfig {
+  allowCreate: boolean; // 행 추가 허용
+  allowUpdate: boolean; // 행 수정 허용
+  allowDelete: boolean; // 행 삭제 허용
+  
+  // 🆕 v3.5: 테이블 영역 저장 버튼
+  allowSave?: boolean; // 테이블 영역에 저장 버튼 표시
+  saveButtonLabel?: string; // 저장 버튼 라벨 (기본: "저장")
+  
+  // 신규 행 기본값
+  newRowDefaults?: Record<string, string>; // 기본값 (예: { status: "READY", sales_order_id: "{id}" })
+  
+  // 삭제 확인
+  deleteConfirm?: {
+    enabled: boolean; // 삭제 확인 팝업 표시 여부
+    message?: string; // 확인 메시지
+  };
+  
+  // 저장 대상 테이블 (외부 데이터 소스 사용 시)
+  targetTable?: string; // 저장할 테이블 (기본: tableDataSource.sourceTable)
 }
 
 /**
  * 🆕 v3: 집계 표시 설정
  */
 export interface AggregationDisplayConfig {
-  aggregationResultField: string; // 그룹핑 설정의 resultField 참조
+  // 값 소스 타입
+  sourceType: "aggregation" | "formula" | "external" | "externalFormula";
+  
+  // === sourceType: "aggregation" (기존 그룹핑 집계 결과 참조) ===
+  aggregationResultField?: string; // 그룹핑 설정의 resultField 참조
+  
+  // === sourceType: "formula" (컬럼 간 연산) ===
+  formula?: string; // 연산식 (예: "{order_qty} - {ship_qty}")
+  
+  // === sourceType: "external" (외부 테이블 조회) ===
+  externalSource?: ExternalValueSource;
+  
+  // === sourceType: "externalFormula" (외부 테이블 + 연산) ===
+  externalSources?: ExternalValueSource[]; // 여러 외부 소스
+  externalFormula?: string; // 외부 값들을 조합한 연산식 (예: "{inv_qty} + {prod_qty}")
+  
+  // 표시 설정
   label: string; // 표시 라벨
   icon?: string; // 아이콘 (lucide 아이콘명)
   backgroundColor?: string; // 배경색
   textColor?: string; // 텍스트 색상
   fontSize?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl"; // 폰트 크기
+  format?: "number" | "currency" | "percent"; // 숫자 포맷
+  decimalPlaces?: number; // 소수점 자릿수
+}
+
+/**
+ * 🆕 v3.1: 외부 값 소스 설정
+ */
+export interface ExternalValueSource {
+  alias: string; // 연산식에서 사용할 별칭 (예: "inv_qty")
+  sourceTable: string; // 조회할 테이블
+  sourceColumn: string; // 조회할 컬럼
+  aggregationType?: "sum" | "count" | "avg" | "min" | "max" | "first"; // 집계 타입 (기본: first)
+  
+  // 조인 설정 (다단계 조인 지원)
+  joins: ChainedJoinConfig[];
+}
+
+/**
+ * 🆕 v3.1: 다단계 조인 설정
+ */
+export interface ChainedJoinConfig {
+  step: number; // 조인 순서 (1, 2, 3...)
+  sourceTable: string; // 조인할 테이블
+  joinConditions: {
+    sourceKey: string; // 조인 테이블의 키
+    referenceKey: string; // 참조 키 (이전 단계 결과 또는 카드 데이터)
+    referenceFrom?: "card" | "previousStep"; // 참조 소스 (기본: card, step > 1이면 previousStep)
+  }[];
+  selectColumns?: string[]; // 이 단계에서 선택할 컬럼
 }
 
 /**
  * 집계 설정
+ * 🆕 v3.2: 다중 테이블 및 가상 집계(formula) 지원
+ * 🆕 v3.9: 연관 테이블 저장 기능 추가
  */
 export interface AggregationConfig {
-  sourceField: string; // 원본 필드 (예: "balance_qty")
-  type: "sum" | "count" | "avg" | "min" | "max"; // 집계 타입
+  // === 집계 소스 타입 ===
+  sourceType: "column" | "formula"; // column: 테이블 컬럼 집계, formula: 연산식 (가상 집계)
+  
+  // === sourceType: "column" (테이블 컬럼 집계) ===
+  sourceTable?: string; // 집계할 테이블 (기본: dataSource.sourceTable, 외부 테이블도 가능)
+  sourceField?: string; // 원본 필드 (예: "balance_qty")
+  type?: "sum" | "count" | "avg" | "min" | "max"; // 집계 타입
+  
+  // === sourceType: "formula" (가상 집계 - 연산식) ===
+  // 연산식 문법:
+  // - {resultField}: 다른 집계 결과 참조 (예: {total_balance})
+  // - {테이블.컬럼}: 테이블의 컬럼 직접 참조 (예: {sales_order_mng.order_qty})
+  // - SUM({컬럼}): 기본 테이블 행들의 합계
+  // - SUM_EXT({컬럼}): 외부 테이블 행들의 합계 (externalTableData)
+  // - 산술 연산: +, -, *, /, ()
+  formula?: string; // 연산식 (예: "{total_balance} - SUM_EXT({plan_qty})")
+  
+  // === 공통 ===
   resultField: string; // 결과 필드명 (예: "total_balance_qty")
   label: string; // 표시 라벨 (예: "총수주잔량")
+  
+  // === 🆕 v3.9: 저장 설정 ===
+  saveConfig?: AggregationSaveConfig; // 연관 테이블 저장 설정
+}
+
+/**
+ * 🆕 v3.9: 집계 결과 저장 설정
+ * 집계된 값을 다른 테이블에 동기화
+ */
+export interface AggregationSaveConfig {
+  enabled: boolean; // 저장 활성화 여부
+  autoSave: boolean; // 자동 저장 (레이아웃에 없어도 저장)
+  
+  // 저장 대상
+  targetTable: string; // 저장할 테이블 (예: "sales_order_mng")
+  targetColumn: string; // 저장할 컬럼 (예: "plan_qty_total")
+  
+  // 조인 키 (어떤 레코드를 업데이트할지)
+  joinKey: {
+    sourceField: string; // 현재 카드의 조인 키 (예: "id" 또는 "sales_order_id")
+    targetField: string; // 대상 테이블의 키 (예: "id")
+  };
 }
 
 /**
@@ -120,7 +329,7 @@ export interface TableLayoutConfig {
  */
 export interface TableColumnConfig {
   id: string; // 컬럼 고유 ID
-  field: string; // 필드명
+  field: string; // 필드명 (소스 테이블 컬럼 또는 조인 테이블 컬럼)
   label: string; // 헤더 라벨
   type: "text" | "number" | "date" | "select" | "badge"; // 타입
   width?: string; // 너비 (예: "100px", "20%")
@@ -128,6 +337,10 @@ export interface TableColumnConfig {
   editable: boolean; // 편집 가능 여부
   required?: boolean; // 필수 입력 여부
   
+  // 🆕 v3.3: 컬럼 소스 테이블 지정 (조인 테이블 컬럼 사용 시)
+  fromTable?: string; // 컬럼이 속한 테이블 (비어있으면 소스 테이블)
+  fromJoinId?: string; // additionalJoins의 id 참조 (조인 테이블 컬럼일 때)
+  
   // Select 타입 옵션
   selectOptions?: { value: string; label: string }[];
   
diff --git a/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx b/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
index 1baab85c..b8a1d3dc 100644
--- a/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
+++ b/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
@@ -9,11 +9,13 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import { Settings, Layout, ArrowRight, Database, Loader2, Check, ChevronsUpDown } from "lucide-react";
+import { Settings, Layout, ArrowRight, Database, Loader2, Check, ChevronsUpDown, Plus, Trash2, Link2 } from "lucide-react";
 import { screenApi } from "@/lib/api/screen";
+import { getTableColumns } from "@/lib/api/tableManagement";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import type { ParentDataMapping, LinkedFilter } from "@/contexts/SplitPanelContext";
 
 interface ScreenSplitPanelConfigPanelProps {
   config: any;
@@ -29,6 +31,18 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
   const [leftOpen, setLeftOpen] = useState(false);
   const [rightOpen, setRightOpen] = useState(false);
 
+  // 좌측 화면의 테이블 컬럼 목록
+  const [leftScreenColumns, setLeftScreenColumns] = useState<Array<{ columnName: string; columnLabel: string }>>([]);
+  const [isLoadingLeftColumns, setIsLoadingLeftColumns] = useState(false);
+
+  // 우측 화면의 테이블 컬럼 목록 (테이블별로 그룹화)
+  const [rightScreenTables, setRightScreenTables] = useState<Array<{ 
+    tableName: string; 
+    screenName: string;
+    columns: Array<{ columnName: string; columnLabel: string }> 
+  }>>([]);
+  const [isLoadingRightColumns, setIsLoadingRightColumns] = useState(false);
+
   const [localConfig, setLocalConfig] = useState({
     screenId: config.screenId || 0,
     leftScreenId: config.leftScreenId || 0,
@@ -37,6 +51,8 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
     resizable: config.resizable ?? true,
     buttonLabel: config.buttonLabel || "데이터 전달",
     buttonPosition: config.buttonPosition || "center",
+    parentDataMapping: config.parentDataMapping || [] as ParentDataMapping[],
+    linkedFilters: config.linkedFilters || [] as LinkedFilter[],
     ...config,
   });
 
@@ -51,10 +67,165 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
       resizable: config.resizable ?? true,
       buttonLabel: config.buttonLabel || "데이터 전달",
       buttonPosition: config.buttonPosition || "center",
+      parentDataMapping: config.parentDataMapping || [],
+      linkedFilters: config.linkedFilters || [],
       ...config,
     });
   }, [config]);
 
+  // 좌측 화면이 변경되면 해당 화면의 테이블 컬럼 로드
+  useEffect(() => {
+    const loadLeftScreenColumns = async () => {
+      if (!localConfig.leftScreenId) {
+        setLeftScreenColumns([]);
+        return;
+      }
+
+      try {
+        setIsLoadingLeftColumns(true);
+        
+        // 좌측 화면 정보 조회
+        const screenData = await screenApi.getScreen(localConfig.leftScreenId);
+        if (!screenData?.tableName) {
+          console.warn("좌측 화면에 테이블이 설정되지 않았습니다.");
+          setLeftScreenColumns([]);
+          return;
+        }
+
+        // 테이블 컬럼 조회
+        const columnsResponse = await getTableColumns(screenData.tableName);
+        if (columnsResponse.success && columnsResponse.data?.columns) {
+          const columns = columnsResponse.data.columns.map((col: any) => ({
+            columnName: col.column_name || col.columnName,
+            columnLabel: col.column_label || col.columnLabel || col.column_name || col.columnName,
+          }));
+          setLeftScreenColumns(columns);
+          console.log("📋 좌측 화면 컬럼 로드 완료:", columns.length);
+        }
+      } catch (error) {
+        console.error("좌측 화면 컬럼 로드 실패:", error);
+        setLeftScreenColumns([]);
+      } finally {
+        setIsLoadingLeftColumns(false);
+      }
+    };
+
+    loadLeftScreenColumns();
+  }, [localConfig.leftScreenId]);
+
+  // 우측 화면이 변경되면 해당 화면 및 임베드된 화면들의 테이블 컬럼 로드
+  useEffect(() => {
+    const loadRightScreenColumns = async () => {
+      if (!localConfig.rightScreenId) {
+        setRightScreenTables([]);
+        return;
+      }
+
+      try {
+        setIsLoadingRightColumns(true);
+        const tables: Array<{ tableName: string; screenName: string; columns: Array<{ columnName: string; columnLabel: string }> }> = [];
+        
+        // 우측 화면 정보 조회
+        const screenData = await screenApi.getScreen(localConfig.rightScreenId);
+        
+        // 1. 메인 화면의 테이블 (있는 경우)
+        if (screenData?.tableName) {
+          const columnsResponse = await getTableColumns(screenData.tableName);
+          if (columnsResponse.success && columnsResponse.data?.columns) {
+            tables.push({
+              tableName: screenData.tableName,
+              screenName: screenData.screenName || "메인 화면",
+              columns: columnsResponse.data.columns.map((col: any) => ({
+                columnName: col.column_name || col.columnName,
+                columnLabel: col.column_label || col.columnLabel || col.column_name || col.columnName,
+              })),
+            });
+          }
+        }
+
+        // 2. 레이아웃에서 임베드된 화면들의 테이블 찾기 (탭, 분할 패널 등)
+        const layoutData = await screenApi.getLayout(localConfig.rightScreenId);
+        const components = layoutData?.components || [];
+        
+        if (components.length > 0) {
+          const embeddedScreenIds = new Set<number>();
+          
+          // 컴포넌트에서 임베드된 화면 ID 수집
+          const findEmbeddedScreens = (comps: any[]) => {
+            for (const comp of comps) {
+              const config = comp.componentConfig || {};
+              
+              // TabsWidget의 탭들
+              if (comp.componentType === "tabs-widget" && config.tabs) {
+                for (const tab of config.tabs) {
+                  if (tab.screenId) {
+                    embeddedScreenIds.add(tab.screenId);
+                    console.log("🔍 탭에서 화면 발견:", tab.screenId, tab.screenName);
+                  }
+                }
+              }
+              
+              // ScreenSplitPanel
+              if (comp.componentType === "screen-split-panel") {
+                if (config.leftScreenId) embeddedScreenIds.add(config.leftScreenId);
+                if (config.rightScreenId) embeddedScreenIds.add(config.rightScreenId);
+              }
+              
+              // EmbeddedScreen
+              if (comp.componentType === "embedded-screen" && config.screenId) {
+                embeddedScreenIds.add(config.screenId);
+              }
+              
+              // 중첩된 컴포넌트 검색
+              if (comp.children) {
+                findEmbeddedScreens(comp.children);
+              }
+            }
+          };
+          
+          findEmbeddedScreens(components);
+          console.log("📋 발견된 임베드 화면 ID:", Array.from(embeddedScreenIds));
+          
+          // 임베드된 화면들의 테이블 컬럼 로드
+          for (const embeddedScreenId of embeddedScreenIds) {
+            try {
+              const embeddedScreen = await screenApi.getScreen(embeddedScreenId);
+              if (embeddedScreen?.tableName) {
+                // 이미 추가된 테이블인지 확인
+                if (!tables.find(t => t.tableName === embeddedScreen.tableName)) {
+                  const columnsResponse = await getTableColumns(embeddedScreen.tableName);
+                  if (columnsResponse.success && columnsResponse.data?.columns) {
+                    tables.push({
+                      tableName: embeddedScreen.tableName,
+                      screenName: embeddedScreen.screenName || `화면 ${embeddedScreenId}`,
+                      columns: columnsResponse.data.columns.map((col: any) => ({
+                        columnName: col.column_name || col.columnName,
+                        columnLabel: col.column_label || col.columnLabel || col.column_name || col.columnName,
+                      })),
+                    });
+                    console.log("✅ 테이블 추가:", embeddedScreen.tableName);
+                  }
+                }
+              }
+            } catch (err) {
+              console.warn(`임베드된 화면 ${embeddedScreenId} 로드 실패:`, err);
+            }
+          }
+        }
+
+        setRightScreenTables(tables);
+        console.log("📋 우측 화면 테이블 로드 완료:", tables.map(t => t.tableName));
+      } catch (error) {
+        console.error("우측 화면 컬럼 로드 실패:", error);
+        setRightScreenTables([]);
+      } finally {
+        setIsLoadingRightColumns(false);
+      }
+    };
+
+    loadRightScreenColumns();
+  }, [localConfig.rightScreenId]);
+
   // 화면 목록 로드
   useEffect(() => {
     const loadScreens = async () => {
@@ -94,17 +265,77 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
     }
   };
 
+  // 부모 데이터 매핑 추가
+  const addParentDataMapping = () => {
+    const newMapping: ParentDataMapping = {
+      sourceColumn: "",
+      targetColumn: "",
+    };
+    const newMappings = [...(localConfig.parentDataMapping || []), newMapping];
+    updateConfig("parentDataMapping", newMappings);
+  };
+
+  // 부모 데이터 매핑 수정
+  const updateParentDataMapping = (index: number, field: keyof ParentDataMapping, value: string) => {
+    const newMappings = [...(localConfig.parentDataMapping || [])];
+    newMappings[index] = {
+      ...newMappings[index],
+      [field]: value,
+    };
+    updateConfig("parentDataMapping", newMappings);
+  };
+
+  // 부모 데이터 매핑 삭제
+  const removeParentDataMapping = (index: number) => {
+    const newMappings = (localConfig.parentDataMapping || []).filter((_: any, i: number) => i !== index);
+    updateConfig("parentDataMapping", newMappings);
+  };
+
+  // 연결 필터 추가
+  const addLinkedFilter = () => {
+    const newFilter: LinkedFilter = {
+      sourceColumn: "",
+      targetColumn: "",
+    };
+    const newFilters = [...(localConfig.linkedFilters || []), newFilter];
+    updateConfig("linkedFilters", newFilters);
+  };
+
+  // 연결 필터 수정
+  const updateLinkedFilter = (index: number, field: keyof LinkedFilter, value: string) => {
+    const newFilters = [...(localConfig.linkedFilters || [])];
+    newFilters[index] = {
+      ...newFilters[index],
+      [field]: value,
+    };
+    updateConfig("linkedFilters", newFilters);
+  };
+
+  // 연결 필터 삭제
+  const removeLinkedFilter = (index: number) => {
+    const newFilters = (localConfig.linkedFilters || []).filter((_: any, i: number) => i !== index);
+    updateConfig("linkedFilters", newFilters);
+  };
+
   return (
     <div className="space-y-4">
       <Tabs defaultValue="layout" className="w-full">
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="layout" className="gap-2">
-            <Layout className="h-4 w-4" />
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="layout" className="gap-1 text-xs">
+            <Layout className="h-3 w-3" />
             레이아웃
           </TabsTrigger>
-          <TabsTrigger value="screens" className="gap-2">
-            <Database className="h-4 w-4" />
-            화면 설정
+          <TabsTrigger value="screens" className="gap-1 text-xs">
+            <Database className="h-3 w-3" />
+            화면
+          </TabsTrigger>
+          <TabsTrigger value="linkedFilter" className="gap-1 text-xs">
+            <Link2 className="h-3 w-3" />
+            연결필터
+          </TabsTrigger>
+          <TabsTrigger value="dataMapping" className="gap-1 text-xs">
+            <ArrowRight className="h-3 w-3" />
+            데이터전달
           </TabsTrigger>
         </TabsList>
 
@@ -295,7 +526,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
 
                   <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
                     <p className="text-xs text-amber-800 dark:text-amber-200">
-                      💡 <strong>데이터 전달 방법:</strong> 좌측 화면에 테이블과 버튼을 배치하고, 버튼의 액션을
+                      데이터 전달 방법: 좌측 화면에 테이블과 버튼을 배치하고, 버튼의 액션을
                       "transferData"로 설정하세요.
                       <br />
                       버튼 설정에서 소스 컴포넌트(테이블), 타겟 화면, 필드 매핑을 지정할 수 있습니다.
@@ -306,6 +537,290 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
             </CardContent>
           </Card>
         </TabsContent>
+
+        {/* 연결 필터 탭 */}
+        <TabsContent value="linkedFilter" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">연결 필터</CardTitle>
+              <CardDescription className="text-xs">
+                좌측 화면에서 행을 선택하면, 우측 화면의 테이블이 자동으로 필터링됩니다.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {!localConfig.leftScreenId || !localConfig.rightScreenId ? (
+                <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
+                  <p className="text-xs text-amber-800 dark:text-amber-200">
+                    먼저 "화면" 탭에서 좌측/우측 화면을 모두 선택하세요.
+                  </p>
+                </div>
+              ) : isLoadingLeftColumns || isLoadingRightColumns ? (
+                <div className="flex items-center justify-center py-4">
+                  <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" />
+                  <span className="text-muted-foreground ml-2 text-xs">컬럼 정보 로딩 중...</span>
+                </div>
+              ) : leftScreenColumns.length === 0 || rightScreenTables.length === 0 ? (
+                <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
+                  <p className="text-xs text-amber-800 dark:text-amber-200">
+                    {leftScreenColumns.length === 0 && "좌측 화면에 테이블이 설정되지 않았습니다. "}
+                    {rightScreenTables.length === 0 && "우측 화면에 테이블이 설정되지 않았습니다."}
+                  </p>
+                </div>
+              ) : (
+                <>
+                  {/* 연결 필터 설명 */}
+                  <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950">
+                    <p className="text-xs text-blue-800 dark:text-blue-200">
+                      예: 좌측에서 설비를 선택하면 → 우측 점검항목이 해당 설비의 항목만 표시됩니다.
+                      <br />
+                      좌측 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">equipment_code</code> → 
+                      우측 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">equipment_code</code>
+                    </p>
+                  </div>
+
+                  {/* 필터 목록 */}
+                  <div className="space-y-3">
+                    {(localConfig.linkedFilters || []).map((filter: LinkedFilter, index: number) => (
+                      <div key={index} className="rounded-lg border bg-gray-50 p-3 dark:bg-gray-900">
+                        <div className="mb-2 flex items-center justify-between">
+                          <span className="text-xs font-medium text-gray-700">필터 #{index + 1}</span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => removeLinkedFilter(index)}
+                            className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+                        <div className="space-y-2">
+                          <div>
+                            <Label className="text-xs text-gray-600">소스 컬럼 (좌측 화면)</Label>
+                            <Select
+                              value={filter.sourceColumn}
+                              onValueChange={(value) => updateLinkedFilter(index, "sourceColumn", value)}
+                            >
+                              <SelectTrigger className="h-8 text-xs">
+                                <SelectValue placeholder="컬럼 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {leftScreenColumns.map((col) => (
+                                  <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                                    {col.columnLabel} ({col.columnName})
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </div>
+                          <div className="flex justify-center">
+                            <ArrowRight className="h-4 w-4 rotate-90 text-gray-400" />
+                          </div>
+                          <div>
+                            <Label className="text-xs text-gray-600">타겟 컬럼 (우측 화면 필터)</Label>
+                            <Select
+                              value={filter.targetColumn}
+                              onValueChange={(value) => updateLinkedFilter(index, "targetColumn", value)}
+                            >
+                              <SelectTrigger className="h-8 text-xs">
+                                <SelectValue placeholder="테이블.컬럼 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {rightScreenTables.map((table) => (
+                                  <React.Fragment key={table.tableName}>
+                                    <div className="px-2 py-1.5 text-xs font-semibold text-gray-500 bg-gray-100 dark:bg-gray-800">
+                                      {table.screenName} ({table.tableName})
+                                    </div>
+                                    {table.columns.map((col) => (
+                                      <SelectItem 
+                                        key={`${table.tableName}.${col.columnName}`} 
+                                        value={`${table.tableName}.${col.columnName}`}
+                                        className="text-xs"
+                                      >
+                                        {col.columnLabel} ({col.columnName})
+                                      </SelectItem>
+                                    ))}
+                                  </React.Fragment>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* 추가 버튼 */}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={addLinkedFilter}
+                    className="w-full text-xs"
+                  >
+                    <Plus className="mr-2 h-3 w-3" />
+                    연결 필터 추가
+                  </Button>
+
+                  {/* 현재 설정 표시 */}
+                  <Separator />
+                  <div className="text-xs text-muted-foreground">
+                    {(localConfig.linkedFilters || []).length > 0
+                      ? `${localConfig.linkedFilters.length}개 필터 설정됨`
+                      : "필터 없음 - 우측 화면에 모든 데이터가 표시됩니다"}
+                  </div>
+                </>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 데이터 전달 탭 */}
+        <TabsContent value="dataMapping" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">부모 데이터 자동 전달</CardTitle>
+              <CardDescription className="text-xs">
+                좌측 화면에서 행을 선택하면, 우측 화면의 추가/저장 시 지정된 컬럼 값이 자동으로 포함됩니다.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {!localConfig.leftScreenId || !localConfig.rightScreenId ? (
+                <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
+                  <p className="text-xs text-amber-800 dark:text-amber-200">
+                    먼저 "화면 설정" 탭에서 좌측/우측 화면을 모두 선택하세요.
+                  </p>
+                </div>
+              ) : isLoadingLeftColumns || isLoadingRightColumns ? (
+                <div className="flex items-center justify-center py-4">
+                  <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" />
+                  <span className="text-muted-foreground ml-2 text-xs">컬럼 정보 로딩 중...</span>
+                </div>
+              ) : leftScreenColumns.length === 0 || rightScreenTables.length === 0 ? (
+                <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
+                  <p className="text-xs text-amber-800 dark:text-amber-200">
+                    {leftScreenColumns.length === 0 && "좌측 화면에 테이블이 설정되지 않았습니다. "}
+                    {rightScreenTables.length === 0 && "우측 화면에 테이블이 설정되지 않았습니다."}
+                  </p>
+                </div>
+              ) : (
+                <>
+                  {/* 우측 화면 테이블 목록 표시 */}
+                  <div className="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-900 dark:bg-green-950">
+                    <p className="text-xs font-medium text-green-800 dark:text-green-200 mb-1">
+                      우측 화면에서 감지된 테이블 ({rightScreenTables.length}개):
+                    </p>
+                    <ul className="text-xs text-green-700 dark:text-green-300 space-y-0.5">
+                      {rightScreenTables.map((table) => (
+                        <li key={table.tableName}>• {table.screenName}: <code className="bg-green-100 dark:bg-green-900 px-1 rounded">{table.tableName}</code></li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  {/* 매핑 목록 */}
+                  <div className="space-y-3">
+                    {(localConfig.parentDataMapping || []).map((mapping: ParentDataMapping, index: number) => (
+                      <div key={index} className="rounded-lg border bg-gray-50 p-3 dark:bg-gray-900">
+                        <div className="mb-2 flex items-center justify-between">
+                          <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => removeParentDataMapping(index)}
+                            className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+                        <div className="space-y-2">
+                          <div>
+                            <Label className="text-xs text-gray-600">소스 컬럼 (좌측 화면)</Label>
+                            <Select
+                              value={mapping.sourceColumn}
+                              onValueChange={(value) => updateParentDataMapping(index, "sourceColumn", value)}
+                            >
+                              <SelectTrigger className="h-8 text-xs">
+                                <SelectValue placeholder="컬럼 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {leftScreenColumns.map((col) => (
+                                  <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                                    {col.columnLabel} ({col.columnName})
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </div>
+                          <div className="flex justify-center">
+                            <ArrowRight className="h-4 w-4 rotate-90 text-gray-400" />
+                          </div>
+                          <div>
+                            <Label className="text-xs text-gray-600">타겟 컬럼 (우측 화면)</Label>
+                            <Select
+                              value={mapping.targetColumn}
+                              onValueChange={(value) => updateParentDataMapping(index, "targetColumn", value)}
+                            >
+                              <SelectTrigger className="h-8 text-xs">
+                                <SelectValue placeholder="테이블.컬럼 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {rightScreenTables.map((table) => (
+                                  <React.Fragment key={table.tableName}>
+                                    <div className="px-2 py-1.5 text-xs font-semibold text-gray-500 bg-gray-100 dark:bg-gray-800">
+                                      {table.screenName} ({table.tableName})
+                                    </div>
+                                    {table.columns.map((col) => (
+                                      <SelectItem 
+                                        key={`${table.tableName}.${col.columnName}`} 
+                                        value={col.columnName} 
+                                        className="text-xs pl-4"
+                                      >
+                                        {col.columnLabel} ({col.columnName})
+                                      </SelectItem>
+                                    ))}
+                                  </React.Fragment>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* 매핑 추가 버튼 */}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={addParentDataMapping}
+                    className="w-full"
+                  >
+                    <Plus className="mr-2 h-4 w-4" />
+                    매핑 추가
+                  </Button>
+
+                  {/* 자동 매핑 안내 */}
+                  <div className="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-900 dark:bg-green-950">
+                    <p className="text-xs text-green-800 dark:text-green-200">
+                      <strong>자동 매핑:</strong> 좌측에서 선택한 데이터의 모든 컬럼이 우측 화면에 자동 전달됩니다.
+                      <br />
+                      동일한 컬럼명(예: equipment_code)이 있으면 별도 설정 없이 자동으로 매핑됩니다.
+                    </p>
+                  </div>
+
+                  {/* 수동 매핑 안내 */}
+                  <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950">
+                    <p className="text-xs text-blue-800 dark:text-blue-200">
+                      <strong>수동 매핑 (선택사항):</strong>
+                      <br />
+                      컬럼명이 다른 경우에만 위에서 매핑을 추가하세요.
+                      <br />
+                      예: 좌측 <code className="bg-blue-100 px-1 rounded">user_id</code> → 우측 <code className="bg-blue-100 px-1 rounded">created_by</code>
+                    </p>
+                  </div>
+                </>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
       </Tabs>
 
       {/* 설정 요약 */}
@@ -343,6 +858,14 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
               <span className="text-muted-foreground">크기 조절:</span>
               <span className="font-medium">{localConfig.resizable ? "가능" : "불가능"}</span>
             </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">데이터 매핑:</span>
+              <span className="font-medium">
+                {(localConfig.parentDataMapping || []).length > 0
+                  ? `${localConfig.parentDataMapping.length}개 설정`
+                  : "미설정"}
+              </span>
+            </div>
           </div>
         </CardContent>
       </Card>
diff --git a/frontend/lib/registry/components/section-paper/SectionPaperRenderer.tsx b/frontend/lib/registry/components/section-paper/SectionPaperRenderer.tsx
index c4e653e1..fb9dc6fe 100644
--- a/frontend/lib/registry/components/section-paper/SectionPaperRenderer.tsx
+++ b/frontend/lib/registry/components/section-paper/SectionPaperRenderer.tsx
@@ -25,3 +25,4 @@ if (process.env.NODE_ENV === "development") {
   SectionPaperRenderer.enableHotReload();
 }
 
+
diff --git a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
index eef66f4a..f19fafdc 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
-import { createPortal } from "react-dom";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { useCodeOptions, useTableCodeCategory } from "@/hooks/queries/useCodes";
 import { cn } from "@/lib/registry/components/common/inputStyles";
@@ -66,8 +65,6 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   });
 
   const [isOpen, setIsOpen] = useState(false);
-  // 드롭다운 위치 (Portal 렌더링용)
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
 
   // webTypeConfig 또는 componentConfig 사용 (DynamicWebTypeRenderer 호환성)
   const config = (props as any).webTypeConfig || componentConfig || {};
@@ -329,26 +326,9 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
   }, [selectedValue, codeOptions, config.options]);
 
   // 클릭 이벤트 핸들러 (React Query로 간소화)
-  // 드롭다운 위치 계산 함수
-  const updateDropdownPosition = () => {
-    if (selectRef.current) {
-      const rect = selectRef.current.getBoundingClientRect();
-      setDropdownPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-        width: rect.width,
-      });
-    }
-  };
-
   const handleToggle = () => {
     if (isDesignMode) return;
 
-    // 드롭다운 열기 전에 위치 계산
-    if (!isOpen) {
-      updateDropdownPosition();
-    }
-
     // React Query가 자동으로 캐시 관리하므로 수동 새로고침 불필요
     setIsOpen(!isOpen);
   };
@@ -470,13 +450,9 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             value={searchQuery || selectedLabel}
             onChange={(e) => {
               setSearchQuery(e.target.value);
-              updateDropdownPosition();
-              setIsOpen(true);
-            }}
-            onFocus={() => {
-              updateDropdownPosition();
               setIsOpen(true);
             }}
+            onFocus={() => setIsOpen(true)}
             placeholder="코드 또는 코드명 입력..."
             className={cn(
               "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
@@ -485,16 +461,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             )}
             readOnly={isDesignMode}
           />
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && filteredOptions.length > 0 && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && filteredOptions.length > 0 && (
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
               {filteredOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
@@ -510,8 +478,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                   </div>
                 </div>
               ))}
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -541,16 +508,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
             </svg>
           </div>
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && (
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
               {isLoadingCodes ? (
                 <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
               ) : allOptions.length > 0 ? (
@@ -566,8 +525,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               ) : (
                 <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
               )}
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -632,13 +590,9 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             value={searchQuery}
             onChange={(e) => {
               setSearchQuery(e.target.value);
-              updateDropdownPosition();
-              setIsOpen(true);
-            }}
-            onFocus={() => {
-              updateDropdownPosition();
               setIsOpen(true);
             }}
+            onFocus={() => setIsOpen(true)}
             placeholder={placeholder}
             className={cn(
               "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
@@ -647,16 +601,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             )}
             readOnly={isDesignMode}
           />
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && filteredOptions.length > 0 && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && filteredOptions.length > 0 && (
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
               {filteredOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
@@ -674,8 +620,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                   {option.label}
                 </div>
               ))}
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -705,16 +650,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
             </svg>
           </div>
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && (
+            <div className="absolute z-[99999] mt-1 w-full rounded-md border border-gray-300 bg-white shadow-lg">
               <input
                 type="text"
                 value={searchQuery}
@@ -739,8 +676,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                     </div>
                   ))}
               </div>
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -757,12 +693,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               !isDesignMode && "hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
             )}
-            onClick={() => {
-              if (!isDesignMode) {
-                updateDropdownPosition();
-                setIsOpen(true);
-              }
-            }}
+            onClick={() => !isDesignMode && setIsOpen(true)}
             style={{ 
               pointerEvents: isDesignMode ? "none" : "auto",
               height: "100%"
@@ -795,16 +726,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               <span className="text-gray-500">{placeholder}</span>
             )}
           </div>
-          {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-          {isOpen && !isDesignMode && typeof document !== "undefined" && createPortal(
-            <div 
-              className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-              style={{
-                top: dropdownPosition.top,
-                left: dropdownPosition.left,
-                width: dropdownPosition.width,
-              }}
-            >
+          {isOpen && !isDesignMode && (
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
               {(isLoadingCodes || isLoadingCategories) ? (
                 <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
               ) : allOptions.length > 0 ? (
@@ -832,8 +755,20 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                         <input
                           type="checkbox"
                           checked={isOptionSelected}
-                          onChange={() => {}}
-                          className="h-4 w-4"
+                          value={option.value}
+                          onChange={(e) => {
+                            // 체크박스 직접 클릭 시에도 올바른 값으로 처리
+                            e.stopPropagation();
+                            const newVals = isOptionSelected
+                              ? selectedValues.filter((v) => v !== option.value)
+                              : [...selectedValues, option.value];
+                            setSelectedValues(newVals);
+                            const newValue = newVals.join(",");
+                            if (isInteractive && onFormDataChange && component.columnName) {
+                              onFormDataChange(component.columnName, newValue);
+                            }
+                          }}
+                          className="h-4 w-4 pointer-events-auto"
                         />
                         <span>{option.label || option.value}</span>
                       </div>
@@ -843,8 +778,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
               ) : (
                 <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
               )}
-            </div>,
-            document.body
+            </div>
           )}
         </div>
       );
@@ -873,16 +807,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
           </svg>
         </div>
-        {/* Portal을 사용하여 드롭다운을 document.body에 렌더링 */}
-        {isOpen && !isDesignMode && typeof document !== "undefined" && createPortal(
-          <div 
-            className="fixed z-[99999] max-h-60 overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
-            style={{
-              top: dropdownPosition.top,
-              left: dropdownPosition.left,
-              width: dropdownPosition.width,
-            }}
-          >
+        {isOpen && !isDesignMode && (
+          <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
             {isLoadingCodes ? (
               <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
             ) : allOptions.length > 0 ? (
@@ -898,8 +824,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             ) : (
               <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
             )}
-          </div>,
-          document.body
+          </div>
         )}
       </div>
     );
diff --git a/frontend/lib/registry/components/simple-repeater-table/useCalculation.ts b/frontend/lib/registry/components/simple-repeater-table/useCalculation.ts
index 1f6f69f2..8a0fdba5 100644
--- a/frontend/lib/registry/components/simple-repeater-table/useCalculation.ts
+++ b/frontend/lib/registry/components/simple-repeater-table/useCalculation.ts
@@ -65,3 +65,4 @@ export function useCalculation(calculationRules: CalculationRule[] = []) {
   };
 }
 
+
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 841e6f0a..261fa108 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1075,16 +1075,113 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       const sortBy = sortColumn || undefined;
       const sortOrder = sortDirection;
       const search = searchTerm || undefined;
-      const filters = Object.keys(searchValues).length > 0 ? searchValues : undefined;
+      
+      // 🆕 연결 필터 값 가져오기 (분할 패널 내부일 때)
+      let linkedFilterValues: Record<string, any> = {};
+      let hasLinkedFiltersConfigured = false; // 연결 필터가 설정되어 있는지 여부
+      let hasSelectedLeftData = false; // 좌측에서 데이터가 선택되었는지 여부
+      
+      console.log("🔍 [TableList] 분할 패널 컨텍스트 확인:", {
+        hasSplitPanelContext: !!splitPanelContext,
+        tableName: tableConfig.selectedTable,
+        selectedLeftData: splitPanelContext?.selectedLeftData,
+        linkedFilters: splitPanelContext?.linkedFilters,
+      });
+      
+      if (splitPanelContext) {
+        // 연결 필터 설정 여부 확인 (현재 테이블에 해당하는 필터가 있는지)
+        const linkedFiltersConfig = splitPanelContext.linkedFilters || [];
+        hasLinkedFiltersConfigured = linkedFiltersConfig.some(
+          (filter) => filter.targetColumn?.startsWith(tableConfig.selectedTable + ".") ||
+                      filter.targetColumn === tableConfig.selectedTable
+        );
+        
+        // 좌측 데이터 선택 여부 확인
+        hasSelectedLeftData = splitPanelContext.selectedLeftData && 
+                              Object.keys(splitPanelContext.selectedLeftData).length > 0;
+        
+        const allLinkedFilters = splitPanelContext.getLinkedFilterValues();
+        console.log("🔗 [TableList] 연결 필터 원본:", allLinkedFilters);
+        
+        // 현재 테이블에 해당하는 필터만 추출 (테이블명.컬럼명 형식에서)
+        for (const [key, value] of Object.entries(allLinkedFilters)) {
+          if (key.includes(".")) {
+            const [tableName, columnName] = key.split(".");
+            if (tableName === tableConfig.selectedTable) {
+              linkedFilterValues[columnName] = value;
+              hasLinkedFiltersConfigured = true; // 이 테이블에 대한 필터가 있음
+            }
+          } else {
+            // 테이블명 없이 컬럼명만 있는 경우 그대로 사용
+            linkedFilterValues[key] = value;
+          }
+        }
+        if (Object.keys(linkedFilterValues).length > 0) {
+          console.log("🔗 [TableList] 연결 필터 적용:", linkedFilterValues);
+        }
+      }
+      
+      // 🆕 연결 필터가 설정되어 있지만 좌측에서 데이터가 선택되지 않은 경우
+      // → 빈 데이터 표시 (모든 데이터를 보여주지 않음)
+      if (hasLinkedFiltersConfigured && !hasSelectedLeftData) {
+        console.log("⚠️ [TableList] 연결 필터 설정됨 but 좌측 데이터 미선택 → 빈 데이터 표시");
+        setData([]);
+        setTotalItems(0);
+        setLoading(false);
+        return;
+      }
+      
+      // 검색 필터와 연결 필터 병합
+      const filters = {
+        ...(Object.keys(searchValues).length > 0 ? searchValues : {}),
+        ...linkedFilterValues,
+      };
+      const hasFilters = Object.keys(filters).length > 0;
 
-      const entityJoinColumns = (tableConfig.columns || [])
-        .filter((col) => col.additionalJoinInfo)
-        .map((col) => ({
-          sourceTable: col.additionalJoinInfo!.sourceTable,
-          sourceColumn: col.additionalJoinInfo!.sourceColumn,
-          joinAlias: col.additionalJoinInfo!.joinAlias,
-          referenceTable: col.additionalJoinInfo!.referenceTable,
-        }));
+      // 🆕 REST API 데이터 소스 처리
+      const isRestApiTable = tableConfig.selectedTable.startsWith("restapi_") || tableConfig.selectedTable.startsWith("_restapi_");
+      
+      let response: any;
+      
+      if (isRestApiTable) {
+        // REST API 데이터 소스인 경우
+        const connectionIdMatch = tableConfig.selectedTable.match(/restapi_(\d+)/);
+        const connectionId = connectionIdMatch ? parseInt(connectionIdMatch[1]) : null;
+        
+        if (connectionId) {
+          console.log("🌐 [TableList] REST API 데이터 소스 호출", { connectionId });
+          
+          // REST API 연결 정보 가져오기 및 데이터 조회
+          const { ExternalRestApiConnectionAPI } = await import("@/lib/api/externalRestApiConnection");
+          const restApiData = await ExternalRestApiConnectionAPI.fetchData(
+            connectionId,
+            undefined, // endpoint - 연결 정보에서 가져옴
+            "response", // jsonPath - 기본값 response
+          );
+          
+          response = {
+            data: restApiData.rows || [],
+            total: restApiData.total || restApiData.rows?.length || 0,
+            totalPages: Math.ceil((restApiData.total || restApiData.rows?.length || 0) / pageSize),
+          };
+          
+          console.log("✅ [TableList] REST API 응답:", { 
+            dataLength: response.data.length, 
+            total: response.total 
+          });
+        } else {
+          throw new Error("REST API 연결 ID를 찾을 수 없습니다.");
+        }
+      } else {
+        // 일반 DB 테이블인 경우 (기존 로직)
+        const entityJoinColumns = (tableConfig.columns || [])
+          .filter((col) => col.additionalJoinInfo)
+          .map((col) => ({
+            sourceTable: col.additionalJoinInfo!.sourceTable,
+            sourceColumn: col.additionalJoinInfo!.sourceColumn,
+            joinAlias: col.additionalJoinInfo!.joinAlias,
+            referenceTable: col.additionalJoinInfo!.referenceTable,
+          }));
 
       // console.log("🔍 [TableList] API 호출 시작", {
       //   tableName: tableConfig.selectedTable,
@@ -1095,12 +1192,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       // });
 
       // 🎯 항상 entityJoinApi 사용 (writer 컬럼 자동 조인 지원)
-      const response = await entityJoinApi.getTableDataWithJoins(tableConfig.selectedTable, {
+      response = await entityJoinApi.getTableDataWithJoins(tableConfig.selectedTable, {
         page,
         size: pageSize,
         sortBy,
         sortOrder,
-        search: filters,
+        search: hasFilters ? filters : undefined,
         enableEntityJoin: true,
         additionalJoinColumns: entityJoinColumns.length > 0 ? entityJoinColumns : undefined,
         dataFilter: tableConfig.dataFilter, // 🆕 데이터 필터 전달
@@ -1144,6 +1241,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           totalItems: response.total || 0,
         }
       );
+      }
     } catch (err: any) {
       console.error("데이터 가져오기 실패:", err);
       setData([]);
@@ -1164,6 +1262,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     searchTerm,
     searchValues,
     isDesignMode,
+    splitPanelContext?.selectedLeftData, // 🆕 연결 필터 변경 시 재조회
   ]);
 
   const fetchTableDataDebounced = useCallback(
@@ -1466,6 +1565,22 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
     handleRowSelection(rowKey, !isCurrentlySelected);
 
+    // 🆕 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
+    if (splitPanelContext && splitPanelPosition === "left") {
+      if (!isCurrentlySelected) {
+        // 선택된 경우: 데이터 저장
+        splitPanelContext.setSelectedLeftData(row);
+        console.log("🔗 [TableList] 분할 패널 좌측 데이터 저장:", {
+          row,
+          parentDataMapping: splitPanelContext.parentDataMapping,
+        });
+      } else {
+        // 선택 해제된 경우: 데이터 초기화
+        splitPanelContext.setSelectedLeftData(null);
+        console.log("🔗 [TableList] 분할 패널 좌측 데이터 초기화");
+      }
+    }
+
     console.log("행 클릭:", { row, index, isSelected: !isCurrentlySelected });
   };
 
@@ -2111,6 +2226,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     refreshKey,
     refreshTrigger, // 강제 새로고침 트리거
     isDesignMode,
+    splitPanelContext?.selectedLeftData, // 🆕 좌측 데이터 선택 변경 시 데이터 새로고침
     // fetchTableDataDebounced 제거: useCallback 재생성으로 인한 무한 루프 방지
   ]);
 
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 2c7270a6..522f8651 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -5,6 +5,7 @@ import { toast } from "sonner";
 import { screenApi } from "@/lib/api/screen";
 import { DynamicFormApi } from "@/lib/api/dynamicForm";
 import { ImprovedButtonActionExecutor } from "@/lib/utils/improvedButtonActionExecutor";
+import { apiClient } from "@/lib/api/client";
 import type { ExtendedControlContext } from "@/types/control-management";
 
 /**
@@ -24,7 +25,7 @@ export type ButtonActionType =
   | "excel_upload" // 엑셀 업로드
   | "barcode_scan" // 바코드 스캔
   | "code_merge" // 코드 병합
-  | "empty_vehicle" // 공차등록 (위치 수집 + 상태 변경)
+  // | "empty_vehicle" // 공차등록 (위치 수집 + 상태 변경) - 운행알림으로 통합
   | "operation_control" // 운행알림 및 종료 (위치 수집 + 상태 변경 + 연속 추적)
   | "swap_fields" // 필드 값 교환 (출발지 ↔ 목적지)
   | "transferData"; // 데이터 전달 (컴포넌트 간 or 화면 간)
@@ -163,6 +164,10 @@ export interface ButtonActionConfig {
   updateGeolocationAccuracyField?: string; // 정확도 저장 필드 (선택)
   updateGeolocationTimestampField?: string; // 타임스탬프 저장 필드 (선택)
 
+  // 🆕 공차등록 연속 위치 추적 설정 (empty_vehicle 액션에서 사용)
+  emptyVehicleTracking?: boolean; // 공차 상태에서 연속 위치 추적 여부 (기본: true)
+  emptyVehicleTrackingInterval?: number; // 위치 저장 주기 (ms, 기본: 10000 = 10초)
+
   // 편집 관련 (수주관리 등 그룹별 다중 레코드 편집)
   editMode?: "modal" | "navigate" | "inline"; // 편집 모드
   editModalTitle?: string; // 편집 모달 제목
@@ -256,6 +261,9 @@ export interface ButtonActionContext {
 
   // 🆕 컴포넌트별 설정 (parentDataMapping 등)
   componentConfigs?: Record<string, any>; // 컴포넌트 ID → 컴포넌트 설정
+  
+  // 🆕 분할 패널 부모 데이터 (좌측 화면에서 선택된 데이터)
+  splitPanelParentData?: Record<string, any>;
 }
 
 /**
@@ -350,8 +358,8 @@ export class ButtonActionExecutor {
         case "transferData":
           return await this.handleTransferData(config, context);
 
-        case "empty_vehicle":
-          return await this.handleEmptyVehicle(config, context);
+        // case "empty_vehicle":
+        //   return await this.handleEmptyVehicle(config, context);
 
         case "operation_control":
           return await this.handleOperationControl(config, context);
@@ -556,8 +564,7 @@ export class ButtonActionExecutor {
           // });
 
           // 🎯 채번 규칙 할당 처리 (저장 시점에 실제 순번 증가)
-          // console.log("🔍 채번 규칙 할당 체크 시작");
-          // console.log("📦 현재 formData:", JSON.stringify(formData, null, 2));
+          console.log("🔍 채번 규칙 할당 체크 시작");
 
           const fieldsWithNumbering: Record<string, string> = {};
 
@@ -566,26 +573,49 @@ export class ButtonActionExecutor {
             if (key.endsWith("_numberingRuleId") && value) {
               const fieldName = key.replace("_numberingRuleId", "");
               fieldsWithNumbering[fieldName] = value as string;
-              // console.log(`🎯 발견: ${fieldName} → 규칙 ${value}`);
+              console.log(`🎯 발견: ${fieldName} → 규칙 ${value}`);
             }
           }
 
-          // console.log("📋 채번 규칙이 설정된 필드:", fieldsWithNumbering);
-          // console.log("📊 필드 개수:", Object.keys(fieldsWithNumbering).length);
+          console.log("📋 채번 규칙이 설정된 필드:", fieldsWithNumbering);
+          console.log("📊 필드 개수:", Object.keys(fieldsWithNumbering).length);
 
-          // 사용자 입력 값 유지 (재할당하지 않음)
-          // 채번 규칙은 TextInputComponent 마운트 시 이미 생성되었으므로
-          // 저장 시점에는 사용자가 수정한 값을 그대로 사용
+          // 🔥 저장 시점에 allocateCode 호출하여 실제 순번 증가
           if (Object.keys(fieldsWithNumbering).length > 0) {
-            console.log("ℹ️ 채번 규칙 필드 감지:", Object.keys(fieldsWithNumbering));
-            console.log("ℹ️ 사용자 입력 값 유지 (재할당 하지 않음)");
+            console.log("🎯 채번 규칙 할당 시작 (allocateCode 호출)");
+            const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
+            
+            for (const [fieldName, ruleId] of Object.entries(fieldsWithNumbering)) {
+              try {
+                console.log(`🔄 ${fieldName} 필드에 대해 allocateCode 호출: ${ruleId}`);
+                const allocateResult = await allocateNumberingCode(ruleId);
+                
+                if (allocateResult.success && allocateResult.data?.generatedCode) {
+                  const newCode = allocateResult.data.generatedCode;
+                  console.log(`✅ ${fieldName} 새 코드 할당: ${formData[fieldName]} → ${newCode}`);
+                  formData[fieldName] = newCode;
+                } else {
+                  console.warn(`⚠️ ${fieldName} 코드 할당 실패, 기존 값 유지:`, allocateResult.error);
+                }
+              } catch (allocateError) {
+                console.error(`❌ ${fieldName} 코드 할당 오류:`, allocateError);
+                // 오류 시 기존 값 유지
+              }
+            }
           }
 
-          // console.log("✅ 채번 규칙 할당 완료");
-          // console.log("📦 최종 formData:", JSON.stringify(formData, null, 2));
+          console.log("✅ 채번 규칙 할당 완료");
+          console.log("📦 최종 formData:", JSON.stringify(formData, null, 2));
+
+          // 🆕 분할 패널 부모 데이터 병합 (좌측 화면에서 선택된 데이터)
+          const splitPanelData = context.splitPanelParentData || {};
+          if (Object.keys(splitPanelData).length > 0) {
+            console.log("🔗 [handleSave] 분할 패널 부모 데이터 병합:", splitPanelData);
+          }
 
           const dataWithUserInfo = {
-            ...formData,
+            ...splitPanelData, // 분할 패널 부모 데이터 먼저 적용
+            ...formData, // 폼 데이터가 우선 (덮어쓰기 가능)
             writer: formData.writer || writerValue, // ✅ 입력값 우선, 없으면 userId
             created_by: writerValue, // created_by는 항상 로그인한 사람
             updated_by: writerValue, // updated_by는 항상 로그인한 사람
@@ -659,11 +689,122 @@ export class ButtonActionExecutor {
             }
           }
 
-          saveResult = await DynamicFormApi.saveFormData({
-            screenId,
-            tableName,
-            data: dataWithUserInfo,
-          });
+          // 🆕 v3.9: RepeatScreenModal의 외부 테이블 데이터 저장 처리
+          const repeatScreenModalKeys = Object.keys(context.formData).filter((key) =>
+            key.startsWith("_repeatScreenModal_") && key !== "_repeatScreenModal_aggregations"
+          );
+
+          // RepeatScreenModal 데이터가 있으면 해당 테이블에 대한 메인 저장은 건너뜀
+          const repeatScreenModalTables = repeatScreenModalKeys.map((key) => key.replace("_repeatScreenModal_", ""));
+          const shouldSkipMainSave = repeatScreenModalTables.includes(tableName);
+
+          if (shouldSkipMainSave) {
+            console.log(`⏭️ [handleSave] ${tableName} 메인 저장 건너뜀 (RepeatScreenModal에서 처리)`);
+            saveResult = { success: true, message: "RepeatScreenModal에서 처리" };
+          } else {
+            saveResult = await DynamicFormApi.saveFormData({
+              screenId,
+              tableName,
+              data: dataWithUserInfo,
+            });
+          }
+
+          if (repeatScreenModalKeys.length > 0) {
+            console.log("📦 [handleSave] RepeatScreenModal 데이터 저장 시작:", repeatScreenModalKeys);
+
+            // 🆕 formData에서 채번 규칙으로 생성된 값들 추출 (예: shipment_plan_no)
+            const numberingFields: Record<string, any> = {};
+            for (const [fieldKey, value] of Object.entries(context.formData)) {
+              // _numberingRuleId로 끝나는 키가 있으면 해당 필드는 채번 규칙 값
+              if (context.formData[`${fieldKey}_numberingRuleId`]) {
+                numberingFields[fieldKey] = value;
+              }
+            }
+            console.log("📦 [handleSave] 채번 규칙 필드:", numberingFields);
+
+            for (const key of repeatScreenModalKeys) {
+              const targetTable = key.replace("_repeatScreenModal_", "");
+              const rows = context.formData[key] as any[];
+
+              if (!Array.isArray(rows) || rows.length === 0) continue;
+
+              console.log(`📦 [handleSave] ${targetTable} 테이블 저장:`, rows);
+
+              for (const row of rows) {
+                const { _isNew, _targetTable, id, ...dataToSave } = row;
+
+                // 사용자 정보 추가 + 채번 규칙 값 병합
+                const dataWithMeta = {
+                  ...dataToSave,
+                  ...numberingFields, // 채번 규칙 값 (shipment_plan_no 등)
+                  created_by: context.userId,
+                  updated_by: context.userId,
+                  company_code: context.companyCode,
+                };
+
+                try {
+                  if (_isNew) {
+                    // INSERT
+                    console.log(`📝 [handleSave] ${targetTable} INSERT:`, dataWithMeta);
+                    const insertResult = await apiClient.post(
+                      `/table-management/tables/${targetTable}/add`,
+                      dataWithMeta
+                    );
+                    console.log(`✅ [handleSave] ${targetTable} INSERT 완료:`, insertResult.data);
+                  } else if (id) {
+                    // UPDATE
+                    const originalData = { id };
+                    const updatedData = { ...dataWithMeta, id };
+                    console.log(`📝 [handleSave] ${targetTable} UPDATE:`, { originalData, updatedData });
+                    const updateResult = await apiClient.put(
+                      `/table-management/tables/${targetTable}/edit`,
+                      { originalData, updatedData }
+                    );
+                    console.log(`✅ [handleSave] ${targetTable} UPDATE 완료:`, updateResult.data);
+                  }
+                } catch (error: any) {
+                  console.error(`❌ [handleSave] ${targetTable} 저장 실패:`, error.response?.data || error.message);
+                  // 개별 실패는 전체 저장을 중단하지 않음
+                }
+              }
+            }
+          }
+
+          // 🆕 v3.9: RepeatScreenModal 집계 저장 처리
+          const aggregationConfigs = context.formData._repeatScreenModal_aggregations as Array<{
+            resultField: string;
+            aggregatedValue: number;
+            targetTable: string;
+            targetColumn: string;
+            joinKey: { sourceField: string; targetField: string };
+            sourceValue: any;
+          }>;
+
+          if (aggregationConfigs && aggregationConfigs.length > 0) {
+            console.log("📊 [handleSave] 집계 저장 시작:", aggregationConfigs);
+
+            for (const config of aggregationConfigs) {
+              const { targetTable, targetColumn, joinKey, aggregatedValue, sourceValue } = config;
+
+              try {
+                const originalData = { [joinKey.targetField]: sourceValue };
+                const updatedData = {
+                  [targetColumn]: aggregatedValue,
+                  [joinKey.targetField]: sourceValue,
+                };
+
+                console.log(`📊 [handleSave] ${targetTable}.${targetColumn} = ${aggregatedValue} (조인: ${joinKey.sourceField} = ${sourceValue})`);
+                
+                const updateResult = await apiClient.put(
+                  `/table-management/tables/${targetTable}/edit`,
+                  { originalData, updatedData }
+                );
+                console.log(`✅ [handleSave] ${targetTable} 집계 저장 완료:`, updateResult.data);
+              } catch (error: any) {
+                console.error(`❌ [handleSave] ${targetTable} 집계 저장 실패:`, error.response?.data || error.message);
+              }
+            }
+          }
         }
 
         if (!saveResult.success) {
@@ -1200,6 +1341,7 @@ export class ButtonActionExecutor {
       // 🆕 선택된 행 데이터 수집
       const selectedData = context.selectedRowsData || [];
       console.log("📦 [handleModal] 선택된 데이터:", selectedData);
+      console.log("📦 [handleModal] 분할 패널 부모 데이터:", context.splitPanelParentData);
 
       // 전역 모달 상태 업데이트를 위한 이벤트 발생
       const modalEvent = new CustomEvent("openScreenModal", {
@@ -1211,6 +1353,8 @@ export class ButtonActionExecutor {
           // 🆕 선택된 행 데이터 전달
           selectedData: selectedData,
           selectedIds: selectedData.map((row: any) => row.id).filter(Boolean),
+          // 🆕 분할 패널 부모 데이터 전달 (탭 안 모달에서 사용)
+          splitPanelParentData: context.splitPanelParentData || {},
         },
       });
 
@@ -3501,6 +3645,7 @@ export class ButtonActionExecutor {
 
   /**
    * 위치 이력 테이블에 저장 (내부 헬퍼)
+   * + vehicles 테이블의 latitude/longitude도 함께 업데이트
    */
   private static async saveLocationToHistory(
     tripId: string | null,
@@ -3517,13 +3662,15 @@ export class ButtonActionExecutor {
           try {
             const { apiClient } = await import("@/lib/api/client");
 
+            const { latitude, longitude, accuracy, altitude, speed, heading } = position.coords;
+
             const locationData = {
-              latitude: position.coords.latitude,
-              longitude: position.coords.longitude,
-              accuracy: position.coords.accuracy,
-              altitude: position.coords.altitude,
-              speed: position.coords.speed,
-              heading: position.coords.heading,
+              latitude,
+              longitude,
+              accuracy,
+              altitude,
+              speed,
+              heading,
               tripId,
               tripStatus,
               departure,
@@ -3536,6 +3683,7 @@ export class ButtonActionExecutor {
 
             console.log("📍 [saveLocationToHistory] 위치 저장:", locationData);
 
+            // 1. vehicle_location_history에 저장
             const response = await apiClient.post(`/dynamic-form/location-history`, locationData);
 
             if (response.data?.success) {
@@ -3544,6 +3692,41 @@ export class ButtonActionExecutor {
               console.warn("⚠️ 위치 이력 저장 실패:", response.data);
             }
 
+            // 2. vehicles 테이블의 latitude/longitude도 업데이트 (실시간 위치 반영)
+            if (this.trackingContext && this.trackingConfig) {
+              const keyField = this.trackingConfig.trackingStatusKeyField || "user_id";
+              const keySourceField = this.trackingConfig.trackingStatusKeySourceField || "__userId__";
+              const keyValue = resolveSpecialKeyword(keySourceField, this.trackingContext);
+              const vehiclesTableName = this.trackingConfig.trackingStatusTableName || "vehicles";
+
+              if (keyValue) {
+                try {
+                  // latitude 업데이트
+                  await apiClient.put(`/dynamic-form/update-field`, {
+                    tableName: vehiclesTableName,
+                    keyField,
+                    keyValue,
+                    updateField: "latitude",
+                    updateValue: latitude,
+                  });
+
+                  // longitude 업데이트
+                  await apiClient.put(`/dynamic-form/update-field`, {
+                    tableName: vehiclesTableName,
+                    keyField,
+                    keyValue,
+                    updateField: "longitude",
+                    updateValue: longitude,
+                  });
+
+                  console.log(`✅ vehicles 테이블 위치 업데이트: (${latitude.toFixed(6)}, ${longitude.toFixed(6)})`);
+                } catch (vehicleUpdateError) {
+                  // 컬럼이 없으면 조용히 무시
+                  console.warn("⚠️ vehicles 테이블 위치 업데이트 실패 (무시):", vehicleUpdateError);
+                }
+              }
+            }
+
             resolve();
           } catch (error) {
             console.error("❌ 위치 이력 저장 오류:", error);
@@ -3673,13 +3856,18 @@ export class ButtonActionExecutor {
     }
   }
 
+  // 공차 추적용 watchId 저장
+  private static emptyVehicleWatchId: number | null = null;
+  private static emptyVehicleTripId: string | null = null;
+
   /**
    * 공차등록 액션 처리
    * - 위치 수집 + 상태 변경 (예: status → inactive)
+   * - 연속 위치 추적 시작 (vehicle_location_history에 저장)
    */
   private static async handleEmptyVehicle(config: ButtonActionConfig, context: ButtonActionContext): Promise<boolean> {
     try {
-      console.log("📍 위치정보 가져오기 액션 실행:", { config, context });
+      console.log("📍 공차등록 액션 실행:", { config, context });
 
       // 브라우저 Geolocation API 지원 확인
       if (!navigator.geolocation) {
@@ -3708,7 +3896,7 @@ export class ButtonActionExecutor {
 
       toast.dismiss(loadingToastId);
 
-      const { latitude, longitude, accuracy } = position.coords;
+      const { latitude, longitude, accuracy, speed, heading, altitude } = position.coords;
       const timestamp = new Date(position.timestamp);
 
       console.log("📍 위치정보 획득 성공:", { latitude, longitude, accuracy });
@@ -3777,8 +3965,15 @@ export class ButtonActionExecutor {
               }
             }
             console.log(`📍 DB UPDATE 완료: ${successCount}/${Object.keys(fieldsToUpdate).length} 필드 저장됨`);
+
+            // 🆕 연속 위치 추적 시작 (공차 상태에서도 위치 기록)
+            if (config.emptyVehicleTracking !== false) {
+              await this.startEmptyVehicleTracking(config, context, {
+                latitude, longitude, accuracy, speed, heading, altitude
+              });
+            }
             
-            toast.success(config.successMessage || "위치 정보가 저장되었습니다.");
+            toast.success(config.successMessage || "공차 등록이 완료되었습니다. 위치 추적을 시작합니다.");
           } catch (saveError) {
             console.error("❌ 위치정보 자동 저장 실패:", saveError);
             toast.error("위치 정보 저장에 실패했습니다.");
@@ -3795,7 +3990,7 @@ export class ButtonActionExecutor {
 
       return true;
     } catch (error: any) {
-      console.error("❌ 위치정보 가져오기 실패:", error);
+      console.error("❌ 공차등록 실패:", error);
       toast.dismiss();
 
       // GeolocationPositionError 처리
@@ -3821,6 +4016,122 @@ export class ButtonActionExecutor {
     }
   }
 
+  /**
+   * 공차 상태에서 연속 위치 추적 시작
+   */
+  private static async startEmptyVehicleTracking(
+    config: ButtonActionConfig, 
+    context: ButtonActionContext,
+    initialPosition: { latitude: number; longitude: number; accuracy: number | null; speed: number | null; heading: number | null; altitude: number | null }
+  ): Promise<void> {
+    try {
+      // 기존 추적이 있으면 중지
+      if (this.emptyVehicleWatchId !== null) {
+        navigator.geolocation.clearWatch(this.emptyVehicleWatchId);
+        this.emptyVehicleWatchId = null;
+      }
+
+      const { apiClient } = await import("@/lib/api/client");
+      
+      // Trip ID 생성 (공차용)
+      const tripId = `EMPTY-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;
+      this.emptyVehicleTripId = tripId;
+
+      const userId = context.userId || "";
+      const companyCode = context.companyCode || "";
+      const departure = context.formData?.departure || "";
+      const arrival = context.formData?.arrival || "";
+      const departureName = context.formData?.departure_name || "";
+      const destinationName = context.formData?.destination_name || "";
+
+      // 시작 위치 기록
+      try {
+        await apiClient.post("/dynamic-form/location-history", {
+          tripId,
+          userId,
+          latitude: initialPosition.latitude,
+          longitude: initialPosition.longitude,
+          accuracy: initialPosition.accuracy,
+          speed: initialPosition.speed,
+          heading: initialPosition.heading,
+          altitude: initialPosition.altitude,
+          tripStatus: "empty_start", // 공차 시작
+          departure,
+          arrival,
+          departureName,
+          destinationName,
+          companyCode,
+        });
+        console.log("📍 공차 시작 위치 기록 완료:", tripId);
+      } catch (err) {
+        console.warn("⚠️ 공차 시작 위치 기록 실패 (테이블 없을 수 있음):", err);
+      }
+
+      // 추적 간격 (기본 10초)
+      const trackingInterval = config.emptyVehicleTrackingInterval || 10000;
+
+      // watchPosition으로 연속 추적
+      this.emptyVehicleWatchId = navigator.geolocation.watchPosition(
+        async (position) => {
+          const { latitude, longitude, accuracy, speed, heading, altitude } = position.coords;
+          
+          try {
+            await apiClient.post("/dynamic-form/location-history", {
+              tripId: this.emptyVehicleTripId,
+              userId,
+              latitude,
+              longitude,
+              accuracy,
+              speed,
+              heading,
+              altitude,
+              tripStatus: "empty_tracking", // 공차 추적 중
+              departure,
+              arrival,
+              departureName,
+              destinationName,
+              companyCode,
+            });
+            console.log("📍 공차 위치 기록:", { latitude: latitude.toFixed(6), longitude: longitude.toFixed(6) });
+          } catch (err) {
+            console.warn("⚠️ 공차 위치 기록 실패:", err);
+          }
+        },
+        (error) => {
+          console.error("❌ 공차 위치 추적 오류:", error.message);
+        },
+        {
+          enableHighAccuracy: true,
+          timeout: trackingInterval,
+          maximumAge: 0,
+        }
+      );
+
+      console.log("🚗 공차 위치 추적 시작:", { tripId, watchId: this.emptyVehicleWatchId });
+    } catch (error) {
+      console.error("❌ 공차 위치 추적 시작 실패:", error);
+    }
+  }
+
+  /**
+   * 공차 위치 추적 중지 (운행 전환 시 호출)
+   */
+  public static stopEmptyVehicleTracking(): void {
+    if (this.emptyVehicleWatchId !== null) {
+      navigator.geolocation.clearWatch(this.emptyVehicleWatchId);
+      console.log("🛑 공차 위치 추적 중지:", { tripId: this.emptyVehicleTripId, watchId: this.emptyVehicleWatchId });
+      this.emptyVehicleWatchId = null;
+      this.emptyVehicleTripId = null;
+    }
+  }
+
+  /**
+   * 현재 공차 추적 Trip ID 반환
+   */
+  public static getEmptyVehicleTripId(): string | null {
+    return this.emptyVehicleTripId;
+  }
+
   /**
    * 필드 값 교환 액션 처리 (예: 출발지 ↔ 도착지)
    */
@@ -3885,7 +4196,13 @@ export class ButtonActionExecutor {
    */
   private static async handleOperationControl(config: ButtonActionConfig, context: ButtonActionContext): Promise<boolean> {
     try {
-      console.log("🔄 필드 값 변경 액션 실행:", { config, context });
+      console.log("🔄 운행알림/종료 액션 실행:", { config, context });
+
+      // 🆕 공차 추적 중지 (운행 시작 시 공차 추적 종료)
+      if (this.emptyVehicleWatchId !== null) {
+        this.stopEmptyVehicleTracking();
+        console.log("🛑 공차 추적 종료 후 운행 시작");
+      }
 
       // 🆕 연속 위치 추적 모드 처리
       if (config.updateWithTracking) {
diff --git a/frontend/types/flow.ts b/frontend/types/flow.ts
index cd1314a1..9cfa1eb2 100644
--- a/frontend/types/flow.ts
+++ b/frontend/types/flow.ts
@@ -33,6 +33,28 @@ export interface FlowConditionGroup {
   conditions: FlowCondition[];
 }
 
+// ============================================
+// 다중 REST API 연결 설정
+// ============================================
+export interface RestApiConnectionConfig {
+  connectionId: number;
+  connectionName: string;
+  endpoint: string;
+  jsonPath: string;
+  alias: string; // 컬럼 접두어 (예: "api1_")
+}
+
+// ============================================
+// 다중 외부 DB 연결 설정
+// ============================================
+export interface ExternalDbConnectionConfig {
+  connectionId: number;
+  connectionName: string;
+  dbType: string;
+  tableName: string;
+  alias: string; // 컬럼 접두어 (예: "db1_")
+}
+
 // ============================================
 // 플로우 정의
 // ============================================
@@ -41,6 +63,17 @@ export interface FlowDefinition {
   name: string;
   description?: string;
   tableName: string;
+  // 데이터 소스 관련
+  dbSourceType?: "internal" | "external" | "restapi" | "multi_restapi" | "multi_external_db";
+  dbConnectionId?: number;
+  // REST API 관련 (단일)
+  restApiConnectionId?: number;
+  restApiEndpoint?: string;
+  restApiJsonPath?: string;
+  // 다중 REST API 관련
+  restApiConnections?: RestApiConnectionConfig[];
+  // 다중 외부 DB 관련
+  externalDbConnections?: ExternalDbConnectionConfig[];
   isActive: boolean;
   createdAt: string;
   updatedAt: string;
@@ -52,6 +85,17 @@ export interface CreateFlowDefinitionRequest {
   name: string;
   description?: string;
   tableName: string;
+  // 데이터 소스 관련
+  dbSourceType?: "internal" | "external" | "restapi" | "multi_restapi" | "multi_external_db";
+  dbConnectionId?: number;
+  // REST API 관련 (단일)
+  restApiConnectionId?: number;
+  restApiEndpoint?: string;
+  restApiJsonPath?: string;
+  // 다중 REST API 관련
+  restApiConnections?: RestApiConnectionConfig[];
+  // 다중 외부 DB 관련
+  externalDbConnections?: ExternalDbConnectionConfig[];
 }
 
 export interface UpdateFlowDefinitionRequest {
diff --git a/frontend/types/flowExternalDb.ts b/frontend/types/flowExternalDb.ts
index daefe031..4d8469fe 100644
--- a/frontend/types/flowExternalDb.ts
+++ b/frontend/types/flowExternalDb.ts
@@ -126,7 +126,7 @@ export const OPERATION_OPTIONS = [
 export const INTEGRATION_TYPE_OPTIONS = [
   { value: "internal", label: "내부 DB (기본)" },
   { value: "external_db", label: "외부 DB 연동" },
-  { value: "rest_api", label: "REST API (추후 지원)" },
+  { value: "rest_api", label: "REST API 연동" },
   { value: "webhook", label: "Webhook (추후 지원)" },
   { value: "hybrid", label: "복합 연동 (추후 지원)" },
 ] as const;
diff --git a/화면_임베딩_및_데이터_전달_시스템_구현_계획서.md b/화면_임베딩_및_데이터_전달_시스템_구현_계획서.md
index 716d7f98..f8f84f1f 100644
--- a/화면_임베딩_및_데이터_전달_시스템_구현_계획서.md
+++ b/화면_임베딩_및_데이터_전달_시스템_구현_계획서.md
@@ -1678,3 +1678,4 @@ const 출고등록_설정: ScreenSplitPanel = {
 ## 결론
 
 화면 임베딩 및 데이터 전달 시스템은 복잡한 업무 워크플로우를 효율적으로 처리할 수 있는 강력한 기능입니다. 단계별로 체계적으로 구현하면 약 3.5개월 내에 완성할 수 있으며, 이를 통해 사용자 경험을 크게 향상시킬 수 있습니다.
+
diff --git a/화면_임베딩_시스템_Phase1-4_구현_완료.md b/화면_임베딩_시스템_Phase1-4_구현_완료.md
index c1880ef7..2a3e16de 100644
--- a/화면_임베딩_시스템_Phase1-4_구현_완료.md
+++ b/화면_임베딩_시스템_Phase1-4_구현_완료.md
@@ -525,3 +525,4 @@ const { data: config } = await getScreenSplitPanel(screenId);
 - ✅ 매핑 엔진 완성
 
 이제 입고 등록과 같은 복잡한 워크플로우를 구현할 수 있습니다. 다음 단계는 각 컴포넌트 타입별 DataReceivable 인터페이스 구현과 설정 UI 개발입니다.
+
diff --git a/화면_임베딩_시스템_충돌_분석_보고서.md b/화면_임베딩_시스템_충돌_분석_보고서.md
index 6cebf31e..7334e8b3 100644
--- a/화면_임베딩_시스템_충돌_분석_보고서.md
+++ b/화면_임베딩_시스템_충돌_분석_보고서.md
@@ -512,3 +512,4 @@ function ScreenViewPage() {
 **충돌 위험도: 낮음 (🟢)**
 
 새로운 시스템은 기존 시스템과 **독립적으로 동작**하며, 최소한의 수정만으로 통합 가능합니다. 화면 페이지에 조건 분기만 추가하면 바로 사용할 수 있습니다.
+