Files

유병철 a5578bf669 feat: UniversalListPage 검색 기능 개선 및 리렌더링 버그 수정

- UniversalListPage 템플릿에 searchFilter, useClientSearch 지원 추가
- 검색 입력 시 리렌더링(포커스 유실) 버그 수정
- 29개 리스트 페이지에 searchFilter 함수 추가
- SiteBriefingListClient 누락된 searchFilter 추가
- IntegratedListTemplateV2 검색 로직 정리
- 검색 기능 수정내역 가이드 문서 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-29 14:51:07 +09:00

3.5 KiB

Raw Blame History

UniversalListPage 검색 기능 수정 내역

배경

UniversalListPage 템플릿을 사용하는 15개 리스트 페이지에서 검색 기능이 미작동하거나, 검색 시 리렌더링이 발생하는 문제가 있었음.

문제 분류

유형	페이지 수	설명
검색 미작동	10개	검색어 입력해도 필터링 안됨
검색 오류	1개	검색 시 에러 발생
검색 시 리렌더링	4개	검색 입력 시 페이지 전체 리렌더링

대상 페이지 (15개)

#	페이지	패턴	증상
1	approval/inbox	B (externalPagination)	검색 미작동
2	approval/reference	B	검색 미작동
3	boards/free	B	검색 미작동
4	boards/board_mjsgri54_1fmg	B	검색 미작동
5	settings/accounts	A (fetchData)	검색 미작동
6	sales/pricing-management	A	검색 오류
7	production/work-orders	A	리렌더링
8	production/work-results	A	리렌더링
9	material/receiving-management	A	리렌더링
10	outbound/shipments	A	리렌더링
11	accounting/vendor-ledger	B	검색 미작동
12	accounting/bills	A	검색 미작동
13	accounting/bank-transactions	A	검색 미작동
14	accounting/expected-expenses	A	검색 미작동
15	payment-history	-	hideSearch인데 검색창 노출

수정 내용

1. UniversalListPage/index.tsx (핵심 템플릿)

searchFilter 지원 추가 - 서버사이드 모드(clientSideFiltering: false)에서도 클라이언트 검색 가능하도록 config.searchFilter 함수 지원.

fetchData API search 파라미터 버그 수정 - useClientSearch 모드일 때 API에 search 파라미터를 보내지 않도록 수정. API가 해당 필드 검색을 지원하지 않으면 0건 반환되어 클라이언트 필터링 자체가 불가능했음.

// 수정 전 (버그)
search: debouncedSearchValue,

// 수정 후
search: useClientSearch ? undefined : debouncedSearchValue,

config.onSearchChange 호출 지원 - Pattern B 컴포넌트의 config.onSearchChange가 호출되도록 useEffect 추가.

hideSearch 완전 비활성화 로직 - hideSearch: true이면서 onSearchChange/searchFilter가 없는 컴포넌트는 검색을 완전 비활성화. 있는 컴포넌트는 기존대로 헤더 검색창 유지.

// hideSearch + onSearchChange/searchFilter 없음 → 검색 완전 숨김 (payment-history)
// hideSearch + onSearchChange/searchFilter 있음 → 헤더 검색창 표시 (approval/inbox)
searchValue={(config.hideSearch && !config.onSearchChange && !config.searchFilter) ? undefined : searchValue}
onSearchChange={(config.hideSearch && !config.onSearchChange && !config.searchFilter) ? undefined : handleSearchChange}

2. UniversalListPage/types.ts

searchFilter 타입 정의 추가: (item: T, searchValue: string) => boolean

3. 개별 컴포넌트 13개

각 페이지에 searchFilter 함수를 추가하여 어떤 필드를 검색 대상으로 할지 정의.

검증 결과

15개 페이지 브라우저 직접 테스트 완료.

검색 필터링: 전체 정상 동작
검색창 포커스: 입력 시 포커스 유지 (리렌더링 없음)
hideSearch 페이지: 검색창 정상 숨김

참고

빌드 시 ReceivingDetail.tsx에서 SupplierSearchModal 모듈 미발견 에러가 있으나 본 작업과 무관한 기존 이슈임.

3.5 KiB Raw Blame History