feat(chat): 채팅방 이름 및 채팅 상대 이름 표시

개요 - 채팅방을 열었을 때, 채팅방의 이름 및 채팅 상대의의 이름을 표시한다 수정 사항 - 기존 chatroom_id이 아닌 이제 채팅방 전체 정보를 ChatroomItem 및 ChatRoomPage로 전달한다. - 현재 프로필 코드를 작성하였으나, 백엔드에서 파일 URL을 전달하지 못하여, 우선은 TODO로 남겨두었음. - ChatBubble에서 컴포포넌트의 구조를 약간 바꿔서 이름이 채팅 위에 위치할 수 있도록 하였음.
team-diverse · Jul 1, 2024 · 36e13c1 · 36e13c1
1 parent c15859c
commit 36e13c1
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 16 deletions.
diff --git a/src/components/chat/ChatroomItem.jsx b/src/components/chat/ChatroomItem.jsx
@@ -7,15 +7,14 @@ import { useNavigation } from "@react-navigation/native";
 
 const { fontCaption, fontNavi } = CustomTheme;
 
-const ChatroomItem = ({ id, context, name, time }) => {
+const ChatroomItem = ({ chatroomInfo, context, name, time }) => {
     const navigation = useNavigation("");
-
     return (
         <TouchableOpacity
             style={styles.rectangle}
             onPress={() =>
                 navigation.navigate("ChatRoomPage", {
-                    chatroomId: id,
+                    chatroomInfo
                 })
             }
         >

diff --git a/src/pages/chat/ChatBubble/ChatBubble.jsx b/src/pages/chat/ChatBubble/ChatBubble.jsx
@@ -3,7 +3,7 @@ import {Text, StyleSheet, View, Image} from "react-native";
 import ChatBubbleRightTrailSVG from "./ChatBubbleRightTrailSVG";
 import ChatBubbleLeftTrailSVG from "./ChatBubbleLeftTrailSVG";
 
-const ChatBubble = ({ message, time, isMine}) => {
+const ChatBubble = ({ url, username, message, time, isMine}) => {
     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]
@@ -12,20 +12,45 @@ const ChatBubble = ({ message, time, isMine}) => {
 
     return (
         <View style={rowStyles}>
-            <View style={frameParentStyles}>
-                <View style={styles.timeWrapper}>
-                    <Text style={styles.time}>{time}</Text>
-                </View>
-                <View style={bubbleStyles}>
-                    <Text style={messageStyles}>{message}</Text>
+            <View style={styles.profileWrapper}>
+                {/* TODO: Profile Image 연동 및 D 디자인 보이게 하기} */}
+                {!isMine &&
+                    <Image source={{ uri: url }} styles={styles.profileImage}/>
+                }
+            </View>
+            <View>
+                {!isMine &&
+                    <Text style={styles.profileName}>{username}</Text>
+                }
+                <View style={frameParentStyles}>
+                    <View style={styles.timeWrapper}>
+                        <Text style={styles.time}>{time}</Text>
+                    </View>
+                    <View style={bubbleStyles}>
+                        <Text style={messageStyles}>{message}</Text>
+                    </View>
+                    {TrailSVG}
                 </View>
-                {TrailSVG}
             </View>
         </View>
     );
 };
 
 const styles = StyleSheet.create({
+    profileWrapper: {
+        alignItems: "center",
+        marginRight: 10,
+    },
+    profileImage: {
+        width:40,
+        height: 40,
+        borderRadius: 20,
+    },
+    profileName: {
+        fontSize: 12, 
+        lineHeight: 16,
+        marginBottom: 5,
+    },
     timeWrapper: {
         marginTop: "auto",
     },
@@ -91,7 +116,6 @@ const styles = StyleSheet.create({
     },
     row: {
         flex: 1,
-        flexDirection: "row",
 		marginBottom: 5,
     },
     myRow: {

diff --git a/src/pages/chat/ChatRoomPage.jsx b/src/pages/chat/ChatRoomPage.jsx
@@ -24,7 +24,16 @@ const ChatRoomPage = ({route}) => {
     const screenWidth = Dimensions.get('window').width;
     const menuAnim = useRef(new Animated.Value(screenWidth)).current;
     const { messages } = useWebSocket();
-    const { chatroomId } = route.params;
+    const { chatroomInfo } = route.params;
+    const [memberId, setMemberId] = useState(null);
+
+    useEffect(() => {
+        const getMemberId = async () => {
+            const id = await SecureStore.getItemAsync('memberId');
+            setMemberId(parseInt(id));
+        }
+        getMemberId();
+    }, []);
 
     const handleKeyboard = () => {
         Keyboard.dismiss();
@@ -60,7 +69,7 @@ const ChatRoomPage = ({route}) => {
                         <TouchableOpacity style={ChatRoomStyles.iconArrow} onPress={handleGoBack}>
                             <ArrowRight color='#000' />
                         </TouchableOpacity>
-                        <Text style={ChatRoomStyles.textTopBar}>Name</Text>
+                        <Text style={ChatRoomStyles.textTopBar}>{chatroomInfo.name}</Text>
                     </View>
                     <TouchableOpacity style={ChatRoomStyles.iconHamburgerMenu} onPress={toggleMenu}>
                         <IconHamburgerMenu />
@@ -69,10 +78,12 @@ const ChatRoomPage = ({route}) => {
 
                 <View style={ChatRoomStyles.containerChat}>
                     <FlatList 
-                        data={messages[chatroomId] || []}
+                        data={messages[chatroomInfo.id] || []}
                         keyExtractor={item => item.id}
                         renderItem={({item}) => (
                             <ChatBubble 
+                                url={null}
+                                username={item.member.username}
                                 message={item.message}
                                 time={formatKoreanTime(item.created)}
                                 isMine={true}/>

diff --git a/src/pages/chat/ChattingPage.jsx b/src/pages/chat/ChattingPage.jsx
@@ -114,7 +114,7 @@ const ChattingPage = () => {
                     data={chatrooms}
                     renderItem={({ item }) => (
                         <ChatroomItem
-                          id={item.id}
+                          chatroomInfo={chatrooms[item.id - 1]}
                           name={item.name}
                           context={getLatestChatByChatroomId(item.id)}
                           time={formatKoreanTime(item.created)}