Skip to Content
ComponentsIcignalProgress

Progress

작업 진행 상태를 시각적으로 표시하는 프로그레스 바

개요

Progress는 작업이나 프로세스의 진행률을 시각적으로 나타내는 컴포넌트입니다. Foundation Progress를 기반으로 iCignal 브랜드 스타일이 적용되어 있습니다.

주요 특징

  • ✅ 진행률 표시: 0~100 범위의 퍼센트 값
  • ✅ 시각적 피드백: 진행 상태를 직관적으로 표현
  • ✅ 접근성: role=“progressbar”, aria-valuenow 지원
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

진행률 값

0%
25%
50%
75%
100%

레이블과 함께 사용

퍼센트 값을 텍스트로 함께 표시합니다.

데이터 처리75%
리포트 생성30%

사용 예시

예시 1: KPI 달성률

목표 대비 달성 현황을 표시합니다.

매출 목표78억 / 100억 (78%)
신규 사용자12,500 / 15,000 (83%)
전환율3.2% / 5.0% (64%)

예시 2: 데이터 처리 파이프라인

단계별 처리 진행 상태를 표시합니다.

1. 데이터 수집완료
2. 데이터 정제진행 중 (78%)
3. 분석 실행대기 중

예시 3: 스토리지 사용량

리소스 사용량을 표시합니다.

데이터 저장소45.2 GB / 100 GB
API 호출 한도8,500 / 10,000

API Reference

Props

PropTypeDefaultDescription
valuenumber0진행률 (0-100)
maxnumber100최대값
classNamestring-추가 CSS 클래스

기본 사용법

import { Progress } from "@vortex/ui-icignal"
 
<Progress value={60} />
<Progress value={100} />

접근성

ARIA 속성

<Progress value={75} />
// 자동 설정: role="progressbar", aria-valuenow=75, aria-valuemin=0, aria-valuemax=100

권장 사항

  • ✅ 진행률 텍스트를 함께 표시하여 의미 전달
  • ✅ aria-valuenow, aria-valuemin, aria-valuemax 자동 설정
  • ✅ 색상 대비: 프로그레스 바와 배경 3:1 이상
  • ❌ 색상만으로 상태 전달 지양 (텍스트 병행)

관련 컴포넌트

Last updated on
InputPasswordRadioButtonGroup