frontend/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx

"use client";
import { useWrStore } from "@/app/store";
import { rswtRegSize, type customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
import { tableData } from "@/components/lib/func/commom";
import RswtrRegForm from "@/components/ui/form/fcltReg/rswtrReg/rswtrRegForm";
import { BdstReg } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
import {
  ContentsDiv,
  ScrollArea,
  SearchDiv,
  SearchFormLeft,
  SearchInput,
  Title,
  UiModal,
  UiTable
} from "@common/business_components";
import ListDiv from "@common/business_components/ui/list_div";
import { Button } from "@common/components";
import { useEffect, useState } from "react";
import { Toaster } from "react-hot-toast";

export default function Home() {
  const { auth,code, rswt, initRswt, rswtBdstSearch, getRswtBdstData } = useWrStore(
    (state) => state
  );
  const { regAuthrtYn, mdfcnAuthrtYn } = auth;

  const [rswtForm, setRswtForm] = useState<customRswtBdst>();
  const [searchTxt, setSearchTxt] = useState<string>();
  const [issNewReg, setIsNewReg] = useState<boolean>(false);
  const [pageNation, setPageNation] = useState(1);
  const [selectVal, setSelect] = useState<number>();
  const [bdstTable, setbdstTable] = useState<customRswtBdst[]>();
  const { rswtRes, rswtResCount } = rswt;
  useEffect(() => {
    if (!rswt.isInit) {
      initRswt("41");
    }
  }, [rswt.isInit, initRswt]);
  useEffect(() => {
    if (code.sggCd.length > 0) {

      if (rswtRes?.length > 0) {
        const rswtData = tableData(rswtRes, { code })?.map(
          (item: customRswtBdst) => {
            const archArea =
              item?.archArea.split(".")[0] !== "-1"
                ? item?.archArea.split(".")[0]
                : "확인불가";
            return {
              ...item,
              archArea: archArea,
              bdstChgYn: item.chgBuilding[0]?.bdstChgNm != null ? "Y" : "N",
              bdstUsgCd: item.reuseBuilding[0]?.bdstUsgCd,
            };
          }
        );
        setbdstTable(rswtData);
        setRswtForm(rswtRes[selectVal ?? 0]);
      } else {
        setbdstTable([]);
        setRswtForm({} as customRswtBdst);
      }
    }
    // }, [code, rswtRes, selectVal]);

  }, [code, rswtRes]);
  useEffect(() => {
    if (rswtRes && rswtRes.length > 0) {
      setRswtForm(rswtRes[selectVal ?? 0]);
    }
  }, [rswtRes, selectVal]);

  const cellClick: (val: number | undefined, headId: string) => void = (
    val
  ) => {
    if ((bdstTable ?? []).length > 0 && val !== undefined) {
      {
        setSelect(val);
      }
    }

  };

  useEffect(() => {
    getRswtBdstData(pageNation, "41");
  }, [pageNation]);

  return (
    <>
      <ContentsDiv>
        <div className="grid grid-cols-4 gap-4">
          <div className="col-span-4">
            <Title title={"중수도시설 등록"} />
            <SearchDiv>
              <SearchFormLeft>
                <SearchInput
                  className="col-span-3"
                  label="건물명"
                  textValue={searchTxt || ""}
                  setText={(e) => {
                    setSearchTxt(e);
                  }}
                />
                <div className="flex flex-row space-x-2 items-center">
                  <Button
                    size={"sm"}
                    className=""
                    onClick={() => {
                      rswtBdstSearch(searchTxt || "", pageNation, "41");
                    }}
                  >
                    조회
                  </Button>
                  <Button
                    size={"sm"}
                    className="mr-4"
                    onClick={() => setIsNewReg(!issNewReg)}
                    disabled={regAuthrtYn === "N"}
                  >
                    신규등록
                  </Button>
                </div>
              </SearchFormLeft>
              {/* <SearchFormRight>
              </SearchFormRight> */}
            </SearchDiv>
          </div>
        </div>

        <div className="grid grid-cols-6 gap-4">
          <div className="col-span-4 h-full min-h-0">
            <ListDiv className="min-h-0">
              <UiTable
                tableData={bdstTable || []}
                headlist={rswt.upHeadList}
                pageSize={rswtRegSize}
                total={rswtResCount}
                headName={"건축물 목록"}
                cellClick={cellClick}
                onPageChange={setPageNation}
                index={0}
              ></UiTable>
            </ListDiv>
          </div>
          <div className="col-span-2 max-h-full">
            <ListDiv className="">
              <ScrollArea className="h-[75vh]">
                <RswtrRegForm
                  rswtForm={rswtForm ?? ({} as customRswtBdst)}
                  isModal={false}
                  readonly={mdfcnAuthrtYn === "N"}
                />
              </ScrollArea>
            </ListDiv>
          </div>
        </div>

        <UiModal
          body={
            <BdstReg
              moType="RST"
              setIsModal={setIsNewReg}
              isModal={issNewReg}
            ></BdstReg>
          }
          bodyClass="w-[68vw] max-w-none h-[90vh]"
          open={issNewReg}
          onOpenChange={(open) => {
            setIsNewReg(open);
          }}
        />

        <Toaster position="top-center" />
      </ContentsDiv>
    </>
  );
}