issue-sticker 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 npm 패키지 `issue-sticker`의 변경 이력입니다. 설치·업그레이드에 영향을 주는 변경만 기록합니다.
 
+## 0.4.0 - 2026-08-27
+
+### 추가
+
+- 위젯 UI를 가로 캡슐 툴바로 바꿨습니다. 이슈 생성·화면 녹화·이슈 목록·멤버 로그인을 툴바에서 바로 열고, 나머지는 라벨이 달린 더보기 메뉴에 담았습니다. 툴바는 어디를 잡아도 끌어 옮길 수 있고 위치가 저장됩니다.
+- `toolbar` 설정으로 툴바 초기 위치를 지정합니다. `corner`(`'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'`, 기본 `'bottom-right'`)와 `offset`(코너로부터의 px, 기본 `{ x: 20, y: 20 }`)을 받습니다. 사용자가 끌어 저장한 위치가 있으면 그쪽이 우선합니다.
+- 호스트 페이지에서 툴바를 찾는 `[data-issue-sticker-toolbar]` 속성을 공개 계약으로 고정했습니다. 내부 클래스명은 계약이 아닙니다.
+- 녹화 중에는 툴바에 경과 시간과 중지 버튼이 나타납니다.
+- 이슈 생성 모드에서 커서가 스티커 미리보기로 바뀝니다.
+
+### 개선
+
+- `init()` 시점부터 네트워크·콘솔 로그를 모읍니다. 이슈를 만들 때 그때부터 모으는 것이 아니라, 위젯을 띄운 뒤 벌어진 일이 이슈에 담깁니다. 자세한 계측 범위는 README의 "수집하는 정보"를 확인하세요.
+- 페이지를 새로 고치거나 다른 문서로 이동해도 로그와 세션 리플레이가 이어집니다.
+- 네트워크·콘솔 로그와 세션 리플레이에서 자격증명으로 보이는 값, 국내 식별번호, 결제 관련 필드를 지웁니다. 마스킹이 원래 길이를 드러내지 않습니다.
+- 계측이 호스트 앱을 방해하지 않도록 보강했습니다. 다른 라이브러리가 이미 감싼 `fetch`·`XMLHttpRequest` 래퍼를 보존하고, 스트리밍 응답 본문은 캡처하지 않으며, 계측 내부 예외를 호출자에게 전파하지 않습니다. 예외가 반복되면 수집기가 스스로 패치를 걷어냅니다.
+
+### 수정
+
+- 네트워크 로그가 너무 커져 이슈 생성이 실패하던 문제를 고쳤습니다.
+- 저장된 툴바 위치가 화면 밖으로 나가거나 더보기 메뉴가 좌우로 잘리던 문제, 온보딩이 막다른 길로 빠지던 문제를 고쳤습니다.
+- 이슈 폼에서 읽기 전용·체크박스 필드가 옆 칸과 어긋나던 문제를 고쳤습니다.
+
+### 주의가 필요한 변경
+
+- 이슈를 만들 때 Jira·Notion 생성을 SDK가 직접 호출하지 않고 이슈 생성 요청에 실어 보냅니다. 서버가 대신 만들고, 실패해도 이슈는 남습니다. **백엔드 1.2.0 이상이 필요합니다.**
+- `onboarding` 설정에서 `'onFABClick'` 을 없앴습니다. FAB이 툴바로 바뀌면서 대응하는 동작이 사라졌습니다. 아는 값이 아니면 `'onMount'` 로 떨어지므로 기존 코드가 런타임에서 깨지지는 않지만, 타입은 더 이상 이 값을 받지 않습니다.
+- 이슈 댓글 관련 코드를 제거했습니다. 어느 표면에서도 노출된 적 없는 기능입니다.
+
 ## 0.3.1 - 2026-08-17
 
 ### 수정

package/README.md

@@ -29,7 +29,7 @@ npm install issue-sticker
 
 | 경로                           | 용도                                                    |
 | ------------------------------ | ------------------------------------------------------- |
-| `issue-sticker/react`          | 위젯 UI(FAB, 이슈 폼, 마커)를 마운트하는 React 어댑터   |
+| `issue-sticker/react`          | 위젯 UI(툴바, 이슈 폼, 마커)를 마운트하는 React 어댑터  |
 | `issue-sticker/headless`       | UI 없이 이슈 흐름을 구독하고 제어하는 컨트롤러 API      |
 | `issue-sticker/headless/react` | Headless UI를 직접 만들 때 사용하는 최소 React 헬퍼     |
 
