8. 마이프로필 - 프로필 정보 추가하기

프론트엔드 만들기

내가 만들 ui는 

프로필 ui이다. 일단 아이정보를 받기 이전에는 등록된 정보가 없다고 떠야 되고 

있다면 파이어베이스 서버에서 불러오는 작업을 할 예정이다.

 

 

제일 먼저 해야될 일 프로필 정보 프론트로 만들기

밑에는 만드는 과정

 

 

관심사 밑에 버튼은 안만든 이유가 아직 피그마가 완전하지 않아서 마지막에 넣도록 하겠습니다.

 

이제 입력을 받을 정보 등록 하면을 만들어 보도록 하겠습니다.

 

이건 앞전에 만들었던 정보를 토대로 만들어서 빠르게 만들었습니다.

 

---

컨트롤러

 

일단 아이의닉네임,성별,생년월일,키,몸무게 를 입력받는 컨트롤러를 만들어줍니다.

final TextEditingController nicknameController = TextEditingController(); // Child's Nickname
final TextEditingController genderController = TextEditingController(); // Gender
final TextEditingController birthDateController = TextEditingController(); // Birth Date
final TextEditingController heightController = TextEditingController(); // Height
final TextEditingController weightController = TextEditingController(); // Weight

 

 

 

 

앞전에 만들어둔 닉네임 위젯과 생년월일  위젯은 형식이 다르기 때문에

못쓰기 때문에

 

숫자만 입력가능한 위젯을 하나 만들어주고 

Widget inputField3(TextEditingController controller, String hintText,
    Function(String) onChanged) {
  return Container(
    width: 328,
    height: 54,
    decoration: ShapeDecoration(
      color: Colors.white,
      shape: RoundedRectangleBorder(
        side: BorderSide(width: 1, color: Color(0xFF888888)),
        borderRadius: BorderRadius.circular(4),
      ),
    ),
    padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
    child: TextField(
      controller: controller,
      onChanged: onChanged,
      decoration: InputDecoration(
        hintText: hintText,
        hintStyle: TextStyle(
          color: Color(0xFFB0B0B0),
          fontSize: 14,
          fontFamily: 'Pretendard',
          fontWeight: FontWeight.w500,
          height: 2.7,
          letterSpacing: -0.35,
        ),
        border: InputBorder.none, // 테두리 없음
      ),
      style: TextStyle(
        color: Color(0xFF3D3D3D),
        fontSize: 14,
        fontFamily: 'Pretendard',
        fontWeight: FontWeight.w500,
        height: 2.7,
        letterSpacing: -0.35,
      ),
      // 숫자만 입력 가능하게 하고 최대 3자리로 제한
      keyboardType: TextInputType.number,
      inputFormatters: [
        FilteringTextInputFormatter.digitsOnly, // 숫자만 허용
        LengthLimitingTextInputFormatter(3), // 최대 3자리 제한
      ],
    ),
  );
}

 

 

인풋필드를 하나만들어줍니다.

inputField3(heightController, 'cm', (value) {
  setState(() {}); // 텍스트 변화 시 상태 업데이트
}),

 

 

이렇게되면 기본 준비는 끝

 

---

백엔드 - 저장하기 

 

 

 

파이어베이스 저장하기 버튼을 눌렀을때

인풋필드와 성별 버튼이 저장되게 만들기 위해서 

저장할 이름과 컨트롤러를 연결시켜주고

사용자 uid를 기준으로 저장하게 만들어 줍니다!

또한 

 SetOptions(merge: true)); // merge: true로 설정하여 기존 필드에 추가 및 업데이트를 위해

적어줍니다.

Future<void> saveBabyInfo() async {
  try {
    // 현재 사용자 ID 가져오기
    String userId = auth.currentUser?.uid ?? ''; // 현재 로그인한 사용자 UID

    if (userId.isEmpty) {
      print('User is not logged in');
      return; // 로그인이 되어 있지 않으면 함수 종료
    }

    String gender = isMaleSelected ? '남자' : '여자'; // 선택된 성별

    // Firestore에서 아기 정보 문서 참조 가져오기
    // 사용자 UID를 사용하여 문서 ID 생성
    DocumentReference babyDoc = firestore.collection('users').doc(userId).collection('baby').doc(userId); // 사용자 UID를 문서 ID로 사용

    // Firestore에 데이터 저장 (문서가 없으면 생성하고, 있으면 업데이트)
    await babyDoc.set({
      'nickname': nicknameController.text,
      'BirthDate': BirthDateController.text, // 생년월일
      'height': heightController.text,
      'weight': weightController.text,
      'gender': gender,
    }, SetOptions(merge: true)); // merge: true로 설정하여 기존 필드에 추가 및 업데이트

    print('Baby info saved successfully!');
  } catch (e) {
    print('Error saving baby info: $e');
  }
}

 

---

백엔드 - 불러오기

또한 파이어베이스에 저장된 정보를 불러오기 위해

user컬렉션안에 하위컬렉션 baby 를 불러와서 정보가 다시 들어가게 만들었습니다.

Future<void> loadBabyInfo() async {
  try {
    // 현재 사용자 ID 가져오기
    String userId = auth.currentUser?.uid ?? ''; // 현재 로그인한 사용자 UID

    if (userId.isEmpty) {
      print('User is not logged in');
      return; // 로그인이 되어 있지 않으면 함수 종료
    }

    // Firestore에서 아기 정보 불러오기
    DocumentSnapshot babyDoc = await firestore.collection('users').doc(userId).collection('baby').doc(userId).get();

    if (babyDoc.exists) {
      // 문서의 데이터를 가져와서 입력 필드에 설정
      var babyData = babyDoc.data() as Map<String, dynamic>;

      loadedNickname = babyData['nickname'] ?? '';
      loadBirthDate = babyData['BirthDate'] ?? ''; // 생년월일
      loadedHeight = babyData['height'] ?? '';
      loadedWeight = babyData['weight'] ?? '';
      loadedGender = babyData['gender'] ?? ''; // 성별 정보 로드

      // 입력 필드에 로드한 데이터 설정
      nicknameController.text = loadedNickname;
      BirthDateController.text = loadBirthDate;
      heightController.text = loadedHeight;
      weightController.text = loadedWeight;

      // 성별에 따라 버튼 선택 상태 업데이트
      if (loadedGender == '남자') {
        selectMale(); // 남자 선택
      } else if (loadedGender == '여자') {
        selectFemale(); // 여자 선택
      }

      print('Baby info loaded successfully!');
    } else {
      print('No baby info found for this user.');
    }
  } catch (e) {
    print('Error loading baby info: $e');
  }
}