Feature/#160 경찰 이미 스킬 사용했을 때는 토스트, 아직 결과가 안왔을 때는 모달 안띄운다

src/components/job/PoliceNight.tsx

@@ -6,7 +6,6 @@ import { middle } from '../../pages/Night';
 import { VariablesCSS } from '../../styles/VariablesCSS';
 import { Player } from '../../type';
 import InvestResult from '../modal/InvestResult';
-import ModalContainer from '../modal/ModalContainer';
 import PlayerGrid from '../player/PlayerGrid';
 import PlayerNight from '../player/PlayerNight';
 
@@ -48,9 +47,7 @@ export const PoliceNight = (props: PropsType) => {
         </PlayerGrid>
       </div>
       {/* 경찰: 조사하기 */}
-      <ModalContainer isOpen={openModal}>
-        <InvestResult target={players[check - 1]?.name} />
-      </ModalContainer>
+      {openModal && <InvestResult target={players[check - 1]?.name} isOpen={openModal} />}
     </>
   );
 };

src/components/modal/InvestResult.tsx

@@ -1,33 +1,49 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { useEffect, useState } from 'react';
+import { Toaster } from 'react-hot-toast';
 
 import { postSkill } from '../../axios/http';
 import { VariablesCSS } from '../../styles/VariablesCSS';
 import { Job, SkillResponse } from '../../type';
 import PlayerInvest from '../player/PlayerInvest';
+import { notifyUseToast } from '../toast/NotifyToast';
+import ModalContainer from './ModalContainer';
 
 interface PropsType {
   target: string;
+  isOpen: boolean;
 }
-export default function InvestResult(props: PropsType) {
-  const { target } = props;
+export default function InvestResult({ target, isOpen }: PropsType) {
+  const [jobResult, setJobResult] = useState<Job>(null);
 
-  const [jobResult, setJobResult] = useState<Job>('CITIZEN');
   useEffect(() => {
     (async () => {
-      const skillResponse: SkillResponse = await postSkill({ target: target });
-      setJobResult(skillResponse.result);
+      try {
+        const skillResponse: SkillResponse = await postSkill({ target: target });
+        setJobResult(skillResponse.result);
+      } catch (error: any) {
+        console.log(jobResult);
+
+        notifyUseToast(error.response.data.message, 'LOBBY');
+      }
     })();
   }, [target]);
 
   return (
-    <div css={container}>
-      <PlayerInvest job={jobResult} name={target} />
-      <p css={description(jobResult)}>
-        {jobResult === 'MAFIA' ? '마피아가 맞습니다' : '마피아가 아닙니다'}
-      </p>
-    </div>
+    <>
+      {jobResult && (
+        <ModalContainer isOpen={isOpen}>
+          <div css={container}>
+            <PlayerInvest job={jobResult} name={target} />
+            <p css={description(jobResult)}>
+              {jobResult === 'MAFIA' ? '마피아가 맞습니다' : '마피아가 아닙니다'}
+            </p>
+          </div>
+        </ModalContainer>
+      )}
+      <Toaster />
+    </>
   );
 }
 

src/pages/Game.tsx

@@ -185,6 +185,10 @@ export default function Game() {
   // 방 정보 저장 (방 상태가 바뀔때만 작동?)
   useEffect(() => {
     (async () => {
+      if (gamesStatus.statusType == 'WAIT') {
+        setMyJobRecoilState(null);
+      }
+
       // 방 정보 불러오기
       const roomInfoResponse = await getGamesInfo();
       setRoomsInfoState(roomInfoResponse);