📝 회원가입시 닉네임 유효성 검사

요구사항

회원가입시에 아래와 같이 유효성 검사를 진행했다.

유효성 검사 항목

1. 닉네임 길이가 2 이상이어야 한다.
2. 기존 닉네임과 중복되지 않아야 한다.

추가적인 요구사항

• 입력창이 focus 되어 있을 때에만 경고창이 뜨도록 한다.
• 아무것도 입력하지 않고 버튼을 눌렀을 때는 입력창이 focus되고, 2글자 이상 입력하라는 경고창이 뜨도록 한다.
• 기존 닉네임과 중복될 때는 입력창이 focus되고, 닉네임이 중복된다는 경고창이 뜨도록 한다.
• 이때, 입력 내용을 바꾸면 중복된다는 경고창이 사라지도록 한다.

요구사항 해결방식

1. 닉네임 길이가 2 이상이어야 한다.

👉🏻 입력창에 입력되는 내용을 state에 저장해 길이가 2 이상인지 체크한다.

2. 기존 닉네임과 중복되지 않아야 한다.

👉🏻 입력된 닉네임을 백엔드로 보내 중복 여부를 받아온다.

3. 입력창이 focus 되어 있을 때에만 경고창이 뜨도록 한다.

👉🏻 useRef를 이용해 입력창의 focus 이벤트를 감지하고, 이를 state에 저장한다. 이 state 값이 true일 때만 경고창이 뜨도록 설정한다.

4. 입력한 내용의 길이가 2보다 작은데 버튼을 눌렀을 때는 입력창이 focus되고, 2글자 이상 입력하라는 경고창이 뜨도록 한다.

👉🏻 닉네임 길이가 2보다 작을 때 focus를 true로 바꾼다.

5. 기존 닉네임과 중복될 때는 입력창이 focus되고, 닉네임이 중복된다는 경고창이 뜨도록 한다.

👉🏻 백엔드에서 중복됐다는 응답(400)을 받으면 focus와 isOverlap을 true로 바꾼다. 이때 입력한 값을 temp에 저장해둔다.

6. 이때, 입력 내용을 바꾸면 중복된다는 경고창이 사라지도록 한다.

👉🏻 현재 입력중인 값과 temp를 비교해서 같으면(여전히 중복되는 상태) 경고창을 계속 띄우고, 같지 않으면 경고창이 나오지 않게 한다.

구현 코드

const Nickname = () => {
  const [nickname, setNickName] = useState(""); // 닉네임 입력받기
  const [isOverlap, setIsOverlap] = useState(false); // 닉네임 중복 체크
  const [isFocused, setIsFocused] = useState(false); // focus 여부
  const [temp, setTemp] = useState(""); // 현재 입력값이 중복되는지 체크
  const inputRef = useRef(null); // focus 감지
  const navigate = useNavigate();

  const handleNavigateBack = () => {
    navigate(-1);
  };

  const handleNickName = e => {
    setNickName(e.target.value);
  };

  // focus 여부 감지
  useEffect(() => {
    const inputElement = inputRef.current;
    inputElement.addEventListener("focus", () => setIsFocused(true));
    inputElement.addEventListener("blur", () => setIsFocused(false));

    return () => {
      inputElement.removeEventListener("focus", () => setIsFocused(true));
      inputElement.removeEventListener("blur", () => setIsFocused(false));
    };
  }, []);

  const putNickName = async () => {
    if (nickname.length < 2) {
      setIsFocused(true);
    } else {
      const token = localStorage.getItem("bagtoken");

      try {
        const res = await axios.put(
          "https://server.bageasy.net/members/nickname",
          {
            nickname: nickname,
          },
          {
            headers: {
              Authorization: token,
            },
          },
        );
        console.log(res);
        if (res.status == "400") {
          setIsOverlap(true);
          setIsFocused(true);
          setTemp(nickname);
        }
        if (res.status == "200") {
          setIsOverlap(false);
          setIsFocused(false);
          setTemp("");
          navigate("/home");
        }
      } catch (error) {
        console.log(error);
      }
    }
  };

  return (
    <NickNameContainer>
      <ArrowIcon src={Arrow} onClick={handleNavigateBack} />
      <Copy>닉네임을 입력해주세요!</Copy>
      <Copy2>이후 닉네임 변경이 불가하니 신중하게 결정해주세요.</Copy2>
      <Container>
        <Input
          placeholder="여기에 입력하세요..."
          onChange={handleNickName}
          ref={inputRef}
          color={
            isFocused &&
            (nickname.length < 2 || (isOverlap && nickname === temp))
              ? "T"
              : "F"
          }
        />
        {isFocused && nickname.length < 2 && (
          <Copy3>- 닉네임을 2글자 이상 입력해주세요.</Copy3>
        )}
        {isFocused && isOverlap && nickname === temp && (
          <Copy3>- 중복되는 닉네임입니다.</Copy3>
        )}
      </Container>
      <Btn onClick={putNickName}>확인</Btn>
    </NickNameContainer>
  );
};