diff --git a/src/components/atoms/chatting/SendChat.tsx b/src/components/atoms/chatting/SendChat.tsx index d44f1f4c..31c51752 100644 --- a/src/components/atoms/chatting/SendChat.tsx +++ b/src/components/atoms/chatting/SendChat.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import styled from 'styled-components'; import { ReactComponent as MessageSend } from '../../../assets/svg/MessageSend.svg'; import roomSocket from '../../../adapters/roomSocket'; @@ -13,16 +13,28 @@ export default function SendChat({ }) { const [newMessage, setNewMessage] = useState(''); const newSocket = roomId === 'lobby' ? lobbySocket.socket : roomSocket.socket; + const inputRef = useRef(null); - const onMessageChange = (event: React.ChangeEvent) => { + const onMessageChange = (event: React.ChangeEvent) => { event.preventDefault(); setNewMessage(() => event.target.value); + autoGrow(); + }; + + const autoGrow = () => { + if (inputRef.current) { + inputRef.current.style.height = '2rem'; + inputRef.current.style.height = inputRef.current.scrollHeight + .toString() + .concat('px'); + } }; const onSubmit = ( - event: React.FormEvent | React.KeyboardEvent, + event: React.FormEvent | KeyboardEvent, ) => { event.preventDefault(); + // console.log('new 메세지 : ', newMessage); if (newMessage.trim() === '') return; newSocket.emit('chatMessage', { room: roomId, @@ -30,8 +42,17 @@ export default function SendChat({ message: newMessage, createdAt: new Date(), }); - setNewMessage(''); + if (inputRef.current) { + inputRef.current.style.height = '2rem'; + } + }; + + const onKeyDown = (event) => { + if (event.key === 'Enter') { + event.preventDefault(); + onSubmit(event); + } }; return ( @@ -39,8 +60,11 @@ export default function SendChat({