[#128] ♻️ 로그인, 로그아웃, 회원가입 query로 변경 및 리팩토링 (#129)

yellowjang · 장아영 · web-flow · commit b032f293539a · 2024-11-28T19:43:26.000+09:00
* [#128] 🗑️ remove axios from pmpm-lock.yaml * [#128] ♻️ create 'useSignIn' query * [#128] ♻️ create 'useSignUp' query * [#128] ♻️ create 'SignIn', 'SignOut' fetch function * [#128] ♻️ create 'useSignOut' query * [#128] 🔧 install 'ky' * [#128] ✨ create ky api (backendApi, proxyApi) * [#128] ♻️ fetch -> ky * [#128] 🗑️ remove unused import * [#128] 🐛 fix ky error --------- Co-authored-by: 장아영 <jang-ayoung@jang-ayeong-ui-iMac.local>
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
     "clsx": "^2.1.1",
+    "ky": "^1.7.2",
     "next": "^15.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/queries/useSignIn.ts b/queries/useSignIn.ts
@@ -0,0 +1,25 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { useMutation } from '@tanstack/react-query'
+
+import { SignIn } from '@/services/auth/auth'
+
+export const useSignInMutation = () => {
+  const router = useRouter()
+
+  return useMutation({
+    mutationFn: SignIn,
+    onSuccess: (result) => {
+      console.log('Login successful', result)
+
+      alert('로그인 성공')
+      router.push(`/`)
+    },
+    onError: (error: unknown) => {
+      console.error('Login Error:', error)
+      alert('로그인 요청 중 오류가 발생했습니다')
+    },
+  })
+}
diff --git a/queries/useSignOut.ts b/queries/useSignOut.ts
@@ -0,0 +1,25 @@
+'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: result => {
+      console.log('로그아웃 성공', result)
+
+      alert('로그아웃 성공')
+      router.push(`/sign-in`)
+    },
+    onError: (error: unknown) => {
+      console.error('Logout Error:', error)
+      alert('로그아웃 요청 중 오류가 발생했습니다')
+    },
+  })
+}
diff --git a/queries/useSignUp.ts b/queries/useSignUp.ts
@@ -0,0 +1,24 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { useMutation } from '@tanstack/react-query'
+
+import { SignUp } from '@/services/auth/auth'
+
+export const useSignUpMutation = () => {
+  const router = useRouter()
+
+  return useMutation({
+    mutationFn: SignUp,
+    onSuccess: (result) => {
+      console.log('회원가입 성공', result)
+      alert('회원가입 성공')
+      router.push(`/sign-in`)
+    },
+    onError: (error: unknown) => {
+      console.error('SignUp Error:', error)
+      alert('회원가입 요청 중 오류가 발생했습니다')
+    },
+  })
+}
diff --git a/src/app/(pages)/sign-in/page.tsx b/src/app/(pages)/sign-in/page.tsx
@@ -1,41 +1,23 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
-
 import { SubmitHandler, useForm } from 'react-hook-form'
 
 import { SignInRequest } from '@/types/auth.types'
