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

초기화 버큰 클릭 이벤트 추가 및 환경청 정보를 시도 시군구에 추가.

Browse Source
This commit is contained in:
truthwing
2025-04-23 17:15:00 +09:00
parent 75aeadd69d
commit 3bff513179
2 changed files with 37 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/business_components/src/ui/search_base_form/index.tsx
+14 -22
View File
@@ -14,25 +14,24 @@ type SearchBaseType = {
selectEnvPartData?: EnvPartSelectDataType[] | [];
queryClick:(returnType:ReturnType) => void;
excelClick:(returnType:ReturnType) => void;
initClick:() => void;
btnClass:string;
ref:React.RefObject<HTMLDivElement>;
ref:React.RefObject<ReturnType>;
}
export type ReturnType = {
partValue: string;
sidoValue: string;
sigunValue: string;
regionValue: string;
sidoValue: string;
sigunValue: string;
regionValue: string;
unitWaterShedValue: string;
middleRegionValue: string;
envPartValue: string;
envPartSidoValue: string;
envPartSigunValue: string;
}
function SearchBaseForm ({
leftChildren,
rightChildren,
leftChildren,
rightChildren,
selectSidoData,
selectSigunData,
selectRegionData,
@@ -42,17 +41,16 @@ function SearchBaseForm ({
btnClass,
queryClick,
excelClick,
initClick,
ref
}: SearchBaseType) {
const [partValue, setPartValue] = useState<string>("0");
const [partValue, setPartValue] = useState<string>("A");
const [sidoValue, setSidoValue] = useState<string>("0");
const [sigunValue, setSigunValue] = useState<string>("0");
const [regionValue, setRegionValue] = useState<string>("0");
const [untitWaterShedValue, setUntitWaterShedValue] = useState<string>("0");
const [middleRegionValue, setMiddleRegionValue] = useState<string>("0");
const [envPartValue, setEnvPartValue] = useState<string>("0");
const [envPartSidoValue, setEnvPartSidoValue] = useState<string>("0");
const [envPartSigunValue, setEnvPartSigunValue] = useState<string>("0");
const [resetTrigger, setResetTrigger] = useState(false);
const queryVal = () => {
console.log("조회버튼 클릭");
@@ -64,8 +62,6 @@ function SearchBaseForm ({
unitWaterShedValue: untitWaterShedValue,
middleRegionValue: middleRegionValue,
envPartValue: envPartValue,
envPartSidoValue: envPartSidoValue,
envPartSigunValue: envPartSigunValue,
});
}
const initVal = useCallback(() => {
@@ -85,13 +81,11 @@ function SearchBaseForm ({
unitWaterShedValue: untitWaterShedValue,
middleRegionValue: middleRegionValue,
envPartValue: envPartValue,
envPartSidoValue: envPartSidoValue,
envPartSigunValue: envPartSigunValue,
})
};
useEffect(() => {
if (ref && ref.current) {
const customRef = ref.current as HTMLDivElement & ReturnType;
const customRef = ref.current;
customRef.partValue = partValue;
customRef.sidoValue = sidoValue;
customRef.sigunValue = sigunValue;
@@ -99,10 +93,8 @@ function SearchBaseForm ({
customRef.unitWaterShedValue = untitWaterShedValue;
customRef.middleRegionValue = middleRegionValue;
customRef.envPartValue = envPartValue;
customRef.envPartSidoValue = envPartSidoValue;
customRef.envPartSigunValue = envPartSigunValue;
}
}, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue]);
}, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]);
return (
<div className="flex card card-border !mt-6">
<SearchFormLeft isShowPart={true}
@@ -119,8 +111,8 @@ function SearchBaseForm ({
setRtnUnitWaterShedValue={setUntitWaterShedValue}
setRtnMiddleRegionValue={setMiddleRegionValue}
setRtnEnvPartValue={setEnvPartValue}
setRtnEnvPartSidoValue={setEnvPartSidoValue}
setRtnEnvPartSigunValue={setEnvPartSigunValue}
setRtnEnvPartSidoValue={setSidoValue}
setRtnEnvPartSigunValue={setSigunValue}
resetTrigger={resetTrigger}
>
{leftChildren}
@@ -130,7 +122,7 @@ function SearchBaseForm ({
엑셀다운로드
</Button>
<div>
<Button className={btnClass} onClick={initVal}>
<Button className={btnClass} onClick={initClick}>
초기화
</Button>
<Button className={btnClass} onClick={queryVal}>
packages/common/business_components/src/ui/search_form_left/index.tsx
+23 -26
View File
@@ -46,33 +46,36 @@ export type EnvPartSelectDataType = SelectDataType & {
}
const selectPartData:SelectDataType[] = [
{ text: "행정별", val: '0' },
{ text: "유역별", val: '01' },
{ text: "환경청별", val: '02' },
{ text: "행정별", val: 'A' },
{ text: "유역별", val: 'R' },
{ text: "환경청별", val: 'G' },
];
function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false }: SearchFormLeftProps) {
const [partValue, setPartValue] = useState<string>('0');
const [showPart, setShowPart] = useState<string>('');
/******************선택된 데이터******************/
const [partValue, setPartValue] = useState<string>('A');
//행정별 시도 시군구
const [sidoValue, setSidoValue] = useState<string>('0');
const [sigunValue, setSigunValue] = useState<string>('0');
//유역별
const [regionValue, setRegionValue] = useState<string>('0');
const [unitWaterShedValue, setUnitWaterShedValue] = useState<string>('0');
const [middleRegionValue, setMiddleRegionValue] = useState<string>('0');
//환경청별 시도 시군구
const [envPartValue, setEnvPartValue] = useState<string>('0');
const [envPartSidoValue, setEnvPartSidoValue] = useState<string>('0');
const [envPartSigunValue, setEnvPartSigunValue] = useState<string>('0');
// 환경청
const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
/****************** 셀렉트 리스트 데이터. ******************/
// 조회된 조건에 맞는 시도 시군 유역
const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
// 조회된 조건에 맞는 환경청 시도 시군
const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd:'' }]);
const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd:'' }]);
const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
// 시군구 세팅
const initializeSigunData = (sidoCd: string) => {
if (sidoCd === '0') {
@@ -154,12 +157,10 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
setRtnPartValue(val);
}
// 구분
if(val == '01') {
setShowPart('01');
if(val == 'R') {
initializeMiddleRegionData('0');
initializeUnitWaterShedData('0');
} else if(val == '02') {
setShowPart('02');
} else if(val == 'G') {
setFilteredEnvPartData([
{ text: "전체", val: '0', adstDliStrCd:'' },
...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
@@ -167,7 +168,6 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
setEnvPartValue('0');
initializeCityDataByEnvPartSido('0');
} else {
setShowPart('0');
initializeSigunData('0');
onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
}
@@ -225,7 +225,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
onSelectValue(filteredEnvPartSidoData[0]?.val || '0', 'envPartSido');
break;
case 'envPartSido' :
setEnvPartSidoValue(val);
setSidoValue(val);
if (setRtnEnvPartSidoValue) {
setRtnEnvPartSidoValue(val);
}
@@ -233,7 +233,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
onSelectValue(filteredEnvPartSigunData[0]?.val || '0', 'envPartSigun');
break;
case 'envPartSigun' :
setEnvPartSigunValue(val);
setSigunValue(val);
if (setRtnEnvPartSigunValue) {
setRtnEnvPartSigunValue(val);
}
@@ -243,16 +243,13 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
// 리셋 함수
const resetAllValues = () => {
setPartValue('0');
setShowPart('');
setPartValue('A');
setSidoValue('0');
setSigunValue('0');
setRegionValue('0');
setUnitWaterShedValue('0');
setMiddleRegionValue('0');
setEnvPartValue('0');
setEnvPartSidoValue('0');
setEnvPartSigunValue('0');
setFilteredSigunData([{ text: "전체", val: '0' }]);
setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
@@ -261,7 +258,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]);
if (setRtnPartValue) setRtnPartValue('0');
if (setRtnPartValue) setRtnPartValue('A');
if (setRtnSidoValue) setRtnSidoValue('0');
if (setRtnSigunValue) setRtnSigunValue('0');
if (setRtnRegionValue) setRtnRegionValue('0');
@@ -287,17 +284,17 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
isShowPart ? (
<div className="grid grid-cols-12 gap-5 w-11/12 m-4">
<SelectBox className="col-span-3" label={'구분'} selectArray={selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined}/>
{showPart === '01' ? (
{partValue === 'R' ? (
<>
<SelectBox className="col-span-3" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={undefined}/>
<SelectBox className="col-span-3" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={undefined}/>
<SelectBox className="col-span-3" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={undefined}/>
</>
) : showPart === '02' ? (
) : partValue === 'G' ? (
<>
<SelectBox className="col-span-3" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={undefined}/>
<SelectBox className="col-span-3" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={envPartSidoValue} selectClass={undefined}/>
<SelectBox className="col-span-3" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={envPartSigunValue} selectClass={undefined}/>
<SelectBox className="col-span-3" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={sidoValue} selectClass={undefined}/>
<SelectBox className="col-span-3" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={sigunValue} selectClass={undefined}/>
</>
) : (
<>