날씨

frontend/components/admin/dashboard/DashboardSidebar.tsx

@@ -126,12 +126,12 @@ export function DashboardSidebar() {
             subtype="weather"
             onDragStart={handleDragStart}
           />
-          <DraggableItem
+          {/* <DraggableItem
             title="날씨 지도 위젯"
             type="widget"
             subtype="weather-map"
             onDragStart={handleDragStart}
-          />
+          /> */}
           <DraggableItem
             title="계산기 위젯"
             type="widget"

frontend/components/admin/dashboard/DashboardTopMenu.tsx

@@ -191,7 +191,7 @@ export function DashboardTopMenu({
             <SelectGroup>
               <SelectLabel>일반 위젯</SelectLabel>
               <SelectItem value="weather">날씨</SelectItem>
-              <SelectItem value="weather-map">날씨 지도</SelectItem>
+              {/* <SelectItem value="weather-map">날씨 지도</SelectItem> */}
               <SelectItem value="exchange">환율</SelectItem>
               <SelectItem value="calculator">계산기</SelectItem>
               <SelectItem value="calendar">달력</SelectItem>

frontend/components/admin/dashboard/ElementConfigModal.tsx

@@ -67,15 +67,42 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
   // 모달이 열릴 때 초기화
   useEffect(() => {
     if (isOpen) {
-      setDataSource(element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 });
+      const dataSourceToSet = element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 };
+      setDataSource(dataSourceToSet);
       setChartConfig(element.chartConfig || {});
       setQueryResult(null);
       setCurrentStep(1);
       setCustomTitle(element.customTitle || "");
       setShowHeader(element.showHeader !== false); // showHeader 초기화
+
+      // 쿼리가 이미 있으면 자동 실행
+      if (dataSourceToSet.type === "database" && dataSourceToSet.query) {
+        console.log("🔄 기존 쿼리 자동 실행:", dataSourceToSet.query);
+        executeQueryAutomatically(dataSourceToSet);
+      }
     }
   }, [isOpen, element]);
 
+  // 쿼리 자동 실행 함수
+  const executeQueryAutomatically = async (dataSourceToExecute: ChartDataSource) => {
+    if (dataSourceToExecute.type !== "database" || !dataSourceToExecute.query) return;
+
+    try {
+      const { queryApi } = await import("@/lib/api/query");
+      const result = await queryApi.executeQuery({
+        query: dataSourceToExecute.query,
+        connectionType: dataSourceToExecute.connectionType || "current",
+        externalConnectionId: dataSourceToExecute.externalConnectionId,
+      });
+
+      console.log("✅ 쿼리 자동 실행 완료:", result);
+      setQueryResult(result);
+    } catch (error) {
+      console.error("❌ 쿼리 자동 실행 실패:", error);
+      // 실패해도 모달은 열리도록 (사용자가 다시 실행 가능)
+    }
+  };
+
   // 데이터 소스 타입 변경
   const handleDataSourceTypeChange = useCallback((type: "database" | "api") => {
     if (type === "database") {

frontend/components/admin/dashboard/QueryEditor.tsx

@@ -35,6 +35,13 @@ export function QueryEditor({ dataSource, onDataSourceChange, onQueryTest }: Que
   const [error, setError] = useState<string | null>(null);
   const [sampleQueryOpen, setSampleQueryOpen] = useState(false);
 
+  // dataSource.query가 변경되면 query state 업데이트 (저장된 쿼리 불러오기)
+  React.useEffect(() => {
+    if (dataSource?.query) {
+      setQuery(dataSource.query);
+    }
+  }, [dataSource?.query]);
+
   // 쿼리 실행
   const executeQuery = useCallback(async () => {
     // console.log("🚀 executeQuery 호출됨!");

frontend/components/admin/dashboard/VehicleMapConfigPanel.tsx

@@ -134,6 +134,37 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
             </select>
           </div>
 
+          {/* 날씨 정보 표시 옵션 */}
+        <div className="space-y-1.5">
+          <label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={currentConfig.showWeather || false}
+              onChange={(e) => updateConfig({ showWeather: e.target.checked })}
+              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
+            />
+            <span>날씨 정보 표시</span>
+          </label>
+          <p className="text-xs text-gray-500 ml-6">
+            마커 팝업에 해당 위치의 날씨 정보를 함께 표시합니다
+          </p>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={currentConfig.showWeatherAlerts || false}
+              onChange={(e) => updateConfig({ showWeatherAlerts: e.target.checked })}
+              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
+            />
+            <span>기상특보 영역 표시</span>
+          </label>
+          <p className="text-xs text-gray-500 ml-6">
+            현재 발효 중인 기상특보(주의보/경보)를 지도에 색상 영역으로 표시합니다
+          </p>
+        </div>
+
           {/* 설정 미리보기 */}
           <div className="p-3 bg-gray-50 rounded-lg">
             <div className="text-xs font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
@@ -142,6 +173,8 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
               <div><strong>경도:</strong> {currentConfig.longitudeColumn || '미설정'}</div>
               <div><strong>라벨:</strong> {currentConfig.labelColumn || '없음'}</div>
               <div><strong>상태:</strong> {currentConfig.statusColumn || '없음'}</div>
+              <div><strong>날씨 표시:</strong> {currentConfig.showWeather ? '활성화' : '비활성화'}</div>
+              <div><strong>기상특보 표시:</strong> {currentConfig.showWeatherAlerts ? '활성화' : '비활성화'}</div>
               <div><strong>데이터 개수:</strong> {queryResult.rows.length}개</div>
             </div>
           </div>

frontend/components/admin/dashboard/types.ts

@@ -167,6 +167,8 @@ export interface ChartConfig {
   longitudeColumn?: string; // 경도 컬럼
   labelColumn?: string; // 라벨 컬럼
   statusColumn?: string; // 상태 컬럼
+  showWeather?: boolean; // 날씨 정보 표시 여부
+  showWeatherAlerts?: boolean; // 기상특보 영역 표시 여부
 }
 
 export interface QueryResult {

frontend/components/dashboard/widgets/MapSummaryWidget.tsx

@@ -3,8 +3,8 @@
 import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { DashboardElement } from "@/components/admin/dashboard/types";
-import { getWeather, WeatherData } from "@/lib/api/openApi";
+import { getWeather, WeatherData, getWeatherAlerts, WeatherAlert } from "@/lib/api/openApi";
-import { Cloud, CloudRain, CloudSnow, Sun, Wind } from "lucide-react";
+import { Cloud, CloudRain, CloudSnow, Sun, Wind, AlertTriangle } from "lucide-react";
 import "leaflet/dist/leaflet.css";
 
 // Leaflet 아이콘 경로 설정 (엑박 방지)
@@ -23,6 +23,8 @@ const MapContainer = dynamic(() => import("react-leaflet").then((mod) => mod.Map
 const TileLayer = dynamic(() => import("react-leaflet").then((mod) => mod.TileLayer), { ssr: false });
 const Marker = dynamic(() => import("react-leaflet").then((mod) => mod.Marker), { ssr: false });
 const Popup = dynamic(() => import("react-leaflet").then((mod) => mod.Popup), { ssr: false });
+const GeoJSON = dynamic(() => import("react-leaflet").then((mod) => mod.GeoJSON), { ssr: false });
+const Polygon = dynamic(() => import("react-leaflet").then((mod) => mod.Polygon), { ssr: false });
 
 // 브이월드 API 키
 const VWORLD_API_KEY = "97AD30D5-FDC4-3481-99C3-158E36422033";
@@ -72,6 +74,79 @@ const CITY_COORDINATES = [
   { name: "제주", lat: 33.4996, lng: 126.5312 },
 ];
 
+// 해상 구역 폴리곤 좌표 (기상청 특보 구역 기준)
+const MARITIME_ZONES: Record<string, Array<[number, number]>> = {
+  // 제주도 해역
+  "제주도남부앞바다": [
+    [33.2, 126.2], [33.2, 126.8], [33.0, 126.8], [33.0, 126.2]
+  ],
+  "제주도남쪽바깥먼바다": [
+    [32.5, 125.8], [32.5, 127.2], [33.0, 127.2], [33.0, 125.8]
+  ],
+  "제주도동부앞바다": [
+    [33.3, 126.8], [33.3, 127.2], [33.1, 127.2], [33.1, 126.8]
+  ],
+  "제주도남동쪽안쪽먼바다": [
+    [32.8, 127.0], [32.8, 127.8], [33.2, 127.8], [33.2, 127.0]
+  ],
+  "제주도남서쪽안쪽먼바다": [
+    [32.8, 125.5], [32.8, 126.3], [33.2, 126.3], [33.2, 125.5]
+  ],
+  
+  // 남해 해역
+  "남해동부앞바다": [
+    [34.5, 128.5], [34.5, 129.5], [34.0, 129.5], [34.0, 128.5]
+  ],
+  "남해동부안쪽먼바다": [
+    [33.5, 128.0], [33.5, 129.5], [34.0, 129.5], [34.0, 128.0]
+  ],
+  "남해동부바깥먼바다": [
+    [32.5, 128.0], [32.5, 130.0], [33.5, 130.0], [33.5, 128.0]
+  ],
+  
+  // 동해 해역
+  "경북북부앞바다": [
+    [36.5, 129.3], [36.5, 130.0], [36.0, 130.0], [36.0, 129.3]
+  ],
+  "경북남부앞바다": [
+    [36.0, 129.2], [36.0, 129.8], [35.5, 129.8], [35.5, 129.2]
+  ],
+  "동해남부남쪽안쪽먼바다": [
+    [35.0, 129.5], [35.0, 130.5], [35.5, 130.5], [35.5, 129.5]
+  ],
+  "동해남부남쪽바깥먼바다": [
+    [34.0, 129.5], [34.0, 131.0], [35.0, 131.0], [35.0, 129.5]
+  ],
+  "동해남부북쪽안쪽먼바다": [
+    [35.5, 129.8], [35.5, 130.8], [36.5, 130.8], [36.5, 129.8]
+  ],
+  "동해남부북쪽바깥먼바다": [
+    [35.5, 130.5], [35.5, 132.0], [36.5, 132.0], [36.5, 130.5]
+  ],
+  
+  // 강원 해역
+  "강원북부앞바다": [
+    [38.0, 128.5], [38.0, 129.5], [37.5, 129.5], [37.5, 128.5]
+  ],
+  "강원중부앞바다": [
+    [37.5, 128.8], [37.5, 129.5], [37.0, 129.5], [37.0, 128.8]
+  ],
+  "강원남부앞바다": [
+    [37.0, 129.0], [37.0, 129.8], [36.5, 129.8], [36.5, 129.0]
+  ],
+  "동해중부안쪽먼바다": [
+    [37.0, 129.5], [37.0, 131.0], [38.5, 131.0], [38.5, 129.5]
+  ],
+  "동해중부바깥먼바다": [
+    [37.0, 130.5], [37.0, 132.5], [38.5, 132.5], [38.5, 130.5]
+  ],
+  
+  // 울릉도·독도
+  "울릉도.독도": [
+    [37.4, 130.8], [37.4, 131.9], [37.6, 131.9], [37.6, 130.8]
+  ],
+};
+
 // 두 좌표 간 거리 계산 (Haversine formula)
 const getDistance = (lat1: number, lng1: number, lat2: number, lng2: number): number => {
   const R = 6371; // 지구 반경 (km)
@@ -119,6 +194,27 @@ const getWeatherIcon = (weatherMain: string) => {
   }
 };
 
+// 특보 심각도별 색상 반환
+const getAlertColor = (severity: string): string => {
+  switch (severity) {
+    case "high":
+      return "#ef4444"; // 빨강 (경보)
+    case "medium":
+      return "#f59e0b"; // 주황 (주의보)
+    case "low":
+      return "#eab308"; // 노랑 (약한 주의보)
+    default:
+      return "#6b7280"; // 회색
+  }
+};
+
+// 지역명 정규화 (특보 API 지역명 → GeoJSON 지역명)
+const normalizeRegionName = (location: string): string => {
+  // 기상청 특보는 "강릉시", "속초시", "인제군" 등으로 옴
+  // GeoJSON도 같은 형식이므로 그대로 반환
+  return location;
+};
+
 /**
  * 범용 지도 위젯 (커스텀 지도 카드)
  * - 위도/경도가 있는 모든 데이터를 지도에 표시
@@ -131,8 +227,24 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
   const [error, setError] = useState<string | null>(null);
   const [tableName, setTableName] = useState<string | null>(null);
   const [weatherCache, setWeatherCache] = useState<Map<string, WeatherData>>(new Map());
+  const [weatherAlerts, setWeatherAlerts] = useState<WeatherAlert[]>([]);
+  const [geoJsonData, setGeoJsonData] = useState<any>(null);
 
   useEffect(() => {
+    console.log("🗺️ MapSummaryWidget 초기화");
+    console.log("🗺️ showWeatherAlerts:", element.chartConfig?.showWeatherAlerts);
+    
+    // GeoJSON 데이터 로드
+    loadGeoJsonData();
+
+    // 기상특보 로드 (showWeatherAlerts가 활성화된 경우)
+    if (element.chartConfig?.showWeatherAlerts) {
+      console.log("🚨 기상특보 로드 시작...");
+      loadWeatherAlerts();
+    } else {
+      console.log("⚠️ 기상특보 표시 옵션이 꺼져있습니다");
+    }
+
     if (element?.dataSource?.query) {
       loadMapData();
     }
@@ -142,12 +254,40 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
       if (element?.dataSource?.query) {
         loadMapData();
       }
+      if (element.chartConfig?.showWeatherAlerts) {
+        loadWeatherAlerts();
+      }
     }, 30000);
 
     return () => clearInterval(interval);
-  }, [element]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element.id, element.dataSource?.query, element.chartConfig?.showWeather, element.chartConfig?.showWeatherAlerts]);
 
-  // 마커들의 날씨 정보 로드
+  // GeoJSON 데이터 로드 (시/군/구 단위)
+  const loadGeoJsonData = async () => {
+    try {
+      const response = await fetch("/geojson/korea-municipalities.json");
+      const data = await response.json();
+      console.log("🗺️ GeoJSON 로드 완료:", data.features?.length, "개 시/군/구");
+      setGeoJsonData(data);
+    } catch (err) {
+      console.error("❌ GeoJSON 로드 실패:", err);
+    }
+  };
+
+  // 기상특보 로드
+  const loadWeatherAlerts = async () => {
+    try {
+      const alerts = await getWeatherAlerts();
+      console.log("🚨 기상특보 로드 완료:", alerts.length, "건");
+      console.log("🚨 특보 목록:", alerts);
+      setWeatherAlerts(alerts);
+    } catch (err) {
+      console.error("❌ 기상특보 로드 실패:", err);
+    }
+  };
+
+  // 마커들의 날씨 정보 로드 (배치 처리 + 딜레이)
   const loadWeatherForMarkers = async (markerData: MarkerData[]) => {
     try {
       // 각 마커의 가장 가까운 도시 찾기
@@ -160,16 +300,43 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
       // 캐시에 없는 도시만 날씨 조회
       const citiesToFetch = Array.from(citySet).filter((city) => !weatherCache.has(city));
 
-      if (citiesToFetch.length > 0) {
+      console.log(`🌤️ 날씨 로드: 총 ${citySet.size}개 도시, 캐시 미스 ${citiesToFetch.length}개`);
-        // 날씨 정보 병렬 로드
-        const weatherPromises = citiesToFetch.map((city) => getWeather(city));
-        const weatherResults = await Promise.all(weatherPromises);
 
-        // 캐시 업데이트
+      if (citiesToFetch.length > 0) {
+        // 배치 처리: 5개씩 나눠서 호출
+        const BATCH_SIZE = 5;
         const newCache = new Map(weatherCache);
-        citiesToFetch.forEach((city, index) => {
+
-          newCache.set(city, weatherResults[index]);
+        for (let i = 0; i < citiesToFetch.length; i += BATCH_SIZE) {
-        });
+          const batch = citiesToFetch.slice(i, i + BATCH_SIZE);
+          console.log(`📦 배치 ${Math.floor(i / BATCH_SIZE) + 1}: ${batch.join(", ")}`);
+
+          // 배치 내에서는 병렬 호출
+          const batchPromises = batch.map(async (city) => {
+            try {
+              const weather = await getWeather(city);
+              return { city, weather };
+            } catch (err) {
+              console.error(`❌ ${city} 날씨 로드 실패:`, err);
+              return { city, weather: null };
+            }
+          });
+
+          const batchResults = await Promise.all(batchPromises);
+
+          // 캐시 업데이트
+          batchResults.forEach(({ city, weather }) => {
+            if (weather) {
+              newCache.set(city, weather);
+            }
+          });
+
+          // 다음 배치 전 1초 대기 (서버 부하 방지)
+          if (i + BATCH_SIZE < citiesToFetch.length) {
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+          }
+        }
+
         setWeatherCache(newCache);
 
         // 마커에 날씨 정보 추가
@@ -181,6 +348,7 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
           };
         });
         setMarkers(updatedMarkers);
+        console.log("✅ 날씨 로드 완료!");
       } else {
         // 캐시에서 날씨 정보 가져오기
         const updatedMarkers = markerData.map((marker) => {
@@ -191,10 +359,12 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
           };
         });
         setMarkers(updatedMarkers);
+        console.log("✅ 캐시에서 날씨 로드 완료!");
       }
     } catch (err) {
-      console.error("날씨 정보 로드 실패:", err);
+      console.error("❌ 날씨 정보 로드 실패:", err);
       // 날씨 로드 실패해도 마커는 표시
+      setMarkers(markerData);
     }
   };
 
@@ -255,8 +425,10 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
 
         setMarkers(markerData);
 
-        // 날씨 정보 로드 (비동기)
+        // 날씨 정보 로드 (showWeather가 활성화된 경우만)
-        loadWeatherForMarkers(markerData);
+        if (element.chartConfig?.showWeather) {
+          loadWeatherForMarkers(markerData);
+        }
       }
 
       setError(null);
@@ -320,6 +492,109 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
             keepBuffer={2}
           />
 
+          {/* 기상특보 영역 표시 (육지 - GeoJSON 레이어) */}
+          {element.chartConfig?.showWeatherAlerts && geoJsonData && weatherAlerts && weatherAlerts.length > 0 && (
+            <GeoJSON
+              key={`alerts-${weatherAlerts.length}`}
+              data={geoJsonData}
+              style={(feature) => {
+                // 해당 지역에 특보가 있는지 확인
+                const regionName = feature?.properties?.name;
+                const alert = weatherAlerts.find((a) => normalizeRegionName(a.location) === regionName);
+
+                if (alert) {
+                  return {
+                    fillColor: getAlertColor(alert.severity),
+                    fillOpacity: 0.3,
+                    color: getAlertColor(alert.severity),
+                    weight: 2,
+                  };
+                }
+
+                // 특보가 없는 지역은 투명하게
+                return {
+                  fillOpacity: 0,
+                  color: "transparent",
+                  weight: 0,
+                };
+              }}
+              onEachFeature={(feature, layer) => {
+                const regionName = feature?.properties?.name;
+                const regionAlerts = weatherAlerts.filter((a) => normalizeRegionName(a.location) === regionName);
+
+                if (regionAlerts.length > 0) {
+                  const popupContent = `
+                    <div style="min-width: 200px;">
+                      <div style="font-weight: bold; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 4px;">
+                        <span style="color: ${getAlertColor(regionAlerts[0].severity)};">⚠️</span>
+                        ${regionName}
+                      </div>
+                      ${regionAlerts
+                        .map(
+                          (alert) => `
+                        <div style="margin-bottom: 8px; padding: 8px; background: #f9fafb; border-radius: 4px; border-left: 3px solid ${getAlertColor(alert.severity)};">
+                          <div style="font-weight: 600; font-size: 12px; color: ${getAlertColor(alert.severity)};">
+                            ${alert.title}
+                          </div>
+                          <div style="font-size: 11px; color: #6b7280; margin-top: 4px;">
+                            ${alert.description}
+                          </div>
+                          <div style="font-size: 10px; color: #9ca3af; margin-top: 4px;">
+                            ${new Date(alert.timestamp).toLocaleString("ko-KR")}
+                          </div>
+                        </div>
+                      `,
+                        )
+                        .join("")}
+                    </div>
+                  `;
+                  layer.bindPopup(popupContent);
+                }
+              }}
+            />
+          )}
+
+          {/* 기상특보 영역 표시 (해상 - Polygon 레이어) */}
+          {element.chartConfig?.showWeatherAlerts && weatherAlerts && weatherAlerts.length > 0 && 
+            weatherAlerts
+              .filter((alert) => MARITIME_ZONES[alert.location]) // 해상 구역만 필터링
+              .map((alert, idx) => {
+                const coordinates = MARITIME_ZONES[alert.location];
+                return (
+                  <Polygon
+                    key={`maritime-${idx}`}
+                    positions={coordinates}
+                    pathOptions={{
+                      fillColor: getAlertColor(alert.severity),
+                      fillOpacity: 0.3,
+                      color: getAlertColor(alert.severity),
+                      weight: 2,
+                    }}
+                  >
+                    <Popup>
+                      <div style={{ minWidth: "200px" }}>
+                        <div style={{ fontWeight: "bold", fontSize: "14px", marginBottom: "8px", display: "flex", alignItems: "center", gap: "4px" }}>
+                          <span style={{ color: getAlertColor(alert.severity) }}>⚠️</span>
+                          {alert.location}
+                        </div>
+                        <div style={{ marginBottom: "8px", padding: "8px", background: "#f9fafb", borderRadius: "4px", borderLeft: `3px solid ${getAlertColor(alert.severity)}` }}>
+                          <div style={{ fontWeight: "600", fontSize: "12px", color: getAlertColor(alert.severity) }}>
+                            {alert.title}
+                          </div>
+                          <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "4px" }}>
+                            {alert.description}
+                          </div>
+                          <div style={{ fontSize: "10px", color: "#9ca3af", marginTop: "4px" }}>
+                            {new Date(alert.timestamp).toLocaleString("ko-KR")}
+                          </div>
+                        </div>
+                      </div>
+                    </Popup>
+                  </Polygon>
+                );
+              })
+          }
+
           {/* 마커 표시 */}
           {markers.map((marker, idx) => (
             <Marker key={idx} position={[marker.lat, marker.lng]}>
@@ -370,6 +645,33 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
             </Marker>
           ))}
         </MapContainer>
+
+        {/* 범례 (특보가 있을 때만 표시) */}
+        {element.chartConfig?.showWeatherAlerts && weatherAlerts && weatherAlerts.length > 0 && (
+          <div className="absolute bottom-4 right-4 z-10 rounded-lg border bg-white p-3 shadow-lg">
+            <div className="mb-2 flex items-center gap-1 text-xs font-semibold">
+              <AlertTriangle className="h-3 w-3" />
+              기상특보
+            </div>
+            <div className="space-y-1 text-xs">
+              <div className="flex items-center gap-2">
+                <div className="h-3 w-3 rounded" style={{ backgroundColor: getAlertColor("high") }}></div>
+                <span>경보</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="h-3 w-3 rounded" style={{ backgroundColor: getAlertColor("medium") }}></div>
+                <span>주의보</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="h-3 w-3 rounded" style={{ backgroundColor: getAlertColor("low") }}></div>
+                <span>약한 주의보</span>
+              </div>
+            </div>
+            <div className="mt-2 border-t pt-2 text-[10px] text-gray-500">
+              총 {weatherAlerts.length}건 발효 중
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

frontend/lib/api/openApi.ts

@@ -90,6 +90,24 @@ export async function getMultipleWeather(cities: string[]): Promise<WeatherData[
   return Promise.all(promises);
 }
 
+/**
+ * 기상특보 정보 조회
+ */
+export interface WeatherAlert {
+  id: string;
+  type: string;
+  severity: "high" | "medium" | "low";
+  title: string;
+  location: string;
+  description: string;
+  timestamp: string;
+}
+
+export async function getWeatherAlerts(): Promise<WeatherAlert[]> {
+  const response = await apiClient.get<WeatherAlert[]>("/risk-alerts/weather");
+  return response.data;
+}
+
 /**
  * 환율 정보 조회
  * @param base 기준 통화 (기본값: KRW)

frontend/public/geojson/korea-regions.json

@@ -0,0 +1,295 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "서울특별시",
+        "code": "11"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [126.734086, 37.413294],
+          [127.183937, 37.413294],
+          [127.183937, 37.701908],
+          [126.734086, 37.701908],
+          [126.734086, 37.413294]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "부산광역시",
+        "code": "26"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [128.891602, 35.002762],
+          [129.274902, 35.002762],
+          [129.274902, 35.396042],
+          [128.891602, 35.396042],
+          [128.891602, 35.002762]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "대구광역시",
+        "code": "27"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [128.473511, 35.698242],
+          [128.798828, 35.698242],
+          [128.798828, 36.014069],
+          [128.473511, 36.014069],
+          [128.473511, 35.698242]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "인천광역시",
+        "code": "28"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [126.312256, 37.263184],
+          [126.878052, 37.263184],
+          [126.878052, 37.639252],
+          [126.312256, 37.639252],
+          [126.312256, 37.263184]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "광주광역시",
+        "code": "29"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [126.708984, 35.059111],
+          [127.012939, 35.059111],
+          [127.012939, 35.278607],
+          [126.708984, 35.278607],
+          [126.708984, 35.059111]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "대전광역시",
+        "code": "30"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [127.264404, 36.227661],
+          [127.504883, 36.227661],
+          [127.504883, 36.480622],
+          [127.264404, 36.480622],
+          [127.264404, 36.227661]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "울산광역시",
+        "code": "31"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [129.136963, 35.362656],
+          [129.487305, 35.362656],
+          [129.487305, 35.698242],
+          [129.136963, 35.698242],
+          [129.136963, 35.362656]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "세종특별자치시",
+        "code": "36"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [127.189941, 36.399532],
+          [127.389526, 36.399532],
+          [127.389526, 36.619987],
+          [127.189941, 36.619987],
+          [127.189941, 36.399532]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "경기도",
+        "code": "41"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [126.470947, 36.899452],
+          [127.869873, 36.899452],
+          [127.869873, 38.289937],
+          [126.470947, 38.289937],
+          [126.470947, 36.899452]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "강원도",
+        "code": "42"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [127.419434, 37.024219],
+          [129.464111, 37.024219],
+          [129.464111, 38.612658],
+          [127.419434, 38.612658],
+          [127.419434, 37.024219]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "충청북도",
+        "code": "43"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [127.264404, 36.227661],
+          [128.342285, 36.227661],
+          [128.342285, 37.239551],
+          [127.264404, 37.239551],
+          [127.264404, 36.227661]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "충청남도",
+        "code": "44"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [125.958252, 35.995083],
+          [127.519531, 35.995083],
+          [127.519531, 37.024219],
+          [125.958252, 37.024219],
+          [125.958252, 35.995083]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "전라북도",
+        "code": "45"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [126.123047, 35.278607],
+          [127.694092, 35.278607],
+          [127.694092, 36.227661],
+          [126.123047, 36.227661],
+          [126.123047, 35.278607]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "전라남도",
+        "code": "46"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [125.068359, 33.943360],
+          [127.562256, 33.943360],
+          [127.562256, 35.460670],
+          [125.068359, 35.460670],
+          [125.068359, 33.943360]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "경상북도",
+        "code": "47"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [127.869873, 35.698242],
+          [129.464111, 35.698242],
+          [129.464111, 37.239551],
+          [127.869873, 37.239551],
+          [127.869873, 35.698242]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "경상남도",
+        "code": "48"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [127.694092, 34.597042],
+          [129.274902, 34.597042],
+          [129.274902, 35.898980],
+          [127.694092, 35.898980],
+          [127.694092, 34.597042]
+        ]]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "제주특별자치도",
+        "code": "50"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [[
+          [126.123047, 33.189144],
+          [126.958008, 33.189144],
+          [126.958008, 33.578015],
+          [126.123047, 33.578015],
+          [126.123047, 33.189144]
+        ]]
+      }
+    }
+  ]
+}
+