Merge pull request #14 from TeamRecorDream/feat/#10-kakao-login

[로그인뷰] 소셜로그인 post 연결

.prettierrc

@@ -7,5 +7,6 @@
   "arrowParens": "always",
   "bracketSpacing": true,
   "bracketSameLine": false,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "singleQuote": true
 }

src/apis/api.ts

@@ -1,5 +1,8 @@
-import axios, { AxiosInstance } from "axios";
+import axios, { AxiosInstance } from 'axios';
 
 export const api: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
 });

src/apis/kakao.ts

@@ -1,7 +1,7 @@
-import { KakaoLoginRequestType } from "../types/kakao";
-import { api } from "./api";
+import { KakaoLoginRequestType } from '../types/kakao';
+import { api } from './api';
 
-const BASE_PATH = "/auth/login";
+const BASE_PATH = '/auth/login';
 
 const kakao = {
   postKakaoLogin: ({ kakaoToken, fcmToken }: KakaoLoginRequestType) =>

src/components/KakaoButton.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { IcKakao } from "../assets/svg";
-import useKakaoLogin from "../hooks/queries/useKakaoLogin";
+import useKakaoLogin from "../hooks/useKakaoLogin";
 
 const KakaoButton = () => {
   return (

src/hooks/queries/usePostKakao.tsx

@@ -0,0 +1,37 @@
+import { useCallback, useState } from "react";
+import kakao from "../../apis/kakao";
+import { AxiosError } from "axios";
+import { KakaoLoginInfoType, KakaoLoginResponseType } from "../../types/kakao";
+
+const usePostKakao = () => {
+  const [kakaoResponse, setKakaoResponse] = useState<KakaoLoginInfoType | null>(null);
+  const [kakaoError, setKakaoError] = useState<AxiosError | null>(null);
+  const [kakaoLoading, setKakaoLoading] = useState(false);
+
+  const postKakao = useCallback(async (accessToken: string) => {
+    if (!accessToken) return;
+    setKakaoLoading(true);
+    setKakaoError(null);
+    try {
+      const res = await kakao.postKakaoLogin({ kakaoToken: accessToken, fcmToken: "0" });
+      const data: KakaoLoginResponseType = res.data.data;
+      setKakaoResponse({
+        userId: data.data.userId,
+        accessToken: data.data.accessToken,
+        isAlreadyUser: data.data.isAlreadyUser,
+        refreshToken: data.data.refreshToken,
+        nickname: data.data.nickname,
+      });
+      console.log("응답이 왔나요?", kakaoResponse);
+      localStorage.setItem("accessToken", data.data.accessToken);
+    } catch (err) {
+      setKakaoError(err as AxiosError);
+    } finally {
+      setKakaoLoading(false);
+    }
+  }, []);
+
+  return { kakaoResponse, kakaoError, kakaoLoading, postKakao };
+};
+
+export default usePostKakao;

src/hooks/queries/useKakaoLogin.tsx → src/hooks/useKakaoLogin.tsx

@@ -1,4 +1,4 @@
-import { kakaoURL } from "../../utils/login";
+import { kakaoURL } from '../utils/login';
 
 const useKakaoLogin = () => {
   window.location.replace(kakaoURL);

src/pages/KakaoLoginPage.tsx

@@ -1,11 +1,34 @@
-// import { useState } from "react";
+// import { useEffect, useState } from "react";
+import { useEffect } from "react";
+import usePostKakao from "../hooks/queries/usePostKakao";
+import { useNavigate } from "react-router-dom";
 
 const KakaoLoginPage = () => {
-  const code = new URL(window.location.href).searchParams.get("code");
+  const navigate = useNavigate();
+
+  let code = new URL(window.location.href).searchParams.get("code");
   console.log("CODE", code);
-  // const [accessToken, setAccessToken] = useState(localStorage.getItem("accessToken"));
-  // console.log("ACCESS_TOKEN", accessToken);
-  // if (accessToken) return;
+  if (!code) code = "";
+  const { kakaoResponse, kakaoError, kakaoLoading, postKakao } = usePostKakao();
+
+  const handlePostKakao = async (code: string) => {
+    try {
+      await postKakao(code);
+      if (!kakaoError && !kakaoLoading && kakaoResponse) {
+        navigate("/delete");
+      }
+    } catch (error) {
+      navigate("/unregistered");
+      console.log("ERROR", error);
+    }
+  };
+
+  useEffect(() => {
+    if (code) {
+      handlePostKakao(code);
+    }
+  }, [code]);
+
   return <></>;
 };
 

src/router/Router.tsx

@@ -1,39 +1,39 @@
-import { createBrowserRouter } from "react-router-dom";
-import Layout from "../layouts/Layout";
-import LoginPage from "../pages/LoginPage";
-import RecordreamLayout from "../pages/RecordreamLayout";
-import DeletePage from "../pages/DeletePage";
-import CompletePage from "../pages/CompletePage";
-import UnregisteredPage from "../pages/UnregisteredPage";
-import KakaoLoginPage from "../pages/KakaoLoginPage";
+import { createBrowserRouter } from 'react-router-dom';
+import Layout from '../layouts/Layout';
+import LoginPage from '../pages/LoginPage';
+import RecordreamLayout from '../pages/RecordreamLayout';
+import DeletePage from '../pages/DeletePage';
+import CompletePage from '../pages/CompletePage';
+import UnregisteredPage from '../pages/UnregisteredPage';
+import KakaoLoginPage from '../pages/KakaoLoginPage';
 
 const router = createBrowserRouter([
   {
-    path: "/",
+    path: '/',
     element: <Layout />,
     children: [
       {
-        path: "/",
+        path: '/',
         element: <LoginPage />,
       },
       {
-        path: "/auth/login",
+        path: '/auth/login',
         element: <KakaoLoginPage />,
       },
       {
         element: <RecordreamLayout iconOn={true} btnColor="red" btnMessage="탈퇴하기" />,
         children: [
           {
-            path: "/delete",
+            path: '/delete',
             element: <DeletePage />,
           },
         ],
       },
       {
         element: <RecordreamLayout iconOn={false} btnColor="white" btnMessage="확인" />,
         children: [
-          { path: "/complete", element: <CompletePage /> },
-          { path: "/unregistered", element: <UnregisteredPage /> },
+          { path: '/complete', element: <CompletePage /> },
+          { path: '/unregistered', element: <UnregisteredPage /> },
         ],
       },
     ],

src/types/common.ts

@@ -0,0 +1,5 @@
+export interface CommonResponse {
+  success: boolean;
+  status: number;
+  message: string;
+}

src/types/kakao.ts

@@ -1,13 +1,16 @@
 export interface KakaoLoginResponseType extends Response {
-  data: {
-    data: {
-      userId: string;
-      isAlreadyUser: boolean;
-      accessToken: string;
-      refreshToken: string;
-      nickname: string;
-    };
-  };
+  status: number;
+  success: boolean;
+  message: string;
+  data: KakaoLoginInfoType;
+}
+
+export interface KakaoLoginInfoType {
+  userId: string;
+  isAlreadyUser: boolean;
+  accessToken: string;
+  refreshToken: string;
+  nickname: string;
 }
 
 export interface KakaoLoginRequestType {