ErrorPage
404·403·500처럼 페이지 자체를 보여 줄 수 없을 때 화면 전체를 쓰는 에러예요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
404
403
500
사용법
- 상태별 권장 동작404·403은 "홈으로 가기", 500은 refresh-cw + "다시 시도"(페이지 다시 불러오기)예요.
- 제목은 페이지의 h1오류 코드는 문의할 때 쓰도록 mono-caption으로 작게 보여 줘요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| status | 404 · 403 · 500 (필수) | — |
| title · description | 바꿀 문구 | 상태별 문구 |
| action | primary Button 하나 | — |
코드
tsx
// app/not-found.tsx
<ErrorPage status={404} action={<Button render={<NextLink href="/" />}>홈으로 가기</Button>} />
// app/error.tsx
<ErrorPage status={500} action={<Button onClick={reset}><RefreshCw />다시 시도</Button>} />