@@ -61,15 +61,15 @@ export function IssueStickerWidget() {
 | ----------- | ------------------- | ------------------------------------------------- | ------------------------- |
 | 익명        | `user` 없이 초기화  | 조회 없음 (이번 세션에서 만든 이슈만 화면에 표시) | 불가 (자기가 만든 이슈도) |
 | 사용자 식별 | `user` 전달         | 해당 사용자가 만든 이슈                           | 자기가 만든 이슈만        |
-| 멤버        | FAB의 "멤버 로그인" | 프로젝트의 모든 이슈                              | 프로젝트의 모든 이슈      |
+| 멤버        | 툴바의 "멤버 로그인" | 프로젝트의 모든 이슈                              | 프로젝트의 모든 이슈      |
 
 ### 위젯 기능
 
-초기화를 마치면 화면 오른쪽 아래에 FAB가 표시됩니다. FAB는 아래 기능을 제공하며, 드래그로 위치를 옮길 수 있습니다.
+초기화를 마치면 화면 모서리(기본 오른쪽 아래)에 툴바가 표시됩니다. 툴바는 아래 기능을 제공하며, 드래그로 위치를 옮길 수 있습니다.
 - 이슈 생성
 - 화면 녹화
 - 마커 표시 토글
-- 마커 기준 전환(생성 위치 기준 / 대상 요소 기준)
+- 마커 기준 전환(생성 위치 기준 / 캡처 대상 요소 기준)
 - 미표시 스티커 확인
 - 가이드 다시 보기
 - 멤버 로그인·로그아웃
@@ -91,10 +91,16 @@ export function IssueStickerWidget() {
 | ----------------------- | ------------------------------------ | ---- | ------------------------------------------------------------------------------------------- |
 | `apiKey`                | `string`                             | O    | 관리자 콘솔에서 발급한 SDK API key                                                          |
 | `user`                  | `SDKUser`                            | X    | 앱의 사용자 정보. 제공하면 작성자가 기록되고 자기 이슈를 조회·수정·삭제할 수 있습니다 |
-| `onboarding`            | `'off' \| 'onMount' \| 'onFABClick'` | X    | 온보딩 가이드 트리거. 기본값 `'onMount'`. `'off'`면 "가이드 다시 보기" 버튼도 숨겨집니다           |
+| `onboarding`            | `'off' \| 'onMount'`                 | X    | 온보딩 가이드 트리거. 기본값 `'onMount'`. `'off'`면 "가이드 다시 보기" 버튼도 숨겨집니다           |
+| `toolbar`               | `{ corner?, offset? }`               | X    | 툴바 초기 위치. `corner`는 `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`(기본 `'bottom-right'`), `offset`은 코너로부터의 px(기본 `{ x: 20, y: 20 }`). 사용자가 드래그해 저장한 위치가 있으면 그쪽이 우선합니다 |
 | `screenshotCompression` | `{ useWebWorker?: boolean }`         | X    | 스크린샷 압축을 Web Worker에서 할지 여부                                                    |
 | `enabled`               | `boolean`                            | X    | 위젯 활성화 여부. 기본값 `true`. `useIssueSticker` 전용                                     |
 
+### 툴바 셀렉터
+
+호스트 페이지에서 툴바 위치를 알아야 한다면 `[data-issue-sticker-toolbar]`로 찾으세요.
+이 속성은 공개 계약이며 버전 간 유지됩니다. 내부 클래스명은 계약이 아니므로 의존하지 마세요.
+
 컴포넌트가 마운트되면 위젯을 초기화하고, 언마운트되면 정리합니다. `apiKey`나 `enabled`가 바뀌면 위젯을 다시 초기화하고, `user`만 바뀌면 위젯을 유지한 채 설정만 갱신합니다.
 
 ### 훅 없이 초기화하기
@@ -154,6 +160,17 @@ captureButton.onclick = () => client.startIssueCapture();
 클라이언트는 현재 상태를 읽기 전용 snapshot으로 넘겨줍니다. 메서드 전체, phase와 snapshot 모델, 동적 필드 descriptor, 에러 코드는 [Headless 가이드](https://issuesticker.com/guide/products/headless)에 있습니다.
 
 
+## 수집하는 정보
+
+`init()`이 끝난 시점부터 위젯이 호스트 페이지의 `fetch`, `XMLHttpRequest`, `console`을 감싸 네트워크 요청과 콘솔 출력을 메모리에 수집합니다. 이슈를 만들 때 그 시점의 최근 기록이 함께 첨부됩니다. 사용자가 이슈를 만들지 않으면 아무것도 전송되지 않습니다.
+
+호스트 앱에 영향을 주지 않도록 다음을 지킵니다.
+
+- 다른 라이브러리가 이미 감싼 `fetch`·`XMLHttpRequest` 래퍼를 보존합니다. `destroy()`로 정리할 때도 타 라이브러리 래퍼를 지우지 않습니다.
+- 스트리밍 응답의 본문은 캡처하지 않습니다. 응답은 먼저 호출자에게 돌려주고 본문은 나중에 채웁니다.
+- 계측 내부에서 난 예외는 호출자에게 전파하지 않습니다. 예외가 반복되면 수집기가 스스로 패치를 걷어냅니다.
+- 자격증명으로 보이는 값, 국내 식별번호, 결제 관련 필드는 저장 전에 제거합니다.
+
 ## 문제 해결
 
 - 위젯이 보이지 않으면 프로젝트에 등록한 허용 도메인과 현재 `window.location.origin`이 같은지 확인하세요.

package/dist/{createLucideIcon-CmSNiW63.js → createLucideIcon-C0Ldhp96.js}

@@ -2,6 +2,23 @@ import * as React from "react";
 import { useLayoutEffect, forwardRef, createElement } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
+const OVERLAY_LAYER_INDEX = {
+  // 익스텐션·SDK 위젯의 shadow host. isolation:isolate 로 stacking context 를 만들기 때문에
+  // 아래 레이어 값들은 호스트 내부 순서만 정한다. 호스트 페이지의 오버레이와 겨루는 것은
+  // 이 값 하나뿐이라, 페이지가 쓸 수 있는 어떤 레이어보다 위여야 한다.
+  runtimeHost: 2147483647,
+  fab: 999999,
+  tourMask: 1000006,
+  tourPopover: 1000007
+};
+const OVERLAY_LAYER = {
+  shell: "z-[1000000]",
+  sdkLoginOverlay: "z-[1000003]",
+  dialogOverlay: "z-[1000004]",
+  dialogContent: "z-[1000005]",
+  floating: "z-[1000008]",
+  toast: "z-[1000010]"
+};
 /*! pako 2.2.0 https://github.com/nodeca/pako @license (MIT AND Zlib) */
 const Z_FIXED$1 = 4;
 const Z_BINARY = 0;
@@ -21612,23 +21629,9 @@ class Replayer {
     this.config.logger.log(REPLAY_CONSOLE_PREFIX, ...args);
   }
 }
-const OVERLAY_LAYER_INDEX = {
-  // 익스텐션·SDK 위젯의 shadow host. isolation:isolate 로 stacking context 를 만들기 때문에
-  // 아래 레이어 값들은 호스트 내부 순서만 정한다. 호스트 페이지의 오버레이와 겨루는 것은
-  // 이 값 하나뿐이라, 페이지가 쓸 수 있는 어떤 레이어보다 위여야 한다.
-  runtimeHost: 2147483647,
-  fab: 999999,
-  tourMask: 1000006,
-  tourPopover: 1000007
-};
-const OVERLAY_LAYER = {
-  shell: "z-[1000000]",
-  sdkLoginOverlay: "z-[1000003]",
-  dialogOverlay: "z-[1000004]",
-  dialogContent: "z-[1000005]",
-  floating: "z-[1000008]",
-  toast: "z-[1000010]"
-};
+const { addCustomEvent } = record;
+const { freezePage } = record;
+const { takeFullSnapshot } = record;
 function r(e2) {
   var t2, f2, n2 = "";
   if ("string" == typeof e2 || "number" == typeof e2) n2 += e2;
@@ -24104,6 +24107,14 @@ const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler == null ? void 0 : originalEventHandler(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler == null ? void 0 : ourEventHandler(event);
+    }
+  };
+}
 function setRef$1(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
@@ -24138,6 +24149,66 @@ function composeRefs(...refs) {
 function useComposedRefs(...refs) {
   return React.useCallback(composeRefs(...refs), refs);
 }
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext3(rootComponentName, defaultContext) {
+    const BaseContext = React.createContext(defaultContext);
+    BaseContext.displayName = rootComponentName + "Context";
+    const index2 = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider = (props) => {
+      var _a2;
+      const { scope, children, ...context } = props;
+      const Context = ((_a2 = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a2[index2]) || BaseContext;
+      const value = React.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext2(consumerName, scope) {
+      var _a2;
+      const Context = ((_a2 = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a2[index2]) || BaseContext;
+      const context = React.useContext(Context);
+      if (context) return context;
+      if (defaultContext !== void 0) return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider, useContext2];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = (scope == null ? void 0 : scope[scopeName]) || scopeContexts;
+      return React.useMemo(
+        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+        [scope, contexts]
+      );
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1) return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const Slot2 = React.forwardRef((props, forwardedRef) => {
@@ -24300,74 +24371,6 @@ var Primitive = NODES.reduce((primitive, node2) => {
 function dispatchDiscreteCustomEvent(target, event) {
   if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
-function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
-  return function handleEvent(event) {
-    originalEventHandler == null ? void 0 : originalEventHandler(event);
-    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
-      return ourEventHandler == null ? void 0 : ourEventHandler(event);
-    }
-  };
-}
-function createContextScope(scopeName, createContextScopeDeps = []) {
-  let defaultContexts = [];
-  function createContext3(rootComponentName, defaultContext) {
-    const BaseContext = React.createContext(defaultContext);
-    BaseContext.displayName = rootComponentName + "Context";
-    const index2 = defaultContexts.length;
-    defaultContexts = [...defaultContexts, defaultContext];
-    const Provider = (props) => {
-      var _a2;
-      const { scope, children, ...context } = props;
-      const Context = ((_a2 = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a2[index2]) || BaseContext;
-      const value = React.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx(Context.Provider, { value, children });
-    };
-    Provider.displayName = rootComponentName + "Provider";
-    function useContext2(consumerName, scope) {
-      var _a2;
-      const Context = ((_a2 = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a2[index2]) || BaseContext;
-      const context = React.useContext(Context);
-      if (context) return context;
-      if (defaultContext !== void 0) return defaultContext;
-      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-    }
-    return [Provider, useContext2];
-  }
-  const createScope = () => {
-    const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React.createContext(defaultContext);
-    });
-    return function useScope(scope) {
-      const contexts = (scope == null ? void 0 : scope[scopeName]) || scopeContexts;
-      return React.useMemo(
-        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
-        [scope, contexts]
-      );
-    };
-  };
-  createScope.scopeName = scopeName;
-  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
-}
-function composeContextScopes(...scopes) {
-  const baseScope = scopes[0];
-  if (scopes.length === 1) return baseScope;
-  const createScope = () => {
-    const scopeHooks = scopes.map((createScope2) => ({
-      useScope: createScope2(),
-      scopeName: createScope2.scopeName
-    }));
-    return function useComposedScopes(overrideScopes) {
-      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
-        const scopeProps = useScope(overrideScopes);
-        const currentScope = scopeProps[`__scope${scopeName}`];
-        return { ...nextScopes2, ...currentScope };
-      }, {});
-      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
-    };
-  };
-  createScope.scopeName = baseScope.scopeName;
-  return createScope;
-}
 function useCallbackRef(callback) {
   const callbackRef = React.useRef(callback);
   React.useEffect(() => {
@@ -27383,7 +27386,7 @@ export {
   Anchor as A,
   Content as C,
   DismissableLayer as D,
-  OVERLAY_LAYER_INDEX as O,
+  OVERLAY_LAYER as O,
   Primitive as P,
   Replayer as R,
   Slot as S,
@@ -27391,7 +27394,7 @@ export {
   cn as a,
   usePortalContainer as b,
   createLucideIcon as c,
-  OVERLAY_LAYER as d,
+  OVERLAY_LAYER_INDEX as d,
   useControllableState as e,
   useId as f,
   composeEventHandlers as g,