v0.2.42
v0.2.42 — 말풍선 좌/우 측면 배치 + 완전 불투명 + WebGL 추적 중지 버그 fix
SpeechBubble.tsx
centerX?: booleanprop 제거 →side?: 'left' | 'right'prop (default'right').side='right':left: 24CSS,transformOrigin: 'left top'. 꼬리는 풍선 좌측 (좌하단 캐릭터 향함,borderLeft + borderBottom).side='left':right: 24CSS,transformOrigin: 'right top'. 꼬리는 풍선 우측 (우하단 캐릭터 향함,borderTop + borderRight).- 호출 측이
offset.left/offset.right직접 지정 시 그 값을 사용 (역방향 호환).
호출자에서 좌/우 분배 (겹침 방지)
AgentAvatars2D.tsx: 같은 path 의 avatar 별samePathIndex % 2 === 0 ? 'right' : 'left'.stackTier = Math.floor(samePathIndex / 2)만큼 위로 95px stack. 짝수/홀수 페어가 같은 row 에 좌/우 분배, 그 이상은 위로 stack.- 예) idx 0 → right top -30, idx 1 → left top -30, idx 2 → right top -125, idx 3 → left top -125.
WebGLGraph2D.tsx: 동일 로직 (stackIdx).AgentAvatars3D.tsx: 3D 는 각 아바타가 독립 Html element 라 화면상 자연 분산 → alternation 불필요,side='right'고정.
(2) 완전 불투명 — fade + userOpacity 제거
SpeechBubble.tsx
bgAlphaHex = 'ff'hardcode (기존엔Math.max(0.92, userOpacity)cap 적용된 hex).thoughtBgAlphaHex = 'ff'(기존엔Math.max(0.85, userOpacity * 0.92)).finalOpacity = 1(기존엔 age 21초+ → 0.65, 27초+ → 0.4 의 fade-out).useViewStore((s) => s.bubbleOpacity)호출 제거 — 이 컴포넌트에선 슬라이더 값 무시. (settingsStore 의 슬라이더 자체는 보존 — 다른 곳이 참조할 수 있음.)alphaHex함수는 보존 +void alphaHex로 unused warning 차단 (차후 부분 fade 재도입 시 활용 가능).- 30초 TTL 은
selectBubbleContent가 그대로 처리 → 자연스러운 unmount.
(3) WebGL 추적 중지 버그 fix
원인
FollowCameraWebGL의 두 useEffect 모두followedAgent → null또는followEnabled → false전환 시 정확히 처리하지 못함.- 첫 useEffect (line 2082):
if (!followEnabled || !avatarTarget) return;로 early-return →targetRef.current리셋 안 함. - 두 번째 useEffect (line 2097):
followEnabled=false일 때만 리셋.followedAgent=null인데followEnabled=true면 통과해버림 (early return 후targetRef.current유지). - 결과: 추적 중지 후에도
targetRef.current가 마지막 타깃 좌표 유지 →useFrame이 그 좌표로 lerp 계속 → 사용자가 "계속 따라가는" 으로 보고.
해결
- 별도 useEffect 추가 —
followedAgent또는followEnabled가 falsy 가 되면 즉시targetRef.current = null; lastTargetPath.current = null;.useFrame첫 줄의if (!targetRef.current) return;가 즉시 lerp 중단.
변경 파일
- 수정:
src/components/Avatars/SpeechBubble.tsx— Props 의centerX→side. 위치/transform 분기. 꼬리 좌/우 거울. opacity 1.0 hardcode. - 수정:
src/components/Avatars/AgentAvatars2D.tsx:1085—bubbleSide+stackTier계산 + SpeechBubble 호출 갱신. - 수정:
src/components/Visualizer2D/WebGLGraph2D.tsx:1867— 동일 패턴. 별도로 추적 중지 fix useEffect 추가 (line 2078 근처). - 수정:
src/components/Avatars/AgentAvatars3D.tsx:568—side="right"명시 +offset.top -20. - 수정:
package.json0.2.41 → 0.2.42.
검증
npx tsc --noEmitexit=0npm run build성공 — renderer 6.34s, 번들 3,447.08 kB.
사용자 확인
- 2D / WebGL: 같은 노드에 여러 아바타가 있어도 짝수 → 우측, 홀수 → 좌측 으로 분리 표시. 풍선 가독성 100% (불투명).
- 3D: 캐릭터 우측 머리 옆에 풍선. 다른 캐릭터들은 3D 공간상 분산되어 자연스럽게 분리.
- WebGL 카메라 추적 중지 (AgentFollowPanel "추적 중지" 또는 같은 카드 재클릭): 카메라가 그 자리에 즉시 정지. 더 이상 마지막 타깃 좌표로 lerp 안 함.
- --
📦 GitHub 릴리스 노트: v0.2.42