feat:#226 sse 커스텀훅 생성

src/components/chat/Chat.tsx

@@ -100,10 +100,12 @@ const Chat = ({
         <S.Chat>
           {isCustomRoomId ? (
             <ChatList
+              customRoomId={customRoomId}
               handleOpen={handleOpen}
               clickListBox={clickListBox}
               seller={seller}
               isSeller={isSeller}
+              role={role}
               product={product}
             />
           ) : (
@@ -124,10 +126,12 @@ const Chat = ({
         <S.Chat>
           {!isCustomRoomId ? (
             <ChatList
+              customRoomId={customRoomId}
               handleOpen={handleOpen}
               clickListBox={clickListBox}
               seller={seller}
               isSeller={isSeller}
+              role={role}
               product={product}
             />
           ) : (

src/components/chat/ChatList.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { sellerChatList, userChatList } from '@/apis/chat';
 import ChatBody from '@/components/chat/chatList/ChatBody';
 import ChatHeader from '@/components/chat/chatList/ChatHeader';
+import { useSSE } from '@/hooks/useSSE';
 import { Message } from '@/models/chat';
 
 export type Chat = {
@@ -35,13 +36,27 @@ type chatProps = {
     productName: string;
   };
   isSeller: boolean;
+  role: string;
+  customRoomId: string;
 };
 
-const ChatList = ({ handleOpen, clickListBox, seller, isSeller, product }: chatProps) => {
+const ChatList = ({
+  handleOpen,
+  clickListBox,
+  seller,
+  isSeller,
+  product,
+  customRoomId,
+  role,
+}: chatProps) => {
   const [list, setList] = useState<List[]>([]);
 
   const [shopImg, setShopImg] = useState<string>('');
 
+  const message = useSSE(customRoomId, role);
+
+  console.log(message);
+
   const loadUserChatList: () => Promise<void> = async () => {
     const sellerId = seller.sellerId;
     userChatList(sellerId)

src/hooks/useSSE.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+type chatAlarm = {
+  content: string;
+  createAt: string;
+  customRoomId: string;
+  role: string;
+  sellerId: number;
+  sender: string;
+};
+
+export const useSSE = (customRoomId: string, role: string) => {
+  console.log('useSSE', customRoomId);
+  console.log('role', role);
+  const [message, setMessage] = useState<chatAlarm[]>([]);
+
+  console.log(message);
+
+  useEffect(() => {
+    const eventSource = new EventSource(
+      `${import.meta.env.VITE_API_SSE_URL}/chat-alarm/${role}/${customRoomId}`,
+    );
+
+    eventSource.addEventListener('sse', function (event) {
+      const message = JSON.parse(event.data);
+      console.log('새로운 채팅 알람: ', message);
+      setMessage((prevMessages) => [...prevMessages, message]);
+    });
+
+    eventSource.onerror = function (error) {
+      console.error('EventSource failed:', error);
+      eventSource.close();
+    };
+
+    window.addEventListener('unload', function () {
+      if (eventSource) {
+        eventSource.close();
+        console.log('EventSource closed');
+      }
+    });
+
+    return () => {
+      eventSource.close();
+      console.log('EventSource closed');
+    };
+  }, [customRoomId, role]);
+
+  return message;
+};