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

import { useWrStore } from "@/app/store";
import { costtnMapSize } from "@/app/store/map/coSttnMap";
import {
  formatPhoneNumber,
  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 type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
import { Button } from "@common/components/ui";
import moment from "moment";
import { useCallback, useEffect, useState } from "react";

export function CoSttnMap({
  rtnFeature,
}: {
  rtnFeature: (feature: any) => void;
}) {
  const {
    code,
    coSttnMap,
    coSttnMapInit,
    coSttnMapSearch,
    coSttnMapTxtSearch,
  } = useWrStore((state) => state);
  const [coSttnMapTable, setCoSttnMapTable] = useState<DemandCompType[]>();
  const [isReset, setIsReset] = useState(false);
  const { coSttMapHeadList, coSttnMapRes, coSttnMapResCount } = coSttnMap;
  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
  const [objSearch, setObjSearch] = useState<objSearchType>({
    sgg: "",
    city: "",
  });

  const [seartchTxt, setSearchTxt] = useState<string>();

  const getSelCity = useCallback(
    (val: string | number) => {
      const cityValue = String(val);
      const data = getCity(cityValue, code.sggCd);
      setSelectSgg(data);
      setObjSearch({ city: cityValue, sgg: "0" });
    },
    [code.sggCd]
  );

  const getSgg = useCallback((val: string | number) => {
    setObjSearch((prev) => ({ ...prev, sgg: String(val) }));
  }, []);

  useEffect(() => {
    // code.cityCd 데이터가 로드되었고, 아직 시/도 선택이 안된 초기 상태일 때 실행
    if (code.cityCd && code.cityCd.length > 0 && !objSearch.city) {
      const firstCityVal = code.cityCd[0]?.val;
      if (firstCityVal) {
        // 첫 번째 시/도 값으로 상태를 초기화합니다.
        getSelCity(firstCityVal);
      }
    }
  }, [code.cityCd, objSearch.city, getSelCity]);

  useEffect(() => {
    if (!coSttnMap.isInit) {
      coSttnMapInit(1, costtnMapSize, "0");
    }
  }, [coSttnMap.isInit, coSttnMapInit]);

  const coSttnMapCellClick = (index: number | undefined) => {
    if (index !== undefined && coSttnMapTable !== undefined) {
      rtnFeature(coSttnMapTable[index]);
    }
  };
  useEffect(() => {
    if (coSttnMapRes) {
      if (coSttnMapRes?.length > 0 && code.cityCd.length > 0) {
        const data = tableData(coSttnMapRes, { code });
        const chData = data.map((item: any) => ({
          ...item,
          telno: formatPhoneNumber(item.telno || undefined),
          regDt: moment(item.regDt).format("YYYY-MM-DD"),
          dmdInfoId: `${item.dmdInfoId.slice(0, 3)}-${item.dmdInfoId.slice(3, 5)}-${item.dmdInfoId.slice(5, 10)}-${item.dmdInfoId.slice(10)}`,
        }));
        // .filter((item: any) => item !== undefined);
        setCoSttnMapTable(chData);
      }
    }
  }, [coSttnMapRes, 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-3 w-1/6 h-full text-2xl"
                    label="시도"
                    selectClass={""}
                    selectArray={code.cityCd || []}
                    onSelectValue={(val) => {
                      getSelCity(val);
                    }}
                    value={objSearch.city}
                  />
                  <SelectBox
                    className="col-span-3 w-1/6 h-full text-2xl ml-4"
                    label="시군구"
                    selectClass={""}
                    selectArray={selectSgg || []}
                    onSelectValue={getSgg}
                    value={objSearch.sgg}
                  />
                  <SearchInput
                    className={"!text-3xl ml-4"}
                    label="회사명"
                    textValue={seartchTxt ?? ""}
                    setText={(e) => {
                      setSearchTxt(e);
                    }}
                  />
                </div>
              </SearchFormLeft>
              <SearchFormRight className="w-3/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
                <div className="flex flex-row space-x-2">
                  <Button
                    className="mt-2"
                    size={"sm"}
                    onClick={() => {
                      const con =
                        objSearch.sgg && objSearch.sgg !== "0"
                          ? objSearch.sgg
                          : objSearch.city;
                      if (con) {
                        if (seartchTxt && seartchTxt?.length > 0) {
                          coSttnMapTxtSearch(
                            1,
                            costtnMapSize,
                            String(con),
                            seartchTxt ?? ""
                          );
                        } else {
                          coSttnMapSearch(1, costtnMapSize, String(con));
                        }
                        setIsReset(true)
                      }
                    }}
                  >
                    조회
                  </Button>
                </div>
              </SearchFormRight>
            </SearchDiv>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-4 ">
          <div className="col-span-2">
            <UiTable
              headName={[]}
              tableData={coSttnMapTable || []}
              headlist={coSttMapHeadList}
              pageSize={20}
              total={coSttnMapResCount|| 0}
              cellClick={(index: number | undefined) => {
                coSttnMapCellClick(index);
                // setUpdateData(coSttnRes[index as number]);
              }}
              onPageChange={(page) => {
                const con =
                  objSearch.sgg && objSearch.sgg !== "0"
                    ? objSearch.sgg
                    : objSearch.city;
                coSttnMapSearch(page, costtnMapSize, String(con));
                setIsReset(false);
              }}
              resetPageNo={isReset}
            ></UiTable>
          </div>
        </div>
      </ContentsDiv>
    </>
  );
}