diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx
index 09ddfe5c..ce08c522 100644
--- a/frontend/components/admin/dashboard/CanvasElement.tsx
+++ b/frontend/components/admin/dashboard/CanvasElement.tsx
@@ -853,7 +853,9 @@ export function CanvasElement({
           )}
           {/* 제목 */}
           {!element.type || element.type !== "chart" ? (
-            <span className="text-foreground text-xs font-bold">{element.customTitle || element.title}</span>
+            element.subtype === "map-summary-v2" && !element.customTitle ? null : (
+              <span className="text-foreground text-xs font-bold">{element.customTitle || element.title}</span>
+            )
           ) : null}
         </div>
         <div className="flex gap-1">
diff --git a/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx b/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx
index 710abbe6..7ca9684b 100644
--- a/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx
+++ b/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx
@@ -152,7 +152,8 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
       setCustomTitle(element.customTitle || "");
       setShowHeader(element.showHeader !== false);
       setDataSource(element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 });
-      setDataSources(element.dataSources || []);
+      // dataSources는 element.dataSources 또는 chartConfig.dataSources에서 가져옴
+      setDataSources(element.dataSources || element.chartConfig?.dataSources || []);
       setQueryResult(null);
 
       // 리스트 위젯 설정 초기화
@@ -297,10 +298,12 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
       ...(needsDataSource(element.subtype)
         ? {
             dataSource,
-            // 다중 데이터 소스 위젯은 dataSources도 포함
+            // 다중 데이터 소스 위젯은 dataSources도 포함 (빈 배열도 허용 - 연결 해제)
             ...(isMultiDataSourceWidget
               ? {
-                  dataSources: dataSources.length > 0 ? dataSources : element.dataSources || [],
+                  dataSources: dataSources,
+                  // chartConfig에도 dataSources 포함 (일부 위젯은 chartConfig에서 읽음)
+                  chartConfig: { ...chartConfig, dataSources: dataSources },
                 }
               : {}),
           }
@@ -316,14 +319,14 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
       element.subtype === "chart" ||
       ["bar", "horizontal-bar", "pie", "line", "area", "stacked-bar", "donut", "combo"].includes(element.subtype)
         ? {
-            // 다중 데이터 소스 위젯은 chartConfig에 dataSources 포함
+            // 다중 데이터 소스 위젯은 chartConfig에 dataSources 포함 (빈 배열도 허용 - 연결 해제)
             chartConfig: isMultiDataSourceWidget
-              ? { ...chartConfig, dataSources: dataSources.length > 0 ? dataSources : element.dataSources || [] }
+              ? { ...chartConfig, dataSources: dataSources }
               : chartConfig,
-            // 프론트엔드 호환성을 위해 dataSources도 element에 직접 포함
+            // 프론트엔드 호환성을 위해 dataSources도 element에 직접 포함 (빈 배열도 허용 - 연결 해제)
             ...(isMultiDataSourceWidget
               ? {
-                  dataSources: dataSources.length > 0 ? dataSources : element.dataSources || [],
+                  dataSources: dataSources,
                 }
               : {}),
           }
@@ -520,7 +523,39 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
               )}
 
               {/* 지도 설정 */}
-              {element.subtype === "map-summary-v2" && <MapConfigSection queryResult={queryResult} />}
+              {element.subtype === "map-summary-v2" && (
+                <MapConfigSection
+                  queryResult={queryResult}
+                  refreshInterval={element.chartConfig?.refreshInterval || 5}
+                  markerType={element.chartConfig?.markerType || "circle"}
+                  onRefreshIntervalChange={(interval) => {
+                    setElement((prev) =>
+                      prev
+                        ? {
+                            ...prev,
+                            chartConfig: {
+                              ...prev.chartConfig,
+                              refreshInterval: interval,
+                            },
+                          }
+                        : prev
+                    );
+                  }}
+                  onMarkerTypeChange={(type) => {
+                    setElement((prev) =>
+                      prev
+                        ? {
+                            ...prev,
+                            chartConfig: {
+                              ...prev.chartConfig,
+                              markerType: type,
+                            },
+                          }
+                        : prev
+                    );
+                  }}
+                />
+              )}
 
               {/* 리스크 알림 설정 */}
               {element.subtype === "risk-alert-v2" && <RiskAlertSection queryResult={queryResult} />}
@@ -534,7 +569,22 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
         <Button variant="outline" onClick={onClose} className="h-9 flex-1 text-sm">
           취소
         </Button>
-        <Button onClick={handleApply} className="h-9 flex-1 text-sm">
+        <Button 
+          onClick={handleApply} 
+          className="h-9 flex-1 text-sm"
+          disabled={
+            // 다중 데이터 소스 위젯: 데이터 소스가 있는데 endpoint가 비어있으면 비활성화
+            // (데이터 소스가 없는 건 OK - 연결 해제하는 경우)
+            (element?.subtype === "map-summary-v2" || 
+             element?.subtype === "chart" || 
+             element?.subtype === "list-v2" || 
+             element?.subtype === "custom-metric-v2" || 
+             element?.subtype === "risk-alert-v2") &&
+            dataSources && 
+            dataSources.length > 0 && 
+            dataSources.some(ds => ds.type === "api" && !ds.endpoint)
+          }
+        >
           적용
         </Button>
       </div>
diff --git a/frontend/components/admin/dashboard/data-sources/MultiApiConfig.tsx b/frontend/components/admin/dashboard/data-sources/MultiApiConfig.tsx
index bbbf7d4d..c72cb18e 100644
--- a/frontend/components/admin/dashboard/data-sources/MultiApiConfig.tsx
+++ b/frontend/components/admin/dashboard/data-sources/MultiApiConfig.tsx
@@ -530,31 +530,50 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
         ))}
       </div>
 
-      {/* 자동 새로고침 설정 */}
+      {/* 마커 polling 간격 설정 (MapTestWidgetV2 전용) */}
       <div className="space-y-2">
-        <Label htmlFor={`refresh-${dataSource.id}`} className="text-xs">
-          자동 새로고침 간격
+        <Label htmlFor="marker-refresh-interval" className="text-xs">
+          마커 새로고침 간격
         </Label>
         <Select
-          value={String(dataSource.refreshInterval || 0)}
-          onValueChange={(value) => onChange({ refreshInterval: Number(value) })}
+          value={(dataSource.refreshInterval ?? 5).toString()}
+          onValueChange={(value) => onChange({ refreshInterval: parseInt(value) })}
         >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="새로고침 안 함" />
+          <SelectTrigger id="marker-refresh-interval" className="h-9 text-xs">
+            <SelectValue placeholder="간격 선택" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="0">새로고침 안 함</SelectItem>
-            <SelectItem value="10">10초마다</SelectItem>
-            <SelectItem value="30">30초마다</SelectItem>
-            <SelectItem value="60">1분마다</SelectItem>
-            <SelectItem value="300">5분마다</SelectItem>
-            <SelectItem value="600">10분마다</SelectItem>
-            <SelectItem value="1800">30분마다</SelectItem>
-            <SelectItem value="3600">1시간마다</SelectItem>
+            <SelectItem value="0" className="text-xs">없음</SelectItem>
+            <SelectItem value="5" className="text-xs">5초</SelectItem>
+            <SelectItem value="10" className="text-xs">10초</SelectItem>
+            <SelectItem value="30" className="text-xs">30초</SelectItem>
+            <SelectItem value="60" className="text-xs">1분</SelectItem>
           </SelectContent>
         </Select>
         <p className="text-[10px] text-muted-foreground">
-          설정한 간격마다 자동으로 데이터를 다시 불러옵니다
+          마커 데이터를 자동으로 갱신하는 주기를 설정합니다
+        </p>
+      </div>
+
+      {/* 마커 종류 선택 (MapTestWidgetV2 전용) */}
+      <div className="space-y-2">
+        <Label htmlFor="marker-type" className="text-xs">
+          마커 종류
+        </Label>
+        <Select
+          value={dataSource.markerType || "circle"}
+          onValueChange={(value) => onChange({ markerType: value })}
+        >
+          <SelectTrigger id="marker-type" className="h-9 text-xs">
+            <SelectValue placeholder="마커 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="circle" className="text-xs">동그라미</SelectItem>
+            <SelectItem value="arrow" className="text-xs">화살표</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-[10px] text-muted-foreground">
+          지도에 표시할 마커의 모양을 선택합니다
         </p>
       </div>
 
@@ -892,6 +911,128 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
           </p>
         </div>
       )}
