---
# PrimeVue 유사 디자인 가이드 (적용 준비 문서)
---

## 목표
- PrimeVue의 Badge/Tag, Dialog, DataTable, Toolbar, Button 스타일 특징을 분석하여 Flutter 머티리얼 디자인에 이식 가능한 규칙 수립
- 앱 전반의 시각적 일관성 및 사용성 향상

## 핵심 포인트 요약
- 색상 계층: Primary/Success/Warning/Danger + Soft Background 톤 병행
- 아이콘+텍스트 조합, Pill 형태의 배지, 여백 8px 단위 그리드
- 테이블 밀도 조절, 헤더 강조, 정렬/필터 affordance 명확화
- 다이얼로그 버튼 정렬, 파괴적 액션 시각 구분

## Flutter 적용 원칙
- Material 3 스펙을 기본으로, 색상/여백만 PrimeVue 유사 톤으로 튜닝
- 공통 위젯(배지, 다이얼로그 액션, 테이블 래퍼)로 재사용성 확보

## 컴포넌트 매핑
- Badge/Tag → Chip
- Dialog → AlertDialog/BottomSheet
- DataTable → DataTable/PaginatedDataTable(또는 community DataTable2)
- Toolbar → AppBar/SliverAppBar + Actions
- Button → Elevated/Outlined/Text

## 체크리스트
- [x] 배지 스타일 클래스 설계 및 적용 시작(`BadgeStyles`)
- [ ] 다이얼로그 액션 유틸 설계(`DialogActions`)
- [ ] 데이터 테이블 래퍼 설계
- [ ] 프리뷰 스크린/스토리북 추가

## 다음 단계
1) DialogActions 유틸 구현 및 2개 화면에 시범 적용
2) 데이터 테이블 래퍼 설계 초안 작성 및 샘플 테이블 구현
3) UI Preview 스크린에 샘플 컴포넌트 카탈로그 구성