From 84147da3c5f1f5505aa389ee31540c2eed9451ee Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Mon, 21 Apr 2025 16:24:55 +0900
Subject: [PATCH] =?UTF-8?q?md=20=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/search_form_left/searchFormLeft.md | 115 ++++++++++++------
 1 file changed, 75 insertions(+), 40 deletions(-)

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
index 6083341ff..04531c27f 100644
--- a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md
+++ b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md
@@ -16,47 +16,28 @@ 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<boolean>(false);
 .....
 
-<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);
-  }}
+<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}
 >
+
 ```
 &emsp; ㆍisShowPart : 검색단에서 구분(행정별,유역별,환경청별) 세팅 여부(보일 경우 : Y, 아닐경우 : N 혹은 미첨부)
 
@@ -88,7 +69,11 @@ const [envPartSigunValue, setEnvPartSigunValue] = useState<string>("0");
 
 &emsp; ㆍsetRtnEnvPartSidoValue : 선택한 환경청의 시도 set함수(조회시 페이지에서 사용)
 
-&emsp; ㆍsetRtnEnvPartSidoValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용)
+&emsp; ㆍsetRtnEnvPartSigunValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용)
+
+&emsp; ㆍresetTrigger : 초기화 trigger 변수
+
+
 
 #### 2. 세팅방법
 ```js
@@ -333,8 +318,58 @@ 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<boolean>(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]);
+
+// 테이블 호출 컴포넌트
+<UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)}   headName={"시설별 수질현황"} tableData={mainList} headlist={upHeadList2} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange}>
+  <HeadMakeColSpan upHeadList={upHeadList2} layoutNum={layoutNum}/>
+</UiTable>
 ```