v0.2.58

v0.2.58 — 뷰포트 커스텀 에셋 (2D) MVP — 노드/배경/폴더 이미지 교체

2D 커스텀 이미지

• 7개 kind 지원
• node-file / node-directory / node-external / node-virtual / node-root (5종 노드)
• background (배경 타일)
• folder (폴더 영역)

3D 에셋

• 다음 iteration (UI 에 "예정" 안내 명시)

엣지 이미지

• 이미 v0.2.20 의 edgeImageStore 로 지원 중 — 별도 UI 통합은 다음 iteration

신규 파일

src/store/viewportAssetStore.ts

• — useViewportAssetStore + resolveViewportAsset(kind) 헬퍼.
• ViewportAssetKind type (7종).
• localStorage vw.viewport-assets.v1 영속화 (dataURL 직렬화).
• upsert / remove / clear / load actions + rev 변화 감지.
• edgeImageStore 와 동일한 패턴.

Settings UI — 신규 "에셋" 탭

• SettingsModal.tsx:
• TabId 에 'assets' 추가, TABS 배열 + i18n key (settings.tabs.assets ko/en).
• AssetsTab 컴포넌트 신규 — 7개 kind 별 카드 (미리보기 + 업로드 + 삭제 버튼).
• "모두 초기화" 버튼.
• "3D 에셋 업로드 (예정)" 안내 Section.
• 파일 input → FileReader.readAsDataURL → upsert.

2D 렌더링 적용

1. FileNodeCard.tsx (React Flow 노드 아이콘):

• customNodeImageUrl = resolveViewportAsset(node.isDirectory ? 'node-directory' : 'node-file').
• 있으면 Folder/KindIcon 대신 <img> 표시.
• useViewportAssetStore((s) => s.rev) 구독으로 store 변경 즉시 반영.

1. Graph2D.tsx (배경 타일):

• 신규 CustomBackgroundTileOverlay 컴포넌트 — resolveViewportAsset('background') 있으면 div + backgroundImage repeat 타일 오버레이.
• 64×64px 타일, opacity 0.35, pointerEvents none, zIndex 0.

추후 iteration

• WebGL 2D 노드 카드 (NodeOverlays) 커스텀 이미지 적용.
• 가상/외부/루트 노드 별도 처리 (현재는 file/directory 만).
• 폴더 영역 (TerritoryOverlay) 커스텀 이미지.
• 3D 에셋 (GLTF/FBX) 업로드 — 노드 메시 교체.
• edgeImageStore 와 통합 UI.

변경 파일

• 신규: src/store/viewportAssetStore.ts.
• 수정: src/components/Layout/SettingsModal.tsx (TabId/TABS/Tab content/AssetsTab).
• 수정: src/components/Visualizer2D/FileNodeCard.tsx (icon → custom image).
• 수정: src/components/Visualizer2D/Graph2D.tsx (CustomBackgroundTileOverlay).
• 수정: src/i18n/locales/ko.json + en.json (settings.tabs.assets).
• package.json 0.2.57 → 0.2.58.

검증

• npx tsc --noEmit exit=0
• npm run build 성공 — renderer 10.59s, 번들 3,480.66 kB (+7.6 kB, AssetsTab + viewportAssetStore).

사용자 확인

• 설정 → 에셋 탭 → "파일 노드" / "디렉토리 노드" 행에 PNG/JPG/SVG 업로드 → 즉시 React Flow 2D 의 모든 노드 아이콘이 업로드한 이미지로 교체.
• "배경 타일" 업로드 → 그래프 viewport 에 반복 타일로 표시.
• 삭제 또는 "모두 초기화" 로 복원.
• localStorage 영속 — 앱 재시작 후에도 유지.
• --

📦 GitHub 릴리스 노트: v0.2.58