뉴스피드 팀프로젝트 2일차

내가 맡은 부분은 firebase를 이용하여 로그인을 할 수 있게 하는 것이다.
헤더부분을 레이아웃으로 모든 페이지에 나타나도록 설정하고, 그 부분에 회원가입,로그인,로그아웃 기능을 구현했다.

먼저 components폴더에 layouts폴더를 만든 후 layout.jsx, header.jsx에 코드를 적고
props.children을 이용하여 필요한 페이지에 레이아웃을 설정해주었다.

삼항연산자를 사용하여 처음 렌더링되면 회원가입과 로그인 버튼이 나타나고, 로그인을 완료하면 마이페이지와 로그아웃 버튼으로 바뀌도록 구현했다.


회원가입과 로그인 버튼을 누르면 모달창이 뜨고, 그 부분에서 회원가입, 로그인을 할 수 있도록 했다.

function SignUpLogIn() {
  const [logInModal, setLogInModal] = useState(false);
  const [signUpmodal, setSignUpModal] = useState(false);
  const [doneLogin, setDoneLogin] = useState(false);
  const navigate = useNavigate();

  const logOut = async (event) => {
    event.preventDefault();
    await signOut(auth);
    setDoneLogin(false);
    setLogInModal(false);
  };

  return (
    <div>
      {doneLogin ? (
        <div>
          <BtnWrap>
            <LoginSignUpBtn onClick={() => navigate('/mypage')}>마이페이지</LoginSignUpBtn>
            <LoginSignUpBtn onClick={logOut}>로그아웃</LoginSignUpBtn>
          </BtnWrap>
          {signUpmodal === true ? (
            <ModalWrap>
              <ModalBody>
                <CloseBtn onClick={() => setSignUpModal(!signUpmodal)}>&times;</CloseBtn>
                <SignUp />
              </ModalBody>
            </ModalWrap>
          ) : null}
        </div>
      ) : (
        <div>
          <BtnWrap>
            <LoginSignUpBtn
              onClick={() => {
                setSignUpModal(true);
              }}
            >
              회원가입
            </LoginSignUpBtn>
            {signUpmodal === true ? (
              <ModalWrap>
                <ModalBody>
                  <CloseBtn onClick={() => setSignUpModal(!signUpmodal)}>&times;</CloseBtn>
                  <SignUp setSignUpModal={setSignUpModal} />
                </ModalBody>
              </ModalWrap>
            ) : null}
            <LoginSignUpBtn
              onClick={() => {
                setLogInModal(true);
              }}
            >
              로그인
            </LoginSignUpBtn>
          </BtnWrap>

          {logInModal === true ? (
            <ModalWrap>
              <ModalBody>
                <CloseBtn onClick={() => setLogInModal(!logInModal)}>&times;</CloseBtn>
                <Login setDoneLogin={setDoneLogin} />
              </ModalBody>
            </ModalWrap>
          ) : null}
        </div>
      )}
    </div>
  );
}

firebase를 사용하기 위해 root에 firebase.js폴더를 만들고 필요한 값들을 firebase콘솔에서 가져온다. 그리고 firebase에 나와있는 필요한 메서드를 가져와서 쓰면 된다. 아래 코드는 회원가입 기능을 구현한 코드이다.

function SignUp({ setSignUpModal }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const signUp = async (event) => {
    event.preventDefault();
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      console.log('user', userCredential.user);
      alert('회원가입이 완료되었습니다.');
      setSignUpModal(false);
    } catch (error) {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log('error with signUp', errorCode, errorMessage);
      alert('이미 등록되었거나 사용할 수 없는 이메일입니다.');
    }
  };

아직 리팩토링이 필요한 코드들이지만 기능이 작동한다는 것에 의의를,,,
내일은 구글을 이용해 회원가입을 할 수 있는 코드를 짜 볼 예정이다.