diff --git a/src/api/roomStatus.ts b/src/api/roomStatus.ts new file mode 100644 index 0000000..2a57864 --- /dev/null +++ b/src/api/roomStatus.ts @@ -0,0 +1,12 @@ +import axios from 'axios'; + +export const gameModeStatus = async (roomKey: string) => { + try { + const res = await axios.get(`/api/rooms/${roomKey}`, { withCredentials: true }); + console.log('게임 모드 조회:', res); + return res.data; + } catch (error: unknown) { + console.error('error:', error); + throw error; + } +}; diff --git a/src/pages/BalanceRoom/BalanceResultPage.tsx b/src/pages/BalanceRoom/BalanceResultPage.tsx index 4f9d5db..c2dbcfd 100644 --- a/src/pages/BalanceRoom/BalanceResultPage.tsx +++ b/src/pages/BalanceRoom/BalanceResultPage.tsx @@ -62,7 +62,7 @@ const BalanceResultPage = () => { - + B {result?.choiceBPercentage}% diff --git a/src/pages/TMIRoom/ForceCloseModal.tsx b/src/pages/TMIRoom/ForceCloseModal.tsx index ff53431..910d655 100644 --- a/src/pages/TMIRoom/ForceCloseModal.tsx +++ b/src/pages/TMIRoom/ForceCloseModal.tsx @@ -16,10 +16,10 @@ interface ModeConfig { } const MODE_CONFIG: Record = { TMI: { - detail: '힌트 타임이 종료되고 \n다시 TMI 입력 화면으로 돌아갑니다.', + detail: '힌트 타임이 종료되고 \nTMI 투표 화면으로 넘어갑니다.', }, BALANCE: { - detail: '토론 타임이 종료되고 밸런스\n 투표 화면으로 돌아갑니다.', + detail: '토론 타임이 종료되고 밸런스\n 투표 화면으로 넘어갑니다.', }, }; diff --git a/src/pages/TMIRoom/HintAndDisscussionPage.tsx b/src/pages/TMIRoom/HintAndDisscussionPage.tsx index b73fde4..dbacbb0 100644 --- a/src/pages/TMIRoom/HintAndDisscussionPage.tsx +++ b/src/pages/TMIRoom/HintAndDisscussionPage.tsx @@ -7,6 +7,7 @@ import ForceCloseModal from './ForceCloseModal'; import { useWebSocketStore } from '@store/useWebSocketStore'; import { useNavigate, useParams } from 'react-router-dom'; import useGameModeStore from '@store/useGameModeStore'; +import useRoomUsersStore from '@store/useRoomUsersStore'; // 게임 모드에 따라 조건부 적용 type GameMode = 'TMI' | 'BALANCE'; @@ -29,6 +30,8 @@ const MODE_CONFIG: Record = { }, }; +const isLeader = useRoomUsersStore.getState().users[0]?.isLeader; + const TMIHintPage = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [remainingTime, setRemainingTime] = useState('00:00:00'); @@ -92,8 +95,12 @@ const TMIHintPage = () => { 제한 시간 {remainingTime} {tips} - setIsModalOpen(true)}>강제 종료 - {isModalOpen && } + {isLeader && ( + <> + setIsModalOpen(true)}>강제 종료 + {isModalOpen && } + + )} ); }; diff --git a/src/pages/userEnterChatRoom/userEnterChatRoom.tsx b/src/pages/userEnterChatRoom/userEnterChatRoom.tsx index 4763264..391518c 100644 --- a/src/pages/userEnterChatRoom/userEnterChatRoom.tsx +++ b/src/pages/userEnterChatRoom/userEnterChatRoom.tsx @@ -20,8 +20,9 @@ import axios from 'axios'; import { useNavigate, useParams } from 'react-router-dom'; import { joinRoom } from '@api/login'; import useRoomUsersStore from '@store/useRoomUsersStore'; +import { gameModeStatus } from '@api/roomStatus'; +import { useEffect, useState } from 'react'; import useGameModeStore from '@store/useGameModeStore'; - type GameMode = 'NORMAL' | 'TMI' | 'BALANCE'; interface ModeConfig { @@ -47,7 +48,7 @@ const UserEnterChatRoom = () => { const { nickname, isNicknameValid, handleNicknameChange } = useNicknameValidation(); const { password, isPasswordValid, handlePasswordChange } = usePasswordValidation(); const isFormValid = isNicknameValid === true && isPasswordValid === true; - + const [gamesMode, setGamesMode] = useState(null); const { roomKey } = useParams(); const navigate = useNavigate(); const prevRoomKey = useRoomUsersStore.getState().roomKey; @@ -55,15 +56,39 @@ const UserEnterChatRoom = () => { const addUser = useRoomUsersStore((state) => state.addUser); const resetUsers = useRoomUsersStore((state) => state.resetUsers); const setUser = useRoomUsersStore((state) => state.setUser); - const gameMode = useGameModeStore((state) => state.gameMode as GameMode); + const setGameMode = useGameModeStore.getState().setGameMode; + + const title = gamesMode ? MODE_CONFIG[gamesMode].title : ''; + const button = gamesMode ? MODE_CONFIG[gamesMode].button : ''; + + useEffect(() => { + console.log('현재 gameMode:', gamesMode); + }, [gamesMode]); + useEffect(() => { + const fetchGameMode = async () => { + if (!roomKey) return; + try { + const res = await gameModeStatus(roomKey); + console.log(res); + const modeFromApi = res.data.gameMode as GameMode; + setGamesMode(modeFromApi); + setGameMode(modeFromApi); - const { title, button } = MODE_CONFIG[gameMode]; + console.log('API로 불러온 gameMode:', modeFromApi); + } catch (error) { + console.error('gameMode 불러오기 실패:', error); + } + }; + + fetchGameMode(); + }, [roomKey]); const fetchCurrentStep = async () => { - if (!roomKey) return; + if (!roomKey || !gamesMode) return; + try { // 게임 모드에 따른 API 엔드포인트 설정 - const res = await axios.get(`/api/${gameMode.toLowerCase()}/rooms/${roomKey}/status`, { + const res = await axios.get(`/api/${gamesMode.toLowerCase()}/rooms/${roomKey}/status`, { withCredentials: true, }); if (res.data) { @@ -97,7 +122,7 @@ const UserEnterChatRoom = () => { const updatedUsers = useRoomUsersStore.getState().users; console.log('전역 저장된 users:', updatedUsers); //TMI모드 방 참여 - if (gameMode === 'TMI') { + if (gamesMode === 'TMI') { const currentStep = await fetchCurrentStep(); if (currentStep === 'COLLECTING_TMI') { navigate(`/tmi/${roomKey}/input`); @@ -112,7 +137,7 @@ const UserEnterChatRoom = () => { } return; // BALANCE모드 방 참여 - } else if (gameMode === 'BALANCE') { + } else if (gamesMode === 'BALANCE') { const currentStep = await fetchCurrentStep(); if (currentStep === 'WAITING_FOR_MEMBERS') { navigate(`/balance/${roomKey}/load`);