v0.1.49

v0.1.49 — HTTP 엔드포인트 hostname 그룹화 + 강조 엣지 오버레이 + 축 가시성 강화

요청 1

• "외부 서비스 노드들은 플랫폼이나 서비스 종류 별로 Y축을 분리"

변경 파일

• src/components/Visualizer2D/Graph2D.tsx httpEndpoints useMemo:
• 각 HTTP api: 노드의 URL 에서 hostname 추출 (new URL(url).hostname).
• 변수 보간 형태 (${apiBase}/...) → 'template' 그룹 / 빈 URL → 'unknown' 그룹.
• hostname 별 그룹핑 후 노드 수 desc 정렬 (큰 그룹 위에). template/unknown 은 항상 아래.
• 그룹 내부: HTTP method 순 (GET → POST → PUT → PATCH → DELETE) → URL 알파벳.
• 그룹 사이 1.5 행 (84px) 시각적 갭.

요청 2

• "2D모드에서 X축 Y축 표시 기능 구현"

이미 구현됨

• — showAxisX / showAxisY 토글로 X/Y 축 선 + 라벨 표시 (AxisLineNode/AxisLabelNode).

v0.1.49 강화

• opacity 0.55 → **0.7** (더 또렷)
• line 두께 1px → **2px**, glow shadow 0 0 10px (이전 6px)
• CSS 신규: .react-flow__node-axisLine / axisLabel z-index 2 (엣지 위, 노드 아래)

요청 3

• "뷰포트에서 노드 선택시 강조된 엣지는 노드의 Z 높이보다 높게 표시"

변경 파일

• src/components/Visualizer2D/Graph2D.tsx 신규 <HighlightedEdgesOverlay /> (87줄):
• ReactFlow 의 useRFStore + useViewport 로 edges/nodes/viewport 직접 구독.
• selectedNodeId 와 연결된 엣지만 필터.
• 별도 SVG 레이어 (absolute inset-0, z-index 10) — viewport transform 동일 적용.
• 각 강조 엣지: cubic bezier 경로 + 글로우 outer stroke (width 6, opacity 0.25) + 본체 (width 2.2, opacity 0.95).
• 일반 엣지의 smoothstep/step 모양과 다른 부드러운 곡선 — 강조 효과로 시각 구분.
• ReactFlow 엣지 컨테이너의 z-index 1 (v0.1.48) 을 우회하여 강조 엣지만 노드 위 z-index 10 으로 떠오름.

검증

• npx tsc --noEmit exit=0. npm run build 성공 — out/renderer/index-VyepZ9Dl.js 3,078.11kB (+4kB).

📦 GitHub 릴리스 노트: v0.1.49