caadiq
980ae3fe1d
- frontend 폴더를 새로 리팩토링된 frontend-temp로 교체 - docs/architecture.md: 현재 프로젝트 구조 반영 - docs/development.md: API 클라이언트 구조 업데이트 - docs/frontend-improvement.md 삭제 (완료된 개선 계획) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
36 lines
1.1 KiB
JavaScript
36 lines
1.1 KiB
JavaScript
import { motion } from 'framer-motion';
|
|
import { AlertCircle, RefreshCw } from 'lucide-react';
|
|
|
|
/**
|
|
* 에러 메시지 컴포넌트
|
|
* @param {string} message - 에러 메시지
|
|
* @param {function} onRetry - 재시도 콜백 함수
|
|
* @param {string} className - 추가 CSS 클래스
|
|
*/
|
|
function ErrorMessage({
|
|
message = '데이터를 불러오는데 실패했습니다.',
|
|
onRetry,
|
|
className = '',
|
|
}) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className={`flex flex-col items-center justify-center py-12 px-4 ${className}`}
|
|
>
|
|
<AlertCircle size={48} className="text-red-400 mb-4" aria-hidden="true" />
|
|
<p className="text-gray-600 text-center mb-4">{message}</p>
|
|
{onRetry && (
|
|
<button
|
|
onClick={onRetry}
|
|
className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
|
|
>
|
|
<RefreshCw size={16} aria-hidden="true" />
|
|
다시 시도
|
|
</button>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default ErrorMessage;
|