1.5 KiB
1.5 KiB
목표
- 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
체크리스트
- 배지 스타일 클래스 설계 및 적용 시작(
BadgeStyles) - 다이얼로그 액션 유틸 설계(
DialogActions) - 데이터 테이블 래퍼 설계
- 프리뷰 스크린/스토리북 추가
다음 단계
- DialogActions 유틸 구현 및 2개 화면에 시범 적용
- 데이터 테이블 래퍼 설계 초안 작성 및 샘플 테이블 구현
- UI Preview 스크린에 샘플 컴포넌트 카탈로그 구성