Ready 컴포넌트 내부에서 직접 상태 처리하도록 수정

-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
 import SocketContext from '../../contexts/SocketContext';
 import SocketContext from '../../contexts/SocketContext';
 import { MessageType, RawMessage } from '../common/types';
 import { MessageType, RawMessage } from '../common/types';
+import { User } from './types';
+
+interface ReadyLocation {
+  state: { username: string }
+}
 
 
 interface ReadyProps {
 interface ReadyProps {
-  isReady: boolean;
-  isAdmin: boolean;
-  isAllReady: boolean;
+  users: User[];
 }
 }
 
 
-export const Ready: React.FC<ReadyProps> = ({ isReady, isAdmin, isAllReady }) => {
+export const Ready: React.FC<ReadyProps> = ({ users }) => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
+  const location: ReadyLocation = useLocation();
+  
+  const [ isAdmin, setIsAdmin ] = useState(false);
+  const [ isReady, setIsReady ] = useState(false);
+  const [ isAllReady, setIsAllReady ] = useState(false);
+
+  useEffect(() => {
+    const me = users.find(x => x.username === location.state.username);
+    setIsAdmin(me?.admin || false);
+    setIsReady(me?.ready || false);
+
+    const test = true;
+    users.forEach(x => test && x.ready);
+    setIsAllReady(test);
+  });
+
   const handleReady = useCallback(() => {
   const handleReady = useCallback(() => {
     if (isAdmin && isAllReady) {
     if (isAdmin && isAllReady) {
       const rawMessage: RawMessage = {
       const rawMessage: RawMessage = {
@@ -24,17 +44,17 @@ export const Ready: React.FC<ReadyProps> = ({ isReady, isAdmin, isAllReady }) =>
       }
       }
       socket.emit('msg', rawMessage, () => {});
       socket.emit('msg', rawMessage, () => {});
     }
     }
-  }, []);
+  }, [isAdmin, isReady, isAllReady]);
 
 
   return (
   return (
     <button className={`${isAdmin ? isAllReady ? 'bg-green-500' : 'bg-gray-400'
     <button className={`${isAdmin ? isAllReady ? 'bg-green-500' : 'bg-gray-400'
                             : isReady ? 'bg-green-600'
                             : isReady ? 'bg-green-600'
                             : 'bg-green-500 active:bg-green-600'} 
                             : 'bg-green-500 active:bg-green-600'} 
-                            text-white font-bold uppercase text-sm
-                            px-5 py-2 ml-3 rounded shadow
+                            text-white font-bold uppercase
+                            px-7 py-3 m-8 rounded shadow
                             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"
-                    onClick={() => {}}>{isAdmin ? 'Start' : 'Ready'}</button>
+                    onClick={() => handleReady()}>{isAdmin ? 'Start' : 'Ready'}</button>
   );
   );
 }
 }