Metric card (지표 카드 · 상태/비교)

이 페이지 = 지표 카드 패턴

경영 대시보드의 핵심 지표 카드 — 상단 라벨 + 우측 상태 배지 + 큰 값 + 보조 텍스트로 한 지표의 현황을 요약합니다. 상태에 따라 상단 2px 컬러 보더 + 연한 틴트 그라데이션으로 좋음(green)·나쁨(red)·중립(neutral)을 색으로 전달합니다. 일반 데이터 표는 Data table (Table 1)을, 큰 컨테이너/차트 카드는 각 화면 마크업을 참고하세요.

대시보드에는 두 종류의 지표 카드가 있습니다.

• 상태 카드 — 선택한 달의 절대 현황(청구금액·인건비·차액·인력 충원도). 값의 좋고 나쁨을 색으로 표현.
• 비교 카드 — 두 달을 비교한 증감(전월 대비). 증가/감소/유지를 아이콘 칩 + 색으로 표현.

두 카드는 외형 규칙(상단 컬러 보더 + 틴트, 솔리드 배지, 큰 값)이 동일하고, 배지 내용·보조 텍스트만 다릅니다.

라이브 미리보기

실제 DS 토큰(--color-green-500 / --color-red-50 / --text-h3 등)으로 렌더됩니다. 두 영역 모두 우측 상단 세그먼트 탭으로 시나리오를 전환하며 상단 보더·틴트·배지·값 색을 확인하세요.

핵심: 색은 카드마다 자기 상태에 따라 따로 정해집니다. 예를 들어 초과 · 적자 시나리오에서도 청구금액은 등록만 됐으면 초록(정상) 으로 유지되고(청구는 독립 지표), 인건비·차액·인력만 빨강으로 바뀝니다.

상태 카드 · 선택 월 상세

청구금액정상

5,235만

인건비 (인센티브 포함)정상

4,343만

인센티브 1,096만 · 62건

차액 (영업손익)흑자

893만

인력 충원도전 병동 충족

+15명

현재 44명 · 피크 필요 29명

비교 카드 · 전월 대비

청구 증가

5,235만

2026년 4월 4,800만 대비

+435만 (+9.1%)

인건비 감소

4,343만

2026년 4월 4,500만 대비

-157만 (-3.5%)

차액 증가

+893만

2026년 4월 300만 대비

+593만 (+197.7%)

인력 상태 변동

44명

2026년 4월 42명 대비

+2명

ℹ️ docs 렌더 메모: docs는 Tailwind를 컴파일하지 않으므로 앱의 유틸 클래스를 토큰 기반 scoped CSS로 재현했습니다(색·크기·간격은 토큰 동일). 실제 앱은 아래 "핵심 스펙"의 Tailwind 유틸로 작성됩니다.

단일 출처

파트	파일
카드 마크업	apps/management-dashboard/src/views/dashboard.html (상세 상태 카드 · 전월 대비 비교 카드)
톤·색상 로직	apps/management-dashboard/src/app.ts (get cmpCards)
색상·타이포 토큰	packages/static/styles/design-system.css

카드는 공유 컴포넌트/클래스가 아니라 인라인 Tailwind 유틸 + DS 토큰으로 작성됩니다(management-dashboard에는 .admin-app 글로벌 CSS가 없음). 같은 룩을 다른 앱에서 재현할 때는 아래 스펙·토큰을 그대로 사용하세요.

핵심 스펙

카드 컨테이너

• bg-white border border-line-normal rounded-xl p-4 overflow-hidden
• 상태에 따라 인라인 :style로 상단 보더 + 틴트 덮어쓰기:
  • 좋음: border-top:2px solid var(--color-green-500) + linear-gradient(180deg, var(--color-green-50) 0%, var(--color-bg-normal) 60%)
  • 나쁨: border-top:2px solid var(--color-red-500) + linear-gradient(180deg, var(--color-red-50) 0%, var(--color-bg-normal) 60%)
  • 중립/미지정: border-top:2px solid var(--color-neutral-300) (틴트 없음)
• 상호작용 카드(상세)는 transition cursor-pointer hover:-translate-y-px 추가.
• 카드별 독립 색상: 톤은 카드마다 자기 지표 상태로 결정됩니다. 청구금액은 "등록 여부(정상/미지정)"만 보므로, 인건비·차액이 적자여도 청구금액 카드는 초록(정상)으로 유지됩니다.

그리드

