Merge pull request #41 from Soongsil-Developers/feature/#40

[#40] 4-8. 로그아웃 만들기
Soongsil-Developers · Sep 8, 2022 · ed4f617 · ed4f617
2 parents bd8ffa9 + 91ea55f
commit ed4f617
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 36 deletions.
diff --git a/front/src/App.jsx b/front/src/App.jsx
@@ -24,14 +24,6 @@ import CreateEditArticle from './components/CreateEditArticle';
 import Profile from './components/Profile';
 import Settings from './components/Settings';
 
-import {
-  RecoilRoot,
-  atom,
-  selector,
-  useRecoilState,
-  useRecoilValue,
-} from 'recoil';
-
 function App() {
   return (
     <RecoilRoot>

diff --git a/front/src/components/Settings.jsx b/front/src/components/Settings.jsx
@@ -1,57 +1,79 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Signin from './Signin';
+
+import { useRecoilState } from 'recoil';
+import { useState } from 'react';
+import { useEffect } from 'react';
+import { LoginState } from '../atoms/Login';
+import { postUsersLogin } from '../remotes';
 
 const Settings = () => {
+  const [isLoggedIn, setIsLoggedIn] = useRecoilState(LoginState);
+
+  const Logout = () => {
+    localStorage.removeItem('token');
+    // LoginState(false);
+    if (isLoggedIn) {
+      setIsLoggedIn(false);
+    }
+    document.location.href = '/';
+  };
+
   return (
     <div>
-      <div class="settings-page">
-        <div class="container page">
-          <div class="row">
-            <div class="col-md-6 offset-md-3 col-xs-12">
-              <h1 class="text-xs-center">Your Settings</h1>
+      <div className="settings-page">
+        <div className="container page">
+          <div className="row">
+            <div className="col-md-6 offset-md-3 col-xs-12">
+              <h1 className="text-xs-center">Your Settings</h1>
 
               <form>
                 <fieldset>
-                  <fieldset class="form-group">
+                  <fieldset className="form-group">
                     <input
-                      class="form-control"
+                      className="form-control"
                       type="text"
                       placeholder="URL of profile picture"
                     />
                   </fieldset>
-                  <fieldset class="form-group">
+                  <fieldset className="form-group">
                     <input
-                      class="form-control form-control-lg"
+                      className="form-control form-control-lg"
                       type="text"
                       placeholder="Your Name"
                     />
                   </fieldset>
-                  <fieldset class="form-group">
+                  <fieldset className="form-group">
                     <textarea
-                      class="form-control form-control-lg"
+                      className="form-control form-control-lg"
                       rows="8"
                       placeholder="Short bio about you"
                     ></textarea>
                   </fieldset>
-                  <fieldset class="form-group">
+                  <fieldset className="form-group">
                     <input
-                      class="form-control form-control-lg"
+                      className="form-control form-control-lg"
                       type="text"
                       placeholder="Email"
                     />
                   </fieldset>
-                  <fieldset class="form-group">
+                  <fieldset className="form-group">
                     <input
-                      class="form-control form-control-lg"
+                      className="form-control form-control-lg"
                       type="password"
                       placeholder="Password"
                     />
                   </fieldset>
-                  <button class="btn btn-lg btn-primary pull-xs-right">
+                  <button className="btn btn-lg btn-primary pull-xs-right">
                     Update Settings
                   </button>
                 </fieldset>
               </form>
+              <hr />
+              <button className="btn btn-outline-danger" onClick={Logout}>
+                Or click here to logout.
+              </button>
             </div>
           </div>
         </div>

diff --git a/front/src/components/Signin.jsx b/front/src/components/Signin.jsx
@@ -16,7 +16,6 @@ const Signin = () => {
     }
   }, [isLoggedIn]);
 
-
   return (
     <div>
       <div className="auth-page">
@@ -37,15 +36,14 @@ const Signin = () => {
                   e.preventDefault();
 
                   postUsersLogin({ email, password }).then((res) => {
-                    if (res.user) {
+                    if (res.data.user) {
                       setIsLoggedIn(true);
-                      localStorage.setItem('token', res.user.token);
+                      localStorage.setItem('token', res.data.user.token);
                     }
                   });
                 }}
               >
                 <fieldset className="form-group">
-
                   <input
                     className="form-control form-control-lg"
                     type="text"
@@ -63,11 +61,9 @@ const Signin = () => {
                 </fieldset>
 
                 <button
-                  type="button"
-                  class="btn btn-lg btn-primary pull-xs-right"
-                  onClick={onClickSubmitHandler}
+                  type="submit"
+                  className="btn btn-lg btn-primary pull-xs-right"
                 >
-
                   Sign In
                 </button>
               </form>

diff --git a/front/src/remotes/index.jsx b/front/src/remotes/index.jsx
@@ -1,6 +1,7 @@
 // @ts-check
-
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import Signin from '../components/Signin';
 
 const conduitAxios = axios.create({
   baseURL:
@@ -67,10 +68,13 @@ const conduitAxios = axios.create({
 
 // ㅡㅡㅡㅡㅡ User ㅡㅡㅡㅡㅡ
 /**
- * @param {{ email: string; password: string;}} user
- * @returns {Promise<{ user: User }>}
+ * @param {{email: string; password: string;}} user
+ * @returns {Promise<{ data: { user: User }}>}
  */
-const postUsersLogin = (user) => conduitAxios.post(`/users/login`);
+const postUsersLogin = (user) =>
+  conduitAxios.post(`/users/login`, {
+    data: { email: user.email, password: user.password },
+  });
 
 /**
  * @param {{username: string; email: string; password: string;}} user