[Team Project] Bid Panda ep.6

✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지

Issue ▸

카카오 로그인 REST-API 기반의 프론트 구현에 대한 이슈들. 결국엔 백엔드 API 개발의 문제였지만, 그래도 기록해본다.

Solve :

1. 클라이언트에서 클릭 이벤트를 통해 카카오 로그인 API와 통신하여 인가 코드를 받는다. 리다이렉트 되는 주소의 ?code= 에 value로 반환 된다.

 const kakaoLogin: any = () => {
    const REST_API_KEY = "BE와 합의한 REST API ID를 작성한다.";
   // 클라이언트에서 리다이렉트 받을 페이지 라우팅을 준비하고, 그 주소를 기입
    const REDIRECT_URI = "http://localhost:5173/kakao";
    const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
   // kakaoURL 변수에 담긴 동적 쿼리 주소를 통해 코드를 반환 받을 수 있다.
    window.location.href = kakaoURL;
  };

2. 리다이렉트 되는 페이지인 /kakao에서 백엔드와의 서버 통신을 진행한다 !

const Kakao = () => {
  // searchParams 라는 메소드를 이용하여 주소 속 code라는 key를 가진 value를 가져와 변수에 담을 수 있다.
  const code = new URL(window.location.href);
  const codeValue = code.searchParams.get("code");
  const navigate = useNavigate();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get(
          `${
            import.meta.env.VITE_REACT_API_KEY
          }/api/members/kakao/callback?code=${codeValue}`,
          {
            headers: {
              "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
            },
          }
        );

        if (res.status === 200) {
          toast.success("카카오 계정을 통해 로그인 되었습니다.");
          localStorage.setItem("authorization", res.headers.authorization);
          //  localStorage.setItem("authorization_refresh", refreshToken);
          navigate("/");
        }
      } catch (error) {
        toast.error("카카오 로그인에 문제가 생겼습니다.");
      }
    };
    fetchData();
  }, []);

  return (
    <div className="flex flex-col justify-center items-center h-[100%]">
      <Loading />
    </div>
  );
};

export default Kakao;

3. 하지만 문제는 백엔드에서 있었다. 카카오 로그인 API는 프론트에서 전달해주는 카카오 인가 코드를 전달 받아서, 카카오 토큰 발급 API와 통신한 뒤 카카오 토큰을 받아, 인증 확인을 거친 후, 로컬에서 개발한 JWT 토큰으로 교환하여 프론트에 돌려주는 로직이 필요했다. 그러나 백엔드 개발자 동료는 entity, controller, dto에 통일적으로 작성 되었어야 할 카카오 유저 정보 부분에서 휴먼 에러를 냈고, 그 때문에 서버에서는 계속 500 error가 발생하고 있었다. 백엔드 리더님과 함꼐 log.info를 찍어보며 해결할 수 있었다.