fix: 스페이스 표시 및 인터랙션 개선 (#194)

* fix: 노드 위에서 우클릭시 진입되던 현상 해결 * fix: 노드 타이틀이 길어진 경우 말줄임표 표시 * feat: 노드에 hover시 커서 스타일 변경 * fix: 짧은 간선 생성 방지
boostcampwm-2024 · Dec 2, 2024 · 8da666b · 8da666b
1 parent 05f4fb7
commit 8da666b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/packages/frontend/src/components/Node.tsx b/packages/frontend/src/components/Node.tsx
@@ -5,6 +5,8 @@ import { useNavigate } from "react-router-dom";
 import Konva from "konva";
 import { Vector2d } from "konva/lib/types";
 
+const RADIUS = 64;
+
 type NodeProps = {
   id: string;
   x: number;
@@ -103,12 +105,11 @@ export type HeadNodeProps = {
 } & NodeHandlers;
 
 export function HeadNode({ id, name, ...rest }: HeadNodeProps) {
-  const radius = 64;
   return (
     <Node id={id} x={0} y={0} draggable {...rest}>
-      <Node.Circle radius={radius} fill="#FFD000" />
+      <Node.Circle radius={RADIUS} fill="#FFD000" />
       <Node.Text
-        width={radius * 2}
+        width={RADIUS * 2}
         fontSize={16}
         fontStyle="700"
         content={name}
@@ -128,17 +129,20 @@ export type NoteNodeProps = {
 export function NoteNode({ id, x, y, name, src, ...rest }: NoteNodeProps) {
   // TODO: src 적용 필요
   const navigate = useNavigate();
-  const radius = 64;
   return (
     <Node
       id={id}
       x={x}
       y={y}
-      onClick={() => navigate(`/note/${src}`)}
+      onClick={(e) => {
+        if (e.evt.button === 0) {
+          navigate(`/note/${src}`);
+        }
+      }}
       {...rest}
     >
-      <Node.Circle radius={radius} fill="#FAF9F7" stroke="#DED8D3" />
-      <Node.Text fontSize={16} content={name} />
+      <Node.Circle radius={RADIUS} fill="#FAF9F7" stroke="#DED8D3" />
+      <Node.Text width={RADIUS * 2} fontSize={16} content={name} />
     </Node>
   );
 }
@@ -169,8 +173,8 @@ export function SubspaceNode({
       onClick={() => navigate(`/space/${src}`)}
       {...rest}
     >
-      <Node.Circle radius={64} fill="#FFF4BB" stroke="#F9D46B" />
-      <Node.Text fontSize={16} fontStyle="700" content={name} />
+      <Node.Circle radius={RADIUS} fill="#FFF4BB" stroke="#F9D46B" />
+      <Node.Text width={RADIUS * 2} fontSize={16} fontStyle="700" content={name} />
     </Node>
   );
 }
diff --git a/packages/frontend/src/components/space/SpaceView.tsx b/packages/frontend/src/components/space/SpaceView.tsx
@@ -147,7 +147,6 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
   }, [autofitTo]);
 
   const handleContextMenu = (e: KonvaEventObject<MouseEvent>) => {
-    // e.evt.preventDefault(); // 브라우저 컨텍스트메뉴 표시 방지
     clearSelection();
 
     const { target } = e;
@@ -180,6 +179,14 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
     selectNode({ id: nodeId, type: node.type });
   };
 
+  const handleHover = (e: KonvaEventObject<MouseEvent>) => {
+    const isEnter = e.type === "mouseenter";
+    const cursorStyle = isEnter ? "pointer" : "default";
+
+    const container = e.target.getStage()?.container();
+    if (container) container.style.cursor = cursorStyle;
+  };
+
   const nodeComponents = {
     head: (node: Node) => (
       <HeadNode
@@ -215,6 +222,8 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
         onTouchStart={(e) => move.callbacks.startHold(node, e)}
         onTouchEnd={move.callbacks.endHold}
         onContextMenu={handleContextMenu}
+        onMouseEnter={handleHover}
+        onMouseLeave={handleHover}
       />
     ),
     subspace: (node: Node) => (
@@ -240,6 +249,8 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
         onTouchStart={(e) => move.callbacks.startHold(node, e)}
         onTouchEnd={move.callbacks.endHold}
         onContextMenu={handleContextMenu}
+        onMouseEnter={handleHover}
+        onMouseLeave={handleHover}
       />
     ),
   };
@@ -264,7 +275,9 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) {
 
   const nearIndicatorRenderer = !moveState.isMoving &&
     drag.position &&
-    drag.overlapNode && (
+    drag.startNode &&
+    drag.overlapNode &&
+    drag.overlapNode.id !== drag.startNode.id && (
       <MemoizedNearIndicator overlapNode={drag.overlapNode} />
     );
 

diff --git a/packages/frontend/src/hooks/useDragNode.ts b/packages/frontend/src/hooks/useDragNode.ts
@@ -59,10 +59,7 @@ export default function useDragNode(nodes: Node[], spaceActions: spaceActions) {
     }
 
     animationFrameId.current = requestAnimationFrame(() => {
-      const filteredNodes = nodes.filter(
-        (node) => node.id !== dragState.startNode?.id,
-      );
-      const overlapNodes = findOverlapNodes(position, filteredNodes);
+      const overlapNodes = findOverlapNodes(position, nodes);
       const selectedNode =
         overlapNodes.length > 0
           ? findNearestNode(position, overlapNodes)