Merge pull request #985 from githru/refactor-chart-responsive/960

[refactor] (view): Storyline Chart 컴포넌트 반응형 구현

Author: oortmealy

packages/view/src/components/FolderActivityFlow/FolderActivityFlow.const.ts

@@ -1,5 +1,17 @@
+const DEFAULT_WIDTH = 800;
+export const LABEL_COLUMN_WIDTH = 140;
+
 export const DIMENSIONS = {
-  width: 800,
+  width: DEFAULT_WIDTH,
   height: 500, // 고정 높이
-  margin: { top: 20, right: 70, bottom: 20, left: 20 },
+  margin: { top: 20, right: LABEL_COLUMN_WIDTH, bottom: 20, left: 30 },
+};
+
+export const LABEL_COLUMN_PADDING = 12;
+
+export const getResponsiveChartWidth = (containerWidth?: number): number => {
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : DEFAULT_WIDTH;
+  const baseWidth = containerWidth ?? viewportWidth;
+
+  return Math.max(baseWidth, 0);
 };

packages/view/src/components/FolderActivityFlow/FolderActivityFlow.scss

@@ -20,10 +20,9 @@
 
 
   padding: 1rem;
-  margin-bottom: 2rem;
   background: $color-background;
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
 
   &__head {
     margin-top: 40px;
@@ -105,8 +104,6 @@
   &__chart {
     display: block;
     width: 100%;
-    padding: 0 50px;
-    box-sizing: border-box;
     cursor: grab;
     background: $color-background;
     overflow: visible;
@@ -150,12 +147,12 @@
       }
 
       .insertions {
-        color: #1fc3b5;
+        color: var(--color-success);
         display: inline;
       }
 
       .deletions {
-        color: #e84b6b;
+        color: var(--color-failed);
         display: inline;
       }
 
@@ -177,7 +174,7 @@
     transition: fill 0.2s ease;
 
     &:hover {
-      fill: #757880;
+      fill: $color-medium-gray;
     }
   }
 

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

@@ -1,5 +1,5 @@
 import * as d3 from "d3";
-import { useEffect, useRef, useMemo } from "react";
+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";
@@ -9,7 +9,7 @@ import WorkspacePremiumRoundedIcon from "@mui/icons-material/WorkspacePremiumRou
 
 import { useDataStore } from "store";
 
-import { DIMENSIONS } from "./FolderActivityFlow.const";
+import { DIMENSIONS, getResponsiveChartWidth } from "./FolderActivityFlow.const";
 import "./FolderActivityFlow.scss";
 import { extractReleaseBasedContributorActivities } from "./FolderActivityFlow.util";
 import { renderReleaseVisualization } from "./ReleaseVisualization";
@@ -21,6 +21,7 @@ const FolderActivityFlow = () => {
   const svgRef = useRef<SVGSVGElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const [chartWidth, setChartWidth] = useState(0);
 
   const {
     currentPath,
@@ -38,6 +39,32 @@ const FolderActivityFlow = () => {
 
   const breadcrumbs = useMemo(() => getBreadcrumbs(), [getBreadcrumbs]);
 
+  useEffect(() => {
+    const updateWidth = () => {
+      const containerWidth = containerRef.current?.clientWidth;
+      setChartWidth(getResponsiveChartWidth(containerWidth));
+    };
+
+    updateWidth();
+
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => updateWidth());
+      const containerElement = containerRef.current;
+      if (containerElement) {
+        observer.observe(containerElement);
+      }
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+
+    window.addEventListener("resize", updateWidth);
+    return () => {
+      window.removeEventListener("resize", updateWidth);
+    };
+  }, []);
+
   const { topContributorName, releaseRangeLabel } = useMemo(() => {
     if (!totalData || totalData.length === 0 || releaseTopFolderPaths.length === 0) {
       return {
@@ -109,9 +136,13 @@ const FolderActivityFlow = () => {
       return;
     }
 
+    if (!svgRef.current || chartWidth <= 0) {
+      return;
+    }
+
     const svg = d3
       .select(svgRef.current)
-      .attr("width", (containerRef.current?.clientWidth || DIMENSIONS.width) - 100)
+      .attr("width", chartWidth)
       .attr("height", DIMENSIONS.height);
 
     //activity가 있는 폴더 카운트
@@ -125,7 +156,6 @@ const FolderActivityFlow = () => {
     svg.selectAll("*").remove();
 
     if (releaseContributorActivities.length === 0) {
-      const chartWidth = (containerRef.current?.clientWidth || DIMENSIONS.width) - 100;
       svg
         .append("text")
         .attr("x", chartWidth / 2)
@@ -145,7 +175,7 @@ const FolderActivityFlow = () => {
       tooltipRef,
       onFolderClick: navigateToFolder,
     });
-  }, [totalData, releaseGroups, releaseTopFolderPaths, navigateToFolder, currentPath]);
+  }, [totalData, releaseGroups, releaseTopFolderPaths, navigateToFolder, currentPath, chartWidth]);
 
   const topContributorLabel = topContributorName || "...";
 

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

@@ -1,7 +1,7 @@
 import * as d3 from "d3";
 import type React from "react";
 
-import { DIMENSIONS } from "./FolderActivityFlow.const";
+import { DIMENSIONS, LABEL_COLUMN_PADDING } from "./FolderActivityFlow.const";
 import type { ReleaseContributorActivity } from "./FolderActivityFlow.type";
 import {
   calculateReleaseNodePosition,
@@ -15,7 +15,7 @@ import {
  */
 interface ReleaseVisualizationProps {
   /** D3 SVG selection to render into */
-  svg: d3.Selection<SVGSVGElement | null, unknown, null, undefined>;
+  svg: d3.Selection<SVGSVGElement, unknown, null, undefined>;
   /** Contributor activities grouped by release */
   releaseContributorActivities: ReleaseContributorActivity[];
   /** Top folder paths to display as lanes */
@@ -64,7 +64,8 @@ export const renderReleaseVisualization = ({
     .scaleBand()
     .domain(uniqueReleases.map(String))
     .range([DIMENSIONS.margin.left, chartWidth - DIMENSIONS.margin.right])
-    .paddingInner(0.1);
+    .paddingInner(0.1)
+    .paddingOuter(0.05);
 
   const yScale = d3
     .scaleBand()
@@ -98,7 +99,7 @@ export const renderReleaseVisualization = ({
       const isFile = folderPath.includes(".");
       return isFile ? "folder-label" : "folder-label clickable";
     })
-    .attr("x", chartWidth - DIMENSIONS.margin.right + 10)
+    .attr("x", chartWidth - DIMENSIONS.margin.right + LABEL_COLUMN_PADDING)
     .attr("y", (folderPath: string) => (yScale(folderPath) || 0) + yScale.bandwidth() / 2)
     .attr("text-anchor", "start")
     .attr("dominant-baseline", "middle")