Empty

데이터가 없거나 검색 결과가 없을 때 빈 상태를 안내하는 Empty 컴포넌트입니다. 기본 아이콘·설명·액션 버튼 조합을 지원하며 role="status"로 접근성을 보장합니다.

기본

empty_image · empty_desc로 아이콘과 설명을 표시합니다.

데이터가 없습니다

empty_footer에 버튼·링크를 배치해 다음 행동을 유도합니다.

등록된 프로젝트가 없습니다. 새 프로젝트를 만들어 시작해 보세요.

커스텀 이미지

empty_image에 SVG·img를 자유롭게 넣을 수 있습니다.

검색 결과가 없습니다. 다른 키워드로 다시 검색해 보세요.

크기

empty_sm · empty(기본) · empty_lg 세 가지 스케일을 지원합니다.

Small

Medium (기본)

Large

설명만

empty_simple은 아이콘 없이 짧은 안내만 표시합니다. 테이블·목록 셀 등 좁은 영역에 적합합니다.

일정 없음

블록 · 컨테이너

empty_block은 카드·테이블 등 부모 너비 안에서 가운데 정렬합니다.

알림 목록

새 알림이 없습니다

이름	상태	날짜
표시할 항목이 없습니다

마크업

빈 상태 영역에 role="status"를 지정하고, 장식용 아이콘에는 aria-hidden="true"를 사용합니다.

<!-- 기본 -->
<div class="empty" role="status">
  <div class="empty_image" aria-hidden="true">
    <!-- SVG 또는 img -->
  </div>
  <p class="empty_desc">데이터가 없습니다</p>
</div>

<!-- 액션 버튼 -->
<div class="empty" role="status">
  <div class="empty_image" aria-hidden="true">…</div>
  <p class="empty_desc">등록된 프로젝트가 없습니다.</p>
  <div class="empty_footer">
    <button type="button"
      class="btn btn_filled color_primary btn_sm">
      <span class="btn_label">프로젝트 만들기</span>
    </button>
  </div>
</div>

<!-- 테이블·목록 셀 — 아이콘 생략 -->
<div class="empty empty_simple empty_sm empty_block" role="status">
  <p class="empty_desc">항목 없음</p>
</div>

API · Props

Prop	타입	기본값	설명
`description`	string	—	설명 텍스트. description 슬롯으로 대체
`size`	'sm' \| 'md' \| 'lg'	md	empty_sm · empty_lg
`simple`	boolean	false	아이콘 숨김 (empty_simple)
`block`	boolean	false	가운데 블록 정렬 (empty_block)

API · Slots

슬롯	설명
`image`	일러스트·아이콘 (empty_image)
`description`	설명 (description prop 대체)
`footer`	액션 버튼·링크 (empty_footer)

클래스 · 속성

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`empty · empty_image · empty_desc · empty_footer`	루트·이미지·설명·푸터
`empty_sm · empty_lg · empty_simple · empty_block`	크기·변형
`role="status"`	빈 상태 시맨틱

디자인 토큰

토큰	기본값	설명
`--empty-gap · --empty-padding-y · --empty-padding-x`	—	간격·패딩
`--empty-image-size · --empty-image-size-sm · --empty-image-size-lg`	4rem · 3rem · 5rem	아이콘 크기
`--empty-desc-size · --empty-desc-max-width`	var(--text-size-sm) · 20rem	설명 타이포