#45 bug fixed kakao login request

practicalProject8-A-5 · Sep 8, 2022 · 1bd977b · 1bd977b
1 parent 089a85d
commit 1bd977b
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 54 deletions.
diff --git a/tiger-fe/package.json b/tiger-fe/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/material": "^5.10.4",
     "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",

diff --git a/tiger-fe/public/index.html b/tiger-fe/public/index.html
@@ -15,7 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
+    <!-- <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script> -->
     <script
       type="text/javascript"
       src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_KEY%&libraries=services"

diff --git a/tiger-fe/src/components/member/KakaoLogin.jsx b/tiger-fe/src/components/member/KakaoLogin.jsx
@@ -1,42 +1,36 @@
 // eslint-disable-next-line
 
 import React, { useEffect } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
-import axios from "axios";
+import { useNavigate } from "react-router-dom";
+// import axios from "axios";
+import { useDispatch } from "react-redux";
+import { CircularProgress } from "@mui/material";
+import styled from "styled-components";
+import { __kakaoLogin } from "../../redux/modules/memberSlice.js";
 
 const KakaoLogin = () => {
-  const memberApi = process.env.REACT_APP_MEMBER;
   const navigate = useNavigate();
+  const dispatch = useDispatch();
 
-  // 카카오버튼 클릭시 생겨난 url를 잡아온다
-  const location = useLocation();
+  const code = new URL(window.location.href).searchParams.get("code");
 
-  // url 1번재 "=" 뒤에 있는 인가코드를 잡아온다
-  const kakaoCode = location.search.split("=")[1];
-
-  const postCode = async () => {
-    try {
-      const response = await axios.get(
-        memberApi + `/member/login?code=${kakaoCode}`,
-        {
-          // 백엔드 보내기.
-        }
-      );
-      localStorage.setItem("userToken", response.headers.authorization);
-      localStorage.setItem("email", response.data.output.email);
-      localStorage.setItem("phone", response.data.output.tel);
-      localStorage.setItem("name", response.data.output.name);
-      localStorage.setItem("refreshToken", response.headers.refreshtoken);
-      // console.log(response);
-      navigate("/");
-    } catch (error) {
-      console.log(error);
-    }
-  };
   useEffect(() => {
-    postCode();
-  }, []);
-  return <div></div>;
+    dispatch(__kakaoLogin(code));
+    // postCode();
+    navigate("/");
+  }, [dispatch]);
+
+  return (
+    <KakaoLoadingContainer>
+      <CircularProgress />
+    </KakaoLoadingContainer>
+  );
 };
 
+const KakaoLoadingContainer = styled.div`
+  display: block;
+  margin: 18% auto;
+  text-align: center;
+`;
+
 export default KakaoLogin;
