---
{"id":"product-vps","title":"WICKEDVPS 구현 지도","category":"제품별 구현","order":90,"summary":"Convoy의 React·스타일·폼 피드백 소유권과 현재 값을 연결합니다.","status":"소스 기록 · 운영 미검증","references":[]}
---

# WICKEDVPS 구현 지도

## 확인 범위

로컬 convoy 저장소의 선택된 6개 파일을 확인했습니다. 작업 트리에 기존 수정이 있으며 이를 변경하지 않았습니다. 운영 배포본과 해시 비교·인증 화면 검증은 수행하지 않았습니다.

## 구조와 데이터 흐름

Laravel/서버 정책 → React 화면·기존 API client → Mantine/Emotion/twin/Tailwind 요소 → wicked.css 어댑터 순으로 책임이 나뉩니다. package.json은 React 18.2 범위와 해당 라이브러리를 선언합니다. 실제 설치 버전을 단정하지 않습니다.

- resources/scripts/assets/css/wicked.css: --wicked-* 팔레트·기하·전역 UI 글꼴.
- tailwind.config.js: 의미 색상 연결, class 기반 dark, UI 폰트 스택.
- resources/scripts/components/elements/Button.tsx: 제품 버튼 props·변형.
- resources/scripts/components/elements/WickedFormNotice.tsx: 오류/성공/경고/정보의 지속 피드백.
- docs/form-validation-design-system.md: 요청·모델·브라우저 검증 계약.
- package.json: 프런트 기술과 기존 build/tc 명령.

## 적용 원칙

VPS-01 MUST: 기존 React 컴포넌트를 문서 뷰어의 shadcn 컴포넌트로 대체하지 않습니다.

VPS-02 MUST: wicked.css 값과 오래된 Tailwind 기본값이 다르면 실제 cascade를 확인합니다.

VPS-03 MUST: 실패 toast만 남기지 말고 WickedFormNotice와 필드 오류 연결을 유지합니다.

VPS-04 SHOULD: 새 폼·행·대화상자의 문서에는 실제 컴포넌트 경로와 상태를 기록합니다.

## 연결할 업무

서버 목록 → 상세 → 전원/백업 → 사용량 → 청구 이동에서 [위험 작업](destructive-actions.md), [데이터](telemetry.md), [청구](billing.md) 계약을 적용합니다. 실제 화면별 준수표는 후속 검증 대상입니다.

## 남은 확인

현재 운영 revision, 최종 CSS 계산값, 공통 폼의 aria-describedby, 모바일 탐색, 라이트/다크 대비, 고객 동작 후 실제 완료 상태.