issue-sticker 0.8.1 → 0.9.1

package/CHANGELOG.md

@@ -2,6 +2,44 @@
 
 npm 패키지 `issue-sticker`의 변경 이력입니다. 설치·업그레이드에 영향을 주는 변경만 기록합니다.
 
+## 0.9.1 - 2026-09-23
+
+### 개선
+
+- 이슈 상세의 웹소켓 프레임이 JSON 이면 JSON 보기로 표시합니다. 항목을 접고 펼치거나 복사할 수 있고, socket.io 형식(`42[...]`)도 뒤의 JSON 을 같은 방식으로 보여줍니다.
+- 연속된 하트비트(핑·퐁)는 한 줄로 접어 보여줍니다. 클릭하면 한 건씩 펼칩니다.
+
+### 수정
+
+- 초기화 직후 세션 리플레이 녹화를 바로 시작합니다. 첨부 가능 여부 확인을 기다리는 동안의 화면이 빠지던 문제를 수정했습니다.
+- headless 클라이언트에서 로그인하거나 로그아웃해도 그때까지 녹화한 세션 리플레이가 유지됩니다.
+- 세션 리플레이 앞부분이 기록 구간 길이에 맞춰 잘린 뒤에도 재생이 화면 크기 정보와 함께 시작됩니다.
+- 이슈를 생성할 때 오래 열려 있던 웹소켓 연결이 네트워크 로그에서 빠지던 문제를 수정했습니다. 로그가 많은 페이지에서 네트워크 로그가 50건을 넘어 저장되던 문제도 함께 수정했습니다.
+- 웹소켓 프레임을 한 건에 최대 256KB, 전체 6MB까지 저장합니다. 연결이 오래 열려 있어도 연결 직후의 프레임이 이 한도 안에서 남습니다. 새로고침 전후 연결이 섞여 다른 연결의 프레임이 보이던 문제도 수정했습니다.
+- 용량 상한에 걸려 뒷부분이 잘린 웹소켓 프레임도 JSON 보기로 표시합니다. 끊긴 마지막 항목은 빼고 보여주며 그 사실을 함께 알립니다.
+- 이슈 상세에서 네트워크·콘솔 로그 항목을 선택하면 목록의 검색어와 필터, 스크롤 위치가 초기화되던 문제를 수정했습니다.
+
+## 0.9.0 - 2026-09-18
+
+### 추가
+
+- `registerThree({ renderer, scene, camera, three })`를 추가했습니다. three.js로 그린 화면이 스크린샷에 담깁니다. 이전에는 WebGL 화면이 빈 칸으로 찍혔습니다. 변경이 있을 때만 그리는 앱(편집기, 제품 컨피규레이터)은 이 등록이 있어야 화면이 찍힙니다. 반환값을 호출하면 등록이 해제됩니다.
+- 캔버스를 클릭하거나 드래그하면 그 시점의 화면과 카메라 위치가 세션 리플레이에 기록됩니다. `three`를 함께 넘기면 클릭한 오브젝트 이름도 기록됩니다. 드래그하는 동안에는 초당 2장씩 기록합니다. 2D 캔버스로 그린 차트도 함께 기록되며, 마스킹·차단 영역 안의 캔버스는 기록하지 않습니다.
+- 네트워크 로그에 웹소켓(WebSocket) 연결과 송수신 프레임이 함께 기록됩니다. 프레임 내용은 민감정보를 자동으로 마스킹하고, 연결 수·프레임 크기·보관 시간에 상한을 둡니다. headless는 `capture.socketLogs: false`로 끌 수 있습니다(기본값은 켜짐). **백엔드 1.8.0 이상이 필요합니다.** 이전 백엔드에서는 웹소켓 기록만 첨부되지 않고 이슈는 생성됩니다.
+- 툴바 메뉴에서 스티커 크기를 6~48px로 조절합니다. 기준 크기(32px)보다 작게 맞추면 마우스를 올렸을 때 기준 크기로 커집니다. 설정값은 이 브라우저에만 저장됩니다.
+
+### 개선
+
+- 세션 리플레이 기록 구간 길이를 서버 요금제 한도로 받습니다. 값이 없으면 기존과 같은 120초로 동작합니다.
+
+### 수정
+
+- 위젯이나 스티커를 클릭해도 서비스 화면에 열려 있던 드롭다운, 팝오버가 닫히지 않습니다. 이슈 생성 모드에서 스티커를 붙일 때도 같습니다.
+- 3D 화면이 스크린샷에 간헐적으로 빈 채로 찍히던 문제와, 세션 리플레이 재생 중 3D 화면이 잠깐씩 비어 보이던 문제를 수정했습니다.
+- 세션 리플레이에서 캔버스 화면이 특정 시점 이후 바뀌지 않던 문제를 수정했습니다.
+- 후처리(EffectComposer)를 사용하는 3D 화면에서 클릭한 오브젝트 이름과 카메라 정보가 잘못 기록되던 문제를 수정했습니다.
+- 리플레이 용량이 업로드 한도를 넘으면 오래된 구간부터 제외합니다. 이전에는 한도를 넘은 리플레이가 이슈에 첨부되지 않았습니다.
+
 ## 0.8.1 - 2026-09-15
 
 ### 개선

