searchform left md파일 작성 (초안)

2025-04-17 10:46:40 +09:00
parent d2beda89c8
commit c3d2804471
1 changed files with 325 additions and 0 deletions
@@ -0,0 +1,325 @@
+## SearchFormLeft 모듈
+#### 검색영역 좌측 모듈로 행정별, 유역별, 환경청을 선택했을 때 검색 영역을 세팅해주고 childnode를 붙여서 출력해주는 모듈
+#### 1. 컴포넌트 호출방법
+```js
+import { SearchFormLeft } from "@common/business_components";
+.....
+<SearchFormLeft 
+  isShowPart={true}
+  selectSidoData={selectSidoData} 
+  selectSigunData={selectSigunData} 
+  selectRegionData={selectRegionData} 
+  selectUnitWaterShedData={selectUnitWaterShedData} 
+  selectMiddleRegionData={selectMiddleRegionData} 
+  selectEnvPartData={selectEnvPartData} 
+  selectEnvPartSidoData={selectEnvPartSidoData} 
+  selectEnvPartSigunData={selectEnvPartSigunData}
+  setRtnPartValue={(value) => {
+    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);
+  }}
+>
+```
+&emsp; ㆍisShowPart : 검색단에서 구분(행정별,유역별,환경청별) 세팅 여부(보일 경우 : Y, 아닐경우 : N 혹은 미첨부)
+
+&emsp; ㆍselectSidoData : 전체 시도 데이터
+
+&emsp; ㆍselectSigunData : 전체 시군구구 데이터
+
+&emsp; ㆍselectRegionData : 전체 유역역 데이터
+
+&emsp; ㆍselectUnitWaterShedData : 전체 단위유역 데이터
+
+&emsp; ㆍselectMiddleRegionData : 전체 중권역 데이터
+
+&emsp; ㆍselectEnvPartData : 환경청 전체 데이터
+
+&emsp; ㆍsetRtnPartValue : 선택한 구분 set함수(조회시 페이지에서 사용)
+
+&emsp; ㆍsetRtnSidoValue : 선택한 시도 set함수(조회시 페이지에서 사용)
+
+&emsp; ㆍsetRtnSigunValue : 선택한 시군구 set함수(조회시 페이지에서 사용)
+
+&emsp; ㆍsetRtnRegionValue : 선택한 유역 set함수(조회시 페이지에서 사용)
+
+&emsp; ㆍsetRtnUnitWaterShedValue : 선택한 단위유역 set함수(조회시 페이지에서 사용)
+
+&emsp; ㆍsetRtnMiddleRegionValue : 선택한 중유역 set함수(조회시 페이지에서 사용)
+
+&emsp; ㆍsetRtnEnvPartValue : 선택한 환경청 set함수(조회시 페이지에서 사용)
+
+&emsp; ㆍsetRtnEnvPartSidoValue : 선택한 환경청의 시도 set함수(조회시 페이지에서 사용)
+
+&emsp; ㆍsetRtnEnvPartSidoValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용)
+
+#### 2. 세팅방법
+```js
+/**
+ * store - index.js
+ * ※ 업무파트별로 common/폴더에 스토어를 만들어놓는걸 추천!
+ * ※ fetch 구문은 각자가 개발 후 return 된 데이터 타입만 맞추면 된다.
+ */
+
+// 시도 API 호출 함수 추가
+const fetchSidoData = async (): Promise<SelectDataType[]> => {
+  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<SelectDataType[]> => {
+  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<SelectDataType[]> => {
+  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<SelectDataType[]> => {
+  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<SelectDataType[]> => {
+  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<envPartSelectDataType[]> => {
+  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<void>;
+}
+
+.......
+
+// 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<string>("0");
+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");
+
+<!-- 컴포넌트 호출 -->
+```
+
+