feat : SSE구현시도

Author: wldnjs990

package.json

@@ -18,6 +18,7 @@
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.9",
+    "event-source-polyfill": "^1.0.31",
     "gsap": "^3.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -31,6 +32,7 @@
   "devDependencies": {
     "@eslint/js": "^9.19.0",
     "@tanstack/eslint-plugin-query": "^5.66.1",
+    "@types/event-source-polyfill": "^1.0.5",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "^3.5.0",

pnpm-lock.yaml

@@ -1,14 +1,34 @@
 import client from './client';
 
-const getTimeLines = async (getNoti: React.Dispatch<React.SetStateAction<Noti[]>>) => {
+const getTimeLines = async () => {
   try {
     const res = await client.get('/api/timelines');
     if (!res) throw new Error('타임라인을 받아오는 도중 오류가 발생했습니다.');
-    getNoti(res.data.data);
     console.log(res);
+    return res;
   } catch (error) {
     console.error(error);
   }
 };
 
-export { getTimeLines };
+const patchReadNotification = async (timelineId: number) => {
+  try {
+    const res = await client.patch(`/api/notifications/${timelineId}/read`);
+    if (!res) throw new Error('편지 개별 읽음 처리를 하는 도중 오류가 발생했습니다.');
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const patchReadNotificationAll = async () => {
+  try {
+    const res = await client.patch(`/api/notifications/read`);
+    if (!res) throw new Error('편지 개별 읽음 처리를 하는 도중 오류가 발생했습니다.');
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { getTimeLines, patchReadNotification, patchReadNotificationAll };

src/apis/notification.ts

@@ -0,0 +1,51 @@
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import { useEffect } from 'react';
+
+import useAuthStore from '@/stores/authStore';
+
+export const useServerSentEvents = () => {
+  const accessToken = useAuthStore.getState().accessToken;
+
+  useEffect(() => {
+    if (!accessToken) return console.log('구독 연결 실패');
+
+    let source: EventSourcePolyfill | null = null;
+
+    const connectSSE = () => {
+      try {
+        console.log('구독 시작');
+        source = new EventSourcePolyfill(`${import.meta.env.VITE_API_URL}/api/notifications/sub`, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        });
+
+        source.onmessage = (payload) => {
+          console.log(payload);
+          console.log('알림 전송');
+        };
+
+        source.addEventListener('notification', (event) => {
+          console.log(event);
+          console.log('알림 전송 dd');
+        });
+
+        source.onerror = (error) => {
+          console.log(error);
+          console.log('에러 발생함');
+          source?.close();
+          // 재연결 로직 추가 가능
+          setTimeout(connectSSE, 5000); // 5초 후 재연결 시도
+        };
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    connectSSE();
+
+    return () => {
+      source?.close();
+    };
+  }, [accessToken]);
+};

src/hooks/useServerSentEvents.tsx

@@ -4,12 +4,12 @@ import { NOTIFICATION_ICON } from '../constants';
 
 interface NotificationItemProps {
   type: string;
-  message: string;
+  title: string;
   read: boolean;
   onClick: () => void;
 }
 
-const NotificationItem = ({ type, message, read, onClick }: NotificationItemProps) => {
+const NotificationItem = ({ type, title, read, onClick }: NotificationItemProps) => {
   const Icon = NOTIFICATION_ICON[type];
 
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
@@ -22,7 +22,7 @@ const NotificationItem = ({ type, message, read, onClick }: NotificationItemProp
       <div className="flex items-center gap-3">
         {read && <div className="absolute inset-0 z-10 bg-white/60" />}
         <Icon className="z-0 h-6 w-6 text-white" />
-        <p className="body-m text-gray-80 z-0">{message}</p>
+        <p className="body-m text-gray-80 z-0">{title}</p>
       </div>
     </LetterWrapper>
   );

src/pages/Notifications/components/NotificationItem.tsx

@@ -1,68 +1,19 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 
-import { getTimeLines } from '@/apis/notification';
+import { getTimeLines, patchReadNotification, patchReadNotificationAll } from '@/apis/notification';
 import PageTitle from '@/components/PageTitle';
+import { useServerSentEvents } from '@/hooks/useServerSentEvents';
 
 import NotificationItem from './components/NotificationItem';
 import WarningModal from './components/WarningModal';
 
-const DUMMY_NOTI: Noti[] = [
-  {
-    timelineId: 1,
-    alarmType: 'LETTER',
-    content: 1,
-    message: '12E31님이 편지를 보냈습니다.',
-    read: false,
-  },
-  {
-    timelineId: 2,
-    alarmType: 'REPORT',
-    content: '욕설 확인되어 경고 조치함.',
-    message: '따숨님, 욕설로 인해 경고를 받으셨어요.',
-    read: false,
-  },
-  {
-    timelineId: 3,
-    alarmType: 'LETTER',
-    content: 1,
-    message: '12E31님이 편지를 보냈습니다.',
-    read: false,
-  },
-  {
-    timelineId: 4,
-    alarmType: 'LETTER',
-    content: 1,
-    message: '12E31님이 편지를 보냈습니다.',
-    read: true,
-  },
-  {
-    timelineId: 5,
-    alarmType: 'LETTER',
-    content: 1,
-    message: '12E31님이 편지를 보냈습니다.',
-    read: false,
-  },
-  {
-    timelineId: 6,
-    alarmType: 'POSTED',
-    content: 1,
-    message: '12E31님과의 대화가 게시판에 공유되었어요.',
-    read: false,
-  },
-  {
-    timelineId: 7,
-    alarmType: 'SHARE',
-    content: 1,
-    message: '12E31님과의 게시글에 대한 공유요청을 보냈어요.',
-    read: false,
-  },
-];
-
 const NotificationsPage = () => {
+  useServerSentEvents();
+
   const navigate = useNavigate();
 
-  const [noti, getNoti] = useState<Noti[]>([]);
+  const [noti, setNoti] = useState<Noti[]>([]);
 
   const [isOpenWarningModal, setIsOpenWarningModal] = useState(false);
 
@@ -84,8 +35,30 @@ const NotificationsPage = () => {
     }
   };
 
+  const handleGetTimeLines = async () => {
+    const res = await getTimeLines();
+    if (res?.status === 200) {
+      console.log(res);
+      setNoti(res.data.data.content);
+    }
+  };
+
+  const handlePatchReadNotification = async (timelineId: number) => {
+    const res = await patchReadNotification(timelineId);
+    if (res?.status !== 200) {
+      console.log('읽음처리 에러 발생');
+    }
+  };
+
+  const handlePatchReadNotificationAll = async () => {
+    const res = await patchReadNotificationAll();
+    if (res?.status !== 200) {
+      console.log('모두 읽음처리 에러 발생');
+    }
+  };
+
   useEffect(() => {
-    getTimeLines(getNoti);
+    handleGetTimeLines();
   }, []);
 
   return (
@@ -97,17 +70,26 @@ const NotificationsPage = () => {
       />
       <main className="flex grow flex-col items-center px-5 pt-20 pb-9">
         <PageTitle className="mb-10">알림</PageTitle>
-        <button type="button" className="body-sb text-gray-60 place-self-end">
+        <button
+          type="button"
+          className="body-sb text-gray-60 place-self-end"
+          onClick={() => {
+            handlePatchReadNotificationAll();
+          }}
+        >
           모두 읽음
         </button>
         <ul className="mt-2 flex h-full w-full flex-col gap-2 pb-10">
-          {DUMMY_NOTI.map((notification) => (
+          {noti.map((notification) => (
             <li key={notification.timelineId}>
               <NotificationItem
                 type={notification.alarmType}
-                message={notification.message}
+                title={notification.title}
                 read={notification.read}
-                onClick={() => handleClickItem(notification.alarmType, notification.content)}
+                onClick={() => {
+                  handleClickItem(notification.alarmType, notification.content);
+                  handlePatchReadNotification(notification.timelineId);
+                }}
               />
             </li>
           ))}

src/pages/Notifications/index.tsx

@@ -2,6 +2,6 @@ interface Noti {
   timelineId: number;
   alarmType: string;
   content: string | number;
-  message: string;
+  title: string;
   read: boolean;
 }