Merge pull request #48 from Fashion-Cloud/feat/#43

feat: 로그아웃 API연결

src/api/hook/UserHook.ts

@@ -1,3 +1,4 @@
+import router from 'next/router';
 import { useMutation } from 'react-query';
 
 import { UserService } from '../service/UserService';
@@ -26,3 +27,18 @@ export const useSignup = (
     onError: () => alert('다시 회원가입 해주세요.'),
   });
 };
+
+export const useLogout = () => {
+  return useMutation({
+    mutationFn: () => UserService.logout(),
+    onSuccess: () => {
+      deleteCookie('token');
+      router.replace('login');
+    },
+    onError: () => alert('다시 로그아웃 해주세요.'),
+  });
+};
+
+function deleteCookie(name: string) {
+  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+}

src/api/service/UserService.ts

@@ -1,3 +1,4 @@
+import apiV1Instance from '../api-instance';
 import baseInstance from '../baseInstance';
 
 export class UserService {
@@ -19,4 +20,8 @@ export class UserService {
   ): Promise<void> => {
     await baseInstance.post('/auth/signup', { email, password, username });
   };
+
+  public static logout = async (): Promise<void> => {
+    await apiV1Instance.post('/auth/logout');
+  };
 }

src/components/MainLayout/FashionListBox.tsx

@@ -20,6 +20,7 @@ import axios from 'axios';
 import Image from 'next/image';
 import React, { useEffect, useRef, useState } from 'react';
 import useCheckAuth from 'src/api/hook/CheckAuthHook';
+import { useLogout } from 'src/api/hook/UserHook';
 import { token } from 'src/assets/data/token';
 
 import logoUrl from '../../../public/title-logo.png';
@@ -229,6 +230,8 @@ export default function FashionListBox() {
 
   useCheckAuth();
 
+  const { mutate: logout } = useLogout();
+
   return (
     <Box sx={{ height: '100vh', backgroundColor: '#F5F8FC' }}>
       <Box height="75px" />

src/components/User/LoginBox.tsx

@@ -17,8 +17,16 @@ export default function LoginBox() {
 
   useCheckAuth();
 
+  function setCookie(name: string, value: string, days: number) {
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    const expires = 'expires=' + date.toUTCString();
+    document.cookie = name + '=' + value + '; ' + expires + '; path=/';
+  }
+
   const { mutate: login } = useLogin(email, pw, (response) => {
-    document.cookie = `token = ${response.data.accessToken}`;
+    // document.cookie = `token = ${response.data.accessToken}`;
+    setCookie('token', response.data.accessToken, 1);
     router.push('/');
   });