feat: SSE 알림 구현

package.json

@@ -22,6 +22,7 @@
     "@tanstack/react-query": "^5.69.0",
     "axios": "^1.7.9",
     "clsx": "^2.1.1",
+    "event-source-polyfill": "^1.0.31",
     "firebase": "^11.5.0",
     "framer-motion": "^12.6.2",
     "idb": "^8.0.2",

src/app/Provider.tsx

@@ -4,20 +4,24 @@ import { store } from './store';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SocketProvider } from '@service/feature/chat';
 import { Toaster } from 'sonner';
+import { SSEProvider } from '@service/feature/chat/context/SSEProvider';
+// import { SSEProvider } from '@service/feature/chat/context/SSEProvider';
 
 const queryClient = new QueryClient();
 
 const AppProviders = ({ children }: { children: ReactNode }) => {
   return (
     <ReduxProvider store={store}>
       <QueryClientProvider client={queryClient}>
-          <SocketProvider>
+        <SocketProvider>
+          <SSEProvider>
             {children}
             <Toaster />
-          </SocketProvider>
+          </SSEProvider>
+        </SocketProvider>
       </QueryClientProvider>
     </ReduxProvider>
   );
 };
 
-export default AppProviders;
+export default AppProviders;

src/service/feature/chat/context/SSEProvider.tsx

@@ -0,0 +1,114 @@
+// 1. SSEProvider.tsx (Context + Provider)
+import { pushNotification } from '@service/feature/noti/hook/useSSE';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { toast } from 'sonner';
+import { RootState } from 'src/app/store';
+import { SSEMentionResponse, SSEResponse } from '../type/alert';
+import Alarm from '@components/common/Alarm';
+import { channel } from 'diagnostics_channel';
+
+const SSEContext = createContext<{ events: MessageEvent[] }>({ events: [] });
+
+export const SSEProvider = ({ children }: { children: React.ReactNode }) => {
+  const [events, setEvents] = useState<MessageEvent[]>([]);
+  const user = useSelector((state: RootState) => state.auth.user);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const eventSource = new EventSource(
+      `http://flowchat.shop:30100/sse/subscribe?memberId=${user?.userId}`,
+    );
+    console.log('eventSource: ', eventSource);
+
+    eventSource.addEventListener('friendRequestNotification', (event) => {
+      console.log('[friendRequestNotification] event: ', event);
+      const data: SSEResponse = JSON.parse(event.data);
+      console.log('[SSE] data: ,', data);
+
+      toast(
+        <Alarm sender={data.sender} message={`친구 요청을 보냈습니다.`} />,
+        {
+          style: {
+            padding: '12px',
+            width: '220px',
+            background: '#2e3036',
+            borderRadius: '2px',
+            boxShadow: '0px 0px 41px 0px rgba(0, 0, 0, 0.34)',
+            border: '1px solid #42454A',
+          },
+        },
+      );
+    });
+
+    eventSource.addEventListener('friendAcceptNotification', (event) => {
+      console.log('[friendAcceptNotification] event: ', event);
+      const data: SSEResponse = JSON.parse(event.data);
+      console.log('[SSE] data: ,', data);
+
+      toast(
+        <Alarm sender={data.sender} message={`친구 요청을 승낙하였습니다.`} />,
+        {
+          style: {
+            padding: '12px',
+            width: '220px',
+            background: '#2e3036',
+            borderRadius: '2px',
+            boxShadow: '0px 0px 41px 0px rgba(0, 0, 0, 0.34)',
+            border: '1px solid #42454A',
+          },
+        },
+      );
+    });
+
+    eventSource.addEventListener('mention', (event) => {
+      console.log('[mention] event: ', event);
+      const data: SSEMentionResponse = JSON.parse(event.data);
+      console.log('[SSE] data: ,', data);
+
+      toast(
+        <Alarm
+          sender={data.sender}
+          message={`${data.content}`}
+          channel={data.channel}
+          team={data.team}
+          category={data.category}
+          chatId={data.chatId}
+        />,
+        {
+          style: {
+            padding: '12px',
+            width: '220px',
+            background: '#2e3036',
+            borderRadius: '2px',
+            boxShadow: '0px 0px 41px 0px rgba(0, 0, 0, 0.34)',
+            border: '1px solid #42454A',
+          },
+        },
+      );
+    });
+
+    eventSource.onmessage = (event) => {
+      console.log('[SSE] 도착. event: ', event);
+      // setEvents((prev) => [...prev, event]);
+      const data = JSON.parse(event.data);
+      console.log('[SSE] data: ,', data);
+    };
+
+    eventSource.onerror = () => {
+      console.log('[SSE] 에러 발생. SSE 종료.');
+      eventSource.close();
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, []);
+
+  return (
+    <SSEContext.Provider value={{ events }}>{children}</SSEContext.Provider>
+  );
+};
+
+export const useSSE = () => useContext(SSEContext);

src/service/feature/chat/type/alert.ts

@@ -0,0 +1,44 @@
+export interface SSEResponse {
+  eventName: string;
+  receiverId: string;
+  sender: SSESender;
+}
+
+export interface SSEMentionResponse extends SSEResponse {
+  channel: SSEChannel;
+  content: string;
+  team: SSETeam;
+  category: SSECategory;
+  chatId: string;
+}
+
+export interface SSESender {
+  avatarUrl: string;
+  id: string;
+  name: string;
+}
+
+export interface SSETeam {
+  id: string;
+  name: string;
+  iconUrl: string;
+}
+
+export interface SSEChannel {
+  id: string;
+  name: string;
+}
+
+export interface SSESender {
+  id: string;
+  name: string;
+  avatarUrl: string;
+}
+/**
+ * TODO
+ * 추후 백엔드 응답값 확인 후 변경
+ */
+export interface SSECategory {
+  id: string;
+  name: string;
+}

