← Examples

SearchBar 데모

DS SearchBar는 검색 아이콘·입력·지우기 버튼이 한 덩어리로 묶인 필드입니다. 아래 섹션별로 동작을 눌러 본 뒤, 코드 블록을 참고해 주세요.

import

default export 컴포넌트로 가져옵니다.

import SearchBar from "@/shared/components/ds/SearchBar/SearchBar";

import type { SearchBarProps } from "@/shared/components/ds/SearchBar/SearchBar";

기본 (비제어)

내부 state로 값이 관리됩니다. `placeholder`만 넘겨도 됩니다. 접근성용 기본 `aria-label`은 «검색»입니다.

<SearchBar placeholder="검색어를 입력해 보세요" />

onSearch (Enter)

`onSearch`를 넘기면, 입력값이 비어 있지 않을 때 `Enter`로만 `onSearch(현재 값)`이 호출됩니다. 비어 있으면 `Enter`를 눌러도 검색은 실행되지 않습니다.

const [last, setLast] = useState<string | null>(null);

<SearchBar
  placeholder="검색 후 Enter"
  onSearch={(value) => setLast(value)}
/>
{last != null && (
  <p role="status" className="text-sm text-(--color-text-secondary)">
    마지막 검색: {last}
  </p>
)}

아직 검색(Enter)을 실행하지 않았습니다.

제어 (value + onChange)

`value`를 넘기면 제어 컴포넌트입니다. `onChange`로 값을 갱신해야 합니다.

const [q, setQ] = useState("");

<SearchBar
  value={q}
  onChange={(e) => setQ(e.target.value)}
  placeholder="제어 예시"
/>

현재 값(디버그): «빈 문자열»

비활성 (disabled)

`disabled`이면 지우기·`onSearch(Enter)`도 동작하지 않습니다.

<SearchBar
  disabled
  aria-label="비활성 예시"
  placeholder="검색어를 입력해 보세요"
/>

aria-label · placeholder

필드 목적이 다를 때 `aria-label`로 스크린 리더에 읽힐 이름을 바꿀 수 있습니다. `placeholder`는 힌트용입니다.

<SearchBar
  aria-label="강의 제목으로 검색"
  placeholder="예: 수채화 기초"
/>

스타일 확장 (className, wrapperClassName)

`className`은 `Input` 루트에, `wrapperClassName`은 아이콘·인풋·지우기를 감싼 외곽 `div`에 붙습니다.

<SearchBar
  className="text-primary"
  wrapperClassName="w-full max-w-xl border-dashed"
  placeholder="늘리고 테두리 스타일만 예시"
/>