diff --git a/lib/sign_up/presentation/pages/profile_area/profile_area_page.dart b/lib/sign_up/presentation/pages/profile_area/profile_area_page.dart new file mode 100644 index 0000000..cc4556e --- /dev/null +++ b/lib/sign_up/presentation/pages/profile_area/profile_area_page.dart @@ -0,0 +1,421 @@ +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 ProfileRegionPage extends StatefulWidget { + const ProfileRegionPage({super.key}); + + @override + State createState() => _ProfileRegionPageState(); +} + +class _ProfileRegionPageState extends State { + int? selectedMainRegionIndex; + int? selectedSubRegionIndex; + + final List mainRegions = [ + '서울', + '경기', + '부산', + '대구', + '인천', + '광주', + '대전', + '울산', + '세종', + '충북', + '충남', + '전북', + '전남', + '경북', + '경남', + '제주', + ]; + + final Map> subRegions = { + '서울': [ + '강남', + '강동', + '강북', + '강서', + '관악', + '광진', + '구로', + '금천', + '노원', + '도봉', + '동대문', + '동작', + '마포', + '서대문', + '서초', + '성동', + '성북', + '송파', + '양천', + '영등포', + '용산', + '은평', + '종로', + '중구', + '중랑', + ], + '경기': [ + '가평군', + '고양시', + '덕양구', + '일산동구', + '일산서구', + '과천시', + '광명시', + '광주시', + '구리시', + '군포시', + '김포시', + '남양주시', + '동두천시', + '부천시', + '소사구', + '오정구', + '원미구', + '성남시', + '분당구', + '수정구', + '중원구', + '수원시', + '권선구', + '영통구', + '장안구', + '팔달구', + '시흥시', + '안산시', + '단원구', + '상록구', + '안성시', + '안양시', + '동안구', + '만안구', + '양주시', + '양평군', + '여주시', + '연천군', + '오산시', + '용인시', + '기흥구', + '수지구', + '처인구', + '의왕시', + '의정부시', + '이천시', + '파주시', + '평택시', + '포천시', + '하남시', + '화성시', + ], + '부산': [ + '강서구', + '금정구', + '기장군', + '남구', + '동구', + '동래구', + '부산진구', + '북구', + '사상구', + '사하구', + '서구', + '수영구', + '연제구', + '영도구', + '중구', + '해운대구', + '해운대', + '서면', + '남포동', + '광안리', + '기장', + ], + '대구': ['군위군', '남구', '달서구', '달성군', '동구', '북구', '서구', '수성구', '중구', '동성로'], + '인천': [ + '강화군', + '계양구', + '남동구', + '동구', + '미추홀구', + '부평구', + '서구', + '연수구', + '옹진군', + '중구', + '송도', + '부평', + '청라', + ], + '광주': ['상무지구', '충장로', '광산구', '남구', '동구', '북구', '서구'], + '대전': ['대덕구', '동구', '서구', '유성구', '중구'], + '울산': ['남구', '동구', '북구', '울주군', '중구'], + '세종': ['세종 전체'], + '충북': [ + '괴산군', + '단양군', + '보은군', + '영동군', + '옥천군', + '음성군', + '제천시', + '증평군', + '진천군', + '청주시', + '상당구', + '서원구', + '청원구', + '흥덕구', + '충주시', + ], + '충남': [ + '계룡시', + '공주시', + '금산군', + '논산시', + '당진시', + '보령시', + '부여군', + '서산시', + '서천군', + '아산시', + '예산군', + '천안시', + '동남구', + '서북구', + '청양군', + '태안군', + '홍성군', + ], + '전북': [ + '고창군', + '군산시', + '김제시', + '남원시', + '무주군', + '부안군', + '순창군', + '완주군', + '익산시', + '임실군', + '장수군', + '전주시', + '전주시 덕진구', + '전주시 완산구', + '정읍시', + '진안군', + ], + '전남': [ + '강진군', + '고흥군', + '곡성군', + '광양시', + '구례군', + '나주시', + '담양군', + '목포시', + '무안군', + '보성군', + '순천시', + '신안군', + '여수시', + '영광군', + '영암군', + '완도군', + '장성군', + '장흥군', + '진도군', + '함평군', + '해남군', + '화순군', + ], + '경북': [ + '경산시', + '경주시', + '고령군', + '구미시', + '군위군', + '김천시', + '문경시', + '봉화군', + '상주시', + '성주군', + '안동시', + '영덕군', + '영양군', + '영주시', + '영천시', + '예천군', + '울릉군', + '울진군', + '의성군', + '청도군', + '청송군', + '칠곡군', + '포항시', + ], + '경남': [ + '거제시', + '거창군', + '고성군', + '김해시', + '남해군', + '밀양시', + '사천시', + '산청군', + '양산시', + '의령군', + '진주시', + '창녕군', + '창원시', + '창원시 마산합포구', + '창원시 마산회원구', + '창원시 성산구', + '창원시 의창구', + '창원시 진해구', + '통영시', + '하동군', + '함안군', + '함양군', + '합천군', + ], + '제주': ['서귀포시', '제주시'], + }; + + bool get isValid => + selectedMainRegionIndex != null && selectedSubRegionIndex != 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: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(height: screenHeight * 0.05), + Text("주로 어디서\n활동하시나요?", style: AppTypography.header1), + SizedBox(height: AppGaps.gap40), + Expanded( + child: Row( + children: [ + Expanded( + child: ListView.builder( + itemCount: mainRegions.length, + itemBuilder: (context, index) { + final isSelected = selectedMainRegionIndex == index; + return GestureDetector( + onTap: () { + setState(() { + selectedMainRegionIndex = index; + selectedSubRegionIndex = null; + }); + }, + child: Container( + padding: const EdgeInsets.symmetric(vertical: 16), + decoration: BoxDecoration( + color: isSelected ? null : AppColors.grey100, + ), + child: Center( + child: Text( + mainRegions[index], + style: AppTypography.body1.copyWith( + color: AppColors.grey900, + ), + ), + ), + ), + ); + }, + ), + ), + SizedBox(width: AppGaps.gap20), + Expanded( + child: + selectedMainRegionIndex == null + ? const SizedBox.shrink() + : ListView.builder( + itemCount: + subRegions[mainRegions[selectedMainRegionIndex!]]! + .length, + itemBuilder: (context, index) { + final subRegionName = + subRegions[mainRegions[selectedMainRegionIndex!]]![index]; + final isSelected = + selectedSubRegionIndex == index; + return GestureDetector( + onTap: () { + setState(() { + selectedSubRegionIndex = index; + }); + }, + child: Container( + padding: const EdgeInsets.symmetric( + vertical: 16, + horizontal: 8, + ), + decoration: BoxDecoration( + color: Colors.transparent, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text( + subRegionName, + style: AppTypography.body1.copyWith( + color: + isSelected + ? AppColors.primary + : AppColors.grey900, + ), + ), + if (isSelected) + const Icon( + Icons.check, + color: AppColors.primary, + size: 20, + ), + ], + ), + ), + ); + }, + ), + ), + ], + ), + ), + ], + ), + ), + ), + ); + } +}