frontend/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx

"use client";
import { useWrStore } from "@/app/store";
import CoSttnDetailPopup from "@/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup";
import { RuseDetailPopup } from "@/components/ui/map/detailPopup/ruseDetailPopup";
import CoDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/coDatailModal";
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
import { Title, UiTable } from "@common/business_components/ui";
import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

export default function MapFeaturePopup() {
  const [isFeatureCd, setIsFeatureCd] = useState<any>(null);
  const {
    pbnMap,
    rainMapDetile,
    rswtMapDetile,
    htdfMapDetile,
    pbnMapDetaile,
    ldrmntMapDetile,
    coSttnMapDetail
  } = useWrStore((state) => state);
  const { pbnMapHeadList } = pbnMap;
  const [isDetail, setIsDetail] = useState<any>(null);
  const [layerNm, setLayerNm] = useState<string>();
  const searchParams = useSearchParams();

  useEffect(() => {
    const layerName = searchParams.get("layerNm");
    const featureCd = searchParams.get("featureCd");
    setLayerNm(String(layerName));
    setIsFeatureCd(featureCd);

    const handleUnload = () => {
      // 부모에게 닫힘 알림
      window.opener?.postMessage(
        { type: "POPUP_CLOSED", target: "detail" },
        "*"
      );
    };

    window.addEventListener("beforeunload", handleUnload);

    return () => {
      window.removeEventListener("beforeunload", handleUnload);
    };
  }, []);

  useEffect(() => {
    if (isFeatureCd && layerNm) {
      if (layerNm === "tb_wr_bdst_ruse_fclt") {
        setIsDetail(isFeatureCd);
      } else if (layerNm === "tb_il_swage_prcs_fclt") {
        pbnMapDetaile(isFeatureCd, isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "tb_wr_rnwtr_utztn_fclt") {
        rainMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "tb_wr_rswtr_fclt") {
        rswtMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "tb_wr_htdfl_fclt") {
        htdfMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      }else if(layerNm ==='tb_wr_ruse_fclt_dmd_co'){
        coSttnMapDetail(isFeatureCd).then((res) => {
          console.log('tb_wr_ruse_fclt_dmd_co ', res)
          setIsDetail(res);
        });
      } else if (layerNm === "tb_wr_tmpr_dmd_co") {
        ldrmntMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      }
    }
  }, [isFeatureCd, layerNm]);

  if (!isDetail) return null; // 데이터 없으면 아무것도 안 그림
  return (
    <>
      {isDetail ? (
        <div className="m-0 bg-white p-4 md:p-6 pb-24 box-border">
          {layerNm === "tb_wr_bdst_ruse_fclt" ? (
            <RuseDetailPopup bscFctCd={isDetail} />
          ) : layerNm === "tb_il_swage_prcs_fclt" ? (
            <div style={{ overflowX: "hidden" }}>
              <div className="flex justify-between items-center mb-4">
                <Title title="하수처리시설 상세정보" />
              </div>
              {/* 높이 조정 */}
              <UiTable
                tableData={isDetail || []}
                headlist={pbnMapHeadList.slice(0, 4)}
                pageSize={1}
                total={0}
                headName={"위치정보"}
                cellClick={() => {}}
                onPageChange={() => {}}
              />
              <UiTable
                tableData={isDetail || []}
                headlist={pbnMapHeadList.slice(4)}
                pageSize={1}
                total={0}
                headName={"기본정보"}
                cellClick={() => {}}
                onPageChange={() => {}}
              />
            </div>
          ) : layerNm === "tb_wr_tmpr_dmd_co" ? (
            <CoDetailModal
              formObj={isDetail}
              readonly={false}
              onFormSubmit={async (value) => {
                console.log(value);
              }}
              isMap={true}
            />
          ) :layerNm === "tb_wr_ruse_fclt_dmd_co" ? (
            <CoSttnDetailPopup
             isDetail={isDetail}
            />
          )  
          : (
            <SttnDetailModal
              type={
                layerNm === "tb_wr_rnwtr_utztn_fclt"
                  ? "RNB"
                  : layerNm === "tb_wr_rswtr_fclt"
                    ? "RST"
                    : "HTB"
              }
              formObj={isDetail}
              isMap={true}
            />
          )}
        </div>
      ) : (
        <></>
      )}
    </>
  );
}