diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx index a97c72e1..cd0c052f 100644 --- a/frontend/components/screen/widgets/FlowWidget.tsx +++ b/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);