[🐛fix]: ingameSubscription 인게임웹소켓훅으로 수정

src/pages/GamePage/GamePage.tsx

@@ -14,8 +14,7 @@ const GamePage = () => {
   const navigate = useNavigate();
 
   const { roomId, setRoomInfo, roomInfo } = useRoomInfoStore();
-  const { publishGameRoom, stompClient, ingameSubscription } =
-    useWebsocket(roomId);
+  const { publishGameRoom, stompClient } = useWebsocket(roomId);
 
   const { gameRoomRes, isRoomWsError, didAdminStart, allMembers } =
     useGameWaitingRoomStore();
@@ -109,7 +108,6 @@ const GamePage = () => {
     <IngameWebsocketLayer
       userId={userId}
       stompClient={stompClient}
-      ingameSubscription={ingameSubscription}
     />
   );
 };

src/pages/GamePage/IngameWebsocketLayer.tsx

@@ -1,4 +1,4 @@
-import { Client, StompSubscription } from '@stomp/stompjs';
+import { Client } from '@stomp/stompjs';
 import React, { MutableRefObject, Suspense, useEffect } from 'react';
 import Spinner from '@/common/Spinner/Spinner';
 import useIngameStore from '@/store/useIngameStore';
@@ -11,7 +11,6 @@ import useIngameWebsocket from './hooks/useIngameWebsocket';
 interface IngameWebsocketLayerProps {
   userId: number;
   stompClient: MutableRefObject<Client | undefined>;
-  ingameSubscription: MutableRefObject<StompSubscription | undefined>;
 }
 
 const GameCode = React.lazy(() => import('./GameCode/GameCode'));
@@ -22,14 +21,13 @@ const GameSentence = React.lazy(() => import('./GameSentence/GameSentence'));
 const IngameWebsocketLayer = ({
   userId,
   stompClient,
-  ingameSubscription,
 }: IngameWebsocketLayerProps) => {
   const { roomId, roomInfo } = useRoomInfoStore();
   const { ingameRoomRes, isIngameWsError, isRoundWaiting, setIsRoundWaiting } =
     useIngameStore();
 
   const { onIngameConnected, handleConnectIngame, publishIngame } =
-    useIngameWebsocket({ roomId, stompClient, ingameSubscription });
+    useIngameWebsocket({ roomId, stompClient });
   useEffect(() => {
     onIngameConnected(); // 인게임 엔드포인트 구독
     handleConnectIngame(roomId); // 해당 인게임 연결 발행

src/pages/GamePage/hooks/useIngameWebsocket.ts

@@ -1,5 +1,5 @@
 import { Client, StompSubscription } from '@stomp/stompjs';
-import { MutableRefObject } from 'react';
+import { MutableRefObject, useRef } from 'react';
 import useGameWaitingRoomStore from '@/store/useGameWaitingRoomStore';
 import useIngameStore from '@/store/useIngameStore';
 import { checkIsEmptyObj } from '@/utils/checkIsEmptyObj';
@@ -9,13 +9,10 @@ import { PayloadType } from '../types/websocketType';
 interface I_useIngame {
   roomId: number;
   stompClient: MutableRefObject<Client | undefined>;
-  ingameSubscription: MutableRefObject<StompSubscription | undefined>;
 }
-const useIngameWebsocket = ({
-  roomId,
-  stompClient,
-  ingameSubscription,
-}: I_useIngame) => {
+const useIngameWebsocket = ({ roomId, stompClient }: I_useIngame) => {
+  const ingameSubscription = useRef<StompSubscription>();
+
   const connectHeaders = getToken();
   const { setIsIngameWsError, setIngameRoomRes } = useIngameStore();
   const { setAllMembers } = useGameWaitingRoomStore();

src/pages/GamePage/hooks/useWebsocket.ts

@@ -1,5 +1,5 @@
 import './init.ts';
-import { Client, StompSubscription } from '@stomp/stompjs';
+import { Client } from '@stomp/stompjs';
 import { useEffect, useRef } from 'react';
 import SockJS from 'sockjs-client';
 import { BASE_PATH } from '@/generated/base';
@@ -10,7 +10,6 @@ import { getToken } from '@/utils/getToken';
 
 const useWebsocket = (roomId: number | null) => {
   const stompClient = useRef<Client>();
-  const ingameSubscription = useRef<StompSubscription>();
 
   const connectHeaders = getToken();
 
@@ -101,7 +100,6 @@ const useWebsocket = (roomId: number | null) => {
   return {
     publishGameRoom,
     stompClient,
-    ingameSubscription,
   };
 };