Merge pull request #930 from chysis/refactor/861-detail-render-performance

refactor: Detail 렌더링 최적화

Author: chysis

packages/view/src/components/Detail/Detail.hook.tsx

@@ -1,7 +1,10 @@
-import { useState } from "react";
+import { useState, useCallback, useMemo } from "react";
+import { CellMeasurerCache } from "react-virtualized";
+import type { RenderedRows } from "react-virtualized/dist/es/List";
 
 import type { CommitNode } from "types";
 
+import type { VirtualizedItem } from "./Detail.type";
 import { getSummaryCommitList } from "./Detail.util";
 
 type UseToggleHook = [boolean, () => void];
@@ -23,3 +26,50 @@ export const useCommitListHide = (commitNodeListInCluster: CommitNode[]) => {
     commitNodeList,
   };
 };
+
+export const useVirtualizedList = (commitNodeListInCluster: CommitNode[]) => {
+  const [showScrollIndicator, setShowScrollIndicator] = useState(false);
+
+  const cache = useMemo(
+    () =>
+      new CellMeasurerCache({
+        fixedWidth: true,
+        defaultHeight: 120,
+      }),
+    []
+  );
+
+  const virtualizedItems = useMemo((): VirtualizedItem[] => {
+    const items: VirtualizedItem[] = [];
+
+    items.push({
+      type: "summary",
+      data: commitNodeListInCluster,
+    });
+
+    commitNodeListInCluster.forEach(({ commit }) => {
+      items.push({
+        type: "commit",
+        data: commit,
+      });
+    });
+
+    return items;
+  }, [commitNodeListInCluster]);
+
+  // scrollable indicator handler
+  const handleRowsRendered = useCallback(
+    ({ stopIndex }: RenderedRows) => {
+      const lastIndex = virtualizedItems.length - 1;
+      setShowScrollIndicator(stopIndex < lastIndex);
+    },
+    [virtualizedItems.length]
+  );
+
+  return {
+    cache,
+    virtualizedItems,
+    showScrollIndicator,
+    handleRowsRendered,
+  };
+};

packages/view/src/components/Detail/Detail.scss

@@ -5,6 +5,7 @@
   justify-content: space-between;
   align-items: center;
   font-size: $font-size-caption;
+  padding-bottom: 1rem;
 
   .detail__summary-divider {
     margin-right: 1rem;
@@ -45,13 +46,14 @@
   }
 }
 
-.detail__commit-list {
+.detail__container {
+  position: relative;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 1.25rem;
-  font-size: $font-size-body;
+  height: 100%;
+  min-height: 200px;
+}
 
+.detail__container {
   .detail__commit-item {
     width: 100%;
     display: flex;
@@ -181,15 +183,65 @@
   }
 }
 
-.detail__toggle-button {
+.detail__scroll-indicator {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
   display: flex;
-  margin: 0 auto;
-  border: none;
-  background: none;
-  color: var(--color-tertiary);
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  color: var(--color-text-tertiary);
   cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 
   &:hover {
-    color: $color-light-gray;
+    background: rgba(0, 0, 0, 0.2);
+    color: var(--color-text-secondary);
+    transform: translateX(-50%) translateY(-2px);
+  }
+
+  svg {
+    font-size: 1rem;
+    animation: bounce 2s infinite;
+  }
+
+  @keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-3px);
+    }
+    60% {
+      transform: translateY(-2px);
+    }
+  }
+}
+
+.commit-message__issue-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.125rem;
+  background-color: rgba(224, 96, 145, 0.1);
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: rgba(224, 96, 145, 0.2);
+    text-decoration: underline;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
   }
 }

packages/view/src/components/Detail/Detail.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import dayjs from "dayjs";
 import {
   AddCircleRounded,
@@ -7,18 +7,18 @@ import {
   CommitRounded,
   RestorePageRounded,
   ExpandMoreRounded,
-  ExpandLessRounded,
 } from "@mui/icons-material";
 import { Tooltip } from "@mui/material";
+import type { ListRowProps } from "react-virtualized";
+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 { useCommitListHide } from "./Detail.hook";
 import { getCommitListDetail } from "./Detail.util";
-import { FIRST_SHOW_NUM } from "./Detail.const";
+import { useVirtualizedList } from "./Detail.hook";
 import type { DetailProps, DetailSummaryProps, DetailSummaryItem, CommitItemProps } from "./Detail.type";
 
 import "./Detail.scss";
@@ -32,14 +32,52 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
       selectedData?.filter((selected) => selected.commitNodeList[0].clusterId === clusterId)[0].commitNodeList ?? [],
     [selectedData, clusterId]
   );
