방으로 이동할 때에도 username을 히스토리에 기록

 import React, { useCallback, useContext } from 'react';
-import { useHistory } from 'react-router';
+import { useHistory, useLocation } from 'react-router';
 import SocketContext from '../../contexts/SocketContext';
 import { MessageResponse, MessageType, RawMessage } from '../common/types';
 import { RoomData } from '../room/types';
 import { Room } from './types';
 
+interface RoomBlockLocation {
+  state: { username: string }
+}
+
 interface RoomBlockProps {
   room: Room
 }
@@ -12,6 +16,8 @@ interface RoomBlockProps {
 export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
   const history = useHistory();
   const socket = useContext(SocketContext);
+  const location: RoomBlockLocation = useLocation();
+
   const joinRoom = useCallback(() => {
     if (room.currentUsers < room.maxUsers) {
       const rawMessage: RawMessage = {
@@ -22,7 +28,10 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
         if (response.ok) {
           history.push({
             pathname: '/' + room.uuid,
-            state: {roomData: response.result!}
+            state: {
+              username: location.state.username,
+              roomData: response.result!
+            }
           });
         } else {
           //TODO: 에러 MODAL을 어케띄우지? 하위컴포넌트에서 훅을 쓰면 어떻게 되는지 확인