# 아키텍처

## 시스템 구성

```
[Client Browser]
    ↓
[Nginx Reverse Proxy - LXC 101]
    ├── hanarang.nabomhalang.co.kr → Next.js FE (:3004)
    └── hanarang-api.nabomhalang.co.kr → Nest.js BE (:3005)
                                            ├── SSH → 4자매 서버 (상태 조회)
                                            ├── HTTP → Gitea API (프로젝트/repo)
                                            └── DB → MariaDB LXC 103
```

## Frontend (Next.js)
- **프레임워크:** Next.js (App Router)
- **스타일링:** styled-components (return 아래에 적재)
- **상태관리:** React hooks
- **테마:** 다크 테마 기본, CSS 변수로 색상 관리
- **포트:** 3004

## Backend (Nest.js)
- **프레임워크:** Nest.js
- **ORM:** Prisma
- **포트:** 3005
- **외부 연동:**
  - SSH (node-ssh): 4자매 서버 상태 조회
  - Gitea REST API: 프로젝트/repo/PR 정보
  - MariaDB: 대시보드 자체 데이터

## 데이터 수집 방식
Backend가 SSH로 각 자매 서버에서 수집:
- `systemctl --user is-active openclaw-gateway` → 온라인 상태
- `~/.openclaw/openclaw.json` → 설정 정보
- `~/.openclaw/agents/main/sessions/` → 세션 로그
- Gitea API → 프로젝트/브랜치/PR 정보

## DB (MariaDB)
- **호스트:** 10.10.10.146:33006
- **DB명:** hanarang_dashboard
- **인코딩:** utf8mb4

## 배포
- **Dev 서버:** 10.10.10.169
- **프로세스 관리:** PM2
- **FE:** pm2 start npm --name hanarang-web -- start (포트 3004)
- **BE:** pm2 start dist/main.js --name hanarang-api (포트 3005)