feat: TestLink → TestRail 수준 전면 재설계 (Vue 3 SPA + REST API 확장)

[dahyun-choi]

요약

TestLink 1.9.20의 구식 iframe 기반 UI를 Vue 3 SPA로 전면 재설계하고, TestRail의 핵심 기능(인라인 테스트 실행, 실시간 대시보드, 밀리스톤 트래킹)을 구현했습니다.

주요 변경사항

인프라 (Phase 1, 9)

• Dockerfile: PHP 7.4 → 8.2 업그레이드, Node.js 20 추가, npm 레이어 캐시 최적화
• Vue 3 + Vite 프론트엔드 빌드 파이프라인 추가
• Docker healthcheck 추가 (db 서비스)
• .dockerignore 추가

백엔드 REST API 확장 (Phase 2)

• CORS 미들웨어 추가 (Vite 개발 서버 지원, OPTIONS preflight 인증 우회)
• 11개 신규 엔드포인트 추가:
  • GET /testprojects/{id}/testsuites - 스위트 트리
  • GET /testsuites/{id}/testcases - TC 목록
  • GET /testcases/{id} - TC 상세
  • GET /testplans/{id}/executions - 실행 현황
  • GET /testplans/{id}/progress - 대시보드 통계 (pass_rate, trend)
  • GET /testprojects/{id}/dashboard - 프로젝트 통계
  • GET|POST /testprojects/{id}/milestones - 밀리스톤 CRUD
  • GET|PUT|DELETE /milestones/{id} - 밀리스톤 관리

DB 마이그레이션 (Phase 3)

• install/sql/alter_tables/1.9.21/mysql/add_milestones.sql 신규 추가
• milestones 테이블 (testproject_id, name, description, due_date, is_completed, completion_rate)

Vue SPA (Phase 4-8)

• 레이아웃: TestRail 스타일 다크 사이드바 + 상단 헤더 (프로젝트 선택)
• 인증: API Key 기반 로그인 (/whoAmI 검증), 라우터 가드
• 인라인 테스트 실행 (★): Pass/Fail/Blocked 버튼 클릭 → 즉시 저장 → 자동 다음 TC 이동
• 대시보드 차트: Chart.js 도넛(상태 분포) + 바 차트(날짜별 추이), 30초 자동 갱신
• 밀리스톤 UI: 타임라인 카드, 기한 초과 강조, 완료율 프로그레스 바
• TC 편집기: TipTap 리치 텍스트, 스텝 드래그앤드롭, 2초 debounce 자동 저장

검증 방법

# 빌드 확인
npm install && npm run build

# Docker 실행
docker-compose up -d
# http://localhost:8090 접속 후:
# 1. API Key로 로그인
# 2. 프로젝트 선택 → 대시보드 차트 확인
# 3. 테스트 플랜 → "실행" → 인라인 Pass/Fail 클릭
# 4. 밀리스톤 생성/수정/삭제
# 5. 테스트 케이스 편집기 (스텝 추가, 자동 저장)

# milestones 테이블 마이그레이션
mysql testlink < install/sql/alter_tables/1.9.21/mysql/add_milestones.sql

빌드 결과

• npm run build 성공: 222 모듈 변환, 오류 없음
• 번들 크기: main.js 135KB (gzip 52KB)

🤖 Generated with Claude Code