Merge pull request #1009 from nxnaxx/fix/#981_commit-display

nxnaxx · web-flow · commit afc872c96cb5 · 2025-10-28T22:47:59.000+09:00
fix(view): Detail, Cluster Graph Tooltip 커밋 메시지 표시 오류 수정
diff --git a/packages/view/src/components/Detail/Detail.scss b/packages/view/src/components/Detail/Detail.scss
@@ -81,10 +81,11 @@
         margin-left: 0.125rem;
         min-width: 0;
         padding-top: 0.3rem;
-        padding-right: 3.125rem;
+        padding-right: 0.25rem;
 
         .commit-message {
           position: relative;
+          width: 100%;
 
           .commit-message__header {
             display: flex;
@@ -150,28 +151,26 @@
             }
           }
 
-          .commit-message__body {
-            max-height: 0;
-            overflow: hidden;
-            opacity: 0;
+          %commit-message__body-base {
             background: rgba(0, 0, 0, 0.02);
-            border: 1px solid var(--color-border);
-            border-radius: 0.375rem;
-            padding: 0;
+            color: var(--color-text-secondary);
             font-size: 0.8125rem;
             line-height: 1.5;
-            color: var(--color-text-secondary);
             transition: all 0.3s ease-in-out;
             white-space: pre-wrap;
             word-break: break-word;
-            margin-top: 0;
           }
 
-          &:hover .commit-message__body {
-            max-height: 200px;
+          .commit-message__body {
+            @extend %commit-message__body-base;
+            opacity: 0;
+            transform: translateY(-4px);
+          }
+
+          .commit-message__body--visible {
+            @extend %commit-message__body-base;
             opacity: 1;
-            padding: 0.75rem;
-            margin-top: 0.5rem;
+            transform: translateY(0);
           }
         }
       }
