[BBEB] 로그인 & 회원가입

올챙이·2023년 10월 13일

봉봉이봉

목록 보기

3/8

Intro 😊

로그인과 회원가입을 구현했습니다.
저는 지금껏 로그인과 회원가입을 /login /register 처럼 다른 페이지를 만들 생각밖에 하지 않았는데 모달창이라는 기능이 존재한다는 것을 이번 기회에 알게되었습니다!
제 마음에 쏙 들어서 앞으로도 모달창을 잘 활용할 것 같아요

헤더에 있는 로그인과 회원가입을 클릭했을 때 나오게끔 구현했습니다!
헤더는 다른 팀원분이 만드신건데 잘 만드셨어요!🤗

로그인 😙

로그인 모달창

로그인을 클릭했을시에 나오는 모달창입니다.
ID와 Paaword로 구성되어있으며 SIGN IN을 통해 로그인을 할 수 있습니다.
또한, 카카오톡 로그인을 하기 위해 기능을 넣어주었는데 이 부분은 백엔드에서 작업 중이라 추후에 기록하도록 하겠습니다!
로그인 실패 모달창
로그인 성공 모달창

회원가입 😃

회원가입을 클릭했을시에 나오는 모달창입니다.
ID, Password, Password Check, NickName, Email로 구성되어있습니다.
REGISTER을 클릭하여 최종적으로 회원가입을 완료할 수 있습니다.

회원가입 실패 모달창

이와 같이 총 3가지의 실패 모달창이 존재합니다.
이중에서 이모티콘 관련 모달창은 프론트에서 처리하였는데 정규식으로 처리할 수 있었습니다.
이러한 정규식은 처음 사용해봐서 신기했습니다!

    const emojiRegex = /[\uD800-\uDFFF]./g;

    if (emojiRegex.test(userId)) {
      setFailModalOpen(true);
      setErrorMessage("이모티콘을 포함한 아이디는 사용할 수 없습니다.");
      return;
    }

    if (emojiRegex.test(userNickname)) {
      setFailModalOpen(true);
      setErrorMessage("이모티콘을 포함한 닉네임은 사용할 수 없습니다.");
      return;
    }

회원가입 성공 모달창

코드 구성 😋

일단 성공과 실패 모달창은 이번 프로젝트에서 중복적으로 사용되기 때문에 당연히 component로 만들어주었고, 로그인과 회원가입도 component로 만들어주었습니다.

component의 사진을 보면 많은 파일이 존재하는데, 저 중에서 로그인과 회원가입에 관련된 코드는 다음과 같습니다.

authModal_fail.js (실패 모달창)
authModal_success.js (성공 모달창)
login.js (로그인 모달창)
register.js (회원가입 모달창)
Modal.js (모달창)

모달창 코드

function Modal({ width = "50%", height = "50%", children, ...rest }) {
  return (
    <MuiModal {...rest}>
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width,
          height,
          bgcolor: "background.paper",
          boxShadow: 24,
          p: 0,
        }}
      >
        {children}
      </Box>
    </MuiModal>
  );
}

export default Modal;