Merge branch 'iipbs/sn/dev' into sn-ljpark2

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';
 import { GovSidoSigunguSearchForm } from '@/components/ui/govSidoSigunguSearchForm';
 import { getDcTree, buildTreeTopDown, sidoList } from './components/searchModalReportApi';
@@ -123,6 +123,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);
@@ -143,7 +145,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페이지로 이동하도록 수정
@@ -958,8 +960,8 @@ const SearchModal: React.FC<SearchModalProps> = ({
                 value={workType}
               />
 
-              {/* 설치년도 */}
-              <YearRangeSelectBox
+              {/* 수행기간 */}
+              {/* <YearRangeSelectBox
                 start={yearFilter.시작}
                 end={yearFilter.종료}
                 onChange={(range) =>
@@ -969,8 +971,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/(with-base-layout)/oper/floodPre/page.tsx

@@ -27,30 +27,42 @@ const Page = () => {
   const [curPage, setCurPage] = useState(1) //현재 페이지
   const [totalData, setTotalData] = useState(0) //총 데이터 수
   const [isLoading, setIsLoading] = useState(true) //로딩 상태
+
+  // 조회
   const fetchData = async () => {
     setIsLoading(true)
-    searchCmmnCd('SITEKNDCD')
+    // searchCmmnCd('SITEKNDCD')
     try {
       const { data, total } = await searchData('v1/sbmrgPrevnt', {
         fromRegDt: formatDate(fromDate),
-        fromMngYr: manageYear,
-        toMngYr: mngQu,
         toRegDt: formatDate(toDate),
-        atflNm: pjNm,
+        sbmrgPrevntBizNm: pjNm,
         rgtrNm: usr,
         page: curPage - 1,
         size: '10'
       })
-      setTableData(data)
+      // 일련번호를 추가한 데이터로 변환 (전체 데이터 기준으로 일련번호 계산)
+      const dataWithRowNumber = (data || []).map((item: any, index: number) => ({
+        ...item,
+        rowNumber: (curPage - 1) * 10 + index + 1, // 페이지 기준 일련번호 계산
+      }));
+      setTableData(dataWithRowNumber)
       setTotalData(total)
     }
     catch (error) { console.error('Error fetching data:', error) }
-    finally { setIsLoading(false); }
+    finally {
+      setFileNm('');
+      setAtflId('');
+      setSbmrgPrevntBizSn('');
+      setIsLoading(false);
+    }
   }
+
   useEffect(() => {
     setCurPage(1)
     fetchData()
   }, [])
+
   // 파일 다운로드
   const isChckFile = () => {
     if (fileNm === '' || fileNm === undefined) {
@@ -59,6 +71,7 @@ const Page = () => {
     }
     handleDownload(`/attach-service/api/v1/download/${atflId}`, fileNm)
   }
+
   // 선택 파일 삭제
   const isDeleteFile = async () => {
     if (sbmrgPrevntBizSn === '' || sbmrgPrevntBizSn === undefined) {
@@ -96,11 +109,19 @@ const Page = () => {
               <Label className="w-20 text-xl text-gray-600">등록기간</Label>
               <DatePicker mode={'single'}
                 selected={fromDate}
-                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }} />
+                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }}
+                modifiers={{
+                  disabled: { after: new Date() }
+                }}
+              />
               <span>~</span>
               <DatePicker mode={'single'}
                 selected={toDate}
-                onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} />
+                onSelect={(date: Date | undefined) => { if (date) setToDate(date) }}
+                modifiers={{
+                  disabled: { after: new Date() }
+                }}
+              />
             </div>
             <div className='flex items-center'>
               <Label className="w-20 text-xl text-gray-600">등록자</Label>
@@ -132,7 +153,23 @@ const Page = () => {
             <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile} >삭제</Button>
           </div>
         </div>
-        <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={totalData} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.sbmrgPrevntBizNm ?? ""; setFileNm(fileName); const id = tableData[index]?.atflId ?? ''; setAtflId(id); setSbmrgPrevntBizSn(tableData[index]?.sbmrgPrevntBizSn); } }} onPageChange={async (page: number) => { setCurPage(page); await fetchData() }}></UiTable>
+        <UiTable
+          headName=''
+          tableData={tableData}
+          headlist={tableHeadlist}
+          pageSize={10}
+          total={totalData}
+          cellClick={(index) => {
+            if (index != null) {
+              const fileName = tableData[index]?.sbmrgPrevntBizNm ?? "";
+              const id = tableData[index]?.atflId ?? '';
+              setFileNm(fileName);
+              setAtflId(id);
+              setSbmrgPrevntBizSn(tableData[index]?.sbmrgPrevntBizSn);
+            }
+          }}
+          onPageChange={async (page: number) => { setCurPage(page); await fetchData() }}
+        />
       </ListDiv>
       <ListDiv className="mt-4">
         <OperFileUploadForm title='도시침수 예방사업 사업추진현황 등록' onSubmit={async (file, year, quater, cd, id) => { await registFile(file, year, quater, cd, id) }} />

apps/sn/app/(with-base-layout)/oper/index.ts

@@ -1,5 +1,6 @@
 export const tableHeadlist = [
-  { id: 'sbmrgPrevntBizSn', title: '일련번호' },
+  { id: 'rowNumber', title: '일련번호' },
+  // { id: 'sbmrgPrevntBizSn', title: '일련번호' },
   { id: 'sbmrgPrevntBizNm', title: '파일명' },
   { id: 'mngYr', title: '년도' },
   { id: 'mngQu', title: '분기' },
@@ -8,7 +9,8 @@ export const tableHeadlist = [
 
 ]
 export const tableHeadlistOldPp = [
-  { id: 'dcrpPplMtncBizSn', title: '일련번호' },
+  { id: 'rowNumber', title: '일련번호' },
+  // { id: 'dcrpPplMtncBizSn', title: '일련번호' },
   { id: 'dcrpPplMtncBizNm', title: '파일명' },
   { id: 'mngYr', title: '년도' },
   { id: 'mngQu', title: '분기' },

apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx

@@ -25,31 +25,41 @@ const Page = () => {
   const [curPage, setCurPage] = useState(1)
   const [totalData, setTotalData] = useState(0) //총 데이터 수
   const [isLoading, setIsLoading] = useState(true) //로딩 상태
+
   // 데이터 조회 
   const fetchData = async () => {
     setIsLoading(true)
     try {
       const { data, total } = await searchData('v1/dcrpPpl', {
         fromRegDt: formatDate(fromDate),
-        fromMngYr: manageYear,
-        toMngYr: mngQu,
         toRegDt: formatDate(toDate),
         dcrpPplMtncBizNm: pjNm,
         rgtrNm: usr,
         page: curPage - 1,
         size: '10'
       })
-      setTableData(data)
+      // 일련번호를 추가한 데이터로 변환 (전체 데이터 기준으로 일련번호 계산)
+      const dataWithRowNumber = (data || []).map((item: any, index: number) => ({
+        ...item,
+        rowNumber: (curPage - 1) * 10 + index + 1, // 페이지 기준 일련번호 계산
+      }));
+      setTableData(dataWithRowNumber)
       setTotalData(total)
-      console.log(data, total)
     } catch (error) {
       console.error('Error fetching data:', error)
-    } finally { setIsLoading(false) }
+    } finally {
+      setFileNm('');
+      setAtflId('');
+      setDcrpPplMtncBizSn('');
+      setIsLoading(false)
+    }
   }
+
   useEffect(() => {
     setCurPage(1)
     fetchData()
   }, [])
+
   // 파일 다운로드
   const isChckFile = () => {
     if (fileNm === '' || fileNm === undefined) {
@@ -59,6 +69,7 @@ const Page = () => {
     handleDownload(`/attach-service/api/v1/download/${atflId}`, fileNm)
     return true
   }
+
   // 파일 삭제
   const isDeleteFile = async () => {
     if (dcrpPplMtncBizSn === '' || dcrpPplMtncBizSn === undefined) {
@@ -76,6 +87,7 @@ const Page = () => {
       }
     }
   }
+
   // 파일 등록
   const registFile = async (fileNm: string, year: string, quater: string, cd: string, id: string) => {
     const data = await postData('v1/dcrpPpl', {
@@ -88,6 +100,8 @@ const Page = () => {
     })
     if (data) { alert('파일이 등록되었습니다.'); fetchData() }
   }
+
+
   return (
     <>
       <LoadingOverlay isLoading={isLoading ?? false} />
@@ -98,11 +112,17 @@ const Page = () => {
               <Label className="w-20 text-xl text-gray-600">등록기간</Label>
               <DatePicker mode={'single'}
                 selected={fromDate}
-                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }} />
+                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }}
+                modifiers={{
+                  disabled: { after: new Date() }
+                }} />
               <span>~</span>
               <DatePicker mode={'single'}
                 selected={toDate}
-                onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} />
+                onSelect={(date: Date | undefined) => { if (date) setToDate(date) }}
+                modifiers={{
+                  disabled: { after: new Date() }
+                }} />
               <div className='flex items-center'>
                 <Label className="w-20 text-xl text-gray-600">등록자</Label>
                 <Input
@@ -134,7 +154,24 @@ const Page = () => {
             <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile}>삭제</Button>
           </div>
         </div>
-        <UiTable headName='' tableData={tableData} headlist={tableHeadlistOldPp} pageSize={10} total={totalData} children={undefined} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.dcrpPplMtncBizNm ?? ""; setFileNm(fileName); const id = tableData[index]?.atflId ?? ''; setAtflId(id); setDcrpPplMtncBizSn(tableData[index]?.dcrpPplMtncBizSn) } }} onPageChange={async (page: number) => { setCurPage(page); await fetchData() }}></UiTable>
+        <UiTable
+          headName=''
+          tableData={tableData}
+          headlist={tableHeadlistOldPp}
+          pageSize={10}
+          total={totalData}
+          children={undefined}
+          cellClick={(index) => {
+            if (index != null) {
+              const fileName = tableData[index]?.dcrpPplMtncBizNm ?? "";
+              const id = tableData[index]?.atflId ?? '';
+              setFileNm(fileName);
+              setAtflId(id);
+              setDcrpPplMtncBizSn(tableData[index]?.dcrpPplMtncBizSn);
+            }
+          }}
+          onPageChange={async (page: number) => { setCurPage(page); await fetchData() }}
+        />
       </ListDiv>
       <ListDiv className="mt-4">
         <OperFileUploadForm title='노후 하수관로 정비사업 주진현황 등록' onSubmit={async (file, year, quater, cd, id) => { await registFile(file, year, quater, cd, id) }} />

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

@@ -29,6 +29,8 @@ const FileUploadForm = ({
   const [files, setFiles] = useState<FileList | null>(null);
   const [upload, setUpload] = useState<Upload | null>(null);
   const uniqueId = useId(); // 각 FileUploadForm 인스턴스에 대한 고유 ID 생성
+  // FileUploader 컴포넌트를 강제로 재마운트하기 위한 key 상태 추가
+  const [uploaderKey, setUploaderKey] = useState(0);
 
   const quater = [{ text: '1분기', val: '1' }, { text: '2분기', val: '2' }, { text: '3분기', val: '3' }, { text: '4분기', val: '4' }];
   // 현재 년도부터 10년 전까지의 년도 옵션 생성
@@ -64,6 +66,7 @@ const FileUploadForm = ({
         <div className='flex items-center gap-2'> {/* FileUploader와 Button을 정렬하는 메인 flex 컨테이너 */}
           <div className="w-[300px] mr-4"> {/* FileUploader의 너비와 오른쪽 여백을 제어하는 컨테이너 */}
             <FileUploader
+              key={uploaderKey} // key 추가: 변경 시 컴포넌트 재마운트됨
               id={uniqueId}
               className="!h-auto !max-w-none flex-row items-center gap-2"
               accept={accept}
@@ -133,6 +136,8 @@ const FileUploadForm = ({
                   onSubmit(fileNm, selectedYear, selectedQuarter, internalAtflCd || '', internalAtflId || '');
                   setFiles(null); // 파일 업로드 후 파일 목록 초기화
                   setFileName(''); // 파일명 초기화
+                  // 파일 업로드 후 FileUploader 컴포넌트를 재마운트하기 위해 key 값 변경
+                  setUploaderKey(prev => prev + 1);
                 }
               }}
             >

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"
                       />

packages/common/business_components/src/ui/chart/BarChart.tsx

@@ -75,7 +75,7 @@ const CustomLegend = (props: any) => {
 };
 
 export default function Chart({chartConfig=undefined, chartData=[], chartTitle='차트', chartClassName='w-full h-full', graphSize=40, yFieldText='', showLegend=false} : BarChartProps) {
-  const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5"];
+  const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#FED16A", "#FFEEAD", "#D4A5A5"];
    const getMaxValue = (data: any[], keyPrefix: string) => {
     return Math.max(...data.map(item => 
       Object.keys(item)

packages/common/business_components/src/ui/sdmInsertForm/form.tsx

@@ -1,4 +1,5 @@
-import { FormField } from "../form";
+import React from 'react';
+import { FormField } from "../form";
 import { SelectBox } from "../select";
 import { Input } from "@common/components";
 import { FormUi } from "../form_ui";
@@ -55,6 +56,7 @@ interface FormSchema {
   bznmTotNo?: string;
   rgtr?: string;
   dmdAplyPswd?: string;
+  dmdAplyPswdConfirm?: string;
 }
 
 interface SdmRegFormProps {
@@ -85,12 +87,27 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
     const formatter = new AsYouType("KR");
     const formatted = formatter.input(input);
 
-    // 저장할 값 처리: 숫자만 추출
-    const digitsOnly = input.replace(/\D/g, "");
-
     return formatted
   };
 
+  // 사업자등록번호 포맷팅 함수 (3-2-5 형식)
+  const formatBusinessNumber = (value: string) => {
+    // 숫자만 추출
+    const digitsOnly = value.replace(/\D/g, "");
+    
+    // 10자리까지만 처리
+    const limitedDigits = digitsOnly.slice(0, 10);
+    
+    // 3-2-5 형식으로 포맷팅
+    if (limitedDigits.length <= 3) {
+      return limitedDigits;
+    } else if (limitedDigits.length <= 5) {
+      return `${limitedDigits.slice(0, 3)}-${limitedDigits.slice(3)}`;
+    } else {
+      return `${limitedDigits.slice(0, 3)}-${limitedDigits.slice(3, 5)}-${limitedDigits.slice(5)}`;
+    }
+  };
+
 
   const initializeSigunData = useCallback((sidoCd: string) => {
     if (sidoCd === '0') {
@@ -179,12 +196,15 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
     const value = e.target.value;
 
     if(noType === 'dmdInfoPk') {
-      if(orgBznmNo.substring(0,10) === value) {
+      // 숫자만 추출하여 저장 (포맷팅 제거)
+      const digitsOnly = value.replace(/\D/g, "");
+      
+      if(orgBznmNo.substring(0,10) === digitsOnly) {
         setIsDuplicate(true);
       } else {
         setIsDuplicate(false);
       }
-      field?.onChange(value);
+      field?.onChange(digitsOnly);
     } else {
       if(orgBznmNo.substring(10,14) === value) {
         setIsDuplicate(true);
@@ -296,7 +316,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
           type="text"
           className="!text-xl text-gray-600"
           onChange={(e) => bznNoChange(e, 'dmdInfoPk', field)}
-          value={field.value}
+          value={formatBusinessNumber(field.value || '')}
           readOnly={!!updateList?.dmdInfoPk}
         />
       )
@@ -368,32 +388,60 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
           {...field}
         />
       )
+    },
+    {
+      name: "dmdAplyPswdConfirm",
+      label: "패스워드확인",
+      component: (field) => (
+        <Input 
+          placeholder="패스워드를 입력하세요" 
+          type="password"
+          className="!text-xl text-gray-600"
+          {...field}
+        />
+      )
     }
   ]
 
   return (
     <>
-      {formFields.filter((item)=>
-      {if(updateList?.dmdInfoPk){
-        return item.name !== 'dmdAplyPswd'
-      }else{
-        return item
-      }
-      })
-      .map(({ name, label, component }) => (
-        <FormField
-          key={String(name)}
-          control={form.control}
-          name={name}
-          render={({ field }) => (
-            name === 'bznmTotNo' ? component(field) : (
-              <FormUi label={label}>
-                {component(field)}
-              </FormUi>
-            )
-          )}
-        />
-      ))}
+      {formFields
+        .filter(({ name }) => !(updateList?.dmdInfoPk && (name === "dmdAplyPswd" || name === "dmdAplyPswdConfirm")))
+        .map(({ name, label, component }) => {
+          const error = form.formState.errors[name];
+          const inputId = `${name}-input`;
+          const errorId = `${name}-error`;
+          const isRequired = ["ctpvCd", "sggCd", "dmdCoNm", "dmdInfoPk", "daddr", "telno", "dmdAplyPswd", "dmdAplyPswdConfirm"].includes(name);
+
+          return (
+            <FormField
+              key={String(name)}
+              control={form.control}
+              name={name}
+              render={({ field }) => (
+                <div className="mb-4">
+                  <label htmlFor={inputId} className="block text-gray-800 font-medium">
+                    {label}
+                    {isRequired && <span className="text-red-500 ml-1">*</span>}
+                  </label>
+
+                  {React.cloneElement(component(field), {
+                    id: inputId,
+                    "aria-required": isRequired,
+                    "aria-invalid": !!error,
+                    "aria-describedby": error ? errorId : undefined
+                  })}
+
+                  {error?.message && (
+                    <p id={errorId} role="alert" className="text-red-500 text-sm mt-1">
+                      {error.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+          );
+        })}
     </>
   );
 }

packages/common/business_components/src/ui/sdmInsertForm/index.tsx

@@ -47,7 +47,17 @@ const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean ,up
     ? z.string().optional() // 패스워드는 선택 사항이며 길이 제한 없음
     : z.string().optional()
     .refine((val) => !val || (val.length >= 8 && val.length <= 16), "패스워드는 8자 이상 16자 이내로 입력해주세요"),
-
+  dmdAplyPswdConfirm: z.string()
+    .min(1, "패스워드확인을 입력해주세요"),
+}).refine((data) => {
+  // 패스워드 확인 검증
+  if (data.dmdAplyPswd && data.dmdAplyPswdConfirm) {
+    return data.dmdAplyPswd === data.dmdAplyPswdConfirm;
+  }
+  return true;
+}, {
+  message: "패스워드가 일치하지 않습니다",
+  path: ["dmdAplyPswdConfirm"], // 에러를 패스워드 확인 필드에 표시
 });
 
 type FormSchema = z.infer<ReturnType<typeof createFormSchema>>;
@@ -62,6 +72,7 @@ const defaultValues: FormSchema = {
   telno: '',
   rgtr: '',
   dmdAplyPswd: '',
+  dmdAplyPswdConfirm: '',
 };
 
 /**
@@ -149,7 +160,7 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
       console.log(' formData ', formData)
       
       /* await insertSdmData(formData); */
-      rtnInputData(formData as DemandCompType);
+      rtnInputData(formData as unknown as DemandCompType);
       
 
       //router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`);

packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import type { DemandCompType } from './form';
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { DemandCompType } from "./form";
 
 export type thisProps = {
   label: string | undefined;
   initValue: string | undefined;
-  dataList : DemandCompType[];
-  rtnValue : (searchText: string, pageCnt: number) => void;
-  rtnData : (item: DemandCompType) => void;
-  rtnText : (text: string) => void;
-}
+  dataList: DemandCompType[];
+  rtnValue: (searchText: string, pageCnt: number) => void;
+  rtnData: (item: DemandCompType) => void;
+  rtnText: (text: string) => void;
+};
 
 /**
  * 수요처 검색 컴포넌트
@@ -18,88 +18,110 @@ export type thisProps = {
  * @param dataList 검색할 때 넘기는 데이터 리스트
  * @param rtnData 검색 결과 반환 함수
  */
-export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=()=>{}, dataList=[], rtnData=()=>{}, rtnText=()=>{} } :thisProps) => {
-  
+export const SdmSearchForm = ({
+  label = undefined,
+  initValue = undefined,
+  rtnValue = () => {},
+  dataList = [],
+  rtnData = () => {},
+  rtnText = () => {},
+}: thisProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [textValue, setTextValue] = useState(initValue || '');
+  const [textValue, setTextValue] = useState(initValue || "");
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setTextValue(value);
-    rtnValue(value, 10);
-    rtnText(value);
-    if (value) {
-      setIsOpen(true);
-    } else {
-      setIsOpen(false);
-    }
-  }, [rtnValue, rtnText]);
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setTextValue(value);
+      rtnValue(value, 10);
+      rtnText(value);
+      if (value) {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    },
+    [rtnValue, rtnText],
+  );
 
-  const handleSuggestionClick = useCallback((item: DemandCompType) => {
-    setTextValue(item.dmdCoNm);
-    rtnData(item);
-    setIsOpen(false);
-  }, [rtnData]);
+  const handleSuggestionClick = useCallback(
+    (item: DemandCompType) => {
+      setTextValue(item.dmdCoNm);
+      rtnData(item);
+      setIsOpen(false);
+    },
+    [rtnData],
+  );
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target as Node)
+      ) {
         setIsOpen(false);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
 
   useEffect(() => {
-    if(initValue&& initValue?.length>0){
-      setTextValue(initValue)
+    if (initValue && initValue?.length > 0) {
+      setTextValue(initValue);
     }
-  },[initValue])
-  
+  }, [initValue]);
+
   return (
-    <div ref={wrapperRef}>
+    <div className="relative" ref={wrapperRef}>
       <input
         type="text"
         value={textValue}
         onChange={handleInputChange}
         /* onFocus={() => setIsOpen(true)} */
-        className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="h-[3.2rem] w-full rounded-md border border-gray-300 pl-3 !text-xl text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
         placeholder={`${label}을(를) 입력하세요`}
       />
       {isOpen && (
-        <div className=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto">
+        <div className="absolute top-full left-0 z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
           <div className="max-h-72">
-            {dataList && dataList.length > 0 ? dataList.map((item : DemandCompType, index : number) => (
-              <div
-                key={index}
-                className="!text-xl w-full text-left px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto"
-                onClick={() => handleSuggestionClick(item)}
-                role="button"
-                tabIndex={0}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    handleSuggestionClick(item);
-                  }
-                }}
-              >
-                {item.dmdInfoPk.substring(10,14) !== '0000' ? (
-                  <>
-                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoPk.substring(0,10)}&nbsp;
-                    <span className="text-gray-500">종사업자번호 : </span> {item.dmdInfoPk.substring(10,14)}&nbsp;
-                  </>
-                ) : (
-                  <>
-                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoPk.substring(0,10)}&nbsp;
-                  </>
-                )}
-                <span className="float-right">{item.dmdCoNm}</span>
-              </div>
-            )) : (
-              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
+            {dataList && dataList.length > 0 ? (
+              dataList.map((item: DemandCompType, index: number) => (
+                <div
+                  key={index}
+                  className="w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl hover:bg-gray-100"
+                  onClick={() => handleSuggestionClick(item)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      handleSuggestionClick(item);
+                    }
+                  }}
+                >
+                  {item.dmdInfoPk.substring(10, 14) !== "0000" ? (
+                    <>
+                      <span className="text-gray-500">사업자번호 : </span>{" "}
+                      {item.dmdInfoPk.substring(0, 10)}&nbsp;
+                      <span className="text-gray-500">
+                        종사업자번호 :{" "}
+                      </span>{" "}
+                      {item.dmdInfoPk.substring(10, 14)}&nbsp;
+                    </>
+                  ) : (
+                    <>
+                      <span className="text-gray-500">사업자번호 : </span>{" "}
+                      {item.dmdInfoPk.substring(0, 10)}&nbsp;
+                    </>
+                  )}
+                  <span className="float-right">{item.dmdCoNm}</span>
+                </div>
+              ))
+            ) : (
+              <div className="w-full cursor-pointer overflow-auto px-5 py-3 !text-xl hover:bg-gray-100">
                 검색 결과가 없습니다.
               </div>
             )}
@@ -107,5 +129,5 @@ export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=()
         </div>
       )}
     </div>
-  )
-}
+  );
+};

packages/common/business_components/src/ui/search_form_left/index.tsx

@@ -199,7 +199,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
           setRtnSidoText(selectedSido?.text || '');
         }
         initializeSigunData(val);
-        onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+        onSelectValue('0', 'sigun');
         break;
       case 'sigun':
         if (setRtnSigunValue) {

packages/common/business_components/src/ui/table/index.tsx

@@ -49,6 +49,12 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
     }
   }, [resetSelection]);
 
+  // 테이블 데이터가 변경될 때마다 선택된 행 초기화하는 useEffect 추가
+  useEffect(() => {
+    // 새로운 데이터가 로드되면 선택 상태 초기화
+    setIdx(-1);
+  }, [tableData]);
+
   const handlePageChange = (page: number) => {
     setCur(page);
     onPageChange(page);
@@ -83,7 +89,7 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
                         ?
                         <TableCell
                           className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
-                              cellClick ? 'cursor-pointer' : ''
+                            cellClick ? 'cursor-pointer' : ''
                             } !font-bold`}
                           onClick={() => handleCellClick(index, head.id)}
                           key={`cell-${head.id}-${index}`}
@@ -97,7 +103,7 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
                         :
                         <TableCell
                           className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
-                              cellClick ? 'cursor-pointer' : ''
+                            cellClick ? 'cursor-pointer' : ''
                             }`}
                           onClick={() => handleCellClick(index, head.id)}
                           key={`cell-${head.id}-${index}`}

