상품 목록 페이지에 이름으로 거르는 검색창을 붙여요. 운영자가 검색어를 입력하면 이름에 그 말이 들어간 상품만 보여 주면 돼요(부분 일치). 검색어가 비어 있으면 전체 상품을 보여 줘요. filterProducts(products, query) 를 완성하세요.
React 상품 목록 페이지에 이름으로 거르는 검색을 붙이는 문제입니다. 검색어를 입력하면 이름에 그 말이 들어간 상품만 보여 주고(부분 일치), 검색어가 비어 있으면 전체 상품을 보여 줍니다. 검색·필터 로직은 lib/filter-products.ts 의 순수 함수에 두고, 페이지는 그 함수를 호출만 합니다.
검색 필터는 전체 목록에서 검색어에 맞는 항목만 추려 보여 주는 화면입니다. 이 문제는 이름 한 필드를 대상으로 부분 일치 방식으로 추리고, 검색어가 비어 있을 때 전체를 보여 주는 동작을 다룹니다. 필터 로직을 화면과 분리된 순수 함수로 두면 같은 입력에 같은 결과가 나와 테스트 하기 쉽습니다. 일치하는 경우뿐 아니라 빈 검색어, 일치가 하나도 없는 경우 같은 경계 케이스를 함께 검증하는 습관이 중요합니다.