feat: 알림 허용 버튼

Author: LimFull

fe/src/app/page.tsx

@@ -3,17 +3,21 @@
 import { useEffect } from "react";
 import { useFirebase } from '@/hooks/useFirebase';
 import { MatchList } from '@/components/modules/MatchList';
+import { NotificationPrompt } from '@/components/modules/NotificationPrompt';
 
 export default function Home() {
-  const { notificationPermission } = useFirebase();
+  const { notificationPermission, requestNotificationPermission } = useFirebase();
 
   useEffect(() => {
-    // 알림 권한 상태 로깅 (디버깅용)
     console.log('Notification Permission:', notificationPermission);
   }, [notificationPermission]);
 
   return (
     <main className="flex min-h-screen flex-col items-center p-4 md:p-24">
+      <NotificationPrompt
+        permission={notificationPermission}
+        onRequestPermission={requestNotificationPermission}
+      />
       <MatchList />
     </main>
   );

fe/src/components/modules/NotificationPrompt.tsx

@@ -0,0 +1,34 @@
+interface Props {
+  permission: NotificationPermission;
+  onRequestPermission: () => Promise<void>;
+}
+
+export const NotificationPrompt = ({
+  permission,
+  onRequestPermission,
+}: Props) => {
+  switch (permission) {
+    case 'default':
+      return (
+        <div className="mb-4 p-4 bg-blue-100 rounded-lg">
+          <p className="mb-2">손흥민의 경기 알림을 받아보시겠습니까?</p>
+          <button
+            onClick={onRequestPermission}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            알림 받기
+          </button>
+        </div>
+      );
+    case 'denied':
+      return (
+        <div className="mb-4 p-4 bg-yellow-100 rounded-lg">
+          <p className="text-sm text-yellow-800">
+            알림이 차단되어 있습니다. 브라우저 설정에서 알림을 허용해주세요.
+          </p>
+        </div>
+      );
+    default:
+      return null;
+  }
+}; 

fe/src/hooks/useFirebase.ts

@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 import { initializeApp } from 'firebase/app';
-import { getMessaging, getToken } from 'firebase/messaging';
+import { getMessaging, getToken, Messaging } from 'firebase/messaging';
 import { firebaseConfig } from '@/constants/config';
 
 export const useFirebase = () => {
   const [fcmToken, setFcmToken] = useState<string | null>(null);
   const [notificationPermission, setNotificationPermission] = useState<NotificationPermission>('default');
+  const [messaging, setMessaging] = useState<Messaging | null>(null);
 
   const registerTokenWithServer = async (token: string) => {
     try {
@@ -26,33 +27,56 @@ export const useFirebase = () => {
     }
   };
 
+  const requestNotificationPermission = async () => {
+    try {
+      if (!messaging) {
+        console.error('Firebase Messaging이 초기화되지 않았습니다.');
+        return;
+      }
+
+      console.log('알림 권한 요청 시작');
+      const permission = await Notification.requestPermission();
+      console.log('권한 요청 결과:', permission);
+      setNotificationPermission(permission);
+
+      if (permission === 'granted') {
+        console.log('권한이 허용됨, 토큰 요청 시작');
+        const token = await getToken(messaging, {
+          vapidKey: process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY
+        });
+        
+        if (token) {
+          console.log('FCM 토큰 발급 성공:', token);
+          setFcmToken(token);
+          await registerTokenWithServer(token);
+        } else {
+          console.log('토큰을 받지 못했습니다.');
+        }
+      } else {
+        console.log('알림 권한이 거부되었습니다.');
+      }
+    } catch (error) {
+      console.error('알림 권한 요청 에러:', error);
+      console.error('에러 상세:', error instanceof Error ? error.message : '알 수 없는 에러');
+    }
+  };
+
   useEffect(() => {
     const initializeFirebase = async () => {
       try {
-        // Firebase 초기화
+        console.log('Firebase 초기화 시작');
         const app = initializeApp(firebaseConfig);
-        const messaging = getMessaging(app);
-
-        // 알림 권한 확인
-        const permission = await Notification.requestPermission();
-        console.log('permission', permission);
-        setNotificationPermission(permission);
+        const messagingInstance = getMessaging(app);
+        setMessaging(messagingInstance);
+        console.log('Firebase 초기화 완료');
 
-        if (permission === 'granted') {
-          // FCM 토큰 얻기
-          const token = await getToken(messaging, {
-            vapidKey: process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY
-          });
-          
-          if (token) {
-            console.log('FCM 토큰:', token);
-            setFcmToken(token);
-            // 서버에 토큰 등록
-            await registerTokenWithServer(token);
-          }
-        }
+        // 현재 알림 권한 상태 확인
+        const currentPermission = Notification.permission;
+        console.log('현재 알림 권한 상태:', currentPermission);
+        setNotificationPermission(currentPermission);
       } catch (error) {
         console.error('Firebase 초기화 에러:', error);
+        console.error('에러 상세:', error instanceof Error ? error.message : '알 수 없는 에러');
       }
     };
 
@@ -62,5 +86,6 @@ export const useFirebase = () => {
   return {
     fcmToken,
     notificationPermission,
+    requestNotificationPermission,
   };
 };