fix: 워크스페이스 이동 시 기존 소켓 연결 해제

Author: wcho21

client/src/components/Workspace/index.tsx

@@ -2,6 +2,7 @@ import Mom from 'components/Mom';
 import Sidebar from 'components/Sidebar';
 import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { Socket } from 'socket.io-client';
 import { getWorkspaceInfo } from 'src/apis/workspace';
 import ConfMediaBar from 'src/components/ConfMediaBar';
 import SOCKET_MESSAGE from 'src/constants/socket-message';
@@ -16,12 +17,12 @@ function Workspace() {
   const { id } = useParams();
   const [isStart, setIsStart] = useState(false);
 
-  const momSocket = useMemo(() => useSocket(`/sc-workspace/${id}`), [id]);
-  const workspaceSocket = useMemo(() => useSocket(`/workspace/${id}`), [id]);
-
   const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
   const [selectedMom, setSelectedMom] = useState<TMom | null>(null);
 
+  const [momSocket, setMomSocket] = useState<Socket | null>(null);
+  const [workspaceSocket, setWorkspaceSocket] = useState<Socket | null>(null);
+
   const loadWorkspaceInfo = async () => {
     if (id) {
       const workspaceInfo = await getWorkspaceInfo({ id });
@@ -33,18 +34,47 @@ function Workspace() {
   };
 
   useEffect(() => {
+    setMomSocket(prev => {
+      prev?.disconnect();
+      return useSocket(`/sc-workspace/${id}`)
+    });
+    setWorkspaceSocket(prev => {
+      prev?.disconnect();
+      return useSocket(`/workspace/${id}`)
+    });
+    
+    loadWorkspaceInfo();
+
+    return () => {
+      setMomSocket(prev => {
+        prev?.disconnect();
+        return null;
+      });
+      setWorkspaceSocket(prev => {
+        prev?.disconnect();
+        return null;
+      });
+    }
+  }, [id]);
+
+  useEffect(() => {
+    if (!workspaceSocket) {
+      return;
+    }
+
     workspaceSocket.on(SOCKET_MESSAGE.WORKSPACE.START_MEETING, () => {
       setIsStart(true);
     });
 
     workspaceSocket.on(SOCKET_MESSAGE.WORKSPACE.END_MEETING, () => {
       setIsStart(false);
     });
-  }, []);
 
-  useEffect(() => {
-    loadWorkspaceInfo();
-  }, [id]);
+    return () => {
+      workspaceSocket.off(SOCKET_MESSAGE.WORKSPACE.START_MEETING);
+      workspaceSocket.off(SOCKET_MESSAGE.WORKSPACE.END_MEETING);
+    }
+  }, [workspaceSocket]);
 
   return (
     <SocketContext.Provider value={{ momSocket, workspaceSocket }}>

client/src/contexts/socket.ts

@@ -2,8 +2,8 @@ import { createContext } from 'react';
 import { Socket } from 'socket.io-client';
 
 interface ISocketContext {
-  momSocket: Socket;
-  workspaceSocket: Socket;
+  momSocket: Socket | null;
+  workspaceSocket: Socket | null;
 }
 
 export const SocketContext = createContext<ISocketContext | null>(null);