feat: 하수관로 상세정보 API 구현 (백엔드 연결시 추후 테스트 필요)

apps/sn/app/(map-layout)/map/components/common/index.ts

@@ -20,9 +20,7 @@ type LayerContentMap = {
 // 레이어 선택시 변경되는 팝업 컨텐츠 동적으로 변경하도록 작업
 const layerContentMap: LayerContentMap = {
   // TODO: gis데이터 추가되면 추가 작업 필요
-  // "하수처리시설": { component: SwtrmtFclt, },
-  // 하수관로 개발용
-  "하수처리시설": { component: MsSwagePpl, },
+  "하수처리시설": { component: SwtrmtFclt, },
   "하수처리구역": {},
   "우수토실": { component: Ssc, },
   "중점우수토실": { component: Ssc, }, // 중점우수토실 여부 설정

apps/sn/app/(map-layout)/map/components/common/table.ts

@@ -1,3 +1,32 @@
+// 하수관로
+export const MsSwagePplCol = [
+  { id: 'avg_grdn', title: '평균구배' },
+  { id: 'clar_fvlc', title: '맑음유속' },
+  { id: 'drtw_mltv_area', title: '오수배수면적' },
+  { id: 'excln_mltv_area', title: '우수배수면적' },
+  { id: 'fclt_mng_no', title: '시설관리번호' },
+  { id: 'fclty_shp_cd', title: '시설물형태코드' },
+  { id: 'fid', title: 'FID' },
+  { id: 'ftre_smbol_cd', title: '지형지물부호코드' },
+  { id: 'inst_mng_no', title: '기관관리번호' },
+  { id: 'instl_ymd', title: '설치일자' },
+  { id: 'mapsht_no', title: '도엽번호' },
+  { id: 'mng_inst_cd', title: '관리기관코드' },
+  { id: 'mqlt_cd', title: '재질코드' },
+  { id: 'pbadms_emd_cd', title: '행정읍면동코드' },
+  { id: 'pdmt', title: '관경' },
+  { id: 'prlg', title: '연장' },
+  { id: 'rnyssn_fvlc', title: '우기유속' },
+  { id: 'scend_dpth', title: '종점깊이' },
+  { id: 'scend_mhl_mng_no', title: '종점맨홀관리번호' },
+  { id: 'tmpt_dpth', title: '시점깊이' },
+  { id: 'tmpt_mhl_mng_no', title: '시점맨홀관리번호' },
+  { id: 'trfln_cnt', title: '차선수' },
+  { id: 'usg_cd', title: '용도코드' },
+  { id: 'vrtc_len', title: '세로길이' },
+  { id: 'wdth_len', title: '가로길이' },
+]
+
 // 하수처리시설
 export const SwtrmtFcltCol = [
   { id: 'swtrmtFcltNm', title: '하수처리시설명' },

apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx

@@ -5,8 +5,9 @@ import InputSection from '../InputSection';
 import { handleInputChange } from '../common';
 import { Button } from '@common/components/ui';
 import InfilChart from './chart/infilChart';
+
+
 // 하수관로
-// TODO: RDII 버튼인가 그거 팝업 두개 구현 필요
 const inputColumn = [
   { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
   { id: "swtrmt_zone_cd", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
@@ -16,8 +17,7 @@ const inputColumn = [
   { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
   { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
 ];
-const MsSwagePpl = ({ featureData }: { featureData: any }) => { // SwtrmtFclt
-  console.log("featureData", featureData);
+const MsSwagePpl = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [btnTxt, setBtnTxt] = useState<string>("");
   const openModal = (e: React.MouseEvent<HTMLButtonElement>) => {

apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx

@@ -19,7 +19,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
   const [popupOpen, setPopupOpen] = React.useState(true);
   const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
   const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
-  const [aplcnYm, setAplcnYm] = useState("");
+  const [aplcnYm, setAplcnYm] = useState("0");
   const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
   const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
   const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보

apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx

@@ -6,7 +6,7 @@ import { useGisContext } from "@common/business_components/ui/map/Gis";
 import { Button } from "@common/components/ui";
 import { useEffect, useRef, useState } from "react";
 import { getLayerContentComponent } from "./components/common";
-import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2 } from "./components/common/table";
+import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol } from "./components/common/table";
 // 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; };
@@ -42,8 +42,17 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
       if (featureData.lyrTypeNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설';
       else if (featureData.lyrTypeNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역';
       else if (featureData.lyrTypeNm === 'om_dt_untrt_swg_rain') result = '중점우수토실';
+      else if (featureData.lyrTypeNm === 'tb_ms_swage_ppl') result = '하수관로';
+      // else if (featureData.lyrTypeNm === 'om_dt_untrt_swg_rain') result = '중점우수토실';
+    }
+    else {
+      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 === 'om_dt_untrt_swg_rain') result = '중점우수토실';
+      else if (lyrTyNm === 'tb_ms_swage_ppl') result = '하수관로';
+      else result = featureLayer.get('lyrNm');
     }
-    else result = featureLayer.get('lyrNm');
 
     return result;
     // return featureLayer.get('lyrNm'); // 레이어 이름 출력
@@ -86,6 +95,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
             setButtonChk(true)
             break;
           case '하수관로':
+            setHeadlist(MsSwagePplCol)
             setButtonChk(true)
             break;
           case '오수펌프':