From 2a701fc35990f01fbcc01a574618f23e600c7f09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=A7=80=EC=9C=A4?=
 <70828192+cheonjiyun@users.noreply.github.com>
Date: Tue, 29 Oct 2024 19:22:55 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8?=
 =?UTF-8?q?=ED=95=98=EB=A9=B4=20=EB=B3=B8=EC=9D=B8=20=EC=A7=81=EC=97=85?=
 =?UTF-8?q?=EC=9D=B4=20=EB=82=A0=EB=9D=BC=EA=B0=80=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0=20(#140)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/NoticeMyJob.tsx | 16 ++-------------
 src/pages/Day.tsx                    |  1 -
 src/pages/Game.tsx                   | 30 +++++++++++++++++-----------
 src/recoil/roominfo/atom.ts          |  2 +-
 4 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/components/modal/NoticeMyJob.tsx b/src/components/modal/NoticeMyJob.tsx
index 9c0b2c9..8b34c37 100644
--- a/src/components/modal/NoticeMyJob.tsx
+++ b/src/components/modal/NoticeMyJob.tsx
@@ -1,12 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useEffect, useState } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
-import { getMyJob } from '../../axios/http';
 import { myJobState } from '../../recoil/roominfo/atom';
 import { VariablesCSS } from '../../styles/VariablesCSS';
-import { Job } from '../../type';
 import PlayerBig from '../player/PlayerBig';
 import NoticeCitizen from './NoticeJobs/NoticeCitizen';
 import NoticeMafia from './NoticeJobs/NoticeMafia';
@@ -25,16 +22,7 @@ const text = {
 export default function NoticeMyJob(props: PropsType) {
   const { name } = props;
 
-  // 내 직업공지
-  const [myJob, setMyJob] = useState<Job>('CITIZEN');
-  const setMyJobRecoilState = useSetRecoilState(myJobState); // 방 정보
-  useEffect(() => {
-    (async () => {
-      const myJobResponse = await getMyJob();
-      setMyJob(myJobResponse.job);
-      setMyJobRecoilState(myJobResponse.job);
-    })();
-  }, []);
+  const myJob = useRecoilValue(myJobState);
 
   return (
     <>
diff --git a/src/pages/Day.tsx b/src/pages/Day.tsx
index 592f1cc..d357e48 100644
--- a/src/pages/Day.tsx
+++ b/src/pages/Day.tsx
@@ -30,7 +30,6 @@ export default function Day({ statusType, publishChat, chats, setChats }: PropsT
 
   /* 방 정보 */
   const [roomInfo] = useRecoilState(roomInfoState);
-
   // 내가 살아있는지
   const isAlive = roomInfo?.isAlive;
 
diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx
index 0094199..559ef69 100644
--- a/src/pages/Game.tsx
+++ b/src/pages/Game.tsx
@@ -3,9 +3,9 @@ import { EventListener, EventSourcePolyfill } from 'event-source-polyfill';
 import { useEffect, useRef, useState } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
-import { getChats, getGamesInfo } from '../axios/http';
+import { getChats, getGamesInfo, getMyJob } from '../axios/http';
 import { BASE_URL } from '../axios/instances';
-import { gameRound, roomInfoState } from '../recoil/roominfo/atom';
+import { gameRound, myJobState, roomInfoState } from '../recoil/roominfo/atom';
 import { ChatArray, ChatResponse, GameStatus } from '../type';
 import Day from './Day';
 import Night from './Night';
@@ -18,10 +18,12 @@ export default function Game() {
   const socketClientState = useRef<StompJs.Client | null>(null);
   const [chatSubscribeId, setChatSubscribeId] = useState<StompJs.StompSubscription | null>(null);
   const [roomsInfoState, setRoomsInfoState] = useRecoilState(roomInfoState); // 방 정보
+
   const setGameRoundState = useSetRecoilState(gameRound);
 
   // 방 상태 불러오기
   const [gamesStatus, setGameStatus] = useState<GameStatus>({ statusType: 'WAIT' });
+  const [myJobRecoilState, setMyJobRecoilState] = useRecoilState(myJobState);
 
   // SSE
   const eventSource = useRef<EventSourcePolyfill | null>(null);
@@ -102,26 +104,30 @@ export default function Game() {
 
   // 채팅구독
   useEffect(() => {
-    if (gamesStatus.statusType === 'DAY') {
-      subscribeChat();
-    }
-    return () => unsubscribeChat();
-  }, [gamesStatus.statusType]);
+    if (!(gamesStatus.statusType === 'DAY')) return;
 
-  // 본래 채팅불러오기
-  useEffect(() => {
+    // 본래 채팅불러오기
     (async () => {
       const response = await getChats();
       setChats(response);
     })();
-  }, []);
+
+    subscribeChat();
+    return () => unsubscribeChat();
+  }, [gamesStatus.statusType]);
 
   // 방 정보 저장 (방 상태가 바뀔때만 작동?)
   useEffect(() => {
-    // 방 정보 불러오기
     (async () => {
+      // 방 정보 불러오기
       const roomInfoResponse = await getGamesInfo();
       setRoomsInfoState(roomInfoResponse);
+
+      // 내 직업
+      if (gamesStatus.statusType !== 'WAIT' && !myJobRecoilState) {
+        const myJobResponse = await getMyJob();
+        setMyJobRecoilState(myJobResponse.job);
+      }
     })();
 
     // DAY로 바뀔때 마다 라운드 +1
@@ -130,7 +136,7 @@ export default function Game() {
     } else if (gamesStatus.statusType === 'WAIT') {
       setGameRoundState(0);
     }
-  }, [gamesStatus.statusType, setGameRoundState, setRoomsInfoState]);
+  }, [gamesStatus.statusType, setGameRoundState, setMyJobRecoilState, setRoomsInfoState]);
 
   return (
     <>
diff --git a/src/recoil/roominfo/atom.ts b/src/recoil/roominfo/atom.ts
index e96acaf..f18a656 100644
--- a/src/recoil/roominfo/atom.ts
+++ b/src/recoil/roominfo/atom.ts
@@ -29,5 +29,5 @@ export const roomInfoState = atom<GameInfo>({
 
 export const myJobState = atom<Job>({
   key: 'myJobState',
-  default: 'CITIZEN',
+  default: null,
 });