+import { useSignInMutation } from 'queries/useSignIn'
+
 
 export default function LoginPage(): JSX.Element {
-  const router = useRouter()
+
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm<SignInRequest>()
 
-  const onSubmit: SubmitHandler<SignInRequest> = async data => {
-    try {
-      const response = await fetch(`/api/auth/sign-in`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        console.error('Login failed')
-        alert('로그인 실패 프록시 전달')
-        return
-      }
+  const mutation = useSignInMutation()
 
-      const result = await response.json()
-      console.log('Login successful:', result)
-      alert('로그인 성공')
-      router.push('/')
-    } catch (error) {
-      console.error('Login error', error)
-      alert('로그인 요청 중 오류 발생')
-    }
+  const onSubmit: SubmitHandler<SignInRequest> = data => {
+    mutation.mutate(data)
   }
 
   return (
diff --git a/src/app/(pages)/sign-up/page.tsx b/src/app/(pages)/sign-up/page.tsx
@@ -5,8 +5,7 @@ import { useRouter } from 'next/navigation'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
 import { SignUpRequest } from '@/types/auth.types'
-
-import { SignUp } from '@/services/auth/auth'
+import { useSignUpMutation } from 'queries/useSignUp'
 
 export default function SignUpPage(): JSX.Element {
   const router = useRouter()
@@ -15,24 +14,10 @@ export default function SignUpPage(): JSX.Element {
     handleSubmit,
     formState: { errors },
   } = useForm<SignUpRequest>()
+  const mutation = useSignUpMutation()
 
-  const onSubmit: SubmitHandler<SignUpRequest> = async data => {
-    try {
-      const response = await SignUp(data)
-      if (!response.ok) {
-        console.error('회원가입 실패')
-        alert('회원가입 실패')
-        return
-      }
-      const result = await response.json()
-      console.log('회원가입 성공:', result)
-
-      alert('회원가입이 완료되었습니다!')
-      router.push('/sign-in')
-    } catch (error) {
-      console.error('회원가입 요청 중 오류 발생', error)
-      alert('회원가입 중 오류 발생')
-    }
+  const onSubmit: SubmitHandler<SignUpRequest> = data => {
+    mutation.mutate(data)
   }
 
   return (
diff --git a/src/app/api/auth/refresh/route.ts b/src/app/api/auth/refresh/route.ts
@@ -1,33 +1,31 @@
 import { NextResponse } from 'next/server'
 
+import { backendApi } from '@/services/api'
+
 const BACKEND_BASE_URL = process.env.NEXT_PUBLIC_BACKEND_BASE_URL
 
 export const POST = async (req: Request): Promise<NextResponse> => {
   const { refreshToken } = await req.json()
 
   try {
-    const response = await fetch(`${BACKEND_BASE_URL}/refresh`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ refreshToken }),
-    })
+    const { accessToken } = await backendApi
+      .post('refresh', { json: { refreshToken } })
+      .json<{ accessToken: string }>()
+    return NextResponse.json({ success: true, accessToken })
+  } catch (error: any) {
+    console.error('토큰 갱신 에러:', error)
 
-    if (!response.ok) {
-      const errorData = await response.json()
+    if (error.response) {
+      const errorData = await error.response.json()
       return NextResponse.json(
         {
           success: false,
-          message: errorData.message || 'Token refresh failed',
+          message: errorData.messassage || '토큰 갱신 실패',
         },
-        { status: response.status }
+        { status: error.response.status }
       )
     }
 
-    const { accessToken } = await response.json()
-
-    return NextResponse.json({ success: true, accessToken })
-  } catch (error: any) {
-    console.error('Token refresh error:', error)
     return NextResponse.json(
       { success: false, message: 'Internal server error' },
       { status: 500 }
diff --git a/src/app/api/auth/sign-in/route.ts b/src/app/api/auth/sign-in/route.ts
@@ -1,42 +1,52 @@
 import { NextResponse } from 'next/server'
 
-const BACKEND_BASE_URL = process.env.NEXT_PUBLIC_BACKEND_BASE_URL
+import { SignInRequest, SignInResponseResult } from '@/types/auth.types'
+
+import { backendApi } from '@/services/api'
 
 export const POST = async (req: Request): Promise<NextResponse> => {
   const { email, password } = await req.json()
-  const response = await fetch(`${BACKEND_BASE_URL}/v1/auth/sign-in`, {
-    headers: { 'Content-Type': 'application/json' },
-    method: 'POST',
-    body: JSON.stringify({ email, password }),
-  })
 
-  if (!response.ok) {
+  try {
+    const { accessToken, refreshToken } = await backendApi
+      .post('v1/auth/sign-in', {
+        json: { email, password },
+      })
+      .json<SignInResponseResult>()
+
+    const res = NextResponse.json({ success: true })
+
+    res.cookies.set('accessToken', accessToken, {
+      httpOnly: true,
+      secure: true,
+      sameSite: 'strict',
+      path: '/',
+      maxAge: 3600,
+    })
+
+    res.cookies.set('refreshToken', refreshToken, {
+      httpOnly: true,
+      secure: true,
+      sameSite: 'strict',
+      path: '/',
+      maxAge: 1209600,
+    })
+
+    return res
+  } catch (error: any) {
+    console.error('Login failed:', error)
+
+    if (error.response) {
+      const errorData = await error.response.json()
+      return NextResponse.json(
+        { error: errorData.message || 'Login failed' },
+        { status: error.response.status }
+      )
+    }
+
     return NextResponse.json(
-      { error: 'Login failed' },
-      { status: response.status }
+      { error: 'Internal server error' },
+      { status: 500 }
     )
   }
-
-  const data = await response.json()
-  const { accessToken, refreshToken } = data.result
-
-  const res = NextResponse.json({ success: true })
-
-  res.cookies.set('accessToken', accessToken, {
-    httpOnly: true,
-    secure: true,
-    sameSite: 'strict',
-    path: '/',
-    maxAge: 3600,
-  })
-
-  res.cookies.set('refreshToken', refreshToken, {
-    httpOnly: true,
-    secure: true,
-    sameSite: 'strict',
-    path: '/',
-    maxAge: 1209600,
-  })
-
-  return res
 }
diff --git a/src/app/page.tsx b/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 (
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -1,4 +1,6 @@
-import { type NextRequest, NextResponse } from 'next/server'
+import { NextRequest, NextResponse } from 'next/server'
+
+import { proxyApi } from '@/services/api'
 
 console.log('Middleware is running')
 export const config = {
@@ -10,6 +12,7 @@ export async function middleware(req: NextRequest) {
   console.log('Middleware is running')
   console.log('Requested URL:', req.nextUrl.pathname)
   console.log('Headers:', req.headers)
+
   const cookies = req.headers.get('cookie')
   const accessToken = cookies?.match(/accessToken=([^;]*)/)?.[1]
   const refreshToken = cookies?.match(/refreshToken=([^;]*)/)?.[1]
@@ -20,36 +23,32 @@ export async function middleware(req: NextRequest) {
       console.log('Refresh Token is also missing. Redirecting to /sign-in')
       return NextResponse.redirect(new URL('/sign-in', req.url))
     }
-
     try {
-      const refreshResponse = await fetch(`/api/auth/refresh`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ refreshToken }),
-      })
+      type RefreshToken = { accessToken: string }
+      const { accessToken: newAccessToken } = await proxyApi
+        .post(`api/auth/refresh`, {
+          json: { refreshToken },
+        })
+        .json<RefreshToken>()
 
-      if (!refreshResponse.ok) {
-        console.error('Failed to refresh Access Token. Redirecting to /sign-in')
-        return NextResponse.redirect(new URL('/sign-in', req.url))
-      }
-
-      const { accessToken: newAccessToken } = await refreshResponse.json()
+      console.log('엑세스 토큰이 성공적으로 갱신되었습니다', newAccessToken)
 
       const res = NextResponse.next()
+
       res.cookies.set('accessToken', newAccessToken, {
         httpOnly: true,
         secure: true,
         sameSite: 'strict',
         path: '/',
         maxAge: 3600,
       })
-      console.log('Access Token refreshed successfully')
+
       return res
-    } catch (error) {
-      console.error('Middleware Error', error)
+    } catch (error: any) {
+      console.error('엑세스 토큰 갱신 실패', error)
       return NextResponse.redirect(new URL('/sign-in', req.url))
     }
   }
-  console.log('Access Token is valid. Keep going')
+  console.log('엑세스 토큰이 아직 유효합니다. ')
   return NextResponse.next()
 }
diff --git a/src/services/api.ts b/src/services/api.ts
diff --git a/src/services/auth/auth.ts b/src/services/auth/auth.ts
