ErrorState - OLUN. Design System

EmptyState와 차이: EmptyState는 콘텐츠가 없는 정상 상태이고, ErrorState는 불러오기 실패나 권한 확인 실패처럼 실패 원인이 있는 상태입니다.
retry: 복구 가능한 실패에는 onRetry와 retryLabel로 하나의 재시도 action을 제공합니다.
no action: 사용자가 직접 복구할 수 없는 오류는 action 없이 원인과 다음 문의 경로만 안내합니다.
errorCode: 지원 요청이나 로그 확인에 필요한 짧은 코드를 낮은 강조로 표시합니다.

재시도 action

복구 가능한 실패에는 재시도 action 제공

목록을 불러오지 못했습니다

네트워크 연결을 확인한 뒤 다시 시도하세요.

ERR_NETWORK

코드 보기tsx

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

export function ErrorStateRetry() {
  return (
    <ErrorState surface="canvas"
      title="목록을 불러오지 못했습니다"
      message="네트워크 연결을 확인한 뒤 다시 시도하세요."
      errorCode="ERR_NETWORK"
      onRetry={() => undefined}
      retryLabel="다시 불러오기"
    />
  );
}

Action 없는 오류 안내

사용자 복구 동작이 없을 때는 원인과 상태만 안내

권한을 확인할 수 없습니다

관리자에게 접근 권한을 요청하세요.

코드 보기tsx

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

export function ErrorStateInformational() {
  return (
    <ErrorState surface="canvas"
      size="sm"
      title="권한을 확인할 수 없습니다"
      message="관리자에게 접근 권한을 요청하세요."
    />
  );
}