WorkflowMCP

# 🌐 Dashboard API 사용 가이드 ## 🎯 **개요** WorkflowMCP Dashboard API는 웹 브라우저를 통해 프로젝트 관리 시스템에 접근할 수 있는 REST API 기반 웹 인터페이스입니다. ## 🚀 **시작하기** ### 1. 서버 실행 ```bash # MCP 서버 시작 (백그라운드) npm start # 대시보드 서버 시작 cd dashboard npm install npm run dev ``` ### 2. 웹 인터페이스 접근 브라우저에서 `http://localhost:3301` 접속 --- ## 📚 **주요 기능별 사용법** ### 🔵 **프로젝트 관리** (`/projects`) #### ✨ **프로젝트 생성** 1. 메인 화면에서 `새 프로젝트 생성` 버튼 클릭 2. 프로젝트 정보 입력: - **이름**: 프로젝트 이름 - **설명**: 간단한 설명 - **우선순위**: High/Medium/Low - **시작일/종료일**: 프로젝트 기간 - **관리자**: 담당자 이름 - **태그**: 카테고리 구분용 #### 📋 **프로젝트 조회 및 편집** - **목록 보기**: 전체 프로젝트 카드 형태로 표시 - **상세 보기**: 프로젝트 클릭 → 상세 정보, 연결된 요구사항/작업 확인 - **편집**: 상세 페이지에서 `편집` 버튼 → 정보 수정 - **삭제**: 상세 페이지에서 `삭제` 버튼 (확인 후 삭제) --- ### 📝 **요구사항 관리** (`/prds`) #### ✨ **PRD 생성** 1. `새 PRD 생성` 버튼 클릭 2. PRD 정보 입력: - **제목**: 요구사항 문서 제목 - **설명**: 상세 설명 - **요구사항**: 기능 목록 (줄바꿈으로 구분) - **인수조건**: 완료 기준 (줄바꿈으로 구분) - **우선순위**: High/Medium/Low - **연결된 프로젝트**: 드롭다운에서 선택 #### 📊 **PRD 상태 관리** - **상태**: draft → review → approved → completed - **상태 변경**: PRD 상세 페이지에서 상태 드롭다운 변경 - **필터링**: 상태별, 우선순위별 필터 사용 --- ### ✅ **작업 관리** (`/tasks`) #### 🎯 **작업 생성** 1. `새 작업 생성` 버튼 클릭 2. 작업 정보 입력: - **제목**: 작업 이름 - **설명**: 작업 상세 내용 - **담당자**: 작업 담당자 - **우선순위**: High/Medium/Low - **예상 시간**: 소요 시간 (시간 단위) - **마감일**: 완료 목표 일자 - **태그**: 분류용 태그 #### 🔄 **작업 상태 추적** - **칸반 보드**: Pending → In Progress → Done → Blocked - **드래그 앤 드롭**: 작업을 다른 상태로 이동 - **필터**: 담당자별, 상태별, 우선순위별 필터 - **검색**: 작업 제목/내용으로 검색 #### 🔗 **작업 의존성 관리** - **작업 상세 페이지**에서 `의존성 추가` 버튼 - **선행 작업** 선택 → 현재 작업이 완료되기 전에 끝나야 할 작업 - **의존성 시각화**: 연결된 작업들이 상세 페이지에 표시 --- ### 🎨 **설계 관리** (`/designs`) #### 🏗️ **설계 문서 생성** 1. `새 설계 생성` 버튼 클릭 2. 설계 정보 입력: - **제목**: 설계 문서 제목 - **설명**: 설계 개요 - **설계 유형**: system/architecture/ui_ux/database/api - **상세 내용**: 설계 상세 설명 - **우선순위**: High/Medium/Low - **연결된 요구사항**: PRD 연결 #### 📐 **설계 상태 관리** - **상태**: draft → review → approved → implemented - **필터**: 설계 유형별, 상태별 필터 - **연결성**: 연결된 PRD와 작업 추적 --- ### 🧪 **테스트 관리** (`/tests`) #### 🔬 **테스트 케이스 생성** 1. `새 테스트 케이스 생성` 버튼 클릭 2. 테스트 정보 입력: - **제목**: 테스트 케이스 이름 - **설명**: 테스트 목적 - **테스트 유형**: unit/integration/system/acceptance/regression - **테스트 단계**: 실행 절차 (줄바꿈으로 구분) - **예상 결과**: 기대하는 결과 - **사전 조건**: 테스트 전 준비사항 - **복잡도**: Low/Medium/High - **예상 소요시간**: 분 단위 #### ⚡ **테스트 실행 및 결과** 1. **테스트 실행**: 테스트 케이스에서 `테스트 실행` 버튼 2. **결과 입력**: - **실행 상태**: pass/fail/blocked/skipped - **실제 결과**: 실행 결과 설명 - **실행 시간**: 실제 소요된 시간 - **실행자**: 테스트 수행자 - **환경**: development/staging/production - **발견된 결함**: 버그 ID나 설명 #### 📈 **테스트 리포팅** - **테스트 요약**: 전체 테스트 통계 확인 - **커버리지 분석**: 작업/설계/PRD별 테스트 커버리지 - **실행 이력**: 각 테스트 케이스별 실행 기록 --- ### 📄 **문서 관리** (`/documents`) #### 📝 **문서 생성** 1. `새 문서 생성` 버튼 클릭 2. 문서 정보 입력: - **제목**: 문서 제목 - **내용**: Markdown 형식으로 작성 - **문서 유형**: test_guide/test_results/analysis/report/checklist/specification/meeting_notes/decision_log - **카테고리**: 프로젝트 단계나 주제 - **요약**: 간단한 요약 - **태그**: 검색용 태그 - **상태**: draft/review/approved/archived #### 🔍 **문서 검색 및 관리** - **전체 텍스트 검색**: 문서 내용 전체에서 검색 - **필터**: 문서 유형별, 카테고리별, 상태별 필터 - **연결**: PRD, 작업, 계획과 연결 가능 - **버전 관리**: 문서 수정 시 자동 버전 증가 --- ### 🏗️ **환경 관리** (`/environments`) #### 🌍 **환경 생성** 1. `새 환경 생성` 버튼 클릭 2. 환경 정보 입력: - **이름**: 환경 이름 (예: Production, Staging) - **설명**: 환경 설명 - **환경 유형**: development/staging/production/testing - **URL**: 환경 접속 주소 - **상태**: active/inactive/maintenance - **태그**: 분류용 태그 #### ⚙️ **환경 상태 관리** - **상태 변경**: 활성 ↔ 점검 모드 전환 - **헬스 체크**: 환경 상태 모니터링 - **최근 배포**: 해당 환경의 최신 배포 이력 - **업타임**: 가동률 표시 --- ### 🚀 **배포 관리** (`/deployments`) #### 📦 **배포 생성** 1. `새 배포 생성` 버튼 클릭 2. 배포 정보 입력: - **제목**: 배포명 - **설명**: 배포 내용 - **버전**: 배포할 버전 - **환경**: 배포 대상 환경 - **배포 유형**: blue_green/rolling/canary/hotfix - **예정 시간**: 배포 일정 - **태그**: 분류용 태그 #### ⚡ **배포 실행 및 관리** - **배포 실행**: `배포 실행` 버튼으로 즉시 실행 - **롤백**: 완료된 배포의 `롤백` 버튼으로 이전 버전 복구 - **상태 추적**: planned → in_progress → completed/failed/rolled_back - **필터**: 상태별, 환경별 필터링 --- ### 🔧 **운영 관리** (`/operations`) #### 🚨 **인시던트 생성** 1. `새 인시던트 생성` 버튼 클릭 2. 인시던트 정보 입력: - **제목**: 인시던트 제목 - **설명**: 상세 설명 - **심각도**: critical/high/medium/low - **인시던트 유형**: outage/performance/security/data/deployment - **영향받는 서비스**: 서비스 목록 - **환경**: 발생 환경 - **태그**: 분류용 태그 #### 📊 **시스템 헬스 모니터링** - **환경별 상태**: 전체 환경 헬스 체크 - **성능 지표**: 시스템 성능 메트릭 - **알림 규칙**: 임계값 설정 및 알림 --- ## 🎛️ **고급 기능** ### 📈 **대시보드 및 리포팅** - **메인 대시보드**: 전체 프로젝트 현황 한눈에 보기 - **간트 차트**: 프로젝트 일정 시각화 - **네트워크 다이어그램**: 프로젝트 간 관계 시각화 - **진행률 차트**: 작업 완료율 추적 ### 🔗 **연결성 관리** - **엔티티 간 연결**: PRD ↔ 작업 ↔ 테스트 ↔ 문서 연결 - **의존성 시각화**: 관련 항목들 자동 표시 - **영향 분석**: 변경 시 영향받는 항목 확인 ### 💾 **데이터 관리** - **실시간 동기화**: 변경사항 즉시 반영 - **자동 백업**: SQLite 데이터베이스 자동 백업 - **내보내기**: 데이터 JSON 형태로 내보내기 --- ## 🛠️ **문제 해결** ### ❗ **일반적인 문제들** #### 서버 연결 오류 ```bash # MCP 서버가 실행 중인지 확인 npm start # 대시보드 서버 재시작 cd dashboard npm run dev ``` #### 한글 인코딩 문제 - **해결됨**: UTF-8 인코딩 자동 처리 - 브라우저에서 한글 입력/표시 정상 작동 #### 데이터 동기화 문제 - 브라우저 새로고침 (`Ctrl+F5`) - MCP 서버 재시작 ### 📞 **지원** - **로그 확인**: 브라우저 개발자 도구 Console 탭 - **서버 로그**: 터미널에서 서버 실행 로그 확인 - **데이터베이스**: `data/workflow.db` SQLite 파일 --- ## 🚀 **활용 팁** 1. **팀 협업**: 여러 사람이 동시에 같은 URL 접속하여 실시간 협업 2. **모바일**: 모바일 브라우저에서도 접근 가능 (반응형 UI) 3. **북마크**: 자주 사용하는 페이지 브라우저 북마크로 저장 4. **키보드 단축키**: 브라우저 기본 단축키 활용 (Ctrl+F 검색 등) 5. **데이터 백업**: 정기적으로 `data/` 폴더 백업 권장 이 가이드를 통해 WorkflowMCP Dashboard를 효과적으로 활용하여 프로젝트를 체계적으로 관리하세요! 🎯