From c3d2804471df90e4b643ea20ed17eb11b84a3791 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Thu, 17 Apr 2025 10:46:40 +0900 Subject: [PATCH] =?UTF-8?q?searchform=20left=20md=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20(=EC=B4=88=EC=95=88)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_form_left/searchFormLeft.md | 325 ++++++++++++++++++ 1 file changed, 325 insertions(+) create mode 100644 packages/common/business_components/src/ui/search_form_left/searchFormLeft.md 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..18b95b13f --- /dev/null +++ b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md @@ -0,0 +1,325 @@ +## SearchFormLeft 모듈 +#### 검색영역 좌측 모듈로 행정별, 유역별, 환경청을 선택했을 때 검색 영역을 세팅해주고 childnode를 붙여서 출력해주는 모듈 +#### 1. 컴포넌트 호출방법 +```js +import { SearchFormLeft } from "@common/business_components"; +..... + { + setPartValue(value); + }} + setRtnSidoValue={(value) => { + setSidoValue(value); + }} + setRtnSigunValue={(value) => { + setSigunValue(value); + }} + setRtnRegionValue={(value) => { + setRegionValue(value); + }} + setRtnUnitWaterShedValue={(value) => { + setUntitWaterShedValue(value); + }} + setRtnMiddleRegionValue={(value) => { + setMiddleRegionValue(value); + }} + setRtnEnvPartValue={(value) => { + setEnvPartValue(value); + }} + setRtnEnvPartSidoValue={(value) => { + setEnvPartSidoValue(value); + }} + setRtnEnvPartSigunValue={(value) => { + setEnvPartSigunValue(value); + }} +> +``` +  ㆍ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함수(조회시 페이지에서 사용) + +  ㆍsetRtnEnvPartSidoValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용) + +#### 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"); + + +``` + +