feat: adopt material 3 theme and billing adjustments

lib/theme/app_theme.dart

@@ -2,354 +2,320 @@ import 'package:flutter/material.dart';
 import 'app_colors.dart';
 
 class AppTheme {
-  static ThemeData lightTheme = ThemeData(
-    useMaterial3: true,
-    colorScheme: const ColorScheme.light(
+  static ThemeData lightTheme = (() {
+    // Color scheme for light theme
+    const scheme = ColorScheme.light(
       primary: AppColors.primaryColor,
       onPrimary: Colors.white,
       secondary: AppColors.secondaryColor,
       tertiary: AppColors.infoColor,
-      error: AppColors.dangerColor,
+      error: AppColors.errorColor,
       surface: AppColors.surfaceColor,
-    ),
+    );
 
-    // 기본 배경색
-    scaffoldBackgroundColor: AppColors.backgroundColor,
+    return ThemeData(
+      useMaterial3: true,
+      colorScheme: scheme,
 
-    // 카드 스타일 - 글래스모피즘 효과
-    cardTheme: CardThemeData(
-      color: AppColors.glassCard,
-      elevation: 0,
-      shadowColor: AppColors.shadowBlack,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(16),
-        side: const BorderSide(color: AppColors.glassBorder, width: 1),
-      ),
-      clipBehavior: Clip.antiAlias,
-      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
-    ),
+      // 기본 배경색
+      scaffoldBackgroundColor: AppColors.backgroundColor,
 
-    // 앱바 스타일 - 글래스모피즘 디자인
-    appBarTheme: const AppBarTheme(
-      backgroundColor: Colors.transparent,
-      foregroundColor: AppColors.textPrimary,
-      elevation: 0,
-      centerTitle: false,
-      titleTextStyle: TextStyle(
-        color: AppColors.textPrimary,
-        fontSize: 22,
-        fontWeight: FontWeight.w600,
-        letterSpacing: -0.2,
-      ),
-      iconTheme: IconThemeData(
-        color: AppColors.primaryColor,
-        size: 24,
-      ),
-    ),
-
-    // 타이포그래피 - Metronic Tailwind 스타일
-    textTheme: const TextTheme(
-      // 헤드라인 - 페이지 제목
-      headlineLarge: TextStyle(
-        color: AppColors.darkNavy, // color.md 가이드: 메인 텍스트
-        fontSize: 32,
-        fontWeight: FontWeight.w700,
-        letterSpacing: -0.5,
-        height: 1.2,
-      ),
-      headlineMedium: TextStyle(
-        color: AppColors.darkNavy, // color.md 가이드: 메인 텍스트
-        fontSize: 28,
-        fontWeight: FontWeight.w700,
-        letterSpacing: -0.5,
-        height: 1.2,
-      ),
-      headlineSmall: TextStyle(
-        color: AppColors.darkNavy, // color.md 가이드: 메인 텍스트
-        fontSize: 24,
-        fontWeight: FontWeight.w600,
-        letterSpacing: -0.25,
-        height: 1.3,
-      ),
-
-      // 타이틀 - 카드, 섹션 제목
-      titleLarge: TextStyle(
-        color: AppColors.darkNavy, // color.md 가이드: 메인 텍스트
-        fontSize: 20,
-        fontWeight: FontWeight.w600,
-        letterSpacing: -0.2,
-        height: 1.4,
-      ),
-      titleMedium: TextStyle(
-        color: AppColors.darkNavy, // color.md 가이드: 메인 텍스트
-        fontSize: 18,
-        fontWeight: FontWeight.w600,
-        letterSpacing: -0.1,
-        height: 1.4,
-      ),
-      titleSmall: TextStyle(
-        color: AppColors.darkNavy, // color.md 가이드: 메인 텍스트
-        fontSize: 16,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0,
-        height: 1.4,
-      ),
-
-      // 본문 텍스트
-      bodyLarge: TextStyle(
-        color: AppColors.darkNavy, // color.md 가이드: 메인 텍스트
-        fontSize: 16,
-        fontWeight: FontWeight.w400,
-        letterSpacing: 0.1,
-        height: 1.5,
-      ),
-      bodyMedium: TextStyle(
-        color: AppColors.navyGray, // color.md 가이드: 서브 텍스트
-        fontSize: 14,
-        fontWeight: FontWeight.w400,
-        letterSpacing: 0.1,
-        height: 1.5,
-      ),
-      bodySmall: TextStyle(
-        color: AppColors.navyGray, // color.md 가이드: 서브 텍스트
-        fontSize: 12,
-        fontWeight: FontWeight.w400,
-        letterSpacing: 0.2,
-        height: 1.5,
-      ),
-
-      // 라벨 텍스트
-      labelLarge: TextStyle(
-        color: AppColors.darkNavy, // color.md 가이드: 메인 텍스트
-        fontSize: 14,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0.1,
-        height: 1.4,
-      ),
-      labelMedium: TextStyle(
-        color: AppColors.navyGray, // color.md 가이드: 서브 텍스트
-        fontSize: 12,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0.2,
-        height: 1.4,
-      ),
-      labelSmall: TextStyle(
-        color: AppColors.navyGray, // color.md 가이드: 서브 텍스트
-        fontSize: 11,
-        fontWeight: FontWeight.w500,
-        letterSpacing: 0.2,
-        height: 1.4,
-      ),
-    ),
-
-    // 입력 필드 스타일 - 글래스모피즘 디자인
-    inputDecorationTheme: InputDecorationTheme(
-      filled: true,
-      fillColor: AppColors.glassBackground,
-      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
-      border: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(12),
-        borderSide: BorderSide.none,
-      ),
-      enabledBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(12),
-        borderSide: const BorderSide(color: AppColors.textSecondary, width: 1),
-      ),
-      focusedBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(12),
-        borderSide: const BorderSide(color: AppColors.primaryColor, width: 1.5),
-      ),
-      errorBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(12),
-        borderSide: const BorderSide(color: AppColors.dangerColor, width: 1),
-      ),
-      focusedErrorBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(12),
-        borderSide: const BorderSide(color: AppColors.dangerColor, width: 1.5),
-      ),
-      labelStyle: const TextStyle(
-        color: AppColors.textSecondary,
-        fontSize: 14,
-        fontWeight: FontWeight.w500,
-      ),
-      hintStyle: const TextStyle(
-        color: AppColors.textMuted,
-        fontSize: 14,
-        fontWeight: FontWeight.w400,
-      ),
-      errorStyle: const TextStyle(
-        color: AppColors.dangerColor,
-        fontSize: 12,
-        fontWeight: FontWeight.w400,
-      ),
-    ),
-
-    // 버튼 스타일 - 프라이머리 버튼
-    elevatedButtonTheme: ElevatedButtonThemeData(
-      style: ElevatedButton.styleFrom(
-        backgroundColor: AppColors.primaryColor,
-        foregroundColor: Colors.white,
-        minimumSize: const Size(0, 48),
-        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+      // 카드 스타일 - Material 3 표면 중심
+      cardTheme: CardThemeData(
+        elevation: 1,
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(12),
+          borderRadius: BorderRadius.circular(16),
         ),
+        margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+      ),
+
+      // 앱바 스타일 - 기본 M3 사용(투명 배경 유지)
+      appBarTheme: const AppBarTheme(
+        backgroundColor: Colors.transparent,
         elevation: 0,
-        textStyle: const TextStyle(
+        centerTitle: false,
+      ),
+
+      // 타이포그래피 - Material 3 + onSurface 정렬
+      textTheme: ThemeData.light(useMaterial3: true)
+          .textTheme
+          .copyWith(
+            headlineLarge: const TextStyle(
+              fontSize: 32,
+              fontWeight: FontWeight.w700,
+              letterSpacing: -0.5,
+              height: 1.2,
+            ),
+            headlineMedium: const TextStyle(
+              fontSize: 28,
+              fontWeight: FontWeight.w700,
+              letterSpacing: -0.5,
+              height: 1.2,
+            ),
+            headlineSmall: const TextStyle(
+              fontSize: 24,
+              fontWeight: FontWeight.w600,
+              letterSpacing: -0.25,
+              height: 1.3,
+            ),
+            titleLarge: const TextStyle(
+              fontSize: 20,
+              fontWeight: FontWeight.w600,
+              letterSpacing: -0.2,
+              height: 1.4,
+            ),
+            titleMedium: const TextStyle(
+              fontSize: 18,
+              fontWeight: FontWeight.w600,
+              letterSpacing: -0.1,
+              height: 1.4,
+            ),
+            titleSmall: const TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.w600,
+              height: 1.4,
+            ),
+            bodyLarge: const TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.w400,
+              letterSpacing: 0.1,
+              height: 1.5,
+            ),
+            bodyMedium: const TextStyle(
+              fontSize: 14,
+              fontWeight: FontWeight.w400,
+              letterSpacing: 0.1,
+              height: 1.5,
+            ),
+            bodySmall: const TextStyle(
+              fontSize: 12,
+              fontWeight: FontWeight.w400,
+              letterSpacing: 0.2,
+              height: 1.5,
+            ),
+            labelLarge: const TextStyle(
+              fontSize: 14,
+              fontWeight: FontWeight.w600,
+              letterSpacing: 0.1,
+              height: 1.4,
+            ),
+            labelMedium: const TextStyle(
+              fontSize: 12,
+              fontWeight: FontWeight.w600,
+              letterSpacing: 0.2,
+              height: 1.4,
+            ),
+            labelSmall: const TextStyle(
+              fontSize: 11,
+              fontWeight: FontWeight.w500,
+              letterSpacing: 0.2,
+              height: 1.4,
+            ),
+          )
+          .apply(
+            // 본문/헤드라인 공통 색상은 onSurface로 적용
+            bodyColor: scheme.onSurface,
+            displayColor: scheme.onSurface,
+          ),
+
+      // 입력 필드 스타일 - M3 surface/outline 기반
+      inputDecorationTheme: InputDecorationTheme(
+        filled: true,
+        fillColor: scheme.surface,
+        contentPadding:
+            const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide.none,
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: scheme.outline, width: 1),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: scheme.primary, width: 1.5),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: scheme.error, width: 1),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(color: scheme.error, width: 1.5),
+        ),
+        labelStyle: TextStyle(
+          color: scheme.onSurfaceVariant,
+          fontSize: 14,
+          fontWeight: FontWeight.w500,
+        ),
+        hintStyle: TextStyle(
+          color: scheme.onSurfaceVariant,
+          fontSize: 14,
+          fontWeight: FontWeight.w400,
+        ),
+        errorStyle: TextStyle(
+          color: scheme.error,
+          fontSize: 12,
+          fontWeight: FontWeight.w400,
+        ),
+      ),
+
+      // 버튼 스타일 - 프라이머리 버튼
+      elevatedButtonTheme: ElevatedButtonThemeData(
+        style: ElevatedButton.styleFrom(
+          backgroundColor: scheme.primary,
+          foregroundColor: scheme.onPrimary,
+          minimumSize: const Size(0, 48),
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+          elevation: 0,
+        ),
+      ),
+
+      // 텍스트 버튼 스타일
+      textButtonTheme: TextButtonThemeData(
+        style: TextButton.styleFrom(
+          foregroundColor: scheme.primary,
+          minimumSize: const Size(0, 40),
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(8),
+          ),
+          // Text style inherits from theme.labelLarge
+        ),
+      ),
+
+      // 아웃라인 버튼 스타일
+      outlinedButtonTheme: OutlinedButtonThemeData(
+        style: OutlinedButton.styleFrom(
+          foregroundColor: scheme.primary,
+          minimumSize: const Size(0, 48),
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+          side: BorderSide(color: scheme.outline, width: 1),
+        ),
+      ),
+
+      // FAB 스타일
+      floatingActionButtonTheme: FloatingActionButtonThemeData(
+        backgroundColor: scheme.primary,
+        foregroundColor: scheme.onPrimary,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16),
+        ),
+        elevation: 2,
+        extendedPadding:
+            const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+        extendedTextStyle: const TextStyle(
           fontSize: 15,
           fontWeight: FontWeight.w600,
           letterSpacing: 0.1,
         ),
       ),
