diff --git a/src/axios/http.ts b/src/axios/http.ts index 9a16471..3369643 100644 --- a/src/axios/http.ts +++ b/src/axios/http.ts @@ -41,33 +41,10 @@ export const getValidRoomCode = async (code: string | null) => { return http.get(`/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('/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(`/games/info`); }; diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx index e637f7e..31a18b6 100644 --- a/src/pages/Game.tsx +++ b/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(null); const [roomsInfoState, setRoomsInfoState] = useRecoilState(roomInfoState); // 방 정보 + const [waitingRoomInfoState, setWaitingRoomInfoState] = useState({ + 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' && } + {gamesStatus.statusType === 'WAIT' && ( + + )} {(gamesStatus.statusType === 'DAY_INTRO' || gamesStatus.statusType === 'NOTICE' || gamesStatus.statusType === 'DAY' || diff --git a/src/pages/WaitingRoom.tsx b/src/pages/WaitingRoom.tsx index 85d7adf..7618db9 100644 --- a/src/pages/WaitingRoom.tsx +++ b/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([]); - const { gameInfo } = useGamesInfoQuery(); + const [players, setPlayers] = useState([]); 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() {

참가목록

- {players.length}/{gameInfo.totalPlayers} + {players.length}/{waitingRoomInfoState.totalPlayers}

@@ -111,7 +115,7 @@ export default function WaitingRoom() {
- {gameInfo.isMaster && ( + {waitingRoomInfoState.isMaster && ( )}
diff --git a/src/type/index.ts b/src/type/index.ts index 456e9fb..554d781 100644 --- a/src/type/index.ts +++ b/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; }