방 목록의 배열을 방 정보 컴포넌트에 매핑 및 테스트

@@ -10,6 +10,24 @@ export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const [ rooms, setRooms ] = useState<Room[]>([]);
   const [ rooms, setRooms ] = useState<Room[]>([]);
 
 
+  // for test
+  const testingRoom1: Room = {
+    uuid: '23525',
+    name: 'Hello World!',
+    currentUsers: 3,
+    maxUsers: 4
+  }
+  const testingRoom2: Room = {
+    uuid: '235252134',
+    name: 'Bonjour World!',
+    currentUsers: 6,
+    maxUsers: 6
+  }
+  useEffect(() => {
+    setRooms([testingRoom1, testingRoom2]);
+    // refreshRooms()
+  }, []);
+
   const refreshRooms = () => {
   const refreshRooms = () => {
     socket.emit(MessageType.ROOM_LIST_REQUEST, (response: MessageResponse<Room[]>) => {
     socket.emit(MessageType.ROOM_LIST_REQUEST, (response: MessageResponse<Room[]>) => {
       if (response.ok) {
       if (response.ok) {
@@ -21,14 +39,12 @@ export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
     });
     });
   }
   }
 
 
-  useEffect(refreshRooms, []);
+  // useEffect(refreshRooms, []);
 
 
   return (
   return (
     <div className='flex flex-col items-center w-screen h-screen'>
     <div className='flex flex-col items-center w-screen h-screen'>
       <div className='mt-auto w-screen flex flex-col items-center'>
       <div className='mt-auto w-screen flex flex-col items-center'>
-        <RoomInfo name='테스트테스트' currentUsers={3} maxUsers={9} uuid='234234'></RoomInfo>
-        <RoomInfo name='테스트테스트' currentUsers={5} maxUsers={9} uuid='234234'></RoomInfo>
-        <RoomInfo name='테스트테스트' currentUsers={9} maxUsers={9} uuid='234234'></RoomInfo>
+        {rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
       </div>
       </div>
       <Footer />
       <Footer />
     </div>
     </div>