Merge pull request #7 from wndudqus/feature/#5-google-login

google login. api connect and axios added

package.json

@@ -8,6 +8,7 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
+    "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-google-login": "^5.2.2",

src/app/App.tsx

@@ -4,22 +4,29 @@ import { selectUser, useAppDispatch, useAppSelector } from "./store/hooks";
 
 import LoginPage from "./feature/login/LoginPage";
 import Path from "./model/Path";
+import User from "./model/User";
+import WelcomePage from "./feature/welcome/welcomePage";
 
 export default function App() {
-  const user = useAppSelector(selectUser);
-
+  const { user, isNewComer } = useAppSelector(selectUser);
+  const isLoginUser = User.isLoginUser(user);
   return (
     <section>
       <Routes>
         <Route
           path={Path.HOME}
           element={
             <>
-              {user.isLogin ? <h1>welcome</h1> : <Link to="/login">login</Link>}
+              {isLoginUser ? (
+                <h1>welcome home</h1>
+              ) : (
+                <Link to="/login">login</Link>
+              )}
             </>
           }
         />
         <Route path={Path.LOGIN} element={<LoginPage />} />
+        <Route path={Path.WELCOME} element={<WelcomePage />} />
         <Route path="*" element={<>404</>} />
       </Routes>
     </section>

src/app/feature/login/LoginPage.tsx

@@ -4,27 +4,27 @@ import { selectUser, useAppDispatch, useAppSelector } from "../../store/hooks";
 import { Navigate } from "react-router-dom";
 import Path from "../../model/Path";
 import React from "react";
+import User from "../../model/User";
 import { login } from "./userSlice";
 
 export default function LoginPage() {
-  const user = useAppSelector(selectUser);
+  const { user, isNewComer } = useAppSelector(selectUser);
   const dispatch = useAppDispatch();
-
-  console.log(user);
+  const isLoginUser = User.isLoginUser(user);
   return (
     <div>
       <GoogleLogin
         clientId={process.env.GOOGLE_CLIENT_ID}
         buttonText="Login"
         onSuccess={(response: GoogleLoginResponse) => {
-          dispatch(login(response.accessToken));
+          dispatch(login(response.tokenId));
         }}
         onFailure={(response) => {}}
         cookiePolicy={"single_host_origin"}
         redirectUri="/login"
-        isSignedIn={user.isLogin}
+        isSignedIn={isLoginUser}
       />
-      {user.isLogin && <Navigate to={Path.HOME} />}
+      {isLoginUser && <Navigate to={isNewComer ? Path.WELCOME : Path.HOME} />}
     </div>
   );
 }

src/app/feature/login/userSlice.ts

@@ -1,15 +1,37 @@
 import { PayloadAction, createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 
-interface User {
-  isLogin: boolean;
+import User from "../../model/User";
+import axios from "axios";
+
+type LoginType = "guest" | "google" | "integrated";
+interface UserState {
+  user: User;
+  loginType: LoginType;
+  isNewComer?: boolean;
 }
 
-const initialState: User = {
-  isLogin: false,
+const initialState: UserState = {
+  user: {
+    idx: -1,
+    name: "",
+    email: "",
+  },
+  loginType: "guest",
+  isNewComer: false,
 };
 
 export const login = createAsyncThunk("user/login", async (token: string) => {
-  return token;
+  const { data } = await axios.post<UserState>(
+    "http://localhost:8000/api/login",
+    {
+      googleToken: token,
+    }
+  );
+
+  console.log(data);
+
+  if (0 < data?.user?.idx) return data;
+  else throw Error("로그인에 실패했습니다.");
 });
 
 const userReducer = createSlice({
@@ -19,12 +41,19 @@ const userReducer = createSlice({
     //
   },
   extraReducers: (builder) => {
-    builder.addCase(
-      login.fulfilled,
-      (state: User, payloadAction: PayloadAction<any>) => {
-        state.isLogin = payloadAction.payload;
-      }
-    );
+    builder
+      .addCase(
+        login.fulfilled,
+        (state: UserState, payloadAction: PayloadAction<UserState>) => {
+          state.user = payloadAction.payload.user;
+          state.loginType = payloadAction.payload.loginType;
+          state.isNewComer = payloadAction.payload.isNewComer;
+        }
+      )
+      .addCase(login.rejected, (state: UserState) => {
+        state.isNewComer = false;
+        state.user = initialState.user;
+      });
   },
 });
 

src/app/feature/welcome/WelcomePage.tsx

@@ -0,0 +1,16 @@
+import { selectUser, useAppSelector } from "../../store/hooks";
+
+import React from "react";
+
+export default function WelcomePage() {
+  const { user } = useAppSelector(selectUser);
+  return (
+    <div>
+      <h1>반갑습니다 {user.name} 님!</h1>
+      <form>
+        <label htmlFor="news-letter">{user.email}로 뉴스레터 받기</label>
+        <input type="checkbox" name="news-letter" id="news-letter" />
+      </form>
+    </div>
+  );
+}

src/app/model/Path.ts

@@ -1,6 +1,7 @@
 enum Path {
   HOME = "/",
   LOGIN = "login",
+  WELCOME = "/welcome",
 }
 
 export default Path;

src/app/model/User.ts

@@ -0,0 +1,13 @@
+interface User {
+  idx: number;
+  name: string;
+  email: string;
+}
+
+namespace User {
+  export function isLoginUser(user: User) {
+    return user?.idx > 0;
+  }
+}
+
+export default User;

src/app/store/store.ts

@@ -1,11 +1,9 @@
 import { configureStore } from "@reduxjs/toolkit";
-import counterReducer from "../feature/counterSlice";
 import userReducer from "../feature/login/userSlice";
 
 const store = configureStore({
   reducer: {
     user: userReducer,
-    counter: counterReducer,
   },
 });
 

yarn.lock

@@ -700,6 +700,13 @@ async@^2.6.2:
   dependencies:
     lodash "^4.17.14"
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
+
 "babel-plugin-styled-components@>= 1.12.0":
   version "1.13.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz#1f1cb3927d4afa1e324695c78f690900e3d075bc"
@@ -1771,7 +1778,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.4:
   version "1.14.5"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"
   integrity sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==