wr: 대시보드 표로보기

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>
   )
-}
+}

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>
     </>
   );