v0.1.71

v0.1.71 — 호스팅 도메인 트리 (TLD → 2차 → 서브 → 하위 서브) + 토글

사용자 요청

• "프로젝트가 웹이면 example.com 과 api.example.com / www.example.com 등 도메인을 TLD → 2차 도메인 → 서브도메인 트리 형태로 노드 표시. 각 도메인에 deploy 되는 html/css 등 파일과 엣지로 연결. 표시 여부 토글 가능"
• 예시: api.dev.example.com → com (TLD) → example (root) → dev (sub depth 2) → api (sub depth 3) 4 단계 노드.
• #### 1) 신규 헬퍼 src/utils/domainTree.ts
• normalizeHostname(url) — https:///port/path 제거 후 hostname 만.
• splitHostname(host) — TLD/root/subs 로 분해 (단순 휴리스틱, Public Suffix List 통합은 추후).
• DomainTreeNode 인터페이스 — kind('tld'/'root'/'sub'), label, fullHostname, parentId, depth, isHosted, hosted, childrenIds.
• buildDomainTree(hostingDomains) — flat 도메인 리스트 → 계층 트리.
• #### 2) 노드 ID 규칙 변경
• 기존: domain:<provider>:<domain> 단일 노드 / 도메인
• 신규: 트리 노드 별로
• TLD: domain:tld:com
• root: domain:root:com:example
• sub leaf/intermediate: domain:sub:<full-hostname>
• useFlowParticleSpawner.ts 의 deploy particle target ID 도 새 규칙으로 매핑.
• #### 3) Graph2D.tsx 노드/엣지 빌더 확장
• 도메인 노드 빌더 — buildDomainTree() 결과를 React Flow 노드로 변환.
• 레이아웃: depth 별 X column (TLD = baseX, 다음 column 마다 +220px), leaf Y 는 DFS in-order 순서로 수직 stack, 부모 Y = 자식 Y 평균 (재귀).
• 너비: leaf (isHosted) 240px, 중간 노드 140px.
• domainTreeEdges 신규 useMemo:
• 부모-자식 엣지 (회색 점선 4 3, domain-tree kind).
• leaf 호스팅 도메인 ↔ source config 파일 (vercel.json / wrangler.toml 등) 초록 dashed 엣지 (domain-deploy kind).
• allEdges 에 합산.
• #### 4) DomainNode.tsx 분기 — 트리 노드 종류별 시각
• 중간 노드 (TLD/root/intermediate sub, !isHosted): 작은 카드 (120-180px), kind 라벨 + segment 라벨만.
• leaf 호스팅 도메인 (isHosted=true): 기존 full 카드 (provider 배지 + visitors + source).
• 트리 양방향 핸들 (src-r / tgt-r) — 우측 column 안에서 부모/자식 연결.
• #### 5) shared/types.ts — EdgeKind 확장
• 'domain-tree' (계층선) + 'domain-deploy' (config↔domain 배포 엣지) 추가.
• src/utils/edgeStyle.ts — 두 종류의 stroke/dash/width 정의.
• #### 6) viewStore.showDomainTree 토글 + ViewOptionsPanel
• viewStore: showDomainTree: boolean (기본 true) + setShowDomainTree + persist.
• ViewOptionsPanel.tsx CloudMcpSection 에 새 Toggle (Globe 아이콘) 추가.
• i18n: settings.view.showDomainTree + Desc 키 ko/en.
• #### 7) 검증
• npx tsc --noEmit exit=0.
• 사용자 시나리오: 호스팅 도메인이 여러 개인 프로젝트 (예: vercel + cloudflare workers + custom domain) 로드 시 그래프 좌측에 4-column 트리 시각화 + 토글 OFF 시 모든 도메인 노드/엣지 사라짐.
• #### 8) 파일 변경
• 신규: src/utils/domainTree.ts
• 수정: Graph2D.tsx / DomainNode.tsx / viewStore.ts / useFlowParticleSpawner.ts / edgeStyle.ts / ViewOptionsPanel.tsx
• 타입: shared/types.ts (EdgeKind 2개 추가)
• locale: ko.json / en.json (showDomainTree 2 키)
• 버전: 0.1.70 → 0.1.71
• --

📦 GitHub 릴리스 노트: v0.1.71