From 5b85ca75d8e6547e5ebb64e3f22b0d6ad571cc38 Mon Sep 17 00:00:00 2001
From: Seungho Lee <poream3387@gmail.com>
Date: Mon, 24 Jun 2024 01:25:48 +0900
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=EC=B1=84=ED=8C=85=EC=9D=84=20?=
 =?UTF-8?q?=EC=97=AC=EB=9F=AC=EA=B0=9C=20=EB=B3=B4=EB=83=88=EC=9D=84=20?=
 =?UTF-8?q?=EB=95=8C=20=EB=8B=89=EB=84=A4=EC=9E=84=20=EC=83=9D=EB=9E=B5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

개요

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

수정정 사항

- `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 |  7 ++--
 src/pages/chat/ChatRoomPage.jsx          | 49 ++++++++++++++++++++----
 2 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/pages/chat/ChatBubble/ChatBubble.jsx b/src/pages/chat/ChatBubble/ChatBubble.jsx
index bb18df7b..e629b60c 100644
--- a/src/pages/chat/ChatBubble/ChatBubble.jsx
+++ b/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}>
diff --git a/src/pages/chat/ChatRoomPage.jsx b/src/pages/chat/ChatRoomPage.jsx
index 3ed2820c..636754a5 100644
--- a/src/pages/chat/ChatRoomPage.jsx
+++ b/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>