feat(chat): 채팅 직접 보낼 수 있도록 Handler 등록

개요

- 어플 내부에서 채팅을 직접 보낼 수 있도록 Handler를 등록한다.

수정 사항

- handleSend 핸들러 함수를 onPress에 채팅을 보냄
- useRef를 사용해서 현재 최신 채팅을 기준으로 스크롤될 수 있도록 구성
(FlatList의 최신으로 갈 수 있게끔)

src/components/chat/ChatInputSend.jsx

@@ -18,12 +18,14 @@ import IconImageExit from "@components/chat/IconImageExit";
 import IconChatSend from "@components/chat/IconChatSend";
 import IconCircleCamera from "@components/chat/IconCircleCamera";
 import IconCircleGallery from "@components/chat/IconCircleGallery";
+import { useWebSocket } from "context/WebSocketContext";
 
 const { fontBody14 } = CustomTheme;
 
-const ChatInputSend = () => {
+const ChatInputSend = ({ chatroomId, memberId }) => {
 	const [chatInput, setChatInput] = useState("");
 	const [plusClick, setPlusClick] = useState(false);
+	const { publishMessage } = useWebSocket();
 
 	const handleClick = () => {
 		setPlusClick(!plusClick);
@@ -40,6 +42,19 @@ const ChatInputSend = () => {
 		}
 	};
 
+	const handleSend = () => {
+		const trimmedChatInput = chatInput.trim();
+		if (trimmedChatInput) {
+			publishMessage({
+				chatType: "CHAT",
+				chatroomId,
+				memberId,
+				message: trimmedChatInput,
+			});
+			setChatInput("");
+		}
+	};
+
 	return (
 		<KeyboardAvoidingView
 			behavior={Platform.OS === "ios" ? "padding" : "height"}
@@ -58,7 +73,9 @@ const ChatInputSend = () => {
 					onFocus={handleInputFocus}
 				/>
 				<View style={styles.rectangleBlue}>
-					<IconChatSend />
+					<TouchableOpacity onPress={handleSend}>
+						<IconChatSend />
+					</TouchableOpacity>
 				</View>
 			</View>
 			{plusClick && (

src/pages/chat/ChatRoomPage.jsx

@@ -37,6 +37,7 @@ const ChatRoomPage = ({ route }) => {
 	const { messages } = useWebSocket();
 	const { chatroomInfo } = route.params;
 	const [memberId, setMemberId] = useState(null);
+	const flatListRef = useRef(null);
 
 	useEffect(() => {
 		const getMemberId = async () => {
@@ -46,6 +47,12 @@ const ChatRoomPage = ({ route }) => {
 		getMemberId();
 	}, []);
 
+	useEffect(() => {
+		if (flatListRef.current) {
+			flatListRef.current.scrollToEnd({ animated: true });
+		}
+	}, [messages]);
+
 	const groupMessages = (messages) => {
 		const groupedMessages = [];
 		let currentGroup = [];
@@ -123,6 +130,7 @@ const ChatRoomPage = ({ route }) => {
 
 				<View style={ChatRoomStyles.containerChat}>
 					<FlatList
+						ref={flatListRef}
 						data={groupMessages(messages[chatroomInfo.id] || [])}
 						keyExtractor={(item, index) => index.toString()}
 						renderItem={({ item }) => (
@@ -144,8 +152,10 @@ const ChatRoomPage = ({ route }) => {
 						)}
 					/>
 				</View>
-				<ChatInputSend />
-
+				<ChatInputSend
+					chatroomId={chatroomInfo.id}
+					memberId={memberId}
+				/>
 				{menuOpen && (
 					<TouchableOpacity
 						onPress={toggleMenu}