96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import WrOverLayTable from "../WrOverLayTable/WrOverLayTable";
|
|
import {
|
|
Button,
|
|
} from "@common/components/ui";
|
|
import { getOverLayObj } from "@/components/lib/func/mapUtil";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
|
type RuseTabData = {
|
|
data: Record<string, string>;
|
|
tabData: {
|
|
pbnstRuseFcltId: string;
|
|
ruseUtztnFcltNm: string;
|
|
};
|
|
};
|
|
|
|
export default function WrOverLayRuse({ overLayData }: { overLayData: any }) {
|
|
const [ruseData, setRuseData] = useState<RuseTabData[]>([] as RuseTabData[]);
|
|
const [idx, setIdx] = useState(0);
|
|
const loop = true;
|
|
const go = (next: number) => {
|
|
if (loop) {
|
|
const n = (next + ruseData.length) % ruseData.length;
|
|
setIdx(n);
|
|
} else {
|
|
setIdx(Math.max(0, Math.min(ruseData.length - 1, next)));
|
|
}
|
|
};
|
|
const prev = () => go(idx - 1);
|
|
const next = () => go(idx + 1);
|
|
|
|
useEffect(() => {
|
|
if (overLayData && overLayData[0]) {
|
|
|
|
const newRuseData = overLayData.map((ruse) => {
|
|
const isData = getOverLayObj("하수재이용시설", ruse);
|
|
return {
|
|
data: isData.newObj,
|
|
tabData: {
|
|
pbnstRuseFcltId: ruse.pbnstRuseFcltId,
|
|
ruseUtztnFcltNm: ruse.ruseUtztnFcltNm,
|
|
},
|
|
};
|
|
});
|
|
|
|
setRuseData(newRuseData);
|
|
}
|
|
}, [overLayData]);
|
|
|
|
if (!(overLayData && overLayData[0])) return;
|
|
return (
|
|
<>
|
|
<div>
|
|
|
|
{/* 커스텀 헤더: 한 칸만 보이는 슬라이더 형태 */}
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
color="white"
|
|
onClick={prev}
|
|
disabled={!loop && idx === 0}
|
|
aria-label="이전"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<div className="flex-1 select-none rounded-md border px-4 py-2 text-center">
|
|
{/* 가운데 이름만 노출 */}
|
|
<span className="text-xl font-medium">
|
|
{ruseData[idx]?.tabData.ruseUtztnFcltNm ?? ""}
|
|
</span>
|
|
</div>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={next}
|
|
color="white"
|
|
disabled={!loop && idx === ruseData.length - 1}
|
|
aria-label="다음"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<WrOverLayTable overLayData={ruseData[idx]?.data??[{'확인불가':''}]} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|