Stepper

보통

다단계 스테퍼

#javascript#smooth

라이브 데모

1
Account
Create your account
2
Profile
Set up your profile
3
Preferences
Choose your preferences
4
Complete
Finish setup
Account

Create your account

코드

Stepper.tsx
const [currentStep, setCurrentStep] = useState(0);
const steps = ['Step 1', 'Step 2', 'Step 3'];
const nextStep = () => setCurrentStep(prev => Math.min(prev + 1, steps.length - 1));
const prevStep = () => setCurrentStep(prev => Math.max(prev - 1, 0));