level.crowny.org 게임형 프론트엔드
개요
AI 역량 진단 플랫폼 level.crowny.org의 SPA 게임형 프론트엔드.
의존성 0 (바닐라 JS), 티옴타 디자인 표준 적용.
산출물
/Users/ef/crowny-level/public/index.html — 289줄/Users/ef/crowny-level/public/style.css — 856줄/Users/ef/crowny-level/public/app.js — 920줄
화면 구성 (4개)
- 랜딩/평가: 히어로 + 27문항 9축 설문 + 사용자 정보 폼
- 대시보드: 레벨 배지, XP바, 9축 레이더, 순위 카드, 팁, 공유 카드
- 리더보드: 통합/국가별/영역별 3탭
- 작업보드: 미션 그리드, claim 모달, 품질 슬라이더
주요 기능
- 9축 레이더차트: Canvas API 직접 구현, 1.2s ease-out 애니메이션
- 레벨업 오버레이: CSS glow + confetti 파티클 (Canvas)
- localStorage 프로필 저장 → 재방문 시 대시보드 직행
- API 실패 시 더미 데이터 자동 폴백
- 모바일 반응형 (600/900px 브레이크포인트)
서버
포트 9951,
/Users/ef/crowny-level/server.js