# 프롬프트: 직접 만든 UI를 vs* / vf* 컴포넌트로 바꾸기

**사용법.** 아래 줄 밑의 내용을 모두 AI에 붙여 넣고, HTML(퍼블리싱 마크업이나 vfunc 컴포넌트의 `render`)과 그 CSS를 함께 줍니다. AI에게 `llms.ko.txt`와 `ai/ko/components.md`(layer2 컴포넌트 목록)도 줍니다.

---

vfunc.js 앱에서 직접 만든 UI 조각을 layer2 컴포넌트(`vf.vs*`, `vf.vf*`)로 바꿉니다. 목표는 새 디자인이 아니라 관리할 코드를 줄이고 키보드·스크린리더 지원을 높이는 것입니다. 컴포넌트가 더 잘하는 곳만 바꾸고 나머지는 HTML로 둡니다.

## 입력
- `HTML`: 마크업, 또는 그것을 그리는 vfunc 컴포넌트
- `CSS`: 페이지 스타일. 퍼블리싱 모양을 그대로 지켜야 하는지 적습니다.
- `LOCALES`(선택): 앱의 언어

## 규칙
- **`components.md`에 있는 이름·props·메서드만 씁니다.** 컴포넌트에 없는 기능이 필요하면 그 조각은 HTML로 두고 그렇다고 적습니다.
- **`vs*`인가 `vf*`인가:** 상태 없는 마크업은 `vs*`(`render`나 `vf.html`에 넣음), 스스로 상태나 동작을 가지면(열고 닫기, 선택, 입력, 페이징) `vf*`. 한 조각에 둘을 함께 쓰지 않습니다.
- **컴포넌트가 가져오는 것이 있을 때만 바꿉니다:** 키보드와 ARIA(탭, 메뉴, 대화상자, 캐러셀), 연결된 필드 문구(label, hint, error), 상태(페이징, 선택), 여러 번 반복되는 같은 마크업. 배치용 `<div>`·`<section>`은 HTML로 둡니다.
- **훅을 지킵니다:** 앱 코드가 쓰는 `id`, `data-ref`, `data-action`은 모두 `id`, `ref`, `action` props로 남깁니다. 위임은 `data-action`에 두고 `vf-*` 클래스로 찾지 않습니다.
- **문구:** 보이는 문구는 props(이스케이프됨)나 `vf.html`로 넘깁니다. HTML을 일반 문자열로 넘기지 않습니다. 앱 메시지가 있으면 props에 `vf.t(...)`를 씁니다. 내장 문구(닫기, 취소, 페이지 이동)는 컴포넌트의 메시지 키에서 옵니다.
- **디자인:** 컴포넌트는 `--vf-*` 토큰으로 `vfunc-ui.css`가 꾸밉니다. 퍼블리싱 모양을 지켜야 하면 `.vf-*` 규칙을 덮어쓰지 말고 색·글꼴·반경·간격을 토큰(DESIGN.md)에 옮깁니다. 픽셀 단위로 같아야 하면 그 조각은 HTML로 두고 `vf.attach`(layer1)로 동작만 붙입니다.
- **오버레이:** 직접 만든 모달, 확인 창, 토스트, 드롭다운, 팝오버는 `vfModal`, `vfConfirm`(`await confirm.open()`), `vfToast`(앱에 영역 하나), `vfDropdown`, `vfPopover`로 바꿉니다. 예전 마크업과 보이기/숨기기 코드, 포커스 코드는 지웁니다.
- **표와 차트:** 정적 표나 앱이 정렬하는 표는 `vsTable`(+ `vfPagination`, `vfSearchInput`), 정렬·페이징·선택을 내장한 표는 `vfGrid`(데이터 파일). 차트는 `vfChart`. 앱이 이미 벤더 차트를 쓰고 있을 때만 그 어댑터로 유지합니다.
- **보안:** `vf.unsafeHtml`, 인라인 `style`·`<script>`(CSP)를 쓰지 않습니다. URL은 컴포넌트를 거칩니다(`href`, `src`는 `vf.safeUrl`을 통과).

## 절차
1. 입력의 UI 조각을 나열합니다: 요소, 하는 일, 코드가 쓰는 훅.
2. 조각마다 컴포넌트(이름과 이유) 또는 HTML(이유)을 고릅니다. 이것을 먼저 표로 보입니다.
3. 마크업을 다시 씁니다: `render` 안의 `vs*` 호출, `vf*`는 한 번 만들어 `childs`에 넣거나 컨테이너에 mount.
4. 동작을 옮깁니다: 콜백(`onChange`, `onSelect` …)은 `e.data`를 읽고, 컴포넌트가 맡은 이벤트 코드는 지웁니다.
5. 컴포넌트가 대신하는 CSS를 지웁니다. 페이지 배치 CSS는 남기고 값은 토큰으로 바꿉니다.
6. 파일을 불러옵니다: `vfunc-ui.js`(+ `vfGrid` / `vsChart` / `vfChart`는 `vfunc-ui-data.js`, 한국어는 `vfunc-ui.locale.ko.js`), CSS는 `vfunc.tokens.css` 다음에 `vfunc-ui.css`.
7. 확인합니다: 키보드만으로 동작, 콘솔 오류 없음, 앱이 쓰는 `id` / `data-ref` / `data-action`이 모두 남아 있음.

## 출력 형식
1. 대응표: 조각 → 컴포넌트 또는 HTML, 이유
2. 다시 쓴 파일 전체
3. 지운 코드와 CSS(짧은 목록)
4. HTML로 남긴 것, 옮기지 못한 것, 사용자가 손으로 확인할 것

## 체크리스트
- [ ] `components.md`에 있는 이름과 props만 사용
- [ ] 마크업은 `vs*`, 상태 있는 조각은 `vf*`, 한 조각에 둘을 함께 쓰지 않음
- [ ] 훅(`id`, `data-ref`, `data-action`) 유지, `vf-*` 클래스 셀렉터 없음
- [ ] 문구는 props나 `vf.html`, 내장 문구는 메시지 키에 맡김
- [ ] 예전 오버레이·포커스·보이기/숨기기 코드 제거
- [ ] 컴포넌트가 대신하는 CSS 제거, 원시 값 추가 없음
- [ ] `vfunc-ui` 파일을 순서대로 로드, 데이터 파일은 필요할 때만
- [ ] 키보드만으로 동작, 콘솔 오류 없음