diff --git a/tiger-fe/src/components/member/LoginForm.jsx b/tiger-fe/src/components/member/LoginForm.jsx
@@ -58,7 +58,11 @@ const LoginForm = ({ showModal, goRegister, loginToggle }) => {
           <div className="lineR"></div>
         </div>
 
-        <div className="kakao" onClick={kakaoLogin}></div>
+        <img
+          src={`${kakaoButton}`}
+          alt="kakaoButton"
+          className="kakao"
+          onClick={kakaoLogin}></img>
         <div className="google">구글로 간편 로그인</div>
         <div className="email" onClick={loginToggle}>
           이메일로 회원가입
@@ -166,14 +170,8 @@ const StLoginForm = styled.div`
       }
     }
     .kakao {
-      width: 100%;
-      height: 56px;
       margin-bottom: 18px;
       cursor: pointer;
-      background-image: url(${kakaoButton});
-      background-repeat: no-repeat;
-      background-size: contain;
-      background-position: 50%;
       box-sizing: border-box;
     }
     .google {

diff --git a/tiger-fe/src/global/GlobalRouter.jsx b/tiger-fe/src/global/GlobalRouter.jsx
@@ -10,9 +10,10 @@ import VehicleListPage from "../pages/VehicleListPage";
 import HomePage from "../pages/HomePage";
 import OwnerFormPage from "../pages/OwnerFormPage";
 import OwnerItemList from "../components/owner/OwnerItemList";
-import KakaoLogin from "react-kakao-login";
+import KakaoLogin from "../components/member/KakaoLogin";
 
 const GlobalRouter = () => {
+  console.log("5");
   return (
     <Routes>
       <Route exact path="/" element={<RentMainPage />} />
@@ -23,7 +24,7 @@ const GlobalRouter = () => {
       <Route path="/vdetail/:id" element={<VehicleDetailPage />} />
       <Route path="/ownerregisterform" element={<OwnerFormPage />} />
       <Route path="/vlist" element={<VehicleListPage />} />
-      <Route path={"/oauth"} element={<KakaoLogin />} />
+      <Route path="/user/kakao/callback" element={<KakaoLogin />} />
     </Routes>
   );
 };

diff --git a/tiger-fe/src/global_elements/Header.jsx b/tiger-fe/src/global_elements/Header.jsx
@@ -53,12 +53,11 @@ const Header = ({ ownerMode }) => {
 
   // logout
   const __userLogout = async () => {
-    // useEffect(() => {
     const confirm = window.confirm("Are you Sure?");
     if (confirm === true) {
       const userToken = localStorage.getItem("userToken");
       const refreshToken = localStorage.getItem("refreshToken");
-      console.log(refreshToken);
+      // console.log(refreshToken);
       const headers = {
         "Content-Type": "application/json",
         Authorization: userToken,
@@ -72,7 +71,6 @@ const Header = ({ ownerMode }) => {
     } else if (confirm === false) {
       return;
     }
-    // }, []);
   };
 
   return (

diff --git a/tiger-fe/src/redux/modules/memberSlice.js b/tiger-fe/src/redux/modules/memberSlice.js
@@ -4,6 +4,7 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 import axios from "axios";
 
 const memberApi = process.env.REACT_APP_MEMBER;
+const kakaoApi = process.env.REACT_APP_KAKAO_LOGIN_API;
 
 // initialize userToken from local storage
 const userToken = localStorage.getItem("userToken")
@@ -30,7 +31,6 @@ const config = {
   },
 };
 
-//등록 차량
 export const __registerUser = createAsyncThunk(
   "member/__registerUser",
   async ({ email, password, passwordConfirm, name }, thunkAPI) => {
@@ -51,7 +51,6 @@ export const __registerUser = createAsyncThunk(
   }
 );
 
-//예약 주문
 export const __userLogin = createAsyncThunk(
   "member/__userLogin",
   async ({ email, password }, thunkAPI) => {
@@ -76,6 +75,31 @@ export const __userLogin = createAsyncThunk(
   }
 );
 
+export const __kakaoLogin = createAsyncThunk(
+  "member/__kakaoLogin",
+  async (payload, thunkAPI) => {
+    const code = payload;
+    try {
+      const response = await axios.get(
+        kakaoApi + `/user/kakao/callback?code=${code}`,
+        {}
+      );
+      console.log(response);
+      localStorage.setItem("userToken", response.headers.authorization);
+      localStorage.setItem("email", response.data.output.email);
+      localStorage.setItem("phone", response.data.output.tel);
+      localStorage.setItem("name", response.data.output.name);
+      localStorage.setItem("refreshToken", response.headers.refreshtoken);
+      window.alert("카카오 성공");
+      loader();
+      return thunkAPI.fulfillWithValue(response.data.output);
+    } catch (error) {
+      console.log(error);
+      return thunkAPI.rejectWithValue(error.response.data);
+    }
+  }
+);
+
 const memberSlice = createSlice({
   name: "memberSlice",
   initialState: initialState,
@@ -108,6 +132,21 @@ const memberSlice = createSlice({
       console.log(payload);
       state.error = payload.message;
     },
+    // 카카오 로그인
+    [__kakaoLogin.pending]: (state) => {
+      state.isLoading = true;
+      state.error = null;
+    },
+    [__kakaoLogin.fulfilled]: (state, { payload }) => {
+      state.isLoading = false;
+      console.log(payload);
+      state.userInfo = payload;
+    },
+    [__kakaoLogin.rejected]: (state, { payload }) => {
+      state.isLoading = false;
+      console.log(payload);
+      state.error = payload.message;
+    },
     // register user
     [__registerUser.pending]: (state) => {
       state.isLoading = true;