frontend/apps/wr/components/ui/map/LayerPopUp/LdrmntCoMap/LdrmntCoMap.tsx

import { useWrStore } from "@/app/store";
import { ldrmntMapSize } from "@/app/store/map/ldrmntCoMap";
import type { customLdrmnt } from "@/app/store/matDmd/ldrmntCoSttn";
import { getCity, tableData } from "@/components/lib/func/commom";
import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
import {
  ContentsDiv,
  SearchDiv,
  SearchFormLeft,
  SearchFormRight,
  SearchInput,
  SelectBox,
  Title,
  UiTable,
  type SelectDataType,
} from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { Button } from "@common/components/ui";
import { useEffect, useState } from "react";

export function LdrmntCoMap({
  rtnFeature,
}: {
  rtnFeature: (feature: any) => void;
}) {
  const { code, ldrmntMap, ldrmntMapInit, ldrmntMapSearch } = useWrStore(
    (state) => state
  );

  const { ldrmntMapRes, ldrmntMapResCount, ldrmntMapHeadList } = ldrmntMap;
  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
  const [objSearch, setObjSearch] = useState<objSearchType>({
    sgg: "",
    city: "",
  });
  const [bdstTable, setBdstTable] = useState<customLdrmnt[]>();
  const [searchTxt, setSearchTxt] = useState<string>();
  const [resetPage, isResetPage] = useState(false);

  const computeCityNm = () => {
    let cityTxt = "";
    let sggTxt = "";

    if (objSearch.city) {
      cityTxt = code.cityCd.find((c) => c.val === objSearch.city)?.text || "";
    }
    if (objSearch.sgg) {
      sggTxt = code.sggCd.find((s) => s.val === objSearch.sgg)?.text || "";
    }

    if (cityTxt === "" || cityTxt === "전체") cityTxt = "0";

    return sggTxt && sggTxt !== "0" ? `${cityTxt} ${sggTxt}` : cityTxt;
  };

  const cellClick = (index: number | undefined) => {
    if (index !== undefined) {
      rtnFeature(ldrmntMapRes[index]);
    }
  };

  const getSelCity = (val: string | number) => {
    const cityValue = String(val);

    if (cityValue === "0") {
      setSelectSgg([]);
      setObjSearch({ city: cityValue, sgg: "" });
    } else {
      const data = getCity(cityValue, code.sggCd);
      setSelectSgg(data);
      const firstSggVal =
        data.find((item) => item.val === "0")?.val || (data[0]?.val ?? "");
      setObjSearch({ city: cityValue, sgg: firstSggVal });
    }
  };

  const getSgg = (val: string | number) => {
    setObjSearch({ ...objSearch, sgg: String(val) });
  };

  useEffect(() => {
    if (!ldrmntMap.isInit) {
      ldrmntMapInit(1, ldrmntMapSize, "0");
    }
  }, [ldrmntMap.isInit, ldrmntMapInit]);

  useEffect(() => {
    const transData = Array.isArray(ldrmntMapRes)
      ? ldrmntMapRes
      : [ldrmntMapRes];
    const data = tableData(transData, { code });
    const tbData = Array.isArray(data)
      ? data.map((item: customLdrmnt) => ({
          ...item,
          ctpvCd: item.fctryAddr?.split(" ")[0] || "",
          sggCd: item.fctryAddr?.split(" ")[1] || "",
        }))
      : [];

    setBdstTable(tbData);
  }, [ldrmntMapRes, code]);

  return (
    <>
      <ContentsDiv>
        <div className="grid grid-cols-4 gap-4 ">
          <div className="col-span-4">
            <Title title={"잠재수요처 관리"} />
            <SearchDiv>
              <SearchFormLeft>
                <div className="col-span-10 flex flex-row">
                  <SelectBox
                    className="col-span-2 w-1/6 h-full text-2xl"
                    label="시도"
                    selectClass={""}
                    selectArray={code.cityCd}
                    onSelectValue={getSelCity}
                  />
                  <SelectBox
                    className="col-span-2 w-1/6 h-full text-2xl ml-4"
                    label="시군구"
                    selectClass={""}
                    selectArray={selectSgg || []}
                    value={objSearch.sgg} // value props 추가
                    onSelectValue={getSgg}
                  />
                  <SearchInput
                    className={"text-2xl ml-4"}
                    label="회사명"
                    textValue={searchTxt || ""}
                    setText={(e) => {
                      setSearchTxt(e);
                    }}
                  />
                </div>
              </SearchFormLeft>
              <SearchFormRight className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
                <div className="flex flex-row space-x-2 items-center">
                  <Button
                    size={"sm"}
                    onClick={() => {
                      ldrmntMapSearch(
                        1,
                        ldrmntMapSize,
                        computeCityNm(),
                        searchTxt || ""
                      );
                      isResetPage(true);
                    }}
                  >
                    조회
                  </Button>
                </div>
              </SearchFormRight>
            </SearchDiv>
          </div>
        </div>
        <div className="grid grid-cols-6 gap-4 ">
          <div className="col-span-6">
            <div className="overflow-x-auto">
              <ListDiv className="min-w-max">
                <UiTable
                  headName={undefined}
                  tableData={bdstTable || []}
                  headlist={ldrmntMapHeadList}
                  pageSize={20}
                  total={ldrmntMapResCount || 0}
                  cellClick={(index: number | undefined) => {
                    cellClick(index ?? undefined);
                  }}
                  onPageChange={(page) => {
                    ldrmntMapSearch(
                      page,
                      ldrmntMapSize,
                      computeCityNm(),
                      searchTxt || ""
                    );
                    isResetPage(false);
                  }}
                  resetPageNo={resetPage}
                />
              </ListDiv>
            </div>
          </div>
        </div>
      </ContentsDiv>
    </>
  );
}