Skip to content

[UI] 코드 프로필 작성 페이지 (연애스타일) #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kkosang merged 2 commits into from
Apr 20, 2025
Merged

[UI] 코드 프로필 작성 페이지 (연애스타일) #27

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0171331
feat: 코드 프로필 연애 스타일 UI 구현
kkosang Apr 20, 2025
ed63a5e
chore: dart format
kkosang Apr 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 214 additions & 0 deletions lib/sign_up/presentation/pages/profile_lovestyle/profile_lovestyle_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
import 'package:code_l/sign_up/presentation/widgets/sign_up_app_bar.dart';
import 'package:flutter/material.dart';

import '../../../../core/utills/design/app_colors.dart';
import '../../../../core/utills/design/app_gaps.dart';
import '../../../../core/utills/design/app_typography.dart';
import '../../widgets/sign_up_confirm_button.dart';

class ProfileLoveStylePage extends StatefulWidget {
const ProfileLoveStylePage({super.key});

@override
State<ProfileLoveStylePage> createState() => _ProfileLoveStylePageState();
}

class _ProfileLoveStylePageState extends State<ProfileLoveStylePage> {
int? selectedRelationshipIndex;
int? selectedAffectionIndex;
int? selectedCommunicationIndex;
int? selectedDateIndex;
int? selectedConflictIndex;

final List<String> relationshipStyles = [
'천천히 알아가는 스타일 ⏳',
'만나면 운명이라고 믿는 직진형 💫',
'안정적이고 신뢰감 있는 연애 선호 🏡',
'서로의 성장과 자립을 중요시하는 스타일 🌱',
'항상 새롭고 설레는 연애를 추구하는 스타일 💃',
];

final List<String> communicationStyles = [
'하루 종일 연락하는 스타일 📲',
'중요한 순간에만 연락하는 스타일 🕰',
'전화보다 톡을 선호하는 스타일 💬',
'하루 한 통이라도 진심을 담는 스타일 💌',
'상대가 필요할 때 항상 먼저 연락하는 스타일 🙋‍♂️',
];

final List<String> dateStyles = [
'집에서 함께 영화 보는 홈 데이트 🏠',
'맛집 탐방하고 새로운 곳 찾기 🍔',
'야외활동이나 스포츠 즐기기 🚴‍♂️',
'문화생활 (전시회, 공연 등) 즐기기 🎭',
'계획적이고 철저한 데이트 스케줄러 📅',
'즉흥적으로 놀러 가는 스타일 🌍',
];

final List<String> conflictResolutionStyles = [
'바로 대화해서 푸는 직설형💬',
'시간이 지난 후 차분하게 이야기하는 스타일🤫',
'상대방의 입장을 먼저 이해하는 배려형🤝',
'잘못을 빠르게 인정하고 사과하는 솔직형🙇‍♂️',
'화가 나도 조용히 마음을 가라앉히는 침착형🧘‍♀️',
];

final List<String> affectionExpressions = [
'표현을 잘하는 직진형 💬',
'은근하게 마음을 전하는 무뚝뚝형 😎',
'말보다는 행동으로 표현하는 실천파 🚶‍♂',
'애교 많고 귀여운 스타일 🥰',
'진지하고 깊이 있는 스타일 🤔',
'다정다감한 배려형 💕',
];

bool get isValid =>
selectedRelationshipIndex != null &&
selectedAffectionIndex != null &&
selectedCommunicationIndex != null &&
selectedDateIndex != null &&
selectedConflictIndex != null;

@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;

return Scaffold(
appBar: const SignUpAppBar(),
bottomNavigationBar: Padding(
padding: const EdgeInsets.symmetric(
horizontal: AppGaps.gap20,
vertical: 34,
),
child: ConfirmButton(
enabled: isValid,
onPressed: () {
// TODO: 다음 페이지 이동 로직
},
),
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: AppGaps.gap20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: screenHeight * 0.05),
Text("어떤 연애스타일을\n선호하시나요?", style: AppTypography.header1),
SizedBox(height: AppGaps.gap12),
Text(
"내가 선호하는 연애스타일을 선택해주세요",
style: AppTypography.body2.copyWith(color: AppColors.grey600),
),
SizedBox(height: AppGaps.gap40),
Text("연애 가치관", style: AppTypography.subtitle1),
SizedBox(height: AppGaps.gap12),
...List.generate(
relationshipStyles.length,
(index) => _buildSelectableItem(
text: relationshipStyles[index],
isSelected: selectedRelationshipIndex == index,
onTap: () {
setState(() {
selectedRelationshipIndex = index;
});
},
),
),
SizedBox(height: AppGaps.gap32),
Text("애정 표현", style: AppTypography.subtitle1),
SizedBox(height: AppGaps.gap12),
...List.generate(
affectionExpressions.length,
(index) => _buildSelectableItem(
text: affectionExpressions[index],
isSelected: selectedAffectionIndex == index,
onTap: () {
setState(() {
selectedAffectionIndex = index;
});
},
),
),
SizedBox(height: AppGaps.gap32),
Text("연락", style: AppTypography.subtitle1),
SizedBox(height: AppGaps.gap12),
...List.generate(
communicationStyles.length,
(index) => _buildSelectableItem(
text: communicationStyles[index],
isSelected: selectedCommunicationIndex == index,
onTap: () {
setState(() {
selectedCommunicationIndex = index;
});
},
),
),
SizedBox(height: AppGaps.gap32),
Text("데이트", style: AppTypography.subtitle1),
SizedBox(height: AppGaps.gap12),
...List.generate(
dateStyles.length,
(index) => _buildSelectableItem(
text: dateStyles[index],
isSelected: selectedDateIndex == index,
onTap: () {
setState(() {
selectedDateIndex = index;
});
},
),
),

SizedBox(height: AppGaps.gap32),
Text("갈등 해결", style: AppTypography.subtitle1),
SizedBox(height: AppGaps.gap12),
...List.generate(
conflictResolutionStyles.length,
(index) => _buildSelectableItem(
text: conflictResolutionStyles[index],
isSelected: selectedConflictIndex == index,
onTap: () {
setState(() {
selectedConflictIndex = index;
});
},
),
),
],
),
),
),
),
);
}

Widget _buildSelectableItem({
required String text,
required bool isSelected,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
margin: const EdgeInsets.only(bottom: 12),
decoration: BoxDecoration(
color: isSelected ? AppColors.primaryLight : AppColors.grey100,
border: Border.all(
color: isSelected ? AppColors.primary : AppColors.grey300,
width: isSelected ? 1.0 : 0.0,
),
borderRadius: BorderRadius.circular(8),
),
child: Text(
text,
style: AppTypography.body2.copyWith(color: AppColors.grey800),
),
),
);
}
}