ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove: 가뭄지도 EXPRS_ORDERD_LAYERS 삭제

Browse Source
This commit is contained in:
swcho
2025-09-02 11:16:59 +09:00
parent 3bbf3bae3d
commit a42be8059a
2 changed files with 37 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/(popUp-layout)/mapDrgtPopUp/drgtLegend.tsx
+36 -53
View File
@@ -4,67 +4,50 @@ 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년 빈도
'drought1', 'drought2', 'drought3',
'drought4', 'drought5', 'drought6',
];
export function DrgtLegend() {
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>
);
}
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 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>
</>
);
}
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 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>
);
}
apps/wr/app/(popUp-layout)/mapDrgtPopUp/page.tsx
+1 -2
View File
@@ -4,7 +4,7 @@ import Gis from "@common/business_components/ui/map/Gis";
import { useEffect, useRef, useState, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import { mapService } from "../../(map-layout)/service";
import { DrgtLegend, DRGT_LAYER_TYPES, EXPRS_ORDERED_LAYERS } from "./drgtLegend";
import { DrgtLegend, DRGT_LAYER_TYPES } from "./drgtLegend";
import { SearchBar } from "./searchBar";
@@ -78,7 +78,6 @@ export default function MapDrgtPopUp() {
isPlaying={isPlaying}
setIsPlaying={setIsPlaying as any}
targetLayerTypes={DRGT_LAYER_TYPES as any}
orderedLayers={EXPRS_ORDERED_LAYERS as any}
checkInterval={2500}
height={`h-[100vh]`}
droughtDates={{ startYmd: fromDate, endYmd: toDate }}