Merge pull request #82 from cho-in-sik/feature/fcm

fix: 히드라 에러 수정
JNU-econovation · Jan 18, 2025 · c500077 · c500077
2 parents b9fd200 + 1b3dc73
commit c500077
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/src/components/FCMComponent.tsx b/src/components/FCMComponent.tsx
@@ -11,19 +11,23 @@ export default function FCMComponent() {
   const { fcmToken, notificationPermissionStatus } = useSendPush();
 
   useEffect(() => {
-    // FCM 토큰 로컬스토리지에 저장
-
-    if (fcmToken) {
+    if (typeof window !== 'undefined' && fcmToken) {
+      // FCM 토큰 로컬스토리지에 저장
       localStorage.setItem('fcmToken', fcmToken);
       const token = localStorage.getItem('accessToken');
       if (token) {
-        const res = postFcmToken(fcmToken);
-        console.log(res);
+        postFcmToken(fcmToken)
+          .then((res) => console.log('FCM Token sent:', res))
+          .catch((err) => console.error('Error sending FCM Token:', err));
       }
     }
 
     // 알림 권한 요청
-    if (Notification.permission !== 'granted') {
+    if (
+      typeof window !== 'undefined' &&
+      'Notification' in window &&
+      Notification.permission !== 'granted'
+    ) {
       Notification.requestPermission().then((permission) => {
         if (permission === 'granted') {
           console.log('알림 권한 허용되었습니다.');
@@ -34,22 +38,24 @@ export default function FCMComponent() {
     }
 
     // 포그라운드 상태에서 수신된 푸시 메시지 처리
-    const messaging = getMessaging(firebaseApp);
-    const unsubscribe = onMessage(messaging, (payload) => {
-      console.log('포그라운드 메시지 수신:', payload);
-      const { title, body } = payload.notification || {};
-
-      // if (Notification.permission === 'granted') {
-      //   new Notification(title || '알림', {
-      //     body: body || '내용 없음',
-      //     icon: '/images/basicIcon.png',
-      //   });
-      // }
-    });
-
-    return () => {
-      unsubscribe(); // 메시지 구독 해제
-    };
+    if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
+      const messaging = getMessaging(firebaseApp);
+      const unsubscribe = onMessage(messaging, (payload) => {
+        console.log('포그라운드 메시지 수신:', payload);
+        const { title, body } = payload.notification || {};
+
+        if (Notification.permission === 'granted') {
+          new Notification(title || '알림', {
+            body: body || '내용 없음',
+            icon: '/images/basicIcon.png',
+          });
+        }
+      });
+
+      return () => {
+        unsubscribe(); // 메시지 구독 해제
+      };
+    }
   }, [fcmToken]);
 
   return null;

diff --git a/src/hooks/useSendPush.tsx b/src/hooks/useSendPush.tsx
@@ -11,29 +11,34 @@ const useSendPush = () => {
 
   useEffect(() => {
     const retrieveToken = async () => {
-      try {
-        if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
+      if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
+        try {
           const messaging = getMessaging(firebaseApp);
 
+          // 알림 권한 요청
           const permission = await Notification.requestPermission();
           setNotificationPermissionStatus(permission);
 
           if (permission === 'granted') {
+            // FCM 토큰 가져오기
             const currentToken = await getToken(messaging, {
               vapidKey:
                 'BCfFDqn6mJDC_unugYg5-MuS4nYZWmY40sI3GKNqanCX8wIyL4QQM8yVpyN_uLqDqNP52lppWC9upzAJADfaoGY',
             });
             if (currentToken) {
               setToken(currentToken);
+              console.log('FCM Token:', currentToken);
             } else {
-              console.log(
+              console.warn(
                 'No registration token available. Request permission to generate one.',
               );
             }
           }
+        } catch (error) {
+          console.error('An error occurred while retrieving token:', error);
         }
-      } catch (error) {
-        console.log('An error occurred while retrieving token:', error);
+      } else {
+        console.warn('Service Worker is not supported in this browser.');
       }
     };