bowlingManager/docs/ui_styling_plan.md

목적

• Flutter 앱에서 배지/다이얼로그/데이터테이블 등 핵심 UI 컴포넌트의 일관된 스타일 가이드를 수립한다.
• Flutter Material 3 디자인을 기본으로, 앱의 브랜드 톤에 맞게 경량 튜닝한다.

공통 디자인 원칙

• 그림자/여백: Card, Dialog, Menu에 적절한 elevation(14)과 816px 패딩 적용
• 컬러 시스템: Primary(Blue 600/700), Success(Green 600), Warning(Amber 600), Danger(Red 600)
• 라운딩: 기본 8px, Badge(12px), 버튼 Pill 옵션은 상황별 적용
• 접근성: 대비비(AA) 확보, 의미색 + 아이콘 병행

배지(Badge)

• 형태: Chip + 아이콘 + 텍스트
• 높이: 24~28
• 색상 매핑 예시
  • 회원유형: {정회원=Blue 100, 준회원=Indigo 100, 게스트=Grey 200}
  • 참가상태: {등록됨=Grey 200, 확인됨=Green 100, 취소됨=Red 100, 참석함=Blue 100}
  • 결제상태: {미결제=Red 100, 결제완료=Green 100}
• 아이콘 매핑 예시
  • 정회원=person, 준회원=person_outline, 게스트=person_add_alt
  • 등록됨=how_to_reg, 확인됨=check_circle, 취소됨=cancel, 참석함=event_available
  • 미결제=cancel, 결제완료=check_circle

다이얼로그(Dialog)

• AppBar 없는 AlertDialog/BottomSheet 권장
• 타이틀은 1820, 본문은 1416
• 버튼 영역 Right-aligned, 기본/파괴적 버튼 구분
• 하단 액션: TextButton(취소)/ElevatedButton(확인)

데이터 테이블(DataTable)

• 밀도(dense) 모드: 행 높이 44~48
• 정렬 화살표, 고정 폭 컬럼 최소화, 긴 텍스트 ellipsis + Tooltip
• 헤더 강조(반투명 배경), zebra striping(선택)

적용 우선순위

1. Badge 컴포넌트 공통화: _buildBadge(text, color, icon) 유지 + 색상/아이콘 매핑 상수화
2. Dialog 일관화: 확인/취소 액션 정렬, 파괴적 액션 색상 구분
3. 리스트 아이템 overflow 방지: Row → Wrap/Flexible 전환 규칙 정립
4. 표형 데이터: PaginatedDataTable/DataTable2 검토 및 공통 위젯 래퍼 도입

구현 체크리스트

• _buildBadge 색상/아이콘 매핑 상수 분리(lib/theme/badges.dart)
• 다이얼로그 액션 빌더 유틸(lib/widgets/dialog_actions.dart)
• 리스트 아이템 텍스트/뱃지 Wrap 적용 가이드(docs/guides/list_wrap_rules.md)
• 데이터 테이블 공용 래퍼(lib/widgets/data_table_wrappers.dart)
• 샘플 스크린/스토리북(lib/screens/dev/ui_preview_screen.dart)

참고

• Material 3 디자인 가이드
• (선택) 타 UI 라이브러리에서 유용한 패턴이 있을 경우 제한적으로 참고