static 폴더 및 하위 파일 업로드

2026-04-24 19:48:37 +09:00 · 2026-04-22 12:05:03 +09:00
commit 514b209a5a
203 changed files with 29494 additions and 0 deletions
@@ -0,0 +1,46 @@
+## 1. 데이터 규격 정의 (package.json)
+- [x] 패키지 기본 정보(ID, Vendor, Version) 필드 정의 완료
+- [x] 에셋 개별 정보(ID, Label, Category, Paths) 필드 정의 완료
+- [x] 전/후면(Front/Back) 뷰 확장을 고려한 데이터 구조 검토 완료
+
+### [최종 확정 규격]
+```json
+{
+  "id": "cisco_nexus_9k",
+  "name": "Cisco Nexus 9000 Series",
+  "vendor": "Cisco",
+  "version": "1.0.0",
+  "description": "Standard Nexus switches for Data Center",
+  "assets": [
+    {
+      "id": "n9k_93180yc",
+      "label": "Nexus 93180YC-EX",
+      "category": "Switch",
+      "views": {
+        "icon": "icon.svg",
+        "front": "front.svg",
+        "back": "back.svg"
+      },
+      "specs": {
+        "u_height": 1,
+        "is_rack_unit": true
+      }
+    }
+  ]
+}
+```
+
+## 2. 설계영역(Draw) 패키지 로더 구현
+- [x] `assets.js`가 단일 경로가 아닌 `packs/` 내의 모든 하위 패키지를 스캔하도록 수정
+- [x] 사이드바 라이브러리 영역에 패키지별 섹션(또는 그룹) UI 생성
+- [x] 개별 에셋을 드래그하여 캔버스 드롭 시 정상 렌더링 확인
+
+## 3. 샘플 패키지 연동 테스트
+- [x] `static/assets/packs/sample_cisco/` 수동 생성 및 테스트 데이터 수납
+- [x] 설계영역 재로드 시 샘플 패키지가 라이브러리에 자동 노출되는지 확인
+- [x] 언어(ko/en) 파일에 패키지 관련 신규 키 추가 여부 확인
+
+## 4. 안정성 및 예외 처리
+- [x] 잘못된 형식의 `package.json` 로드 시 에러 핸들링 및 사용자 알림
+- [x] 에셋 파일 경로 누락 시 기본(Default) 아이콘 표시 로직 확인
+- [x] 기존 라이브러리(Fixed Objects 등)와의 UI 충돌 여부 확인
@@ -0,0 +1,26 @@
+# Phase 2 체크리스트: 스튜디오 기반 구축 (Base Setup)
+
+## 1. 전용 페이지 및 라우팅 설정
+- [x] `routes/main_routes.py`에 `/studio` 엔드포인트 추가 완료
+- [x] `templates/studio.html` 기본 구조(HTML5, 필요한 CSS/JS 로드) 생성 완료
+- [x] 설계영역(Draw)에서 스튜디오로 이동할 수 있는 메뉴/버튼 배치 (예: 상단 툴바)
+
+## 2. 스튜디오 전용 UI/UX 레이아웃 (3-Panel)
+- [x] **Source Panel (좌측)**: 업로드된 파일 목록 및 Drag & Drop 영역 구현
+- [x] **Workspace (중앙)**: 에셋들을 바둑판식(Grid)으로 보여주는 프리뷰 영역 구현
+- [x] **Property Panel (우측)**: 선택된 에셋의 상세 정보(ID, Label) 입력 영역 스켈레톤 생성
+- [x] 스튜디오 전용 다크 테마 및 전문 도구 스타일 CSS 적용
+
+## 3. Ingestion(이미지 수집) 엔진 구현
+- [x] 브라우저 폴더 선택(`webkitdirectory`) 기능 구현 및 파일 필터링(.svg, .png, .jpg)
+- [x] 개별 파일 드래그 앤 드롭(Drag & Drop) 업로드 지원
+- [x] 선택된 이미지들을 중앙 Workspace 그리드에 즉시 렌더링 (Memory URL 사용)
+
+## 4. 선택 및 상태 서비스 (State Management)
+- [x] 그리드 내 이미지 개별/다중 선택(Ctrl/Shift 클릭) 로직 구현
+- [x] 선택된 항목 수 및 파일 정보(해상도, 크기) 하단 상태바 표시
+- [x] 업로드된 소스 목록 관리 서비스(`studio_state.js`) 초기화
+
+## 5. 설계영역과의 분리 검증
+- [x] `/studio` 페이지 로딩 시 설계영역의 X6 인스턴스가 생성되지 않아 리소스가 낭비되지 않는지 확인
+- [x] 뒤로가기 또는 '설계영역으로 돌아가기' 버튼 정상 작동 확인
@@ -0,0 +1,19 @@
+## 1. PNG to SVG 변환 엔진 (Transformation)
+- [x] 브라우저 기반 벡터라이징 라이브러리(Potrace) 통합 완료
+- [x] 소스 리스트의 PNG 파일을 읽어 실제 벡터 `<path>` 데이터로 추출하는 Processor 모듈 구현
+- [x] 성능 최적화: 대량의 파일 변환 시 순차 처리 로직 구현
+
+## 2. 변환 품질 검수 및 비교 UI (Review)
+- [x] **Side-by-Side 뷰**: 원본 PNG와 변환된 SVG를 동일 크기로 나란히 배치하여 시각적 비교 지원
+- [x] **가변 옵션 조절**: 기본 임계값 적용 및 벡터화 결과 즉시 반영 로직 구현
+- [x] **최종 채택 토글**: 개별 에셋별로 [PNG 유지] 또는 [SVG 채택] 중 하나를 명시적으로 선택하는 기능
+
+## 3. 다중 선택 및 벌크 속성 편집 (Bulk Edit)
+- [x] 그리드 내 여러 에셋 선택 시 우측 패널에 '일괄 편집' 모드 활성화
+- [x] **공통 속성 적용**: 선택된 모든 에셋에 대해 카테고리 일괄 변경 기능 구현
+- [x] **명명 규칙(Naming Rule)**: 파일명을 기반으로 ID 및 라벨 자동 생성 로직 반영
+
+## 4. 메타데이터 및 상태 관리
+- [x] 가공 중인 에셋들의 실시간 세션 상태 유지 (`studio/state.js`)
+- [x] 유효성 검사: 필수 값(Label) 실시간 업데이트 반영
+- [x] 작업 중인 이미지의 프리뷰 및 선택 상태 시각화
@@ -0,0 +1,23 @@
+## 1. 패키지 메타데이터 입력 UI
+- [x] 상단 툴바에 패키지 ID(영문/숫자/언더바), 이름, 버전 입력 필드 추가
+- [x] 패키지 전용 벤더(Vendor) 및 아이콘 지정 기능 구현
+- [x] 필수 값 입력 여부 유효성 검사 로직 추가
+
+## 2. 서버 측 저장 API (Backend)
+- [x] `api_routes.py`에 `/api/studio/save-pack` POST 엔드포인트 구현
+- [x] 서버의 `static/assets/packs/[pack_id]/` 디렉토리를 자동 생성하고 이미지 파일 저장
+- [x] 가공된 에셋 정보를 바탕으로 최종 `package.json` 파일 생성 및 저장
+
+## 3. Build & Publish 워크플로우
+- [x] `[Build Package]` 버튼 클릭 시 가공된 모든 에셋(SVG/PNG 선택본)을 수집하여 서버로 전송
+- [x] 진행 상태 표시(Progress Bar) 및 성공/실패 알림 모달 구현
+- [x] 성공 시 생성된 패키지 요약 정보(에셋 개수, 용량 등) 표시
+
+## 4. 설계영역(Designer) 즉시 반영
+- [x] 패키지 저장 후 설계영역으로 이동 시 신규 패키지가 라이브러리에 자동 로드되는지 확인
+- [x] 라이브러리 내 카테고리가 `package.json`의 정의대로 올바르게 그룹화되는지 검증
+- [x] 새로 추가된 에셋을 캔버스에 드랍했을 때 이미지 경로가 정상적으로 해석되는지 최종 확인
+
+## 5. 데이터 모델 확장 및 검증 (Future Proof)
+- [x] 향후 Rack 배치를 고려한 `Front/Back View` 정보가 `package.json`에 포함될 수 있는 구조인지 재확인
+- [x] 패키지 삭제 또는 덮어쓰기(Overwrite) 시의 안정성 확보
@@ -0,0 +1,33 @@
+# Object Studio 테스트 시나리오 (Verification)
+
+본 시나리오는 스튜디오의 핵심 가공 기능(Phase 3)을 검증하기 위한 절차입니다.
+
+## 시나리오: 멀티 벤더 패키지 제작 및 설계영역 연동
+
+### 1. 이미지 준비 및 수집 (Ingestion)
+*   **파일 로드**: 로컬의 PNG 아이콘 파일 3~5개를 준비하여 워크스페이스로 드래그 앤 드롭함.
+*   **검증**: 좌측 소스 리스트에 파일명이 나타나고, 중앙 그리드에 실시간 프리뷰가 렌더링되는지 확인.
+
+### 2. 단일 에셋 정밀 가공 (Processing)
+*   **변환 실행**: 그리드에서 하나의 PNG 파일을 선택하고 우측 패널의 `[Convert to SVG]` 버튼을 누름.
+*   **비교 검수**:
+    *   화면에 나타나는 [Original PNG]와 [Vectorized SVG]의 품질을 비교.
+    *   임계값(Threshold) 바를 조절하여 외곽선이 깔끔하게 추출되는지 확인.
+    *   `[채택(SVG)]` 버튼을 눌러 결과가 반영되는지 확인.
+*   **속성 입력**: 에셋의 표시 이름을 'Core Router'로 변경하고 카테고리를 'Network'로 지정.
+
+### 3. 벌크 속성 편집 (Bulk Edit)
+*   **다중 선택**: 나머지 3개의 이미지를 `Ctrl+Click`으로 선택.
+*   **일괄 적용**: 우측 패널에서 제조사(Vendor)를 'Cisco'로 일괄 입력하고 `[Apply]` 클릭.
+*   **검증**: 각 에셋을 개별 클릭했을 때 제조사 정보가 모두 'Cisco'로 동기화되었는지 확인.
+
+### 4. 패키징 및 최종 발행 (Packaging)
+*   **정보 입력**: 상단 툴바의 패키지 명칭을 'My_Cisco_Pack'으로 입력.
+*   **발행**: `[Build Package]` 버튼을 눌러 서버에 에셋과 `package.json`이 저장되는지 확인.
+*   **연동 확인**: 설계영역(Draw)으로 돌아갔을 때 좌측 라이브러리에 'My_Cisco_Pack' 섹션이 새로 나타나는지 확인.
+
+---
+
+## 성공/실패 판정 기준
+*   **Success**: 모든 에셋이 `package.json`에 정의된 대로 라이브러리에 그룹화되어 나타남.
+*   **Failure**: 변환 중 브라우저 멈춤, 데이터 누락, 또는 설계영역에서 아이콘이 깨짐.