From 234954a9296e810ae5dc85adc104cb57ff0b86f6 Mon Sep 17 00:00:00 2001 From: swcho Date: Tue, 13 May 2025 18:07:21 +0900 Subject: [PATCH] =?UTF-8?q?feat,=20fix=20:=20=ED=95=98=EC=88=98=EA=B4=80?= =?UTF-8?q?=EB=A1=9C,=20=EC=9A=B4=EC=98=81=EC=A0=95=EB=B3=B4,=20=ED=95=98?= =?UTF-8?q?=EC=88=98=EB=8F=84=EC=A0=95=EB=B9=84=20=EA=B8=B0=EB=B3=B8?= =?UTF-8?q?=EA=B3=84=ED=9A=8D=20=EB=B3=B4=EA=B3=A0=EC=84=9C=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=ED=97=A4=EB=8D=94=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=9E=91=EC=84=B1,=20FeatureClickEventPopup=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=EC=82=AD=EC=A0=9C,=20UITab2=20border=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/map/SearchModal.tsx | 1259 +++++++++-------- apps/sn/app/map/featureClickEventPopup.tsx | 1 - .../src/ui/tab/index-2.tsx | 2 +- 3 files changed, 652 insertions(+), 610 deletions(-) diff --git a/apps/sn/app/map/SearchModal.tsx b/apps/sn/app/map/SearchModal.tsx index 6f7ae8dfb..0368f84ac 100644 --- a/apps/sn/app/map/SearchModal.tsx +++ b/apps/sn/app/map/SearchModal.tsx @@ -5,6 +5,7 @@ import { UiModal } from '@common/business_components/ui/dialog_ui'; import { Button } from '@common/components'; import { UiTable2 } from '@common/business_components/ui/table/index-2'; import { UITab2 } from '@common/business_components/ui/tab/index-2'; +import { SelectBox } from '@common/business_components/ui'; @@ -26,6 +27,18 @@ const BASIC_TYPES = [ { key: 'tb_ms_swage_psmtn_2', label: '빗물펌프' }, { key: 'tb_ms_otfl', label: '우수토실' }, ]; +// const BASIC_TYPES = Array.from( +// [ +// { key: 'tb_ms_swage_ppl', label: '하수관로' }, +// { key: 'tb_il_swage_prcs_fclt', label: '하수처리시설' }, +// { key: 'tb_ms_swage_prcs_zone', label: '하수처리구역' }, +// { key: 'tb_ms_swage_mh', label: '하수맨홀' }, +// { key: 'tb_ms_swage_psmtn_1', label: '오수펌프' }, +// { key: 'tb_ms_swage_psmtn_2', label: '빗물펌프' }, +// { key: 'tb_ms_otfl', label: '우수토실' }, +// ], +// (item) => ({ text: item.label, val: item.key }) +// ); // 운영정보 '구분' 선택 목록 const WORK_TYPES = [ { key: 'maintenance', label: '보수 및 갱신' }, @@ -37,7 +50,29 @@ const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`); // 테이블 헤더 리스트 // 하수관로 (추후 작성 예정) const swagePplTableHeadlist = [ - { id: 'ctpvNm', title: '시도명' }, + { id: 'pipeNumber', title: '관로번호' }, + { id: 'gisManageNumber', title: '관리번호(GIS)' }, + { id: 'managingInstitution', title: '관리기관' }, + { id: 'drawingNumber', title: '도엽번호' }, + { id: 'installationLocation', title: '설치위치' }, + { id: 'usage', title: '용도' }, + { id: 'pipeDiameter', title: '관경' }, + { id: 'pipeLength', title: '관로연장' }, + { id: 'pipeType', title: '관종' }, + { id: 'burialDepth', title: '매설심도' }, + { id: 'constructionYear', title: '개보수 년도' }, + { id: 'installationSubject', title: '설치 주체' }, + { id: 'area', title: '구역' }, + { id: 'division', title: '분구' }, + { id: 'alignmentType', title: '지선/간선 구분' }, + { id: 'flowType', title: '흐름 방식' }, + { id: 'boxCount', title: '박스 열수' }, + { id: 'height', title: '높이' }, + { id: 'width', title: '폭' }, + { id: 'startManholeNumber', title: '시점 맨홀번호' }, + { id: 'endManholeNumber', title: '종점 맨홀번호' }, + { id: 'startElevation', title: '시점관저고' }, + { id: 'endElevation', title: '종점관저고' }, ] // 하수처리구역 const swageZoneTableHeadlist = [ @@ -90,6 +125,27 @@ const swageFcltTableHeadlist = [ const swageMhTableHeadlist = [ { id: 'swtrmtFcltCd', title: '하수처리시설코드' }, ]; +// 운영정보 +const operationTableHeadlist = [ + { id: 'no', title: 'NO' }, + { id: 'manageNumber', title: '관리번호' }, + { id: 'diagnosisYear', title: '진단년도' }, + { id: 'null1', title: '...' }, + { id: 'null2', title: '...' }, + { id: 'installationLocation', title: '매설위치' }, +]; +// 하수도정비 기본계획 보고서 +const reportTableHeadlist = [ + { id: 'no', title: 'NO' }, + { id: 'approvalYear', title: '승인년도' }, + { id: 'sido', title: '시도' }, + { id: 'sigungu', title: '시군구' }, + { id: 'treatmentPlant', title: '하수처리장' }, + { id: 'treatmentZone', title: '하수처리구역' }, + { id: 'reportCount', title: '보고서(00건)' }, + { id: 'planMapCount', title: '하수도대장 평면도(00건)' }, + { id: 'regDate', title: '등록일자' }, +]; const sidoList = [ { id: 0, name: '선택' }, @@ -269,7 +325,9 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature // UiTable2에 넘길 headlist를 BASIC_TYPES 값에 따라 분기 처리 let dynamicHeadlist = swageZoneTableHeadlist; - if (basicType === 'tb_ms_swage_ppl') dynamicHeadlist = swagePplTableHeadlist; // 하수관로 + if (activeTab === 'operation') dynamicHeadlist = operationTableHeadlist; // 운영정보 + else if (activeTab === 'report') dynamicHeadlist = reportTableHeadlist; // 하수도정비기본계획보고서 + else if (basicType === 'tb_ms_swage_ppl') dynamicHeadlist = swagePplTableHeadlist; // 하수관로 else if (basicType === 'tb_il_swage_prcs_fclt') dynamicHeadlist = swageFcltTableHeadlist; // 하수처리시설 else if (basicType === 'tb_ms_swage_prcs_zone') dynamicHeadlist = swageZoneTableHeadlist; // 하수처리구역 else if (basicType === 'tb_ms_swage_mh') dynamicHeadlist = swageMhTableHeadlist; // 하수맨홀 @@ -503,583 +561,40 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature const renderBody = () => ( <> - {/* 탭 영역 */} - {/*
- {TABS.map(tab => ( - - ))} -
*/} {/* 탭 영역 */} ({ value: tab.key, label: tab.label, onClick: () => setActiveTab(tab.key), }))} > {/* 각각의 탭 영역 */} -
- {/* 기본정보 탭 */} - {activeTab === 'basic' && ( -
- {/* 구분 */} -
-
- - -
-
- {/* 분기처리: 하수관로 */} - {basicType === 'tb_ms_swage_ppl' && ( -
-
- {/* 용도코드 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set하수관로용도코드(val); - }} - /> - {/* 재질코드 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set하수관로재질코드(val); - }} - /> - {/* 행정읍면동코드 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set행정읍면동코드(val); - }} - /> -
- {/* 설치년도 */} -
- - {/* 시작년도 */} - - ~ - {/* 종료년도 */} - - {/* 경과년도 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - setYearFilter({ ...yearFilter, 경과년도: val }); - }} - /> -
-
- {/* 관경 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set시작1(val); - }} - /> - ~ - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set종료1(val); - }} - /> - {/* 연장 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set시작2(val); - }} - /> - ~ - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set종료2(val); - }} - /> - -
-
- )} - {/* 분기처리: 하수처리시설 */} - {basicType === 'tb_il_swage_prcs_fclt' && ( -
- {/* 가동개시일자 */} -
- - {/* 시작일자 */} - - ~ - {/* 종료일자 */} - - {/* 시설용량 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set시작1(val); - }} - /> - ~ - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set종료1(val); - }} - /> - {/* 하수처리시설명 */} - - set변수1(e.target.value)} /> -
-
- )} - {/* 분기처리: 하수처리구역 */} - {basicType === 'tb_ms_swage_prcs_zone' && ( -
-
- - - - - - set변수1(e.target.value)} /> - - set변수2(e.target.value)} /> -
-
- )} - {/* 분기처리: 하수맨홀 */} - {basicType === 'tb_ms_swage_mh' && ( -
-
- {/* 설치년도 */} -
- - {/* 시작년도 */} - - ~ - {/* 종료년도 */} - - {/* 경과년도 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - setYearFilter({ ...yearFilter, 경과년도: val }); - }} - /> -
-
-
- {/* 용도코드 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set변수1(val); - }} - /> - {/* 하수맨홀 구경 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set시작1(val); - }} - /> - ~ - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set종료1(val); - }} - /> -
-
- )} - {/* 분기처리: 하수펌프장 */} - {(basicType === 'tb_ms_swage_psmtn_1' || basicType === 'tb_ms_swage_psmtn_2') && ( -
-
- {/* 설치년도 */} -
- - {/* 시작년도 */} - - ~ - {/* 종료년도 */} - - {/* 경과년도 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - setYearFilter({ ...yearFilter, 경과년도: val }); - }} - /> -
-
-
- {/* 일일처리용량 - 오수맨홀 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set시작1(val); - }} - /> - ~ - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set종료1(val); - }} - /> - {/* 우수양수능력 - 우수맨홀 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set시작2(val); - }} - /> - ~ - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set종료2(val); - }} - /> -
-
- )} - {/* 분기처리: 우수토실? 토구? */} - {basicType === 'tb_ms_otfl' && ( -
-
- {/* 설치년도 */} -
- - {/* 시작년도 */} - - ~ - {/* 종료년도 */} - - {/* 경과년도 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - setYearFilter({ ...yearFilter, 경과년도: val }); - }} - /> -
-
-
- {/* 하천명 */} - - set변수1(e.target.value)} /> - {/* 계획방류량 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set시작1(val); - }} - /> - ~ - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - set종료1(val); - }} - /> -
-
- )} - - {/* 조회 버튼 중앙 정렬 */} -
- -
-
- )} - {/* 운영정보 탭 */} - {activeTab === 'operation' && ( -
-
- + {/* 기본정보 탭 */} + {activeTab === 'basic' && ( +
+ {/* 구분 */} +
+
+ + {/* setBasicType(String(value))} + /> */} - +
+
+ {/* 분기처리: 하수관로 */} + {basicType === 'tb_ms_swage_ppl' && ( +
{/* 설치년도 */}
@@ -1125,39 +640,494 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature }} />
+
+ {/* 관경 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set시작1(val); + }} + /> + ~ + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set종료1(val); + }} + /> + {/* 연장 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set시작2(val); + }} + /> + ~ + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set종료2(val); + }} + /> +
+
+ {/* 용도코드 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set하수관로용도코드(val); + }} + /> + {/* 재질코드 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set하수관로재질코드(val); + }} + /> + {/* 행정읍면동코드 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set행정읍면동코드(val); + }} + /> +
- {/* 조회 버튼 중앙 정렬 */} -
- + )} + {/* 분기처리: 하수처리시설 */} + {basicType === 'tb_il_swage_prcs_fclt' && ( +
+ {/* 가동개시일자 */} +
+ + {/* 시작일자 */} + + ~ + {/* 종료일자 */} + + {/* 시설용량 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set시작1(val); + }} + /> + ~ + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set종료1(val); + }} + /> + {/* 하수처리시설명 */} + + set변수1(e.target.value)} /> +
+ )} + {/* 분기처리: 하수처리구역 */} + {basicType === 'tb_ms_swage_prcs_zone' && ( +
+
+ + + + + + set변수1(e.target.value)} /> + + set변수2(e.target.value)} /> +
+
+ )} + {/* 분기처리: 하수맨홀 */} + {basicType === 'tb_ms_swage_mh' && ( +
+
+ {/* 설치년도 */} +
+ + {/* 시작년도 */} + + ~ + {/* 종료년도 */} + + {/* 경과년도 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + setYearFilter({ ...yearFilter, 경과년도: val }); + }} + /> +
+
+
+ {/* 용도코드 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set변수1(val); + }} + /> + {/* 하수맨홀 구경 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set시작1(val); + }} + /> + ~ + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set종료1(val); + }} + /> +
+
+ )} + {/* 분기처리: 하수펌프장 */} + {(basicType === 'tb_ms_swage_psmtn_1' || basicType === 'tb_ms_swage_psmtn_2') && ( +
+
+ {/* 설치년도 */} +
+ + {/* 시작년도 */} + + ~ + {/* 종료년도 */} + + {/* 경과년도 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + setYearFilter({ ...yearFilter, 경과년도: val }); + }} + /> +
+
+
+ {/* 일일처리용량 - 오수맨홀 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set시작1(val); + }} + /> + ~ + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set종료1(val); + }} + /> + {/* 우수양수능력 - 우수맨홀 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set시작2(val); + }} + /> + ~ + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set종료2(val); + }} + /> +
+
+ )} + {/* 분기처리: 우수토실? 토구? */} + {basicType === 'tb_ms_otfl' && ( +
+
+ {/* 설치년도 */} +
+ + {/* 시작년도 */} + + ~ + {/* 종료년도 */} + + {/* 경과년도 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + setYearFilter({ ...yearFilter, 경과년도: val }); + }} + /> +
+
+
+ {/* 하천명 */} + + set변수1(e.target.value)} /> + {/* 계획방류량 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set시작1(val); + }} + /> + ~ + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set종료1(val); + }} + /> +
+
+ )} + + {/* 조회 버튼 중앙 정렬 */} +
+
- )} - {/* 하수도정비기본계획보고서 탭 */} - {activeTab === 'report' && ( -
- {/* 시도, 시군구, 하수처리구역 한 줄 */} -
- - - - - - - - - {/* 시작일자 */} +
+ )} + {/* 운영정보 탭 */} + {activeTab === 'operation' && ( +
+
+ + + + {/* 설치년도 */} +
+ + {/* 시작년도 */} ~ - {/* 종료일자 */} + {/* 종료년도 */} -
- {/* 조회 버튼 중앙 정렬 */} -
- + {/* 경과년도 */} + + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + setYearFilter({ ...yearFilter, 경과년도: val }); + }} + />
- )} -
+ {/* 조회 버튼 중앙 정렬 */} +
+ +
+
+ )} + {/* 하수도정비기본계획보고서 탭 */} + {activeTab === 'report' && ( +
+ {/* 시도, 시군구, 하수처리구역 한 줄 */} +
+ + + + + + + + + {/* 시작일자 */} + + ~ + {/* 종료일자 */} + +
+ {/* 조회 버튼 중앙 정렬 */} +
+ +
+
+ )} {/* 📋 결과 리스트 */} < div - className="border-t space-y-2 w-full h-[50vh] overflow-auto" + className="border rounded space-y-2 w-full h-[60vh] overflow-auto" onWheel={e => { // 세로 스크롤이 최상단/최하단에 도달했을 때 가로 스크롤이 막히는 현상을 해결 const container = e.currentTarget; @@ -1218,7 +1261,7 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature }} > {/* 선택된 탭의 label */} - < div className="text-2xl font-bold mb-2" > + < div className="m-2 text-2xl font-bold mb-2" > {TABS.find(tab => tab.key === activeTab)?.label} {/* 조회 결과 라벨 및 건수 표시 */} { diff --git a/apps/sn/app/map/featureClickEventPopup.tsx b/apps/sn/app/map/featureClickEventPopup.tsx index 946331c97..834cfd6dc 100644 --- a/apps/sn/app/map/featureClickEventPopup.tsx +++ b/apps/sn/app/map/featureClickEventPopup.tsx @@ -43,7 +43,6 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, const fetchData = async () => { if (featureId) { const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기 - console.log("selectedLayerName", selectedLayerName); setLayerNm(selectedLayerName); // 상태 업데이트 const data = await getData(`v1/map/features/${featureId}`); diff --git a/packages/common/business_components/src/ui/tab/index-2.tsx b/packages/common/business_components/src/ui/tab/index-2.tsx index 23647ac7e..c8f6e75dd 100644 --- a/packages/common/business_components/src/ui/tab/index-2.tsx +++ b/packages/common/business_components/src/ui/tab/index-2.tsx @@ -18,7 +18,7 @@ const UITab2 = React.forwardRef< UITabProps >(({defaultValue, tabList, children}, ref)=>{ return ( - + {tabList.map((tab) => (