Merge commit '2e87e8bd3d3d5b860a93486486e538a11e4b5f2b' into iipbs/wr/hasuReg

2025-05-29 19:07:37 +09:00
parent fa1a9159eb 2e87e8bd3d
commit a720aad07e
9 changed files with 249 additions and 194 deletions
@@ -37,7 +37,7 @@ export default function PublicReuseFaciltyInsert() {

 useEffect(() => {
    if (!pbnst.isInit ) {
-      pubHasuInit(undefined);
+      pubHasuInit('1','11');

      pbnstRegInit( '41');
    }
@@ -0,0 +1,29 @@
+import { fetchType, getFetch, postFectch } from "@/components/lib/api"
+import type { pubHasuType } from "../../ruseFcltMng/fcltReg/pbnstReg/type"
+export type comFcltState = {
+    searchFclts: pubHasuType
+}
+export type comFcltActions = {
+    getSwtrmtFcltNm: (searchNm: string) => void
+}
+  
+export const searchActions: (set: any) => comFcltActions = (set: any) => {
+    return {
+        getSwtrmtFcltNm: async (searchNm: string) => {
+            const fcltNm = await getFetch("common", `/prcsFclt/info/1/20/${searchNm}`);
+            const fcltNmCd: pubHasuType[] = fcltNm.map((item: any) => ({
+                bscFctCd: item.bscFctCd,
+                sido: item.sido,
+                gugun: item.gugun,
+                bscFctNm: item.bscFctNm,
+                addr: item.addr,
+                fctCpc: item.fctCpc
+            }))
+            return set((state: comFcltState) => ({
+                ...state,
+                searchFclts: fcltNmCd
+            }
+            ))
+        },
+    }
+}
@@ -57,6 +57,7 @@ export const pbnstOrgwtHeadListRxport: TableUpperProps[] = [
  { id: "dtlPstnExpln", title: "상세위치 설명" },
 ];
 export const fcOrgwtsHeadListExport: TableUpperProps[] = [
+  { id: "choose", title: "선택", type: "checkbox" },
  { id: "sido", title: "시도" },
  { id: "gugun", title: "시군구" },
  { id: "bscFctNm", title: "시설명" },
@@ -52,7 +52,7 @@ export type pubFacState = {
  };
 };
 type pubFacActions = {
-  pubHasuInit: (txt: string | undefined) => void;
+  pubHasuInit: (page:string, sggOrCity:string) => void;
  pbnstRegInit: (sgg: string) => void;
  pbnstRegSearch: (txt: string | undefined, sgg: string) => void;
  pbnstReg: (txt: string | undefined) => void;
@@ -61,6 +61,7 @@ type pubFacActions = {
  fileDownLoad: (atflCd: string) => void;
  pbnstMngData: (data: customPbnst[]) => void;
  pbnstBizData(data: fcBizType): void;
+
 };

 export type pubFacType = pubFacState & pubFacActions;
@@ -88,12 +89,11 @@ const checkWrRegList = async () => {
  return wrRegList;
 };

-const hasuListFetch = async (txt: string | undefined) => {
+const hasuListFetch = async (page:string, sggOrCity:string) => {
  const checkWrRegListRes = await checkWrRegList();

-  // prcsFclt/ruseInfo/1/20/A/11/0/1/SW
  const rainRes = await postFectch(
-    `/prcsFclt/ruseInfo/1/10/A/11` + "/0" + "/1" + "/SW",
+    `/prcsFclt/ruseInfo/${page?page:1}/10/A/${sggOrCity?sggOrCity:"11"}/0/1/SW`,
    checkWrRegListRes,
    fetchType.COMMON
  );
@@ -113,6 +113,7 @@ const getBizCycle = (fcBizs: z.infer<typeof fcBizSchema>[]) => {
    return {
      text: `${item.cycl}차`,
      val: item.cycl,
+      superkey: "", // Add default superkey value
    };
  });

@@ -126,11 +127,10 @@ const initFetch = async (code: string | undefined) => {

 export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
  return {
-    pubHasuInit: async (txt: string | undefined) => {
+    pubHasuInit: async (page:string, sggOrCity:string) => {
      try {
-        const pbnstHasuRes = await hasuListFetch(txt);
+        const pbnstHasuRes = await hasuListFetch(page, sggOrCity);

-        console.log("qwe  ", pbnstHasuRes);

        return set((state: pubFacState) => ({
          ...state,
@@ -149,9 +149,10 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
      try {
        // const pbnstRes = await initFetch(txt);

-        const pbnstRes = exampleData;
+        const pbnstRes = [exampleData];

-        const pbnstBizCycle = pbnstRes ? getBizCycle(pbnstRes.fcBizs) : []; // pbnstRes가 null일 수 있으므로 체크
+        
+        const pbnstBizCycle = pbnstRes && pbnstRes.length > 0 ? getBizCycle(pbnstRes[0]?.fcBizs || []) : []; // pbnstRes가 null일 수 있으므로 체크

        return set((state: pubFacState) => ({
          ...state,
@@ -166,30 +167,7 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
        console.log(errorHasu);
      }
    },
-    pbnstRegSearch: async (txt: string | undefined, sgg: string) => {
-      try {
-        const pbnstRes = await getFetch(
-          "wr",
-          ""
-          //   `/api/v1/prcsFclt/ruseInfo/${pageNo}/${pageCnt}/${searchingCd}/${nameCd}/${fcltCpct}/{oprtngSttsCd}/{bscFctClsCd}/{swtrmtFcltNm}` + (txt ? `/${txt}` : "") + `/${sgg}`
-        );
-        // API 응답이 pbnstRegZod 타입의 단일 객체라고 가정
-        const pbnstBizCycle =
-          pbnstRes && pbnstRes.fcBizs ? getBizCycle(pbnstRes.fcBizs) : [];
-
-        return set((state: pubFacState) => ({
-          ...state,
-          pbnst: {
-            ...state.pbnst,
-            pbnstReg: pbnstRes,
-            pbnstBizCycle: pbnstBizCycle,
-            isInit: false,
-          },
-        }));
-      } catch (errorHasu) {
-        console.log(errorHasu);
-      }
-    },
+    
    pbnstReg: async (txt: string | undefined) => {
      try {
        const pbnstRes = await hasuListFetch(txt);
@@ -97,7 +97,7 @@ const fcOrgwtSchema = z.object({
 export const fcBizSchema = z.object({
  pbnstRuseFcltBizPk: z.number().default(1),
  pbnstRuseFcltFk: z.number().nullish(),
-  superkey: z.string().default(""),
+  superkey: z.string().default("").nullish(),
  cycl: z.number(),
  seCd: z.string(),
  bizMthdCd: z.string(),
@@ -185,6 +185,7 @@ export const pbnstRegZod = z.object({
 });

 const pubHasuZod = z.object({
+  choose: z.boolean().default(false),
  bscFctCd: z.string(),
  sido: z.string().default(""),
  gugun: z.string().default(""),
@@ -87,6 +87,7 @@ import { rswtChkStateExport, rswtChkSttnActionsExport, type rswtChkSttnState, ty
 import { pbnstSttnActionsExport, pbnstSttnStateExport, type pbnstSttnState, type pbnstSttnType } from "./ruseFcltMng/fcltSttn/pbnstSttn";
 import { coSttnActionsExport, coSttnStateExport, type coSttnState, type coSttnType } from "./matDmd/coSttn"; // 옮겨야함
 import { ldrmntCoSttnActionsExport, ldrmntCoSttnStateExport, type ldrmntCoSttnState, type ldrmntCoSttnType } from "./matDmd/ldrmntCoSttn"; // 옮겨야함
+import { searchActions, type comFcltActions, type comFcltState } from "./common/searchCode";

 export type WrStore = comCodeType &
  pubFacType &
@@ -103,6 +104,7 @@ export type WrStore = comCodeType &
  rainChkSttnType&
  rswtChkSttnType&
  pbnstSttnType&
+  comFcltActions&comFcltState&
  coSttnType&  // 옮겨야함
  ldrmntCoSttnType  // 옮겨야함
  ;
@@ -125,7 +127,6 @@ export const StoreZus = (
    pbnstSttnState&
    coSttnState&  // 옮겨야함
    ldrmntCoSttnState  // 옮겨야함
-    
    = {
    ...comCodeStateExport,
    ...pubFacStateExport,
@@ -155,6 +156,7 @@ export const StoreZus = (
    getEnvPartCd(set);
    return {
      ...initState,
+      ...searchActions(set),
      ...pubFacActionsExport(set),
      ...rainFacActionsExport(set),
      ...rswtFacActionsExport(set),
@@ -118,7 +118,6 @@ export function PbnstBuseForm({ data }: { data: fcBizType[] }) {
      const index = Number(getBizCycle) - 1;
      form.reset(data[index]);
      ref.current = data[index]?.pplInstls ?? [];
-      console.log("form reset with data:", data[index]);

    }
  }, [getBizCycle, data]);
@@ -211,99 +210,93 @@ export function PbnstBuseForm({ data }: { data: fcBizType[] }) {
                sonClass="col-span-4"
              />

-              <h1 className={formH1Class}>재이용 원수취수 현황</h1>
-              <div>
-                <Button
-                  type="button"
-                  onClick={
-                    //   () => {
-                    //   setIsFcOrgwts(true)
-                    //   setModalData(modalData)
-                    // }
-                    buttonClick
-                  }
-                  size={commonButonSize}
-                >
-                  추가등록
-                </Button>
-                <RuseMngTable
+            <h1 className={formH1Class}>재이용 원수취수 현황</h1>
+            <div>
+              <div className="text-right mb-3">
+              <Button 
+                type="button"
+                onClick={
+                //   () => {
+                //   setIsFcOrgwts(true)
+                //   setModalData(modalData)
+                // }
+                buttonClick
+              }
+                size={commonButonSize}
+                className="">
+                추가등록
+              </Button>
+              </div>
+              <RuseMngTable
                  tableData={fcOrgwtFiled}
-                  headList={pbnst.pbnstOrgwtHeadList}
-                />
-              </div>
-              <h1 className={formH1Class}>재이용 공급관로 설치 현황</h1>
-              <div className="flex items-center gap-4 mx-3 mb-3">
-                <Label className="text-right">공급관로설치유무</Label>
-                <SelectBox
-                  label=""
-                  selectArray={code.yn}
-                  value={ppiYn}
-                  className="w-32"
-                  selectClass="w-full"
-                  onSelectValue={(val) => setPpiYn(String(val))}
-                />
-                <Label className="text-right">합계</Label>
-                <Input
-                  type="text"
-                  value={""}
-                  readOnly
-                  className="w-32  border-gray-300  rounded pr-8 "
-                />
-                <Button
-                  type="button"
-                  size={commonButonSize}
-                  className="!text-xl"
-                  onClick={plusHist}
-                >
-                  추가등록
-                </Button>
-                <Button
-                  type="button"
-                  size={commonButonSize}
-                  className="!text-xl !bg-red-500 !text-white ml-1"
-                  onClick={removeSelected}
-                >
-                  삭제
-                </Button>
-              </div>
-
-              <div>
-                <RuseMngTable
-                  tableData={pplInstls}
-                  headList={pbnst.pplInstlsHeadLisat}
-                  code={ppiSelectList ?? []}
-                  ref={ref}
-                  upHeadList={[]}
-                />
-              </div>
-
-              <MngRegFormDetail
-                formList={ruseWaterQulityList}
-                h1Title={"하수처리수 재이용시설 보증수질"}
-                form={form}
-                moClass="grid grid-cols-12 gap-4"
-                sonClass="col-span-4"
+                  headList={pbnst.pbnstOrgwtHeadList} 
+                  upHeadList={[]}              />
+            </div>
+            <h1 className={formH1Class}>재이용 공급관로 설치 현황</h1>
+            <div className="flex items-center gap-4 mx-3 mb-3">
+              <Label className="text-right">공급관로설치유무</Label>
+              <SelectBox
+                label=""
+                selectArray={code.yn}
+                value={ppiYn}
+                className="w-32"
+                selectClass="w-full"
+                onSelectValue={(val) => setPpiYn(String(val))}
              />
+              <Label className="text-right">합계</Label>
+              <Input
+                type="text"
+                value={""}
+                readOnly
+                className="w-32  border-gray-300  rounded pr-8 "
+              />
+              <Button
+                type="button"
+                size={commonButonSize}
+                className="!text-xl"
+                onClick={plusHist}
+              >
+                추가등록
+              </Button>
+              <Button
+                type="button"
+                size={commonButonSize}
+                className="!text-xl !bg-red-500 !text-white ml-1"
+                onClick={removeSelected}
+              >
+                삭제
+              </Button>
+            </div>

-              <h1 className={formH1Class}>하수처리수 재이용수 수요처</h1>
-              <div>
-                <Button size={commonButonSize}>수요처 추가</Button>
-                <RuseMngTable
-                  tableData={[]}
-                  headList={pbnst.pbnstDemandHeadList}
-                />
+            <MngRegFormDetail
+              formList={ruseWaterQulityList}
+              h1Title={"하수처리수 재이용시설 보증수질"}
+              form={form}
+              moClass="grid grid-cols-12 gap-4"
+              sonClass="col-span-4"
+            />
+
+            <h1 className={formH1Class}>하수처리수 재이용수 수요처</h1>
+            <div>
+              <div className="text-right mb-3">
+              <Button size={commonButonSize}>수요처 추가</Button>
              </div>
-            </form>
-          </Form>
-        </div>
-
-        <UiModal
-          open={isFcOrgwts}
-          onOpenChange={(open: boolean) => setIsFcOrgwts(open)}
-          bodyClass={"w-[60vw] max-w-none h-[60vh]"}
-          body={<FcOrgwtsRegModal data={modalData || []}></FcOrgwtsRegModal>}
-        ></UiModal>
+              <RuseMngTable
+                tableData={[]}
+                headList={pbnst.pbnstDemandHeadList}
+              />
+            </div>
+          </form>
+        </Form>
      </div>
+
+      <UiModal
+        open={isFcOrgwts}
+        onOpenChange={(open: boolean) => setIsFcOrgwts(open)}
+        bodyClass={"w-[50vw] max-w-none h-[60vh]"}
+        body={<FcOrgwtsRegModal data={modalData ? [modalData] : []} onRightSet={(val) => { console.log("val", val); return {}; }} ></FcOrgwtsRegModal>}
+      ></UiModal>
+    </div>
    </>
  );
 }
@@ -1,103 +1,152 @@
 "use client";
 import { useWrStore } from "@/app/store";
-import type { customPbnst, fcBizType, fcOrgwtType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import type { pubHasuType, fcBizType, fcOrgwtType,} from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import { tableData } from "@/components/lib/func/commom";
+import RuseMngTable from "@/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable";
 import { Title, UiTable } from "@common/business_components/ui";
 import { Label } from "@common/business_components/ui/form/lib/label";
 import { Button } from "@common/business_components/ui/table/lib/button";
 import { Input } from "@common/components/ui";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useFieldArray } from "react-hook-form";

-export default function FcOrgwtsRegModal({ data }: { data: fcOrgwtType[] }) {
-  const { code, pbnst } = useWrStore((state) => state);
+export default function FcOrgwtsRegModal({ data, onRightSet }: { data: fcOrgwtType[], onRightSet?: (rightData:fcOrgwtType[]) => {}}) {
+  const { code, pbnst, getSwtrmtFcltNm, searchFclts } = useWrStore((state) => state);
  const { fcOrgwtsHeadList, pbnstHasuRes } = pbnst;
-  const [bdstTable, setbdstTable] = useState<customPbnst[]>();
-  const [isFcOrgwtsData, setIsFcOrgwtsData] = useState<boolean>(false);
-  const [pkTable, setPkTable] = useState<customPbnst[]>();
+  const [bdstTable, setbdstTable] = useState<pubHasuType[]>();
+  const rightRef = useRef<pubHasuType[] | null>([] as pubHasuType[]);
+  const leftRef = useRef<pubHasuType[] | null>([] as pubHasuType[]);
+  const [rightData, setRightData] = useState<pubHasuType[]>();
+  const [inputVal, setInputVal] = useState<string>("");
+  
+  useEffect(()=>{
+    console.log("searchFclts", searchFclts);
+    if(Array.isArray(searchFclts)){
+      const filteredData = searchFclts.filter((item) => {
+        if(rightData){
+          if(rightData.find(rightItem =>rightItem.bscFctCd===item.bscFctCd))
+            return false;
+        }
+        return true
+      })
+      setbdstTable(Array.isArray(filteredData) ? [...filteredData] : [])
+    }

+  }, [searchFclts])
  useEffect(() => {
-    console.log("isFcOrgwtsData", isFcOrgwtsData);
-  }, [isFcOrgwtsData]);
-  useEffect(() => {
-    // console.log("어휴", pbnstHasuRes);
+    // console.log("머지", pbnstHasuRes);
    if (code.sggCd.length > 0 && pbnstHasuRes.length > 0) {
      setbdstTable(tableData(pbnstHasuRes, { code }));
    }
  }, [code, pbnstHasuRes]);

  useEffect(() => {
-    if (!data) return;
-    const findPk = data.map(element => {
-      const pk = pbnstHasuRes.find((item)=> String(item.bscFctCd) === element.swtrmtFcltFk)
-      return pk;
-    });
-    
-    setPkTable(findPk);
-  }, [data]);
-
-  useEffect(()=>{
-
-  })
+    if(onRightSet)
+    onRightSet(
+      rightData?.map(item => ({
+        pbnstRuseFcltBizFk: data[0]?.pbnstRuseFcltBizFk ?? 0,
+        swtrmtFcltFk: item.bscFctCd,
+        orgwtWtritQnt: "0",
+        tmsYn: "N",
+        dschgFmYn: "N",
+        dtlPstnExpln: "",
+        rgtr: "",
+        mdfr: "",
+        regDt: undefined,
+        mdfcnDt: undefined,
+        useYn: undefined,
+      })) ?? []
+    );
+  }, [rightData])

  return (
    <>
      <div className="flex flex-col h-full">
-        <div>
+        <div className="flex items-center justify-between">
          <Title title={"취수하수처리장 추가"} />
-          <Button className="m-2" size={"sm"} onClick={()=>{}}>저장</Button>
+          <Button className="m-2" size={"sm"}
+          onClick={() => { }}>저장</Button>
        </div>
-        
+
        <div className="flex flex-row flex-grow gap-4 mt-4">
          <div className="w-3/7">
-          <Label className="w-full text-2xl text-gray-600 text-right">공공하수처리시설 목록</Label>
-          <div className="flex items-center">
-          <Label className="w-full text-xl text-gray-600 text-right">시설명</Label>
-          <Input className="w-1/3 !text-xl ml-2" type="text" value={""} onChange={(e) => {}}/> 
-          <Button className="m-2" size={"sm"} onClick={()=>{}}>조회</Button>
+          <div className="flex items-center justify-between">
+            <Label className="w-full text-2xl text-gray-600 text-left">공공하수처리시설 목록</Label>
+            <div className="flex items-center">
+              <Label className="w-full text-xl text-gray-600 text-right">시설명</Label>
+              <Input className="w-1/2 !text-xl ml-2" type="text" value={inputVal} onChange={(e) => {setInputVal(e.target.value)}} />
+              <Button className="m-2" size={"sm"} onClick={() => getSwtrmtFcltNm(inputVal)}>조회</Button>
+            </div>
+            </div>
+            <div className="border-t border-gray-300 my-4"></div>
+            <RuseMngTable
+              tableData={bdstTable || []}
+              headList={fcOrgwtsHeadList}
+              upHeadList={[]} // TODO: Replace with actual upHeadList data if available
+              ref={leftRef}
+            />
          </div>
-          <div className="border-t border-gray-300 my-4"></div>
-          <UiTable
-            headName={""}
-            tableData={bdstTable || []}
-            headlist={fcOrgwtsHeadList}
-            pageSize={0}
-            total={0}
-            cellClick={undefined}
-            onPageChange={function (page: number): void {
-              throw new Error("Function not implemented.");
-            }}
-          ></UiTable>
-        </div>
          <div className="flex flex-col items-center justify-center w-1/7 gap-2">
            <ArrowRight
-            type="button"
-            onClick={() => {
-              setIsFcOrgwtsData(!isFcOrgwtsData);
-            }}
-            className="w-12 h-12 text-gray-500"
-          />
-          <ArrowLeft
-          type="button"
-          onClick={() => {}}
-          className="w-12 h-12 text-gray-500" />
-        </div>
+              type="button"
+              onClick={() => {
+                if (leftRef && typeof leftRef === "object" && "current" in leftRef) {
+                  const checked = leftRef.current?.filter((item) => ((item as unknown as pubHasuType)?.choose))
+                  const unchecked = leftRef.current?.filter((item) => !(item as unknown as pubHasuType)?.choose)
+                  if (checked && checked.length > 0) {
+                    checked.forEach(item=>(item as unknown as pubHasuType).choose = false)
+                    setRightData([...(checked as unknown as pubHasuType[]),
+                  ...((rightRef.current ?? []) as unknown as pubHasuType[])
+                  ])
+                    
+                  }
+                  if (unchecked && unchecked.length > 0) {
+                    setbdstTable([...(unchecked as unknown as pubHasuType[])])
+                  }else{
+                    setbdstTable([])
+                  }
+                }
+              }
+            }
+              className="w-12 h-12 text-gray-500 cursor-pointer"
+            />
+            <ArrowLeft
+              type="button"
+              onClick={() => {
+                if (rightRef && typeof rightRef === "object" && "current" in rightRef) {
+                  const checked = rightRef.current?.filter((item) => ((item as unknown as pubHasuType)?.choose))
+                  const unchecked = rightRef.current?.filter((item) => !(item as unknown as pubHasuType)?.choose)
+                  if (checked && checked.length > 0) {
+                    checked.forEach(item=>(item as unknown as pubHasuType).choose = false)
+                    setbdstTable([
+                      ...(checked as unknown as pubHasuType[]),
+                      ...((leftRef.current ?? []) as unknown as pubHasuType[])
+                    ])
+                  }
+                  if (unchecked && unchecked.length > 0) {
+                    setRightData([...(unchecked as unknown as pubHasuType[])])
+                  }else{
+                    setRightData([])
+                  }
+                }
+              }}
+              className="w-12 h-12 text-gray-500 cursor-pointer mt-5" />
+          </div>
          {/* Right Table container: Takes 2/5 of the width */}
          <div className="w-3/7">
-          <UiTable
-            headName={"취수하수처리장 목록"}
-            tableData={pkTable || []}
-            headlist={fcOrgwtsHeadList}
-            pageSize={0}
-            total={0}
-            cellClick={undefined}
-            onPageChange={function (page: number): void {
-              throw new Error("Function not implemented.");
-            }}
-          ></UiTable>
+            <Label className="w-full text-2xl text-gray-600 text-right">취수하수처리장 목록</Label>
+            <div className="border-t border-gray-300 my-4"></div>
+            <RuseMngTable
+              tableData={rightData || []}
+              headList={fcOrgwtsHeadList}
+              upHeadList={[]} // TODO: Replace with actual upHeadList data if available
+              ref={rightRef}
+            />
+          </div>
        </div>
      </div>
-      </div>
    </>
  );
 }
@@ -1,5 +1,7 @@
 import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
+import type { customPbnst as OriginalCustomPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+
 import { selectClass, type TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import { DatePicker, SelectBox, type SelectDataType } from "@common/business_components/ui";
 import {
@@ -21,12 +23,12 @@ type RuseMngTableProps = {
  code?: { name: string, val: SelectDataType[] }[];
 };

-const RuseMngTable = React.forwardRef<any[], RuseMngTableProps>(
+const RuseMngTable = React.forwardRef<any, RuseMngTableProps>(
  ({
    tableData,
    headList,
    upHeadList,
-    code = []
+    code
  }, ref) => {
    const [tableState, setTableState] = useState([...tableData]);
    useEffect(() => {