feat: 로그아웃 기능 개발

Author: gihwan-dev

src/apis/authApis.ts

@@ -70,3 +70,12 @@ export const searchUser = async (nickname: string) => {
 
   return profiles;
 };
+
+export const signOut = async () => {
+  const { error } = await supabase.auth.signOut();
+  if (error) {
+    throw error;
+  }
+
+  return true;
+};

src/components/common/SideBar/HamburgerButton.tsx

@@ -3,6 +3,7 @@ import SideBarGroupList from './SideBarGroupList';
 import SideBarProfile from './SideBarProfile';
 import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
+import SideBarSignOutButton from '@/components/common/SideBar/SideBarSignOutButton.tsx';
 
 const HamburgerButton = () => {
   const { data: user, isLoading, isError } = useGetProfile();
@@ -33,9 +34,12 @@ const HamburgerButton = () => {
         </label>
         <div className="drawer-side lg:w-80">
           <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
-          <ul className="menu min-h-full w-80 bg-base-200 p-4">
-            <SideBarProfile imageUrl={user?.image_url ?? null} userName={user?.user_name ?? ''} />
-            <SideBarGroupList userId={user?.id ?? ''} />
+          <ul className="menu min-h-full w-80 flex-col justify-between bg-base-200 p-4">
+            <div>
+              <SideBarProfile imageUrl={user?.image_url ?? null} userName={user?.user_name ?? ''} />
+              <SideBarGroupList userId={user?.id ?? ''} />
+            </div>
+            <SideBarSignOutButton />
           </ul>
         </div>
       </div>

src/components/common/SideBar/SideBarSignOutButton.tsx

@@ -0,0 +1,21 @@
+import { useSignOut } from '@/react-queries/useSignOut.ts';
+import { useNavigate } from 'react-router-dom';
+
+export default function SideBarSignOutButton() {
+  const { mutate } = useSignOut();
+  const navigate = useNavigate();
+
+  const onClick = () => {
+    mutate(undefined, {
+      onSuccess: () => {
+        navigate('/login');
+      },
+    });
+  };
+
+  return (
+    <button onClick={onClick} className={'btn btn-error font-bold'}>
+      Sign Out
+    </button>
+  );
+}

src/react-queries/useSignOut.ts

@@ -0,0 +1,8 @@
+import { useMutation } from '@tanstack/react-query';
+import { signOut } from '@/apis/authApis.ts';
+
+export const useSignOut = () =>
+  useMutation({
+    mutationKey: ['signOut'],
+    mutationFn: signOut,
+  });