🔀 :: (#134) - 마이페이지 테마 설정 아코디언 적용 및 화면 구조 정리

[aiden30015]

💡 개요

마이페이지 테마 설정 항목을 Figma 디자인대로 인라인 아코디언으로 다시 만들고, 그 김에 664줄까지 늘어난 my_page_screen.dart의 검증 로직과 위젯을 분리했습니다. 프로필 사진 변경 바텀시트의 닫기 아이콘도 디자인 에셋으로 교체했습니다.

#134(Cupertino → Material 전면 통일)는 진행하지 않았습니다. 다이얼로그 디자인(Figma 569-10289)을 실제로 비교해보니 Cupertino도 Material도 아닌 커스텀이었습니다.

항목	디자인	Cupertino	Material
제목/본문 정렬	좌측	중앙 ❌	좌측 ✅
액션 배치	2등분 full-width	2등분 ✅	우측 정렬 ❌
액션 구분선	없음	헤어라인 ❌	없음 ✅
배경	불투명 #1a1a1a	반투명+블러 ❌	불투명 ✅
모서리	12	14	28 ❌

어느 쪽으로 갈아타도 완전히 맞지 않아서, 위젯 교체 대신 호출부가 없던 review_remove_dialog.dart만 정리했습니다. 디자인대로 맞추려면 커스텀 다이얼로그를 새로 만들어야 하고, 그건 별도 이슈가 맞다고 판단했습니다.

🔗 관련 이슈

Closes #134

📃 작업내용

테마 설정 아코디언 (Figma 569-10492, 569-10540)

• 바텀시트로 열던 테마 선택을 인라인 아코디언으로 교체
• 선택 항목은 MainColor 텍스트 + 체크마크, 나머지는 기본색
• checkmark.svg를 Figma 에셋에서 받아 추가 (기존 AppIcons.check는 테두리 있는 체크박스라 글리프가 다름)
• AppThemeOption 라벨을 디자인 문구로 맞추고 노출 순서 displayOrder 추가

검증 로직을 provider로 이동

• 프로필 이미지 업로드/삭제, 비밀번호 재설정 인증메일 발송과 그 검증을 ProfileActionsNotifier로 이동
• 결과는 ({bool ok, String message}) 레코드로 반환, null은 "이미 진행 중"
• DioException → NetworkException 변환도 provider 안으로
• autoDispose.family + Object 식별 키 제거 — 화면 인스턴스가 하나뿐이라 격리할 대상이 없었습니다 (docs/naming-conventions.md의 "상태를 어디에 둘까" 참고)
• 신규 파일이라 viewmodels/가 아닌 providers/*_provider.dart로 배치

화면 분리 (664 → 154줄)

• ProfileSummarySection / SettingsSection / AccountActionsSection / ThemeSettingItem을 widgets/로 분리
• 앞의 둘은 ConsumerWidget으로 전환해 프로바이더를 직접 읽습니다
  • SettingsSection 파라미터 9 → 0
  • ProfileSummarySection 8 → 1

바텀시트 닫기 아이콘 (Figma 569-10452)

• 두 행 아이콘(image_add, user)은 이미 디자인 에셋과 path 데이터까지 동일해 그대로 뒀습니다
• cancel.png(래스터, 색 지정 불가) → dismiss.svg
• CommonBottomSheet 헤더에서 고쳐 바텀시트 5곳에 함께 적용됩니다 (지도, 관리자 외출현황, 신고 목록, SelectionBottomSheet, 프로필 사진)
• 제목 색 하드코딩(Colors.white)을 mainTextColor 토큰으로

🔍 테스트 방법

flutter analyze lib packages test   # No issues found
flutter test                        # 146 passed

수동 확인:

1. 마이페이지 → "앱 테마 설정" 헤더 탭 → 아래로 목록이 펼쳐지고 셰브론이 뒤집히는지
2. 다크/라이트/시스템 선택 → 즉시 테마가 바뀌고 선택 항목만 주황 + 체크마크인지
3. 프로필 사진 탭 → 바텀시트 우측 상단 X가 SVG로 또렷하게 보이는지 (라이트 테마에서도)
4. 후기 삭제 다이얼로그가 그대로 동작하는지 (review_remove_dialog.dart 삭제 영향 없음 확인)

🙋‍♂️ 질문사항

• 테마를 선택해도 목록을 닫지 않게 했습니다. 테마가 즉시 적용돼서 체크가 옮겨가는 걸 보는 쪽이 자연스럽다고 봤는데, 닫히는 게 나으면 알려주세요.
• 미선택 행의 셰브론은 뺐습니다. Figma 코드에는 있는데 스크린샷에서는 안 보여 투명 레이어로 판단했습니다. 행 높이는 24px SizedBox로 맞춰뒀습니다.
• 닫기 버튼 탭 영역은 40px입니다. 디자인은 24px지만 그대로 두면 최소 탭 타겟에 못 미쳐서 아이콘만 24px로 하고 탭 영역을 넓혔습니다.
• 다이얼로그 버튼 색이 디자인과 반대입니다. 현재 취소=빨강 / 확인=파랑인데 디자인은 취소=파랑(#2573F3) / 확인=빨강(#E43620)입니다. 이번 PR 범위 밖이라 손대지 않았습니다.

✅ 체크리스트

• 코드가 정상적으로 컴파일되고 실행되는지 확인했습니다.
• 불필요한 코드가 없는지 확인했습니다.
• 코드 스타일 가이드를 준수했습니다.
• 기존 기능이 정상적으로 작동하는지 확인했습니다.