remove: GovSidoSigunguSearchForm 컴포넌트 삭제
This commit is contained in:
swcho
@@ -1,360 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { SelectBox } from '@common/business_components/ui/select';
|
|
||||||
import { Label } from '@radix-ui/react-label';
|
|
||||||
|
|
||||||
export type comCodeState = {
|
|
||||||
code: {
|
|
||||||
isInit: boolean;
|
|
||||||
chBuCd: SelectDataType[]
|
|
||||||
rainFcltCd: SelectDataType[];
|
|
||||||
bdstUsgCd: SelectDataType[];
|
|
||||||
cityCd: SelectDataType[];
|
|
||||||
sggCd: SelectDataType[];
|
|
||||||
rvbsnCd: SelectDataType[];
|
|
||||||
mdmbsnCd: SelectDataType[];
|
|
||||||
lgbsnCd: SelectDataType[];
|
|
||||||
lclgvrnmntCd: EnvPartSelectDataType[];
|
|
||||||
orgwtKndCd: SelectDataType[];
|
|
||||||
yn: SelectDataType[];
|
|
||||||
buildingType: {
|
|
||||||
RST: string,
|
|
||||||
RNB: string,
|
|
||||||
HTB: string
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
type SelectDataType = {
|
|
||||||
text: string;
|
|
||||||
val: string;
|
|
||||||
sido?: string; // 시도 코드 (선택 사항)
|
|
||||||
}
|
|
||||||
|
|
||||||
type EnvPartSelectDataType = SelectDataType & {
|
|
||||||
adstDliStrCd: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
type SearchFormLeftProps = {
|
|
||||||
isShowPart?: boolean | undefined;
|
|
||||||
children: React.ReactNode;
|
|
||||||
selectSidoData?: SelectDataType[] | [];
|
|
||||||
selectSigunData?: SelectDataType[] | [];
|
|
||||||
selectRegionData?: SelectDataType[] | [];
|
|
||||||
selectUnitWaterShedData?: SelectDataType[] | [];
|
|
||||||
selectMiddleRegionData?: SelectDataType[] | [];
|
|
||||||
selectEnvPartData?: EnvPartSelectDataType[] | [];
|
|
||||||
selectEnvPartSidoData?: SelectDataType[] | [];
|
|
||||||
selectEnvPartSigunData?: SelectDataType[] | [];
|
|
||||||
|
|
||||||
setRtnPartValue?: (value: string) => void;
|
|
||||||
setRtnSidoValue?: (value: string) => void;
|
|
||||||
setRtnSigunValue?: (value: string) => void;
|
|
||||||
setRtnRegionValue?: (value: string) => void;
|
|
||||||
setRtnUnitWaterShedValue?: (value: string) => void;
|
|
||||||
setRtnMiddleRegionValue?: (value: string) => void;
|
|
||||||
setRtnEnvPartValue?: (value: string) => void;
|
|
||||||
setRtnEnvPartSidoValue?: (value: string) => void;
|
|
||||||
setRtnEnvPartSigunValue?: (value: { val: string, text: string }) => void; // setRtnEnvPartSigunValue prop 타입을 객체로 변경
|
|
||||||
resetTrigger?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false }: SearchFormLeftProps) {
|
|
||||||
//환경청별 시도 시군구
|
|
||||||
const [envPartValue, setEnvPartValue] = useState<string>('0');
|
|
||||||
const [envPartSidoValue, setEnvPartSidoValue] = useState<string>('0'); // 환경청 선택 시 시/도 값
|
|
||||||
const [envPartSigunValue, setEnvPartSigunValue] = useState<string>('0'); // 환경청 선택 시 시/군/구 값
|
|
||||||
|
|
||||||
const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
|
|
||||||
|
|
||||||
// API로부터 가져온 전체 데이터 목록 (필터링 전)
|
|
||||||
const [allEnvPartOptions, setAllEnvPartOptions] = useState<EnvPartSelectDataType[]>([]);
|
|
||||||
const [allSidoOptions, setAllSidoOptions] = useState<SelectDataType[]>([]);
|
|
||||||
const [allSigunOptions, setAllSigunOptions] = useState<SelectDataType[]>([]);
|
|
||||||
|
|
||||||
// 조회된 조건에 맞는 환경청 시도 시군 (SelectBox에 실제 사용될 데이터)
|
|
||||||
const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }]);
|
|
||||||
const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }]);
|
|
||||||
const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0', sido: '0' }]);
|
|
||||||
|
|
||||||
// 시군구 데이터
|
|
||||||
const getSggCd = async (): Promise<SelectDataType[]> => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('http://con.mind-one.co.kr:11082/api/v1/addr/sgg', { method: "GET", headers: { accept: "application/json" } });
|
|
||||||
if (!response.ok) throw new Error(`시군구 데이터 오류: ${response.status}`);
|
|
||||||
const res = await response.json();
|
|
||||||
const sgg = res.data;
|
|
||||||
const sggCd = sgg.map((item: any) => ({
|
|
||||||
val: item.adstDstrCd,
|
|
||||||
sido: item.sido,
|
|
||||||
text: item.gugun,
|
|
||||||
}));
|
|
||||||
sggCd.unshift({ val: '0', text: '전체' }); // "전체" 옵션 추가
|
|
||||||
return sggCd;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('시군구 데이터를 가져오는데 실패했습니다:', error);
|
|
||||||
return [{ val: '0', text: '전체', sido: '0' }];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 시도 데이터
|
|
||||||
const getCityCd = async (): Promise<SelectDataType[]> => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('http://con.mind-one.co.kr:11082/api/v1/addr/city', { method: "GET", headers: { accept: "application/json" } });
|
|
||||||
if (!response.ok) throw new Error(`시도 데이터 오류: ${response.status}`);
|
|
||||||
const res = await response.json();
|
|
||||||
const city = res.data;
|
|
||||||
const cityCd = city.map((item: any) => ({
|
|
||||||
val: item.adstDstrCd,
|
|
||||||
text: item.sido,
|
|
||||||
}));
|
|
||||||
cityCd.unshift({ val: '0', text: '전체' });
|
|
||||||
return cityCd;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('시도 데이터를 가져오는데 실패했습니다:', error);
|
|
||||||
return [{ val: '0', text: '전체', sido: '0' }];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 환경청 데이터
|
|
||||||
const getEnvPartCd = async (): Promise<EnvPartSelectDataType[]> => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('http://con.mind-one.co.kr:11082/api/v1/addr/govArea', { method: "GET", headers: { accept: "application/json" } });
|
|
||||||
if (!response.ok) throw new Error(`환경청 데이터 오류: ${response.status}`);
|
|
||||||
const res = await response.json();
|
|
||||||
const lclgvrnmnt = res.data.filter((item: { lclgvrnmntNm: string; }) => {
|
|
||||||
// item.lclgvrnmntNm이 null이나 undefined가 아닌지 확인 후 endsWith 사용
|
|
||||||
return item.lclgvrnmntNm && item.lclgvrnmntNm.endsWith("환경청");
|
|
||||||
});
|
|
||||||
const lclgvrnmntCd = lclgvrnmnt.map((item: any) => ({
|
|
||||||
val: item.lclgvrnmntCd,
|
|
||||||
text: item.lclgvrnmntNm,
|
|
||||||
adstDliStrCd: item.adstDliStrCd || ''
|
|
||||||
}));
|
|
||||||
lclgvrnmntCd.unshift({ val: '0', text: '전체', adstDliStrCd: '' });
|
|
||||||
return lclgvrnmntCd;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('환경청 데이터를 가져오는데 실패했습니다:', error);
|
|
||||||
return [{ val: '0', text: '전체', adstDliStrCd: '', sido: '0' }];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const loadInitialData = async () => {
|
|
||||||
const [envParts, sidos, siguns] = await Promise.all([
|
|
||||||
getEnvPartCd(),
|
|
||||||
getCityCd(),
|
|
||||||
getSggCd()
|
|
||||||
]);
|
|
||||||
|
|
||||||
setAllEnvPartOptions(envParts.filter(item => item.val !== '0'));
|
|
||||||
setFilteredEnvPartData(envParts);
|
|
||||||
|
|
||||||
setAllSidoOptions(sidos.filter(item => item.val !== '0'));
|
|
||||||
// 초기 filteredEnvPartSidoData는 모든 시/도를 포함 (환경청 "전체" 선택 시)
|
|
||||||
setFilteredEnvPartSidoData(sidos.map(s => ({ ...s, adstDliStrCd: '' })));
|
|
||||||
|
|
||||||
|
|
||||||
setAllSigunOptions(siguns.filter(item => item.val !== '0'));
|
|
||||||
// 초기 filteredEnvPartSigunData는 모든 시/군/구를 포함 (환경청 "전체", 시/도 "전체" 선택 시)
|
|
||||||
setFilteredEnvPartSigunData(siguns);
|
|
||||||
|
|
||||||
// 만약 isShowPart가 true이고, partValue가 'G'(환경청별)로 기본 설정되어 있다면,
|
|
||||||
// 초기 envPartValue ('0')에 대한 시도/시군구 목록을 설정합니다.
|
|
||||||
initializeCityDataByEnvPartSido(envPartValue); // envPartValue 기본값 '0'
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isShowPart) {
|
|
||||||
loadInitialData();
|
|
||||||
}
|
|
||||||
}, [isShowPart]); // isShowPart가 변경될 때 데이터를 다시 로드
|
|
||||||
|
|
||||||
// 환경청 세팅 - 시도
|
|
||||||
const initializeCityDataByEnvPartSido = (envPartCd: string) => {
|
|
||||||
const foundEnvPart = allEnvPartOptions.find((item: EnvPartSelectDataType) => item.val === envPartCd);
|
|
||||||
console.log('foundEnvPart:', foundEnvPart);
|
|
||||||
|
|
||||||
let relevantSidos: SelectDataType[] = []; // 기본값을 빈 배열로 설정
|
|
||||||
let relevantSigunsForSidoDerivation: SelectDataType[] = []; // 기본값을 빈 배열로 설정
|
|
||||||
|
|
||||||
if (envPartCd === '0') { // "전체" 환경청 선택 시
|
|
||||||
relevantSidos = [...allSidoOptions];
|
|
||||||
relevantSigunsForSidoDerivation = [...allSigunOptions];
|
|
||||||
} else if (foundEnvPart && foundEnvPart.adstDliStrCd) { // 특정 환경청 선택 & 해당 환경청에 adstDliStrCd 정보가 있는 경우
|
|
||||||
// adstDliStrCd가 시도 코드를 포함한다고 가정 (주석 참고)
|
|
||||||
const cityCodesInEnvPart = foundEnvPart.adstDliStrCd.toString().split('|').join('').split(',').filter(c => c);
|
|
||||||
console.log('cityCodesInEnvPart:', cityCodesInEnvPart);
|
|
||||||
// 1. allSigunOptions에서 val이 cityCodesInEnvPart에 포함된 데이터의 sido만 추출
|
|
||||||
const relevantSigunSidos = Array.from(
|
|
||||||
new Set(
|
|
||||||
allSigunOptions
|
|
||||||
.filter(sigungu => cityCodesInEnvPart.includes(sigungu.val))
|
|
||||||
.map(sigungu => sigungu.sido)
|
|
||||||
)
|
|
||||||
);
|
|
||||||
console.log('relevantSigunTexts:', relevantSigunSidos);
|
|
||||||
|
|
||||||
// 2. relevantSigunsForSidoDerivation은 해당 sido만을 가진 배열로 반환
|
|
||||||
relevantSidos = allSidoOptions.filter(sido => relevantSigunSidos.includes(sido.text));
|
|
||||||
console.log('relevantSidos:', relevantSidos);
|
|
||||||
|
|
||||||
// 해당 시도들에 속하는 시군구들 (가나다순 오름차순 정렬)
|
|
||||||
relevantSigunsForSidoDerivation = allSigunOptions
|
|
||||||
.filter(sigun => {
|
|
||||||
const sigunSidoPrefix = sigun.val.substring(0, 2);
|
|
||||||
return relevantSidos.some(s => s.val === sigunSidoPrefix);
|
|
||||||
})
|
|
||||||
.sort((a, b) => a.text.localeCompare(b.text, 'ko'));
|
|
||||||
}
|
|
||||||
// 특정 환경청이 선택되었으나, foundEnvPart가 없거나 adstDliStrCd 정보가 없는 경우,
|
|
||||||
// relevantSidos와 relevantSigunsForSidoDerivation은 초기 빈 배열 상태를 유지합니다.
|
|
||||||
|
|
||||||
setFilteredEnvPartSidoData([
|
|
||||||
{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' },
|
|
||||||
...relevantSidos.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd: '', sido: '0' }))
|
|
||||||
]);
|
|
||||||
|
|
||||||
setFilteredEnvPartSigunDataSelected(relevantSigunsForSidoDerivation);
|
|
||||||
|
|
||||||
// 시/도 선택이 "전체"('0')로 초기화되므로, 해당 시/군/구 목록도 업데이트
|
|
||||||
initializeCityDataByEnvPartSigun('0');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 환경청 세팅 - 시군구
|
|
||||||
const initializeCityDataByEnvPartSigun = (selectedSidoInEnvPart: string) => {
|
|
||||||
let sigunsToList: SelectDataType[];
|
|
||||||
if (selectedSidoInEnvPart === '0') { // 선택된 시도가 "전체"이면
|
|
||||||
// filteredEnvPartSigunDataSelected는 이미 해당 환경청에 맞는 시군구들로 필터링 되어있음
|
|
||||||
sigunsToList = [...filteredEnvPartSigunDataSelected];
|
|
||||||
} else {
|
|
||||||
sigunsToList = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === selectedSidoInEnvPart);
|
|
||||||
}
|
|
||||||
setFilteredEnvPartSigunData([
|
|
||||||
{ text: "전체", val: '0' },
|
|
||||||
...sigunsToList
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const onSelectValue = (val: string, type: string) => {
|
|
||||||
switch (type) {
|
|
||||||
// 환경청 세팅
|
|
||||||
case 'envPart':
|
|
||||||
setEnvPartValue(val);
|
|
||||||
setRtnEnvPartValue?.(val);
|
|
||||||
initializeCityDataByEnvPartSido(val);
|
|
||||||
setEnvPartSidoValue('0'); // 시도 "전체"로 초기화
|
|
||||||
setEnvPartSigunValue('0'); // 시군구 "전체"로 초기화
|
|
||||||
// 부모에게도 초기화된 값 전달 (text 포함)
|
|
||||||
if (setRtnEnvPartSidoValue) {
|
|
||||||
const sidoDefault = filteredEnvPartSidoData.find(item => item.val === '0') || { val: '0', text: '전체' };
|
|
||||||
// setRtnEnvPartSidoValue(sidoDefault.val); // 이전 방식: 값만 전달
|
|
||||||
// TODO: 만약 시도 값도 객체로 전달해야 한다면 아래와 같이 수정
|
|
||||||
// setRtnEnvPartSidoValue({ val: sidoDefault.val, text: sidoDefault.text });
|
|
||||||
}
|
|
||||||
if (setRtnEnvPartSigunValue) {
|
|
||||||
const sigunDefault = filteredEnvPartSigunData.find(item => item.val === '0') || { val: '0', text: '전체' };
|
|
||||||
setRtnEnvPartSigunValue({ val: sigunDefault.val, text: sigunDefault.text });
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'envPartSido': // 환경청별 - 시도 선택
|
|
||||||
setEnvPartSidoValue(val);
|
|
||||||
setRtnEnvPartSidoValue?.(val);
|
|
||||||
initializeCityDataByEnvPartSigun(val);
|
|
||||||
setEnvPartSigunValue('0'); // 시군구 "전체"로 초기화
|
|
||||||
if (setRtnEnvPartSigunValue) {
|
|
||||||
const sigunDefault = filteredEnvPartSigunData.find(item => item.val === '0') || { val: '0', text: '전체' };
|
|
||||||
setRtnEnvPartSigunValue({ val: sigunDefault.val, text: sigunDefault.text });
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'envPartSigun': // 환경청별 - 시군구 선택
|
|
||||||
setEnvPartSigunValue(val);
|
|
||||||
const selectedSigun = filteredEnvPartSigunData.find(item => item.val === val);
|
|
||||||
if (setRtnEnvPartSigunValue && selectedSigun) {
|
|
||||||
setRtnEnvPartSigunValue({ val: selectedSigun.val, text: selectedSigun.text });
|
|
||||||
} else if (setRtnEnvPartSigunValue && val === '0') { // "전체"를 명시적으로 처리 (find 실패 대비)
|
|
||||||
setRtnEnvPartSigunValue({ val: '0', text: '전체' });
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 리셋 함수
|
|
||||||
const resetAllValues = () => {
|
|
||||||
|
|
||||||
setEnvPartValue('0');
|
|
||||||
setEnvPartSidoValue('0');
|
|
||||||
setEnvPartSigunValue('0');
|
|
||||||
|
|
||||||
// 필터링된 목록들도 초기 "전체" 또는 전체 목록으로 리셋
|
|
||||||
setFilteredEnvPartSigunData([{ text: "전체", val: '0', sido: '0' }, ...allSigunOptions]);
|
|
||||||
|
|
||||||
setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }, ...allEnvPartOptions]);
|
|
||||||
setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }, ...allSidoOptions.map(s => ({ ...s, adstDliStrCd: '' }))]);
|
|
||||||
setFilteredEnvPartSigunData([{ text: "전체", val: '0', sido: '0' }, ...allSigunOptions]);
|
|
||||||
setFilteredEnvPartSigunDataSelected(allSigunOptions);
|
|
||||||
|
|
||||||
|
|
||||||
setRtnPartValue?.('A');
|
|
||||||
setRtnSidoValue?.('0');
|
|
||||||
setRtnSigunValue?.('0');
|
|
||||||
setRtnRegionValue?.('0');
|
|
||||||
setRtnUnitWaterShedValue?.('0');
|
|
||||||
setRtnMiddleRegionValue?.('0');
|
|
||||||
setRtnEnvPartValue?.('0');
|
|
||||||
setRtnEnvPartSidoValue?.('0');
|
|
||||||
setRtnEnvPartSigunValue?.({ val: '0', text: '전체' });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 리셋 트리거 변경 감지
|
|
||||||
useEffect(() => {
|
|
||||||
if (resetTrigger) {
|
|
||||||
resetAllValues();
|
|
||||||
// 리셋 후 트리거를 false로 설정하는 로직은 부모 컴포넌트에서 처리해야 할 수 있습니다.
|
|
||||||
// 여기서는 resetTrigger props가 true일 때 리셋을 수행합니다.
|
|
||||||
}
|
|
||||||
}, [resetTrigger]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
isShowPart ? (
|
|
||||||
<div className="flex items-center my-4">
|
|
||||||
<>
|
|
||||||
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap ml-2 mr-4">환경청</Label>
|
|
||||||
<SelectBox
|
|
||||||
className="w-[160px] mr-8"
|
|
||||||
label={''}
|
|
||||||
selectArray={filteredEnvPartData}
|
|
||||||
onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')}
|
|
||||||
value={envPartValue}
|
|
||||||
selectClass={'rounded-lg bg-white truncate'}
|
|
||||||
/>
|
|
||||||
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-4">시도</Label>
|
|
||||||
<SelectBox
|
|
||||||
className="w-[160px] mr-8"
|
|
||||||
label={''}
|
|
||||||
selectArray={filteredEnvPartSidoData}
|
|
||||||
onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')}
|
|
||||||
value={envPartSidoValue}
|
|
||||||
selectClass={'rounded-lg bg-white truncate'}
|
|
||||||
/>
|
|
||||||
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-4">시군구</Label>
|
|
||||||
<SelectBox
|
|
||||||
className="w-[160px] mr-8"
|
|
||||||
label={''}
|
|
||||||
selectArray={filteredEnvPartSigunData}
|
|
||||||
onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')}
|
|
||||||
value={envPartSigunValue}
|
|
||||||
selectClass={'rounded-lg bg-white truncate'}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-12 gap-5 w-11/12 m-4">
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { GovSidoSigunguSearchForm };
|
|
||||||
Reference in New Issue
Block a user