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