@solhun/feedback-kit-web 0.1.0

package/src/storage.ts

@@ -0,0 +1,69 @@
+// 웹 기본 저장소 — `localStorage` 를 FeedbackStorage 계약에 맞춘다.
+//
+// 왜 패키지가 제공하나: 이게 없으면 붙이는 앱마다 같은 20줄을 다시 쓴다.
+// 코어는 저장소 구현을 모르고(플랫폼 무관), 웹 패키지가 기본값을 준다.
+//
+// localStorage 는 동기지만 계약은 비동기라 Promise 로 감싼다. 사파리 프라이빗
+// 모드처럼 접근 자체가 던지는 환경이 있어서, 실패하면 **메모리로 조용히 물러난다**
+// — 제보를 잃는 것보다 세션 동안만 유지되는 편이 낫다.
+
+import type { FeedbackStorage } from "@solhun/feedback-kit-core";
+
+interface SyncStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+
+function memoryStorage(): SyncStorage {
+  const map = new Map<string, string>();
+  return {
+    getItem: (key) => map.get(key) ?? null,
+    setItem: (key, value) => void map.set(key, value),
+    removeItem: (key) => void map.delete(key),
+  };
+}
+
+/** 접근 가능한 localStorage 를 고른다. 못 쓰면 메모리. */
+function pickBacking(): SyncStorage {
+  try {
+    const ls = (globalThis as { localStorage?: SyncStorage }).localStorage;
+    if (!ls) return memoryStorage();
+    // 존재만으로는 부족하다 — 프라이빗 모드는 쓰기에서 던진다.
+    const probe = "__feedback_kit_probe__";
+    ls.setItem(probe, "1");
+    ls.removeItem(probe);
+    return ls;
+  } catch {
+    return memoryStorage();
+  }
+}
+
+/**
+ * 웹 기본 FeedbackStorage.
+ *
+ * 쓰기가 쿼터를 넘기면 그대로 던진다 — 큐가 그 신호를 받아 스크린샷을 떼어내고
+ * 본문만 남기는 축소 경로를 타기 때문에, 여기서 삼키면 안 된다.
+ */
+export function createWebStorage(backing?: SyncStorage): FeedbackStorage {
+  const store = backing ?? pickBacking();
+  return {
+    async get(key) {
+      try {
+        return store.getItem(key);
+      } catch {
+        return null;
+      }
+    },
+    async set(key, value) {
+      store.setItem(key, value);
+    },
+    async remove(key) {
+      try {
+        store.removeItem(key);
+      } catch {
+        /* 지우기 실패는 다음 쓰기가 덮으므로 무시한다. */
+      }
+    },
+  };
+}

package/src/widget.ts

@@ -0,0 +1,70 @@
+// 웹 위젯 조립.
+//
+// 코어의 화면 지도(`WidgetController`)와 웹 전용 지목 모드(`ElementPickingController`)를
+// 한 덩어리로 묶는다. 둘을 따로 두면 "모달에서 [요소 지목]을 눌렀다"와 "지목 오버레이가 떴다"가
+// 서로 모르는 상태가 되므로, 연결 지점을 여기 한 곳으로 모은다.
+//
+// 지목 모드 on/off 의 유일한 입구는 `widget.startPicking()` / `widget.stopPicking()` 이다.
+// 지목 컨트롤러를 직접 켜면 화면 지도가 그 사실을 모른다.
+
+import { WidgetController, type WidgetControllerOpts } from "@solhun/feedback-kit-core";
+import { MarkerStore } from "./marker-store.js";
+import { ElementPickingController } from "./picking.js";
+import { captureWebScreenshot, reencodeWebScreenshot } from "./screenshot.js";
+
+export interface WebWidgetOpts
+  extends Omit<WidgetControllerOpts, "platform" | "initialPicking" | "onPickingChange"> {
+  /** 지목 모드 플래그와 마커를 담아 둘 저장소. 기본은 `localStorage`. */
+  store?: MarkerStore;
+  /** 현재 경로. 마커를 경로별로 나눠 담는 기준. */
+  getPathname?: () => string;
+  /** 지목 이벤트를 들을 문서. 기본은 전역 `document`. */
+  doc?: Document | null;
+  getViewport?: () => { width: number; height: number };
+}
+
+export interface WebWidget {
+  widget: WidgetController;
+  picking: ElementPickingController;
+  store: MarkerStore;
+  dispose(): void;
+}
+
+export function createWebWidget(opts: WebWidgetOpts): WebWidget {
+  const store = opts.store ?? new MarkerStore();
+
+  const picking = new ElementPickingController({
+    queue: opts.queue,
+    createReport: opts.createReport,
+    store,
+    getPathname: opts.getPathname,
+    doc: opts.doc,
+    getViewport: opts.getViewport,
+  });
+
+  const widget = new WidgetController({
+    ...opts,
+    capture: opts.capture === undefined ? captureWebScreenshot : opts.capture,
+    reencode: opts.reencode === undefined ? reencodeWebScreenshot : opts.reencode,
+    platform: "web",
+    // 새로고침·페이지 이동 직후에도 켜져 있던 모드를 그대로 이어받는다.
+    initialPicking: store.isPickingActive(),
+    onPickingChange: (active) => {
+      if (active) picking.start();
+      else picking.stop();
+    },
+  });
+
+  // 저장돼 있던 모드면 여기서 DOM 리스너까지 다시 붙인다. 꺼져 있으면 마커만 읽고 만다.
+  picking.restore();
+
+  return {
+    widget,
+    picking,
+    store,
+    dispose(): void {
+      picking.dispose();
+      widget.dispose();
+    },
+  };
+}