htlee
a0f64e4b11
- frontend: ESLint 에러 86건 수정 (unused-vars, set-state-in-effect, static-components 등) - backend: simulation.ts req.params 타입 단언 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
57 lines
1.6 KiB
TypeScript
Executable File
57 lines
1.6 KiB
TypeScript
Executable File
import { ImageOverlay, useMap } from 'react-leaflet'
|
|
import { LatLngBounds } from 'leaflet'
|
|
import { useEffect, useState } from 'react'
|
|
import type { OceanForecastData } from '../../services/khoaApi'
|
|
|
|
interface OceanForecastOverlayProps {
|
|
forecast: OceanForecastData | null
|
|
opacity?: number
|
|
visible?: boolean
|
|
}
|
|
|
|
// 한국 해역 범위 (대략적인 경계)
|
|
const KOREA_BOUNDS = new LatLngBounds(
|
|
[33.0, 124.5], // 남서쪽 (제주 남쪽)
|
|
[38.5, 132.0] // 북동쪽 (동해 북쪽)
|
|
)
|
|
|
|
export function OceanForecastOverlay({
|
|
forecast,
|
|
opacity = 0.6,
|
|
visible = true
|
|
}: OceanForecastOverlayProps) {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const map = useMap()
|
|
const [imageLoaded, setImageLoaded] = useState(false)
|
|
|
|
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)
|
|
}
|
|
}, [forecast?.filePath])
|
|
|
|
if (!visible || !forecast || !imageLoaded) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<ImageOverlay
|
|
url={forecast.filePath}
|
|
bounds={KOREA_BOUNDS}
|
|
opacity={opacity}
|
|
zIndex={400} // 지도 위에 표시되지만 마커보다는 아래
|
|
eventHandlers={{
|
|
load: () => console.log('해황예보도 이미지 로드 완료'),
|
|
error: () => console.error('해황예보도 이미지 로드 실패')
|
|
}}
|
|
/>
|
|
)
|
|
}
|