feat: 오류사항 수정 후 main 적용

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;
+  }
+};

src/pages/BalanceRoom/BalanceResultPage.tsx

@@ -62,7 +62,7 @@ const BalanceResultPage = () => {
           </QuestionSubContainer>
 
           <QuestionSubContainer>
-            <GaugeBackground percentage={result?.choiceAPercentage || 0} />
+            <GaugeBackground percentage={result?.choiceBPercentage || 0} />
             <CircleBox>
               <Circle style={{ background: '#F06363' }}>B</Circle>
               <Percent>{result?.choiceBPercentage}%</Percent>

src/pages/TMIRoom/ForceCloseModal.tsx

@@ -16,10 +16,10 @@ interface ModeConfig {
 }
 const MODE_CONFIG: Record<GameMode, ModeConfig> = {
   TMI: {
-    detail: '힌트 타임이 종료되고 \n다시 TMI 입력 화면으로 돌아갑니다.',
+    detail: '힌트 타임이 종료되고 \nTMI 투표 화면으로 넘어갑니다.',
   },
   BALANCE: {
-    detail: '토론 타임이 종료되고 밸런스\n 투표 화면으로 돌아갑니다.',
+    detail: '토론 타임이 종료되고 밸런스\n 투표 화면으로 넘어갑니다.',
   },
 };
 

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<GameMode, ModeConfig> = {
   },
 };
 
+const isLeader = useRoomUsersStore.getState().users[0]?.isLeader;
+
 const TMIHintPage = () => {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [remainingTime, setRemainingTime] = useState<string>('00:00:00');
@@ -92,8 +95,12 @@ const TMIHintPage = () => {
       <TMIdetail>제한 시간</TMIdetail>
       <HintTime>{remainingTime}</HintTime>
       <TMITips>{tips}</TMITips>
-      <Close onClick={() => setIsModalOpen(true)}>강제 종료</Close>
-      {isModalOpen && <ForceCloseModal onClose={setIsModalOpen} roomKey={roomKey as string} />}
+      {isLeader && (
+        <>
+          <Close onClick={() => setIsModalOpen(true)}>강제 종료</Close>
+          {isModalOpen && <ForceCloseModal onClose={setIsModalOpen} roomKey={roomKey as string} />}
+        </>
+      )}
     </ChatRoomContainer>
   );
 };

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,23 +48,47 @@ const UserEnterChatRoom = () => {
   const { nickname, isNicknameValid, handleNicknameChange } = useNicknameValidation();
   const { password, isPasswordValid, handlePasswordChange } = usePasswordValidation();
   const isFormValid = isNicknameValid === true && isPasswordValid === true;
-
+  const [gamesMode, setGamesMode] = useState<GameMode | null>(null);
   const { roomKey } = useParams();
   const navigate = useNavigate();
   const prevRoomKey = useRoomUsersStore.getState().roomKey;
   const setRoomKey = useRoomUsersStore.getState().setRoomKey;
   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`);