TwoTierBadge - OLUN. Design System

Badge와 차이: Badge는 하나의 짧은 메타데이터·상태·카테고리·수량을 표시하고, TwoTierBadge는 primary와 secondary 두 상태를 한 단위로 묶습니다.
primary: 사용자가 먼저 판단해야 하는 공개, 예약, 중단 같은 주 상태입니다.
secondary: 자동 채점, 검토 필요, 오류처럼 주 상태를 보완하는 운영 상태입니다. 없으면 렌더링하지 않습니다.
intent: primaryIntent와 secondaryIntent를 분리해 두 줄의 의미 강도를 다르게 줄 수 있습니다.

주 상태와 보조 상태

주 상태와 보조 운영 상태를 한 묶음으로 표시

공개자동 채점 진행 중

코드 보기tsx

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

export function TwoTierBadgePair() {
  return (
    <TwoTierBadge
      primary="공개"
      secondary="자동 채점 진행 중"
      primaryIntent="success"
      secondaryIntent="brand"
    />
  );
}

주 상태만 표시

보조 상태가 없을 때는 한 줄 배지로 축소

초안

코드 보기tsx

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

export function TwoTierBadgePrimaryOnly() {
  return <TwoTierBadge primary="초안" primaryIntent="muted" />;
}

상태 조합

운영 상태 조합별로 primary와 secondary intent를 분리

공개정상

예약검토 필요

중단오류

코드 보기tsx

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

export function TwoTierBadgeIntents() {
  return (
    <div style={{ display: "flex", gap: "16px", flexWrap: "wrap", alignItems: "flex-start" }}>
      <TwoTierBadge primary="공개" secondary="정상" primaryIntent="success" secondaryIntent="muted" />
      <TwoTierBadge primary="예약" secondary="검토 필요" primaryIntent="brand" secondaryIntent="warning" />
      <TwoTierBadge primary="중단" secondary="오류" primaryIntent="danger" secondaryIntent="danger" />
    </div>
  );
}