> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# 프런트엔드 확장 프로그램을 위한 PrimeVue 제거 마이그레이션

> ComfyUI 프런트엔드가 PrimeVue를 제거한 이후 $primevue, PrimeVue 컴포넌트, --p-* CSS 변수 및 PrimeVue 툴팁 선택자를 교체합니다.

ComfyUI 프런트엔드는 더 이상 PrimeVue를 설치하지 않습니다. 호스트 앱은
`app.use(PrimeVue)`를 호출하지 않으므로, 확장 프로그램은 의존했을 수 있는 세 가지를 잃게 됩니다:

* 호스트 Vue 앱의 `$primevue` 전역 속성
* PrimeVue 테마 스타일시트. 따라서 확장 프로그램이
  호스트 앱 내에서 렌더링하는 PrimeVue 컴포넌트는 스타일 없이 렌더링됩니다.
* `--p-primary-color`, `--p-surface-*`, `--p-text-color`, `--p-content-background`,
  `--p-form-field-border-color` 등 모든 전역 `--p-*` CSS 변수

## PrimeVue 컴포넌트를 렌더링하는 확장 프로그램

호스트 앱의 PrimeVue 인스턴스에 의존하지 마세요. PrimeVue 컴포넌트를 자체 마크업으로 교체하거나, UI용으로 자체 Vue 앱을 생성한 뒤 해당 앱에 PrimeVue와 테마를 설치하세요.

## `--p-*` 변수를 읽는 확장 프로그램

이 변수들을 디자인 시스템 테마 변수로 교체하세요. 디자인 시스템 테마 변수는 활성 라이트 또는 다크 테마와 활성 색상 팔레트를 따릅니다:

| PrimeVue 변수 | 테마 변수 |
| - | - |
| `--p-primary-color` | `--primary` |
| `--p-text-color` | `--foreground` |
| `--p-text-muted-color` | `--muted-foreground` |
| `--p-content-background` | `--background` |
| `--p-surface-*` (패널, 올라온 영역) | `--secondary` |
| `--p-content-border-color`, `--p-form-field-border-color` | `--border` |

## 툴팁

전역 `v-tooltip` 디렉티브가 제거되었으며, 툴팁은 더 이상 PrimeVue DOM을 렌더링하지 않습니다:

* `.p-tooltip` 및 `.p-tooltip-text`
* `data-pd-tooltip` 속성
* `$_ptooltip*` 요소 속성

이제 열린 툴팁은 `data-slot="tooltip-content"`가 있는 단일 요소를 렌더링하며,
이 요소는 `document.body` 끝으로 포털됩니다. 이 요소는 툴팁이 열려 있는 동안에만 존재합니다.
자체 UI를 표시하는 동안 툴팁을 숨기는 확장 프로그램은 `.p-tooltip` 대신
`[data-slot="tooltip-content"]`를 대상으로 해야 합니다.

`--node-component-tooltip*` CSS 변수도 디자인 시스템 스타일시트에서 제거되었습니다.
대신 테마 변수를 사용하세요:
`--background`, `--foreground` 및 `--border`. 이전 이름인 `--base-background`, `--base-foreground` 및
`--border-default`는 지원 중단되었습니다. [지원 중단된 변수 이름](#지원-중단된-변수-이름)을 참조하세요.

## 지원 중단된 변수 이름

이 문서의 이전 버전에서는 오래된 디자인 시스템 이름을 사용했습니다. 해당 이름들은 여전히 동작하지만 지원 중단되었으며 향후 릴리스에서 제거될 예정입니다. 지금 테마 변수로 옮기세요:

| 지원 중단된 이름 | 테마 변수 |
| - | - |
| `--base-background` | `--background` |
| `--base-foreground` | `--foreground` |
| `--border-default` | `--border` |
| `--primary-background` | `--primary` |
| `--secondary-background` | `--secondary` |
| `--component-node-background` | `--node` |

PrimeIcons는 여전히 로드되므로 기존 `pi pi-*` 아이콘 클래스는 계속 동작하지만, 점차 사용이 중단되고 있습니다. 새로운 사용처를 추가하지 마세요.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.