ErrorScreen

Feedback & Status

에러 유형에 맞는 화면을 띄우는 에러 스크린.

Usage

권한 오류나 찾을 수 없는 페이지를 일관된 전체 화면 패턴으로 표시할 때 사용한다.

import

import { ErrorScreen } from '@mildang/design-system/ErrorScreen';

API Reference

ErrorScreen Props

Prop

Type

Default

title

필수

ReactNode

지정 안 함

action

ReactNode

지정 안 함

className

string

지정 안 함

description

ReactNode

지정 안 함

graphicSize

number

280

graphicType

"barricade" | "lock" | "symbols" | "fallingAirplane"

type에 따라 자동 선택

mobileGraphicSize

number

210

type

"notFound" | "auth"

notFound

같은 패밀리

@mildang/design-system/ErrorScreen 에서 같이 내보내는 컴포넌트다.

AuthErrorScreen

접근 권한이 없을 때 띄우는 에러 화면.

NotFoundErrorScreen

페이지를 찾지 못했을 때 띄우는 에러 화면.

오류 화면 구성

title, description, graphicType, action으로 오류 안내와 다음 행동을 구성한다.

오류와 다시 시도 CTA

오류 설명과 사용자 정의 action을 함께 표시한다.

코드

Open in Playground

import { Button } from '@mildang/design-system/Button';
import { ErrorScreen } from '@mildang/design-system/ErrorScreen';

export default function ErrorScreenActionExample() {
  return (
    <div style={{ minHeight: 520 }}>
      <ErrorScreen
        type="notFound"
        title="문제가 발생했습니다"
        description="잠시 후 다시 시도해 주세요."
        action={<Button onClick={() => undefined}>다시 시도</Button>}
      />
    </div>
  );
}