우리 프로젝트는 jwt를 사용하고 accessToken, refreshToken을 사용한다.

로그인 로직은 👇

로그인 ➡️ accessToken, refreshToken 발급 ➡️ accessToken 헤더 저장, refreshToken 쿠키 저장 ➡️ api 호출시 마다 서버에서 유효성 체크

이런 식으로 로직을 짰다.

우선 로그인을 하려면 회원가입을 먼저 해야되기 때문에 회원가입부터 짜봤다.

회원가입

회원가입 페이지

우선 디자인은 mui로 편하게 만들수 있는 예시를 따와서 만들어 봤다. 나중에는 디자인을 바꿔야 될거같긴하다.

api 호출 ( post )

우선 service에서 api호출하고 hook으로 예외나 성공처리를 하는게 좋을거 같아서 service 단에서 api 호출 코드를 짜봤다.

service/user.ts

export const mutateSignUp = ({
  email,
  username,
  password,
  phoneNumber,
  role,
}: ISignUpProps) => {
  const url = `회원가입 api url`;
  return axios
    .post<IResponseAuth>(url, {
      email,
      username,
      password,
      phoneNumber,
      role,
    })
    .then((res) => {
      console.log(res);
      return res.data;
    });
};

📌 response에서 data에 accessToken이 담겨있어서 res.data를 return 해줬다.

hook ( mutate )

계층을 최대한 나누는게 좋다고 해서 hook으로 만들어서 성공이나 예외처리를 해주는 방식으로 만들어봤다.

hook/use-mutate.ts

export const useMutateSignUp = (
  mutateFunction: ({
    email,
    password,
    username,
    phoneNumber,
    role,
  }: ISignUpProps) => Promise<IResponseAuth>
) => {
  const navigate = useNavigate();
  const { mutate, data } = useMutation('signup', mutateFunction, {
    onSuccess: () => {
      navigate({
        pathname: '/signin',
      });
    },
    onError: () => {},
  });

  return { mutate, data };
};

📌 post 방식이고 서버의 데이터를 변경하는것이라고 생각해서 usemutation을 사용했고 mutateFunction 으로 service에 작성한 api 호출(post)를 넣어줬다.

📌 회원가입에 성공하면 로그인을 해야하기 때문에 react-router-dom의 useNavigate를 이용해 페이지를 다시 렌더링 하는것을 막아주었고 로그인 페이지로 이동시켰다. 실패는 나중에 모달창을 만들 예정이다.

👇 결과 화면

이제 로그인 페이지를 만들어야 한다...