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 ();
+ })}
+ >
)}
/>