Refresh 컴포넌트 추가 및 Rooms에 적용

+import React from 'react';
+
+interface RefreshProps {
+  refreshRooms: () => void
+}
+
+export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
+  return (
+    <button className="bg-green-500 active:bg-green-600
+                            text-white uppercase text-xl
+                            w-10 h-8 pb-0.5 ml-3 rounded shadow round
+                            outline-none focus:outline-none hover:shadow-md
+                            ease-linear transition-all duration-100"
+                    type="button"
+                    onClick={() => refreshRooms()}>⟳</button>
+  );
+}

@@ -2,6 +2,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import { Main } from '../components/common/Main';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
+import { Refresh } from '../components/rooms/Refrsh';
 import { RoomBlock } from '../components/rooms/RoomBlock';
 import { Room } from '../components/rooms/types';
 import SocketContext from '../contexts/SocketContext';
@@ -30,6 +31,9 @@ export const Rooms: React.FC = () => {
 
   return (
     <Main>
+      <div className='mt-8'>
+        <Refresh refreshRooms={refreshRooms}/>
+      </div>
       <div className='mt-auto w-screen flex flex-col items-center'>
         {rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))}
       </div>