#89 feat add realtime notification with fcm

package.json

@@ -17,6 +17,7 @@
     "axios": "^1.6.2",
     "date-fns": "^3.1.0",
     "dotenv": "^16.3.1",
+    "firebase": "^9.23.0",
     "framer-motion": "^10.16.16",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",

public/firebase-messaging-sw.js

@@ -0,0 +1,28 @@
+self.addEventListener('install', function () {
+  console.log('[FCM SW] 설치중..');
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', function () {
+  console.log('[FCM SW] 실행중..');
+});
+
+self.addEventListener('push', function (e) {
+  if (!e.data.json()) return;
+
+  const resultData = e.data.json().notification;
+  // 필수! 알람 제목
+  const notificationTitle = resultData.title;
+  const notificationOptions = {
+    //필수! 알람 설명
+    body: resultData.body,
+    //필수! 알람 이미지(프로필, 로고)
+    icon: resultData.image,
+    //필수! 알람 분류태그 (전체, 투표, 나가기...)
+    tag: resultData.tag,
+    ...resultData,
+  };
+  console.log('출력');
+
+  self.registration.showNotification(notificationTitle, notificationOptions);
+});

src/App.tsx

@@ -2,10 +2,12 @@ import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {Suspense} from 'react';
 import {CookiesProvider} from 'react-cookie';
 import {BrowserRouter} from 'react-router-dom';
+import './firebase/messaging-init-in-sw';
 
 import './sass/index.scss';
 
 import MainRouter from './routes/MainRouter/MainRouter';
+window.Kakao.init(import.meta.env.VITE_KAKAO_KEY);
 
 const queryClient = new QueryClient();
 function App() {

src/api/invite.ts

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+import {InviteCodeRequestParams} from '@/types/Invitation';
+
+export const postJoin = async (spaceId: number) =>
+  await axios.post(`/api/auth/join/spaces/${spaceId}`, {withCredentials: true});
+export const postJoinSpaces = async (params: InviteCodeRequestParams) => {
+  const {spaceId} = params;
+  const response = await axios.post(`/api/auth/join/spaces/${spaceId}/code`, {withCredentials: true});
+  return response.data.data;
+};

src/api/notification.ts

@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+import {Token} from '@/types/notification';
+
+export const sendNotificationToken = async (token: Token) => {
+  try {
+    const response = await axios.post('/api/notifications/token', token, {withCredentials: true});
+    return response.data;
+  } catch (error) {
+    console.error('[notification]토큰 전송 요청에 실패했습니다', error);
+  }
+};
+
+export const GetNotification = async () => {
+  try {
+    const response = await axios.get('/api/notifications');
+    return response.data.data;
+  } catch (error) {
+    console.log('[notification]알림내용을 가져오지 못했습니다');
+  }
+};

src/api/spaces.ts

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const spacesRequest = {
+  getSpaces: () => axios.get('/api/spaces').then((response) => response.data.data.spaces),
+  postSpaces: () => axios.post('/api/spaces'),
+};

src/api/user.ts

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export const memberRequest = {
+  getMyInfo: () => axios.get('/api/members/my-info').then((response) => response.data.data),
+};

src/components/Alarm/Alarm.tsx

@@ -1,16 +1,16 @@
-import { Slide } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import {Slide} from '@chakra-ui/react';
+import {useEffect, useState} from 'react';
 
-import styles from "./Alarm.module.scss";
+import styles from './Alarm.module.scss';
 
-import useLockBodyScroll from "@/hooks/useLockBodyScroll";
+import useLockBodyScroll from '@/hooks/useLockBodyScroll';
 
-import Back from "@/components/Alarm/Back/Back";
-import TabCapsule from "@/components/Alarm/TabCapsule/TabCapsule";
+import Back from '@/components/Alarm/Back/Back';
+import TabCapsule from '@/components/Alarm/TabCapsule/TabCapsule';
 
-import { AlarmProps } from "@/types/alarm";
+import {AlarmProps} from '@/types/alarm';
 
-function Alarm({ isAlarmOpen, alarmClose }: AlarmProps) {
+function Alarm({isAlarmOpen, alarmClose}: AlarmProps) {
   // 알림 스타일링
   const [isVisible, setIsVisible] = useState(isAlarmOpen);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -30,34 +30,42 @@ function Alarm({ isAlarmOpen, alarmClose }: AlarmProps) {
     };
   }, [isAlarmOpen]);
   const containerStyle = {
-    display: isVisible ? "block" : "none",
+    display: isVisible ? 'block' : 'none',
   };
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
     };
-    window.addEventListener("resize", handleResize);
+    window.addEventListener('resize', handleResize);
     handleResize();
     return () => {
-      window.removeEventListener("resize", handleResize);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);
   useLockBodyScroll(isAlarmOpen);
 
+  // 새로운 알림 상태관리
+  useEffect(() => {
+    if (isAlarmOpen === true) {
+      localStorage.removeItem('news');
+      console.log('비움');
+    }
+  }, [isAlarmOpen]);
+
   return (
     <div style={containerStyle} className={styles.page}>
       <Slide
         in={isAlarmOpen}
-        direction="right"
+        direction='right'
         className={styles.slide}
         style={{
-          width: windowWidth <= 450 ? "100%" : "45rem",
-          position: "absolute",
+          width: windowWidth <= 450 ? '100%' : '45rem',
+          position: 'absolute',
           zIndex: 10,
         }}
         transition={{
-          exit: { duration: 0.5 },
-          enter: { duration: 0.5 },
+          exit: {duration: 0.5},
+          enter: {duration: 0.5},
         }}
       >
         <Back alarmClose={alarmClose} />