diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index 777c3dcf2..5946199a7 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -16,11 +16,13 @@ import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; import HtdflPrfmncSttnPopup from "@/app/map/htdflPrfmncSttnPopup"; import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; import { getFetch } from "@/components/lib/api"; +import { useGisContext } from "@common/business_components/ui/map/Gis"; interface NewWindowPopupProps { featureData: any; checkedLayers?: string[]; checkedLayersData?: any[]; + seletectedLayerNm?: string onClose: () => void; } @@ -38,12 +40,16 @@ const NewWindowPopup: React.FC = ({ featureData, checkedLayers = [], checkedLayersData = [], + seletectedLayerNm, onClose }) => { + const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]); const [activeTab, setActiveTab] = useState('0'); // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음 - const [showDetailView, setShowDetailView] = useState(false); // 상세정보 화면 표시 상태 추가 + const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가 + const [showListView, setShowListView] = useState(false) + const [viewMode, setViewMode] = useState<"detail" | "list">("detail"); // "detail" 또는 "list"로 상태 관리 // onClose 함수를 useCallback으로 메모이제이션 const memoizedOnClose = useCallback(() => { @@ -56,8 +62,6 @@ const NewWindowPopup: React.FC = ({ pbnstSttn, pbnstSttnSearch, pbnSttnInit, - getPbnStnDetail, - pbnNmSearch, } = useWrStore((state) => state); const [bdstTable, setBdstTable] = useState(); const [pageNation, setPageNation] = useState(1); @@ -98,11 +102,7 @@ const NewWindowPopup: React.FC = ({ const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false }); const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] }); - if (!featureData) { - return null; - } - - // 물재이용시설 cellClick 이벤트 (상세정보) + // 재이용시설 cellClick 이벤트 (상세정보) const pbnstCellClick = (index: number | undefined) => { if ( index !== undefined && @@ -112,36 +112,51 @@ const NewWindowPopup: React.FC = ({ setPbnstRuseFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk); fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) - setShowDetailView(true); // 상세정보 화면 표시 상태 변경 + setViewMode('detail') } }; - - useEffect(() => { - if (!pbnstSttn.isInit) { - pbnSttnInit("1", "13",{ - partValue: "A", - sidoValue: "0", - sigunValue: "", - regionValue: "", - unitWaterShedValue: "", - middleRegionValue: "", - envPartValue: "", - sidoText: "", - sigunText: "" - }, String(new Date().getFullYear())); + const getSelectedLayers = () => { + let result = null; + const layers = gisMap ? gisMap.getLayers().getArray() : []; // gisMap이 null인지 확인 후 레이어 가져오기 + let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수 + layers.forEach((layer: any) => { + const source = layer.getSource(); + if (source && source.hasFeature && featureData + && typeof featureData.getId === 'function' && source.hasFeature(featureData)) { + featureLayer = layer; // 피처가 속한 레이어 찾기 } - }, [pbnstSttn.isInit]); + }); + result = featureLayer.get('lyrNm'); - useEffect(() => { - setBdstTable(pbnstSttn.pbnstSttnRes); - }, [pbnstSttn.pbnstSttnRes]); + return result; + }; + // 재이용 현황 초기값 + useEffect(() => { + if (!pbnstSttn.isInit) { + pbnSttnInit("1", "13", { + partValue: "A", + sidoValue: "0", + sigunValue: "", + regionValue: "", + unitWaterShedValue: "", + middleRegionValue: "", + envPartValue: "", + sidoText: "", + sigunText: "" + }, String(new Date().getFullYear())); + } + }, [pbnstSttn.isInit]); -// 재이용시설 상세정보 - const setTabDataFunc = (res:any, pk:string) => { + useEffect(() => { + setBdstTable(pbnstSttn.pbnstSttnRes); + }, [pbnstSttn.pbnstSttnRes]); + + // 재이용시설 상세정보 + const setTabDataFunc = (res: any, pk: string) => { setTabData((prev) => { if (prev.some((tab) => tab.id === pk)) { return prev; // 이미 존재하는 탭이면 추가하지 않음 - } + } return [...prev, { id: pk, name: `재이용시설 ${prev.length + 1}`, data: res }]; }); } @@ -175,17 +190,25 @@ const NewWindowPopup: React.FC = ({ String(new Date().getFullYear()) ); }, []); - // useEffect(() => { - // if (featureData) { - // const selectedVal = featureData.getProperties(); - // const featureCd = selectedVal?.swtrmt_fclt_cd; - // if (featureCd && featureCd !== pbnstRuseFcltPk) { - // setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장 - // setActiveTab(featureCd) - // fetchpbnstDetail(featureCd); // 상세정보 가져오기 - // } - // } - // }, [featureData]); + useEffect(() => { + if (seletectedLayerNm && seletectedLayerNm === getSelectedLayers()) { + console.log('레이어명이 일치하여 상세보기 비활성화'); // 디버깅 로그 추가 + setViewMode('list') + } + }, [seletectedLayerNm]); + + useEffect(() => { + if (featureData) { + const selectedVal = featureData.getProperties(); + const featureCd = selectedVal?.swtrmt_fclt_cd; + if (featureCd && featureCd !== pbnstRuseFcltPk) { + setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장 + setActiveTab(featureCd) + fetchpbnstDetail(featureCd); // 상세정보 + setViewMode("detail"); // 상세 보기 활성화 + } + } + }, [featureData]); useEffect(() => { if (pbnstSttn.pbnstDetail) { @@ -248,18 +271,19 @@ const NewWindowPopup: React.FC = ({ layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설') ); const actTabData = tabData.find((tab) => tab.id === activeTab); - console.log('tavbData',actTabData) + const layerId = getSelectedLayers() // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음 // 재이용시설 - const isPbnst = true; + let isPbnst = layerId == '하수처리시설'; // 빗물이용시설 - const isRain = false; + let isRain = layerId == '빗물이용시설'; // 중수도시설 - const isRswt = false; + let isRswt = layerId == '중수도시설'; // 온배수시설 - const isHtdfl = false; + let isHtdfl = layerId == '온배수시설'; + if (isPbnst) { - if (showDetailView) { + if (viewMode=='detail') { // 재이용시설 상세 return ( <> @@ -278,7 +302,7 @@ const NewWindowPopup: React.FC = ({ /> tab.id === activeTab)?.data[0] || ({} as customPbnst)} + data={actTabData?.data[0] || ({} as customPbnst)} titleVisible={false} /> @@ -311,7 +335,7 @@ const NewWindowPopup: React.FC = ({ ); } } - + if (isRain) { if (showDetailView) { // 빗물이용시설 상세 @@ -351,7 +375,7 @@ const NewWindowPopup: React.FC = ({ ); } } - + if (isRswt) { if (showDetailView) { // 중수도시설 상세 @@ -391,7 +415,7 @@ const NewWindowPopup: React.FC = ({ ); } } - + if (isHtdfl) { if (showDetailView) { // 온배수시설 상세 @@ -431,7 +455,7 @@ const NewWindowPopup: React.FC = ({ ); } } - + return null; // 조건에 맞는 콘텐츠가 없을 경우 };