-    ),
 
-    // 텍스트 버튼 스타일
-    textButtonTheme: TextButtonThemeData(
-      style: TextButton.styleFrom(
-        foregroundColor: AppColors.primaryColor,
-        minimumSize: const Size(0, 40),
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      // 스위치 스타일 (공통 테마)
+      switchTheme: SwitchThemeData(
+        thumbColor: WidgetStateProperty.resolveWith<Color>((states) {
+          if (states.contains(WidgetState.selected)) {
+            return scheme.primary;
+          }
+          return scheme.onSurfaceVariant; // OFF 썸을 명확하게
+        }),
+        trackColor: WidgetStateProperty.resolveWith<Color>((states) {
+          if (states.contains(WidgetState.selected)) {
+            return scheme.primary.withValues(alpha: 0.5);
+          }
+          // OFF 트랙 대비 강화
+          return scheme.surfaceContainerHighest.withValues(alpha: 0.5);
+        }),
+      ),
+
+      // 체크박스 스타일
+      checkboxTheme: CheckboxThemeData(
+        fillColor: WidgetStateProperty.resolveWith<Color>((states) {
+          if (states.contains(WidgetState.selected)) {
+            return scheme.primary;
+          }
+          return Colors.transparent;
+        }),
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(8),
+          borderRadius: BorderRadius.circular(4),
         ),
-        textStyle: const TextStyle(
+        side: BorderSide(color: scheme.outline, width: 1.5),
+      ),
+
+      // 라디오 버튼 스타일
+      radioTheme: RadioThemeData(
+        fillColor: WidgetStateProperty.resolveWith<Color>((states) {
+          if (states.contains(WidgetState.selected)) {
+            return scheme.primary;
+          }
+          return scheme.onSurfaceVariant;
+        }),
+      ),
+
+      // 슬라이더 스타일
+      sliderTheme: SliderThemeData(
+        activeTrackColor: scheme.primary,
+        inactiveTrackColor: scheme.onSurfaceVariant,
+        thumbColor: scheme.primary,
+        overlayColor: scheme.primary.withValues(alpha: 0.3),
+        trackHeight: 4,
+        thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 10),
+        overlayShape: const RoundSliderOverlayShape(overlayRadius: 20),
+      ),
+
+      // 탭바 스타일
+      tabBarTheme: TabBarThemeData(
+        labelColor: scheme.primary,
+        unselectedLabelColor: scheme.onSurfaceVariant,
+        indicatorColor: scheme.primary,
+        labelStyle: const TextStyle(
           fontSize: 14,
           fontWeight: FontWeight.w600,
           letterSpacing: 0.1,
         ),
-      ),
-    ),
-
-    // 아웃라인 버튼 스타일
-    outlinedButtonTheme: OutlinedButtonThemeData(
-      style: OutlinedButton.styleFrom(
-        foregroundColor: AppColors.primaryColor,
-        minimumSize: const Size(0, 48),
-        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(12),
-        ),
-        side: const BorderSide(color: AppColors.secondaryColor, width: 1),
-        textStyle: const TextStyle(
-          fontSize: 15,
-          fontWeight: FontWeight.w600,
+        unselectedLabelStyle: const TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.w500,
           letterSpacing: 0.1,
         ),
       ),
