Search Kit

검색 기능 키트. 검색바, 자동완성, 인기검색어, 최근검색어를 포함합니다.

기술 스택

ZustandReact QueryAxiosTypeScript

기능

  • 검색바 컴포넌트 (입력, 제출, 클리어)
  • 자동완성 드롭다운 (디바운스 적용)
  • 키보드 네비게이션 (화살표, Enter, Escape)
  • 최근 검색어 저장 (localStorage 영속화)
  • 인기 검색어 표시 (트렌드 표시)
  • 검색 결과 목록 (페이지네이션, 하이라이트)

파일 구조

설치

1. 의존성 설치

2. 코드 복사

아래 코드 탭에서 필요한 파일들을 복사합니다.

3. API 주소 변경

코드

사용 예시

접근성

  • 검색바에 aria-label, aria-expanded, aria-autocomplete 속성 적용
  • 자동완성 드롭다운은 role="listbox"와 role="option" 사용
  • 키보드 네비게이션 지원 (화살표 키, Enter, Escape)
  • 선택된 항목은 aria-selected로 표시
  • 포커스 트랩 및 외부 클릭 시 드롭다운 닫기 지원