feat(app): 멤버 화면을 웹과 동일한 2열 그리드 + 모달 디자인으로 변경
- PageView 카드 스와이프 → 2열 그리드 레이아웃 - 상단 썸네일 인디케이터 제거 - 카드 탭 시 모달로 상세 정보 표시 (이미지, 이름, 생일, 인스타그램) - 개별 카드 staggered 애니메이션 + 탭 scale 효과 - 컨트롤러에서 불필요한 currentIndex 상태 제거 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
0ddde32bed
commit
d6ef851b02
2 changed files with 346 additions and 488 deletions
|
|
@ -11,13 +11,11 @@ import '../services/members_service.dart';
|
||||||
/// 멤버 상태
|
/// 멤버 상태
|
||||||
class MembersState {
|
class MembersState {
|
||||||
final List<Member> members;
|
final List<Member> members;
|
||||||
final int currentIndex;
|
|
||||||
final bool isLoading;
|
final bool isLoading;
|
||||||
final String? error;
|
final String? error;
|
||||||
|
|
||||||
const MembersState({
|
const MembersState({
|
||||||
this.members = const [],
|
this.members = const [],
|
||||||
this.currentIndex = 0,
|
|
||||||
this.isLoading = true,
|
this.isLoading = true,
|
||||||
this.error,
|
this.error,
|
||||||
});
|
});
|
||||||
|
|
@ -25,21 +23,15 @@ class MembersState {
|
||||||
/// 상태 복사 (불변성 유지)
|
/// 상태 복사 (불변성 유지)
|
||||||
MembersState copyWith({
|
MembersState copyWith({
|
||||||
List<Member>? members,
|
List<Member>? members,
|
||||||
int? currentIndex,
|
|
||||||
bool? isLoading,
|
bool? isLoading,
|
||||||
String? error,
|
String? error,
|
||||||
}) {
|
}) {
|
||||||
return MembersState(
|
return MembersState(
|
||||||
members: members ?? this.members,
|
members: members ?? this.members,
|
||||||
currentIndex: currentIndex ?? this.currentIndex,
|
|
||||||
isLoading: isLoading ?? this.isLoading,
|
isLoading: isLoading ?? this.isLoading,
|
||||||
error: error,
|
error: error,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 현재 선택된 멤버
|
|
||||||
Member? get currentMember =>
|
|
||||||
members.isNotEmpty ? members[currentIndex] : null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 멤버 컨트롤러
|
/// 멤버 컨트롤러
|
||||||
|
|
@ -77,13 +69,6 @@ class MembersController extends Notifier<MembersState> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 현재 인덱스 변경
|
|
||||||
void setCurrentIndex(int index) {
|
|
||||||
if (index >= 0 && index < state.members.length) {
|
|
||||||
state = state.copyWith(currentIndex: index);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// 나이 계산
|
/// 나이 계산
|
||||||
int? calculateAge(String? birthDate) {
|
int? calculateAge(String? birthDate) {
|
||||||
if (birthDate == null) return null;
|
if (birthDate == null) return null;
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
/// 멤버 화면 (MVCS의 View 레이어)
|
/// 멤버 화면 (MVCS의 View 레이어)
|
||||||
///
|
///
|
||||||
/// UI 렌더링과 애니메이션만 담당하고, 비즈니스 로직은 Controller에 위임합니다.
|
/// 웹과 동일한 2열 그리드 + 모달 디자인
|
||||||
library;
|
library;
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter/services.dart';
|
|
||||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
import 'package:cached_network_image/cached_network_image.dart';
|
import 'package:cached_network_image/cached_network_image.dart';
|
||||||
import 'package:flutter_svg/flutter_svg.dart';
|
import 'package:flutter_svg/flutter_svg.dart';
|
||||||
|
|
@ -21,121 +20,31 @@ class MembersView extends ConsumerStatefulWidget {
|
||||||
ConsumerState<MembersView> createState() => _MembersViewState();
|
ConsumerState<MembersView> createState() => _MembersViewState();
|
||||||
}
|
}
|
||||||
|
|
||||||
class _MembersViewState extends ConsumerState<MembersView> with TickerProviderStateMixin {
|
class _MembersViewState extends ConsumerState<MembersView> {
|
||||||
late PageController _pageController;
|
|
||||||
late ScrollController _indicatorScrollController;
|
|
||||||
late AnimationController _animController;
|
|
||||||
|
|
||||||
// 애니메이션
|
|
||||||
late Animation<double> _indicatorOpacity;
|
|
||||||
late Animation<double> _indicatorSlide;
|
|
||||||
late Animation<double> _cardOpacity;
|
|
||||||
late Animation<double> _cardSlide;
|
|
||||||
|
|
||||||
// 인디케이터 아이템 크기 (48px 썸네일 + 12px 마진)
|
|
||||||
static const double _indicatorItemWidth = 64.0;
|
|
||||||
|
|
||||||
// 이전 경로 저장 (탭 전환 감지용)
|
|
||||||
String? _previousPath;
|
String? _previousPath;
|
||||||
bool _animationStarted = false;
|
// 탭 전환 시 애니메이션 재생을 위한 키
|
||||||
|
Key _gridKey = UniqueKey();
|
||||||
@override
|
|
||||||
void initState() {
|
|
||||||
super.initState();
|
|
||||||
_pageController = PageController(viewportFraction: 0.88);
|
|
||||||
_indicatorScrollController = ScrollController();
|
|
||||||
_animController = AnimationController(
|
|
||||||
vsync: this,
|
|
||||||
duration: const Duration(milliseconds: 800),
|
|
||||||
);
|
|
||||||
_setupAnimations();
|
|
||||||
}
|
|
||||||
|
|
||||||
/// 애니메이션 설정
|
|
||||||
void _setupAnimations() {
|
|
||||||
// 인디케이터 페이드인 (0~0.4)
|
|
||||||
_indicatorOpacity = Tween<double>(begin: 0, end: 1).animate(
|
|
||||||
CurvedAnimation(
|
|
||||||
parent: _animController,
|
|
||||||
curve: const Interval(0, 0.4, curve: Curves.easeOut),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
// 인디케이터 슬라이드 (위에서 아래로)
|
|
||||||
_indicatorSlide = Tween<double>(begin: -20, end: 0).animate(
|
|
||||||
CurvedAnimation(
|
|
||||||
parent: _animController,
|
|
||||||
curve: const Interval(0, 0.4, curve: Curves.easeOut),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
// 카드 페이드인 (0.2~0.7)
|
|
||||||
_cardOpacity = Tween<double>(begin: 0, end: 1).animate(
|
|
||||||
CurvedAnimation(
|
|
||||||
parent: _animController,
|
|
||||||
curve: const Interval(0.2, 0.7, curve: Curves.easeOut),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
// 카드 슬라이드 (아래에서 위로)
|
|
||||||
_cardSlide = Tween<double>(begin: 40, end: 0).animate(
|
|
||||||
CurvedAnimation(
|
|
||||||
parent: _animController,
|
|
||||||
curve: const Interval(0.2, 0.7, curve: Curves.easeOut),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void didChangeDependencies() {
|
void didChangeDependencies() {
|
||||||
super.didChangeDependencies();
|
super.didChangeDependencies();
|
||||||
// 경로 변경 감지하여 애니메이션 재생
|
|
||||||
final currentPath = GoRouterState.of(context).uri.path;
|
final currentPath = GoRouterState.of(context).uri.path;
|
||||||
if (_previousPath != null && _previousPath != currentPath && currentPath == '/members') {
|
if (_previousPath != null && _previousPath != currentPath && currentPath == '/members') {
|
||||||
_animController.reset();
|
setState(() => _gridKey = UniqueKey());
|
||||||
_animController.forward();
|
|
||||||
}
|
}
|
||||||
_previousPath = currentPath;
|
_previousPath = currentPath;
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
|
||||||
void dispose() {
|
|
||||||
_pageController.dispose();
|
|
||||||
_indicatorScrollController.dispose();
|
|
||||||
_animController.dispose();
|
|
||||||
super.dispose();
|
|
||||||
}
|
|
||||||
|
|
||||||
/// 인디케이터 자동 스크롤
|
|
||||||
void _scrollIndicatorToIndex(int index) {
|
|
||||||
if (!_indicatorScrollController.hasClients) return;
|
|
||||||
|
|
||||||
final screenWidth = MediaQuery.of(context).size.width;
|
|
||||||
// 아이템 중심 위치: 왼쪽패딩(16) + index * 아이템너비(64) + 아이템반지름(26)
|
|
||||||
const itemRadius = 26.0; // 52 / 2
|
|
||||||
final targetOffset = (index * _indicatorItemWidth) + 16 + itemRadius - (screenWidth / 2);
|
|
||||||
final maxOffset = _indicatorScrollController.position.maxScrollExtent;
|
|
||||||
|
|
||||||
_indicatorScrollController.animateTo(
|
|
||||||
targetOffset.clamp(0.0, maxOffset),
|
|
||||||
duration: const Duration(milliseconds: 300),
|
|
||||||
curve: Curves.easeInOut,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/// 인스타그램 열기 (딥링크 우선, 없으면 웹)
|
/// 인스타그램 열기 (딥링크 우선, 없으면 웹)
|
||||||
Future<void> _openInstagram(String? url) async {
|
Future<void> _openInstagram(String? url) async {
|
||||||
if (url == null) return;
|
if (url == null) return;
|
||||||
|
|
||||||
// URL에서 username 추출 (instagram.com/username 형태)
|
|
||||||
String? username;
|
String? username;
|
||||||
final uri = Uri.tryParse(url);
|
final uri = Uri.tryParse(url);
|
||||||
if (uri != null && uri.pathSegments.isNotEmpty) {
|
if (uri != null && uri.pathSegments.isNotEmpty) {
|
||||||
username = uri.pathSegments.first;
|
username = uri.pathSegments.first;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 인스타그램 앱 딥링크 시도
|
|
||||||
if (username != null) {
|
if (username != null) {
|
||||||
final deepLink = Uri.parse('instagram://user?username=$username');
|
final deepLink = Uri.parse('instagram://user?username=$username');
|
||||||
if (await canLaunchUrl(deepLink)) {
|
if (await canLaunchUrl(deepLink)) {
|
||||||
|
|
@ -144,25 +53,184 @@ class _MembersViewState extends ConsumerState<MembersView> with TickerProviderSt
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 앱이 없으면 웹으로 열기
|
|
||||||
final webUri = Uri.parse(url);
|
final webUri = Uri.parse(url);
|
||||||
if (await canLaunchUrl(webUri)) {
|
if (await canLaunchUrl(webUri)) {
|
||||||
await launchUrl(webUri, mode: LaunchMode.externalApplication);
|
await launchUrl(webUri, mode: LaunchMode.externalApplication);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// 멤버 모달 표시
|
||||||
|
void _showMemberModal(Member member) {
|
||||||
|
final controller = ref.read(membersProvider.notifier);
|
||||||
|
final age = controller.calculateAge(member.birthDate);
|
||||||
|
|
||||||
|
showGeneralDialog(
|
||||||
|
context: context,
|
||||||
|
barrierDismissible: true,
|
||||||
|
barrierLabel: '닫기',
|
||||||
|
barrierColor: Colors.black.withValues(alpha: 0.6),
|
||||||
|
transitionDuration: const Duration(milliseconds: 200),
|
||||||
|
pageBuilder: (context, animation, secondaryAnimation) {
|
||||||
|
return Center(
|
||||||
|
child: ScaleTransition(
|
||||||
|
scale: CurvedAnimation(
|
||||||
|
parent: animation,
|
||||||
|
curve: Curves.easeOutCubic,
|
||||||
|
),
|
||||||
|
child: FadeTransition(
|
||||||
|
opacity: animation,
|
||||||
|
child: Material(
|
||||||
|
color: Colors.transparent,
|
||||||
|
child: Container(
|
||||||
|
width: 264,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white,
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
),
|
||||||
|
clipBehavior: Clip.antiAlias,
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
// 이미지 (3:4 비율)
|
||||||
|
AspectRatio(
|
||||||
|
aspectRatio: 3 / 4,
|
||||||
|
child: Stack(
|
||||||
|
fit: StackFit.expand,
|
||||||
|
children: [
|
||||||
|
if (member.imageUrl != null)
|
||||||
|
CachedNetworkImage(
|
||||||
|
imageUrl: member.imageUrl!,
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
placeholder: (context, url) => Container(color: Colors.grey[200]),
|
||||||
|
)
|
||||||
|
else
|
||||||
|
Container(
|
||||||
|
color: Colors.grey[200],
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
member.name[0],
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 30,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: Colors.grey[400],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// 닫기 버튼
|
||||||
|
Positioned(
|
||||||
|
top: 8,
|
||||||
|
right: 8,
|
||||||
|
child: GestureDetector(
|
||||||
|
onTap: () => Navigator.of(context).pop(),
|
||||||
|
child: Container(
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.black.withValues(alpha: 0.5),
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
),
|
||||||
|
child: const Icon(
|
||||||
|
Icons.close,
|
||||||
|
color: Colors.white,
|
||||||
|
size: 18,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// 정보 영역
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.all(16),
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
// 이름
|
||||||
|
Text(
|
||||||
|
member.name,
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// 생일
|
||||||
|
if (member.birthDate != null) ...[
|
||||||
|
const SizedBox(height: 6),
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
_buildIcon('cake', 14, Colors.grey[500]!),
|
||||||
|
const SizedBox(width: 4),
|
||||||
|
Text(
|
||||||
|
controller.formatBirthDate(member.birthDate),
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
color: Colors.grey[500],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (age != null) ...[
|
||||||
|
const SizedBox(width: 4),
|
||||||
|
Text(
|
||||||
|
'($age세)',
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
color: AppColors.primary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
// 인스타그램 버튼
|
||||||
|
if (!member.isFormer && member.instagram != null) ...[
|
||||||
|
const SizedBox(height: 12),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => _openInstagram(member.instagram),
|
||||||
|
child: Container(
|
||||||
|
width: double.infinity,
|
||||||
|
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
gradient: const LinearGradient(
|
||||||
|
colors: [Color(0xFF833AB4), Color(0xFFE1306C), Color(0xFFF77737)],
|
||||||
|
),
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
_buildIcon('instagram', 16, Colors.white),
|
||||||
|
const SizedBox(width: 6),
|
||||||
|
const Text(
|
||||||
|
'Instagram',
|
||||||
|
style: TextStyle(
|
||||||
|
color: Colors.white,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final membersState = ref.watch(membersProvider);
|
final membersState = ref.watch(membersProvider);
|
||||||
final controller = ref.read(membersProvider.notifier);
|
|
||||||
|
|
||||||
// 데이터 로드 완료 시 애니메이션 시작
|
|
||||||
if (!membersState.isLoading && !_animationStarted && membersState.members.isNotEmpty) {
|
|
||||||
_animationStarted = true;
|
|
||||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
||||||
_animController.forward();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (membersState.isLoading) {
|
if (membersState.isLoading) {
|
||||||
return const Center(
|
return const Center(
|
||||||
|
|
@ -176,375 +244,26 @@ class _MembersViewState extends ConsumerState<MembersView> with TickerProviderSt
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return AnimatedBuilder(
|
// 현재 멤버만 표시
|
||||||
animation: _animController,
|
final currentMembers = membersState.members.where((m) => !m.isFormer).toList();
|
||||||
builder: (context, child) {
|
|
||||||
return Column(
|
|
||||||
children: [
|
|
||||||
// 상단 썸네일 인디케이터 (애니메이션 적용)
|
|
||||||
Transform.translate(
|
|
||||||
offset: Offset(0, _indicatorSlide.value),
|
|
||||||
child: Opacity(
|
|
||||||
opacity: _indicatorOpacity.value,
|
|
||||||
child: _buildThumbnailIndicator(membersState),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
|
|
||||||
// 메인 카드 영역 (애니메이션 적용)
|
|
||||||
Expanded(
|
|
||||||
child: Transform.translate(
|
|
||||||
offset: Offset(0, _cardSlide.value),
|
|
||||||
child: Opacity(
|
|
||||||
opacity: _cardOpacity.value,
|
|
||||||
child: PageView.builder(
|
|
||||||
controller: _pageController,
|
|
||||||
itemCount: membersState.members.length,
|
|
||||||
padEnds: true,
|
|
||||||
onPageChanged: (index) {
|
|
||||||
controller.setCurrentIndex(index);
|
|
||||||
HapticFeedback.selectionClick();
|
|
||||||
_scrollIndicatorToIndex(index);
|
|
||||||
},
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
return AnimatedBuilder(
|
|
||||||
animation: _pageController,
|
|
||||||
// child를 캐싱하여 매 프레임 rebuild 방지
|
|
||||||
// RepaintBoundary로 리페인트 범위 제한
|
|
||||||
child: RepaintBoundary(
|
|
||||||
child: _buildMemberCard(membersState.members[index], controller),
|
|
||||||
),
|
|
||||||
builder: (context, child) {
|
|
||||||
double value = 1.0;
|
|
||||||
if (_pageController.position.haveDimensions) {
|
|
||||||
value = (_pageController.page! - index).abs();
|
|
||||||
value = (1 - (value * 0.25)).clamp(0.0, 1.0);
|
|
||||||
}
|
|
||||||
return Transform.scale(
|
|
||||||
scale: Curves.easeOut.transform(value),
|
|
||||||
child: child,
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/// 멤버 카드
|
|
||||||
Widget _buildMemberCard(Member member, MembersController controller) {
|
|
||||||
final isFormer = member.isFormer;
|
|
||||||
final age = controller.calculateAge(member.birthDate);
|
|
||||||
|
|
||||||
return Padding(
|
|
||||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
||||||
child: Container(
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
borderRadius: BorderRadius.circular(24),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: Colors.black.withValues(alpha: 0.15),
|
|
||||||
blurRadius: 20,
|
|
||||||
offset: const Offset(0, 10),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: ClipRRect(
|
|
||||||
borderRadius: BorderRadius.circular(24),
|
|
||||||
child: Stack(
|
|
||||||
fit: StackFit.expand,
|
|
||||||
children: [
|
|
||||||
// 배경 이미지
|
|
||||||
if (member.imageUrl != null)
|
|
||||||
ColorFiltered(
|
|
||||||
colorFilter: isFormer
|
|
||||||
? const ColorFilter.mode(Colors.grey, BlendMode.saturation)
|
|
||||||
: const ColorFilter.mode(Colors.transparent, BlendMode.multiply),
|
|
||||||
child: CachedNetworkImage(
|
|
||||||
imageUrl: member.imageUrl!,
|
|
||||||
fit: BoxFit.cover,
|
|
||||||
placeholder: (context, url) => Container(
|
|
||||||
color: Colors.grey[200],
|
|
||||||
child: const Center(
|
|
||||||
child: CircularProgressIndicator(color: AppColors.primary),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
else
|
|
||||||
Container(
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: LinearGradient(
|
|
||||||
begin: Alignment.topLeft,
|
|
||||||
end: Alignment.bottomRight,
|
|
||||||
colors: [Colors.grey[300]!, Colors.grey[400]!],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
|
|
||||||
// 하단 그라데이션 오버레이
|
|
||||||
Positioned(
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
child: Container(
|
|
||||||
height: 220,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: LinearGradient(
|
|
||||||
begin: Alignment.topCenter,
|
|
||||||
end: Alignment.bottomCenter,
|
|
||||||
colors: [
|
|
||||||
Colors.transparent,
|
|
||||||
Colors.black.withValues(alpha: 0.3),
|
|
||||||
Colors.black.withValues(alpha: 0.8),
|
|
||||||
],
|
|
||||||
stops: const [0.0, 0.4, 1.0],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
|
|
||||||
// 전 멤버 라벨
|
|
||||||
if (isFormer)
|
|
||||||
Positioned(
|
|
||||||
top: 16,
|
|
||||||
right: 16,
|
|
||||||
child: Container(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: Colors.black.withValues(alpha: 0.6),
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
),
|
|
||||||
child: const Text(
|
|
||||||
'전 멤버',
|
|
||||||
style: TextStyle(
|
|
||||||
color: Colors.white70,
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
|
|
||||||
// 멤버 정보
|
|
||||||
Positioned(
|
|
||||||
left: 24,
|
|
||||||
right: 24,
|
|
||||||
bottom: 24,
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
// 이름
|
|
||||||
Text(
|
|
||||||
member.name,
|
|
||||||
style: const TextStyle(
|
|
||||||
fontSize: 32,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: Colors.white,
|
|
||||||
shadows: [
|
|
||||||
Shadow(
|
|
||||||
blurRadius: 10,
|
|
||||||
color: Colors.black45,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 8),
|
|
||||||
|
|
||||||
// 포지션
|
|
||||||
if (member.position != null)
|
|
||||||
Text(
|
|
||||||
member.position!,
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 16,
|
|
||||||
color: Colors.white.withValues(alpha: 0.9),
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
|
|
||||||
const SizedBox(height: 12),
|
|
||||||
|
|
||||||
// 생일 정보
|
|
||||||
if (member.birthDate != null)
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
_buildIcon('calendar', 16, Colors.white70),
|
|
||||||
const SizedBox(width: 6),
|
|
||||||
Text(
|
|
||||||
controller.formatBirthDate(member.birthDate),
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 14,
|
|
||||||
color: Colors.white.withValues(alpha: 0.8),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
if (age != null) ...[
|
|
||||||
const SizedBox(width: 8),
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: Colors.white.withValues(alpha: 0.2),
|
|
||||||
borderRadius: BorderRadius.circular(10),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
'$age세',
|
|
||||||
style: const TextStyle(
|
|
||||||
fontSize: 12,
|
|
||||||
color: Colors.white,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
],
|
|
||||||
),
|
|
||||||
|
|
||||||
// 인스타그램 버튼
|
|
||||||
if (!isFormer && member.instagram != null) ...[
|
|
||||||
const SizedBox(height: 16),
|
|
||||||
GestureDetector(
|
|
||||||
onTap: () => _openInstagram(member.instagram),
|
|
||||||
child: Container(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: const LinearGradient(
|
|
||||||
colors: [Color(0xFF833AB4), Color(0xFFE1306C), Color(0xFFF77737)],
|
|
||||||
),
|
|
||||||
borderRadius: BorderRadius.circular(25),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: const Color(0xFFE1306C).withValues(alpha: 0.4),
|
|
||||||
blurRadius: 12,
|
|
||||||
offset: const Offset(0, 4),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
_buildIcon('instagram', 18, Colors.white),
|
|
||||||
const SizedBox(width: 8),
|
|
||||||
const Text(
|
|
||||||
'Instagram',
|
|
||||||
style: TextStyle(
|
|
||||||
color: Colors.white,
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/// 상단 썸네일 인디케이터
|
|
||||||
Widget _buildThumbnailIndicator(MembersState membersState) {
|
|
||||||
return Container(
|
return Container(
|
||||||
height: 88,
|
color: const Color(0xFFF9FAFB), // bg-gray-50
|
||||||
decoration: BoxDecoration(
|
child: GridView.builder(
|
||||||
color: Colors.white,
|
key: _gridKey,
|
||||||
boxShadow: [
|
padding: const EdgeInsets.all(16),
|
||||||
BoxShadow(
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||||
color: Colors.black.withValues(alpha: 0.04),
|
crossAxisCount: 2,
|
||||||
blurRadius: 6,
|
crossAxisSpacing: 16,
|
||||||
offset: const Offset(0, 2),
|
mainAxisSpacing: 16,
|
||||||
),
|
childAspectRatio: 3 / 4,
|
||||||
],
|
),
|
||||||
),
|
itemCount: currentMembers.length,
|
||||||
child: ListView.builder(
|
|
||||||
controller: _indicatorScrollController,
|
|
||||||
scrollDirection: Axis.horizontal,
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
|
||||||
itemCount: membersState.members.length,
|
|
||||||
itemBuilder: (context, index) {
|
itemBuilder: (context, index) {
|
||||||
final member = membersState.members[index];
|
return _AnimatedMemberCard(
|
||||||
final isSelected = index == membersState.currentIndex;
|
index: index,
|
||||||
final isFormer = member.isFormer;
|
member: currentMembers[index],
|
||||||
|
onTap: () => _showMemberModal(currentMembers[index]),
|
||||||
return GestureDetector(
|
|
||||||
onTap: () {
|
|
||||||
_pageController.animateToPage(
|
|
||||||
index,
|
|
||||||
duration: const Duration(milliseconds: 300),
|
|
||||||
curve: Curves.easeInOut,
|
|
||||||
);
|
|
||||||
},
|
|
||||||
child: Padding(
|
|
||||||
padding: const EdgeInsets.only(right: 12),
|
|
||||||
child: Column(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
// 테두리 + 그림자를 위한 외부 컨테이너
|
|
||||||
AnimatedContainer(
|
|
||||||
duration: const Duration(milliseconds: 200),
|
|
||||||
width: 52,
|
|
||||||
height: 52,
|
|
||||||
padding: const EdgeInsets.all(2),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
shape: BoxShape.circle,
|
|
||||||
border: Border.all(
|
|
||||||
color: isSelected ? AppColors.primary : Colors.grey.shade300,
|
|
||||||
width: isSelected ? 2.5 : 1.5,
|
|
||||||
),
|
|
||||||
boxShadow: isSelected
|
|
||||||
? [
|
|
||||||
BoxShadow(
|
|
||||||
color: AppColors.primary.withValues(alpha: 0.35),
|
|
||||||
blurRadius: 8,
|
|
||||||
spreadRadius: 1,
|
|
||||||
),
|
|
||||||
]
|
|
||||||
: null,
|
|
||||||
),
|
|
||||||
// 이미지를 담는 내부 ClipOval
|
|
||||||
child: ClipOval(
|
|
||||||
child: ColorFiltered(
|
|
||||||
colorFilter: isFormer
|
|
||||||
? const ColorFilter.mode(Colors.grey, BlendMode.saturation)
|
|
||||||
: const ColorFilter.mode(Colors.transparent, BlendMode.multiply),
|
|
||||||
child: member.imageUrl != null
|
|
||||||
? CachedNetworkImage(
|
|
||||||
imageUrl: member.imageUrl!,
|
|
||||||
fit: BoxFit.cover,
|
|
||||||
width: 48,
|
|
||||||
height: 48,
|
|
||||||
placeholder: (context, url) => Container(color: Colors.grey[300]),
|
|
||||||
)
|
|
||||||
: Container(
|
|
||||||
width: 48,
|
|
||||||
height: 48,
|
|
||||||
color: Colors.grey[300],
|
|
||||||
child: Center(
|
|
||||||
child: Text(
|
|
||||||
member.name[0],
|
|
||||||
style: const TextStyle(
|
|
||||||
color: Colors.white,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
|
@ -554,7 +273,7 @@ class _MembersViewState extends ConsumerState<MembersView> with TickerProviderSt
|
||||||
/// SVG 아이콘 빌더
|
/// SVG 아이콘 빌더
|
||||||
Widget _buildIcon(String name, double size, Color color) {
|
Widget _buildIcon(String name, double size, Color color) {
|
||||||
const icons = {
|
const icons = {
|
||||||
'calendar': '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
|
'cake': '<path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8"/><path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1"/><path d="M2 21h20"/><path d="M7 8v3"/><path d="M12 8v3"/><path d="M17 8v3"/><path d="M7 4h.01"/><path d="M12 4h.01"/><path d="M17 4h.01"/>',
|
||||||
'instagram': '<rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>',
|
'instagram': '<rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -571,3 +290,157 @@ class _MembersViewState extends ConsumerState<MembersView> with TickerProviderSt
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// 개별 애니메이션이 적용된 멤버 카드
|
||||||
|
/// Framer Motion과 동일: delay index*50ms, opacity 0→1, y 20→0, tap scale 0.97
|
||||||
|
class _AnimatedMemberCard extends StatefulWidget {
|
||||||
|
final int index;
|
||||||
|
final Member member;
|
||||||
|
final VoidCallback onTap;
|
||||||
|
|
||||||
|
const _AnimatedMemberCard({
|
||||||
|
required this.index,
|
||||||
|
required this.member,
|
||||||
|
required this.onTap,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<_AnimatedMemberCard> createState() => _AnimatedMemberCardState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _AnimatedMemberCardState extends State<_AnimatedMemberCard>
|
||||||
|
with SingleTickerProviderStateMixin {
|
||||||
|
late AnimationController _controller;
|
||||||
|
late Animation<double> _opacity;
|
||||||
|
late Animation<Offset> _slide;
|
||||||
|
double _scale = 1.0;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller = AnimationController(
|
||||||
|
vsync: this,
|
||||||
|
duration: const Duration(milliseconds: 300),
|
||||||
|
);
|
||||||
|
_opacity = Tween<double>(begin: 0, end: 1).animate(
|
||||||
|
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
|
||||||
|
);
|
||||||
|
_slide = Tween<Offset>(begin: const Offset(0, 20), end: Offset.zero).animate(
|
||||||
|
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
|
||||||
|
);
|
||||||
|
|
||||||
|
// 개별 딜레이 (index * 50ms)
|
||||||
|
Future.delayed(Duration(milliseconds: widget.index * 50), () {
|
||||||
|
if (mounted) _controller.forward();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return AnimatedBuilder(
|
||||||
|
animation: _controller,
|
||||||
|
builder: (context, child) {
|
||||||
|
return Opacity(
|
||||||
|
opacity: _opacity.value,
|
||||||
|
child: Transform.translate(
|
||||||
|
offset: _slide.value,
|
||||||
|
child: child,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: GestureDetector(
|
||||||
|
onTapDown: (_) => setState(() => _scale = 0.97),
|
||||||
|
onTapUp: (_) {
|
||||||
|
setState(() => _scale = 1.0);
|
||||||
|
widget.onTap();
|
||||||
|
},
|
||||||
|
onTapCancel: () => setState(() => _scale = 1.0),
|
||||||
|
child: AnimatedScale(
|
||||||
|
scale: _scale,
|
||||||
|
duration: const Duration(milliseconds: 100),
|
||||||
|
child: Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: Colors.black.withValues(alpha: 0.1),
|
||||||
|
blurRadius: 10,
|
||||||
|
offset: const Offset(0, 4),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
child: Stack(
|
||||||
|
fit: StackFit.expand,
|
||||||
|
children: [
|
||||||
|
// 이미지
|
||||||
|
if (widget.member.imageUrl != null)
|
||||||
|
CachedNetworkImage(
|
||||||
|
imageUrl: widget.member.imageUrl!,
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
placeholder: (context, url) => Container(color: Colors.grey[200]),
|
||||||
|
)
|
||||||
|
else
|
||||||
|
Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
gradient: LinearGradient(
|
||||||
|
begin: Alignment.topLeft,
|
||||||
|
end: Alignment.bottomRight,
|
||||||
|
colors: [Colors.grey[200]!, Colors.grey[300]!],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
widget.member.name[0],
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 36,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: Colors.grey[400],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// 하단 그라데이션 + 이름
|
||||||
|
Positioned(
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
child: Container(
|
||||||
|
padding: const EdgeInsets.all(12),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
gradient: LinearGradient(
|
||||||
|
begin: Alignment.topCenter,
|
||||||
|
end: Alignment.bottomCenter,
|
||||||
|
colors: [
|
||||||
|
Colors.transparent,
|
||||||
|
Colors.black.withValues(alpha: 0.45),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
widget.member.name,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: const TextStyle(
|
||||||
|
color: Colors.white,
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue