From a403113bbc23bc6399cfa5e9ab73c7c34b6923df Mon Sep 17 00:00:00 2001
From: swcho <swcho@mind-one.co.kr>
Date: Wed, 16 Jul 2025 11:37:13 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20-=20'=EC=9E=90=EC=B2=B4=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EC=A0=95=EB=B3=B4'=20->=20'=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4'=EB=A1=9C=20=EC=88=98=EC=A0=95=20-=20?=
 =?UTF-8?q?=EC=9A=A9=EB=8F=84=20=EC=BD=94=EB=93=9C,=20=EC=9E=AC=EC=A7=88?=
 =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=ED=85=8D=EC=8A=A4=ED=8A=B8=EB=A1=9C=20?=
 =?UTF-8?q?=EB=A7=A4=ED=95=91=20(=EC=9D=BC=EB=8B=A8=20=ED=95=98=EB=93=9C?=
 =?UTF-8?q?=EC=BD=94=EB=94=A9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/sn/app/(map-layout)/map/SearchModal.tsx  | 128 +++++++++---------
 .../common/{codeMapper.tsx => codeMapper.ts}  |   0
 .../map/components/common/table.ts            |   6 +-
 .../components/popupComponent/MsSwagePpl.tsx  |   3 +-
 .../map/components/popupComponent/Ssc.tsx     |   2 +-
 .../components/popupComponent/sewagePump.tsx  |   2 +-
 .../map/components/popupComponent/smh.tsx     |   2 +-
 .../popupComponent/stormWaterPump.tsx         |   2 +-
 8 files changed, 69 insertions(+), 76 deletions(-)
 rename apps/sn/app/(map-layout)/map/components/common/{codeMapper.tsx => codeMapper.ts} (100%)

diff --git a/apps/sn/app/(map-layout)/map/SearchModal.tsx b/apps/sn/app/(map-layout)/map/SearchModal.tsx
index 74975331e..3ea1b2a8c 100644
--- a/apps/sn/app/(map-layout)/map/SearchModal.tsx
+++ b/apps/sn/app/(map-layout)/map/SearchModal.tsx
@@ -1,7 +1,6 @@
-import FeatureClickEventPopup from './featureClickEventPopup';
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import { UiModal, UiTable, DatePickerRange } from '@common/business_components/ui';
+import { UiModal, UiTable, DatePickerRange, SelectBox } from '@common/business_components/ui';
 import { Button, 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';
@@ -11,8 +10,9 @@ import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
 import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, ExclnSewagePumpCol2, stofcbrCol2 } from './components/common/table';
 import LoadingOverlay from '@/components/ui/LoadingBar';
 //import {  useDcTree, flattenFolders, useSggCd, useCityCd } from './components/searchModalReportApi';
-import { useDcTree,flattenFolders, useSggCd, useCityCd, addFileName, getFileDownload } from './components/searchModalReportApi';
+import { useDcTree, flattenFolders, useSggCd, useCityCd, addFileName, getFileDownload } from './components/searchModalReportApi';
 import { useCityCdStore, type SelectDataType } from './commonStore';
+import { MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES } from '../map/components/common/table';
 
 const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;
 
@@ -95,8 +95,8 @@ const SearchModal: React.FC<SearchModalProps> = ({
   const [tableCount, setTableCount] = useState<number>(0);
   const [curPage, setCurPage] = useState(1);
   const [basicType, setBasicType] = useState(BASIC_TYPES[0]?.val ?? "");
-  const [ctpvCd, setCtpvCd] = useState('0'); 
-  const [sigungu, setSigungu] = useState('0'); 
+  const [ctpvCd, setCtpvCd] = useState('0');
+  const [sigungu, setSigungu] = useState('0');
   //const [swageProcessingZone, set처리구역] = useState("");
   const [gubun, setGubun] = useState(""); // 하수정비기본계획 report
   // 날짜 상태 선언
@@ -104,7 +104,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
   const [시작2, set시작2] = useState("");
   const [종료1, set종료1] = useState("");
   const [종료2, set종료2] = useState("");
-  const [변수1, set변수1] = useState("");
+  const [변수1, set변수1] = useState();
   const [변수2, set변수2] = useState("");
   const [변수3, set변수3] = useState("");
   const [변수4, set변수4] = useState("");
@@ -121,7 +121,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
   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 [filteredSiguns, setFilteredSiguns] = useState<SelectDataType[]>([{ val: '0', text: '전체', sido: '0'  }]);
+  const [filteredSiguns, setFilteredSiguns] = useState<SelectDataType[]>([{ val: '0', text: '전체', sido: '0' }]);
 
   // 로딩바 
   const [isLoading, setIsLoading] = useState(false);
@@ -129,7 +129,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
   const sidos = useCityCd();
   const siguns = useSggCd();
   const reportOriginData = useDcTree(""); //:Folder[]
-  
+
   // 오늘 날짜 구하기
   const today = new Date();
   const todayYear = today.getFullYear().toString();
@@ -162,7 +162,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
   else if (basicType === 'tb_ms_swage_pmstn') dynamicHeadlist = ExclnSewagePumpCol2; // 하수펌프장
   else if (basicType === 'tb_ms_stofcbr') dynamicHeadlist = stofcbrCol2; // 우수토실
 
-  
+
   // 조회 버튼 클릭 시 1페이지로 이동하도록 수정
   const handleSearch = () => {
     setCurPage(1); // 페이지를 1로 초기화
@@ -187,17 +187,17 @@ const SearchModal: React.FC<SearchModalProps> = ({
     }
   };
 
-  const handleCtpvCdChange = (val: string|number) => { // 하수도정비기본계획.시도
+  const handleCtpvCdChange = (val: string | number) => { // 하수도정비기본계획.시도
     const sidoOption = sidos.find((n) => n.val === val);
     setCtpvCd(String(val));
     if (val !== '0') {
       const filterSiguns = siguns.filter(item => item.sido === sidoOption?.text);
-      filterSiguns.unshift({ val: '0', text: '전체', sido: '0'  });
+      filterSiguns.unshift({ val: '0', text: '전체', sido: '0' });
       setFilteredSiguns(filterSiguns);
-    } 
+    }
     setSigungu("0");
     setGubun("");
-    setYearFilter({시작: "",종료: "",});
+    setYearFilter({ 시작: "", 종료: "", });
   }
 
   useEffect(() => {
@@ -237,7 +237,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
     }
   }, [curPage]);
 
-  
+
   // 검색 API 호출 함수
   const fetchFilteredData = async () => {
     setIsLoading(true); // 로딩 시작
@@ -272,27 +272,27 @@ const SearchModal: React.FC<SearchModalProps> = ({
         if (ctpvCd !== "0") { // 시도검색
           const sidoOption = sidos.find((n) => n.val === ctpvCd);
           filterReportData = filterReportData.filter(item => item.sido === sidoOption?.text);
-        } 
+        }
         if (sigungu !== "0") { // 시군구검색
           const sigunguOption = filteredSiguns.find((n) => n.val === sigungu);
           filterReportData = filterReportData.filter(item => item.sigungu === sigunguOption?.text);
         }
         if (yearFilter.시작 != "" && yearFilter.종료 == "") //승인년도검색
-          filterReportData = filterReportData.filter(item => (item.approvalYear)? item.approvalYear >= yearFilter.시작+"년" : null);
-        if (yearFilter.시작 == "" && yearFilter.종료 != "") 
-          filterReportData = filterReportData.filter(item => (item.approvalYear)? item.approvalYear <= yearFilter.종료+"년" : null);
+          filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear >= yearFilter.시작 + "년" : null);
+        if (yearFilter.시작 == "" && yearFilter.종료 != "")
+          filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear <= yearFilter.종료 + "년" : null);
         if (yearFilter.시작 != "" && yearFilter.종료 != "") {
           filterReportData = filterReportData.filter(item => {
-            return (item.approvalYear)? item.approvalYear >= yearFilter.시작+"년" && item.approvalYear <= yearFilter.종료+"년": null;
+            return (item.approvalYear) ? item.approvalYear >= yearFilter.시작 + "년" && item.approvalYear <= yearFilter.종료 + "년" : null;
           });
         }
         if (gubun !== "") { // 구분검색
-          filterReportData = filterReportData.filter(item => (item.plantZoneGugun)? String(item.plantZoneGugun).includes(String(gubun)) : null);
+          filterReportData = filterReportData.filter(item => (item.plantZoneGugun) ? String(item.plantZoneGugun).includes(String(gubun)) : null);
         }
         console.log('report count:', filterReportData.length);
         setTableCount(filterReportData.length || 0);
-        filterReportData = filterReportData.slice((curPage-1)*10, curPage*10); // paging
-        filterReportData = filterReportData?.map((item, index)=>({...item, no:(curPage-1)*10+index+1}));
+        filterReportData = filterReportData.slice((curPage - 1) * 10, curPage * 10); // paging
+        filterReportData = filterReportData?.map((item, index) => ({ ...item, no: (curPage - 1) * 10 + index + 1 }));
         //const fileList = await getDcFile("CLS20250530000041");
         addFileName(filterReportData).then(data => {
           filterReportData = data;
@@ -447,7 +447,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
       cqlFilters.push(`daily_prcs_cpct BETWEEN ${시작1} AND ${종료1}`);
     else if (시작1) cqlFilters.push(`daily_prcs_cpct >= ${시작1}`);
     else if (종료1) cqlFilters.push(`daily_prcs_cpct <= ${종료1}`);
-    // 우수양수능력 범위
+    // 양수능력 범위
     if (시작2 && 종료2)
       cqlFilters.push(`excln_wpmp_ablt BETWEEN ${시작2} AND ${종료2}`);
     else if (시작2) cqlFilters.push(`excln_wpmp_ablt >= ${시작2}`);
@@ -514,7 +514,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
     // 설치년도 범위
     if (ctpvCd) cqlFilters.push(`ctpv_cd='${ctpvCd}'`);
     if (sigungu) cqlFilters.push(`sgg_cd='${sigungu}'`);
-    
+
     return cqlFilters;
   };
 
@@ -583,38 +583,32 @@ const SearchModal: React.FC<SearchModalProps> = ({
                       }}
                     />
                   </div> */}
-                  {/* 용도코드 */}
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    용도코드
-                  </Label>
-                  <Input
-                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
-                    placeholder="입력"
+                  {/* 용도 */}
+                  <SelectBox
+                    className="w-60 mr-8"
+                    selectClass="rounded-lg bg-white text-xl"
+                    label="용도"
+                    selectArray={MS_SWAGE_PPL_USE_CODES}
                     value={변수1}
-                    onChange={(e) => {
-                      // 숫자만 입력 허용
-                      const val = e.target.value.replace(/[^0-9]/g, "");
-                      set변수1(val);
+                    onSelectValue={(val) => {
+                      set변수1(String(val));
                     }}
                   />
-                  {/* 재질코드 */}
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    재질코드
-                  </Label>
-                  <Input
-                    className="mr-8 w-[100px] !text-xl placeholder:text-center"
-                    placeholder="입력"
+                  {/* 재질 */}
+                  <SelectBox
+                    className="w-60 mr-8"
+                    selectClass="rounded-lg bg-white text-xl"
+                    label="재질"
+                    selectArray={MS_SWAGE_PPL_CODES}
                     value={변수2}
-                    onChange={(e) => {
-                      // 숫자만 입력 허용
-                      const val = e.target.value.replace(/[^0-9]/g, "");
-                      set변수2(val);
+                    onSelectValue={(val) => {
+                      set변수2(String(val));
                     }}
                   />
                 </div>
                 <div className="flex items-center mb-2">
                   {/* 행정읍면동코드 */}
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
+                  {/* <Label className="mr-2 w-auto text-xl text-gray-600">
                     행정읍면동코드
                   </Label>
                   <Input
@@ -626,7 +620,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                       const val = e.target.value.replace(/[^0-9]/g, "");
                       set변수3(val);
                     }}
-                  />
+                  /> */}
                   {/* 관경 */}
                   <Label className="mr-2 w-auto text-xl text-gray-600">
                     관경(mm)
@@ -899,9 +893,9 @@ const SearchModal: React.FC<SearchModalProps> = ({
                       set종료1(val);
                     }}
                   />
-                  {/* 우수양수능력 - 우수맨홀 */}
+                  {/* 양수능력 - 우수맨홀 */}
                   <Label className="mr-2 w-auto text-xl text-gray-600">
-                    우수양수능력
+                    양수능력
                   </Label>
                   <Input
                     className="w-[100px] !text-xl placeholder:text-center"
@@ -1058,21 +1052,21 @@ const SearchModal: React.FC<SearchModalProps> = ({
             {/* 시도, 시군구, 하수처리구역 한 줄 */}
             <div className="mb-6 flex items-center">
               <SelectBox2
-                  className="w-[150px] mr-8"
-                  selectClass="rounded-lg bg-white"
-                  label="시도"
-                  selectArray={sidos}
-                  value={ctpvCd}
-                  onSelectValue={handleCtpvCdChange}
-                />
-                <SelectBox2
-                  className="w-48"
-                  selectClass="w-48 rounded-lg bg-white truncate"
-                  label="시군구"
-                  selectArray={filteredSiguns}
-                  value={sigungu}
-                  onSelectValue={val => setSigungu(String(val))}
-                />
+                className="w-[150px] mr-8"
+                selectClass="rounded-lg bg-white"
+                label="시도"
+                selectArray={sidos}
+                value={ctpvCd}
+                onSelectValue={handleCtpvCdChange}
+              />
+              <SelectBox2
+                className="w-48"
+                selectClass="w-48 rounded-lg bg-white truncate"
+                label="시군구"
+                selectArray={filteredSiguns}
+                value={sigungu}
+                onSelectValue={val => setSigungu(String(val))}
+              />
             </div>
             <div className="flex justify-between items-center mb-6">
               <div className="flex items-center gap-4">
@@ -1095,7 +1089,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                   endLabel=""
                 />
               </div>
-              
+
               {/* 조회 버튼 중앙 정렬 */}
               <div className="absolute bottom-4 right-4 mr-2">
                 <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
@@ -1133,7 +1127,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
             pageSize={tableData.length < 10 ? tableData.length : 10}
             total={tableCount}
             children={undefined}
-            cellClick={(activeTab!=='report')?handleCellClick:handleReportCellClick}
+            cellClick={(activeTab !== 'report') ? handleCellClick : handleReportCellClick}
             onPageChange={setCurPage}
             resetPageNo={false}
             cur={curPage}
diff --git a/apps/sn/app/(map-layout)/map/components/common/codeMapper.tsx b/apps/sn/app/(map-layout)/map/components/common/codeMapper.ts
similarity index 100%
rename from apps/sn/app/(map-layout)/map/components/common/codeMapper.tsx
rename to apps/sn/app/(map-layout)/map/components/common/codeMapper.ts
diff --git a/apps/sn/app/(map-layout)/map/components/common/table.ts b/apps/sn/app/(map-layout)/map/components/common/table.ts
index 0b89ad652..0444e6fc3 100644
--- a/apps/sn/app/(map-layout)/map/components/common/table.ts
+++ b/apps/sn/app/(map-layout)/map/components/common/table.ts
@@ -6,8 +6,8 @@ export const MsSwagePplCol = [
   { id: 'mapsht_no', title: '도엽번호' },
   { id: 'pdmt', title: '관경(mm)' },
   { id: 'prlg', title: '연장(m)' },
-  { id: 'usg_cd', title: '용도코드' },
-  { id: 'mqlt_cd', title: '재질코드' },
+  { 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²)' },
@@ -378,7 +378,7 @@ export const MsSwageMhlCol = [
   // { id: 'fclty_shp_cd', title: '시설물형태코드' },
   // { id: 'mhl_knd_cd', title: '맨홀종류코드' },
   { id: 'swage_mh_diam', title: '하수맨홀구경(mm)' },
-  { id: 'mqlt_cd', title: '재질코드' },
+  { id: 'mqlt_cd', title: '재질' },
   { id: 'wdth_len', title: '가로길이(m)' },
   { id: 'vrtc_len', title: '세로길이(m)' },
   // { id: 'ang_dir', title: '표고' },
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
index 38b0c25d6..b68684ffd 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx
@@ -60,12 +60,11 @@ const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClic
   return (
     <>
       <VerticalTable
-        headName='자체 입력정보'
+        headName='입력정보'
         tableData={featureData ? [formData] : []}
         headlist={inputColumn}
         pageSize={20}
         total={0}
-        children={undefined}
         cellClick={undefined}
         isEditable={true}
         onPageChange={function (page: number): void {
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx
index 8eb1b23bf..acc9cc657 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx
@@ -184,7 +184,7 @@ const Ssc = ({ featureData, isMainSsc, rainMeasureData, onSaveClick }: {
     <div>
       {!isMainSsc && (
         <VerticalTable
-          headName='자체 입력정보'
+          headName='입력정보'
           tableData={featureData ? [formData] : []}
           headlist={inputColumn}
           pageSize={0}
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/sewagePump.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/sewagePump.tsx
index d8f004cac..18cac4c00 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/sewagePump.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/sewagePump.tsx
@@ -38,7 +38,7 @@ const sewagePump = ({ featureData, isDrtwSewagePump, onSaveClick }: { featureDat
 
   return (
     <VerticalTable
-      headName='자체 입력정보'
+      headName='입력정보'
       tableData={featureData ? [formData] : []}
       headlist={isDrtwSewagePump ? drtwInputColumn : exclnInputColumn}
       pageSize={0}
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx
index e2a2cc747..d601aeafd 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx
@@ -32,7 +32,7 @@ const Smh = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: ()
 
   return (
     <VerticalTable
-      headName='자체 입력정보'
+      headName='입력정보'
       tableData={featureData ? [formData] : []}
       headlist={inputColumn}
       pageSize={20}
diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/stormWaterPump.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/stormWaterPump.tsx
index a73c344a5..00ffb3bfe 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/stormWaterPump.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/stormWaterPump.tsx
@@ -10,7 +10,7 @@ const StormWaterPump = ({ featureData }: { featureData: Record<string, any> }) =
   const filteredData = featureData && Object.entries(featureData).filter(([key]) => validKey.includes(key)).reduce((obj: Record<string, any>, [key, value]) => { obj[key] = value; return obj; }, {});
   return (
     <VerticalTable
-      headName='자체 입력정보'
+      headName='입력정보'
       tableData={[filteredData]}
       headlist={inputColumn}
       pageSize={0}