Merge pull request #161 from Strong-Potato/89-feat-add-realtime-notif…

…ication-with-fcm

#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",
     "immutability-helper": "^3.1.1",
     "jwt-decode": "^4.0.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

@@ -4,10 +4,12 @@ import {CookiesProvider} from 'react-cookie';
 import {DndProvider} from 'react-dnd';
 import {HTML5Backend} from 'react-dnd-html5-backend';
 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} />

src/components/Alarm/TabCapsule/TabCapsule.tsx

@@ -1,91 +1,67 @@
-import {
-  Tab,
-  TabIndicator,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from "@chakra-ui/react";
+import {Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs} from '@chakra-ui/react';
 
-import styles from "./TabCapsule.module.scss";
+import styles from './TabCapsule.module.scss';
 
-import Content from "./Content/Content";
+import Content from './Content/Content';
 
 const AllContents = [
   {
-    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    url: 'https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg',
     title: `[강릉 여행]강자밭님이 "밥집 어디갈꺼야" 투표를 만들었어요.`,
-    time: "2024-01-11T23:09:00",
+    time: '2024-01-11T23:09:00',
   },
   {
-    url: "https://private-user-images.githubusercontent.com/120024673/294744934-6e80734e-61fc-46e5-abb4-3d26bad5f1ea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQ2MTQzNDYsIm5iZiI6MTcwNDYxNDA0NiwicGF0aCI6Ii8xMjAwMjQ2NzMvMjk0NzQ0OTM0LTZlODA3MzRlLTYxZmMtNDZlNS1hYmI0LTNkMjZiYWQ1ZjFlYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMTA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDEwN1QwNzU0MDZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMGRlZGI3ZjRiZTRkZDY4YTJjNTQxMWNkNmI5YWI5ZDExNzU3OWEwNjJhNTA1NTgzNDQxYWY3MDMyYmVkYmIyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.QMy2zh7OIc5uzN7W7qhAr540FtZN7YbaZ4k0z9Ajmws",
-    title: "개인정보 보호정책이 변경되었습니다.",
-    time: "2024-01-11T20:00:00",
+    url: 'https://github.com/Strong-Potato/TripVote-FE/assets/120024673/089a8673-405e-4a06-b173-4cf3e985b466',
+    title: '개인정보 보호정책이 변경되었습니다.',
+    time: '2024-01-11T20:00:00',
   },
   {
-    url: "https://private-user-images.githubusercontent.com/120024673/294744934-6e80734e-61fc-46e5-abb4-3d26bad5f1ea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQ2MTQzNDYsIm5iZiI6MTcwNDYxNDA0NiwicGF0aCI6Ii8xMjAwMjQ2NzMvMjk0NzQ0OTM0LTZlODA3MzRlLTYxZmMtNDZlNS1hYmI0LTNkMjZiYWQ1ZjFlYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMTA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDEwN1QwNzU0MDZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMGRlZGI3ZjRiZTRkZDY4YTJjNTQxMWNkNmI5YWI5ZDExNzU3OWEwNjJhNTA1NTgzNDQxYWY3MDMyYmVkYmIyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.QMy2zh7OIc5uzN7W7qhAr540FtZN7YbaZ4k0z9Ajmws",
-    title: "개인정보 보호정책이 변경되었습니다.",
-    time: "2024-01-10T10:00:00",
+    url: 'https://github.com/Strong-Potato/TripVote-FE/assets/120024673/089a8673-405e-4a06-b173-4cf3e985b466',
+    title: '개인정보 보호정책이 변경되었습니다.',
+    time: '2024-01-10T10:00:00',
   },
   {
-    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    url: 'https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg',
     title: `[강릉 여행]강자밭님이 "카페 어디갈꺼야" 투표를 만들었어요.`,
-    time: "2024-01-03T12:00:00",
+    time: '2024-01-03T12:00:00',
   },
   {
-    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    url: 'https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg',
     title: `[강릉 여행]강자밭님이 "숙소 어디갈꺼야" 투표를 만들었어요.`,
-    time: "2023-12-31T12:00:00",
+    time: '2023-12-31T12:00:00',
   },
 ];
 
 const SpaceTravelContents = [
   {
-    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    url: 'https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg',
     title: `[강릉 여행]강자밭님이 "밥집 어디갈꺼야" 투표를 만들었어요.`,
-    time: "2024-01-11T23:05:00",
+    time: '2024-01-11T23:05:00',
   },
   {
-    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    url: 'https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg',
     title: `[강릉 여행]강자밭님이 "카페 어디갈꺼야" 투표를 만들었어요.`,
-    time: "2024-01-03T12:00:00",
+    time: '2024-01-03T12:00:00',
   },
   {
-    url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
+    url: 'https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg',
     title: `[강릉 여행]강자밭님이 "숙소 어디갈꺼야" 투표를 만들었어요.`,
-    time: "2023-12-31T12:00:00",
+    time: '2023-12-31T12:00:00',
   },
 ];
 
 function TabCapsule() {
   return (
-    <Tabs isFitted variant="unstyled">
+    <Tabs isFitted variant='unstyled'>
       <TabList>
-        <Tab
-          className={styles.title}
-          fontSize={"button"}
-          fontWeight={"button"}
-          lineHeight={"button"}
-        >
+        <Tab className={styles.title} fontSize={'button'} fontWeight={'button'} lineHeight={'button'}>
           전체
         </Tab>
-        <Tab
-          className={styles.title}
-          fontSize={"button"}
-          fontWeight={"button"}
-          lineHeight={"button"}
-        >
+        <Tab className={styles.title} fontSize={'button'} fontWeight={'button'} lineHeight={'button'}>
           여행스페이스
         </Tab>
       </TabList>
-      <TabIndicator
-        mt="-1.5px"
-        height="2px"
-        bg="#2388FF"
-        borderRadius="2px"
-        width="50% !important"
-        className=""
-      />
+      <TabIndicator mt='-1.5px' height='2px' bg='#2388FF' borderRadius='2px' width='50% !important' />
       <TabPanels>
         <TabPanel p={0}>
           <Content contents={AllContents} />

src/components/Home/TabBar/TabBar.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
   position: fixed;
@@ -20,5 +20,19 @@
     gap: 12px;
 
     font-size: 2.4rem;
+
+    &__wrapper {
+      position: relative;
+
+      &__eclips {
+        width: 0.8rem;
+        height: 0.8rem;
+        border-radius: 50%;
+        position: absolute;
+        top: 3px;
+        right: 3px;
+        background: $primary400;
+      }
+    }
   }
 }

src/components/Home/TabBar/TabBar.tsx

@@ -1,18 +1,21 @@
-import { AiOutlineBell } from "react-icons/ai";
-import { IoSearchSharp } from "react-icons/io5";
-import { Link } from "react-router-dom";
+import {AiOutlineBell} from 'react-icons/ai';
+import {IoSearchSharp} from 'react-icons/io5';
+import {Link} from 'react-router-dom';
 
-import styles from "./TabBar.module.scss";
+import styles from './TabBar.module.scss';
 
 function TabBar() {
+  const news = localStorage.getItem('news');
+
   return (
     <div className={styles.container}>
       <div className={styles.icons}>
-        <Link to="/home/search">
+        <Link to='/home/search'>
           <IoSearchSharp />
         </Link>
-        <Link to="/alarm">
+        <Link to='/alarm' className={styles.icons__wrapper}>
           <AiOutlineBell />
+          {news && <div className={styles.icons__wrapper__eclips} />}
         </Link>
       </div>
     </div>