121 lines
4.4 KiB
TypeScript
121 lines
4.4 KiB
TypeScript
"use client";
|
||
import { getOverLayObj } from "@/components/lib/func/mapUtil";
|
||
import { Card } from "@common/business_components/ui/chart/lib/card";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import WrOverLayTable from "./WrOverLayTable/WrOverLayTable";
|
||
import WrOverLayRuse from "./WrOverLayRuse/WrOverLayRuse";
|
||
import Draggable from "react-draggable";
|
||
|
||
export default function WrOverLay({
|
||
title,
|
||
data,
|
||
code,
|
||
}: {
|
||
title: string;
|
||
data: any;
|
||
code: any;
|
||
}) {
|
||
const [newOverLayData, setNewOverLayData] = useState<Record<string, string>>(
|
||
{}
|
||
);
|
||
const [typeTitle, setTypeTitle] = useState<string>("");
|
||
const [pos, setPos] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
|
||
|
||
const [open, setOpen] = useState(true);
|
||
const bubbleLabel = title?.[0] ?? "•";
|
||
|
||
const dragRef = useRef<HTMLDivElement | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (title !== "하수재이용시설" && data) {
|
||
const overRayData = getOverLayObj(title, data, code);
|
||
setTypeTitle(overRayData?.title ?? "");
|
||
setNewOverLayData(overRayData.newObj ?? {});
|
||
}
|
||
}, [title, data]);
|
||
|
||
return (
|
||
<>
|
||
{open ? (
|
||
<Draggable
|
||
position={pos}
|
||
nodeRef={dragRef}
|
||
onDrag={(e, data) => setPos({ x: data.x, y: data.y })}
|
||
>
|
||
<div ref={dragRef}>
|
||
<Card className="w-[320px] p-0 shadow-md rounded-xl overflow-hidden border border-slate-300 relative">
|
||
{/* 헤더: 제목 바 + 우측 정렬 버튼 (절대배치 제거, 타이틀 중앙 정렬 유지) */}
|
||
<div className="bg-sky-600 text-white font-semibold py-2 text-xl">
|
||
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-2 px-2">
|
||
{/* 좌측 스페이서: 우측 버튼과 동일한 너비를 차지하도록 동일 버튼을 투명하게 복제 */}
|
||
<div className="opacity-0 pointer-events-none">
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => setPos({ x: 0, y: 0 })}
|
||
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
|
||
title="원위치"
|
||
>
|
||
↺
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setOpen(false)}
|
||
aria-label="축소"
|
||
title="축소"
|
||
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
|
||
>
|
||
–
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 중앙 타이틀 */}
|
||
<div className="text-2xl text-center truncate">
|
||
{title === "하수재이용시설" ? title: typeTitle + "(" + title + ")"}
|
||
</div>
|
||
|
||
{/* 우측 실제 버튼 영역 */}
|
||
<div className="flex gap-2 justify-end">
|
||
<button
|
||
onClick={() => setPos({ x: 0, y: 0 })}
|
||
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
|
||
title="원위치"
|
||
>
|
||
↺
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setOpen(false)}
|
||
aria-label="축소"
|
||
title="축소"
|
||
className="p-2 bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
|
||
>
|
||
–
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 본문 */}
|
||
{title === "하수재이용시설" ? (
|
||
<WrOverLayRuse overLayData={data ?? []} />
|
||
) : (
|
||
<WrOverLayTable overLayData={newOverLayData} />
|
||
)}
|
||
</Card>
|
||
</div>
|
||
</Draggable>
|
||
) : (
|
||
<button
|
||
onClick={() => setOpen(true)}
|
||
aria-label="확장"
|
||
title={title || "정보 보기"}
|
||
className="w-[30px] h-[30px] bg-white font-bold shadow flex items-center justify-center border border-slate-300"
|
||
>
|
||
{bubbleLabel}
|
||
</button>
|
||
)}
|
||
</>
|
||
);
|
||
}
|