Weekly I Learned - 08

2022-12-30(금) ~ 2023-01-05(목)

1. 실전 프로젝트를 진행하며 기술적으로 막혔던 부분

중복체크 버튼에 시간을 많이 소요했음.

• 아이디 형식이 맞지 않을 때 중복체크를 누르면 밑에 p태그로 알리는 부분
• 아이디 중복체크를 눌렀을 때 사용가능한 아이디면 버튼을 disabled 처리하는 부분
• 중복체크를 안했을 때 회원가입이 되지 않도록 처리하는 부분

2. 해결했다면 어떻게 해결했는지 과정 작성 기록

• 아이디 형식이 맞지 않음을 알려주기 위해서 아이디정규식을 구글링해서 알맞는 것을 찾아 넣어주었음

function isId(userId) {
    var regExp = /^(?=.*[0-9]+)[a-zA-Z][a-zA-Z0-9]{5,10}$/g;
    return regExp.test(userId);
  }

• 사용가능한 아이디면 중복체크 버튼을 disabled 처리하는 부분

const [checkUserId, setCheckUserId] = useState(false);

const checkUserIdHandler = (userId) => {
    __checkUserId(userId).then((res) => {
      if (isId(userId) === false) {
        alert("ID는 영문 소문자, 숫자로 5~10자입니다.");
      } else {
        console.log(res);
        if (res === 200) {
          setCheckUserId(true);
          setCheckP("사용 가능한 ID입니다");
        } else if (res === 400) {
          setCheckUserId(false);
          setCheckP("이미 사용중인 ID입니다");
        }
      }
    });
  };

<StBtn
   IdCheckBtn
   disabled={checkUserId}
   checkUserId={checkUserId}
   onClick={() => checkUserIdHandler(userId)}
   >
  중복체크
  </StBtn>

• 중복체크를 안했을 때 회원가입이 되지 않도록 처리하는 부분
  중복체크함수(checkUserId)가 false일때 알럿을 띄우도록 회원가입 버튼에 기능을 넣었음

const onSubmitSignup = (e) => {
    e.preventDefault();
    console.log("checkUserId:", checkUserId);
    if (checkUserId === false) {
      alert("중복체크를 확인해주세요!");
      return;
    }

---

• 이번 주에 모달창을 띄웠었는데 배경을 눌렀을 때 닫히지않음.
  돌아오는 주에 배경을 눌렀을 때 닫히도록 하고 모달창이 중간에 오도록 css를 줘야겠음.