FNA Design System

결재 상태

미작성 → 작성 중 → 검토 대기 → 승인 대기 → 승인 완료, 그리고 반려. 서버 status 값과 라벨·색·순서가 고정된 6단계이며, 진행 단계 표시(flow)와 짝을 이룹니다.

✓제출
✓검토
승인

정의

결재 상태 배지는 일지·리포트가 결재 흐름의 어디에 있는지 보여줍니다. 일반 배지와 달리 앞에 작은 점이 있고(미작성은 빈 원), 6단계 라벨은 화면·표·차트·인쇄에서 모두 같습니다.

6단계

단계서버 값라벨 (대체)톤 · 스타일누가 만든 상태다음 행동
미작성NONE미작성neutral · outline(아직 없음)작성자: 작성
작성 중draft작성 중 (미제출)neutral · solid작성자 임시 저장작성자: 제출 (검토요청)
검토 대기REVIEW_REQUESTED검토 대기warning · solid작성자 제출검토자: 검토 완료 / 반려
승인 대기REVIEWED승인 대기 (검토 완료)review · solid검토자 검토 완료승인자: 최종 승인 / 반려
승인 완료APPROVED승인 완료success · solid승인자없음 — 문서 잠김
반려REJECTED반려error · solid검토자 또는 승인자작성자: 수정 후 다시 제출

해부도 — 진행 단계 (flow)

✓제출
✓검토
승인
  1. 완료 단계success-text 채움 + 체크, 라벨 success-text
  2. 연결선 48 × 2완료 구간 success-text, 미완료 border-strong
  3. 현재 단계primary 테두리 + primary-container 링 3px. 반려는 error 채움

변형

배지 6종
미작성작성 중검토 대기승인 대기승인 완료반려
코드
<div class="fna-row"><span class="fna-approval" data-status="none">미작성</span><span class="fna-approval" data-status="draft">작성 중</span><span class="fna-approval" data-status="review_requested">검토 대기</span><span class="fna-approval" data-status="reviewed">승인 대기</span><span class="fna-approval" data-status="approved">승인 완료</span><span class="fna-approval" data-status="rejected">반려</span></div>
진행 단계 — 검토 대기 · 승인 완료 · 반려
✓제출
검토
승인
✓제출
✓검토
✓승인
✓제출
✕반려
승인
코드
<div style="display:flex;flex-direction:column;gap:8px">
    <div class="fna-flow"><div class="fna-flow__step is-done"><span class="fna-flow__dot">✓</span>제출</div><div class="fna-flow__line is-done"></div><div class="fna-flow__step is-current"><span class="fna-flow__dot"></span>검토</div><div class="fna-flow__line"></div><div class="fna-flow__step"><span class="fna-flow__dot"></span>승인</div></div>
    <div class="fna-flow"><div class="fna-flow__step is-done"><span class="fna-flow__dot">✓</span>제출</div><div class="fna-flow__line is-done"></div><div class="fna-flow__step is-done"><span class="fna-flow__dot">✓</span>검토</div><div class="fna-flow__line is-done"></div><div class="fna-flow__step is-done"><span class="fna-flow__dot">✓</span>승인</div></div>
    <div class="fna-flow"><div class="fna-flow__step is-done"><span class="fna-flow__dot">✓</span>제출</div><div class="fna-flow__line is-done"></div><div class="fna-flow__step is-rejected"><span class="fna-flow__dot">✕</span>반려</div><div class="fna-flow__line"></div><div class="fna-flow__step"><span class="fna-flow__dot"></span>승인</div></div>
  </div>
결재 카드 머리 + 서명 줄

2026-09-29 (화) 일일 리포트

