feat: 채팅에서 직업 찾아서 보여주기

src/components/chat/ChatGroup.tsx

@@ -1,9 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { forwardRef } from 'react';
+import { useRecoilState } from 'recoil';
 
+import { roomInfoState } from '../../recoil/roominfo/atom';
 import { VariablesCSS } from '../../styles/VariablesCSS';
 import { Chat } from '../../type';
+import { getPlayerJob } from '../../util/job';
 import PlayerChat from '../player/PlayerChat';
 import ChatMessage from './ChatMessage';
 
@@ -15,9 +18,11 @@ interface PropsType {
 export default forwardRef(function ChatGroup(props: PropsType, ref: any) {
   const { chats } = props;
 
+  const [roomInfo] = useRecoilState(roomInfoState);
+
   return (
     <div ref={ref} css={container(props)}>
-      <PlayerChat job={chats[0].job} />
+      <PlayerChat job={getPlayerJob(roomInfo.players, chats[0].name)} />
       <div css={right(props)}>
         <p css={nameText}>{chats[0].name}</p>
         {chats.map((chat, idx) => (

src/util/job.ts

@@ -0,0 +1,5 @@
+import { Job, Player } from '../type';
+
+export const getPlayerJob = (players: Player[], name: string): Job => {
+  return players.find(el => el.name == name)?.job || null;
+};