fix(view): 커밋 메시지의 PR or Issue number 하이퍼링크 버그

packages/view/src/App.tsx

@@ -16,6 +16,7 @@ import type IDEPort from "ide/IDEPort";
 import { useGlobalData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
+import type { RemoteGitHubInfo } from "types/RemoteGitHubInfo";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
@@ -39,6 +40,18 @@ const App = () => {
     }
   }, [handleChangeAnalyzedData, handleChangeBranchList, ideAdapter, setLoading]);
 
+  const { setOwner, setRepo } = useGlobalData();
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent<RemoteGitHubInfo>) => {
+      const message = event.data;
+      setOwner(message.data.owner);
+      setRepo(message.data.repo);
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+
   if (loading) {
     return (
       <BounceLoader

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

@@ -1,33 +1,41 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { IoIosArrowDropdownCircle, IoIosArrowDropupCircle } from "react-icons/io";
 
+import { useGlobalData } from "hooks";
+
 import type { ContentProps } from "../Summary.type";
 
 const Content = ({ content, clusterId, selectedClusterId }: ContentProps) => {
-  const str: string = content.message;
-  const regex = /^(\(#[0-9]+\)|#[0-9]+)/g;
-  const tobeStr: string[] = str.split(" ");
+  const { owner, repo } = useGlobalData();
+  const [linkedStr, setLinkedStr] = useState<React.ReactNode[]>([]);
+
+  useEffect(() => {
+    const str: string = content.message;
+    const regex = /^(\(#[0-9]+\)|#[0-9]+)/g;
+    const tobeStr: string[] = str.split(" ");
 
-  const linkedStr = tobeStr.reduce((acc: React.ReactNode[], tokenStr: string) => {
-    const matches = tokenStr.match(regex); // #num 으로 결과가 나옴 ()가 결과에 포함되지 않음
-    if (matches) {
-      const matchedStr = matches[0];
-      const matchedStrNum: string = matchedStr.substring(1);
-      const linkIssues = `https://github.com/githru/githru-vscode-ext/issues/${matchedStrNum}`;
-      acc.push(
-        <a
-          href={linkIssues}
-          key={`issues-${matchedStr}`}
-        >
-          {matchedStr}
-        </a>
-      );
-      acc.push(" ");
-    } else {
-      acc.push(tokenStr);
-      acc.push(" ");
-    }
-    return acc;
+    const newLinkedStr = tobeStr.reduce((acc: React.ReactNode[], tokenStr: string) => {
+      const matches = tokenStr.match(regex); // #num 으로 결과가 나옴 ()가 결과에 포함되지 않음
+      if (matches) {
+        const matchedStr = matches[0];
+        const matchedStrNum: string = matchedStr.substring(1);
+        const linkIssues = `https://github.com/${owner}/${repo}/issues/${matchedStrNum}`;
+        acc.push(
+          <a
+            href={linkIssues}
+            key={`issues-${matchedStr}`}
+          >
+            {matchedStr}
+          </a>
+        );
+        acc.push(" ");
+      } else {
+        acc.push(tokenStr);
+        acc.push(" ");
+      }
+      return acc;
+    }, []);
+    setLinkedStr(newLinkedStr);
   }, []);
 
   return (

packages/view/src/context/GlobalDataProvider.tsx

@@ -14,6 +14,8 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
 
   const [branchList, setBranchList] = useState<string[]>([]);
   const [selectedBranch, setSelectedBranch] = useState<string>(branchList?.[0]);
+  const [owner, setOwner] = useState<string>("");
+  const [repo, setRepo] = useState<string>("");
 
   const handleChangeBranchList = (branches: { branchList: string[]; head: string | null }) => {
     setSelectedBranch((prev) => (!prev && branches.head ? branches.head : prev));
@@ -44,8 +46,12 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
       setSelectedBranch,
       handleChangeAnalyzedData,
       handleChangeBranchList,
+      owner,
+      setOwner,
+      repo,
+      setRepo,
     }),
-    [data, filteredRange, filteredData, selectedData, branchList, selectedBranch, loading]
+    [data, filteredRange, filteredData, selectedData, branchList, selectedBranch, loading, owner, repo]
   );
 
   return <GlobalDataContext.Provider value={value}>{children}</GlobalDataContext.Provider>;

packages/view/src/hooks/useGlobalData.ts

@@ -24,6 +24,10 @@ type GlobalDataState = {
   setBranchList: Dispatch<SetStateAction<string[]>>;
   selectedBranch: string;
   setSelectedBranch: Dispatch<SetStateAction<string>>;
+  owner: string;
+  setOwner: Dispatch<SetStateAction<string>>;
+  repo: string;
+  setRepo: Dispatch<SetStateAction<string>>;
 } & IDESentEvents;
 
 export const GlobalDataContext = createContext<GlobalDataState | undefined>(undefined);

packages/view/src/types/RemoteGitHubInfo.ts

@@ -0,0 +1,6 @@
+export interface RemoteGitHubInfo {
+  data: {
+    owner: string;
+    repo: string;
+  };
+}

packages/vscode/src/extension.ts

@@ -4,7 +4,7 @@ import * as vscode from "vscode";
 import { COMMAND_LAUNCH, COMMAND_LOGIN_WITH_GITHUB, COMMAND_RESET_GITHUB_AUTH } from "./commands";
 import { Credentials } from "./credentials";
 import { GithubTokenUndefinedError, WorkspacePathUndefinedError } from "./errors/ExtensionError";
-import { deleteGithubToken, getGithubToken, setGithubToken,  } from "./setting-repository";
+import { deleteGithubToken, getGithubToken, setGithubToken } from "./setting-repository";
 import { mapClusterNodesFrom } from "./utils/csm.mapper";
 import {
   findGit,
@@ -18,7 +18,7 @@ import {
 import WebviewLoader from "./webview-loader";
 
 let myStatusBarItem: vscode.StatusBarItem;
-const projectName = 'githru';
+const projectName = "githru";
 
 function normalizeFsPath(fsPath: string) {
   return fsPath.replace(/\\/g, "/");
@@ -58,12 +58,11 @@ export async function activate(context: vscode.ExtensionContext) {
 
       const fetchBranches = async () => await getBranches(gitPath, currentWorkspacePath);
       const fetchCurrentBranch = async () => {
-
         let branchName;
         try {
-            branchName = await getCurrentBranchName(gitPath, currentWorkspacePath)
+          branchName = await getCurrentBranchName(gitPath, currentWorkspacePath);
         } catch (error) {
-            console.error(error);
+          console.error(error);
         }
 
         if (!branchName) {
@@ -77,7 +76,9 @@ export async function activate(context: vscode.ExtensionContext) {
       const fetchClusterNodes = async (baseBranchName = initialBaseBranchName) => {
         const gitLog = await getGitLog(gitPath, currentWorkspacePath);
         const gitConfig = await getGitConfig(gitPath, currentWorkspacePath, "origin");
-        const { owner, repo } = getRepo(gitConfig);
+        const { owner, repo: initialRepo } = getRepo(gitConfig);
+        webLoader.setGlobalOwnerAndRepo(owner, initialRepo);
+        const repo = initialRepo[0];
         const engine = new AnalysisEngine({
           isDebugMode: true,
           gitLog,

packages/vscode/src/utils/git.util.ts

@@ -111,7 +111,7 @@
     if (await isExecutable(file)) {
       try {
         return await getGitExecutable(file);
       } catch (_) {}
     }
   }
   return Promise.reject<GitExecutable>();
@@ -147,7 +147,7 @@
   for (let i = 0; i < paths.length; i++) {
     try {
       return await getGitExecutable(paths[i]);
     } catch (_) {}
   }
   throw new Error("None of the provided paths are a Git executable");
 }
@@ -208,7 +208,7 @@
 
 export const getRepo = (gitRemoteConfig: string) => {
   const gitRemoteConfigPattern =
-    /(?:https?|git)(?::\/\/(?:\w+@)?|@)(?:github\.com)(?:\/|:)(?:(?<owner>.+?)\/(?<repo>.+?))(?:\.git|\/)?(\S*)$/m;
+    /(?:https?|git)(?::\/\/(?:\w+@)?|@)(?:github\.com)(?:\/|:)(?:(?<owner>[^/]+?)\/(?<repo>[^/.]+))(?:\.git|\/)?(\S*)$/m;
   const gitRemote = gitRemoteConfig.match(gitRemoteConfigPattern)?.groups;
   if (!gitRemote) {
     throw new Error("git remote config should be: [https?://|git@]${domain}/${owner}/${repo}.git");

packages/vscode/src/webview-loader.ts

@@ -111,6 +111,14 @@ export default class WebviewLoader implements vscode.Disposable {
         `;
     return returnString;
   }
+  public setGlobalOwnerAndRepo(owner: string, repo: string) {
+    if (this._panel) {
+      this._panel.webview.postMessage({
+        command: "setGlobalOwnerAndRepo",
+        data: { owner, repo },
+      });
+    }
+  }
 }
 
 type GithruFetcher<D = unknown, P extends unknown[] = []> = (...params: P) => Promise<D>;