v0.2.61

v0.2.61 — 노드 자체를 이미지로 교체 + 파일 확장자별 매핑

변경 사항

• *사용자 요청**: "노드 등의 에셋 변경하는건 노드 자체를 이미지로 변경하는 기능이야, 아이콘이 아니라. 파일 형식에 따라 별도의 이미지를 지정할 수 있도록".

v0.2.58 의 한계

• v0.2.58 은 작은 아이콘 자리(w-3.5 h-3.5)만 이미지로 교체. 카드 본체는 그대로.
• 매핑이 node-file / node-directory 2 가지만. 파일 확장자별 구분 불가.

해결

• *(1) viewportAssetStore.ts 확장 — 확장자별 매핑**
• 신규 ExtensionAssetEntry { extension, url, label }.
• 신규 byExtension: Map<string, ExtensionAssetEntry> (별도 localStorage vw.viewport-assets-ext.v1).
• 신규 upsertExtension / removeExtension actions.
• 신규 helper normalizeExtension(s) — '.PY' / 'py' / '*.py' 모두 'py' 로.
• 신규 helper resolveNodeImage({ path, isDirectory }):
• 우선순위: 확장자별 (byExtension.get(ext)) → kind 일반 (node-directory / node-file).
• 예: src/main.py + py 등록 → py 이미지. py 미등록 + node-file 등록 → node-file 이미지.
• load() 가 두 storage key 모두 로드.
• *(2) AssetsTab UI 신규 Section — "파일 확장자별 이미지"**
• 확장자 입력 + 이미지 업로드 + 등록 버튼.
• 등록된 확장자 목록 (정렬, 미리보기, 삭제).
• 기존 kind 별 section 과 분리 — 독립 관리.
• *(3) FileNodeCard.tsx — 노드 본체가 이미지로 교체**
• v0.2.58: <img> 가 작은 아이콘 자리(w-3.5 h-3.5)만 차지.
• v0.2.61: customNodeImageUrl 존재 시 카드 본체 레이아웃이 완전히 다른 분기로 —
• 이미지가 카드의 main visual (max-h-[64px] 큰 영역).
• 라벨은 이미지 아래 작은 텍스트.
• 좌측 색 띠 + 우상단 status overlay (NEW/Bot/Eye/active dot) 절대 위치.
• import resolveViewportAsset → resolveNodeImage.

변경 파일

• src/store/viewportAssetStore.ts — Extension entry, byExtension Map, resolveNodeImage helper, normalize 헬퍼.
• src/components/Layout/SettingsModal.tsx — AssetsTab 의 확장자 section.
• src/components/Visualizer2D/FileNodeCard.tsx — image-dominant 카드 레이아웃.
• package.json 0.2.60 → 0.2.61.

검증

• npx tsc --noEmit exit=0
• npm run build 성공 — renderer 7.59s, 번들 3,490.47 kB (+10 kB, AssetsTab 확장).

사용자 확인

• 설정 → 에셋 탭 → "파일 확장자별 이미지" 섹션 → py 입력 + 업로드 → React Flow 2D 의 모든 .py 노드 본체가 그 이미지로 교체.
• 같은 시점에 ts / md / png 등 다른 확장자 각각 다른 이미지 매핑 가능.
• 확장자 미등록 파일은 node-file 일반 이미지 (있을 때) → 없으면 기본 SVG 아이콘 fallback.
• 노드 본체에 이미지가 64px 까지 표시 + 라벨 작게 + status 배지가 우상단 overlay.
• --

📦 GitHub 릴리스 노트: v0.2.61