[#128] ♻️ create 'useSignOut' query

Author: 장아영

queries/useSignOut.ts

@@ -0,0 +1,32 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { useMutation } from '@tanstack/react-query'
+
+import { SignOut } from '@/services/auth/auth'
+
+export const useSignOutMutation = () => {
+  const router = useRouter()
+
+  return useMutation({
+    mutationFn: SignOut,
+    onSuccess: (response: Response) => {
+      if (!response.ok) {
+        console.error('Logout Failed')
+        alert('로그아웃 실패')
+        return
+      }
+
+      const result = response.json()
+      console.log('로그아웃 성공', result)
+
+      alert('로그아웃 성공')
+      router.push(`/sign-in`)
+    },
+    onError: (error: unknown) => {
+      console.error('Logout Error:', error)
+      alert('로그아웃 요청 중 오류가 발생했습니다')
+    },
+  })
+}

src/app/page.tsx

@@ -1,28 +1,12 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
+import { useSignOutMutation } from 'queries/useSignOut'
 
 export default function Home(): JSX.Element {
-  const router = useRouter()
+  const mutation = useSignOutMutation()
 
   const handleLogout = async () => {
-    try {
-      const response = await fetch(`/api/auth/sign-out`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-      })
-      if (!response.ok) {
-        console.error('Logout failed')
-        alert('로그아웃 실패 프록시')
-        return
-      }
-      console.log('Logout successful')
-      alert('로그아웃 성공 프록시')
-      router.push('/sign-in')
-    } catch (error) {
-      console.error('Logout error', error)
-      alert('로그아웃 요청 중 오류 발생')
-    }
+    mutation.mutate()
   }
 
   return (