빈 상태
보여줄 데이터가 없을 때. 첫 사용자가 가장 먼저 보는 화면이기도 합니다.
코드
<div class="jt-empty">
<span class="jt-ico-mask jt-ico-lg" style="--jt-ico-url:url(/brand/icons/inventory_2.svg)" aria-hidden="true"></span>
<p class="jt-empty-title">등록된 품목이 없습니다</p>
<p class="jt-empty-desc">품목을 먼저 등록하면 적재 최적화를 계산할 수 있습니다.</p>
<button class="jt-btn">품목 등록</button>
</div>하지 말 것
- ‘데이터 없음’만 두지 마세요. 왜 비어 있는지와 다음에 무엇을 하면 되는지를 함께 적습니다.
- 검색 결과 없음과 아직 등록 안 됨을 같은 문구로 쓰지 마세요. 해야 할 일이 다릅니다.
접근성
- 아이콘은 장식이므로
aria-hidden - 다음 행동 버튼은 하나만 — 여러 개면 무엇을 할지 더 헷갈립니다
앱에서 모양 바꾸기
이 컴포넌트는 별도 노브가 없습니다. 크기·색이 다르게 필요하면 도움말로 요청하세요 — 토큰에 먼저 추가한 뒤 씁니다.