70 lines
2.9 KiB
TypeScript
70 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Label } from "@common/components/ui/label";
|
|
|
|
export const DRGT_LAYER_TYPES: string[] = [
|
|
// 수정 필요
|
|
'drought1',
|
|
'drought2',
|
|
'drought3',
|
|
'drought4',
|
|
'drought5',
|
|
'drought6',
|
|
];
|
|
// 지정된 순서에 따른 lyr_sn 배열
|
|
export const EXPRS_ORDERED_LAYERS: string[] = [
|
|
// 수정 필요
|
|
'106', // 침수위험지도(tb_ms_sbmrg_dngr_map) - 30년 빈도
|
|
'107', // 침수위험지도(tb_ms_sbmrg_dngr_map) - 50년 빈도
|
|
'108', // 침수위험지도(tb_ms_sbmrg_dngr_map) - 80년 빈도
|
|
'109', // 침수위험지도(tb_ms_sbmrg_dngr_map) - 100년 빈도
|
|
'110', // 도시침수지도(tb_ms_flood_dngr_map) - 30년 빈도
|
|
'111', // 도시침수지도(tb_ms_flood_dngr_map) - 50년 빈도
|
|
];
|
|
|
|
export function DrgtLegend() {
|
|
|
|
|
|
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>
|
|
</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" />
|
|
</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">
|
|
<Label className="text-xl text-gray-900 font-bold">관심</Label>
|
|
<LegendItem color="rgba(222,235,247, 1)" label="1회 미만" /> {/* 관심 - 1회 미만 */}
|
|
<LegendItem color="rgba(46, 117, 182, 1)" label="1회 이상" /> {/* 관심 - 1회 이상 */}
|
|
<Label className="text-xl text-gray-900 font-bold">주의</Label>
|
|
<LegendItem color="rgba(255, 242, 204, 1)" label="1회 미만" /> {/* 주의 - 1회 미만 */}
|
|
<LegendItem color="rgba(255, 217, 102, 1)" label="1회 이상" /> {/* 주의 - 1회 이상 */}
|
|
<Label className="text-xl text-gray-900 font-bold">관심 + 주의</Label>
|
|
<LegendItem color="rgba(251, 229, 214, 1)" label="1회 미만" /> {/* 관심+주의 - 1회 미만 */}
|
|
<LegendItem color="rgba(237, 125, 49, 1)" label="1회 이상" /> {/* 관심+주의 - 1회 이상 */}
|
|
</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>
|
|
);
|
|
} |