Merge pull request #242 from boostcampwm-2024/feature-socket-fix

[Feature-socket-fix] 소켓이 잘못된 핸들러를 없애 이벤트 수신 및 반영이 안 되던 문제 해결

Author: Minju9187

client/src/store/NodeListProvider.tsx

@@ -56,50 +56,52 @@ export default function NodeListProvider({ children }: { children: ReactNode })
   const handleSocketEvent = useConnectionStore((state) => state.handleSocketEvent);
 
   useEffect(() => {
-    socket?.on("joinRoom", (initialData) => {
-      updateLoadingStatus({ type: "socketLoading", status: true });
-      setTimeout(() => {
-        setData({ ...initialData.nodeData });
-        overrideHistory(JSON.stringify(initialData.nodeData));
-        initializeTitle(initialData);
-        initializeContent(initialData);
-        initializeAiCount(initialData);
-        updateLoadingStatus({ type: "socketLoading", status: 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({}));
-    });
-
-    socket?.on("aiPending", (response) => {
-      updateLoadingStatus({ type: "aiPending", status: response.status });
-    });
+    if (!socket) return;
+
+    const eventHandlers = {
+      joinRoom: (initialData) => {
+        updateLoadingStatus({ type: "socketLoading", status: true });
+        setTimeout(() => {
+          setData({ ...initialData.nodeData });
+          overrideHistory(JSON.stringify(initialData.nodeData));
+          initializeTitle(initialData);
+          initializeContent(initialData);
+          initializeAiCount(initialData);
+          updateLoadingStatus({ type: "socketLoading", status: false });
+        }, 0);
+      },
+      disconnect: () => {
+        setData({});
+        overrideHistory(JSON.stringify({}));
+      },
+      aiPending: (response) => {
+        updateLoadingStatus({ type: "aiPending", status: response.status });
+      },
+      aiResponse: (response) => {
+        decreaseAiCount();
+        const initializedNodes = initializeNodePosition(response);
+        handleSocketEvent({
+          actionType: "updateNode",
+          payload: initializedNodes,
+          callback: (response) => {
+            overrideNodeData(response);
+            overrideHistory(JSON.stringify(response));
+          },
+        });
+      },
+      updateNode: (updatedNodeData) => {
+        setData(updatedNodeData);
+      },
+      updateTitle: (updatedTitle) => {
+        updateTitle(updatedTitle.title);
+      },
+      updateContent: (updatedContent) => {
+        updateContent(updatedContent.content);
+      },
+    };
 
-    socket?.on("aiResponse", (response) => {
-      decreaseAiCount();
-      const initializedNodes = initializeNodePosition(response);
-      handleSocketEvent({
-        actionType: "updateNode",
-        payload: initializedNodes,
-        callback: (response) => {
-          overrideNodeData(response);
-          overrideHistory(JSON.stringify(response));
-        },
-      });
+    Object.entries(eventHandlers).forEach(([event, handler]) => {
+      socket.on(event, handler);
     });
 
     return () => {

client/src/store/createSocketSlice.ts

@@ -87,14 +87,13 @@ export const createSocketSlice: StateCreator<ConnectionStore, [], [], SocketSlic
   handleSocketEvent: ({ actionType, payload, callback }: HandleSocketEventProps) => {
     const socket = get().socket;
     if (!socket) return;
-
-    socket.off(actionType);
-    socket.emit(actionType, payload);
-
-    socket.on(actionType, (response) => {
+    const handler = (response) => {
       if (response && callback) callback(response);
       set({ currentJobStatus: "success" });
-    });
+      socket.off(actionType, handler);
+    };
+    socket.on(actionType, handler);
+    socket.emit(actionType, payload);
   },
 
   handleConnection: async () => {