Chat 컴포넌트에 input 핸들링 추가 및 ChatLine 컴포넌트 적용

-import React, { useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import SocketContext from '../../contexts/SocketContext';
 import { MessageType, RawMessage } from '../common/types';
+import { ChatLine } from './ChatLine';
 import { ChatData } from './types';
 
 export const Chat: React.FC = () => {
@@ -18,13 +19,32 @@ export const Chat: React.FC = () => {
     }
   }, []);
 
+  const handleEnter = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      setChatLines([...chatLines, { sender: 'me', message: input }]);
+      
+      const rawMessage: RawMessage = {
+        type: MessageType.ROOM_CHAT,
+        message: { message: input }
+      }
+      socket.emit('msg', rawMessage, () => {});
+
+      setInput('');
+    }
+  }, [input]);
+
   return (
-    <div className='w-2/12 h-60 rounded shadow'>
-      {chatLines.map((line) => (<div/>))}
-      <input className='w-5/6 px-3 py-2 bg-white
-                    placeholder-gray-400 text-gray-700 text-sm
-                    rounded shadow outline-none focus:outline-none'
-            onChange={e => setInput(e.target.value)}></input>
+    <div className='w-5/12'>
+      <div className='w-full h-80 rounded shadow flex flex-col items-center end'>
+        {chatLines.map((line, i) => (<ChatLine key={16383+i} chatData={line}/>))}
+      </div>
+      <input className='w-full px-3 py-2 bg-white
+                      placeholder-gray-400 text-gray-700 text-sm
+                      rounded shadow outline-none focus:outline-none'
+            placeholder='Enter the answer'
+            onChange={e => setInput(e.target.value)}
+            value={input}
+            onKeyPress={handleEnter}></input>
     </div>
   );
 }
\ No newline at end of file