Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/#1/kakao social login setting #8

Merged
merged 8 commits into from
Jul 4, 2024
18 changes: 18 additions & 0 deletions src/app/login/KakaoLogin.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const Login = () => {
const REST_API_KEY: string = import.meta.env.VITE_REST_API_KEY;
const REDIRECT_URI: string = import.meta.env.VITE_REDIRECT_URI;
const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

const loginHandler = () => {
window.location.href = link;
};

return (
<div>
<button type="button" onClick={loginHandler}>
Hello Kakao Login
</button>
</div>
);
};
export default Login;
31 changes: 31 additions & 0 deletions src/app/login/KakaoLoginRedirection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { api } from "@/api";

//FIXME: 응답 데이터 형식에 따라 수정
type Response = {};

const KaKaoRedirection = () => {
const code = window.location.search;
const navigate = useNavigate();

useEffect(() => {
// FIXME: 백엔드 API에 따라 주소 수정 필요
api
.post(`kakaoLogin${code}`)
.then((r: Response) => {
// FIXME: 받은걸 어디에 저장할지 논의 필요 (로그인 저장 방식에 따라 달리짐)
// => 로그인 성공 시 로직 추가
// FIXME: 완료 후 이동 (프로세스에 따라 페이지 URL 변경)
navigate("/test");
})
.catch((err) => {
console.log(err);
});
}, []);

// FIXME: 로그인 로딩 디자인 필요 및 이에 따른 코드 추가 개발 필요
return <div>로그인 중입니다.</div>;
};

export default KaKaoRedirection;
Loading