From c1a03fcabcf3caa4a4a82c41ab7a1056e369f7f2 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 20 May 2026 17:50:43 +0900
Subject: [PATCH] =?UTF-8?q?wr:=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=ED=91=9C=EB=A1=9C=EB=B3=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/fo/app/components/common/SearchInput.tsx | 48 +++++++++++++++----
 .../dashboard/maingraph/page.tsx              | 15 +++---
 2 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/apps/fo/app/components/common/SearchInput.tsx b/apps/fo/app/components/common/SearchInput.tsx
index c15ab7506..08eedf93f 100644
--- a/apps/fo/app/components/common/SearchInput.tsx
+++ b/apps/fo/app/components/common/SearchInput.tsx
@@ -10,11 +10,21 @@ type thisProps = {
   fcltyName? : string | undefined;
 }
 
+function useDebouncedValue<T>(value: T, delay = 700) {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), delay);
+    return () => clearTimeout(t);
+  }, [value, delay]);
+  return v;
+}
+
 export default function SearchInputText({label=undefined, setValue=()=>{}, sidoSigun=undefined, fcltyName=undefined} :thisProps) {
   
   const { ProcessFacilityList, searchProcessFacilitySearching } = useFoStore((state) => state);
   const [isOpen, setIsOpen] = useState(false);
   const [textValue, setTextValue] = useState(fcltyName || '');
+  const debouncedTextValue = useDebouncedValue(textValue);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const processFacilityList = ProcessFacilityList?.processFacilityList || [];
   
@@ -23,29 +33,51 @@ export default function SearchInputText({label=undefined, setValue=()=>{}, sidoS
     setTextValue(value);
     if (value) {
       setIsOpen(true);
-      if(sidoSigun) {
-        searchProcessFacilitySearching(1, 4999, 'A', sidoSigun, '0', '0', '0', value);
-      } else {
-        searchProcessFacilitySearching(1, 4999, '0', '0', '0', '0', '0', value);
-      }
+      // 삭제된 기존 코드:
+      // if(sidoSigun) {
+      //   searchProcessFacilitySearching(1, 4999, 'A', sidoSigun, '0', '0', '0', value);
+      // } else {
+      //   searchProcessFacilitySearching(1, 4999, '0', '0', '0', '0', '0', value);
+      // }
+      // onChange 안에서 바로 검색하면 글자를 입력할 때마다 요청이 발생해서
+      // debounce가 사실상 동작하지 않습니다.
+      // 실제 검색은 아래 debounced useEffect에서만 실행되도록 변경했습니다.
     } else {
       setIsOpen(false);
     }
-  }, [searchProcessFacilitySearching, sidoSigun]);
+  }, []);
 
   const onInputFocus = useCallback(() => {
     setIsOpen(true);
+    if (textValue.trim()) return;
+
+    // 입력값이 없을 때만 기본 목록을 조회합니다.
+    // 이미 입력 중인 경우에는 기존 값으로 다시 전체/광범위 조회하지 않습니다.
     if(sidoSigun) {
       searchProcessFacilitySearching(1, 4999, 'A', sidoSigun, '0', '0', '0');
     } else {
       searchProcessFacilitySearching(1, 4999, '0', '0', '0', '0', '0');
     }
-  }, [searchProcessFacilitySearching, sidoSigun]);
+  }, [searchProcessFacilitySearching, sidoSigun, textValue]);
 
   useEffect(() => {
     setTextValue(fcltyName || '');
   }, [fcltyName]);
 
+  useEffect(() => {
+    const keyword = debouncedTextValue.trim();
+
+    if (!keyword) return;
+
+    // debounce가 적용된 값이 확정된 뒤에만 검색해서
+    // 시설명을 입력하는 도중의 과도한 검색 요청을 막습니다.
+    if(sidoSigun) {
+      searchProcessFacilitySearching(1, 4999, 'A', sidoSigun, '0', '0', '0', keyword);
+    } else {
+      searchProcessFacilitySearching(1, 4999, '0', '0', '0', '0', '0', keyword);
+    }
+  }, [debouncedTextValue, searchProcessFacilitySearching, sidoSigun]);
+
   const handleSuggestionClick = useCallback((bscFctCd: string, bscFctNm: string, fctCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | '') => {
     setTextValue(bscFctNm);
     setValue(bscFctCd, bscFctNm, fctCpc, trtFrfNm, efflWqltStndrdNm);
@@ -100,4 +132,4 @@ export default function SearchInputText({label=undefined, setValue=()=>{}, sidoS
       )}
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx b/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx
index 82eeb4d7c..8eddbd098 100644
--- a/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx
+++ b/apps/fo/app/pages/(with-layout)/dashboard/maingraph/page.tsx
@@ -229,13 +229,6 @@ export default function DashBoardChart({searchYear = '', fcltyList = []}: facili
             </CardContent>
           </Card>
         </ListDiv>
-        <ListDiv className="h-[300px]">
-          <Card className="h-full">
-            <CardContent className="h-full">
-              <MainChart chartForm={CHART_FORM.LINE} chartConfig={chartConfig_tptp} chartData={chart_tpTp} chartTitle="총인유입T-P-방류T-P" yFieldText="T-P(mg/L)" setXAxisYearTick={true}></MainChart>
-            </CardContent>
-          </Card>
-        </ListDiv>
         {/* 유입T-N-방류T-N */}
         <ListDiv className="h-[300px]">
           <Card className="h-full">
@@ -260,6 +253,14 @@ export default function DashBoardChart({searchYear = '', fcltyList = []}: facili
             </CardContent>
           </Card>
         </ListDiv>
+        {/* 총인유입T-P-방류T-P */}
+        <ListDiv className="h-[300px]">
+          <Card className="h-full">
+            <CardContent className="h-full">
+              <MainChart chartForm={CHART_FORM.LINE} chartConfig={chartConfig_tptp} chartData={chart_tpTp} chartTitle="총인유입T-P-방류T-P" yFieldText="T-P(mg/L)" setXAxisYearTick={true}></MainChart>
+            </CardContent>
+          </Card>
+        </ListDiv>
       </ContentsDiv>
     </>
   );