src/service/feature/noti/hook/useSSE.ts

@@ -0,0 +1,41 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { SSESender } from '@service/feature/chat/type/alert';
+
+// interface Notification {
+//   id: string;
+//   message: string;
+//   type?: 'success' | 'error' | 'info';
+// }
+
+interface Notification {
+  id: string;
+  sender: SSESender;
+  eventName:
+    | 'friendRequestNotification'
+    | 'friendAcceptNotification'
+    | 'mention';
+}
+interface NotificationState {
+  queue: Notification[];
+}
+
+const initialState: NotificationState = {
+  queue: [],
+};
+
+const notificationSlice = createSlice({
+  name: 'notification',
+  initialState,
+  reducers: {
+    pushNotification: (state, action: PayloadAction<Notification>) => {
+      state.queue.push(action.payload);
+    },
+    shiftNotification: (state) => {
+      state.queue.shift();
+    },
+  },
+});
+
+export const { pushNotification, shiftNotification } =
+  notificationSlice.actions;
+export default notificationSlice.reducer;

src/service/feature/noti/types/noti.ts

@@ -0,0 +1,25 @@
+export interface Mention {
+  sender: Sender;
+  team: Team;
+  channel: Channel;
+  messageId: number;
+  content: string;
+  createdAt: string;
+}
+
+interface Sender {
+  id: string;
+  name: string;
+  avatarUrl: string;
+}
+
+interface Team {
+  id: string;
+  name: string;
+  iconUrl: string;
+}
+
+interface Channel {
+  id: number;
+  name: string;
+}

src/view/components/common/Alarm.tsx

@@ -1,29 +1,61 @@
+import {
+  SSECategory,
+  SSEChannel,
+  SSESender,
+  SSETeam,
+} from '@service/feature/chat/type/alert';
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { RootState } from 'src/app/store';
+
 export default function Alarm({
-  img,
-  name,
+  sender,
+  team,
   channel,
   category,
   message,
+  chatId,
 }: {
-  img: string
-  name: string
-  channel?: string
-  category?: string
-  message: string
+  sender: SSESender;
+  team?: SSETeam;
+  channel?: SSEChannel;
+  category?: SSECategory;
+  message: string;
+  chatId?: string;
 }) {
+  const navigate = useNavigate();
+  const user = useSelector((state: RootState) => state.auth.user);
+  const handleClick = () => {
+    if (team && channel) {
+      navigate(`/channels/${team.id}/${chatId}`);
+    } else {
+      navigate('/channels/@me');
+    }
+  };
+
   return (
-    <div className='fixed bottom-2 right-2 flex gap-[8px] p-[12px] w-[220px] bg-[#2f3136] rounded-sm shadow-[0px_0px_41px_0px_rgba(0,0,0,0.34)]'>
-      <div className='w-[30px] h-[30px]'>
-        <img src={img} className='w-full' />
+    <div
+      onClick={handleClick}
+      className='fixed bottom-2 right-2 flex gap-[8px] p-[12px] w-[220px] bg-[#2f3136] rounded-sm shadow-[0px_0px_41px_0px_rgba(0,0,0,0.34)]'
+    >
+      {/* <div className='flex gap-2' onClick={handleClick}> */}
+      <div className='w-[40px] h-[40px]'>
+        <img
+          src={sender.avatarUrl || require('@assets/img/logo/chatflow.png')}
+          className='w-full'
+        />
       </div>
       <div className='gap-[2px] flex flex-col justify-center'>
-        <p className='text-white text-[10px] font-medium font-[Ginto]'>
-          {name} {channel && `(#${channel}, ${category})`}
-        </p>
-        <p className='text-[#b9bbbe] text-[8px] font-medium font-[Whitney Semibold]'>
-          {message}
+        <p className='text-white text-[12px] font-medium font-[Ginto]'>
+          {sender.name} {channel && `(#${channel.name}, ${category?.name})`}
         </p>
+        <div className='text-[#b9bbbe] text-[10px] font-medium font-[Whitney Semibold] flex gap-1 items-center'>
+          {channel && (
+            <p className='text-[#818284] text-[9px]'>@{user?.nickname}</p>
+          )}
+          <p>{message}</p>
+        </div>
       </div>
     </div>
-  )
+  );
 }

src/view/layout/LayoutWithSidebar.tsx

@@ -4,7 +4,6 @@ import UserProfileBar from './profile/UserProfileBar.tsx';
 import DirectChannelSidebar from './sidebar/channel/DirectChannelSidebar.tsx';
 import ServerChannelSidebar from './sidebar/channel/ServerChannelSidebar.tsx';
 import TopSidebar from '@components/layout/sidebar/top/TopSidebar.tsx';
-import TeamMemberSidebar from './sidebar/team/TeamMemberSidebar.tsx';
 
 const LayoutWithSidebar = () => {
   const location = useLocation();
@@ -23,16 +22,9 @@ const LayoutWithSidebar = () => {
           {isDMView ? <DirectChannelSidebar /> : <ServerChannelSidebar />}
           <UserProfileBar />
         </aside>
-        <div className='flex flex-1 flex-row bg-wrapper text-white overflow-y-auto border border-[#42454A] rounded-[12px]'>
-          <main className='flex-1  bg-wrapper text-white overflow-y-auto border border-[#42454A] rounded-[12px]'>
-            <Outlet />
-          </main>
-          {!isDMView && (
-            <aside>
-              <TeamMemberSidebar />
-            </aside>
-          )}
-        </div>
+        <main className='flex-1  bg-wrapper text-white overflow-y-auto border border-[#42454A] rounded-[12px]'>
+          <Outlet />
+        </main>
       </div>
     </div>
   );