내일배움캠프 최종 프로젝트 - 프로필 페이지(6) 프로필과 회원가입

종료일 출력 수정

   // 게시글 정보를 불러오는 함수 내에서 deadline 처리 부분
   const deadline = docData.deadline || 'No deadline';

no deadline으로 나오는것을 deadline 필드값을 수정했다.

가입목적 추가

   // 회원가입 함수
   const clickJoinHandler = async (event) => {
     event.preventDefault();
     if (!validate()) return;
     
     setIsJoining(true);
     try {
       const userCredential = await createUserWithEmailAndPassword(auth, email, password);
       const user = userCredential.user;
       
       // Firestore에 사용자 정보 저장
       await setDoc(doc(db, 'users', user.uid), {
         email,
         birthdate: birthDate,
         nickname,
         joinPurpose, // 가입 목적 추가
       });

       await signOut(auth);
       Swal.fire('회원가입 성공!', '', 'success');
     } catch (error) {
       console.error(error);
       Swal.fire('회원가입 실패', error.message, 'error');
     } finally {
       setIsJoining(false);
     }
   };

회원가입할때 가입목적을 추가했다.

3. 컴포넌트 간의 상태 전달과 유효성 검사

여러 단계의 회원가입 과정에서 입력값의 유효성을 검사하고, 조건에 따라 다음 단계로 넘어가도록 구현함

   if (step === 6 && !joinPurpose) {
      setJoinPurposeCheck('가입 목적을 선택해주세요');
      isValid = false;
    } else {
      setJoinPurposeCheck('');
    }

4. 가입 목적 선택 및 Firestore에 저장

   // 회원가입 과정에서 가입 목적을 Firestore에 저장
   await setDoc(doc(db, 'users', user.uid), {
     // 기타 사용자 정보
     joinPurpose: joinPurpose,
   });

사용자가 선택한 가입 목적을 Firestore 데이터베이스에 문자열로 저장하는 로직 구현

문제 해결 방법

   // 상태 관리 함수 정의 예시
   const [joinPurposeCheck, setJoinPurposeCheck] = useState('');

상태 관리 함수 미정의 오류 해결을 위해, 해당 함수('setJoinPurposeCheck')를 정의하고, 필요한 곳에서 올바르게 사용했음

오늘의 한줄평 : 역시, 하면 된다.