★★★★★
#UI·디자인 · claude-code
Error State UI — 네트워크 끊김 등 에러 처리
API/Firestore 호출 실패 시 에러 화면.
#error-handling#retry
변수 1개 — 여기 채우면 아래 프롬프트에 바로 들어가요
API/Firestore 호출 실패 시 에러 화면.
구현:
```dart
class ErrorStateWidget extends StatelessWidget {
final String message;
final VoidCallback onRetry;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.error_outline, size: 80, color: Colors.red[300]),
SizedBox(height: 16),
Text('오류 발생', style: Theme.of(context).textTheme.titleLarge),
SizedBox(height: 8),
Text(message, textAlign: TextAlign.center),
SizedBox(height: 24),
ElevatedButton.icon(
onPressed: onRetry,
icon: Icon(Icons.refresh),
label: Text('다시 시도'),
),
],
),
);
}
}
```
FutureBuilder:
```dart
FutureBuilder(
future: _fetchPrayers(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return ErrorStateWidget(
message: '인터넷 연결 확인해주세요',
onRetry: () => setState(() {
_prayersFuture = _fetchPrayers();
}),
);
}
// ...
},
)
```
이 에러 처리를 {{ERROR_TYPE}} 시나리오에 적용할까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.