julian/submanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 폼 필드 컴포넌트 분리 및 구독 카드 인터랙션 개선

Browse Source 
- billing_cycle_selector, category_selector, currency_selector 컴포넌트 분리
- 구독 카드 클릭 이슈 해결을 위한 리팩토링
- SMS 스캔 화면 UI/UX 개선 및 기능 강화
- 상세 화면 컨트롤러 로직 개선
- 알림 서비스 및 구독 URL 매칭 기능 추가
- CLAUDE.md 프로젝트 가이드라인 대폭 확장
- 전반적인 코드 구조 개선 및 타입 안정성 강화

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
JiWoong Sul
2025-07-14 15:47:46 +09:00
parent 2f60ef585a
commit 111c519883
39 changed files with 2376 additions and 1231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
lib/widgets/detail/detail_event_section.dart
View File

@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../controllers/detail_screen_controller.dart';
import '../../theme/app_colors.dart';
import '../common/form_fields/currency_input_field.dart';
import '../common/form_fields/date_picker_field.dart';
@@ -19,9 +21,11 @@ class DetailEventSection extends StatelessWidget {
@override
Widget build(BuildContext context) {
final baseColor = controller.getCardColor();
return Consumer<DetailScreenController>(
builder: (context, controller, child) {
final baseColor = controller.getCardColor();
return FadeTransition(
return FadeTransition(
opacity: fadeAnimation,
child: SlideTransition(
position: Tween<Offset>(
@@ -31,11 +35,21 @@ class DetailEventSection extends StatelessWidget {
parent: controller.animationController!,
curve: const Interval(0.4, 1.0, curve: Curves.easeOutCubic),
)),
child: Card(
elevation: 1,
shadowColor: Colors.black12,
shape: RoundedRectangleBorder(
child: Container(
decoration: BoxDecoration(
color: AppColors.glassCard,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: AppColors.glassBorder.withValues(alpha: 0.1),
width: 1,
),
boxShadow: [
BoxShadow(
color: AppColors.shadowBlack,
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Padding(
padding: const EdgeInsets.all(24),
@@ -66,6 +80,7 @@ class DetailEventSection extends StatelessWidget {
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: AppColors.darkNavy,
),
),
],
@@ -93,14 +108,18 @@ class DetailEventSection extends StatelessWidget {
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.blue.withValues(alpha: 0.1),
color: AppColors.infoColor.withValues(alpha: 0.08),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: AppColors.infoColor.withValues(alpha: 0.3),
width: 1,
),
),
child: Row(
children: [
Icon(
Icons.info_outline_rounded,
color: Colors.blue[700],
color: AppColors.infoColor,
size: 20,
),
const SizedBox(width: 8),
@@ -109,7 +128,8 @@ class DetailEventSection extends StatelessWidget {
'할인 또는 프로모션 가격을 설정하세요',
style: TextStyle(
fontSize: 14,
color: Colors.blue[700],
color: AppColors.darkNavy,
fontWeight: FontWeight.w500,
),
),
),
@@ -123,6 +143,10 @@ class DetailEventSection extends StatelessWidget {
endDate: controller.eventEndDate,
onStartDateSelected: (date) {
controller.eventStartDate = date;
// 시작일 설정 시 종료일이 없으면 자동으로 1달 후로 설정
if (date != null && controller.eventEndDate == null) {
controller.eventEndDate = date.add(const Duration(days: 30));
}
},
onEndDateSelected: (date) {
controller.eventEndDate = date;
@@ -138,6 +162,18 @@ class DetailEventSection extends StatelessWidget {
currency: controller.currency,
label: '이벤트 가격',
hintText: '할인된 가격을 입력하세요',
validator: controller.isEventActive
? (value) {
if (value == null || value.isEmpty) {
return '이벤트 가격을 입력해주세요';
}
final price = double.tryParse(value.replaceAll(',', ''));
if (price == null || price <= 0) {
return '올바른 가격을 입력해주세요';
}
return null;
}
: null,
),
const SizedBox(height: 16),
// 할인율 표시
@@ -156,6 +192,8 @@ class DetailEventSection extends StatelessWidget {
),
),
);
},
);
}
}
@@ -209,7 +247,7 @@ class _DiscountBadge extends StatelessWidget {
? '₩${discountAmount.toInt().toString()}원 절약'
: '\$${discountAmount.toStringAsFixed(2)} 절약',
style: TextStyle(
color: Colors.green[700],
color: const Color(0xFF15803D),
fontSize: 14,
fontWeight: FontWeight.w500,
),

225
lib/widgets/detail/detail_form_section.dart
View File

@@ -2,9 +2,13 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../controllers/detail_screen_controller.dart';
import '../../providers/category_provider.dart';
import '../../theme/app_colors.dart';
import '../common/form_fields/base_text_field.dart';
import '../common/form_fields/currency_input_field.dart';
import '../common/form_fields/date_picker_field.dart';
import '../common/form_fields/currency_selector.dart';
import '../common/form_fields/billing_cycle_selector.dart';
import '../common/form_fields/category_selector.dart';
/// 상세 화면 폼 섹션
/// 구독 정보를 편집할 수 있는 폼 필드들을 포함합니다.
@@ -22,9 +26,11 @@ class DetailFormSection extends StatelessWidget {
@override
Widget build(BuildContext context) {
final baseColor = controller.getCardColor();
return Consumer<DetailScreenController>(
builder: (context, controller, child) {
final baseColor = controller.getCardColor();
return FadeTransition(
return FadeTransition(
opacity: fadeAnimation,
child: SlideTransition(
position: Tween<Offset>(
@@ -34,11 +40,21 @@ class DetailFormSection extends StatelessWidget {
parent: controller.animationController!,
curve: const Interval(0.3, 1.0, curve: Curves.easeOutCubic),
)),
child: Card(
elevation: 1,
shadowColor: Colors.black12,
shape: RoundedRectangleBorder(
child: Container(
decoration: BoxDecoration(
color: AppColors.glassCard,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: AppColors.glassBorder.withValues(alpha: 0.1),
width: 1,
),
boxShadow: [
BoxShadow(
color: AppColors.shadowBlack,
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Padding(
padding: const EdgeInsets.all(24),
@@ -86,11 +102,13 @@ class DetailFormSection extends StatelessWidget {
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.darkNavy,
),
),
const SizedBox(height: 8),
_CurrencySelector(
CurrencySelector(
currency: controller.currency,
isGlassmorphism: true,
onChanged: (value) {
controller.currency = value;
// 통화 변경시 금액 포맷 업데이트
@@ -121,12 +139,14 @@ class DetailFormSection extends StatelessWidget {
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.darkNavy,
),
),
const SizedBox(height: 8),
_BillingCycleSelector(
BillingCycleSelector(
billingCycle: controller.billingCycle,
baseColor: baseColor,
isGlassmorphism: true,
onChanged: (value) {
controller.billingCycle = value;
},
@@ -159,13 +179,15 @@ class DetailFormSection extends StatelessWidget {
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.darkNavy,
),
),
const SizedBox(height: 8),
_CategorySelector(
CategorySelector(
categories: categoryProvider.categories,
selectedCategoryId: controller.selectedCategoryId,
baseColor: baseColor,
isGlassmorphism: true,
onChanged: (categoryId) {
controller.selectedCategoryId = categoryId;
},
@@ -180,191 +202,8 @@ class DetailFormSection extends StatelessWidget {
),
),
);
}
}
/// 통화 선택기
class _CurrencySelector extends StatelessWidget {
final String currency;
final ValueChanged<String> onChanged;
const _CurrencySelector({
required this.currency,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
return Row(
children: [
_CurrencyOption(
label: '₩',
value: 'KRW',
isSelected: currency == 'KRW',
onTap: () => onChanged('KRW'),
),
const SizedBox(width: 8),
_CurrencyOption(
label: '\$',
value: 'USD',
isSelected: currency == 'USD',
onTap: () => onChanged('USD'),
),
],
},
);
}
}
/// 통화 옵션
class _CurrencyOption extends StatelessWidget {
final String label;
final String value;
final bool isSelected;
final VoidCallback onTap;
const _CurrencyOption({
required this.label,
required this.value,
required this.isSelected,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return Expanded(
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: isSelected
? Theme.of(context).primaryColor
: Colors.grey.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(12),
),
child: Center(
child: Text(
label,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: isSelected ? Colors.white : Colors.grey[600],
),
),
),
),
),
);
}
}
/// 결제 주기 선택기
class _BillingCycleSelector extends StatelessWidget {
final String billingCycle;
final Color baseColor;
final ValueChanged<String> onChanged;
const _BillingCycleSelector({
required this.billingCycle,
required this.baseColor,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
final cycles = ['매월', '분기별', '반기별', '매년'];
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: cycles.map((cycle) {
final isSelected = billingCycle == cycle;
return Padding(
padding: const EdgeInsets.only(right: 8),
child: InkWell(
onTap: () => onChanged(cycle),
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 12,
),
decoration: BoxDecoration(
color: isSelected ? baseColor : Colors.grey.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
cycle,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: isSelected ? Colors.white : Colors.grey[700],
),
),
),
),
);
}).toList(),
),
);
}
}
/// 카테고리 선택기
class _CategorySelector extends StatelessWidget {
final List<dynamic> categories;
final String? selectedCategoryId;
final Color baseColor;
final ValueChanged<String?> onChanged;
const _CategorySelector({
required this.categories,
required this.selectedCategoryId,
required this.baseColor,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 8,
runSpacing: 8,
children: categories.map((category) {
final isSelected = selectedCategoryId == category.id;
return InkWell(
onTap: () => onChanged(category.id),
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 10,
),
decoration: BoxDecoration(
color: isSelected ? baseColor : Colors.grey.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
category.icon,
style: const TextStyle(fontSize: 16),
),
const SizedBox(width: 6),
Text(
category.name,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: isSelected ? Colors.white : Colors.grey[700],
),
),
],
),
),
);
}).toList(),
);
}
}

31
lib/widgets/detail/detail_header_section.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';
import '../../models/subscription_model.dart';
import '../../controllers/detail_screen_controller.dart';
@@ -24,10 +25,12 @@ class DetailHeaderSection extends StatelessWidget {
@override
Widget build(BuildContext context) {
final baseColor = controller.getCardColor();
final gradient = controller.getGradient(baseColor);
return Consumer<DetailScreenController>(
builder: (context, controller, child) {
final baseColor = controller.getCardColor();
final gradient = controller.getGradient(baseColor);
return Container(
return Container(
height: 320,
decoration: BoxDecoration(gradient: gradient),
child: Stack(
@@ -118,8 +121,8 @@ class DetailHeaderSection extends StatelessWidget {
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: WebsiteIcon(
url: subscription.websiteUrl,
serviceName: subscription.serviceName,
url: controller.websiteUrlController.text,
serviceName: controller.serviceNameController.text,
size: 48,
),
),
@@ -131,7 +134,7 @@ class DetailHeaderSection extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
subscription.serviceName,
controller.serviceNameController.text,
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.w800,
@@ -148,7 +151,7 @@ class DetailHeaderSection extends StatelessWidget {
),
const SizedBox(height: 4),
Text(
'${subscription.billingCycle} 결제',
'${controller.billingCycle} 결제',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
@@ -174,20 +177,22 @@ class DetailHeaderSection extends StatelessWidget {
_InfoColumn(
label: '다음 결제일',
value: DateFormat('yyyy년 MM월 dd일')
.format(subscription.nextBillingDate),
.format(controller.nextBillingDate),
),
_InfoColumn(
label: '월 지출',
value: NumberFormat.currency(
locale: subscription.currency == 'KRW'
locale: controller.currency == 'KRW'
? 'ko_KR'
: 'en_US',
symbol: subscription.currency == 'KRW'
symbol: controller.currency == 'KRW'
? '₩'
: '\$',
decimalDigits:
subscription.currency == 'KRW' ? 0 : 2,
).format(subscription.monthlyCost),
controller.currency == 'KRW' ? 0 : 2,
).format(double.tryParse(
controller.monthlyCostController.text.replaceAll(',', '')
) ?? 0),
alignment: CrossAxisAlignment.end,
),
],
@@ -204,6 +209,8 @@ class DetailHeaderSection extends StatelessWidget {
],
),
);
},
);
}
}

46
lib/widgets/detail/detail_url_section.dart
View File

@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import '../../controllers/detail_screen_controller.dart';
import '../../theme/app_colors.dart';
import '../common/form_fields/base_text_field.dart';
import '../common/buttons/secondary_button.dart';
@@ -31,11 +32,21 @@ class DetailUrlSection extends StatelessWidget {
parent: controller.animationController!,
curve: const Interval(0.4, 1.0, curve: Curves.easeOutCubic),
)),
child: Card(
elevation: 1,
shadowColor: Colors.black12,
shape: RoundedRectangleBorder(
child: Container(
decoration: BoxDecoration(
color: AppColors.glassCard,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: AppColors.glassBorder.withValues(alpha: 0.1),
width: 1,
),
boxShadow: [
BoxShadow(
color: AppColors.shadowBlack,
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Padding(
padding: const EdgeInsets.all(24),
@@ -63,6 +74,7 @@ class DetailUrlSection extends StatelessWidget {
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: AppColors.darkNavy,
),
),
],
@@ -78,7 +90,7 @@ class DetailUrlSection extends StatelessWidget {
keyboardType: TextInputType.url,
prefixIcon: Icon(
Icons.link_rounded,
color: Colors.grey[600],
color: AppColors.navyGray,
),
),
@@ -89,10 +101,10 @@ class DetailUrlSection extends StatelessWidget {
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.orange.withValues(alpha: 0.1),
color: AppColors.warningColor.withValues(alpha: 0.08),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: Colors.orange.withValues(alpha: 0.3),
color: AppColors.warningColor.withValues(alpha: 0.4),
width: 1,
),
),
@@ -103,7 +115,7 @@ class DetailUrlSection extends StatelessWidget {
children: [
Icon(
Icons.info_outline_rounded,
color: Colors.orange[700],
color: AppColors.warningColor,
size: 20,
),
const SizedBox(width: 8),
@@ -112,7 +124,7 @@ class DetailUrlSection extends StatelessWidget {
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.orange[700],
color: AppColors.darkNavy,
),
),
],
@@ -122,7 +134,8 @@ class DetailUrlSection extends StatelessWidget {
'이 서비스를 해지하려면 아래 링크를 통해 해지 페이지로 이동하세요.',
style: TextStyle(
fontSize: 14,
color: Colors.grey[700],
color: AppColors.darkNavy,
fontWeight: FontWeight.w500,
height: 1.5,
),
),
@@ -131,7 +144,7 @@ class DetailUrlSection extends StatelessWidget {
text: '해지 페이지로 이동',
icon: Icons.open_in_new_rounded,
onPressed: controller.openCancellationPage,
color: Colors.orange[700],
color: AppColors.warningColor,
),
],
),
@@ -144,14 +157,18 @@ class DetailUrlSection extends StatelessWidget {
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.blue.withValues(alpha: 0.1),
color: AppColors.infoColor.withValues(alpha: 0.08),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: AppColors.infoColor.withValues(alpha: 0.3),
width: 1,
),
),
child: Row(
children: [
Icon(
Icons.auto_fix_high_rounded,
color: Colors.blue[700],
color: AppColors.infoColor,
size: 20,
),
const SizedBox(width: 8),
@@ -160,7 +177,8 @@ class DetailUrlSection extends StatelessWidget {
'URL이 비어있으면 서비스명을 기반으로 자동 매칭됩니다',
style: TextStyle(
fontSize: 14,
color: Colors.blue[700],
color: AppColors.darkNavy,
fontWeight: FontWeight.w500,
),
),
),