fix: 새로고침하면 본인 직업이 날라가는 문제 해결 (#140)

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 (
     <>

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;
 

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 (
     <>

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,
 });