-    ),
 
-    // FAB 스타일
-    floatingActionButtonTheme: FloatingActionButtonThemeData(
-      backgroundColor: AppColors.primaryColor,
-      foregroundColor: Colors.white,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(16),
+      // 디바이더 스타일
+      dividerTheme: DividerThemeData(
+        color: scheme.outline,
+        thickness: 1,
+        space: 16,
       ),
-      elevation: 2,
-      extendedPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
-      extendedTextStyle: const TextStyle(
-        fontSize: 15,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0.1,
+
+      // 페이지 트랜지션
+      pageTransitionsTheme: const PageTransitionsTheme(
+        builders: {
+          TargetPlatform.android: ZoomPageTransitionsBuilder(),
+          TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
+          TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
+        },
       ),
-    ),
 
-    // 스위치 스타일
-    switchTheme: SwitchThemeData(
-      thumbColor: WidgetStateProperty.resolveWith<Color>((states) {
-        if (states.contains(WidgetState.selected)) {
-          return AppColors.primaryColor;
-        }
-        return Colors.white;
-      }),
-      trackColor: WidgetStateProperty.resolveWith<Color>((states) {
-        if (states.contains(WidgetState.selected)) {
-          return AppColors.secondaryColor.withValues(alpha: 0.5);
-        }
-        return AppColors.borderColor;
-      }),
-    ),
-
-    // 체크박스 스타일
-    checkboxTheme: CheckboxThemeData(
-      fillColor: WidgetStateProperty.resolveWith<Color>((states) {
-        if (states.contains(WidgetState.selected)) {
-          return AppColors.primaryColor;
-        }
-        return Colors.transparent;
-      }),
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(4),
+      // 스낵바 스타일 (기본 유지)
+      snackBarTheme: SnackBarThemeData(
+        backgroundColor: scheme.primary,
+        contentTextStyle: TextStyle(
+          color: scheme.onPrimary,
+          fontSize: 14,
+          fontWeight: FontWeight.w500,
+        ),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(8),
+        ),
+        behavior: SnackBarBehavior.floating,
       ),
-      side: const BorderSide(color: AppColors.secondaryColor, width: 1.5),
-    ),
-
-    // 라디오 버튼 스타일
-    radioTheme: RadioThemeData(
-      fillColor: WidgetStateProperty.resolveWith<Color>((states) {
-        if (states.contains(WidgetState.selected)) {
-          return AppColors.primaryColor;
-        }
-        return AppColors.textSecondary;
-      }),
-    ),
-
-    // 슬라이더 스타일
-    sliderTheme: SliderThemeData(
-      activeTrackColor: AppColors.primaryColor,
-      inactiveTrackColor: AppColors.textSecondary,
-      thumbColor: AppColors.primaryColor,
-      overlayColor: AppColors.primaryColor.withValues(alpha: 0.3),
-      trackHeight: 4,
-      thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 10),
-      overlayShape: const RoundSliderOverlayShape(overlayRadius: 20),
-    ),
-
-    // 탭바 스타일
-    tabBarTheme: const TabBarThemeData(
-      labelColor: AppColors.primaryColor,
-      unselectedLabelColor: AppColors.textSecondary,
-      indicatorColor: AppColors.primaryColor,
-      labelStyle: TextStyle(
-        fontSize: 14,
-        fontWeight: FontWeight.w600,
-        letterSpacing: 0.1,
-      ),
-      unselectedLabelStyle: TextStyle(
-        fontSize: 14,
-        fontWeight: FontWeight.w500,
-        letterSpacing: 0.1,
-      ),
-    ),
-
-    // 디바이더 스타일
-    dividerTheme: const DividerThemeData(
-      color: AppColors.dividerColor,
-      thickness: 1,
-      space: 16,
-    ),
-
-    // 페이지 트랜지션
-    pageTransitionsTheme: const PageTransitionsTheme(
-      builders: {
-        TargetPlatform.android: ZoomPageTransitionsBuilder(),
-        TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
-        TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
-      },
-    ),
-
-    // 스낵바 스타일
-    snackBarTheme: SnackBarThemeData(
-      backgroundColor: AppColors.textPrimary,
-      contentTextStyle: const TextStyle(
-        color: Colors.white,
-        fontSize: 14,
-        fontWeight: FontWeight.w500,
-      ),
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(8),
-      ),
-      behavior: SnackBarBehavior.floating,
-    ),
-  );
+    );
+  })();
 }