{[
- { date: '2026-01-15', team: '제주해경 방제과', type: 'Pre-SCAT', status: '완료', note: '초기 사전조사 실시. ESI 확인.' },
+ {
+ date: '2026-01-15',
+ team: '제주해경 방제과',
+ type: 'Pre-SCAT',
+ status: '완료',
+ note: '초기 사전조사 실시. ESI 확인.',
+ },
].map((h, i) => (
{h.date}
-
+
{h.type}
diff --git a/frontend/src/tabs/weather/components/OceanCurrentLayer.tsx b/frontend/src/tabs/weather/components/OceanCurrentLayer.tsx
index ab94d8a..09c6c79 100755
--- a/frontend/src/tabs/weather/components/OceanCurrentLayer.tsx
+++ b/frontend/src/tabs/weather/components/OceanCurrentLayer.tsx
@@ -1,12 +1,13 @@
-import { useEffect } from 'react'
-import { useMap } from 'react-leaflet'
-import L from 'leaflet'
+import { useMemo } from 'react'
+import { ScatterplotLayer } from '@deck.gl/layers'
+import type { Layer } from '@deck.gl/core'
+import { hexToRgba } from '@common/components/map/mapUtils'
interface OceanCurrentData {
lat: number
lon: number
direction: number // 0-360도
- speed: number // m/s
+ speed: number // m/s
}
interface OceanCurrentLayerProps {
@@ -16,7 +17,6 @@ interface OceanCurrentLayerProps {
// 한반도 육지 영역 판별 (간략화된 폴리곤)
const isOnLand = (lat: number, lon: number): boolean => {
- // 한반도 본토 영역 (간략화)
const peninsula: [number, number][] = [
[38.5, 124.5], [38.5, 128.3],
[37.8, 128.8], [37.0, 129.2],
@@ -43,31 +43,27 @@ const isOnLand = (lat: number, lon: number): boolean => {
return inside
}
-// 한국 해역의 대략적인 해류 데이터 (실제로는 API에서 가져와야 함)
+// 한국 해역의 대략적인 해류 데이터 생성
const generateOceanCurrentData = (): OceanCurrentData[] => {
const data: OceanCurrentData[] = []
- // 격자 형태로 해류 데이터 생성 (실제로는 API에서 받아올 데이터)
for (let lat = 33.5; lat <= 38.0; lat += 0.8) {
for (let lon = 125.0; lon <= 130.5; lon += 0.8) {
- // 육지 위의 포인트는 제외 (바다에만 표시)
if (isOnLand(lat, lon)) continue
- // 간단한 해류 패턴 시뮬레이션
- // 동해: 북동진, 서해: 북진, 남해: 동진
let direction = 0
let speed = 0.3
if (lon > 128.5) {
- // 동해 - 북동진하는 동한난류
+ // 동해 — 북동진하는 동한난류
direction = 30 + Math.random() * 20
speed = 0.4 + Math.random() * 0.3
} else if (lon < 126.5) {
- // 서해 - 북진
+ // 서해 — 북진
direction = 350 + Math.random() * 20
speed = 0.2 + Math.random() * 0.2
} else {
- // 남해 - 동진
+ // 남해 — 동진
direction = 80 + Math.random() * 20
speed = 0.3 + Math.random() * 0.3
}
@@ -79,81 +75,74 @@ const generateOceanCurrentData = (): OceanCurrentData[] => {
return data
}
-// SVG 화살표 생성
-const createArrowSvg = (speed: number, color: string): string => {
- const length = Math.min(20 + speed * 30, 50)
- const width = 2
-
- return `
-
-
-
-
-
-
- `
+// 속도에 따른 hex 색상
+function getCurrentHexColor(speed: number): string {
+ if (speed > 0.5) return '#ef4444'
+ if (speed > 0.3) return '#f59e0b'
+ return '#3b82f6'
}
-export function OceanCurrentLayer({ visible, opacity = 0.7 }: OceanCurrentLayerProps) {
- const map = useMap()
+// 해류 데이터는 컴포넌트 외부에서 한 번만 생성 (랜덤이므로 안정화)
+const OCEAN_CURRENT_DATA = generateOceanCurrentData()
- useEffect(() => {
- if (!visible) return
+// eslint-disable-next-line react-refresh/only-export-components
+/**
+ * OceanCurrentLayer — deck.gl ScatterplotLayer 배열 반환 훅
+ *
+ * 기존: Leaflet Marker + SVG DivIcon + CSS rotate
+ * 전환: ScatterplotLayer (크기=속도, 색상=방향)
+ *
+ * 방향 표현 한계: deck.gl ScatterplotLayer는 원형이므로 방향을 색상으로 구분
+ * - 북동(0~90°): 파랑
+ * - 남동(90~180°): 초록
+ * - 남서(180~270°): 주황
+ * - 북서(270~360°): 빨강
+ * 속도는 반경 크기(5~20km)로 표현
+ */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useOceanCurrentLayers(props: OceanCurrentLayerProps): Layer[] {
+ const { visible, opacity = 0.7 } = props
- const currentData = generateOceanCurrentData()
- const markers: L.Marker[] = []
+ return useMemo(() => {
+ if (!visible) return []
- currentData.forEach((current) => {
- // 속도에 따른 색상 결정
- const color =
- current.speed > 0.5 ? '#ef4444' : current.speed > 0.3 ? '#f59e0b' : '#3b82f6'
+ const data = OCEAN_CURRENT_DATA.map((c) => ({
+ position: [c.lon, c.lat] as [number, number],
+ // 반경: 속도 비례 (5~20km)
+ radius: 5000 + c.speed * 25000,
+ fillColor: hexToRgba(getCurrentHexColor(c.speed), Math.round(opacity * 180)),
+ lineColor: hexToRgba(getCurrentHexColor(c.speed), Math.round(opacity * 230)),
+ }))
- const arrowSvg = createArrowSvg(current.speed, color)
- const svgUrl = `data:image/svg+xml;base64,${btoa(arrowSvg)}`
-
- const icon = L.icon({
- iconUrl: svgUrl,
- iconSize: [40, 40],
- iconAnchor: [20, 20]
- })
-
- const marker = L.marker([current.lat, current.lon], {
- icon,
- interactive: false,
- // 회전 각도 적용
- rotationAngle: current.direction
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- } as any)
-
- // CSS로 회전 적용
- marker.on('add', () => {
- const element = marker.getElement()
- if (element) {
- element.style.transform += ` rotate(${current.direction}deg)`
- element.style.opacity = opacity.toString()
- }
- })
-
- marker.addTo(map)
- markers.push(marker)
- })
-
- // Cleanup
- return () => {
- markers.forEach((marker) => marker.remove())
- }
- }, [map, visible, opacity])
+ return [
+ new ScatterplotLayer({
+ id: 'ocean-current-layer',
+ data,
+ getPosition: (d) => d.position,
+ getRadius: (d) => d.radius,
+ getFillColor: (d) => d.fillColor,
+ getLineColor: (d) => d.lineColor,
+ getLineWidth: 1,
+ stroked: true,
+ radiusUnits: 'meters',
+ pickable: false,
+ updateTriggers: {
+ getFillColor: [opacity],
+ getLineColor: [opacity],
+ },
+ }) as unknown as Layer,
+ ]
+ }, [visible, opacity])
+}
+/**
+ * OceanCurrentLayer — React 컴포넌트 (null 반환, layers는 useOceanCurrentLayers로 분리)
+ *
+ * WeatherView에서 deck.gl layers 배열에 useOceanCurrentLayers() 결과를 주입하여 사용한다.
+ * 이 컴포넌트는 이전 Leaflet 방식과의 호환성을 위해 유지하되 실제 렌더링은 하지 않는다.
+ */
+export function OceanCurrentLayer(props: OceanCurrentLayerProps) {
+ // visible 상태 변화에 따른 side-effect 없음 — 렌더링은 useOceanCurrentLayers 훅이 담당
+ void props
return null
}
diff --git a/frontend/src/tabs/weather/components/OceanForecastOverlay.tsx b/frontend/src/tabs/weather/components/OceanForecastOverlay.tsx
index c4a7585..c521d5f 100755
--- a/frontend/src/tabs/weather/components/OceanForecastOverlay.tsx
+++ b/frontend/src/tabs/weather/components/OceanForecastOverlay.tsx
@@ -1,6 +1,5 @@
-import { ImageOverlay, useMap } from 'react-leaflet'
-import { LatLngBounds } from 'leaflet'
import { useEffect, useState } from 'react'
+import { Source, Layer } from '@vis.gl/react-maplibre'
import type { OceanForecastData } from '../services/khoaApi'
interface OceanForecastOverlayProps {
@@ -9,48 +8,62 @@ interface OceanForecastOverlayProps {
visible?: boolean
}
-// 한국 해역 범위 (대략적인 경계)
-const KOREA_BOUNDS = new LatLngBounds(
- [33.0, 124.5], // 남서쪽 (제주 남쪽)
- [38.5, 132.0] // 북동쪽 (동해 북쪽)
-)
+// 한국 해역 범위 (MapLibre image source용 좌표 배열)
+// [left, bottom, right, top] → MapLibre coordinates 순서: [sw, nw, ne, se]
+// [lon, lat] 순서
+const KOREA_IMAGE_COORDINATES: [[number, number], [number, number], [number, number], [number, number]] = [
+ [124.5, 33.0], // 남서 (제주 남쪽)
+ [124.5, 38.5], // 북서
+ [132.0, 38.5], // 북동 (동해 북쪽)
+ [132.0, 33.0], // 남동
+]
+/**
+ * OceanForecastOverlay
+ *
+ * 기존: react-leaflet ImageOverlay + LatLngBounds
+ * 전환: @vis.gl/react-maplibre Source(type=image) + Layer(type=raster)
+ *
+ * MapLibre image source는 Map 컴포넌트 자식으로 직접 렌더링 가능
+ */
export function OceanForecastOverlay({
forecast,
opacity = 0.6,
- visible = true
+ visible = true,
}: OceanForecastOverlayProps) {
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- const map = useMap()
- const [imageLoaded, setImageLoaded] = useState(false)
+ const [loadedUrl, setLoadedUrl] = useState
(null)
useEffect(() => {
- if (forecast?.filePath) {
- // 이미지 미리 로드
- const img = new Image()
- img.onload = () => setImageLoaded(true)
- img.onerror = () => setImageLoaded(false)
- img.src = forecast.filePath
- } else {
- // eslint-disable-next-line react-hooks/set-state-in-effect
- setImageLoaded(false)
- }
+ if (!forecast?.filePath) return
+ let cancelled = false
+ const img = new Image()
+ img.onload = () => { if (!cancelled) setLoadedUrl(forecast.filePath) }
+ img.onerror = () => { if (!cancelled) setLoadedUrl(null) }
+ img.src = forecast.filePath
+ return () => { cancelled = true }
}, [forecast?.filePath])
+ const imageLoaded = !!loadedUrl && loadedUrl === forecast?.filePath
+
if (!visible || !forecast || !imageLoaded) {
return null
}
return (
- console.log('해황예보도 이미지 로드 완료'),
- error: () => console.error('해황예보도 이미지 로드 실패')
- }}
- />
+ coordinates={KOREA_IMAGE_COORDINATES}
+ >
+ (null)
-
- useEffect(() => {
- if (!visible) {
- if (layerRef.current) {
- map.removeLayer(layerRef.current)
- layerRef.current = null
- }
- return
- }
-
- const temperatureData = generateTemperatureData()
- const layer = new TemperatureCanvasLayer(temperatureData, opacity)
- layer.addTo(map)
- layerRef.current = layer
-
- return () => {
- if (layerRef.current) {
- map.removeLayer(layerRef.current)
- layerRef.current = null
- }
- }
- }, [map, visible, opacity])
-
+/**
+ * WaterTemperatureLayer — React 컴포넌트 (null 반환)
+ *
+ * WeatherView에서 useWaterTemperatureLayers()의 결과를 DeckGLOverlay layers에 주입한다.
+ * 이 컴포넌트는 이전 Leaflet 방식과의 호환성을 위해 시그니처를 유지한다.
+ */
+export function WaterTemperatureLayer() {
return null
}
diff --git a/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx b/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx
index fccb56e..dc94c38 100755
--- a/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx
+++ b/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx
@@ -1,5 +1,8 @@
-import { Circle, Marker } from 'react-leaflet'
-import { DivIcon } from 'leaflet'
+import { useMemo } from 'react'
+import { Marker } from '@vis.gl/react-maplibre'
+import { ScatterplotLayer } from '@deck.gl/layers'
+import type { Layer } from '@deck.gl/core'
+import { hexToRgba } from '@common/components/map/mapUtils'
interface WeatherStation {
id: string
@@ -19,6 +22,8 @@ interface WeatherStation {
current: number
feelsLike: number
}
+ pressure: number
+ visibility: number
}
interface WeatherMapOverlayProps {
@@ -28,244 +33,350 @@ interface WeatherMapOverlayProps {
selectedStationId: string | null
}
-// Create wind arrow icon
-const createWindArrowIcon = (speed: number, direction: number, isSelected: boolean) => {
- const size = Math.min(40 + speed * 2, 80)
- const color = isSelected ? '#06b6d4' : speed > 10 ? '#ef4444' : speed > 7 ? '#f59e0b' : '#3b82f6'
-
- return new DivIcon({
- html: `
-
- `,
- className: 'wind-arrow-icon',
- iconSize: [size, size],
- iconAnchor: [size / 2, size / 2]
- })
+// 풍속에 따른 hex 색상 반환
+function getWindHexColor(speed: number, isSelected: boolean): string {
+ if (isSelected) return '#06b6d4'
+ if (speed > 10) return '#ef4444'
+ if (speed > 7) return '#f59e0b'
+ return '#3b82f6'
}
-// Create weather data label icon (enhanced style similar to KHOA)
-const createWeatherLabelIcon = (station: WeatherStation, isSelected: boolean) => {
- const boxBg = isSelected ? 'rgba(6, 182, 212, 0.85)' : 'rgba(255, 255, 255, 0.1)'
- const boxBorder = isSelected ? '#06b6d4' : 'rgba(255, 255, 255, 0.3)'
- const boxShadow = '0 2px 8px rgba(0,0,0,0.3)'
-
- return new DivIcon({
- html: `
-
-
-
${station.name}
-
-
-
-
🌡️
-
- ${station.temperature.current.toFixed(1)}
- °C
-
-
-
-
-
-
🌊
-
- ${station.wave.height.toFixed(1)}
- m
-
-
-
-
-
-
💨
-
- ${station.wind.speed.toFixed(1)}
- m/s
-
-
-
onStationClick(station)
- }}
- />
+ longitude={station.location.lon}
+ latitude={station.location.lat}
+ anchor="center"
+ onClick={() => onStationClick(station)}
+ >
+
+
)
})}
- {/* Weather Data Labels */}
+ {/* 기상 데이터 라벨 — MapLibre Marker */}
{enabledLayers.has('labels') &&
stations.map((station) => {
const isSelected = selectedStationId === station.id
+ const boxBg = isSelected ? 'rgba(6, 182, 212, 0.85)' : 'rgba(255, 255, 255, 0.1)'
+ const boxBorder = isSelected ? '#06b6d4' : 'rgba(255, 255, 255, 0.3)'
+ const textColor = isSelected ? '#000' : '#fff'
+
return (
onStationClick(station)
- }}
- />
- )
- })}
+ longitude={station.location.lon}
+ latitude={station.location.lat}
+ anchor="center"
+ onClick={() => onStationClick(station)}
+ >
+
+ {/* 관측소명 */}
+
+ {station.name}
+
- {/* Wave Height Circles */}
- {enabledLayers.has('waves') &&
- stations.map((station) => {
- // Color based on wave height
- const waveColor =
- station.wave.height > 2.5
- ? '#ef4444'
- : station.wave.height > 1.5
- ? '#f59e0b'
- : '#3b82f6'
+ {/* 수온 */}
+
+
+ 🌡️
+
+
+
+ {station.temperature.current.toFixed(1)}
+
+
+ °C
+
+
+
- const radius = station.wave.height * 15000 // Scale for visualization
+ {/* 파고 */}
+
+
+ 🌊
+
+
+
+ {station.wave.height.toFixed(1)}
+
+
+ m
+
+
+
- return (
-
onStationClick(station)
- }}
- />
- )
- })}
-
- {/* Temperature Circles */}
- {enabledLayers.has('temperature') &&
- stations.map((station) => {
- // Color based on temperature
- const tempColor =
- station.temperature.current > 8
- ? '#ef4444'
- : station.temperature.current > 6
- ? '#f59e0b'
- : '#3b82f6'
-
- const radius = 10000 // Fixed size for temp
-
- return (
- onStationClick(station)
- }}
- />
+ {/* 풍속 */}
+
+
+ 💨
+
+
+
+ {station.wind.speed.toFixed(1)}
+
+
+ m/s
+
+
+
)
})}
)
}
+
+/**
+ * WeatherMapOverlay에 대응하는 deck.gl 레이어 생성 훅
+ * WeatherView의 DeckGLOverlay layers 배열에 spread하여 사용
+ */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useWeatherDeckLayers(
+ stations: WeatherStation[],
+ enabledLayers: Set,
+ selectedStationId: string | null,
+ onStationClick: (station: WeatherStation) => void
+): Layer[] {
+ return useMemo(() => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const result: Layer[] = []
+
+ // 파고 분포 ScatterplotLayer (Circle 대체, 반경 = 파고 * 15km)
+ if (enabledLayers.has('waves')) {
+ const waveData = stations.map((s) => ({
+ position: [s.location.lon, s.location.lat] as [number, number],
+ radius: s.wave.height * 15000,
+ fillColor: hexToRgba(getWaveHexColor(s.wave.height), 38), // fillOpacity 0.15
+ lineColor: hexToRgba(getWaveHexColor(s.wave.height), 153), // opacity 0.6
+ station: s,
+ }))
+
+ result.push(
+ new ScatterplotLayer({
+ id: 'weather-wave-circles',
+ data: waveData,
+ getPosition: (d) => d.position,
+ getRadius: (d) => d.radius,
+ getFillColor: (d) => d.fillColor,
+ getLineColor: (d) => d.lineColor,
+ getLineWidth: 2,
+ stroked: true,
+ radiusUnits: 'meters',
+ pickable: true,
+ onClick: (info) => {
+ if (info.object) onStationClick(info.object.station)
+ },
+ }) as unknown as Layer
+ )
+ }
+
+ // 수온 분포 ScatterplotLayer (Circle 대체, 고정 반경 10km)
+ if (enabledLayers.has('temperature')) {
+ const tempData = stations.map((s) => ({
+ position: [s.location.lon, s.location.lat] as [number, number],
+ fillColor: hexToRgba(getTempHexColor(s.temperature.current), 51), // fillOpacity 0.2
+ lineColor: hexToRgba(getTempHexColor(s.temperature.current), 128), // opacity 0.5
+ station: s,
+ }))
+
+ result.push(
+ new ScatterplotLayer({
+ id: 'weather-temp-circles',
+ data: tempData,
+ getPosition: (d) => d.position,
+ getRadius: 10000,
+ getFillColor: (d) => d.fillColor,
+ getLineColor: (d) => d.lineColor,
+ getLineWidth: 1,
+ stroked: true,
+ radiusUnits: 'meters',
+ pickable: true,
+ onClick: (info) => {
+ if (info.object) onStationClick(info.object.station)
+ },
+ updateTriggers: {
+ getFillColor: [selectedStationId],
+ getLineColor: [selectedStationId],
+ },
+ }) as unknown as Layer
+ )
+ }
+
+ return result
+ }, [stations, enabledLayers, selectedStationId, onStationClick])
+}
diff --git a/frontend/src/tabs/weather/components/WeatherView.tsx b/frontend/src/tabs/weather/components/WeatherView.tsx
index c9b8339..f39ced6 100755
--- a/frontend/src/tabs/weather/components/WeatherView.tsx
+++ b/frontend/src/tabs/weather/components/WeatherView.tsx
@@ -1,12 +1,14 @@
-import { useState, useEffect } from 'react'
-import { MapContainer, TileLayer, useMapEvents } from 'react-leaflet'
-import type { LatLngExpression } from 'leaflet'
-import 'leaflet/dist/leaflet.css'
+import { useState, useMemo, useCallback } from 'react'
+import { Map, useControl, useMap } from '@vis.gl/react-maplibre'
+import { MapboxOverlay } from '@deck.gl/mapbox'
+import type { Layer } from '@deck.gl/core'
+import type { StyleSpecification, MapLayerMouseEvent } from 'maplibre-gl'
+import 'maplibre-gl/dist/maplibre-gl.css'
import { WeatherRightPanel } from './WeatherRightPanel'
-import { WeatherMapOverlay } from './WeatherMapOverlay'
+import { WeatherMapOverlay, useWeatherDeckLayers } from './WeatherMapOverlay'
import { OceanForecastOverlay } from './OceanForecastOverlay'
-import { OceanCurrentLayer } from './OceanCurrentLayer'
-import { WaterTemperatureLayer } from './WaterTemperatureLayer'
+import { useOceanCurrentLayers } from './OceanCurrentLayer'
+import { useWaterTemperatureLayers } from './WaterTemperatureLayer'
import { WindParticleLayer } from './WindParticleLayer'
import { useWeatherData } from '../hooks/useWeatherData'
import { useOceanForecast } from '../hooks/useOceanForecast'
@@ -43,8 +45,8 @@ interface WeatherForecast {
windSpeed: number
}
-// Base weather station locations (weather data will be fetched from API)
-const baseStations = [
+// Base weather station locations
+const BASE_STATIONS = [
{ id: 'incheon', name: '인천', location: { lat: 37.45, lon: 126.43 } },
{ id: 'ulsan', name: '울산', location: { lat: 35.52, lon: 129.38 } },
{ id: 'yeosu', name: '여수', location: { lat: 34.74, lon: 127.75 } },
@@ -54,102 +56,235 @@ const baseStations = [
{ id: 'gunsan', name: '군산', location: { lat: 35.97, lon: 126.7 } },
{ id: 'sokcho', name: '속초', location: { lat: 38.21, lon: 128.59 } },
{ id: 'tongyeong', name: '통영', location: { lat: 34.83, lon: 128.43 } },
- { id: 'donghae', name: '동해', location: { lat: 37.52, lon: 129.14 } }
+ { id: 'donghae', name: '동해', location: { lat: 37.52, lon: 129.14 } },
]
// Generate forecast data based on time offset
const generateForecast = (timeOffset: TimeOffset): WeatherForecast[] => {
const baseHour = parseInt(timeOffset)
const forecasts: WeatherForecast[] = []
+ const icons = ['☀️', '⛅', '☁️', '🌦️', '🌧️']
for (let i = 0; i < 5; i++) {
const hour = baseHour + i * 3
- const icons = ['☀️', '⛅', '☁️', '🌦️', '🌧️']
forecasts.push({
time: `+${hour}시`,
hour: `${hour}시`,
icon: icons[i % icons.length],
temperature: Math.floor(Math.random() * 5) + 5,
- windSpeed: Math.floor(Math.random() * 5) + 6
+ windSpeed: Math.floor(Math.random() * 5) + 6,
})
}
-
return forecasts
}
-// Map click handler component
-function MapClickHandler({ onMapClick }: { onMapClick: (lat: number, lon: number) => void }) {
- useMapEvents({
- click(e) {
- onMapClick(e.latlng.lat, e.latlng.lng)
- }
- })
+// CartoDB Dark Matter 스타일 (기존 WeatherView와 동일)
+const WEATHER_MAP_STYLE: StyleSpecification = {
+ version: 8,
+ sources: {
+ 'carto-dark': {
+ type: 'raster',
+ tiles: [
+ 'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
+ 'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
+ 'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
+ ],
+ tileSize: 256,
+ attribution:
+ '© OpenStreetMap © CARTO ',
+ },
+ },
+ layers: [
+ {
+ id: 'carto-dark-layer',
+ type: 'raster',
+ source: 'carto-dark',
+ minzoom: 0,
+ maxzoom: 22,
+ },
+ ],
+}
+
+// 한국 해역 중심 좌표 (한반도 중앙)
+const WEATHER_MAP_CENTER: [number, number] = [127.8, 36.5] // [lng, lat]
+const WEATHER_MAP_ZOOM = 7
+
+// deck.gl 오버레이 컴포넌트 (MapLibre 컨트롤로 등록)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function DeckGLOverlay({ layers }: { layers: Layer[] }) {
+ const overlay = useControl(() => new MapboxOverlay({ interleaved: true }))
+ overlay.setProps({ layers })
return null
}
-export function WeatherView() {
- // Fetch real-time weather data from API
- const { weatherStations, loading, error, lastUpdate } = useWeatherData(baseStations)
+// 줌 컨트롤
+function WeatherMapControls() {
+ const { current: map } = useMap()
+
+ return (
+
+
+ map?.zoomIn()}
+ className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-border rounded-sm text-text-2 flex items-center justify-center hover:bg-bg-hover hover:text-text-1 transition-all text-base"
+ >
+ +
+
+ map?.zoomOut()}
+ className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-border rounded-sm text-text-2 flex items-center justify-center hover:bg-bg-hover hover:text-text-1 transition-all text-base"
+ >
+ −
+
+
+ map?.flyTo({ center: WEATHER_MAP_CENTER, zoom: WEATHER_MAP_ZOOM, duration: 1000 })
+ }
+ className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-border rounded-sm text-text-2 flex items-center justify-center hover:text-text-1 transition-all text-sm"
+ >
+ 🎯
+
+
+
+ selectedStationId: string | null
+ oceanForecastOpacity: number
+ selectedForecast: ReturnType['selectedForecast']
+ onStationClick: (station: WeatherStation) => void
+}
+
+function WeatherMapInner({
+ weatherStations,
+ enabledLayers,
+ selectedStationId,
+ oceanForecastOpacity,
+ selectedForecast,
+ onStationClick,
+}: WeatherMapInnerProps) {
+ // deck.gl layers 조합
+ const weatherDeckLayers = useWeatherDeckLayers(
+ weatherStations,
+ enabledLayers,
+ selectedStationId,
+ onStationClick
+ )
+ const oceanCurrentLayers = useOceanCurrentLayers({
+ visible: enabledLayers.has('oceanCurrent'),
+ opacity: 0.7,
+ })
+ const waterTempLayers = useWaterTemperatureLayers({
+ visible: enabledLayers.has('waterTemperature'),
+ opacity: 0.5,
+ })
+
+ const deckLayers = useMemo(
+ () => [...oceanCurrentLayers, ...waterTempLayers, ...weatherDeckLayers],
+ [oceanCurrentLayers, waterTempLayers, weatherDeckLayers]
+ )
+
+ return (
+ <>
+ {/* deck.gl 오버레이 */}
+ ('0')
- const [selectedStation, setSelectedStation] = useState(null)
+ const [selectedStationRaw, setSelectedStation] = useState(null)
const [selectedLocation, setSelectedLocation] = useState<{ lat: number; lon: number } | null>(
null
)
- const [enabledLayers, setEnabledLayers] = useState>(
- new Set(['wind', 'labels'])
- )
+ const [enabledLayers, setEnabledLayers] = useState>(new Set(['wind', 'labels']))
const [oceanForecastOpacity, setOceanForecastOpacity] = useState(0.6)
- // Set initial selected station when data loads
- useEffect(() => {
- if (weatherStations.length > 0 && !selectedStation) {
- // eslint-disable-next-line react-hooks/set-state-in-effect
- setSelectedStation(weatherStations[0])
- }
- }, [weatherStations, selectedStation])
+ // 첫 관측소 자동 선택 (파생 값)
+ const selectedStation = selectedStationRaw ?? weatherStations[0] ?? null
- const mapCenter: LatLngExpression = [36.5, 127.8]
+ const handleStationClick = useCallback(
+ (station: WeatherStation) => {
+ setSelectedStation(station)
+ setSelectedLocation(null)
+ },
+ []
+ )
- const handleStationClick = (station: WeatherStation) => {
- setSelectedStation(station)
- setSelectedLocation(null)
- }
+ const handleMapClick = useCallback(
+ (e: MapLayerMouseEvent) => {
+ const { lat, lng } = e.lngLat
+ if (weatherStations.length === 0) return
- const handleMapClick = (lat: number, lon: number) => {
- // Find nearest station
- const nearestStation = weatherStations.reduce((nearest, station) => {
- const distance = Math.sqrt(
- Math.pow(station.location.lat - lat, 2) + Math.pow(station.location.lon - lon, 2)
- )
- const nearestDistance = Math.sqrt(
- Math.pow(nearest.location.lat - lat, 2) + Math.pow(nearest.location.lon - lon, 2)
- )
- return distance < nearestDistance ? station : nearest
- }, weatherStations[0])
+ // 가장 가까운 관측소 선택
+ const nearestStation = weatherStations.reduce((nearest, station) => {
+ const distance = Math.sqrt(
+ Math.pow(station.location.lat - lat, 2) + Math.pow(station.location.lon - lng, 2)
+ )
+ const nearestDistance = Math.sqrt(
+ Math.pow(nearest.location.lat - lat, 2) + Math.pow(nearest.location.lon - lng, 2)
+ )
+ return distance < nearestDistance ? station : nearest
+ }, weatherStations[0])
- setSelectedStation(nearestStation)
- setSelectedLocation({ lat, lon })
- }
+ setSelectedStation(nearestStation)
+ setSelectedLocation({ lat, lon: lng })
+ },
+ [weatherStations]
+ )
- const toggleLayer = (layer: string) => {
- const newLayers = new Set(enabledLayers)
- if (newLayers.has(layer)) {
- newLayers.delete(layer)
- } else {
- newLayers.add(layer)
- }
- setEnabledLayers(newLayers)
- }
+ const toggleLayer = useCallback((layer: string) => {
+ setEnabledLayers((prev) => {
+ const next = new Set(prev)
+ if (next.has(layer)) {
+ next.delete(layer)
+ } else {
+ next.add(layer)
+ }
+ return next
+ })
+ }, [])
const weatherData = selectedStation
? {
@@ -159,14 +294,14 @@ export function WeatherView() {
location: selectedLocation || selectedStation.location,
currentTime: new Date().toLocaleTimeString('ko-KR', {
hour: '2-digit',
- minute: '2-digit'
+ minute: '2-digit',
}),
wind: selectedStation.wind,
wave: selectedStation.wave,
temperature: selectedStation.temperature,
pressure: selectedStation.pressure,
visibility: selectedStation.visibility,
- forecast: generateForecast(timeOffset)
+ forecast: generateForecast(timeOffset),
}
: null
@@ -177,62 +312,33 @@ export function WeatherView() {
{/* Tab Navigation */}
-
setTimeOffset('0')}
- className={`px-3 py-2 text-xs font-semibold rounded transition-all ${
- timeOffset === '0'
- ? 'bg-primary-cyan text-bg-0'
- : 'bg-bg-3 border border-border text-text-2 hover:bg-bg-hover'
- }`}
- >
- 현재
-
-
setTimeOffset('3')}
- className={`px-3 py-2 text-xs font-semibold rounded transition-all ${
- timeOffset === '3'
- ? 'bg-primary-cyan text-bg-0'
- : 'bg-bg-3 border border-border text-text-2 hover:bg-bg-hover'
- }`}
- >
- +3시간
-
-
setTimeOffset('6')}
- className={`px-3 py-2 text-xs font-semibold rounded transition-all ${
- timeOffset === '6'
- ? 'bg-primary-cyan text-bg-0'
- : 'bg-bg-3 border border-border text-text-2 hover:bg-bg-hover'
- }`}
- >
- +6시간
-
-
setTimeOffset('9')}
- className={`px-3 py-2 text-xs font-semibold rounded transition-all ${
- timeOffset === '9'
- ? 'bg-primary-cyan text-bg-0'
- : 'bg-bg-3 border border-border text-text-2 hover:bg-bg-hover'
- }`}
- >
- +9시간
-
+ {(['0', '3', '6', '9'] as TimeOffset[]).map((offset) => (
+
setTimeOffset(offset)}
+ className={`px-3 py-2 text-xs font-semibold rounded transition-all ${
+ timeOffset === offset
+ ? 'bg-primary-cyan text-bg-0'
+ : 'bg-bg-3 border border-border text-text-2 hover:bg-bg-hover'
+ }`}
+ >
+ {offset === '0' ? '현재' : `+${offset}시간`}
+
+ ))}
{lastUpdate
? `마지막 업데이트: ${lastUpdate.toLocaleTimeString('ko-KR', {
hour: '2-digit',
- minute: '2-digit'
+ minute: '2-digit',
})}`
: '데이터 로딩 중...'}
{loading && (
)}
- {error && (
-
⚠️ {error}
- )}
+ {error &&
⚠️ {error} }
@@ -247,52 +353,29 @@ export function WeatherView() {
{/* Map */}
-
-
-
- {/* Layer Controls */}
-
+ {/* 레이어 컨트롤 */}
+
기상 레이어
@@ -371,7 +454,6 @@ export function WeatherView() {
🌊 해황예보도
- {/* 투명도 조절 슬라이더 */}
{enabledLayers.has('oceanForecast') && (
@@ -381,13 +463,16 @@ export function WeatherView() {
min="0"
max="100"
value={oceanForecastOpacity * 100}
- onChange={(e) => setOceanForecastOpacity(Number(e.target.value) / 100)}
+ onChange={(e) =>
+ setOceanForecastOpacity(Number(e.target.value) / 100)
+ }
className="flex-1 h-1 bg-bg-3 rounded-lg appearance-none cursor-pointer"
/>
- {Math.round(oceanForecastOpacity * 100)}%
+
+ {Math.round(oceanForecastOpacity * 100)}%
+
- {/* 예보 시간 선택 */}
{availableTimes.length > 0 && (
예보 시간:
@@ -397,7 +482,8 @@ export function WeatherView() {
key={`${time.day}-${time.hour}`}
onClick={() => selectForecast(time.day, time.hour)}
className={`w-full px-2 py-1 text-xs rounded transition-colors ${
- selectedForecast?.day === time.day && selectedForecast?.hour === time.hour
+ selectedForecast?.day === time.day &&
+ selectedForecast?.hour === time.hour
? 'bg-primary-cyan text-bg-0 font-semibold'
: 'bg-bg-2 text-text-3 hover:bg-bg-3'
}`}
@@ -409,15 +495,13 @@ export function WeatherView() {
)}
- {oceanLoading && (
-
로딩 중...
- )}
- {oceanError && (
-
오류 발생
- )}
+ {oceanLoading &&
로딩 중...
}
+ {oceanError &&
오류 발생
}
{selectedForecast && (
- 현재: {selectedForecast.name} • {selectedForecast.day.slice(4, 6)}/{selectedForecast.day.slice(6, 8)} {selectedForecast.hour}:00
+ 현재: {selectedForecast.name} •{' '}
+ {selectedForecast.day.slice(4, 6)}/{selectedForecast.day.slice(6, 8)}{' '}
+ {selectedForecast.hour}:00
)}
@@ -426,41 +510,50 @@ export function WeatherView() {
- {/* Legend */}
-
+ {/* 범례 */}
+
기상 범례
- {/* Wind Speed - Windy style */}
+ {/* 바람 (Windy 스타일) */}
바람 (m/s)
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
3 5 7 10 13 16 20+
+
+ 3
+ 5
+ 7
+ 10
+ 13
+ 16
+ 20+
- {/* Wave Height */}
+ {/* 파고 */}
@@ -472,7 +565,7 @@ export function WeatherView() {
- {/* Right Panel - Weather Details */}
+ {/* Right Panel */}
)
diff --git a/frontend/src/tabs/weather/components/WindParticleLayer.tsx b/frontend/src/tabs/weather/components/WindParticleLayer.tsx
index 226fae8..94a5ce3 100755
--- a/frontend/src/tabs/weather/components/WindParticleLayer.tsx
+++ b/frontend/src/tabs/weather/components/WindParticleLayer.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useRef } from 'react'
-import { useMap } from 'react-leaflet'
-import L from 'leaflet'
+import { useEffect, useRef, useCallback } from 'react'
+import { useMap } from '@vis.gl/react-maplibre'
+import type { Map as MapLibreMap } from 'maplibre-gl'
interface WindPoint {
lat: number
@@ -26,14 +26,14 @@ interface WindParticleLayerProps {
// 풍속 기반 색상 (Windy.com 스타일)
function getWindColor(speed: number): string {
- if (speed < 3) return 'rgba(98, 113, 183, 0.8)' // 연한 파랑 (미풍)
- if (speed < 5) return 'rgba(57, 160, 246, 0.8)' // 파랑
- if (speed < 7) return 'rgba(80, 213, 145, 0.8)' // 초록
- if (speed < 10) return 'rgba(165, 226, 63, 0.8)' // 연두
- if (speed < 13) return 'rgba(250, 226, 30, 0.8)' // 노랑
- if (speed < 16) return 'rgba(250, 170, 25, 0.8)' // 주황
- if (speed < 20) return 'rgba(240, 84, 33, 0.8)' // 빨강
- return 'rgba(180, 30, 70, 0.8)' // 진빨강 (강풍)
+ if (speed < 3) return 'rgba(98, 113, 183, 0.8)'
+ if (speed < 5) return 'rgba(57, 160, 246, 0.8)'
+ if (speed < 7) return 'rgba(80, 213, 145, 0.8)'
+ if (speed < 10) return 'rgba(165, 226, 63, 0.8)'
+ if (speed < 13) return 'rgba(250, 226, 30, 0.8)'
+ if (speed < 16) return 'rgba(250, 170, 25, 0.8)'
+ if (speed < 20) return 'rgba(240, 84, 33, 0.8)'
+ return 'rgba(180, 30, 70, 0.8)'
}
// 풍속 기반 배경 색상 (반투명 오버레이)
@@ -48,7 +48,7 @@ function getWindBgColor(speed: number): string {
return 'rgba(180, 30, 70, 0.12)'
}
-// 격자 보간으로 특정 위치의 풍속/풍향 추정
+// 격자 보간으로 특정 위치의 풍속/풍향 추정 (IDW)
function interpolateWind(
lat: number,
lon: number,
@@ -65,7 +65,6 @@ function interpolateWind(
const dist = Math.sqrt(
Math.pow(point.lat - lat, 2) + Math.pow(point.lon - lon, 2)
)
- // IDW (Inverse Distance Weighting)
const weight = 1 / Math.pow(Math.max(dist, 0.01), 2)
totalWeight += weight
weightedSpeed += point.speed * weight
@@ -76,19 +75,63 @@ function interpolateWind(
}
const speed = weightedSpeed / totalWeight
- const direction = (Math.atan2(weightedDx / totalWeight, -weightedDy / totalWeight) * 180) / Math.PI
+ const direction =
+ (Math.atan2(weightedDx / totalWeight, -weightedDy / totalWeight) * 180) / Math.PI
return { speed, direction: (direction + 360) % 360 }
}
+// MapLibre map.unproject()를 통해 픽셀 → 경위도 변환
+function containerPointToLatLng(
+ map: MapLibreMap,
+ x: number,
+ y: number
+): { lat: number; lng: number } {
+ const lngLat = map.unproject([x, y])
+ return { lat: lngLat.lat, lng: lngLat.lng }
+}
+
+const PARTICLE_COUNT = 800
+const FADE_ALPHA = 0.93
+
+/**
+ * WindParticleLayer
+ *
+ * 기존: Canvas 2D + requestAnimationFrame + map.containerPointToLatLng() (Leaflet)
+ * 전환: Canvas 2D + requestAnimationFrame + map.unproject() (MapLibre)
+ *
+ * @vis.gl/react-maplibre의 useMap()으로 MapLibre Map 인스턴스를 참조
+ * Canvas는 MapLibre 컨테이너 위에 absolute 레이어로 삽입
+ */
export function WindParticleLayer({ visible, stations }: WindParticleLayerProps) {
- const map = useMap()
+ const { current: mapRef } = useMap()
const canvasRef = useRef
(null)
const particlesRef = useRef([])
const animFrameRef = useRef(0)
+ const windPoints: WindPoint[] = stations.map((s) => ({
+ lat: s.location.lat,
+ lon: s.location.lon,
+ speed: s.wind.speed,
+ direction: s.wind.direction,
+ }))
+
+ const initParticles = useCallback((width: number, height: number) => {
+ particlesRef.current = []
+ for (let i = 0; i < PARTICLE_COUNT; i++) {
+ particlesRef.current.push({
+ x: Math.random() * width,
+ y: Math.random() * height,
+ age: Math.floor(Math.random() * 80),
+ maxAge: 60 + Math.floor(Math.random() * 40),
+ })
+ }
+ }, [])
+
useEffect(() => {
+ const map = mapRef?.getMap()
+ if (!map) return
+
if (!visible) {
- // 비활성화 시 캔버스 제거
if (canvasRef.current) {
canvasRef.current.remove()
canvasRef.current = null
@@ -97,16 +140,9 @@ export function WindParticleLayer({ visible, stations }: WindParticleLayerProps)
return
}
- // 관측소 데이터를 WindPoint로 변환
- const windPoints: WindPoint[] = stations.map(s => ({
- lat: s.location.lat,
- lon: s.location.lon,
- speed: s.wind.speed,
- direction: s.wind.direction
- }))
-
- // Canvas 생성
const container = map.getContainer()
+
+ // Canvas 생성 또는 재사용
let canvas = canvasRef.current
if (!canvas) {
canvas = document.createElement('canvas')
@@ -121,57 +157,39 @@ export function WindParticleLayer({ visible, stations }: WindParticleLayerProps)
const resize = () => {
if (!canvas) return
- const size = map.getSize()
- canvas.width = size.x
- canvas.height = size.y
+ const { clientWidth: w, clientHeight: h } = container
+ canvas.width = w
+ canvas.height = h
}
resize()
const ctx = canvas.getContext('2d')
if (!ctx) return
- // 파티클 수
- const PARTICLE_COUNT = 800
- const FADE_ALPHA = 0.93
+ initParticles(canvas.width, canvas.height)
- // 파티클 초기화
- function initParticles() {
- particlesRef.current = []
- if (!canvas) return
- for (let i = 0; i < PARTICLE_COUNT; i++) {
- particlesRef.current.push({
- x: Math.random() * canvas.width,
- y: Math.random() * canvas.height,
- age: Math.floor(Math.random() * 80),
- maxAge: 60 + Math.floor(Math.random() * 40)
- })
- }
- }
- initParticles()
+ // 오프스크린 캔버스 (트레일 효과)
+ let offCanvas: HTMLCanvasElement | null = null
+ let offCtx: CanvasRenderingContext2D | null = null
- // 배경 그라디언트 렌더링
function drawWindOverlay() {
if (!ctx || !canvas) return
const gridSize = 30
for (let x = 0; x < canvas.width; x += gridSize) {
for (let y = 0; y < canvas.height; y += gridSize) {
- const latlng = map.containerPointToLatLng(L.point(x + gridSize / 2, y + gridSize / 2))
- const wind = interpolateWind(latlng.lat, latlng.lng, windPoints)
+ const { lat, lng } = containerPointToLatLng(map!, x + gridSize / 2, y + gridSize / 2)
+ const wind = interpolateWind(lat, lng, windPoints)
ctx.fillStyle = getWindBgColor(wind.speed)
ctx.fillRect(x, y, gridSize, gridSize)
}
}
}
- // 애니메이션 루프
- let offCanvas: HTMLCanvasElement | null = null
- let offCtx: CanvasRenderingContext2D | null = null
-
function animate() {
if (!ctx || !canvas) return
- // 오프스크린 캔버스 (트레일 효과)
+ // 오프스크린 캔버스 크기 동기화
if (!offCanvas || offCanvas.width !== canvas.width || offCanvas.height !== canvas.height) {
offCanvas = document.createElement('canvas')
offCanvas.width = canvas.width
@@ -187,9 +205,9 @@ export function WindParticleLayer({ visible, stations }: WindParticleLayerProps)
offCtx.fillRect(0, 0, offCanvas.width, offCanvas.height)
offCtx.globalCompositeOperation = 'source-over'
- const bounds = map.getBounds()
+ // 현재 지도 bounds 확인
+ const bounds = map!.getBounds()
- // 파티클 업데이트 및 렌더링
for (const particle of particlesRef.current) {
particle.age++
@@ -202,17 +220,17 @@ export function WindParticleLayer({ visible, stations }: WindParticleLayerProps)
continue
}
- const latlng = map.containerPointToLatLng(L.point(particle.x, particle.y))
+ const { lat, lng } = containerPointToLatLng(map!, particle.x, particle.y)
// 화면 밖이면 리셋
- if (!bounds.contains(latlng)) {
+ if (!bounds.contains([lng, lat])) {
particle.x = Math.random() * canvas.width
particle.y = Math.random() * canvas.height
particle.age = 0
continue
}
- const wind = interpolateWind(latlng.lat, latlng.lng, windPoints)
+ const wind = interpolateWind(lat, lng, windPoints)
const rad = (wind.direction * Math.PI) / 180
const pixelSpeed = wind.speed * 0.4
@@ -244,10 +262,10 @@ export function WindParticleLayer({ visible, stations }: WindParticleLayerProps)
// 지도 이동/줌 시 리셋
const onMoveEnd = () => {
resize()
- initParticles()
- if (offCanvas) {
- offCanvas.width = canvas!.width
- offCanvas.height = canvas!.height
+ if (canvas) initParticles(canvas.width, canvas.height)
+ if (offCanvas && canvas) {
+ offCanvas.width = canvas.width
+ offCanvas.height = canvas.height
}
}
map.on('moveend', onMoveEnd)
@@ -262,7 +280,9 @@ export function WindParticleLayer({ visible, stations }: WindParticleLayerProps)
canvasRef.current = null
}
}
- }, [map, visible, stations])
+ // windPoints 배열은 렌더마다 재생성되므로 stations만 의존
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [mapRef, visible, stations, initParticles])
return null
}