213f57b52d
Media Engine Control Panel — 6탭 웹 대시보드 [백엔드] FastAPI (dashboard/backend/) - server.py: 포트 8080, CORS, React SPA 서빙 - api_overview.py: KPI 카드 + 파이프라인 상태 + 활동 로그 - api_content.py: 칸반 보드 + 승인/거부 + 수동 트리거 - api_analytics.py: 방문자 추이 + 플랫폼/코너별 성과 - api_novels.py: 소설 목록/생성/에피소드 관리 - api_settings.py: engine.json CRUD - api_connections.py: AI 서비스 연결 관리 + 키 저장 - api_tools.py: 기능별 AI 도구 선택 - api_cost.py: 구독 현황 + API 사용량 추적 - api_logs.py: 시스템 로그 필터/검색 [프론트엔드] React + Vite + Tailwind + Recharts (dashboard/frontend/) - Overview: KPI 카드 + 파이프라인 + 코너별 바차트 + 활동 로그 - Content: 4열 칸반 보드 + 상세 모달 + 승인/거부 - Analytics: LineChart 방문자 추이 + 플랫폼별 성과 - Novel: 소설 목록 + 에피소드 테이블 + 새 소설 생성 폼 - Settings: 5개 서브탭 (AI연결/도구선택/배포채널/품질/비용관리) - Logs: 필터/검색 시스템 로그 뷰어 [디자인] CNN 다크+골드 테마 - 배경 #0a0a0d + 액센트 #c8a84e - 모바일 반응형 (Tailscale 외부 접속 대응) [실행] - dashboard/start.bat 더블클릭 → http://localhost:8080 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
3.1 KiB
3.1 KiB
The 4th Path — Control Panel
미디어 엔진 컨트롤 패널 (React + FastAPI)
구조
dashboard/
├── backend/
│ ├── server.py # FastAPI 메인
│ ├── api_overview.py # 개요 탭 API
│ ├── api_content.py # 콘텐츠 탭 API
│ ├── api_analytics.py # 분석 탭 API
│ ├── api_novels.py # 소설 탭 API
│ ├── api_settings.py # 설정 API
│ ├── api_connections.py# 연결 상태 API
│ ├── api_tools.py # 도구 선택 API
│ ├── api_cost.py # 비용 모니터 API
│ └── api_logs.py # 로그 API
└── frontend/
├── src/
│ ├── App.jsx
│ ├── pages/
│ │ ├── Overview.jsx
│ │ ├── Content.jsx
│ │ ├── Analytics.jsx
│ │ ├── Novel.jsx
│ │ ├── Settings.jsx
│ │ ├── Logs.jsx
│ │ └── settings/
│ │ ├── Connections.jsx
│ │ ├── ToolSelect.jsx
│ │ ├── Distribution.jsx
│ │ ├── Quality.jsx
│ │ └── CostMonitor.jsx
│ └── styles/
│ └── theme.css
├── package.json
├── vite.config.js
└── tailwind.config.js
설치 및 실행
필수 요건
- Python 3.9+
- Node.js 18+
- npm 9+
백엔드 의존성 설치
cd D:/workspace/blog-writer
pip install fastapi uvicorn python-dotenv
프론트엔드 의존성 설치
cd D:/workspace/blog-writer/dashboard/frontend
npm install
실행 방법
Windows (더블클릭)
- 프로덕션:
start.bat더블클릭 - 개발 모드:
start_dev.bat더블클릭
Linux/Mac
# 프로덕션 (프론트 빌드 후 백엔드만)
bash dashboard/start.sh
# 개발 모드 (Vite 핫리로드 + 백엔드 reload)
bash dashboard/start.sh dev
수동 실행
# 터미널 1 — 백엔드
cd D:/workspace/blog-writer
python -m uvicorn dashboard.backend.server:app --port 8080 --reload
# 터미널 2 — 프론트엔드 (개발)
cd D:/workspace/blog-writer/dashboard/frontend
npm run dev
# 또는 프론트 빌드 (프로덕션)
npm run build
접속
| 모드 | URL |
|---|---|
| 프로덕션 | http://localhost:8080 |
| 개발(프론트) | http://localhost:5173 |
| API 문서 | http://localhost:8080/docs |
탭 구성
| 탭 | 기능 |
|---|---|
| 개요 | KPI 카드 · 파이프라인 상태 · 코너별 비율 · 활동 로그 |
| 콘텐츠 | 칸반 보드 · 승인/거부 |
| 분석 | 방문자 추이 · 코너별 성과 · 인기글 |
| 소설 | 연재 관리 · 에피소드 생성 |
| 설정 | AI 연결 · 도구 선택 · 배포채널 · 품질 · 비용 |
| 로그 | 시스템 로그 필터/검색 |
Tailscale 외부 접속
# 백엔드를 0.0.0.0으로 바인딩하면 Tailscale IP로 접속 가능
python -m uvicorn dashboard.backend.server:app --host 0.0.0.0 --port 8080
# 접속: http://<tailscale-ip>:8080