-  const { commitNodeList, toggle, handleToggle } = useCommitListHide(commitNodeListInCluster);
-
-  const isShow = commitNodeListInCluster.length > FIRST_SHOW_NUM;
 
   const handleCommitIdCopy = (id: string) => async () => {
     navigator.clipboard.writeText(id);
   };
 
+  const { cache, virtualizedItems, showScrollIndicator, handleRowsRendered } =
+    useVirtualizedList(commitNodeListInCluster);
+
+  const renderCommitItem = useCallback(
+    (props: { index: number; key: string }) => {
+      const { index, key } = props;
+      const item = virtualizedItems[index];
+
+      if (item.type === "summary") {
+        return <DetailSummary commitNodeListInCluster={item.data} />;
+      }
+      return (
+        <MemoizedCommitItem
+          key={key}
+          commit={item.data}
+          owner={owner}
+          repo={repo}
+          authSrcMap={authSrcMap}
+          handleCommitIdCopy={handleCommitIdCopy}
+          linkedMessage={issueLinkedMessage}
+        />
+      );
+    },
+    [virtualizedItems]
+  );
+
+  const rowRenderer = useCallback(
+    ({ index, key, parent, style }: ListRowProps) => (
+      <CellMeasurer
+        key={key}
+        cache={cache}
+        parent={parent}
+        columnIndex={0}
+        rowIndex={index}
+      >
+        <div style={style}>{renderCommitItem({ index, key })}</div>
+      </CellMeasurer>
+    ),
+    [cache, renderCommitItem]
+  );
+
   const issueLinkedMessage: IssueLinkedMessage = useMemo(() => {
     const message = commitNodeListInCluster?.[0]?.commit?.message;
     if (!message) return { title: [], body: null };
@@ -56,32 +94,30 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
   if (!selectedData || selectedData.length === 0) return null;
 
   return (
-    <>
-      <DetailSummary commitNodeListInCluster={commitNodeListInCluster} />
-      <ul className="detail__commit-list">
-        {commitNodeList.map(({ commit }) => (
-          <CommitItem
-            key={commit.id}
-            commit={commit}
-            owner={owner}
-            repo={repo}
-            authSrcMap={authSrcMap}
-            handleCommitIdCopy={handleCommitIdCopy}
-            linkedMessage={issueLinkedMessage}
-          />
-        ))}
-      </ul>
-
-      {isShow && (
-        <button
-          type="button"
-          className="detail__toggle-button"
-          onClick={handleToggle}
-        >
-          {toggle ? <ExpandLessRounded /> : <ExpandMoreRounded />}
-        </button>
+    <div className="detail__container">
+      <AutoSizer>
+        {({ height, width }) => {
+          return (
+            <List
+              height={height}
+              width={width}
+              rowCount={virtualizedItems.length}
+              rowHeight={cache.rowHeight}
+              rowRenderer={rowRenderer}
+              onRowsRendered={handleRowsRendered}
+              className="detail__virtualized-list"
+              estimatedRowSize={120}
+            />
+          );
+        }}
+      </AutoSizer>
+
+      {showScrollIndicator && (
+        <div className="detail__scroll-indicator">
+          <ExpandMoreRounded />
+        </div>
       )}
-    </>
+    </div>
   );
 };
 
@@ -90,10 +126,7 @@ export default Detail;
 function CommitItem({ commit, owner, repo, authSrcMap, handleCommitIdCopy, linkedMessage }: CommitItemProps) {
   const { id, message, author, commitDate } = commit;
   return (
-    <li
-      key={id}
-      className="detail__commit-item"
-    >
+    <div className="detail__commit-item">
       <div className="commit-item__detail">
         <div className="commit-item__message-container">
           <div className="commit-message">
@@ -148,10 +181,12 @@ function CommitItem({ commit, owner, repo, authSrcMap, handleCommitIdCopy, linke
           </div>
         </div>
       </div>
-    </li>
+    </div>
   );
 }
 
+const MemoizedCommitItem = React.memo(CommitItem);
+
 function DetailSummary({ commitNodeListInCluster }: DetailSummaryProps) {
   const { authorLength, fileLength, commitLength, insertions, deletions } = getCommitListDetail({
     commitNodeListInCluster,

packages/view/src/components/Detail/Detail.type.ts

@@ -27,3 +27,13 @@ export interface CommitItemProps {
   handleCommitIdCopy: (id: string) => () => Promise<void>;
   linkedMessage: IssueLinkedMessage;
 }
+
+export type VirtualizedItem =
+  | {
+      type: "summary";
+      data: ClusterNode["commitNodeList"];
+    }
+  | {
+      type: "commit";
+      data: Commit;
+    };