37 lines
1.1 KiB
React
37 lines
1.1 KiB
React
|
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;
|