본문으로 건너뛰기
피드백 · SINCE v0.1.0

ErrorState — 실패 이유와 재시도를 명확히 보여주는 ErrorState

오류 제목, 안내 문구, 아이콘과 선택적 재시도 버튼을 일관되게 제공하는 React Native 오류 상태 컴포넌트입니다.

ErrorState 사용 시점과 역할

ErrorState는 Provider의 errorTitle, errorBody, retry 문자열과 오류 아이콘을 기본으로 사용합니다. onRetry가 있을 때만 버튼을 렌더링하므로 동작 없는 재시도 UI가 생기지 않습니다.
  • Provider 기반 기본 오류 문구와 아이콘
  • title, message, leading, retryLabel 사용자 지정
  • onRetry가 있을 때만 secondary 재시도 버튼 렌더

설치와 최소 예제

ErrorState: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui

import { ErrorState } from '@gj-kit/expo-ui';

<ErrorState message="네트워크 연결을 확인하세요" onRetry={refetch} />

접근성과 플랫폼 동작

오류 내용은 실제 텍스트로 읽히고 재시도는 표준 Button으로 동작합니다. 비동기로 새 오류가 나타났음을 즉시 알릴 필요가 있다면 화면에서 Alert의 live 정책과 조합할 수 있습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.