승인 대기
✓제출
✓검토
승인
제출김현장 · 09-29 18:02
검토이품질 · 09-29 18:40
승인—
코드
<div class="fna-card" style="max-width:520px"><div class="fna-card__head"><h3 class="fna-card__title">2026-09-29 (화) 일일 리포트</h3><span class="fna-spacer"></span><span class="fna-approval" data-status="reviewed">승인 대기</span></div><div class="fna-card__body"><div class="fna-flow" style="margin:0 0 12px"><div class="fna-flow__step is-done"><span class="fna-flow__dot">✓</span>제출</div><div class="fna-flow__line is-done"></div><div class="fna-flow__step is-done"><span class="fna-flow__dot">✓</span>검토</div><div class="fna-flow__line"></div><div class="fna-flow__step is-current"><span class="fna-flow__dot"></span>승인</div></div><table style="font-size:13px;margin:0"><tr><td style="color:var(--fna-text-muted)">제출</td><td>김현장 · 09-29 18:02</td></tr><tr><td style="color:var(--fna-text-muted)">검토</td><td>이품질 · 09-29 18:40</td></tr><tr><td style="color:var(--fna-text-muted)">승인</td><td>—</td></tr></table></div><div class="fna-card__foot"><button class="fna-btn fna-btn--danger">반려</button><button class="fna-btn fna-btn--success">최종 승인</button></div></div>

상태

배지 자체에는 상호작용이 없습니다. 반려 배지는 클릭하면 반려 사유가 보이는 툴팁/시트를 열 수 있으며 그때는 버튼으로 마크업합니다. 승인 완료 이후 문서는 잠기고 배지 옆에 자물쇠 아이콘 + "잠김" 텍스트를 둡니다.

치수

항목값
배지pill · .2em .75em · 11/700 · 점 .55em
flow 점22 · 테두리 2
flow 선48 × 2 · 좌우 6
flow 라벨12/700 · 점 아래 4
시니어배지 16/800 · 점 28 · 선 64

차트 순서

도넛·스택에서 조각 순서는 chart.approvalOrder = 반려 → 미작성 → 작성 중 → 검토 대기 → 승인 대기 → 승인 완료 로 고정합니다(이 순서가 인접 쌍 CVD 검증을 통과). 미작성(연회색)은 배경 대비 1.7:1 이라 값 라벨이 필수입니다. 예시는 Data Visualization.

Do · Don't

검토 대기승인 완료
Do 라벨은 6단계 고정 명칭
제출됨완료Pending
Don't 화면마다 다른 말 · 일반 배지로 대체
반려 사유: 측정 기록 누락(미수신 구간 확인)
Do 반려는 error 톤 + 사유가 따라온다
반려
Don't 반려를 주의(warning)로반려는 되돌아온 결과이지 경고가 아니다

접근성

  • 배지는 텍스트. flow 는 <ol aria-label="결재 진행">, 현재 단계에 aria-current="step".
  • 완료 체크·반려 ✕ 는 글자로 들어가 있어 색 없이도 읽힌다.
  • 모든 톤 on-container / container 4.5:1 이상. 미작성 outline 은 text-muted 5.6:1.

문구

상황버튼토스트
작성자 제출제출 (검토요청)리포트를 제출했습니다
검토자 통과검토 완료검토를 완료했습니다
승인자 통과최종 승인리포트를 승인했습니다
반려반려 → (모달) 반려 확정반려했습니다
반려 후 재제출다시 제출리포트를 제출했습니다
서명 없음서명하고 진행결재에는 등록된 서명이 필요합니다

코드

<span class="fna-approval" data-status="review_requested">검토 대기</span>
<!-- data-status: none | draft | review_requested | reviewed | approved | rejected -->
<ol class="fna-flow" aria-label="결재 진행">
  <li class="fna-flow__step is-done"><span class="fna-flow__dot">✓</span>제출</li><li class="fna-flow__line is-done"></li>
  <li class="fna-flow__step is-current" aria-current="step"><span class="fna-flow__dot"></span>검토</li>…
</ol>
/* 차트 */ .fna-approval-approved{--fna-s:var(--fna-chart-approval-approved)}

안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-approval · .fna-flow · tokens.json semantic.approval · chart.approvalOrderComponents · FNA 디자인 시스템 v1.0