53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import type { WindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";
|
|
|
|
type Props = {
|
|
onOpenPopup: (popupKey: WindowPopupKey) => void;
|
|
};
|
|
|
|
const ANALYSIS_POPUP_ITEMS: Array<{ key: WindowPopupKey; label: string }> = [
|
|
{ key: "pipeAnalysisPopup", label: "관로분석" },
|
|
{ key: "floodPredictionMapPopup", label: "침수예측지도" },
|
|
{ key: "floodHistoryPopup", label: "침수발생이력" },
|
|
{ key: "gisEditPopup", label: "GIS 편집" },
|
|
{ key: "gisManagementPopup", label: "GIS 관리" },
|
|
{ key: "flowRiskPopup", label: "통수 위험" },
|
|
];
|
|
|
|
export default function AnalysisPopupMenu({ onOpenPopup }: Props) {
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
|
|
return (
|
|
<div className="absolute right-[0.35rem] top-[53%] z-[70]">
|
|
<div className="relative">
|
|
{isOpen ? (
|
|
<div className="absolute right-[21px] top-1/2 flex w-[86px] -translate-y-1/2 flex-col gap-[3px]">
|
|
{ANALYSIS_POPUP_ITEMS.map((item) => (
|
|
<button
|
|
key={item.key}
|
|
type="button"
|
|
className="min-h-[40px] rounded-md border border-primary bg-primary px-2 py-1 text-center text-[1rem] font-semibold leading-[1.2] text-white shadow transition hover:brightness-95"
|
|
onClick={() => onOpenPopup(item.key)}
|
|
>
|
|
<span className="break-keep whitespace-normal">{item.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
<button
|
|
type="button"
|
|
className="flex h-[36px] w-[18px] items-center justify-center rounded-sm border border-[#2f5c9b] bg-white text-[0.9rem] font-bold text-[#2f5c9b] shadow transition hover:bg-slate-50"
|
|
onClick={() => setIsOpen((value) => !value)}
|
|
title={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
|
|
aria-label={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
|
|
>
|
|
{isOpen ? ">" : "<"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|