📋 설정 미리보기
@@ -142,6 +173,8 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
경도: {currentConfig.longitudeColumn || '미설정'}
라벨: {currentConfig.labelColumn || '없음'}
상태: {currentConfig.statusColumn || '없음'}
+
날씨 표시: {currentConfig.showWeather ? '활성화' : '비활성화'}
+
기상특보 표시: {currentConfig.showWeatherAlerts ? '활성화' : '비활성화'}
데이터 개수: {queryResult.rows.length}개
diff --git a/frontend/components/admin/dashboard/types.ts b/frontend/components/admin/dashboard/types.ts
index d72b306f..65ec916d 100644
--- a/frontend/components/admin/dashboard/types.ts
+++ b/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 {
diff --git a/frontend/components/dashboard/widgets/MapSummaryWidget.tsx b/frontend/components/dashboard/widgets/MapSummaryWidget.tsx
index eea52942..df19e2de 100644
--- a/frontend/components/dashboard/widgets/MapSummaryWidget.tsx
+++ b/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 { Cloud, CloudRain, CloudSnow, Sun, Wind } from "lucide-react";
+import { getWeather, WeatherData, getWeatherAlerts, WeatherAlert } from "@/lib/api/openApi";
+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