@bigtablet/design-system 3.6.0 → 3.7.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { Ref } from 'react';
+import { HTMLAttributes, Ref } from 'react';
 import * as _react_spring_web from '@react-spring/web';
 import { LucideProps, LucideIcon } from 'lucide-react';
 export { LucideIcon, LucideProps } from 'lucide-react';
@@ -1775,7 +1775,7 @@ interface ImageCropperHandle {
     /** 배율·위치를 초기 상태(전체가 보이는 zoom=min, 중앙)로 되돌린다. */
     reset: () => void;
 }
-interface ImageCropperProps {
+interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onError" | "children" | "dangerouslySetInnerHTML"> {
     /** 크롭/리셋을 호출할 imperative 핸들 (React 19 ref-as-prop). */
     ref?: Ref<ImageCropperHandle>;
     /** 크롭할 이미지. `File`/`Blob`(로컬) 또는 이미지 URL 문자열. */
@@ -1801,6 +1801,16 @@ interface ImageCropperProps {
     className?: string;
     /** 뷰포트 접근성 레이블. 기본 "이미지 위치와 배율 조정". */
     label?: string;
+    /** 뷰포트 아래 조작 안내 문구. 기본 "드래그(또는 방향키)로 위치, 휠·슬라이더로 배율을 맞추세요." */
+    hint?: string;
+    /** 축소 버튼 접근성 레이블. 기본 "축소". */
+    zoomOutLabel?: string;
+    /** 배율 슬라이더 접근성 레이블. 기본 "배율". */
+    zoomLabel?: string;
+    /** 확대 버튼 접근성 레이블. 기본 "확대". */
+    zoomInLabel?: string;
+    /** 이동 여유가 없을 때 스크린리더로 알리는 문구. 기본 "이미지가 뷰포트를 딱 채워 이동 여유가 없습니다." */
+    noPanHint?: string;
 }
 /**
  * 업로드 전에 이미지에서 보일 정사각 영역을 정하는 크로퍼. 뷰포트 안에서 **드래그(또는 방향키)**
@@ -1817,7 +1827,7 @@ interface ImageCropperProps {
  * 원격 URL 을 넘기면 `canvas.drawImage` 가 서버의 CORS(`Access-Control-Allow-Origin`)에
  * 의존한다 — 확실히 자르려면 로컬 `File`/`Blob` 을 권장한다.
  */
-declare function ImageCropper({ ref, src, outputSize, outputType, quality, circular, viewportSize, minZoom, maxZoom, onReady, onError, className, label, }: ImageCropperProps): React$1.JSX.Element;
+declare function ImageCropper({ ref, src, outputSize, outputType, quality, circular, viewportSize, minZoom, maxZoom, onReady, onError, className, label, hint, zoomOutLabel, zoomLabel, zoomInLabel, noPanHint, ...rest }: ImageCropperProps): React$1.JSX.Element;
 
 interface OtpInputProps {
     /** OTP 자릿수 (기본값: 6) */

package/dist/index.js

@@ -3561,12 +3561,20 @@ function ImageCropper({
   onReady,
   onError,
   className,
-  label = "\uC774\uBBF8\uC9C0 \uC704\uCE58\uC640 \uBC30\uC728 \uC870\uC815"
+  label = "\uC774\uBBF8\uC9C0 \uC704\uCE58\uC640 \uBC30\uC728 \uC870\uC815",
+  hint = "\uB4DC\uB798\uADF8(\uB610\uB294 \uBC29\uD5A5\uD0A4)\uB85C \uC704\uCE58, \uD720\xB7\uC2AC\uB77C\uC774\uB354\uB85C \uBC30\uC728\uC744 \uB9DE\uCD94\uC138\uC694.",
+  zoomOutLabel = "\uCD95\uC18C",
+  zoomLabel = "\uBC30\uC728",
+  zoomInLabel = "\uD655\uB300",
+  noPanHint = "\uC774\uBBF8\uC9C0\uAC00 \uBDF0\uD3EC\uD2B8\uB97C \uB531 \uCC44\uC6CC \uC774\uB3D9 \uC5EC\uC720\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  ...rest
 }) {
   const imageRef = useRef(null);
+  const viewportRef = useRef(null);
   const dragRef = useRef(
     null
   );
+  const hintId = useId();
   const [previewUrl, setPreviewUrl] = useState("");
   const [srcType, setSrcType] = useState("");
   useEffect(() => {
@@ -3582,11 +3590,13 @@ function ImageCropper({
   }, [src]);
   const [imageSize, setImageSize] = useState(null);
   const [zoom, setZoom] = useState(minZoom);
+  const zoomRef = useRef(zoom);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const [dragging, setDragging] = useState(false);
   useEffect(() => {
     setImageSize(null);
     setZoom(minZoom);
+    zoomRef.current = minZoom;
     setOffset({ x: 0, y: 0 });
   }, [src, minZoom]);
   const handleImageLoad = (event) => {
@@ -3601,6 +3611,7 @@ function ImageCropper({
     (next) => {
       const clampedZoom = Math.min(maxZoom, Math.max(minZoom, next));
       setZoom(clampedZoom);
+      zoomRef.current = clampedZoom;
       if (imageSize) {
         setOffset((prev) => clampCropOffset(prev, imageSize, viewportSize, clampedZoom));
       }
@@ -3637,11 +3648,16 @@ function ImageCropper({
       setDragging(false);
     }
   };
-  const handleWheel = (event) => {
-    if (!imageSize) return;
-    event.preventDefault();
-    applyZoom(zoom - event.deltaY * WHEEL_ZOOM_FACTOR * zoom);
-  };
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || !imageSize) return;
+    const handleWheel = (event) => {
+      event.preventDefault();
+      applyZoom(zoomRef.current - event.deltaY * WHEEL_ZOOM_FACTOR * zoomRef.current);
+    };
+    viewport.addEventListener("wheel", handleWheel, { passive: false });
+    return () => viewport.removeEventListener("wheel", handleWheel);
+  }, [imageSize, applyZoom]);
   const handleKeyDown2 = (event) => {
     if (!imageSize) return;
     switch (event.key) {
@@ -3675,6 +3691,7 @@ function ImageCropper({
     () => ({
       reset: () => {
         setZoom(minZoom);
+        zoomRef.current = minZoom;
         setOffset({ x: 0, y: 0 });
       },
       crop: () => new Promise((resolve, reject) => {
@@ -3722,92 +3739,95 @@ function ImageCropper({
     height: imageSize.height * scale,
     transform: `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`
   } : { visibility: "hidden" };
-  return /* @__PURE__ */ jsxs("div", { className: cn("image_cropper", className), children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn("image_cropper_viewport", dragging && "image_cropper_viewport_dragging"),
-        style: viewportStyle,
-        role: "group",
-        "aria-label": label,
-        "aria-describedby": "image_cropper_hint",
-        tabIndex: imageSize ? 0 : -1,
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: handlePointerEnd,
-        onPointerCancel: handlePointerEnd,
-        onWheel: handleWheel,
-        onKeyDown: handleKeyDown2,
-        children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              ref: imageRef,
-              src: previewUrl || void 0,
-              alt: "",
-              className: "image_cropper_image",
-              draggable: false,
-              crossOrigin: typeof src === "string" ? "anonymous" : void 0,
-              onLoad: handleImageLoad,
-              onError,
-              style: imageStyle
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "image_cropper_mask",
-                circular && "image_cropper_mask_circular",
-                dragging && "image_cropper_mask_active"
-              ),
-              "aria-hidden": "true"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("p", { id: "image_cropper_hint", className: "image_cropper_hint", children: "\uB4DC\uB798\uADF8(\uB610\uB294 \uBC29\uD5A5\uD0A4)\uB85C \uC704\uCE58, \uD720\xB7\uC2AC\uB77C\uC774\uB354\uB85C \uBC30\uC728\uC744 \uB9DE\uCD94\uC138\uC694." }),
-    /* @__PURE__ */ jsxs("div", { className: "image_cropper_zoom", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "image_cropper_zoom_button",
-          "aria-label": "\uCD95\uC18C",
-          disabled: !imageSize || zoom <= minZoom,
-          onClick: () => applyZoom(zoom - ZOOM_KEY_STEP),
-          children: "\u2212"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
+  return (
+    // className 은 위에서 별도 구조분해되어 rest 에 없으므로 spread 순서와 무관하게 충돌하지 않는다.
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("image_cropper", className), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          type: "range",
-          className: "image_cropper_zoom_slider",
-          "aria-label": "\uBC30\uC728",
-          min: minZoom,
-          max: maxZoom,
-          step: ZOOM_STEP,
-          value: zoom,
-          disabled: !imageSize,
-          onChange: (event) => applyZoom(Number(event.target.value))
+          ref: viewportRef,
+          className: cn("image_cropper_viewport", dragging && "image_cropper_viewport_dragging"),
+          style: viewportStyle,
+          role: "group",
+          "aria-label": label,
+          "aria-describedby": hintId,
+          tabIndex: imageSize ? 0 : -1,
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: handlePointerEnd,
+          onPointerCancel: handlePointerEnd,
+          onKeyDown: handleKeyDown2,
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                ref: imageRef,
+                src: previewUrl || void 0,
+                alt: "",
+                className: "image_cropper_image",
+                draggable: false,
+                crossOrigin: typeof src === "string" ? "anonymous" : void 0,
+                onLoad: handleImageLoad,
+                onError,
+                style: imageStyle
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "image_cropper_mask",
+                  circular && "image_cropper_mask_circular",
+                  dragging && "image_cropper_mask_active"
+                ),
+                "aria-hidden": "true"
+              }
+            )
+          ]
         }
       ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "image_cropper_zoom_button",
-          "aria-label": "\uD655\uB300",
-          disabled: !imageSize || zoom >= maxZoom,
-          onClick: () => applyZoom(zoom + ZOOM_KEY_STEP),
-          children: "\uFF0B"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: "image_cropper_sr_only", "aria-live": "polite", children: imageSize && !canPan ? "\uC774\uBBF8\uC9C0\uAC00 \uBDF0\uD3EC\uD2B8\uB97C \uB531 \uCC44\uC6CC \uC774\uB3D9 \uC5EC\uC720\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." : "" })
-  ] });
+      /* @__PURE__ */ jsx("p", { id: hintId, className: "image_cropper_hint", children: hint }),
+      /* @__PURE__ */ jsxs("div", { className: "image_cropper_zoom", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "image_cropper_zoom_button",
+            "aria-label": zoomOutLabel,
+            disabled: !imageSize || zoom <= minZoom,
+            onClick: () => applyZoom(zoom - ZOOM_KEY_STEP),
+            children: "\u2212"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            className: "image_cropper_zoom_slider",
+            "aria-label": zoomLabel,
+            min: minZoom,
+            max: maxZoom,
+            step: ZOOM_STEP,
+            value: zoom,
+            disabled: !imageSize,
+            onChange: (event) => applyZoom(Number(event.target.value))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "image_cropper_zoom_button",
+            "aria-label": zoomInLabel,
+            disabled: !imageSize || zoom >= maxZoom,
+            onClick: () => applyZoom(zoom + ZOOM_KEY_STEP),
+            children: "\uFF0B"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "image_cropper_sr_only", "aria-live": "polite", children: imageSize && !canPan ? noPanHint : "" })
+    ] })
+  );
 }
 var OtpInput = ({
   length = 6,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.6.0",
+	"version": "3.7.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",