사이드바 탭

사이드바 탭 API를 사용하면 확장 프로그램에서 ComfyUI 인터페이스의 사이드바에 맞춤형 탭을 추가할 수 있습니다. 이는 지속적인 가시성과 빠른 접근이 필요한 기능을 추가하는 데 유용합니다.

​

기본 사용법

app.extensionManager.registerSidebarTab({
  id: "customSidebar",
  icon: "pi pi-compass",
  title: "맞춤형 탭",
  tooltip: "내 맞춤형 사이드바 탭",
  type: "custom",
  render: (el) => {
    el.innerHTML = '<div>이것은 내 맞춤형 사이드바 콘텐츠입니다</div>';
  }
});

​

탭 구성

각 탭에는 여러 속성이 필요합니다:

{
  id: string,              // 탭의 고유 식별자
  icon: string,            // 탭 버튼의 아이콘 클래스
  title: string,           // 탭의 제목 텍스트
  tooltip?: string,        // 마우스 오버 시 도구 설명 텍스트 (선택사항)
  type: string,            // 탭 유형 (보통 "custom")
  render: (element) => void // 탭 콘텐츠를 채우는 함수
}

render 함수는 DOM 요소를 받아 탭의 콘텐츠를 삽입해야 합니다.

​

아이콘 옵션

사이드바 탭 아이콘은 다양한 아이콘 세트를 사용할 수 있습니다:

• PrimeVue 아이콘: pi pi-[아이콘 이름] (예: pi pi-home)
• Material Design 아이콘: mdi mdi-[아이콘 이름] (예: mdi mdi-robot)
• Font Awesome 아이콘: fa-[스타일] fa-[아이콘 이름] (예: fa-solid fa-star)

해당 아이콘 라이브러리를 사용하기 전에 반드시 로드되어야 합니다.

​

상태 유지 탭 예제

상태를 유지하는 탭을 만들 수 있습니다:

app.extensionManager.registerSidebarTab({
  id: "statefulTab",
  icon: "pi pi-list",
  title: "메모",
  type: "custom",
  render: (el) => {
    // 요소 생성
    const container = document.createElement('div');
    container.style.padding = '10px';
    
    const notepad = document.createElement('textarea');
    notepad.style.width = '100%';
    notepad.style.height = '200px';
    notepad.style.marginBottom = '10px';
    
    // 저장된 콘텐츠가 있으면 불러오기
    const savedContent = localStorage.getItem('comfyui-notes');
    if (savedContent) {
      notepad.value = savedContent;
    }
    
    // 자동 저장 기능
    notepad.addEventListener('input', () => {
      localStorage.setItem('comfyui-notes', notepad.value);
    });
    
    // UI 조립
    container.appendChild(notepad);
    el.appendChild(container);
  }
});

​

React 컴포넌트 사용하기

React 컴포넌트를 사이드바 탭에 마운트할 수 있습니다:

// 확장 프로그램에서 React 종속성을 가져오기
import React from "react";
import ReactDOM from "react-dom/client";

// React 콘텐츠로 사이드바 탭 등록
app.extensionManager.registerSidebarTab({
  id: "reactSidebar",
  icon: "mdi mdi-react",
  title: "React 탭",
  type: "custom",
  render: (el) => {
    const container = document.createElement("div");
    container.id = "react-sidebar-container";
    el.appendChild(container);
    
    // 간단한 React 컴포넌트 정의
    function SidebarContent() {
      const [count, setCount] = React.useState(0);
      
      return (
        <div style={{ padding: "10px" }}>
          <h3>React 사이드바</h3>
          <p>카운트: {count}</p>
          <button onClick={() => setCount(count + 1)}>
            증가
          </button>
        </div>
      );
    }
    
    // React 컴포넌트 마운트
    ReactDOM.createRoot(container).render(
      <React.StrictMode>
        <SidebarContent />
      </React.StrictMode>
    );
  }
});

실제 React 애플리케이션을 사이드바 탭으로 통합한 사례는 GitHub의 ComfyUI-Copilot 프로젝트를 확인하세요.

​

동적 콘텐츠 업데이트

그래프 변경에 따라 사이드바 콘텐츠를 업데이트할 수 있습니다:

app.extensionManager.registerSidebarTab({
  id: "dynamicSidebar",
  icon: "pi pi-chart-line",
  title: "통계",
  type: "custom",
  render: (el) => {
    const container = document.createElement('div');
    container.style.padding = '10px';
    el.appendChild(container);
    
    // 통계 업데이트 함수
    function updateStats() {
      const stats = {
        nodes: app.graph._nodes.length,
        connections: Object.keys(app.graph.links).length
      };
      
      container.innerHTML = `
        <h3>워크플로우 통계</h3>
        <ul>
          <li>노드: ${stats.nodes}</li>
          <li>연결: ${stats.connections}</li>
        </ul>
      `;
    }
    
    // 초기 업데이트
    updateStats();
    
    // 그래프 변경 감청
    const api = app.api;
    api.addEventListener("graphChanged", updateStats);
    
    // 탭이 파괴될 때 리스너 정리
    return () => {
      api.removeEventListener("graphChanged", updateStats);
    };
  }
});