03 · Components · 피드백

빈 상태Empty State

데이터가 없을 때 사용자에게 다음 행동을 제안. 흔한 실수는 '데이터 없음'만 보이는 것. 왜 없고 무엇을 하면 되는지 알려주세요.

StableWCAG AA

기본

tsx
<EmptyState
  icon={<Inbox size={32} strokeWidth={1.5} />}
  title="아직 저장된 항목이 없어요"
  description="관심 있는 설교를 북마크하면 이곳에서 모아볼 수 있습니다."
  action={<Button size="sm">설교 탐색</Button>}
/>
미리보기

아직 저장된 항목이 없어요

관심 있는 설교를 북마크하면 이곳에서 모아볼 수 있습니다.

검색어를 다시 확인하거나 필터를 초기화할 수 있도록 안내합니다. 단순히 "결과 없음"보다 구체적인 제안이 효과적입니다.

tsx
<EmptyState
  icon={<Search size={28} />}
  title="'요한복음'에 대한 결과가 없습니다"
  description="철자를 확인하거나 필터를 제거해보세요."
  action={<Button variant="secondary" size="sm">필터 초기화</Button>}
/>
미리보기

'요한복음'에 대한 결과가 없습니다

철자를 확인하거나 적용된 필터를 제거해보세요.

Need Help

도움이 필요하신가요?

주님의교회 PCL 디자인 시스템을 적용하시다가 막히는 부분이 있다면, 다음 경로로 직접 문의하실 수 있습니다.