Skip to content
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

Jump to bottom

MentorIntroductionScreen 추가 #62

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

MentorIntroductionScreen 추가 #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
180 changes: 176 additions & 4 deletions lib/features/mypage/mentor_introduce/mentor_introduce_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,183 @@
import 'package:cogo/features/mypage/mentor_introduce/mentor_introduce_view_model.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:cogo/common/widgets/widgets.dart';

class MentorIntroduceScreen extends StatelessWidget {
const MentorIntroduceScreen({super.key});
class MentorIntroductionScreen extends StatelessWidget {
const MentorIntroductionScreen({super.key});

@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(child: Text('MentorIntroduce Screen')),
return ChangeNotifierProvider(
create: (_) => MentorIntroductionViewModel(),
child: Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Header(
title: '멘토 자기소개',
subtitle: '',
onBackButtonPressed: () => Navigator.of(context).pop(),
),
const SizedBox(height: 10),
Consumer<MentorIntroductionViewModel>(
builder: (context, viewModel, child) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 제목 필드
_buildTitleTextField(
viewModel, '제목', viewModel.introController),
const SizedBox(height: 10),
//자기소개 입력
_buildTextFieldWithCounter(
viewModel,
'자기소개를 입력해주세요',
viewModel.question1Controller,
viewModel.question1CharCount,
200),
const SizedBox(height: 10),
// 첫 번째 질문
const Text(
'어느 분야에서 멘토링 가능하신가요?',
style: CogoTextStyle.body16,
),
const SizedBox(height: 10),
_buildTextFieldWithCounter(
viewModel,
'답변을 입력해주세요',
viewModel.question2Controller,
viewModel.question2CharCount,
200),
const SizedBox(height: 20),
// 두 번째 질문
const Text(
'질문질문.... 자기소개 유도 질문...',
style: CogoTextStyle.body16,
),
const SizedBox(height: 10),
_buildTextFieldWithCounter(
viewModel,
'답변을 입력해주세요',
viewModel.question3Controller,
viewModel.question3CharCount,
200),
],
);
},
),
const SizedBox(height: 30),
// 저장하기 버튼
Center(
child: SizedBox(
width: double.infinity,
height: 50,
child: Consumer<MentorIntroductionViewModel>(
builder: (context, viewModel, child) {
return ElevatedButton(
onPressed: viewModel.isFormValid
? () => viewModel.saveIntroduction(context)
: null,
style: ElevatedButton.styleFrom(
backgroundColor: viewModel.isFormValid
? Colors.black
: Colors.grey[300],
foregroundColor: viewModel.isFormValid
? Colors.white
: Colors.black,
textStyle: const TextStyle(
fontFamily: 'PretendardMedium',
fontSize: 18,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
child: const Text('저장하기'),
);
},
),
),
),
],
),
),
),
),
),
);
}

/// widgets -> components -> basic textfield로 바꾸시면 됩니다
// 제목 필드를 따로 만드는 헬퍼 메서드
Widget _buildTitleTextField(MentorIntroductionViewModel viewModel,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

compose에서는 뷰모델을 통째로 넘겨주는게 아니라 뷰모델의 함수만 넘겨주는게 정석이긴한데, 플러터에서도 그런지는 모르겠어요! 해당 위젯이 뷰모델 전체를 알아야할 필요성은 없어보이긴 합니당

String hintText, TextEditingController controller) {
return Container(
height: 50,
padding: const EdgeInsets.symmetric(horizontal: 16.0),
decoration: BoxDecoration(
color: const Color(0xFFF7F7F7),
borderRadius: BorderRadius.circular(20),
),
child: TextField(
controller: controller,
maxLength: 50,
maxLines: 1, // 한 줄로만 표현
decoration: InputDecoration(
hintText: hintText,
hintStyle: CogoTextStyle.unselectedText2,
border: InputBorder.none,
counterText: '', // 기본 카운터 숨기기
),
onChanged: (text) {
viewModel.updateCharCount(controller); // 글자 수 업데이트
},
),
);
}

// 일반 TextField와 글자 수 카운터를 표시하는 헬퍼 메서드
Widget _buildTextFieldWithCounter(
MentorIntroductionViewModel viewModel,
String hintText,
TextEditingController controller,
int currentCount,
int maxCount) {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: const Color(0xFFF7F7F7),
borderRadius: BorderRadius.circular(20),
),
child: TextField(
controller: controller,
maxLength: maxCount,
maxLines: 5, // 여러 줄 입력 가능
decoration: InputDecoration(
hintText: hintText,
hintStyle: CogoTextStyle.unselectedText2,
border: InputBorder.none,
counterText: '', // 기본 카운터 숨기기
),
onChanged: (text) {
viewModel.updateCharCount(controller); // 글자 수 업데이트
},
),
),
const SizedBox(height: 5),
Text(
'$currentCount/$maxCount', // 실시간으로 글자 수를 표시
style: CogoTextStyle.unselectedText2,
),
],
);
}
}
55 changes: 55 additions & 0 deletions lib/features/mypage/mentor_introduce/mentor_introduce_view_model.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import 'package:flutter/material.dart';

class MentorIntroductionViewModel extends ChangeNotifier {
// TextEditingController로 각 필드 관리
final TextEditingController introController = TextEditingController();
final TextEditingController question1Controller = TextEditingController();
final TextEditingController question2Controller = TextEditingController();
final TextEditingController question3Controller = TextEditingController();

bool isFormValid = false;

// 각 텍스트 필드의 글자 수를 계산
int get introCharCount => introController.text.length;
int get question1CharCount => question1Controller.text.length;
int get question2CharCount => question2Controller.text.length;
int get question3CharCount => question3Controller.text.length;

MentorIntroductionViewModel() {
// 각 컨트롤러에 리스너를 추가하여 값이 변경될 때마다 상태를 확인
introController.addListener(_validateForm);
question1Controller.addListener(_validateForm);
question2Controller.addListener(_validateForm);
question3Controller.addListener(_validateForm);
}

// 텍스트가 변경될 때마다 유효성 검사 수행
void _validateForm() {
isFormValid = introController.text.isNotEmpty &&
question1Controller.text.isNotEmpty &&
question2Controller.text.isNotEmpty &&
question3Controller.text.isNotEmpty;
notifyListeners();
}

// 글자 수 업데이트
void updateCharCount(TextEditingController controller) {
notifyListeners(); // 글자 수 변화를 알림
}

// 데이터를 저장하는 함수
void saveIntroduction(BuildContext context) {
//TODO : 데이터 저장 로직 구현
Navigator.of(context).pop(); // 저장 후 화면 종료
}

// ViewModel이 제거될 때 Controller도 함께 해제
@override
void dispose() {
introController.dispose();
question1Controller.dispose();
question2Controller.dispose();
question3Controller.dispose();
super.dispose();
}
}