개인과제 - 로그인 회원가입

JWT 인증 서버를 이용해서 로그인, 회원가입 기능구현

// Login.jsx 
//회원가입 Api 연결
 const onClickRegisterHandler = async () => {
    try {
      const RegisterInfo = await axios
        .post("https://서버url.co.kr/register", {
          id: idValue, // state
          password: passWordValue,
          nickname: nickNameValue,
        })
        .then((response) => {
          // 만약 response.data의 success가 true면 로그인으로 토글되게
          if (response.data.success) {
            changeLoginToggle();
          }
        });
    } // 만약 에러가 있으면 브라우저에서 에러가 뜨는 것이 아닌 콘솔로 띄우게 해주는 역할
   catch (error) {
      console.log(error);
    }
  };

 // 로그인 Api 연결
  const onClickLoginHandler = async () => {
    try {
      const LoginInfo = await axios
        .post("https://서버url.co.kr/login", {
          id: idValue,
          password: passWordValue,
        })
        .then((response) => {
          // 로그인이 성공하면, response의 data를 signIn 리듀서에 담아주고, 
          // 홈화면으로 갈 수 있게
          if (response.data.success) {
            dispatch(signIn(response.data));
            navigate("/");
          }
        });
    } catch (error) {
      console.log(error);
    }
  };

Router.jsx

export default function Router() {
   							// 1. 전역 상태 값 가져오고
  const auth = useSelector((state) => state.auth);

  return (
    <BrowserRouter>
      <Routes>
        {/* 2. accessToken이 없으면 로그인 창 보여줘*/}
        { !auth.accessToken ? (
          <>
            <Route path="/login" element={<Login />} />
            <Route path="*" element={<Navigate replace to="/login" />} />
          </>
        ) : (
          <>
            <Route path="/" element={<Home />} />
            <Route path="/detail/:id" element={<Detail />} />
            <Route path="*" element={<Navigate replace to="/" />} />
          </>
        )}
      </Routes>
    </BrowserRouter>
  );
}