feat(chat): 채팅을 여러개 보냈을 때 닉네임 생략 구현

개요

- 채팅을 여러개 보냈을 때, 디자인 문서에 따르면면, 닉네임을 생략함.

수정정 사항

- `groupMessages` 함수 구현 -> 기존 메시지에서 메시지별로 그룹화하여
리턴 (어떤 사용자가 보냈는지를 기준으로 구분)

  - 알고리즘에서 `currentGroup`은 현재 묶이고 있는 채팅들이며,
`groupedMesssage`에 들어감
  - 마지막의 `if(currentGroup.length>0)`은, `forEach`를 다 돌고 남은
currentGroup도 넣어주기 위함임 (예시로 마지막이 `[message-B, message-B, message-A]` 일때, 알고리즘에
따르면 A도 그룹화해줘야하는데 이런 경우에 마지막 if문에서
넣어줌)

- ChatBubble에서 언제 프로필과 닉네임을 보여줄지 정하는 showProfile
boolean 변수 생성

src/pages/chat/ChatBubble/ChatBubble.jsx

@@ -3,23 +3,24 @@ import {Text, StyleSheet, View, Image} from "react-native";
 import ChatBubbleRightTrailSVG from "./ChatBubbleRightTrailSVG";
 import ChatBubbleLeftTrailSVG from "./ChatBubbleLeftTrailSVG";
 
-const ChatBubble = ({ url, username, message, time, isMine}) => {
+const ChatBubble = ({ url, username, message, time, isMine, isHeadMessage}) => {
     const rowStyles = [styles.row, isMine ? styles.myRow : styles.otherRow]
     const bubbleStyles = [styles.bubble, isMine ? styles.myBubble: styles.otherBubble]
     const messageStyles = [styles.message, isMine ? styles.myMessage: styles.otherMessage]
     const frameParentStyles = [styles.frameParent, isMine ? styles.myFrameParent : styles.otherFrameParent]
     const TrailSVG = isMine ? <ChatBubbleRightTrailSVG /> : <ChatBubbleLeftTrailSVG />
+    const showProfile = !isMine && isHeadMessage;
 
     return (
         <View style={rowStyles}>
             <View style={styles.profileWrapper}>
                 {/* TODO: Profile Image 연동 및 D 디자인 보이게 하기} */}
-                {!isMine &&
+                {showProfile &&
                     <Image source={{ uri: url }} styles={styles.profileImage}/>
                 }
             </View>
             <View>
-                {!isMine &&
+                {showProfile &&
                     <Text style={styles.profileName}>{username}</Text>
                 }
                 <View style={frameParentStyles}>

src/pages/chat/ChatRoomPage.jsx

@@ -36,6 +36,32 @@ const ChatRoomPage = ({route}) => {
         getMemberId();
     }, []);
 
+    const groupMessages = (messages) => {
+        const groupedMessages = [];
+        let currentGroup = [];
+
+        messages.forEach((message, index) => {
+            const isFirstMessage = index === 0;
+            const isDifferentUser = !isFirstMessage && message.member.id !== messages[index - 1].member.id;
+
+            if (isFirstMessage || isDifferentUser) {
+                if (currentGroup.length > 0) {
+                    groupedMessages.push(currentGroup);
+                }
+                currentGroup = [message];
+            } else {
+                currentGroup.push(message);
+            }
+        });
+
+        if (currentGroup.length > 0) {
+            groupedMessages.push(currentGroup);
+        }
+
+        return groupedMessages;
+    };
+
+
     const handleKeyboard = () => {
         Keyboard.dismiss();
     };
@@ -79,15 +105,22 @@ const ChatRoomPage = ({route}) => {
 
                 <View style={ChatRoomStyles.containerChat}>
                     <FlatList 
-                        data={messages[chatroomInfo.id] || []}
-                        keyExtractor={item => item.id}
+                        data={groupMessages(messages[chatroomInfo.id] || [])}
+                        keyExtractor={(item, index) => index.toString()}
                         renderItem={({item}) => (
-                            <ChatBubble 
-                                url={null}
-                                username={item.member.username}
-                                message={item.message}
-                                time={formatKoreanTime(item.created)}
-                                isMine={item.member.id === memberId}/>
+                            <>
+                                {item.map((msg, idx) => {
+                                    return (<ChatBubble 
+                                        key={msg.id}
+                                        url={null}
+                                        username={msg.member.username}
+                                        message={msg.message}
+                                        time={formatKoreanTime(msg.created)}
+                                        isMine={msg.member.id === memberId}
+                                        isHeadMessage={idx === 0}
+                                    />);
+                                })}
+                            </>
                         )}
                     />
                 </View>