o2o-negosium-original/frontend/src/components/ErrorPage.tsx
민헌 f7f5439042 feat(chat): 프론트 로드 에러 페이지·대기 애니메이션·indicator 소비
- ErrorPage 컴포넌트 추가: init/messages 로드 실패(서버/네트워크) 시 ChatContainer 가 에러 화면+재시도(refetch) 렌더 (기존엔 빈 채팅처럼 보임)
- 대기 표시: 채팅 영역 '협상 중' 타이핑 버블 + 입력 버튼 자리 '...' 점 애니메이션
- desync 에러코드(CHAT_INPUT_MODE_MISMATCH 1404 / CHAT_AGENT_TIMEOUT 1405) 추가 및 메시지

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 17:32:58 +09:00

38 lines
1.3 KiB
TypeScript

import { AlertTriangle } from 'lucide-react'
import { Button } from '@/components/Button'
export interface ErrorPageProps {
/** 상단 메시지(굵게). 기본: 일반 오류 문구. */
message?: string
/** 보조 설명. 기본: 재시도 안내. */
description?: string
/** 재시도 버튼 핸들러. 없으면 버튼 미표시. */
onRetry?: () => void
}
// 데이터 로드 실패(서버/네트워크 오류) 시 보여주는 에러 화면. 컨테이너를 가득 채운다(h-full).
export function ErrorPage({
message = '문제가 발생했습니다.',
description = '잠시 후 다시 시도해주세요.',
onRetry,
}: ErrorPageProps) {
return (
<div className="flex h-full w-full items-center justify-center">
<div className="flex flex-col items-center gap-6 p-12">
<div className="flex size-20 items-center justify-center rounded-full bg-destructive/10">
<AlertTriangle className="size-10 text-destructive" />
</div>
<div className="flex flex-col items-center gap-2 text-center">
<p className="title-2 text-destructive">{message}</p>
<p className="body-1 text-neutral-70">{description}</p>
</div>
{onRetry && (
<Button variant="primary" size="lg" onClick={onRetry}>
다시 시도
</Button>
)}
</div>
</div>
)
}