# DrawNET Object Studio 설계서 (Phase 1)

**Object Studio**는 단순한 이미지 업로드를 넘어, 인프라 설계에 필요한 전문적인 **에셋 관리 시스템(Asset Management System)**을 지향합니다.

## 1. 개요
*   **목적**: 복잡한 인프라 소자(Cisco, Fortinet 등)를 패키지 단위로 관리하고, 전/후면 뷰 및 메타데이터를 정밀하게 가공하여 도면 제작 효율을 극대화함.
*   **접근 주소**: `/studio` (독립형 페이지)

---

## 2. 주요 워크플로우

### [Ingestion: 소스 로드]
1.  **벌크 로드**: 사용자가 로컬 폴더를 지정(`webkitdirectory`)하거나 여러 파일을 드래그 앤 드롭하여 소스 목록에 추가.
2.  **프리뷰 그리드**: 업로드된 이미지들을 썸네일 형태로 시각화하여 확인.

### [Processing: 에셋 가공 및 속성 정의]
1.  **개별/벌크 편집**: 
    *   선택된 오브젝트의 이름 변경, 속성 지정(아이콘 타입, 유형 등), 카테고리 매칭.
    *   다중 선택 시 '제조사(Vendor)', '모델 시리즈', '환경' 등 공통 정보를 일괄 적용.
2.  **PNG to SVG 하이브리드 변환**:
    *   PNG 소스를 벡터화(SVG Trace)하여 변환 결과 프리뷰 제공.
    *   사용자가 **[원본 PNG 유지]** 또는 **[벡터 SVG 채택]** 중 선택. (SVG 채택 시 고해상도 무한 확대 및 색상 커스터마이징 가능)

### [Packaging: 내보내기 및 등록]
1.  **패키지(Pack) 생성**: 가공 완료된 에셋들을 하나의 논리적 팩(예: `Cisco_Nexus_9000_Pack`)으로 묶음.
2.  **뷰 매칭 (Front/Back)**: 랙 배치를 고려하여 동일 모델의 전면 아이콘과 후면 아이콘을 하나의 에셋 데이터로 바인딩.
3.  **최종 발행**: 서버 저장소(`static/assets/packs/`)에 저장하고 메인 에디터의 에셋 라이브러리에 패키지 정보 업데이트.

---

## 3. 화면 UI/UX 설계 (안)

### 레이아웃 구조
*   **좌측 (Source Panel)**: 업로드된 원본 파일 목록 및 Drag & Drop 영역.
*   **중앙 (Workspace)**: 바둑판식(Grid) 에셋 프리뷰 영역 및 선택 도구.
*   **우측 (Property Panel)**: 선택된 에셋(들)의 속성 입력창 (명칭, 제조사, 카테고리 등) 및 SVG 변환 비교 뷰.

### 주요 기능 버튼
*   `[Load Folder]`: 폴더 단위 소스 로드.
*   `[Batch Edit]`: 선택 항목 일괄 속성 적용.
*   `[Vectorize]`: 벡터 변환 및 품질 검수 모드 진입.
*   `[Build Pack]`: 최종 패키지 추출 및 서버 등록.

---

## 4. 데이터 모델 확장 (Draft)

```json
{
  "pack_id": "cisco_sw_pack",
  "vendor": "Cisco",
  "version": "1.0.0",
  "assets": [
    {
      "id": "c9300L_24T",
      "label": "Catalyst 9300L 24T",
      "category": "Switch",
      "views": {
        "front": "packs/cisco/9300l_f.svg",
        "back": "packs/cisco/9300l_b.svg"
      },
      "specs": {
        "u_height": 1,
        "depth": "350mm"
      }
    }
  ]
}
```

---

## 6. 구현 단계별 로드맵 (Roadmap)

안정적인 연동과 품질 관리를 위해 다음 순서로 개발을 진행합니다.

### Phase 1: 설계영역 수용성 및 인프라 구축 (Infrastructure)
*   **목표**: 스튜디오에서 만든 패키지를 설계영역에서 즉시 읽어 들일 수 있는 기반 마련.
*   **주요 작업**:
    *   `package.json` 데이터 규격 확정.
    *   설계영역 에셋 라이브러리의 '멀티 패키지 로더' 구현.
    *   샘플 패키지(`Cisco_Sample`)를 통한 연동 테스트.
*   **체크리스트**: `/docs/studio/phase1_checklist.md`

### Phase 2: 스튜디오 기반 구축 (Base Setup)
*   **목표**: 스튜디오 독립 페이지 및 이미지 Ingestion 엔진 구현.
*   **주요 작업**:
    *   `/studio` 라운팅 및 전용 HTML/CSS 레이아웃 생성.
    *   폴더 선택 및 드래그 앤 드롭 업로드 구현.
    *   에셋 프리뷰 그리드 UI 최적화.
*   **체크리스트**: `/docs/studio/phase2_checklist.md`

### Phase 3: 스튜디오 핵심 가공 기능 (Core Processing)
*   **목표**: PNG to SVG 변환 및 벌크 속성 편집 기능 구현.
*   **주요 작업**:
    *   벡터라이징(Trace) 엔진 탑재 및 변환 전/후 비교 UI.
    *   다중 선택 기반 일괄 속성(Vendor, Category 등) 편집기.
*   **체크리스트**: `/docs/studio/phase3_checklist.md`

*   **체크리스트**: `/docs/studio/phase4_checklist.md` [v] **Completed**

---

## 7. 최종 구현 사양 (Final Implementation)

### 아키텍처 (Architecture)
- **프론트엔드 모듈화**: 코드 복잡도를 제어하기 위해 관심사별로 모듈을 분리함.
    - `index.js`: 엔트리 포인트 및 이벤트 바인딩.
    - `renderer.js`: 모든 DOM 생성 및 UI 업데이트 담당.
    - `actions.js`: 빌드, 변환, 벌크 수정 등 비즈니스 로직.
    - `state.js` / `ingester.js` / `processor.js`: 상태 관리 및 데이터 처리 전담.
- **백엔드**: Flask (`api_routes.py`) 기반의 멀티 패키지 스캔 및 저장 엔진 구축.

### 주요 기술 스택
- **Potrace-js**: 클라이언트 사이드 고속 벡터화.
- **Flask FormData**: 대용량 이미지 및 메타데이터 일괄 전송.
- **X6 Data Integration**: `package.json` 규격을 통한 설계 영역과의 심리스한 연동.