WorkflowMCP

# Phase 2.6 SvelteKit Dashboard 테스트 가이드 ## 🎯 테스트 목적 Phase 2.6에서 개발된 SvelteKit 웹 대시보드의 모든 기능을 검증하고 SQLite 데이터베이스와의 연동이 정상적으로 작동하는지 확인합니다. ## 📋 사전 준비사항 ### 1. 개발 서버 실행 확인 ```bash cd /c/dev/juk/edit/workflow-mcp/dashboard npm run dev ``` - 서버가 http://localhost:3301 에서 실행되어야 함 - 터미널에 "Local: http://localhost:3301/" 메시지 확인 ### 2. SQLite 데이터베이스 상태 확인 ```bash cd /c/dev/juk/edit/workflow-mcp ls -la database/workflow.db ``` - workflow.db 파일이 존재해야 함 (Phase 2.5에서 생성됨) - 기존 마이그레이션된 데이터가 있어야 함 ## 🧪 테스트 시나리오 ### Test 1: 대시보드 메인 페이지 **URL**: http://localhost:3301 **체크포인트**: - [ ] 페이지가 정상적으로 로딩됨 - [ ] 4개 통계 카드 표시 (전체 PRD, 전체 작업, 진행중 작업, 전체 계획) - [ ] 작업 활동 추이 차트 (Chart.js 선형 차트) - [ ] 우선순위별 작업 분포 도넛 차트 - [ ] 빠른 실행 버튼들 (새 PRD 작성, 새 작업 추가, 새 계획 생성) - [ ] 최근 활동 섹션 표시 **예상 결과**: 기존 SQLite 데이터를 기반으로 통계가 표시됨 ### Test 2: 칸반 보드 **URL**: http://localhost:3301/kanban **체크포인트**: - [ ] 3개 컬럼 표시 (대기중, 진행중, 완료) - [ ] 각 컬럼에 해당 상태의 작업들이 표시됨 - [ ] 작업 카드에 제목, 설명, PRD 참조, 태그, 마감일 표시 - [ ] 우선순위별 색상 구분 (긴급=빨강, 높음=주황, 보통=노랑, 낮음=초록) - [ ] 드래그 앤 드롭으로 작업 이동 가능 - [ ] 작업 이동 시 SQLite 데이터베이스 업데이트 확인 **테스트 액션**: 1. 작업을 다른 컬럼으로 드래그 2. 페이지 새로고침 후 변경사항 유지되는지 확인 ### Test 3: 간트 차트 **URL**: http://localhost:3301/gantt **체크포인트**: - [ ] 작업 기반/계획 기반 뷰 전환 가능 - [ ] D3.js 기반 타임라인 차트 렌더링 - [ ] 각 항목별 시작일-종료일 바 표시 - [ ] 상태별 색상 구분 (완료=초록, 진행중=파랑, 대기중=회색) - [ ] 오늘 날짜 빨간 점선 표시 - [ ] 마우스 오버 시 툴팁 표시 - [ ] 범례 섹션 표시 **테스트 액션**: 1. 작업 기반/계획 기반 뷰 전환 2. 차트 항목에 마우스 오버하여 툴팁 확인 ### Test 4: 데이터베이스 관리 **URL**: http://localhost:3301/database **체크포인트**: - [ ] 3개 테이블 탭 (PRDs, 작업, 계획) - [ ] 각 테이블의 모든 데이터 표시 - [ ] 테이블별 컬럼 헤더와 데이터 정렬 - [ ] "새 항목 추가" 버튼 동작 - [ ] 인라인 수정 기능 (수정 버튼 클릭) - [ ] 삭제 기능 (확인 대화상자 표시) **테스트 액션**: 1. PRD 테이블에서 새 항목 추가 2. 작업 테이블에서 기존 항목 수정 3. 계획 테이블에서 항목 삭제 (주의: 테스트용 데이터만) ### Test 5: 네비게이션 및 레이아웃 **체크포인트**: - [ ] 상단 네비게이션 바의 모든 링크 작동 - [ ] 각 페이지 간 이동 시 페이지 제목 변경 - [ ] 모바일 반응형 디자인 (브라우저 크기 조정) - [ ] TailwindCSS 스타일링 정상 적용 ## 🔍 API 엔드포인트 테스트 브라우저 개발자 도구 또는 별도 도구로 API 테스트: ### GET 요청들: ``` GET http://localhost:3301/api/prds GET http://localhost:3301/api/tasks GET http://localhost:3301/api/plans GET http://localhost:3301/api/dashboard GET http://localhost:3301/api/dashboard?type=stats GET http://localhost:3301/api/dashboard?type=activity GET http://localhost:3301/api/dashboard?type=priority ``` ### POST/PUT/PATCH/DELETE 요청들: ``` POST http://localhost:3301/api/tasks PUT http://localhost:3301/api/tasks/{id} PATCH http://localhost:3301/api/tasks/{id} DELETE http://localhost:3301/api/tasks/{id} ``` ## 🚨 알려진 이슈 및 해결방법 ### Issue 1: 데이터가 표시되지 않는 경우 **원인**: SQLite 데이터베이스 파일 경로 문제 **해결**: `C:\dev\juk\edit\workflow-mcp\database\workflow.db` 파일 존재 확인 ### Issue 2: 차트가 렌더링되지 않는 경우 **원인**: Chart.js 또는 D3.js 라이브러리 로딩 실패 **해결**: 브라우저 개발자 도구에서 콘솔 에러 확인 ### Issue 3: API 요청 실패 **원인**: CORS 또는 서버 연결 문제 **해결**: SvelteKit 개발 서버가 정상 실행 중인지 확인 ## ✅ 테스트 완료 체크리스트 ### 기본 기능: - [ ] 모든 페이지 정상 로딩 - [ ] 데이터베이스 연동 정상 - [ ] 네비게이션 동작 정상 - [ ] 반응형 디자인 정상 ### 대시보드: - [ ] 통계 카드 데이터 표시 - [ ] 차트 렌더링 정상 - [ ] 빠른 실행 버튼 동작 ### 칸반 보드: - [ ] 드래그 앤 드롭 동작 - [ ] 상태 업데이트 정상 - [ ] 데이터 지속성 확인 ### 간트 차트: - [ ] 타임라인 시각화 정상 - [ ] 뷰 전환 동작 - [ ] 툴팁 표시 정상 ### 데이터베이스 관리: - [ ] CRUD 모든 기능 동작 - [ ] 데이터 유효성 검증 - [ ] 변경사항 즉시 반영 ## 📊 성능 기준 - **페이지 로딩**: 5초 이내 - **API 응답**: 2초 이내 - **차트 렌더링**: 3초 이내 - **드래그 앤 드롭**: 즉시 반응 ## 📝 테스트 결과 기록 테스트 완료 후 다음 정보를 기록: ``` 테스트 일시: ___________ 테스트자: ___________ 브라우저: ___________ OS: ___________ 통과한 테스트: ___/25 실패한 테스트: 상세 내용 기록 성능 이슈: 있음/없음 ``` ## 🎯 다음 단계 모든 테스트가 통과하면: 1. Phase 2.6 완료 확인 2. Git 커밋 및 푸시 준비 3. 다음 Phase 계획 검토 테스트 실패 시: 1. 실패 원인 분석 2. 버그 수정 또는 개선사항 구현 3. 재테스트 실행