)=> {
+ if (isModal) {
+ rainReg(values);
+ } else {
+ rainUpdate(values);
+ }
+ }
+
useEffect(() => {
if(rainZod)
@@ -89,6 +100,9 @@ export function RainRegForm({
}, [rainForm]);
+
+
+
return (
@@ -151,7 +162,7 @@ useEffect(() => {
field.onChange(Number(e.target.value))}
/>
@@ -170,7 +181,7 @@ useEffect(() => {
field.onChange(Number(e.target.value))}
/>
@@ -188,7 +199,7 @@ useEffect(() => {
field.onChange(Number(e.target.value))}
/>
@@ -277,11 +288,12 @@ useEffect(() => {
{
field.onChange(Number(e.target.value));
}}
+ readOnly={instlCstSprtYn!=='Y'}
/>
)}
@@ -320,10 +332,11 @@ useEffect(() => {
)}
@@ -341,6 +354,8 @@ useEffect(() => {
type=""
value={field.value ?? ""}
onChange={field.onChange}
+ readOnly={grntchBdstCertYn!=='Y'}
+
/>
)}
@@ -358,6 +373,8 @@ useEffect(() => {
type=""
value={field.value ?? ""}
onChange={field.onChange}
+ readOnly={grntchBdstCertYn!=='Y'}
+
/>
)}
diff --git a/apps/wr/components/ui/modal/bdstRegModal/bdstRegModal.tsx b/apps/wr/components/ui/modal/bdstRegModal/bdstRegModal.tsx
index 11c8f04f2..308c01241 100644
--- a/apps/wr/components/ui/modal/bdstRegModal/bdstRegModal.tsx
+++ b/apps/wr/components/ui/modal/bdstRegModal/bdstRegModal.tsx
@@ -8,13 +8,13 @@ import {
import { ScrollArea, SelectBox, UiTable } from "@common/business_components";
import { Button, Input, Label } from "@common/components";
import { useEffect, useState } from "react";
-import { RainRegForm } from "../../form/fcltReg/rainReg/rainRegForm";
+import RainRegForm from "../../form/fcltReg/rainReg/rainRegForm";
import { type selectArray } from "@/app/store/common/code";
import { getCity, tableData } from "@/components/lib/func/commom";
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
-import { HtdflRegForm } from "../../form/fcltReg/htdflReg/htdflRegForm";
+import HtdflRegForm from "../../form/fcltReg/htdflReg/htdflRegForm";
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
-import {RswtrRegForm} from "../../form/fcltReg/rswtrReg/rswtrRegForm";
+import RswtrRegForm from "../../form/fcltReg/rswtrReg/rswtrRegForm";
export type objSearchType = {
sgg: string|number;
@@ -144,7 +144,7 @@ export function BdstReg({ moType }: BdstRegProps) {
{ moType === 'RNB'?
:moType==='RST'
- ?
+ ?
:
}
diff --git a/apps/wr/components/ui/modal/headChModal/headChModal.tsx b/apps/wr/components/ui/modal/headChModal/headChModal.tsx
index da4e090ae..979834dbb 100644
--- a/apps/wr/components/ui/modal/headChModal/headChModal.tsx
+++ b/apps/wr/components/ui/modal/headChModal/headChModal.tsx
@@ -1,36 +1,43 @@
import { useWrStore } from "@/app/store";
-import { pbnSttHeadList } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn";
+import type { TableProps } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg";
+import type { TableTripleProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@common/business_components/ui";
import { Button, Checkbox } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
-export default function HeadChModal() {
- const { pbnStt } = useWrStore((state) => state);
+export default function HeadChModal({type }:{type: string }) {
+ const { sttnCommon ,chSttnHead} = useWrStore((state) => state);
-
- const items = pbnSttHeadList.map(item => ({id:item.id, label:item.title}));
-
+ const { rainSttHeadList,pbnSttHeadList } =sttnCommon;
+ let items = rainSttHeadList.map(item => ({id:item.id, label:item.title}));
-
const FormSchema = z.object({
- items: z.array(z.string()).refine((value) => value.some((item) => item), {
- message: "You have to select at least one item.",
+ data: z.array(z.string()).refine((value) => value.some((item) => item), {
+ message: "최소한 하나를 선택해주시길 바랍니다.",
+
}),
})
const form = useForm>({
resolver: zodResolver(FormSchema),
- })
+ defaultValues: {
+ data: [],
+ },
+ })
+
const onSubmit = (val : z.infer) =>{
- console.log(val)
+ if(val?.data.length > 0)
+ chSttnHead(val?.data, 'rain')
+
}
return (
@@ -40,21 +47,20 @@ export default function HeadChModal() {
diff --git a/packages/common/business_components/src/ui/dialog_ui/index.tsx b/packages/common/business_components/src/ui/dialog_ui/index.tsx
index 0f14c211e..b9e341279 100644
--- a/packages/common/business_components/src/ui/dialog_ui/index.tsx
+++ b/packages/common/business_components/src/ui/dialog_ui/index.tsx
@@ -1,5 +1,4 @@
-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@common/components";
-import { useState } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader } from "@common/components";
type ModalType = {
bodyClass: string;
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 3bcd94171..b7588903c 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..448f2df04 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,11 +1,275 @@
-import React from 'react'
+import React, { useState } from 'react';
+import type { SelectDataType } from '../search_input_select';
+import { SelectBox } from '../select';
-function SearchFormLeft(props: {children: React.ReactNode}) {
+/**
+ * 검색 폼 왼쪽 컴포넌트 타입
+ *
+ * @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;
+}
+
+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 }: 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;
+ }
+ }
+
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}
+
+ )
)
}
-export { SearchFormLeft };
\ No newline at end of file
+export { SearchFormLeft };
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");
+
+
+```
+
+
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 && }
-
+