Progress

진행률 표시 컴포넌트는 작업의 진행 상태를 시각적으로 표시합니다.

기본 사용법

33% 진행

66% 진행

100% 완료

import { Progress } from '@aift/ui/Progress';

export default function Preview() {
  return (
    <div className="space-y-4 max-w-md">
      <div>
        <p className="text-sm mb-2">33% 진행</p>
        <Progress value={33} className="w-full" />
      </div>
      <div>
        <p className="text-sm mb-2">66% 진행</p>
        <Progress value={66} className="w-full" />
      </div>
      <div>
        <p className="text-sm mb-2">100% 완료</p>
        <Progress value={100} className="w-full" />
      </div>
    </div>
  );
}

import { Progress } from '@aift/ui/Progress';export default function Preview() {  return (    <div className="space-y-4 max-w-md">      <div>        <p className="text-sm mb-2">33% 진행</p>        <Progress value={33} className="w-full" />      </div>      <div>        <p className="text-sm mb-2">66% 진행</p>        <Progress value={66} className="w-full" />      </div>      <div>        <p className="text-sm mb-2">100% 완료</p>        <Progress value={100} className="w-full" />      </div>    </div>  );}

Props

Prop	Type	Default	Description
value	`number`	`0`	진행률 값 (0-100)
max	`number`	`100`	최대 값
size	`'small' \| 'medium'`	`'medium'`	진행 바의 크기
variant	`'default' \| 'solid' \| 'soft'`	`'default'`	진행 바의 스타일
color	`'primary' \| 'positive' \| 'cautionary' \| 'destructive'`	`'primary'`	진행 바의 색상
getValueLabel	`(value: number, max: number) => string`	-	값 레이블 함수

Progress

Progress

기본 사용법

Props

On this page