issue-sticker 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/README.md +100 -137
- package/headless.d.ts +139 -10
- package/package.json +1 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
npm 패키지 `issue-sticker`의 변경 이력입니다. 설치·업그레이드에 영향을 주는 변경만 기록합니다.
|
|
4
4
|
|
|
5
|
+
## 0.3.1 - 2026-08-17
|
|
6
|
+
|
|
7
|
+
### 수정
|
|
8
|
+
|
|
9
|
+
- `issue-sticker/headless`의 타입 선언이 패키지에 함께 배포되지 않는 내부 모듈을 참조해, 이 경로를 타입과 함께 사용하는 프로젝트에서 타입 검사가 실패하던 문제를 수정했습니다. 공개 타입은 이제 패키지 안에서 자체 선언하며, 내부 식별자 컬럼은 공개 타입에 포함하지 않습니다.
|
|
10
|
+
|
|
11
|
+
### 주의가 필요한 변경
|
|
12
|
+
|
|
13
|
+
- `issue-sticker/react.js`, `issue-sticker/headless.js`, `issue-sticker/headless/react.js` 경로를 제거했습니다. 문서에 없던 중복 경로이며 타입 정의도 연결되어 있지 않았습니다. 공개 경로는 `issue-sticker/react`, `issue-sticker/headless`, `issue-sticker/headless/react` 세 개입니다.
|
|
14
|
+
|
|
5
15
|
## 0.3.0 - 2026-08-12
|
|
6
16
|
|
|
7
17
|
### 추가
|
package/README.md
CHANGED
|
@@ -1,122 +1,105 @@
|
|
|
1
|
-
|
|
1
|
+
# issue-sticker
|
|
2
2
|
|
|
3
|
+
이 문서는 이슈스티커 SDK(IssueSticker SDK for JavaScript) 사용 방법을 안내합니다.
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
사용자가 화면을 클릭해 이슈를 남기면 스크린샷과 콘솔·네트워크 로그, 브라우저 정보가 함께 기록됩니다.
|
|
5
6
|
|
|
7
|
+
## 준비
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
### 지원 환경
|
|
8
10
|
|
|
11
|
+
`issue-sticker/react`와 `issue-sticker/headless/react`는 React 어댑터입니다. 앱에 `react`, `react-dom` 18 또는 19가 설치되어 있어야 합니다.
|
|
9
12
|
|
|
10
|
-
|
|
11
|
-
| ---------------------------------------------------------------- | --------------------------------------------- |
|
|
12
|
-
| [시작 준비](https://issuesticker.com/guide/products/setup) | 프로젝트 생성, 허용 도메인 등록, API key 발급 |
|
|
13
|
-
| [SDK Widget](https://issuesticker.com/guide/products/sdk) | 위젯 설치, 초기화, 운영 환경에서 켜는 조건 |
|
|
14
|
-
| [SDK Headless](https://issuesticker.com/guide/products/headless) | Headless 클라이언트 전체 레퍼런스 |
|
|
15
|
-
| [외부 연동](https://issuesticker.com/guide/integrations) | Jira·Notion 연결과 필드 동기화 |
|
|
16
|
-
| [FAQ](https://issuesticker.com/guide/faq) | 권한, 도메인, key, 필드 동기화 문제 해결 |
|
|
13
|
+
`issue-sticker/headless`는 React를 요구하지 않습니다. 프레임워크에 상관없이 사용할 수 있습니다.
|
|
17
14
|
|
|
15
|
+
### API key 발급
|
|
16
|
+
|
|
17
|
+
[관리자 콘솔](https://app.issuesticker.com)에서 프로젝트를 만들고, 위젯을 노출할 도메인을 허용 도메인으로 등록한 뒤 SDK API key를 발급받아야 합니다. SDK는 API key와 등록된 도메인을 기준으로 초기화합니다. 둘 중 하나라도 빠지면 위젯이 나타나지 않습니다.
|
|
18
|
+
|
|
19
|
+
발급 절차는 [시작 준비](https://issuesticker.com/guide/products/setup)에 있습니다.
|
|
18
20
|
|
|
19
21
|
## 설치
|
|
20
22
|
|
|
23
|
+
앱에 `issue-sticker` 패키지를 설치합니다.
|
|
21
24
|
|
|
22
25
|
```bash
|
|
23
26
|
npm install issue-sticker
|
|
24
27
|
```
|
|
25
28
|
|
|
26
29
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
| 경로 | 용도 |
|
|
34
|
-
| ------------------------------ | ----------------------------------------------------- |
|
|
35
|
-
| `issue-sticker/react` | 위젯 UI(FAB, 이슈 폼, 마커)를 마운트하는 React 어댑터 |
|
|
36
|
-
| `issue-sticker/headless` | UI 없이 이슈 흐름을 구독하고 제어하는 컨트롤러 API |
|
|
37
|
-
| `issue-sticker/headless/react` | Headless UI를 직접 만들 때 사용하는 최소 React 헬퍼 |
|
|
30
|
+
| 경로 | 용도 |
|
|
31
|
+
| ------------------------------ | ------------------------------------------------------- |
|
|
32
|
+
| `issue-sticker/react` | 위젯 UI(FAB, 이슈 폼, 마커)를 마운트하는 React 어댑터 |
|
|
33
|
+
| `issue-sticker/headless` | UI 없이 이슈 흐름을 구독하고 제어하는 컨트롤러 API |
|
|
34
|
+
| `issue-sticker/headless/react` | Headless UI를 직접 만들 때 사용하는 최소 React 헬퍼 |
|
|
38
35
|
|
|
36
|
+
## 초기화
|
|
39
37
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
## 빠른 시작 — 위젯
|
|
44
|
-
|
|
38
|
+
이슈스티커 초기화를 위한 컴포넌트를 생성합니다.
|
|
45
39
|
|
|
46
40
|
```tsx
|
|
47
41
|
'use client'; // Next.js App Router
|
|
48
42
|
|
|
49
43
|
import { useIssueSticker } from 'issue-sticker/react';
|
|
50
44
|
|
|
51
|
-
function
|
|
45
|
+
export function IssueStickerWidget() {
|
|
46
|
+
const { user } = useAuth(); // 앱의 사용자 정보
|
|
47
|
+
|
|
52
48
|
useIssueSticker({
|
|
53
49
|
apiKey: process.env.NEXT_PUBLIC_ISSUE_STICKER_SDK_KEY!,
|
|
54
|
-
user: { id:
|
|
55
|
-
enabled: isStaging ||
|
|
50
|
+
user: user ? { id: user.id, name: user.name } : undefined, // 사용자 식별
|
|
51
|
+
enabled: isStaging || user?.role === 'admin', // 노출 조건
|
|
56
52
|
});
|
|
57
53
|
|
|
58
|
-
return
|
|
54
|
+
return null;
|
|
59
55
|
}
|
|
60
56
|
```
|
|
61
57
|
|
|
58
|
+
### 사용자 식별
|
|
62
59
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
FAB에서는 이슈 생성, 화면 녹화, 마커 표시 토글, 마커 기준 전환(생성 위치 기준 / 대상 요소 기준), 미표시 스티커 확인, 가이드 다시 보기, 멤버 로그인·로그아웃을 사용할 수 있습니다.
|
|
60
|
+
| 모드 | 설정 | 이슈 조회 범위 | 수정·삭제 |
|
|
61
|
+
| ----------- | ------------------- | ------------------------------------------------- | ------------------------- |
|
|
62
|
+
| 익명 | `user` 없이 초기화 | 조회 없음 (이번 세션에서 만든 이슈만 화면에 표시) | 불가 (자기가 만든 이슈도) |
|
|
63
|
+
| 사용자 식별 | `user` 전달 | 해당 사용자가 만든 이슈 | 자기가 만든 이슈만 |
|
|
64
|
+
| 멤버 | FAB의 "멤버 로그인" | 프로젝트의 모든 이슈 | 프로젝트의 모든 이슈 |
|
|
69
65
|
|
|
66
|
+
### 위젯 기능
|
|
70
67
|
|
|
71
|
-
|
|
68
|
+
초기화를 마치면 화면 오른쪽 아래에 FAB가 표시됩니다. FAB는 아래 기능을 제공하며, 드래그로 위치를 옮길 수 있습니다.
|
|
69
|
+
- 이슈 생성
|
|
70
|
+
- 화면 녹화
|
|
71
|
+
- 마커 표시 토글
|
|
72
|
+
- 마커 기준 전환(생성 위치 기준 / 대상 요소 기준)
|
|
73
|
+
- 미표시 스티커 확인
|
|
74
|
+
- 가이드 다시 보기
|
|
75
|
+
- 멤버 로그인·로그아웃
|
|
72
76
|
|
|
73
77
|
|
|
74
|
-
|
|
78
|
+
### 단축키
|
|
75
79
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
apiKey: 'YOUR_API_KEY',
|
|
82
|
-
user: { id: 'user-123', name: 'Hong Gildong' },
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
client.subscribe((snapshot) => renderIssueUI(snapshot));
|
|
86
|
-
|
|
87
|
-
await client.initialize();
|
|
88
|
-
await client.refreshIssues();
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
현재 상태는 읽기 전용 snapshot으로 제공되며, 이슈 생성은 `startIssueCapture()`로 시작합니다.
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
전체 메서드, snapshot 타입, 동적 필드 descriptor, 에러 코드는 [Headless 가이드](https://issuesticker.com/guide/products/headless)를 참고하세요.
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
## API — `issue-sticker/react`
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
### `useIssueSticker(config)`
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
React 훅입니다.
|
|
105
|
-
`apiKey` 또는 `enabled`가 바뀌면 위젯을 다시 초기화하고, `user`가 바뀌면 위젯은 유지한 채 설정만 갱신합니다.
|
|
80
|
+
| 기능 | macOS | Windows·Linux |
|
|
81
|
+
| ------------------- | ----------- | ------------- |
|
|
82
|
+
| 이슈 생성 모드 토글 | `⌘⌥1` `⌃⌥1` | `Ctrl+Alt+1` |
|
|
83
|
+
| 화면 녹화 시작/중지 | `⌘⌥2` `⌃⌥2` | `Ctrl+Alt+2` |
|
|
84
|
+
| 이슈 생성 모드 종료 | `Esc` | `Esc` |
|
|
106
85
|
|
|
107
86
|
|
|
108
|
-
### `IssueSticker`
|
|
109
87
|
|
|
88
|
+
### 설정
|
|
110
89
|
|
|
111
|
-
|
|
90
|
+
| 속성 | 타입 | 필수 | 설명 |
|
|
91
|
+
| ----------------------- | ------------------------------------ | ---- | ------------------------------------------------------------------------------------------- |
|
|
92
|
+
| `apiKey` | `string` | O | 관리자 콘솔에서 발급한 SDK API key |
|
|
93
|
+
| `user` | `SDKUser` | X | 앱의 사용자 정보. 제공하면 작성자가 기록되고 자기 이슈를 조회·수정·삭제할 수 있습니다 |
|
|
94
|
+
| `onboarding` | `'off' \| 'onMount' \| 'onFABClick'` | X | 온보딩 가이드 트리거. 기본값 `'onMount'`. `'off'`면 "가이드 다시 보기" 버튼도 숨겨집니다 |
|
|
95
|
+
| `screenshotCompression` | `{ useWebWorker?: boolean }` | X | 스크린샷 압축을 Web Worker에서 할지 여부 |
|
|
96
|
+
| `enabled` | `boolean` | X | 위젯 활성화 여부. 기본값 `true`. `useIssueSticker` 전용 |
|
|
112
97
|
|
|
98
|
+
컴포넌트가 마운트되면 위젯을 초기화하고, 언마운트되면 정리합니다. `apiKey`나 `enabled`가 바뀌면 위젯을 다시 초기화하고, `user`만 바뀌면 위젯을 유지한 채 설정만 갱신합니다.
|
|
113
99
|
|
|
114
|
-
|
|
115
|
-
| --------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
|
116
|
-
| `init(config: SDKConfig)` | SDK를 초기화하고 위젯을 마운트합니다. 이미 초기화된 상태라면 설정을 갱신하고 위젯을 다시 마운트합니다 |
|
|
117
|
-
| `updateConfig(config: SDKConfig)` | 위젯을 유지한 채 설정만 교체합니다. 초기화 전이면 `init`과 동일하게 동작합니다 |
|
|
118
|
-
| `destroy()` | 위젯을 언마운트하고 SDK를 종료합니다 |
|
|
100
|
+
### 훅 없이 초기화하기
|
|
119
101
|
|
|
102
|
+
React 훅을 사용할 수 없는 경우 `IssueSticker`로 직접 제어합니다.
|
|
120
103
|
|
|
121
104
|
```typescript
|
|
122
105
|
import { IssueSticker } from 'issue-sticker/react';
|
|
@@ -124,92 +107,72 @@ import { IssueSticker } from 'issue-sticker/react';
|
|
|
124
107
|
IssueSticker.init({ apiKey: 'YOUR_API_KEY' });
|
|
125
108
|
```
|
|
126
109
|
|
|
110
|
+
#### init(config)
|
|
127
111
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
자세한 내용은 [Headless 가이드](https://issuesticker.com/guide/products/headless)를 참고하세요.
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
### `SDKConfig`
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
| 속성 | 타입 | 필수 | 설명 |
|
|
139
|
-
| ----------------------- | ------------------------------------ | ---- | ------------------------------------------------------------------------------------------- |
|
|
140
|
-
| `apiKey` | `string` | Yes | [관리자 콘솔](https://app.issuesticker.com)에서 발급한 SDK API key |
|
|
141
|
-
| `user` | `SDKUser` | No | 연동하는 앱의 사용자 정보. 전달하면 작성자가 기록되고 자신이 만든 이슈를 조회·수정·삭제할 수 있습니다. 전달하지 않으면(익명) 이번 세션에서 만든 이슈라도 수정·삭제할 수 없습니다 |
|
|
142
|
-
| `onboarding` | `'off' \| 'onMount' \| 'onFABClick'` | No | 온보딩 가이드 트리거 (기본 `'onMount'`). `'off'`면 "가이드 다시 보기"도 숨깁니다 |
|
|
143
|
-
| `screenshotCompression` | `{ useWebWorker?: boolean }` | No | 스크린샷 압축을 Web Worker에서 수행할지 여부 |
|
|
144
|
-
| `enabled` | `boolean` | No | 위젯 활성화 여부 (기본 `true`). `useIssueSticker` 전용 옵션 |
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
`SDKUser`는 `id`, `name` 두 필드가 모두 필요합니다.
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
### 키보드 단축키
|
|
112
|
+
```typescript
|
|
113
|
+
init(config: SDKConfig): void
|
|
114
|
+
```
|
|
151
115
|
|
|
116
|
+
SDK를 초기화하고 위젯을 마운트합니다. 이미 초기화된 상태에서 다시 호출하면 설정을 갱신하고 위젯을 다시 마운트합니다.
|
|
152
117
|
|
|
153
|
-
|
|
154
|
-
| ------------------- | ----------- | ------------- |
|
|
155
|
-
| 이슈 생성 모드 토글 | `⌘⌥1` `⌃⌥1` | `Ctrl+Alt+1` |
|
|
156
|
-
| 화면 녹화 시작/중지 | `⌘⌥2` `⌃⌥2` | `Ctrl+Alt+2` |
|
|
157
|
-
| 이슈 생성 모드 종료 | `Esc` | `Esc` |
|
|
158
|
-
|
|
118
|
+
#### updateConfig(config)
|
|
159
119
|
|
|
160
|
-
|
|
120
|
+
```typescript
|
|
121
|
+
updateConfig(config: SDKConfig): void
|
|
122
|
+
```
|
|
161
123
|
|
|
124
|
+
위젯을 유지한 채 설정만 교체합니다. 초기화 전에 호출하면 `init`과 같게 동작합니다.
|
|
162
125
|
|
|
163
|
-
|
|
164
|
-
- 화면 녹화 영상 — 녹화 모드로 생성한 경우
|
|
165
|
-
- 네트워크·콘솔 로그 — 각각 최근 50개, IssueSticker 자체 트래픽은 제외
|
|
166
|
-
- 브라우저·OS 정보, 발생 URL, 클릭한 요소의 CSS 선택자와 XPath
|
|
167
|
-
- 세션 리플레이 — 워크스페이스에서 사용할 수 있는 경우, 이슈 폼에서 첨부 여부 선택
|
|
126
|
+
#### destroy()
|
|
168
127
|
|
|
128
|
+
```typescript
|
|
129
|
+
destroy(): void
|
|
130
|
+
```
|
|
169
131
|
|
|
170
|
-
|
|
171
|
-
연동된 Jira·Notion 정보는 멤버로 로그인했을 때 함께 표시됩니다.
|
|
132
|
+
위젯을 언마운트하고 SDK를 종료합니다.
|
|
172
133
|
|
|
134
|
+
## Headless 클라이언트
|
|
173
135
|
|
|
174
|
-
|
|
175
|
-
녹화 중 페이지를 새로고침하거나 다른 페이지로 이동하면 녹화가 중단되고 데이터가 유실됩니다.
|
|
136
|
+
이슈 리포팅 버튼과 폼을 제품 디자인에 맞춰 직접 만들 때 사용합니다. 클라이언트를 만들고, 상태를 구독하고, 초기화하면 준비가 끝납니다.
|
|
176
137
|
|
|
138
|
+
```typescript
|
|
139
|
+
import { createIssueStickerHeadless } from 'issue-sticker/headless';
|
|
177
140
|
|
|
178
|
-
|
|
141
|
+
const client = createIssueStickerHeadless({
|
|
142
|
+
apiKey: 'YOUR_API_KEY',
|
|
143
|
+
user: { id: currentUser.id, name: currentUser.name },
|
|
144
|
+
});
|
|
179
145
|
|
|
146
|
+
const unsubscribe = client.subscribe((snapshot) => renderYourUI(snapshot));
|
|
180
147
|
|
|
181
|
-
|
|
148
|
+
await client.initialize();
|
|
149
|
+
await client.refreshIssues();
|
|
182
150
|
|
|
151
|
+
captureButton.onclick = () => client.startIssueCapture();
|
|
152
|
+
```
|
|
183
153
|
|
|
184
|
-
|
|
185
|
-
| ----------- | ------------------- | ----------------------------------------------------- | ----------------------------------- |
|
|
186
|
-
| 익명 | `user` 없이 초기화 | 조회 없음 (이번 세션에서 생성한 이슈만 화면에 표시됨) | 불가 (자신이 만든 이슈도 불가) |
|
|
187
|
-
| 사용자 식별 | `user` 전달 | 해당 사용자가 생성한 이슈 | 자신이 만든 이슈만 가능 |
|
|
188
|
-
| 멤버 | FAB의 "멤버 로그인" | 프로젝트의 모든 이슈 | 프로젝트의 모든 이슈 가능 |
|
|
154
|
+
클라이언트는 현재 상태를 읽기 전용 snapshot으로 넘겨줍니다. 메서드 전체, phase와 snapshot 모델, 동적 필드 descriptor, 에러 코드는 [Headless 가이드](https://issuesticker.com/guide/products/headless)에 있습니다.
|
|
189
155
|
|
|
190
156
|
|
|
191
157
|
## 문제 해결
|
|
192
158
|
|
|
159
|
+
- 위젯이 보이지 않으면 프로젝트에 등록한 허용 도메인과 현재 `window.location.origin`이 같은지 확인하세요.
|
|
160
|
+
- 특정 사용자에게만 노출했다면 `enabled` 조건이 실제 로그인 상태와 맞는지 확인하세요.
|
|
161
|
+
- `Invalid hook call` 또는 `Cannot read properties of null (reading 'useRef')`는 대부분 React가 두 벌 로드된 경우입니다. `npm ls react react-dom`으로 확인하고, Vite는 `resolve.dedupe: ['react', 'react-dom']`을, Webpack·Next.js는 alias로 React 경로를 하나로 맞추세요.
|
|
162
|
+
- `Missing "./react" specifier in "issue-sticker" package`는 설치된 패키지가 오래된 경우입니다. `node_modules`와 lockfile을 지우고 다시 설치하세요.
|
|
193
163
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
`npm ls react react-dom`으로 중복 설치 여부를 확인하세요.
|
|
198
|
-
Vite는 `resolve.dedupe: ['react', 'react-dom']`을 설정하고, Webpack·Next.js는 alias로 React 경로를 하나로 맞추면 됩니다.
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
`Missing "./react" specifier in "issue-sticker" package` 오류는 설치된 패키지가 오래된 경우에 발생합니다.
|
|
202
|
-
`node_modules`와 lockfile을 갱신한 뒤 다시 설치하세요.
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
그 밖의 문제는 [FAQ](https://issuesticker.com/guide/faq)를 참고하세요.
|
|
164
|
+
## 더 보기
|
|
206
165
|
|
|
166
|
+
| 가이드 | 내용 |
|
|
167
|
+
| ---------------------------------------------------------------- | --------------------------------------------- |
|
|
168
|
+
| [시작 준비](https://issuesticker.com/guide/products/setup) | 프로젝트 생성, 허용 도메인 등록, API key 발급 |
|
|
169
|
+
| [SDK Widget](https://issuesticker.com/guide/products/sdk) | 위젯 설치, 초기화, 운영 환경에서 켜는 조건 |
|
|
170
|
+
| [SDK Headless](https://issuesticker.com/guide/products/headless) | 메서드, phase와 snapshot, 에러 코드 레퍼런스 |
|
|
171
|
+
| [외부 연동](https://issuesticker.com/guide/integrations) | Jira·Notion 연결과 필드 동기화 |
|
|
172
|
+
| [FAQ](https://issuesticker.com/guide/faq) | 권한, 도메인, key, 필드 동기화 문제 해결 |
|
|
207
173
|
|
|
208
174
|
## 라이선스
|
|
209
175
|
|
|
210
|
-
|
|
211
176
|
Copyright (c) 2026 maana. All rights reserved.
|
|
212
177
|
|
|
213
|
-
|
|
214
|
-
이 소프트웨어는 maana의 독점 소유물입니다.
|
|
215
|
-
자세한 내용은 [LICENSE](./LICENSE) 파일을 참조하세요.
|
|
178
|
+
이 소프트웨어는 maana의 독점 소유물입니다. 자세한 내용은 [LICENSE](./LICENSE)를 참조하세요.
|
package/headless.d.ts
CHANGED
|
@@ -1,11 +1,119 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
// 공개 타입은 이 파일 안에서 닫는다. 내부 패키지(@issue-sticker/shared)를 참조하면 배포
|
|
2
|
+
// tarball 에 없는 모듈을 가리켜 소비자 tsc 가 깨지고, 딸려오는 백엔드 계약 전체가 함께
|
|
3
|
+
// 노출된다. 구현과의 정합은 src/headless/publicTypes.conformance.ts 가 컴파일 타임에 지킨다.
|
|
4
|
+
|
|
5
|
+
export interface IssuePosition {
|
|
6
|
+
x: number;
|
|
7
|
+
y: number;
|
|
8
|
+
selector: string;
|
|
9
|
+
xpath: string;
|
|
10
|
+
viewport?: {
|
|
11
|
+
width: number;
|
|
12
|
+
height: number;
|
|
13
|
+
scrollX?: number;
|
|
14
|
+
scrollY?: number;
|
|
15
|
+
};
|
|
16
|
+
elementRect?: {
|
|
17
|
+
left: number;
|
|
18
|
+
top: number;
|
|
19
|
+
width: number;
|
|
20
|
+
height: number;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface NetworkLog {
|
|
25
|
+
url: string;
|
|
26
|
+
method: string;
|
|
27
|
+
statusCode: number;
|
|
28
|
+
timestamp: number;
|
|
29
|
+
type: string;
|
|
30
|
+
duration?: number | null;
|
|
31
|
+
requestHeaders?: Record<string, string> | null;
|
|
32
|
+
responseHeaders?: Record<string, string> | null;
|
|
33
|
+
requestBody?: string | null;
|
|
34
|
+
requestBodySizeBytes?: number | null;
|
|
35
|
+
requestBodyOmittedReason?: string | null;
|
|
36
|
+
responseBody?: string | null;
|
|
37
|
+
responseBodyEncoding?: string | null;
|
|
38
|
+
responseBodySizeBytes?: number | null;
|
|
39
|
+
responseBodyOmittedReason?: string | null;
|
|
40
|
+
responseMimeType?: string | null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export interface ConsoleLog {
|
|
44
|
+
type: 'log' | 'warning' | 'error' | 'info' | 'debug';
|
|
45
|
+
message: string;
|
|
46
|
+
timestamp: number;
|
|
47
|
+
args?: unknown[] | null;
|
|
48
|
+
url?: string | null;
|
|
49
|
+
lineNumber?: number | null;
|
|
50
|
+
columnNumber?: number | null;
|
|
51
|
+
stackTrace?: string | null;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/** 이슈에 연결된 외부 트래커(Jira·Notion) 매핑. 서비스별 메타데이터는 형태가 서비스에 달려 있어 `unknown` 으로 둔다. */
|
|
55
|
+
export interface IssueExternalMapping {
|
|
56
|
+
id: string;
|
|
57
|
+
external_id: string;
|
|
58
|
+
service_type?: 'JIRA' | 'NOTION';
|
|
59
|
+
exposed_fields?: string[];
|
|
60
|
+
jira_issue_metadata?: unknown;
|
|
61
|
+
notion_page_metadata?: unknown;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/** 목록용 이슈. 마커를 그리는 데 필요한 필드만 담는다. */
|
|
65
|
+
export interface IssueStickerSummary {
|
|
66
|
+
id: string;
|
|
67
|
+
project_id: string;
|
|
68
|
+
url: string;
|
|
69
|
+
title: string;
|
|
70
|
+
position: IssuePosition;
|
|
71
|
+
external_user_id?: string | null;
|
|
72
|
+
created_at: string;
|
|
73
|
+
updated_at: string;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/** 상세 조회한 이슈. */
|
|
77
|
+
export interface Issue extends IssueStickerSummary {
|
|
78
|
+
description: string | null;
|
|
79
|
+
screenshot: string | string[] | null;
|
|
80
|
+
video: string | null;
|
|
81
|
+
user_agent: string | null;
|
|
82
|
+
external_user_name: string | null;
|
|
83
|
+
network_logs: NetworkLog[] | null;
|
|
84
|
+
console_logs: ConsoleLog[] | null;
|
|
85
|
+
comments?: unknown[];
|
|
86
|
+
issue_external_mappings?: IssueExternalMapping[];
|
|
87
|
+
project: { name: string } | null;
|
|
88
|
+
reporter: { display_name: string | null } | null;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/** 세션 리플레이 첨부 메타. */
|
|
92
|
+
export interface SessionReplayMeta {
|
|
93
|
+
window_seconds: number;
|
|
94
|
+
event_count: number;
|
|
95
|
+
size_bytes: number;
|
|
96
|
+
rrweb_version: string;
|
|
97
|
+
privacy_config_version: string;
|
|
98
|
+
release?: string;
|
|
99
|
+
release_source?: string;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export interface IssueFilterOption {
|
|
103
|
+
label: string;
|
|
104
|
+
value: string;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export type IssueFilterGroup =
|
|
108
|
+
| {
|
|
109
|
+
kind: 'custom';
|
|
110
|
+
id: string;
|
|
111
|
+
fieldDefinitionId: string;
|
|
112
|
+
label: string;
|
|
113
|
+
options: IssueFilterOption[];
|
|
114
|
+
}
|
|
115
|
+
| { kind: 'jira'; id: string; fieldName: string; label: string; options: IssueFilterOption[] }
|
|
116
|
+
| { kind: 'notion'; id: string; fieldName: string; label: string; options: IssueFilterOption[] };
|
|
9
117
|
|
|
10
118
|
export type HeadlessPhase =
|
|
11
119
|
| 'initializing'
|
|
@@ -122,7 +230,7 @@ export interface HeadlessSnapshot {
|
|
|
122
230
|
readonly phase: HeadlessPhase;
|
|
123
231
|
readonly auth: HeadlessAuthState;
|
|
124
232
|
readonly issues: readonly IssueStickerSummary[];
|
|
125
|
-
readonly activeIssue:
|
|
233
|
+
readonly activeIssue: Issue | null;
|
|
126
234
|
readonly draft: HeadlessIssueDraft | null;
|
|
127
235
|
readonly videoCapture: HeadlessVideoCaptureState;
|
|
128
236
|
readonly sessionReplay: HeadlessSessionReplayState;
|
|
@@ -131,8 +239,29 @@ export interface HeadlessSnapshot {
|
|
|
131
239
|
readonly error: IssueStickerHeadlessError | null;
|
|
132
240
|
}
|
|
133
241
|
|
|
134
|
-
export interface HeadlessIssueFilters
|
|
242
|
+
export interface HeadlessIssueFilters {
|
|
243
|
+
/** 이슈 발생 URL. `'all'` 이면 URL 조건 없이 조회합니다. */
|
|
244
|
+
url?: string[] | string | 'all';
|
|
245
|
+
/** 이 사용자가 만든 이슈만 조회합니다. */
|
|
135
246
|
externalUserId?: string;
|
|
247
|
+
/** 제목·URL substring 검색. */
|
|
248
|
+
search?: string;
|
|
249
|
+
/** ISO 8601 — 생성일 하한. */
|
|
250
|
+
dateFrom?: string;
|
|
251
|
+
/** ISO 8601 — 생성일 상한. */
|
|
252
|
+
dateTo?: string;
|
|
253
|
+
/** 1-based 페이지 번호. */
|
|
254
|
+
page?: number;
|
|
255
|
+
/** 페이지 크기 (1-500, 기본 100). */
|
|
256
|
+
pageSize?: number;
|
|
257
|
+
/** 커스텀 필드 ID → 선택 값 배열. */
|
|
258
|
+
customFieldValues?: Record<string, string[]>;
|
|
259
|
+
/** Jira 표준 필드 ID(예: `'status'`, `'assignee'`) → 선택 값 배열. */
|
|
260
|
+
jiraFieldValues?: Record<string, string[]>;
|
|
261
|
+
/** Notion 필드 ID → 선택 값 배열. */
|
|
262
|
+
notionFieldValues?: Record<string, string[]>;
|
|
263
|
+
/** 생성일 정렬 순서. 미지정 시 `'desc'`. */
|
|
264
|
+
sortOrder?: 'asc' | 'desc';
|
|
136
265
|
}
|
|
137
266
|
|
|
138
267
|
export interface SubmitDraftInput {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "issue-sticker",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "IssueSticker SDK - Visual bug tracking widget for web applications",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"type": "module",
|
|
@@ -23,9 +23,6 @@
|
|
|
23
23
|
"require": "./dist/issue-sticker-headless-react.js",
|
|
24
24
|
"default": "./dist/issue-sticker-headless-react.js"
|
|
25
25
|
},
|
|
26
|
-
"./react.js": "./dist/issue-sticker-react.js",
|
|
27
|
-
"./headless.js": "./dist/issue-sticker-headless.js",
|
|
28
|
-
"./headless/react.js": "./dist/issue-sticker-headless-react.js",
|
|
29
26
|
"./package.json": "./package.json"
|
|
30
27
|
},
|
|
31
28
|
"files": [
|