WICKEDWICKEDVPS 구현 지도
Convoy의 React·스타일·폼 피드백 소유권과 현재 값을 연결합니다.
WickedHost 공통 확정 기준: vPanel/Pterodactyl 디자인을 Blesta까지 동일 적용. 문서·예제 기준이며 운영 서비스 배포와는 별도입니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
확인 범위
로컬 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: 새 폼·행·대화상자의 문서에는 실제 컴포넌트 경로와 상태를 기록합니다.
연결할 업무
서버 목록 → 상세 → 전원/백업 → 사용량 → 청구 이동에서 위험 작업, 데이터, 청구 계약을 적용합니다. 실제 화면별 준수표는 후속 검증 대상입니다.
남은 확인
현재 운영 revision, 최종 CSS 계산값, 공통 폼의 aria-describedby, 모바일 탐색, 라이트/다크 대비, 고객 동작 후 실제 완료 상태.