This commit is contained in:
leeheejin
parent
753c170839
commit
331261bc80
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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") {
|
||||
|
|
|
|||
|
|
@ -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 호출됨!");
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -167,6 +167,8 @@ export interface ChartConfig {
|
|||
longitudeColumn?: string; // 경도 컬럼
|
||||
labelColumn?: string; // 라벨 컬럼
|
||||
statusColumn?: string; // 상태 컬럼
|
||||
showWeather?: boolean; // 날씨 정보 표시 여부
|
||||
showWeatherAlerts?: boolean; // 기상특보 영역 표시 여부
|
||||
}
|
||||
|
||||
export interface QueryResult {
|
||||
|
|
|
|||
|
|
@ -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<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) {
|
||||
// 날씨 정보 병렬 로드
|
||||
const weatherPromises = citiesToFetch.map((city) => getWeather(city));
|
||||
const weatherResults = await Promise.all(weatherPromises);
|
||||
console.log(`🌤️ 날씨 로드: 총 ${citySet.size}개 도시, 캐시 미스 ${citiesToFetch.length}개`);
|
||||
|
||||
// 캐시 업데이트
|
||||
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);
|
||||
|
||||
// 날씨 정보 로드 (비동기)
|
||||
loadWeatherForMarkers(markerData);
|
||||
// 날씨 정보 로드 (showWeather가 활성화된 경우만)
|
||||
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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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]
|
||||
]]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue