From 2e838987772ffc06ce05937447fe36be69411dfd Mon Sep 17 00:00:00 2001 From: swcho Date: Wed, 23 Jul 2025 18:58:16 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20SearchModal=20=ED=95=9C=EA=B8=80=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/searchModal/searchModal.tsx | 273 +++++++++--------- 1 file changed, 131 insertions(+), 142 deletions(-) diff --git a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx index 5e5060fd9..321cece96 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState, useMemo } from 'react'; import axios from 'axios'; -import { UiModal, UiTable, DatePickerRange, SelectBox, UITab } from '@common/business_components/ui'; +import { UiModal, UiTable, SelectBox, UITab } from '@common/business_components/ui'; import { Button, Input, Label } from '@common/components'; import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox'; @@ -150,21 +150,21 @@ const SearchModal: React.FC = ({ const [curPage, setCurPage] = useState(1); const [detailCurPage, setDetailCurPage] = useState(1); const [detailBizId, setDetailBizId] = useState(0); - const [시도, set시도] = useState(0); - const [시군구, set시군구] = useState(0); + const [city, setCity] = useState(0); + const [sgg, setSgg] = useState(0); const [ctpvCd, setCtpvCd] = useState('0'); const [sigungu, setSigungu] = useState('0'); //const [swageProcessingZone, set처리구역] = useState(""); const [gubun, setGubun] = useState(""); // 하수정비기본계획 report // 날짜 상태 선언 - const [시작1, set시작1] = useState(""); - const [시작2, set시작2] = useState(""); - const [종료1, set종료1] = useState(""); - const [종료2, set종료2] = useState(""); - const [변수1, set변수1] = useState(""); - const [변수2, set변수2] = useState(""); - const [변수3, set변수3] = useState(""); - const [변수4, set변수4] = useState(""); + const [start1, setStart1] = useState(""); + const [start2, setStart2] = useState(""); + const [end1, setEnd1] = useState(""); + const [end2, setEnd2] = useState(""); + const [var1, setVar1] = useState(""); + const [var2, setVar2] = useState(""); + const [var3, setVar3] = useState(""); + const [var4, setVar4] = useState(""); // 시작, 종료, 경과년도 const [yearFilter, setYearFilter] = useState({ 시작: "", @@ -172,10 +172,6 @@ const SearchModal: React.FC = ({ // 경과년도: "", }); - const [가동개시_시작_월, set가동개시_시작_월] = useState(''); - 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 [filteredSiguns, setFilteredSiguns] = useState([{ val: '0', text: '전체', sido: '0' }]); @@ -242,20 +238,16 @@ const SearchModal: React.FC = ({ useEffect(() => { // filterParams 초기화 - set시작1(""); - set시작2(""); - set종료1(""); - set종료2(""); - set변수1(""); - set변수2(""); - set변수3(""); - set변수4(""); - set가동개시_시작_월(""); - set가동개시_종료_월(""); - set가동개시_시작_일(""); - set가동개시_종료_일(""); - set시도(0); - set시군구(0); + setStart1(""); + setStart2(""); + setEnd1(""); + setEnd2(""); + setVar1(""); + setVar2(""); + setVar3(""); + setVar4(""); + setCity(0); + setSgg(0); setCtpvCd('0'); setSigungu('0'); setYearFilter({ @@ -327,19 +319,19 @@ const SearchModal: React.FC = ({ page: `${curPage - 1}`, size: '5', }; - if (변수1) RequestDTO.bizNm = 변수1; - if (변수2 != '0' && 변수2) RequestDTO.bizTyCd = 변수2; + if (var1) RequestDTO.bizNm = var1; + if (var2 != '0' && var2) RequestDTO.bizTyCd = var2; // 수행기간 범위 const startDate = getDateString( yearFilter.시작, - 가동개시_시작_월, - 가동개시_시작_일, + '', + '', "19000101", ); const endDate = getDateString( yearFilter.종료, - 가동개시_종료_월, - 가동개시_종료_일, + '', + '', `${todayYear}${todayMonth}${todayDate}`, ); RequestDTO.fromflfmtEndYmd = startDate; @@ -463,33 +455,33 @@ const SearchModal: React.FC = ({ const pplCqlFilters = () => { const cqlFilters: string[] = []; // 추후 작성 예정 - if (변수1) cqlFilters.push(`usg_cd='${변수1}'`); - if (변수2) cqlFilters.push(`mqlt_cd='${변수2}'`); - if (변수3) cqlFilters.push(`pbadms_emd_cd='${변수3}'`); + if (var1) cqlFilters.push(`usg_cd='${var1}'`); + if (var2) cqlFilters.push(`mqlt_cd='${var2}'`); + if (var3) cqlFilters.push(`pbadms_emd_cd='${var3}'`); // 설치년도 범위 const startDate = getDateString( yearFilter.시작, - 가동개시_시작_월, - 가동개시_시작_일, + '', + '', "19000101", ); const endDate = getDateString( yearFilter.종료, - 가동개시_종료_월, - 가동개시_종료_일, + '', + '', `${todayYear}${todayMonth}${todayDate}`, ); cqlFilters.push( `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`, ); // 관경(mm) 범위 - if (시작1 && 종료1) cqlFilters.push(`pdmt BETWEEN ${시작1} AND ${종료1}`); - else if (시작1) cqlFilters.push(`pdmt >= ${시작1}`); - else if (종료1) cqlFilters.push(`pdmt <= ${종료1}`); + if (start1 && end1) cqlFilters.push(`pdmt BETWEEN ${start1} AND ${end1}`); + else if (start1) cqlFilters.push(`pdmt >= ${start1}`); + else if (end1) cqlFilters.push(`pdmt <= ${end1}`); // 연장(m) 범위 - if (시작2 && 종료2) cqlFilters.push(`prlg BETWEEN ${시작2} AND ${종료2}`); - else if (시작2) cqlFilters.push(`prlg >= ${시작2}`); - else if (종료2) cqlFilters.push(`prlg <= ${종료2}`); + if (start2 && end2) cqlFilters.push(`prlg BETWEEN ${start2} AND ${end2}`); + else if (start2) cqlFilters.push(`prlg >= ${start2}`); + else if (end2) cqlFilters.push(`prlg <= ${end2}`); return cqlFilters; }; @@ -499,40 +491,40 @@ const SearchModal: React.FC = ({ // 가동개시일자 범위 const startDate = getDateString( yearFilter.시작, - 가동개시_시작_월, - 가동개시_시작_일, + '', + '', "19000101", ); const endDate = getDateString( yearFilter.종료, - 가동개시_종료_월, - 가동개시_종료_일, + '', + '', `${todayYear}${todayMonth}${todayDate}`, ); cqlFilters.push( `oprtng_strt_ymd >= '${startDate}' and oprtng_strt_ymd <= '${endDate}'`, ); // 시설용량 범위 - if (시작1 && 종료1) - cqlFilters.push(`fclt_cpct BETWEEN ${시작1} AND ${종료1}`); - else if (시작1) cqlFilters.push(`fclt_cpct >= ${시작1}`); - else if (종료1) cqlFilters.push(`fclt_cpct <= ${종료1}`); + if (start1 && end1) + cqlFilters.push(`fclt_cpct BETWEEN ${start1} AND ${end1}`); + else if (start1) cqlFilters.push(`fclt_cpct >= ${start1}`); + else if (end1) cqlFilters.push(`fclt_cpct <= ${end1}`); // 처리구역 면적 - if (시작2 && 종료2) - cqlFilters.push(`prcsZoneAreaSum BETWEEN ${시작2} AND ${종료2}`); - else if (시작2) cqlFilters.push(`prcsZoneAreaSum >= ${시작2}`); - else if (종료2) cqlFilters.push(`prcsZoneAreaSum <= ${종료2}`); + if (start2 && end2) + cqlFilters.push(`prcsZoneAreaSum BETWEEN ${start2} AND ${end2}`); + else if (start2) cqlFilters.push(`prcsZoneAreaSum >= ${start2}`); + else if (end2) cqlFilters.push(`prcsZoneAreaSum <= ${end2}`); // 하수처리시설명 - if (변수1) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${변수1}%'`); + if (var1) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${var1}%'`); return cqlFilters; }; // 하수처리구역용 CQL 필터 생성 const zoneCqlFilters = () => { const cqlFilters: string[] = []; - if (시도) cqlFilters.push(`ctpv_cd='${시도}'`); - if (시군구) cqlFilters.push(`sgg_cd='${시군구}'`); - if (변수1) cqlFilters.push(`swtrmt_zone_nm ILIKE '%${변수1}%'`); - if (변수2) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${변수2}%'`); + if (city) cqlFilters.push(`ctpv_cd='${city}'`); + if (sgg) cqlFilters.push(`sgg_cd='${sgg}'`); + if (var1) cqlFilters.push(`swtrmt_zone_nm ILIKE '%${var1}%'`); + if (var2) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${var2}%'`); return cqlFilters; }; // 하수맨홀용 CQL 필터 생성 @@ -541,24 +533,24 @@ const SearchModal: React.FC = ({ // // 설치년도 범위 const startDate = getDateString( yearFilter.시작, - 가동개시_시작_월, - 가동개시_시작_일, + '', + '', "19000101", ); const endDate = getDateString( yearFilter.종료, - 가동개시_종료_월, - 가동개시_종료_일, + '', + '', `${todayYear}${todayMonth}${todayDate}`, ); cqlFilters.push( `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`, ); - if (변수1) cqlFilters.push(`usg_cd='${변수1}'`); + if (var1) cqlFilters.push(`usg_cd='${var1}'`); // 구경(mm) 범위 - if (시작1 && 종료1) cqlFilters.push(`swage_mh_diam BETWEEN ${시작1} AND ${종료1}`); - else if (시작1) cqlFilters.push(`swage_mh_diam >= ${시작1}`); - else if (종료1) cqlFilters.push(`swage_mh_diam <= ${종료1}`); + if (start1 && end1) cqlFilters.push(`swage_mh_diam BETWEEN ${start1} AND ${end1}`); + else if (start1) cqlFilters.push(`swage_mh_diam >= ${start1}`); + else if (end1) cqlFilters.push(`swage_mh_diam <= ${end1}`); return cqlFilters; }; @@ -568,29 +560,29 @@ const SearchModal: React.FC = ({ // 설치년도 범위 const startDate = getDateString( yearFilter.시작, - 가동개시_시작_월, - 가동개시_시작_일, + '', + '', "19000101", ); const endDate = getDateString( yearFilter.종료, - 가동개시_종료_월, - 가동개시_종료_일, + '', + '', `${todayYear}${todayMonth}${todayDate}`, ); cqlFilters.push( `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`, ); // 일일처리용량 범위 - if (시작1 && 종료1) - 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 (start1 && end1) + cqlFilters.push(`daily_prcs_cpct BETWEEN ${start1} AND ${end1}`); + else if (start1) cqlFilters.push(`daily_prcs_cpct >= ${start1}`); + else if (end1) cqlFilters.push(`daily_prcs_cpct <= ${end1}`); // 양수능력 범위 - if (시작2 && 종료2) - cqlFilters.push(`excln_wpmp_ablt BETWEEN ${시작2} AND ${종료2}`); - else if (시작2) cqlFilters.push(`excln_wpmp_ablt >= ${시작2}`); - else if (종료2) cqlFilters.push(`excln_wpmp_ablt <= ${종료2}`); + if (start2 && end2) + cqlFilters.push(`excln_wpmp_ablt BETWEEN ${start2} AND ${end2}`); + else if (start2) cqlFilters.push(`excln_wpmp_ablt >= ${start2}`); + else if (end2) cqlFilters.push(`excln_wpmp_ablt <= ${end2}`); return cqlFilters; }; @@ -600,14 +592,14 @@ const SearchModal: React.FC = ({ // 설치년도 범위 const startDate = getDateString( yearFilter.시작, - 가동개시_시작_월, - 가동개시_시작_일, + '', + '', "19000101", ); const endDate = getDateString( yearFilter.종료, - 가동개시_종료_월, - 가동개시_종료_일, + '', + '', `${todayYear}${todayMonth}${todayDate}`, ); cqlFilters.push( @@ -782,9 +774,9 @@ const SearchModal: React.FC = ({ selectClass="rounded-lg bg-white text-xl" label="용도" selectArray={MS_SWAGE_PPL_USE_CODES} - value={변수1} + value={var1} onSelectValue={(val) => { - set변수1(String(val)); + setVar1(String(val)); }} selectContentClass="z-[101]" /> @@ -794,9 +786,9 @@ const SearchModal: React.FC = ({ selectClass="rounded-lg bg-white text-xl" label="재질" selectArray={MS_SWAGE_PPL_CODES} - value={변수2} + value={var2} onSelectValue={(val) => { - set변수2(String(val)); + setVar2(String(val)); }} selectContentClass="z-[101]" /> @@ -805,22 +797,22 @@ const SearchModal: React.FC = ({ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set시작1(val); + setVar1(val); }} /> ~ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set종료1(val); + setEnd1(val); }} /> {/* 연장 */} @@ -828,22 +820,22 @@ const SearchModal: React.FC = ({ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set시작2(val); + setStart2(val); }} /> ~ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set종료2(val); + setEnd2(val); }} /> {/* 조회 버튼 */} @@ -876,22 +868,22 @@ const SearchModal: React.FC = ({ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set시작1(val); + setStart1(val); }} /> ~ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set종료1(val); + setEnd1(val); }} /> {/* 처리구역 면적 */} @@ -899,22 +891,22 @@ const SearchModal: React.FC = ({ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set시작2(val); + setStart2(val); }} /> ~ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set종료2(val); + setEnd2(val); }} /> {/* 하수처리시설명 */} @@ -922,9 +914,9 @@ const SearchModal: React.FC = ({ { - set변수1(e.target.value); + setVar1(e.target.value); }} /> {/* 조회 버튼 */} @@ -939,30 +931,30 @@ const SearchModal: React.FC = ({
{ - set시도(sidoId); - set시군구(0); + setCity(sidoId); + setSgg(0); }} - onSigunguChange={set시군구} + onSigunguChange={setSgg} /> { - set변수1(e.target.value); + setVar1(e.target.value); }} /> { - set변수2(e.target.value); + setVar2(e.target.value); }} /> {/* 조회 버튼 */} @@ -996,9 +988,9 @@ const SearchModal: React.FC = ({ selectClass="rounded-lg bg-white text-xl" label="용도" selectArray={MS_SWAGE_MHL_USE_CODES} - value={변수1} + value={var1} onSelectValue={(val) => { - set변수1(String(val)); + setVar1(String(val)); }} selectContentClass="z-[101]" /> @@ -1007,22 +999,22 @@ const SearchModal: React.FC = ({ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set시작1(val); + setStart1(val); }} /> ~ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set종료1(val); + setEnd1(val); }} /> {/* 조회 버튼 */} @@ -1049,22 +1041,22 @@ const SearchModal: React.FC = ({ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set시작1(val); + setStart1(val); }} /> ~ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set종료1(val); + setEnd1(val); }} /> {/* 양수능력 - 우수맨홀 */} @@ -1074,22 +1066,22 @@ const SearchModal: React.FC = ({ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set시작2(val); + setStart2(val); }} /> ~ { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ""); - set종료2(val); + setEnd2(val); }} /> {/* 조회 버튼 */} @@ -1142,8 +1134,8 @@ const SearchModal: React.FC = ({ { set변수1(e.target.value); }} + value={var1} + onChange={(e) => { setVar1(e.target.value); }} /> = ({ selectClass="rounded-lg bg-white text-xl" label="사업 유형" selectArray={BIZ_TY_CD_SELECT_ARRAY} - value={변수2} + value={var2} onSelectValue={(val) => { - set변수2(String(val)); + setVar2(String(val)); }} selectContentClass="z-[101]" /> @@ -1199,10 +1191,7 @@ const SearchModal: React.FC = ({ className='!text-xl w-[100px] placeholder:text-center mr-8' placeholder="입력" value={gubun} - onChange={(e) => { - const val = e.target.value; - setGubun(val); - }} + onChange={(e) => {setGubun(e.target.value);}} />