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 ? : + const showProfile = !isMine && isHeadMessage; return ( {/* TODO: Profile Image 연동 및 D 디자인 보이게 하기} */} - {!isMine && + {showProfile && } - {!isMine && + {showProfile && {username} } diff --git a/src/pages/chat/ChatRoomPage.jsx b/src/pages/chat/ChatRoomPage.jsx index c093b98a..3ad34014 100644 --- a/src/pages/chat/ChatRoomPage.jsx +++ b/src/pages/chat/ChatRoomPage.jsx @@ -35,6 +35,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(); }; @@ -78,15 +104,22 @@ const ChatRoomPage = ({route}) => { item.id} + data={groupMessages(messages[chatroomInfo.id] || [])} + keyExtractor={(item, index) => index.toString()} renderItem={({item}) => ( - + <> + {item.map((msg, idx) => { + return (); + })} + )} />