Merge pull request #921 from nxnaxx/refactor/#900_extract-issue-link-component

refactor(view): processMessage 함수 내 GIthubIssueLink 컴포넌트 분리

Author: nxnaxx

packages/view/src/components/@common/GithubIssueLink/GithubIssueLink.scss

@@ -0,0 +1,21 @@
+@import "styles/app";
+
+.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/@common/GithubIssueLink/GithubIssueLink.tsx

@@ -0,0 +1,23 @@
+import cn from "classnames";
+
+import type { GithubIssueLinkProps } from "./GithubIssueLink.type";
+import "./GithubIssueLink.scss";
+
+const GithubIssueLink = ({ owner, repo, issueNumber, className, ...rest }: GithubIssueLinkProps) => {
+  const issueLink = `https://github.com/${owner}/${repo}/issues/${issueNumber}`;
+
+  return (
+    <a
+      href={issueLink}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn("commit-message__issue-link", className)}
+      title={`GitHub Issue #${issueNumber}`}
+      {...rest}
+    >
+      #{issueNumber}
+    </a>
+  );
+};
+
+export default GithubIssueLink;

packages/view/src/components/@common/GithubIssueLink/GithubIssueLink.type.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+export interface GithubIssueLinkProps
+  extends Omit<ComponentPropsWithoutRef<"a">, "href" | "target" | "rel" | "children"> {
+  owner: string;
+  repo: string;
+  issueNumber: string;
+}

packages/view/src/components/@common/GithubIssueLink/index.ts

@@ -0,0 +1 @@
+export { default as GithubIssueLink } from "./GithubIssueLink";

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

@@ -76,7 +76,7 @@
         gap: 0.625rem;
         width: 100%;
         flex: 1;
-        margin-left: 0.125rem; // 아주 미세한 여백
+        margin-left: 0.125rem;
         min-width: 0;
         padding-top: 0.3rem;
         padding-right: 3.125rem;
@@ -90,7 +90,6 @@
             gap: 0.75rem;
             margin-bottom: 0.5rem;
 
-            // 아바타를 맨 앞에 배치
             .author {
               width: 1.5rem;
               height: 1.5rem;
@@ -176,7 +175,7 @@
       }
 
       .commit-item__right {
-        display: none; // 오른쪽 레이아웃 숨김
+        display: none;
       }
     }
   }
@@ -194,23 +193,3 @@
     color: $color-light-gray;
   }
 }
-
-        .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

@@ -11,8 +11,9 @@ import {
 } from "@mui/icons-material";
 import { Tooltip } from "@mui/material";
 
-import { Author } from "components/@common/Author";
 import { useGithubInfo, useDataStore } from "store";
+import { Author } from "components/@common/Author";
+import { GithubIssueLink } from "components/@common/GithubIssueLink";
 
 import { useCommitListHide } from "./Detail.hook";
 import { getCommitListDetail } from "./Detail.util";
@@ -57,21 +58,15 @@ const Detail = ({ clusterId, authSrcMap }: DetailProps) => {
           parts.push(message.slice(lastIndex, match.index));
         }
 
-        // 이슈 번호를 링크로 변환
-        const issueNumber = match[1].substring(1); // # 제거
-        const issueLink = `https://github.com/${owner}/${repo}/issues/${issueNumber}`;
+        const issueNumber = match[1].substring(1);
 
         parts.push(
-          <a
+          <GithubIssueLink
             key={`issue-${issueNumber}-${match.index}`}
-            href={issueLink}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="commit-message__issue-link"
-            title={`GitHub Issue #${issueNumber}`}
-          >
-            {match[1]}
-          </a>
+            owner={owner}
+            repo={repo}
+            issueNumber={issueNumber}
+          />
         );
 
         lastIndex = match.index + match[0].length;

packages/view/src/components/VerticalClusterList/Summary/Content/Content.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import ArrowDropDownCircleRoundedIcon from "@mui/icons-material/ArrowDropDownCircleRounded";
 
 import { useGithubInfo } from "store";
+import { GithubIssueLink } from "components/@common/GithubIssueLink";
 
 import type { ContentProps } from "../Summary.type";
 
@@ -32,21 +33,15 @@ const Content = ({ content, clusterId, selectedClusterIds }: ContentProps) => {
           parts.push(message.slice(lastIndex, match.index));
         }
 
-        // 이슈 번호를 링크로 변환
-        const issueNumber = match[1].substring(1); // # 제거
-        const issueLink = `https://github.com/${owner}/${repo}/issues/${issueNumber}`;
+        const issueNumber = match[1].substring(1);
 
         parts.push(
-          <a
+          <GithubIssueLink
             key={`issue-${issueNumber}-${match.index}`}
-            href={issueLink}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="summary__commit-issue-link"
-            title={`GitHub Issue #${issueNumber}`}
-          >
-            {match[1]}
-          </a>
+            owner={owner}
+            repo={repo}
+            issueNumber={issueNumber}
+          />
         );
 
         lastIndex = match.index + match[0].length;

packages/view/src/components/VerticalClusterList/Summary/Summary.scss

@@ -143,23 +143,3 @@
   max-height: fit-content;
   padding: 0.625rem 1.075rem;
 }
-
-        .summary__commit-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);
-          }
-        }