@solhun/feedback-kit-web 0.1.0 → 0.2.1

package/src/element-info.ts

@@ -1,138 +0,0 @@
-// 지목한 DOM 요소를 제보에 실을 수 있는 형태로 옮긴다.
-//
-// 목표는 "나중에 이 요소를 다시 찾을 수 있게" 하는 것이다. 그래서 태그·id·클래스만이 아니라
-// 형제 순서까지 담은 CSS 선택자 경로를 함께 만든다. 못 만들어도 제보는 성립해야 하므로
-// 이 파일의 함수들은 절대 던지지 않는다.
-
-import type { ElementInfo } from "@solhun/feedback-kit-core";
-
-/** 요소 텍스트를 담을 때의 상한. 본문 전체가 실려 페이로드가 붓는 걸 막는다. */
-export const ELEMENT_TEXT_MAX_CHARS = 200;
-
-/** 선택자 경로를 몇 단계까지 거슬러 올라갈지. 너무 깊으면 오히려 잘 깨진다. */
-export const SELECTOR_MAX_DEPTH = 8;
-
-/** 담아 둘 속성. 전부 담으면 인라인 style 같은 게 페이로드를 채운다. */
-const KEPT_ATTRS = [
-  "id",
-  "class",
-  "name",
-  "type",
-  "role",
-  "href",
-  "aria-label",
-  "data-testid",
-  "data-fk-source",
-];
-
-function cssEscape(value: string): string {
-  const fn = (globalThis as { CSS?: { escape?: (v: string) => string } }).CSS?.escape;
-  if (typeof fn === "function") return fn(value);
-  // CSS.escape 가 없는 환경 대비 최소 폴백. 식별자에 쓰이면 곤란한 문자만 막는다.
-  return value.replace(/[^a-zA-Z0-9_-]/g, (ch) => `\\${ch}`);
-}
-
-/** 요소가 형제들 사이에서 몇 번째 같은 태그인지. 1부터 센다. */
-function nthOfType(el: Element): number {
-  const parent = el.parentElement;
-  if (!parent) return 1;
-  let index = 0;
-  for (const child of Array.from(parent.children)) {
-    if (child.tagName === el.tagName) {
-      index += 1;
-      if (child === el) return index;
-    }
-  }
-  return 1;
-}
-
-/** 같은 태그 형제가 둘 이상인가. 하나뿐이면 `:nth-of-type` 을 붙일 이유가 없다. */
-function hasTypeSiblings(el: Element): boolean {
-  const parent = el.parentElement;
-  if (!parent) return false;
-  let count = 0;
-  for (const child of Array.from(parent.children)) {
-    if (child.tagName === el.tagName) {
-      count += 1;
-      if (count > 1) return true;
-    }
-  }
-  return false;
-}
-
-/**
- * 요소까지의 CSS 선택자 경로.
- *
- * id 를 만나면 거기서 멈춘다 — 문서에서 유일하다고 가정할 수 있는 지점이라 그 위는 군더더기다.
- * 클래스는 쓰지 않는다: 유틸리티 클래스(`px-4` 같은 것)가 섞이면 선택자가 길기만 하고
- * 재현성은 오히려 떨어진다.
- */
-export function cssSelectorPath(el: Element | null | undefined): string | null {
-  if (!el || typeof el.tagName !== "string") return null;
-  try {
-    const parts: string[] = [];
-    let node: Element | null = el;
-    let depth = 0;
-
-    while (node && depth < SELECTOR_MAX_DEPTH) {
-      const tag = node.tagName.toLowerCase();
-      if (tag === "html" || tag === "body") {
-        parts.unshift(tag);
-        break;
-      }
-
-      const id = node.getAttribute("id");
-      if (id) {
-        parts.unshift(`#${cssEscape(id)}`);
-        break; // id 위로는 올라갈 필요가 없다.
-      }
-
-      parts.unshift(hasTypeSiblings(node) ? `${tag}:nth-of-type(${nthOfType(node)})` : tag);
-      node = node.parentElement;
-      depth += 1;
-    }
-
-    return parts.length > 0 ? parts.join(" > ") : null;
-  } catch {
-    return null;
-  }
-}
-
-/** 눈에 보이는 텍스트를 한 줄로 눌러 담는다. */
-export function visibleText(el: Element): string | null {
-  const raw = (el as HTMLElement).innerText ?? el.textContent ?? "";
-  const collapsed = raw.replace(/\s+/g, " ").trim();
-  if (collapsed === "") return null;
-  return collapsed.length > ELEMENT_TEXT_MAX_CHARS
-    ? collapsed.slice(0, ELEMENT_TEXT_MAX_CHARS)
-    : collapsed;
-}
-
-/** 지목된 요소를 `ElementInfo` 로 옮긴다. 실패해도 던지지 않는다. */
-export function describeElement(el: Element | null | undefined): ElementInfo | null {
-  if (!el || typeof el.tagName !== "string") return null;
-
-  const attributes: Record<string, string> = {};
-  for (const name of KEPT_ATTRS) {
-    const value = el.getAttribute(name);
-    if (value !== null) attributes[name] = value;
-  }
-
-  let boundingBox: ElementInfo["boundingBox"] = null;
-  try {
-    const rect = el.getBoundingClientRect();
-    boundingBox = { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
-  } catch {
-    boundingBox = null;
-  }
-
-  return {
-    tag: el.tagName.toLowerCase(),
-    id: el.getAttribute("id"),
-    className: el.getAttribute("class"),
-    text: visibleText(el),
-    boundingBox,
-    attributes,
-    selector: cssSelectorPath(el),
-  };
-}

package/src/feedback-kit.test.ts

@@ -1,227 +0,0 @@
-import { act, createElement, type ComponentType } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it } from "vitest";
-
-import type {
-  FeedbackReport,
-  QueueStatus,
-  ReportParts,
-  SubmitOutcome,
-} from "@solhun/feedback-kit-core";
-
-import { MarkerStore, type StorageLike } from "./marker-store.js";
-import type { WebWidgetOpts } from "./widget.js";
-
-// tsconfig.test는 JSX를 끈 채 *.test.ts만 검사한다. 구현은 tsup/패키지 tsconfig가 TSX로
-// 검증하므로, 이 DOM 테스트에서는 런타임 import로 컴포넌트를 불러와 두 경계를 모두 지킨다.
-const feedbackKitModulePath: string = "./feedback-kit.js";
-const { FeedbackKit } = (await import(feedbackKitModulePath)) as {
-  FeedbackKit: ComponentType<WebWidgetOpts>;
-};
-
-(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-const SHOT = { base64: "c2NyZWVuc2hvdA==", contentType: "image/png" as const };
-
-class MemoryStorage implements StorageLike {
-  private readonly values = new Map<string, string>();
-
-  getItem(key: string): string | null {
-    return this.values.get(key) ?? null;
-  }
-
-  setItem(key: string, value: string): void {
-    this.values.set(key, value);
-  }
-
-  removeItem(key: string): void {
-    this.values.delete(key);
-  }
-}
-
-class TestQueue {
-  private readonly listeners = new Set<(status: QueueStatus) => void>();
-  submitImpl: (report: FeedbackReport) => Promise<SubmitOutcome> = async () => ({
-    delivered: true,
-    id: "server-1",
-    queued: false,
-  });
-
-  submit(report: FeedbackReport): Promise<SubmitOutcome> {
-    return this.submitImpl(report);
-  }
-
-  async retryNow(): Promise<void> {}
-
-  async size(): Promise<number> {
-    return 0;
-  }
-
-  subscribe(listener: (status: QueueStatus) => void): () => void {
-    this.listeners.add(listener);
-    listener({ state: "idle", pending: 0, lastError: null });
-    return () => this.listeners.delete(listener);
-  }
-}
-
-let sequence = 0;
-async function createReport(parts: ReportParts): Promise<FeedbackReport> {
-  sequence += 1;
-  return {
-    clientSubmissionId: `submission-${sequence}`,
-    ...parts,
-    context: {
-      app: "renderer-test",
-      screen: "/",
-      url: "https://example.test/",
-      sessionId: "session",
-      user: null,
-      source: { screenId: null, sourceFile: null },
-      platform: "web",
-      timezone: "Asia/Seoul",
-      clientTimestamp: "2026-08-07T00:00:00.000Z",
-      native: null,
-      web: null,
-      diagnostics: null,
-      extra: {},
-    },
-    createdAt: "2026-08-07T00:00:00.000Z",
-  };
-}
-
-let mountedRoot: Root | null = null;
-let host: HTMLDivElement | null = null;
-
-afterEach(async () => {
-  if (mountedRoot) {
-    await act(async () => mountedRoot?.unmount());
-  }
-  mountedRoot = null;
-  host?.remove();
-  host = null;
-  document.body.replaceChildren();
-});
-
-async function renderKit(queue = new TestQueue(), capture = async () => SHOT): Promise<void> {
-  host = document.createElement("div");
-  document.body.append(host);
-  mountedRoot = createRoot(host);
-  await act(async () => {
-    mountedRoot?.render(
-      createElement(FeedbackKit, {
-        queue,
-        createReport,
-        capture,
-        store: new MarkerStore(new MemoryStorage()),
-        doc: document,
-        getPathname: () => location.pathname,
-        getViewport: () => ({ width: 1000, height: 500 }),
-      }),
-    );
-  });
-}
-
-function buttonNamed(name: string): HTMLButtonElement {
-  const button = Array.from(document.querySelectorAll("button")).find(
-    (candidate) => candidate.textContent?.trim() === name,
-  );
-  if (!button) throw new Error(`버튼을 찾을 수 없음: ${name}`);
-  return button;
-}
-
-function click(element: Element): void {
-  element.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
-}
-
-function changeTextarea(textarea: HTMLTextAreaElement, value: string): void {
-  const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
-  setter?.call(textarea, value);
-  textarea.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText", data: value }));
-}
-
-async function flushPaint(): Promise<void> {
-  await new Promise((resolve) => setTimeout(resolve, 30));
-}
-
-describe("FeedbackKit React 렌더러", () => {
-  it("캡처에서 자체 UI를 숨기고 모달·dirty 확인·포커스 복원을 제공한다", async () => {
-    let visibilityDuringCapture = "not-called";
-    await renderKit(new TestQueue(), async () => {
-      visibilityDuringCapture =
-        document.querySelector<HTMLElement>("[data-feedback-kit]")?.style.visibility ?? "missing";
-      return SHOT;
-    });
-
-    const floating = buttonNamed("피드백");
-    floating.focus();
-    await act(async () => {
-      click(floating);
-      await flushPaint();
-    });
-
-    expect(visibilityDuringCapture).toBe("hidden");
-    expect(document.querySelector('[role="dialog"]')).not.toBeNull();
-    expect(document.querySelector('img[alt="자동 캡처된 현재 화면 미리보기"]')).not.toBeNull();
-    expect(document.querySelector("textarea")).toBe(document.activeElement);
-    expect(document.querySelector("select")).not.toBeNull();
-    expect(buttonNamed("요소 지목")).not.toBeNull();
-
-    const comment = document.querySelector("textarea")!;
-    await act(async () => changeTextarea(comment, "닫기 전에 확인할 내용"));
-    await act(async () => {
-      document
-        .querySelector('[role="dialog"]')
-        ?.dispatchEvent(new globalThis.KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
-    });
-
-    expect(document.querySelector('[role="alertdialog"]')).not.toBeNull();
-    expect(comment.value).toBe("닫기 전에 확인할 내용");
-
-    await act(async () => click(buttonNamed("닫기")));
-    await act(async () => flushPaint());
-    expect(document.querySelector('[role="dialog"]')).toBeNull();
-    expect(buttonNamed("피드백")).toBe(document.activeElement);
-  });
-
-  it("지목 오버레이에서 주석 마커의 전송 중·완료 상태를 렌더링한다", async () => {
-    const queue = new TestQueue();
-    let resolveSubmit!: (outcome: SubmitOutcome) => void;
-    queue.submitImpl = () =>
-      new Promise((resolve) => {
-        resolveSubmit = resolve;
-      });
-    await renderKit(queue);
-
-    await act(async () => {
-      click(buttonNamed("피드백"));
-      await flushPaint();
-    });
-    await act(async () => click(buttonNamed("요소 지목")));
-    expect(buttonNamed("지목 종료")).not.toBeNull();
-    expect(buttonNamed("지목 중").disabled).toBe(true);
-
-    const target = document.createElement("button");
-    target.textContent = "페이지 링크";
-    target.getBoundingClientRect = () =>
-      ({ left: 30, top: 40, width: 120, height: 30 }) as DOMRect;
-    document.body.append(target);
-
-    await act(async () => {
-      target.dispatchEvent(new MouseEvent("mouseover", { bubbles: true, clientX: 50, clientY: 50 }));
-      target.dispatchEvent(
-        new MouseEvent("click", { bubbles: true, cancelable: true, clientX: 100, clientY: 100 }),
-      );
-    });
-    const annotation = document.querySelector<HTMLTextAreaElement>("#feedback-kit-annotation")!;
-    await act(async () => changeTextarea(annotation, "버튼이 동작하지 않아요"));
-    await act(async () => click(buttonNamed("저장")));
-
-    expect(document.body.textContent).toContain("전송 중");
-    await act(async () => {
-      resolveSubmit({ delivered: true, id: "server-1", queued: false });
-      await Promise.resolve();
-    });
-    expect(document.body.textContent).toContain("완료");
-    expect(buttonNamed("지목 종료")).not.toBeNull();
-  });
-});