Spaces:
Running
Running
File size: 2,889 Bytes
cc7330c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | /**
* @license
* SPDX-License-Identifier: Apache-2.0
*/
import { Loader2, AlertCircle } from 'lucide-react';
export function LoadingOverlay({ message = "분석 중입니다..." }: { message?: string }) {
return (
<div className="fixed inset-0 bg-white/80 backdrop-blur-sm z-50 flex flex-col items-center justify-center">
<Loader2 className="w-12 h-12 text-cyan-500 animate-spin mb-4" />
<p className="text-lg font-bold text-slate-700">{message}</p>
</div>
);
}
export function ErrorMessage({ message, onRetry }: { message: string; onRetry?: () => void }) {
return (
<div className="p-6 bg-red-50 border border-red-200 rounded-2xl flex flex-col items-center text-center">
<AlertCircle className="w-10 h-10 text-red-500 mb-2" />
<p className="text-red-700 font-medium mb-4">{message}</p>
{onRetry && (
<button
onClick={onRetry}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
>
다시 시도
</button>
)}
</div>
);
}
import Link from 'next/link';
export function Header() {
return (
<header className="min-h-16 border-b border-slate-100 bg-white sticky top-0 z-40 px-4 sm:px-6 py-3 flex items-center justify-between gap-3">
<Link href="/" className="flex min-w-0 items-center space-x-2 hover:opacity-80 transition-opacity">
<div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm rotate-45" />
</div>
<h1 className="text-xl font-bold text-slate-900 tracking-tight">IT 커리어밸류체크</h1>
</Link>
<div className="hidden md:flex shrink-0 items-center space-x-6 text-sm font-medium text-slate-500">
<span className="text-cyan-600">2025 IT산업 임금체계 개선 길라잡이 연계</span>
</div>
</header>
);
}
import { motion } from 'framer-motion';
export function SurveyHeader({ current, total }: { current: number; total: number }) {
const progress = (current / total) * 100;
return (
<header className="h-16 border-b border-slate-100 bg-white sticky top-0 z-40 flex flex-col justify-end">
<div className="px-4 sm:px-6 flex items-center justify-between h-full gap-3">
<div className="flex items-center space-x-2">
<span className="text-xs font-bold text-cyan-600 tracking-widest">Step {current} of {total}</span>
</div>
<div className="text-right">
<span className="text-sm font-bold text-slate-900">{Math.round(progress)}%</span>
</div>
</div>
<div className="w-full h-1 bg-slate-100 overflow-hidden">
<motion.div
initial={{ width: 0 }}
animate={{ width: `${progress}%` }}
className="h-full bg-cyan-500"
/>
</div>
</header>
);
}
|