초안: 검색 기반 필터링 시스템 구축

최종 위치: docs/router/framework/react/how-to/build-search-filtering-systems.md
프로그레시브 시리즈 위치: 특수 사용 사례 - 가이드 #9
종속 항목: setup-basic-search-params.md, navigate-with-search-params.md, validate-search-params.md
상태: 구현 준비 완료 - 포괄적인 UI 패턴을 사용할 수 있습니다.

---

navigate-with-search-params.md에서 준비한 콘텐츠

검색 결과 탐색

쿼리를 유지하면서 검색 결과를 탐색합니다.

import { Link, useSearch } from '@tanstack/react-router'

function SearchResults() {
  const search = useSearch({ from: '/search' })

  return (
    <div>
      {/* Preserve search query, change view */}
      <nav>
        <Link search={(prev) => ({ ...prev, view: 'grid' })}>Grid View</Link>
        <Link search={(prev) => ({ ...prev, view: 'list' })}>List View</Link>
      </nav>

      {/* Pagination with query preservation */}
      <div>
        {search.page > 1 && (
          <Link search={(prev) => ({ ...prev, page: prev.page - 1 })}>
            Previous
          </Link>
        )}

        <Link search={(prev) => ({ ...prev, page: (prev.page || 1) + 1 })}>
          Next
        </Link>
      </div>

      {/* Related searches */}
      <div>
        Related searches:
        {['laptops gaming', 'laptops business', 'laptops student'].map(
          (suggestion) => (
            <Link
              key={suggestion}
              search={(prev) => ({ ...prev, query: suggestion, page: 1 })}
            >
              {suggestion}
            </Link>
          ),
        )}
      </div>
    </div>
  )
}

필터 탐색

검색 매개변수 탐색으로 필터링 인터페이스를 구축합니다.

import { Link, useSearch } from '@tanstack/react-router'

const categories = ['electronics', 'clothing', 'books', 'home']
const sortOptions = [
  { value: 'relevance', label: 'Relevance' },
  { value: 'price-asc', label: 'Price: Low to High' },
  { value: 'price-desc', label: 'Price: High to Low' },
  { value: 'rating', label: 'Customer Rating' },
]

function FilterNavigation() {
  const search = useSearch({ from: '/products' })

  return (
    <aside>
      {/* Category filters */}
      <div>
        <h3>Categories</h3>
        {categories.map((category) => (
          <Link
            key={category}
            search={(prev) => ({
              ...prev,
              category: prev.category === category ? undefined : category,
              page: 1,
            })}
            className={search.category === category ? 'active' : ''}
          >
            {category}
          </Link>
        ))}
      </div>

      {/* Sort options */}
      <div>
        <h3>Sort By</h3>
        {sortOptions.map((option) => (
          <Link
            key={option.value}
            search={(prev) => ({ ...prev, sort: option.value, page: 1 })}
            className={search.sort === option.value ? 'active' : ''}
          >
            {option.label}
          </Link>
        ))}
      </div>

      {/* Clear all filters */}
      <Link
        search={(prev) => {
          const { category, sort, minPrice, maxPrice, ...rest } = prev
          return rest
        }}
      >
        Clear All Filters
      </Link>
    </aside>
  )
}

프로그래밍 방식 검색 컨트롤

검색 매개변수를 업데이트해 프로그래밍 방식으로 탐색합니다.

import { useNavigate } from '@tanstack/react-router'

function SearchControls() {
  const navigate = useNavigate()

  const handleSortChange = (sortBy: string) => {
    navigate({
      search: (prev) => ({ ...prev, sort: sortBy, page: 1 }),
    })
  }

  const handleClearFilters = () => {
    navigate({
      search: (prev) => {
        const { category, minPrice, maxPrice, ...rest } = prev
        return rest
      },
    })
  }

  return (
    <div>
      <select onChange={(e) => handleSortChange(e.target.value)}>
        <option value="relevance">Sort by Relevance</option>
        <option value="price-asc">Price: Low to High</option>
        <option value="price-desc">Price: High to Low</option>
      </select>

      <button onClick={handleClearFilters}>Clear Filters</button>
    </div>
  )
}

---

구현 참고 사항

필요한 추가 콘텐츠:

• 완전한 이커머스 필터링 예시
• 고급 필터 조합(가격 범위, 다중 선택)
• 필터 상태 유지 및 공유
• 검색 결과 강조 표시 및 정렬
• 무한 스크롤 페이지네이션 패턴
• 필터 URL 상태 관리 모범 사례
• 필터 UI의 접근성 고려 사항
• 모바일 반응형 필터 패턴

추가할 상호 참조:

• 기반 내용은 setup-basic-search-params.md로 연결
• 탐색 패턴은 navigate-with-search-params.md로 연결
• 필터 검증은 validate-search-params.md로 연결
• 데이터 통합은 search-params-with-data-loading.md로 이어지는 링크 추가

필요한 README 업데이트:

• 프로그레시브 시리즈에서 가이드를 완료된 것으로 표시
• 관련 가이드에서 "일반적인 다음 단계" 주석 해제