36 lines
1.5 KiB
Markdown
36 lines
1.5 KiB
Markdown
---
|
|
# 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 스크린에 샘플 컴포넌트 카탈로그 구성
|