[FE] FIX: 브라우저 환경에서 getMessaging 호출 #1680

innovationacademy-kr · Oct 14, 2024 · c8630ec · c8630ec
1 parent aaf596b
commit c8630ec
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/frontend/src/Cabinet/components/Modals/StoreModal/ExtendModal.tsx b/frontend/src/Cabinet/components/Modals/StoreModal/ExtendModal.tsx
@@ -1,3 +1,4 @@
+import { HttpStatusCode } from "axios";
 import React, { useEffect, useState } from "react";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import styled from "styled-components";
@@ -32,7 +33,6 @@ import {
   axiosUseItem,
 } from "@/Cabinet/api/axios/axios.custom";
 import { getExtendedDateString } from "@/Cabinet/utils/dateUtils";
-import { HttpStatusCode } from "axios";
 
 const ExtendModal: React.FC<{
   onClose: () => void;
@@ -230,7 +230,7 @@ const ExtendModal: React.FC<{
         setModalTitle(defaultFailureModalTitle);
         setModalContents(noItemMsg);
         setUrl("/store");
-      } else if (error.response.status === 403) {
+      } else if (error.response.status === HttpStatusCode.Forbidden) {
         setModalTitle(defaultFailureModalTitle);
         setModalContents(overdueMsg);
       } else {

diff --git a/frontend/src/Cabinet/firebase/firebase-messaging-sw.ts b/frontend/src/Cabinet/firebase/firebase-messaging-sw.ts
@@ -1,6 +1,7 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import {
+  Messaging,
   deleteToken,
   getMessaging,
   getToken,
@@ -18,7 +19,11 @@ export const firebaseConfig = {
 };
 
 const app = initializeApp(firebaseConfig);
-const messaging = getMessaging(app);
+// const messaging = getMessaging(app);
+let messaging: null | Messaging = null;
+if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
+  messaging = getMessaging(app);
+}
 
 // FCM APP을 등록 후 브라우저 알림 권한을 요청하고, 토큰을 반환
 export const requestFcmAndGetDeviceToken = async (): Promise<string | null> => {
@@ -32,6 +37,10 @@ export const requestFcmAndGetDeviceToken = async (): Promise<string | null> => {
 
   console.log("알림 권한이 허용됨");
 
+  if (!messaging) {
+    console.log("브라우저 환경이 아닙니다."); // TODO :
+    return null;
+  }
   const token = await getToken(messaging, {
     vapidKey: import.meta.env.VITE_FIREBASE_APP_VAPID_KEY,
   });
@@ -49,6 +58,11 @@ export const requestFcmAndGetDeviceToken = async (): Promise<string | null> => {
 
 // FCM 토큰 제거 및 브라우저 알람 권한 해제
 export const deleteFcmToken = async (): Promise<void> => {
+  if (!messaging) {
+    console.log("브라우저 환경이 아닙니다."); // TODO :
+    return;
+  }
+
   await deleteToken(messaging);
   console.log("Token deleted.");
 };