[chore] : 차트 크기 변경

Author: oortmealy

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

@@ -1,16 +1,5 @@
 export const DIMENSIONS = {
   width: 800,
-  height: 400, // 기본 높이 (최소값)
-  laneHeight: 60, // 각 폴더 레인당 고정 높이
-  margin: { top: 40, right: 120, bottom: 60, left: 20 },
-};
-
-/**
- * 폴더 개수에 따라 차트 높이를 동적으로 계산
- * @param folderCount 폴더 개수
- * @returns 계산된 차트 높이
- */
-export const calculateChartHeight = (folderCount: number): number => {
-  const contentHeight = folderCount * DIMENSIONS.laneHeight;
-  return DIMENSIONS.margin.top + contentHeight + DIMENSIONS.margin.bottom;
+  height: 500, // 고정 높이
+  margin: { top: 20, right: 70, bottom: 20, left: 20 },
 };

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

@@ -55,38 +55,52 @@
   }
 
   &__breadcrumb {
-    margin: 0 0 1rem 0;
     padding-left: 50px;
     font-size: $font-size-body;
+    min-height: 24px; // 최소 높이 고정
+    display: flex;
+    align-items: center;
+
+    .MuiBreadcrumbs-ol {
+      flex-wrap: nowrap; // 줄바꿈 방지
+    }
 
     .MuiBreadcrumbs-separator {
       color: $color-white;
+      margin: 0 4px; // 고정 간격
     }
 
     .MuiTypography-root {
       color: $color-white;
       font-size: $font-size-body;
       font-weight: $font-weight-regular;
+      white-space: nowrap; // 텍스트 줄바꿈 방지
     }
 
     .MuiLink-root {
       color: $color-white;
       font-size: $font-size-body;
       font-weight: $font-weight-regular;
+      white-space: nowrap; // 텍스트 줄바꿈 방지
+      text-decoration: none;
 
       &:hover {
         color: $color-white;
+        text-decoration: underline;
       }
     }
 
     svg {
       color: $color-light-gray;
+      display: block; // 인라인 간격 제거
     }
   }
 
   &__chart {
     display: block;
-    margin: 0 auto;
+    width: 100%;
+    padding: 0 50px;
+    box-sizing: border-box;
     cursor: grab;
     background: $color-background;
     overflow: visible;

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

@@ -8,7 +8,7 @@ import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 
 import { useDataStore } from "store";
 
-import { DIMENSIONS, calculateChartHeight } from "./FolderActivityFlow.const";
+import { DIMENSIONS } from "./FolderActivityFlow.const";
 import "./FolderActivityFlow.scss";
 import { extractReleaseBasedContributorActivities } from "./FolderActivityFlow.util";
 import { renderReleaseVisualization } from "./ReleaseVisualization";
@@ -19,6 +19,7 @@ const FolderActivityFlow = () => {
 
   const svgRef = useRef<SVGSVGElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const {
     currentPath,
@@ -45,25 +46,28 @@ const FolderActivityFlow = () => {
       return;
     }
 
+    // 컨테이너 너비 계산 (패딩 50px * 2 = 100px 제외)
+    const containerWidth = containerRef.current?.clientWidth || DIMENSIONS.width;
+    const chartWidth = containerWidth - 100; // 좌우 패딩 50px씩 제외
+
+    // 차트 높이 고정
+    const chartHeight = DIMENSIONS.height;
+    const svg = d3.select(svgRef.current).attr("width", chartWidth).attr("height", chartHeight);
+
     // 실제로 activity가 있는 폴더만 카운트
     const currentDepth = currentPath === "" ? 1 : currentPath.split("/").length + 1;
     const releaseContributorActivities = extractReleaseBasedContributorActivities(
       totalData,
       releaseTopFolderPaths,
       currentDepth
     );
-    const activeFolderCount = new Set(releaseContributorActivities.map((a) => a.folderPath)).size;
-
-    // 폴더 개수에 따라 동적으로 높이 계산
-    const chartHeight = calculateChartHeight(activeFolderCount);
-    const svg = d3.select(svgRef.current).attr("width", DIMENSIONS.width).attr("height", chartHeight);
 
     svg.selectAll("*").remove();
 
     if (releaseContributorActivities.length === 0) {
       svg
         .append("text")
-        .attr("x", DIMENSIONS.width / 2)
+        .attr("x", chartWidth / 2)
         .attr("y", chartHeight / 2)
         .attr("text-anchor", "middle")
         .attr("dominant-baseline", "middle")
@@ -80,11 +84,12 @@ const FolderActivityFlow = () => {
       tooltipRef,
       onFolderClick: navigateToFolder,
       chartHeight,
+      chartWidth,
     });
   }, [totalData, releaseGroups, releaseTopFolderPaths, navigateToFolder, currentPath]);
 
   return (
-    <div className="folder-activity-flow">
+    <div className="folder-activity-flow" ref={containerRef}>
       <div className="folder-activity-flow__header">
         <div>
           <p className="folder-activity-flow__title">Contributors Folder Activity Flow</p>
@@ -111,7 +116,7 @@ const FolderActivityFlow = () => {
           return (
             <Link
               key={crumb}
-              underline="hover"
+              underline="none"
               component="button"
               onClick={() => navigateToBreadcrumb(index, breadcrumbs.length)}
               sx={{ cursor: "pointer" }}

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

@@ -26,6 +26,8 @@ interface ReleaseVisualizationProps {
   onFolderClick: (folderPath: string) => void;
   /** Chart height (calculated dynamically based on folder count) */
   chartHeight: number;
+  /** Chart width (calculated dynamically based on container width) */
+  chartWidth: number;
 }
 
 /**
@@ -44,6 +46,7 @@ export const renderReleaseVisualization = ({
   tooltipRef,
   onFolderClick,
   chartHeight,
+  chartWidth,
 }: ReleaseVisualizationProps) => {
   const tooltip = d3.select(tooltipRef.current);
 
@@ -64,7 +67,7 @@ export const renderReleaseVisualization = ({
   const xScale = d3
     .scaleBand()
     .domain(uniqueReleases.map(String))
-    .range([DIMENSIONS.margin.left, DIMENSIONS.width - DIMENSIONS.margin.right])
+    .range([DIMENSIONS.margin.left, chartWidth - DIMENSIONS.margin.right])
     .paddingInner(0.1);
 
   const yScale = d3
@@ -99,7 +102,7 @@ export const renderReleaseVisualization = ({
       const isFile = folderPath.includes(".");
       return isFile ? "folder-label" : "folder-label clickable";
     })
-    .attr("x", DIMENSIONS.width - DIMENSIONS.margin.right + 10)
+    .attr("x", chartWidth - DIMENSIONS.margin.right + 10)
     .attr("y", (folderPath: string) => (yScale(folderPath) || 0) + yScale.bandwidth() / 2)
     .attr("text-anchor", "start")
     .attr("dominant-baseline", "middle")