package/README.md

@@ -160,6 +160,39 @@ captureButton.onclick = () => client.startIssueCapture();
 클라이언트는 현재 상태를 읽기 전용 snapshot으로 넘겨줍니다. 메서드 전체, phase와 snapshot 모델, 동적 필드 descriptor, 에러 코드는 [Headless 가이드](https://issuesticker.com/guide/products/headless)에 있습니다.
 
 
+## three.js 화면 등록
+
+WebGL 캔버스는 브라우저가 화면에 합성한 뒤 내용을 비웁니다. 스크린샷을 찍는 시점에는 읽을 것이 남아 있지 않아, 3D 화면이 빈 채로 첨부됩니다.
+
+화면을 계속 다시 그리는 앱은 이슈스티커가 알아서 한 프레임을 받아 채웁니다. 변경이 있을 때만 그리는 앱(3D 편집기, 제품 컨피규레이터)은 렌더러를 등록해야 찍힙니다.
+
+```typescript
+import { IssueSticker } from 'issue-sticker/react';
+
+const unregister = IssueSticker.registerThree({ renderer, scene, camera });
+```
+
+Headless 에서는 같은 이름의 함수를 가져옵니다.
+
+```typescript
+import { registerThree } from 'issue-sticker/headless';
+
+const unregister = registerThree({ renderer, scene, camera });
+```
+
+등록하면 캡처 순간에 한 프레임을 더 그린 뒤 바로 읽습니다. 렌더러를 정리할 때는 반환된 함수를 호출합니다.
+
+`three` 네임스페이스를 함께 넘기면, 3D 화면을 클릭했을 때 **어떤 오브젝트를 눌렀는지 이름으로** 세션 리플레이 로그에 남습니다. 그 시점의 화면 한 장과 카메라 위치도 함께 기록됩니다.
+
+```typescript
+import * as THREE from 'three';
+
+IssueSticker.registerThree({ renderer, scene, camera, three: THREE });
+```
+
+오브젝트에 `name` 을 붙여 두면 그 이름이 그대로 로그에 나옵니다. 이름이 없으면 이름이 붙은 상위 그룹까지 올라가 찾습니다.
+
+
 ## 수집하는 정보
 
 `init()`이 끝난 시점부터 위젯이 호스트 페이지의 `fetch`, `XMLHttpRequest`, `console`을 감싸 네트워크 요청과 콘솔 출력을 메모리에 수집합니다. 이슈를 만들 때 그 시점의 최근 기록이 함께 첨부됩니다. 사용자가 이슈를 만들지 않으면 아무것도 전송되지 않습니다.