@@ -214,7 +213,11 @@
   }
 
   @keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
       transform: translateY(0);
     }
     40% {
diff --git a/packages/view/src/components/Detail/Detail.tsx b/packages/view/src/components/Detail/Detail.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import dayjs from "dayjs";
 import {
   AddCircleRounded,
@@ -14,7 +14,6 @@ import { List, AutoSizer, CellMeasurer } from "react-virtualized";
 
 import { useGithubInfo, useDataStore } from "store";
 import { Author } from "components/Common/Author";
-import type { IssueLinkedMessage } from "components/Common/GithubIssueLink";
 import { renderIssueLinkedNodes } from "components/Common/GithubIssueLink";
 
 import { getCommitListDetail } from "./Detail.util";
@@ -27,6 +26,10 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
   const selectedData = useDataStore((state) => state.selectedData);
   const { owner, repo } = useGithubInfo();
 
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+  const prevIndexRef = useRef<number | null>(null);
+  const listRef = useRef<List>(null);
+
   const commitNodeListInCluster = useMemo(
     () =>
       selectedData?.filter((selected) => selected.commitNodeList[0].clusterId === clusterId)[0].commitNodeList ?? [],
@@ -40,14 +43,35 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
   const { cache, virtualizedItems, showScrollIndicator, handleRowsRendered } =
     useVirtualizedList(commitNodeListInCluster);
 
+  useLayoutEffect(() => {
+    const [currentIndex, prevIndex] = [hoverIndex, prevIndexRef.current];
+    const refreshRowHeight = (index: number) => {
+      cache.clear(index, 0);
+      listRef.current?.recomputeRowHeights(index);
+    };
+
+    requestAnimationFrame(() => {
+      if (prevIndex != null) refreshRowHeight(prevIndex);
+      if (currentIndex != null) {
+        refreshRowHeight(currentIndex);
+        requestAnimationFrame(() => {
+          listRef.current?.scrollToRow?.(currentIndex);
+        });
+      }
+      prevIndexRef.current = currentIndex;
+    });
+  }, [hoverIndex, cache]);
+
   const renderCommitItem = useCallback(
-    (props: { index: number; key: string }) => {
-      const { index, key } = props;
+    (props: { index: number; key: string; expanded: boolean }) => {
+      const { index, key, expanded } = props;
       const item = virtualizedItems[index];
+      const showMessageBody = !(index === 1 && commitNodeListInCluster.length > 1);
 
       if (item.type === "summary") {
         return <DetailSummary commitNodeListInCluster={item.data} />;
       }
+
       return (
         <MemoizedCommitItem
           key={key}
@@ -56,7 +80,8 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
           repo={repo}
           authSrcMap={authSrcMap}
           handleCommitIdCopy={handleCommitIdCopy}
-          linkedMessage={issueLinkedMessage}
+          showMessageBody={showMessageBody}
+          expanded={expanded}
         />
       );
     },
@@ -72,25 +97,18 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
         columnIndex={0}
         rowIndex={index}
       >
-        <div style={style}>{renderCommitItem({ index, key })}</div>
+        <div
+          style={style}
+          onMouseEnter={() => setHoverIndex(index)}
+          onMouseLeave={() => setHoverIndex(null)}
+        >
+          {renderCommitItem({ index, key, expanded: hoverIndex === index })}
+        </div>
       </CellMeasurer>
     ),
-    [cache, renderCommitItem]
+    [cache, renderCommitItem, hoverIndex]
   );
 
-  const issueLinkedMessage: IssueLinkedMessage = useMemo(() => {
-    const message = commitNodeListInCluster?.[0]?.commit?.message;
-    if (!message) return { title: [], body: null };
-
-    const [title, ...rest] = message.split("\n");
-    const body = rest.filter((line) => line.trim()).join("\n");
-
-    return {
-      title: renderIssueLinkedNodes(title, owner, repo),
-      body: body ? renderIssueLinkedNodes(body, owner, repo) : null,
-    };
-  }, [commitNodeListInCluster, owner, repo]);
-
   if (!selectedData || selectedData.length === 0) return null;
 
   return (
@@ -99,6 +117,7 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
         {({ height, width }) => {
           return (
             <List
+              ref={listRef}
               height={height}
               width={width}
               rowCount={virtualizedItems.length}
@@ -107,6 +126,7 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
               onRowsRendered={handleRowsRendered}
               className="detail__virtualized-list"
               estimatedRowSize={120}
+              deferredMeasurementCache={cache}
             />
           );
         }}
@@ -123,8 +143,25 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
 
 export default Detail;
 
-function CommitItem({ commit, owner, repo, authSrcMap, handleCommitIdCopy, linkedMessage }: CommitItemProps) {
+function CommitItem({
+  commit,
+  owner,
+  repo,
+  authSrcMap,
+  handleCommitIdCopy,
+  showMessageBody,
+  expanded,
+}: CommitItemProps) {
   const { id, message, author, commitDate } = commit;
+
+  const { issueLinkedTitle, body } = useMemo(() => {
+    const [title, ...bodyLines] = message.split("\n");
+    return {
+      issueLinkedTitle: renderIssueLinkedNodes(title, owner, repo),
+      body: bodyLines.filter(Boolean).join("\n"),
+    };
+  }, [message, owner, repo]);
+
   return (
     <div className="detail__commit-item">
       <div className="commit-item__detail">
@@ -137,13 +174,7 @@ function CommitItem({ commit, owner, repo, authSrcMap, handleCommitIdCopy, linke
                   src={authSrcMap[author.names.toString()]}
                 />
               )}
-              <div className="commit-message__title">
-                {(() => {
-                  const messageLines = message.split("\n");
-                  const title = messageLines[0];
-                  return linkedMessage.title.length > 0 ? linkedMessage.title : title;
-                })()}
-              </div>
+              <div className="commit-message__title">{issueLinkedTitle}</div>
               <div className="commit-item__meta">
                 <span className="commit-item__author-name">{author.names[0]}</span>
                 <span className="commit-item__date">{dayjs(commitDate).format("YY. M. DD. a h:mm")}</span>
@@ -167,17 +198,9 @@ function CommitItem({ commit, owner, repo, authSrcMap, handleCommitIdCopy, linke
                 </div>
               </div>
             </div>
-            {(() => {
-              const messageLines = message.split("\n");
-              const body = messageLines
-                .slice(1)
-                .filter((line: string) => line.trim())
-                .join("\n");
-
-              return body ? (
-                <div className="commit-message__body">{linkedMessage.body ? linkedMessage.body : body}</div>
-              ) : null;
-            })()}
+            {showMessageBody && body && (
+              <div className={`commit-message__body${expanded ? "--visible" : ""}`}>{expanded ? body : null}</div>
+            )}
           </div>
         </div>
       </div>
diff --git a/packages/view/src/components/Detail/Detail.type.ts b/packages/view/src/components/Detail/Detail.type.ts
@@ -3,7 +3,6 @@ import type { ReactNode } from "react";
 import type { ClusterNode } from "types";
 import type { Commit } from "types/Commit";
 import type { AuthSrcMap } from "components/VerticalClusterList/Summary/Summary.type";
-import type { IssueLinkedMessage } from "components/Common/GithubIssueLink";
 
 export type DetailProps = {
   clusterId: number;
@@ -25,7 +24,8 @@ export interface CommitItemProps {
   repo: string;
   authSrcMap: AuthSrcMap | null;
   handleCommitIdCopy: (id: string) => () => Promise<void>;
-  linkedMessage: IssueLinkedMessage;
+  showMessageBody: boolean;
+  expanded: boolean;
 }
 
 export type VirtualizedItem =
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawSubGraph.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawSubGraph.ts
@@ -13,6 +13,7 @@ const tooltip = d3
   .append("div")
   .attr("class", "cluster-graph__tooltip")
   .style("visibility", "hidden")
+  .style("white-space", "pre-line")
   .text("Tooltip");
 
 const calculateCirclePositions = (numOfCircles: number, startY: number, endY: number, gap: number) => {
@@ -60,13 +61,12 @@ export const drawSubGraph = (
     .on("mouseover", (_, { clusterData, circleIndex }) => {
       const { commitNodeList } = clusterData.cluster;
       const { message } = commitNodeList[circleIndex].commit;
-      const messageLines = message.split("\n");
-      const title = messageLines[0];
-      const body = messageLines
-        .slice(1)
-        .filter((line) => line.trim())
-        .join("\n");
-      const tooltipText = body ? `${title}\n\n${body}` : title;
+
+      const [title, ...bodyLines] = message.split("\n");
+      const body = bodyLines.filter(Boolean).join("\n");
+      const showMessageBody = !(circleIndex === 0 && commitNodeList.length > 1) && !!body;
+      const tooltipText = showMessageBody ? `${title}\n${body}` : title;
+
       tooltip.text(tooltipText);
       return tooltip.style("visibility", "visible");
     })
diff --git a/packages/view/src/fake-assets/cluster-nodes.json b/packages/view/src/fake-assets/cluster-nodes.json
