# StreamDock 플러그인 개발환경 설정 가이드

## 🚀 개요
이 가이드는 Mirabox StreamDock 플러그인 개발을 위한 개발환경을 설정하는 방법을 설명합니다.

## 📋 필수 요구사항

### 1. Node.js 설치
- **다운로드**: https://nodejs.org/
- **권장 버전**: LTS (Long Term Support) 버전
- **설치 확인**: `node --version`, `npm --version`

### 2. 개발 도구
- **Visual Studio Code**: https://code.visualstudio.com/
- **Git**: https://git-scm.com/
- **StreamDock 소프트웨어**: 미라박스에서 제공하는 StreamDock 소프트웨어

## 🔧 개발환경 설정

### 1. Node.js 프로젝트 설정
```bash
# Node.js SDK 폴더로 이동
cd SDNodeJsSDK/com.mirabox.streamdock.demo.sdPlugin

# 의존성 설치
npm install

# 개발 서버 실행 (있는 경우)
npm run dev
```

### 2. Python 개발환경 (선택사항)
```bash
# Python SDK 폴더로 이동
cd SDPythonSDK

# 가상환경 생성
python -m venv venv

# 가상환경 활성화 (Windows)
venv\Scripts\activate

# 의존성 설치
pip install -r requirements.txt
```

### 3. C++ 개발환경 (선택사항)
- **Visual Studio** 또는 **Visual Studio Code** 설치
- **CMake** 설치
- **C++ 컴파일러** 설정

## 📁 프로젝트 구조

### Node.js 플러그인 구조
```
com.mirabox.streamdock.demo.sdPlugin/
├── manifest.json          # 플러그인 메타데이터
├── plugin/                # 메인 플러그인 코드
├── propertyInspector/     # 속성 검사기 UI
├── static/               # 정적 파일 (이미지, CSS 등)
└── zh_CN.json           # 중국어 번역
```

### 주요 파일 설명
- **manifest.json**: 플러그인 정보, 버전, 권한 등
- **plugin/index.js**: 메인 플러그인 로직
- **propertyInspector/index.html**: 설정 UI

## 🛠️ 개발 시작하기

### 1. 새 플러그인 생성
1. 기존 demo 플러그인을 복사
2. 폴더명과 manifest.json 수정
3. 플러그인 ID 변경

### 2. 개발 및 테스트
1. StreamDock 소프트웨어에서 플러그인 폴더 지정
2. 플러그인 로드 및 테스트
3. 디버깅 및 수정

### 3. 배포
1. 플러그인 패키징
2. Space Platform에 업로드 (선택사항)

## 📚 참고 자료

- **공식 문서**: https://sdk.key123.vip
- **GitHub 저장소**: https://github.com/MiraboxSpace/StreamDock-Plugin-SDK
- **이메일 문의**: service@key123.vip
- **Discord 커뮤니티**: 공식 Discord 서버 참여

## 🔍 문제 해결

### 일반적인 문제들
1. **Node.js 설치 안됨**: 공식 사이트에서 재다운로드
2. **플러그인 로드 실패**: manifest.json 문법 확인
3. **권한 오류**: 관리자 권한으로 실행

### 디버깅 팁
- StreamDock 소프트웨어의 로그 확인
- 브라우저 개발자 도구 사용 (propertyInspector)
- console.log() 활용한 디버깅

## 📝 다음 단계

1. Node.js 설치
2. 샘플 플러그인 실행
3. 첫 번째 플러그인 개발 시작
4. 커뮤니티 참여 및 공유

---

**Happy Coding! 🎉**