뉴스피드 팀프로젝트 - 2

---

🧵 LoginForm 기능 구현

먼저 Firebase 에 있는 Authentication 을 사용해서 사용자의 인증을 관리한다. Firebase Authentication 에는 다양한 메서드가 제공되는데 그중에서 로그인 기능을 위해 사용할 메서드는 getAuth, onAuthStateChanged, signInWithEmailAndPassword 이다.

- 로그인 상태 관리

  useEffect(() => {
    const userLoginStatusChange = onAuthStateChanged(auth, (user) => {
      if (user) {
        // 사용자가 로그인 상태인 경우
        dispatch(setLoginStatus(true));
        console.log('로그인:', user);
      } else {
        // 사용자가 로그아웃 상태인 경우
        dispatch(setLoginStatus(false));
        console.log('로그아웃');
      }
    });
    return () => userLoginStatusChange();
  }, [auth, dispatch]);

useEffect 훅을 사용하여 페이지가 로드될 때 및 사용자의 로그인 상태가 변경될 때 onAuthStateChanged를 통해 사용자의 로그인 상태를 확인하고 Redux를 통해 상태를 관리하도록 했다.

- 이메일, 비밀번호 입력 관리

  const [loginEmail, setLoginEmail] = useState('');
  const [password, setPassword] = useState('');

  const onChange = (event) => {
    const {
      target: { name, value }
    } = event;
    if (name === 'email') {
      setLoginEmail(value);
    }
    if (name === 'password') {
      setPassword(value);
    }
  };

useState를 사용하여 이메일과 비밀번호를 관리하고, 입력 값이 변경될 때마다 onChange 함수가 호출되어 상태를 업데이트합니다.

- 로그인 및 에러 처리

  const signIn = async (event) => {
    event.preventDefault();
    try {
      const userCredential = await signInWithEmailAndPassword(auth, loginEmail, password);
      console.log('user with signIn', userCredential.user);

      dispatch(setLoginStatus(true));

      const querySnapshot = await getDocs(collection(db, 'profile'));
      querySnapshot.forEach((doc) => {
        const data = doc.data();
        if (data.email === loginEmail) {
          dispatch(loginProfileMaker(data));
          sessionStorage.setItem('currentUser', JSON.stringify(data));
        }
      });
      navigate('/');
    } catch (error) {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log('error with singIn', errorCode, errorMessage);
      sessionStorage.setItem('currentUser', null);

      if (errorCode === 'auth/invalid-credential') {
        alert('잘못된 이메일 또는 비밀번호입니다. 다시 시도해주세요.');
      }
    }
  };

이메일과 비밀번호를 입력하고 로그인 버튼을 클릭하면 "signIn" 함수를 호출한다. "signIn" 함수는 Firebase 의 signInWithEmailAndPassword 메서드를 사용해서 로그인을 처리를 하고, 성공 시 Redux 를 통해서 이메일과 로그인 상태를 업데이트 한다. 만약 실패할 경우 에러 메세지를 alert 를 통해서 에러상태를 보여준다. 이후 로그인이 정상적으로 됐으면 useNavigate 를 사용해서 메인 페이지로 이동시켜준다.

---

🚨 발생한 문제 및 해결방안

처음엔 getDocs 로 컬렉션에 데이터를 넣을 때 user 라는 컬렉션으로 만들어서 넣게됐는데, 이 때 프로필이랑 연동시키는 과정에서 프로필은 profile 이라는 컬렉션으로 데이터를 넣고있었다. 서로 컬렉션이 달라서 연동과정에서 문제가 발생했고, 컬렉션을 새로 만들지 말고 기존에 프로필 관리 때 사용하던 profile 이라는 컬렉션에 로그인 유저의 데이터를 넣어서 해결 할 수 있었다.