• grid grid-cols-2 lg:grid-cols-4 gap-3(상세) / gap-[14px](비교) — 모바일 2열, 데스크톱 4열.

헤더 (라벨 + 배지)

• flex items-center justify-between gap-1.5 mb-1
• 라벨: text-b5 text-label-alternative font-semibold (13px)
• 배지(상태): 솔리드 풀컬러 + 흰 텍스트, text-b6 font-semibold px-2 py-0.5 rounded-full whitespace-nowrap
  • 좋음 bg-green-600 · 나쁨 bg-red-500 · 중립 bg-neutral-400 · 기준 없음 bg-neutral-100 / text-neutral-500
• 칩(증감, 비교 카드): 배지 + 방향 아이콘(↑증가 / ↓감소 / –유지), inline-flex items-center gap-[3px] font-bold

큰 값 (Hero)

• text-h3 font-extrabold leading-[1.1] tabular-nums (24px) · my-1
• 값 색은 상태와 연동: 좋음 text-status-success · 나쁨 text-status-error · 중립 text-label-normal · 빈값 text-label-disable(—)
• 금액은 천 단위 쉼표 + 만/억 단위(5,235만), 차액 양수는 + 접두.

보조 텍스트

• text-b6 leading-[1.5] tabular-nums (12px)
• 상세: 부가 정보(인센티브 1,096만 · 62건) 또는 빈 상태 안내(편집 버튼으로 등록해요, ~해요체).
• 비교: 기준 문구(2026년 5월 8,887만 대비, text-label-assistive) + 증감(-687만 (-7.7%), 값과 같은 상태색).

클래스 & 룩

파트	유틸/스타일	값
카드	bg-white border border-line-normal rounded-xl p-4	radius 12px · padding 16px · 외곽선 --color-line-normal
상단 보더	인라인 border-top:2px solid …	green-500 / red-500 / neutral-300
틴트	인라인 linear-gradient(180deg, …-50 0%, bg-normal 60%)	green-50 / red-50 (중립은 없음)
라벨	text-b5 font-semibold text-label-alternative	13px
배지	text-b6 font-semibold rounded-full px-2 py-0.5	12px · 솔리드 green-600/red-500/neutral-400
값	text-h3 font-extrabold leading-[1.1] tabular-nums	24px · 상태색 연동
보조	text-b6 leading-[1.5] tabular-nums	12px

사용된 토큰

토큰	용도
--color-green-500 / --color-green-50 / --color-green-600	좋음 상태 보더·틴트·배지
--color-red-500 / --color-red-50	나쁨 상태 보더·틴트·배지
--color-neutral-300 / --color-neutral-400 / --color-neutral-100	중립·미지정 보더·배지
--color-status-success / --color-status-error	값(Hero) 상태색
--color-bg-normal	틴트 그라데이션 하단(배경으로 페이드)
--color-line-normal	카드 외곽선
--color-label-alternative / --color-label-assistive / --color-label-disable	라벨·보조·빈값 텍스트
--text-h3 (24px) / --text-b5 (13px) / --text-b6 (12px)	값 / 라벨 / 배지·보조

콘텐츠·라이팅 (UI/UX 정책 연계)

카드 안 텍스트의 라이팅·용어·숫자 표기는 서비스 공통 UI/UX 정책을 따릅니다.

• 숫자 표기: 금액·인원은 천 단위 쉼표 + 단위(5,235만·+15명). 증감률은 소수점 1자리(-7.7%).
• 빈 상태: 편집 버튼으로 등록해요처럼 ~해요체 + 마침표. 짧은 라벨(미지정·기준 없음)은 작은 문구.
• 상태 배지 용어: 정상·초과·흑자·적자·유지·증가·감소 등 도메인 용어 통일.

검토 필요 사항

• 🟡 공유 컴포넌트 미존재 — 카드가 인라인 유틸로만 존재. 다른 앱(management 외)에서 재사용 시 공유 클래스/컴포넌트화 검토.
• 🟡 색 의존 상태 전달 — 좋음/나쁨을 색으로 구분하므로 배지 텍스트(정상·초과)를 항상 동반해 색각 접근성 보강(현재 동반됨, 유지 필요).

사용처

• management-dashboard — 선택 월 상세(청구금액·인건비·차액·인력 충원도), 전월 대비 비교 카드.

변경 이력

날짜	내용
2026-06-22	Metric card 패턴 페이지 신규 작성 + 라이브 미리보기(<DemoMetricCard>)