frontend/components/screen/widgets/FlowWidget.tsx

@@ -180,21 +180,39 @@ export function FlowWidget({
     }
   }, [searchFilterColumns, allAvailableColumns]);
 
-  // 🆕 검색 실행
-  const handleSearch = useCallback(() => {
-    if (!stepData || stepData.length === 0) return;
+  // 🆕 검색 초기화
+  const handleClearSearch = useCallback(() => {
+    setSearchValues({});
+    setFilteredData([]);
+  }, []);
 
+  // 🆕 검색 값이 변경될 때마다 자동 검색 (useEffect로 직접 처리)
+  useEffect(() => {
+    if (!stepData || stepData.length === 0) {
+      setFilteredData([]);
+      return;
+    }
+
+    // 검색 값이 하나라도 있는지 확인
+    const hasSearchValue = Object.values(searchValues).some((val) => val && String(val).trim() !== "");
+
+    if (!hasSearchValue) {
+      // 검색 값이 없으면 필터링 해제
+      setFilteredData([]);
+      return;
+    }
+
+    // 필터링 실행
     const filtered = stepData.filter((row) => {
       // 모든 검색 조건을 만족하는지 확인
-      return Array.from(searchFilterColumns).every((col) => {
-        const searchValue = searchValues[col];
-        if (!searchValue || searchValue.trim() === "") return true; // 빈 값은 필터링하지 않음
+      return Object.entries(searchValues).every(([col, searchValue]) => {
+        if (!searchValue || String(searchValue).trim() === "") return true; // 빈 값은 필터링하지 않음
 
         const cellValue = row[col];
         if (cellValue === null || cellValue === undefined) return false;
 
         // 문자열로 변환하여 대소문자 무시 검색
-        return String(cellValue).toLowerCase().includes(searchValue.toLowerCase());
+        return String(cellValue).toLowerCase().includes(String(searchValue).toLowerCase());
       });
     });
 
@@ -203,23 +221,9 @@ export function FlowWidget({
       totalRows: stepData.length,
       filteredRows: filtered.length,
       searchValues,
+      hasSearchValue,
     });
-  }, [stepData, searchFilterColumns, searchValues]);
-
-  // 🆕 검색 초기화
-  const handleClearSearch = useCallback(() => {
-    setSearchValues({});
-    setFilteredData([]);
-  }, []);
-
-  // 검색 값이 변경될 때마다 자동 검색
-  useEffect(() => {
-    if (Object.keys(searchValues).length > 0) {
-      handleSearch();
-    } else {
-      setFilteredData([]);
-    }
-  }, [searchValues, handleSearch]);
+  }, [searchValues, stepData]); // stepData와 searchValues가 변경될 때마다 실행
 
   // 선택된 스텝의 데이터를 다시 로드하는 함수
   const refreshStepData = async () => {
@@ -516,8 +520,11 @@ export function FlowWidget({
     onSelectedDataChange?.(selectedData, selectedStepId);
   };
 
-  // 🆕 표시할 데이터 결정 (필터링된 데이터 또는 전체 데이터)
-  const displayData = filteredData.length > 0 ? filteredData : stepData;
+  // 🆕 표시할 데이터 결정
+  // - 검색 값이 있으면 → filteredData 사용 (결과가 0건이어도 filteredData 사용)
+  // - 검색 값이 없으면 → stepData 사용 (전체 데이터)
+  const hasSearchValue = Object.values(searchValues).some((val) => val && String(val).trim() !== "");
+  const displayData = hasSearchValue ? filteredData : stepData;
 
   // 🆕 페이지네이션된 스텝 데이터
   const paginatedStepData = displayData.slice((stepDataPage - 1) * stepDataPageSize, stepDataPage * stepDataPageSize);