98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
/**
|
|
* ➡️ 경로 : 하수관망도 메인페이지 내 침수심 범례
|
|
*
|
|
* 📄 WaterDepth Component
|
|
* 침수심 범례 컴포넌트
|
|
*
|
|
* - 침수심 레이어의 범례 표시 및 애니메이션 재생 제어
|
|
* - 진행률 바를 통한 애니메이션 상태 시각화
|
|
* - 플레이/일시정지 버튼을 통한 사용자 상호작용
|
|
* - 범례 항목별 색상과 레이블 표시
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { Label } from "@common/components/ui/label";
|
|
import { useEffect } from "react";
|
|
|
|
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>
|
|
);
|
|
} |