Rooms 컴포넌트에 Create 컴포넌트 추가 및 css 폴리싱

@@ -20,10 +20,10 @@ export const Create: React.FC = () => {
   }, [roomName]);
   }, [roomName]);
   
   
   return (
   return (
-    <div>
+    <div className="flex items-center">
       <input type="text"
       <input type="text"
-                placeholder="Username"
-                className="px-3 py-1.5 bg-white
+                placeholder="Room name"
+                className="h-8 px-3 py-1.5 bg-white
                     placeholder-gray-400 text-gray-700 text-sm
                     placeholder-gray-400 text-gray-700 text-sm
                     rounded shadow outline-none focus:outline-none"
                     rounded shadow outline-none focus:outline-none"
                 value={roomName}
                 value={roomName}

@@ -8,7 +8,7 @@ export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
   return (
   return (
     <button className="bg-green-500 active:bg-green-600
     <button className="bg-green-500 active:bg-green-600
                             text-white uppercase text-xl
                             text-white uppercase text-xl
-                            w-10 h-8 pb-0.5 ml-3 rounded shadow round
+                            w-10 h-8 pb-0.5 mr-2 rounded shadow round
                             outline-none focus:outline-none hover:shadow-md
                             outline-none focus:outline-none hover:shadow-md
                             ease-linear transition-all duration-100"
                             ease-linear transition-all duration-100"
                     type="button"
                     type="button"

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