BulkActionBar - OLUN. Design System

count: `N개 선택됨` 문구를 tabular number로 표시하며 count가 0이면 기본적으로 렌더링하지 않습니다.
actions: 각 action은 key, label, onClick, optional icon, variant, disabled, title을 갖습니다.
emptyHint: 모바일 선택 모드처럼 count가 0이어도 bar가 필요할 때 안내 문구를 표시합니다.
placement: 컴포넌트 자체가 sticky bottom, mx-auto, w-fit 기본 배치를 포함합니다.

선택 상태

count, actions, onClear

코드 보기tsx

import { BulkActionBar } from "@olundot/ui";

export function SelectedBulkActionBar() {
  return (
    <BulkActionBar
      count={3}
      onClear={() => undefined}
      actions={[
        { key: "message", label: "메시지", onClick: () => undefined },
        { key: "archive", label: "보관", onClick: () => undefined },
        { key: "remove", label: "제외", variant: "destructive", onClick: () => undefined },
      ]}
    />
  );
}

비활성 액션

disabled, title

코드 보기tsx

import { BulkActionBar } from "@olundot/ui";

export function DisabledBulkActionBar() {
  return (
    <BulkActionBar
      count={2}
      onClear={() => undefined}
      actions={[
        { key: "publish", label: "게시", disabled: true, title: "검토 완료 후 사용할 수 있습니다", onClick: () => undefined },
        { key: "delete", label: "삭제", variant: "destructive", onClick: () => undefined },
      ]}
    />
  );
}

빈 선택 모드

emptyHint

코드 보기tsx

import { BulkActionBar } from "@olundot/ui";

export function EmptyModeBulkActionBar() {
  return (
    <BulkActionBar
      count={0}
      emptyHint="선택 모드"
      onClear={() => undefined}
      actions={[{ key: "message", label: "메시지", onClick: () => undefined }]}
    />
  );
}