packages/common/business_components/src/ui/table/uiPageNations.tsx

@@ -40,7 +40,8 @@ export default function UiPageNations(commonPageNationsProps: CommonPageNationsP
         <PaginationItem>
           <PaginationPrevious 
             href="#" 
-            onClick={() => {
+            onClick={(e) => {
+              e.preventDefault();
               if (startPage > 1) handlePageChange(startPage - 1);
             }} 
           />
@@ -53,7 +54,9 @@ export default function UiPageNations(commonPageNationsProps: CommonPageNationsP
               <PaginationLink 
                 href="#" 
                 isActive={pageNum === pageProps.cur}
-                onClick={() => handlePageChange(pageNum)}
+                onClick={(e) => {
+                  e.preventDefault();
+                  handlePageChange(pageNum)}}
               >
                 {pageNum}
               </PaginationLink>
@@ -65,7 +68,8 @@ export default function UiPageNations(commonPageNationsProps: CommonPageNationsP
         <PaginationItem>
           <PaginationNext 
             href="#" 
-            onClick={() => {
+            onClick={(e) => {
+              e.preventDefault();
               if (endPage < totalPages) handlePageChange(endPage + 1);
             }} 
           />

packages/common/components/src/ui/date-picker/index.tsx

@@ -13,12 +13,14 @@ type DatePickerProps = {
   placeholder?: string;
   disabled?: boolean;
   selected?: Date;
+  zIndex?: number; // z-index prop 추가
 } & React.ComponentProps<typeof DayPicker>;
 
 export function DatePicker({
   className,
   placeholder = "날짜 선택",
   disabled,
+  zIndex, // zIndex prop 받기
   ...props
 }: DatePickerProps) {
   return (
@@ -37,7 +39,10 @@ export function DatePicker({
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0">
+      <PopoverContent
+        className="w-auto p-0"
+        style={{ zIndex: zIndex || 'auto' }}
+      >
         <Calendar classNames={{ cell: "rounded-md" }} {...props} />
       </PopoverContent>
     </Popover>