Progress

진행 상태를 표시하는 프로그레스 바 컴포넌트입니다.

개요

Progress는 작업의 진행 상태를 시각적으로 표시하는 컴포넌트입니다. iCignal Progress는 iCignal 브랜드 컬러가 적용되어 있으며, 데이터 처리와 리포트 생성 진행률을 효과적으로 표시합니다. Foundation Progress의 모든 기능을 상속합니다.

사용 사례:

iCignal 데이터 분석 진행률
리포트 생성 상태
목표 달성률
캠페인 진행 상황

알림: 이 컴포넌트는 현재 구현 중입니다.

기본 사용법


import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
 
<div className="w-full bg-gray-200 rounded-full h-2">
  <div
    className="bg-icignal-blue h-2 rounded-full"
    style={{ width: "60%" }}
  ></div>
</div>;

iCignal 브랜딩

iCignal 특화 사용 가이드

데이터 분석 진행률:


<div className="space-y-md">
  <div>
    <div className="flex justify-between mb-xs">
      <span className="text-sm font-medium">데이터 분석</span>
      <span className="text-sm text-gray-600">75%</span>
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2">
      <div
        className="bg-icignal-blue h-2 rounded-full"
        style={{ width: "75%" }}
      ></div>
    </div>
  </div>
</div>

목표 달성률:


<Card>
  <CardContent className="pt-lg">
    <h4 className="font-semibold mb-sm">월간 목표</h4>
    <div className="flex justify-between mb-xs text-sm">
      <span>전환율</span>
      <span className="font-medium">3.2% / 4.0%</span>
    </div>
    <div className="w-full bg-gray-200 rounded-full h-2">
      <div
        className="bg-green-600 h-2 rounded-full"
        style={{ width: "80%" }}
      ></div>
    </div>
    <p className="text-xs text-gray-600 mt-xs">목표의 80% 달성</p>
  </CardContent>
</Card>

Foundation과의 차이점

속성	Foundation	iCignal
색상	중립 블루	iCignal Blue (`#2196f3`)
사용 맥락	범용	Analytics 진행 상태
테마	중립적 테마	iCignal 테마 (`@vortex/ui-icignal/theme`)

Props API

Prop	Type	Default	Description
value	number	0	진행률 (0-100)
max	number	100	최대값