v0.2.49

v0.2.49 — 에이전트 추적 시 카메라 거리/줌 조절 기능

viewStore.ts

• cameraFollowZoom: number 필드 추가 (default 1.0, range 0.3 ~ 3.0).
• setCameraFollowZoom(v) 액션 (clamp 포함).
• PERSIST 리스트 (cameraFollowSensitivity 옆) 에 추가 — 사용자 설정 영속.

WebGL

• (WebGLGraph2D.tsx FollowCameraWebGL):
• useFrame 안에 zoom lerp 블록 신규.
• followEnabled && followedAgent 일 때만 발동 (wheel pan/zoom 침범 X).
• ortho.zoom += (followZoom - ortho.zoom) * speed — follow speed 와 동일 비율로 부드럽게 수렴.

React Flow

• (useFollowCamera2D.ts):
• rf.setCenter(cx, cy, { zoom: followZoom, duration }) — 기존 hardcoded zoom: 1.1 을 사용자 설정으로 교체.
• useEffect deps 에 followZoom 추가 → 사용자가 슬라이더 움직이면 즉시 다음 setCenter 에 반영.

3D

• (FollowCamera3D.tsx):
• baseDistanceRef 신규 — 추적 시작 시점의 camera-target 거리 캡쳐.
• 매 프레임 targetDist = baseDist / followZoom lerp (followZoom 2.0 → 절반 거리 → 가까이).
• followedAgent 가 null 이면 baseDistanceRef reset (useEffect).
• 각도 보존: camera → target 방향 벡터 정규화 후 새 거리만큼 곱해 위치 재설정.

UI

• (ViewOptionsPanel.tsx):
• 기존 follow sensitivity 슬라이더 바로 아래에 신규 슬라이더:
• 라벨: "추적 줌 (카메라 거리)" + 값 표시 (1.00× 형식).
• range 30-300 (= 0.3 ~ 3.0).
• 안내 텍스트: "0.30× = 멀리 / 1.00× = 기본 / 3.00× = 가까이. WebGL · 2D · 3D 모두 적용."

변경 파일

• src/store/viewStore.ts — 필드 + 액션 + PERSIST.
• src/components/Visualizer2D/WebGLGraph2D.tsx — useFrame zoom lerp.
• src/hooks/useFollowCamera2D.ts — setCenter zoom 옵션 동적.
• src/components/Avatars/FollowCamera3D.tsx — 거리 lerp + reset useEffect.
• src/components/Layout/ViewOptionsPanel.tsx — 슬라이더 UI.
• package.json 0.2.48 → 0.2.49.

검증

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

사용자 확인

• 설정 패널 (ViewOptionsPanel) 의 "추적 줌" 슬라이더 조정:
• 0.30× 로 내리면 카메라가 점진적으로 더 멀리 lerp → 주변 노드도 함께 보임.
• 3.00× 로 올리면 점진적으로 추적 대상에 더 가까이 lerp → 디테일 강조.
• 추적 중지 (followedAgent = null) 시 zoom 변화 적용 안 됨 (사용자 wheel zoom 유지).
• WebGL / React Flow / 3D 세 엔진 모두 같은 슬라이더로 일관된 동작.
• --

📦 GitHub 릴리스 노트: v0.2.49