★★★★★
#UI·디자인 · claude-code
Empty State UI — 빈 리스트 친화적 메시지
리스트가 비어 있을 때 사용자 친화적 메시지 표시.
#empty-state#ux-pattern
변수 1개 — 여기 채우면 아래 프롬프트에 바로 들어가요
리스트가 비어 있을 때 사용자 친화적 메시지 표시.
상황: {{EMPTY_SITUATION}} (예: 검색 결과 없음)
구현:
```dart
class EmptyStateWidget extends StatelessWidget {
final String title;
final String description;
final IconData icon;
final VoidCallback? onActionPressed;
final String? actionLabel;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, size: 80, color: Colors.grey[400]),
SizedBox(height: 16),
Text(title, style: Theme.of(context).textTheme.titleLarge),
SizedBox(height: 8),
Text(description, style: Theme.of(context).textTheme.bodyMedium),
if (actionLabel != null && onActionPressed != null) ...[
SizedBox(height: 24),
ElevatedButton(
onPressed: onActionPressed,
child: Text(actionLabel!),
),
],
],
),
);
}
}
```
사용:
```dart
if (products.isEmpty) {
EmptyStateWidget(
title: '검색 결과 없음',
description: '다른 키워드로 검색해보세요',
icon: Icons.search_off,
);
}
```
{{EMPTY_SITUATION}}에 맞게 customize할까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.