Merge pull request #82 from prgrms-web-devcourse/BM-375

[BM-375] 채팅방 채팅 메세지 위에 해당 날짜들 표시하기

components/ChatRoom/ChatDateBox.tsx

@@ -1,7 +1,10 @@
 import { Center, Text } from '@chakra-ui/react';
 
-// TODO: 메세지 날짜별로 구분하고 날짜를 prop으로 받기
-const ChatDateBox = () => {
+interface ChatDateBoxProps {
+  chatDate: string;
+}
+
+const ChatDateBox = ({ chatDate }: ChatDateBoxProps) => {
   return (
     <Center
       bgColor="brand.primary-100"
@@ -17,7 +20,7 @@ const ChatDateBox = () => {
         fontSize="13px"
         lineHeight="15px"
       >
-        2022년 8월 14일
+        {chatDate}
       </Text>
     </Center>
   );

hooks/useChatMessages.ts

@@ -0,0 +1,49 @@
+import { useCallback, useState } from 'react';
+
+import { ChatMeesageResponseType, ChatMessageData } from 'types/chatMessages';
+import chatDateFormat from 'utils/format/chatDateFormat';
+
+export type ChatMessagesType = {
+  chatDate: string;
+  messages: ChatMeesageResponseType;
+};
+
+const useChatMessages = () => {
+  const map = new Map();
+  const [chatMessages, setChatMessages] = useState<ChatMessagesType[]>([]);
+
+  const setPrevMessagesFromApi = useCallback(
+    (messages: ChatMeesageResponseType) => {
+      messages.forEach((message) => {
+        const date = chatDateFormat(new Date(message.createdAt));
+        const prevMessages = map.get(date) || [];
+
+        map.set(date, [...prevMessages, message]);
+      });
+
+      setChatMessages(
+        [...map].map(([chatDate, messages]) => ({ chatDate, messages }))
+      );
+    },
+    []
+  );
+
+  const addMessage = useCallback((message: ChatMessageData) => {
+    const today = chatDateFormat(new Date());
+    const prevMessages = map.get(today) || [];
+
+    map.set(today, [...prevMessages, message]);
+
+    setChatMessages(
+      [...map].map(([chatDate, messages]) => ({ chatDate, messages }))
+    );
+  }, []);
+
+  return {
+    chatMessages,
+    setPrevMessagesFromApi,
+    addMessage,
+  };
+};
+
+export default useChatMessages;

hooks/useStomp.ts

@@ -1,9 +1,9 @@
 import { Client } from '@stomp/stompjs';
 import getConfig from 'next/config';
-import { Dispatch, SetStateAction, useCallback } from 'react';
+import { useCallback } from 'react';
 import SockJS from 'sockjs-client';
 
-import { ChatMeesageResponseType } from 'types/chatMessages';
+import { ChatMessageData } from 'types/chatMessages';
 import { UserInfo } from 'types/user';
 
 const { publicRuntimeConfig } = getConfig();
@@ -12,10 +12,10 @@ let client: Client | null = null;
 export interface UseStompProps {
   chatRoomId: number;
   userInfo: UserInfo;
-  setMessages: Dispatch<SetStateAction<ChatMeesageResponseType>>;
+  addMessage: (message: ChatMessageData) => void;
 }
 
-const useStomp = ({ chatRoomId, userInfo, setMessages }: UseStompProps) => {
+const useStomp = ({ chatRoomId, userInfo, addMessage }: UseStompProps) => {
   const connect = () => {
     if (client !== null) {
       return;
@@ -46,12 +46,7 @@ const useStomp = ({ chatRoomId, userInfo, setMessages }: UseStompProps) => {
           return;
         }
 
-        if (message.body) {
-          setMessages((prevMessages) => [
-            ...prevMessages,
-            JSON.parse(message.body),
-          ]);
-        }
+        addMessage(JSON.parse(message.body));
       }
     );
 

pages/user/[userId]/chat/[chatRoomId]/index.tsx

@@ -4,13 +4,13 @@ import {
   InferGetServerSidePropsType,
   NextPage,
 } from 'next';
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 
 import { userAPI } from 'apis';
 import { ChatDateBox, ChatInput, MessageList } from 'components/ChatRoom';
 import { GoBackIcon, Header, HeaderTitle } from 'components/common';
+import useChatMessages, { ChatMessagesType } from 'hooks/useChatMessages';
 import useStomp from 'hooks/useStomp';
-import { ChatMeesageResponseType } from 'types/chatMessages';
 
 export const getServerSideProps: GetServerSideProps = async ({
   query: { userId, chatRoomId, chattingUsername = '' },
@@ -37,15 +37,16 @@ const ChatRoom: NextPage = ({
   chatRoomId,
   chattingUsername,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
-  const [messages, setMessages] = useState<ChatMeesageResponseType>([]);
+  const { chatMessages, setPrevMessagesFromApi, addMessage } =
+    useChatMessages();
   const { connect, disConnect, publish } = useStomp({
     chatRoomId,
     userInfo: {
       userId: user.id,
       username: user.username,
       profileImage: user.profileImage,
     },
-    setMessages,
+    addMessage,
   });
   const lastRef = useRef<HTMLDivElement>(null);
 
@@ -67,7 +68,9 @@ const ChatRoom: NextPage = ({
       })
     ).data;
 
-    setMessages([...chatMessages.reverse(), ...messages]);
+    const nextMessages = [...chatMessages.reverse()];
+
+    setPrevMessagesFromApi(nextMessages);
   };
 
   useEffect(() => {
@@ -79,7 +82,7 @@ const ChatRoom: NextPage = ({
       behavior: 'smooth',
       block: 'end',
     });
-  }, [lastRef, messages]);
+  }, [lastRef, chatMessages]);
 
   // TODO: ... 아이콘에 채팅방 나가기, 신고하기 기능
   return (
@@ -89,12 +92,16 @@ const ChatRoom: NextPage = ({
         middleContent={<HeaderTitle title={chattingUsername} />}
       />
       <Flex height="100%" flexDirection="column" gap="16px">
-        <Center>
-          <ChatDateBox />
-        </Center>
-        <Flex flexDirection="column" flexGrow="1">
-          <MessageList userId={user.id} messages={messages} />
-        </Flex>
+        {chatMessages.map(({ chatDate, messages }: ChatMessagesType, index) => (
+          <Fragment key={index}>
+            <Center>
+              <ChatDateBox chatDate={chatDate} />
+            </Center>
+            <Flex flexDirection="column">
+              <MessageList userId={user.id} messages={messages} />
+            </Flex>
+          </Fragment>
+        ))}
       </Flex>
       <Flex
         position="sticky"

utils/format/chatDateFormat.ts

@@ -0,0 +1,7 @@
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+
+const chatDateFormat = (createdAt: Date) =>
+  format(new Date(createdAt), 'yyyy년 M월 d일', { locale: ko });
+
+export default chatDateFormat;