Progress - OLUN. Design System

API: value(0-100) · width(기본 120px) · height(기본 4px)
접근성: role=progressbar + aria-valuenow/min/max 자동 적용
fill 토큰: accent-solid(진행 중) — 완료/실패 상태는 wrapper로 구분
권장: 실제 완료율이 없으면 Spinner 사용 (허위 진행 금지)

기본

정적 (0·50·100 3단계 비교)

50%

100%

코드 보기tsx

import { Progress } from "@olundot/ui";

// Progress는 role=progressbar + aria-valuenow/min/max를 자동 적용.
// width: 기본 120px, height: 기본 4px.
export function ProgressBasic() {
  return (
    <div style={{ display: "grid", gap: "16px" }}>
      <div>
        <p style={{ marginBottom: "8px", fontSize: "0.875rem", color: "var(--text-secondary)" }}>0%</p>
        <Progress value={0} width="100%" />
      </div>
      <div>
        <p style={{ marginBottom: "8px", fontSize: "0.875rem", color: "var(--text-secondary)" }}>50%</p>
        <Progress value={50} width="100%" />
      </div>
      <div>
        <p style={{ marginBottom: "8px", fontSize: "0.875rem", color: "var(--text-secondary)" }}>100%</p>
        <Progress value={100} width="100%" />
      </div>
    </div>
  );
}

라이브 슬라이더

라이브 (input range 슬라이더로 value 조정)

문항 가져오기35%

코드 보기tsx

import { useState } from "react";
import { Progress } from "@olundot/ui";

export function ProgressLive() {
  const [value, setValue] = useState(35);
  return (
    <div style={{ display: "grid", gap: "12px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: "0.875rem", color: "var(--text-secondary)" }}>
          문항 가져오기
        </span>
        <span style={{ fontSize: "0.875rem", fontVariantNumeric: "tabular-nums" }}>
          {value}%
        </span>
      </div>
      <Progress value={value} width="100%" height={6} />
      <input
        type="range"
        min={0}
        max={100}
        value={value}
        onChange={(e) => setValue(Number(e.target.value))}
        style={{ width: "100%" }}
        aria-label="진행률 조절"
      />
    </div>
  );
}

두께 비교

정적 (height 4px · 6px · 8px)

4px (기본)

6px

8px

코드 보기tsx

import { Progress } from "@olundot/ui";

export function ProgressSizes() {
  return (
    <div style={{ display: "grid", gap: "16px" }}>
      <div>
        <p style={{ marginBottom: "8px", fontSize: "0.875rem", color: "var(--text-secondary)" }}>4px (기본)</p>
        <Progress value={72} width="100%" height={4} />
      </div>
      <div>
        <p style={{ marginBottom: "8px", fontSize: "0.875rem", color: "var(--text-secondary)" }}>6px</p>
        <Progress value={72} width="100%" height={6} />
      </div>
      <div>
        <p style={{ marginBottom: "8px", fontSize: "0.875rem", color: "var(--text-secondary)" }}>8px</p>
        <Progress value={72} width="100%" height={8} />
      </div>
    </div>
  );
}