ActionFooter

position: sticky, fixed, static 위치 variant를 제공합니다.
status: saving, saved, error 상태를 짧은 라벨과 점으로 표시합니다.
destructive: danger, destructive, emergency variant action은 왼쪽 그룹으로 분리됩니다.
permissions: action.permission과 permissions를 비교해 허용된 action만 렌더링합니다.

position=static, saved status

저장됨

코드 보기tsx

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

export function StaticSaveFooter() {
  return (
    <ActionFooter surface="canvas"
      position="static"
      status={{ kind: "saved" }}
      actions={[
        { label: "취소", variant: "outline", onClick: () => undefined },
        { label: "저장", onClick: () => undefined },
      ]}
    />
  );
}

sticky, saving, loading action

기본 정보

긴 편집 화면에서 저장 바가 하단에 머무릅니다.

응시자 조건

긴 편집 화면에서 저장 바가 하단에 머무릅니다.

공개 설정

긴 편집 화면에서 저장 바가 하단에 머무릅니다.

검토 메모

긴 편집 화면에서 저장 바가 하단에 머무릅니다.

저장 중

코드 보기tsx

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

export function StickySavingFooter() {
  return (
    <ActionFooter surface="canvas"
      status={{ kind: "saving" }}
      actions={[
        { label: "임시저장", variant: "outline", loading: true, onClick: () => undefined },
        { label: "계속", disabled: true, onClick: () => undefined },
      ]}
    />
  );
}

destructive group, error status

저장 실패

코드 보기tsx

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

export function DestructiveFooter() {
  return (
    <ActionFooter surface="canvas"
      position="static"
      status={{ kind: "error" }}
      actions={[
        { label: "초안 삭제", variant: "danger", onClick: () => undefined },
        { label: "다시 저장", onClick: () => undefined },
      ]}
    />
  );
}

정적 저장 바

저장 중 상태

위험 action 분리