diff --git a/lib/main.dart b/lib/main.dart index 975646d..fec5c17 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,7 +1,7 @@ import 'package:code_l/auth/presentation/pages/login/login_page.dart'; import 'package:code_l/auth/presentation/pages/terms_and_conditions/terms_and_condition_page.dart'; -import 'package:code_l/sign_up/presentation/pages/pending_approval/pending_approval_page.dart'; import 'package:code_l/sign_up/presentation/pages/profile_interest/profile_intereset_page.dart'; +import 'package:code_l/sign_up/presentation/pages/profile_summary/profile_summary_page.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:flutter/material.dart'; import 'package:flutter_dotenv/flutter_dotenv.dart'; @@ -28,7 +28,7 @@ class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( title: 'Kakao Login Demo', - home: const PendingApprovalPage(), + home: LoginPage(), theme: ThemeData( primarySwatch: Colors.blue, scaffoldBackgroundColor: Colors.white, diff --git a/lib/sign_up/presentation/pages/profile_introduce/profile_introduce_page.dart b/lib/sign_up/presentation/pages/profile_introduce/profile_introduce_page.dart index 10009b3..6dbfc58 100644 --- a/lib/sign_up/presentation/pages/profile_introduce/profile_introduce_page.dart +++ b/lib/sign_up/presentation/pages/profile_introduce/profile_introduce_page.dart @@ -21,7 +21,7 @@ class ProfileIntroducePage extends ConsumerWidget { final notifier = ref.read(profileIntroduceProvider.notifier); return Scaffold( - appBar: SignUpAppBar(currentPage: 10), + appBar: SignUpAppBar(), body: SafeArea( child: Padding( padding: const EdgeInsets.all(AppGaps.gap24), diff --git a/lib/sign_up/presentation/pages/profile_summary/profile_summary_page.dart b/lib/sign_up/presentation/pages/profile_summary/profile_summary_page.dart new file mode 100644 index 0000000..e8ac819 --- /dev/null +++ b/lib/sign_up/presentation/pages/profile_summary/profile_summary_page.dart @@ -0,0 +1,270 @@ +import 'package:code_l/core/utills/design/app_gaps.dart'; +import 'package:code_l/core/utills/design/app_typography.dart'; +import 'package:code_l/sign_up/presentation/pages/profile_summary/widgets/profile_summary_app_bar.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +import '../../../../core/utills/design/app_colors.dart'; + +class ProfileSummaryPage extends StatelessWidget { + ProfileSummaryPage({Key? key}) : super(key: key); + final PageController pageController = PageController(); + final ValueNotifier currentPageNotifier = ValueNotifier(0); + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: ProfileSummaryAppBar(), + body: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + buildCodeProfileImage([ + 'https://i.namu.wiki/i/26zrz9vXNoJuC8XAawLsvE54JAHRKgQZcpx0SQ1g60r3Nn80nqpXFK0VBulBYNuuayrcCpli4u8jUMUm_1n5CIo84vxWbQcN46w0Ah_VS2hJZ0m88_jTWwKWtij1_m38H1G-Py_8fdiHrSWKyWAWCQ.webp', + 'https://i.namu.wiki/i/26zrz9vXNoJuC8XAawLsvE54JAHRKgQZcpx0SQ1g60r3Nn80nqpXFK0VBulBYNuuayrcCpli4u8jUMUm_1n5CIo84vxWbQcN46w0Ah_VS2hJZ0m88_jTWwKWtij1_m38H1G-Py_8fdiHrSWKyWAWCQ.webp', + 'https://i.namu.wiki/i/26zrz9vXNoJuC8XAawLsvE54JAHRKgQZcpx0SQ1g60r3Nn80nqpXFK0VBulBYNuuayrcCpli4u8jUMUm_1n5CIo84vxWbQcN46w0Ah_VS2hJZ0m88_jTWwKWtij1_m38H1G-Py_8fdiHrSWKyWAWCQ.webp', + ]), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + buildNameAge(), + Container(height: AppGaps.gap8, color: AppColors.grey100), + buildIntroduce(), + Container(height: AppGaps.gap8, color: AppColors.grey100), + buildProfileFaceImage(), + Container(height: AppGaps.gap8, color: AppColors.grey100), + buildProfileSection('사용가능코드네임의 LIFE', [ + buildListItem('직업', '학생'), + buildListItem('음주여부', '유산소 즐기는 매니아'), + buildListItem('흡연여부', '유산소 즐기는 매니아'), + buildListItem('MBTI', 'ENTJ'), + ]), + Container(height: AppGaps.gap8, color: AppColors.grey100), + buildProfileSection('사용가능코드네임의 LIKE', [ + buildListItem('취향', '운동, 독서 & 글쓰기, IT기술'), + buildListItem('활동지역', '서울특별시 강동구'), + ]), + Container(height: AppGaps.gap8, color: AppColors.grey100), + buildProfileSection('사용가능코드네임의 LIFESTYLE', [ + buildListItem('연애가치관', '서로의 성장을 지원하는 스타일'), + buildListItem('애정표현', '나만 따라와 데이트 스타일'), + buildListItem('연락', '나만 따라와 데이트 스타일'), + buildListItem('데이트', '나만 따라와 데이트 스타일'), + buildListItem('갈등해결', '나만 따라와 데이트 스타일'), + buildListItem('사랑의 언어', '나만 따라와 데이트 스타일'), + ]), + ], + ), + ], + ), + ), + ); + } + + Widget buildNameAge() { + return Padding( + padding: const EdgeInsets.all(AppGaps.gap16), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Text('사용가능코드네임', style: AppTypography.header3), + SizedBox(width: AppGaps.gap8), + Text("26세", style: AppTypography.body2), + ], + ), + IconButton(icon: Icon(Icons.more_vert), onPressed: () {}), + ], + ), + ); + } + + Widget buildIntroduce() { + return Padding( + padding: const EdgeInsets.all(AppGaps.gap16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + buildSectionTitle('사용가능코드네임의 소개'), + SizedBox(height: AppGaps.gap8), + Text('방가방가', style: AppTypography.subtitle3), + ], + ), + ); + } + + Widget buildProfileFaceImage() { + return Padding( + padding: const EdgeInsets.all(AppGaps.gap16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + buildSectionTitle('사용가능코드네임의 페이스 인증 이미지'), + SizedBox(height: AppGaps.gap12), + buildFaceProfileImages([ + 'https://i.namu.wiki/i/26zrz9vXNoJuC8XAawLsvE54JAHRKgQZcpx0SQ1g60r3Nn80nqpXFK0VBulBYNuuayrcCpli4u8jUMUm_1n5CIo84vxWbQcN46w0Ah_VS2hJZ0m88_jTWwKWtij1_m38H1G-Py_8fdiHrSWKyWAWCQ.webp', + 'https://i.namu.wiki/i/26zrz9vXNoJuC8XAawLsvE54JAHRKgQZcpx0SQ1g60r3Nn80nqpXFK0VBulBYNuuayrcCpli4u8jUMUm_1n5CIo84vxWbQcN46w0Ah_VS2hJZ0m88_jTWwKWtij1_m38H1G-Py_8fdiHrSWKyWAWCQ.webp', + 'https://i.namu.wiki/i/26zrz9vXNoJuC8XAawLsvE54JAHRKgQZcpx0SQ1g60r3Nn80nqpXFK0VBulBYNuuayrcCpli4u8jUMUm_1n5CIo84vxWbQcN46w0Ah_VS2hJZ0m88_jTWwKWtij1_m38H1G-Py_8fdiHrSWKyWAWCQ.webp', + ]), + SizedBox(height: AppGaps.gap12), + Container( + color: AppColors.grey100, + height: 24, + width: double.infinity, + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.only(left: AppGaps.gap8), + child: Text( + "페이스 인증 이미지는 다른 사용자들에게 보이지 않아요!", + style: AppTypography.caption3.copyWith( + color: AppColors.grey500, + ), + ), + ), + ), + ], + ), + ); + } + Widget buildFaceProfileImages(List imagePath) { + return Row( + children: List.generate( + imagePath.length, + (index) => buildFaceProfileImage(imagePath[index]), + ), + ); + } + + Widget buildCodeProfileImage(List imagePaths) { + return AspectRatio( + aspectRatio: 7 / 6, + child: Stack( + children: [ + PageView.builder( + controller: pageController, + itemCount: imagePaths.length, + onPageChanged: (index) { + currentPageNotifier.value = index; // 페이지 번호 업데이트 + }, + itemBuilder: (context, index) { + return Image.network( + imagePaths[index], + fit: BoxFit.cover, + ); + }, + ), + Align( + alignment: Alignment.topLeft, + child: ValueListenableBuilder( + valueListenable: currentPageNotifier, + builder: (context, currentPage, _) { + return currentPageNotifier.value == 0 + ? Container( + margin: const EdgeInsets.all(8.0), + padding: const EdgeInsets.symmetric( + horizontal: 12.0, vertical: 6.0), + decoration: BoxDecoration( + color: Colors.black.withOpacity(0.6), + ), + child: Text( + '대표', + style: + AppTypography.body2.copyWith(color: Colors.white), + ), + ) + : Container(); + }, + ), + ), + Align( + alignment: Alignment.bottomCenter, + child: ValueListenableBuilder( + valueListenable: currentPageNotifier, + builder: (context, currentPage, _) { + return Container( + margin: const EdgeInsets.all(8.0), + padding: const EdgeInsets.symmetric( + horizontal: 12.0, vertical: 6.0), + decoration: BoxDecoration( + color: Colors.black.withOpacity(0.6), + borderRadius: BorderRadius.circular(12.0), + ), + child: Text( + '${currentPage + 1} / ${imagePaths.length}', + style: AppTypography.body2.copyWith(color: Colors.white), + ), + ); + }, + ), + ), + ], + ), + ); + } + + Widget buildSectionTitle(String title) { + return Text( + title, + style: AppTypography.subtitle3.copyWith(color: AppColors.primary), + ); + } + + Widget buildFaceProfileImage(String imagePath) { + return Padding( + padding: const EdgeInsets.only(right: 8.0), + child: ClipRRect( + borderRadius: BorderRadius.circular(24), + child: Container( + width: 64, + height: 64, + decoration: BoxDecoration( + image: DecorationImage( + image: NetworkImage(imagePath), + fit: BoxFit.cover, + ), + ), + ), + ), + ); + } + + Widget buildProfileSection(String title, List items) { + return Padding( + padding: const EdgeInsets.all(AppGaps.gap16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + buildSectionTitle(title), + SizedBox(height: AppGaps.gap8), + ...items, + SizedBox(height: AppGaps.gap16), + ], + ), + ); + } + + Widget buildListItem(String key, String value) { + return Padding( + padding: const EdgeInsets.symmetric(vertical: 4.0), + child: Row( + children: [ + SizedBox( + width: 80, // key의 고정 너비 설정 + child: Text( + key, + style: AppTypography.subtitle3.copyWith(color: AppColors.grey500), + textAlign: TextAlign.left, + ), + ), + Expanded( + child: Text( + value, + style: AppTypography.subtitle3, + textAlign: TextAlign.left, + ), + ), + ], + ), + ); + } +} diff --git a/lib/sign_up/presentation/pages/profile_summary/widgets/profile_summary_app_bar.dart b/lib/sign_up/presentation/pages/profile_summary/widgets/profile_summary_app_bar.dart new file mode 100644 index 0000000..94022d4 --- /dev/null +++ b/lib/sign_up/presentation/pages/profile_summary/widgets/profile_summary_app_bar.dart @@ -0,0 +1,38 @@ +import 'package:code_l/core/utills/design/app_gaps.dart'; +import 'package:flutter/material.dart'; + +import '../../../../../core/utills/design/app_colors.dart'; +import '../../../../../core/utills/design/app_typography.dart'; + +class ProfileSummaryAppBar extends StatelessWidget + implements PreferredSizeWidget { + const ProfileSummaryAppBar({super.key}); + + @override + Size get preferredSize => Size.fromHeight(56); + @override + Widget build(BuildContext context) { + return SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(width: AppGaps.gap36), + Text( + "내가 작성한 코드프로필", + style: AppTypography.subtitle2.copyWith(color: AppColors.grey900), + ), + IconButton( + icon: const Icon(Icons.close), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + ); + } +}