이벤트 가져오기 위젯 테스트 추가 및 테스트 훅 도입
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
# Dark Mode Audit Checklist (Mobile)
|
||||
|
||||
본 문서는 Flutter 앱의 다크 모드 대비(가독성/명암비/아이콘 가시성)를 점검하기 위한 실기 체크리스트입니다. 점검 결과에 따라 팔레트 미세 보정 또는 위젯 레벨 스타일 수정을 권장합니다.
|
||||
|
||||
## 점검 범위
|
||||
- 화면: `events_screen.dart`, `event_details_screen.dart`, `event_form_screen.dart`, `members_screen.dart`, `member_statistics_screen.dart`, `dashboard_screen.dart`, `club_settings_screen.dart`
|
||||
- 공통 컴포넌트: `theme/badges.dart`, `widgets/dialog_actions.dart`, Chip/Button/Card/Input/SnackBar/Tooltip
|
||||
|
||||
## 공통 체크 항목
|
||||
- [ ] 배경/전경 색상 대비가 충분한가 (텍스트/아이콘 최소 4.5:1 권장)
|
||||
- [ ] 텍스트가 배경색과 혼동되지 않는가 (세컨더리/보조 텍스트 포함)
|
||||
- [ ] 아이콘 색이 배경과 충분히 구분되는가 (특히 회색 계열)
|
||||
- [ ] 링크/버튼/상태 배지의 의미가 색만으로 전달되지 않는가 (아이콘/레이블 병행)
|
||||
- [ ] elevation/shadow가 다크 모드에서 과도하거나 부족하지 않은가
|
||||
- [ ] 오버레이(다이얼로그/바텀시트/팝업) 배경과 콘텐츠 대비가 적절한가
|
||||
- [ ] focus/hover/pressed 상태의 컬러가 다크 모드에서도 인지 가능한가
|
||||
|
||||
## 위젯별 체크 항목
|
||||
- Buttons (Elevated/Outlined/Text)
|
||||
- [ ] foreground/background/disabled 상태 대비
|
||||
- [ ] OutlinedButton의 border 대비 (다크 테마 기준)
|
||||
- Chips/FilterChip
|
||||
- [ ] 선택/비선택 상태의 labelColor/backgroundColor 대비
|
||||
- Cards/ListTiles
|
||||
- [ ] 카드 배경/경계/섀도우 과도 여부
|
||||
- [ ] 타이틀/서브타이틀 텍스트 대비 (`overflow: TextOverflow.ellipsis` 유지)
|
||||
- Inputs/TextFields
|
||||
- [ ] label/hint/helper/error 컬러 대비 및 가독성
|
||||
- [ ] prefix/suffix 아이콘 대비
|
||||
- SnackBars/Tooltips
|
||||
- [ ] 텍스트/아이콘 대비, action 버튼 가독성
|
||||
- Badges (`theme/badges.dart`)
|
||||
- [ ] 자동 전경색 선택 로직이 다크 모드에서도 적절한가
|
||||
- [ ] 상태(활성/대기/취소/완료, 회원유형/참가상태/결제상태) 배지 대비 검증
|
||||
|
||||
## 화면별 포인트
|
||||
- EventsScreen
|
||||
- [ ] 카드 타이틀/위치 ellipsis 유지 + 대비 확인
|
||||
- [ ] 상태 배지 대비/간격/줄바꿈(Wrap) 확인
|
||||
- EventDetailsScreen
|
||||
- [ ] 기본정보 섹션 텍스트/아이콘 대비
|
||||
- [ ] 탭/탭바/콘텐츠 배경 대비
|
||||
- EventFormScreen
|
||||
- [ ] 필수/보조 텍스트 컬러 대비 (실시간 유효성 스타일 포함)
|
||||
- [ ] 공개 접근 섹션(공개 URL/비밀번호) 라벨/아이콘 대비
|
||||
- Members/Metrics/Dashboard/Settings
|
||||
- [ ] 배지/보조 텍스트/아이콘 전반 대비 확인
|
||||
|
||||
## 수행 절차(권장)
|
||||
1) iOS 시뮬레이터에서 라이트/다크 전환 후 각 화면을 순회 점검
|
||||
2) 스크린샷 취득 및 문제 구간 표시
|
||||
3) 빠른 보정은 테마의 `colorScheme` 튜닝 또는 `BadgeStyles` 전경 색상 보정으로 처리
|
||||
4) 복잡한 케이스는 위젯 로컬 스타일 적용 (ex. `Theme.of(context).brightness` 분기)
|
||||
|
||||
## 보정 가이드
|
||||
- Material 3 ColorScheme 다크 프리셋을 기본으로 사용
|
||||
- 배지 전경색: 배경 대비를 계산해 흰/검정 중 대비가 큰 색을 선택 (`theme/badges.dart` 참고)
|
||||
- 회색 글자: 다크 모드에서는 명도 차이를 더 키워 가독성 확보
|
||||
|
||||
## 결과 기록 템플릿
|
||||
```
|
||||
화면: events_screen.dart
|
||||
- 카드 타이틀/서브: OK
|
||||
- 상태 배지: 대기 상태 배지 전경 대비 부족 → BadgeStyles.eventStatus 대기 색상 전경색 보정 필요
|
||||
- 파일 업로드 다이얼로그: OK
|
||||
```
|
||||
|
||||
## 현장 점검 기록 (2025-09-10T07:43:19+09:00 시작)
|
||||
- 대상 화면
|
||||
- [ ] `lib/screens/club/events_screen.dart`
|
||||
- [ ] `lib/screens/club/event_details_screen.dart`
|
||||
- [ ] `lib/screens/club/event_form_screen.dart`
|
||||
|
||||
- 초기 관찰(1차)
|
||||
- events_screen.dart
|
||||
- 카드 타이틀/서브: 대비 양호(OK)
|
||||
- 상태 배지: 일부 회색 배경의 전경 대비 약함 → BadgeStyles.eventStatus 전경색 계산 재검토 필요
|
||||
- 카드 쉐도우: 다크에서 살짝 강함 → elevation 단계 -1 검토
|
||||
- event_details_screen.dart
|
||||
- 섹션 타이틀/아이콘: 대비 양호(OK)
|
||||
- 탭바/선택 배경: 대비 양호(OK)
|
||||
- 보조 텍스트(secondary): 명도 부족 구간 존재 → Typography.secondary 톤 상향 검토
|
||||
- event_form_screen.dart
|
||||
- TextField label/hint: 대비 양호(OK)
|
||||
- prefix/suffix 아이콘: 일부 아이콘 대비 약함 → IconTheme 다크 톤 상향 검토
|
||||
- OutlinedButton border: 배경과의 대비 약함 → 테마의 outline 색상 톤 업 필요
|
||||
|
||||
개선 후보(누적)
|
||||
- [ ] `lib/theme/badges.dart`: 배지 전경 대비 계산 로직 검토(다크 모드에서 회색계 배경 대비 강화)
|
||||
- [ ] `SnackBar` action 텍스트 대비 확인 및 필요 시 컬러 보정
|
||||
- [ ] 보조 텍스트(secondary) 명도 상향 검토
|
||||
- [ ] OutlinedButton 다크 테마 border 색상 톤 업
|
||||
- [ ] IconTheme(다크) 기본 톤 상향으로 prefix/suffix 대비 강화
|
||||
- [ ] 카드 elevation 다크 모드 단계 -1 검토
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
# 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 스크린에 샘플 컴포넌트 카탈로그 구성
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
# Flutter UI 스타일링 초안 (Material 3 기반)
|
||||
---
|
||||
|
||||
## 목적
|
||||
- Flutter 앱에서 배지/다이얼로그/데이터테이블 등 핵심 UI 컴포넌트의 일관된 스타일 가이드를 수립한다.
|
||||
- Flutter Material 3 디자인을 기본으로, 앱의 브랜드 톤에 맞게 경량 튜닝한다.
|
||||
|
||||
## 공통 디자인 원칙
|
||||
- 그림자/여백: Card, Dialog, Menu에 적절한 elevation(1~4)과 8~16px 패딩 적용
|
||||
- 컬러 시스템: 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 권장
|
||||
- 타이틀은 18~20, 본문은 14~16
|
||||
- 버튼 영역 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 라이브러리에서 유용한 패턴이 있을 경우 제한적으로 참고
|
||||
Reference in New Issue
Block a user