Merge pull request #787 from woowacourse-teams/fix/#786

초대코드 로직 수정, 알림이 사파리에서 작동하지 않는 문제 수정
woowacourse-teams · Nov 22, 2024 · 2582380 · 2582380
2 parents 3d607db + 68d4caf
commit 2582380
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 43 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -6,21 +6,13 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 import createQueryClient from './queryClient';
 import fonts from '@_common/font.style';
-// import { removeInviteCode } from '@_common/inviteCodeManager';
 import reset from './common/reset.style';
 import router from '@_routes/router';
 import { theme } from '@_common/theme/theme.style';
 
 export default function App() {
   const queryClient = useMemo(createQueryClient, []);
 
-  // useEffect(() => {
-  //   window.addEventListener('beforeunload', removeInviteCode);
-  //   return () => {
-  //     window.removeEventListener('beforeunload', removeInviteCode);
-  //   };
-  // }, []);
-
   return (
     <>
       <ThemeProvider theme={theme}>

diff --git a/frontend/src/components/OptionsPanel/OptionsPanel.tsx b/frontend/src/components/OptionsPanel/OptionsPanel.tsx
@@ -14,6 +14,7 @@ interface OptionsPanelProps {
   maxHeight?: string;
 }
 
+import { Fragment } from 'react';
 import * as S from './OptionsPanel.style';
 
 import { useTheme } from '@emotion/react';
@@ -31,7 +32,7 @@ export default function OptionsPanel(props: OptionsPanelProps) {
   const theme = useTheme();
 
   return (
-    <>
+    <Fragment>
       <div onClick={onClose} css={S.dimmer} />
       <div
         css={S.panel({
@@ -57,6 +58,6 @@ export default function OptionsPanel(props: OptionsPanelProps) {
           );
         })}
       </div>
-    </>
+    </Fragment>
   );
 }
diff --git a/frontend/src/pages/Mypage/MyPage.tsx b/frontend/src/pages/Mypage/MyPage.tsx
@@ -53,7 +53,7 @@ export default function MyPage() {
           </InformationLayout.Header.Left>
           <InformationLayout.Header.Right>
             {!isEditing ? (
-              <>
+              <Fragment>
                 <button
                   css={S.AccountButton({ theme })}
                   onClick={handleEditClick}
@@ -66,9 +66,9 @@ export default function MyPage() {
                 >
                   <Setting />
                 </button>
-              </>
+              </Fragment>
             ) : (
-              <>
+              <Fragment>
                 {isShownRest && (
                   <button
                     css={S.AccountButton({ theme })}
@@ -93,7 +93,7 @@ export default function MyPage() {
                 <button css={S.AccountButton({ theme })} onClick={handleCancel}>
                   취소
                 </button>
-              </>
+              </Fragment>
             )}
           </InformationLayout.Header.Right>
         </InformationLayout.Header>

diff --git a/frontend/src/pages/Navigator/DarakbangInvitationRoute.tsx b/frontend/src/pages/Navigator/DarakbangInvitationRoute.tsx
@@ -1,5 +1,9 @@
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
-import { removeInviteCode, setInviteCode } from '@_common/inviteCodeManager';
+import {
+  getInviteCode,
+  removeInviteCode,
+  setInviteCode,
+} from '@_common/inviteCodeManager';
 
 import Button from '@_components/Button/Button';
 import CompleteLayout from '@_layouts/CompleteLayout/CompleteLayout';
@@ -13,7 +17,7 @@ export default function DarakbangInvitationRoute() {
   const [searchParam] = useSearchParams();
   const navigate = useNavigate();
 
-  const code = searchParam.get('code');
+  const code = searchParam.get('code') || getInviteCode();
   if (code) setInviteCode(code);
 
   const { darakbangName } = useDarakbangNameByCode(code || '');

diff --git a/frontend/src/service/forgroundMessage.ts b/frontend/src/service/forgroundMessage.ts
@@ -1,10 +1,10 @@
 import { getMessaging, onMessage } from 'firebase/messaging';
+import { initializeFirebaseApp } from './initFirebase';
 
-import { app } from './initFirebase';
-import checkCanUseFirebase from '@_utils/checkCanUseFirebase';
+async function initializeForegroundMessageHandling() {
+  const app = await initializeFirebaseApp(); // Firebase 앱 초기화가 완료되면 실행
+  if (!app) return; // Firebase를 사용할 수 없는 경우 종료
 
-function initializeForegroundMessageHandling() {
-  if (!checkCanUseFirebase()) return;
   const messaging = getMessaging(app);
 
   onMessage(messaging, (payload) => {

diff --git a/frontend/src/service/initFirebase.ts b/frontend/src/service/initFirebase.ts
@@ -10,6 +10,13 @@ const firebaseConfig = {
   appId: process.env.REACT_APP_FIREBASE_APP_ID,
   measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
 };
-export const app = checkCanUseFirebase()
-  ? initializeApp(firebaseConfig)
-  : undefined;
+
+export const initializeFirebaseApp = async () => {
+  const canUseFirebase = await checkCanUseFirebase();
+  if (canUseFirebase) {
+    return initializeApp(firebaseConfig);
+  } else {
+    console.warn('Firebase는 이 환경에서 지원되지 않습니다.');
+    return undefined;
+  }
+};
diff --git a/frontend/src/service/notification.ts b/frontend/src/service/notification.ts
@@ -1,41 +1,35 @@
 /* eslint-disable compat/compat */
 
 import { getMessaging, getToken } from 'firebase/messaging';
+import { initializeFirebaseApp } from './initFirebase'; // 비동기적으로 초기화된 Firebase 앱 가져오기
 
-import { app } from './initFirebase';
-import checkCanUseFirebase from '@_utils/checkCanUseFirebase';
+export async function requestPermission(
+  mutationFn: (currentToken: string) => void,
+) {
+  const app = await initializeFirebaseApp(); // Firebase 앱 초기화가 완료되면 실행
+  if (!app) return; // Firebase를 사용할 수 없는 경우 종료
 
-const messaging = checkCanUseFirebase() ? getMessaging(app) : null;
+  const messaging = getMessaging(app);
 
-export function requestPermission(mutationFn: (currentToken: string) => void) {
-  if (!checkCanUseFirebase()) return;
-  // console.log('권한 요청 중...');
   Notification.requestPermission().then((permission) => {
     if (permission === 'granted') {
-      // console.log('알림 권한이 허용됨');
-      //@ts-expect-error 파이어베이스가 사용되면 messaging이 존재
       getToken(messaging, {
         vapidKey: process.env.VAPID_KEY,
       })
         .then((currentToken) => {
           if (currentToken) {
-            // console.log(currentToken);
             mutationFn(currentToken);
           } else {
-            // Show permission request UI
-            // console.log(
-            //   'No registration token available. Request permission to generate one.',
-            // );
-            // ...
+            console.warn(
+              'No registration token available. Request permission to generate one.',
+            );
           }
         })
-        .catch(() => {
-          // console.log('An error occurred while retrieving token. ', err);
-          // ...
+        .catch((err) => {
+          console.error('An error occurred while retrieving token: ', err);
         });
-      // FCM 메세지 처리
     } else {
-      // console.log('알림 권한 허용 안됨');
+      console.warn('알림 권한이 허용되지 않았습니다.');
     }
   });
 }
diff --git a/frontend/src/utils/checkCanUseFirebase.ts b/frontend/src/utils/checkCanUseFirebase.ts
@@ -1,6 +1,12 @@
-export default function checkCanUseFirebase() {
+import { isSupported } from 'firebase/messaging';
+export default async function checkCanUseFirebase() {
   if (location.hostname === 'localhost') return true;
   if (location.protocol !== 'https:') return false;
   if (navigator.userAgent.indexOf('KAKAO') >= 0) return false;
+  const messagingSupported = await isSupported();
+  if (!messagingSupported) {
+    console.error("This browser doesn't support Firebase Messaging.");
+    return false;
+  }
   return true;
 }