EmptyState

원본: projects/skill-lens/design/components/EmptyState/README.md

상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗

빈 상태: 다음 행동 하나만

견본만 새 창으로

비어 있는 목록의 첫 화면입니다. 왜 비었는지 한 줄과 다음 행동 하나.

쓰는 곳

아직 자료가 없는 목록과 표.

구성(화면이 넘겨줄 것)

제목("아직 ~가 없어요"), 설명, 주 행동, (선택) 보조 링크.

규칙

• 그림은 StateGlyph 하나.
• 주 버튼은 하나, 보조 경로는 링크.
• 불러오기 실패는 EmptyState가 아니라 오류 문구 + 다시 시도.

접근성

• 그림은 장식(aria-hidden), 뜻은 문장으로.

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Feedback" height=260 subtitle="빈 상태: 다음 행동 하나만" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}</style>
<div class="sl sl-empty" style="max-width:360px">
<div class="sl-empty__lens" aria-hidden="true"><i></i><i></i></div>
<div class="sl-empty__title">아직 올린 명단이 없어요</div>
<div class="sl-empty__desc">엑셀이나 CSV를 올리면 직무를 자동으로 연결해 드려요. 양식이 없어도 괜찮아요.</div>
<button class="sl-btn sl-btn--primary">업로드</button>
<button class="sl-btn sl-btn--link">양식 다운로드</button>
</div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.