Kakao Login Logic 생성

package.json

@@ -18,6 +18,7 @@
     "framer-motion": "^11.2.13",
     "jotai": "^2.8.4",
     "jotai-devtools": "^0.10.0",
+    "js-cookie": "^3.0.5",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -27,6 +28,7 @@
     "@babel/preset-react": "^7.24.7",
     "@emotion/babel-plugin": "^11.11.0",
     "@tanstack/eslint-plugin-query": "^5.49.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.12.12",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",

src/api/index.ts

@@ -1,114 +1,114 @@
 import axios, { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from "axios";
+import Cookies from "js-cookie";
 
 /** API 사용 전, ENV 파일을 통해 서버 연동 설정을 해주세요 */
 const API_URL = import.meta.env.VITE_API_URL as string;
 
 const baseApi = axios.create({
-    baseURL: API_URL,
-    timeout: 5000,
+  baseURL: API_URL,
+  timeout: 5000,
 
-    headers: {
-        "Content-Type": "application/json",
-    },
+  headers: {
+    "Content-Type": "application/json",
+  },
 });
 
 /** 개발 환경에서만 실행되논 로깅 함수 */
 const logOnDev = (message: string) => {
-    if (import.meta.env.MODE === "development") {
-        console.log(message);
-    }
+  if (import.meta.env.MODE === "development") {
+    console.log(message);
+  }
 };
 
 /** API 요청이 실패한 경우 호출되는 함수 */
 const onError = (status: number, message: string) => {
-    const error = { status, message };
-    throw error;
+  const error = { status, message };
+  throw error;
 };
 
 /** request 요청 시, config 객체를 받아와 처리하는 함수 */
 const onRequest = (config: AxiosRequestConfig): Promise<InternalAxiosRequestConfig> => {
-    const token = localStorage.getItem("ACCESS_TOKEN");
-    const { method, url, headers = {} } = config;
-
-    headers.Authorization = token ? `Bearer ${token}` : "";
-    logOnDev(`[API REQUEST] ${method?.toUpperCase()} ${url}`);
-    return Promise.resolve({ ...config, headers } as InternalAxiosRequestConfig);
+  const token = Cookies.get("accessToken");
+  const { method, url, headers = {} } = config;
+  headers.Authorization = token ? `Bearer ${token}` : "";
+  logOnDev(`[API REQUEST] ${method?.toUpperCase()} ${url}`);
+  return Promise.resolve({ ...config, headers } as InternalAxiosRequestConfig);
 };
 
 /** request 요청 시, 발생하는 에러를 처리하는 함수 */
 const onErrorRequest = (error: AxiosError<AxiosRequestConfig>) => {
-    const { status } = error?.response as AxiosResponse;
-
-    if (error?.config) {
-        onError(status, "에러: 요청 실패");
-    } else if (error?.request) {
-        onError(status, "에러: 응답 없음");
-    } else {
-        onError(status, "에러:");
-    }
+  const { status } = error?.response as AxiosResponse;
 
-    return Promise.reject(error);
+  if (error?.config) {
+    onError(status, "에러: 요청 실패");
+  } else if (error?.request) {
+    onError(status, "에러: 응답 없음");
+  } else {
+    onError(status, "에러:");
+  }
+
+  return Promise.reject(error);
 };
 
 /** 응답이 성공적으로 수신되었을 때, 호출되는 콜백 함수 */
 const onResponse = (response: AxiosResponse): AxiosResponse => {
-    const { method, url } = response.config;
-    const { status } = response;
+  const { method, url } = response.config;
+  const { status } = response;
 
-    logOnDev(`[API RESPONSE ${status}] ${method?.toUpperCase()} ${url}`);
-    return response;
+  logOnDev(`[API RESPONSE ${status}] ${method?.toUpperCase()} ${url}`);
+  return response;
 };
 
 /** 응답이 실패한 API 요청에 대한 로깅 및 에러 코드 처리를 담당하는 함수 */
 const onErrorResponse = (error: AxiosError | Error) => {
-    if (axios.isAxiosError(error)) {
-        const { message } = error;
-        const { method, url } = error?.config as AxiosRequestConfig;
-        const { status, statusText } = error?.response as AxiosResponse;
-
-        logOnDev(`[API ERROR_RESPONSE ${status} | ${statusText} | ${message}] ${method?.toUpperCase()} ${url}`);
-
-        switch (status) {
-            case 400:
-                onError(status, "잘못된 요청을 했어요");
-                break;
-            case 401: {
-                onError(status, "인증을 실패했어요");
-                break;
-            }
-            case 403: {
-                onError(status, "권한이 없는 상태로 접근했어요");
-                break;
-            }
-            case 404: {
-                onError(status, "찾을 수 없는 페이지를 요청했어요");
-                break;
-            }
-            case 500: {
-                onError(status, "서버 오류가 발생했어요");
-                break;
-            }
-            default: {
-                onError(status, `기타 에러가 발생했어요 : ${error?.message}`);
-            }
-        }
-    } else if (error instanceof Error && error?.name === "TimoutError") {
-        logOnDev(`[API TIME_ERROR] ${error?.toString()}`);
-        onError(0, "요청 시간이 초과되었어요");
-    } else {
-        logOnDev(`[API ETC_ERROR] ${error?.toString()}`);
-        onError(0, `기타 에러가 발생했어요 : ${error?.toString()}`);
+  if (axios.isAxiosError(error)) {
+    const { message } = error;
+    const { method, url } = error?.config as AxiosRequestConfig;
+    const { status, statusText } = error?.response as AxiosResponse;
+
+    logOnDev(`[API ERROR_RESPONSE ${status} | ${statusText} | ${message}] ${method?.toUpperCase()} ${url}`);
+
+    switch (status) {
+      case 400:
+        onError(status, "잘못된 요청을 했어요");
+        break;
+      case 401: {
+        onError(status, "인증을 실패했어요");
+        break;
+      }
+      case 403: {
+        onError(status, "권한이 없는 상태로 접근했어요");
+        break;
+      }
+      case 404: {
+        onError(status, "찾을 수 없는 페이지를 요청했어요");
+        break;
+      }
+      case 500: {
+        onError(status, "서버 오류가 발생했어요");
+        break;
+      }
+      default: {
+        onError(status, `기타 에러가 발생했어요 : ${error?.message}`);
+      }
     }
-
-    return Promise.reject(error);
+  } else if (error instanceof Error && error?.name === "TimoutError") {
+    logOnDev(`[API TIME_ERROR] ${error?.toString()}`);
+    onError(0, "요청 시간이 초과되었어요");
+  } else {
+    logOnDev(`[API ETC_ERROR] ${error?.toString()}`);
+    onError(0, `기타 에러가 발생했어요 : ${error?.toString()}`);
+  }
+
+  return Promise.reject(error);
 };
 
 /** 인터셉터를 설정 하고, Axios Instance를 반환하는 함수 */
 const setInterceptors = (axiosInstance: AxiosInstance): AxiosInstance => {
-    axiosInstance.interceptors.request.use(onRequest, onErrorRequest);
-    axiosInstance.interceptors.response.use(onResponse, onErrorResponse);
+  axiosInstance.interceptors.request.use(onRequest, onErrorRequest);
+  axiosInstance.interceptors.response.use(onResponse, onErrorResponse);
 
-    return axiosInstance;
+  return axiosInstance;
 };
 
-export const api = setInterceptors(baseApi);
+export const api = setInterceptors(baseApi);

src/api/login/index.ts

@@ -0,0 +1,92 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+
+import { api } from "@/api";
+import { MemberInfo, KakaoLoginResponse, LoginKakaoResult, AuthApiReturn, AuthResponse } from "@/types/loginType";
+
+// 카카오 서버를 통해 토큰을 발급 받아오는 API 함수
+const getKakaoLoginResponse = async (code: string): Promise<KakaoLoginResponse | null> => {
+  try {
+    const REST_API_KEY = import.meta.env.VITE_REST_API_KEY as string;
+    const REDIRECT_URI = import.meta.env.VITE_REDIRECT_URI as string;
+
+    const data = {
+      grant_type: "authorization_code",
+      client_id: REST_API_KEY,
+      redirect_uri: REDIRECT_URI,
+      code: code,
+    };
+
+    const response = await axios.post<KakaoLoginResponse>(`https://kauth.kakao.com/oauth/token`, new URLSearchParams(data), {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    });
+
+    return response.data;
+  } catch (err) {
+    console.error("카카오 토큰 가져오기 실패", err);
+    return null;
+  }
+};
+
+// 가지고 있는 토큰과 닉네임을 통해 회원가입을 진행하는 코드
+export const signUpWithToken = async (accessToken: string, name: string): Promise<AuthApiReturn | null> => {
+  try {
+    const response = await api.post<AuthResponse>(
+      "/api/auth/sign-up",
+      {
+        socialType: "KAKAO",
+        name: name,
+      },
+      {
+        headers: {
+          "X-Auth-Token": accessToken,
+        },
+      },
+    );
+    return { status: response.status, data: response.data };
+  } catch (err) {
+    console.error("토큰을 통한 회원가입 실패", err);
+    return null;
+  }
+};
+
+// 가지고 있는 토큰과 닉네임을 통해 회원가입을 진행하는 함수
+const signInWithKakaoToken = async (): Promise<AuthApiReturn> => {
+  const response = await api.post(
+    "api/auth/sign-in",
+    {
+      socialType: "KAKAO",
+    },
+    {
+      headers: {
+        "X-Auth-Token": Cookies.get("kakaoAccessToken"),
+      },
+    },
+  );
+  return response;
+};
+
+export const loginKakao = async (code: string | null): Promise<LoginKakaoResult> => {
+  try {
+    if (code) {
+      const kakaoLoginRespone = await getKakaoLoginResponse(code);
+      if (kakaoLoginRespone) {
+        Cookies.set("kakaoAccessToken", kakaoLoginRespone.access_token);
+        //로그인 먼저 시도
+        const signInResponse = await signInWithKakaoToken();
+        return { status: signInResponse.status, response: signInResponse.data };
+      }
+    }
+  } catch (error) {
+    throw new Error("kakao Login failed");
+  }
+
+  return { status: 400, response: null };
+};
+
+export const fetchMemberInfo = async (): Promise<MemberInfo> => {
+  const response = await api.get<MemberInfo>("/api/auth/member-info");
+  return response.data;
+};

src/app/login/KakaoLoginRedirection.tsx

@@ -1,31 +1,57 @@
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import Cookies from "js-cookie";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { api } from "@/api";
-
-//FIXME: 응답 데이터 형식에 따라 수정
-type KakaoLoginResponse = { data: string };
+import { loginKakao } from "@/api/login";
+import { authAtom } from "@/store/auth/authAtom";
+import { LoginKakaoResult, AuthResponse } from "@/types/loginType";
 
 export function KaKaoRedirection() {
-  const code = window.location.search;
+  const code = new URL(window.location.toString()).searchParams.get("code");
   const navigate = useNavigate();
+  const [, setAuth] = useAtom(authAtom);
 
-  useEffect(() => {
-    // FIXME: 백엔드 API에 따라 주소 수정 필요
-    api
-      .post(`kakaoLogin${code}`)
-      .then((data: KakaoLoginResponse) => {
-        // FIXME: 받은걸 어디에 저장할지 논의 필요 (로그인 저장 방식에 따라 달리짐)
-        // => 로그인 성공 시 로직 추가
-        // FIXME: 완료 후 이동 (프로세스에 따라 페이지 URL 변경)
-        console.log(data);
-        navigate("/test");
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+  function setAuthResponse(response: AuthResponse) {
+    if (response) {
+      Cookies.set("memberId", response.memberId.toString(), { expires: 7 });
+      Cookies.set("accessToken", response.accessToken, { expires: 7 });
+      Cookies.set("refreshToken", response.refreshToken, { expires: 7 });
+      setAuth({ isLogin: true, name: response.name, email: response.email, memberRole: response.memberRole });
+    }
+  }
+
+  const { isLoading, isError, data } = useQuery<LoginKakaoResult, Error>({
+    queryKey: ["auth", "kakao"],
+    queryFn: () => loginKakao(code),
+    staleTime: Infinity,
+    gcTime: Infinity,
+    retry: false,
+    refetchInterval: false,
   });
 
-  // FIXME: 로그인 로딩 디자인 필요 및 이에 따른 코드 추가 개발 필요
+  useEffect(() => {
+    if (data) {
+      const { status, response } = data;
+      if (status === 200) {
+        setAuthResponse(response);
+        navigate("/home/retrospect");
+      } else if (status === 404) {
+        navigate("/setnickname");
+      } else {
+        navigate("/login");
+      }
+    }
+  }, [data, navigate]);
+
+  if (isLoading) {
+    return <div>로그인 중입니다...</div>;
+  }
+
+  if (isError) {
+    return <div>로그인 중 에러가 발생했습니다.</div>;
+  }
+
   return <div>로그인 중입니다.</div>;
 }