pickle-console

Pickle(피클) 은 부산대학교 구성원을 위한 셀프서비스 클라우드 플랫폼입니다. 학교 이메일로 가입한 사용자가 VM을 신청하면 관리자가 승인하고, 플랫폼이 Proxmox VE 위에 자동으로 프로비저닝합니다. 만들어진 VM에는 SSH·브라우저 웹 터미널로 접속하고, 도메인 기반 HTTP(S) 게시로 외부에 서비스를 공개할 수 있습니다.

이 저장소는 Pickle의 프론트엔드입니다. 공개 랜딩 페이지와 사용자 / 조직 관리자 / 시스템 관리자 콘솔을 하나의 SPA로 제공합니다. React 19 + Vite + TypeScript.

주요 화면:

• 랜딩: 다크 히어로 랜딩과 서비스 소개
• 사용자 콘솔: 대시보드, VM 신청(희망 slug 지정)·목록·상세(전원 제어, 프로비저닝 진행 패널, 이벤트 이력, 표시 이름·보호 설정, HTTP 게시, 비밀번호 열람/재발급), 웹 터미널(xterm.js, 브라우저에서 바로 VM 셸 접속), SSH 공개키 등록, 알림함(벨 팝오버), 내 활동 조회
• 관리자 콘솔: 신청 승인(슬러그 프리필), 기관/그룹/사용자 관리, VM 관리 (만료 큐·기간 연장·강제 삭제), 감사 로그, 공지 발송·발송 이력, 설정 편집기, 드리프트 리포트, 터미널 세션 관리, 대시보드
• 계정/정책 플로우: 이메일 인증, TOTP 2단계 인증(설정·복구 코드), 약관 동의·재동의, 유지보수 모드 안내 화면

개발

scripts/setup-hooks.sh   # 최초 1회: git hook 설치
npm install
npm run dev              # 로컬 개발 서버 (/api는 pickle-api로 프록시)
scripts/verify.sh        # lint + typecheck + test + build

API 타입은 pickle-api의 OpenAPI 계약에서 npm run gen:api로 생성한 src/api/schema.d.ts를 사용합니다. 계약이 두 저장소 사이의 단일 진실 원천이며, 테스트는 MSW로 계약 형태 그대로의 핸들러를 구성해 화면 동작과 계약 정합성을 함께 검증합니다.

Pickle 저장소 구성

저장소	역할
pickle-api	백엔드 REST API, 프로비저닝 파이프라인, 접속 인가
pickle-console	웹 콘솔 (사용자·관리자 SPA)
pickle-sshgw	SSH 게이트웨이 + 웹 터미널 브리지
pickle-proxy-agent	HTTP(S) 게시용 리버스 프록시 제어 에이전트
pickle-infra	인프라 프로비저닝 스크립트·런북