feat: 대기방 정보 SSE로 교체

src/axios/http.ts

@@ -41,33 +41,10 @@ export const getValidRoomCode = async (code: string | null) => {
   return http.get<RoomCodeExistsResponse>(`/lobbies/code/exist?code=${code}`);
 };
 
-export const useChatsQuery = () => {
-  const { data: chats, ...rest } = useSuspenseQuery({
-    queryKey: ['chats', localStorage.getItem('auth')],
-    queryFn: () => getChats(),
-    // refetchInterval: 500,
-    // staleTime: 500,
-  });
-  return {
-    chats,
-    ...rest,
-  };
-};
-
 export const getRoomsStatus = () => {
   return http.get<GameStatus>('/games/status');
 };
 
-export const useGamesInfoQuery = () => {
-  const { data: gameInfo, ...rest } = useSuspenseQuery({
-    queryKey: ['games', 'info', localStorage.getItem('auth')],
-    queryFn: () => getGamesInfo(),
-    refetchInterval: 500,
-    staleTime: 500,
-  });
-  return { gameInfo, ...rest };
-};
-
 export const getGamesInfo = () => {
   return http.get<GameInfo>(`/games/info`);
 };

src/pages/Game.tsx

@@ -6,7 +6,7 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
 import { getChats, getGamesInfo, getMyJob } from '../axios/http';
 import { BASE_URL } from '../axios/instances';
 import { gameRound, myJobState, roomInfoState } from '../recoil/roominfo/atom';
-import { ChatArray, ChatResponse, GameStatus } from '../type';
+import { ChatArray, ChatResponse, GameStatus, WaitingRoomInfo } from '../type';
 import Day from './Day';
 import Night from './Night';
 import Result from './Result';
@@ -19,6 +19,16 @@ export default function Game() {
 
   const [chatSubscribeId, setChatSubscribeId] = useState<StompJs.StompSubscription | null>(null);
   const [roomsInfoState, setRoomsInfoState] = useRecoilState(roomInfoState); // 방 정보
+  const [waitingRoomInfoState, setWaitingRoomInfoState] = useState<WaitingRoomInfo>({
+    totalPlayers: 1,
+    isMaster: true,
+    myName: '내이름',
+    lobbyPlayerResponses: [
+      {
+        name: '이름',
+      },
+    ],
+  });
   const [finishSocketConneted, setFinishSocketConnetd] = useState(false); // 웹 소켓 연결이 끝난다는 트리거(채팅 구독이 연결 전에 실행될 때를 대비해 다시 실행하기 위함)
 
   const setGameRoundState = useSetRecoilState(gameRound);
@@ -45,6 +55,10 @@ export default function Game() {
       setGameStatus(JSON.parse(response.data));
     }) as EventListener);
 
+    eventSource.current.addEventListener('lobbyInfo', ((response: MessageEvent) => {
+      setWaitingRoomInfoState(JSON.parse(response.data));
+    }) as EventListener);
+
     return () => {
       eventSource.current?.close();
     };
@@ -115,8 +129,6 @@ export default function Game() {
     return () => unsubscribeChat();
   }, [gamesStatus.statusType, finishSocketConneted]);
 
