54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface WizardStepperProps {
|
|
currentStep: number; // 0~3, matching wizardStep in GenerationFlow
|
|
}
|
|
|
|
const WizardStepper: React.FC<WizardStepperProps> = ({ currentStep }) => {
|
|
const { t } = useTranslation();
|
|
|
|
const steps = [
|
|
t('wizardSteps.brandAnalysis'),
|
|
t('wizardSteps.asset'),
|
|
t('wizardSteps.sound'),
|
|
t('wizardSteps.video'),
|
|
];
|
|
|
|
return (
|
|
<div className="wizard-stepper">
|
|
{steps.map((label, index) => {
|
|
const isDone = index < currentStep;
|
|
const isCurrent = index === currentStep;
|
|
const stateClass = isDone ? ' done' : isCurrent ? ' current' : ' pending';
|
|
|
|
return (
|
|
<React.Fragment key={index}>
|
|
{/* 노드: 2rem 고정 너비. 라벨은 absolute로 노드 중심 아래에 붙음 */}
|
|
<div className={`wizard-step${stateClass}`}>
|
|
<div className="wizard-stepper-node">
|
|
{isDone ? (
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<path d="M2.5 7L5.5 10L11.5 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
) : (
|
|
<span>{index + 1}</span>
|
|
)}
|
|
</div>
|
|
<span className="wizard-stepper-label">{label}</span>
|
|
</div>
|
|
|
|
{/* 연결선: flex:1로 남은 공간을 균등하게 채움 */}
|
|
{index < steps.length - 1 && (
|
|
<div className={`wizard-step-line${isDone ? ' done' : ''}`} />
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WizardStepper;
|