빈 상태
데이터가 없을 때 화면이 비어 보이지 않게, 왜 비었는지와 다음에 할 일을 알려주는 자리. 그림은 쌓인 막대 하나뿐이고, 버튼은 하나입니다.
아직 작성한 일지가 없습니다
오늘 점검을 마치면 여기서 결재를 올릴 수 있습니다.
제안 컴포넌트: .fna-empty 는 아직 dist/components.css 에 없습니다. 이 페이지의 CSS 는 문서 사이트의 proposed.css 에 있으며, 채택 시 components.css 로 옮깁니다. 표·차트의 빈 상태(.fna-table__empty, .fna-chart__empty)와 RN SeniorEmpty 는 이미 존재합니다.
정의
빈 상태는 목록·표·차트·검색 결과에 보여줄 것이 없을 때 그 자리에 나오는 블록입니다. 세 종류가 있습니다: 처음(아직 아무것도 만들지 않음) · 없음(조건에 맞는 것이 없음) · 못 받음(수신·네트워크 문제).
언제 쓰고 언제 쓰지 않나
- 목록이 0건일 때 목록 자리에. 로딩 중에는 쓰지 않는다(이전 렌더 유지 또는 로더).
- 오류는 빈 상태 형태를 쓰되 톤은 다르다(다시 시도 버튼).
- 한 화면에 빈 상태 블록은 하나. 카드 여러 개가 동시에 비면 상위 하나로 합친다.
해부도
아직 작성한 일지가 없습니다
오늘 점검을 마치면 여기서 결재를 올릴 수 있습니다.
- 그림 56×40쌓인 막대(border-strong). 일러스트·이모지 없음
- 제목 15/800무엇이 없는지 한 문장, "없습니다"로 끝
- 설명 13 muted왜 없는지 또는 다음에 생기는 조건. 36자 이내
- 버튼 (선택)다음 행동 하나. "없음" 유형에는 필터 초기화
변형
등록된 서명이 없습니다
결재를 처리하려면 서명이 필요합니다.
미확인 경보가 없습니다
지난 7일 동안 이탈이 없었습니다.
이 기간에 수신된 데이터가 없습니다
마지막 수신 09-28 23:58 · 장비 전원을 확인하세요.
코드
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px">
<div class="fna-empty"><svg class="fna-empty__art" width="56" height="40" viewBox="0 0 56 40" aria-hidden="true"><rect x="24" y="0" width="32" height="8" rx="4"/><rect x="12" y="14" width="32" height="8" rx="4"/><rect x="0" y="28" width="20" height="8" rx="4"/></svg><p class="fna-empty__title">등록된 서명이 없습니다</p><p class="fna-empty__desc">결재를 처리하려면 서명이 필요합니다.</p><button class="fna-btn">서명 등록</button></div>
<div class="fna-empty"><svg class="fna-empty__art" width="56" height="40" viewBox="0 0 56 40" aria-hidden="true"><rect x="24" y="0" width="32" height="8" rx="4"/><rect x="12" y="14" width="32" height="8" rx="4"/><rect x="0" y="28" width="20" height="8" rx="4"/></svg><p class="fna-empty__title">미확인 경보가 없습니다</p><p class="fna-empty__desc">지난 7일 동안 이탈이 없었습니다.</p></div>
<div class="fna-empty"><svg class="fna-empty__art" width="56" height="40" viewBox="0 0 56 40" aria-hidden="true" style="--c:var(--fna-warning)"><rect x="24" y="0" width="32" height="8" rx="4" style="fill:var(--fna-warning)"/><rect x="12" y="14" width="32" height="8" rx="4"/><rect x="0" y="28" width="20" height="8" rx="4"/></svg><p class="fna-empty__title">이 기간에 수신된 데이터가 없습니다</p><p class="fna-empty__desc">마지막 수신 09-28 23:58 · 장비 전원을 확인하세요.</p><button class="fna-btn fna-btn--outline">다시 불러오기</button></div>
</div>"냉장 3"에 해당하는 센서가 없습니다
검색어를 확인하거나 사업장 필터를 넓혀 보세요.
코드
<div class="fna-empty fna-empty--inline"><svg class="fna-empty__art" width="40" height="28" viewBox="0 0 56 40" aria-hidden="true"><rect x="24" y="0" width="32" height="8" rx="4"/><rect x="12" y="14" width="32" height="8" rx="4"/><rect x="0" y="28" width="20" height="8" rx="4"/></svg><div><p class="fna-empty__title" style="font-size:var(--fna-font-size-md)">"냉장 3"에 해당하는 센서가 없습니다</p><p class="fna-empty__desc">검색어를 확인하거나 사업장 필터를 넓혀 보세요.</p></div><button class="fna-btn fna-btn--sm fna-btn--outline" style="margin:0 0 0 auto">필터 초기화</button></div>오늘 점검할 것이 없습니다
내일 아침 8시에 다시 알려드립니다.
상태
빈 상태는 정적입니다. 데이터가 도착하면 즉시 목록으로 교체되며 전환 애니메이션은 없습니다. "못 받음"은 재시도 버튼이 처리 중일 때 로더로 바뀝니다.
치수
| 항목 | 기본 | 인라인 | 시니어 |
|---|---|---|---|
| 패딩 | 32 / 16 | 16 | 40 / 24 |
| 그림 | 56 × 40 | 40 × 28 | 80 × 58 |
| 제목 | 15 / 800 | 13 / 800 | 24 / 800 |
| 설명 | 13 muted · 36자 | 13 | 20 |
| 요소 간격 | 8 | 12 (가로) | 12 |
| 버튼 | md · 위 여백 8 | sm outline | 64 전체폭 |
Do · Don't
아직 작성한 일지가 없습니다
No Data
미확인 경보가 없습니다
경보 없음!
접근성
- 목록 컨테이너 안에
role="status"로 두어 목록이 비었음을 낭독한다. - 그림은
aria-hidden. 정보는 전부 텍스트에. - 버튼은 44px, 하나. 키보드 포커스 순서상 목록 자리에 온다.
문구
| 유형 | 제목 | 설명 | 버튼 |
|---|---|---|---|
| 처음 | 아직 작성한 일지가 없습니다 | 오늘 점검을 마치면 여기서 결재를 올릴 수 있습니다 | 오늘 일지 작성 |
| 없음(필터) | 이 기간에 작성된 일지가 없습니다 | 기간을 넓히거나 필터를 확인하세요 | 필터 초기화 |
| 없음(좋은 소식) | 미확인 경보가 없습니다 | 지난 7일 동안 이탈이 없었습니다 | — |
| 못 받음 | 이 기간에 수신된 데이터가 없습니다 | 마지막 수신 09-28 23:58 · 장비 전원을 확인하세요 | 다시 불러오기 |
| 권한 | 볼 수 있는 사업장이 없습니다 | 관리자에게 사업장 권한을 요청하세요 | — |
코드
<div class="fna-empty" role="status">
<svg class="fna-empty__art" width="56" height="40" viewBox="0 0 56 40" aria-hidden="true">
<rect x="24" y="0" width="32" height="8" rx="4"/><rect x="12" y="14" width="32" height="8" rx="4"/><rect x="0" y="28" width="20" height="8" rx="4"/>
</svg>
<p class="fna-empty__title">아직 작성한 일지가 없습니다</p>
<p class="fna-empty__desc">오늘 점검을 마치면 여기서 결재를 올릴 수 있습니다.</p>
<button class="fna-btn">오늘 일지 작성</button>
</div>
<!-- 기존: <td colspan class="fna-table__empty"> · <div class="fna-chart__empty"> · RN <SeniorEmpty icon text sub/> -->제안 (소스 미반영)마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 제안 — site/src/assets/proposed.css .fna-empty (components.css 미반영) · 기존 .fna-table__empty · .fna-chart__empty · RN SeniorEmptyComponents · FNA 디자인 시스템 v1.0