v0.2.42

v0.2.42 — 말풍선 좌/우 측면 배치 + 완전 불투명 + WebGL 추적 중지 버그 fix

SpeechBubble.tsx

• centerX?: boolean prop 제거 → side?: 'left' | 'right' prop (default 'right').
• side='right': left: 24 CSS, transformOrigin: 'left top'. 꼬리는 풍선 좌측 (좌하단 캐릭터 향함, borderLeft + borderBottom).
• side='left': right: 24 CSS, 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.json 0.2.41 → 0.2.42.

검증

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

사용자 확인

• 2D / WebGL: 같은 노드에 여러 아바타가 있어도 짝수 → 우측, 홀수 → 좌측 으로 분리 표시. 풍선 가독성 100% (불투명).
• 3D: 캐릭터 우측 머리 옆에 풍선. 다른 캐릭터들은 3D 공간상 분산되어 자연스럽게 분리.
• WebGL 카메라 추적 중지 (AgentFollowPanel "추적 중지" 또는 같은 카드 재클릭): 카메라가 그 자리에 즉시 정지. 더 이상 마지막 타깃 좌표로 lerp 안 함.
• --

📦 GitHub 릴리스 노트: v0.2.42