From 8da666be0ccf31b10e281676822aaeb4f5e295ab Mon Sep 17 00:00:00 2001
From: Byeongju Park <badmuxi@gmail.com>
Date: Mon, 2 Dec 2024 17:35:25 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EB=B0=8F=20=EC=9D=B8=ED=84=B0=EB=9E=99?=
 =?UTF-8?q?=EC=85=98=20=EA=B0=9C=EC=84=A0=20(#194)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 노드 위에서 우클릭시 진입되던 현상 해결

* fix: 노드 타이틀이 길어진 경우 말줄임표 표시

* feat: 노드에 hover시 커서 스타일 변경

* fix: 짧은 간선 생성 방지
---
 packages/frontend/src/components/Node.tsx     | 22 +++++++++++--------
 .../src/components/space/SpaceView.tsx        | 17 ++++++++++++--
 packages/frontend/src/hooks/useDragNode.ts    |  5 +----
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/Node.tsx b/packages/frontend/src/components/Node.tsx
index 6606b62c..dc60972c 100644
--- 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
index 201cd918..7b550e93 100644
--- 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
index 5ab6714a..2f7c1293 100644
--- 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)