빈 상태 Empty state

<div class="empty">
  <div class="icon">📭</div>
  <h3>아직 할 일이 없어요</h3>
  <p>첫 할 일을 추가하고 하루를 시작해보세요.</p>
  <button>+ 할 일 추가</button>
</div>
<style>
.empty{height:calc(100vh - 32px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--border);border-radius:16px}
.icon{font-size:40px}
h3{margin:8px 0 4px}
p{margin:0 0 14px;color:var(--muted)}
button{font:inherit;border:0;background:var(--accent);color:var(--accent-fg);padding:9px 16px;border-radius:10px}
</style>

언제 쓰나

첫 사용, 검색 결과 0건, 필터 결과 없음, 휴지통 비어 있음 등. 다음에 할 행동을 함께 안내하는 게 핵심.

비슷한 것과 차이

• 스켈레톤: 데이터를 불러오는 중. 빈 상태는 불러왔는데 비어 있음
• 둘을 혼동하면 “로딩 중인데 비어 보이는” 버그가 생기니 요청 시 구분해서 적기