Merge branch 'iipbs/sn/ii' into iipbs/sn/dev

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

@@ -21,15 +21,14 @@ type LayerContentMap = {
 const layerContentMap: LayerContentMap = {
   // TODO: gis데이터 추가되면 추가 작업 필요
   "하수처리시설": { component: SwtrmtFclt, },
-  // 하수관로 개발용
-  // "하수처리시설": { component: MsSwagePpl, },
   "하수처리구역": {},
   "우수토실": { component: Ssc, },
   "중점우수토실": { component: Ssc, }, // 중점우수토실 여부 설정
   "하수관로": { component: MsSwagePpl, },
   "하수맨홀": { component: smh, },
-  "빗물펌프": { component: StormWaterPump },
-  "오수펌프": { component: sewagePump },
+  "하수펌프장": { component: sewagePump },
+  // "빗물펌프": { component: StormWaterPump },
+  // "오수펌프": { component: sewagePump },
 };
 
 // 동적 컴포넌트 반환 함수

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

@@ -1,3 +1,33 @@
+// 하수관로
+export const MsSwagePplCol = [
+  { id: 'avgGrdn', title: '평균구배' },
+  { id: 'clarFvlc', title: '맑음유속' },
+  { id: 'drtwMltvArea', title: '오수배수면적' },
+  { id: 'exclnMltvArea', title: '우수배수면적' },
+  { id: 'fcltMngNo', title: '시설관리번호' },
+  // { id: 'fcltyShpCd', title: '시설물형태코드' },
+  // { id: 'fid', title: 'FID' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'instMngNo', title: '기관관리번호' },
+  { id: 'instlYmd', title: '설치일자' },
+  { id: 'mapshtNo', title: '도엽번호' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  // { id: 'mqltCd', title: '재질코드' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  { id: 'pdmt', title: '관경' },
+  { id: 'prlg', title: '연장' },
+  { id: 'rnyssnFvlc', title: '우기유속' },
+  { id: 'scendDpth', title: '종점깊이' },
+  { id: 'scendMhlMngNo', title: '종점맨홀관리번호' },
+  { id: 'tmptDpth', title: '시점깊이' },
+  { id: 'tmptMhlMngNo', title: '시점맨홀관리번호' },
+  { id: 'trflnCnt', title: '차선수' },
+  // { id: 'usgCd', title: '용도코드' },
+  { id: 'vrtcLen', title: '세로길이' },
+  { id: 'wdthLen', title: '가로길이' },
+  // { id: 'lyrTypeNm', title: '레이어타입명' },
+]
+
 // 하수처리시설
 export const SwtrmtFcltCol = [
   { id: 'swtrmtFcltNm', title: '하수처리시설명' },
@@ -6,7 +36,7 @@ export const SwtrmtFcltCol = [
   { id: 'cmcnYmd', title: '준공일자' },
   { id: 'oprtngStrtYmd', title: '가동개시일자' },
   { id: 'clsgYmd', title: '폐쇄일자' },
-  { id: 'prcsMsrcCd', title: '처리공법코드' },
+  // { id: 'prcsMsrcCd', title: '처리공법코드' },
   // { id: 'laeCd', title: '지자체코드' },
   { id: 'laeNm', title: '지자체명' },
   { id: 'ctpvNm', title: '시도명' },
@@ -52,27 +82,49 @@ export const SwtrmtPrcsZoneCol = [
 
 // 하수맨홀
 export const MsSwageMhlCol = [
-  { id: 'fid', title: 'FID' },
-  { id: 'geom', title: 'geometry' },
-  { id: 'ftreSmblCd', title: '지형지물부호코드' },
-  { id: 'mngNo', title: '관리번호' },
+  // { id: 'fid', title: 'FID' },
+  // { id: 'geom', title: 'geometry' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fcltMngNo', title: '시설관리번호' },
   // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
   { id: 'mapshtNo', title: '도엽번호' },
   // { id: 'mngInstCd', title: '관리기관코드' },
   { id: 'instlYmd', title: '설치일자' },
   { id: 'lastDrdgnYmd', title: '최종준설일자' },
-  { id: 'usgCd', title: '용도코드' },
+  // { id: 'usgCd', title: '용도코드' },
   // { id: 'fcltyShpCd', title: '시설물형태코드' },
-  { id: 'mhlKndCd', title: '맨홀종류코드' },
+  // { id: 'mhlKndCd', title: '맨홀종류코드' },
   { id: 'swageMhDiam', title: '하수맨홀구경' },
   { id: 'wdthLen', title: '가로길이' },
   { id: 'vrtcLen', title: '세로길이' },
   // { id: 'mqltCd', title: '재질코드' },
-  { id: 'altdVl', title: '표고값' },
-  { id: 'dpthlVl', title: '심도값' },
-  { id: 'instMngNo', title: '기관관리번호' }
+  { id: 'altdVl', title: '표고' },
+  { id: 'dpthlVl', title: '심도' },
+  // { id: 'instMngNo', title: '기관관리번호' }
 ];
 
+// 하수펌프장
+export const SewagePump = [
+  // { id: 'fid', title: 'FID' },
+  // { id: 'geom', title: 'geometry' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fcltMngNo', title: '시설관리번호' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  { id: 'mapshtNo', title: '도엽번호' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  { id: 'instlYmd', title: '설치일자' },
+  { id: 'swagePmstnNm', title: '하수펌프장명' },
+  { id: 'pllnArea', title: '부지면적' },
+  // { id: 'opngSttsCd', title: '개통상태코드' },
+  // { id: 'usgCd', title: '용도코드' },
+  { id: 'dailyPrcsCpct', title: '일일처리용량' },
+  { id: 'maxImpndCpct', title: '최대저수용량' },
+  { id: 'altdVl', title: '표고' },
+  { id: 'wtlvVl', title: '수위' },
+  { id: 'exclnWpmpAblt', title: '우수양수능력' },
+  { id: 'instMngNo', title: '기관관리번호' },
+]
+
 // 중점우수토실 측정지점
 export const untrtSwgRainCol1 = [
   { id: 'manage_no', title: '관리번호' },

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

@@ -7,7 +7,6 @@ import { Button } from '@common/components/ui';
 import InfilChart from './chart/infilChart';
 import RdiiChart from './chart/rdiiChart';
 // 하수관로
-// TODO: RDII 버튼인가 그거 팝업 두개 구현 필요
 const inputColumn = [
   { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
   { id: "swtrmt_zone_cd", title: "처리구역", type: "select", options: ["구역1", "구역2"] },

apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts

@@ -27,34 +27,6 @@ export type TInftwtAnlsRslt = {
   anlsTm: string;
   predcOilq:number;
 }
-export type TRdiiAnls = {
-  rainInfwtAnlsSn:number;
-  aplcnYm: string;
-  enoCd: string;
-  ctpvCd: string;
-  sggCd: string;
-  swageTmplntCd: string;
-  swageTmplntNm: string;
-  swtrmtZoneCd: string;
-  swtrmtZoneNm: string;
-  atflCd: string;
-  atflId: string;
-  atflInpNm: string;
-  atflHrPttnNm: string;
-  atflMpngNm: string;
-  atflRainNm: string;
-  atflNm: string;
-  drtwSwtcRt:number;
-  anlsInfo: string;
-  scsYn: string;
-  srcNm: string; // 출처이름
-};
-export type TRdiiAnlsRslt = {
-  rainInfwtAnlsSn: number;
-  pplMngNo: string;
-  anlsTm: string;
-  predcOilq:number;
-}
 export type TOilqData = {
   inftwtAnlsSn: number; // 침입수분석 일련번호
   pplMngNo: string; // 관로관리번호 
@@ -73,31 +45,6 @@ const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] =
     yyyymms1.unshift({ val: '0', text: '선택' });
     return yyyymms1;
 };
-const selectAplcnYms = async(gubun:string) => { // 상수사용월
-    try {
-    const queryString = '';
-    const result = await getData(`v1/${gubun}/aplcnYm${queryString ? `?${queryString}` : ''}`);
-    if (result && result.length > 0) {
-        console.log("selectAplcnYms", result);
-        return getOptionsAplcnYm(result);
-    }
-    } catch (error) {
-    console.error(error);
-    }
-};
-export const useAplcnYms = (gubun:string) => {
-  const [data, setData] = useState<{ text: string; val: string }[]>([]);
-
-  useEffect(() => {
-    const fetch = async (gubun:string) => {
-      const result = await selectAplcnYms(gubun);
-      if (result) setData(result);
-    };
-    fetch(gubun);
-  }, []);
-
-  return data;
-};
 export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number }[] => {
   const options = anlsArr.map(anls => ({
     text: anls.anlsInfo,
@@ -106,13 +53,38 @@ export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string
   options.unshift({ val: 0, text: '선택' });
   return options;
 };
+const selectAplcnYms = async() => { // 상수사용월
+    try {
+    const queryString = '';
+    const result = await getData(`v1/inftwtAnlsRslt/aplcnYm${queryString ? `?${queryString}` : ''}`);
+    if (result && result.length > 0) {
+        console.log("selectAplcnYms", result);
+        return getOptionsAplcnYm(result);
+    }
+    } catch (error) {
+    console.error(error);
+    }
+};
+export const useAplcnYms = () => {
+  const [data, setData] = useState<{ text: string; val: string }[]>([]);
+
+  useEffect(() => {
+    const fetch = async () => {
+      const result = await selectAplcnYms();
+      if (result) setData(result);
+    };
+    fetch();
+  }, []);
+
+  return data;
+};
 
 export const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석 
   try {
     const queryString = aplcnYm ? `aplcnYm=${aplcnYm}` : '';
     const result = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`);
     if (result && result.numberOfElements > 0) {
-        console.log("selectInftwtAnls", result.content);
+        //console.log("selectInftwtAnls", result.content);
         return result.content;
     } 
   } catch (error) {
@@ -134,7 +106,7 @@ export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string)
     }
     const result = await getData(`v1/inftwtAnlsRslt/ppl/${inftwtAnlsSn}/${pplMngNo}`);
     if (result && result.numberOfElements > 0) {
-        console.log("selectInftwtAnlsRslt", result.content);
+        //console.log("selectInftwtAnlsRslt", result.content);
         return result.content;
     } 
   } catch (error) {
@@ -163,47 +135,3 @@ export const selectOilq = async(inftwtAnlsSn:number, pplMngNo:string) => { //
     console.error(error);
   }
 };
-
-export const getOptionsRdiiAnlsInfo = (anlsArr: TRdiiAnls[]): { text: string; val: number }[] => {
-  const options = anlsArr.map(anls => ({
-    text: anls.anlsInfo,
-    val: anls.rainInfwtAnlsSn,
-  }));
-  options.unshift({ val: 0, text: '선택' });
-  return options;
-};
-
-export const selectRdiiAnls = async(aplcnYm:String) => { // 침입수분석 
-  try {
-    const queryString = aplcnYm ? `aplcnYm=${aplcnYm}` : '';
-    const result = await getData(`v1/rdiiAnls${queryString ? `?${queryString}` : ''}`);
-    if (result && result.numberOfElements > 0) {
-        console.log("selectRdiiAnls", result.content);
-        return result.content;
-    } 
-  } catch (error) {
-    console.error(error);
-  }
-};
-export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => {
-  const options = arr.map(anlsRslt => ({
-    label: anlsRslt.anlsTm,
-    val: anlsRslt.predcOilq,
-  }));
-  return options;
-};
-export const selectRdiiAnlsRslt = async(rainInfwtAnlsSn:number, pplMngNo:string) => { // 침입수분석 결과
-  try {
-    if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0) || !pplMngNo) {
-      console.warn("RdiiAnlsSn or pplMngNo is not provided");
-      return [];
-    }
-    const result = await getData(`v1/rdiiAnlsRslt/ppl/${rainInfwtAnlsSn}/${pplMngNo}`);
-    if (result && result.numberOfElements > 0) {
-        console.log("selectRdiiAnlsRslt", result.content);
-        return result.content;
-    } 
-  } catch (error) {
-    console.error(error);
-  }
-};

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

@@ -6,7 +6,6 @@ import React, { useEffect, useState } from 'react';
 
 import type { TInftwtAnls } from './aplcnYms';
 import { getChartDataInftwtAnlsRslt, getOptionsInftwtAnlsInfo, selectInftwtAnls, selectInftwtAnlsRslt, useAplcnYms } from './aplcnYms';
-import { selectOilq, getChartDataOilq } from './aplcnYms';
 type ModalOpenProp = {
   isModalOpen: boolean,
   setIsModalOpen: (open: boolean) => void,
@@ -14,11 +13,13 @@ type ModalOpenProp = {
   btnTxt?: string,
 }
 
+
+
 const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => {
   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); // 침입수분석정보
@@ -31,8 +32,13 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
     { label: "3", val: 35 },
     { label: "5", val: 55 },],
   });
+  // chartData1: [],chartData2: [],});
 
-  const aplcnYms = useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기
+  // API에서 데이터를 가져오지 못할 경우 더미 데이터 사용
+  // const aplcnYms = useAplcnYms().length > 0 ? useAplcnYms() : dummyAplcnYms;
+
+  //const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]);
+  const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기
   const openPopup = () => {
     if (buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
@@ -75,7 +81,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
     // aplcnYm이 비어있거나 "0"이면 API 호출하지 않음
     if (!aplcnYm || aplcnYm === "0" || aplcnYm === "") {
       setInftwtAnlsSn(0); // 초기화
-      setInftwtAnlsInfos([]);
+      setInftwtAnlsInfos([{ val: 0, text: '선택' }]);
       return;
     }
 
@@ -83,25 +89,23 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
       .then((data) => {
         setInftwtAnlss(data ?? []);
         setInftwtAnlsInfos(getOptionsInftwtAnlsInfo(data));
-        setInftwtAnlsSn(0); // 초기화
       })
       .catch((error) => {
         console.error("selectInftwtAnls 에러:", error);
         setInftwtAnlss([]);
-        setInftwtAnlsInfos([]);
+        setInftwtAnlsInfos([{ val: 0, text: '선택' }]);
       });
-    
+    setInftwtAnlsSn(0); // 초기화
   }, [aplcnYm]);
 
   // 값 표시
   useEffect(() => {
     // 선택된 침입수분석 정보에 대한 처리 로직
-    if (inftwtAnlsSn === 0) return;
     const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === inftwtAnlsSn);
     if (selectedAnls) {
       setInftwtAnls(selectedAnls);
     }
-  }, [inftwtAnlsSn]);
+  }, [inftwtAnlsSn, inftwtAnlss]);
 
   const closePopup = () => {  // 팝업 닫기
     selectInftwtAnlsRslt(inftwtAnlsSn, "L13101003").then((data) => {// 침입수분석 결과 조회
@@ -111,14 +115,13 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
         chartData1: rsltData // 침입수분석결과
       }));
     });
-
-    selectOilq(inftwtAnlsSn,"L13101003").then((data) => {// 유량 조회
-      const rsltData = getChartDataOilq(data ?? []);
-      setChartData(prev => ({
-        ...prev,
-        chartData2: rsltData // 유량
-      }));
-    });
+    // selectOilq(inftwtAnlsSn,"L13101003").then((data) => {// 유량 조회
+    //   const rsltData = getChartDataOilq(data ?? []);
+    //   setChartData(prev => ({
+    //     ...prev,
+    //     chartData2: rsltData // 유량
+    //   }));
+    // });
     setPopupOpen(false);
   };
 
@@ -162,7 +165,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
             <div className='flex items-center justify-between'>
               <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">상수사용월:</Label>
               <SelectBox
-                className="w-[200px] mr-8 z-[51] mb-2"
+                className="w-[200px] mr-8 z-[51]"
                 selectClass="rounded-lg bg-white"
                 label=''
                 selectArray={aplcnYms}
@@ -175,7 +178,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
             <div className='flex items-center justify-between'>
               <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">분석정보:</Label>
               <SelectBox
-                className="w-[200px] mr-8 z-[51] mb-2"
+                className="w-[200px] mr-8 z-[51]"
                 selectClass="rounded-lg bg-white"
                 label=''
                 selectArray={inftwtAnlsInfos}
@@ -188,7 +191,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
             <div className='flex items-center justify-between'>
               <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">오수전환율:</Label>
               <Input
-                className="mr-8 w-[200px] !text-xl placeholder:text-center mb-2"
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
                 placeholder="입력"
                 value={inftwtAnls?.drtwSwtcRt ?? ""}
                 readOnly={true}
@@ -197,7 +200,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
             <div className='flex items-center justify-between'>
               <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">시간패턴 파일명:</Label>
               <Input
-                className="mr-8 w-[200px] !text-xl placeholder:text-center mb-2"
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
                 placeholder="입력"
                 value={inftwtAnls?.atflHrPttnNm ?? ""}
                 readOnly={true}
@@ -206,7 +209,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
             <div className='flex items-center justify-between'>
               <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">수용가-맨홀 매칭:</Label>
               <Input
-                className="mr-8 w-[200px] !text-xl placeholder:text-center mb-2"
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
                 placeholder="입력"
                 value={inftwtAnls?.atflMpngNm ?? ""}
                 readOnly={true}
@@ -215,7 +218,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
             <div className='flex items-center justify-between'>
               <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">관망도 파일명:</Label>
               <Input
-                className="mr-8 w-[200px] !text-xl placeholder:text-center mb-2"
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
                 placeholder="입력"
                 value={inftwtAnls?.atflInpNm ?? ""}
                 readOnly={true}
@@ -224,7 +227,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
             <div className='flex items-center justify-between'>
               <Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">유량 파일명:</Label>
               <Input
-                className="mr-8 w-[200px] !text-xl placeholder:text-center mb-2"
+                className="mr-8 w-[200px] !text-xl placeholder:text-center"
                 placeholder="입력"
                 value={inftwtAnls?.atflOilqNm ?? "없음"}
                 readOnly={true}
@@ -247,7 +250,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
       onOpenChange={setIsModalOpen}
       bodyClass={`
             h-[50vh]
-            w-[50vw]
+            w-[40vw]
             max-w-none
             max-h-none
             overflow-visible

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

@@ -5,13 +5,15 @@ const inputColumn = [
   { id: "mltv_dtdv_nm", title: "배수분구", type: "input" },
   { id: "freq", title: "설계빈도", type: "input" },
 ]
-// 오수펌프
-const sewagePump = ({ featureData }: { featureData: any }) => {
+// 하수펌프장
+const sewagePump = () => {
   return (
-    <div><VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
-      throw new Error('Function not implemented.');
-    }} />
-    </div>
+    <>
+      <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
+        throw new Error('Function not implemented.');
+      }}
+      />
+    </>
   )
 }
 

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, SewagePump, MsSwageMhlCol } 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; };
@@ -37,13 +37,26 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
         featureLayer = layer; // 피처가 속한 레이어 찾기
       }
     });
+    console.log("featureLayer.get('lyrTyNm');", featureLayer.get('lyrTyNm'));
     // SearchModal 클릭 이벤트와 Gis 클릭 이벤트 구분하기
     if (featureLayer.get('lyrNm') === null) {
       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 === 'tb_ms_swage_pmstn') result = '하수펌프장';
+      else if (featureData.lyrTypeNm === 'tb_ms_swage_mhl') 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 if (lyrTyNm === 'tb_ms_swage_pmstn') result = '하수펌프장';
+      else if (lyrTyNm === 'tb_ms_swage_mhl') result = '하수맨홀';
+      else result = featureLayer.get('lyrNm');
     }
-    else result = featureLayer.get('lyrNm');
 
     return result;
     // return featureLayer.get('lyrNm'); // 레이어 이름 출력
@@ -86,15 +99,21 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
             setButtonChk(true)
             break;
           case '하수관로':
+            setHeadlist(MsSwagePplCol)
             setButtonChk(true)
             break;
-          case '오수펌프':
-            setButtonChk(true)
-            break;
-          case '빗물펌프':
+          // case '오수펌프':
+          //   setButtonChk(true)
+          //   break;
+          // case '빗물펌프':
+          //   setButtonChk(true)
+          //   break;
+          case '하수펌프장':
+            setHeadlist(SewagePump)
             setButtonChk(true)
             break;
           case '하수맨홀':
+            setHeadlist(MsSwageMhlCol)
             setButtonChk(true)
             break;
           default:

apps/sn/app/components/lib/utils/date.ts

@@ -11,3 +11,15 @@ export const yearOptions = Array.from({ length: 10 }, (_, i) => {
   const year = new Date().getFullYear() - i;
   return { text: `${year}년`, val: year.toString() };
 });
+
+// ["202506", "202505", "202502", "202405"] 을 SelectBox의 옵션으로 변환
+export const convertToTextValArray = (yyyymms: string[]): { text: string; val: string }[] => {
+  return yyyymms.map(dateStr => {
+    const year = dateStr.slice(0, 4);
+    const month = dateStr.slice(4, 6);
+    return {
+      text: `${year}-${month}`,
+      val: dateStr
+    };
+  });
+};