+
+      {/* 지도 팝업 필드 설정 (MapTestWidgetV2 전용) */}
+      {availableColumns.length > 0 && (
+        <div className="space-y-2">
+          <Label htmlFor="popup-fields" className="text-xs">
+            팝업 표시 필드
+          </Label>
+
+          {/* 기존 팝업 필드 목록 */}
+          {dataSource.popupFields && dataSource.popupFields.length > 0 && (
+            <div className="space-y-3">
+              {dataSource.popupFields.map((field, index) => (
+                <div key={index} className="space-y-2 rounded-lg border bg-muted/30 p-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-medium">필드 {index + 1}</span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        const newFields = [...(dataSource.popupFields || [])];
+                        newFields.splice(index, 1);
+                        onChange({ popupFields: newFields });
+                      }}
+                      className="h-6 w-6 p-0"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  {/* 필드명 선택 */}
+                  <div>
+                    <Label className="text-xs">필드명</Label>
+                    <Select
+                      value={field.fieldName}
+                      onValueChange={(value) => {
+                        const newFields = [...(dataSource.popupFields || [])];
+                        newFields[index].fieldName = value;
+                        onChange({ popupFields: newFields });
+                      }}
+                    >
+                      <SelectTrigger className="h-8 w-full text-xs">
+                        <SelectValue placeholder="필드 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableColumns.map((col) => (
+                          <SelectItem key={col} value={col} className="text-xs">
+                            {col}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 라벨 입력 */}
+                  <div>
+                    <Label className="text-xs">한글 라벨</Label>
+                    <Input
+                      value={field.label || ""}
+                      onChange={(e) => {
+                        const newFields = [...(dataSource.popupFields || [])];
+                        newFields[index].label = e.target.value;
+                        onChange({ popupFields: newFields });
+                      }}
+                      placeholder="예: 차량 번호"
+                      className="h-8 w-full text-xs"
+                      dir="ltr"
+                    />
+                  </div>
+
+                  {/* 포맷 선택 */}
+                  <div>
+                    <Label className="text-xs">표시 포맷</Label>
+                    <Select
+                      value={field.format || "text"}
+                      onValueChange={(value: "text" | "date" | "datetime" | "number" | "url") => {
+                        const newFields = [...(dataSource.popupFields || [])];
+                        newFields[index].format = value;
+                        onChange({ popupFields: newFields });
+                      }}
+                    >
+                      <SelectTrigger className="h-8 w-full text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="text" className="text-xs">텍스트</SelectItem>
+                        <SelectItem value="number" className="text-xs">숫자</SelectItem>
+                        <SelectItem value="date" className="text-xs">날짜</SelectItem>
+                        <SelectItem value="datetime" className="text-xs">날짜시간</SelectItem>
+                        <SelectItem value="url" className="text-xs">URL</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* 필드 추가 버튼 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              const newFields = [...(dataSource.popupFields || [])];
+              newFields.push({
+                fieldName: availableColumns[0] || "",
+                label: "",
+                format: "text",
+              });
+              onChange({ popupFields: newFields });
+            }}
+            className="h-8 w-full gap-2 text-xs"
+            disabled={availableColumns.length === 0}
+          >
+            <Plus className="h-3 w-3" />
+            필드 추가
+          </Button>
+
+          <p className="text-[10px] text-muted-foreground">
+            마커 클릭 시 팝업에 표시할 필드를 선택하고 한글 라벨을 지정하세요
+          </p>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx b/frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx
index 76986718..73b2ab4b 100644
--- a/frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx
+++ b/frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { ChartDataSource } from "@/components/admin/dashboard/types";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -8,7 +8,7 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Loader2, CheckCircle, XCircle } from "lucide-react";
+import { Loader2, CheckCircle, XCircle, Plus, Trash2 } from "lucide-react";
 
 interface MultiDatabaseConfigProps {
   dataSource: ChartDataSource;
@@ -45,13 +45,15 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
       // ExternalDbConnectionAPI 사용 (인증 토큰 자동 포함)
       const { ExternalDbConnectionAPI } = await import("@/lib/api/externalDbConnection");
       const connections = await ExternalDbConnectionAPI.getConnections({ is_active: "Y" });
-      
+
       console.log("✅ 외부 DB 커넥션 로드 성공:", connections.length, "개");
-      setExternalConnections(connections.map((conn: any) => ({
-        id: String(conn.id),
-        name: conn.connection_name,
-        type: conn.db_type,
-      })));
+      setExternalConnections(
+        connections.map((conn: any) => ({
+          id: String(conn.id),
+          name: conn.connection_name,
+          type: conn.db_type,
+        })),
+      );
     } catch (error) {
       console.error("❌ 외부 DB 커넥션 로드 실패:", error);
       setExternalConnections([]);
@@ -73,27 +75,27 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
     try {
       // dashboardApi 사용 (인증 토큰 자동 포함)
       const { dashboardApi } = await import("@/lib/api/dashboard");
-      
+
       if (dataSource.connectionType === "external" && dataSource.externalConnectionId) {
         // 외부 DB
         const { ExternalDbConnectionAPI } = await import("@/lib/api/externalDbConnection");
         const result = await ExternalDbConnectionAPI.executeQuery(
           parseInt(dataSource.externalConnectionId),
-          dataSource.query
+          dataSource.query,
         );
-        
+
         if (result.success && result.data) {
           const rows = Array.isArray(result.data.rows) ? result.data.rows : [];
           const rowCount = rows.length;
-          
+
           // 컬럼 목록 및 타입 추출
           if (rows.length > 0) {
             const columns = Object.keys(rows[0]);
             setAvailableColumns(columns);
-            
+
             // 컬럼 타입 분석
             const types: Record<string, string> = {};
-            columns.forEach(col => {
+            columns.forEach((col) => {
               const value = rows[0][col];
               if (value === null || value === undefined) {
                 types[col] = "unknown";
@@ -113,17 +115,17 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
             });
             setColumnTypes(types);
             setSampleData(rows.slice(0, 3));
-            
+
             console.log("📊 발견된 컬럼:", columns);
             console.log("📊 컬럼 타입:", types);
           }
-          
+
           setTestResult({
             success: true,
             message: "쿼리 실행 성공",
             rowCount,
           });
-          
+
           // 부모로 테스트 결과 전달 (차트 설정용)
           if (onTestResult && rows && rows.length > 0) {
             onTestResult(rows);
@@ -134,15 +136,15 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
       } else {
         // 현재 DB
         const result = await dashboardApi.executeQuery(dataSource.query);
-        
+
         // 컬럼 목록 및 타입 추출
         if (result.rows && result.rows.length > 0) {
           const columns = Object.keys(result.rows[0]);
           setAvailableColumns(columns);
-          
+
           // 컬럼 타입 분석
           const types: Record<string, string> = {};
-          columns.forEach(col => {
+          columns.forEach((col) => {
             const value = result.rows[0][col];
             if (value === null || value === undefined) {
               types[col] = "unknown";
@@ -162,17 +164,17 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
           });
           setColumnTypes(types);
           setSampleData(result.rows.slice(0, 3));
-          
+
           console.log("📊 발견된 컬럼:", columns);
           console.log("📊 컬럼 타입:", types);
         }
-        
+
         setTestResult({
           success: true,
           message: "쿼리 실행 성공",
           rowCount: result.rowCount || 0,
         });
-        
+
         // 부모로 테스트 결과 전달 (차트 설정용)
         if (onTestResult && result.rows && result.rows.length > 0) {
           onTestResult(result.rows);
@@ -194,25 +196,17 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
         <Label className="text-xs">데이터베이스 연결</Label>
         <RadioGroup
           value={dataSource.connectionType || "current"}
-          onValueChange={(value: "current" | "external") =>
-            onChange({ connectionType: value })
-          }
+          onValueChange={(value: "current" | "external") => onChange({ connectionType: value })}
         >
           <div className="flex items-center space-x-2">
-            <RadioGroupItem value="current" id={`current-\${dataSource.id}`} />
-            <Label
-              htmlFor={`current-\${dataSource.id}`}
-              className="text-xs font-normal"
-            >
+            <RadioGroupItem value="current" id={"current-${dataSource.id}"} />
+            <Label htmlFor={"current-${dataSource.id}"} className="text-xs font-normal">
               현재 데이터베이스
             </Label>
           </div>
           <div className="flex items-center space-x-2">
-            <RadioGroupItem value="external" id={`external-\${dataSource.id}`} />
-            <Label
-              htmlFor={`external-\${dataSource.id}`}
-              className="text-xs font-normal"
-            >
+            <RadioGroupItem value="external" id={"external-${dataSource.id}"} />
+            <Label htmlFor={"external-${dataSource.id}"} className="text-xs font-normal">
               외부 데이터베이스
             </Label>
           </div>
@@ -222,12 +216,12 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
       {/* 외부 DB 선택 */}
       {dataSource.connectionType === "external" && (
         <div className="space-y-2">
-          <Label htmlFor={`external-conn-\${dataSource.id}`} className="text-xs">
+          <Label htmlFor={"external-conn-${dataSource.id}"} className="text-xs">
             외부 데이터베이스 선택 *
           </Label>
           {loadingConnections ? (
             <div className="flex h-10 items-center justify-center rounded-md border">
-              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+              <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
             </div>
           ) : (
             <Select
@@ -252,62 +246,74 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
       {/* SQL 쿼리 */}
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <Label htmlFor={`query-\${dataSource.id}`} className="text-xs">
+          <Label htmlFor={"query-${dataSource.id}"} className="text-xs">
             SQL 쿼리 *
           </Label>
-          <Select onValueChange={(value) => {
-            const samples = {
-              users: `SELECT 
+          <Select
+            onValueChange={(value) => {
+              const samples = {
+                users: `SELECT 
   dept_name as 부서명,
   COUNT(*) as 회원수
 FROM user_info
 WHERE dept_name IS NOT NULL
 GROUP BY dept_name
 ORDER BY 회원수 DESC`,
-              dept: `SELECT 
+                dept: `SELECT 
   dept_code as 부서코드,
   dept_name as 부서명,
   location_name as 위치,
   TO_CHAR(regdate, 'YYYY-MM-DD') as 등록일
 FROM dept_info
 ORDER BY dept_code`,
-              usersByDate: `SELECT 
+                usersByDate: `SELECT 
   DATE_TRUNC('month', regdate)::date as 월,
   COUNT(*) as 신규사용자수
 FROM user_info
 WHERE regdate >= CURRENT_DATE - INTERVAL '12 months'
 GROUP BY DATE_TRUNC('month', regdate)
 ORDER BY 월`,
-              usersByPosition: `SELECT 
+                usersByPosition: `SELECT 
   position_name as 직급,
   COUNT(*) as 인원수
 FROM user_info
 WHERE position_name IS NOT NULL
 GROUP BY position_name
 ORDER BY 인원수 DESC`,
-              deptHierarchy: `SELECT 
+                deptHierarchy: `SELECT 
   COALESCE(parent_dept_code, '최상위') as 상위부서코드,
   COUNT(*) as 하위부서수
 FROM dept_info
 GROUP BY parent_dept_code
 ORDER BY 하위부서수 DESC`,
-            };
-            onChange({ query: samples[value as keyof typeof samples] || "" });
-          }}>
+              };
+              onChange({ query: samples[value as keyof typeof samples] || "" });
+            }}
+          >
             <SelectTrigger className="h-7 w-32 text-xs">
               <SelectValue placeholder="샘플 쿼리" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="users" className="text-xs">부서별 회원수</SelectItem>
-              <SelectItem value="dept" className="text-xs">부서 목록</SelectItem>
-              <SelectItem value="usersByDate" className="text-xs">월별 신규사용자</SelectItem>
-              <SelectItem value="usersByPosition" className="text-xs">직급별 인원수</SelectItem>
-              <SelectItem value="deptHierarchy" className="text-xs">부서 계층구조</SelectItem>
+              <SelectItem value="users" className="text-xs">
+                부서별 회원수
+              </SelectItem>
+              <SelectItem value="dept" className="text-xs">
+                부서 목록
+              </SelectItem>
+              <SelectItem value="usersByDate" className="text-xs">
+                월별 신규사용자
+              </SelectItem>
+              <SelectItem value="usersByPosition" className="text-xs">
+                직급별 인원수
+              </SelectItem>
+              <SelectItem value="deptHierarchy" className="text-xs">
+                부서 계층구조
+              </SelectItem>
             </SelectContent>
           </Select>
         </div>
         <Textarea
-          id={`query-\${dataSource.id}`}
+          id={"query-${dataSource.id}"}
           value={dataSource.query || ""}
           onChange={(e) => onChange({ query: e.target.value })}
           placeholder="SELECT * FROM table_name WHERE ..."
@@ -315,35 +321,43 @@ ORDER BY 하위부서수 DESC`,
         />
       </div>
 
-      {/* 자동 새로고침 설정 */}
-      <div className="space-y-1">
-        <Label htmlFor={`refresh-${dataSource.id}`} className="text-xs">
-          자동 새로고침 간격
+      {/* 마커 polling 간격 설정 (MapTestWidgetV2 전용) */}
+      <div className="space-y-2">
+        <Label htmlFor="marker-refresh-interval" className="text-xs">
+          데이터 새로고침 간격
         </Label>
         <Select
-          value={String(dataSource.refreshInterval || 0)}
-          onValueChange={(value) => onChange({ refreshInterval: Number(value) })}
+          value={(dataSource.refreshInterval ?? 5).toString()}
+          onValueChange={(value) => onChange({ refreshInterval: parseInt(value) })}
         >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="새로고침 안 함" />
+          <SelectTrigger id="marker-refresh-interval" className="h-8 text-xs">
+            <SelectValue placeholder="간격 선택" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="0">새로고침 안 함</SelectItem>
-            <SelectItem value="10">10초마다</SelectItem>
-            <SelectItem value="30">30초마다</SelectItem>
-            <SelectItem value="60">1분마다</SelectItem>
-            <SelectItem value="300">5분마다</SelectItem>
-            <SelectItem value="600">10분마다</SelectItem>
-            <SelectItem value="1800">30분마다</SelectItem>
-            <SelectItem value="3600">1시간마다</SelectItem>
+            <SelectItem value="0" className="text-xs">
+              없음
+            </SelectItem>
+            <SelectItem value="5" className="text-xs">
+              5초
+            </SelectItem>
+            <SelectItem value="10" className="text-xs">
+              10초
+            </SelectItem>
+            <SelectItem value="30" className="text-xs">
+              30초
+            </SelectItem>
+            <SelectItem value="60" className="text-xs">
+              1분
+            </SelectItem>
           </SelectContent>
         </Select>
+        <p className="text-muted-foreground text-[10px]">마커 데이터를 자동으로 갱신하는 주기를 설정합니다</p>
       </div>
 
       {/* 지도 색상 설정 (MapTestWidgetV2 전용) */}
-      <div className="space-y-2 rounded-lg border bg-muted/30 p-2">
+      <div className="bg-muted/30 space-y-2 rounded-lg border p-2">
         <h5 className="text-xs font-semibold">🎨 지도 색상</h5>
-        
+
         {/* 색상 팔레트 */}
         <div className="grid grid-cols-4 gap-1.5">
           {[
@@ -361,14 +375,16 @@ ORDER BY 하위부서수 DESC`,
               <button
                 key={color.name}
                 type="button"
-                onClick={() => onChange({ 
-                  markerColor: color.marker, 
-                  polygonColor: color.polygon,
-                  polygonOpacity: 0.5,
-                })}
+                onClick={() =>
+                  onChange({
+                    markerColor: color.marker,
+                    polygonColor: color.polygon,
+                    polygonOpacity: 0.5,
+                  })
+                }
                 className={`flex h-12 flex-col items-center justify-center gap-0.5 rounded-md border-2 transition-all hover:scale-105 ${
-                  isSelected 
-                    ? "border-primary bg-primary/10 shadow-md" 
+                  isSelected
+                    ? "border-primary bg-primary/10 shadow-md"
                     : "border-border bg-background hover:border-primary/50"
                 }`}
               >
@@ -405,21 +421,13 @@ ORDER BY 하위부서수 DESC`,
         {testResult && (
           <div
             className={`flex items-center gap-2 rounded-md p-2 text-xs ${
-              testResult.success
-                ? "bg-success/10 text-success"
-                : "bg-destructive/10 text-destructive"
+              testResult.success ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"
             }`}
           >
-            {testResult.success ? (
-              <CheckCircle className="h-3 w-3" />
-            ) : (
-              <XCircle className="h-3 w-3" />
-            )}
+            {testResult.success ? <CheckCircle className="h-3 w-3" /> : <XCircle className="h-3 w-3" />}
             <div>
               {testResult.message}
-              {testResult.rowCount !== undefined && (
-                <span className="ml-1">({testResult.rowCount}행)</span>
-              )}
+              {testResult.rowCount !== undefined && <span className="ml-1">({testResult.rowCount}행)</span>}
             </div>
           </div>
         )}
@@ -431,7 +439,7 @@ ORDER BY 하위부서수 DESC`,
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-xs font-semibold">메트릭 컬럼 선택</Label>
-              <p className="text-[10px] text-muted-foreground mt-0.5">
+              <p className="text-muted-foreground mt-0.5 text-[10px]">
                 {dataSource.selectedColumns && dataSource.selectedColumns.length > 0
                   ? `${dataSource.selectedColumns.length}개 선택됨`
                   : "모든 컬럼 표시"}
@@ -468,18 +476,15 @@ ORDER BY 하위부서수 DESC`,
           )}
 
           {/* 컬럼 카드 그리드 */}
-          <div className="grid grid-cols-1 gap-1.5 max-h-60 overflow-y-auto">
+          <div className="grid max-h-60 grid-cols-1 gap-1.5 overflow-y-auto">
             {availableColumns
-              .filter(col => 
-                !columnSearchTerm || 
-                col.toLowerCase().includes(columnSearchTerm.toLowerCase())
-              )
+              .filter((col) => !columnSearchTerm || col.toLowerCase().includes(columnSearchTerm.toLowerCase()))
               .map((col) => {
-                const isSelected = 
-                  !dataSource.selectedColumns || 
-                  dataSource.selectedColumns.length === 0 || 
+                const isSelected =
+                  !dataSource.selectedColumns ||
+                  dataSource.selectedColumns.length === 0 ||
                   dataSource.selectedColumns.includes(col);
-                
+
                 const type = columnTypes[col] || "unknown";
                 const typeIcon = {
                   number: "🔢",
@@ -487,51 +492,53 @@ ORDER BY 하위부서수 DESC`,
                   date: "📅",
                   boolean: "✓",
                   object: "📦",
-                  unknown: "❓"
+                  unknown: "❓",
                 }[type];
-                
+
                 const typeColor = {
                   number: "text-primary bg-primary/10",
                   string: "text-foreground bg-muted",
                   date: "text-primary bg-primary/10",
                   boolean: "text-success bg-success/10",
                   object: "text-warning bg-warning/10",
-                  unknown: "text-muted-foreground bg-muted"
+                  unknown: "text-muted-foreground bg-muted",
                 }[type];
 
                 return (
                   <div
                     key={col}
                     onClick={() => {
-                      const currentSelected = dataSource.selectedColumns && dataSource.selectedColumns.length > 0
-                        ? dataSource.selectedColumns
-                        : availableColumns;
-                      
+                      const currentSelected =
+                        dataSource.selectedColumns && dataSource.selectedColumns.length > 0
+                          ? dataSource.selectedColumns
+                          : availableColumns;
+
                       const newSelected = isSelected
-                        ? currentSelected.filter(c => c !== col)
+                        ? currentSelected.filter((c) => c !== col)
                         : [...currentSelected, col];
-                      
+
                       onChange({ selectedColumns: newSelected });
                     }}
-                    className={`
-                      relative flex items-start gap-2 rounded-lg border p-2 cursor-pointer transition-all
-                      ${isSelected 
-                        ? "border-primary bg-primary/5 shadow-sm" 
+                    className={`relative flex cursor-pointer items-start gap-2 rounded-lg border p-2 transition-all ${
+                      isSelected
+                        ? "border-primary bg-primary/5 shadow-sm"
                         : "border-border bg-card hover:border-primary/50 hover:bg-muted/50"
-                      }
-                    `}
+                    } `}
                   >
                     {/* 체크박스 */}
-                    <div className="flex-shrink-0 mt-0.5">
-                      <div className={`
-                        h-4 w-4 rounded border-2 flex items-center justify-center transition-colors
-                        ${isSelected 
-                          ? "border-primary bg-primary" 
-                          : "border-border bg-background"
-                        }
-                      `}>
+                    <div className="mt-0.5 flex-shrink-0">
+                      <div
+                        className={`flex h-4 w-4 items-center justify-center rounded border-2 transition-colors ${
+                          isSelected ? "border-primary bg-primary" : "border-border bg-background"
+                        } `}
+                      >
                         {isSelected && (
-                          <svg className="h-3 w-3 text-primary-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <svg
+                            className="text-primary-foreground h-3 w-3"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                           </svg>
                         )}
@@ -539,17 +546,17 @@ ORDER BY 하위부서수 DESC`,
                     </div>
 
                     {/* 컬럼 정보 */}
-                    <div className="flex-1 min-w-0">
+                    <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium truncate">{col}</span>
-                        <span className={`text-xs px-1.5 py-0.5 rounded ${typeColor}`}>
+                        <span className="truncate text-sm font-medium">{col}</span>
+                        <span className={`rounded px-1.5 py-0.5 text-xs ${typeColor}`}>
                           {typeIcon} {type}
                         </span>
                       </div>
-                      
+
                       {/* 샘플 데이터 */}
                       {sampleData.length > 0 && (
-                        <div className="mt-1.5 text-xs text-muted-foreground">
+                        <div className="text-muted-foreground mt-1.5 text-xs">
                           <span className="font-medium">예시:</span>{" "}
                           {sampleData.slice(0, 2).map((row, i) => (
                             <span key={i}>
@@ -567,33 +574,28 @@ ORDER BY 하위부서수 DESC`,
           </div>
 
           {/* 검색 결과 없음 */}
-          {columnSearchTerm && availableColumns.filter(col => 
-            col.toLowerCase().includes(columnSearchTerm.toLowerCase())
-          ).length === 0 && (
-            <div className="text-center py-8 text-sm text-muted-foreground">
-              "{columnSearchTerm}"에 대한 컬럼을 찾을 수 없습니다
-            </div>
-          )}
+          {columnSearchTerm &&
+            availableColumns.filter((col) => col.toLowerCase().includes(columnSearchTerm.toLowerCase())).length ===
+              0 && (
+              <div className="text-muted-foreground py-8 text-center text-sm">
+                "{columnSearchTerm}"에 대한 컬럼을 찾을 수 없습니다
+              </div>
+            )}
         </div>
       )}
 
       {/* 컬럼 매핑 (쿼리 테스트 성공 후에만 표시) */}
       {testResult?.success && availableColumns.length > 0 && (
-        <div className="space-y-3 rounded-lg border bg-muted/30 p-3">
+        <div className="bg-muted/30 space-y-3 rounded-lg border p-3">
           <div className="flex items-center justify-between">
             <div>
               <h5 className="text-xs font-semibold">🔄 컬럼 매핑 (선택사항)</h5>
-              <p className="text-[10px] text-muted-foreground mt-0.5">
+              <p className="text-muted-foreground mt-0.5 text-[10px]">
                 다른 데이터 소스와 통합할 때 컬럼명을 통일할 수 있습니다
               </p>
             </div>
             {dataSource.columnMapping && Object.keys(dataSource.columnMapping).length > 0 && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => onChange({ columnMapping: {} })}
-                className="h-7 text-xs"
-              >
+              <Button variant="ghost" size="sm" onClick={() => onChange({ columnMapping: {} })} className="h-7 text-xs">
                 초기화
               </Button>
             )}
@@ -605,11 +607,7 @@ ORDER BY 하위부서수 DESC`,
               {Object.entries(dataSource.columnMapping).map(([original, mapped]) => (
                 <div key={original} className="flex items-center gap-2">
                   {/* 원본 컬럼 (읽기 전용) */}
-                  <Input
-                    value={original}
-                    disabled
-                    className="h-8 flex-1 text-xs bg-muted"
-                  />
+                  <Input value={original} disabled className="bg-muted h-8 flex-1 text-xs" />
 
                   {/* 화살표 */}
                   <span className="text-muted-foreground text-xs">→</span>
@@ -658,18 +656,147 @@ ORDER BY 하위부서수 DESC`,
             </SelectTrigger>
             <SelectContent>
               {availableColumns
-                .filter(col => !dataSource.columnMapping || !dataSource.columnMapping[col])
-                .map(col => (
+                .filter((col) => !dataSource.columnMapping || !dataSource.columnMapping[col])
+                .map((col) => (
                   <SelectItem key={col} value={col} className="text-xs">
                     {col}
                   </SelectItem>
-                ))
-              }
+                ))}
             </SelectContent>
           </Select>
 
-          <p className="text-[10px] text-muted-foreground">
-            💡 매핑하지 않은 컬럼은 원본 이름 그대로 사용됩니다
+          <p className="text-muted-foreground text-[10px]">💡 매핑하지 않은 컬럼은 원본 이름 그대로 사용됩니다</p>
+        </div>
+      )}
+
+      {/* 지도 팝업 필드 설정 (MapTestWidgetV2 전용) */}
+      {availableColumns.length > 0 && (
+        <div className="space-y-2">
+          <Label htmlFor="popup-fields" className="text-xs">
+            팝업 표시 필드
+          </Label>
+
+          {/* 기존 팝업 필드 목록 */}
+          {dataSource.popupFields && dataSource.popupFields.length > 0 && (
+            <div className="space-y-3">
+              {dataSource.popupFields.map((field, index) => (
+                <div key={index} className="bg-muted/30 space-y-2 rounded-lg border p-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-medium">필드 {index + 1}</span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        const newFields = [...(dataSource.popupFields || [])];
+                        newFields.splice(index, 1);
+                        onChange({ popupFields: newFields });
+                      }}
+                      className="h-6 w-6 p-0"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  {/* 필드명 선택 */}
+                  <div>
+                    <Label className="text-xs">필드명</Label>
+                    <Select
+                      value={field.fieldName}
+                      onValueChange={(value) => {
+                        const newFields = [...(dataSource.popupFields || [])];
+                        newFields[index].fieldName = value;
+                        onChange({ popupFields: newFields });
+                      }}
+                    >
+                      <SelectTrigger className="h-8 w-full text-xs">
+                        <SelectValue placeholder="필드 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableColumns.map((col) => (
+                          <SelectItem key={col} value={col} className="text-xs">
+                            {col}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 라벨 입력 */}
+                  <div>
+                    <Label className="text-xs">한글 라벨</Label>
+                    <Input
+                      value={field.label || ""}
+                      onChange={(e) => {
+                        const newFields = [...(dataSource.popupFields || [])];
+                        newFields[index].label = e.target.value;
+                        onChange({ popupFields: newFields });
+                      }}
+                      placeholder="예: 차량 번호"
+                      className="h-8 w-full text-xs"
+                      dir="ltr"
+                    />
+                  </div>
+
+                  {/* 포맷 선택 */}
+                  <div>
+                    <Label className="text-xs">표시 포맷</Label>
+                    <Select
+                      value={field.format || "text"}
+                      onValueChange={(value: "text" | "date" | "datetime" | "number" | "url") => {
+                        const newFields = [...(dataSource.popupFields || [])];
+                        newFields[index].format = value;
+                        onChange({ popupFields: newFields });
+                      }}
+                    >
+                      <SelectTrigger className="h-8 w-full text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="text" className="text-xs">
+                          텍스트
+                        </SelectItem>
+                        <SelectItem value="number" className="text-xs">
+                          숫자
+                        </SelectItem>
+                        <SelectItem value="date" className="text-xs">
+                          날짜
+                        </SelectItem>
+                        <SelectItem value="datetime" className="text-xs">
+                          날짜시간
+                        </SelectItem>
+                        <SelectItem value="url" className="text-xs">
+                          URL
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* 필드 추가 버튼 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              const newFields = [...(dataSource.popupFields || [])];
+              newFields.push({
+                fieldName: availableColumns[0] || "",
+                label: "",
+                format: "text",
+              });
+              onChange({ popupFields: newFields });
+            }}
+            className="h-8 w-full gap-2 text-xs"
+            disabled={availableColumns.length === 0}
+          >
+            <Plus className="h-3 w-3" />
+            필드 추가
+          </Button>
+
+          <p className="text-muted-foreground text-[10px]">
+            마커 클릭 시 팝업에 표시할 필드를 선택하고 한글 라벨을 지정하세요
           </p>
         </div>
       )}
diff --git a/frontend/components/admin/dashboard/types.ts b/frontend/components/admin/dashboard/types.ts
index 8b8ff2b4..f5490dbf 100644
--- a/frontend/components/admin/dashboard/types.ts
+++ b/frontend/components/admin/dashboard/types.ts
@@ -52,7 +52,7 @@ export type ElementSubtype =
   | "yard-management-3d" // 야드 관리 3D 위젯
   | "work-history" // 작업 이력 위젯
   | "transport-stats"; // 커스텀 통계 카드 위젯
-  // | "custom-metric"; // (구버전 - 주석 처리: 2025-10-28, custom-metric-v2로 대체)
+// | "custom-metric"; // (구버전 - 주석 처리: 2025-10-28, custom-metric-v2로 대체)
 
 // 차트 분류
 export type ChartCategory = "axis-based" | "circular";
@@ -164,12 +164,20 @@ export interface ChartDataSource {
   markerColor?: string; // 마커 색상 (예: "#ff0000")
   polygonColor?: string; // 폴리곤 색상 (예: "#0000ff")
   polygonOpacity?: number; // 폴리곤 투명도 (0.0 ~ 1.0, 기본값: 0.5)
+  markerType?: string; // 마커 종류 (circle, arrow)
 
   // 컬럼 매핑 (다중 데이터 소스 통합용)
   columnMapping?: Record<string, string>; // { 원본컬럼: 표시이름 } (예: { "name": "product" })
 
   // 메트릭 설정 (CustomMetricTestWidget용)
   selectedColumns?: string[]; // 표시할 컬럼 선택 (빈 배열이면 전체 표시)
+
+  // 지도 팝업 설정 (MapTestWidgetV2용)
+  popupFields?: {
+    fieldName: string; // DB 컬럼명 (예: vehicle_number)
+    label: string; // 표시할 한글명 (예: 차량 번호)
+    format?: "text" | "date" | "datetime" | "number" | "url"; // 표시 포맷
+  }[];
 }
 
 export interface ChartConfig {
diff --git a/frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx b/frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx
index ae75f7cb..3ed5fe24 100644
--- a/frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx
+++ b/frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx
@@ -3,20 +3,30 @@
 import React from "react";
 import { QueryResult } from "../types";
 import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
 
 interface MapConfigSectionProps {
   queryResult: QueryResult | null;
+  refreshInterval?: number;
+  markerType?: string;
+  onRefreshIntervalChange?: (interval: number) => void;
+  onMarkerTypeChange?: (type: string) => void;
 }
 
 /**
  * 지도 위젯 설정 섹션
- * - 위도/경도 매핑
- * 
- * TODO: 상세 설정 UI 추가 필요
+ * - 자동 새로고침 간격 설정
+ * - 마커 종류 선택
  */
-export function MapConfigSection({ queryResult }: MapConfigSectionProps) {
+export function MapConfigSection({ 
+  queryResult, 
+  refreshInterval = 5,
+  markerType = "circle",
+  onRefreshIntervalChange,
+  onMarkerTypeChange 
+}: MapConfigSectionProps) {
   // 쿼리 결과가 없으면 안내 메시지 표시
   if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
     return (
@@ -34,13 +44,56 @@ export function MapConfigSection({ queryResult }: MapConfigSectionProps) {
 
   return (
     <div className="rounded-lg bg-background p-3 shadow-sm">
-      <Label className="mb-2 block text-xs font-semibold">지도 설정</Label>
-      <Alert>
-        <AlertCircle className="h-4 w-4" />
-        <AlertDescription className="text-xs">
-          지도 상세 설정 UI는 추후 추가 예정입니다.
-        </AlertDescription>
-      </Alert>
+      <Label className="mb-3 block text-xs font-semibold">지도 설정</Label>
+      
+      <div className="space-y-3">
+        {/* 자동 새로고침 간격 */}
+        <div className="space-y-1.5">
+          <Label htmlFor="refresh-interval" className="text-xs">
+            자동 새로고침 간격
+          </Label>
+          <Select
+            value={refreshInterval.toString()}
+            onValueChange={(value) => onRefreshIntervalChange?.(parseInt(value))}
+          >
+            <SelectTrigger id="refresh-interval" className="h-9 text-xs">
+              <SelectValue placeholder="새로고침 간격 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0" className="text-xs">없음</SelectItem>
+              <SelectItem value="5" className="text-xs">5초</SelectItem>
+              <SelectItem value="10" className="text-xs">10초</SelectItem>
+              <SelectItem value="30" className="text-xs">30초</SelectItem>
+              <SelectItem value="60" className="text-xs">1분</SelectItem>
+            </SelectContent>
+          </Select>
+          <p className="text-[10px] text-muted-foreground">
+            마커 데이터를 자동으로 갱신하는 주기를 설정합니다
+          </p>
+        </div>
+
+        {/* 마커 종류 선택 */}
+        <div className="space-y-1.5">
+          <Label htmlFor="marker-type" className="text-xs">
+            마커 종류
+          </Label>
+          <Select
+            value={markerType}
+            onValueChange={(value) => onMarkerTypeChange?.(value)}
+          >
+            <SelectTrigger id="marker-type" className="h-9 text-xs">
+              <SelectValue placeholder="마커 종류 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="circle" className="text-xs">동그라미</SelectItem>
+              <SelectItem value="arrow" className="text-xs">화살표</SelectItem>
+            </SelectContent>
+          </Select>
+          <p className="text-[10px] text-muted-foreground">
+            지도에 표시할 마커의 모양을 선택합니다
+          </p>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx
index 2b21b5f4..d26ac0b7 100644
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -16,8 +16,8 @@ import {
 import dynamic from "next/dynamic";
 
 // 위젯 동적 import - 모든 위젯
-const MapSummaryWidget = dynamic(() => import("./widgets/MapSummaryWidget"), { ssr: false });
-const MapTestWidget = dynamic(() => import("./widgets/MapTestWidget"), { ssr: false });
+// const MapSummaryWidget = dynamic(() => import("./widgets/MapSummaryWidget"), { ssr: false });
+// const MapTestWidget = dynamic(() => import("./widgets/MapTestWidget"), { ssr: false });
 const MapTestWidgetV2 = dynamic(() => import("./widgets/MapTestWidgetV2"), { ssr: false });
 const ChartTestWidget = dynamic(() => import("./widgets/ChartTestWidget"), { ssr: false });
 const ListTestWidget = dynamic(
@@ -27,7 +27,7 @@ const ListTestWidget = dynamic(
 const CustomMetricTestWidget = dynamic(() => import("./widgets/CustomMetricTestWidget"), { ssr: false });
 const RiskAlertTestWidget = dynamic(() => import("./widgets/RiskAlertTestWidget"), { ssr: false });
 const StatusSummaryWidget = dynamic(() => import("./widgets/StatusSummaryWidget"), { ssr: false });
-const RiskAlertWidget = dynamic(() => import("./widgets/RiskAlertWidget"), { ssr: false });
+// const RiskAlertWidget = dynamic(() => import("./widgets/RiskAlertWidget"), { ssr: false });
 const WeatherWidget = dynamic(() => import("./widgets/WeatherWidget"), { ssr: false });
 const WeatherMapWidget = dynamic(() => import("./widgets/WeatherMapWidget"), { ssr: false });
 const ExchangeWidget = dynamic(() => import("./widgets/ExchangeWidget"), { ssr: false });
@@ -51,10 +51,10 @@ const ClockWidget = dynamic(
   () => import("@/components/admin/dashboard/widgets/ClockWidget").then((mod) => ({ default: mod.ClockWidget })),
   { ssr: false },
 );
-const ListWidget = dynamic(
-  () => import("@/components/admin/dashboard/widgets/ListWidget").then((mod) => ({ default: mod.ListWidget })),
-  { ssr: false },
-);
+// const ListWidget = dynamic(
+//   () => import("@/components/admin/dashboard/widgets/ListWidget").then((mod) => ({ default: mod.ListWidget })),
+//   { ssr: false },
+// );
 
 const YardManagement3DWidget = dynamic(() => import("@/components/admin/dashboard/widgets/YardManagement3DWidget"), {
   ssr: false,
@@ -68,9 +68,9 @@ const CustomStatsWidget = dynamic(() => import("./widgets/CustomStatsWidget"), {
   ssr: false,
 });
 
-const CustomMetricWidget = dynamic(() => import("./widgets/CustomMetricWidget"), {
-  ssr: false,
-});
+// const CustomMetricWidget = dynamic(() => import("./widgets/CustomMetricWidget"), {
+//   ssr: false,
+// });
 
 /**
  * 위젯 렌더링 함수 - DashboardSidebar의 모든 subtype 처리
@@ -91,10 +91,10 @@ function renderWidget(element: DashboardElement) {
       return <CalculatorWidget element={element} />;
     case "clock":
       return <ClockWidget element={element} />;
-    case "map-summary":
-      return <MapSummaryWidget element={element} />;
-    case "map-test":
-      return <MapTestWidget element={element} />;
+    // case "map-summary":
+    //   return <MapSummaryWidget element={element} />;
+    // case "map-test":
+    //   return <MapTestWidget element={element} />;
     case "map-summary-v2":
       return <MapTestWidgetV2 element={element} />;
     case "chart":
@@ -105,14 +105,14 @@ function renderWidget(element: DashboardElement) {
       return <CustomMetricTestWidget element={element} />;
     case "risk-alert-v2":
       return <RiskAlertTestWidget element={element} />;
-    case "risk-alert":
-      return <RiskAlertWidget element={element} />;
+    // case "risk-alert":
+    //   return <RiskAlertWidget element={element} />;
     case "calendar":
       return <CalendarWidget element={element} />;
     case "status-summary":
       return <StatusSummaryWidget element={element} />;
-    case "custom-metric":
-      return <CustomMetricWidget element={element} />;
+    // case "custom-metric":
+    //   return <CustomMetricWidget element={element} />;
 
     // === 운영/작업 지원 ===
     case "todo":
@@ -122,8 +122,8 @@ function renderWidget(element: DashboardElement) {
       return <BookingAlertWidget element={element} />;
     case "document":
       return <DocumentWidget element={element} />;
-    case "list":
-      return <ListWidget element={element} />;
+    // case "list":
+    //   return <ListWidget element={element} />;
 
     case "yard-management-3d":
       // console.log("🏗️ 야드관리 위젯 렌더링:", {
@@ -171,7 +171,7 @@ function renderWidget(element: DashboardElement) {
     // === 기본 fallback ===
     default:
       return (
-        <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-muted to-muted-foreground p-4 text-white">
+        <div className="from-muted to-muted-foreground flex h-full w-full items-center justify-center bg-gradient-to-br p-4 text-white">
           <div className="text-center">
             <div className="mb-2 text-3xl">❓</div>
             <div className="text-sm">알 수 없는 위젯 타입: {element.subtype}</div>
@@ -212,7 +212,7 @@ export function DashboardViewer({
     dataUrl: string,
     format: "png" | "pdf",
     canvasWidth: number,
-    canvasHeight: number
+    canvasHeight: number,
   ) => {
     if (format === "png") {
       console.log("💾 PNG 다운로드 시작...");
@@ -227,7 +227,7 @@ export function DashboardViewer({
     } else {
       console.log("📄 PDF 생성 중...");
       const jsPDF = (await import("jspdf")).default;
-      
+
       // dataUrl에서 이미지 크기 계산
       const img = new Image();
       img.src = dataUrl;
@@ -274,40 +274,41 @@ export function DashboardViewer({
 
         console.log("📸 html-to-image 로딩 중...");
         // html-to-image 동적 import
+        // @ts-expect-error - html-to-image 타입 선언 누락
         const { toPng } = await import("html-to-image");
 
         console.log("📸 캔버스 캡처 중...");
-        
+
         // 3D/WebGL 렌더링 완료 대기
         console.log("⏳ 3D 렌더링 완료 대기 중...");
         await new Promise((resolve) => setTimeout(resolve, 1000));
-        
+
         // WebGL 캔버스를 이미지로 변환 (Three.js 캔버스 보존)
         console.log("🎨 WebGL 캔버스 처리 중...");
         const webglCanvases = canvas.querySelectorAll("canvas");
         const webglImages: { canvas: HTMLCanvasElement; dataUrl: string; rect: DOMRect }[] = [];
-        
+
         webglCanvases.forEach((webglCanvas) => {
           try {
             const rect = webglCanvas.getBoundingClientRect();
             const dataUrl = webglCanvas.toDataURL("image/png");
             webglImages.push({ canvas: webglCanvas, dataUrl, rect });
-            console.log("✅ WebGL 캔버스 캡처:", { 
-              width: rect.width, 
+            console.log("✅ WebGL 캔버스 캡처:", {
+              width: rect.width,
               height: rect.height,
               left: rect.left,
               top: rect.top,
-              bottom: rect.bottom
+              bottom: rect.bottom,
             });
           } catch (error) {
             console.warn("⚠️ WebGL 캔버스 캡처 실패:", error);
           }
         });
-        
+
         // 캔버스의 실제 크기와 위치 가져오기
         const rect = canvas.getBoundingClientRect();
         const canvasWidth = canvas.scrollWidth;
-        
+
         // 실제 콘텐츠의 최하단 위치 계산
         // 뷰어 모드에서는 모든 자식 요소를 확인
         const children = canvas.querySelectorAll("*");
@@ -323,17 +324,17 @@ export function DashboardViewer({
             maxBottom = relativeBottom;
           }
         });
-        
+
         // 실제 콘텐츠 높이 + 여유 공간 (50px)
         // maxBottom이 0이면 기본 캔버스 높이 사용
         const canvasHeight = maxBottom > 50 ? maxBottom + 50 : Math.max(canvas.scrollHeight, rect.height);
-        
+
         console.log("📐 캔버스 정보:", {
           rect: { x: rect.x, y: rect.y, left: rect.left, top: rect.top, width: rect.width, height: rect.height },
           scroll: { width: canvasWidth, height: canvas.scrollHeight },
           calculated: { width: canvasWidth, height: canvasHeight },
           maxBottom: maxBottom,
-          webglCount: webglImages.length
+          webglCount: webglImages.length,
         });
 
         // html-to-image로 캔버스 캡처 (WebGL 제외)
@@ -344,8 +345,8 @@ export function DashboardViewer({
           pixelRatio: 2, // 고해상도
           cacheBust: true,
           skipFonts: false,
-          preferredFontFormat: 'woff2',
-          filter: (node) => {
+          preferredFontFormat: "woff2",
+          filter: (node: Node) => {
             // WebGL 캔버스는 제외 (나중에 수동으로 합성)
             if (node instanceof HTMLCanvasElement) {
               return false;
@@ -353,7 +354,7 @@ export function DashboardViewer({
             return true;
           },
         });
-        
+
         // WebGL 캔버스를 이미지 위에 합성
         if (webglImages.length > 0) {
           console.log("🖼️ WebGL 이미지 합성 중...");
@@ -362,17 +363,17 @@ export function DashboardViewer({
           await new Promise((resolve) => {
             img.onload = resolve;
           });
-          
+
           // 새 캔버스에 합성
           const compositeCanvas = document.createElement("canvas");
           compositeCanvas.width = img.width;
           compositeCanvas.height = img.height;
           const ctx = compositeCanvas.getContext("2d");
-          
+
           if (ctx) {
             // 기본 이미지 그리기
             ctx.drawImage(img, 0, 0);
-            
+
             // WebGL 이미지들을 위치에 맞게 그리기
             for (const { dataUrl: webglDataUrl, rect: webglRect } of webglImages) {
               const webglImg = new Image();
@@ -380,28 +381,28 @@ export function DashboardViewer({
               await new Promise((resolve) => {
                 webglImg.onload = resolve;
               });
-              
+
               // 상대 위치 계산 (pixelRatio 2 고려)
               const relativeX = (webglRect.left - rect.left) * 2;
               const relativeY = (webglRect.top - rect.top) * 2;
               const width = webglRect.width * 2;
               const height = webglRect.height * 2;
-              
+
               ctx.drawImage(webglImg, relativeX, relativeY, width, height);
               console.log("✅ WebGL 이미지 합성 완료:", { x: relativeX, y: relativeY, width, height });
             }
-            
+
             // 합성된 이미지를 dataUrl로 변환
             const compositeDataUrl = compositeCanvas.toDataURL("image/png");
             console.log("✅ 최종 합성 완료");
-            
+
             // 합성된 이미지로 다운로드
             return await handleDownloadWithDataUrl(compositeDataUrl, format, canvasWidth, canvasHeight);
           }
         }
 
         console.log("✅ 캡처 완료 (WebGL 없음)");
-        
+
         // WebGL이 없는 경우 기본 다운로드
         await handleDownloadWithDataUrl(dataUrl, format, canvasWidth, canvasHeight);
       } catch (error) {
@@ -409,7 +410,8 @@ export function DashboardViewer({
         alert(`다운로드에 실패했습니다.\n\n에러: ${error instanceof Error ? error.message : String(error)}`);
       }
     },
-    [backgroundColor, dashboardTitle],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [backgroundColor, dashboardTitle, handleDownloadWithDataUrl],
   );
 
   // 캔버스 설정 계산
@@ -528,11 +530,11 @@ export function DashboardViewer({
   // 요소가 없는 경우
   if (elements.length === 0) {
     return (
-      <div className="flex h-full items-center justify-center bg-muted">
+      <div className="bg-muted flex h-full items-center justify-center">
         <div className="text-center">
           <div className="mb-4 text-6xl">📊</div>
-          <div className="mb-2 text-xl font-medium text-foreground">표시할 요소가 없습니다</div>
-          <div className="text-sm text-muted-foreground">대시보드 편집기에서 차트나 위젯을 추가해보세요</div>
+          <div className="text-foreground mb-2 text-xl font-medium">표시할 요소가 없습니다</div>
+          <div className="text-muted-foreground text-sm">대시보드 편집기에서 차트나 위젯을 추가해보세요</div>
         </div>
       </div>
     );
@@ -541,8 +543,8 @@ export function DashboardViewer({
   return (
     <DashboardProvider>
       {/* 데스크톱: 디자이너에서 설정한 위치 그대로 렌더링 (화면에 맞춰 비율 유지) */}
-      <div className="hidden min-h-screen bg-muted py-8 lg:block" style={{ backgroundColor }}>
-        <div className="mx-auto px-4" style={{ width: '100%', maxWidth: 'none' }}>
+      <div className="bg-muted hidden min-h-screen py-8 lg:block" style={{ backgroundColor }}>
+        <div className="mx-auto px-4" style={{ width: "100%", maxWidth: "none" }}>
           {/* 다운로드 버튼 */}
           <div className="mb-4 flex justify-end">
             <DropdownMenu>
@@ -584,7 +586,7 @@ export function DashboardViewer({
       </div>
 
       {/* 태블릿 이하: 반응형 세로 정렬 */}
-      <div className="block min-h-screen bg-muted p-4 lg:hidden" style={{ backgroundColor }}>
+      <div className="bg-muted block min-h-screen p-4 lg:hidden" style={{ backgroundColor }}>
         <div className="mx-auto max-w-3xl space-y-4">
           {/* 다운로드 버튼 */}
           <div className="flex justify-end">
@@ -646,38 +648,21 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
     // 태블릿 이하: 세로 스택 카드 스타일
     return (
       <div
-        className="relative overflow-hidden rounded-lg border border-border bg-background shadow-sm"
+        className="border-border bg-background relative overflow-hidden rounded-lg border shadow-sm"
         style={{ minHeight: "300px" }}
       >
         {element.showHeader !== false && (
           <div className="flex items-center justify-between px-2 py-1">
-            <h3 className="text-xs font-semibold text-foreground">{element.customTitle || element.title}</h3>
-            <button
-              onClick={onRefresh}
-              disabled={isLoading}
-              className="text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
-              title="새로고침"
-            >
-              <svg
-                className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                />
-              </svg>
-            </button>
+            {/* map-summary-v2는 customTitle이 없으면 제목 숨김 */}
+            {element.subtype === "map-summary-v2" && !element.customTitle ? null : (
+              <h3 className="text-foreground text-xs font-semibold">{element.customTitle || element.title}</h3>
+            )}
           </div>
         )}
         <div className={element.showHeader !== false ? "p-2" : "p-2"} style={{ minHeight: "250px" }}>
           {!isMounted ? (
             <div className="flex h-full w-full items-center justify-center">
-              <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+              <div className="border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
             </div>
           ) : element.type === "chart" ? (
             <ChartRenderer element={element} data={data} width={undefined} height={250} />
@@ -686,10 +671,10 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
           )}
         </div>
         {isLoading && (
-          <div className="bg-opacity-75 absolute inset-0 flex items-center justify-center bg-background">
+          <div className="bg-opacity-75 bg-background absolute inset-0 flex items-center justify-center">
             <div className="text-center">
-              <div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-              <div className="text-sm text-foreground">업데이트 중...</div>
+              <div className="border-primary mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
+              <div className="text-foreground text-sm">업데이트 중...</div>
             </div>
           </div>
         )}
@@ -704,7 +689,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
 
   return (
     <div
-      className="absolute overflow-hidden rounded-lg border border-border bg-background shadow-sm"
+      className="border-border bg-background absolute overflow-hidden rounded-lg border shadow-sm"
       style={{
         left: `${leftPercentage}%`,
         top: element.position.y,
@@ -714,33 +699,16 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
     >
       {element.showHeader !== false && (
         <div className="flex items-center justify-between px-2 py-1">
-          <h3 className="text-xs font-semibold text-foreground">{element.customTitle || element.title}</h3>
-          <button
-            onClick={onRefresh}
-            disabled={isLoading}
-            className="text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
-            title="새로고침"
-          >
-            <svg
-              className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`}
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-              />
-            </svg>
-          </button>
+          {/* map-summary-v2는 customTitle이 없으면 제목 숨김 */}
+          {element.subtype === "map-summary-v2" && !element.customTitle ? null : (
+            <h3 className="text-foreground text-xs font-semibold">{element.customTitle || element.title}</h3>
+          )}
         </div>
       )}
       <div className={element.showHeader !== false ? "h-[calc(100%-32px)] w-full" : "h-full w-full"}>
         {!isMounted ? (
           <div className="flex h-full w-full items-center justify-center">
-            <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            <div className="border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
           </div>
         ) : element.type === "chart" ? (
           <ChartRenderer
@@ -754,10 +722,10 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
         )}
       </div>
       {isLoading && (
-        <div className="bg-opacity-75 absolute inset-0 flex items-center justify-center bg-background">
+        <div className="bg-opacity-75 bg-background absolute inset-0 flex items-center justify-center">
           <div className="text-center">
-            <div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-            <div className="text-sm text-foreground">업데이트 중...</div>
+            <div className="border-primary mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
+            <div className="text-foreground text-sm">업데이트 중...</div>
           </div>
         </div>
       )}
diff --git a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
index 5eeeca12..dafc40fa 100644
--- a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
+++ b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 "use client";
 
 import React, { useEffect, useState, useCallback, useMemo } from "react";
@@ -11,12 +12,13 @@ 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",
+  import("leaflet").then((L) => {
+    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",
+    });
   });
 }
 
@@ -46,6 +48,9 @@ interface MarkerData {
   description?: string;
   source?: string; // 어느 데이터 소스에서 왔는지
   color?: string; // 마커 색상
+  heading?: number; // 진행 방향 (0-360도, 0=북쪽)
+  prevLat?: number; // 이전 위도 (방향 계산용)
+  prevLng?: number; // 이전 경도 (방향 계산용)
 }
 
 interface PolygonData {
@@ -61,24 +66,35 @@ interface PolygonData {
 
 export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   const [markers, setMarkers] = useState<MarkerData[]>([]);
+  const [prevMarkers, setPrevMarkers] = useState<MarkerData[]>([]); // 이전 마커 위치 저장
   const [polygons, setPolygons] = useState<PolygonData[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [geoJsonData, setGeoJsonData] = useState<any>(null);
   const [lastRefreshTime, setLastRefreshTime] = useState<Date | null>(null);
 
-  // // console.log("🧪 MapTestWidgetV2 렌더링!", element);
-  // // console.log("📍 마커:", markers.length, "🔷 폴리곤:", polygons.length);
-
   // dataSources를 useMemo로 추출 (circular reference 방지)
   const dataSources = useMemo(() => {
     return element?.dataSources || element?.chartConfig?.dataSources;
   }, [element?.dataSources, element?.chartConfig?.dataSources]);
 
+  // 두 좌표 사이의 방향 계산 (0-360도, 0=북쪽)
+  const calculateHeading = useCallback((lat1: number, lng1: number, lat2: number, lng2: number): number => {
+    const dLng = (lng2 - lng1) * (Math.PI / 180);
+    const lat1Rad = lat1 * (Math.PI / 180);
+    const lat2Rad = lat2 * (Math.PI / 180);
+
+    const y = Math.sin(dLng) * Math.cos(lat2Rad);
+    const x = Math.cos(lat1Rad) * Math.sin(lat2Rad) - Math.sin(lat1Rad) * Math.cos(lat2Rad) * Math.cos(dLng);
+
+    let heading = Math.atan2(y, x) * (180 / Math.PI);
+    heading = (heading + 360) % 360; // 0-360 범위로 정규화
+
+    return heading;
+  }, []);
+
   // 다중 데이터 소스 로딩
   const loadMultipleDataSources = useCallback(async () => {
-    const dataSourcesList = dataSources;
-    
     if (!dataSources || dataSources.length === 0) {
       // // console.log("⚠️ 데이터 소스가 없습니다.");
       return;
@@ -94,38 +110,38 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
         dataSources.map(async (source) => {
           try {
             // // console.log(`📡 데이터 소스 "${source.name || source.id}" 로딩 중...`);
-            
+
             if (source.type === "api") {
               return await loadRestApiData(source);
             } else if (source.type === "database") {
               return await loadDatabaseData(source);
             }
-            
+
             return { markers: [], polygons: [] };
           } catch (err: any) {
             console.error(`❌ 데이터 소스 "${source.name || source.id}" 로딩 실패:`, err);
             return { markers: [], polygons: [] };
           }
-        })
+        }),
       );
 
       // 성공한 데이터만 병합
       const allMarkers: MarkerData[] = [];
       const allPolygons: PolygonData[] = [];
-      
+
       results.forEach((result, index) => {
         // // console.log(`🔍 결과 ${index}:`, result);
-        
+
         if (result.status === "fulfilled" && result.value) {
           const value = result.value as { markers: MarkerData[]; polygons: PolygonData[] };
           // // console.log(`✅ 데이터 소스 ${index} 성공:`, value);
-          
+
           // 마커 병합
           if (value.markers && Array.isArray(value.markers)) {
             // // console.log(`  → 마커 ${value.markers.length}개 추가`);
             allMarkers.push(...value.markers);
           }
-          
+
           // 폴리곤 병합
           if (value.polygons && Array.isArray(value.polygons)) {
             // // console.log(`  → 폴리곤 ${value.polygons.length}개 추가`);
@@ -139,8 +155,31 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       // // console.log(`✅ 총 ${allMarkers.length}개의 마커, ${allPolygons.length}개의 폴리곤 로딩 완료`);
       // // console.log("📍 최종 마커 데이터:", allMarkers);
       // // console.log("🔷 최종 폴리곤 데이터:", allPolygons);
-      
-      setMarkers(allMarkers);
+
+      // 이전 마커 위치와 비교하여 진행 방향 계산
+      const markersWithHeading = allMarkers.map((marker) => {
+        const prevMarker = prevMarkers.find((pm) => pm.id === marker.id);
+
+        if (prevMarker && (prevMarker.lat !== marker.lat || prevMarker.lng !== marker.lng)) {
+          // 이동했으면 방향 계산
+          const heading = calculateHeading(prevMarker.lat, prevMarker.lng, marker.lat, marker.lng);
+          return {
+            ...marker,
+            heading,
+            prevLat: prevMarker.lat,
+            prevLng: prevMarker.lng,
+          };
+        }
+
+        // 이동하지 않았거나 이전 데이터가 없으면 기존 heading 유지 (또는 0)
+        return {
+          ...marker,
+          heading: marker.heading || prevMarker?.heading || 0,
+        };
+      });
+
+      setPrevMarkers(markersWithHeading); // 다음 비교를 위해 현재 위치 저장
+      setMarkers(markersWithHeading);
       setPolygons(allPolygons);
       setLastRefreshTime(new Date());
     } catch (err: any) {
@@ -149,7 +188,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     } finally {
       setLoading(false);
     }
-  }, [dataSources]);
+  }, [dataSources, prevMarkers, calculateHeading]);
 
   // 수동 새로고침 핸들러
   const handleManualRefresh = useCallback(() => {
@@ -158,9 +197,11 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   }, [loadMultipleDataSources]);
 
   // REST API 데이터 로딩
-  const loadRestApiData = async (source: ChartDataSource): Promise<{ markers: MarkerData[]; polygons: PolygonData[] }> => {
+  const loadRestApiData = async (
+    source: ChartDataSource,
+  ): Promise<{ markers: MarkerData[]; polygons: PolygonData[] }> => {
     // // console.log(`🌐 REST API 데이터 로딩 시작:`, source.name, `mapDisplayType:`, source.mapDisplayType);
-    
+
     if (!source.endpoint) {
       throw new Error("API endpoint가 없습니다.");
     }
@@ -205,16 +246,16 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     }
 
     const result = await response.json();
-    
+
     if (!result.success) {
       throw new Error(result.message || "API 호출 실패");
     }
 
     // 데이터 추출 및 파싱
     let data = result.data;
-    
+
     // 텍스트 형식 데이터 체크 (기상청 API 등)
-    if (data && typeof data === 'object' && data.text && typeof data.text === 'string') {
+    if (data && typeof data === "object" && data.text && typeof data.text === "string") {
       // // console.log("📄 텍스트 형식 데이터 감지, CSV 파싱 시도");
       const parsedData = parseTextData(data.text);
       if (parsedData.length > 0) {
@@ -224,7 +265,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
         return convertToMapData(mappedData, source.name || source.id || "API", source.mapDisplayType, source);
       }
     }
-    
+
     // JSON Path로 데이터 추출
     if (source.jsonPath) {
       const pathParts = source.jsonPath.split(".");
@@ -234,18 +275,20 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     }
 
     const rows = Array.isArray(data) ? data : [data];
-    
+
     // 컬럼 매핑 적용
     const mappedRows = applyColumnMapping(rows, source.columnMapping);
-    
+
     // 마커와 폴리곤으로 변환 (mapDisplayType + dataSource 전달)
     return convertToMapData(mappedRows, source.name || source.id || "API", source.mapDisplayType, source);
   };
 
   // Database 데이터 로딩
-  const loadDatabaseData = async (source: ChartDataSource): Promise<{ markers: MarkerData[]; polygons: PolygonData[] }> => {
+  const loadDatabaseData = async (
+    source: ChartDataSource,
+  ): Promise<{ markers: MarkerData[]; polygons: PolygonData[] }> => {
     // // console.log(`💾 Database 데이터 로딩 시작:`, source.name, `mapDisplayType:`, source.mapDisplayType);
-    
+
     if (!source.query) {
       throw new Error("SQL 쿼리가 없습니다.");
     }
@@ -257,9 +300,9 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       const { ExternalDbConnectionAPI } = await import("@/lib/api/externalDbConnection");
       const externalResult = await ExternalDbConnectionAPI.executeQuery(
         parseInt(source.externalConnectionId),
-        source.query
+        source.query,
       );
-      
+
       if (!externalResult.success || !externalResult.data) {
         throw new Error(externalResult.message || "외부 DB 쿼리 실행 실패");
       }
@@ -267,19 +310,19 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       const resultData = externalResult.data as unknown as {
         rows: Record<string, unknown>[];
       };
-      
+
       rows = resultData.rows;
     } else {
       // 현재 DB
       const { dashboardApi } = await import("@/lib/api/dashboard");
       const result = await dashboardApi.executeQuery(source.query);
-      
+
       rows = result.rows;
     }
-    
+
     // 컬럼 매핑 적용
     const mappedRows = applyColumnMapping(rows, source.columnMapping);
-    
+
     // 마커와 폴리곤으로 변환 (mapDisplayType + dataSource 전달)
     return convertToMapData(mappedRows, source.name || source.id || "Database", source.mapDisplayType, source);
   };
@@ -290,7 +333,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       // // console.log("    📄 XML 파싱 시작");
       const parser = new DOMParser();
       const xmlDoc = parser.parseFromString(xmlText, "text/xml");
-      
+
       const records = xmlDoc.getElementsByTagName("record");
       const results: any[] = [];
 
@@ -318,56 +361,53 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   const parseTextData = (text: string): any[] => {
     try {
       // // console.log("    🔍 원본 텍스트 (처음 500자):", text.substring(0, 500));
-      
+
       // XML 형식 감지
       if (text.trim().startsWith("<?xml") || text.trim().startsWith("<result>")) {
         // // console.log("    📄 XML 형식 데이터 감지");
         return parseXmlData(text);
       }
-      
-      const lines = text.split('\n').filter(line => {
+
+      const lines = text.split("\n").filter((line) => {
         const trimmed = line.trim();
-        return trimmed && 
-               !trimmed.startsWith('#') && 
-               !trimmed.startsWith('=') &&
-               !trimmed.startsWith('---');
+        return trimmed && !trimmed.startsWith("#") && !trimmed.startsWith("=") && !trimmed.startsWith("---");
       });
-      
+
       // // console.log(`    📝 유효한 라인: ${lines.length}개`);
-      
+
       if (lines.length === 0) return [];
-      
+
       // CSV 형식으로 파싱
       const result: any[] = [];
-      
+
       for (let i = 0; i < lines.length; i++) {
         const line = lines[i];
-        const values = line.split(',').map(v => v.trim().replace(/,=$/g, ''));
-        
+        const values = line.split(",").map((v) => v.trim().replace(/,=$/g, ""));
+
         // // console.log(`    라인 ${i}:`, values);
-        
+
         // 기상특보 형식: 지역코드, 지역명, 하위코드, 하위지역명, 발표시각, 특보종류, 등급, 발표상태, 설명
         if (values.length >= 4) {
           const obj: any = {
-            code: values[0] || '',           // 지역 코드 (예: L1070000)
-            region: values[1] || '',         // 지역명 (예: 경상북도)
-            subCode: values[2] || '',        // 하위 코드 (예: L1071600)
-            subRegion: values[3] || '',      // 하위 지역명 (예: 영주시)
-            tmFc: values[4] || '',           // 발표시각
-            type: values[5] || '',           // 특보종류 (강풍, 호우 등)
-            level: values[6] || '',          // 등급 (주의, 경보)
-            status: values[7] || '',         // 발표상태
-            description: values.slice(8).join(', ').trim() || '',
+            code: values[0] || "", // 지역 코드 (예: L1070000)
+            region: values[1] || "", // 지역명 (예: 경상북도)
+            subCode: values[2] || "", // 하위 코드 (예: L1071600)
+            subRegion: values[3] || "", // 하위 지역명 (예: 영주시)
+            tmFc: values[4] || "", // 발표시각
+            type: values[5] || "", // 특보종류 (강풍, 호우 등)
+            level: values[6] || "", // 등급 (주의, 경보)
+            status: values[7] || "", // 발표상태
+            description: values.slice(8).join(", ").trim() || "",
           };
-          
+
           // 지역 이름 설정 (하위 지역명 우선, 없으면 상위 지역명)
           obj.name = obj.subRegion || obj.region || obj.code;
-          
+
           result.push(obj);
           // console.log(`      ✅ 파싱 성공:`, obj);
         }
       }
-      
+
       // // console.log("    📊 최종 파싱 결과:", result.length, "개");
       return result;
     } catch (error) {
@@ -378,15 +418,15 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
   // 데이터를 마커와 폴리곤으로 변환
   const convertToMapData = (
-    rows: any[], 
-    sourceName: string, 
+    rows: any[],
+    sourceName: string,
     mapDisplayType?: "auto" | "marker" | "polygon",
-    dataSource?: ChartDataSource
+    dataSource?: ChartDataSource,
   ): { markers: MarkerData[]; polygons: PolygonData[] } => {
     // // console.log(`🔄 ${sourceName} 데이터 변환 시작:`, rows.length, "개 행");
     // // console.log(`   📌 mapDisplayType:`, mapDisplayType, `(타입: ${typeof mapDisplayType})`);
     // // console.log(`   🎨 마커 색상:`, dataSource?.markerColor, `폴리곤 색상:`, dataSource?.polygonColor);
-    
+
     if (rows.length === 0) return { markers: [], polygons: [] };
 
     const markers: MarkerData[] = [];
@@ -394,20 +434,20 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
     rows.forEach((row, index) => {
       // // console.log(`  행 ${index}:`, row);
-      
+
       // 텍스트 데이터 체크 (기상청 API 등)
-      if (row && typeof row === 'object' && row.text && typeof row.text === 'string') {
+      if (row && typeof row === "object" && row.text && typeof row.text === "string") {
         // // console.log("    📄 텍스트 형식 데이터 감지, CSV 파싱 시도");
         const parsedData = parseTextData(row.text);
         // // console.log(`    ✅ CSV 파싱 결과: ${parsedData.length}개 행`);
-        
+
         // 파싱된 데이터를 재귀적으로 변환 (색상 정보 전달)
         const result = convertToMapData(parsedData, sourceName, mapDisplayType, dataSource);
         markers.push(...result.markers);
         polygons.push(...result.polygons);
         return; // 이 행은 처리 완료
       }
-      
+
       // 폴리곤 데이터 체크 (coordinates 필드가 배열인 경우 또는 강제 polygon 모드)
       if (row.coordinates && Array.isArray(row.coordinates) && row.coordinates.length > 0) {
         // // console.log(`    → coordinates 발견:`, row.coordinates.length, "개");
@@ -437,7 +477,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
           name: regionName,
           coordinates: MARITIME_ZONES[regionName] as [number, number][],
           status: row.status || row.level,
-          description: row.description || `${row.type || ''} ${row.level || ''}`.trim() || JSON.stringify(row, null, 2),
+          description: row.description || `${row.type || ""} ${row.level || ""}`.trim() || JSON.stringify(row, null, 2),
           source: sourceName,
           color: dataSource?.polygonColor || getColorByStatus(row.status || row.level),
         });
@@ -449,7 +489,10 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       let lng = row.lng || row.longitude || row.x || row.locationDataX;
 
       // 위도/경도가 없으면 지역 코드/지역명으로 변환 시도
-      if ((lat === undefined || lng === undefined) && (row.code || row.areaCode || row.regionCode || row.tmFc || row.stnId)) {
+      if (
+        (lat === undefined || lng === undefined) &&
+        (row.code || row.areaCode || row.regionCode || row.tmFc || row.stnId)
+      ) {
         const regionCode = row.code || row.areaCode || row.regionCode || row.tmFc || row.stnId;
         // // console.log(`    → 지역 코드 발견: ${regionCode}, 위도/경도 변환 시도`);
         const coords = getCoordinatesByRegionCode(regionCode);
@@ -492,8 +535,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
         return; // 폴리곤으로 처리했으므로 마커로는 추가하지 않음
       }
 
-      // 위도/경도가 있고 marker 모드가 아니면 마커로 처리
-      if (lat !== undefined && lng !== undefined && mapDisplayType !== "polygon") {
+      // 위도/경도가 있고 polygon 모드가 아니면 마커로 처리
+      if (lat !== undefined && lng !== undefined && (mapDisplayType as string) !== "polygon") {
         // // console.log(`    → 마커로 처리: (${lat}, ${lng})`);
         markers.push({
           id: `${sourceName}-marker-${index}-${row.code || row.id || Date.now()}`, // 고유 ID 생성
@@ -535,12 +578,12 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   // 상태에 따른 색상 반환
   const getColorByStatus = (status?: string): string => {
     if (!status) return "#3b82f6"; // 기본 파란색
-    
+
     const statusLower = status.toLowerCase();
     if (statusLower.includes("경보") || statusLower.includes("위험")) return "#ef4444"; // 빨강
     if (statusLower.includes("주의")) return "#f59e0b"; // 주황
     if (statusLower.includes("정상")) return "#10b981"; // 초록
-    
+
     return "#3b82f6"; // 기본 파란색
   };
 
@@ -549,34 +592,34 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     // 기상청 지역 코드 매핑 (예시)
     const regionCodeMap: Record<string, { lat: number; lng: number }> = {
       // 서울/경기
-      "11": { lat: 37.5665, lng: 126.9780 }, // 서울
+      "11": { lat: 37.5665, lng: 126.978 }, // 서울
       "41": { lat: 37.4138, lng: 127.5183 }, // 경기
-      
+
       // 강원
       "42": { lat: 37.8228, lng: 128.1555 }, // 강원
-      
+
       // 충청
       "43": { lat: 36.6357, lng: 127.4913 }, // 충북
-      "44": { lat: 36.5184, lng: 126.8000 }, // 충남
-      
+      "44": { lat: 36.5184, lng: 126.8 }, // 충남
+
       // 전라
-      "45": { lat: 35.7175, lng: 127.1530 }, // 전북
-      "46": { lat: 34.8679, lng: 126.9910 }, // 전남
-      
+      "45": { lat: 35.7175, lng: 127.153 }, // 전북
+      "46": { lat: 34.8679, lng: 126.991 }, // 전남
+
       // 경상
       "47": { lat: 36.4919, lng: 128.8889 }, // 경북
       "48": { lat: 35.4606, lng: 128.2132 }, // 경남
-      
+
       // 제주
       "50": { lat: 33.4996, lng: 126.5312 }, // 제주
-      
+
       // 광역시
       "26": { lat: 35.1796, lng: 129.0756 }, // 부산
       "27": { lat: 35.8714, lng: 128.6014 }, // 대구
       "28": { lat: 35.1595, lng: 126.8526 }, // 광주
       "29": { lat: 36.3504, lng: 127.3845 }, // 대전
       "30": { lat: 35.5384, lng: 129.3114 }, // 울산
-      "31": { lat: 36.8000, lng: 127.7000 }, // 세종
+      "31": { lat: 36.8, lng: 127.7 }, // 세종
     };
 
     return regionCodeMap[code] || null;
@@ -585,30 +628,130 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   // 해상 구역 폴리곤 좌표 (기상청 특보 구역 기준)
   const MARITIME_ZONES: Record<string, Array<[number, number]>> = {
     // 제주도 해역
-    제주도남부앞바다: [[33.25, 126.0], [33.25, 126.85], [33.0, 126.85], [33.0, 126.0]],
-    제주도남쪽바깥먼바다: [[33.15, 125.7], [33.15, 127.3], [32.5, 127.3], [32.5, 125.7]],
-    제주도동부앞바다: [[33.4, 126.7], [33.4, 127.25], [33.05, 127.25], [33.05, 126.7]],
-    제주도남동쪽안쪽먼바다: [[33.3, 126.85], [33.3, 127.95], [32.65, 127.95], [32.65, 126.85]],
-    제주도남서쪽안쪽먼바다: [[33.3, 125.35], [33.3, 126.45], [32.7, 126.45], [32.7, 125.35]],
+    제주도남부앞바다: [
+      [33.25, 126.0],
+      [33.25, 126.85],
+      [33.0, 126.85],
+      [33.0, 126.0],
+    ],
+    제주도남쪽바깥먼바다: [
+      [33.15, 125.7],
+      [33.15, 127.3],
+      [32.5, 127.3],
+      [32.5, 125.7],
+    ],
+    제주도동부앞바다: [
+      [33.4, 126.7],
+      [33.4, 127.25],
+      [33.05, 127.25],
+      [33.05, 126.7],
+    ],
+    제주도남동쪽안쪽먼바다: [
+      [33.3, 126.85],
+      [33.3, 127.95],
+      [32.65, 127.95],
+      [32.65, 126.85],
+    ],
+    제주도남서쪽안쪽먼바다: [
+      [33.3, 125.35],
+      [33.3, 126.45],
+      [32.7, 126.45],
+      [32.7, 125.35],
+    ],
     // 남해 해역
-    남해동부앞바다: [[34.65, 128.3], [34.65, 129.65], [33.95, 129.65], [33.95, 128.3]],
-    남해동부안쪽먼바다: [[34.25, 127.95], [34.25, 129.75], [33.45, 129.75], [33.45, 127.95]],
-    남해동부바깥먼바다: [[33.65, 127.95], [33.65, 130.35], [32.45, 130.35], [32.45, 127.95]],
+    남해동부앞바다: [
+      [34.65, 128.3],
+      [34.65, 129.65],
+      [33.95, 129.65],
+      [33.95, 128.3],
+    ],
+    남해동부안쪽먼바다: [
+      [34.25, 127.95],
+      [34.25, 129.75],
+      [33.45, 129.75],
+      [33.45, 127.95],
+    ],
+    남해동부바깥먼바다: [
+      [33.65, 127.95],
+      [33.65, 130.35],
+      [32.45, 130.35],
+      [32.45, 127.95],
+    ],
     // 동해 해역
-    경북북부앞바다: [[36.65, 129.2], [36.65, 130.1], [35.95, 130.1], [35.95, 129.2]],
-    경북남부앞바다: [[36.15, 129.1], [36.15, 129.95], [35.45, 129.95], [35.45, 129.1]],
-    동해남부남쪽안쪽먼바다: [[35.65, 129.35], [35.65, 130.65], [34.95, 130.65], [34.95, 129.35]],
-    동해남부남쪽바깥먼바다: [[35.25, 129.45], [35.25, 131.15], [34.15, 131.15], [34.15, 129.45]],
-    동해남부북쪽안쪽먼바다: [[36.6, 129.65], [36.6, 130.95], [35.85, 130.95], [35.85, 129.65]],
-    동해남부북쪽바깥먼바다: [[36.65, 130.35], [36.65, 132.15], [35.85, 132.15], [35.85, 130.35]],
+    경북북부앞바다: [
+      [36.65, 129.2],
+      [36.65, 130.1],
+      [35.95, 130.1],
+      [35.95, 129.2],
+    ],
+    경북남부앞바다: [
+      [36.15, 129.1],
+      [36.15, 129.95],
+      [35.45, 129.95],
+      [35.45, 129.1],
+    ],
+    동해남부남쪽안쪽먼바다: [
+      [35.65, 129.35],
+      [35.65, 130.65],
+      [34.95, 130.65],
+      [34.95, 129.35],
+    ],
+    동해남부남쪽바깥먼바다: [
+      [35.25, 129.45],
+      [35.25, 131.15],
+      [34.15, 131.15],
+      [34.15, 129.45],
+    ],
+    동해남부북쪽안쪽먼바다: [
+      [36.6, 129.65],
+      [36.6, 130.95],
+      [35.85, 130.95],
+      [35.85, 129.65],
+    ],
+    동해남부북쪽바깥먼바다: [
+      [36.65, 130.35],
+      [36.65, 132.15],
+      [35.85, 132.15],
+      [35.85, 130.35],
+    ],
     // 강원 해역
-    강원북부앞바다: [[38.15, 128.4], [38.15, 129.55], [37.45, 129.55], [37.45, 128.4]],
-    강원중부앞바다: [[37.65, 128.7], [37.65, 129.6], [36.95, 129.6], [36.95, 128.7]],
-    강원남부앞바다: [[37.15, 128.9], [37.15, 129.85], [36.45, 129.85], [36.45, 128.9]],
-    동해중부안쪽먼바다: [[38.55, 129.35], [38.55, 131.15], [37.25, 131.15], [37.25, 129.35]],
-    동해중부바깥먼바다: [[38.6, 130.35], [38.6, 132.55], [37.65, 132.55], [37.65, 130.35]],
+    강원북부앞바다: [
+      [38.15, 128.4],
+      [38.15, 129.55],
+      [37.45, 129.55],
+      [37.45, 128.4],
+    ],
+    강원중부앞바다: [
+      [37.65, 128.7],
+      [37.65, 129.6],
+      [36.95, 129.6],
+      [36.95, 128.7],
+    ],
+    강원남부앞바다: [
+      [37.15, 128.9],
+      [37.15, 129.85],
+      [36.45, 129.85],
+      [36.45, 128.9],
+    ],
+    동해중부안쪽먼바다: [
+      [38.55, 129.35],
+      [38.55, 131.15],
+      [37.25, 131.15],
+      [37.25, 129.35],
+    ],
+    동해중부바깥먼바다: [
+      [38.6, 130.35],
+      [38.6, 132.55],
+      [37.65, 132.55],
+      [37.65, 130.35],
+    ],
     // 울릉도·독도
-    "울릉도.독도": [[37.7, 130.7], [37.7, 132.0], [37.4, 132.0], [37.4, 130.7]],
+    "울릉도.독도": [
+      [37.7, 130.7],
+      [37.7, 132.0],
+      [37.4, 132.0],
+      [37.4, 130.7],
+    ],
   };
 
   // 지역명을 위도/경도로 변환
@@ -624,70 +767,70 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
     const regionNameMap: Record<string, { lat: number; lng: number }> = {
       // 서울/경기
-      "서울": { lat: 37.5665, lng: 126.9780 },
-      "서울특별시": { lat: 37.5665, lng: 126.9780 },
-      "경기": { lat: 37.4138, lng: 127.5183 },
-      "경기도": { lat: 37.4138, lng: 127.5183 },
-      "인천": { lat: 37.4563, lng: 126.7052 },
-      "인천광역시": { lat: 37.4563, lng: 126.7052 },
-      
+      서울: { lat: 37.5665, lng: 126.978 },
+      서울특별시: { lat: 37.5665, lng: 126.978 },
+      경기: { lat: 37.4138, lng: 127.5183 },
+      경기도: { lat: 37.4138, lng: 127.5183 },
+      인천: { lat: 37.4563, lng: 126.7052 },
+      인천광역시: { lat: 37.4563, lng: 126.7052 },
+
       // 강원
-      "강원": { lat: 37.8228, lng: 128.1555 },
-      "강원도": { lat: 37.8228, lng: 128.1555 },
-      "강원특별자치도": { lat: 37.8228, lng: 128.1555 },
-      
+      강원: { lat: 37.8228, lng: 128.1555 },
+      강원도: { lat: 37.8228, lng: 128.1555 },
+      강원특별자치도: { lat: 37.8228, lng: 128.1555 },
+
       // 충청
-      "충북": { lat: 36.6357, lng: 127.4913 },
-      "충청북도": { lat: 36.6357, lng: 127.4913 },
-      "충남": { lat: 36.5184, lng: 126.8000 },
-      "충청남도": { lat: 36.5184, lng: 126.8000 },
-      "대전": { lat: 36.3504, lng: 127.3845 },
-      "대전광역시": { lat: 36.3504, lng: 127.3845 },
-      "세종": { lat: 36.8000, lng: 127.7000 },
-      "세종특별자치시": { lat: 36.8000, lng: 127.7000 },
-      
+      충북: { lat: 36.6357, lng: 127.4913 },
+      충청북도: { lat: 36.6357, lng: 127.4913 },
+      충남: { lat: 36.5184, lng: 126.8 },
+      충청남도: { lat: 36.5184, lng: 126.8 },
+      대전: { lat: 36.3504, lng: 127.3845 },
+      대전광역시: { lat: 36.3504, lng: 127.3845 },
+      세종: { lat: 36.8, lng: 127.7 },
+      세종특별자치시: { lat: 36.8, lng: 127.7 },
+
       // 전라
-      "전북": { lat: 35.7175, lng: 127.1530 },
-      "전북특별자치도": { lat: 35.7175, lng: 127.1530 },
-      "전라북도": { lat: 35.7175, lng: 127.1530 },
-      "전남": { lat: 34.8679, lng: 126.9910 },
-      "전라남도": { lat: 34.8679, lng: 126.9910 },
-      "광주": { lat: 35.1595, lng: 126.8526 },
-      "광주광역시": { lat: 35.1595, lng: 126.8526 },
-      
+      전북: { lat: 35.7175, lng: 127.153 },
+      전북특별자치도: { lat: 35.7175, lng: 127.153 },
+      전라북도: { lat: 35.7175, lng: 127.153 },
+      전남: { lat: 34.8679, lng: 126.991 },
+      전라남도: { lat: 34.8679, lng: 126.991 },
+      광주: { lat: 35.1595, lng: 126.8526 },
+      광주광역시: { lat: 35.1595, lng: 126.8526 },
+
       // 경상
-      "경북": { lat: 36.4919, lng: 128.8889 },
-      "경상북도": { lat: 36.4919, lng: 128.8889 },
-      "포항": { lat: 36.0190, lng: 129.3435 },
-      "포항시": { lat: 36.0190, lng: 129.3435 },
-      "경주": { lat: 35.8562, lng: 129.2247 },
-      "경주시": { lat: 35.8562, lng: 129.2247 },
-      "안동": { lat: 36.5684, lng: 128.7294 },
-      "안동시": { lat: 36.5684, lng: 128.7294 },
-      "영주": { lat: 36.8056, lng: 128.6239 },
-      "영주시": { lat: 36.8056, lng: 128.6239 },
-      "경남": { lat: 35.4606, lng: 128.2132 },
-      "경상남도": { lat: 35.4606, lng: 128.2132 },
-      "창원": { lat: 35.2280, lng: 128.6811 },
-      "창원시": { lat: 35.2280, lng: 128.6811 },
-      "진주": { lat: 35.1800, lng: 128.1076 },
-      "진주시": { lat: 35.1800, lng: 128.1076 },
-      "부산": { lat: 35.1796, lng: 129.0756 },
-      "부산광역시": { lat: 35.1796, lng: 129.0756 },
-      "대구": { lat: 35.8714, lng: 128.6014 },
-      "대구광역시": { lat: 35.8714, lng: 128.6014 },
-      "울산": { lat: 35.5384, lng: 129.3114 },
-      "울산광역시": { lat: 35.5384, lng: 129.3114 },
-      
+      경북: { lat: 36.4919, lng: 128.8889 },
+      경상북도: { lat: 36.4919, lng: 128.8889 },
+      포항: { lat: 36.019, lng: 129.3435 },
+      포항시: { lat: 36.019, lng: 129.3435 },
+      경주: { lat: 35.8562, lng: 129.2247 },
+      경주시: { lat: 35.8562, lng: 129.2247 },
+      안동: { lat: 36.5684, lng: 128.7294 },
+      안동시: { lat: 36.5684, lng: 128.7294 },
+      영주: { lat: 36.8056, lng: 128.6239 },
+      영주시: { lat: 36.8056, lng: 128.6239 },
+      경남: { lat: 35.4606, lng: 128.2132 },
+      경상남도: { lat: 35.4606, lng: 128.2132 },
+      창원: { lat: 35.228, lng: 128.6811 },
+      창원시: { lat: 35.228, lng: 128.6811 },
+      진주: { lat: 35.18, lng: 128.1076 },
+      진주시: { lat: 35.18, lng: 128.1076 },
+      부산: { lat: 35.1796, lng: 129.0756 },
+      부산광역시: { lat: 35.1796, lng: 129.0756 },
+      대구: { lat: 35.8714, lng: 128.6014 },
+      대구광역시: { lat: 35.8714, lng: 128.6014 },
+      울산: { lat: 35.5384, lng: 129.3114 },
+      울산광역시: { lat: 35.5384, lng: 129.3114 },
+
       // 제주
-      "제주": { lat: 33.4996, lng: 126.5312 },
-      "제주도": { lat: 33.4996, lng: 126.5312 },
-      "제주특별자치도": { lat: 33.4996, lng: 126.5312 },
-      
+      제주: { lat: 33.4996, lng: 126.5312 },
+      제주도: { lat: 33.4996, lng: 126.5312 },
+      제주특별자치도: { lat: 33.4996, lng: 126.5312 },
+
       // 울릉도/독도
-      "울릉도": { lat: 37.4845, lng: 130.9057 },
+      울릉도: { lat: 37.4845, lng: 130.9057 },
       "울릉도.독도": { lat: 37.4845, lng: 130.9057 },
-      "독도": { lat: 37.2433, lng: 131.8642 },
+      독도: { lat: 37.2433, lng: 131.8642 },
     };
 
     // 정확한 매칭
@@ -705,23 +848,18 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     return null;
   };
 
-  // 데이터를 마커로 변환 (하위 호환성)
+  // 데이터를 마커로 변환 (하위 호환성 - 현재 미사용)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const convertToMarkers = (rows: any[]): MarkerData[] => {
     if (rows.length === 0) return [];
 
     // 위도/경도 컬럼 찾기
     const firstRow = rows[0];
     const columns = Object.keys(firstRow);
-    
-    const latColumn = columns.find((col) => 
-      /^(lat|latitude|위도|y)$/i.test(col)
-    );
-    const lngColumn = columns.find((col) => 
-      /^(lng|lon|longitude|경도|x)$/i.test(col)
-    );
-    const nameColumn = columns.find((col) => 
-      /^(name|title|이름|명칭|location)$/i.test(col)
-    );
+
+    const latColumn = columns.find((col) => /^(lat|latitude|위도|y)$/i.test(col));
+    const lngColumn = columns.find((col) => /^(lng|lon|longitude|경도|x)$/i.test(col));
+    const nameColumn = columns.find((col) => /^(name|title|이름|명칭|location)$/i.test(col));
 
     if (!latColumn || !lngColumn) {
       console.warn("⚠️ 위도/경도 컬럼을 찾을 수 없습니다.");
@@ -737,7 +875,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
           return null;
         }
 
-        return {
+        const marker: MarkerData = {
           id: row.id || `marker-${index}`,
           lat,
           lng,
@@ -747,6 +885,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
           status: row.status,
           description: JSON.stringify(row, null, 2),
         };
+        return marker;
       })
       .filter((marker): marker is MarkerData => marker !== null);
   };
@@ -766,70 +905,59 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     loadGeoJsonData();
   }, []);
 
-  // 초기 로드
+  // 초기 로드 및 자동 새로고침 (마커 데이터만 polling)
   useEffect(() => {
-    const dataSources = element?.dataSources || element?.chartConfig?.dataSources;
-    // // console.log("🔄 useEffect 트리거! dataSources:", dataSources);
-    if (dataSources && dataSources.length > 0) {
-      loadMultipleDataSources();
-    } else {
-      // // console.log("⚠️ dataSources가 없거나 비어있음");
+    if (!dataSources || dataSources.length === 0) {
       setMarkers([]);
       setPolygons([]);
+      return;
     }
-  }, [dataSources, loadMultipleDataSources]);
 
-  // 자동 새로고침
-  useEffect(() => {
-    if (!dataSources || dataSources.length === 0) return;
+    // 즉시 첫 로드 (마커 데이터)
+    loadMultipleDataSources();
 
-    // 모든 데이터 소스 중 가장 짧은 refreshInterval 찾기
-    const intervals = dataSources
-      .map((ds) => ds.refreshInterval)
-      .filter((interval): interval is number => typeof interval === "number" && interval > 0);
+    // 첫 번째 데이터 소스의 새로고침 간격 사용 (초)
+    const firstDataSource = dataSources[0];
+    const refreshInterval = firstDataSource?.refreshInterval ?? 5;
 
-    if (intervals.length === 0) return;
-
-    const minInterval = Math.min(...intervals);
-    // // console.log(`⏱️ 자동 새로고침 설정: ${minInterval}초마다`);
+    // 0이면 자동 새로고침 비활성화
+    if (refreshInterval === 0) {
+      return;
+    }
 
     const intervalId = setInterval(() => {
-      // // console.log("🔄 자동 새로고침 실행");
       loadMultipleDataSources();
-    }, minInterval * 1000);
+    }, refreshInterval * 1000);
 
     return () => {
-      // // console.log("⏹️ 자동 새로고침 정리");
       clearInterval(intervalId);
     };
-  }, [dataSources, loadMultipleDataSources]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataSources]);
 
   // 타일맵 URL (chartConfig에서 가져오기)
-  const tileMapUrl = element?.chartConfig?.tileMapUrl || 
-    `https://api.vworld.kr/req/wmts/1.0.0/${VWORLD_API_KEY}/Base/{z}/{y}/{x}.png`;
+  const tileMapUrl =
+    element?.chartConfig?.tileMapUrl || `https://api.vworld.kr/req/wmts/1.0.0/${VWORLD_API_KEY}/Base/{z}/{y}/{x}.png`;
 
   // 지도 중심점 계산
-  const center: [number, number] = markers.length > 0
-    ? [
-        markers.reduce((sum, m) => sum + m.lat, 0) / markers.length,
-        markers.reduce((sum, m) => sum + m.lng, 0) / markers.length,
-      ]
-    : [37.5665, 126.978]; // 기본: 서울
+  const center: [number, number] =
+    markers.length > 0
+      ? [
+          markers.reduce((sum, m) => sum + m.lat, 0) / markers.length,
+          markers.reduce((sum, m) => sum + m.lng, 0) / markers.length,
+        ]
+      : [37.5665, 126.978]; // 기본: 서울
 
   return (
-    <div className="flex h-full w-full flex-col bg-background">
+    <div className="bg-background flex h-full w-full flex-col">
       {/* 헤더 */}
       <div className="flex items-center justify-between border-b p-4">
         <div>
-          <h3 className="text-lg font-semibold">
-            {element?.customTitle || "지도"}
-          </h3>
-          <p className="text-xs text-muted-foreground">
-            {element?.dataSources?.length || 0}개 데이터 소스 연결됨
+          <h3 className="text-lg font-semibold">{element?.customTitle || "지도"}</h3>
+          <p className="text-muted-foreground text-xs">
+            {dataSources?.length || 0}개 데이터 소스 연결됨
             {lastRefreshTime && (
-              <span className="ml-2">
-                • 마지막 업데이트: {lastRefreshTime.toLocaleTimeString("ko-KR")}
-              </span>
+              <span className="ml-2">• 마지막 업데이트: {lastRefreshTime.toLocaleTimeString("ko-KR")}</span>
             )}
           </p>
         </div>
@@ -852,27 +980,12 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       <div className="relative flex-1">
         {error ? (
           <div className="flex h-full items-center justify-center">
-            <p className="text-sm text-destructive">{error}</p>
-          </div>
-        ) : !element?.dataSources || element.dataSources.length === 0 ? (
-          <div className="flex h-full items-center justify-center">
-            <p className="text-sm text-muted-foreground">
-              데이터 소스를 연결해주세요
-            </p>
+            <p className="text-destructive text-sm">{error}</p>
           </div>
         ) : (
-          <MapContainer
-            center={center}
-            zoom={13}
-            style={{ width: "100%", height: "100%" }}
-            className="z-0"
-          >
-            <TileLayer
-              url={tileMapUrl}
-              attribution='&copy; VWorld'
-              maxZoom={19}
-            />
-            
+          <MapContainer center={center} zoom={13} style={{ width: "100%", height: "100%" }} className="z-0">
+            <TileLayer url={tileMapUrl} attribution="&copy; VWorld" maxZoom={19} />
+
             {/* 폴리곤 렌더링 */}
             {/* GeoJSON 렌더링 (육지 지역 경계선) */}
             {(() => {
@@ -885,16 +998,16 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
             })()}
             {geoJsonData && polygons.length > 0 ? (
               <GeoJSON
-                key={JSON.stringify(polygons.map(p => p.id))} // 폴리곤 변경 시 재렌더링
+                key={JSON.stringify(polygons.map((p) => p.id))} // 폴리곤 변경 시 재렌더링
                 data={geoJsonData}
                 style={(feature: any) => {
                   const ctpName = feature?.properties?.CTP_KOR_NM; // 시/도명 (예: 경상북도)
                   const sigName = feature?.properties?.SIG_KOR_NM; // 시/군/구명 (예: 군위군)
-                  
+
                   // 폴리곤 매칭 (시/군/구명 우선, 없으면 시/도명)
-                  const matchingPolygon = polygons.find(p => {
+                  const matchingPolygon = polygons.find((p) => {
                     if (!p.name) return false;
-                    
+
                     // 정확한 매칭
                     if (p.name === sigName) {
                       // console.log(`✅ 정확 매칭: ${p.name} === ${sigName}`);
@@ -904,7 +1017,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                       // console.log(`✅ 정확 매칭: ${p.name} === ${ctpName}`);
                       return true;
                     }
-                    
+
                     // 부분 매칭 (GeoJSON 지역명에 폴리곤 이름이 포함되는지)
                     if (sigName && sigName.includes(p.name)) {
                       // console.log(`✅ 부분 매칭: ${sigName} includes ${p.name}`);
@@ -914,7 +1027,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                       // console.log(`✅ 부분 매칭: ${ctpName} includes ${p.name}`);
                       return true;
                     }
-                    
+
                     // 역방향 매칭 (폴리곤 이름에 GeoJSON 지역명이 포함되는지)
                     if (sigName && p.name.includes(sigName)) {
                       // console.log(`✅ 역방향 매칭: ${p.name} includes ${sigName}`);
@@ -924,7 +1037,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                       // console.log(`✅ 역방향 매칭: ${p.name} includes ${ctpName}`);
                       return true;
                     }
-                    
+
                     return false;
                   });
 
@@ -945,8 +1058,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                 onEachFeature={(feature: any, layer: any) => {
                   const ctpName = feature?.properties?.CTP_KOR_NM;
                   const sigName = feature?.properties?.SIG_KOR_NM;
-                  
-                  const matchingPolygon = polygons.find(p => {
+
+                  const matchingPolygon = polygons.find((p) => {
                     if (!p.name) return false;
                     if (p.name === sigName || p.name === ctpName) return true;
                     if (sigName && sigName.includes(p.name)) return true;
@@ -960,9 +1073,9 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                     layer.bindPopup(`
                       <div class="min-w-[200px]">
                         <div class="mb-2 font-semibold">${matchingPolygon.name}</div>
-                        ${matchingPolygon.source ? `<div class="mb-1 text-xs text-muted-foreground">출처: ${matchingPolygon.source}</div>` : ''}
-                        ${matchingPolygon.status ? `<div class="mb-1 text-xs">상태: ${matchingPolygon.status}</div>` : ''}
-                        ${matchingPolygon.description ? `<div class="mt-2 max-h-[200px] overflow-auto text-xs"><pre class="whitespace-pre-wrap">${matchingPolygon.description}</pre></div>` : ''}
+                        ${matchingPolygon.source ? `<div class="mb-1 text-xs text-muted-foreground">출처: ${matchingPolygon.source}</div>` : ""}
+                        ${matchingPolygon.status ? `<div class="mb-1 text-xs">상태: ${matchingPolygon.status}</div>` : ""}
+                        ${matchingPolygon.description ? `<div class="mt-2 max-h-[200px] overflow-auto text-xs"><pre class="whitespace-pre-wrap">${matchingPolygon.description}</pre></div>` : ""}
                       </div>
                     `);
                   }
@@ -975,150 +1088,250 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
             )}
 
             {/* 폴리곤 렌더링 (해상 구역만) */}
-            {polygons.filter(p => MARITIME_ZONES[p.name]).map((polygon) => (
-              <Polygon
-                key={polygon.id}
-                positions={polygon.coordinates}
-                pathOptions={{
-                  color: polygon.color || "#3b82f6",
-                  fillColor: polygon.color || "#3b82f6",
-                  fillOpacity: 0.3,
-                  weight: 2,
-                }}
-              >
-                <Popup>
-                  <div className="min-w-[200px]">
-                    <div className="mb-2 font-semibold">{polygon.name}</div>
-                    {polygon.source && (
-                      <div className="mb-1 text-xs text-muted-foreground">
-                        출처: {polygon.source}
-                      </div>
-                    )}
-                    {polygon.status && (
-                      <div className="mb-1 text-xs">
-                        상태: {polygon.status}
-                      </div>
-                    )}
-                    {polygon.description && (
-                      <div className="mt-2 max-h-[200px] overflow-auto text-xs">
-                        <pre className="whitespace-pre-wrap">{polygon.description}</pre>
-                      </div>
-                    )}
-                  </div>
-                </Popup>
-              </Polygon>
-            ))}
-            
+            {polygons
+              .filter((p) => MARITIME_ZONES[p.name])
+              .map((polygon) => (
+                <Polygon
+                  key={polygon.id}
+                  positions={polygon.coordinates}
+                  pathOptions={{
+                    color: polygon.color || "#3b82f6",
+                    fillColor: polygon.color || "#3b82f6",
+                    fillOpacity: 0.3,
+                    weight: 2,
+                  }}
+                >
+                  <Popup>
+                    <div className="min-w-[200px]">
+                      <div className="mb-2 font-semibold">{polygon.name}</div>
+                      {polygon.source && (
+                        <div className="text-muted-foreground mb-1 text-xs">출처: {polygon.source}</div>
+                      )}
+                      {polygon.status && <div className="mb-1 text-xs">상태: {polygon.status}</div>}
+                      {polygon.description && (
+                        <div className="mt-2 max-h-[200px] overflow-auto text-xs">
+                          <pre className="whitespace-pre-wrap">{polygon.description}</pre>
+                        </div>
+                      )}
+                    </div>
+                  </Popup>
+                </Polygon>
+              ))}
+
             {/* 마커 렌더링 */}
             {markers.map((marker) => {
-              // 커스텀 색상 아이콘 생성
-              let customIcon;
+              // 첫 번째 데이터 소스의 마커 종류 가져오기
+              const firstDataSource = dataSources?.[0];
+              const markerType = firstDataSource?.markerType || "circle";
+
+              let markerIcon: any;
               if (typeof window !== "undefined") {
                 const L = require("leaflet");
-                customIcon = L.divIcon({
-                  className: "custom-marker",
-                  html: `
-                    <div style="
-                      width: 30px;
-                      height: 30px;
-                      background-color: ${marker.color || "#3b82f6"};
-                      border: 3px solid white;
-                      border-radius: 50%;
-                      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
-                      display: flex;
-                      align-items: center;
-                      justify-content: center;
-                      transform: translate(-50%, -50%);
-                    "></div>
-                  `,
-                  iconSize: [30, 30],
-                  iconAnchor: [15, 15],
-                });
+                const heading = marker.heading || 0;
+
+                if (markerType === "arrow") {
+                  // 화살표 마커
+                  markerIcon = L.divIcon({
+                    className: "custom-arrow-marker",
+                    html: `
+                      <div style="
+                        width: 40px;
+                        height: 40px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        transform: translate(-50%, -50%) rotate(${heading}deg);
+                        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
+                      ">
+                        <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                          <!-- 화살표 몸통 -->
+                          <polygon 
+                            points="20,5 25,15 23,15 23,25 17,25 17,15 15,15" 
+                            fill="${marker.color || "#3b82f6"}" 
+                            stroke="white" 
+                            stroke-width="1.5"
+                          />
+                          <!-- 화살촉 -->
+                          <polygon 
+                            points="20,2 28,12 12,12" 
+                            fill="${marker.color || "#3b82f6"}" 
+                            stroke="white" 
+                            stroke-width="1.5"
+                          />
+                          <!-- 중심점 -->
+                          <circle 
+                            cx="20" 
+                            cy="30" 
+                            r="3" 
+                            fill="white" 
+                            stroke="${marker.color || "#3b82f6"}" 
+                            stroke-width="1.5"
+                          />
+                        </svg>
+                      </div>
+                    `,
+                    iconSize: [40, 40],
+                    iconAnchor: [20, 20],
+                  });
+                } else {
+                  // 동그라미 마커 (기본)
+                  markerIcon = L.divIcon({
+                    className: "custom-circle-marker",
+                    html: `
+                      <div style="
+                        width: 32px;
+                        height: 32px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        transform: translate(-50%, -50%);
+                        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
+                      ">
+                        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+                          <!-- 외부 원 -->
+                          <circle 
+                            cx="16" 
+                            cy="16" 
+                            r="14" 
+                            fill="${marker.color || "#3b82f6"}" 
+                            stroke="white" 
+                            stroke-width="2"
+                          />
+                          <!-- 내부 점 -->
+                          <circle 
+                            cx="16" 
+                            cy="16" 
+                            r="6" 
+                            fill="white"
+                          />
+                        </svg>
+                      </div>
+                    `,
+                    iconSize: [32, 32],
+                    iconAnchor: [16, 16],
+                  });
+                }
               }
 
               return (
-                <Marker
-                  key={marker.id}
-                  position={[marker.lat, marker.lng]}
-                  icon={customIcon}
-                >
-                <Popup maxWidth={350}>
-                  <div className="min-w-[250px] max-w-[350px]">
-                    {/* 제목 */}
-                    <div className="mb-2 border-b pb-2">
-                      <div className="text-base font-bold">{marker.name}</div>
+                <Marker key={marker.id} position={[marker.lat, marker.lng]} icon={markerIcon}>
+                  <Popup maxWidth={350}>
+                    <div className="max-w-[350px] min-w-[250px]" dir="ltr">
+                      {/* 데이터 소스명만 표시 */}
                       {marker.source && (
-                        <div className="mt-1 text-xs text-muted-foreground">
-                          📡 {marker.source}
+                        <div className="mb-2 border-b pb-2">
+                          <div className="text-muted-foreground text-xs">📡 {marker.source}</div>
                         </div>
                       )}
-                    </div>
 
-                    {/* 상세 정보 */}
-                    <div className="space-y-2">
-                      {marker.description && (
-                        <div className="rounded bg-muted p-2">
-                          <div className="mb-1 text-xs font-semibold text-foreground">상세 정보</div>
-                          <div className="text-xs text-muted-foreground whitespace-pre-wrap">
-                            {(() => {
+                      {/* 상세 정보 */}
+                      <div className="space-y-2">
+                        {marker.description &&
+                          (() => {
+                            const firstDataSource = dataSources?.[0];
+                            const popupFields = firstDataSource?.popupFields;
+
+                            // popupFields가 설정되어 있으면 설정된 필드만 표시
+                            if (popupFields && popupFields.length > 0) {
                               try {
                                 const parsed = JSON.parse(marker.description);
                                 return (
-                                  <div className="space-y-1">
-                                    {parsed.incidenteTypeCd === "1" && (
-                                      <div className="font-semibold text-destructive">🚨 교통사고</div>
-                                    )}
-                                    {parsed.incidenteTypeCd === "2" && (
-                                      <div className="font-semibold text-warning">🚧 도로공사</div>
-                                    )}
-                                    {parsed.addressJibun && (
-                                      <div>📍 {parsed.addressJibun}</div>
-                                    )}
-                                    {parsed.addressNew && parsed.addressNew !== parsed.addressJibun && (
-                                      <div>📍 {parsed.addressNew}</div>
-                                    )}
-                                    {parsed.roadName && (
-                                      <div>🛣️ {parsed.roadName}</div>
-                                    )}
-                                    {parsed.linkName && (
-                                      <div>🔗 {parsed.linkName}</div>
-                                    )}
-                                    {parsed.incidentMsg && (
-                                      <div className="mt-2 border-t pt-2">💬 {parsed.incidentMsg}</div>
-                                    )}
-                                    {parsed.eventContent && (
-                                      <div className="mt-2 border-t pt-2">📝 {parsed.eventContent}</div>
-                                    )}
-                                    {parsed.startDate && (
-                                      <div className="text-[10px]">🕐 {parsed.startDate}</div>
-                                    )}
-                                    {parsed.endDate && (
-                                      <div className="text-[10px]">🕐 종료: {parsed.endDate}</div>
-                                    )}
+                                  <div className="bg-muted rounded p-2">
+                                    <div className="text-foreground mb-1 text-xs font-semibold">상세 정보</div>
+                                    <div className="space-y-2">
+                                      {popupFields.map((field, idx) => {
+                                        const value = parsed[field.fieldName];
+                                        if (value === undefined || value === null) return null;
+
+                                        // 포맷팅 적용
+                                        let formattedValue = value;
+                                        if (field.format === "date" && value) {
+                                          formattedValue = new Date(value).toLocaleDateString("ko-KR");
+                                        } else if (field.format === "datetime" && value) {
+                                          formattedValue = new Date(value).toLocaleString("ko-KR");
+                                        } else if (field.format === "number" && typeof value === "number") {
+                                          formattedValue = value.toLocaleString();
+                                        } else if (
+                                          field.format === "url" &&
+                                          typeof value === "string" &&
+                                          value.startsWith("http")
+                                        ) {
+                                          return (
+                                            <div key={idx} className="text-xs">
+                                              <span className="text-muted-foreground font-medium">{field.label}:</span>{" "}
+                                              <a
+                                                href={value}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="text-primary hover:underline"
+                                              >
+                                                링크 열기
+                                              </a>
+                                            </div>
+                                          );
+                                        }
+
+                                        return (
+                                          <div key={idx} className="text-xs">
+                                            <span className="text-muted-foreground font-medium">{field.label}:</span>{" "}
+                                            <span className="text-foreground">{String(formattedValue)}</span>
+                                          </div>
+                                        );
+                                      })}
+                                    </div>
+                                  </div>
+                                );
+                              } catch (error) {
+                                return (
+                                  <div className="bg-muted rounded p-2">
+                                    <div className="text-foreground mb-1 text-xs font-semibold">상세 정보</div>
+                                    <div className="text-muted-foreground text-xs">{marker.description}</div>
                                   </div>
                                 );
-                              } catch {
-                                return marker.description;
                               }
-                            })()}
-                          </div>
-                        </div>
-                      )}
+                            }
 
-                      {marker.status && (
-                        <div className="text-xs">
-                          <span className="font-semibold">상태:</span> {marker.status}
-                        </div>
-                      )}
+                            // popupFields가 없으면 전체 데이터 표시 (기본 동작)
+                            try {
+                              const parsed = JSON.parse(marker.description);
+                              return (
+                                <div className="bg-muted rounded p-2">
+                                  <div className="text-foreground mb-1 text-xs font-semibold">상세 정보</div>
+                                  <div className="space-y-2">
+                                    {Object.entries(parsed).map(([key, value], idx) => {
+                                      if (value === undefined || value === null) return null;
 
-                      {/* 좌표 */}
-                      <div className="border-t pt-2 text-[10px] text-muted-foreground">
-                        📍 {marker.lat.toFixed(6)}, {marker.lng.toFixed(6)}
+                                      // 좌표 필드는 제외 (하단에 별도 표시)
+                                      if (["lat", "lng", "latitude", "longitude", "x", "y"].includes(key)) return null;
+
+                                      return (
+                                        <div key={idx} className="text-xs">
+                                          <span className="text-muted-foreground font-medium">{key}:</span>{" "}
+                                          <span className="text-foreground">{String(value)}</span>
+                                        </div>
+                                      );
+                                    })}
+                                  </div>
+                                </div>
+                              );
+                            } catch (error) {
+                              return (
+                                <div className="bg-muted rounded p-2">
+                                  <div className="text-foreground mb-1 text-xs font-semibold">상세 정보</div>
+                                  <div className="text-muted-foreground text-xs">{marker.description}</div>
+                                </div>
+                              );
+                            }
+                          })()}
+
+                        {/* 좌표 */}
+                        <div className="text-muted-foreground border-t pt-2 text-[10px]">
+                          {marker.lat.toFixed(6)}, {marker.lng.toFixed(6)}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </Popup>
-              </Marker>
+                  </Popup>
+                </Marker>
               );
             })}
           </MapContainer>
@@ -1127,7 +1340,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
       {/* 하단 정보 */}
       {(markers.length > 0 || polygons.length > 0) && (
-        <div className="border-t p-2 text-xs text-muted-foreground">
+        <div className="text-muted-foreground border-t p-2 text-xs">
           {markers.length > 0 && `마커 ${markers.length}개`}
           {markers.length > 0 && polygons.length > 0 && " · "}
           {polygons.length > 0 && `영역 ${polygons.length}개`}
@@ -1136,4 +1349,3 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     </div>
   );
 }
-