fix: palette메뉴 표시 후 빈 영역 클릭 시 비활성화되도록 수정

boostcampwm-2024 · Nov 28, 2024 · 95a9793 · 95a9793
1 parent f3665d9
commit 95a9793
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 57 deletions.
diff --git a/packages/frontend/src/components/space/SpaceView.tsx b/packages/frontend/src/components/space/SpaceView.tsx
@@ -54,63 +54,64 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
     spaceActions: { updateNode },
   });
 
-  const { drag, dropPosition, handlePaletteSelect } = useDragNode(nodesArray, {
-    createNode: (type, parentNode, position, name = "New Note") => {
-      if (type === "note") {
-        createNote({
-          userId: "honeyflow",
-          noteName: name,
-        }).then((res) => {
-          defineNode(
-            {
-              type,
-              x: position.x,
-              y: position.y,
-              name,
-              src: res.urlPath.toString(),
-            },
-            parentNode.id,
-          );
-        });
-        return;
-      }
-
-      if (type === "subspace") {
-        createSpace({
-          spaceName: name,
-          userId: "honeyflow",
-          parentContextNodeId: spaceId,
-        }).then((res) => {
-          const [urlPath] = res.urlPath;
-          defineNode(
-            {
-              type,
-              x: position.x,
-              y: position.y,
-              name,
-              src: urlPath,
-            },
-            parentNode.id,
-          );
-        });
-        return;
-      }
-
-      defineNode(
-        {
-          type,
-          x: position.x,
-          y: position.y,
-          name,
-          src: "",
-        },
-        parentNode.id,
-      );
-    },
-    createEdge: (fromNode, toNode) => {
-      defineEdge(fromNode.id, toNode.id);
-    },
-  });
+  const { drag, dropPosition, setDropPosition, handlePaletteSelect } =
+    useDragNode(nodesArray, {
+      createNode: (type, parentNode, position, name = "New Note") => {
+        if (type === "note") {
+          createNote({
+            userId: "honeyflow",
+            noteName: name,
+          }).then((res) => {
+            defineNode(
+              {
+                type,
+                x: position.x,
+                y: position.y,
+                name,
+                src: res.urlPath.toString(),
+              },
+              parentNode.id,
+            );
+          });
+          return;
+        }
+
+        if (type === "subspace") {
+          createSpace({
+            spaceName: name,
+            userId: "honeyflow",
+            parentContextNodeId: spaceId,
+          }).then((res) => {
+            const [urlPath] = res.urlPath;
+            defineNode(
+              {
+                type,
+                x: position.x,
+                y: position.y,
+                name,
+                src: urlPath,
+              },
+              parentNode.id,
+            );
+          });
+          return;
+        }
+
+        defineNode(
+          {
+            type,
+            x: position.x,
+            y: position.y,
+            name,
+            src: "",
+          },
+          parentNode.id,
+        );
+      },
+      createEdge: (fromNode, toNode) => {
+        defineEdge(fromNode.id, toNode.id);
+      },
+    });
 
   const { selectedNode, selectNode, selectedEdge, selectEdge, clearSelection } =
     useSpaceSelection();
@@ -326,6 +327,14 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
         onWheel={zoomSpace}
         onContextMenu={handleContextMenu}
         draggable
+        onClick={(e) => {
+          const stage = e.target.getStage();
+          if (stage && stage.isDragging()) return;
+
+          if (e.target === stage) {
+            setDropPosition(null);
+          }
+        }}
       >
         <Layer>
           {moveState.isMoving

diff --git a/packages/frontend/src/hooks/useDragNode.ts b/packages/frontend/src/hooks/useDragNode.ts
@@ -145,6 +145,7 @@ export default function useDragNode(nodes: Node[], spaceActions: spaceActions) {
       },
     },
     dropPosition,
+    setDropPosition,
     handlePaletteSelect,
   };
 }