@solhun/feedback-kit-web 0.1.0 → 0.2.1

package/src/feedback-kit.tsx

@@ -1,778 +0,0 @@
-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>
-  );
-}