86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef, useEffect, useState } from "react";
|
|
import { Label } from "@common/components/ui/label";
|
|
|
|
export const WATER_DEPTH_LAYER_TYPES: string[] = [
|
|
'tb_ms_flood_dngr_map',
|
|
'tb_ms_sbmrg_dngr_map'
|
|
];
|
|
|
|
interface WaterDepthProps {
|
|
onClose?: () => void;
|
|
isPlaying: boolean;
|
|
setIsPlaying: (isPlaying: boolean) => void;
|
|
totalSteps?: number;
|
|
currentStep?: number;
|
|
}
|
|
|
|
export function WaterDepth({
|
|
onClose,
|
|
isPlaying,
|
|
setIsPlaying,
|
|
totalSteps = 0,
|
|
currentStep = 0,
|
|
}: WaterDepthProps) {
|
|
|
|
useEffect(() => {
|
|
if (setIsPlaying) setIsPlaying(isPlaying);
|
|
}, [isPlaying, setIsPlaying]);
|
|
|
|
const handlePlayToggle = () => {
|
|
setIsPlaying(!isPlaying);
|
|
};
|
|
|
|
// 진행률 계산 (0-100%)
|
|
const progressPercentage = totalSteps > 0 ? (currentStep / totalSteps) * 100 : 100;
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className="bg-white rounded-lg shadow-lg border border-gray-200 w-[160px] px-4 py-3">
|
|
<div className="flex items-center justify-between mx-2 my-4">
|
|
<Label className="text-3xl text-gray-900 font-bold">침수심 범례</Label>
|
|
<button type="button" className="mt-1 ml-2" onClick={handlePlayToggle}>
|
|
{isPlaying ? (
|
|
<img src="/images/map/toolbar/pause_button.png" alt="pause" className="w-6 h-6 object-contain" />
|
|
) : (
|
|
<img src="/images/map/toolbar/play_button_arrowhead.png" alt="play" className="w-6 h-6 object-contain" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="w-full bg-gray-200 rounded-full h-1">
|
|
<div
|
|
className="bg-blue-900 h-1 rounded-full transition-all duration-300 ease-in-out"
|
|
style={{ width: `${progressPercentage}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-[140px] mx-auto flex flex-col items-center">
|
|
<div className="bg-blue-900 text-white text-2xl text-center py-1 mb-2 rounded w-full">침 수 심</div>
|
|
<div className="space-y-1 w-full">
|
|
<LegendItem color="rgb(255, 255, 127)" label="0.0~0.5m 미만" /> {/* 코드: N330 */}
|
|
<LegendItem color="rgb(191, 255, 0)" label="0.5~1.0m 미만" /> {/* 코드: N331 */}
|
|
<LegendItem color="rgb(0, 255, 255)" label="1.0~2.0m 미만" /> {/* 코드: N332 */}
|
|
<LegendItem color="rgb(191, 127, 255)" label="2.0~5.0m 미만" /> {/* 코드: N333 */}
|
|
<LegendItem color="rgb(255, 0, 127)" label="5.0m 이상" /> {/* 코드: N334 */}
|
|
</div>
|
|
<div className="border-t-2 border-blue-900 mt-1 mx-auto w-full" />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function LegendItem({ color, label }: { color: string; label: string }) {
|
|
return (
|
|
<div className="flex items-center gap-2 w-full">
|
|
<span
|
|
className="inline-block w-16 h-6"
|
|
style={{ backgroundColor: color, border: "1px solid #ccc" }}
|
|
/>
|
|
<span className="text-xl text-gray-900 font-bold">{label}</span>
|
|
</div>
|
|
);
|
|
} |