로그인 수정

Soongsil-Developers · Sep 8, 2022 · 230bfc4 · 230bfc4
2 parents 162e738 + 91ea55f
commit 230bfc4
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 32 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
@@ -61,7 +61,7 @@ const Signin = () => {
                 </fieldset>
 
                 <button
-                  type="button"
+                  type="submit"
                   className="btn btn-lg btn-primary pull-xs-right"
                 >
                   Sign In

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: 'https://api.realworld.io/api',
@@ -65,13 +66,13 @@ const conduitAxios = axios.create({
 
 // ㅡㅡㅡㅡㅡ User ㅡㅡㅡㅡㅡ
 /**
- * @param {{ email: string; password: string;}} user
- * @returns {Promise<{ data: {user: User} }>}
+ * @param {{email: string; password: string;}} user
+ * @returns {Promise<{ data: { user: User }}>}
  */
-const postUsersLogin = (user) => conduitAxios.post(`/users/login`);
-// postUsersLogin(user).then((res) => {
-//   console.log(res);
-// }
+const postUsersLogin = (user) =>
+  conduitAxios.post(`/users/login`, {
+    data: { email: user.email, password: user.password },
+  });
 
 /**
  * @param {{username: string; email: string; password: string;}} user