[feature-socket-fix] refactor : handleConnection 방식 변경 및 socketSlice 클린업 함수 추가

client/src/store/NodeListProvider.tsx

@@ -2,7 +2,7 @@ import useGroupSelect from "@/hooks/useGroupSelect";
 import useHistoryState from "@/hooks/useHistoryState";
 import { Node, NodeData, SelectedNode } from "@/types/Node";
 import Konva from "konva";
-import { createContext, ReactNode, useContext, useState } from "react";
+import { createContext, ReactNode, useContext, useEffect, useState } from "react";
 import { deleteNodes } from "@/konva_mindmap/events/deleteNode";
 import { setLatestMindMap } from "@/utils/localstorage";
 import useMindMapTitle from "@/hooks/useMindMapTitle";
@@ -53,39 +53,52 @@ export default function NodeListProvider({ children }: { children: ReactNode })
   const socket = useConnectionStore((state) => state.socket);
   const handleSocketEvent = useConnectionStore((state) => state.handleSocketEvent);
 
-  socket?.on("joinRoom", (initialData) => {
-    setLoading(true);
-    setTimeout(() => {
-      setData({ ...initialData.nodeData });
-      overrideHistory(JSON.stringify(initialData));
-      initializeTitle(initialData);
-      initializeContent(initialData);
-      setLoading(false);
-    }, 0);
-  });
-
-  socket?.on("updateNode", (updatedNodeData) => {
-    overrideNodeData(updatedNodeData);
-  });
-
-  socket?.on("updateTitle", (updatedTitle) => {
-    updateTitle(updatedTitle.title);
-  });
-
-  socket?.on("updateContent", (updatedContent) => {
-    updateContent(updatedContent.content);
-  });
-
-  socket?.on("disconnect", () => {
-    setData({});
-    overrideHistory(JSON.stringify({}));
-    setLatestMindMap(mindMapId);
-  });
-
-  socket?.on("aiResponse", (response) => {
-    const initializedNodes = initializeNodePosition(response.nodeData);
-    handleSocketEvent({ actionType: "updateNode", payload: initializedNodes });
-  });
+  useEffect(() => {
+    socket?.on("joinRoom", (initialData) => {
+      setLoading(true);
+      setTimeout(() => {
+        setData({ ...initialData.nodeData });
+        overrideHistory(JSON.stringify(initialData));
+        initializeTitle(initialData);
+        initializeContent(initialData);
+        setLoading(false);
+      }, 0);
+    });
+
+    socket?.on("updateNode", (updatedNodeData) => {
+      console.log("updatedNodeData", updatedNodeData);
+      overrideNodeData(updatedNodeData);
+    });
+
+    socket?.on("updateTitle", (updatedTitle) => {
+      updateTitle(updatedTitle.title);
+    });
+
+    socket?.on("updateContent", (updatedContent) => {
+      updateContent(updatedContent.content);
+    });
+
+    socket?.on("disconnect", () => {
+      setData({});
+      overrideHistory(JSON.stringify({}));
+      setLatestMindMap(mindMapId);
+    });
+
+    socket?.on("aiResponse", (response) => {
+      const initializedNodes = initializeNodePosition(response);
+      handleSocketEvent({
+        actionType: "updateNode",
+        payload: initializedNodes,
+        callback: (response) => {
+          overrideNodeData(response);
+        },
+      });
+    });
+
+    return () => {
+      socket?.offAny();
+    };
+  }, [socket]);
 
   function updateNode(id: number, updatedNode: Partial<Node>) {
     setData((prevData) => ({

client/src/store/createSocketSlice.ts

@@ -86,9 +86,9 @@ export const createSocketSlice: StateCreator<ConnectionStore, [], [], SocketSlic
       const socket = get().socket;
       if (socket) socket.disconnect();
       const response = await createMindmap();
-      const newMindMapId = response.data;
-      get().connectSocket(newMindMapId, get().token);
-      return newMindMapId;
+      const connectionId = response.data.connectionId;
+      get().connectSocket(connectionId, get().token);
+      return connectionId;
     } catch (error) {
       console.error(error);
     }