빈 상태

목록이나 화면에 보여줄 데이터가 없을 때 그 이유와 다음 행동을 에디토리얼 톤으로 안내하는 자리다. 검색 결과 없음, 첫 글 작성 유도, 권한 없음 같은 상황에서 빈 화면을 그냥 두지 않고 독자의 다음 걸음을 정한다. 점선 테두리와 세리프 제목으로 임시 지면임을 조용히 드러낸다.

활용 방법

첫 데이터 유도

아직 만든 항목이 없을 때 아이콘·제목·설명과 함께 시작 동작을 붙인다. action 에는 대개 primary 버튼을 둔다.

Preview

아직 발행한 글이 없다

첫 에세이를 써서 이번 호의 문을 연다.

tsx

<EmptyState
  icon={<Inbox size={24} />}
  title="아직 발행한 글이 없다"
  description="첫 에세이를 써서 이번 호의 문을 연다."
  action={<Button variant="primary">새 글 쓰기</Button>}
/>

검색 결과 없음

검색이나 필터가 아무것도 걸러내지 못했을 때 조건을 바꾸도록 안내한다.

Preview

검색 결과가 없다

다른 키워드로 다시 찾거나 필터를 지운다.

tsx

<EmptyState
  icon={<SearchX size={24} />}
  title="검색 결과가 없다"
  description="다른 키워드로 다시 찾거나 필터를 지운다."
  action={<Button variant="ghost">필터 지우기</Button>}
/>

간결한 안내

맥락이 이미 충분하면 제목만으로도 충분하다. 설명과 액션은 생략할 수 있다.

Preview

선택한 호에 담긴 글이 없다

tsx

<EmptyState
  icon={<FileText size={24} />}
  title="선택한 호에 담긴 글이 없다"
/>

속성

이름	타입	기본값	설명
title	ReactNode	-	빈 상태의 핵심 문장 (세리프 강조)
description	ReactNode	-	이유나 다음 행동을 풀어 주는 보조 설명
icon	ReactNode	-	제목 위 상징 아이콘
action	ReactNode	-	다음 걸음을 위한 버튼 등
className	string	-	래퍼 클래스