배너

정의

배너는 본문 맨 위 또는 카드 안에서 1.5px 테두리 + 연한 배경으로 상태를 알리는 띠입니다. 지금 진행 중인 사건(경보), 기록된 결과(부적합·반려 사유), 조건(서명 미등록), 시스템 안내(점검 예정)에 씁니다.

언제 쓰고 언제 쓰지 않나

• 사용자가 화면에 있는 동안 계속 알아야 할 것. 결과 알림은 토스트.
• 한 화면에 배너는 2개까지. 더 많으면 목록으로 만든다.
• 배너 안에 입력·복수 버튼을 넣지 않는다. 조치 버튼 하나(sm)만.

해부도

1. 컨테이너라운드 12 · 패딩 12/16 · 테두리 1.5 톤 DEFAULT · 배경 container
2. 제목 (선택) 700사건 이름: 대상 + 무슨 일
3. 본문 13px사실 → 시각 → 조치. on-container 색
4. 조치 버튼 (선택)sm 하나. 경보는 danger-solid, 안내는 outline

변형

<div class="fna-banner fna-banner--alarm"><div><b>냉장 1 온도 이탈</b><br>기준보다 2.3도 높습니다. 문 닫힘과 성에를 확인하세요.</div><button class="fna-btn fna-btn--sm fna-btn--danger-solid">확인 및 조치</button></div>
  <div class="fna-banner fna-banner--nonconform"><div><b>반려됨</b> · 측정 기록 누락(미수신 구간 확인) — 이품질, 09-29 18:40</div><button class="fna-btn fna-btn--sm fna-btn--outline">수정</button></div>
  <div class="fna-banner fna-banner--caution"><div><b>서명 미등록</b> · 결재에는 등록된 서명이 필요합니다.</div><button class="fna-btn fna-btn--sm fna-btn--outline">서명 등록</button></div>
  <div class="fna-banner fna-banner--ok"><div><b>오늘 점검 완료</b> · 42건 모두 적합, 승인 완료</div></div>
  <div class="fna-banner fna-banner--info" style="margin:0"><div><b>심사관 열람 모드</b> · 읽기 전용입니다. 기록을 수정할 수 없습니다.</div></div>

상태

배너는 정적입니다. 조치 버튼은 버튼 상태를 따릅니다. 사건이 끝나면(경보 해제) 배너는 사라지고 그 자리에 ok 배너가 1회 표시되거나 목록에서 빠집니다. 닫기(✕)는 안내(info)에만 허용하며 닫힘은 세션 동안 기억합니다.

치수

Do · Don't

접근성

• 경보·부적합 배너는 role="alert"(등장 시 즉시 낭독), 주의·안내는 role="status".
• 테두리 톤 DEFAULT(3:1 이상) + 배경 container + 글자 on-container(4.5:1 이상). 색 외에 제목 단어(이탈·반려·미등록)가 뜻을 전달.
• 조치 버튼은 44px 히트 영역(sm 32 이지만 세로 패딩으로 확보) — 폰에서는 md 크기로.

문구

제목 = 대상 + 사건(냉장 1 온도 이탈 · 서명 미등록 · 반려됨). 본문 첫 문장은 수치가 있는 사실("기준보다 2.3도 높습니다"), 둘째 문장은 조치("문 닫힘과 성에를 확인하세요"). 버튼은 조치 동사(확인 및 조치 · 서명 등록 · 수정).

코드

<div class="fna-banner fna-banner--alarm" role="alert">
  <div><b>냉장 1 온도 이탈</b><br>기준보다 2.3도 높습니다. 12:40 부터</div>
  <button class="fna-btn fna-btn--sm fna-btn--danger-solid">확인 및 조치</button>
</div>
<!-- 톤: --alarm --nonconform --caution --ok --info -->
/* RN 시니어 */ <Notice tone="danger" icon="alert-circle" text="기준보다 2.3도 높습니다."/>

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-bannerComponents · FNA 디자인 시스템 v1.0