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

feat:

Browse Source 
- SidoSigunguSelectoBox.tsx 명칭 ctpvSggPrcsFcltSelectBox.tsx로 수정 및 하수처리시설 SelectBox 컴포넌트 포함
- ctpvSggPrcsFcltSelectBox.tsx 변수명 변경
- 중점우수토실 운영정보 모달 상단 라벨 추가
This commit is contained in:
swcho
2025-08-01 16:55:21 +09:00
parent 406826a11b
commit f9fff06f62
14 changed files with 242 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/layout.tsx
+2 -5
View File
@@ -19,13 +19,10 @@ export default function MapLayout({
const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
const { fetchCtpvData, fetchSggData, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
const { fetchCtpvSggData, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
// 시도, 시군구 호출
useEffect(() => {
fetchCtpvData();
fetchSggData();
fetchCtpvSggData();
fetchBIZ_SE_CD();
fetchBIZ_TY_CD();
}, []);
apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx
+4
View File
@@ -6,6 +6,7 @@ import { untrtSwgRainCol3, untrtSwgRainCol4, untrtSwgRainCol5 } from '../common/
import { VerticalTable } from '@/components/ui/verticalTable';
import { getData } from "@/components/lib/api";
import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
import { Label } from '@radix-ui/react-label';
const inputColumn = [
{ id: "prrtymngYn", title: "중점여부", type: "select", options: ["우수토실", "중점우수토실"] },
@@ -180,6 +181,8 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
const renderModalBody = () => (
<div className='grid grid-cols-1 gap-4 p-4'>
<div>
<Label className='text-3xl font-medium text-label '>강우/측정 정보</Label>
{/* 강우정보 테이블 */}
<UiTable
headName='강우정보'
@@ -223,6 +226,7 @@ const Ssc = ({ featureData, isMainSsc, chmbrXcnts, chmbrYdnts, onSaveClick }: {
<TableHead className="text-center">채수횟수</TableHead>
</TableRow>
</UiTable>
</div>
{/* 수량/수질측정 정보 테이블 */}
<UiTable
apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
-12
View File
@@ -1,6 +1,4 @@
import React from 'react';
import { MS_SWAGE_MHL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_USE_CODES } from '../components/common/table';
import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
import { SelectBox } from '@common/business_components/ui';
import { Button, Input, Label } from '@common/components';
@@ -21,7 +19,6 @@ export const BASIC_TYPES = [
];
interface BasicTabProps {
open?: boolean;
basicType: string;
city: number;
sgg: number;
@@ -33,10 +30,6 @@ interface BasicTabProps {
var2: string;
yearFilter: { start: string; end: string; };
handleSearch: () => void;
// onOpenChange?: (open: boolean) => void;
// onFeatureSelect?: (row: any) => void;
// setTableData?: (data: any[]) => void;
// setTableCount?: (count: number) => void;
setBasicType: (type: string) => void;
setCity: (city: number) => void;
setCtpvName: (name: string) => void;
@@ -52,7 +45,6 @@ interface BasicTabProps {
}
const BasicTab: React.FC<BasicTabProps> = ({
// open,
basicType,
city,
sgg,
@@ -64,10 +56,6 @@ const BasicTab: React.FC<BasicTabProps> = ({
var2,
yearFilter,
handleSearch,
// onOpenChange,
// onFeatureSelect,
// setTableData,
// setTableCount,
setBasicType,
setCity,
setCtpvName,
apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
+1 -9
View File
@@ -55,15 +55,11 @@ export const operationInspectionTableHeadlist = [
];
interface OperationTabProps {
open: boolean;
workType: string;
var1: string;
var2: string;
yearFilter: { start: string; end: string; };
handleSearch: () => void;
// onOpenChange: (open: boolean) => void;
// setTableData: (data: any[]) => void;
// setTableCount: (count: number) => void;
setWorkType: (type: string) => void;
setYearFilter: (filter: { start: string; end: string }) => void;
setVar1: (value: string) => void;
@@ -71,15 +67,11 @@ interface OperationTabProps {
}
const OperationTab: React.FC<OperationTabProps> = ({
open,
workType,
var1,
var2,
yearFilter,
handleSearch,
// onOpenChange,
// setTableData,
// setTableCount,
setWorkType,
setVar1,
setVar2,
@@ -98,7 +90,7 @@ const OperationTab: React.FC<OperationTabProps> = ({
<div className="flex items-center mb-3">
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">업무구분</Label>
<SelectBox
className="w-80 mr-8"
className="w-40 mr-8"
selectClass="rounded-lg bg-white text-xl"
label=""
selectArray={WORK_TYPES.map((w) => ({
apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
+2 -2
View File
@@ -3,7 +3,7 @@
import React from 'react';
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
import { Button, Input, Label } from '@common/components';
import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
interface SwagePrcsFcltProps {
@@ -47,7 +47,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
return (
<div className="mb-3">
<div className="mb-2 flex items-center">
<SidoSigunguSelectBox
<CtpvSggPrcsFcltSelectBox
sido={city}
sigungu={sgg}
onSidoChange={(sidoId) => {
apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
// 하수처리구역
import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox';
import { Button, Input, Label } from '@common/components';
import React from 'react';
@@ -31,10 +31,10 @@ const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
return (
<div className="mb-3">
<div className="mb-2 flex items-center">
<SidoSigunguSelectBox
<CtpvSggPrcsFcltSelectBox
sido={city}
sigungu={sgg}
onSidoChange={(sidoId) => {
onSidoChange={(sidoId: number) => {
setCity(sidoId);
setSgg(0);
}}
apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx
+13 -77
View File
@@ -1,12 +1,9 @@
'use client'
import { getData } from '@/components/lib/api'
import { GovSidoSigunguSearchForm } from '@/components/ui/govSidoSigunguSearchForm'
import { DateMonthPicker, Form, SelectBox } from '@common/business_components/ui'
import ListDiv from '@common/business_components/ui/list_div'
import { Button, Label } from '@common/components/ui'
import { useEffect, useState, type ReactNode } from 'react'
import LoadingOverlay from '@/components/ui/LoadingBar'
import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox'
import { useState, type ReactNode } from 'react'
import { CtpvSggPrcsFcltSelectBox } from '@/components/ui/ctpvSggPrcsFcltSelectBox'
type TitleName = {
mainTitle: string
@@ -44,10 +41,8 @@ type BaseLayout = {
sggCd: number;
sggName?: string;
sigungu?: ApiSelectOption
selectedSwageTreatmentPlant?: string | number;
onSwageTreatmentPlantChange?: (value: string | number) => void;
selectedSwageProcessingZone?: string | number;
onSwageProcessingZoneChange?: (value: string | number) => void;
selectedSwagePrcsFclt?: string | number;
onSwagePrcsFcltChange?: (value: string | number) => void;
aplcnYmFrom?: string
setAplcnYmFrom?: (aplcnYmFrom: string) => void;
aplcnYmTo?: string
@@ -55,7 +50,7 @@ type BaseLayout = {
setCtpvCd: (ctpv: number) => void;
setSggCd: (sgg: number) => void;
setSggName?: (sggName: string) => void;
isLoading?: boolean;
setIsLoading?: (isLoading: boolean) => void;
onExcelDownload?: () => void;
onDeleteFile?: () => void;
onAnalysis?: () => void;
@@ -75,8 +70,8 @@ const BaseLayout = ({
sggCd,
sggName,
sigungu,
selectedSwageTreatmentPlant,
onSwageTreatmentPlantChange,
selectedSwagePrcsFclt,
onSwagePrcsFcltChange,
aplcnYmFrom,
setAplcnYmFrom,
aplcnYmTo,
@@ -84,7 +79,7 @@ const BaseLayout = ({
setCtpvCd,
setSggCd,
setSggName,
isLoading,
setIsLoading,
onExcelDownload,
onDeleteFile,
onAnalysis,
@@ -93,57 +88,6 @@ const BaseLayout = ({
const defaultOption: ApiSelectOption = { val: '0', text: '전체' };
const [treatmentFacilityOptions, setTreatmentFacilityOptions] = useState<ApiSelectOption[]>([]);
const [isLoadingAreaData, setIsLoadingAreaData] = useState<boolean>(isLoading || false);
useEffect(() => {
onSwageTreatmentPlantChange?.(0);
const fetchData = async () => {
if (!sggName) {
console.log("BaseLayout: Skipping fetchData because sigungu.val is:", sigungu?.val);
setTreatmentFacilityOptions([defaultOption]);
setIsLoadingAreaData(false);
return;
}
setIsLoadingAreaData(true);
try {
const queryParamsFacility = new URLSearchParams({
lyrTypeNm: 'tb_il_swage_prcs_fclt',
page: '0',
size: '100000', // 요청하신 URL에 맞게 50으로 변경 가능
sort: 'string',
});
const cqlFiltersFacility: string[] = [];
if (sggName) cqlFiltersFacility.push(`sgg_nm ILIKE '%${sggName}%'`);
if (cqlFiltersFacility.length > 0) queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and '));
console.log("BaseLayout API URL for Facilities:", `v1/fclts?${queryParamsFacility.toString()}`);
const facilityRes = await getData(`v1/fclts?${queryParamsFacility.toString()}`);
console.log('facilityRes.data', facilityRes.data);
const facilities = (facilityRes.data || [])
.map((item: any) => ({
text: item.swtrmtFcltNm,
val: item.fid
}))
.sort((a: ApiSelectOption, b: ApiSelectOption) => a.text.localeCompare(b.text, 'ko'));
setTreatmentFacilityOptions([defaultOption, ...facilities]);
console.log("BaseLayout Fetched Treatment Facilities:", [defaultOption, ...facilities]);
} catch (error) {
console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error);
setTreatmentFacilityOptions([defaultOption]);
} finally {
setIsLoadingAreaData(false);
}
};
fetchData();
}, [sggName]); // sgg 상태가 변경될 때마다 실행
// 파일 다운로드
const isChckFile = () => {
@@ -165,7 +109,6 @@ const BaseLayout = ({
return (
<Form {...form} className="min-h-screen flex flex-col">
<LoadingOverlay isLoading={isLoading ?? false} />
<ListDiv>
{/* searchBox.title이 있으면 h3 태그로 제목을 표시합니다. */}
{selectBox?.title && (
@@ -211,25 +154,18 @@ const BaseLayout = ({
/>
</>
)}
<SidoSigunguSelectBox
<CtpvSggPrcsFcltSelectBox
sido={ctpvCd}
sigungu={sggCd}
onSidoChange={(sidoId) => {
onSidoChange={(sidoId: number) => {
setCtpvCd(sidoId);
setSggCd(0);
}}
onSigunguChange={setSggCd}
setSggName={setSggName}
/>
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-4">하수처리장</Label>
<SelectBox
label={''}
value={selectedSwageTreatmentPlant}
selectArray={treatmentFacilityOptions}
className="w-[160px]"
selectClass="rounded-lg bg-white truncate"
onSelectValue={(val) => onSwageTreatmentPlantChange?.(val)}
selectContentClass="z-[101]"
selectedSwagePrcsFclt={selectedSwagePrcsFclt}
onSwagePrcsFcltChange={onSwagePrcsFcltChange}
setIsLoading={setIsLoading}
/>
{selectBox?.searchChk && (
<div className='flex flex-1 justify-end mr-6'>
apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx
+3 -3
View File
@@ -340,12 +340,12 @@ const IrSetting = () => {
ctpvCd={ctpvCd}
sggCd={sggCd}
sggName={sggName}
selectedSwageTreatmentPlant={select1}
onSwageTreatmentPlantChange={setSelect1}
selectedSwagePrcsFclt={select1}
onSwagePrcsFcltChange={setSelect1}
setCtpvCd={setCtpvCd}
setSggCd={setSggCd}
setSggName={setSggName}
isLoading={isLoadingResult}
setIsLoading={setIsLoadingResult}
onAnalysis={handleAnalysisClick}
>
{[<div key="irsetting-layout-key" className="grid gap-4">
apps/sn/app/(with-base-layout)/ii/rdii/page.tsx
+3 -3
View File
@@ -396,12 +396,12 @@ export default function RTKForm() {
ctpvCd={ctpvCd}
sggCd={sggCd}
sggName={sggName}
selectedSwageTreatmentPlant={select1}
onSwageTreatmentPlantChange={setSelect1}
selectedSwagePrcsFclt={select1}
onSwagePrcsFcltChange={setSelect1}
setCtpvCd={setCtpvCd}
setSggCd={setSggCd}
setSggName={setSggName}
isLoading={isLoadingResult}
setIsLoading={setIsLoadingResult}
onAnalysis={handleAnalysisClick}
>
{[<div className="space-y-[1.2rem] overflow-x-auto pt-4 pb-4 px-2" key="form-section">
apps/sn/app/(with-base-layout)/ii/rdiiResult/page.tsx
+3 -3
View File
@@ -284,8 +284,8 @@ const Result = () => {
ctpvCd={ctpvCd}
sggCd={sggCd}
sggName={sggName}
selectedSwageTreatmentPlant={form.watch("swageTmplntCd")}
onSwageTreatmentPlantChange={(val) => form.setValue("swageTmplntCd", String(val))}
selectedSwagePrcsFclt={form.watch("swageTmplntCd")}
onSwagePrcsFcltChange={(val) => form.setValue("swageTmplntCd", String(val))}
aplcnYmFrom={form.watch("aplcnYmFrom")}
setAplcnYmFrom={(val: string) => { form.setValue("aplcnYmFrom", val) }}
aplcnYmTo={form.watch("aplcnYmTo")}
@@ -293,7 +293,7 @@ const Result = () => {
setCtpvCd={setCtpvCd}
setSggCd={setSggCd}
setSggName={setSggName}
isLoading={isLoadingResult}
setIsLoading={setIsLoadingResult}
// Excel 다운로드 핸들러 추가
onExcelDownload={handleExcelDownload}
onDeleteFile={handleFileDelete}
apps/sn/app/(with-base-layout)/ii/result/page.tsx
+3 -3
View File
@@ -282,8 +282,8 @@ const Result = () => {
ctpvCd={ctpvCd}
sggCd={sggCd}
sggName={sggName}
selectedSwageTreatmentPlant={form.watch("swageTmplntCd")}
onSwageTreatmentPlantChange={(val) => form.setValue("swageTmplntCd", String(val))}
selectedSwagePrcsFclt={form.watch("swageTmplntCd")}
onSwagePrcsFcltChange={(val) => form.setValue("swageTmplntCd", String(val))}
aplcnYmFrom={form.watch("aplcnYmFrom")}
setAplcnYmFrom={(val: string) => { form.setValue("aplcnYmFrom", val) }}
aplcnYmTo={form.watch("aplcnYmTo")}
@@ -291,7 +291,7 @@ const Result = () => {
setCtpvCd={setCtpvCd}
setSggCd={setSggCd}
setSggName={setSggName}
isLoading={isLoadingResult} // 로딩 상태 전달
setIsLoading={setIsLoadingResult}
// Excel 다운로드 핸들러 추가
onExcelDownload={handleExcelDownload}
onDeleteFile={handleFileDelete}
apps/sn/app/(with-base-layout)/layout.tsx
+2 -3
View File
@@ -20,11 +20,10 @@ export default function WithBaseLayout({
const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
const { fetchCtpvData, fetchSggData, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
const { fetchCtpvSggData, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
useEffect(() => {
fetchCtpvData();
fetchSggData();
fetchCtpvSggData();
fetchBIZ_SE_CD();
fetchBIZ_TY_CD();
}, []);
apps/sn/app/components/ui/SidoSigunguSelectBox.tsx
-81
View File
@@ -1,81 +0,0 @@
import React, { useState, useMemo, useEffect } from "react";
import { SelectBox } from '@common/business_components/ui'
import { Label } from '@common/components';
import useStore from '../../store/useStore';
interface SidoSigunguSelectBoxProps {
sido: number;
sigungu: number;
onSidoChange: (id: number) => void;
setCtpvName?: (name: string) => void;
onSigunguChange: (id: number) => void;
setSggName?: (name: string) => void;
className?: string;
}
export function SidoSigunguSelectBox({
sido,
sigungu,
onSidoChange,
setCtpvName,
onSigunguChange,
setSggName,
className = "",
}: SidoSigunguSelectBoxProps) {
const { ctpv, sgg} = useStore();
useEffect(() => {
(async () => {
onSidoChange(0);
onSigunguChange(0);
if (setCtpvName && setSggName) {
setCtpvName("");
setSggName("");
}
})();
}, []);
return (
<div className={`flex items-center justify-center ${className} mr-8`}>
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
<SelectBox
className="w-60 mr-8"
selectClass="rounded-lg bg-white"
label=""
selectArray={
[{ val: 0, text: '전체' },
...ctpv.map(opt => ({ val: opt.id, text: opt.name }))
]
}
value={sido}
onSelectValue={val => {
onSidoChange(Number(val));
if (setCtpvName) setCtpvName(ctpv.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>
<SelectBox
className="w-48"
selectClass="w-48 rounded-lg bg-white truncate"
label=""
selectArray={
[{ val: 0, text: '전체' },
...sgg
.filter(opt => String(opt.id).slice(0, 2) === String(sido))
.map(opt => ({ val: opt.id, text: opt.name }))
]
}
value={sigungu}
onSelectValue={val => {
onSigunguChange(Number(val))
if (setSggName) setSggName(sgg.find(opt => Number(opt.id) === Number(val))?.name || "");
}}
selectContentClass="z-[101]"
/>
</div>
);
}
apps/sn/app/components/ui/ctpvSggPrcsFcltSelectBox.tsx
+161
View File
@@ -0,0 +1,161 @@
import React, { useState, useMemo, useEffect } from "react";
import { SelectBox } from '@common/business_components/ui'
import { Label } from '@common/components';
import useStore from '../../store/useStore';
import { getData } from '@/components/lib/api/index';
interface ApiSelectOption {
text: string;
val: string;
}
interface CtpvSggPrcsFcltSelectBoxProps {
sido: number;
sigungu: number;
sggName?: string;
onSidoChange: (id: number) => void;
onSigunguChange: (id: number) => void;
setCtpvName?: (name: string) => void;
setSggName?: (name: string) => void;
className?: string;
selectedSwagePrcsFclt?: string | number;
onSwagePrcsFcltChange?: (value: string | number) => void;
setIsLoading?: (isLoading: boolean) => void;
}
const defaultOption: ApiSelectOption = { val: '0', text: '전체' };
export function CtpvSggPrcsFcltSelectBox({
sido,
sigungu,
sggName,
onSidoChange,
setCtpvName,
onSigunguChange,
setSggName,
className = "",
selectedSwagePrcsFclt,
onSwagePrcsFcltChange,
setIsLoading,
}: CtpvSggPrcsFcltSelectBoxProps) {
const [prcsFcltOptions, setPrcsFcltOptions] = useState<ApiSelectOption[]>([]);
const { ctpv, sgg } = useStore();
useEffect(() => {
(async () => {
onSidoChange(0);
onSigunguChange(0);
if (setCtpvName && setSggName) {
setCtpvName("");
setSggName("");
}
})();
}, []);
// useEffect(() => {
// onSwagePrcsFcltChange?.('0');
// const fetchData = async () => {
// if (!sggName) {
// console.log("BaseLayout: Skipping fetchData because sigungu.val is:", sggName);
// setPrcsFcltOptions([defaultOption]);
// if (setIsLoading) setIsLoading(false);
// return;
// }
// if (setIsLoading) setIsLoading(true);
// try {
// const queryParamsFacility = new URLSearchParams({
// lyrTypeNm: 'tb_il_swage_prcs_fclt',
// page: '0',
// size: '100000', // 요청하신 URL에 맞게 50으로 변경 가능
// sort: 'string',
// });
// const cqlFiltersFacility: string[] = [];
// if (sggName) cqlFiltersFacility.push(`sgg_nm ILIKE '%${sggName}%'`);
// if (cqlFiltersFacility.length > 0) queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and '));
// console.log("BaseLayout API URL for Facilities:", `v1/fclts?${queryParamsFacility.toString()}`);
// const facilityRes = await getData(`v1/fclts?${queryParamsFacility.toString()}`);
// console.log('facilityRes.data', facilityRes.data);
// const facilities = (facilityRes.data || [])
// .map((item: any) => ({
// text: item.swtrmtFcltNm,
// val: item.fid
// }))
// .sort((a: ApiSelectOption, b: ApiSelectOption) => a.text.localeCompare(b.text, 'ko'));
// setPrcsFcltOptions(facilities);
// console.log("BaseLayout Fetched Treatment Facilities:", prcsFcltOptions);
// } catch (error) {
// console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error);
// setPrcsFcltOptions([]);
// } finally {
// if (setIsLoading) setIsLoading(false);
// }
// };
// fetchData();
// }, [sggName]);
return (
<div className={`flex items-center justify-center ${className} mr-8`}>
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
<SelectBox
className="w-60 mr-8"
selectClass="rounded-lg bg-white"
label=""
selectArray={
[{ val: 0, text: '전체' },
...ctpv.map(opt => ({ val: opt.id, text: opt.name }))
]
}
value={sido}
onSelectValue={val => {
onSidoChange(Number(val));
if (setCtpvName) setCtpvName(ctpv.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>
<SelectBox
className="w-48"
selectClass="w-48 rounded-lg bg-white truncate"
label=""
selectArray={
[{ val: 0, text: '전체' },
...sgg
.filter(opt => String(opt.id).slice(0, 2) === String(sido))
.map(opt => ({ val: opt.id, text: opt.name }))
]
}
value={sigungu}
onSelectValue={val => {
onSigunguChange(Number(val))
if (setSggName) setSggName(sgg.find(opt => Number(opt.id) === Number(val))?.name || "");
}}
selectContentClass="z-[101]"
/>
{selectedSwagePrcsFclt && onSwagePrcsFcltChange && (
<>
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap ml-8 mr-4">하수처리시설명</Label>
<SelectBox
label={''}
value={selectedSwagePrcsFclt}
selectArray={[defaultOption, ...prcsFcltOptions]}
className="w-[160px]"
selectClass="rounded-lg bg-white truncate"
onSelectValue={(val) => onSwagePrcsFcltChange?.(val)}
selectContentClass="z-[101]"
/>
</>
)}
</div>
);
}