+import type { ReactNode } from "react";

+

+interface IconButtonProps {

+  /** 접근성 이름(`aria-label`)과 네이티브 툴팁(`title`)으로 쓰인다. 생략하면 두

+   * 속성을 렌더하지 않는다 — 이 경우 children에 포함된 `sr-only` 텍스트가 접근성

+   * 이름이 되어야 한다(예: 아이콘 여러 개를 CSS로 전환 노출하며 각각 옆에 개별

+   * `sr-only` 라벨을 두는 구성). */

+  label?: string;

+  /** 아이콘(들). 장식용 아이콘은 자체적으로 `aria-hidden`을 갖는다 — 접근성 이름이

+   * 필요하면 `label`을 전달하거나 children에 `sr-only` 텍스트를 포함해야 한다. */

+  children: ReactNode;

+  type?: "button" | "submit";

+  /** 2-상태 토글일 때만 전달 → `aria-pressed` 렌더. 3-상태 순환 등에서는 생략 권장

+   * (`aria-pressed`는 이진 개념이라 의미가 어긋난다). */

+  isPressed?: boolean;

+  onClick?: () => void;

+  disabled?: boolean;

+  /** 배치(레이아웃) 조정용 클래스 패스스루만 허용 — 디자인 값 주입 금지. */

+  className?: string;

+}

+

+/**

+ * 아이콘 전용 버튼 비주얼. 상태를 가지지 않는 프레젠테이션 컴포넌트 — 클릭 동작·상태

+ * 관리는 호출부(feature) 책임이다.

+ */

+export function IconButton({

+  label,

+  children,

+  type = "button",

+  isPressed,

+  onClick,

+  disabled,

+  className,

+}: IconButtonProps) {

+  return (

+    <button

+      type={type}

+      onClick={onClick}

+      disabled={disabled}

+      aria-label={label}

+      title={label}

+      aria-pressed={isPressed}

+      className={`inline-flex size-9 items-center justify-center rounded-md border border-border text-foreground-muted transition-colors duration-200 hover:bg-surface-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:opacity-50 ${className ?? ""}`}

+    >

+      {children}

+    </button>

+  );

+}