차량위치 위젯 기존꺼 분할 완료

backend-node/src/app.ts

@@ -54,6 +54,7 @@ import deliveryRoutes from "./routes/deliveryRoutes"; // 배송/화물 관리
 import riskAlertRoutes from "./routes/riskAlertRoutes"; // 리스크/알림 관리
 import todoRoutes from "./routes/todoRoutes"; // To-Do 관리
 import bookingRoutes from "./routes/bookingRoutes"; // 예약 요청 관리
+import mapDataRoutes from "./routes/mapDataRoutes"; // 지도 데이터 관리
 import { BatchSchedulerService } from "./services/batchSchedulerService";
 // import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
 // import batchRoutes from "./routes/batchRoutes"; // 임시 주석
@@ -202,6 +203,7 @@ app.use("/api/delivery", deliveryRoutes); // 배송/화물 관리
 app.use("/api/risk-alerts", riskAlertRoutes); // 리스크/알림 관리
 app.use("/api/todos", todoRoutes); // To-Do 관리
 app.use("/api/bookings", bookingRoutes); // 예약 요청 관리
+app.use("/api/map-data", mapDataRoutes); // 지도 데이터 조회
 // app.use("/api/collections", collectionRoutes); // 임시 주석
 // app.use("/api/batch", batchRoutes); // 임시 주석
 // app.use('/api/users', userRoutes);

backend-node/src/controllers/mapDataController.ts

@@ -0,0 +1,137 @@
+import { Request, Response } from "express";
+import { MapDataService } from "../services/mapDataService";
+import { logger } from "../utils/logger";
+
+/**
+ * 지도 데이터 조회 컨트롤러
+ * 외부 DB 연결에서 위도/경도 데이터를 가져와 지도에 표시할 수 있도록 변환
+ */
+export class MapDataController {
+  private mapDataService: MapDataService;
+
+  constructor() {
+    this.mapDataService = new MapDataService();
+  }
+
+  /**
+   * 외부 DB에서 지도 데이터 조회
+   */
+  getMapData = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { connectionId } = req.params;
+      const {
+        tableName,
+        latColumn,
+        lngColumn,
+        labelColumn,
+        statusColumn,
+        additionalColumns,
+        whereClause,
+      } = req.query;
+
+      logger.info("🗺️ 지도 데이터 조회 요청:", {
+        connectionId,
+        tableName,
+        latColumn,
+        lngColumn,
+      });
+
+      // 필수 파라미터 검증
+      if (!tableName || !latColumn || !lngColumn) {
+        res.status(400).json({
+          success: false,
+          message: "tableName, latColumn, lngColumn은 필수입니다.",
+        });
+        return;
+      }
+
+      const markers = await this.mapDataService.getMapData({
+        connectionId: parseInt(connectionId as string),
+        tableName: tableName as string,
+        latColumn: latColumn as string,
+        lngColumn: lngColumn as string,
+        labelColumn: labelColumn as string,
+        statusColumn: statusColumn as string,
+        additionalColumns: additionalColumns
+          ? (additionalColumns as string).split(",")
+          : [],
+        whereClause: whereClause as string,
+      });
+
+      res.json({
+        success: true,
+        data: {
+          markers,
+          count: markers.length,
+        },
+      });
+    } catch (error: any) {
+      logger.error("❌ 지도 데이터 조회 오류:", error);
+      res.status(500).json({
+        success: false,
+        message: "지도 데이터 조회 중 오류가 발생했습니다.",
+        error: error.message,
+      });
+    }
+  };
+
+  /**
+   * 내부 DB에서 지도 데이터 조회
+   */
+  getInternalMapData = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        tableName,
+        latColumn,
+        lngColumn,
+        labelColumn,
+        statusColumn,
+        additionalColumns,
+        whereClause,
+      } = req.query;
+
+      logger.info("🗺️ 내부 DB 지도 데이터 조회 요청:", {
+        tableName,
+        latColumn,
+        lngColumn,
+      });
+
+      // 필수 파라미터 검증
+      if (!tableName || !latColumn || !lngColumn) {
+        res.status(400).json({
+          success: false,
+          message: "tableName, latColumn, lngColumn은 필수입니다.",
+        });
+        return;
+      }
+
+      const markers = await this.mapDataService.getInternalMapData({
+        tableName: tableName as string,
+        latColumn: latColumn as string,
+        lngColumn: lngColumn as string,
+        labelColumn: labelColumn as string,
+        statusColumn: statusColumn as string,
+        additionalColumns: additionalColumns
+          ? (additionalColumns as string).split(",")
+          : [],
+        whereClause: whereClause as string,
+      });
+
+      res.json({
+        success: true,
+        data: {
+          markers,
+          count: markers.length,
+        },
+      });
+    } catch (error: any) {
+      logger.error("❌ 내부 DB 지도 데이터 조회 오류:", error);
+      res.status(500).json({
+        success: false,
+        message: "지도 데이터 조회 중 오류가 발생했습니다.",
+        error: error.message,
+      });
+    }
+  };
+}
+

backend-node/src/routes/mapDataRoutes.ts

@@ -0,0 +1,18 @@
+import { Router } from "express";
+import { MapDataController } from "../controllers/mapDataController";
+
+const router = Router();
+const mapDataController = new MapDataController();
+
+/**
+ * 지도 데이터 라우트
+ */
+
+// 외부 DB 지도 데이터 조회
+router.get("/external/:connectionId", mapDataController.getMapData);
+
+// 내부 DB 지도 데이터 조회
+router.get("/internal", mapDataController.getInternalMapData);
+
+export default router;
+

backend-node/src/services/mapDataService.ts

