Empty State (빈 상태)

4가지 케이스

• First-time: 신규 사용자가 처음 들어왔을 때 보여줘요. 가이드 카드와 첫 액션 CTA로 구성합니다.
• No-results: 검색이나 필터 결과가 0건일 때 띄웁니다. 검색어 변경이나 필터 초기화를 제안해요.
• No-permission: 권한이 없을 때 보여줍니다. 권한 요청이나 다른 화면 이동을 제안해요.
• Error-recovery: 데이터 로드에 실패했을 때 띄워요. '다시 시도' 버튼과 지원 채널 링크를 함께 둡니다.

재사용 컴포넌트 골격

type EmptyStateProps = {
  icon: LucideIcon
  title: string
  description?: string
  action?: React.ReactNode
}

export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
  return (
    <div role="status" aria-live="polite" className="flex flex-col items-center gap-3 py-16 text-center">
      <Icon className="h-14 w-14 text-muted-foreground/60" />
      <p className="text-base font-semibold">{title}</p>
      {description && <p className="text-sm text-muted-foreground">{description}</p>}
      {action && <div className="mt-2">{action}</div>}
    </div>
  )
}