UserInfo 컴포넌트 추가 및 Room 컴포넌트에 적용

+import React from 'react';
+import { User } from './types';
+import { UserStatus } from './UserStatus';
+
+interface UserInfoProps {
+  users: User[];
+}
+
+export const UserInfo: React.FC<UserInfoProps> = ({ users }) => {
+  return (
+    <div className='w-7/12 h-60 flex justify-center'>
+      {users.map((user) => (<UserStatus user={user} />))}
+    </div>
+  );
+}
\ No newline at end of file

@@ -6,6 +6,8 @@ import { Canvas } from '../components/room/Canvas';
 import { Chat } from '../components/room/Chat';
 import { RoomInfo } from '../components/room/RoomInfo';
 import { RoomData, UpdateRoomUser } from '../components/room/types';
+import { UserInfo } from '../components/room/UserInfo';
+import { UserStatus } from '../components/room/UserStatus';
 import SocketContext from '../contexts/SocketContext';
 
 interface RoomLocation {
@@ -87,8 +89,9 @@ export const Room: React.FC = () => {
             <Chat w='w-4/12' h='h-80' />
           </div>
         ) : (
-          <div className='w-full flex justify-center'>
-            <Chat w='w-9/12' h='h-96' />
+          <div className='w-full flex flex-col justify-center items-center'>
+            <UserInfo users={roomData.users}/>
+            <Chat w='w-7/12' h='h-96' />
           </div>
         )
       }