64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { useWrStore } from "@/app/store";
|
|
import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
|
|
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
|
|
import {
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from "@common/components/ui";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
export function RuseDetailPopup({ bscFctCd }: { bscFctCd: string }) {
|
|
const { ruseMap, getRuseMaplList } = useWrStore((state) => state);
|
|
const { ruseDetailList } = ruseMap;
|
|
const [fcltTab, setFcltTab] = useState<string>("");
|
|
const [isDetail, setIsDetail] = useState<customPbnst>({} as customPbnst);
|
|
const initRef = useRef<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
if (!initRef.current) {
|
|
getRuseMaplList(bscFctCd);
|
|
initRef.current = true;
|
|
}
|
|
}, [bscFctCd]);
|
|
|
|
useEffect(() => {
|
|
const detail = ruseDetailList.find(
|
|
(list) => list.pbnstRuseFcltId === fcltTab
|
|
);
|
|
if (detail) setIsDetail(detail);
|
|
}, [fcltTab, ruseDetailList]);
|
|
|
|
useEffect(() => {
|
|
if (ruseDetailList && ruseDetailList[0]) {
|
|
setFcltTab(ruseDetailList[0].pbnstRuseFcltId);
|
|
}
|
|
}, [ruseDetailList]);
|
|
|
|
if (!(ruseDetailList && ruseDetailList[0])) return;
|
|
return (
|
|
<div>
|
|
<Tabs value={fcltTab} onValueChange={setFcltTab}>
|
|
<TabsList className="mt-4">
|
|
{ruseDetailList.map((item, index) => {
|
|
return (
|
|
<TabsTrigger
|
|
key={item.pbnstRuseFcltId + index}
|
|
className="!text-xl"
|
|
value={item.pbnstRuseFcltId}
|
|
>
|
|
{item.ruseUtztnFcltNm}
|
|
</TabsTrigger>
|
|
);
|
|
})}
|
|
</TabsList>
|
|
|
|
<TabsContent className="flex-1 px-4" value={fcltTab}>
|
|
<PbnstSttnModal data={isDetail} isMap={true} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|