내일배움캠프 최종 프로젝트 - 로그인과 회원가입 (1)

이번 프로젝트에서는 회원가입과 로그인을 맡아보았다.
한번도 안해본 기능이라 이번에 욕심이 나서 강력하게 어필했던 것 같다.
일단 아주 기본적인 회원가입과 로그인기능을 구현하기로 했다.
유효성검사나 회원가입시 아이디 글자수 제한 이런건 없고, 그냥 딱 기본만 해보았다.
추가적인 업데이트는 해야할 것이다..

로그인 페이지

1. 먼저 상태 설정해주기

const AuthPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const router = useRouter();
};

2. 로그인 버튼 클릭 이벤트 핸들러 함수 만들기

• 로그인 버튼 클릭 시 실행할 이벤트 핸들러 함수 만들기
• firebase의 'signInWithEmailAndPassword' 함수를 사용하여 이 메일과 비밀번호를 통한 로그인 시도
• 성공 시 로그인 상태를 변경하고 메인 페이지로 이동

const clickLoginHandler = async (event: React.FormEvent) => {
  event.preventDefault();
  try {
    await signInWithEmailAndPassword(auth, email, password);
    setIsLoggedIn(true);
    alert('로그인완료');
    router.replace('main');
  } catch (error) {
    console.error(error);
    alert(error);
  }
};

3. UI 렌더링

return (
  <form onSubmit={clickLoginHandler}>
    <label htmlFor="email">이메일</label>
    <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="이메일 입력" />
    <label htmlFor="password">비밀번호</label>
    <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="비밀번호 입력" />
    <button type="submit">로그인</button>
  </form>
);

회원가입 페이지

• 이것도 로그인과 거의 같은 맥락으로 만든 것 같다.

1. 먼저 상태 설정해주기

const JoinPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [birthDate, setBirthDate] = useState('');
  const [nickname, setNickname] = useState('');
  const router = useRouter();

2.회원가입 버튼 클릭 이벤트 핸들러 함수 만들기

• 함수는 비밀번호 일치 여부를 확인하고, firebase의 'createUserWithEmailAndPassword' 함수를 사용하여 이메일과 비밀번호를 통한 회원가입시도
• 성공 시 사용자 추가 정보를 Firestore에 저장 후 로그인 페이지로 이동

const clickJoinHandler = async (event: React.FormEvent) => {
  event.preventDefault();
  //비밀번호 일치 확인
  if (password !== confirmPassword) {
    alert('비밀번호가 일치하지 않습니다.');
    return;
  }
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;

    // Firestore에 사용자 추가 정보 저장
    await setDoc(doc(db, 'users', user.uid), {
      birthdate: birthDate,
      nickname,
    });

    alert('가입완료');
    router.replace('auth');
  } catch (error) {
    console.error(error);
    alert(error);
  }
};

3. UI 렌더링

return (
  <form onSubmit={clickJoinHandler}>
    <label htmlFor="email">이메일</label>
    <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="이메일" />
    <label htmlFor="password">비밀번호</label>
    <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="비밀번호" />
    <label htmlFor="confirmPassword">비밀번호 확인</label>
    <input
      type="password"
      value={confirmPassword}
      onChange={e => setConfirmPassword(e.target.value)}
      placeholder="비밀번호 확인"
    />
    <label htmlFor="birthdate">생년월일</label>{' '}
    <input type="date" value={birthDate} onChange={e => setBirthDate(e.target.value)} placeholder="생년월일" />
    <label htmlFor="nickname">닉네임</label>{' '}
    <input type="text" value={nickname} onChange={e => setNickname(e.target.value)} placeholder="닉네임" />
    <button type="submit">회원가입</button>
  </form>
);

오늘의 한줄평 : 와, 쉬우면서 어렵...다? 일단 내일도 열심히 할 것이다!