@seed-design/react-drawer 1.0.9 → 1.0.11

package/lib/{Drawer-12s-B35ZJcKm.cjs → Drawer-12s-Bkn6enz-.cjs}

@@ -1029,6 +1029,10 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const pointerStartRef = React.useRef(null);
     const lastKnownPointerEventRef = React.useRef(null);
     const wasBeyondThePointRef = React.useRef(false);
+    // Whether the current gesture moved past the swipe-start threshold. Used to
+    // suppress the trailing click so dragging the sheet doesn't also activate the
+    // element the gesture started on (iOS still synthesizes a click on release).
+    const draggedRef = React.useRef(false);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const isDeltaInDirection = (delta, direction, threshold = 0)=>{
         if (wasBeyondThePointRef.current) return true;
@@ -1086,6 +1090,7 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
                 x: event.pageX,
                 y: event.pageY
             };
+            draggedRef.current = false;
             onPress(event);
         },
         onOpenAutoFocus: (e)=>{
@@ -1122,9 +1127,14 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
                 x: xPosition,
                 y: yPosition
             };
+            // Once the pointer travels past the swipe-start threshold the gesture
+            // is a drag, not a tap — remember it so the trailing click can be
+            // suppressed on release (iOS still synthesizes one on the origin).
+            const isBeyondThreshold = Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold;
+            if (isBeyondThreshold) draggedRef.current = true;
             const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
             if (isAllowedToSwipe) onDrag(event);
-            else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
+            else if (isBeyondThreshold) {
                 pointerStartRef.current = null;
             }
         },
@@ -1144,6 +1154,17 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
                 handleOnPointerUp(lastKnownPointerEventRef.current);
             }
         },
+        onClickCapture: (event)=>{
+            restProps.onClickCapture?.(event);
+            // Swallow the click that follows a drag so dragging the sheet (e.g. a
+            // swipe-to-dismiss started on an item) doesn't also activate that item.
+            // A plain tap leaves draggedRef false and clicks normally.
+            if (draggedRef.current) {
+                event.preventDefault();
+                event.stopPropagation();
+                draggedRef.current = false;
+            }
+        },
         onInteractOutside: (e)=>{
             // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
             if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {

package/lib/{Drawer-12s-B-JAOvwq.js → Drawer-12s-DxbsRb10.js}

@@ -1006,6 +1006,10 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
     const pointerStartRef = useRef(null);
     const lastKnownPointerEventRef = useRef(null);
     const wasBeyondThePointRef = useRef(false);
+    // Whether the current gesture moved past the swipe-start threshold. Used to
+    // suppress the trailing click so dragging the sheet doesn't also activate the
+    // element the gesture started on (iOS still synthesizes a click on release).
+    const draggedRef = useRef(false);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const isDeltaInDirection = (delta, direction, threshold = 0)=>{
         if (wasBeyondThePointRef.current) return true;
@@ -1063,6 +1067,7 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
                 x: event.pageX,
                 y: event.pageY
             };
+            draggedRef.current = false;
             onPress(event);
         },
         onOpenAutoFocus: (e)=>{
@@ -1099,9 +1104,14 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
                 x: xPosition,
                 y: yPosition
             };
+            // Once the pointer travels past the swipe-start threshold the gesture
+            // is a drag, not a tap — remember it so the trailing click can be
+            // suppressed on release (iOS still synthesizes one on the origin).
+            const isBeyondThreshold = Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold;
+            if (isBeyondThreshold) draggedRef.current = true;
             const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
             if (isAllowedToSwipe) onDrag(event);
-            else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
+            else if (isBeyondThreshold) {
                 pointerStartRef.current = null;
             }
         },
@@ -1121,6 +1131,17 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
                 handleOnPointerUp(lastKnownPointerEventRef.current);
             }
         },
