fix: SearchModal 검색 로직 에러 수정 (상세 정보 표시, zoom 이동은 아직)

2025-07-24 19:58:20 +09:00
parent f6cefd6230
commit 8ed0a86cf5
2 changed files with 107 additions and 76 deletions
@@ -376,7 +376,7 @@ export const MsSwageMhlCol = [
  { id: 'vrtc_len', title: '세로길이(m)' },
  // { id: 'ang_dir', title: '표고' },
  { id: 'altd_vl', title: '표고(EL.m)' },
-  { id: 'dpthlVl', title: '심도(m)' },
+  { id: 'dpthl_vl', title: '심도(m)' },
  // { id: 'inst_mng_no', title: '기관관리번호' }
 ];
 export const MsSwageMhlCol2 = [
@@ -507,7 +507,7 @@ export const ExclnSewagePumpCol2 = [
  // { id: 'instMngNo', title: '기관관리번호' },
 ]
 // 오수펌프장
-export const DrtwSewagePumpCol1 = [
+export const DrtwSewagePumpCol = [
  // { id: 'fid', title: 'FID' },
  // { id: 'geom', title: 'geometry' },
  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
@@ -574,16 +574,16 @@ export const stofcbrCol = [
  { id: 'drtn_angl', title: '방향각도(°)' },
 ]
 export const stofcbrCol2 = [
-  // { id: 'ftre_smbol_cd', title: '지형지물부호코드' },
-  { id: 'pbadmsEmdCd', title: '시설관리번호' },
-  // { id: 'pbadms_emd_cd', title: '행정읍면동코드' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fcltMngNo', title: '시설관리번호' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
  { id: 'mapshtNo', title: '도엽번호' },
-  // { id: 'mng_inst_cd', title: '관리기관코드' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
  { id: 'instlYmd', title: '설치일자' },
-  // { id: 'fclty_shp_cd', title: '시설물형태코드' },
+  // { id: 'fcltyShpCd', title: '시설물형태코드' },
  { id: 'worflwWallHgt', title: '월류벽높이(m)' },
-  // { id: 'mhl_exst_yn_cd', title: '맨홀존재여부코드' },
-  // { id: 'swage_mhl_ftre_smbol_cd', title: '하수맨홀지형지물부호코드' },
+  // { id: 'mhlExstYnCd', title: '맨홀존재여부코드' },
+  // { id: 'swageMhlFtreSmbolCd', title: '하수맨홀지형지물부호코드' },
  { id: 'swageMhlMngNo', title: '하수맨홀관리번호' },
  { id: 'drtnAngl', title: '방향각도(°)' },
 ]
@@ -6,7 +6,7 @@ import { useGisContext } from "@common/business_components/ui/map/Gis";
 import { Button } from "@common/components/ui";
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { getLayerContentComponent } from "./components/common";
-import { SwtrmtFcltCol, SwtrmtFcltCol2, SwtrmtPrcsZoneCol, SwtrmtPrcsZoneCol2, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, MsSwagePplCol2, ExclnSewagePumpCol, ExclnSewagePumpCol2, DrtwSewagePumpCol1, DrtwSewagePumpCol2, MsSwageMhlCol, MsSwageMhlCol2, stofcbrCol, stofcbrCol2, MS_SWAGE_MHL_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from "./components/common/table";
+import { SwtrmtFcltCol, SwtrmtFcltCol2, SwtrmtPrcsZoneCol, SwtrmtPrcsZoneCol2, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, MsSwagePplCol2, ExclnSewagePumpCol, ExclnSewagePumpCol2, DrtwSewagePumpCol, DrtwSewagePumpCol2, MsSwageMhlCol, MsSwageMhlCol2, stofcbrCol, stofcbrCol2, MS_SWAGE_MHL_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from "./components/common/table";
 import InfilChart from './components/popupComponent/chart/infilChart';
 import RdiiChart from './components/popupComponent/chart/rdiiChart';
 import { useInfilChartModalStore, useRdiiChartModalStore } from "./components/popupComponent/chartModalStore";
@@ -14,7 +14,6 @@ import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
 import { codeMapper } from "./components/common/codeMapper";


-// TODO:
 const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
  const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
  const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
@@ -59,59 +58,118 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
    let result = null;
    const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
    let featureLayer: { get: (key: string) => any }; // 피처가 속한 레이어를 찾기 위한 변수
-    layers.forEach((layer: any) => {
+    layers.some((layer: any) => {
      const source = layer.getSource();
+      // console.log('실행됨3 source', source);
+      // console.log('실행됨3 featureData', featureData);
+      // console.log('실행됨3 featureData.fid', featureData.fid);
+      // if (source && featureData && featureData.fid) {
+      //   featureLayer = layer; // 피처가 속한 레이어 찾기
+      // }
      if (source && source.hasFeature && featureData
        && typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
        featureLayer = layer; // 피처가 속한 레이어 찾기
+        return true; // 반복 종료
      }
+      return false;
    });
-    // console.log("featureLayer.get('lyrTyNm');", featureLayer.get('lyrTyNm'));
-    // SearchModal 클릭 이벤트
-    if (featureLayer.get('lyrNm') === null) {
-      setIsClicked(false);
-      if (featureData.lyrTypeNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설';
-      else if (featureData.lyrTypeNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역';
-      else if (featureData.lyrTypeNm === 'tb_ms_stofcbr') result = '우수토실';
-      else if (featureData.lyrTypeNm === 'om_dt_untrt_swg_rain') result = '중점우수토실';
-      else if (featureData.lyrTypeNm === 'tb_ms_swage_ppl') result = '하수관로';
-      else if (featureData.lyrTypeNm === 'tb_ms_swage_pmstn') {
-        const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장');
-        console.log('값 비교', featureData.values_.usg_cd.trim(), drtwPumpCode?.val);
-        if (drtwPumpCode && featureData.values_.usg_cd.trim() === drtwPumpCode.val) {
-          setIsDrtwSewagePump(false);
-        } else {
-          setIsDrtwSewagePump(true);
-        }
-        result = '하수펌프장';
-      }
-      else if (featureData.lyrTypeNm === 'tb_ms_swage_mhl') result = '하수맨홀';
-    }
-    else {
+
+    if (featureData['ol_uid']) {
      // Gis 레이어 클릭 이벤트
      setIsClicked(true);
-      const lyrTyNm = featureLayer.get('lyrTyNm');
-      if (lyrTyNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설';
-      else if (lyrTyNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역';
-      else if (lyrTyNm === 'tb_ms_stofcbr') result = '우수토실';
-      else if (lyrTyNm === 'om_dt_untrt_swg_rain') result = '중점우수토실';
-      else if (lyrTyNm === 'tb_ms_swage_ppl') result = '하수관로';
-      else if (lyrTyNm === 'tb_ms_swage_pmstn') {
+      console.log('gis data', featureData.values_);
+      const lyrTyNm = featureData.id_.split('.')[0];
+      if (lyrTyNm === 'tb_ms_swage_ppl') {
+        result = '하수관로';
+        setHeadlist(MsSwagePplCol)
+        setLayerSpecificNm(featureData.values_.fclt_mng_no);
+      }
+      else if (lyrTyNm === 'tb_ms_swage_mhl') {
+        result = '하수맨홀';
+        setHeadlist(MsSwageMhlCol)
+      }
+      else if (lyrTyNm === 'tb_ms_swage_pmstn') { // 하수펌프장
        const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장');
-        console.log('값 비교', featureData.values_.usg_cd.trim(), drtwPumpCode?.val);
        if (drtwPumpCode && featureData.values_.usg_cd.trim() === drtwPumpCode.val) {
          setIsDrtwSewagePump(false);
-        } else {
+          setHeadlist(ExclnSewagePumpCol)
+        }
+        else {
          setIsDrtwSewagePump(true);
+          setHeadlist(DrtwSewagePumpCol)
        }
        result = '하수펌프장';
      }
-      else if (lyrTyNm === 'tb_ms_swage_mhl') result = '하수맨홀';
+      else if (lyrTyNm === 'tb_il_swage_prcs_fclt') {
+        result = '하수처리시설';
+        setHeadlist(SwtrmtFcltCol)
+      }
+      else if (lyrTyNm === 'tb_ms_swage_prcs_zone') {
+        result = '하수처리구역';
+        setHeadlist(SwtrmtPrcsZoneCol)
+      }
+      else if (lyrTyNm === 'tb_ms_stofcbr') {
+        result = '우수토실';
+        setHeadlist(stofcbrCol)
+      }
+      else if (lyrTyNm === 'om_dt_untrt_swg_rain') {
+        result = '중점우수토실';
+        setHeadlist(untrtSwgRainCol1)
+        setHeadlist2(untrtSwgRainCol2)
+      }
      else result = featureLayer.get('lyrNm');
    }
+    else {
+      // SearchModal 클릭 이벤트
+      setIsClicked(false);
+      console.log('SearchModal data', featureData);
+      const lyrTyNm = featureData.lyrTypeNm;
+      console.log('실행됨4 SearchModal 클릭 이벤트', lyrTyNm);
+      console.log('실행됨4 SearchModal 클릭 이벤트 featureData', featureData);
+      if (featureData.lyrTypeNm === 'tb_ms_swage_ppl') {
+        result = '하수관로';
+        setHeadlist(MsSwagePplCol2)
+        setLayerSpecificNm(featureData.swtrmtFcltCd);
+      }
+      else if (featureData.lyrTypeNm === 'tb_ms_swage_mhl') {
+        result = '하수맨홀';
+        setHeadlist(MsSwageMhlCol2)
+        setLayerSpecificNm(featureData.fcltMngNo);
+      }
+      else if (featureData.lyrTypeNm === 'tb_ms_swage_pmstn') { // 하수펌프장
+        const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장');
+        if (drtwPumpCode && featureData.usgCd.trim() === drtwPumpCode.val) {
+          console.log('오수펌프장');
+          setIsDrtwSewagePump(false);
+          setHeadlist(ExclnSewagePumpCol2)
+        }
+        else {
+          console.log('빗물펌프장');
+          setIsDrtwSewagePump(true);
+          setHeadlist(DrtwSewagePumpCol2)
+        }
+        setLayerSpecificNm(featureData.fcltMngNo);
+        result = '하수펌프장';
+      }
+      else if (featureData.lyrTypeNm === 'tb_il_swage_prcs_fclt') {
+        result = '하수처리시설';
+        setHeadlist(SwtrmtFcltCol2)
+        setLayerSpecificNm(featureData.swtrmtFcltCd);
+      }
+      else if (featureData.lyrTypeNm === 'tb_ms_swage_prcs_zone') {
+        result = '하수처리구역';
+        setHeadlist(SwtrmtPrcsZoneCol2);
+        setLayerSpecificNm(featureData.swtrmtFcltCd);
+      }
+      else if (featureData.lyrTypeNm === 'tb_ms_stofcbr') {
+        result = '우수토실';
+        setHeadlist(stofcbrCol2)
+        setLayerSpecificNm(featureData.fcltMngNo);
+      }
+      // else if (featureData.lyrTypeNm === 'om_dt_untrt_swg_rain') result = '중점우수토실';
+    }

    return result;
-    // return featureLayer.get('lyrNm'); // 레이어 이름 출력
  };

  useEffect(() => {
@@ -122,8 +180,10 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
        const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
        setLayerNm(selectedLayerName); // 상태 업데이트

-        console.log('gis data', featureData.values_);
-        const data = featureData.values_;
+        // console.log('gis data', featureData.values_);
+        let data;
+        if (featureData['ol_uid']) data = featureData.values_;  // Gis 레이어 클릭 이벤트일 때
+        else data = featureData;  // SearchModal 클릭 이벤트일 때

        // 하수맨홀인 경우 용도코드를 텍스트로 변환
        if (selectedLayerName === '하수맨홀' && data) {
@@ -139,16 +199,11 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
        // 🎯 기본 데이터 포맷팅
        const formattedData = formatDisplayData(data);

-        if (featureData?.values_?.fclt_mng_no) setLayerSpecificNm(featureData.values_.fclt_mng_no);
-        else if (featureData?.values_?.swtrmt_fclt_cd) setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd);
-        else setLayerSpecificNm(featureData?.values_?.manage_no);
        setFetchData(formattedData);
        setTableData(formattedData);

        switch (selectedLayerName) {
          case '하수관로':
-            if (isClicked) setHeadlist(MsSwagePplCol)
-            else setHeadlist(MsSwagePplCol2)
            setButtonChk(true)

            // ✅ codeMapper 사용하여 API 결과도 변환
@@ -156,12 +211,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
              layerName: selectedLayerName,
              data: { ...formattedData }
            }));
-            // setFetchData(mappedData);
-            // setTableData(mappedData);
            break;
          case '하수맨홀':
-            if (isClicked) setHeadlist(MsSwageMhlCol)
-            else setHeadlist(MsSwageMhlCol2)
            setButtonChk(true)

            // ✅ codeMapper 사용하여 API 결과도 변환
@@ -169,46 +220,26 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
              layerName: selectedLayerName,
              data: { ...formattedData }
            }));
-            // setFetchData(mappedData);
-            // setTableData(mappedData);
            break;
          case '하수펌프장':
-            if (isDrtwSewagePump) {
-              if (isClicked) setHeadlist(DrtwSewagePumpCol1)
-              else setHeadlist(DrtwSewagePumpCol2)
-            } else {
-              if (isClicked) setHeadlist(ExclnSewagePumpCol)
-              else setHeadlist(ExclnSewagePumpCol2)
-            }
-
            setButtonChk(true)

            setTableData(codeMapper({
              layerName: selectedLayerName,
              data: { ...formattedData }
            }));
-            // setFetchData(mappedData);
-            // setTableData(mappedData);
            break;
          case '하수처리시설':
-            if (isClicked) setHeadlist(SwtrmtFcltCol)
-            else setHeadlist(SwtrmtFcltCol2)
            setButtonChk(false)
            break;
          case '하수처리구역':
-            if (isClicked) setHeadlist(SwtrmtPrcsZoneCol)
-            else setHeadlist(SwtrmtPrcsZoneCol2)
            setButtonChk(false)
            break;
          case '우수토실':
-            if (isClicked) setHeadlist(stofcbrCol)
-            else setHeadlist(stofcbrCol2)
            setButtonChk(true)
            setIsMainSsc(false)
            break;
          case '중점우수토실':
-            setHeadlist(untrtSwgRainCol1)
-            setHeadlist2(untrtSwgRainCol2)
            setButtonChk(false)
            setIsMainSsc(true)
            // 🎯 processedData도 포맷팅하여 설정