+
{props.children}
)
diff --git a/packages/common/business_components/src/ui/search_form/index.tsx b/packages/common/business_components/src/ui/search_form/index.tsx
index 34a6d41e6..860c99c69 100644
--- a/packages/common/business_components/src/ui/search_form/index.tsx
+++ b/packages/common/business_components/src/ui/search_form/index.tsx
@@ -1,7 +1,7 @@
function SearchDiv ({children}:{ children: React.ReactNode; }) {
return (
- {children}
+ {children}
)
}
diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx
index 950306231..248e8f625 100644
--- a/packages/common/business_components/src/ui/search_form_left/index.tsx
+++ b/packages/common/business_components/src/ui/search_form_left/index.tsx
@@ -1,10 +1,317 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react';
+import type { SelectDataType } from '../search_input_select';
+import { SelectBox } from '../select';
+
+/**
+ * 검색 폼 왼쪽 컴포넌트 타입
+ *
+ * @param isShowPart 구분 조회 여부
+ * @param children 자식 컴포넌트
+ * @param selectSidoData 시도 데이터
+ * @param selectSigunData 시군구 데이터
+ * @param selectRegionData 유역 데이터
+ * @param selectUnitWaterShedData 단위유역 데이터
+ * @param selectMiddleRegionData 중권역 데이터
+ * @param selectEnvPartData 환경청 데이터
+ * @param selectEnvPartSidoData 환경청 시도 데이터
+ * @param selectEnvPartSigunData 환경청 시군구 데이터
+ * @param setRtnPartValue 부분 값 변경 핸들러
+ */
+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: string) => void;
+ resetTrigger?: boolean;
+}
+
+type EnvPartSelectDataType = SelectDataType & {
+ adstDliStrCd: string,
+}
+
+const selectPartData:SelectDataType[] = [
+ { text: "행정별", val: '0' },
+ { text: "유역별", val: '01' },
+ { text: "환경청별", val: '02' },
+];
+
+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
('0');
+ const [showPart, setShowPart] = useState('');
+ const [sidoValue, setSidoValue] = useState('0');
+ const [sigunValue, setSigunValue] = useState('0');
+ const [regionValue, setRegionValue] = useState('0');
+ const [unitWaterShedValue, setUnitWaterShedValue] = useState('0');
+ const [middleRegionValue, setMiddleRegionValue] = useState('0');
+ const [envPartValue, setEnvPartValue] = useState('0');
+ const [envPartSidoValue, setEnvPartSidoValue] = useState('0');
+ const [envPartSigunValue, setEnvPartSigunValue] = useState('0');
+
+ const [filteredSigunData, setFilteredSigunData] = useState([{ text: "전체", val: '0' }]);
+ const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState([{ text: "전체", val: '0' }]);
+ const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState([{ text: "전체", val: '0' }]);
+
+ const [filteredEnvPartData, setFilteredEnvPartData] = useState([{ text: "전체", val: '0', adstDliStrCd:'' }]);
+ const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState([{ text: "전체", val: '0', adstDliStrCd:'' }]);
+ const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState([{ text: "전체", val: '0' }]);
+
+ const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState([]);
+
+ // 시군구 세팅
+ const initializeSigunData = (sidoCd: string) => {
+ if (sidoCd === '0') {
+ setSigunValue('0');
+ setFilteredSigunData([{ text: "전체", val: '0' }]);
+ } else {
+ const newFilteredData = [
+ { text: "전체", val: '0' },
+ ...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd)
+ ];
+ setSigunValue('0');
+ setFilteredSigunData(newFilteredData);
+ }
+ }
+
+ // 단위유역 세팅
+ const initializeUnitWaterShedData = (regionCd: string) => {
+ if(regionCd === '0') {
+ setUnitWaterShedValue('0');
+ setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
+ } else {
+ const newFilteredData = [
+ { text: "전체", val: '0' },
+ ...selectUnitWaterShedData.filter((item: SelectDataType) => item.val.substring(0, 1) === regionCd)
+ ];
+ setUnitWaterShedValue('0');
+ setFilteredUnitWaterShedData(newFilteredData);
+ }
+ }
+
+ // 중권역 세팅
+ const initializeMiddleRegionData = (unitWaterShedCd: string) => {
+ if(unitWaterShedCd === '0') {
+ setMiddleRegionValue('0');
+ setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
+ } else {
+ const newFilteredData = [
+ { text: "전체", val: '0' },
+ ...selectMiddleRegionData.filter((item: SelectDataType) => item.val.substring(0, 2) === unitWaterShedCd)
+ ];
+ setMiddleRegionValue('0');
+ setFilteredMiddleRegionData(newFilteredData);
+ }
+ }
+
+ // 환경청 세팅 - 시도
+ const initializeCityDataByEnvPartSido = (envPartCd: string) => {
+ const foundEnvPart = selectEnvPartData.find((item: EnvPartSelectDataType) => item.val === envPartCd);
+ const cityArray = foundEnvPart?.adstDliStrCd.toString().split('|').join('').split(',');
+
+ // 시군구 데이터
+ const envSigunData = selectSigunData.filter((item: SelectDataType) => cityArray?.includes(item.val));
+
+ // 환경청 시도 데이터
+ const sidoArray = [...new Set(envSigunData.map((item: SelectDataType) => item.val.substring(0, 2)))];
+ const envSidoData = selectSidoData.filter((item: SelectDataType) => sidoArray?.includes(item.val));
+ setFilteredEnvPartSigunDataSelected(envSigunData);
+
+ setFilteredEnvPartSidoData([
+ { text: "전체", val: '0', adstDliStrCd:'' },
+ ...envSidoData.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd:'' }))
+ ]);
+ }
+
+ // 환경청 세팅 - 시군구
+ const initializeCityDataByEnvPartSigun = (sidoCd: string) => {
+ const envSigunData = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd);
+ setFilteredEnvPartSigunData([
+ { text: "전체", val: '0'},
+ ...envSigunData.map((item: SelectDataType) => ({ text: item.text, val: item.val }))
+ ]);
+ }
+
+ const onSelectValue = (val: string, type: string) => {
+ switch(type) {
+ case 'part':
+ setPartValue(val);
+ if (setRtnPartValue) {
+ setRtnPartValue(val);
+ }
+ // 구분
+ if(val == '01') {
+ setShowPart('01');
+ initializeMiddleRegionData('0');
+ initializeUnitWaterShedData('0');
+ } else if(val == '02') {
+ setShowPart('02');
+ setFilteredEnvPartData([
+ { text: "전체", val: '0', adstDliStrCd:'' },
+ ...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
+ ]);
+ setEnvPartValue('0');
+ initializeCityDataByEnvPartSido('0');
+ } else {
+ setShowPart('0');
+ initializeSigunData('0');
+ onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+ }
+
+ // 다른 selectbox 전체로 초기화
+ onSelectValue(selectSidoData[0]?.val || '0', 'sido');
+ onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+ break;
+ case 'sido':
+ setSidoValue(val);
+ if (setRtnSidoValue) {
+ setRtnSidoValue(val);
+ }
+ initializeSigunData(val);
+ onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
+ break;
+ case 'sigun':
+ if (setRtnSigunValue) {
+ setRtnSigunValue(val);
+ }
+ setSigunValue(val);
+ break;
+
+ // 유역 세팅
+ case 'region' :
+ setRegionValue(val);
+ if (setRtnRegionValue) {
+ setRtnRegionValue(val);
+ }
+ initializeUnitWaterShedData(val);
+ onSelectValue(selectUnitWaterShedData[0]?.val || '0', 'unitWaterShed');
+ break;
+ case 'unitWaterShed' :
+ setUnitWaterShedValue(val);
+ if (setRtnUnitWaterShedValue) {
+ setRtnUnitWaterShedValue(val);
+ }
+ initializeMiddleRegionData(val);
+ onSelectValue(selectMiddleRegionData[0]?.val || '0', 'middleRegion');
+ break;
+ case 'middleRegion' :
+ setMiddleRegionValue(val);
+ if (setRtnMiddleRegionValue) {
+ setRtnMiddleRegionValue(val);
+ }
+ break;
+
+ // 환경청 세팅
+ case 'envPart' :
+ setEnvPartValue(val);
+ if (setRtnEnvPartValue) {
+ setRtnEnvPartValue(val);
+ }
+ initializeCityDataByEnvPartSido(val);
+ onSelectValue(filteredEnvPartSidoData[0]?.val || '0', 'envPartSido');
+ break;
+ case 'envPartSido' :
+ setEnvPartSidoValue(val);
+ if (setRtnEnvPartSidoValue) {
+ setRtnEnvPartSidoValue(val);
+ }
+ initializeCityDataByEnvPartSigun(val);
+ onSelectValue(filteredEnvPartSigunData[0]?.val || '0', 'envPartSigun');
+ break;
+ case 'envPartSigun' :
+ setEnvPartSigunValue(val);
+ if (setRtnEnvPartSigunValue) {
+ setRtnEnvPartSigunValue(val);
+ }
+ break;
+ }
+ }
+
+ // 리셋 함수
+ const resetAllValues = () => {
+ setPartValue('0');
+ setShowPart('');
+ setSidoValue('0');
+ setSigunValue('0');
+ setRegionValue('0');
+ setUnitWaterShedValue('0');
+ setMiddleRegionValue('0');
+ setEnvPartValue('0');
+ setEnvPartSidoValue('0');
+ setEnvPartSigunValue('0');
+
+ setFilteredSigunData([{ text: "전체", val: '0' }]);
+ setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
+ setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
+ setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
+ setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
+ setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]);
+
+ if (setRtnPartValue) setRtnPartValue('0');
+ if (setRtnSidoValue) setRtnSidoValue('0');
+ if (setRtnSigunValue) setRtnSigunValue('0');
+ if (setRtnRegionValue) setRtnRegionValue('0');
+ if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0');
+ if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0');
+ if (setRtnEnvPartValue) setRtnEnvPartValue('0');
+ if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0');
+ if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0');
+ };
+
+ // 리셋 트리거 변경 감지
+ useEffect(() => {
+ if (resetTrigger) {
+ resetAllValues();
+ // 리셋 후 트리거를 false로 설정
+ if (setRtnPartValue) {
+ setRtnPartValue('0');
+ }
+ }
+ }, [resetTrigger]);
-function SearchFormLeft(props: {children: React.ReactNode}) {
return (
-
- {props.children}
+ isShowPart ? (
+
+ onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined}/>
+ {showPart === '01' ? (
+ <>
+ onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={undefined}/>
+ onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={undefined}/>
+ onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={undefined}/>
+
+ ) : showPart === '02' ? (
+ <>
+ onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={undefined}/>
+ onSelectValue(val.toString(), 'envPartSido')} value={envPartSidoValue} selectClass={undefined}/>
+ onSelectValue(val.toString(), 'envPartSigun')} value={envPartSigunValue} selectClass={undefined}/>
+
+ ) : (
+ <>
+ onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined}/>
+ onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined}/>
+
+ )}
+ {children}
+ ) : (
+
+ {children}
+
+ )
)
}
diff --git a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md
new file mode 100644
index 000000000..04531c27f
--- /dev/null
+++ b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md
@@ -0,0 +1,375 @@
+## SearchFormLeft 모듈
+#### 검색영역 좌측 모듈로 행정별, 유역별, 환경청을 선택했을 때 검색 영역을 세팅해주고 childnode를 붙여서 출력해주는 모듈
+#### 1. 컴포넌트 호출방법
+```js
+import { SearchFormLeft } from "@common/business_components";
+
+.....
+
+// state 지정
+const [partValue, setPartValue] = useState
("0");
+const [sidoValue, setSidoValue] = useState("0");
+const [sigunValue, setSigunValue] = useState("0");
+const [regionValue, setRegionValue] = useState("0");
+const [untitWaterShedValue, setUntitWaterShedValue] = useState("0");
+const [middleRegionValue, setMiddleRegionValue] = useState("0");
+const [envPartValue, setEnvPartValue] = useState("0");
+const [envPartSidoValue, setEnvPartSidoValue] = useState("0");
+const [envPartSigunValue, setEnvPartSigunValue] = useState("0");
+const [resetTrigger, setResetTrigger] = useState(false);
+.....
+
+
+
+```
+ ㆍisShowPart : 검색단에서 구분(행정별,유역별,환경청별) 세팅 여부(보일 경우 : Y, 아닐경우 : N 혹은 미첨부)
+
+ ㆍselectSidoData : 전체 시도 데이터
+
+ ㆍselectSigunData : 전체 시군구구 데이터
+
+ ㆍselectRegionData : 전체 유역역 데이터
+
+ ㆍselectUnitWaterShedData : 전체 단위유역 데이터
+
+ ㆍselectMiddleRegionData : 전체 중권역 데이터
+
+ ㆍselectEnvPartData : 환경청 전체 데이터
+
+ ㆍsetRtnPartValue : 선택한 구분 set함수(조회시 페이지에서 사용)
+
+ ㆍsetRtnSidoValue : 선택한 시도 set함수(조회시 페이지에서 사용)
+
+ ㆍsetRtnSigunValue : 선택한 시군구 set함수(조회시 페이지에서 사용)
+
+ ㆍsetRtnRegionValue : 선택한 유역 set함수(조회시 페이지에서 사용)
+
+ ㆍsetRtnUnitWaterShedValue : 선택한 단위유역 set함수(조회시 페이지에서 사용)
+
+ ㆍsetRtnMiddleRegionValue : 선택한 중유역 set함수(조회시 페이지에서 사용)
+
+ ㆍsetRtnEnvPartValue : 선택한 환경청 set함수(조회시 페이지에서 사용)
+
+ ㆍsetRtnEnvPartSidoValue : 선택한 환경청의 시도 set함수(조회시 페이지에서 사용)
+
+ ㆍsetRtnEnvPartSigunValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용)
+
+ ㆍresetTrigger : 초기화 trigger 변수
+
+
+
+#### 2. 세팅방법
+```js
+/**
+ * store - index.js
+ * ※ 업무파트별로 common/폴더에 스토어를 만들어놓는걸 추천!
+ * ※ fetch 구문은 각자가 개발 후 return 된 데이터 타입만 맞추면 된다.
+ */
+
+// 시도 API 호출 함수 추가
+const fetchSidoData = async (): Promise => {
+ try {
+ const res = await getFetch('fo', '/addr/city', null);
+ const data = res.data;
+ selectSidoData = [
+ { text: "전체", val: '0'},
+ ...data.map((item: sidoDataType) => ({
+ text: item.sido || '',
+ val: String(item.adstDstrCd) || ''
+ }))
+ ];
+ return selectSidoData;
+ } catch (error) {
+ console.error('시도 데이터를 가져오는데 실패했습니다:', error);
+ return selectSidoData;
+ }
+};
+
+// 시군구 API 호출 함수 추가
+const fetchSigunData = async (): Promise => {
+ try {
+ const res = await getFetch('fo', '/addr/sgg', null);
+ const data = res.data;
+ selectSigunData = [
+ { text: "전체", val: '0' },
+ ...data
+ .map((item: sigunDataType) => ({
+ text: item.gugun || '',
+ val: String(item.adstDstrCd) || ''
+ }))
+ ];
+ return selectSigunData;
+ } catch (error) {
+ console.error('시군구 데이터를 가져오는데 실패했습니다:', error);
+ return selectSigunData;
+ }
+};
+
+// 권역 API 호출 함수 추가
+const fetchRegionData = async (): Promise => {
+ try {
+ const res = await getFetch('fo', '/addr/sarea', null);
+ const data = res.data;
+ return [
+ { text: "전체", val: '0'},
+ ...data.map((item: regionDataType) => ({
+ text: item.rvbsn || '',
+ val: String(item.rvbsnCd) || ''
+ }))
+ ];
+ } catch (error) {
+ console.error('권역 데이터를 가져오는데 실패했습니다:', error);
+ return selectRegionData;
+ }
+};
+
+// 중권역 API 호출 함수 추가
+const fetchMiddleRegionData = async (): Promise => {
+ try {
+ const res = await getFetch('fo', '/addr/midArea', null);
+ const data = res.data;
+ return [
+ { text: "전체", val: '0' },
+ ...data
+ .map((item: middleRegionDataType) => ({
+ text: item.mdmbsn || '',
+ val: String(item.rvbsnCd) || ''
+ }))
+ ];
+ } catch (error) {
+ console.error('중권역 데이터를 가져오는데 실패했습니다:', error);
+ return selectMiddleRegionData;
+ }
+};
+
+// 단위유역 API 호출 함수 추가
+const fetchUnitWaterShedData = async (): Promise => {
+ try {
+ const res = await getFetch('fo', '/addr/largeArea', null);
+ const data = res.data;
+ return [
+ { text: "전체", val: '0' },
+ ...data
+ .map((item: unitWaterShedDataType) => ({
+ text: item.lgbsn || '',
+ val: String(item.rvbsnCd) || ''
+ }))
+ ];
+ } catch (error) {
+ console.error('단위유역 데이터를 가져오는데 실패했습니다:', error);
+ return selectUnitWaterShedData;
+ }
+};
+
+// 환경청 데이터
+const fetchEnvPartData = async (): Promise => {
+ try {
+ const res = await getFetch('fo', '/addr/govArea', null);
+ const data = res.data;
+ selectEnvPartData = [
+ { text: "전체", val: '0', adstDliStrCd: '' },
+ ...data
+ .map((item: envPartDataType) => ({
+ text: item.lclgvrnmntNm || '',
+ val: String(item.lclgvrnmntCd) || '',
+ adstDliStrCd: item.adstDliStrCd || ''
+ }))
+ ];
+ return selectEnvPartData;
+ } catch (error) {
+ console.error('환경청 데이터를 가져오는데 실패했습니다:', error);
+ return selectEnvPartData;
+ }
+};
+
+.......
+
+// 타입 및 state 반환
+export type CommonType = {
+ Common: {
+ isInit: boolean;
+ selectSidoData: SelectDataType[];
+ selectSigunData: SelectDataType[];
+ selectPartData: SelectDataType[];
+ selectUpdownData: SelectDataType[];
+ selectOperationData: SelectDataType[];
+ selectFacilityPartData: SelectDataType[];
+ selectSearchYear: SelectDataType[];
+ selectUnitWaterShedData: SelectDataType[];
+ selectRegionData: SelectDataType[];
+ selectMiddleRegionData: SelectDataType[];
+ selectEnvPartSidoData: SelectDataType[];
+ selectEnvPartSigunData: SelectDataType[];
+ selectFlowTerm: SelectDataType[];
+ selectFlowPanel: SelectDataType[];
+ selectEnvPartData: envPartSelectDataType[];
+ }
+}
+
+export const commonState:CommonType = {
+ Common: {
+ isInit: false,
+ selectSidoData: selectSidoData,
+ selectSigunData: selectSigunData,
+ selectPartData: selectPartData,
+ selectUpdownData: selectUpdownData,
+ selectOperationData: selectOperationData,
+ selectFacilityPartData: selectFacilityPartData,
+ selectSearchYear: selectSearchYear,
+ selectRegionData: selectRegionData,
+ selectUnitWaterShedData: selectUnitWaterShedData,
+ selectMiddleRegionData: selectMiddleRegionData,
+ selectEnvPartSidoData : selectEnvPartSidoData,
+ selectEnvPartSigunData : selectEnvPartSigunData,
+ selectFlowTerm: selectFlowTerm,
+ selectFlowPanel: selectFlowPanel,
+ selectEnvPartData : selectEnvPartData,
+ }
+}
+
+.....
+
+// action export
+export type CommonAction = {
+ initializeCommonData: () => Promise;
+}
+
+.......
+
+// reducer 세팅
+export const CommonReducer:(set:any)=>CommonAction=(set: any) => {
+ return {
+ // 시도 변경 이벤트
+ initializeCommonData: async () => {
+ const promiseSet = await Promise.all([fetchSidoData(), fetchSigunData(), fetchRegionData(), fetchUnitWaterShedData(), fetchMiddleRegionData(), fetchEnvPartData()]);
+ const [sidoData, sggData, regionData, unitData, midData, envData] = promiseSet;
+ set((state: CommonType) => ({
+ Common: {
+ ...state.Common,
+ selectSidoData: sidoData,
+ selectSigunData: sggData,
+ selectRegionData: regionData,
+ selectMiddleRegionData: midData,
+ selectUnitWaterShedData: unitData,
+ selectEnvPartData: envData
+ }
+ })
+ )},
+ }
+}
+```
+```js
+/**
+ * page.tsx
+ */
+
+.......
+
+// store에서 액션 호출 (각 페이지 유형별로 세팅)
+const {
+ ....
+ ,initializeCommonData
+ ....
+} = useFoStore((state) => state);
+
+.......
+
+// 데이터 반환
+const {
+ isInit,
+ selectPartData,
+ selectUpdownData,
+ selectOperationData,
+ selectFacilityPartData,
+ selectSidoData,
+ selectSigunData,
+ selectRegionData,
+ selectUnitWaterShedData,
+ selectMiddleRegionData,
+ selectEnvPartData,
+} = Common;
+
+.......
+
+// 페이지 내에서 사용할 수 있게 state 설정
+const [partValue, setPartValue] = useState("0");
+const [sidoValue, setSidoValue] = useState("0");
+const [sigunValue, setSigunValue] = useState("0");
+const [regionValue, setRegionValue] = useState("0");
+const [untitWaterShedValue, setUntitWaterShedValue] = useState("0");
+const [middleRegionValue, setMiddleRegionValue] = useState("0");
+const [envPartValue, setEnvPartValue] = useState("0");
+const [envPartSidoValue, setEnvPartSidoValue] = useState("0");
+const [envPartSigunValue, setEnvPartSigunValue] = useState("0");
+const [resetTrigger, setResetTrigger] = useState(false);
+
+
+const resetVal = () => {
+ console.log('=== 초기화 ===');
+ console.log(selectSidoData);
+
+ // SelectBox 초기화 - 각 selectArray의 첫 번째 옵션 값 사용
+ const initialPartValue = selectPartData[0]?.val || "0";
+ const initialSidoValue = selectSidoData[0]?.val || "0";
+ const initialSigunValue = selectSigunData[0]?.val || "0";
+ const initialRegionValue = selectRegionData[0]?.val || "0";
+ const initialUnitWaterShedValue = selectUnitWaterShedData[0]?.val || "0";
+ const initialMiddleRegionValue = selectMiddleRegionData[0]?.val || "0";
+ const initialEnvPartValue = selectEnvPartData[0]?.val || "0";
+ const initialEnvPartSidoValue = selectEnvPartData[0]?.val || "0";
+ const initialEnvPartSigunValue = selectEnvPartData[0]?.val || "0";
+
+ // 상태값 설정
+ setPartValue(initialPartValue);
+ setSidoValue(initialSidoValue);
+ setSigunValue(initialSigunValue);
+ setRegionValue(initialRegionValue);
+ setUntitWaterShedValue(initialUnitWaterShedValue);
+ setMiddleRegionValue(initialMiddleRegionValue);
+ setEnvPartValue(initialEnvPartValue);
+ setEnvPartSidoValue(initialEnvPartSidoValue);
+ setEnvPartSigunValue(initialEnvPartSigunValue);
+
+ // 리셋 후 트리거를 false로 설정
+ setTimeout(() => {
+ setResetTrigger(false);
+ }, 0);
+ }
+
+// 조회 함수
+const chkVal = useCallback(() => {
+ setResetPage(true);
+ // 조회 funciton
+ searchFcltyQltyList(1);
+}, [searchFcltyQltyList]);
+
+// 그리드 page 넘어갈 때 필요한 함수
+const handlePageChange = useCallback((page: number) => {
+ setResetPage(false);
+ searchFcltyQltyList(page);
+}, [searchFcltyQltyList]);
+
+// 테이블 호출 컴포넌트
+ index !== undefined && cellClick(index)} headName={"시설별 수질현황"} tableData={mainList} headlist={upHeadList2} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange}>
+
+
+```
+
+
diff --git a/packages/common/business_components/src/ui/search_form_right/index.tsx b/packages/common/business_components/src/ui/search_form_right/index.tsx
index 676b90849..fda7eefd6 100644
--- a/packages/common/business_components/src/ui/search_form_right/index.tsx
+++ b/packages/common/business_components/src/ui/search_form_right/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React from 'react';
function SearchFormRight(props: {children: React.ReactNode}) {
return (
-
+
{props.children}
)
}
-export { SearchFormRight };
\ No newline at end of file
+export { SearchFormRight };
diff --git a/packages/common/business_components/src/ui/search_input/index.tsx b/packages/common/business_components/src/ui/search_input/index.tsx
index 0da6cffdc..06ffce4ff 100644
--- a/packages/common/business_components/src/ui/search_input/index.tsx
+++ b/packages/common/business_components/src/ui/search_input/index.tsx
@@ -3,14 +3,27 @@ import React from "react";
const SearchInput = React.forwardRef
void}>(({className, label, textValue, setText}, ref) => {
const changeText=(e:React.ChangeEvent)=>{
- if(e?.target?.value) setText(e.target.value)
- }
+
+ if(e?.target?.value){
+
+ setText(e.target.value)
+ }
+
+
+
+ }
+
+ const keyUp=(e:any)=>{
+ if(e.keyCode===8 && e.target.value.length==1){
+ setText('')
+ }
+ }
return (
- {label && }
-
+ {label && }
+
)
});
-export { SearchInput };
\ No newline at end of file
+export { SearchInput };
diff --git a/packages/common/business_components/src/ui/search_input_select/index.tsx b/packages/common/business_components/src/ui/search_input_select/index.tsx
index 5a386b77b..bf8787356 100644
--- a/packages/common/business_components/src/ui/search_input_select/index.tsx
+++ b/packages/common/business_components/src/ui/search_input_select/index.tsx
@@ -24,12 +24,12 @@ const SearchInputSelect = React.forwardRef
- {label && }
+ {label && }
-
+