v0.2.43

v0.2.43 — 노드/말풍선 100% 불투명 + 풍선 관통 클릭 차단 + 캐릭터 영역 존중 + 동일 Y선상 배치

WebGLGraph2D.tsx:616

• — 파일 노드 카드: bg-bg-elevated/90 → bg-bg-elevated (100%).

WebGLGraph2D.tsx:2448

• — 가상 노드 카드: rgba(11, 14, 20, 0.92) → rgba(11, 14, 20, 1) (100%).

말풍선

• (SpeechBubble.tsx): 이미 v0.2.42 에서 bgAlphaHex = 'ff' (100%) hardcode 됨. 추가 작업 없음.

(2) 말풍선 관통 클릭 차단

원인

• AgentAvatars2D.tsx:364 의 overlay 컨테이너가 pointer-events-none 으로 설정되어 있고 (의도된 — 아바타가 노드 클릭을 막지 않게), SpeechBubble 도 pointer-events-none 을 상속받음. 결과: 풍선이 시각적으로 노드 위에 떠 있어도 그 영역 클릭이 노드로 통과되어 노드가 선택됨.

해결

• SpeechBubble.tsx:231 의 pointer-events-none → pointer-events-auto. CSS spec 상 자식의 explicit auto 는 부모의 none 을 override → 풍선 영역만 정확히 클릭 차단. 아바타 본체와 trail 은 그대로 통과 (기존 UX 유지).

(3) 말풍선 위치 — 동일 Y 선상 + 캐릭터 영역 존중

현재

• top: -30 으로 캐릭터보다 위에 배치, GAP_X: 24 로 글로우 링 (28px) 안쪽에 침범.

해결 (SpeechBubble.tsx)

• GAP_X 24 → 40px: 아바타 글로우 링 (anchor 에서 ±28px) 의 바깥에 12px 여유로 배치. 풍선이 캐릭터 영역 침범 0.
• top default -30 → 0 + transform: translateY(-50%): 풍선의 수직 중앙이 캐릭터 anchor 와 일치 → 좌/우 어디 있든 동일 Y선상.
• transformOrigin: 'left center' (right side) / 'right center' (left side).

호출자 stack 간격 재조정

• AgentAvatars2D.tsx:1085, WebGLGraph2D.tsx:1867
• 단일/이중 아바타 (idx 0, 1): top: 0 — 모두 캐릭터와 동일 Y선상, 좌/우 분리.
• 3명 이상 (rare): top: -tier * 75 (tier = floor(idx/2)) — 같은 side 면 75px 씩 위로 stack.

3D 호출자

• AgentAvatars3D.tsx:568 — offset.top 명시 제거 (default 0 사용). wrapper anchor [0, 2.8, 0] 와 풍선 수직 center 일치.

변경 파일

• 수정: src/components/Visualizer2D/WebGLGraph2D.tsx — line 616 (파일 노드 bg), line 2448 (가상 노드 bg), line 1867 (bubble stack 간격).
• 수정: src/components/Avatars/SpeechBubble.tsx — line 231 pointer-events-auto, GAP_X 40, top default 0, translateY(-50%) transform, transformOrigin center.
• 수정: src/components/Avatars/AgentAvatars2D.tsx:1085 — top stack 간격 -30-i*95 → -tier*75.
• 수정: src/components/Avatars/AgentAvatars3D.tsx:568 — offset.top -20 제거.
• 수정: package.json 0.2.42 → 0.2.43.

검증

• npx tsc --noEmit exit=0
• npm run build 성공 — renderer 7.38s, 번들 3,447.23 kB.

사용자 확인

• WebGL: 파일/가상 노드 모두 그리드가 비치지 않음 (100% 불투명).
• 풍선 영역 클릭: 더 이상 뒤의 노드가 선택되지 않음.
• 1~2명 아바타: 캐릭터 좌/우 GAP 40px 떨어진 곳에 풍선, 캐릭터와 정확히 동일 Y선상. 글로우 링 침범 없음.
• 3명 이상: tier 별로 75px 위로 stack, 좌/우 분리로 겹침 없음.
• --

📦 GitHub 릴리스 노트: v0.2.43