feat: work on logout

로그아웃 기능 추가

Author: kyuhyunhan

.eslintrc.js

@@ -13,6 +13,19 @@ module.exports = {
     node: true,
   },
   rules: {
+    'jsx-a11y/no-noninteractive-element-interactions': [
+      'error',
+      {
+        handlers: [
+          // 'onClick',
+          'onMouseDown',
+          'onMouseUp',
+          'onKeyPress',
+          // 'onKeyDown',
+          'onKeyUp',
+        ],
+      },
+    ],
     'react/jsx-filename-extension': [
       'error',
       {

src/components/common/Sidebar.js

@@ -1,7 +1,10 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { useHistory } from 'react-router';
 import styled from 'styled-components';
 import Logo from '../../assets/common/sidebar_logo.svg';
 import Logout from '../../assets/common/sidebar_logout.svg';
 import MenuTab from './MenuTab';
+import { logout } from '../../modules/auth/user';
 
 const StyledSidebarWrapper = styled.div`
   position: fixed;
@@ -26,11 +29,28 @@ const StyledSidebarWrapper = styled.div`
     & > .logout-wrapper {
       position: absolute;
       bottom: 40px;
+      & > img {
+        cursor: pointer;
+      }
     }
   }
 `;
 
 const Sidebar = () => {
+  const { token } = useSelector(({ user }) => ({
+    token: user.token,
+  }));
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const handleLogout = () => {
+    dispatch(logout());
+  };
+
+  if (!token) {
+    localStorage.removeItem('userToken');
+    history.push('/');
+  }
+
   return (
     <StyledSidebarWrapper>
       <div className="sidebar">
@@ -42,7 +62,12 @@ const Sidebar = () => {
           <MenuTab menu="TodayILearned" />
         </div>
         <div className="logout-wrapper">
-          <img src={Logout} alt="sidebar-logout" />
+          <img
+            src={Logout}
+            alt="sidebar-logout"
+            onClick={handleLogout}
+            onKeyDown={handleLogout}
+          />
         </div>
       </div>
     </StyledSidebarWrapper>

src/lib/api/auth.js

@@ -37,3 +37,12 @@ export const changePassword = ({ email, firstPassword, secondPassword }) => {
     new_password2: secondPassword,
   });
 };
+export const logout = () => {
+  return client({
+    method: 'post',
+    url: '/v1.0/accounts/api/logout/',
+    headers: {
+      Authorization: `Token ${localStorage.getItem('userToken')}`,
+    },
+  });
+};

src/lib/util/saga.js

@@ -12,7 +12,6 @@ export default function createRequestSaga(
   // eslint-disable-next-line no-unused-vars
   sideEffectFn = (actionType, response) => {}
 ) {
-  console.log('여기 들어왔나?');
   const SUCCESS = `${type}_SUCCESS`;
   const FAILURE = `${type}_FAILURE`;
 

src/modules/auth/user.js

@@ -11,6 +11,8 @@ const [LOGIN, LOGIN_SUCCESS, LOGIN_FAILURE] =
 const [CHANGE_PASSWORD, CHANGE_PASSWORD_SUCCESS, CHANGE_PASSWORD_FAILURE] =
   createRequestActionTypes('user/CHANGE_PASSWORD');
 const INIT_IS_PASSWORD_CHANGED = 'user/INIT_IS_PASSWORD_CHANGED';
+const [LOGOUT, LOGOUT_SUCCESS, LOGOUT_FAILURE] =
+  createRequestActionTypes('user/LOGOUT');
 
 export const register = (
   email,
@@ -46,6 +48,9 @@ export const changePassword = (email, firstPassword, secondPassword) => ({
 export const initIsPasswordChanged = () => ({
   type: INIT_IS_PASSWORD_CHANGED,
 });
+export const logout = () => ({
+  type: LOGOUT,
+});
 
 const registerSaga = createRequestSaga(
   REGISTER,
@@ -69,10 +74,13 @@ const changePasswordSaga = createRequestSaga(
   CHANGE_PASSWORD,
   authAPI.changePassword
 );
+const logoutSaga = createRequestSaga(LOGOUT, authAPI.logout);
+
 export function* userSagas() {
   yield takeLatest(REGISTER, registerSaga);
   yield takeLatest(LOGIN, loginSaga);
   yield takeLatest(CHANGE_PASSWORD, changePasswordSaga);
+  yield takeLatest(LOGOUT, logoutSaga);
 }
 
 const initialState = {
@@ -123,6 +131,18 @@ const user = (state = initialState, action) => {
         ...state,
         isPasswordChanged: false,
       };
+    case LOGOUT_SUCCESS:
+      return {
+        ...state,
+        status: action.payload.status,
+        token: '',
+      };
+    case LOGOUT_FAILURE:
+      return {
+        ...state,
+        status: action.payload.status,
+        error: action.payload.data,
+      };
     default:
       return state;
   }