[TIL] 내배캠4기-NextJs-128일차

이번 주는 유저피드백을 받기 시작하고 유의미한 피드백을 골라 프로젝트에 반영하려고 한다.
먼저 들어온 피드백에 고유한 닉네임을 설정할 수 있으면 좋겠다는 의견이 있었고,
기존에 구현한 마이페이지를 유저별 개인페이지로 바꾸며 고유 닉네임이여야 사용자들이 구분할 수 있을 것 같다는 생각이 들었다.

그래서 회원가입에 닉네임 중복체크 기능을 붙였다🥹

  // 닉네임 중복체크
  const nicknameDuplicate = async () => {
    const { nickname } = getValues();
    const nickNameCheck = query(
      collection(dbService, "user"),
      where("userNickname", "==", nickname)
    );
    const querySnapshot = await getDocs(nickNameCheck);
    const newData = querySnapshot.docs;

    if (newData.length == 0 && nickname.length > 0) {
      toastAlert("사용 가능한 닉네임입니다.");
      setSaveNickname(nickname);
      setNicknameCheck(true);
      return setNotNicknameDuplicateCheck(false);
    } else {
      if (nickname.length != 0) {
        toastAlert("이미 다른 유저가 사용 중입니다.");
      } else {
        toast.warn("알 수 없는 에러로 사용할 수 없습니다.");
      }
      setNicknameCheck(false);
      return setNotNicknameDuplicateCheck(true);
    }
  };

구글링해보니 파이어베이스 db에서 실시간으로 검사할 수 있게 구현해놓은 사례가 많았다.
우선 onChange 될 때마다 value값을 비교하도록 짰다.

 <label htmlFor="nickname" className="font-semibold mt-4">
          닉네임
        </label>
        <div className="relative">
          <div className="flex items-center">
            <input
              {...register("nickname", {
                required: "닉네임을 입력하세요",
                maxLength: {
                  message: "최대 8자까지 입력가능합니다",
                  value: 8,
                },
                onChange: () => {
                  setNotNicknameDuplicateCheck(true);
                },
                pattern: {
                  value: nickRegex,
                  message: "8자 이하의 영어, 숫자, 한글로만 입력해주세요.",
                },
                validate: {
                  value: () =>
                    nicknameCheck ||
                    "닉네임 중복 체크 후 고유한 닉네임으로 설정해주세요",
                },
              })}
              id="nickname"
              type="text"
              placeholder="닉네임 입력"
              className="register-input"
            ></input>
            <div
              className="mt-2 ml-10 cursor-pointer text-brand100 hover:text-white border border-brand100 hover:bg-brand100 font-medium text-sm px-2 py-2 text-center"
              onClick={nicknameDuplicate}
            >
              중복 체크
            </div>
          </div>
          <p
            className={cls(
              errors.nickname
                ? "mt-[5px] text-red100 text-xs"
                : "mt-[5px] h-[16px]"
            )}
          >
            {errors.nickname?.message}
          </p>
        </div>

이미 회원가입이 react-hook-form을 사용해서 구현이 되어있었고, 여기에 닉네임 관련 코드를 붙이자니 너무 어려워서 문서도 계속 찾아봤다. 시간이 없어 최대한 ui가 망가지지 않고 useForm도 살리는 쪽으로 구현해보았다.