정답을 맞춘 효과 추가

@@ -23,9 +23,11 @@ export const Chat: React.FC<ChatProps> = (props) => {
     }
 
     socket.on('msg', handleChatData);
+    socket.on('msg', handleAcceptMessage);
 
     return () => {
       socket.off('msg', handleChatData);
+      socket.off('msg', handleAcceptMessage);
     }
   }, []);
 
@@ -47,6 +49,16 @@ export const Chat: React.FC<ChatProps> = (props) => {
     }
   }, [input]);
 
+  const handleAcceptMessage = useCallback((rawMessage: RawMessage) => {
+    if (rawMessage.type === MessageType.GAME_ACCEPT) {
+      const message: ChatData = {
+        sender: 'SYSTEM',
+        message: 'That\'s correct!'
+      };
+      setChatLines(oldChatLines => [...oldChatLines, message]);
+    }
+  }, []);
+
   return (
     <div className={props.w}>
       <div className={`${props.h} w-full py-2 rounded shadow flex flex-col overflow-y-scroll`}>

@@ -55,15 +55,24 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
     }
   }, [wordChosen]);
 
+  const handleAnswer = useCallback((rawMessage: RawMessage) => {
+    if (rawMessage.type === MessageType.GAME_ACCEPT) {
+      const { answer } = rawMessage.message as { answer: string };
+      setWordChosen(answer);
+    }
+  }, []);
+
   useEffect(() => {
     socket.on('msg', handleStart);
     socket.on('msg', handleGetWordLength);
     socket.on('msg', handleWordSet);
+    socket.on('msg', handleAnswer);
 
     return () => {
       socket.off('msg', handleStart);
       socket.off('msg', handleGetWordLength);
       socket.off('msg', handleWordSet);
+      socket.off('msg', handleAnswer);
     }
   }, []);