fix: fcm debugging

+ refactoring

src/firebase/messaging/use-service-worker.tsx

@@ -7,9 +7,10 @@ export const useServiceWorker = () => {
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker
         .register('/firebase-messaging-sw.js')
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         .then((registration) => {
           // eslint-disable-next-line no-console
-          console.log('Service Worker 등록 성공:', registration)
+          // console.log('Service Worker 등록 성공:', registration) // 디버깅용
         })
         .catch((error) => {
           console.error('Service Worker 등록 실패:', error)

src/requests/fcm/hooks.ts

@@ -0,0 +1,12 @@
+'use client'
+
+import { useMutation } from '@tanstack/react-query'
+import { postFcmToken } from '.'
+
+export const usePostFcmToken = () => {
+  return useMutation({
+    mutationFn: async (fcmToken: string) => postFcmToken({ fcmToken }),
+    // eslint-disable-next-line no-console
+    onSuccess: () => console.log('토큰 전송 성공'),
+  })
+}

src/requests/fcm/index.tsx

@@ -0,0 +1,23 @@
+'use server'
+
+import { auth } from '@/app/api/auth/[...nextauth]/auth'
+import { API_ENDPOINTS } from '@/shared/configs/endpoint'
+import { http } from '@/shared/lib/axios/http'
+
+export const postFcmToken = async (requestBody: { fcmToken: string }) => {
+  try {
+    const session = await auth()
+
+    const response = await http.post(API_ENDPOINTS.FCM.POST.TOKEN, requestBody, {
+      headers: {
+        Authorization: `Bearer ${session?.user.accessToken}`,
+      },
+    })
+
+    // eslint-disable-next-line no-console
+    console.log(response) // 디버깅용
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}

src/shared/hooks/use-messaging.tsx

@@ -3,39 +3,29 @@
 import { getToken } from '@/firebase/messaging/get-token'
 import { useServiceWorker } from '@/firebase/messaging/use-service-worker'
 import { useEffect } from 'react'
-import { http } from '../lib/axios/http'
-import { API_ENDPOINTS } from '../configs/endpoint'
-import { useSession } from 'next-auth/react'
+import { usePostFcmToken } from '@/requests/fcm/hooks'
 
 export const useMessaging = () => {
   useServiceWorker()
-
-  const { data: session } = useSession()
+  const { mutate: postFcmTokenMutate } = usePostFcmToken()
 
   useEffect(() => {
     try {
       const requestFCMToken = async () => {
         const token = await getToken()
+
         if (token) {
           // eslint-disable-next-line no-console
-          console.log('FCM 토큰:', token) // 디버깅용
+          // console.log('FCM 토큰:', token) // 디버깅용
 
           // FCM 토큰을 서버로 전송
-          await http.post(
-            API_ENDPOINTS.FCM.POST.TOKEN,
-            { fcmToken: token },
-            {
-              headers: {
-                Authorization: `Bearer ${session?.user.accessToken}`,
-              },
-            }
-          )
+          postFcmTokenMutate(token)
         }
       }
 
       void requestFCMToken()
     } catch (error) {
       console.error(error)
     }
-  }, [session])
+  }, [postFcmTokenMutate])
 }