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-treekind). - leaf 호스팅 도메인 ↔ source config 파일 (vercel.json / wrangler.toml 등) 초록 dashed 엣지 (
domain-deploykind). 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.tsxCloudMcpSection 에 새 Toggle (Globe 아이콘) 추가.- i18n:
settings.view.showDomainTree+Desc키 ko/en. - #### 7) 검증
npx tsc --noEmitexit=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