🚀[기능개선][로그인][스플래시]스플래시 및 로그인 화면 UI를 맵시 브랜드에 맞게 리디자인

[Cassiiopeia]

📝 현재 문제점

• 스플래시 화면이 Text('Splash') 텍스트만 표시하고 있어 브랜딩 요소가 전혀 없음
• 로그인 화면이 기본 AppBar + ElevatedButton 조합의 개발 임시 UI 상태
• 앱 아이콘(assets/app_icon.png)의 "맵시" 로고가 사용자에게 노출되지 않음
• 프로덕트 수준의 첫인상을 줄 수 없는 상태

🛠️ 해결 방안 / 제안 기능

• 스플래시 화면: 흰색 배경 + "맵시" 앱 아이콘(app_icon.png)을 화면 중앙에 표시 (둥근 모서리 적용)
• 로그인 화면: 라이트 테마 기반으로 리디자인
  • AppBar 제거, 전체화면 레이아웃
  • 상단에 "맵시" 앱 아이콘 표시
  • Google/Apple 소셜 로그인 버튼을 표준 디자인으로 개선
  • 기존 로그인 로직(Google/Apple 핸들러, 온보딩 분기)은 그대로 유지

⚙️ 작업 내용

• 스플래시 화면(splash_page.dart) — 앱 아이콘 중앙 배치 (1차)
• 로그인 화면(login_page.dart) — 라이트 테마 프로덕트 UI 리디자인 (2차)

🙋‍♂️ 담당자

• 백엔드: 이름
• 프론트엔드: @Cassiiopeia
• 디자인: 이름

[Cassiiopeia]

Guide by SUH-LAB

브랜치

20260223_#50_스플래시_및_로그인_화면_UI를_맵시_브랜드에_맞게_리디자인

커밋 메시지

스플래시 및 로그인 화면 UI를 맵시 브랜드에 맞게 리디자인 : feat : {변경 사항에 대한 설명} https://github.com/MapSee-Lab/MapSy-FE/issues/50

[Cassiiopeia]

📌 작업 개요

스플래시 화면과 로그인 화면의 UI를 "맵시" 브랜드에 맞게 리디자인.
기존 개발 임시 UI(Text('Splash'), 기본 ElevatedButton)를 프로덕트 수준의 라이트 테마 UI로 전면 교체.
기존 인증 로직(Google/Apple 소셜 로그인, 온보딩 분기)은 변경 없이 UI만 개선.

🎯 구현 목표

• 스플래시 화면에 "맵시" 앱 아이콘(assets/app_icon.png) 표시
• 로그인 화면을 라이트 테마 기반 프로덕트 UI로 리디자인
• 기존 인증 비즈니스 로직 100% 보존

✅ 구현 내용

스플래시 화면 리디자인

• 파일: lib/features/auth/presentation/pages/splash_page.dart
• 변경 내용: Text('Splash') → 흰색 배경 + app_icon.png 중앙 배치 (120x120, 둥근 모서리)
• 적용 사항: flutter_screenutil 및 AppRadius.xxlarge 사용으로 프로젝트 반응형 체계 통일

로그인 화면 리디자인

• 파일: lib/features/auth/presentation/pages/login_page.dart
• 변경 내용: AppBar 제거, 전체화면 레이아웃으로 전환. 상단 앱 아이콘 + 하단 소셜 로그인 버튼 구조
• 적용 사항: AppColors, AppTextStyles, AppSpacing, AppRadius 등 프로젝트 디자인 시스템 상수 활용

🔧 주요 변경사항 상세

splash_page.dart

기존 const Scaffold(body: Center(child: Text('Splash'))) 코드를 제거하고, 흰색 배경 위에 app_icon.png를 ClipRRect(24px 둥근 모서리)로 감싸 화면 정중앙에 배치.
flutter_screenutil의 .w 단위와 AppRadius.xxlarge를 사용하여 로그인 화면과 반응형 크기 체계 통일.

login_page.dart

항목	Before	After
레이아웃	AppBar + Center + Column	SafeArea + 풀스크린 Column + Spacer
브랜딩	없음	"맵시" 앱 아이콘 (120x120, 둥근 모서리)
배경	기본 Scaffold 색상	흰색(Colors.white)
Google 버튼	ElevatedButton.icon (기본 스타일)	풀 와이드 OutlinedButton (흰 배경, 회색 테두리)
Apple 버튼	ElevatedButton.icon (검정 배경)	풀 와이드 ElevatedButton.icon (검정 배경, elevation 0)
버튼 텍스트	'Google Login' / 'Apple Login'	'Google로 계속하기' / 'Apple로 계속하기'
약관 안내	없음	하단에 이용약관 동의 안내 텍스트 추가

비즈니스 로직 변경 없음:

• _handleGoogleSignIn(), _handleAppleSignIn(), _navigateAfterLogin() 메서드 원본 유지
• Platform.isIOS 조건부 Apple 로그인 버튼 표시 로직 유지
• 로딩 상태 인디케이터 및 에러 메시지 표시 로직 유지

추가된 import:

• package:flutter_screenutil/flutter_screenutil.dart — 반응형 크기 지정
• app_colors.dart — 프로젝트 색상 상수 (AppColors.textPrimary, AppColors.gray300, AppColors.error, AppColors.textDisabled)

📌 참고사항

• app_icon.png는 검정 배경 + 흰색 "맵시" 로고이므로, 흰 배경 위에서 ClipRRect 둥근 모서리 필수 (없으면 검정 사각형이 날카로워 보임)
• Google 로그인 버튼에 Google 브랜드 로고 아이콘이 없음 — 추후 Google 브랜드 가이드라인에 맞는 SVG/PNG 아이콘 추가 검토 필요
• SnackBar의 backgroundColor가 Colors.red 하드코딩 상태 (기존 코드) — 추후 AppColors.error로 통일 권장

[Cassiiopeia]

Stable 반영 완료