feat#226 chatlist sse 적용

src/components/chat/Chat.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import ChatButton from '@/components/chat/ChatButton';
 import ChatDetail from '@/components/chat/ChatDetail';
@@ -44,7 +44,7 @@ const Chat = ({
   const seller: SellerInfo = { sellerId: sellerId, shopName: sellerName };
   const product: ProductInfo = { productId: productId, productName: productName };
   const [user, setUser] = useState<UserInfo>({ userId: userId, userName: userName });
-  const [isCustomRoomId, setIsCustomRoomId] = useState<boolean>(true);
+  const [isNowChatRoom, setIsNowChatRoom] = useState<boolean>(false);
 
   const isSeller = isUser;
   const role = isSeller ? 'seller' : 'user';
@@ -65,20 +65,19 @@ const Chat = ({
     return customRoomId;
   }
 
-  /** clickPrevButton() : 채팅방에서 뒤로가기 버튼 누르면
-   * 1. 분기처리를 위해 customRoomId값을 빈 스트링을 넣는다. */
+  /** clickPrevButton() : 채팅방에서 뒤로가기 버튼 */
   const clickPrevButton = () => {
-    setCustomRoomId('');
+    setIsNowChatRoom((prev) => !prev);
   };
 
   /** clickListBox() : 채팅list에서 해당 채팅방으로 들어가기 위해
-   * 1. isCustomRoomId를 false,
+   * 1. isNowChatRoom를 false,
    * 2. ChatBody.tsx에서 custumroomId를 받아와서 ChatList.tsx로 넘겨줌.
    * 3. seller일때 현재 디테일에서 넘어오는 userId, userName값은 판매자의 정보여서 ChatList.tsx에서
         문의한 구매자의 userId값, userName값을 가져옴.
    */
   const clickListBox = (customRoomId: string, userId: number, userName: string) => {
-    setIsCustomRoomId((prev) => !prev);
+    setIsNowChatRoom((prev) => !prev);
     setCustomRoomId(customRoomId);
     setUser({ ...user, userId, userName });
   };
@@ -87,23 +86,19 @@ const Chat = ({
     setIsModalOpen((prev) => !prev);
   };
 
-  useEffect(() => {
-    if (customRoomId.length === 0) {
-      setIsCustomRoomId((prev) => !prev);
-    }
-  }, [customRoomId]);
-
   return (
     <>
       <ChatButton handleOpen={handleOpen} />
       {isModalOpen && isSeller && (
         <S.Chat>
-          {isCustomRoomId ? (
+          {!isNowChatRoom ? (
             <ChatList
+              customRoomId={customRoomId}
               handleOpen={handleOpen}
               clickListBox={clickListBox}
               seller={seller}
               isSeller={isSeller}
+              role={role}
               product={product}
             />
           ) : (
@@ -122,12 +117,14 @@ const Chat = ({
       )}
       {isModalOpen && !isSeller && (
         <S.Chat>
-          {!isCustomRoomId ? (
+          {isNowChatRoom ? (
             <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,60 @@
+import { useEffect, useState } from 'react';
+
+type chatAlarm = {
+  content: string;
+  createAt: string;
+  customRoomId: string;
+  role: string;
+  sellerId: number;
+  sender: string;
+};
+
+export const useSSE = (role: string, sellerId: number, userId: number) => {
+  const [eventSource, setEventSource] = useState(
+    new EventSource(`${import.meta.env.VITE_API_SSE_URL}/chat-alarm/${role}/${sellerId}`),
+  );
+  const [message, setMessage] = useState<chatAlarm>();
+
+  console.log('useSSE', message);
+  console.log('role', role);
+  console.log('sellerId', sellerId);
+  console.log('userId', userId);
+
+  useEffect(() => {
+    if (role === 'user') {
+      setEventSource(
+        new EventSource(
+          `${import.meta.env.VITE_API_SSE_URL}/chat-alarm/${role}/${sellerId}/${userId}`,
+        ),
+      );
+    } else {
+      setEventSource(
+        new EventSource(`${import.meta.env.VITE_API_SSE_URL}/chat-alarm/${role}/${sellerId}`),
+      );
+    }
+
+    console.log('start');
+    console.log('eventSource', eventSource);
+
+    if (!eventSource) return;
+    eventSource.addEventListener('sse', function (event) {
+      const message = JSON.parse(event.data);
+      console.log('새로운 채팅 알람: ', message);
+      setMessage({ ...message });
+    });
+
+    eventSource.onerror = function (error) {
+      console.error('EventSource failed:', error);
+      eventSource.close();
+    };
+
+    window.addEventListener('unload', function () {
+      if (eventSource) {
+        eventSource.close();
+        console.log('EventSource closed');
+      }
+    });
+  }, [sellerId, role]);
+
+  return message;
+};