feat: 우수토실 상세정보 구현

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

@@ -8,7 +8,7 @@ import { UITab2 } from '@common/business_components/ui/tab/index-2';
 import { SelectBox2 } from '@common/business_components/ui/select/index-2';
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
-import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, SewagePump2, stofcbr2 } from './components/common/table';
+import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, SewagePump2, stofcbrCol2 } from './components/common/table';
 import LoadingOverlay from '@/components/ui/LoadingBar';
 
 const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;
@@ -38,38 +38,7 @@ const WORK_TYPES = [
 ];
 
 const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`);
-// 테이블 헤더 리스트
-// 하수관로
-const swagePplTableHeadlist = [
-  { id: 'pipeNumber', title: '관로번호' },
-  { id: 'gisManageNumber', title: '관리번호(GIS)' },
-  { id: 'managingInstitution', title: '관리기관' },
-  { id: 'drawingNumber', title: '도엽번호' },
-  { id: 'installationLocation', title: '설치위치' },
-  { id: 'usage', title: '용도' },
-  { id: 'pipeDiameter', title: '관경' },
-  { id: 'pipeLength', title: '관로연장' },
-  { id: 'pipeType', title: '관종' },
-  { id: 'burialDepth', title: '매설심도' },
-  { id: 'constructionYear', title: '개보수 년도' },
-  { id: 'installationSubject', title: '설치 주체' },
-  { id: 'area', title: '구역' },
-  { id: 'division', title: '분구' },
-  { id: 'alignmentType', title: '지선/간선 구분' },
-  { id: 'flowType', title: '흐름 방식' },
-  { id: 'boxCount', title: '박스 열수' },
-  { id: 'height', title: '높이' },
-  { id: 'width', title: '폭' },
-  { id: 'startManholeNumber', title: '시점 맨홀번호' },
-  { id: 'endManholeNumber', title: '종점 맨홀번호' },
-  { id: 'startElevation', title: '시점관저고' },
-  { id: 'endElevation', title: '종점관저고' },
-]
 
-// 하수맨홀 (추후 작성 예정)
-const swageMhTableHeadlist = [
-  { id: "swtrmtFcltCd", title: "하수처리시설코드" },
-];
 // 운영정보
 const operationTableHeadlist = [
   { id: "no", title: "NO" },
@@ -98,12 +67,6 @@ const 처리구역List = [
   { val: "b", text: "B" },
 ];
 
-interface SearchModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onFeatureSelect: (row: any) => void;
-}
-
 // 날짜 조합 함수
 const getDateString = (
   year: string,
@@ -118,6 +81,12 @@ const getDateString = (
   return `${y}${m}${d}`;
 };
 
+interface SearchModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onFeatureSelect: (row: any) => void;
+}
+
 const SearchModal: React.FC<SearchModalProps> = ({
   open,
   onOpenChange,
@@ -174,7 +143,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
   else if (basicType === 'tb_ms_swage_prcs_zone') dynamicHeadlist = SwtrmtPrcsZoneCol2; // 하수처리구역
   else if (basicType === 'tb_ms_swage_mhl') dynamicHeadlist = MsSwageMhlCol2; // 하수맨홀
   else if (basicType === 'tb_ms_swage_pmstn') dynamicHeadlist = SewagePump2; // 하수펌프장
-  else if (basicType === 'tb_ms_stofcbr') dynamicHeadlist = stofcbr2; // 우수토실
+  else if (basicType === 'tb_ms_stofcbr') dynamicHeadlist = stofcbrCol2; // 우수토실
 
   // 조회 버튼 클릭 시 1페이지로 이동하도록 수정
   const handleSearch = () => {

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

@@ -245,7 +245,7 @@ export const SewagePump2 = [
 ]
 
 // 우수토실
-export const stofcbr = [
+export const stofcbrCol = [
   // { id: 'ftre_smbol_cd', title: '지형지물부호코드' },
   { id: 'pbadms_emd_cd', title: '시설관리번호' },
   // { id: 'pbadms_emd_cd', title: '행정읍면동코드' },
@@ -259,7 +259,7 @@ export const stofcbr = [
   { id: 'swage_mhl_mng_no', title: '하수맨홀관리번호' },
   { id: 'drtn_angl', title: '방향각도' },
 ]
-export const stofcbr2 = [
+export const stofcbrCol2 = [
   // { id: 'ftre_smbol_cd', title: '지형지물부호코드' },
   { id: 'pbadmsEmdCd', title: '시설관리번호' },
   // { id: 'pbadms_emd_cd', title: '행정읍면동코드' },

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, useCallback, useMemo } from "react";
 import { getLayerContentComponent } from "./components/common";
-import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, SewagePump, MsSwageMhlCol } from "./components/common/table";
+import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, SewagePump, MsSwageMhlCol, stofcbrCol } from "./components/common/table";
 import InfilChart from './components/popupComponent/chart/infilChart';
 import RdiiChart from './components/popupComponent/chart/rdiiChart';
 
@@ -103,6 +103,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     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 === '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') result = '하수펌프장';
@@ -112,6 +113,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
       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') result = '하수펌프장';
@@ -169,7 +171,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
             }
             return;
           case '우수토실':
-            setButtonChk(true)
+            setHeadlist(stofcbrCol)
+            setButtonChk(false)
             break;
           case '하수관로':
             setHeadlist(MsSwagePplCol)
@@ -273,6 +276,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
       });
       if (layerNm === '하수관로') bodyData['lyrTypeNm'] = 'tb_ms_swage_ppl'
       else if (layerNm === '우수토실') bodyData['lyrTypeNm'] = 'tb_ms_stofcbr'
+      else if (layerNm === '중점우수토실') bodyData['lyrTypeNm'] = 'om_dt_untrt_swg_rain'
       else if (layerNm === '오수펌프') bodyData['lyrTypeNm'] = 'tb_ms_swage_pmstn'
       else if (layerNm === '빗물펌프') bodyData['lyrTypeNm'] = 'tb_ms_swage_pmstn'
       else if (layerNm === '하수맨홀') bodyData['lyrTypeNm'] = 'tb_ms_swage_mnhl'