Merge pull request #180 from imaginer-dev/179-로그아웃-할-수-있어야-한다

179 로그아웃 할 수 있어야 한다

Author: gihwan-dev

README.md

@@ -1,33 +1,36 @@
 # DateLeaf
+
 > **DateLeaf**는 다수의 사람들과의 **모임 시간**을 보다 **편리하게 계획**하기 위한 **스케줄러** 입니다.
-<br><br>
-모임을 잡으면서 모든 인원의 일정을 일일이 맞추기 어려울 때,<br>
-매번 번거로운 투표와 생각지 못한 이중약속으로 난감할 때,<br>
-한 번에 너무 많은 스케쥴이 발생하여 나조차도 모든 일정을 기억하기 힘들 때,<br>
-서로의 일정을 입력만 하면 모두가 가능한 날짜와 시간을 자동으로 계산하여<br>
-보다 편리하게 모임 계획을 세울수 있도록 도와줍니다.
+> <br><br>
+> 모임을 잡으면서 모든 인원의 일정을 일일이 맞추기 어려울 때,<br>
+> 매번 번거로운 투표와 생각지 못한 이중약속으로 난감할 때,<br>
+> 한 번에 너무 많은 스케쥴이 발생하여 나조차도 모든 일정을 기억하기 힘들 때,<br>
+> 서로의 일정을 입력만 하면 모두가 가능한 날짜와 시간을 자동으로 계산하여<br>
+> 보다 편리하게 모임 계획을 세울수 있도록 도와줍니다.
 
 ![intro](https://github.com/imaginer-dev/DateLeaf/assets/81802112/57386410-3cda-438d-9368-9216991f607f)
 
-
 ## WHAT FOR?
+
 현대사회에 불고 있는 자기계발 열풍은, 일시적인 유행을 넘어 하나의 사회 현상으로 자리매김하였습니다.<br>
 이러한 자기계발의 시대에 사람들은 규모도 종류도 다양한 모임 활동을 하게되는데<br>
 그때마다 수많은 일정들의 조율에서 오는 피로가 즐기고자 시작한 일이 되려 힘들어지는 이유가 되기도 합니다.<br>
 우리는 그러한 사람들의 불편함을 인지하였고, 이 부분을 자동화로 만들어서 보다 편리하게 모임 계획을 세울수 있도록 했습니다.
 
 ## YOU CAN DO.
+
 ![image](https://github.com/imaginer-dev/DateLeaf/assets/81802112/6663f95b-a2b0-4faa-830b-8e1ba1e7bf39)
 
 ![image](https://github.com/imaginer-dev/DateLeaf/assets/81802112/04b0f787-c0d4-4088-8978-0f9adf97604b)
 
 ## WHAT WE DO
 
-
 ## WE USED
+
 ![image](https://github.com/imaginer-dev/DateLeaf/assets/81802112/3cd4ee87-e28a-49d1-81ba-cef8bd8c46b7)
 
 ## OUR CHALLENGE
 
 ## WHO WE ARE
+
 이예서

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,
+  });