feat : 알림 2차 기능 구현 (#81)

* feat:알림 컨텐츠 상호작용, 라우팅 기능 구현

* feat : SSE구현시도

* feat : SSE전역변수로 관리할지 store 하나 만들어서 만들면서 고민중

* feat : 알림구독 테스트용 App.tsx에 훅 호출한 코드

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,5 +1,6 @@
 import { Route, Routes } from 'react-router';
 
+import { useServerSentEvents } from './hooks/useServerSentEvents';
 import useViewport from './hooks/useViewport';
 import Layout from './layouts/Layout';
 import MobileLayout from './layouts/MobileLayout';
@@ -29,6 +30,7 @@ import WritePage from './pages/Write';
 
 const App = () => {
   useViewport();
+  useServerSentEvents();
 
   return (
     <Routes>

src/App.tsx

@@ -0,0 +1,34 @@
+import client from './client';
+
+const getTimeLines = async () => {
+  try {
+    const res = await client.get('/api/timelines');
+    if (!res) throw new Error('타임라인을 받아오는 도중 오류가 발생했습니다.');
+    console.log(res);
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+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,65 @@
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import { useEffect, useRef } from 'react';
+
+import useAuthStore from '@/stores/authStore';
+
+export const useServerSentEvents = () => {
+  const accessToken = useAuthStore.getState().accessToken;
+  const sourceRef = useRef<EventSourcePolyfill | null>(null);
+
+  useEffect(() => {
+    if (!accessToken) {
+      console.log('로그인 정보 확인불가');
+      return;
+    }
+
+    const connectSSE = () => {
+      try {
+        console.log('구독 시작');
+        sourceRef.current = new EventSourcePolyfill(
+          `${import.meta.env.VITE_API_URL}/api/notifications/sub`,
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken}`,
+            },
+          },
+        );
+
+        sourceRef.current.onmessage = (event) => {
+          console.log(event);
+          console.log('알림 전송');
+        };
+
+        sourceRef.current.addEventListener('notification', (event) => {
+          console.log(event);
+          console.log('알림 전송 dd');
+        });
+
+        sourceRef.current.onerror = (error) => {
+          console.log(error);
+          console.log('에러 발생함');
+          sourceRef.current?.close();
+          // 재연결 로직 추가 가능
+          setTimeout(connectSSE, 5000); // 5초 후 재연결 시도
+        };
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    connectSSE();
+
+    return () => {
+      console.log('컴포넌트 언마운트로 인한 구독해제');
+      closeSSE();
+    };
+  }, [accessToken]);
+
+  // 바깥으로 보낼 closeSSE 함수
+  const closeSSE = () => {
+    sourceRef.current?.close();
+    sourceRef.current = null;
+  };
+
+  return { closeSSE };
+};

src/hooks/useServerSentEvents.tsx

@@ -4,12 +4,12 @@ import { NOTIFICATION_ICON } from '../constants';
 
 interface NotificationItemProps {
   type: string;
-  message: string;
-  isRead: boolean;
+  title: string;
+  read: boolean;
   onClick: () => void;
 }
 
-const NotificationItem = ({ type, message, isRead, onClick }: NotificationItemProps) => {
+const NotificationItem = ({ type, title, read, onClick }: NotificationItemProps) => {
   const Icon = NOTIFICATION_ICON[type];
 
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
@@ -18,11 +18,11 @@ const NotificationItem = ({ type, message, isRead, onClick }: NotificationItemPr
   };
 
   return (
-    <LetterWrapper isSender={type === 'warning'} onClick={handleClick}>
+    <LetterWrapper isSender={type === 'REPORT'} onClick={handleClick}>
       <div className="flex items-center gap-3">
-        {isRead && <div className="absolute inset-0 z-10 bg-white/60" />}
+        {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

@@ -4,10 +4,11 @@ import ModalOverlay from '@/components/ModalOverlay';
 
 interface WarningModalProps {
   isOpen: boolean;
+  adminText: string;
   onClose: () => void;
 }
 
-const WarningModal = ({ isOpen, onClose }: WarningModalProps) => {
+const WarningModal = ({ isOpen, adminText, onClose }: WarningModalProps) => {
   if (!isOpen) return null;
 
   return (
@@ -20,11 +21,15 @@ const WarningModal = ({ isOpen, onClose }: WarningModalProps) => {
       >
         <div className="absolute inset-0 h-full w-full bg-white/90 blur-[25px]" />
         <div className="relative">
+          <h2 className="body-sb mb-1.5 text-gray-100">관리자 코멘트</h2>
+          <p className="caption-r mb-5 text-black">{adminText}</p>
+
           <h2 className="body-sb mb-1.5 text-gray-100">경고 안내</h2>
           <p className="caption-r mb-5 text-black">
             따사로운 서비스 이용을 위해, 부적절하다고 판단되는 편지는 반려하고 있어요. 서로를
             존중하는 따뜻한 공간을 만들기 위해 협조 부탁드립니다.
           </p>
+
           <h2 className="body-sb mb-1.5 text-gray-100">경고 규칙</h2>
           <p className="caption-r text-black">
             1회 경고: 주의 안내

src/pages/Notifications/components/WarningModal.tsx

@@ -4,7 +4,8 @@ export const NOTIFICATION_ICON: Record<
   string,
   React.ComponentType<React.SVGProps<SVGSVGElement>>
 > = {
-  letter: EnvelopeIcon,
-  warning: SirenFilledIcon,
-  board: BoardIcon,
+  LETTER: EnvelopeIcon,
+  REPORT: SirenFilledIcon,
+  SHARE: BoardIcon,
+  POSTED: BoardIcon,
 };

src/pages/Notifications/constants/index.ts

@@ -1,50 +1,93 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
 
+import { getTimeLines, patchReadNotification, patchReadNotificationAll } from '@/apis/notification';
 import PageTitle from '@/components/PageTitle';
 
 import NotificationItem from './components/NotificationItem';
 import WarningModal from './components/WarningModal';
 
-const DUMMY_NOTI = [
-  { id: 1, type: 'letter', message: '12E31님이 편지를 보냈습니다.', isRead: false },
-  { id: 2, type: 'warning', message: '따숨님, 욕설로 인해 경고를 받으셨어요.', isRead: false },
-  { id: 3, type: 'letter', message: '12E31님이 편지를 보냈습니다.', isRead: false },
-  { id: 4, type: 'letter', message: '12E31님이 편지를 보냈습니다.', isRead: true },
-  { id: 5, type: 'letter', message: '12E31님이 편지를 보냈습니다.', isRead: false },
-  { id: 6, type: 'board', message: '12E31님과의 대화가 게시판에 공유되었어요.', isRead: false },
-  {
-    id: 7,
-    type: 'board',
-    message: '12E31님과의 게시글에 대한 공유요청을 보냈어요.',
-    isRead: false,
-  },
-];
-
 const NotificationsPage = () => {
+  const navigate = useNavigate();
+
+  const [noti, setNoti] = useState<Noti[]>([]);
+
   const [isOpenWarningModal, setIsOpenWarningModal] = useState(false);
 
-  const handleClickItem = (type: string) => {
-    if (type === 'warning') {
+  const [adminText, setAdmintext] = useState<string>('');
+
+  // MEMO : 편지 데이터 전송중 데이터도 추가될건데 나중에 데이터 추가되면 코드 업데이트 하긔
+  const handleClickItem = (alarmType: string, content?: string | number) => {
+    if (alarmType === 'LETTER') {
+      navigate(`/letter/${content}`);
+    }
+    if (alarmType === 'REPORT') {
       setIsOpenWarningModal(true);
+      if (typeof content === 'string') setAdmintext(content);
+    }
+    if (alarmType === 'SHARE') {
+      navigate(`/board/letter/${content}`, { state: { isShareLetterPreview: true } });
+    }
+    if (alarmType === 'POSTED') {
+      navigate(`/board/letter/${content}`);
     }
   };
 
+  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(() => {
+    handleGetTimeLines();
+  }, []);
+
   return (
     <>
-      <WarningModal isOpen={isOpenWarningModal} onClose={() => setIsOpenWarningModal(false)} />
+      <WarningModal
+        isOpen={isOpenWarningModal}
+        adminText={adminText}
+        onClose={() => setIsOpenWarningModal(false)}
+      />
       <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) => (
-            <li key={notification.id}>
+          {noti.map((notification) => (
+            <li key={notification.timelineId}>
               <NotificationItem
-                type={notification.type}
-                message={notification.message}
-                isRead={notification.isRead}
-                onClick={() => handleClickItem(notification.type)}
+                type={notification.alarmType}
+                title={notification.title}
+                read={notification.read}
+                onClick={() => {
+                  handleClickItem(notification.alarmType, notification.content);
+                  handlePatchReadNotification(notification.timelineId);
+                }}
               />
             </li>
           ))}