Merge pull request #114 from projects200/feature/fcm-link

(#109) fcm 연동

Author: ldg-96

next.config.mjs

@@ -2,7 +2,8 @@ import withPWAInit from '@ducanh2912/next-pwa'
 
 const pwaConfig = {
   dest: 'public',
-  disable: process.env.NODE_ENV === 'development',
+  swSrc: 'src/firebase-messaging-sw.js',
+  // disable: process.env.NODE_ENV === 'development',
   register: true,
   skipWaiting: true,
 }

src/app/auth/login/page.tsx

@@ -10,10 +10,29 @@ import Logo from '@/assets/logo.svg'
 
 import styles from './login.module.css'
 
+// 임시 알람 요청 테스트코드
+import { requestFcmToken } from '@/lib/firebase/config'
+
 export default function Login() {
+  // 임시 알람 요청 테스트코드
+  const handleTestClick = async () => {
+    const token = await requestFcmToken()
+    if (token) {
+      console.log('발급 토큰 : ', token)
+      alert('토큰 발급 성공')
+    } else {
+      alert('토큰 발급 실패')
+    }
+  }
   return (
     <section className={styles['container']}>
-      <Logo className={styles['logo']} width={150} height={150} />
+      {/* 임시로 테스트를 위해 로고 클릭시 fcm토큰 요청하도록 구현했습니다. */}
+      <Logo
+        className={styles['logo']}
+        width={150}
+        height={150}
+        onClick={handleTestClick}
+      />
       <Typography
         className={styles['title']}
         as="div"

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
-import { Analytics } from '@/lib/firebase'
+import Analytics from '@/lib/firebase/analytics'
 
 import { ClientProviders } from './_components/clientProviders'
 import './reset.css'

src/firebase-messaging-sw.js

@@ -0,0 +1,29 @@
+importScripts(
+  'https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js',
+)
+importScripts(
+  'https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging-compat.js',
+)
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+}
+
+firebase.initializeApp(firebaseConfig)
+
+const messaging = firebase.messaging()
+
+messaging.onBackgroundMessage(function (payload) {
+  const notificationTitle = payload.notification.title
+  const notificationOptions = {
+    body: payload.notification.body,
+    icon: '/icons/logo192.png',
+  }
+
+  self.registration.showNotification(notificationTitle, notificationOptions)
+})

src/lib/firebase.ts

@@ -0,0 +1,21 @@
+'use client'
+
+import { useEffect } from 'react'
+import { getAnalytics, isSupported, logEvent } from 'firebase/analytics'
+import { firebaseApp } from './config'
+
+function Analytics() {
+  useEffect(() => {
+    isSupported().then((supported) => {
+      if (supported) {
+        const analytics = getAnalytics(firebaseApp)
+        logEvent(analytics, 'page_view', {
+          page_path: window.location.pathname,
+        })
+      }
+    })
+  }, [])
+  return null
+}
+
+export default Analytics

src/lib/firebase/analytics.tsx

@@ -0,0 +1,55 @@
+import { initializeApp, getApps, getApp, FirebaseApp } from 'firebase/app'
+import { getMessaging, getToken, Messaging } from 'firebase/messaging'
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+}
+
+const firebaseApp: FirebaseApp = !getApps().length
+  ? initializeApp(firebaseConfig)
+  : getApp()
+
+let messaging: Messaging | null = null
+
+const initializeMessaging = () => {
+  if (typeof window !== 'undefined') {
+    if (!messaging) {
+      messaging = getMessaging(firebaseApp)
+    }
+  }
+  return messaging
+}
+
+const requestFcmToken = async (): Promise<string | null> => {
+  const messagingInstance = initializeMessaging()
+
+  if (!messagingInstance) return null
+
+  try {
+    const serviceWorkerRegistration =
+      await navigator.serviceWorker.register('/sw.js')
+
+    const permission = await Notification.requestPermission()
+    if (permission !== 'granted') {
+      return null
+    }
+
+    const currentToken = await getToken(messagingInstance, {
+      vapidKey: process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY,
+      serviceWorkerRegistration: serviceWorkerRegistration,
+    })
+
+    return currentToken
+  } catch (err) {
+    console.error('An error occurred while retrieving token. ', err)
+    return null
+  }
+}
+
+export { firebaseApp, messaging, requestFcmToken }