From 21bee842ae29852282f91a265054d43798c191e7 Mon Sep 17 00:00:00 2001
From: CHAE <dbscogus4467@naver.com>
Date: Wed, 13 Dec 2023 18:13:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=85=B8=EB=93=9C=20hover=EC=8B=9C?=
 =?UTF-8?q?=EC=97=90=20=ED=88=B4=ED=8C=81=20=EC=82=AD=EC=A0=9C=EB=90=98?=
 =?UTF-8?q?=EA=B2=8C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#254]
---
 packages/frontend/src/components/graph/Graph.tsx      | 11 +++++++++++
 .../frontend/src/components/graph/renderTooltip.ts    |  7 +++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/graph/Graph.tsx b/packages/frontend/src/components/graph/Graph.tsx
index 49e2ad97..a07661fd 100644
--- a/packages/frontend/src/components/graph/Graph.tsx
+++ b/packages/frontend/src/components/graph/Graph.tsx
@@ -106,6 +106,17 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
       "fill",
       (d: d3.HierarchyPointNode<InitialDataProps>) => d.data?.color ?? "",
     );
+
+  svg.select("#node").on("mouseout", (event) => {
+    const nodeNotHovered = !(
+      event.relatedTarget.nodeName === "rect" ||
+      event.relatedTarget.nodeName === "tspan"
+    );
+
+    if (nodeNotHovered) {
+      svg.select("#tooltip").remove();
+    }
+  });
 }
 
 interface GraphProps {
diff --git a/packages/frontend/src/components/graph/renderTooltip.ts b/packages/frontend/src/components/graph/renderTooltip.ts
index 75eece69..461979fa 100644
--- a/packages/frontend/src/components/graph/renderTooltip.ts
+++ b/packages/frontend/src/components/graph/renderTooltip.ts
@@ -21,7 +21,7 @@ export default function renderTooltip(
     position: `translate(${d.x - 110},${d.y - 60})`,
   };
 
-  const transparentRectPosition = "translate(85, 40)";
+  const transparentRectPosition = "translate(95, 40)";
 
   const tooltipDataFormat = [
     {
@@ -61,7 +61,7 @@ export default function renderTooltip(
     // 요기나
     .attr("fill", "transparent")
     // 요기 바꿔보심 돼여
-    // .attr("stroke", color.$scale.grey300)
+    .attr("stroke", color.$scale.grey300)
     .attr("transform", transparentRectPosition);
 
   tooltip
@@ -91,6 +91,9 @@ export default function renderTooltip(
       if (!currentValueNode.empty() && currentValueNode.node()) {
         const tspanMaxWidth = 110;
         const originalText = currentValueNode.text();
+        if (currentValueNode.node()!.getComputedTextLength() < tspanMaxWidth) {
+          return;
+        }
 
         let start = 0;
         let end = tspanMaxWidth;