feat/#635 사이드바 기본 기능 구현

githru · Sep 18, 2024 · 8bb2969 · 8bb2969
1 parent 011bbf8
commit 8bb2969
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 1 deletion.
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -28,7 +28,8 @@
     "visual analytics"
   ],
   "activationEvents": [
-    "*"
+    "*",
+    "onView:mySidebar"
   ],
   "main": "./dist/extension.js",
   "contributes": {
@@ -68,6 +69,24 @@
           "description": "Insert your primary color."
         }
       }
+    },
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "mySidebarView",
+          "title": "My Sidebar",
+          "icon": "path/to/icon.svg"
+        }
+      ]
+    },
+    "views": {
+      "mySidebarView": [
+        {
+          "type": "webview",
+          "id": "mySidebar",
+          "name": "My Sidebar"
+        }
+      ]
     }
   },
   "scripts": {

diff --git a/packages/vscode/src/extension.ts b/packages/vscode/src/extension.ts
@@ -5,6 +5,7 @@ import { COMMAND_LAUNCH, COMMAND_LOGIN_WITH_GITHUB, COMMAND_RESET_GITHUB_AUTH }
 import { Credentials } from "./credentials";
 import { GithubTokenUndefinedError, WorkspacePathUndefinedError } from "./errors/ExtensionError";
 import { deleteGithubToken, getGithubToken, setGithubToken } from "./setting-repository";
+import { SidebarProvider } from "./sidebar";
 import { mapClusterNodesFrom } from "./utils/csm.mapper";
 import {
   findGit,
@@ -25,6 +26,10 @@ function normalizeFsPath(fsPath: string) {
 }
 
 export async function activate(context: vscode.ExtensionContext) {
+  const provider = new SidebarProvider(context.extensionUri);
+
+  context.subscriptions.push(vscode.window.registerWebviewViewProvider("mySidebar", provider));
+
   const { subscriptions, extensionPath, secrets } = context;
   const credentials = new Credentials();
   let currentPanel: vscode.WebviewPanel | undefined = undefined;

diff --git a/packages/vscode/src/sidebar.ts b/packages/vscode/src/sidebar.ts
@@ -0,0 +1,59 @@
+import type * as vscode from "vscode";
+
+export class SidebarProvider implements vscode.WebviewViewProvider {
+  constructor(private readonly _extensionUri: vscode.Uri) {}
+
+  resolveWebviewView(webviewView: vscode.WebviewView) {
+    webviewView.webview.options = {
+      enableScripts: true,
+    };
+
+    webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
+
+    webviewView.webview.onDidReceiveMessage(async (data) => {
+      const result = await this.callApi(data.apiNumber);
+      webviewView.webview.postMessage({ type: "apiResult", result });
+    });
+  }
+
+  private async callApi(apiNumber: number): Promise<string> {
+    // 여기에 실제 API 호출 로직을 구현합니다.
+    return `API ${apiNumber} 호출 결과`;
+  }
+
+  private _getHtmlForWebview(webview: vscode.Webview) {
+    return `
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <title>API Caller</title>
+            </head>
+            <body>
+                <button onclick="callApi(1)">API 1</button>
+                <button onclick="callApi(2)">API 2</button>
+                <button onclick="callApi(3)">API 3</button>
+                <div id="result"></div>
+
+                <script>
+                    const vscode = acquireVsCodeApi();
+
+                    function callApi(apiNumber) {
+                        vscode.postMessage({ type: 'apiCall', apiNumber });
+                    }
+
+                    window.addEventListener('message', event => {
+                        const message = event.data;
+                        switch (message.type) {
+                            case 'apiResult':
+                                document.getElementById('result').innerText = message.result;
+                                break;
+                        }
+                    });
+                </script>
+            </body>
+            </html>
+        `;
+  }
+}