Components
Spinner
로딩 스피너 컴포넌트
Spinner
로딩 스피너 컴포넌트는 작업이 진행 중임을 나타내는 로딩 인디케이터입니다.
기본 사용법
import { Spinner } from '@aift/ui/Spinner';export default function Preview() { return <div className="flex flex-col items-start gap-4"><Spinner /></div>;}Sizes
스피너의 크기를 결정합니다.
Small
Small
Large
import { Spinner } from '@aift/ui/Spinner';export default function Sizes() { return ( <div className="space-y-6"> <div className="flex flex-col items-start gap-4 relative"> <h3 className="text-sm font-medium mb-3">Small</h3> <Spinner size="small" /> </div> <div className="flex flex-col items-start gap-4 relative"> <h3 className="text-sm font-medium mb-3">Small</h3> <Spinner size="medium" /> </div> <div className="flex flex-col items-start gap-4 relative"> <h3 className="text-sm font-medium mb-3">Large</h3> <Spinner size="large" /> </div> </div> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'small' | 'medium' | 'large' | 'medium' | 스피너의 크기 |
| color | string | - | 스피너의 색상 |
| loading | boolean | true | 로딩 상태 표시 여부 |