[React + TypeScript + Firebase] 식단어때(How-about-the-diet) 회원 프로필 수정

✨ 회원 프로필 수정 결과물

https://www.youtube.com/watch?v=x3kbfRrf0AM&list=PLR8FoyenzZ0W097_SdzTomj8VL4s6R_nY&index=11

 

 

 

 

 

---

🥬 회원 프로필 수정

💡 회원가입 시 지정한 '닉네임' 재설정 및 찜리스트에서 화면 표시
💡 회원가입 시 지정한 '비밀번호' 재설정 및 재로그인

 

 

 

 

🌽 onSubmit 함수

const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault()
  setdisplayNameUpdate(true)
  
  // displayName 업로드
  .
  .
  
  // password 업로드
  .
  .
  
  setdisplayNameUpdate(false)
}

✅ 닉네임과 패스워드 재설정을 위해 form을 사용하여 함수 onSubmit을 생성 후 적용
✅ onSubmit 함수에서 닉네임, 패스워드 재설정

 💁‍♀️ setdisplayNameUpdate(true or false)
닉네임 변경 시, 수정 버튼을 클릭한 후에만 재설정한 displayName이 반영되도록 하기 위해 사용
- setdisplayNameUpdate(true)는 displayName 업데이트 작업이 진행 중인지를 나타내는 상태 변수
- setdisplayNameUpdate(false)는 displayName 업데이트 작업이 완료되었음을 나타내는 상태 변수

 

 

 

 

🥒 닉네임(displayName) 재설정

if(userObj?.displayName !== newDisplayName) {
  await userObj?.updateProfile({
    displayName: newDisplayName
  })
}

✅ 기존 닉네임과 새로 작성한 닉네임이 같지 않다면, updateProfile 메서드를 통해 displayName에 재설정할 닉네임을 newDisplayName으로 받아 업로드

 

 

 

 

🥑 비밀번호(password) 재설정

if(password !== '') {
  try {
    await authService.currentUser?.updatePassword(password)
    alert('비밀번호가 변경되었습니다.')
    setPassword('')
  } catch (error) {
    const authError = error as firebase.auth.Error
    if (authError.code === 'auth/weak-password') {
      alert('비밀번호는 6자리 이상 입력해주세요.')
    }
  }
}

✅ firebase.auth()의 현재사용자를 불러와 updatePassword 메서드에 재설정할 비밀번호를 할당한 password를 업로드
✅ try-catch문을 통해 만약 재설정한 비밀번호가 6자리 이하라면 알림 창으로 경고

 

 

 

 

---

👋🏻 마무리

프로필 페이지를 추가하여 회원의 닉네임과 비밀번호를 재설정하는 화면도 추가로 구현하였다.
사진도 업로드 하여 회원이 원하는 이미지를 넣고 싶었지만, 코드가 꼬여 계속 이미지가 깨지는 상황이 발생했다.. 🫠
비밀번호도 변경한 비밀번호를 화면에 표시하고 싶었지만, 보안상의 이유로 비밀번호가 화면에 보이는 것은 권장되지 않는다고 하여 표시하지는 않았다.
회원가입 시 설정한 닉네임과 비밀번호를 수정하는 기능을 만들었지만 회원 프로필 화면이 왜 이리 단출해 보이는지.. 
역시 사진을 어떻게든 구현해야하나.. 아니면 새로운 정보도 넣을까.. 고민이 된다 🤔

아! 로그아웃이 찜리스트 말고 마이페이지에 있어야 할 것 같아서 로그아웃 버튼도 마이페이지로 가져왔다 😁