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

오늘 진행한 것은 다음과 같다.

닉네임 중복 확인하기 + 빈 칸인 경우 메시지 출력

const checkNicknameCheckHandler = async () => {
  if (nickname.trim() === '') {
    alert('닉네임을 입력해주세요.');
    return;
  }
  try {
    const q = query(collection(db, 'users'), where('nickname', '==', nickname));
    const querySnapshot = await getDocs(q);
    if (!querySnapshot.empty) {
      alert('현재 입력하신 닉네임은 사용중입니다. 다른 닉네임을 입력해주세요.');
      setIsNicknameAvailable(false);
    } else {
      alert('사용 가능한 닉네임입니다.');
      setIsNicknameAvailable(true);
    }
  } catch (error) {
    console.error('닉네임 중복 확인 중 오류 발생:', error);
  }
};

//ui 렌더링
      <Input
          type="email"
          label="이메일"
          value={email}
          onChange={e => setEmail(e.target.value)}
          placeholder="이메일을 입력해주세요."
        />
        <Button onClick={clickEmailCheckHandler} type="button">
          이메일 중복 확인
        </Button>

☞ firestore database에 있는 nickname과 일치하는지 중복 닉네임 관련 기능을 만들었다. 그리고 빈칸 인 경우, 메세지 출력하기로 했다.

이메일 중복 확인

const clickEmailCheckHandler = async () => {
  if (!email.trim()) {
    alert('이메일을 입력해주세요.');
    return;
  }

  try {
    const q = query(collection(db, 'users'), where('email', '==', email));
    const querySnapshot = await getDocs(q);
    if (!querySnapshot.empty) {
      alert('현재 입력하신 이메일은 사용 중입니다.다른 이메일을 입력해주세요.');
      setIsEmailAvailable(false);
    } else {
      alert('사용 가능한 이메일입니다.');
      setIsEmailAvailable(true);
    }
  } catch (error) {
    console.error('이메일 중복 확인 중 오류 발생:', error);
  }
};

☞ 이메일도 같은 맥락이다. firebase에서 지원하는 Authentication에서는 가입전에 이메일을 사용중인 로직이 없어서 회원가입 버튼을 클릭할때 함께 이메일 정보도 firestore database에 추가 되도록 했다

Next ui 적용

import { Button, Input } from '@nextui-org/react';

<Input type="email" label="이메일" ... />
<Button onClick={clickEmailCheckHandler} type="button">이메일 중복 확인</Button>

☞ yarn add @nextui-org/react framer-motion 로 설치하고 아래의 문서를 참고해서 만들었다. 스타일링은 재밌다.

공식문서

이메일과 비밀번호 정규 표현식

const emailValidation = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
const passwordValidation = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;

 // 이메일 유효성 검사
    if (!emailValidation.test(email)) {
      alert('유효한 이메일 주소를 입력해주세요.');
      return;
    }

    // 비밀번호 유효성 검사
    if (!passwordValidation.test(password)) {
      alert('비밀번호는 8자 이상이어야 하며, 숫자와 특수문자를 포함해야 합니다.');
      return;
    }
    

☞ 비밀번호는 8자 이상, 숫자와 특수문자를 포함하도록 했고, 이메일은 이메일 형식인지 정규 표현식을 적용했다.

닉네임 길이 제한

  <Input
          type="text"
          label="닉네임"
          value={nickname}
          onChange={e => setNickname(e.target.value)}
          placeholder="닉네임을 입력해주세요. "
          maxLength={10}
        />

☞ 일단 매우 간단하게 maxlength를 적용했다.

오늘의 난제

이메일 중복 체크 할 때, 닉네임과 동일하게 생각했던게 문제 였을까
당연히 그당시에는 firestore db에는 이메일이 없으니까 등록되어있는 이메일도 사용가능하다고 떴었다. 그래서 그 뒤로 가입할때 이메일도 함께 저장하는 로직을 만들었지만 말이다.

오늘의 한줄평 : 천리길도 한걸음부터, 너무서두르지 말자. 하나부터 하면 다 할수 있어.