search base form 추가(사용법은 메신저로 우선 전달)

packages/common/business_components/src/ui/index.ts

@@ -1,20 +1,21 @@
 export * from "./chart";
 export * from "./date_picker";
+export * from "./dialog_ui";
+export * from "./excel_download";
 export * from "./file-upload";
 export * from "./form";
 export * from "./form_ui";
+export * from "./list_div";
+export * from "./main_content_div";
 export * from "./scroll";
+export * from "./search_base_form";
 export * from "./search_form";
+export * from "./search_form_left";
+export * from "./search_form_right";
 export * from "./search_input";
 export * from "./search_input_select";
 export * from "./select";
-export * from "./table";
-export * from "./main_content_div";
-export * from "./title";
-export * from "./search_form_left";
-export * from "./search_form_right";
-export * from "./table_div";
-export * from "./list_div";
 export * from "./tab";
-export * from "./dialog_ui";
-export * from "./excel_download";
+export * from "./table";
+export * from "./table_div";
+export * from "./title";

packages/common/business_components/src/ui/search_base_form/index.tsx

@@ -0,0 +1,134 @@
+import { Button } from "@common/components/ui";
+import { useCallback, useEffect, useState } from "react";
+import { SearchFormLeft, type EnvPartSelectDataType } from "../search_form_left";
+import { SearchFormRight } from "../search_form_right";
+import type { SelectDataType } from "../search_input_select";
+type SearchBaseType = {
+    leftChildren:React.ReactNode; 
+    rightChildren:React.ReactNode;
+    selectSidoData?: SelectDataType[] | [];
+    selectSigunData?: SelectDataType[] | [];
+    selectRegionData?: SelectDataType[] | [];
+    selectUnitWaterShedData?: SelectDataType[] | [];
+    selectMiddleRegionData?: SelectDataType[] | [];
+    selectEnvPartData?: EnvPartSelectDataType[] | [];
+    queryClick:(returnType:ReturnType) => void;
+    excelClick:(returnType:ReturnType) => void;
+    btnClass:string;
+}
+export type ReturnType = {
+    partValue: string;
+    sidoValue:  string;
+    sigunValue:  string;
+    regionValue:  string;
+    unitWaterShedValue: string;
+    middleRegionValue: string;
+    envPartValue: string;
+    envPartSidoValue: string;
+    envPartSigunValue: string;
+}
+
+
+function SearchBaseForm ({
+    leftChildren, 
+    rightChildren, 
+    selectSidoData,
+    selectSigunData,
+    selectRegionData,
+    selectUnitWaterShedData,
+    selectMiddleRegionData,
+    selectEnvPartData,
+    btnClass,
+    queryClick,
+    }: SearchBaseType) {
+        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");
+        const [resetTrigger, setResetTrigger] = useState(false);
+        const queryVal = () => {
+            console.log("조회버튼 클릭");
+            queryClick({
+                partValue: partValue,
+                sidoValue: sidoValue,
+                sigunValue: sigunValue,
+                regionValue: regionValue,
+                unitWaterShedValue: untitWaterShedValue,
+                middleRegionValue: middleRegionValue,
+                envPartValue: envPartValue,
+                envPartSidoValue: envPartSidoValue,
+                envPartSigunValue: envPartSigunValue,
+            });
+        }
+        const initVal = useCallback(() => {
+            setResetTrigger(true);
+        }, [setResetTrigger]);
+        useEffect(() => {
+            if (resetTrigger) {
+                setResetTrigger(false);
+            }
+        }, [resetTrigger]);
+        const excelDownload = useCallback(() => {
+            console.log("엑셀다운로드 클릭");
+            console.log(partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue);
+        }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue]);
+        // useEffect(() => {
+        //     if (ref && ref.current) {
+        //         ref.current.partValue = partValue;
+        //         ref.current.sidoValue = sidoValue;
+        //         ref.current.sigunValue = sigunValue;
+        //         ref.current.regionValue = regionValue;
+        //         ref.current.unitWaterShedValue = untitWaterShedValue;
+        //         ref.current.middleRegionValue = middleRegionValue;
+        //         ref.current.envPartValue = envPartValue;
+        //         ref.current.envPartSidoValue = envPartSidoValue;
+        //         ref.current.envPartSigunValue = envPartSigunValue;
+        //     }
+        // }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue]);
+    return (
+       <div className="flex card card-border !mt-6">
+         <SearchFormLeft isShowPart={true}
+            selectSidoData={selectSidoData}
+            selectSigunData={selectSigunData}
+            selectRegionData={selectRegionData}
+            selectUnitWaterShedData={selectUnitWaterShedData}
+            selectMiddleRegionData={selectMiddleRegionData}
+            selectEnvPartData={selectEnvPartData}
+            setRtnPartValue={setPartValue}
+            setRtnSidoValue={setSidoValue}
+            setRtnSigunValue={setSigunValue}
+            setRtnRegionValue={setRegionValue}
+            setRtnUnitWaterShedValue={setUntitWaterShedValue}
+            setRtnMiddleRegionValue={setMiddleRegionValue}
+            setRtnEnvPartValue={setEnvPartValue}
+            setRtnEnvPartSidoValue={setEnvPartSidoValue}
+            setRtnEnvPartSigunValue={setEnvPartSigunValue}
+            resetTrigger={resetTrigger}
+          >
+            {leftChildren}
+          </SearchFormLeft>
+          <SearchFormRight>
+            <Button className={btnClass} color="green" onClick={excelDownload}>
+              엑셀다운로드 
+            </Button>
+            <div>
+              <Button className={btnClass} onClick={initVal}>
+                초기화
+              </Button>
+              <Button className={btnClass} onClick={queryVal}>
+                조회
+              </Button>
+            </div>
+            {rightChildren}
+          </SearchFormRight>
+       </div>
+     )
+ }
+  
+ export { SearchBaseForm };
+ 

packages/common/business_components/src/ui/search_form_left/index.tsx

@@ -41,7 +41,7 @@ type SearchFormLeftProps = {
   resetTrigger?: boolean;
 }
 
-type EnvPartSelectDataType = SelectDataType & {
+export type EnvPartSelectDataType = SelectDataType & {
   adstDliStrCd: string,
 }
 
@@ -315,4 +315,4 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel
   )
 }
 
-export { SearchFormLeft };
+export { SearchFormLeft };