gahusb
d0db9236c8
intro/thanks step에서는 미렌더. q1~q7만 표시. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
35 lines
1019 B
TypeScript
35 lines
1019 B
TypeScript
import { QUESTION_STEPS, TOTAL_QUESTIONS, type SurveyStep } from '@/lib/survey/types';
|
|
|
|
interface Props {
|
|
step: SurveyStep;
|
|
}
|
|
|
|
/**
|
|
* 상단 진행률 바.
|
|
* intro/thanks에서는 렌더링 안 됨 (질문 step 만 표시).
|
|
*/
|
|
export default function ProgressBar({ step }: Props) {
|
|
const idx = QUESTION_STEPS.indexOf(step as 'q1');
|
|
if (idx < 0) return null;
|
|
|
|
const current = idx + 1;
|
|
const percent = (current / TOTAL_QUESTIONS) * 100;
|
|
|
|
return (
|
|
<div className="w-full max-w-md mx-auto mb-8">
|
|
<div className="flex items-center justify-between mb-2 text-white/60 text-xs font-mono tracking-widest">
|
|
<span>{current}/{TOTAL_QUESTIONS}</span>
|
|
</div>
|
|
<div className="h-[2px] bg-white/10 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full transition-all duration-500 ease-out"
|
|
style={{
|
|
width: `${percent}%`,
|
|
background: 'linear-gradient(90deg, #cc97ff 0%, #53ddfc 100%)',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|