ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 하수처리시설에 시도, 시군구 검색 조건 추가

Browse Source
This commit is contained in:
swcho
2025-07-30 17:47:16 +09:00
parent bbfd7fd201
commit 6c6b5e662c
4 changed files with 76 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
+10
View File
@@ -39,7 +39,9 @@ interface BasicTabProps {
// setTableCount?: (count: number) => void;
setBasicType: (type: string) => void;
setCity: (city: number) => void;
setCtpvName: (name: string) => void;
setSgg: (sgg: number) => void;
setSggName: (name: string) => void;
setYearFilter: (filter: { start: string; end: string }) => void;
setStart1: (value: string) => void;
setStart2: (value: string) => void;
@@ -68,7 +70,9 @@ const BasicTab: React.FC<BasicTabProps> = ({
// setTableCount,
setBasicType,
setCity,
setCtpvName,
setSgg,
setSggName,
setYearFilter,
setStart1,
setStart2,
@@ -124,12 +128,18 @@ const BasicTab: React.FC<BasicTabProps> = ({
start2={start2}
end1={end1}
end2={end2}
city={city}
sgg={sgg}
yearFilter={yearFilter}
setVar1={setVar1}
setStart1={setStart1}
setStart2={setStart2}
setEnd1={setEnd1}
setEnd2={setEnd2}
setCity={setCity}
setCtpvName={setCtpvName}
setSgg={setSgg}
setSggName={setSggName}
setYearFilter={setYearFilter}
handleSearch={handleSearch}
/>
apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
+17 -9
View File
@@ -63,8 +63,10 @@ const SearchModal: React.FC<SearchModalProps> = ({
const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
const [isResetDetailSelection, setIsResetDetailSelection] = useState<boolean>(false);
const [detailBizId, setDetailBizId] = useState(0);
const [city, setCity] = useState(0);
const [sgg, setSgg] = useState(0);
const [city, setCity] = useState<number>(0);
const [ctpvName, setCtpvName] = useState<string>('');
const [sgg, setSgg] = useState<number>(0);
const [sggName, setSggName] = useState<string>('');
const [ctpvCd, setCtpvCd] = useState('0'); // 하수정비기본계획 report
const [sigungu, setSigungu] = useState('0'); // 하수정비기본계획 report
const [gubun, setGubun] = useState(""); // 하수정비기본계획 report
@@ -341,13 +343,17 @@ const SearchModal: React.FC<SearchModalProps> = ({
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 (start2 && end2)
cqlFilters.push(`prcsZoneAreaSum BETWEEN ${start2} AND ${end2}`);
else if (start2) cqlFilters.push(`prcsZoneAreaSum >= ${start2}`);
else if (end2) cqlFilters.push(`prcsZoneAreaSum <= ${end2}`);
// 하수처리시설명
if (var1) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${var1}%'`);
// 시도
if (ctpvName) cqlFilters.push(`ctpv_nm ILIKE '%${ctpvName}%'`);
if (sggName) cqlFilters.push(`sgg_nm ILIKE '%${sggName}%'`);
// // 처리구역 면적
// 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 (var1) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${var1}%'`);
return cqlFilters;
};
// 하수처리구역용 CQL 필터 생성
@@ -575,7 +581,9 @@ const SearchModal: React.FC<SearchModalProps> = ({
handleSearch={handleSearch}
setBasicType={setBasicType}
setCity={setCity}
setCtpvName={setCtpvName}
setSgg={setSgg}
setSggName={setSggName}
setYearFilter={setYearFilter}
setStart1={setStart1}
setStart2={setStart2}
apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
+31 -6
View File
@@ -1,8 +1,10 @@
// 하수처리시설
import React from 'react';
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
import { Button, Input, Label } from '@common/components';
import React from 'react';
import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
interface SwagePrcsFcltProps {
var1: string;
@@ -10,12 +12,18 @@ interface SwagePrcsFcltProps {
start2: string;
end1: string;
end2: string;
city: number;
sgg: number;
yearFilter: { start: string; end: string };
setVar1: (value: string) => void;
setStart1: (value: string) => void;
setStart2: (value: string) => void;
setEnd1: (value: string) => void;
setEnd2: (value: string) => void;
setCity: (value: number) => void;
setCtpvName: (name: string) => void;
setSgg: (value: number) => void;
setSggName: (name: string) => void;
setYearFilter: (filter: { start: string; end: string }) => void;
handleSearch: () => void;
}
@@ -26,20 +34,37 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
start2,
end1,
end2,
city,
sgg,
yearFilter,
setVar1,
setStart1,
setStart2,
setEnd1,
setEnd2,
setCity,
setCtpvName,
setSgg,
setSggName,
setYearFilter,
handleSearch,
}) => {
return (
<div className="mb-3">
{/* 가동개시일자 */}
<div className="mb-2 flex items-center">
<SidoSigunguSelectBox
sido={city}
sigungu={sgg}
onSidoChange={(sidoId) => {
setCity(sidoId);
setSgg(0);
}}
onSigunguChange={setSgg}
setCtpvName={setCtpvName}
setSggName={setSggName}
/>
{/* 가동개시일자 */}
<Label className="mr-2 w-auto text-xl text-gray-600">가동개시일자</Label>
<YearRangeSelectBox
start={yearFilter.start}
@@ -90,7 +115,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
}}
/>
{/* 처리구역 면적 */}
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">처리구역 면적(m²)</Label>
{/* <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">처리구역 면적(m²)</Label>
<Input
className="w-[60px] !text-xl placeholder:text-center"
placeholder="입력"
@@ -123,9 +148,9 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
handleSearch();
}
}}
/>
/> */}
{/* 하수처리시설명 */}
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리시설명</Label>
{/* <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리시설명</Label>
<Input
className="mr-8 w-[100px] !text-xl placeholder:text-center"
placeholder="입력"
@@ -139,7 +164,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
handleSearch();
}
}}
/>
/> */}
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
apps/sn/app/components/ui/SidoSigunguSelectBox.tsx
+18 -4
View File
@@ -12,7 +12,9 @@ interface SidoSigunguSelectBoxProps {
sido: number;
sigungu: number;
onSidoChange: (id: number) => void;
setCtpvName?: (name: string) => void;
onSigunguChange: (id: number) => void;
setSggName?: (name: string) => void;
className?: string;
}
@@ -20,7 +22,9 @@ export function SidoSigunguSelectBox({
sido,
sigungu,
onSidoChange,
setCtpvName,
onSigunguChange,
setSggName,
className = "",
}: SidoSigunguSelectBoxProps) {
@@ -46,8 +50,8 @@ export function SidoSigunguSelectBox({
async () => {
const sggData = await getGeoData('/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo%3Atb_ms_sgg&outputFormat=application%2Fjson');
const sggList: Option[] = sggData.features
.map((feature: any) => ({ id: feature.properties.sgg_cd, name: feature.properties.sgg_korn_nm }))
.sort((a: Option, b: Option) => a.name.localeCompare(b.name, 'ko')); // 가나다순 정렬
.map((feature: any) => ({ id: feature.properties.sgg_cd, name: feature.properties.sgg_korn_nm }))
.sort((a: Option, b: Option) => a.name.localeCompare(b.name, 'ko')); // 가나다순 정렬
setSggList(sggList);
}
), []);
@@ -58,6 +62,10 @@ export function SidoSigunguSelectBox({
await fetchSggData();
onSidoChange(0);
onSigunguChange(0);
if (setCtpvName && setSggName) {
setCtpvName("");
setSggName("");
}
})();
}, []);
@@ -75,7 +83,10 @@ export function SidoSigunguSelectBox({
]
}
value={sido}
onSelectValue={val => onSidoChange(Number(val))}
onSelectValue={val => {
onSidoChange(Number(val));
if (setCtpvName) setCtpvName(ctpvList.find(opt => Number(opt.id) === Number(val))?.name || "");
}}
selectContentClass="z-[101]"
/>
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시군구</Label>
@@ -91,7 +102,10 @@ export function SidoSigunguSelectBox({
]
}
value={sigungu}
onSelectValue={val => onSigunguChange(Number(val))}
onSelectValue={val => {
onSigunguChange(Number(val))
if (setSggName) setSggName(sggList.find(opt => Number(opt.id) === Number(val))?.name || "");
}}
selectContentClass="z-[101]"
/>
</div>