fix(view): 스토리라인 차트 툴팁이 간헐적으로 나타나는 현상 해결 (#1005)

* fix: lint 에러 해결

* fix: 타이머 로직 정리 및 툴팁 상태 관리 추가

* refactor: 불필요한 상태 관리 제거

Author: hyemimi

packages/view/src/components/FolderActivityFlow/FolderActivityFlow.tsx

@@ -2,10 +2,10 @@ import * as d3 from "d3";
 import { useEffect, useRef, useMemo, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
-import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import WorkspacePremiumRoundedIcon from "@mui/icons-material/WorkspacePremiumRounded";
+import { Link } from "@mui/material";
 
 import { useDataStore } from "store";
 
@@ -140,12 +140,9 @@ const FolderActivityFlow = () => {
       return;
     }
 
-    const svg = d3
-      .select(svgRef.current)
-      .attr("width", chartWidth)
-      .attr("height", DIMENSIONS.height);
+    const svg = d3.select(svgRef.current).attr("width", chartWidth).attr("height", DIMENSIONS.height);
 
-    //activity가 있는 폴더 카운트
+    // activity가 있는 폴더 카운트
     const currentDepth = currentPath === "" ? 1 : currentPath.split("/").length + 1;
     const releaseContributorActivities = extractReleaseBasedContributorActivities(
       totalData,
@@ -200,9 +197,13 @@ const FolderActivityFlow = () => {
             return (
               <Link
                 key={crumb}
+                href={`#breadcrumb-${crumb}`}
                 underline="none"
-                component="button"
-                onClick={() => navigateToBreadcrumb(index, breadcrumbs.length)}
+                aria-label={`Navigate to ${crumb}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  navigateToBreadcrumb(index, breadcrumbs.length);
+                }}
               >
                 {crumb}
               </Link>

packages/view/src/components/FolderActivityFlow/ReleaseVisualization.tsx

@@ -44,6 +44,9 @@ export const renderReleaseVisualization = ({
 }: ReleaseVisualizationProps) => {
   const tooltip = d3.select(tooltipRef.current);
 
+  let tooltipShowTimer: ReturnType<typeof setTimeout> | null = null;
+  let tooltipHideTimer: ReturnType<typeof setTimeout> | null = null;
+
   // 스케일 설정
   const uniqueContributors = Array.from(new Set(releaseContributorActivities.map((a) => a.contributorName)));
   const uniqueReleases = Array.from(new Set(releaseContributorActivities.map((a) => a.releaseIndex))).sort(
@@ -184,6 +187,15 @@ export const renderReleaseVisualization = ({
   // 툴팁 이벤트
   dots
     .on("mouseover", function (event: MouseEvent, d: ReleaseContributorActivity) {
+      if (tooltipHideTimer) {
+        clearTimeout(tooltipHideTimer);
+        tooltipHideTimer = null;
+      }
+      if (tooltipShowTimer) {
+        clearTimeout(tooltipShowTimer);
+        tooltipShowTimer = null;
+      }
+
       const currentRadius = sizeScale(d.changes);
       const hoveredRadius = currentRadius * 1.2;
 
@@ -196,7 +208,9 @@ export const renderReleaseVisualization = ({
       const cy = parseFloat(nodeElement.getAttribute("cy") || "0");
 
       // SVG 좌표를 화면 좌표로 변환
-      const svgPoint = nodeElement.ownerSVGElement!.createSVGPoint();
+      const ownerSvgElement = nodeElement.ownerSVGElement;
+      if (!ownerSvgElement) return;
+      const svgPoint = ownerSvgElement.createSVGPoint();
       svgPoint.x = cx;
       svgPoint.y = cy;
       const ctm = nodeElement.getScreenCTM();
@@ -224,20 +238,31 @@ export const renderReleaseVisualization = ({
         `);
 
       // 페이드 인 애니메이션
-      setTimeout(() => {
+      tooltipShowTimer = setTimeout(() => {
         tooltip.style("opacity", "1");
+        tooltipShowTimer = null;
       }, 10);
     })
     .on("mouseout", function (_event: MouseEvent, d: ReleaseContributorActivity) {
+      if (tooltipShowTimer) {
+        clearTimeout(tooltipShowTimer);
+        tooltipShowTimer = null;
+      }
+      if (tooltipHideTimer) {
+        clearTimeout(tooltipHideTimer);
+        tooltipHideTimer = null;
+      }
+
       const currentRadius = sizeScale(d.changes);
 
       // 노드 크기 원래대로
       d3.select(this).attr("r", currentRadius).attr("stroke-width", 0);
 
       // 페이드 아웃 애니메이션
       tooltip.style("opacity", "0");
-      setTimeout(() => {
+      tooltipHideTimer = setTimeout(() => {
         tooltip.style("display", "none");
+        tooltipHideTimer = null;
       }, 200);
     });