sihoo
0fc80eb5c5
용어 정리: 템플릿 = 상점에서 사는 색/애니메이션 상품, 테마 = 그 템플릿이 몰고 오는 화면 전체 디자인(배경색/타일색/아이콘색). 1단계로 메인 대시보드부터 적용 - 프로필 카드 그라데이션뿐 아니라 페이지 배경, 타일 카드 배경/테두리, 아이콘 동그라미 배경, 타일 아이콘 강조색, 제목/부제목 텍스트 색까지 장착한 템플릿에 맞춰 통째로 바뀐다. 잠긴/비활성 타일(NFC 미인증 등)은 기존처럼 중립 회색(sage)을 그대로 써서 상태 구분은 유지. 6개 기존 템플릿마다 직접 디자인한 테마(lib/theme/profile_themes.dart)를 새로 만들었고, 최고가 "갤럭시" 템플릿은 다른 5개와 달리 통째로 다크 테마로 디자인해 프리미엄 아이템 느낌을 살렸다. 백엔드 /api/shop/equipped가 템플릿 code를 같이 내려주도록 수정해서 프론트엔드가 code로 디자인해둔 테마를 찾아 쓸 수 있게 했다.
99 lines
3.5 KiB
Dart
99 lines
3.5 KiB
Dart
// 🎨 프로필 꾸미기 "템플릿"을 장착하면 프로필 카드 색뿐 아니라 화면 전체의
|
|
// 배경/타일/아이콘 색까지 통째로 바뀌는 "테마" 데이터.
|
|
// 템플릿은 상점에서 사는 색/애니메이션 상품, 테마는 그 템플릿이 몰고 오는
|
|
// 화면 전체 디자인(배경색/타일색/아이콘색/모양)을 가리킨다 - 용어 구분은
|
|
// 사장님이 정해준 것을 그대로 따른다.
|
|
//
|
|
// 템플릿 하나하나에 대해 직접 디자인한 고정 팔레트라서, 서버에서 내려주는
|
|
// code(예: "lavender")로 이 맵을 찾아 쓴다. 템플릿이 늘어나면 여기도 추가해야 한다.
|
|
import 'package:flutter/material.dart';
|
|
|
|
class ProfileTheme {
|
|
final Color primary; // 프로필 카드 그라데이션 시작색 (템플릿 색)
|
|
final Color secondary; // 프로필 카드 그라데이션 끝색 (템플릿 색)
|
|
final Color background; // 페이지 배경
|
|
final Color surface; // 타일/카드 배경
|
|
final Color surfaceAlt; // 아이콘 동그라미 등 보조 표면
|
|
final Color border; // 타일 테두리/구분선
|
|
final Color accent; // 타일 아이콘 등 강조색
|
|
final Color onBackground; // 배경/타일 위에 올라가는 기본 텍스트 색
|
|
final bool isDark;
|
|
|
|
const ProfileTheme({
|
|
required this.primary,
|
|
required this.secondary,
|
|
required this.background,
|
|
required this.surface,
|
|
required this.surfaceAlt,
|
|
required this.border,
|
|
required this.accent,
|
|
required this.onBackground,
|
|
this.isDark = false,
|
|
});
|
|
}
|
|
|
|
const Map<String, ProfileTheme> profileThemes = {
|
|
'lavender': ProfileTheme(
|
|
primary: Color(0xFFB39DDB),
|
|
secondary: Color(0xFF7E57C2),
|
|
background: Color(0xFFF5F0FA),
|
|
surface: Color(0xFFFFFFFF),
|
|
surfaceAlt: Color(0xFFEDE4F7),
|
|
border: Color(0xFFDCCCEF),
|
|
accent: Color(0xFF7E57C2),
|
|
onBackground: Color(0xFF1C1C1C),
|
|
),
|
|
'mint': ProfileTheme(
|
|
primary: Color(0xFF80CBC4),
|
|
secondary: Color(0xFF00897B),
|
|
background: Color(0xFFEAF6F4),
|
|
surface: Color(0xFFFFFFFF),
|
|
surfaceAlt: Color(0xFFDBF0EC),
|
|
border: Color(0xFFBFE3DC),
|
|
accent: Color(0xFF00897B),
|
|
onBackground: Color(0xFF1C1C1C),
|
|
),
|
|
'sunset': ProfileTheme(
|
|
primary: Color(0xFFFFB74D),
|
|
secondary: Color(0xFFE64A19),
|
|
background: Color(0xFFFFF3E6),
|
|
surface: Color(0xFFFFFFFF),
|
|
surfaceAlt: Color(0xFFFFE5CC),
|
|
border: Color(0xFFFFD1A6),
|
|
accent: Color(0xFFE64A19),
|
|
onBackground: Color(0xFF1C1C1C),
|
|
),
|
|
'ocean': ProfileTheme(
|
|
primary: Color(0xFF4FC3F7),
|
|
secondary: Color(0xFF01579B),
|
|
background: Color(0xFFEAF6FC),
|
|
surface: Color(0xFFFFFFFF),
|
|
surfaceAlt: Color(0xFFD9EEF9),
|
|
border: Color(0xFFBBDDF0),
|
|
accent: Color(0xFF01579B),
|
|
onBackground: Color(0xFF1C1C1C),
|
|
),
|
|
'aurora': ProfileTheme(
|
|
primary: Color(0xFF81C784),
|
|
secondary: Color(0xFF1565C0),
|
|
background: Color(0xFFEDF6EF),
|
|
surface: Color(0xFFFFFFFF),
|
|
surfaceAlt: Color(0xFFDCEEE0),
|
|
border: Color(0xFFC3E2CA),
|
|
accent: Color(0xFF1565C0),
|
|
onBackground: Color(0xFF1C1C1C),
|
|
),
|
|
// 🌌 최고가 템플릿 - 다른 5개와 달리 통째로 다크 테마라서 들어가자마자 확 다르게 느껴진다.
|
|
'galaxy': ProfileTheme(
|
|
primary: Color(0xFF9575CD),
|
|
secondary: Color(0xFF1A237E),
|
|
background: Color(0xFF14122B),
|
|
surface: Color(0xFF211F42),
|
|
surfaceAlt: Color(0xFF2C2A52),
|
|
border: Color(0xFF3A3768),
|
|
accent: Color(0xFFB39DDB),
|
|
onBackground: Color(0xFFF5F3FF),
|
|
isDark: true,
|
|
),
|
|
};
|