diff --git a/src/app/login/KakaoLogin.tsx b/src/app/login/KakaoLogin.tsx
new file mode 100644
index 00000000..19ba178e
--- /dev/null
+++ b/src/app/login/KakaoLogin.tsx
@@ -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;
diff --git a/src/app/login/KakaoLoginRedirection.tsx b/src/app/login/KakaoLoginRedirection.tsx
new file mode 100644
index 00000000..1db0c861
--- /dev/null
+++ b/src/app/login/KakaoLoginRedirection.tsx
@@ -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;