+        onClickCapture: (event)=>{
+            restProps.onClickCapture?.(event);
+            // Swallow the click that follows a drag so dragging the sheet (e.g. a
+            // swipe-to-dismiss started on an item) doesn't also activate that item.
+            // A plain tap leaves draggedRef false and clicks normally.
+            if (draggedRef.current) {
+                event.preventDefault();
+                event.stopPropagation();
+                draggedRef.current = false;
+            }
+        },
         onInteractOutside: (e)=>{
             // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
             if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Drawer12s = require('./Drawer-12s-B35ZJcKm.cjs');
+var Drawer12s = require('./Drawer-12s-Bkn6enz-.cjs');
 
 var Drawer_namespace = {
   __proto__: null,

package/lib/index.d.ts

@@ -40,6 +40,7 @@ interface UseDrawerProps {
     /**
      * When `true` the `body` doesn't get any styles assigned from Drawer
      * @default true
+     * @deprecated SEED React 2.0.0에서 제거됩니다. 2.0.0부터 항상 기본값 `true`처럼 동작합니다.
      */
     noBodyStyles?: boolean;
     onOpenChange?: (open: boolean, details?: DrawerChangeDetails) => void;
@@ -101,6 +102,9 @@ interface UseDrawerProps {
      * Useful to revert any state changes for example.
      */
     onAnimationEnd?: (open: boolean) => void;
+    /**
+     * @deprecated SEED React 2.0.0에서 제거됩니다. 2.0.0부터 항상 기본값 `false`처럼 동작합니다.
+     */
     preventScrollRestoration?: boolean;
     autoFocus?: boolean;
     /**

package/lib/index.js

@@ -1,5 +1,5 @@
-import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerHeader, f as DrawerPositioner, g as DrawerRoot, h as DrawerTitle, i as DrawerTrigger } from './Drawer-12s-B-JAOvwq.js';
-export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-B-JAOvwq.js';
+import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerHeader, f as DrawerPositioner, g as DrawerRoot, h as DrawerTitle, i as DrawerTrigger } from './Drawer-12s-DxbsRb10.js';
+export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-DxbsRb10.js';
 
 var Drawer_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-drawer",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/src/Drawer.test.tsx

@@ -0,0 +1,111 @@
+import { fireEvent, render } from "@testing-library/react";
+import { afterAll, beforeAll, describe, expect, it, mock, spyOn } from "bun:test";
+import { DrawerContent, DrawerDescription, DrawerRoot, DrawerTitle } from "./Drawer";
+
+function mockRect(element: HTMLElement, size = 100) {
+  return spyOn(element, "getBoundingClientRect").mockReturnValue({
+    x: 0,
+    y: 0,
+    width: size,
+    height: size,
+    top: 0,
+    left: 0,
+    right: size,
+    bottom: size,
+    toJSON: () => {},
+  });
+}
+
+// happy-dom's fireEvent does not carry page coordinates onto the synthetic
+// event, so build the native PointerEvent and pin pageX/pageY explicitly —
+// the same data a real touch gesture delivers and what the swipe-threshold
+// check reads.
+function firePointer(type: string, element: HTMLElement, x: number, y: number) {
+  const event = new PointerEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    pointerId: 1,
+    pointerType: "touch",
+    clientX: x,
+    clientY: y,
+  });
+  Object.defineProperty(event, "pageX", { value: x });
+  Object.defineProperty(event, "pageY", { value: y });
+  fireEvent(element, event);
+}
+
+function setup(onItemClick: () => void) {
+  const utils = render(
+    <DrawerRoot defaultOpen dismissible direction="bottom" modal={false}>
+      <DrawerContent>
+        <DrawerTitle>Sheet</DrawerTitle>
+        <DrawerDescription>Sheet body</DrawerDescription>
+        <button type="button" data-testid="item" onClick={onItemClick}>
+          item
+        </button>
+      </DrawerContent>
+    </DrawerRoot>,
+  );
+  const content = utils.container.ownerDocument.querySelector("[data-drawer]") as HTMLElement;
+
+  // getTranslate() reads getComputedStyle().transform, which happy-dom leaves
+  // empty; seed an identity matrix and a measurable rect so onDrag doesn't throw.
+  content.style.transform = "matrix(1, 0, 0, 1, 0, 0)";
+  mockRect(content);
+
+  return { ...utils, content, item: utils.getByTestId("item") };
+}
+
+describe("DrawerContent trailing-click suppression", () => {
+  const originalSetPointerCapture = window.HTMLElement.prototype.setPointerCapture;
+
+  beforeAll(() => {
+    window.HTMLElement.prototype.setPointerCapture = mock(() => {});
+  });
+
+  afterAll(() => {
+    window.HTMLElement.prototype.setPointerCapture = originalSetPointerCapture;
+  });
+
+  it("드래그가 swipe 임계값을 넘으면 뒤따르는 click을 억제한다", () => {
+    const onItemClick = mock(() => {});
+    const { content, item } = setup(onItemClick);
+
+    firePointer("pointerdown", content, 50, 50);
+    firePointer("pointermove", content, 50, 85); // +35px > touch 임계값 10px
+    firePointer("pointerup", content, 50, 85);
+    fireEvent.click(item, { clientX: 50, clientY: 85 });
+
+    expect(onItemClick).not.toHaveBeenCalled();
+  });
+
+  it("임계값을 넘지 않은 순수 tap은 click을 통과시킨다", () => {
+    const onItemClick = mock(() => {});
+    const { content, item } = setup(onItemClick);
+
+    firePointer("pointerdown", content, 50, 50);
+    firePointer("pointermove", content, 52, 53); // 임계값 이내
+    firePointer("pointerup", content, 52, 53);
+    fireEvent.click(item, { clientX: 52, clientY: 53 });
+
+    expect(onItemClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("click 없이 끝난 드래그 뒤의 깨끗한 tap은 다음 pointerdown에서 리셋되어 통과한다", () => {
+    const onItemClick = mock(() => {});
+    const { content, item } = setup(onItemClick);
+
+    // 큰 드래그는 iOS가 click을 합성하지 않아 click 없이 끝난다.
+    firePointer("pointerdown", content, 50, 50);
+    firePointer("pointermove", content, 50, 85);
+    firePointer("pointerup", content, 50, 85);
+
+    // 다음 제스처의 pointerdown이 드래그 상태를 리셋하므로 tap은 정상 동작해야 한다.
+    firePointer("pointerdown", content, 50, 50);
+    firePointer("pointermove", content, 51, 51);
+    firePointer("pointerup", content, 51, 51);
+    fireEvent.click(item, { clientX: 51, clientY: 51 });
+
+    expect(onItemClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/Drawer.tsx

@@ -130,6 +130,10 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
   const pointerStartRef = useRef<{ x: number; y: number } | null>(null);
   const lastKnownPointerEventRef = useRef<React.PointerEvent<HTMLDivElement> | null>(null);
   const wasBeyondThePointRef = useRef(false);
+  // Whether the current gesture moved past the swipe-start threshold. Used to
+  // suppress the trailing click so dragging the sheet doesn't also activate the
+  // element the gesture started on (iOS still synthesizes a click on release).
+  const draggedRef = useRef(false);
   const hasSnapPoints = snapPoints && snapPoints.length > 0;
 
   const isDeltaInDirection = (
@@ -197,6 +201,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
         if (handleOnly) return;
         restProps.onPointerDown?.(event);
         pointerStartRef.current = { x: event.pageX, y: event.pageY };
+        draggedRef.current = false;
         onPress(event);
       }}
       onOpenAutoFocus={(e) => {
@@ -235,12 +240,16 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
         const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
         const delta = { x: xPosition, y: yPosition };
 
+        // Once the pointer travels past the swipe-start threshold the gesture
+        // is a drag, not a tap — remember it so the trailing click can be
+        // suppressed on release (iOS still synthesizes one on the origin).
+        const isBeyondThreshold =
+          Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold;
+        if (isBeyondThreshold) draggedRef.current = true;
+
         const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
         if (isAllowedToSwipe) onDrag(event);
-        else if (
-          Math.abs(xPosition) > swipeStartThreshold ||
-          Math.abs(yPosition) > swipeStartThreshold
-        ) {
+        else if (isBeyondThreshold) {
           pointerStartRef.current = null;
         }
       }}
@@ -260,6 +269,17 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
           handleOnPointerUp(lastKnownPointerEventRef.current);
         }
       }}
+      onClickCapture={(event) => {
+        restProps.onClickCapture?.(event);
+        // Swallow the click that follows a drag so dragging the sheet (e.g. a
+        // swipe-to-dismiss started on an item) doesn't also activate that item.
+        // A plain tap leaves draggedRef false and clicks normally.
+        if (draggedRef.current) {
+          event.preventDefault();
+          event.stopPropagation();
+          draggedRef.current = false;
+        }
+      }}
       onInteractOutside={(e) => {
         // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
         if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {

package/src/useDrawer.test.tsx

@@ -0,0 +1,341 @@
+import { act, fireEvent, render } from "@testing-library/react";
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  it,
+  jest,
+  mock,
+  spyOn,
+} from "bun:test";
+import * as React from "react";
+import { DRAG_CLASS, TRANSITIONS } from "./constants";
+import { useDrawer, type UseDrawerProps } from "./useDrawer";
+
+interface DrawerHarnessProps extends UseDrawerProps {
+  initialCloseButtonVisible?: boolean;
+  onApi?: (api: ReturnType<typeof useDrawer>) => void;
+}
+
+function DrawerHarness({
+  initialCloseButtonVisible = false,
+  onApi,
+  ...props
+}: DrawerHarnessProps) {
+  const api = useDrawer(props);
+  const [showCloseButton, setShowCloseButton] = React.useState(initialCloseButtonVisible);
+
+  React.useEffect(() => {
+    onApi?.(api);
+  }, [api, onApi]);
+
+  return (
+    <div>
+      <button data-testid="set-open" onClick={() => api.setIsOpen(true)}>
+        열기 설정
+      </button>
+      <button
+        data-testid="set-close"
+        onClick={() =>
+          api.setIsOpen(false, { reason: "closeButton", event: new MouseEvent("click") })
+        }
+      >
+        닫기 설정
+      </button>
+      <button
+        data-testid="close-drawer"
+        onClick={() =>
+          api.closeDrawer(false, { reason: "escapeKeyDown", event: new KeyboardEvent("keydown") })
+        }
+      >
+        드로어 닫기
+      </button>
+      <button
+        data-testid="set-second-snap"
+        onClick={() => api.setActiveSnapPoint(api.snapPoints?.[1] ?? null)}
+      >
+        두 번째 스냅으로 이동
+      </button>
+      <button
+        data-testid="toggle-close-button"
+        onClick={() => setShowCloseButton((visible) => !visible)}
+      >
+        닫기 버튼 토글
+      </button>
+
+      {showCloseButton ? <button data-testid="close-button" ref={api.closeButtonRef} /> : null}
+
+      <div data-testid="is-open">{String(api.isOpen)}</div>
+      <div data-testid="is-dragging">{String(api.isDragging)}</div>
+      <div data-testid="active-snap-point">{String(api.activeSnapPoint)}</div>
+      <div data-testid="has-animation-done">{String(api.hasAnimationDone)}</div>
+      <div data-testid="should-overlay-animate">{String(api.shouldOverlayAnimate)}</div>
+      <div data-testid="is-close-button-rendered">{String(api.isCloseButtonRendered)}</div>
+
+      <div
+        data-testid="drawer"
+        role="dialog"
+        ref={api.drawerRef}
+        onPointerDown={api.onPress}
+        onPointerMove={api.onDrag}
+        onPointerUp={api.onRelease}
+      />
+      <div data-testid="overlay" ref={api.overlayRef} />
+    </div>
+  );
+}
+
+function mockRect(element: HTMLElement, size = 100) {
+  return spyOn(element, "getBoundingClientRect").mockReturnValue({
+    x: 0,
+    y: 0,
+    width: size,
+    height: size,
+    top: 0,
+    left: 0,
+    right: size,
+    bottom: size,
+    toJSON: () => {},
+  });
+}
+
+describe("useDrawer", () => {
+  const originalSetPointerCapture = window.HTMLElement.prototype.setPointerCapture;
+
+  beforeAll(() => {
+    window.HTMLElement.prototype.setPointerCapture = mock(() => {});
+  });
+
+  afterAll(() => {
+    window.HTMLElement.prototype.setPointerCapture = originalSetPointerCapture;
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    document.body.style.pointerEvents = "";
+  });
+
+  it("closeButtonRef를 통해 닫기 버튼 마운트 상태를 추적한다", () => {
+    const { getByTestId } = render(<DrawerHarness />);
+
+    expect(getByTestId("is-close-button-rendered")).toHaveTextContent("false");
+
+    fireEvent.click(getByTestId("toggle-close-button"));
+    expect(getByTestId("is-close-button-rendered")).toHaveTextContent("true");
+
+    fireEvent.click(getByTestId("toggle-close-button"));
+    expect(getByTestId("is-close-button-rendered")).toHaveTextContent("false");
+  });
+
+  it("closeDrawer 호출 시 상세 정보와 함께 닫힘 라이프사이클 콜백을 호출한다", () => {
+    jest.useFakeTimers();
+
+    const onOpenChange = mock(() => {});
+    const onAnimationEnd = mock(() => {});
+    const onClose = mock(() => {});
+    const { getByTestId } = render(
+      <DrawerHarness
+        defaultOpen
+        onOpenChange={onOpenChange}
+        onAnimationEnd={onAnimationEnd}
+        onClose={onClose}
+      />,
+    );
+
+    fireEvent.click(getByTestId("close-drawer"));
+
+    expect(getByTestId("is-open")).toHaveTextContent("false");
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(
+      false,
+      expect.objectContaining({ reason: "escapeKeyDown" }),
+    );
+    expect(document.body.style.pointerEvents).toBe("auto");
+
+    act(() => {
+      jest.advanceTimersByTime(TRANSITIONS.EXIT_DURATION * 1000);
+    });
+    expect(onAnimationEnd).toHaveBeenCalledWith(false);
+  });
+
+  it("dismissible이 false이고 snapPoints가 없으면 드래그를 시작하지 않는다", () => {
+    const { getByTestId } = render(<DrawerHarness defaultOpen dismissible={false} direction="left" />);
+    const drawer = getByTestId("drawer");
+
+    fireEvent.pointerDown(drawer, {
+      pointerId: 1,
+      pageX: 100,
+      pageY: 0,
+      clientX: 100,
+      clientY: 0,
+      pointerType: "mouse",
+    });
+    fireEvent.pointerMove(drawer, {
+      pointerId: 1,
+      pageX: 80,
+      pageY: 0,
+      clientX: 80,
+      clientY: 0,
+      pointerType: "mouse",
+    });
+
+    expect(getByTestId("is-dragging")).toHaveTextContent("false");
+    expect(drawer.classList.contains(DRAG_CLASS)).toBe(false);
+  });
+
+  it("dismissible이 false여도 snapPoints가 있으면 드래그를 시작한다", () => {
+    const { getByTestId } = render(
+      <DrawerHarness
+        defaultOpen
+        dismissible={false}
+        direction="left"
+        snapPoints={["100px", "300px"]}
+      />,
+    );
+    const drawer = getByTestId("drawer");
+    const rectSpy = mockRect(drawer, 100);
+
+    fireEvent.pointerDown(drawer, {
+      pointerId: 1,
+      pageX: 100,
+      pageY: 0,
+      clientX: 100,
+      clientY: 0,
+      pointerType: "mouse",
+    });
+
+    expect(getByTestId("is-dragging")).toHaveTextContent("true");
+
+    rectSpy.mockRestore();
+  });
+
+  it("드래그 중 transform을 갱신하고 onDrag를 비율과 함께 호출한다", () => {
+    const onDrag = mock(() => {});
+    let api: ReturnType<typeof useDrawer> | null = null;
+    const { getByTestId } = render(
+      <DrawerHarness
+        defaultOpen
+        direction="left"
+        onDrag={onDrag}
+        onApi={(latestApi) => {
+          api = latestApi;
+        }}
+      />,
+    );
+    const drawer = getByTestId("drawer");
+    const rectSpy = mockRect(drawer, 100);
+
+    if (!api) {
+      throw new Error("Drawer API를 사용할 수 없습니다.");
+    }
+
+    const createPointerEvent = (target: HTMLElement, pageX: number, pageY: number) =>
+      ({
+        target,
+        currentTarget: target,
+        pointerId: 1,
+        pageX,
+        pageY,
+        nativeEvent: new PointerEvent("pointermove"),
+      }) as unknown as React.PointerEvent<HTMLDivElement>;
+
+    act(() => {
+      api?.onPress(createPointerEvent(drawer, 100, 0));
+    });
+    drawer.style.transform = "matrix(1, 0, 0, 1, 0, 0)";
+    act(() => {
+      api?.onDrag(createPointerEvent(drawer, 80, 0));
+    });
+
+    expect(getByTestId("is-dragging")).toHaveTextContent("true");
+    expect(drawer.classList.contains(DRAG_CLASS)).toBe(true);
+    expect(drawer.style.transform).toBe("translate3d(-20px, 0, 0)");
+    expect(onDrag).toHaveBeenCalledWith(expect.anything(), 0.2);
+
+    rectSpy.mockRestore();
+  });
+
+  it("열리는 방향으로 스와이프 후 릴리즈하면 드로어를 리셋하고 open=true를 전달한다", () => {
+    const onRelease = mock(() => {});
+    const { getByTestId } = render(
+      <DrawerHarness defaultOpen direction="right" onRelease={onRelease} />,
+    );
+    const drawer = getByTestId("drawer");
+    const rectSpy = mockRect(drawer, 100);
+
+    fireEvent.pointerDown(drawer, {
+      pointerId: 1,
+      pageX: 100,
+      pageY: 0,
+      clientX: 100,
+      clientY: 0,
+      pointerType: "mouse",
+    });
+    drawer.style.transform = "matrix(1, 0, 0, 1, 10, 0)";
+    fireEvent.pointerUp(drawer, {
+      pointerId: 1,
+      pageX: 80,
+      pageY: 0,
+      clientX: 80,
+      clientY: 0,
+      pointerType: "mouse",
+    });
+
+    expect(getByTestId("is-dragging")).toHaveTextContent("false");
+    expect(drawer.style.transform).toBe("translate3d(0, 0, 0)");
+    expect(onRelease).toHaveBeenCalledWith(expect.anything(), true);
+
+    rectSpy.mockRestore();
+  });
+
+  it("닫힘 애니메이션 후 active snap point를 첫 번째 스냅 포인트로 되돌린다", () => {
+    jest.useFakeTimers();
+
+    const { getByTestId } = render(
+      <DrawerHarness defaultOpen snapPoints={["100px", "300px"]} />,
+    );
+
+    fireEvent.click(getByTestId("set-second-snap"));
+    expect(getByTestId("active-snap-point")).toHaveTextContent("300px");
+
+    fireEvent.click(getByTestId("close-drawer"));
+    act(() => {
+      jest.advanceTimersByTime(TRANSITIONS.EXIT_DURATION * 1000);
+    });
+
+    expect(getByTestId("active-snap-point")).toHaveTextContent("100px");
+  });
+
+  it("open 상태와 transition 시간에 따라 hasAnimationDone을 갱신한다", () => {
+    jest.useFakeTimers();
+
+    const { getByTestId } = render(<DrawerHarness defaultOpen />);
+
+    expect(getByTestId("has-animation-done")).toHaveTextContent("false");
+
+    act(() => {
+      jest.advanceTimersByTime(TRANSITIONS.ENTER_DURATION * 1000);
+    });
+    expect(getByTestId("has-animation-done")).toHaveTextContent("true");
+
+    fireEvent.click(getByTestId("set-close"));
+    expect(getByTestId("has-animation-done")).toHaveTextContent("false");
+  });
+
+  it("fadeFromIndex가 0이면 초기 열림 구간에서만 오버레이 애니메이션을 활성화한다", () => {
+    jest.useFakeTimers();
+
+    const { getByTestId } = render(
+      <DrawerHarness defaultOpen snapPoints={["100px", "300px"]} fadeFromIndex={0} />,
+    );
+
+    expect(getByTestId("should-overlay-animate")).toHaveTextContent("true");
+
+    act(() => {
+      jest.advanceTimersByTime(TRANSITIONS.ENTER_DURATION * 1000);
+    });
+    expect(getByTestId("should-overlay-animate")).toHaveTextContent("false");
+  });
+});

package/src/useDrawer.ts

@@ -43,6 +43,7 @@ export interface UseDrawerProps {
   /**
    * When `true` the `body` doesn't get any styles assigned from Drawer
    * @default true
+   * @deprecated SEED React 2.0.0에서 제거됩니다. 2.0.0부터 항상 기본값 `true`처럼 동작합니다.
    */
   noBodyStyles?: boolean;
   onOpenChange?: (open: boolean, details?: DrawerChangeDetails) => void;
@@ -104,6 +105,9 @@ export interface UseDrawerProps {
    * Useful to revert any state changes for example.
    */
   onAnimationEnd?: (open: boolean) => void;
+  /**
+   * @deprecated SEED React 2.0.0에서 제거됩니다. 2.0.0부터 항상 기본값 `false`처럼 동작합니다.
+   */
   preventScrollRestoration?: boolean;
   autoFocus?: boolean;