feat: add logout btn + mutation seperate

src/apis/login.ts

@@ -1,5 +1,7 @@
 import type { PostLoginRequest, PostLoginResponse } from '@/types/login';
+import { useMutation } from '@tanstack/react-query';
 import { AxiosResponse } from 'axios';
+import { setCookie } from 'cookies-next';
 import { http } from './http';
 
 export const postLogin = async ({ loginId, password }: PostLoginRequest): Promise<PostLoginResponse> => {
@@ -13,3 +15,17 @@ export const postLogin = async ({ loginId, password }: PostLoginRequest): Promis
 
   return response.data;
 };
+
+export const loginMutation = () =>
+  useMutation({
+    mutationFn: postLogin,
+    onSuccess: (data) => {
+      localStorage.setItem('accessToken', data.accessToken);
+      setCookie('refreshToken', data.refreshToken, { secure: true });
+      window.location.href = '/';
+      alert('로그인 성공');
+    },
+    onError: () => {
+      alert('로그인 실패');
+    },
+  });

src/apis/logout.ts

@@ -1,7 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+import { deleteCookie } from 'cookies-next';
 import { http } from './http';
 
 export const getLogout = async () => {
   return await http.get({
     url: '/users/logout',
   });
 };
+
+export const logoutMutation = () =>
+  useMutation({
+    mutationFn: getLogout,
+    onSuccess: () => {
+      localStorage.removeItem('accessToken');
+      deleteCookie('refreshToken');
+      window.location.href = '/';
+    },
+  });

src/app/(sidebar)/login/page.tsx

@@ -1,11 +1,9 @@
 'use client';
 
-import { postLogin } from '@/apis/login';
-import { getLogout } from '@/apis/logout';
+import { loginMutation } from '@/apis/login';
+import { logoutMutation } from '@/apis/logout';
 import { SSRSafeSuspense } from '@/lib';
 import { Button } from '@/system/components';
-import { useMutation } from '@tanstack/react-query';
-import { deleteCookie, setCookie } from 'cookies-next';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { InputField } from '../my-recruit/components/NewRecruitDialogContent/InputField';
@@ -17,77 +15,65 @@ export default function Page() {
   const [password, setPassword] = useState<string>('');
   const [isLogin, setIsLogin] = useState<boolean>(false);
 
+  const { mutate: loginMutate } = loginMutation();
+  const { mutate: logoutMutate } = logoutMutation();
+
   useEffect(() => {
     const token = localStorage.getItem('accessToken');
     setIsLogin(token != null);
   }, []);
 
-  const loginMutation = useMutation({
-    mutationFn: postLogin,
-    onSuccess: (data) => {
-      localStorage.setItem('accessToken', data.accessToken);
-      setCookie('refreshToken', data.refreshToken, { secure: true });
-      router.replace('/');
-      alert('로그인 성공');
-    },
-    onError: () => {
-      alert('로그인 실패');
-    },
-  });
-
   const handleLogin = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    loginMutation.mutate({ loginId, password });
+    loginMutate({ loginId, password });
   };
 
-  const logoutMutation = useMutation({
-    mutationFn: getLogout,
-    onSuccess: () => {
-      localStorage.removeItem('accessToken');
-      deleteCookie('refreshToken');
-      router.push('/');
-    },
-  });
-
-    return (
+  return (
     <SSRSafeSuspense
       fallback={
-      <div className="w-full h-full flex justify-center items-center">
-        <div>로딩 중...</div>
-      </div>
+        <div className="w-full h-full flex justify-center items-center">
+          <div>로딩 중...</div>
+        </div>
       }>
-    <div className="w-full h-full flex justify-center items-center">
-      {isLogin ? (
-        <div className="flex flex-col gap-4">
-        <div>이미 로그인 되어있습니다.</div>
-          <Button
+      <div className="w-full h-full flex justify-center items-center">
+        {isLogin ? (
+          <div className="flex flex-col gap-4">
+            <div>이미 로그인 되어있습니다.</div>
+            <Button
               className="bg-neutral-95 flex items-center gap-[4px] py-[8px] px-[16px] rounded-[6px]"
-            onClick={() => {
-              router.replace('/');
-            }}>
+              onClick={() => {
+                router.replace('/');
+              }}>
               <span className="w-full text-label1 text-white font-semibold">홈으로</span>
-          </Button>
-        </div>
-      ) : (
-        <form onSubmit={handleLogin}>
+            </Button>
+            <Button
+              className="bg-neutral-95 flex items-center gap-[4px] py-[8px] px-[16px] rounded-[6px]"
+              onClick={() => {
+                logoutMutate();
+              }}>
+              <span className="w-full text-label1 text-white font-semibold">로그아웃</span>
+            </Button>
+          </div>
+        ) : (
+          <form onSubmit={handleLogin}>
             <div className="flex flex-col justify-center gap-10 mb-15">
               <InputField value={loginId} onChange={(e) => setLoginId(e.target.value)} placeholder="이메일" />
               <InputField
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="비밀번호"
-              className="mb-4"
-            />
-          </div>
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="비밀번호"
+                className="mb-4"
+              />
+            </div>
             <div className="flex gap-2 flex-col">
               <Button className="bg-neutral-95 flex items-center gap-[4px] py-[8px] px-[16px] rounded-[6px]">
                 <span className="w-full text-label1 text-white font-semibold">로그인</span>
               </Button>
             </div>
-        </form>
-      )}
-    </div>
+          </form>
+        )}
+      </div>
     </SSRSafeSuspense>
   );
 }