# SB Lab Monitoring System: Technical Blueprint & Architecture

본 문서는 시스템의 설계 사상부터 데이터 구조, UI 명세까지 모든 기술 정보를 포함합니다. 이 문서는 시스템 복구 및 재구축을 위한 **Master Blueprint** 역할을 수행합니다.

---

## 1. Design System & UI Tokens (Visual DNA)
일관된 프리미엄 경험을 위한 시각적 명세입니다.

*   **Color Palette (Hex)**:
    *   `Background`: `#0f172a` (Slate-900), `#0d1117` (Dark-Main)
    *   `Panels`: `rgba(30, 41, 59, 0.7)` (Slate-800 with transparency)
    *   `Borders`: `rgba(51, 65, 85, 0.8)`
    *   `Accent Primary`: `#3b82f6` (Blue-500)
    *   `Accent Highlight`: `#f59e0b` (Amber-500)
    *   `Success/Run`: `#10b981` (Emerald-500)
    *   `Danger/Stop`: `#ef4444` (Red-500)
*   **Typography**:
    *   `Headings`: 'Outfit', sans-serif (Weights: 400, 700)
    *   `Digital/ID`: 'Orbitron', sans-serif (Weights: 500, 700)
    *   `UI/Body`: 'Inter', sans-serif (Weights: 300, 400, 600)
*   **Header Standard (h-16)**:
    *   `Height`: 64px, `Padding`: 0 32px
    *   `Title`: 32px, Bold, Gradient (`#ffffff` to `#a5b4fc`)
    *   `Subtitle`: 14px, Color `#64748b`

---

## 2. Data Schema (The Core JSON)
`/api/data` (실제로는 `equipment.json`)의 표준 데이터 구조입니다.

```json
{
  "id": "EQ-001",           // Unique Identifier (Orbitron Font)
  "name": "Chamber A",      // Display Name (Outfit Font)
  "status": "RUN",          // RUN | STOP | STAND BY
  "image": "data:base64",   // Optional: Auto-resized to 400px JPEG
  "room_no": 1,             // Room location for 3D Map
  "x": 120, "y": 80,        // 2D/3D Positioning Coordinates
  "width": 10, "depth": 10, // Spatial Dimensions
  "previous": { "project": "P1", "item": "Test", "engineer": "Kim", "start": "04/01", "end": "04/10" },
  "current":  { "project": "P2", "item": "Vibe", "engineer": "Lee", "start": "04/11", "end": "04/20" },
  "next":     { "project": "P3", "item": "EMC",  "engineer": "Park", "start": "04/21", "end": "05/01" }
}
```

---

## 3. Integration & IoT Specification

### 3.1. Home Assistant (WebSocket)
*   **Connection**: `ws://<HA_IP>:8123/api/websocket`
*   **Entity Mapping Strategy**:
    *   `Temperature`: `sensor.<room_id>_temperature`
    *   `Humidity`: `sensor.<room_id>_humidity`
    *   `Motion`: `binary_sensor.<room_id>_motion`
*   **Data Handling**: WebSocket 인입 시 `state_changed` 이벤트를 구독하여 실시간 3D 아바타 가시성 및 환경 지표 업데이트.

### 3.2. Local Storage Persistence
*   **Calendar**: `aptiv_calendar_data` (Key-Value: Date -> String Array)
*   **Settings**: `ha_connection_config` (IP, Token)

---

## 4. Key Algorithms & Logical Flows

### 4.1. The "Safety Sync" Cycle (Calendar)
데이터 정합성을 위해 모든 쓰기 작업은 다음 사이클을 준수해야 합니다.
1.  **User Action**: 사용자가 캘린더 슬롯 추가/삭제/수정.
2.  **DOM Mutation**: 즉시 화면을 렌더링(`renderCalendar()`)하여 UX 즉각성 확보.
3.  **Data Extraction**: 수정된 DOM에서 전체 데이터를 다시 읽어들임(Scraping).
4.  **Serialization**: JSON 문자열로 변환 후 `localStorage` 저장.

### 4.2. 3D Scene Management (Three.js)
*   **Initial Load**: GLTFLoader를 통한 랩 평면도 로드.
*   **Dynamic Labels**: CSS2DRenderer를 사용하여 장비 ID 라벨을 3D 좌표에 매핑.
*   **Throttling**: CPU 최적화를 위해 라벨 위치 업데이트는 `requestAnimationFrame` 내에서 2프레임마다 1회 수행.

### 4.3. Gantt Chart Gap-Filling
*   프로젝트 일정 사이의 공백(Gap)을 `daysBetween(End_A, Start_B) > 1` 조건으로 검사.
*   공백 발견 시 임시 세그먼트(`standby-gap`)를 생성하여 차트에 시각화.

---

## 5. Directory & Resource Map
*   `/pages/`: 모든 HTML 실행 파일 (독립적 헤더 동기화 완료).
*   `/css/`: `dashboard.css` (공용 스타일 시트).
*   `/js/`: `dashboard.js` (데이터 로더 및 공용 유틸리티).
*   `/images/`: `member_*.png` (아바타), `lab_bg*.png` (배경).
*   **External Libs**:
    *   `Three.js`: r128+
    *   `Chart.js`: 3.7+
    *   `Globe.gl`: 2.2+
    *   `SheetJS`: 0.18+

---

## 6. Deployment & Maintenance
1.  **Hosting**: 정적 웹 서버(Nginx, Apache) 또는 Node.js Express를 통해 `/pages` 서비스.
2.  **Data API**: `/api/data`는 JSON 파일을 읽고 쓰는 REST API로 구현(Node.js FS 모듈 권장).
3.  **Auto-Shift**: 자정마다 `previous <- current <- next`로 데이터를 자동 시프트하는 서버측 로직(Cron) 권장.

---
*Blueprint Version: 2.1 (Hub-Ready Edition)*
*Author: Antigravity AI (Advanced Agentic Coding)*