@@ -0,0 +1,229 @@
+import { logger } from "../utils/logger";
+import { query } from "../database/db";
+import { ExternalDbConnectionService } from "./externalDbConnectionService";
+
+interface MapDataQuery {
+  connectionId?: number;
+  tableName: string;
+  latColumn: string;
+  lngColumn: string;
+  labelColumn?: string;
+  statusColumn?: string;
+  additionalColumns?: string[];
+  whereClause?: string;
+}
+
+export interface MapMarker {
+  id: string | number;
+  latitude: number;
+  longitude: number;
+  label?: string;
+  status?: string;
+  additionalInfo?: Record<string, any>;
+}
+
+/**
+ * 지도 데이터 서비스
+ * 외부/내부 DB에서 위도/경도 데이터를 조회하여 지도 마커로 변환
+ */
+export class MapDataService {
+  constructor() {
+    // ExternalDbConnectionService는 static 메서드를 사용
+  }
+
+  /**
+   * 외부 DB에서 지도 데이터 조회
+   */
+  async getMapData(params: MapDataQuery): Promise<MapMarker[]> {
+    try {
+      logger.info("🗺️ 외부 DB 지도 데이터 조회 시작:", params);
+
+      // SELECT할 컬럼 목록 구성
+      const selectColumns = [
+        params.latColumn,
+        params.lngColumn,
+        params.labelColumn,
+        params.statusColumn,
+        ...(params.additionalColumns || []),
+      ].filter(Boolean);
+
+      // 중복 제거
+      const uniqueColumns = Array.from(new Set(selectColumns));
+
+      // SQL 쿼리 구성
+      let sql = `SELECT ${uniqueColumns.map((col) => `"${col}"`).join(", ")} FROM "${params.tableName}"`;
+
+      if (params.whereClause) {
+        sql += ` WHERE ${params.whereClause}`;
+      }
+
+      logger.info("📝 실행할 SQL:", sql);
+
+      // 외부 DB 쿼리 실행 (static 메서드 사용)
+      const result = await ExternalDbConnectionService.executeQuery(
+        params.connectionId!,
+        sql
+      );
+
+      if (!result.success || !result.data) {
+        throw new Error("외부 DB 쿼리 실패");
+      }
+
+      // 데이터를 MapMarker 형식으로 변환
+      const markers = this.convertToMarkers(
+        result.data,
+        params.latColumn,
+        params.lngColumn,
+        params.labelColumn,
+        params.statusColumn,
+        params.additionalColumns
+      );
+
+      logger.info(`✅ ${markers.length}개의 마커 데이터 변환 완료`);
+
+      return markers;
+    } catch (error) {
+      logger.error("❌ 외부 DB 지도 데이터 조회 오류:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 내부 DB에서 지도 데이터 조회
+   */
+  async getInternalMapData(
+    params: Omit<MapDataQuery, "connectionId">
+  ): Promise<MapMarker[]> {
+    try {
+      logger.info("🗺️ 내부 DB 지도 데이터 조회 시작:", params);
+
+      // SELECT할 컬럼 목록 구성
+      const selectColumns = [
+        params.latColumn,
+        params.lngColumn,
+        params.labelColumn,
+        params.statusColumn,
+        ...(params.additionalColumns || []),
+      ].filter(Boolean);
+
+      // 중복 제거
+      const uniqueColumns = Array.from(new Set(selectColumns));
+
+      // SQL 쿼리 구성
+      let sql = `SELECT ${uniqueColumns.map((col) => `"${col}"`).join(", ")} FROM "${params.tableName}"`;
+
+      if (params.whereClause) {
+        sql += ` WHERE ${params.whereClause}`;
+      }
+
+      logger.info("📝 실행할 SQL:", sql);
+
+      // 내부 DB 쿼리 실행
+      const rows = await query(sql);
+
+      // 데이터를 MapMarker 형식으로 변환
+      const markers = this.convertToMarkers(
+        rows,
+        params.latColumn,
+        params.lngColumn,
+        params.labelColumn,
+        params.statusColumn,
+        params.additionalColumns
+      );
+
+      logger.info(`✅ ${markers.length}개의 마커 데이터 변환 완료`);
+
+      return markers;
+    } catch (error) {
+      logger.error("❌ 내부 DB 지도 데이터 조회 오류:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * DB 결과를 MapMarker 배열로 변환
+   */
+  private convertToMarkers(
+    data: any[],
+    latColumn: string,
+    lngColumn: string,
+    labelColumn?: string,
+    statusColumn?: string,
+    additionalColumns?: string[]
+  ): MapMarker[] {
+    const markers: MapMarker[] = [];
+
+    for (let i = 0; i < data.length; i++) {
+      const row = data[i];
+
+      // 위도/경도 추출 (다양한 컬럼명 지원)
+      const lat = this.extractCoordinate(row, latColumn);
+      const lng = this.extractCoordinate(row, lngColumn);
+
+      // 유효한 좌표인지 확인
+      if (lat === null || lng === null || isNaN(lat) || isNaN(lng)) {
+        logger.warn(`⚠️ 유효하지 않은 좌표 스킵: row ${i}`, { lat, lng });
+        continue;
+      }
+
+      // 위도 범위 체크 (-90 ~ 90)
+      if (lat < -90 || lat > 90) {
+        logger.warn(`⚠️ 위도 범위 초과: ${lat}`);
+        continue;
+      }
+
+      // 경도 범위 체크 (-180 ~ 180)
+      if (lng < -180 || lng > 180) {
+        logger.warn(`⚠️ 경도 범위 초과: ${lng}`);
+        continue;
+      }
+
+      // 추가 정보 수집
+      const additionalInfo: Record<string, any> = {};
+      if (additionalColumns) {
+        for (const col of additionalColumns) {
+          if (col && row[col] !== undefined) {
+            additionalInfo[col] = row[col];
+          }
+        }
+      }
+
+      // 마커 생성
+      markers.push({
+        id: row.id || row.ID || `marker-${i}`,
+        latitude: lat,
+        longitude: lng,
+        label: labelColumn ? row[labelColumn] : undefined,
+        status: statusColumn ? row[statusColumn] : undefined,
+        additionalInfo: Object.keys(additionalInfo).length > 0 ? additionalInfo : undefined,
+      });
+    }
+
+    return markers;
+  }
+
+  /**
+   * 다양한 형식의 좌표 추출
+   */
+  private extractCoordinate(row: any, columnName: string): number | null {
+    const value = row[columnName];
+
+    if (value === null || value === undefined) {
+      return null;
+    }
+
+    // 이미 숫자인 경우
+    if (typeof value === "number") {
+      return value;
+    }
+
+    // 문자열인 경우 파싱
+    if (typeof value === "string") {
+      const parsed = parseFloat(value);
+      return isNaN(parsed) ? null : parsed;
+    }
+
+    return null;
+  }
+}
+

frontend/components/admin/dashboard/CanvasElement.tsx

@@ -22,7 +22,17 @@ const CalculatorWidget = dynamic(() => import("@/components/dashboard/widgets/Ca
   loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
 });
 
-const VehicleMapWidget = dynamic(() => import("@/components/dashboard/widgets/VehicleMapWidget"), {
+const VehicleStatusWidget = dynamic(() => import("@/components/dashboard/widgets/VehicleStatusWidget"), {
+  ssr: false,
+  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
+});
+
+const VehicleListWidget = dynamic(() => import("@/components/dashboard/widgets/VehicleListWidget"), {
+  ssr: false,
+  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
+});
+
+const VehicleMapOnlyWidget = dynamic(() => import("@/components/dashboard/widgets/VehicleMapOnlyWidget"), {
   ssr: false,
   loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
 });
@@ -448,15 +458,25 @@ export function CanvasElement({
           <div className="widget-interactive-area h-full w-full">
             <CalculatorWidget />
           </div>
+        ) : element.type === "widget" && element.subtype === "vehicle-status" ? (
+          // 차량 상태 현황 위젯 렌더링
+          <div className="widget-interactive-area h-full w-full">
+            <VehicleStatusWidget element={element} />
+          </div>
+        ) : element.type === "widget" && element.subtype === "vehicle-list" ? (
+          // 차량 목록 위젯 렌더링
+          <div className="widget-interactive-area h-full w-full">
+            <VehicleListWidget element={element} />
+          </div>
         ) : element.type === "widget" && element.subtype === "vehicle-map" ? (
           // 차량 위치 지도 위젯 렌더링
           <div className="widget-interactive-area h-full w-full">
-            <VehicleMapWidget />
+            <VehicleMapOnlyWidget element={element} />
           </div>
         ) : element.type === "widget" && element.subtype === "delivery-status" ? (
           // 배송/화물 현황 위젯 렌더링
           <div className="widget-interactive-area h-full w-full">
-            <DeliveryStatusWidget />
+            <DeliveryStatusWidget element={element} />
           </div>
         ) : element.type === "widget" && element.subtype === "risk-alert" ? (
           // 리스크/알림 위젯 렌더링

frontend/components/admin/dashboard/DashboardSidebar.tsx

@@ -120,7 +120,23 @@ export function DashboardSidebar() {
             className="border-l-4 border-teal-500"
           />
           <DraggableItem
-            icon="🚚"
+            icon="📊"
+            title="차량 상태 현황"
+            type="widget"
+            subtype="vehicle-status"
+            onDragStart={handleDragStart}
+            className="border-l-4 border-green-500"
+          />
+          <DraggableItem
+            icon="📋"
+            title="차량 목록"
+            type="widget"
+            subtype="vehicle-list"
+            onDragStart={handleDragStart}
+            className="border-l-4 border-blue-500"
+          />
+          <DraggableItem
+            icon="🗺️"
             title="차량 위치 지도"
             type="widget"
             subtype="vehicle-map"

frontend/components/admin/dashboard/ElementConfigModal.tsx

@@ -4,6 +4,7 @@ import React, { useState, useCallback } from "react";
 import { DashboardElement, ChartDataSource, ChartConfig, QueryResult, ClockConfig } from "./types";
 import { QueryEditor } from "./QueryEditor";
 import { ChartConfigPanel } from "./ChartConfigPanel";
+import { VehicleMapConfigPanel } from "./VehicleMapConfigPanel";
 import { ClockConfigModal } from "./widgets/ClockConfigModal";
 
 interface ElementConfigModalProps {
@@ -27,6 +28,12 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
   const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
   const [activeTab, setActiveTab] = useState<"query" | "chart">("query");
 
+  // 차트 설정이 필요 없는 위젯 (쿼리만 필요)
+  const isQueryOnlyWidget = 
+    element.subtype === "vehicle-status" || 
+    element.subtype === "vehicle-list" || 
+    element.subtype === "delivery-status";
+
   // 데이터 소스 변경 처리
   const handleDataSourceChange = useCallback((newDataSource: ChartDataSource) => {
     setDataSource(newDataSource);
@@ -40,11 +47,11 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
   // 쿼리 테스트 결과 처리
   const handleQueryTest = useCallback((result: QueryResult) => {
     setQueryResult(result);
-    // 쿼리 결과가 나오면 자동으로 차트 설정 탭으로 이동
-    if (result.rows.length > 0) {
+    // 쿼리만 필요한 위젯은 자동 이동 안 함
+    if (result.rows.length > 0 && !isQueryOnlyWidget) {
       setActiveTab("chart");
     }
-  }, []);
+  }, [isQueryOnlyWidget]);
 
   // 저장 처리
   const handleSave = useCallback(() => {
@@ -98,10 +105,10 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
   }
 
   return (
-    <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-      <div className="flex h-[80vh] w-full max-w-4xl flex-col rounded-lg bg-white shadow-xl">
+    <div className="bg-opacity-50 fixed inset-0 z-[9999] flex items-center justify-center bg-black">
+      <div className="flex h-[80vh] w-full max-w-4xl flex-col rounded-lg bg-white shadow-xl overflow-hidden">
         {/* 모달 헤더 */}
-        <div className="flex items-center justify-between border-b border-gray-200 p-6">
+        <div className="flex items-center justify-between border-b border-gray-200 p-6 flex-shrink-0">
           <div>
             <h2 className="text-xl font-semibold text-gray-800">{element.title} 설정</h2>
             <p className="text-muted-foreground mt-1 text-sm">데이터 소스와 차트 설정을 구성하세요</p>
@@ -112,7 +119,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
         </div>
 
         {/* 탭 네비게이션 */}
-        <div className="flex border-b border-gray-200">
+        <div className="flex border-b border-gray-200 flex-shrink-0">
           <button
             onClick={() => setActiveTab("query")}
             className={`border-b-2 px-6 py-3 text-sm font-medium transition-colors ${
@@ -123,35 +130,45 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
           >
             📝 쿼리 & 데이터
           </button>
-          <button
-            onClick={() => setActiveTab("chart")}
-            className={`border-b-2 px-6 py-3 text-sm font-medium transition-colors ${
-              activeTab === "chart"
-                ? "border-primary text-primary bg-accent"
-                : "border-transparent text-gray-500 hover:text-gray-700"
-            } `}
-          >
-            📊 차트 설정
-            {queryResult && (
-              <span className="ml-2 rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800">
-                {queryResult.rows.length}
-              </span>
-            )}
-          </button>
+          {!isQueryOnlyWidget && (
+            <button
+              onClick={() => setActiveTab("chart")}
+              className={`border-b-2 px-6 py-3 text-sm font-medium transition-colors ${
+                activeTab === "chart"
+                  ? "border-primary text-primary bg-accent"
+                  : "border-transparent text-gray-500 hover:text-gray-700"
+              } `}
+            >
+              {element.subtype === "vehicle-map" ? "🗺️ 지도 설정" : "📊 차트 설정"}
+              {queryResult && (
+                <span className="ml-2 rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800">
+                  {queryResult.rows.length}
+                </span>
+              )}
+            </button>
+          )}
         </div>
 
-        {/* 탭 내용 */}
-        <div className="flex-1 overflow-auto p-6">
+        {/* 탭 내용 - 스크롤 가능하도록 수정 */}
+        <div className="flex-1 overflow-y-auto p-6 relative">
           {activeTab === "query" && (
-            <QueryEditor
-              dataSource={dataSource}
-              onDataSourceChange={handleDataSourceChange}
-              onQueryTest={handleQueryTest}
-            />
+            <div className="relative z-10">
+              <QueryEditor
+                dataSource={dataSource}
+                onDataSourceChange={handleDataSourceChange}
+                onQueryTest={handleQueryTest}
+              />
+            </div>
           )}
 
           {activeTab === "chart" && (
-            <ChartConfigPanel config={chartConfig} queryResult={queryResult} onConfigChange={handleChartConfigChange} />
+            <div className="relative z-10">
+              {element.subtype === "vehicle-map" ? (
+                <VehicleMapConfigPanel config={chartConfig} queryResult={queryResult} onConfigChange={handleChartConfigChange} />
+              ) : (
+                <ChartConfigPanel config={chartConfig} queryResult={queryResult} onConfigChange={handleChartConfigChange} />
+              )}
+            </div>
           )}
         </div>
 
@@ -174,7 +191,15 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
             </button>
             <button
               onClick={handleSave}
-              disabled={!dataSource.query || !chartConfig.xAxis || !chartConfig.yAxis}
+              disabled={
+                !dataSource.query || 
+                (!isQueryOnlyWidget && 
+                  (element.subtype === "vehicle-map" 
+                    ? (!chartConfig.latitudeColumn || !chartConfig.longitudeColumn)
+                    : (!chartConfig.xAxis || !chartConfig.yAxis)
+                  )
+                )
+              }
               className="bg-accent0 rounded-lg px-4 py-2 text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:bg-gray-300"
             >
               저장

frontend/components/admin/dashboard/QueryEditor.tsx

@@ -23,21 +23,27 @@ export function QueryEditor({ dataSource, onDataSourceChange, onQueryTest }: Que
 
   // 쿼리 실행
   const executeQuery = useCallback(async () => {
+    console.log('🚀 executeQuery 호출됨!');
+    console.log('📝 현재 쿼리:', query);
+    console.log('✅ query.trim():', query.trim());
+    
     if (!query.trim()) {
       setError('쿼리를 입력해주세요.');
+      console.log('❌ 쿼리가 비어있음!');
       return;
     }
 
     setIsExecuting(true);
     setError(null);
+    console.log('🔄 쿼리 실행 시작...');
 
     try {
       // 실제 API 호출
-      const response = await fetch('http://localhost:8080/api/dashboards/execute-query', {
+      const response = await fetch('/api/dashboards/execute-query', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${localStorage.getItem('token') || 'test-token'}` // JWT 토큰 사용
+          'Authorization': `Bearer ${localStorage.getItem('authToken') || localStorage.getItem('token') || 'test-token'}` // JWT 토큰 사용
         },
         body: JSON.stringify({ query: query.trim() })
       });
@@ -150,7 +156,12 @@ ORDER BY Q4 DESC;`
         <h4 className="text-lg font-semibold text-gray-800">📝 SQL 쿼리 에디터</h4>
         <div className="flex gap-2">
           <button
-            onClick={executeQuery}
+            onClick={() => {
+              console.log('🖱️ 실행 버튼 클릭됨!');
+              console.log('📝 query:', query);
+              console.log('🔒 disabled:', isExecuting || !query.trim());
+              executeQuery();
+            }}
             disabled={isExecuting || !query.trim()}
             className="
               px-3 py-1 bg-accent0 text-white rounded text-sm

frontend/components/admin/dashboard/VehicleMapConfigPanel.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import React, { useState, useCallback } from 'react';
+import { ChartConfig, QueryResult } from './types';
+
+interface VehicleMapConfigPanelProps {
+  config?: ChartConfig;
+  queryResult?: QueryResult;
+  onConfigChange: (config: ChartConfig) => void;
+}
+
+/**
+ * 차량 위치 지도 설정 패널
+ * - 위도/경도 컬럼 매핑
+ * - 라벨/상태 컬럼 설정
+ */
+export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: VehicleMapConfigPanelProps) {
+  const [currentConfig, setCurrentConfig] = useState<ChartConfig>(config || {});
+
+  // 설정 업데이트
+  const updateConfig = useCallback((updates: Partial<ChartConfig>) => {
+    const newConfig = { ...currentConfig, ...updates };
+    setCurrentConfig(newConfig);
+    onConfigChange(newConfig);
+  }, [currentConfig, onConfigChange]);
+
+  // 사용 가능한 컬럼 목록
+  const availableColumns = queryResult?.columns || [];
+  const sampleData = queryResult?.rows?.[0] || {};
+
+  return (
+    <div className="space-y-4">
+      <h4 className="text-lg font-semibold text-gray-800">🗺️ 지도 설정</h4>
+
+      {/* 쿼리 결과가 없을 때 */}
+      {!queryResult && (
+        <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+          <div className="text-yellow-800 text-sm">
+            💡 먼저 SQL 쿼리를 실행하여 데이터를 가져온 후 지도를 설정할 수 있습니다.
+          </div>
+        </div>
+      )}
+
+      {/* 데이터 필드 매핑 */}
+      {queryResult && (
+        <>
+          {/* 지도 제목 */}
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-gray-700">지도 제목</label>
+            <input
+              type="text"
+              value={currentConfig.title || ''}
+              onChange={(e) => updateConfig({ title: e.target.value })}
+              placeholder="차량 위치 지도"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+            />
+          </div>
+
+          {/* 위도 컬럼 설정 */}
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-gray-700">
+              위도 컬럼 (Latitude)
+              <span className="text-red-500 ml-1">*</span>
+            </label>
+            <select
+              value={currentConfig.latitudeColumn || ''}
+              onChange={(e) => updateConfig({ latitudeColumn: e.target.value })}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+            >
+              <option value="">선택하세요</option>
+              {availableColumns.map((col) => (
+                <option key={col} value={col}>
+                  {col} {sampleData[col] && `(예: ${sampleData[col]})`}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* 경도 컬럼 설정 */}
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-gray-700">
+              경도 컬럼 (Longitude)
+              <span className="text-red-500 ml-1">*</span>
+            </label>
+            <select
+              value={currentConfig.longitudeColumn || ''}
+              onChange={(e) => updateConfig({ longitudeColumn: e.target.value })}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+            >
+              <option value="">선택하세요</option>
+              {availableColumns.map((col) => (
+                <option key={col} value={col}>
+                  {col} {sampleData[col] && `(예: ${sampleData[col]})`}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* 라벨 컬럼 (선택사항) */}
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-gray-700">
+              라벨 컬럼 (마커 표시명)
+            </label>
+            <select
+              value={currentConfig.labelColumn || ''}
+              onChange={(e) => updateConfig({ labelColumn: e.target.value })}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+            >
+              <option value="">선택하세요 (선택사항)</option>
+              {availableColumns.map((col) => (
+                <option key={col} value={col}>
+                  {col}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* 상태 컬럼 (선택사항) */}
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-gray-700">
+              상태 컬럼 (마커 색상)
+            </label>
+            <select
+              value={currentConfig.statusColumn || ''}
+              onChange={(e) => updateConfig({ statusColumn: e.target.value })}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+            >
+              <option value="">선택하세요 (선택사항)</option>
+              {availableColumns.map((col) => (
+                <option key={col} value={col}>
+                  {col}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* 설정 미리보기 */}
+          <div className="p-3 bg-gray-50 rounded-lg">
+            <div className="text-sm font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
+            <div className="text-xs text-muted-foreground space-y-1">
+              <div><strong>위도:</strong> {currentConfig.latitudeColumn || '미설정'}</div>
+              <div><strong>경도:</strong> {currentConfig.longitudeColumn || '미설정'}</div>
+              <div><strong>라벨:</strong> {currentConfig.labelColumn || '없음'}</div>
+              <div><strong>상태:</strong> {currentConfig.statusColumn || '없음'}</div>
+              <div><strong>데이터 개수:</strong> {queryResult.rows.length}개</div>
+            </div>
+          </div>
+
+          {/* 필수 필드 확인 */}
+          {(!currentConfig.latitudeColumn || !currentConfig.longitudeColumn) && (
+            <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+              <div className="text-red-800 text-sm">
+                ⚠️ 위도와 경도 컬럼을 반드시 선택해야 지도에 표시할 수 있습니다.
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+

frontend/components/admin/dashboard/types.ts

@@ -17,6 +17,8 @@ export type ElementSubtype =
   | "clock"
   | "calendar"
   | "calculator"
+  | "vehicle-status"
+  | "vehicle-list"
   | "vehicle-map"
   | "delivery-status"
   | "risk-alert"
@@ -78,6 +80,12 @@ export interface ChartConfig {
   colors?: string[]; // 차트 색상
   title?: string; // 차트 제목
   showLegend?: boolean; // 범례 표시 여부
+  
+  // 지도 관련 설정
+  latitudeColumn?: string; // 위도 컬럼
+  longitudeColumn?: string; // 경도 컬럼
+  labelColumn?: string; // 라벨 컬럼
+  statusColumn?: string; // 상태 컬럼
 }
 
 export interface QueryResult {

frontend/components/dashboard/widgets/DeliveryStatusWidget.tsx

@@ -27,40 +27,62 @@ interface CustomerIssue {
 }
 
 interface DeliveryStatusWidgetProps {
+  element?: any; // 대시보드 요소 (dataSource 포함)
   refreshInterval?: number;
 }
 
-export default function DeliveryStatusWidget({ refreshInterval = 60000 }: DeliveryStatusWidgetProps) {
+export default function DeliveryStatusWidget({ element, refreshInterval = 60000 }: DeliveryStatusWidgetProps) {
   const [deliveries, setDeliveries] = useState<DeliveryItem[]>([]);
   const [issues, setIssues] = useState<CustomerIssue[]>([]);
-  const [todayStats, setTodayStats] = useState({
-    shipped: 0,
-    delivered: 0,
-  });
   const [isLoading, setIsLoading] = useState(false);
   const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
+  const [selectedStatus, setSelectedStatus] = useState<string>("all"); // 필터 상태 추가
 
   const loadData = async () => {
     setIsLoading(true);
 
-    // TODO: 실제 API 연동 시 아래 주석 해제
-    // try {
-    //   const response = await fetch('/api/delivery/status', {
-    //     headers: {
-    //       'Authorization': `Bearer ${localStorage.getItem('authToken')}`,
-    //     },
-    //   });
-    //   const data = await response.json();
-    //   setDeliveries(data.deliveries);
-    //   setIssues(data.issues);
-    //   setTodayStats(data.todayStats);
-    //   setLastUpdate(new Date());
-    // } catch (error) {
-    //   console.error('배송 데이터 로드 실패:', error);
-    // } finally {
-    //   setIsLoading(false);
-    // }
+    // 설정된 쿼리가 없으면 로딩 중단 (더미 데이터 사용 안 함)
+    if (!element?.dataSource?.query) {
+      setIsLoading(false);
+      setDeliveries([]);
+      setIssues([]);
+      return;
+    }
 
+    try {
+      const response = await fetch("/api/dashboards/execute-query", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${typeof window !== "undefined" ? localStorage.getItem("authToken") || "" : ""}`,
+        },
+        body: JSON.stringify({ query: element.dataSource.query }),
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        if (result.success && result.data.rows.length > 0) {
+          // TODO: DB 데이터를 DeliveryItem 형식으로 변환
+          setDeliveries(result.data.rows);
+          setLastUpdate(new Date());
+        }
+      }
+    } catch (error) {
+      console.error("배송 데이터 로드 실패:", error);
+    }
+
+    setIsLoading(false);
+  };
+
+  // 데이터 로드 및 자동 새로고침
+  useEffect(() => {
+    loadData();
+    const interval = setInterval(loadData, refreshInterval);
+    return () => clearInterval(interval);
+  }, [element?.dataSource?.query, refreshInterval]);
+
+  // 더미 데이터 완전히 제거 (아래 코드 삭제)
+  /*
     // 가상 배송 데이터 (개발용 - 실제 DB 연동 시 삭제)
     const dummyDeliveries: DeliveryItem[] = [
       {
@@ -148,23 +170,7 @@ export default function DeliveryStatusWidget({ refreshInterval = 60000 }: Delive
       },
     ];
 
-    setTimeout(() => {
-      setDeliveries(dummyDeliveries);
-      setIssues(dummyIssues);
-      setTodayStats({
-        shipped: 24,
-        delivered: 18,
-      });
-      setLastUpdate(new Date());
-      setIsLoading(false);
-    }, 500);
-  };
-
-  useEffect(() => {
-    loadData();
-    const interval = setInterval(loadData, refreshInterval);
-    return () => clearInterval(interval);
-  }, [refreshInterval]);
+  */
 
   const getStatusColor = (status: DeliveryItem["status"]) => {
     switch (status) {
@@ -259,7 +265,32 @@ export default function DeliveryStatusWidget({ refreshInterval = 60000 }: Delive
     pickup_waiting: deliveries.filter((d) => d.status === "pickup_waiting").length,
   };
 
-  const delayedDeliveries = deliveries.filter((d) => d.status === "delayed");
+  // 필터링된 배송 목록
+  const filteredDeliveries = selectedStatus === "all" 
+    ? deliveries 
+    : deliveries.filter((d) => d.status === selectedStatus);
+
+  // 오늘 통계 계산
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  
+  const todayStats = {
+    // 오늘 발송 건수 (created_at이 오늘인 것)
+    shipped: deliveries.filter((d: any) => {
+      if (!d.created_at) return false;
+      const createdDate = new Date(d.created_at);
+      createdDate.setHours(0, 0, 0, 0);
+      return createdDate.getTime() === today.getTime();
+    }).length,
+    // 오늘 도착 건수 (status가 delivered이고 estimated_delivery가 오늘인 것)
+    delivered: deliveries.filter((d: any) => {
+      if (d.status !== "delivered" && d.status !== "delivered") return false;
+      if (!d.estimated_delivery && !d.estimatedDelivery) return false;
+      const deliveredDate = new Date(d.estimated_delivery || d.estimatedDelivery);
+      deliveredDate.setHours(0, 0, 0, 0);
+      return deliveredDate.getTime() === today.getTime();
+    }).length,
+  };
 
   return (
     <div className="h-full w-full bg-gradient-to-br from-slate-50 to-blue-50 p-4 overflow-auto">
@@ -284,24 +315,63 @@ export default function DeliveryStatusWidget({ refreshInterval = 60000 }: Delive
 
       {/* 배송 상태 요약 */}
       <div className="mb-3">
-        <h4 className="mb-2 text-sm font-semibold text-gray-700">배송 상태 요약</h4>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
-          <div className="rounded-lg bg-white p-1.5 shadow-sm border-l-4 border-blue-500">
+        <h4 className="mb-2 text-sm font-semibold text-gray-700">배송 상태 요약 (클릭하여 필터링)</h4>
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
+          <button
+            onClick={() => setSelectedStatus("all")}
+            className={`rounded-lg p-1.5 shadow-sm border-l-4 transition-all ${
+              selectedStatus === "all"
+                ? "border-gray-900 bg-gray-100 ring-2 ring-gray-900"
+                : "border-gray-500 bg-white hover:bg-gray-50"
+            }`}
+          >
+            <div className="text-xs text-gray-600 mb-0.5">전체</div>
+            <div className="text-lg font-bold text-gray-900">{deliveries.length}</div>
+          </button>
+          <button
+            onClick={() => setSelectedStatus("in_transit")}
+            className={`rounded-lg p-1.5 shadow-sm border-l-4 transition-all ${
+              selectedStatus === "in_transit"
+                ? "border-blue-900 bg-blue-100 ring-2 ring-blue-900"
+                : "border-blue-500 bg-white hover:bg-blue-50"
+            }`}
+          >
             <div className="text-xs text-gray-600 mb-0.5">배송중</div>
             <div className="text-lg font-bold text-blue-600">{statusStats.in_transit}</div>
-          </div>
-          <div className="rounded-lg bg-white p-1.5 shadow-sm border-l-4 border-green-500">
+          </button>
+          <button
+            onClick={() => setSelectedStatus("delivered")}
+            className={`rounded-lg p-1.5 shadow-sm border-l-4 transition-all ${
+              selectedStatus === "delivered"
+                ? "border-green-900 bg-green-100 ring-2 ring-green-900"
+                : "border-green-500 bg-white hover:bg-green-50"
+            }`}
+          >
             <div className="text-xs text-gray-600 mb-0.5">완료</div>
             <div className="text-lg font-bold text-green-600">{statusStats.delivered}</div>
-          </div>
-          <div className="rounded-lg bg-white p-1.5 shadow-sm border-l-4 border-red-500">
+          </button>
+          <button
+            onClick={() => setSelectedStatus("delayed")}
+            className={`rounded-lg p-1.5 shadow-sm border-l-4 transition-all ${
+              selectedStatus === "delayed"
+                ? "border-red-900 bg-red-100 ring-2 ring-red-900"
+                : "border-red-500 bg-white hover:bg-red-50"
+            }`}
+          >
             <div className="text-xs text-gray-600 mb-0.5">지연</div>
             <div className="text-lg font-bold text-red-600">{statusStats.delayed}</div>
-          </div>
-          <div className="rounded-lg bg-white p-1.5 shadow-sm border-l-4 border-yellow-500">
+          </button>
+          <button
+            onClick={() => setSelectedStatus("pickup_waiting")}
+            className={`rounded-lg p-1.5 shadow-sm border-l-4 transition-all ${
+              selectedStatus === "pickup_waiting"
+                ? "border-yellow-900 bg-yellow-100 ring-2 ring-yellow-900"
+                : "border-yellow-500 bg-white hover:bg-yellow-50"
+            }`}
+          >
             <div className="text-xs text-gray-600 mb-0.5">픽업 대기</div>
             <div className="text-lg font-bold text-yellow-600">{statusStats.pickup_waiting}</div>
-          </div>
+          </button>
         </div>
       </div>
 
@@ -322,20 +392,24 @@ export default function DeliveryStatusWidget({ refreshInterval = 60000 }: Delive
         </div>
       </div>
 
-      {/* 지연 중인 화물 리스트 */}
+      {/* 필터링된 화물 리스트 */}
       <div className="mb-3">
         <h4 className="mb-2 text-sm font-semibold text-gray-700 flex items-center gap-2">
-          <AlertTriangle className="h-4 w-4 text-red-600" />
-          지연 중인 화물 ({delayedDeliveries.length})
+          <Package className="h-4 w-4 text-gray-600" />
+          {selectedStatus === "all" && `전체 화물 (${filteredDeliveries.length})`}
+          {selectedStatus === "in_transit" && `배송 중인 화물 (${filteredDeliveries.length})`}
+          {selectedStatus === "delivered" && `배송 완료 (${filteredDeliveries.length})`}
+          {selectedStatus === "delayed" && `지연 중인 화물 (${filteredDeliveries.length})`}
+          {selectedStatus === "pickup_waiting" && `픽업 대기 (${filteredDeliveries.length})`}
         </h4>
         <div className="rounded-lg bg-white shadow-sm border border-gray-200 overflow-hidden">
-          {delayedDeliveries.length === 0 ? (
+          {filteredDeliveries.length === 0 ? (
             <div className="p-6 text-center text-sm text-gray-500">
-              지연 중인 화물이 없습니다
+              {selectedStatus === "all" ? "화물이 없습니다" : "해당 상태의 화물이 없습니다"}
             </div>
           ) : (
             <div className="max-h-[200px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
-              {delayedDeliveries.map((delivery) => (
+              {filteredDeliveries.map((delivery) => (
                 <div
                   key={delivery.id}
                   className="p-3 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors"

frontend/components/dashboard/widgets/VehicleListWidget.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { RefreshCw, Truck, Navigation, Gauge } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface Vehicle {
+  id: string;
+  vehicle_number: string;
+  vehicle_name: string;
+  driver_name: string;
+  latitude: number;
+  longitude: number;
+  status: string;
+  speed: number;
+  destination: string;
+}
+
+interface VehicleListWidgetProps {
+  element?: any; // 대시보드 요소 (dataSource 포함)
+  refreshInterval?: number;
+}
+
+export default function VehicleListWidget({ element, refreshInterval = 30000 }: VehicleListWidgetProps) {
+  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
+  const [selectedStatus, setSelectedStatus] = useState<string>("all");
+
+  const loadVehicles = async () => {
+    setIsLoading(true);
+
+    // 설정된 쿼리가 없으면 로딩 중단 (기본 쿼리 사용 안 함)
+    if (!element?.dataSource?.query) {
+      setIsLoading(false);
+      return;
+    }
+    
+    const query = element.dataSource.query;
+
+    try {
+      const response = await fetch("/api/dashboards/execute-query", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${typeof window !== "undefined" ? localStorage.getItem("authToken") || "" : ""}`,
+        },
+        body: JSON.stringify({ query }),
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        if (result.success && result.data.rows.length > 0) {
+          setVehicles(result.data.rows);
+          setLastUpdate(new Date());
+        }
+      }
+    } catch (error) {
+      console.error("차량 목록 로드 실패:", error);
+    }
+
+    setIsLoading(false);
+  };
+
+  // 데이터 로드 및 자동 새로고침
+  useEffect(() => {
+    loadVehicles();
+    const interval = setInterval(loadVehicles, refreshInterval);
+    return () => clearInterval(interval);
+  }, [element?.dataSource?.query, refreshInterval]);
+
+  // 설정되지 않았을 때도 빈 상태로 표시 (안내 메시지 제거)
+
+  const getStatusColor = (status: string) => {
+    const s = status?.toLowerCase() || "";
+    if (s === "active" || s === "running") return "bg-green-500";
+    if (s === "inactive" || s === "idle") return "bg-yellow-500";
+    if (s === "maintenance") return "bg-orange-500";
+    if (s === "warning" || s === "breakdown") return "bg-red-500";
+    return "bg-gray-500";
+  };
+
+  const getStatusText = (status: string) => {
+    const s = status?.toLowerCase() || "";
+    if (s === "active" || s === "running") return "운행 중";
+    if (s === "inactive" || s === "idle") return "대기";
+    if (s === "maintenance") return "정비";
+    if (s === "warning" || s === "breakdown") return "고장";
+    return "알 수 없음";
+  };
+
+  const filteredVehicles =
+    selectedStatus === "all" ? vehicles : vehicles.filter((v) => v.status?.toLowerCase() === selectedStatus);
+
+  return (
+    <div className="flex h-full w-full flex-col bg-gradient-to-br from-slate-50 to-blue-50 p-4">
+      {/* 헤더 */}
+      <div className="mb-3 flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-bold text-gray-900">📋 차량 목록</h3>
+          <p className="text-xs text-gray-500">마지막 업데이트: {lastUpdate.toLocaleTimeString("ko-KR")}</p>
+        </div>
+        <Button variant="outline" size="sm" onClick={loadVehicles} disabled={isLoading} className="h-8 w-8 p-0">
+          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
+        </Button>
+      </div>
+
+      {/* 필터 버튼 */}
+      <div className="mb-3 flex gap-2 overflow-x-auto">
+        <button
+          onClick={() => setSelectedStatus("all")}
+          className={`whitespace-nowrap rounded-md px-3 py-1 text-xs font-medium transition-colors ${
+            selectedStatus === "all" ? "bg-gray-900 text-white" : "bg-white text-gray-700 hover:bg-gray-100"
+          }`}
+        >
+          전체 ({vehicles.length})
+        </button>
+        <button
+          onClick={() => setSelectedStatus("active")}
+          className={`whitespace-nowrap rounded-md px-3 py-1 text-xs font-medium transition-colors ${
+            selectedStatus === "active" ? "bg-green-500 text-white" : "bg-white text-gray-700 hover:bg-gray-100"
+          }`}
+        >
+          운행 중 ({vehicles.filter((v) => v.status?.toLowerCase() === "active").length})
+        </button>
+        <button
+          onClick={() => setSelectedStatus("inactive")}
+          className={`whitespace-nowrap rounded-md px-3 py-1 text-xs font-medium transition-colors ${
+            selectedStatus === "inactive" ? "bg-yellow-500 text-white" : "bg-white text-gray-700 hover:bg-gray-100"
+          }`}
+        >
+          대기 ({vehicles.filter((v) => v.status?.toLowerCase() === "inactive").length})
+        </button>
+        <button
+          onClick={() => setSelectedStatus("maintenance")}
+          className={`whitespace-nowrap rounded-md px-3 py-1 text-xs font-medium transition-colors ${
+            selectedStatus === "maintenance" ? "bg-orange-500 text-white" : "bg-white text-gray-700 hover:bg-gray-100"
+          }`}
+        >
+          정비 ({vehicles.filter((v) => v.status?.toLowerCase() === "maintenance").length})
+        </button>
+        <button
+          onClick={() => setSelectedStatus("warning")}
+          className={`whitespace-nowrap rounded-md px-3 py-1 text-xs font-medium transition-colors ${
+            selectedStatus === "warning" ? "bg-red-500 text-white" : "bg-white text-gray-700 hover:bg-gray-100"
+          }`}
+        >
+          고장 ({vehicles.filter((v) => v.status?.toLowerCase() === "warning").length})
+        </button>
+      </div>
+
+      {/* 차량 목록 */}
+      <div className="flex-1 overflow-y-auto">
+        {filteredVehicles.length === 0 ? (
+          <div className="flex h-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-white">
+            <div className="text-center">
+              <Truck className="mx-auto h-12 w-12 text-gray-300" />
+              <p className="mt-2 text-sm text-gray-500">차량이 없습니다</p>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {filteredVehicles.map((vehicle) => (
+              <div
+                key={vehicle.id}
+                className="rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all hover:shadow-md"
+              >
+                <div className="mb-2 flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Truck className="h-4 w-4 text-gray-600" />
+                    <span className="font-semibold text-gray-900">{vehicle.vehicle_name}</span>
+                  </div>
+                  <span className={`rounded-full px-2 py-0.5 text-xs font-semibold text-white ${getStatusColor(vehicle.status)}`}>
+                    {getStatusText(vehicle.status)}
+                  </span>
+                </div>
+
+                <div className="space-y-1 text-xs text-gray-600">
+                  <div className="flex items-center justify-between">
+                    <span className="text-gray-500">차량번호</span>
+                    <span className="font-mono font-medium">{vehicle.vehicle_number}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-gray-500">기사</span>
+                    <span className="font-medium">{vehicle.driver_name || "미배정"}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Navigation className="h-3 w-3 text-gray-400" />
+                    <span className="flex-1 truncate text-gray-700">{vehicle.destination || "대기 중"}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Gauge className="h-3 w-3 text-gray-400" />
+                    <span className="text-gray-700">{vehicle.speed || 0} km/h</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import dynamic from "next/dynamic";
+import { Button } from "@/components/ui/button";
+import { RefreshCw } from "lucide-react";
+import "leaflet/dist/leaflet.css";
+
+// Leaflet 아이콘 경로 설정 (엑박 방지)
+if (typeof window !== "undefined") {
+  const L = require("leaflet");
+  delete (L.Icon.Default.prototype as any)._getIconUrl;
+  L.Icon.Default.mergeOptions({
+    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  });
+}
+
+// Leaflet 동적 import (SSR 방지)
+const MapContainer = dynamic(() => import("react-leaflet").then((mod) => mod.MapContainer), { ssr: false });
+const TileLayer = dynamic(() => import("react-leaflet").then((mod) => mod.TileLayer), { ssr: false });
+const Marker = dynamic(() => import("react-leaflet").then((mod) => mod.Marker), { ssr: false });
+const Popup = dynamic(() => import("react-leaflet").then((mod) => mod.Popup), { ssr: false });
+const Circle = dynamic(() => import("react-leaflet").then((mod) => mod.Circle), { ssr: false });
+
+// 브이월드 API 키
+const VWORLD_API_KEY = "97AD30D5-FDC4-3481-99C3-158E36422033";
+
+interface Vehicle {
+  id: string;
+  name: string;
+  driver: string;
+  lat: number;
+  lng: number;
+  status: "active" | "inactive" | "maintenance" | "warning";
+  speed: number;
+  destination: string;
+}
+
+interface VehicleMapOnlyWidgetProps {
+  element?: any; // 대시보드 요소 (dataSource, chartConfig 포함)
+  refreshInterval?: number;
+}
+
+export default function VehicleMapOnlyWidget({ element, refreshInterval = 30000 }: VehicleMapOnlyWidgetProps) {
+  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
+
+  const loadVehicles = async () => {
+    setIsLoading(true);
+
+    // 설정된 쿼리가 없으면 로딩 중단
+    if (!element?.dataSource?.query) {
+      setIsLoading(false);
+      setVehicles([]);
+      return;
+    }
+
+    // 설정된 컬럼 매핑 확인
+    if (!element?.chartConfig?.latitudeColumn || !element?.chartConfig?.longitudeColumn) {
+      setIsLoading(false);
+      setVehicles([]);
+      return;
+    }
+
+    try {
+      const response = await fetch("/api/dashboards/execute-query", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${typeof window !== "undefined" ? localStorage.getItem("authToken") || "" : ""}`,
+        },
+        body: JSON.stringify({
+          query: element.dataSource.query,
+        }),
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        if (result.success && result.data.rows.length > 0) {
+          // 설정된 컬럼 매핑 가져오기
+          const latCol = element.chartConfig.latitudeColumn;
+          const lngCol = element.chartConfig.longitudeColumn;
+          const labelCol = element.chartConfig.labelColumn || "name";
+          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 || "대기 중",
+          }));
+
+          setVehicles(vehiclesFromDB);
+          setLastUpdate(new Date());
+          setIsLoading(false);
+          return;
+        }
+      }
+    } catch (error) {
+      console.error("차량 데이터 로드 실패:", error);
+    }
+
+    setIsLoading(false);
+  };
+
+  // useEffect는 항상 같은 순서로 호출되어야 함 (early return 전에 배치)
+  useEffect(() => {
+    loadVehicles();
+    const interval = setInterval(loadVehicles, refreshInterval);
+    return () => clearInterval(interval);
+  }, [element?.dataSource?.query, element?.chartConfig?.latitudeColumn, element?.chartConfig?.longitudeColumn, refreshInterval]);
+
+  // 쿼리 없으면 빈 지도만 표시 (안내 메시지 제거)
+
+  const getStatusColor = (status: Vehicle["status"]) => {
+    switch (status) {
+      case "active":
+        return "#22c55e"; // 운행 중 - 초록
+      case "inactive":
+        return "#eab308"; // 대기 - 노랑
+      case "maintenance":
+        return "#f97316"; // 정비 - 주황
+      case "warning":
+        return "#ef4444"; // 고장 - 빨강
+      default:
+        return "#6b7280"; // 기타 - 회색
+    }
+  };
+
+  const getStatusText = (status: Vehicle["status"]) => {
+    switch (status) {
+      case "active":
+        return "운행 중";
+      case "inactive":
+        return "대기";
+      case "maintenance":
+        return "정비";
+      case "warning":
+        return "고장";
+      default:
+        return "알 수 없음";
+    }
+  };
+
+  return (
+    <div className="h-full w-full bg-gradient-to-br from-slate-50 to-blue-50 p-4">
+      {/* 헤더 */}
+      <div className="mb-3 flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-bold text-gray-900">🗺️ 차량 위치 지도</h3>
+          <p className="text-xs text-gray-500">마지막 업데이트: {lastUpdate.toLocaleTimeString("ko-KR")}</p>
+        </div>
+        <Button variant="outline" size="sm" onClick={loadVehicles} disabled={isLoading} className="h-8 w-8 p-0">
+          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
+        </Button>
+      </div>
+
+      {/* 지도 영역 - 브이월드 타일맵 */}
+      <div className="h-[calc(100%-60px)]">
+        <div className="relative h-full overflow-hidden rounded-lg border-2 border-gray-300 bg-white">
+          <MapContainer
+            center={[36.5, 127.5]}
+            zoom={7}
+            style={{ height: "100%", width: "100%" }}
+            zoomControl={true}
+            preferCanvas={true}
+          >
+              {/* 브이월드 타일맵 (HTTPS, 캐싱 적용) */}
+              <TileLayer
+                url={`https://api.vworld.kr/req/wmts/1.0.0/${VWORLD_API_KEY}/Base/{z}/{y}/{x}.png`}
+                attribution='&copy; <a href="https://www.vworld.kr">VWorld (국토교통부)</a>'
+                maxZoom={19}
+                minZoom={7}
+                updateWhenIdle={true}
+                updateWhenZooming={false}
+                keepBuffer={2}
+              />
+
+              {/* 차량 마커 */}
+              {vehicles.map((vehicle) => (
+                <React.Fragment key={vehicle.id}>
+                  <Circle
+                    center={[vehicle.lat, vehicle.lng]}
+                    radius={150}
+                    pathOptions={{
+                      color: getStatusColor(vehicle.status),
+                      fillColor: getStatusColor(vehicle.status),
+                      fillOpacity: 0.3,
+                    }}
+                  />
+                  <Marker position={[vehicle.lat, vehicle.lng]}>
+                    <Popup>
+                      <div className="text-xs">
+                        <div className="mb-1 text-sm font-bold">{vehicle.name}</div>
+                        <div>
+                          <strong>기사:</strong> {vehicle.driver}
+                        </div>
+                        <div>
+                          <strong>상태:</strong> {getStatusText(vehicle.status)}
+                        </div>
+                        <div>
+                          <strong>속도:</strong> {vehicle.speed} km/h
+                        </div>
+                        <div>
+                          <strong>목적지:</strong> {vehicle.destination}
+                        </div>
+                      </div>
+                    </Popup>
+                  </Marker>
+                </React.Fragment>
+              ))}
+            </MapContainer>
+
+          {/* 지도 정보 */}
+          <div className="absolute right-2 top-2 z-[1000] rounded-lg bg-white/90 p-2 shadow-lg backdrop-blur-sm">
+            <div className="text-xs text-gray-600">
+              <div className="mb-1 font-semibold">🗺️ 브이월드 (VWorld)</div>
+              <div className="text-xs">국토교통부 공식 지도</div>
+            </div>
+          </div>
+
+          {/* 차량 수 표시 또는 설정 안내 */}
+          <div className="absolute bottom-2 left-2 z-[1000] rounded-lg bg-white/90 p-2 shadow-lg backdrop-blur-sm">
+            {vehicles.length > 0 ? (
+              <div className="text-xs font-semibold text-gray-900">총 {vehicles.length}대 모니터링 중</div>
+            ) : (
+              <div className="text-xs text-gray-600">
+                ⚙️ 톱니바퀴 클릭하여 데이터 연결
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

frontend/components/dashboard/widgets/VehicleMapWidget.tsx

@@ -1,546 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import dynamic from "next/dynamic";
-import { Button } from "@/components/ui/button";
-import { RefreshCw, Truck, Navigation } from "lucide-react";
-import "leaflet/dist/leaflet.css";
-
-// Leaflet 아이콘 경로 설정 (엑박 방지)
-if (typeof window !== "undefined") {
-  const L = require("leaflet");
-  delete (L.Icon.Default.prototype as any)._getIconUrl;
-  L.Icon.Default.mergeOptions({
-    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
-    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
-    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
-  });
-}
-
-// Leaflet 동적 import (SSR 방지)
-const MapContainer = dynamic(
-  () => import("react-leaflet").then((mod) => mod.MapContainer),
-  { ssr: false }
-);
-const TileLayer = dynamic(
-  () => import("react-leaflet").then((mod) => mod.TileLayer),
-  { ssr: false }
-);
-const Marker = dynamic(
-  () => import("react-leaflet").then((mod) => mod.Marker),
-  { ssr: false }
-);
-const Popup = dynamic(
-  () => import("react-leaflet").then((mod) => mod.Popup),
-  { ssr: false }
-);
-const Circle = dynamic(
-  () => import("react-leaflet").then((mod) => mod.Circle),
-  { ssr: false }
-);
-
-// 브이월드 API 키
-const VWORLD_API_KEY = "97AD30D5-FDC4-3481-99C3-158E36422033";
-
-interface Vehicle {
-  id: string;
-  name: string;
-  driver: string;
-  lat: number;
-  lng: number;
-  status: "running" | "idle" | "maintenance" | "breakdown";
-  speed: number;
-  destination: string;
-  distance: number;
-  fuel: number;
-  avgSpeed: number;
-  temperature?: number;
-  isRefrigerated: boolean;
-}
-
-interface VehicleMapWidgetProps {
-  refreshInterval?: number;
-}
-
-export default function VehicleMapWidget({ refreshInterval = 30000 }: VehicleMapWidgetProps) {
-  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
-  const [selectedVehicle, setSelectedVehicle] = useState<Vehicle | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
-
-  const loadVehicles = async () => {
-    setIsLoading(true);
-    
-    const dummyVehicles: Vehicle[] = [
-      {
-        id: "V001",
-        name: "냉동차 1호",
-        driver: "김기사",
-        lat: 35.1796 + (Math.random() - 0.5) * 0.05, // 부산
-        lng: 129.0756 + (Math.random() - 0.5) * 0.05,
-        status: "running",
-        speed: 55 + Math.floor(Math.random() * 20),
-        destination: "부산 → 울산",
-        distance: 45 + Math.floor(Math.random() * 20),
-        fuel: 85 + Math.floor(Math.random() * 15),
-        avgSpeed: 62,
-        temperature: -18 + Math.floor(Math.random() * 3),
-        isRefrigerated: true,
-      },
-      {
-        id: "V002",
-        name: "일반 화물차 2호",
-        driver: "이기사",
-        lat: 37.4563, // 인천
-        lng: 126.7052,
-        status: "idle",
-        speed: 0,
-        destination: "대기 중",
-        distance: 0,
-        fuel: 5,
-        avgSpeed: 0,
-        isRefrigerated: false,
-      },
-      {
-        id: "V003",
-        name: "냉장차 3호",
-        driver: "박기사",
-        lat: 36.3504 + (Math.random() - 0.5) * 0.05, // 대전
-        lng: 127.3845 + (Math.random() - 0.5) * 0.05,
-        status: "running",
-        speed: 40 + Math.floor(Math.random() * 15),
-        destination: "대전 → 세종",
-        distance: 22 + Math.floor(Math.random() * 10),
-        fuel: 42 + Math.floor(Math.random() * 10),
-        avgSpeed: 58,
-        temperature: 2 + Math.floor(Math.random() * 4),
-        isRefrigerated: true,
-      },
-      {
-        id: "V004",
-        name: "일반 화물차 4호",
-        driver: "최기사",
-        lat: 35.8714, // 대구
-        lng: 128.6014,
-        status: "maintenance",
-        speed: 0,
-        destination: "정비소",
-        distance: 0,
-        fuel: 0,
-        avgSpeed: 0,
-        isRefrigerated: false,
-      },
-      {
-        id: "V005",
-        name: "냉동차 5호",
-        driver: "정기사",
-        lat: 33.4996 + (Math.random() - 0.5) * 0.05, // 제주
-        lng: 126.5312 + (Math.random() - 0.5) * 0.05,
-        status: "running",
-        speed: 45 + Math.floor(Math.random() * 15),
-        destination: "제주 → 서귀포",
-        distance: 28 + Math.floor(Math.random() * 10),
-        fuel: 52 + Math.floor(Math.random() * 10),
-        avgSpeed: 54,
-        temperature: -20 + Math.floor(Math.random() * 2),
-        isRefrigerated: true,
-      },
-      {
-        id: "V006",
-        name: "일반 화물차 6호",
-        driver: "강기사",
-        lat: 35.1595, // 광주
-        lng: 126.8526,
-        status: "breakdown",
-        speed: 0,
-        destination: "고장 (견인 대기)",
-        distance: 65,
-        fuel: 18,
-        avgSpeed: 0,
-        isRefrigerated: false,
-      },
-      {
-        id: "V007",
-        name: "냉장차 7호",
-        driver: "윤기사",
-        lat: 37.5665 + (Math.random() - 0.5) * 0.05, // 서울
-        lng: 126.9780 + (Math.random() - 0.5) * 0.05,
-        status: "running",
-        speed: 60 + Math.floor(Math.random() * 15),
-        destination: "서울 → 수원",
-        distance: 35 + Math.floor(Math.random() * 10),
-        fuel: 68 + Math.floor(Math.random() * 10),
-        avgSpeed: 65,
-        temperature: 3 + Math.floor(Math.random() * 3),
-        isRefrigerated: true,
-      },
-      {
-        id: "V008",
-        name: "일반 화물차 8호",
-        driver: "한기사",
-        lat: 37.8813 + (Math.random() - 0.5) * 0.05, // 춘천
-        lng: 127.7300 + (Math.random() - 0.5) * 0.05,
-        status: "running",
-        speed: 50 + Math.floor(Math.random() * 15),
-        destination: "춘천 → 강릉",
-        distance: 95 + Math.floor(Math.random() * 20),
-        fuel: 75 + Math.floor(Math.random() * 15),
-        avgSpeed: 58,
-        isRefrigerated: false,
-      },
-    ];
-
-    setTimeout(() => {
-      setVehicles(dummyVehicles);
-      setLastUpdate(new Date());
-      setIsLoading(false);
-    }, 500);
-  };
-
-  useEffect(() => {
-    loadVehicles();
-    const interval = setInterval(loadVehicles, refreshInterval);
-    return () => clearInterval(interval);
-  }, [refreshInterval]);
-
-  const getStatusColor = (status: Vehicle["status"]) => {
-    switch (status) {
-      case "running":
-        return "#22c55e";
-      case "idle":
-        return "#eab308";
-      case "maintenance":
-        return "#f97316";
-      case "breakdown":
-        return "#ef4444";
-      default:
-        return "#6b7280";
-    }
-  };
-
-  const getStatusText = (status: Vehicle["status"]) => {
-    switch (status) {
-      case "running":
-        return "운행 중";
-      case "idle":
-        return "대기";
-      case "maintenance":
-        return "정비";
-      case "breakdown":
-        return "고장";
-      default:
-        return "알 수 없음";
-    }
-  };
-
-  const statusStats = {
-    running: vehicles.filter((v) => v.status === "running").length,
-    idle: vehicles.filter((v) => v.status === "idle").length,
-    maintenance: vehicles.filter((v) => v.status === "maintenance").length,
-    breakdown: vehicles.filter((v) => v.status === "breakdown").length,
-  };
-
-  return (
-    <div className="h-full w-full bg-gradient-to-br from-slate-50 to-blue-50 p-4">
-      {/* 헤더 */}
-      <div className="mb-3 flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-bold text-gray-900">🚚 실시간 차량 위치</h3>
-          <p className="text-xs text-gray-500">
-            마지막 업데이트: {lastUpdate.toLocaleTimeString("ko-KR")}
-          </p>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={loadVehicles}
-          disabled={isLoading}
-          className="h-8 w-8 p-0"
-        >
-          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
-        </Button>
-      </div>
-
-      {/* 차량 상태 요약 */}
-      <div className="mb-3 grid grid-cols-2 md:grid-cols-4 gap-2">
-        <div className="rounded-lg bg-white p-1.5 shadow-sm border-l-4 border-green-500">
-          <div className="text-xs text-gray-600 mb-0.5">운행 중</div>
-          <div className="text-lg font-bold text-green-600">{statusStats.running}대</div>
-        </div>
-        <div className="rounded-lg bg-white p-1.5 shadow-sm border-l-4 border-yellow-500">
-          <div className="text-xs text-gray-600 mb-0.5">대기</div>
-          <div className="text-lg font-bold text-yellow-600">{statusStats.idle}대</div>
-        </div>
-        <div className="rounded-lg bg-white p-1.5 shadow-sm border-l-4 border-orange-500">
-          <div className="text-xs text-gray-600 mb-0.5">정비</div>
-          <div className="text-lg font-bold text-orange-600">{statusStats.maintenance}대</div>
-        </div>
-        <div className="rounded-lg bg-white p-1.5 shadow-sm border-l-4 border-red-500">
-          <div className="text-xs text-gray-600 mb-0.5">고장</div>
-          <div className="text-lg font-bold text-red-600">{statusStats.breakdown}대</div>
-        </div>
-      </div>
-
-      <div className="flex h-[calc(100%-120px)] gap-3">
-        {/* 지도 영역 - 브이월드 타일맵 */}
-        <div className="flex-1 min-w-0 overflow-auto">
-          <div className="relative h-full min-h-[400px] min-w-[600px] rounded-lg overflow-hidden border-2 border-gray-300 bg-white">
-            {typeof window !== "undefined" && (
-              <MapContainer
-                center={[36.5, 127.5]}
-                zoom={7}
-                style={{ height: "100%", width: "100%" }}
-                zoomControl={true}
-                preferCanvas={true}
-              >
-                {/* 브이월드 타일맵 (HTTPS, 캐싱 적용) */}
-                <TileLayer
-                  url={`https://api.vworld.kr/req/wmts/1.0.0/${VWORLD_API_KEY}/Base/{z}/{y}/{x}.png`}
-                  attribution='&copy; <a href="https://www.vworld.kr">VWorld (국토교통부)</a>'
-                  maxZoom={19}
-                  minZoom={7}
-                  updateWhenIdle={true}
-                  updateWhenZooming={false}
-                  keepBuffer={2}
-                />
-                
-                {/* 차량 마커 */}
-                {vehicles.map((vehicle) => (
-                  <React.Fragment key={vehicle.id}>
-                    <Circle
-                      center={[vehicle.lat, vehicle.lng]}
-                      radius={150}
-                      pathOptions={{
-                        color: getStatusColor(vehicle.status),
-                        fillColor: getStatusColor(vehicle.status),
-                        fillOpacity: 0.3,
-                      }}
-                    />
-                    <Marker 
-                      position={[vehicle.lat, vehicle.lng]}
-                      eventHandlers={{
-                        click: () => setSelectedVehicle(vehicle),
-                      }}
-                    >
-                      <Popup>
-                        <div className="text-xs">
-                          <div className="font-bold text-sm mb-1">{vehicle.name}</div>
-                          <div><strong>기사:</strong> {vehicle.driver}</div>
-                          <div><strong>상태:</strong> {getStatusText(vehicle.status)}</div>
-                          <div><strong>속도:</strong> {vehicle.speed} km/h</div>
-                          <div><strong>거리:</strong> {vehicle.distance} km</div>
-                          <div><strong>연료:</strong> {vehicle.fuel} L</div>
-                          {vehicle.isRefrigerated && vehicle.temperature !== undefined && (
-                            <div><strong>온도:</strong> {vehicle.temperature}°C</div>
-                          )}
-                        </div>
-                      </Popup>
-                    </Marker>
-                  </React.Fragment>
-                ))}
-              </MapContainer>
-            )}
-            
-            {/* 지도 정보 */}
-            <div className="absolute top-2 right-2 bg-white/90 backdrop-blur-sm rounded-lg p-2 shadow-lg z-[1000]">
-              <div className="text-xs text-gray-600">
-                <div className="font-semibold mb-1">🗺️ 브이월드 (VWorld)</div>
-                <div className="text-xs">국토교통부 공식 지도</div>
-              </div>
-            </div>
-            
-            {/* 차량 수 표시 */}
-            <div className="absolute bottom-2 left-2 bg-white/90 backdrop-blur-sm rounded-lg p-2 shadow-lg z-[1000]">
-              <div className="text-xs font-semibold text-gray-900">
-                총 {vehicles.length}대 모니터링 중
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* 우측 사이드 패널 */}
-        <div className="w-80 flex flex-col gap-3 overflow-y-auto max-h-full">
-          {/* 차량 목록 */}
-          <div className="rounded-lg bg-white shadow-sm border border-gray-200 overflow-hidden">
-            <div className="bg-gray-50 border-b border-gray-200 p-3">
-              <h4 className="text-sm font-semibold text-gray-900 flex items-center gap-2">
-                <Truck className="h-4 w-4 text-gray-600" />
-                차량 목록 ({vehicles.length}대)
-              </h4>
-            </div>
-            
-            <div className="p-2 max-h-[320px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
-              {vehicles.length === 0 ? (
-                <div className="py-8 text-center text-sm text-gray-500">
-                  차량이 없습니다
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {vehicles.map((vehicle) => (
-                    <div
-                      key={vehicle.id}
-                      onClick={() => setSelectedVehicle(vehicle)}
-                      className={`cursor-pointer rounded-lg border p-2 transition-all hover:shadow-sm ${
-                        selectedVehicle?.id === vehicle.id
-                          ? "border-gray-900 bg-gray-50 ring-1 ring-gray-900"
-                          : "border-gray-200 bg-white hover:border-gray-300"
-                      }`}
-                    >
-                      <div className="flex items-center justify-between mb-1">
-                        <span className="font-semibold text-sm text-gray-900">
-                          {vehicle.name}
-                        </span>
-                        <span
-                          className="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
-                          style={{ backgroundColor: getStatusColor(vehicle.status) }}
-                        >
-                          {getStatusText(vehicle.status)}
-                        </span>
-                      </div>
-                      <div className="text-xs text-gray-600 flex items-center gap-1">
-                        <Navigation className="h-3 w-3" />
-                        <span className="truncate">{vehicle.destination}</span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* 선택된 차량 상세 정보 */}
-          {selectedVehicle ? (
-            <div className="rounded-lg bg-white shadow-sm border border-gray-200 overflow-hidden max-h-[400px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
-              {/* 헤더 */}
-              <div className="bg-gray-900 p-4">
-                <div className="flex items-center justify-between mb-2">
-                  <h4 className="text-base font-semibold text-white flex items-center gap-2">
-                    <Truck className="h-5 w-5" />
-                    {selectedVehicle.name}
-                  </h4>
-                  <button
-                    onClick={() => setSelectedVehicle(null)}
-                    className="text-gray-400 hover:text-white transition-colors"
-                  >
-                    ✕
-                  </button>
-                </div>
-                <div className="flex items-center gap-2">
-                  <span
-                    className="rounded-full px-3 py-1 text-xs font-semibold text-white"
-                    style={{ backgroundColor: getStatusColor(selectedVehicle.status) }}
-                  >
-                    {getStatusText(selectedVehicle.status)}
-                  </span>
-                  <span className="text-sm text-gray-400">{selectedVehicle.id}</span>
-                </div>
-              </div>
-
-              {/* 기사 정보 */}
-              <div className="p-4 border-b border-gray-200">
-                <h5 className="text-xs font-semibold text-gray-500 mb-2">👤 기사 정보</h5>
-                <div className="space-y-1.5">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-600">이름</span>
-                    <span className="font-semibold text-gray-900">{selectedVehicle.driver}</span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-600">GPS 좌표</span>
-                    <span className="font-mono text-xs text-gray-700">
-                      {selectedVehicle.lat.toFixed(4)}, {selectedVehicle.lng.toFixed(4)}
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              {/* 운행 정보 */}
-              <div className="p-4 border-b border-gray-200">
-                <h5 className="text-xs font-semibold text-gray-500 mb-2">📍 운행 정보</h5>
-                <div className="space-y-1.5">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-600">목적지</span>
-                    <span className="font-semibold text-gray-900">{selectedVehicle.destination}</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* 실시간 데이터 */}
-              <div className="p-4 border-b border-gray-200">
-                <h5 className="text-xs font-semibold text-gray-500 mb-2">📊 실시간 데이터</h5>
-                <div className="grid grid-cols-2 gap-2">
-                  <div className="bg-gray-50 rounded-lg p-2 border border-gray-200">
-                    <div className="text-xs text-gray-600 mb-0.5">현재 속도</div>
-                    <div className="text-lg font-bold text-gray-900">{selectedVehicle.speed}</div>
-                    <div className="text-xs text-gray-500">km/h</div>
-                  </div>
-                  <div className="bg-gray-50 rounded-lg p-2 border border-gray-200">
-                    <div className="text-xs text-gray-600 mb-0.5">평균 속도</div>
-                    <div className="text-lg font-bold text-gray-900">{selectedVehicle.avgSpeed}</div>
-                    <div className="text-xs text-gray-500">km/h</div>
-                  </div>
-                  <div className="bg-gray-50 rounded-lg p-2 border border-gray-200">
-                    <div className="text-xs text-gray-600 mb-0.5">운행 거리</div>
-                    <div className="text-lg font-bold text-gray-900">{selectedVehicle.distance}</div>
-                    <div className="text-xs text-gray-500">km</div>
-                  </div>
-                  <div className="bg-gray-50 rounded-lg p-2 border border-gray-200">
-                    <div className="text-xs text-gray-600 mb-0.5">소모 연료</div>
-                    <div className="text-lg font-bold text-gray-900">{selectedVehicle.fuel}</div>
-                    <div className="text-xs text-gray-500">L</div>
-                  </div>
-                </div>
-              </div>
-
-              {/* 냉동/냉장 상태 */}
-              {selectedVehicle.isRefrigerated && selectedVehicle.temperature !== undefined && (
-                <div className="p-4">
-                  <h5 className="text-xs font-semibold text-gray-500 mb-3">❄️ 냉동/냉장 상태</h5>
-                  <div className="rounded-lg p-4 border border-gray-200 bg-gray-50">
-                    <div className="flex items-center justify-between mb-3">
-                      <span className="text-sm text-gray-600">현재 온도</span>
-                      <span className="text-3xl font-bold text-gray-900">
-                        {selectedVehicle.temperature}°C
-                      </span>
-                    </div>
-                    <div className="space-y-2 text-sm">
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">타입</span>
-                        <span className="font-semibold text-gray-900">
-                          {selectedVehicle.temperature < -10 ? "냉동" : "냉장"}
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">적정 범위</span>
-                        <span className="font-semibold text-gray-900">
-                          {selectedVehicle.temperature < -10 ? "-18°C ~ -15°C" : "0°C ~ 5°C"}
-                        </span>
-                      </div>
-                      <div className="flex justify-between items-center">
-                        <span className="text-gray-600">상태</span>
-                        <span className={`px-3 py-1 rounded-md text-xs font-semibold border ${
-                          Math.abs(selectedVehicle.temperature - (selectedVehicle.temperature < -10 ? -18 : 2)) < 5
-                            ? "bg-gray-900 text-white border-gray-900"
-                            : "bg-white text-gray-900 border-gray-300"
-                        }`}>
-                          {Math.abs(selectedVehicle.temperature - (selectedVehicle.temperature < -10 ? -18 : 2)) < 5
-                            ? "✓ 정상"
-                            : "⚠ 주의"}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          ) : (
-            <div className="rounded-lg bg-white shadow-lg border border-gray-200 p-8 text-center">
-              <Truck className="h-12 w-12 text-gray-300 mx-auto mb-3" />
-              <p className="text-sm text-gray-500">차량을 선택하면</p>
-              <p className="text-sm text-gray-500">상세 정보가 표시됩니다</p>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/components/dashboard/widgets/VehicleStatusWidget.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { RefreshCw, TrendingUp, TrendingDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface VehicleStatusWidgetProps {
+  element?: any; // 대시보드 요소 (dataSource 포함)
+  refreshInterval?: number;
+}
+
+interface StatusData {
+  active: number; // 운행 중
+  inactive: number; // 대기
+  maintenance: number; // 정비
+  warning: number; // 고장
+  total: number;
+}
+
+export default function VehicleStatusWidget({ element, refreshInterval = 30000 }: VehicleStatusWidgetProps) {
+  const [statusData, setStatusData] = useState<StatusData>({
+    active: 0,
+    inactive: 0,
+    maintenance: 0,
+    warning: 0,
+    total: 0,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
+
+  const loadStatusData = async () => {
+    setIsLoading(true);
+
+    // 설정된 쿼리가 없으면 로딩 중단 (기본 쿼리 사용 안 함)
+    if (!element?.dataSource?.query) {
+      setIsLoading(false);
+      return;
+    }
+    
+    const query = element.dataSource.query;
+
+    try {
+      const response = await fetch("/api/dashboards/execute-query", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${typeof window !== "undefined" ? localStorage.getItem("authToken") || "" : ""}`,
+        },
+        body: JSON.stringify({ query }),
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        if (result.success && result.data.rows.length > 0) {
+          const newStatus: StatusData = {
+            active: 0,
+            inactive: 0,
+            maintenance: 0,
+            warning: 0,
+            total: 0,
+          };
+
+          // 쿼리 결과가 GROUP BY 형식인지 확인
+          const isGroupedData = result.data.rows[0].count !== undefined;
+
+          if (isGroupedData) {
+            // GROUP BY 형식: SELECT status, COUNT(*) as count
+            result.data.rows.forEach((row: any) => {
+              const count = parseInt(row.count) || 0;
+              const status = row.status?.toLowerCase() || "";
+
+              if (status === "active" || status === "running") {
+                newStatus.active = count;
+              } else if (status === "inactive" || status === "idle") {
+                newStatus.inactive = count;
+              } else if (status === "maintenance") {
+                newStatus.maintenance = count;
+              } else if (status === "warning" || status === "breakdown") {
+                newStatus.warning = count;
+              }
+
+              newStatus.total += count;
+            });
+          } else {
+            // SELECT * 형식: 전체 데이터를 가져와서 카운트
+            result.data.rows.forEach((row: any) => {
+              const status = row.status?.toLowerCase() || "";
+
+              if (status === "active" || status === "running") {
+                newStatus.active++;
+              } else if (status === "inactive" || status === "idle") {
+                newStatus.inactive++;
+              } else if (status === "maintenance") {
+                newStatus.maintenance++;
+              } else if (status === "warning" || status === "breakdown") {
+                newStatus.warning++;
+              }
+
+              newStatus.total++;
+            });
+          }
+
+          setStatusData(newStatus);
+          setLastUpdate(new Date());
+        }
+      }
+    } catch (error) {
+      console.error("차량 상태 데이터 로드 실패:", error);
+    }
+
+    setIsLoading(false);
+  };
+
+  // 데이터 로드 및 자동 새로고침
+  useEffect(() => {
+    loadStatusData();
+    const interval = setInterval(loadStatusData, refreshInterval);
+    return () => clearInterval(interval);
+  }, [element?.dataSource?.query, refreshInterval]);
+
+  // 설정되지 않았을 때도 빈 상태로 표시 (안내 메시지 제거)
+
+  const activeRate = statusData.total > 0 ? ((statusData.active / statusData.total) * 100).toFixed(1) : "0";
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden bg-gradient-to-br from-slate-50 to-green-50 p-2">
+      {/* 헤더 */}
+      <div className="mb-2 flex flex-shrink-0 items-center justify-between">
+        <div className="flex-1">
+          <h3 className="text-sm font-bold text-gray-900">📊 차량 상태 현황</h3>
+          {statusData.total > 0 ? (
+            <p className="text-xs text-gray-500">{lastUpdate.toLocaleTimeString("ko-KR")}</p>
+          ) : (
+            <p className="text-xs text-orange-500">⚙️ 데이터 연결 필요</p>
+          )}
+        </div>
+        <Button variant="outline" size="sm" onClick={loadStatusData} disabled={isLoading} className="h-7 w-7 p-0">
+          <RefreshCw className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`} />
+        </Button>
+      </div>
+
+      {/* 스크롤 가능한 콘텐츠 영역 */}
+      <div className="flex-1 overflow-y-auto">
+        {/* 총 차량 수 */}
+        <div className="mb-1 rounded border border-gray-200 bg-white p-1.5 shadow-sm">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-xs text-gray-600">총 차량</div>
+              <div className="text-base font-bold text-gray-900">{statusData.total}대</div>
+            </div>
+            <div className="text-right">
+              <div className="text-xs text-gray-600">가동률</div>
+              <div className="flex items-center gap-0.5 text-sm font-bold text-green-600">
+                {activeRate}%
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 상태별 카드 */}
+        <div className="grid grid-cols-2 gap-1.5">
+        {/* 운행 중 */}
+        <div className="rounded border-l-2 border-green-500 bg-white p-1.5 shadow-sm">
+          <div className="mb-0.5 flex items-center gap-1">
+            <div className="h-1.5 w-1.5 rounded-full bg-green-500"></div>
+            <div className="text-xs font-medium text-gray-600">운행</div>
+          </div>
+          <div className="text-lg font-bold text-green-600">{statusData.active}</div>
+        </div>
+
+        {/* 대기 */}
+        <div className="rounded border-l-2 border-yellow-500 bg-white p-1.5 shadow-sm">
+          <div className="mb-0.5 flex items-center gap-1">
+            <div className="h-1.5 w-1.5 rounded-full bg-yellow-500"></div>
+            <div className="text-xs font-medium text-gray-600">대기</div>
+          </div>
+          <div className="text-lg font-bold text-yellow-600">{statusData.inactive}</div>
+        </div>
+
+        {/* 정비 */}
+        <div className="rounded border-l-2 border-orange-500 bg-white p-1.5 shadow-sm">
+          <div className="mb-0.5 flex items-center gap-1">
+            <div className="h-1.5 w-1.5 rounded-full bg-orange-500"></div>
+            <div className="text-xs font-medium text-gray-600">정비</div>
+          </div>
+          <div className="text-lg font-bold text-orange-600">{statusData.maintenance}</div>
+        </div>
+
+        {/* 고장 */}
+        <div className="rounded border-l-2 border-red-500 bg-white p-1.5 shadow-sm">
+          <div className="mb-0.5 flex items-center gap-1">
+            <div className="h-1.5 w-1.5 rounded-full bg-red-500"></div>
+            <div className="text-xs font-medium text-gray-600">고장</div>
+          </div>
+          <div className="text-lg font-bold text-red-600">{statusData.warning}</div>
+        </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

frontend/lib/registry/components/index.ts

@@ -37,6 +37,7 @@ import "./divider-line/DividerLineRenderer";
 import "./accordion-basic/AccordionBasicRenderer";
 import "./table-list/TableListRenderer";
 import "./card-display/CardDisplayRenderer";
+import "./map/MapRenderer";
 
 /**
  * 컴포넌트 초기화 함수

frontend/lib/registry/components/map/MapComponent.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import dynamic from "next/dynamic";
+import { RefreshCw, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import "leaflet/dist/leaflet.css";
+
+// Leaflet 아이콘 경로 설정 (엑박 방지)
+if (typeof window !== "undefined") {
+  const L = require("leaflet");
+  delete (L.Icon.Default.prototype as any)._getIconUrl;
+  L.Icon.Default.mergeOptions({
+    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  });
+}
+
+// Leaflet 동적 import (SSR 방지)
+const MapContainer = dynamic(
+  () => import("react-leaflet").then((mod) => mod.MapContainer),
+  { ssr: false }
+);
+const TileLayer = dynamic(
+  () => import("react-leaflet").then((mod) => mod.TileLayer),
+  { ssr: false }
+);
+const Marker = dynamic(
+  () => import("react-leaflet").then((mod) => mod.Marker),
+  { ssr: false }
+);
+const Popup = dynamic(
+  () => import("react-leaflet").then((mod) => mod.Popup),
+  { ssr: false }
+);
+
+interface MapMarker {
+  id: string | number;
+  latitude: number;
+  longitude: number;
+  label?: string;
+  status?: string;
+  additionalInfo?: Record<string, any>;
+}
+
+interface MapComponentProps {
+  component: {
+    id: string;
+    config?: {
+      dataSource?: {
+        type?: "internal" | "external";
+        connectionId?: number | null;
+        tableName?: string;
+        latColumn?: string;
+        lngColumn?: string;
+        labelColumn?: string;
+        statusColumn?: string;
+        additionalColumns?: string[];
+        whereClause?: string;
+      };
+      mapConfig?: {
+        center?: { lat: number; lng: number };
+        zoom?: number;
+        minZoom?: number;
+        maxZoom?: number;
+      };
+      markerConfig?: {
+        showLabel?: boolean;
+        showPopup?: boolean;
+        statusColors?: Record<string, string>;
+      };
+      refreshInterval?: number;
+    };
+  };
+}
+
+export default function MapComponent({ component }: MapComponentProps) {
+  const [markers, setMarkers] = useState<MapMarker[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+
+  const dataSource = component.config?.dataSource;
+  const mapConfig = component.config?.mapConfig;
+  const markerConfig = component.config?.markerConfig;
+  const refreshInterval = component.config?.refreshInterval || 0;
+
+  // 데이터 로드
+  const loadMapData = async () => {
+    if (!dataSource?.tableName || !dataSource?.latColumn || !dataSource?.lngColumn) {
+      setError("테이블명, 위도 컬럼, 경도 컬럼을 설정해주세요.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // API URL 구성
+      const isExternal = dataSource.type === "external" && dataSource.connectionId;
+      const baseUrl = isExternal
+        ? `/api/map-data/external/${dataSource.connectionId}`
+        : `/api/map-data/internal`;
+
+      const params = new URLSearchParams({
+        tableName: dataSource.tableName,
+        latColumn: dataSource.latColumn,
+        lngColumn: dataSource.lngColumn,
+      });
+
+      if (dataSource.labelColumn) {
+        params.append("labelColumn", dataSource.labelColumn);
+      }
+      if (dataSource.statusColumn) {
+        params.append("statusColumn", dataSource.statusColumn);
+      }
+      if (dataSource.additionalColumns && dataSource.additionalColumns.length > 0) {
+        params.append("additionalColumns", dataSource.additionalColumns.join(","));
+      }
+      if (dataSource.whereClause) {
+        params.append("whereClause", dataSource.whereClause);
+      }
+
+      const response = await fetch(`${baseUrl}?${params.toString()}`);
+      const result = await response.json();
+
+      if (!result.success) {
+        throw new Error(result.message || "데이터 조회 실패");
+      }
+
+      setMarkers(result.data.markers || []);
+      setLastUpdate(new Date());
+    } catch (err: any) {
+      console.error("지도 데이터 로드 오류:", err);
+      setError(err.message || "데이터를 불러올 수 없습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 초기 로드 및 자동 새로고침
+  useEffect(() => {
+    loadMapData();
+
+    if (refreshInterval > 0) {
+      const interval = setInterval(loadMapData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [
+    dataSource?.type,
+    dataSource?.connectionId,
+    dataSource?.tableName,
+    dataSource?.latColumn,
+    dataSource?.lngColumn,
+    dataSource?.whereClause,
+    refreshInterval,
+  ]);
+
+  // 마커 색상 가져오기
+  const getMarkerColor = (status?: string): string => {
+    if (!status || !markerConfig?.statusColors) {
+      return markerConfig?.statusColors?.default || "#3b82f6";
+    }
+    return markerConfig.statusColors[status] || markerConfig.statusColors.default || "#3b82f6";
+  };
+
+  // 커스텀 마커 아이콘 생성
+  const createMarkerIcon = (status?: string) => {
+    if (typeof window === "undefined") return undefined;
+
+    const L = require("leaflet");
+    const color = getMarkerColor(status);
+
+    return new L.Icon({
+      iconUrl: `data:image/svg+xml;base64,${btoa(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="41" viewBox="0 0 25 41">
+          <path d="M12.5 0C5.6 0 0 5.6 0 12.5c0 8.4 12.5 28.5 12.5 28.5S25 20.9 25 12.5C25 5.6 19.4 0 12.5 0z" fill="${color}"/>
+          <circle cx="12.5" cy="12.5" r="6" fill="white"/>
+        </svg>
+      `)}`,
+      shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [0, -41],
+    });
+  };
+
+  if (error) {
+    return (
+      <div className="flex h-full w-full items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <AlertCircle className="mx-auto h-12 w-12 text-red-500" />
+          <p className="mt-2 text-sm text-red-600">{error}</p>
+          <Button onClick={loadMapData} className="mt-4" size="sm">
+            다시 시도
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative h-full w-full">
+      {/* 지도 */}
+      {typeof window !== "undefined" && (
+        <MapContainer
+          center={[
+            mapConfig?.center?.lat || 36.5,
+            mapConfig?.center?.lng || 127.5,
+          ]}
+          zoom={mapConfig?.zoom || 7}
+          minZoom={mapConfig?.minZoom || 5}
+          maxZoom={mapConfig?.maxZoom || 18}
+          style={{ height: "100%", width: "100%" }}
+        >
+          <TileLayer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+          />
+
+          {/* 마커 렌더링 */}
+          {markers.map((marker) => (
+            <Marker
+              key={marker.id}
+              position={[marker.latitude, marker.longitude]}
+              icon={createMarkerIcon(marker.status)}
+            >
+              {markerConfig?.showPopup !== false && (
+                <Popup>
+                  <div className="text-sm">
+                    {marker.label && (
+                      <div className="mb-2 font-bold text-base">{marker.label}</div>
+                    )}
+                    <div className="space-y-1">
+                      <div>
+                        <strong>위도:</strong> {marker.latitude.toFixed(6)}
+                      </div>
+                      <div>
+                        <strong>경도:</strong> {marker.longitude.toFixed(6)}
+                      </div>
+                      {marker.status && (
+                        <div>
+                          <strong>상태:</strong> {marker.status}
+                        </div>
+                      )}
+                      {marker.additionalInfo &&
+                        Object.entries(marker.additionalInfo).map(([key, value]) => (
+                          <div key={key}>
+                            <strong>{key}:</strong> {String(value)}
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                </Popup>
+              )}
+            </Marker>
+          ))}
+        </MapContainer>
+      )}
+
+      {/* 상단 정보 바 */}
+      <div className="absolute top-2 right-2 z-[1000] flex items-center gap-2 rounded-lg bg-white/90 backdrop-blur-sm px-3 py-2 shadow-lg">
+        <span className="text-xs font-medium text-gray-700">
+          마커: {markers.length}개
+        </span>
+        {lastUpdate && (
+          <span className="text-xs text-gray-500">
+            {lastUpdate.toLocaleTimeString()}
+          </span>
+        )}
+        <Button
+          onClick={loadMapData}
+          disabled={isLoading}
+          size="sm"
+          variant="ghost"
+          className="h-6 w-6 p-0"
+        >
+          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+

frontend/lib/registry/components/map/MapConfigPanel.tsx

@@ -0,0 +1,439 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import { RefreshCw } from "lucide-react";
+
+interface MapConfigPanelProps {
+  config: any;
+  onChange: (config: any) => void;
+}
+
+interface DbConnection {
+  id: number;
+  name: string;
+  db_type: string;
+}
+
+interface TableInfo {
+  table_name: string;
+}
+
+interface ColumnInfo {
+  column_name: string;
+  data_type: string;
+}
+
+export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps) {
+  const [connections, setConnections] = useState<DbConnection[]>([]);
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [isLoadingConnections, setIsLoadingConnections] = useState(false);
+  const [isLoadingTables, setIsLoadingTables] = useState(false);
+  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+
+  // DB 연결 목록 로드
+  useEffect(() => {
+    loadConnections();
+  }, []);
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    if (config.dataSource?.type === "external" && config.dataSource?.connectionId) {
+      loadTables(config.dataSource.connectionId);
+    } else if (config.dataSource?.type === "internal") {
+      loadInternalTables();
+    }
+  }, [config.dataSource?.type, config.dataSource?.connectionId]);
+
+  // 컬럼 목록 로드
+  useEffect(() => {
+    if (config.dataSource?.tableName) {
+      if (config.dataSource.type === "external" && config.dataSource.connectionId) {
+        loadColumns(config.dataSource.connectionId, config.dataSource.tableName);
+      } else if (config.dataSource.type === "internal") {
+        loadInternalColumns(config.dataSource.tableName);
+      }
+    }
+  }, [config.dataSource?.tableName]);
+
+  const loadConnections = async () => {
+    setIsLoadingConnections(true);
+    try {
+      const response = await fetch("/api/external-db-connections");
+      const data = await response.json();
+      if (data.success) {
+        setConnections(data.data || []);
+      }
+    } catch (error) {
+      console.error("DB 연결 목록 로드 실패:", error);
+    } finally {
+      setIsLoadingConnections(false);
+    }
+  };
+
+  const loadTables = async (connectionId: number) => {
+    setIsLoadingTables(true);
+    try {
+      const response = await fetch(`/api/external-db-connections/${connectionId}/tables`);
+      const data = await response.json();
+      if (data.success) {
+        setTables(data.data || []);
+      }
+    } catch (error) {
+      console.error("테이블 목록 로드 실패:", error);
+    } finally {
+      setIsLoadingTables(false);
+    }
+  };
+
+  const loadInternalTables = async () => {
+    setIsLoadingTables(true);
+    try {
+      const response = await fetch("/api/table-management/tables");
+      const data = await response.json();
+      if (data.success) {
+        setTables(data.data.map((t: any) => ({ table_name: t.tableName })) || []);
+      }
+    } catch (error) {
+      console.error("내부 테이블 목록 로드 실패:", error);
+    } finally {
+      setIsLoadingTables(false);
+    }
+  };
+
+  const loadColumns = async (connectionId: number, tableName: string) => {
+    setIsLoadingColumns(true);
+    try {
+      const response = await fetch(
+        `/api/external-db-connections/${connectionId}/tables/${encodeURIComponent(tableName)}/columns`
+      );
+      const data = await response.json();
+      if (data.success) {
+        setColumns(data.data || []);
+      }
+    } catch (error) {
+      console.error("컬럼 목록 로드 실패:", error);
+    } finally {
+      setIsLoadingColumns(false);
+    }
+  };
+
+  const loadInternalColumns = async (tableName: string) => {
+    setIsLoadingColumns(true);
+    try {
+      const response = await fetch(`/api/table-management/tables/${encodeURIComponent(tableName)}/columns`);
+      const data = await response.json();
+      if (data.success) {
+        setColumns(data.data.map((c: any) => ({ column_name: c.columnName, data_type: c.dataType })) || []);
+      }
+    } catch (error) {
+      console.error("내부 컬럼 목록 로드 실패:", error);
+    } finally {
+      setIsLoadingColumns(false);
+    }
+  };
+
+  const updateConfig = (path: string, value: any) => {
+    const keys = path.split(".");
+    const newConfig = { ...config };
+    let current: any = newConfig;
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      if (!current[keys[i]]) {
+        current[keys[i]] = {};
+      }
+      current = current[keys[i]];
+    }
+
+    current[keys[keys.length - 1]] = value;
+    onChange(newConfig);
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div>
+        <h3 className="text-sm font-semibold mb-3">📊 데이터 소스</h3>
+
+        {/* DB 타입 선택 */}
+        <div className="space-y-2 mb-3">
+          <Label>DB 타입</Label>
+          <Select
+            value={config.dataSource?.type || "internal"}
+            onValueChange={(value) => {
+              updateConfig("dataSource.type", value);
+              updateConfig("dataSource.tableName", "");
+              updateConfig("dataSource.connectionId", null);
+              setTables([]);
+              setColumns([]);
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="DB 타입 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="internal">내부 DB (PostgreSQL)</SelectItem>
+              <SelectItem value="external">외부 DB 연결</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* 외부 DB 연결 선택 */}
+        {config.dataSource?.type === "external" && (
+          <div className="space-y-2 mb-3">
+            <Label>외부 DB 연결</Label>
+            <div className="flex gap-2">
+              <Select
+                value={config.dataSource?.connectionId?.toString() || ""}
+                onValueChange={(value) => {
+                  updateConfig("dataSource.connectionId", parseInt(value));
+                  updateConfig("dataSource.tableName", "");
+                  setTables([]);
+                  setColumns([]);
+                }}
+                disabled={isLoadingConnections}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="DB 연결 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {connections.map((conn) => (
+                    <SelectItem key={conn.id} value={conn.id.toString()}>
+                      {conn.name} ({conn.db_type})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                onClick={loadConnections}
+                size="icon"
+                variant="outline"
+                disabled={isLoadingConnections}
+              >
+                <RefreshCw className={`h-4 w-4 ${isLoadingConnections ? "animate-spin" : ""}`} />
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* 테이블 선택 */}
+        <div className="space-y-2 mb-3">
+          <Label>테이블</Label>
+          <div className="flex gap-2">
+            <Select
+              value={config.dataSource?.tableName || ""}
+              onValueChange={(value) => {
+                updateConfig("dataSource.tableName", value);
+                setColumns([]);
+              }}
+              disabled={
+                isLoadingTables ||
+                (config.dataSource?.type === "external" && !config.dataSource?.connectionId)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="테이블 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {tables.map((table) => (
+                  <SelectItem key={table.table_name} value={table.table_name}>
+                    {table.table_name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button
+              onClick={() => {
+                if (config.dataSource?.type === "external" && config.dataSource?.connectionId) {
+                  loadTables(config.dataSource.connectionId);
+                } else if (config.dataSource?.type === "internal") {
+                  loadInternalTables();
+                }
+              }}
+              size="icon"
+              variant="outline"
+              disabled={isLoadingTables}
+            >
+              <RefreshCw className={`h-4 w-4 ${isLoadingTables ? "animate-spin" : ""}`} />
+            </Button>
+          </div>
+        </div>
+
+        {/* 위도 컬럼 */}
+        <div className="space-y-2 mb-3">
+          <Label>위도 컬럼 *</Label>
+          <Select
+            value={config.dataSource?.latColumn || ""}
+            onValueChange={(value) => updateConfig("dataSource.latColumn", value)}
+            disabled={isLoadingColumns || !config.dataSource?.tableName}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="위도 컬럼 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              {columns.map((col) => (
+                <SelectItem key={col.column_name} value={col.column_name}>
+                  {col.column_name} ({col.data_type})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* 경도 컬럼 */}
+        <div className="space-y-2 mb-3">
+          <Label>경도 컬럼 *</Label>
+          <Select
+            value={config.dataSource?.lngColumn || ""}
+            onValueChange={(value) => updateConfig("dataSource.lngColumn", value)}
+            disabled={isLoadingColumns || !config.dataSource?.tableName}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="경도 컬럼 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              {columns.map((col) => (
+                <SelectItem key={col.column_name} value={col.column_name}>
+                  {col.column_name} ({col.data_type})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* 라벨 컬럼 (선택) */}
+        <div className="space-y-2 mb-3">
+          <Label>라벨 컬럼 (선택사항)</Label>
+          <Select
+            value={config.dataSource?.labelColumn || ""}
+            onValueChange={(value) => updateConfig("dataSource.labelColumn", value)}
+            disabled={isLoadingColumns || !config.dataSource?.tableName}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="라벨 컬럼 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="">선택 안 함</SelectItem>
+              {columns.map((col) => (
+                <SelectItem key={col.column_name} value={col.column_name}>
+                  {col.column_name} ({col.data_type})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* 상태 컬럼 (선택) */}
+        <div className="space-y-2 mb-3">
+          <Label>상태 컬럼 (선택사항)</Label>
+          <Select
+            value={config.dataSource?.statusColumn || ""}
+            onValueChange={(value) => updateConfig("dataSource.statusColumn", value)}
+            disabled={isLoadingColumns || !config.dataSource?.tableName}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="상태 컬럼 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="">선택 안 함</SelectItem>
+              {columns.map((col) => (
+                <SelectItem key={col.column_name} value={col.column_name}>
+                  {col.column_name} ({col.data_type})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* WHERE 조건 (선택) */}
+        <div className="space-y-2 mb-3">
+          <Label>WHERE 조건 (선택사항)</Label>
+          <Textarea
+            value={config.dataSource?.whereClause || ""}
+            onChange={(e) => updateConfig("dataSource.whereClause", e.target.value)}
+            placeholder="예: status = 'active' AND city = 'Seoul'"
+            rows={2}
+            className="font-mono text-sm"
+          />
+          <p className="text-xs text-gray-500">SQL WHERE 절 (WHERE 키워드 제외)</p>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div>
+        <h3 className="text-sm font-semibold mb-3">🗺️ 지도 설정</h3>
+
+        {/* 중심 좌표 */}
+        <div className="grid grid-cols-2 gap-2 mb-3">
+          <div className="space-y-2">
+            <Label>중심 위도</Label>
+            <Input
+              type="number"
+              step="0.0001"
+              value={config.mapConfig?.center?.lat || 36.5}
+              onChange={(e) =>
+                updateConfig("mapConfig.center.lat", parseFloat(e.target.value) || 36.5)
+              }
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>중심 경도</Label>
+            <Input
+              type="number"
+              step="0.0001"
+              value={config.mapConfig?.center?.lng || 127.5}
+              onChange={(e) =>
+                updateConfig("mapConfig.center.lng", parseFloat(e.target.value) || 127.5)
+              }
+            />
+          </div>
+        </div>
+
+        {/* 줌 레벨 */}
+        <div className="space-y-2 mb-3">
+          <Label>기본 줌 레벨</Label>
+          <Input
+            type="number"
+            min="1"
+            max="18"
+            value={config.mapConfig?.zoom || 7}
+            onChange={(e) => updateConfig("mapConfig.zoom", parseInt(e.target.value) || 7)}
+          />
+        </div>
+      </div>
+
+      <Separator />
+
+      <div>
+        <h3 className="text-sm font-semibold mb-3">🔄 새로고침 설정</h3>
+
+        <div className="space-y-2">
+          <Label>자동 새로고침 (초)</Label>
+          <Input
+            type="number"
+            min="0"
+            step="1"
+            value={(config.refreshInterval || 0) / 1000}
+            onChange={(e) =>
+              updateConfig("refreshInterval", parseInt(e.target.value) * 1000 || 0)
+            }
+          />
+          <p className="text-xs text-gray-500">0이면 자동 새로고침 없음</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+

frontend/lib/registry/components/map/MapPreviewComponent.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import { Map } from "lucide-react";
+
+interface MapPreviewComponentProps {
+  component: {
+    config?: {
+      dataSource?: {
+        tableName?: string;
+      };
+    };
+  };
+}
+
+export default function MapPreviewComponent({ component }: MapPreviewComponentProps) {
+  const tableName = component.config?.dataSource?.tableName;
+
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-dashed border-blue-300">
+      <div className="text-center">
+        <Map className="mx-auto h-12 w-12 text-blue-600" />
+        <p className="mt-2 text-sm font-medium text-blue-900">지도 컴포넌트</p>
+        {tableName && (
+          <p className="mt-1 text-xs text-blue-600">테이블: {tableName}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+

frontend/lib/registry/components/map/MapRenderer.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { ComponentCategory } from "@/types/component";
+import MapComponent from "./MapComponent";
+import MapPreviewComponent from "./MapPreviewComponent";
+import MapConfigPanel from "./MapConfigPanel";
+
+/**
+ * Map 컴포넌트 렌더러 (자동 등록)
+ */
+export class MapRenderer extends AutoRegisteringComponentRenderer {
+  static definition = {
+    id: "map",
+    name: "지도",
+    nameEng: "Map Component",
+    description: "외부/내부 DB 데이터를 지도에 마커로 표시합니다 (위도/경도 필요)",
+    category: ComponentCategory.DISPLAY,
+    webType: "text" as const,
+    component: MapComponent,
+    previewComponent: MapPreviewComponent,
+    defaultConfig: {
+      // 데이터 소스 설정
+      dataSource: {
+        type: "internal", // "internal" | "external"
+        connectionId: null, // 외부 DB 연결 ID
+        tableName: "",
+        latColumn: "latitude", // 위도 컬럼명
+        lngColumn: "longitude", // 경도 컬럼명
+        labelColumn: "", // 마커 라벨 컬럼명
+        statusColumn: "", // 상태 컬럼명 (마커 색상용)
+        additionalColumns: [], // 추가 표시할 컬럼들
+        whereClause: "", // WHERE 조건절
+      },
+
+      // 지도 설정
+      mapConfig: {
+        center: {
+          lat: 36.5,
+          lng: 127.5,
+        },
+        zoom: 7,
+        minZoom: 5,
+        maxZoom: 18,
+      },
+
+      // 마커 설정
+      markerConfig: {
+        showLabel: true,
+        showPopup: true,
+        clusterMarkers: false, // 마커 클러스터링
+        statusColors: {
+          default: "#3b82f6", // 기본 파란색
+          active: "#22c55e", // 활성 녹색
+          inactive: "#94a3b8", // 비활성 회색
+          warning: "#f59e0b", // 경고 주황색
+          danger: "#ef4444", // 위험 빨간색
+        },
+      },
+
+      // 새로고침 설정
+      refreshInterval: 30000, // 30초 (0이면 자동 새로고침 없음)
+    },
+    defaultSize: { width: 800, height: 600 },
+    configPanel: MapConfigPanel,
+    icon: "Map",
+    tags: ["map", "location", "gps", "marker", "leaflet"],
+    version: "1.0.0",
+    author: "개발팀",
+    documentation:
+      "외부/내부 DB 데이터를 지도에 표시하는 컴포넌트입니다. 위도/경도 컬럼이 있는 테이블이면 어떤 데이터든 지도에 마커로 표시할 수 있습니다.",
+  };
+}
+
+// 자동 등록 실행
+new MapRenderer();
+

frontend/lib/registry/components/map/index.ts

@@ -0,0 +1,59 @@
+import { ComponentConfig } from "../../types";
+
+export const mapComponent: ComponentConfig = {
+  type: "map",
+  name: "지도",
+  icon: "Map",
+  category: "data-display",
+  description: "DB 데이터를 지도에 마커로 표시합니다 (위도/경도 필요)",
+  defaultSize: {
+    width: 800,
+    height: 600,
+  },
+  defaultConfig: {
+    // 데이터 소스 설정
+    dataSource: {
+      type: "internal", // "internal" | "external"
+      connectionId: null, // 외부 DB 연결 ID
+      tableName: "",
+      latColumn: "latitude", // 위도 컬럼명
+      lngColumn: "longitude", // 경도 컬럼명
+      labelColumn: "", // 마커 라벨 컬럼명
+      statusColumn: "", // 상태 컬럼명 (마커 색상용)
+      additionalColumns: [], // 추가 표시할 컬럼들
+      whereClause: "", // WHERE 조건절
+    },
+
+    // 지도 설정
+    mapConfig: {
+      center: {
+        lat: 36.5,
+        lng: 127.5,
+      },
+      zoom: 7,
+      minZoom: 5,
+      maxZoom: 18,
+    },
+
+    // 마커 설정
+    markerConfig: {
+      showLabel: true,
+      showPopup: true,
+      clusterMarkers: false, // 마커 클러스터링
+      statusColors: {
+        default: "#3b82f6", // 기본 파란색
+        active: "#22c55e", // 활성 녹색
+        inactive: "#94a3b8", // 비활성 회색
+        warning: "#f59e0b", // 경고 주황색
+        danger: "#ef4444", // 위험 빨간색
+      },
+    },
+
+    // 새로고침 설정
+    refreshInterval: 30000, // 30초 (0이면 자동 새로고침 없음)
+  },
+  component: () => import("./MapComponent"),
+  previewComponent: () => import("./MapPreviewComponent"),
+  configPanel: () => import("./MapConfigPanel"),
+};
+