Search + Filter
SearchBar + Tag 필터 + Card Grid + Pagination을 조합한 콘텐츠 검색·필터 패턴입니다.
검색어 입력, 카테고리 필터 선택, 페이지 이동이 모두 인터랙티브하게 동작합니다.
Import
<link rel="stylesheet" href="/guide/css/base/index.css" /> <link rel="stylesheet" href="/guide/css/components/search-bar.css" /> <link rel="stylesheet" href="/guide/css/components/tag.css" /> <link rel="stylesheet" href="/guide/css/components/card.css" /> <link rel="stylesheet" href="/guide/css/components/pagination.css" />
Live
카테고리
검색 결과가 없습니다
다른 검색어나 필터를 사용해 보세요.
구성 컴포넌트
| 컴포넌트 | 역할 | 파일 |
|---|---|---|
| SearchBar | 키워드 입력 · 제목·설명·카테고리 전체 검색 | search-bar.css |
| Tag (Outline → Primary) | 카테고리 필터 선택·해제 토글 | tag.css |
| Card | 검색 결과 콘텐츠 표시 · 3열 그리드 | card.css |
| Pagination | 결과가 6개 초과 시 페이지 분할 | pagination.css |
동작 방식
| 동작 | 설명 |
|---|---|
| 검색어 입력 | 제목·설명·카테고리를 대소문자 구분 없이 실시간 검색 |
| 필터 클릭 | Outline → Primary 전환 · 복수 필터 동시 적용 가능 |
| 검색 + 필터 조합 | AND 조건 — 키워드에 맞고, 선택된 카테고리에 속한 결과만 표시 |
| 초기화 버튼 | 검색어 또는 필터가 하나라도 활성화되면 표시 · 클릭 시 전체 초기화 |
| 빈 상태 | 결과가 0개일 때 빈 상태 메시지 표시 |
| 페이지네이션 | 페이지당 6개 표시 · 필터 변경 시 1페이지로 자동 이동 |