@solhun/feedback-kit-web 0.1.0

package/src/feedback-kit.tsx

@@ -0,0 +1,778 @@
+import {
+  FLOATING_BUTTON_ID,
+  MODAL_ACTION_CANCEL,
+  MODAL_ACTION_PICK,
+  MODAL_ACTION_REMOVE_SCREENSHOT,
+  MODAL_ACTION_RETRY,
+  MODAL_ACTION_SEND,
+  MODAL_FIELD_COMMENT,
+  MODAL_FIELD_PRIORITY,
+  type FeedbackPriority,
+  type FeedbackScreenshot,
+  type WidgetState,
+} from "@solhun/feedback-kit-core";
+import {
+  type ChangeEvent,
+  type CSSProperties,
+  type FormEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import type { PickingState } from "./picking.js";
+import { OWN_UI_ATTR } from "./picking.js";
+import { createWebWidget, type WebWidget, type WebWidgetOpts } from "./widget.js";
+
+/**
+ * 패키지를 붙인 제품의 디자인 시스템을 침범하지 않는 중립 토큰이다.
+ * 모든 값은 인라인 스타일로만 쓰여 호스트의 전역 CSS와 충돌하지 않는다.
+ */
+const TOKENS = {
+  ink: "#17202a",
+  muted: "#667085",
+  surface: "#ffffff",
+  subtle: "#f4f6f8",
+  line: "#d7dce2",
+  accent: "#315d73",
+  accentHover: "#274b5d",
+  danger: "#b42318",
+  warning: "#8a5a00",
+  success: "#18794e",
+  shadow: "0 18px 50px rgba(23, 32, 42, 0.2)",
+  radius: "14px",
+} as const;
+
+const OWN_UI_PROPS = { [OWN_UI_ATTR]: "" } as Record<string, string>;
+const FONT_STACK =
+  "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+
+export type FeedbackKitProps = WebWidgetOpts;
+
+const INITIAL_PICKING_STATE: PickingState = {
+  active: false,
+  hovered: null,
+  popup: null,
+  markers: [],
+};
+
+function screenshotSource(screenshot: FeedbackScreenshot): string {
+  return `data:${screenshot.contentType};base64,${screenshot.base64}`;
+}
+
+function readScreenshotFile(file: File): Promise<FeedbackScreenshot | null> {
+  if (file.type !== "image/png" && file.type !== "image/jpeg") {
+    return Promise.resolve(null);
+  }
+  const contentType: FeedbackScreenshot["contentType"] = file.type;
+
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onerror = () => resolve(null);
+    reader.onload = () => {
+      const result = typeof reader.result === "string" ? reader.result : "";
+      const comma = result.indexOf(",");
+      if (comma < 0) {
+        resolve(null);
+        return;
+      }
+      resolve({
+        base64: result.slice(comma + 1),
+        contentType,
+      });
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+function nextPaint(): Promise<void> {
+  return new Promise((resolve) => {
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => resolve());
+    } else {
+      setTimeout(resolve, 0);
+    }
+  });
+}
+
+function focusableElements(container: HTMLElement): HTMLElement[] {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>(
+      "button:not([disabled]), textarea:not([disabled]), select:not([disabled]), input:not([disabled]):not([type='hidden']), [tabindex]:not([tabindex='-1'])",
+    ),
+  ).filter((node) => node.getAttribute("aria-hidden") !== "true");
+}
+
+function trapTab(event: KeyboardEvent<HTMLElement>, container: HTMLElement): void {
+  if (event.key !== "Tab") return;
+  const items = focusableElements(container);
+  if (items.length === 0) {
+    event.preventDefault();
+    return;
+  }
+
+  const first = items[0]!;
+  const last = items[items.length - 1]!;
+  const active = document.activeElement;
+  if (event.shiftKey && (active === first || !container.contains(active))) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && (active === last || !container.contains(active))) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+
+const baseButton: CSSProperties = {
+  minHeight: 38,
+  border: `1px solid ${TOKENS.line}`,
+  borderRadius: 9,
+  background: TOKENS.surface,
+  color: TOKENS.ink,
+  padding: "8px 12px",
+  font: "inherit",
+  fontWeight: 650,
+  cursor: "pointer",
+};
+
+const primaryButton: CSSProperties = {
+  ...baseButton,
+  borderColor: TOKENS.accent,
+  background: TOKENS.accent,
+  color: TOKENS.surface,
+};
+
+const inputStyle: CSSProperties = {
+  width: "100%",
+  boxSizing: "border-box",
+  border: `1px solid ${TOKENS.line}`,
+  borderRadius: 9,
+  background: TOKENS.surface,
+  color: TOKENS.ink,
+  padding: "10px 11px",
+  font: "inherit",
+};
+
+function MarkerStatus({ status }: { status: "sending" | "done" | "pending" }) {
+  const presentation =
+    status === "sending"
+      ? { icon: "↻", text: "전송 중", color: TOKENS.accent }
+      : status === "done"
+        ? { icon: "✓", text: "완료", color: TOKENS.success }
+        : { icon: "◷", text: "대기", color: TOKENS.warning };
+
+  return (
+    <span style={{ display: "inline-flex", gap: 4, alignItems: "center", color: presentation.color }}>
+      <span
+        aria-hidden="true"
+        style={
+          status === "sending"
+            ? { display: "inline-block", animation: "feedback-kit-spin 900ms linear infinite" }
+            : undefined
+        }
+      >
+        {presentation.icon}
+      </span>
+      <span>{presentation.text}</span>
+    </span>
+  );
+}
+
+/**
+ * `createWebWidget`의 헤드리스 상태를 실제 DOM으로 그리는 공개 React 진입점.
+ * 큐·제보 조립·스크린샷 캡처는 모두 props로 주입된 기존 계약을 그대로 사용한다.
+ */
+export function FeedbackKit(props: FeedbackKitProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const floatingButtonRef = useRef<HTMLButtonElement | null>(null);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const confirmRef = useRef<HTMLDivElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const previousScreenRef = useRef<WidgetState["screen"]>("button");
+  const previousModalOpenRef = useRef(false);
+  const previousConfirmVisibleRef = useRef(false);
+  const [kit, setKit] = useState<WebWidget | null>(null);
+  const [widgetState, setWidgetState] = useState<WidgetState | null>(null);
+  const [pickingState, setPickingState] = useState<PickingState>(INITIAL_PICKING_STATE);
+  const [announcement, setAnnouncement] = useState<string | null>(null);
+
+  const {
+    queue,
+    createReport,
+    capture,
+    reencode,
+    screenshotLimitBytes,
+    store,
+    getPathname,
+    doc,
+    getViewport,
+  } = props;
+
+  useEffect(() => {
+    const created = createWebWidget({
+      queue,
+      createReport,
+      capture,
+      reencode,
+      screenshotLimitBytes,
+      store,
+      getPathname,
+      doc,
+      getViewport,
+    });
+    setKit(created);
+    const unsubscribeWidget = created.widget.subscribe(setWidgetState);
+    const unsubscribePicking = created.picking.subscribe(setPickingState);
+
+    return () => {
+      unsubscribeWidget();
+      unsubscribePicking();
+      created.dispose();
+    };
+  }, [
+    queue,
+    createReport,
+    capture,
+    reencode,
+    screenshotLimitBytes,
+    store,
+    getPathname,
+    doc,
+    getViewport,
+  ]);
+
+  useEffect(() => {
+    if (!widgetState) return;
+    const { modal, screen } = widgetState;
+    if (modal.submitMessage) setAnnouncement(modal.submitMessage);
+
+    if (modal.open && !previousModalOpenRef.current && modal.focused) {
+      document.querySelector<HTMLElement>(`[data-fk-focus-id="${modal.focused}"]`)?.focus();
+    }
+    if (modal.closeConfirmVisible && !previousConfirmVisibleRef.current) confirmRef.current?.focus();
+
+    const wasModal = previousScreenRef.current === "modal";
+    if (wasModal && screen === "button" && modal.restoreFocusTo === FLOATING_BUTTON_ID) {
+      void nextPaint().then(() => floatingButtonRef.current?.focus());
+    }
+    previousScreenRef.current = screen;
+    previousModalOpenRef.current = modal.open;
+    previousConfirmVisibleRef.current = modal.closeConfirmVisible;
+  }, [widgetState]);
+
+  if (!kit || !widgetState) {
+    return <div {...OWN_UI_PROPS} data-feedback-kit-loading="true" />;
+  }
+
+  const activeKit = kit;
+  const { modal, screen } = widgetState;
+  const draftLocked = modal.submitStatus === "sending" || modal.submitStatus === "pending";
+
+  async function withOwnUiHidden(action: () => Promise<void>): Promise<void> {
+    const root = rootRef.current;
+    const previousVisibility = root?.style.visibility ?? "";
+    if (root) root.style.visibility = "hidden";
+    try {
+      await nextPaint();
+      await action();
+    } finally {
+      if (root) root.style.visibility = previousVisibility;
+    }
+  }
+
+  async function openReport(): Promise<void> {
+    setAnnouncement(null);
+    await withOwnUiHidden(() => activeKit.widget.openReport());
+  }
+
+  async function recapture(): Promise<void> {
+    await withOwnUiHidden(() => activeKit.widget.modal.recapture());
+  }
+
+  async function attachFile(event: ChangeEvent<HTMLInputElement>): Promise<void> {
+    const input = event.currentTarget;
+    const file = input.files?.[0];
+    if (file) {
+      const screenshot = await readScreenshotFile(file);
+      if (screenshot) await activeKit.widget.modal.attachFile(screenshot);
+    }
+    input.value = "";
+  }
+
+  function closeReport(): void {
+    activeKit.widget.closeReport();
+  }
+
+  function handleModalKeyDown(event: KeyboardEvent<HTMLDivElement>): void {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      if (modal.closeConfirmVisible) activeKit.widget.cancelCloseReport();
+      else closeReport();
+      return;
+    }
+    trapTab(event, modal.closeConfirmVisible ? confirmRef.current ?? event.currentTarget : event.currentTarget);
+  }
+
+  function handleBackdrop(event: MouseEvent<HTMLDivElement>): void {
+    if (event.target === event.currentTarget) closeReport();
+  }
+
+  function submitReport(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    void activeKit.widget.submitReport();
+  }
+
+  const floating = screen === "button" || screen === "picking";
+  const hoverBox = pickingState.hovered?.boundingBox;
+  const popup = pickingState.popup;
+
+  return (
+    <div
+      ref={rootRef}
+      {...OWN_UI_PROPS}
+      style={{ fontFamily: FONT_STACK, color: TOKENS.ink, fontSize: 14, lineHeight: 1.45 }}
+    >
+      <style>{`@keyframes feedback-kit-spin{to{transform:rotate(360deg)}}`}</style>
+
+      {floating ? (
+        <button
+          ref={floatingButtonRef}
+          id={FLOATING_BUTTON_ID}
+          type="button"
+          disabled={screen === "picking"}
+          aria-label={screen === "picking" ? "요소 지목 중" : "피드백 보내기"}
+          onClick={() => void openReport()}
+          style={{
+            ...primaryButton,
+            position: "fixed",
+            right: 24,
+            bottom: 24,
+            zIndex: 2147483600,
+            minWidth: 112,
+            minHeight: 46,
+            borderRadius: 24,
+            boxShadow: TOKENS.shadow,
+            opacity: screen === "picking" ? 0.76 : 1,
+            cursor: screen === "picking" ? "default" : "pointer",
+          }}
+        >
+          {screen === "picking" ? "지목 중" : "피드백"}
+        </button>
+      ) : null}
+
+      {announcement && !modal.open ? (
+        <div
+          role="status"
+          aria-live="polite"
+          style={{
+            position: "fixed",
+            right: 24,
+            bottom: 82,
+            zIndex: 2147483601,
+            padding: "10px 14px",
+            borderRadius: 10,
+            background: TOKENS.ink,
+            color: TOKENS.surface,
+            boxShadow: TOKENS.shadow,
+          }}
+        >
+          {announcement}
+        </div>
+      ) : null}
+
+      {screen === "modal" && modal.open ? (
+        <div
+          onMouseDown={handleBackdrop}
+          style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: 2147483602,
+            display: "grid",
+            placeItems: "center",
+            padding: 20,
+            background: "rgba(23, 32, 42, 0.48)",
+          }}
+        >
+          <div
+            ref={modalRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="feedback-kit-dialog-title"
+            onKeyDown={handleModalKeyDown}
+            style={{
+              width: "min(520px, 100%)",
+              maxHeight: "min(760px, calc(100vh - 40px))",
+              overflowY: "auto",
+              boxSizing: "border-box",
+              border: `1px solid ${TOKENS.line}`,
+              borderRadius: TOKENS.radius,
+              background: TOKENS.surface,
+              padding: 22,
+              boxShadow: TOKENS.shadow,
+            }}
+          >
+            <form onSubmit={submitReport}>
+              <h2 id="feedback-kit-dialog-title" style={{ margin: "0 0 4px", fontSize: 20 }}>
+                피드백 보내기
+              </h2>
+              <p style={{ margin: "0 0 18px", color: TOKENS.muted }}>
+                현재 화면의 문제나 의견을 남겨주세요.
+              </p>
+
+              <section aria-labelledby="feedback-kit-screenshot-label" style={{ marginBottom: 16 }}>
+                <strong id="feedback-kit-screenshot-label">스크린샷</strong>
+                <div
+                  style={{
+                    display: "grid",
+                    placeItems: "center",
+                    minHeight: 150,
+                    marginTop: 7,
+                    overflow: "hidden",
+                    border: `1px solid ${TOKENS.line}`,
+                    borderRadius: 10,
+                    background: TOKENS.subtle,
+                  }}
+                >
+                  {modal.screenshotStatus === "capturing" ? (
+                    <span role="status">화면 캡처 중…</span>
+                  ) : modal.screenshot ? (
+                    <img
+                      src={screenshotSource(modal.screenshot)}
+                      alt="자동 캡처된 현재 화면 미리보기"
+                      style={{ display: "block", maxWidth: "100%", maxHeight: 260, objectFit: "contain" }}
+                    />
+                  ) : (
+                    <span role="status" style={{ padding: 18, color: TOKENS.muted, textAlign: "center" }}>
+                      {modal.screenshotMessage ?? "스크린샷 없음"}
+                    </span>
+                  )}
+                </div>
+                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 8 }}>
+                  {modal.screenshot ? (
+                    <button
+                      type="button"
+                      data-fk-focus-id={MODAL_ACTION_REMOVE_SCREENSHOT}
+                      disabled={draftLocked}
+                      onClick={() => kit.widget.modal.removeScreenshot()}
+                      style={baseButton}
+                    >
+                      제거
+                    </button>
+                  ) : null}
+                  <button
+                    type="button"
+                    disabled={draftLocked || modal.screenshotStatus === "capturing"}
+                    onClick={() => void recapture()}
+                    style={baseButton}
+                  >
+                    다시 찍기
+                  </button>
+                  <button
+                    type="button"
+                    disabled={draftLocked}
+                    onClick={() => fileInputRef.current?.click()}
+                    style={baseButton}
+                  >
+                    {modal.screenshot ? "파일로 교체" : "파일로 첨부"}
+                  </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/png,image/jpeg"
+                    tabIndex={-1}
+                    aria-hidden="true"
+                    onChange={(event) => void attachFile(event)}
+                    style={{ display: "none" }}
+                  />
+                </div>
+              </section>
+
+              <label htmlFor="feedback-kit-comment" style={{ display: "block", fontWeight: 700 }}>
+                코멘트 <span aria-hidden="true">*</span>
+              </label>
+              <textarea
+                id="feedback-kit-comment"
+                data-fk-focus-id={MODAL_FIELD_COMMENT}
+                value={modal.comment}
+                disabled={draftLocked}
+                aria-required="true"
+                aria-invalid={modal.commentError ? "true" : undefined}
+                aria-describedby={modal.commentError ? "feedback-kit-comment-error" : undefined}
+                onChange={(event) => kit.widget.modal.setComment(event.currentTarget.value)}
+                rows={5}
+                placeholder="무엇이 불편했는지 알려주세요"
+                style={{ ...inputStyle, marginTop: 7, resize: "vertical" }}
+              />
+              <div style={{ minHeight: 21, marginTop: 3 }}>
+                {modal.commentError ? (
+                  <span id="feedback-kit-comment-error" role="alert" style={{ color: TOKENS.danger }}>
+                    {modal.commentError}
+                  </span>
+                ) : (
+                  <span style={{ color: TOKENS.muted }}>{modal.comment.length.toLocaleString()} / 4,000</span>
+                )}
+              </div>
+
+              <label htmlFor="feedback-kit-priority" style={{ display: "block", marginTop: 10, fontWeight: 700 }}>
+                우선순위
+              </label>
+              <select
+                id="feedback-kit-priority"
+                data-fk-focus-id={MODAL_FIELD_PRIORITY}
+                value={modal.priority}
+                disabled={draftLocked}
+                onChange={(event) =>
+                  kit.widget.modal.setPriority(event.currentTarget.value as FeedbackPriority)
+                }
+                style={{ ...inputStyle, marginTop: 7 }}
+              >
+                <option value="unset">선택 안 함</option>
+                <option value="normal">보통</option>
+                <option value="high">높음</option>
+                <option value="urgent">긴급</option>
+              </select>
+
+              <button
+                type="button"
+                role="switch"
+                aria-checked="false"
+                disabled={draftLocked}
+                data-fk-focus-id={MODAL_ACTION_PICK}
+                onClick={() => kit.widget.startPicking()}
+                style={{ ...baseButton, width: "100%", marginTop: 16 }}
+              >
+                요소 지목
+              </button>
+
+              {modal.submitStatus !== "idle" || modal.pending > 0 ? (
+                <div
+                  role="status"
+                  aria-live="polite"
+                  style={{
+                    marginTop: 14,
+                    padding: 11,
+                    borderRadius: 9,
+                    background: TOKENS.subtle,
+                    color: modal.submitStatus === "pending" ? TOKENS.warning : TOKENS.ink,
+                  }}
+                >
+                  {modal.submitStatus === "sending" ? "전송 중…" : modal.submitMessage}
+                  {modal.pending > 0 ? ` · 대기 큐 ${modal.pending}건` : ""}
+                  {modal.showRetry ? (
+                    <button
+                      type="button"
+                      data-fk-focus-id={MODAL_ACTION_RETRY}
+                      onClick={() => void kit.widget.retryReport()}
+                      style={{ ...baseButton, marginLeft: 10 }}
+                    >
+                      다시 보내기
+                    </button>
+                  ) : null}
+                </div>
+              ) : null}
+
+              <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 18 }}>
+                <button
+                  type="button"
+                  data-fk-focus-id={MODAL_ACTION_CANCEL}
+                  onClick={closeReport}
+                  style={baseButton}
+                >
+                  취소
+                </button>
+                <button
+                  type="submit"
+                  data-fk-focus-id={MODAL_ACTION_SEND}
+                  disabled={!modal.canSubmit}
+                  style={{
+                    ...primaryButton,
+                    opacity: modal.canSubmit ? 1 : 0.5,
+                    cursor: modal.canSubmit ? "pointer" : "not-allowed",
+                  }}
+                >
+                  {modal.submitStatus === "sending" ? "전송 중…" : "보내기"}
+                </button>
+              </div>
+            </form>
+
+            {modal.closeConfirmVisible ? (
+              <div
+                style={{
+                  position: "fixed",
+                  inset: 0,
+                  zIndex: 2147483604,
+                  display: "grid",
+                  placeItems: "center",
+                  padding: 20,
+                  background: "rgba(23, 32, 42, 0.58)",
+                }}
+              >
+                <div
+                  ref={confirmRef}
+                  role="alertdialog"
+                  aria-modal="true"
+                  aria-labelledby="feedback-kit-close-title"
+                  tabIndex={-1}
+                  style={{
+                    width: "min(360px, 100%)",
+                    boxSizing: "border-box",
+                    borderRadius: 12,
+                    background: TOKENS.surface,
+                    padding: 20,
+                    boxShadow: TOKENS.shadow,
+                  }}
+                >
+                  <h3 id="feedback-kit-close-title" style={{ margin: "0 0 6px", fontSize: 17 }}>
+                    작성 중인 내용을 닫을까요?
+                  </h3>
+                  <p style={{ margin: "0 0 16px", color: TOKENS.muted }}>
+                    아직 보내지 않은 코멘트가 있습니다.
+                  </p>
+                  <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
+                    <button type="button" onClick={() => kit.widget.cancelCloseReport()} style={baseButton}>
+                      계속 쓰기
+                    </button>
+                    <button type="button" onClick={() => kit.widget.confirmCloseReport()} style={primaryButton}>
+                      닫기
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      {screen === "picking" && pickingState.active ? (
+        <div
+          aria-label="요소 지목 오버레이"
+          style={{ position: "fixed", inset: 0, zIndex: 2147483599, pointerEvents: "none" }}
+        >
+          {hoverBox ? (
+            <div
+              aria-hidden="true"
+              style={{
+                position: "fixed",
+                left: hoverBox.x,
+                top: hoverBox.y,
+                width: hoverBox.width,
+                height: hoverBox.height,
+                boxSizing: "border-box",
+                border: `2px solid ${TOKENS.accent}`,
+                background: "rgba(49, 93, 115, 0.12)",
+              }}
+            />
+          ) : null}
+
+          <button
+            type="button"
+            onClick={() => kit.widget.stopPicking()}
+            style={{
+              ...primaryButton,
+              position: "fixed",
+              top: 18,
+              right: 18,
+              pointerEvents: "auto",
+              boxShadow: TOKENS.shadow,
+            }}
+          >
+            지목 종료
+          </button>
+
+          {pickingState.markers.map((marker, index) => (
+            <div
+              key={marker.id}
+              role="status"
+              aria-label={`주석 ${index + 1}: ${marker.comment}`}
+              style={{
+                position: "fixed",
+                left: `${marker.x * 100}%`,
+                top: `${marker.y * 100}%`,
+                transform: "translate(-13px, -13px)",
+                display: "grid",
+                placeItems: "center",
+                minWidth: 26,
+                height: 26,
+                padding: "0 7px",
+                border: `2px solid ${TOKENS.surface}`,
+                borderRadius: 16,
+                background: TOKENS.ink,
+                color: TOKENS.surface,
+                boxShadow: "0 3px 10px rgba(23, 32, 42, 0.3)",
+                pointerEvents: "none",
+                fontSize: 11,
+                fontWeight: 700,
+              }}
+            >
+              <MarkerStatus status={marker.status} />
+            </div>
+          ))}
+
+          {popup ? (
+            <form
+              aria-label="요소 주석"
+              onSubmit={(event) => {
+                event.preventDefault();
+                void kit.picking.saveAnnotation();
+              }}
+              style={{
+                position: "fixed",
+                left: `min(${popup.point.x * 100}vw, calc(100vw - 336px))`,
+                top: `min(${popup.point.y * 100}vh, calc(100vh - 230px))`,
+                width: "min(320px, calc(100vw - 32px))",
+                boxSizing: "border-box",
+                border: `1px solid ${TOKENS.line}`,
+                borderRadius: 12,
+                background: TOKENS.surface,
+                padding: 14,
+                boxShadow: TOKENS.shadow,
+                pointerEvents: "auto",
+              }}
+            >
+              <label htmlFor="feedback-kit-annotation" style={{ display: "block", fontWeight: 700 }}>
+                이 요소에 주석 남기기
+              </label>
+              {popup.element?.text ? (
+                <p style={{ margin: "4px 0 9px", color: TOKENS.muted }}>
+                  {popup.element.text}
+                </p>
+              ) : null}
+              <textarea
+                id="feedback-kit-annotation"
+                autoFocus
+                value={popup.comment}
+                onChange={(event) => kit.picking.setAnnotationComment(event.currentTarget.value)}
+                rows={4}
+                placeholder="의견을 입력해주세요"
+                style={{ ...inputStyle, resize: "vertical" }}
+              />
+              {popup.comment.length > 4000 ? (
+                <div role="alert" style={{ marginTop: 4, color: TOKENS.danger }}>
+                  4,000자 이하로 입력해주세요
+                </div>
+              ) : null}
+              <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 10 }}>
+                <button type="button" onClick={() => kit.picking.cancelAnnotation()} style={baseButton}>
+                  취소
+                </button>
+                <button
+                  type="submit"
+                  disabled={!popup.canSave}
+                  style={{
+                    ...primaryButton,
+                    opacity: popup.canSave ? 1 : 0.5,
+                    cursor: popup.canSave ? "pointer" : "not-allowed",
+                  }}
+                >
+                  저장
+                </button>
+              </div>
+            </form>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}