lunchpick/doc/ux_calendar_sync_plan.md

캘린더·통계 UX 개선 작업 계획

목적

• 캘린더/통계 화면에서 월 동기화 불일치를 제거하고 과거·현재 데이터를 온전히 노출.
• 기록 가독성(마커 색/범례/헤더)과 액션 동선(상세/수정/CTA 안내)을 개선해 사용자 혼란을 최소화.
• 추천 화면의 오류/비활성 안내를 명확히 해 추천 흐름 이탈을 줄임.

범위

• 캘린더/통계 UI·상태 동기화: lib/presentation/pages/calendar/calendar_screen.dart, lib/presentation/pages/calendar/widgets/visit_statistics.dart
• 추천 화면 오류/CTA 상태 안내: lib/presentation/pages/random_selection/random_selection_screen.dart
• 마커/범례 시각 일관성: 동일 파일 내 스타일 및 범례 영역
• 기록 액션 라우팅: 방문/추천 카드 탭 액션 연결

작업 항목

• 달력 범위 동적 설정
  • TableCalendar.firstDay/lastDay를 데이터 최소일~현재+1년 등 동적 값으로 계산해 2024·과거 기록도 조회 가능하게 조정.
• 월 이동 시 통계 동기화
  • TableCalendar.onPageChanged(또는 onHeaderTapped)로 _focusedDay 업데이트 후 VisitStatistics에 전달하는 월을 갱신.
  • 필요 시 월 상태를 Provider/State로 분리해 탭 간 단일 소스로 관리.
• 월 선택 드롭다운/빠른 이동
  • 통계 카드 헤더에 월 선택 UI(드롭다운/피커) 추가해 과거 월로 점프 가능하게 구성.
• 마커·범례 색상 일치 및 대비 강화
  • 방문/추천 색 팔레트 정의(라이트/다크 대응) 후 markerBuilder와 범례 색을 일치.
  • 추천/방문 아이콘·툴팁 추가로 이벤트 구분성 강화.
• 일별 기록 헤더·액션 정교화
  • 헤더 문구/카운트에서 방문·추천을 분리 표기(예: 기록 3건 · 방문2/추천1).
  • 방문/추천 카드 onTap에 상세/수정/확인 라우팅 연결.
• 추천 화면 오류/비활성 안내
  • 날씨 로딩 실패 시 실제 상태(재시도/권한 확인) 메시지로 교체, 임의 날씨 표시 제거.
  • 추천 버튼 비활성 사유를 UI로 노출(위치 준비 중/맛집 0개/거리 내 없음 등)하고 해결 가이드 제시.

검증

• 라이트/다크 모드에서 마커·범례·CTA 대비 확인.
• 과거 월/현재 월/미래 월 이동 시 캘린더·통계 동기화 확인.
• 데이터 없음·권한 거부·위치 실패·날씨 실패 상태별 UI 확인.
• iOS/Android에서 추천 CTA 비활성/활성 전환 및 스낵바/다이얼로그 메시지 확인.

후속 조치

• QA 시나리오 통과 후 flutter analyze, 필요 시 관련 flutter test 실행.
• 변경 사항에 맞춰 스크린샷/문서(README 혹은 디자인 가이드) 업데이트 여부 검토.