#601 add unread num chatting

src/components/Chat/MessagesBody/MessageSet/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from "react";
+import { memo, useCallback, useMemo } from "react";
 
 import type { BotChat, LayoutType, UserChat } from "@/types/chat";
 
@@ -59,6 +59,10 @@ type MessageSetProps = {
 
 const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
   const { oid: userOid } = useValueRecoilState("loginInfo") || {};
+  const readAts = useMemo(() => {
+    const readAts = roomInfo?.part?.map((user) => user?.readAt);
+    return readAts;
+  }, [chats, roomInfo]);
   const authorId = chats?.[0]?.authorId;
   const authorProfileUrl =
     "authorProfileUrl" in chats?.[0] ? chats?.[0].authorProfileUrl : "";
@@ -127,12 +131,20 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
     }),
     [userOid, authorId, layoutType]
   );
+  const styleSubinfoWrap = {
+    display: "flex",
+    flexDirection: "column" as any,
+    alignItems: authorId === userOid ? "flex-end" : "flex-start",
+  };
   const styleTime = {
     ...theme.font8,
     color: theme.gray_text,
     marginBottom: "1px",
     minWidth: "fit-content",
   };
+  const styleUnreadNum = {
+    ...theme.font8_medium,
+  };
 
   return (
     <div css={style}>
@@ -168,11 +180,18 @@ const MessageSet = ({ chats, layoutType, roomInfo }: MessageSetProps) => {
                 color={authorId === userOid ? theme.white : theme.black}
               />
             </div>
-            {index === chats.length - 1 && (
-              <div css={styleTime} className="selectable">
-                {dayjs(chat.time).format("H시 mm분")}
+            <div css={styleSubinfoWrap}>
+              <div css={styleUnreadNum} className="selectable">
+                {readAts?.filter((readAt) => readAt < chat.time).length == 0
+                  ? null
+                  : readAts?.filter((readAt) => readAt < chat.time).length}
               </div>
-            )}
+              {index === chats.length - 1 && (
+                <div css={styleTime} className="selectable">
+                  {dayjs(chat.time).format("H시 mm분")}
+                </div>
+              )}
+            </div>
           </div>
         ))}
       </div>

src/components/Skeleton/SocketToastProvider.tsx

@@ -11,6 +11,7 @@ import {
 import { ioServer } from "@/tools/loadenv";
 
 export type SocketChatEventListner = (chats: Array<Chat>) => void;
+export type SocketUpdateEventListner = (roomId: string) => void;
 export type SocketVoidEventListner = () => void;
 
 let isSocketReady: boolean = false;
@@ -20,6 +21,7 @@ let initEventListener: Nullable<SocketChatEventListner> = null;
 let reconnectEventListener: Nullable<SocketVoidEventListner> = null;
 let pushBackEventListener: Nullable<SocketChatEventListner> = null;
 let pushFrontEventListener: Nullable<SocketChatEventListner> = null;
+let updateEventListener: Nullable<SocketUpdateEventListner> = null;
 
 const SocketToastProvider = () => {
   const { id: userId } = useValueRecoilState("loginInfo") || {};
@@ -57,6 +59,9 @@ const SocketToastProvider = () => {
     socket.on("chat_push_front", ({ chats }) => {
       if (pushFrontEventListener) pushFrontEventListener(chats);
     });
+    socket.on("chat_update", ({ roomId }) => {
+      if (updateEventListener) updateEventListener(roomId);
+    });
 
     return () => {
       socket.disconnect();
@@ -72,16 +77,19 @@ const registerSocketEventListener = ({
   reconnectListener,
   pushBackListener,
   pushFrontListener,
+  updateListener,
 }: {
   initListener?: SocketChatEventListner;
   reconnectListener?: SocketVoidEventListner;
   pushBackListener?: SocketChatEventListner;
   pushFrontListener?: SocketChatEventListner;
+  updateListener?: SocketUpdateEventListner;
 }) => {
   initEventListener = initListener;
   reconnectEventListener = reconnectListener;
   pushBackEventListener = pushBackListener;
   pushFrontEventListener = pushFrontListener;
+  updateEventListener = updateListener;
 };
 
 // socket event listener 해제
@@ -90,6 +98,7 @@ const resetSocketEventListener = () => {
   reconnectEventListener = null;
   pushBackEventListener = null;
   pushFrontEventListener = null;
+  updateEventListener = null;
 };
 
 // socket이 연결된 이후 event 함수를 실행합니다.

src/hooks/chat/useBodyScrollControllerEffect.tsx

@@ -44,6 +44,17 @@ export default (
     chatBodyRef.current.scrollTop = scrollTop;
   }, [chats]);
 
+  const lastChat = chats.length > 0 ? chats[chats.length - 1] : {};
+  useEffect(() => {
+    socketReady(() =>
+      axios({
+        url: "/chats/read",
+        method: "post",
+        data: { roomId },
+      })
+    );
+  }, ["time" in lastChat ? lastChat?.time : ""]);
+
   useEffect(() => {
     const chatBody = chatBodyRef?.current;
     let isBottomOnScrollCache: boolean = true;

src/hooks/chat/useSocketChatEffect.tsx

@@ -45,7 +45,6 @@ export default (
         initListener: (chats) => {
           if (isExpired) return;
           isSendingMessage.current = false;
-
           setChats(
             getCleanupChats([createInfScrollCheckoutChat(), ...chats]),
             () => {
@@ -55,7 +54,6 @@ export default (
         },
         reconnectListener: () => {
           if (isExpired) return;
-
           setChats(
             (prevChats: Chats): Chats => {
               const lastChat = prevChats[prevChats.length - 1];
@@ -73,6 +71,7 @@ export default (
         },
         pushBackListener: (chats: Array<Chat>) => {
           chats = chats.filter((chat) => chat.roomId === roomId);
+
           if (isExpired || chats.length <= 0) return;
 
           const isMyMessage = chats.some((chat) => chat.authorId === userOid);
@@ -106,7 +105,6 @@ export default (
         },
         pushFrontListener: (chats: Array<Chat>) => {
           if (isExpired) return;
-
           if (chats.length === 0) {
             setChats(
               (prevChats: Chats) => {
@@ -135,6 +133,10 @@ export default (
             );
           }
         },
+        updateListener: (_roomId: string) => {
+          if (isExpired || roomId !== _roomId) return;
+          fetchRoomInfo();
+        },
       });
 
       // 채팅 로드 API 호출
@@ -148,5 +150,5 @@ export default (
       isExpired = true;
       resetSocketEventListener();
     };
-  }, [roomInfo, setChats, setDisplayNewMessage]);
+  }, [roomInfo?._id, setChats, setDisplayNewMessage]);
 };

src/types/global.d.ts

@@ -20,6 +20,7 @@ declare global {
     | `${PixelValue} ${PixelValue} ${PixelValue} ${PixelValue}`;
   type Padding = Margin;
   type User = {
+    readAt: any;
     _id: string;
     name: string;
     nickname: string;