86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { PencilRuler, Settings2 } from "lucide-react";
|
|
|
|
type Props = {
|
|
isGisEditActive: boolean;
|
|
onToggleGisEdit: () => void;
|
|
onOpenGisManagement: () => Window | null;
|
|
};
|
|
|
|
/** 기존 지도 도구와 같은 크기로 GIS 버튼의 기본·활성·키보드 포커스를 표시한다. */
|
|
const getButtonClass = (isActive: boolean) =>
|
|
`flex h-[40px] w-[40px] items-center justify-center p-0 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ${
|
|
isActive
|
|
? "bg-primary text-primary-foreground"
|
|
: "bg-background text-label hover:bg-primary hover:text-primary-foreground"
|
|
}`;
|
|
|
|
/** 분석도구 메뉴와 독립적으로 GIS 편집 모드와 관리 팝업의 진입 버튼을 제공한다. */
|
|
export default function GisToolButtons({
|
|
isGisEditActive,
|
|
onToggleGisEdit,
|
|
onOpenGisManagement,
|
|
}: Props) {
|
|
// 관리 팝업이 닫히면 버튼의 활성 표시도 해제한다.
|
|
const [isGisManagementActive, setIsGisManagementActive] = useState(false);
|
|
// 렌더링과 무관한 감지 타이머를 보관해 재클릭·화면 이탈 시 중복 실행을 방지한다.
|
|
const closeWatcherRef = useRef<number | null>(null);
|
|
|
|
useEffect(() => () => {
|
|
if (closeWatcherRef.current !== null) {
|
|
window.clearInterval(closeWatcherRef.current);
|
|
}
|
|
}, []);
|
|
|
|
/** 기존 팝업 실행 함수를 호출하고 차단·닫힘 상태를 버튼에 반영한다. */
|
|
const handleOpenGisManagement = () => {
|
|
if (closeWatcherRef.current !== null) {
|
|
window.clearInterval(closeWatcherRef.current);
|
|
closeWatcherRef.current = null;
|
|
}
|
|
const popup = onOpenGisManagement();
|
|
setIsGisManagementActive(Boolean(popup && !popup.closed));
|
|
if (!popup || popup.closed) return;
|
|
|
|
closeWatcherRef.current = window.setInterval(() => {
|
|
if (!popup.closed) return;
|
|
if (closeWatcherRef.current !== null) {
|
|
window.clearInterval(closeWatcherRef.current);
|
|
closeWatcherRef.current = null;
|
|
}
|
|
setIsGisManagementActive(false);
|
|
}, 300);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
role="group"
|
|
aria-label="GIS 도구"
|
|
className="absolute right-[16px] top-[222.67px] z-[45] flex w-[40px] flex-col overflow-hidden rounded-[3px] bg-background shadow-[0_1px_2px_rgba(60,64,67,0.3),0_1px_3px_1px_rgba(60,64,67,0.15)]"
|
|
>
|
|
<button
|
|
type="button"
|
|
title="GIS 편집"
|
|
aria-label="GIS 편집"
|
|
aria-pressed={isGisEditActive}
|
|
onClick={onToggleGisEdit}
|
|
className={`${getButtonClass(isGisEditActive)} border-b border-[#eeeeee]`}
|
|
>
|
|
<PencilRuler className="h-[20px] w-[20px]" aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
title="GIS 관리"
|
|
aria-label="GIS 관리"
|
|
aria-haspopup="dialog"
|
|
className={getButtonClass(isGisManagementActive)}
|
|
onClick={handleOpenGisManagement}
|
|
>
|
|
<Settings2 className="h-[20px] w-[20px]" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|