@olundot/ui · Reference

PermissionGuard

권한 상태에 따라 children을 표시, 숨김, 비활성 fallback으로 전환하는 렌더링 guard입니다.

Provider
PermissionProvider는 permissions 또는 value로 권한 평가 상태를 제공합니다.
fallback
hide, disabled, custom ReactNode를 지원합니다.
scope
resourceType과 resourceId를 조합해 scoped permission 후보를 평가합니다.
helper
evaluatePermission과 usePermission을 직접 사용할 수 있습니다.

Provider 권한

grants로 허용
코드 보기tsx
import { Button, PermissionGuard, PermissionProvider } from "@olundot/ui";

export function PublishPermission() {
  return (
    <PermissionProvider value={{ grants: ["exam:publish"] }}>
      <PermissionGuard permission="exam:publish">
        <Button>게시</Button>
      </PermissionGuard>
    </PermissionProvider>
  );
}

비활성 fallback

fallback=disabled
코드 보기tsx
import { Button, PermissionGuard } from "@olundot/ui";

export function DisabledPermission() {
  return (
    <PermissionGuard permission="exam:delete" permissions={[]} fallback="disabled" disabledReason="삭제 권한이 없습니다">
      <Button variant="danger">삭제</Button>
    </PermissionGuard>
  );
}

평가 함수

evaluatePermission과 scope

exam:publish

허용됨

코드 보기tsx
import { evaluatePermission } from "@olundot/ui";

const canPublish = evaluatePermission(
  "exam:publish",
  { grants: ["exam:midterm-2026:publish"] },
  { resourceType: "exam", resourceId: "midterm-2026" },
);