TwoTierBadge - OLUN. Design System

Badge와 차이: Badge는 하나의 짧은 메타데이터·상태·카테고리·수량을 표시하고, TwoTierBadge는 lead(primary)와 qualifier(secondary)를 한 알약 안에 세로 구분선으로 묶습니다.
primary: 사용자가 먼저 판단해야 하는 유형·상태 같은 lead 세그먼트입니다.
secondary: 출처·사유·수량처럼 lead를 보완하는 qualifier 세그먼트입니다. 없으면 렌더링하지 않습니다.
tone: neutral·info·success·warning·error 한 축으로 lead 세그먼트만 착색하고 qualifier는 항상 중립입니다. 브랜드 라임은 쓰지 않습니다.
emphasis: subtle은 아웃라인, strong은 lead에 시맨틱 틴트 채움 — 반드시 알아채야 하는 상태에만 씁니다 (StatusBadge와 동일 축).

기본(subtle)

한 알약을 세로 구분선으로 나눈 lead│qualifier — tone은 lead만 착색

객관식순환기내과복수정답호흡기내과채점 완료312명검수 대기반려중복 문항

코드 보기tsx

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

export function TwoTierBadgeSubtle() {
  return (
    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap", alignItems: "center" }}>
      <TwoTierBadge primary="객관식" secondary="순환기내과" />
      <TwoTierBadge primary="복수정답" tone="info" secondary="호흡기내과" />
      <TwoTierBadge primary="채점 완료" tone="success" secondary="312명" />
      <TwoTierBadge primary="검수 대기" tone="warning" />
      <TwoTierBadge primary="반려" tone="error" secondary="중복 문항" />
    </div>
  );
}

강조(strong)

반드시 알아채야 하는 상태만 strong — lead에 시맨틱 틴트 채움

객관식순환기내과복수정답호흡기내과채점 완료312명검수 대기반려중복 문항

코드 보기tsx

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

export function TwoTierBadgeStrong() {
  return (
    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap", alignItems: "center" }}>
      <TwoTierBadge primary="객관식" emphasis="strong" secondary="순환기내과" />
      <TwoTierBadge primary="복수정답" tone="info" emphasis="strong" secondary="호흡기내과" />
      <TwoTierBadge primary="채점 완료" tone="success" emphasis="strong" secondary="312명" />
      <TwoTierBadge primary="검수 대기" tone="warning" emphasis="strong" />
      <TwoTierBadge primary="반려" tone="error" emphasis="strong" secondary="중복 문항" />
    </div>
  );
}

신호점 · md

showDot으로 lead에 상태점을 붙이고 md 크기로 키움 (neutral은 hollow 링)

진행 중D-3마감 초과2일보관2024

코드 보기tsx

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

export function TwoTierBadgeDot() {
  return (
    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap", alignItems: "center" }}>
      <TwoTierBadge size="md" showDot primary="진행 중" tone="info" secondary="D-3" />
      <TwoTierBadge size="md" showDot primary="마감 초과" tone="error" emphasis="strong" secondary="2일" />
      <TwoTierBadge size="md" showDot primary="보관" secondary="2024" />
    </div>
  );
}