@olundot/ui · Navigation/Data

FilterToolbar

목록 상단에서 검색, 필터, 결과 요약, 초기화, 보조 액션을 한 줄 흐름으로 묶는 도구막대입니다.

slots
search, filters, resultSummary, clearAction, actions를 ReactNode로 받아 호출부가 조합합니다.
SearchField
검색 입력은 SearchField를 search slot에 넣어 기본 폭과 지우기 동작을 유지합니다.
wrap
필터가 늘어나도 flex-wrap으로 줄바꿈되어 좁은 화면 폭을 넘지 않습니다.
meta
결과 요약, 초기화, action은 오른쪽 메타 영역에 정렬됩니다.

검색 통합

SearchField를 search slot에 배치
총 128건
코드 보기tsx
import { FilterToolbar, SearchField } from "@olundot/ui";

export function SearchToolbar() {
  return (
    <FilterToolbar
      aria-label="문항 검색 도구막대"
      search={<SearchField surface="canvas" aria-label="문항 검색" size="sm" placeholder="문항명, 태그, 코드 검색" defaultValue="심혈관" />}
      resultSummary="총 128건"
    />
  );
}

필터

Select와 Chip 조합
필터 3개 적용
코드 보기tsx
import { FilterToolbar, Select, Chip } from "@olundot/ui";

const statusOptions = [
  { value: "all", label: "전체" },
  { value: "review", label: "검토 중" },
  { value: "published", label: "게시됨" },
];

export function FilterControls() {
  return (
    <FilterToolbar
      aria-label="콘텐츠 필터"
      filters={
        <>
          <Select surface="canvas" aria-label="상태" selectVariant="inline" selectSize="sm" defaultValue="review" options={statusOptions} />
          <Select surface="canvas" aria-label="학년" selectVariant="inline" selectSize="sm" defaultValue="all" options={[{ value: "all", label: "전체 학년" }, { value: "4", label: "4학년" }]} />
          <Chip pressed>심혈관</Chip>
        </>
      }
      resultSummary="필터 3개 적용"
    />
  );
}

초기화

clearAction과 보조 action
총 12건
코드 보기tsx
import { RotateCcw, SlidersHorizontal } from "lucide-react";
import { Button, FilterToolbar, SearchField } from "@olundot/ui";

export function ClearableToolbar() {
  return (
    <FilterToolbar
      aria-label="시험 필터 도구막대"
      search={<SearchField surface="canvas" aria-label="시험 검색" size="sm" defaultValue="중간고사" />}
      resultSummary="총 12건"
      clearAction={<Button variant="ghost" size="xs" leadingIcon={RotateCcw}>초기화</Button>}
      actions={<Button variant="outline" size="xs" leadingIcon={SlidersHorizontal}>보기 설정</Button>}
    />
  );
}

줄바꿈

필터가 많을 때 flex-wrap 유지
코드 보기tsx
import { FilterToolbar, SearchField, Select, Button } from "@olundot/ui";

export function WrappingToolbar() {
  return (
    <FilterToolbar
      aria-label="수강생 필터 도구막대"
      search={<SearchField surface="canvas" aria-label="수강생 검색" size="sm" placeholder="이름 또는 학번" />}
      filters={
        <>
          {["상태", "그룹", "진도", "위험도"].map((label) => (
            <Select surface="canvas" key={label} aria-label={label} selectVariant="inline" selectSize="sm" defaultValue="all" options={[{ value: "all", label: `${label} 전체` }, { value: "active", label: "활성" }]} />
          ))}
        </>
      }
      actions={<Button variant="primary" size="xs">적용</Button>}
    />
  );
}