- {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 (
-
)
});
-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 && }
-
+