-  useEffect(() => {});
-
   // 웹소켓 연결
   useEffect(() => {
     connect();
@@ -130,6 +142,17 @@ export default function Game() {
       const roomInfoResponse = await getGamesInfo();
       setRoomsInfoState(roomInfoResponse);
 
+      // 대기방 SSE이벤트를 받기전에 처음값
+      setWaitingRoomInfoState({
+        ...waitingRoomInfoState,
+        totalPlayers: roomInfoResponse.totalPlayers,
+        isMaster: roomInfoResponse.isMaster,
+        myName: roomInfoResponse.myName,
+        lobbyPlayerResponses: roomInfoResponse.players.map(player => {
+          return { name: player.name };
+        }),
+      });
+
       // 내 직업
       if (gamesStatus.statusType !== 'WAIT' && !myJobRecoilState) {
         const myJobResponse = await getMyJob();
@@ -147,7 +170,9 @@ export default function Game() {
 
   return (
     <>
-      {gamesStatus.statusType === 'WAIT' && <WaitingRoom />}
+      {gamesStatus.statusType === 'WAIT' && (
+        <WaitingRoom waitingRoomInfoState={waitingRoomInfoState} />
+      )}
       {(gamesStatus.statusType === 'DAY_INTRO' ||
         gamesStatus.statusType === 'NOTICE' ||
         gamesStatus.statusType === 'DAY' ||

src/pages/WaitingRoom.tsx

@@ -4,7 +4,7 @@ import { Suspense, useEffect, useState } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
-import { getRoomsCode, startGame, useGamesInfoQuery } from '../axios/http';
+import { getRoomsCode, startGame } from '../axios/http';
 import { DOMAIN } from '../axios/instances';
 import BigButton from '../components/button/BigButton';
 import { Loading } from '../components/etc/Loading';
@@ -14,17 +14,21 @@ import PlayerWaiting from '../components/player/PlayerWaiting';
 import { notifyUseToast } from '../components/toast/NotifyToast';
 import TopEnter from '../components/top/TopEnter';
 import { VariablesCSS } from '../styles/VariablesCSS';
-import { Player } from '../type';
+import { lobbyPlayer, WaitingRoomInfo } from '../type';
 
-export default function WaitingRoom() {
+type PropsType = {
+  waitingRoomInfoState: WaitingRoomInfo;
+};
+
+export default function WaitingRoom({ waitingRoomInfoState }: PropsType) {
   const [openAnimation, setOpenAnimation] = useState(false);
 
   /* 참가목록 받아오기 */
-  const [players, setPlayers] = useState<Player[]>([]);
-  const { gameInfo } = useGamesInfoQuery();
+  const [players, setPlayers] = useState<lobbyPlayer[]>([]);
 
   const getVirtualPlayers = () => {
-    const virtualPlayersLength = gameInfo.totalPlayers - gameInfo.players.length;
+    const virtualPlayersLength =
+      waitingRoomInfoState.totalPlayers - waitingRoomInfoState.lobbyPlayerResponses.length;
     const virtualPlayer = {
       name: '',
       isAlive: true,
@@ -34,8 +38,8 @@ export default function WaitingRoom() {
   };
 
   useEffect(() => {
-    setPlayers(gameInfo.players);
-  }, [gameInfo.players]);
+    setPlayers(waitingRoomInfoState.lobbyPlayerResponses);
+  }, [waitingRoomInfoState]);
 
   /* 초대하기 모달 */
   // 띄우고 끄기
@@ -82,7 +86,7 @@ export default function WaitingRoom() {
 
   /* 게임시작 */
   const canStartGame = () => {
-    return gameInfo.isMaster && players.length === gameInfo.totalPlayers;
+    return waitingRoomInfoState.isMaster && players.length === waitingRoomInfoState.totalPlayers;
   };
   const navigate = useNavigate();
   const onGameStart = async () => {
@@ -101,7 +105,7 @@ export default function WaitingRoom() {
             <div css={textGroup}>
               <p css={subTitle}>참가목록</p>
               <p css={number}>
-                {players.length}/{gameInfo.totalPlayers}
+                {players.length}/{waitingRoomInfoState.totalPlayers}
               </p>
             </div>
             <PlayerGrid>
@@ -111,7 +115,7 @@ export default function WaitingRoom() {
             </PlayerGrid>
           </div>
           <div css={bottom} onClick={onGameStart}>
-            {gameInfo.isMaster && (
+            {waitingRoomInfoState.isMaster && (
               <BigButton vatiety="emphasis" use="gameStart" ready={canStartGame()} />
             )}
           </div>

src/type/index.ts

@@ -73,6 +73,17 @@ export interface GameInfo {
   players: Player[];
 }
 
+export interface WaitingRoomInfo {
+  totalPlayers: number;
+  isMaster: boolean;
+  myName: string;
+  lobbyPlayerResponses: lobbyPlayer[];
+}
+
+export interface lobbyPlayer {
+  name: string;
+}
+
 export interface MyJobResponse {
   job: Job;
 }