feat: 로그아웃 훅 구현

src/api/core.ts

@@ -8,7 +8,9 @@ import axios, {
 } from 'axios'
 import Cookies from 'js-cookie'
 import { ACCESS_TOKEN, HTTP_METHODS } from '@/constants'
-import { BaseResponse } from './types'
+import { useLogout } from '@/app/auth/auth'
+import { useRouter } from 'next/navigation'
+import { BaseResponse, ErrorResponse } from './types'
 
 const axiosInstance: AxiosInstance = axios.create({
   baseURL: '/v1',
@@ -35,11 +37,43 @@ axiosInstance.interceptors.request.use(
 )
 axiosInstance.interceptors.response.use(
   (response: AxiosResponse) => response.data,
-  async (error: AxiosError) => {
+  async (error: AxiosError): Promise<ErrorResponse> => {
+    const { push } = useRouter()
+    const { logout } = useLogout()
+
     if (!error.response) {
-      return Promise.reject(error)
+      alert('네트워크 오류가 발생했습니다. 다시 시도해 주세요.')
+      throw {
+        success: false,
+        timestamp: new Date(),
+        statusCode: 0,
+        code: 'NETWORK_ERROR',
+        message: 'Network Error',
+      } as ErrorResponse
+    }
+
+    const { status: statusCode } = error.response
+    const message =
+      (error.response.data as { message?: string })?.message ||
+      'An error occurred'
+    const code =
+      (error.response.data as { code?: string })?.code || 'UNKNOWN_ERROR'
+    if (statusCode === 401) {
+      alert('인증이 만료되었습니다. 다시 로그인해 주세요.')
+      logout()
+      push('/')
+    } else if (statusCode === 500) {
+      alert('서버에서 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.')
+    } else {
+      alert(message || '오류가 발생했습니다.')
     }
-    return Promise.reject(error.response.data)
+    throw {
+      success: false,
+      timestamp: new Date(),
+      statusCode,
+      code,
+      message,
+    } as ErrorResponse
   },
 )
 

src/app/auth/auth.ts

@@ -0,0 +1,19 @@
+import Cookies from 'js-cookie'
+import useUserInfo from '@/store/useUserInfo'
+import { useRouter } from 'next/navigation'
+
+export const useLogout = () => {
+  const { push } = useRouter()
+  const { deleteUserInfo } = useUserInfo()
+
+  const logout = () => {
+    deleteUserInfo()
+    Object.keys(Cookies.get()).forEach((cookieName) => {
+      Cookies.remove(cookieName)
+    })
+
+    push('/')
+  }
+
+  return { logout }
+}

src/app/mypage/page.tsx

@@ -1,21 +1,21 @@
 'use client'
 
-import Cookies from 'js-cookie'
 import { Button, HeaderWithBack, IconRight, Pencil, Switch } from '@/components'
 import useUserInfo from '@/store/useUserInfo'
 import { useRouter } from 'next/navigation'
 import Image from 'next/image'
 import { useState } from 'react'
 import { useMyPageContext } from './components/fetcher'
 import { usePatchAlarm } from './api/queries'
+import { useLogout } from '../auth/auth'
 
 export default function MyPage() {
   const { nickname, profileImage } = useUserInfo().userInfo
   const { push } = useRouter()
 
   const { isEmailNotificationEnabled, email } = useMyPageContext()
   const { mutate } = usePatchAlarm()
-  const { deleteUserInfo } = useUserInfo()
+  const { logout } = useLogout()
 
   const [isEmailAlert, setIsEmailAlert] = useState(isEmailNotificationEnabled)
 
@@ -92,9 +92,7 @@ export default function MyPage() {
               type="submit"
               className="px-20 py-16"
               onClick={() => {
-                deleteUserInfo()
-                Cookies.remove('accessToken')
-                push('/')
+                logout()
               }}
             >
               <span>로그아웃</span>