[#40] 로그아웃 구현

Soongsil-Developers · Sep 7, 2022 · 8a55187 · 8a55187
1 parent bd8ffa9
commit 8a55187
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 24 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>