Merge branch 'feature/chat' into feature/room

+import React, { useCallback, useContext, useEffect, useRef, 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 = () => {
+  const socket = useContext(SocketContext);
+  const [ input, setInput ] = useState('');
+  const [ chatLines, setChatLines ] = useState<ChatData[]>([]);
+  const messageEndRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleChatData = (message: RawMessage) => {
+      if (message.type === MessageType.ROOM_CHAT) {
+        setChatLines(oldChatLines => [...oldChatLines, message.message as ChatData]);
+      }
+    }
+
+    socket.on('msg', handleChatData);
+
+    return () => {
+      socket.off('msg', handleChatData);
+    }
+  }, []);
+
+  const handleAutoScroll = useCallback(() => {
+    messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+  
+  useEffect(handleAutoScroll, [chatLines])
+
+  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-4/12'>
+      <div className='w-full h-80 rounded shadow flex flex-col overflow-y-scroll'>
+        {chatLines.map((line, i) => (<ChatLine key={16383+i} chatData={line}/>))}
+        <div ref={messageEndRef} />
+      </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

+import React from 'react';
+import { ChatData } from './types';
+
+interface ChatLineProps {
+  chatData: ChatData;
+}
+
+export const ChatLine: React.FC<ChatLineProps> = ({ chatData }) => {
+  return (
+    <div className='w-full px-3 py-1.5 bg-white
+    text-gray-700 text-sm'>{chatData.sender} : {chatData.message}</div>
+  );
+}

@@ -19,3 +19,8 @@ export interface UpdateRoomUser {
     ready: boolean;
   };
 }
+
+export interface ChatData {
+  sender: string;
+  message: string;
+}
\ No newline at end of file

 import React, { useContext } from 'react';
 import { useLocation } from 'react-router';
 import { Main } from '../components/common/Main';
+import { Chat } from '../components/room/Chat';
 import { RoomInfo } from '../components/room/RoomInfo';
 import SocketContext from '../contexts/SocketContext';
 
@@ -8,6 +9,9 @@ export const Room: React.FC = () => {
   return (
     <Main>
       <RoomInfo />
+      <div className='w-full'>
+          <Chat />
+      </div>
     </Main>
   );
 }
\ No newline at end of file