feat: 감리지적사항 대응

- 노후 하수관로 조회 기능 구현
- 분기 조건 체크
- 파일명 표시 에러 수정
- 셀 클릭 이벤트 수정
- 자체 입력 정보 입력 되게 수정
- 단위 추가
- 하수맨홀 뚜껑재질 코드표 추가

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

@@ -2,13 +2,13 @@ import FeatureClickEventPopup from './featureClickEventPopup';
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { UiModal, UiTable } from '@common/business_components/ui';
-import { Button, Input, Label } from '@common/components';
+import { Button, DatePicker, Input, Label } from '@common/components';
 import { UiTable2 } from '@common/business_components/ui/table/index-2';
 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, stofcbrCol2 } from './components/common/table';
+import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, ExclnSewagePumpCol2, stofcbrCol2 } from './components/common/table';
 import LoadingOverlay from '@/components/ui/LoadingBar';
 
 const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;
@@ -122,6 +122,8 @@ const SearchModal: React.FC<SearchModalProps> = ({
   const [가동개시_종료_월, set가동개시_종료_월] = useState('');
   const [가동개시_시작_일, set가동개시_시작_일] = useState('');
   const [가동개시_종료_일, set가동개시_종료_일] = useState('');
+  const [fromDate, setFromDate] = useState(() => { const date = new Date(); date.setDate(date.getDate() - 7); return date })
+  const [toDate, setToDate] = useState(new Date())
 
   // 로딩바 
   const [isLoading, setIsLoading] = useState(false);
@@ -142,7 +144,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
   else if (basicType === 'tb_il_swage_prcs_fclt') dynamicHeadlist = SwtrmtFcltCol2; // 하수처리시설
   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_swage_pmstn') dynamicHeadlist = ExclnSewagePumpCol2; // 하수펌프장
   else if (basicType === 'tb_ms_stofcbr') dynamicHeadlist = stofcbrCol2; // 우수토실
 
   // 조회 버튼 클릭 시 1페이지로 이동하도록 수정
@@ -948,8 +950,8 @@ const SearchModal: React.FC<SearchModalProps> = ({
                 value={workType}
               />
 
-              {/* 설치년도 */}
-              <YearRangeSelectBox
+              {/* 수행기간 */}
+              {/* <YearRangeSelectBox
                 start={yearFilter.시작}
                 end={yearFilter.종료}
                 onChange={(range) =>
@@ -959,8 +961,29 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     종료: range.end,
                   })
                 }
-                startLabel="설치년도"
+                startLabel="수행기간"
                 endLabel=""
+              /> */}
+              <DatePicker
+                className='mr-4'
+                mode={'single'}
+                selected={fromDate}
+                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }}
+                modifiers={{
+                  disabled: { after: new Date() }
+                }}
+                zIndex={102}
+              />
+              <span>~</span>
+              <DatePicker
+                className='ml-4'
+                mode={'single'}
+                selected={toDate}
+                onSelect={(date: Date | undefined) => { if (date) setToDate(date) }}
+                modifiers={{
+                  disabled: { after: new Date() }
+                }}
+                zIndex={102}
               />
               <div className="flex items-center">
                 {/* 경과년도 */}

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

@@ -20,14 +20,14 @@ const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, on
         <Table variant="secondary" className="w-full">
           <TableHeader>
             <TableRow>
-              <TableHead className="border border-gray-300 px-2 py-2 text-sm">년도</TableHead>
-              <TableHead className="border border-gray-300 px-2 py-2 text-sm">구분</TableHead>
+              <TableHead className="border border-gray-300 px-2 py-2 text-sm w-[80px]">년도</TableHead>
+              <TableHead className="border border-gray-300 px-2 py-2 text-sm w-auto">구분</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {data.map((row, index) => (
               <TableRow key={index}>
-                <TableCell className="border border-gray-300 px-2 py-2 text-sm">
+                <TableCell className="border border-gray-300 px-2 py-2 text-sm w-[80px]">
                   <input
                     type="text"
                     value={row.year}
@@ -35,7 +35,7 @@ const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, on
                     className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal"
                   />
                 </TableCell>
-                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal">
+                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto">
                   {row.type}
                 </TableCell>
               </TableRow>

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

@@ -1,65 +1,65 @@
 // 하수관로
 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: 'pdmt', title: '관경(mm)' },
+  { id: 'prlg', title: '연장(m)' },
+  { id: 'usg_cd', title: '용도코드' },
+  { id: 'mqlt_cd', title: '재질코드' },
+  { id: 'avg_grdn', title: '평균구배(m/m)' },
+  { id: 'drtw_mltv_area', title: '오수배수면적(m²)' },
+  { id: 'excln_mltv_area', title: '우수배수면적(m²)' },
+  { id: 'tmpt_dpth', title: '시점깊이(m)' },
   { id: 'tmpt_mhl_mng_no', title: '시점맨홀관리번호' },
+  { id: 'scend_dpth', title: '종점깊이(m)' },
+  { id: 'scend_mhl_mng_no', title: '종점맨홀관리번호' },
   { id: 'trfln_cnt', title: '차선수' },
-  // { id: 'usg_cd', title: '용도코드' },
-  { id: 'vrtc_len', title: '세로길이' },
-  { id: 'wdth_len', title: '가로길이' },
+  { id: 'vrtc_len', title: '세로길이(m)' },
+  { id: 'wdth_len', title: '가로길이(m)' },
+  // { id: 'rnyssn_fvlc', title: '우기 시 유속(m/s)' },
+  // { id: 'clar_fvlc', title: '건기 시 유속(m/s)' },
+  // { id: 'mng_inst_cd', title: '관리기관코드' },
+  // { id: 'pbadms_emd_cd', title: '행정읍면동코드' },
+  // { id: 'fclty_shp_cd', title: '시설물형태코드' },
+  // { id: 'fid', title: 'FID' },
+  // { id: 'ftre_smbol_cd', title: '지형지물부호코드' },
   // { id: 'lyrTypeNm', title: '레이어타입명' },
 ]
 export const MsSwagePplCol2 = [
-  { 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: 'pdmt', title: '관경(mm)' },
+  { id: 'prlg', title: '연장(m)' },
+  { id: 'avgGrdn', title: '평균구배(m/m)' },
+  { id: 'rnysnFvlc', title: '우기 시 유속(m/s)' },
+  { id: 'clarFvlc', title: '건기 시 유속(m/s)' },
+  { id: 'drtwMltvArea', title: '오수배수면적(m²)' },
+  { id: 'exclnMltvArea', title: '우수배수면적(m²)' },
+  { id: 'tmptDpth', title: '시점깊이(m)' },
+  { id: 'tmptMhlMngNo', title: '시점맨홀관리번호' },
+  { id: 'scendDpth', title: '종점깊이(m)' },
+  { id: 'scendMhlMngNo', title: '종점맨홀관리번호' },
+  { id: 'trflnCnt', title: '차선수' },
+  { id: 'vrtcLen', title: '세로길이(m)' },
+  { id: 'wdthLen', title: '가로길이(m)' },
+  // { id: 'fcltyShpCd', title: '시설물형태코드' },
+  // { id: 'fid', title: 'FID' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
   // { id: 'mngInstCd', title: '관리기관코드' },
   // { id: 'mqltCd', title: '재질코드' },
   // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
-  { id: 'pdmt', title: '관경' },
-  { id: 'prlg', title: '연장' },
-  // { id: 'rnysnFvlc', 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: 'swtrmt_fclt_nm', title: '하수처리시설명' },
-  { id: 'fclt_cpct', title: '시설용량' },
+  { id: 'fclt_cpct', title: '시설용량(㎥/d)' },
   { id: 'rgn_expln', title: '지역설명' },
   { id: 'cmcn_ymd', title: '준공일자' },
   { id: 'oprtng_strt_ymd', title: '가동개시일자' },
@@ -78,26 +78,26 @@ export const SwtrmtFcltCol = [
   { id: 'rdnm_addr', title: '도로명주소' },
   { id: 'dtl_rdnm_addr', title: '상세도로명주소' },
   { id: 'dschg_wtst_nm', title: '방류수계명' },
-  { id: 'plln_area', title: '부지면적' },
+  { id: 'plln_area', title: '부지면적(m²)' },
   { id: 'mng_rprtv_bzenty_nm', title: '관리대행업제명' },
-  { id: 'swtrmt_ppltn_cnt', title: '하수처리인구수' },
-  { id: 'prcs_zone_area_sum', title: '처리구역면적합계' },
+  { id: 'swtrmt_ppltn_cnt', title: '하수처리인구수(인)' },
+  { id: 'prcs_zone_area_sum', title: '처리구역면적합계(m²)' },
   { id: 'xcrd', title: 'X좌표' },
   { id: 'ycrd', title: 'Y좌표' },
   // { id: 'oprtngSttsCd', title: '가동상태코드' },
   { id: 'rprs_msrc_cn', title: '대표공법내용' },
-  { id: 'stty_crtr_bod', title: '법정기준생물화학적산소요구량' },
-  { id: 'stty_crtr_toc', title: '법정기준TOC' },
-  { id: 'stty_crtr_ss', title: '법정기준SS' },
-  { id: 'stty_crtr_tn', title: '법정기준총질소' },
-  { id: 'stty_crtr_tph', title: '법정기준총인' },
-  { id: 'stty_crtr_clbcl_cnt', title: '법정기준대장균수' },
+  { id: 'stty_crtr_bod', title: '법정기준생물화학적산소요구량(mg/L)' },
+  { id: 'stty_crtr_toc', title: '법정기준TOC((mg/L))' },
+  { id: 'stty_crtr_ss', title: '법정기준SS(mg/L)' },
+  { id: 'stty_crtr_tn', title: '법정기준총질소(mg/L)' },
+  { id: 'stty_crtr_tph', title: '법정기준총인(mg/L)' },
+  { id: 'stty_crtr_clbcl_cnt', title: '법정기준대장균수(군수/100mL)' },
   { id: 'bsn_nm', title: '유역명' },
   // { id: 'obsrvnSptCd', title: '관측지점코드' },
 ];
 export const SwtrmtFcltCol2 = [
   { id: 'swtrmtFcltNm', title: '하수처리시설명' },
-  { id: 'fcltCpct', title: '시설용량' },
+  { id: 'fcltCpct', title: '시설용량(㎥/d)' },
   { id: 'rgnExpln', title: '지역설명' },
   { id: 'cmcnYmd', title: '준공일자' },
   { id: 'oprtngStrtYmd', title: '가동개시일자' },
@@ -116,20 +116,20 @@ export const SwtrmtFcltCol2 = [
   { id: 'rdnmAddr', title: '도로명주소' },
   { id: 'dtlRdnmAddr', title: '상세도로명주소' },
   { id: 'dschgWtstNm', title: '방류수계명' },
-  { id: 'pllnArea', title: '부지면적' },
+  { id: 'pllnArea', title: '부지면적(m²)' },
   { id: 'mngRprtvBzentyNm', title: '관리대행업제명' },
-  { id: 'swtrmtPpltnCnt', title: '하수처리인구수' },
-  { id: 'prcsZoneAreaSum', title: '처리구역면적합계' },
+  { id: 'swtrmtPpltnCnt', title: '하수처리인구수(인)' },
+  { id: 'prcsZoneAreaSum', title: '처리구역면적합계(m²)' },
   { id: 'xcrd', title: 'X좌표' },
   { id: 'ycrd', title: 'Y좌표' },
   // { id: 'oprtngSttsCd', title: '가동상태코드' },
   { id: 'rprsMsrcCn', title: '대표공법내용' },
-  { id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량' },
-  { id: 'sttyCrtrToc', title: '법정기준TOC' },
-  { id: 'sttyCrtrSs', title: '법정기준SS' },
-  { id: 'sttyCrtrTn', title: '법정기준총질소' },
-  { id: 'sttyCrtrTph', title: '법정기준총인' },
-  { id: 'sttyCrtrClbclCnt', title: '법정기준대장균수' },
+  { id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량(mg/L)' },
+  { id: 'sttyCrtrToc', title: '법정기준TOC(mg/L)' },
+  { id: 'sttyCrtrSs', title: '법정기준SS(mg/L)' },
+  { id: 'sttyCrtrTn', title: '법정기준총질소(mg/L)' },
+  { id: 'sttyCrtrTph', title: '법정기준총인(mg/L)' },
+  { id: 'sttyCrtrClbclCnt', title: '법정기준대장균수(군수/100mL)' },
   { id: 'bsnNm', title: '유역명' },
   // { id: 'obsrvnSptCd', title: '관측지점코드' },
 ];
@@ -170,14 +170,14 @@ export const MsSwageMhlCol = [
   // { id: 'usg_cd', title: '용도코드' },
   // { id: 'fclty_shp_cd', title: '시설물형태코드' },
   // { id: 'mhl_knd_cd', title: '맨홀종류코드' },
-  { id: 'swage_mh_diam', title: '하수맨홀구경' },
-  { id: 'wdth_len', title: '가로길이' },
-  { id: 'vrtc_len', title: '세로길이' },
-  // { id: 'mqltCd', title: '재질코드' },
+  { id: 'swage_mh_diam', title: '하수맨홀구경(mm)' },
+  { id: 'mqlt_cd', title: '재질코드' },
+  { id: 'wdth_len', title: '가로길이(m)' },
+  { id: 'vrtc_len', title: '세로길이(m)' },
   // { id: 'ang_dir', title: '표고' },
-  { id: 'altd_vl', title: '표고' },
-  { id: 'dpthlVl', title: '심도' },
-  // { id: 'instMngNo', title: '기관관리번호' }
+  { id: 'altd_vl', title: '표고(EL.m)' },
+  { id: 'dpthlVl', title: '심도(m)' },
+  // { id: 'inst_mng_no', title: '기관관리번호' }
 ];
 export const MsSwageMhlCol2 = [
   // { id: 'fid', title: 'FID' },
@@ -192,18 +192,81 @@ export const MsSwageMhlCol2 = [
   // { id: 'usgCd', title: '용도코드' },
   // { id: 'fcltyShpCd', title: '시설물형태코드' },
   // { id: 'mhlKndCd', title: '맨홀종류코드' },
-  { id: 'swageMhDiam', title: '하수맨홀구경' },
-  { id: 'wdthLen', title: '가로길이' },
-  { id: 'vrtcLen', title: '세로길이' },
-  // { id: 'mqltCd', title: '재질코드' },
+  { id: 'swageMhDiam', title: '하수맨홀구경(mm)' },
+  { id: 'mqltCd', title: '재질코드' },
+  { id: 'wdthLen', title: '가로길이(m)' },
+  { id: 'vrtcLen', title: '세로길이(m)' },
   // { id: 'angDir', title: '표고' },
-  { id: 'altdVl', title: '표고' },
-  { id: 'dpthlVl', title: '심도' },
+  { id: 'altdVl', title: '표고(EL.m)' },
+  { id: 'dpthlVl', title: '심도(m)' },
   // { id: 'instMngNo', title: '기관관리번호' }
 ];
+// 하수맨홀 뚜껑재질 코드표
+export const MS_SWAGE_MHL_CODES = [
+  { val: "SBC000", text: "미분류" },
+  { val: "SBC001", text: "주철" },
+  { val: "SBC002", text: "철판" },
+  { val: "SBC003", text: "콘크리트" },
+  { val: "SBC004", text: "그레이팅" },
+  { val: "SBC091", text: "칼라" },
+  { val: "SBC092", text: "S.G" },
+  { val: "SBC999", text: "기타" },
+  { val: "SBC900", text: "각주철" },
+  { val: "SBC901", text: "강재" },
+  { val: "SBC902", text: "나무" },
+  { val: "SBC903", text: "나무,널판지,합판" },
+  { val: "SBC904", text: "대리석" },
+  { val: "SBC905", text: "뚜껑없음" },
+  { val: "SBC906", text: "보도용콘크리트" },
+  { val: "SBC907", text: "스틸(ST)" },
+  { val: "SBC908", text: "신형 CON" },
+  { val: "SBC909", text: "알루미늄" },
+  { val: "SBC910", text: "염화비닐(PE)" },
+  { val: "SBC911", text: "인조석" },
+  { val: "SBC912", text: "인조석(주철)" },
+  { val: "SBC913", text: "인조CONC" },
+  { val: "SBC914", text: "철, 철근" },
+  { val: "SBC915", text: "칼라콘크리트" },
+  { val: "SBC916", text: "플라스틱" },
+  { val: "SBC917", text: "PVC" },
+  { val: "SBC918", text: "SP" },
+  { val: "SBC919", text: "SS" },
+  { val: "SBC920", text: "닥타일주철" },
+  { val: "SBC921", text: "철근G" },
+  { val: "SBC922", text: "폴리에틸렌(PE)" },
+  { val: "SBC923", text: "회주철" }
+];
+// 하수맨홀 용도 코드표
+export const MS_SWAGE_MHL_USE_CODES = [
+  { val: "SMU000", text: "미분류" },
+  { val: "SMU001", text: "우수" },
+  { val: "SMU002", text: "오수" },
+  { val: "SMU003", text: "집수" },
+  { val: "SMU004", text: "합류" },
+  { val: "SMU005", text: "차집" },
+  { val: "SMU999", text: "기타" },
+  { val: "SMU900", text: "1호" },
+  { val: "SMU901", text: "2호" },
+  { val: "SMU902", text: "3호" },
+  { val: "SMU903", text: "4호" },
+  { val: "SMU904", text: "5호" },
+  { val: "SMU905", text: "6호" },
+  { val: "SMU906", text: "7호" },
+  { val: "SMU907", text: "8호" },
+  { val: "SMU908", text: "구거용맨홀" },
+  { val: "SMU909", text: "부관부착맨홀" },
+  { val: "SMU910", text: "조립식맨홀" },
+  { val: "SMU911", text: "특1호" },
+  { val: "SMU912", text: "특2호" },
+  { val: "SMU913", text: "특3호" },
+  { val: "SMU914", text: "특4호" },
+  { val: "SMU915", text: "특5호" },
+  { val: "SMU916", text: "하수맨홀용도" },
+  { val: "SMU917", text: "현장타설관거용" }
+];
 
-// 하수펌프장
-export const SewagePump = [
+// 우수펌프장
+export const ExclnSewagePumpCol = [
   // { id: 'fid', title: 'FID' },
   // { id: 'geom', title: 'geometry' },
   // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
@@ -213,17 +276,17 @@ export const SewagePump = [
   // { id: 'mngInstCd', title: '관리기관코드' },
   { id: 'instl_ymd', title: '설치일자' },
   { id: 'swage_pmstn_nm', title: '하수펌프장명' },
-  { id: 'plln_area', title: '부지면적' },
-  // { id: 'opngSttsCd', title: '개통상태코드' },
+  { id: 'plln_area', title: '부지면적(m²)' },
+  // { id: 'opngSttsCd', title: '개통상태코드' }, 
   // { id: 'usgCd', title: '용도코드' },
-  { id: 'daily_prcs_cpct', title: '일일처리용량' },
-  { id: 'max_impnd_cpct', title: '최대저수용량' },
-  { id: 'altd_vl', title: '표고' },
-  { id: 'wtlv_vl', title: '수위' },
-  { id: 'excln_wpmp_ablt', title: '우수양수능력' },
+  { id: 'daily_prcs_cpct', title: '일일처리용량(㎥)' },
+  { id: 'max_impnd_cpct', title: '최대저수용량(㎥)' },
+  { id: 'altd_vl', title: '표고(EL.m)' },
+  { id: 'wtlv_vl', title: '수위(m)' },
+  { id: 'excln_wpmp_ablt', title: '우수양수능력(m²/d)' },
   // { id: 'instMngNo', title: '기관관리번호' },
 ]
-export const SewagePump2 = [
+export const ExclnSewagePumpCol2 = [
   // { id: 'fid', title: 'FID' },
   // { id: 'geom', title: 'geometry' },
   // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
@@ -233,14 +296,56 @@ export const SewagePump2 = [
   // { id: 'mngInstCd', title: '관리기관코드' },
   { id: 'instlYmd', title: '설치일자' },
   { id: 'swagePmstnNm', title: '하수펌프장명' },
-  { id: 'pllnArea', title: '부지면적' },
+  { id: 'pllnArea', title: '부지면적(m²)' },
   // { id: 'opngSttsCd', title: '개통상태코드' },
   // { id: 'usgCd', title: '용도코드' },
-  { id: 'dailyPrcsCpct', title: '일일처리용량' },
-  // { id: 'max_impndCpct', title: '최대저수용량' },
-  { id: 'altdVl', title: '표고' },
-  { id: 'wtlvVl', title: '수위' },
-  { id: 'exclnWpmpAblt', title: '우수양수능력' },
+  { id: 'dailyPrcsCpct', title: '일일처리용량(㎥)' },
+  { id: 'max_impndCpct', title: '최대저수용량(㎥)' },
+  { id: 'altdVl', title: '표고(EL.m)' },
+  { id: 'wtlvVl', title: '수위(m)' },
+  { id: 'exclnWpmpAblt', title: '우수양수능력(m²/d)' },
+  // { id: 'instMngNo', title: '기관관리번호' },
+]
+
+// 오수펌프장
+export const DrtwSewagePumpCol1 = [
+  // { id: 'fid', title: 'FID' },
+  // { id: 'geom', title: 'geometry' },
+  // { id: 'ftreSmbolCd', title: '지형지물부호코드' },
+  { id: 'fclt_mng_no', title: '시설관리번호' },
+  // { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
+  { id: 'mapsht_no', title: '도엽번호' },
+  // { id: 'mngInstCd', title: '관리기관코드' },
+  { id: 'instl_ymd', title: '설치일자' },
+  { id: 'swage_pmstn_nm', title: '하수펌프장명' },
+  { id: 'plln_area', title: '부지면적(m²)' },
+  // { id: 'opngSttsCd', title: '개통상태코드' }, 
+  // { id: 'usgCd', title: '용도코드' },
+  { id: 'daily_prcs_cpct', title: '일일처리용량(㎥)' },
+  { id: 'max_impnd_cpct', title: '최대저수용량(㎥)' },
+  { id: 'altd_vl', title: '표고(EL.m)' },
+  { id: 'wtlv_vl', title: '수위(m)' },
+  { id: 'excln_wpmp_ablt', title: '오수양수능력(m²/d)' },
+  // { id: 'instMngNo', title: '기관관리번호' },
+]
+export const DrtwSewagePumpCol2 = [
+  // { 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: '부지면적(m²)' },
+  // { id: 'opngSttsCd', title: '개통상태코드' },
+  // { id: 'usgCd', title: '용도코드' },
+  { id: 'dailyPrcsCpct', title: '일일처리용량(㎥)' },
+  { id: 'max_impndCpct', title: '최대저수용량(㎥)' },
+  { id: 'altdVl', title: '표고(EL.m)' },
+  { id: 'wtlvVl', title: '수위(m)' },
+  { id: 'exclnWpmpAblt', title: '오수양수능력(m²/d)' },
   // { id: 'instMngNo', title: '기관관리번호' },
 ]
 
@@ -253,11 +358,11 @@ export const stofcbrCol = [
   // { id: 'mng_inst_cd', title: '관리기관코드' },
   { id: 'instl_ymd', title: '설치일자' },
   // { id: 'fclty_shp_cd', title: '시설물형태코드' },
-  { id: 'worflw_wall_hgt', title: '월류벽높이' },
+  { id: 'worflw_wall_hgt', title: '월류벽높이(m)' },
   // { id: 'mhl_exst_yn_cd', title: '맨홀존재여부코드' },
   // { id: 'swage_mhl_ftre_smbol_cd', title: '하수맨홀지형지물부호코드' },
   { id: 'swage_mhl_mng_no', title: '하수맨홀관리번호' },
-  { id: 'drtn_angl', title: '방향각도' },
+  { id: 'drtn_angl', title: '방향각도(°)' },
 ]
 export const stofcbrCol2 = [
   // { id: 'ftre_smbol_cd', title: '지형지물부호코드' },
@@ -267,11 +372,11 @@ export const stofcbrCol2 = [
   // { id: 'mng_inst_cd', title: '관리기관코드' },
   { id: 'instlYmd', title: '설치일자' },
   // { id: 'fclty_shp_cd', title: '시설물형태코드' },
-  { id: 'worflwWallHgt', title: '월류벽높이' },
+  { id: 'worflwWallHgt', title: '월류벽높이(m)' },
   // { id: 'mhl_exst_yn_cd', title: '맨홀존재여부코드' },
   // { id: 'swage_mhl_ftre_smbol_cd', title: '하수맨홀지형지물부호코드' },
   { id: 'swageMhlMngNo', title: '하수맨홀관리번호' },
-  { id: 'drtnAngl', title: '방향각도' },
+  { id: 'drtnAngl', title: '방향각도(°)' },
 ]
 
 // 중점우수토실 측정지점
@@ -287,7 +392,7 @@ export const untrtSwgRainCol1 = [
 // 중점우수토실 측정지점 시설현황
 export const untrtSwgRainCol2 = [
   { id: 'flwmtr_mesure_tp_etc', title: '구분' },
-  { id: 'discharge_pipe_spec', title: '방류관로 규격' },
+  { id: 'discharge_pipe_spec', title: '방류관로 규격(m)' },
   { id: 'swr_ppl_eqp_ar', title: '배수구역 면적(m²)' },
   { id: 'swr_trt_popl', title: '하수처리 인구(인)' },
   { id: 'screen_instl_at', title: '스크린설치 여부' },

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

@@ -7,7 +7,7 @@ import { handleInputChange } from '../common';
 // 하수관로
 const inputColumn = [
   { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
-  { id: "swtrmt_zone_cd", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+  { id: "swtrmt_zone_cd", title: "처리구역", type: "input" },
   { id: "basu", title: "배수구역", type: "input" },
   { id: "mltv_dtdv_nm", title: "배수분구", type: "input" },
   { id: "wltjs", title: "지선/간선", type: "select", options: ["지선", "간선"] },

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

@@ -3,12 +3,19 @@ import { UiModal, UiTable } from '@common/business_components/ui';
 import { Button, TableHead, TableRow } from '@common/components/ui';
 import React, { useState } from 'react';
 import { untrtSwgRainCol3, untrtSwgRainCol4, untrtSwgRainCol5 } from '../common/table';
+import { VerticalTable } from '@/components/ui/verticalTable';
 import LoadingOverlay from '@/components/ui/LoadingBar';
 
-const Ssc = ({ featureData, chkMainSsc, additionalData }: {
+const inputColumn = [
+  { id: "place", title: "중점여부", type: "select", options: ["중점우수토실", "우수토실"] },
+  { id: "guyeok", title: "처리구역", type: "input" },
+];
+
+const Ssc = ({ featureData, chkMainSsc, additionalData, onSaveClick }: {
   featureData: any,
   chkMainSsc?: boolean,
-  additionalData?: any
+  additionalData?: any,
+  onSaveClick?: () => void
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDataLoaded, setIsDataLoaded] = useState(false);
@@ -93,7 +100,7 @@ const Ssc = ({ featureData, chkMainSsc, additionalData }: {
 
   return (
     <div>
-      {/* <VerticalTable
+      <VerticalTable
         headName='자체 입력정보'
         tableData={[]}
         headlist={inputColumn}
@@ -105,7 +112,9 @@ const Ssc = ({ featureData, chkMainSsc, additionalData }: {
         onPageChange={function (page: number): void {
           throw new Error('Function not implemented.');
         }}
-      /> */}
+        showSaveButton={true}
+        onSaveClick={onSaveClick}
+      />
 
       {chkMainSsc && (
         <div>

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

@@ -1,17 +1,22 @@
 import { VerticalTable } from '@/components/ui/verticalTable';
 import React from 'react'
-const inputColumn = [
-  { id: "swtrmt_zone_cd", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+const exclnInputColumn = [
+  { id: "swtrmt_zone_cd", title: "배수구역", type: "input" },
   { id: "mltv_dtdv_nm", title: "배수분구", type: "input" },
-  { id: "freq", title: "설계빈도", type: "input" },
+  { id: "freq", title: "설계빈도(년)", type: "input" },
 ]
+const drtwInputColumn = [
+  { id: "swtrmt_zone_cd", title: "배수구역", type: "input" },
+  { id: "mltv_dtdv_nm", title: "배수분구", type: "input" },
+]
+
 // 하수펌프장
 const sewagePump = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: () => void }) => {
   return (
     <VerticalTable
       headName='자체 입력정보'
       tableData={[]}
-      headlist={inputColumn}
+      headlist={exclnInputColumn}
       pageSize={0}
       total={0}
       children={undefined}

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

@@ -2,11 +2,10 @@
 import { VerticalTable } from '@/components/ui/verticalTable';
 import React from 'react'
 const inputColumn = [
-  { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
+  { id: "guyeok", title: "처리구역", type: "input" },
   { id: "basu", title: "배수구역", type: "input" },
   { id: "bungu", title: "배수분구", type: "input" },
   { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
-  { id: 'spec', title: '규격', type: 'input' },
 ];
 const Smh = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: () => void }) => {
   return (

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, stofcbrCol } from "./components/common/table";
+import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, ExclnSewagePumpCol, MsSwageMhlCol, stofcbrCol, MS_SWAGE_MHL_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";
@@ -29,8 +29,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
   const [isAdditionalDataLoading, setIsAdditionalDataLoading] = useState(false);
   const [additionalDataError, setAdditionalDataError] = useState<string | null>(null);
   // 🎯 InfilChart 및 RdiiChart 관련 상태 추가
-  const { setIsOpen:setIsModalInfil } = useInfilChartModalStore();
-  const { setIsOpen:setIsModalRdii } = useRdiiChartModalStore(); 
+  const { setIsOpen: setIsModalInfil } = useInfilChartModalStore();
+  const { setIsOpen: setIsModalRdii } = useRdiiChartModalStore();
 
   // 🎯 관로관리번호 추출
   const pplMngNo = featureData?.values_?.fclt_mng_no || "";
@@ -135,8 +135,27 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
 
         console.log('gis data', featureData.values_);
         let data = featureData.values_;
-        setfetchData(data)
-        setTableData(data);
+
+        // 하수맨홀인 경우 용도코드를 텍스트로 변환
+        if (selectedLayerName === '하수맨홀' && data) {
+          const processedData = { ...data };
+
+          // mqlt_cd 값 변환 (재질코드)
+          if (processedData.mqlt_cd) {
+            const materialCodeItem = MS_SWAGE_MHL_CODES.find(
+              code => code.val === processedData.mqlt_cd.trim()
+            );
+            if (materialCodeItem) {
+              processedData.mqlt_cd = `${materialCodeItem.text}`;
+            }
+          }
+
+          setfetchData(processedData);
+          setTableData(processedData);
+        } else {
+          setfetchData(data);
+          setTableData(data);
+        }
 
         switch (selectedLayerName) {
           case '하수처리시설':
@@ -173,6 +192,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
           case '우수토실':
             setHeadlist(stofcbrCol)
             setButtonChk(false)
+            setChkMainSsc(false)
             break;
           case '하수관로':
             setHeadlist(MsSwagePplCol)
@@ -185,7 +205,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
           //   setButtonChk(true)
           //   break;
           case '하수펌프장':
-            setHeadlist(SewagePump)
+            setHeadlist(ExclnSewagePumpCol)
             setButtonChk(true)
             break;
           case '하수맨홀':
@@ -237,32 +257,41 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
     setIsModalOpen(false); // 모달 닫기
   };
 
+  // 저장 버튼 이벤트
   const btnClickEvent = async () => {
     const bodyData: Record<string, any> = {}
+
     if (buttonChk && contentRef.current) {
       const inputElements = contentRef.current.querySelectorAll('input');
       const selectElements = contentRef.current.querySelectorAll('select');
+
       // 카멜케이스 변환 함수
       const toCamelCase = (str: string) =>
         str.replace(/_([a-z])/g, (_, char) => char.toUpperCase());
+
       // select 태그의 값 가져오기
       selectElements.forEach((select) => {
         const camelCaseId = toCamelCase(select.id);
         bodyData[camelCaseId] = select.value;
       });
+
       // input 태그의 값 가져오기
       inputElements.forEach((input) => {
         const camelCaseId = toCamelCase(input.id);
         bodyData[camelCaseId] = input.value;
       });
+
       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'
+
       bodyData['fid'] = featureId
+
       const data = await putData(`v1/fclts/${featureId}`, bodyData);
+
       if (data.status == 200) {
         alert('저장되었습니다')
         setTableData(data)
@@ -286,13 +315,13 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
           {/* 🎯 하수관로일 때만 Infil/RDII 버튼 표시 */}
           {layerNm === '하수관로' && (
             <>
-              <Button  onClick={() => setIsModalInfil(true)}
+              <Button onClick={() => setIsModalInfil(true)}
                 className="px-2 py-1 text-xl text-blue-600 border border-blue-600 rounded hover:bg-gray-700"
                 color="white"
               >
                 침입수분석
               </Button>
-              <Button  onClick={() => setIsModalRdii(true)}
+              <Button onClick={() => setIsModalRdii(true)}
                 className="px-2 py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700"
                 color="white"
               >
@@ -343,7 +372,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
 
       {/* 🎯 InfilChart 및 RdiiChart 컴포넌트 추가 */}
       <InfilChart pplMngNo={pplMngNo} />
-      <RdiiChart  pplMngNo={pplMngNo} />
+      <RdiiChart pplMngNo={pplMngNo} />
     </div>
   )
 }

apps/sn/app/components/ui/verticalTable.tsx

@@ -141,7 +141,7 @@ export function VerticalTable({
                       <input
                         id={head.id}
                         type="text"
-                        value={""}
+                        value={String(formData[head.id] ?? "")}
                         onChange={(e) => handleInputChange(head.id, e.target.value)}
                         className="w-full text-xl border-radius-0 border border-gray-300 rounded-sm px-2 py-1"
                       />