feat: fcm 기능 도입중

src/components/pwa/Fcm.tsx

@@ -0,0 +1,67 @@
+import { initializeApp } from 'firebase/app';
+import { getMessaging, getToken } from 'firebase/messaging';
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_ID,
+  appId: process.env.NEXT_PUBLIC_APP_ID
+};
+
+const app = initializeApp(firebaseConfig);
+
+/**
+ * FCM 토큰 발급
+ */
+export const setTokenHandler = async () => {
+  const messaging = getMessaging(app);
+  await getToken(messaging, {
+    vapidKey: process.env.NEXT_PUBLIC_VAPID_KEY
+  })
+    .then(async (currentToken) => {
+      if (!currentToken) {
+        // 토큰 생성 불가시 처리할 내용, 주로 브라우저 푸시 허용이 안된 경우에 해당한다.
+      } else {
+        // 토큰을 받았다면 여기서 DB에 저장하면 됩니다.
+      }
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+
+export const clickPushHandler = () => {
+  Notification.requestPermission().then((permission) => {
+    if (permission !== 'granted') {
+      // 푸시 거부됐을 때 처리할 내용
+      console.log('푸시 거부됨');
+    } else {
+      // 푸시 승인됐을 때 처리할 내용
+      console.log('푸시 승인됨');
+    }
+  });
+};
+
+const VAPID_KEY = process.env.NEXT_PUBLIC_VAPID_KEY;
+
+export const getTokenHandler = async () => {
+  const messaging = getMessaging(app);
+  return await getToken(messaging, {
+    vapidKey: VAPID_KEY
+  })
+    .then(async (currentToken) => {
+      if (!currentToken) {
+        // 토큰 생성 불가시 처리할 내용, 주로 브라우저 푸시 허용이 안된 경우에 해당한다.
+        console.error('토큰 생성 불가');
+      } else {
+        // 토큰을 받았다면 여기서 supabase 테이블의 저장하면 됩니다.
+        console.log('currentToken', currentToken);
+        return currentToken;
+      }
+    })
+    .catch((error) => {
+      console.error('token error', error);
+    });
+};

src/components/pwa/Push.tsx

@@ -0,0 +1,11 @@
+export const clickPushHandler = () => {
+  Notification.requestPermission().then((permission) => {
+    if (permission !== 'granted') {
+      // 푸시 거부됐을 때 처리할 내용
+      console.log('푸시 거부됨');
+    } else {
+      // 푸시 승인됐을 때 처리할 내용
+      console.log('푸시 승인됨');
+    }
+  });
+};

src/components/pwa/PushSend.tsx

@@ -0,0 +1,28 @@
+import admin, { ServiceAccount } from 'firebase-admin';
+
+interface NotificationData {
+  data: {
+    title: string;
+    body: string;
+    image: string;
+    click_action: string;
+  };
+  token: string;
+}
+export const sendFCMNotification = async (data: NotificationData) => {
+  const serviceAccount: ServiceAccount = {
+    projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+    privateKey: process.env.NEXT_PUBLIC_FIREBASE_PRIVATE_KEY?.replace(/\\n/g, '\n'),
+    clientEmail: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_EMAIL
+  };
+
+  if (!admin.apps.length) {
+    admin.initializeApp({
+      credential: admin.credential.cert(serviceAccount)
+    });
+  }
+
+  const res = await admin.messaging().send(data);
+
+  return res;
+};

src/firebase/firebasedb.ts

@@ -0,0 +1,41 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from 'firebase/app';
+// import { getAnalytics } from "firebase/analytics";
+import { getMessaging, getToken } from 'firebase/messaging';
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_ID,
+  appId: process.env.NEXT_PUBLIC_APP_ID
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+// const analytics = getAnalytics(app);
+
+/**
+ * FCM 토큰 발급
+ */
+export const setTokenHandler = async () => {
+  const messaging = getMessaging(app);
+  await getToken(messaging, {
+    vapidKey: process.env.NEXT_PUBLIC_VAPID_KEY
+  })
+    .then(async (currentToken) => {
+      if (!currentToken) {
+        // 토큰 생성 불가시 처리할 내용, 주로 브라우저 푸시 허용이 안된 경우에 해당한다.
+      } else {
+        // 토큰을 받았다면 여기서 DB에 저장하면 됩니다.
+      }
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};