Empty

데이터가 없거나 검색 결과가 없을 때 빈 상태를 안내하는 Next.js Client Component입니다. 기본 아이콘·설명·액션 버튼 조합을 지원하며 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`	ReactNode	—	설명 콘텐츠. children이 있으면 children 우선
`size`	'sm' \| 'md' \| 'lg'	md	empty_sm · empty_lg
`simple`	boolean	false	아이콘 숨김 (empty_simple)
`block`	boolean	false	가운데 블록 정렬 (empty_block)
`image`	ReactNode	—	커스텀 이미지·아이콘 (empty_image)
`footer`	ReactNode	—	하단 액션 영역 (empty_footer)
`className`	string	—	empty 루트에 추가 클래스

API · Children

Children	설명
`image`	empty_image에 렌더링하는 일러스트·아이콘 React 노드
`children`	description 대신 표시하는 React children
`footer`	empty_footer에 렌더링하는 액션 버튼·링크 React 노드

클래스 · 속성

React 컴포넌트가 렌더하는 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	설명 타이포