leedano
3743027ce7
## Summary - 기상 맵 컨트롤 컴포넌트 추가 및 KHOA API 연동 개선 - KHOA API 엔드포인트 교체 및 해양예측 오버레이 Canvas 렌더링 전환 ## 변경 파일 - OceanForecastOverlay.tsx - WeatherMapOverlay.tsx - WeatherView.tsx - useOceanForecast.ts - khoaApi.ts - vite.config.ts ## Test plan - [ ] 기상정보 -> 기상 레이어 -> 해황 예보도 클릭 -> 이미지 렌더링 확인 - [ ] 기상정보 -> 기상 레이어 -> 백터 바람 클릭 -> 백터 이미지 렌더링 확인 Co-authored-by: Nan Kyung Lee <nankyunglee@Nanui-Macmini.local> Reviewed-on: #78 Co-authored-by: leedano <dnlee@gcsc.co.kr> Co-committed-by: leedano <dnlee@gcsc.co.kr>
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { useMap } from '@vis.gl/react-maplibre'
|
||
|
||
interface WeatherMapControlsProps {
|
||
center: [number, number]
|
||
zoom: number
|
||
}
|
||
|
||
export function WeatherMapControls({ center, zoom }: WeatherMapControlsProps) {
|
||
const { current: map } = useMap()
|
||
|
||
const buttons = [
|
||
{
|
||
label: '+',
|
||
tooltip: '확대',
|
||
onClick: () => map?.zoomIn(),
|
||
},
|
||
{
|
||
label: '−',
|
||
tooltip: '축소',
|
||
onClick: () => map?.zoomOut(),
|
||
},
|
||
{
|
||
label: '🎯',
|
||
tooltip: '한국 해역 초기화',
|
||
onClick: () => map?.flyTo({ center, zoom, duration: 1000 }),
|
||
},
|
||
]
|
||
|
||
return (
|
||
<div className="absolute top-4 right-4 z-10">
|
||
<div className="flex flex-col gap-2">
|
||
{buttons.map(({ label, tooltip, onClick }) => (
|
||
<div key={tooltip} className="relative group">
|
||
<button
|
||
onClick={onClick}
|
||
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"
|
||
>
|
||
{label}
|
||
</button>
|
||
<div className="absolute right-full top-1/2 -translate-y-1/2 mr-2 px-2 py-1 text-xs bg-bg-0 text-text-1 border border-border rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-20">
|
||
{tooltip}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|