1️⃣ 로그인, 회원가입

로그인, 회원가입 기능은 모두 모달창 안에서 수행되도록 구현했다.

Firebase 인증 설정

먼저, firebase의 authentication을 사용하기 위해서 firebase.js에 auth를 import해야 한다.

import "firebase/auth";
import firebase from "firebase/app";

const auth = firebase.auth;

export { auth };

그리고 firebase에서는 Authentication을 시작해야 한다.

우리는 Sign-in method를 이메일/비밀번호로 설정하여 사용자의 이메일 주소, 비밀번호만으로 회원가입할 수 있도록 했다.

모달창 구현

<ModalContainer> 안의 내용은 로그인, 회원가입 화면으로 나뉘기 때문에 이를 tab과 삼항연산자를 이용하여 모달창 안의 내용이 tab의 상태에 따라 바뀌도록 구현했다.

우리는 로그인 화면을 보여줄 때는 tab을 1로, 회원가입 화면을 보여줄 때는 tab을 0으로 지정했다.

처음 모달창을 눌렀을 때는 로그인 화면이 보이기 때문에 초기값을 1로 설정했다.

로그인 모달창의 하단에 있는 부분

그리고 로그인 화면에서 회원가입 화면으로 넘어가기 위해서는 하단의 회원가입 글자를 클릭하면 된다. 이때, onClick시에 setTab(0)이 되어 tab의 값이 0이 되기 때문에 모달창의 내용이 회원가입으로 바뀌게 된다.