@seed-design/react 2.3.0 → 2.4.0

package/src/components/QuantityPicker/QuantityPicker.tsx

@@ -12,8 +12,10 @@ import {
 } from "@seed-design/css/recipes/quantity-picker";
 import clsx from "clsx";
 import * as React from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { useScaleFeedback } from "../../utils/scaleFeedback";
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(quantityPicker);
 const withStateProps = createWithStateProps([useQuantityPickerContext]);
@@ -154,11 +156,12 @@ export const QuantityPickerDecrementButton = React.forwardRef<
       ? (removeIcon ?? icon)
       : icon;
   const contentIsIcon = content !== null && content !== undefined;
+  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
   return (
     <QuantityPickerPrimitive.DecrementButton
-      ref={ref}
-      className={clsx(classNames.decrementButton, className)}
+      ref={useComposedRefs(scaleFeedbackRef, ref)}
+      className={clsx(classNames.decrementButton, scaleFeedbackClassName, className)}
       {...props}
     >
       {renderIcon(content ?? children, classNames.decrementIcon, decrementIconProps, contentIsIcon)}
@@ -208,11 +211,12 @@ export const QuantityPickerIncrementButton = React.forwardRef<
   const { incrementIconProps, incrementLoading } = useQuantityPickerContext();
   const content = incrementLoading ? loadingIndicator : icon;
   const contentIsIcon = content !== null && content !== undefined;
+  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
   return (
     <QuantityPickerPrimitive.IncrementButton
-      ref={ref}
-      className={clsx(classNames.incrementButton, className)}
+      ref={useComposedRefs(scaleFeedbackRef, ref)}
+      className={clsx(classNames.incrementButton, scaleFeedbackClassName, className)}
       {...props}
     >
       {renderIcon(content ?? children, classNames.incrementIcon, incrementIconProps, contentIsIcon)}

package/src/components/RadioGroup/RadioGroup.tsx

@@ -11,6 +11,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import { InternalIcon } from "../private/Icon";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
 import { createRecipeContext } from "../../utils/createRecipeContext";
@@ -81,10 +82,12 @@ export interface RadioGroupItemControlProps
   extends RadiomarkVariantProps,
     RadioGroupPrimitive.ItemControlProps {}
 
-export const RadioGroupItemControl = withRadiomarkProvider<
-  HTMLDivElement,
-  RadioGroupItemControlProps
->(RadioGroupPrimitive.ItemControl, "root");
+export const RadioGroupItemControl = withScaleFeedback(
+  withRadiomarkProvider<HTMLDivElement, RadioGroupItemControlProps>(
+    RadioGroupPrimitive.ItemControl,
+    "root",
+  ),
+);
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/ReactionButton/ReactionButton.tsx

@@ -2,9 +2,11 @@ import {
   reactionButton,
   type ReactionButtonVariantProps,
 } from "@seed-design/css/recipes/reaction-button";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
 import clsx from "clsx";
 import * as React from "react";
+import { useScaleFeedback } from "../../utils/scaleFeedback";
 import {
   PendingButtonProvider,
   usePendingButton,
@@ -20,12 +22,13 @@ export const ReactionButton = React.forwardRef<HTMLButtonElement, ReactionButton
   ({ size = "small", loading = false, className, ...otherProps }, ref) => {
     const recipeClassName = reactionButton({ size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
     return (
       <PendingButtonProvider value={api}>
         <TogglePrimitive.Root
-          ref={ref}
-          className={clsx(recipeClassName, className)}
+          ref={useComposedRefs(scaleFeedbackRef, ref)}
+          className={clsx(recipeClassName, scaleFeedbackClassName, className)}
           {...api.stateProps}
           {...otherProps}
         />

package/src/components/ScrollFog/ScrollFog.test.tsx

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+import { ScrollFog } from "./ScrollFog";
+
+describe("ScrollFog", () => {
+  it("CSS 길이 계산식을 Fog 크기로 전달한다", () => {
+    const { container } = render(<ScrollFog size="min(40%, 132px)" />);
+    const scrollFog = container.firstElementChild as HTMLElement;
+
+    expect(scrollFog.style.getPropertyValue("--scroll-fog-size-top")).toBe("min(40%, 132px)");
+    expect(scrollFog.style.getPropertyValue("--scroll-fog-size-bottom")).toBe("min(40%, 132px)");
+  });
+});

package/src/components/ScrollFog/ScrollFog.tsx

@@ -15,20 +15,18 @@ export interface ScrollFogProps
   extends ScrollFogVariantProps,
     React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Placement of fog effect
+   * Fog 효과를 표시할 방향입니다.
    * @default ["top", "bottom"]
    */
   placement?: ScrollPlacement[];
 
   /**
-   * Size of the fog effect in pixels
+   * Fog 효과의 크기입니다. 숫자는 px 단위로 처리하며 CSS 길이 또는 계산식도 사용할 수 있습니다.
    * @default 20
    */
-  size?: number;
+  size?: number | string;
 
-  /**
-   * Size of the fog effect for each direction in pixels
-   */
+  /** 방향별 Fog 효과의 크기입니다. */
   sizes?: SizesConfig;
 }
 
@@ -42,7 +40,7 @@ export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
       ...props,
     });
     const scrollFogClassName = scrollFog(variantProps);
-    const sizePx = typeof size === "number" ? `${size}px` : size; // TODO: redundant typeof?
+    const sizePx = typeof size === "number" ? `${size}px` : size;
 
     const sizeStyle = useMemo(() => {
       const finalSizes = {

package/src/components/SidePanel/SidePanel.tsx

@@ -1,12 +1,13 @@
 import { sidePanel, type SidePanelVariantProps } from "@seed-design/css/recipes/side-panel";
 import { Drawer } from "@seed-design/react-drawer";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
 import { dataAttr } from "@seed-design/dom-utils";
 import clsx from "clsx";
 import * as React from "react";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { useScaleFeedback } from "../../utils/scaleFeedback";
 import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
 
 const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(sidePanel);
@@ -202,11 +203,12 @@ export const SidePanelCloseButton = React.forwardRef<HTMLButtonElement, SidePane
   ({ className, ...props }, ref) => {
     const classNames = useClassNames();
     const { trackRef } = closeButtonTracker.useRenderTracking();
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
     return (
       <Drawer.CloseButton
-        ref={composeRefs(ref, trackRef)}
-        className={clsx(classNames.closeButton, className)}
+        ref={useComposedRefs(scaleFeedbackRef, ref, trackRef)}
+        className={clsx(classNames.closeButton, scaleFeedbackClassName, className)}
         {...props}
       />
     );

package/src/components/Snackbar/Snackbar.tsx

@@ -6,6 +6,7 @@ import { Snackbar as SnackbarPrimitive } from "@seed-design/react-snackbar";
 import { forwardRef } from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
 const { withContext: withRegionContext } = createRecipeContext(snackbarRegion);
@@ -69,9 +70,11 @@ export const SnackbarPrefixIcon = withContext<HTMLDivElement, SnackbarPrefixIcon
 
 export interface SnackbarActionButtonProps extends SnackbarPrimitive.ActionButtonProps {}
 
-export const SnackbarActionButton = withContext<HTMLButtonElement, SnackbarActionButtonProps>(
-  SnackbarPrimitive.ActionButton,
-  "actionButton",
+export const SnackbarActionButton = withScaleFeedback(
+  withContext<HTMLButtonElement, SnackbarActionButtonProps>(
+    SnackbarPrimitive.ActionButton,
+    "actionButton",
+  ),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.tsx

@@ -9,6 +9,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 
 const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(menuSheet);
 const {
@@ -263,7 +264,9 @@ export interface SwipeableMenuSheetCloseButtonProps extends Drawer.CloseButtonPr
 /**
  * Visible button that closes the swipeable menu sheet.
  */
-export const SwipeableMenuSheetCloseButton = withContext<
-  HTMLButtonElement,
-  SwipeableMenuSheetCloseButtonProps
->(Drawer.CloseButton, "closeButton");
+export const SwipeableMenuSheetCloseButton = withScaleFeedback(
+  withContext<HTMLButtonElement, SwipeableMenuSheetCloseButtonProps>(
+    Drawer.CloseButton,
+    "closeButton",
+  ),
+);

package/src/components/Switch/Switch.tsx

@@ -4,6 +4,7 @@ import { switchmark, type SwitchmarkVariantProps } from "@seed-design/css/recipe
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import React from "react";
 import clsx from "clsx";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
@@ -49,9 +50,8 @@ SwitchRoot.displayName = "SwitchRoot";
 
 export interface SwitchControlProps extends SwitchmarkVariantProps, SwitchPrimitive.ControlProps {}
 
-export const SwitchControl = withControlProvider<HTMLDivElement, SwitchControlProps>(
-  SwitchPrimitive.Control,
-  "root",
+export const SwitchControl = withScaleFeedback(
+  withControlProvider<HTMLDivElement, SwitchControlProps>(SwitchPrimitive.Control, "root"),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/Tabs/Tabs.tsx

@@ -1,6 +1,7 @@
 import { tabs, type TabsVariantProps } from "@seed-design/css/recipes/tabs";
 import { Tabs as TabsPrimitive } from "@seed-design/react-tabs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 
 const { withProvider, withContext } = createSlotRecipeContext(tabs);
 
@@ -20,9 +21,8 @@ export const TabsList = withContext<HTMLDivElement, TabsListProps>(TabsPrimitive
 
 export interface TabsTriggerProps extends TabsPrimitive.TriggerProps {}
 
-export const TabsTrigger = withContext<HTMLButtonElement, TabsTriggerProps>(
-  TabsPrimitive.Trigger,
-  "trigger",
+export const TabsTrigger = withScaleFeedback(
+  withContext<HTMLButtonElement, TabsTriggerProps>(TabsPrimitive.Trigger, "trigger"),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/ToggleButton/ToggleButton.tsx

@@ -2,9 +2,11 @@ import {
   toggleButton,
   type ToggleButtonVariantProps,
 } from "@seed-design/css/recipes/toggle-button";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
 import clsx from "clsx";
 import * as React from "react";
+import { useScaleFeedback } from "../../utils/scaleFeedback";
 import {
   PendingButtonProvider,
   usePendingButton,
@@ -20,12 +22,13 @@ export const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProp
   ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
     const recipeClassName = toggleButton({ variant, size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
     return (
       <PendingButtonProvider value={api}>
         <TogglePrimitive.Root
-          ref={ref}
-          className={clsx(recipeClassName, className)}
+          ref={useComposedRefs(scaleFeedbackRef, ref)}
+          className={clsx(recipeClassName, scaleFeedbackClassName, className)}
           {...api.stateProps}
           {...otherProps}
         />

package/src/components/WheelPicker/WheelPicker.namespace.ts

@@ -0,0 +1,9 @@
+export {
+  WheelPickerRoot as Root,
+  WheelPickerColumn as Column,
+  WheelPickerItemLabel as ItemLabel,
+  type WheelPickerRootProps as RootProps,
+  type WheelPickerColumnProps as ColumnProps,
+  type WheelPickerItemLabelProps as ItemLabelProps,
+  type WheelPickerOption as Option,
+} from "./WheelPicker";

package/src/components/WheelPicker/WheelPicker.test.tsx

@@ -0,0 +1,270 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, mock, spyOn } from "bun:test";
+import type * as React from "react";
+import { BottomSheet } from "../BottomSheet";
+import { WheelPicker } from "./index";
+
+const options = [
+  { value: "a", label: "A" },
+  { value: "b", label: "B" },
+];
+
+function fireTouchPointer(type: string, element: HTMLElement, y: number) {
+  const event = new PointerEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    pointerId: 1,
+    pointerType: "touch",
+    clientX: 50,
+    clientY: y,
+  });
+  Object.defineProperty(event, "pageX", { value: 50 });
+  Object.defineProperty(event, "pageY", { value: y });
+  fireEvent(element, event);
+}
+
+describe("WheelPicker", () => {
+  it("공개 기본 geometry와 중립 스타일을 적용한다", () => {
+    const { container, getByRole } = render(
+      <WheelPicker.Root aria-label="휠 피커">
+        <WheelPicker.Column aria-label="문자" options={options} defaultValue="a" />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByRole("group")).toHaveStyle({
+      "--seed-wheel-picker-public-item-size": "44px",
+      "--seed-wheel-picker-public-visible-item-count": "5",
+      "--seed-wheel-picker-public-viewport-size": "220px",
+      "--seed-wheel-picker-public-center-offset": "88px",
+      "--seed-wheel-picker-public-scroll-fog-max-height": "132px",
+    });
+    expect(getByRole("group")).toHaveClass(
+      "seed-wheel-picker-public__root",
+      "seed-wheel-picker-public__root--size_medium",
+    );
+    expect(getByRole("group")).not.toHaveClass("seed-wheel-picker__root");
+    expect(container.querySelector("[data-wheel-picker-scroll-fog]")).toHaveClass(
+      "seed-wheel-picker-public__scrollFog",
+    );
+    expect(container.querySelector("[data-wheel-picker-columns]")).toHaveClass(
+      "seed-wheel-picker-public__columns",
+    );
+    expect(getByRole("spinbutton")).toHaveClass("seed-wheel-picker-public__column");
+    expect(container.querySelector('[data-wheel-picker-value="a"]')).toHaveClass(
+      "seed-wheel-picker-public__item",
+    );
+    expect(container.querySelector("[data-wheel-picker-item-label]")).toHaveClass(
+      "seed-wheel-picker-public__itemLabel",
+    );
+    expect(container.querySelector("[data-wheel-picker-indicator]")).toHaveClass(
+      "seed-wheel-picker-public__selectionIndicator",
+    );
+    const scrollFog = container.querySelector<HTMLElement>("[data-wheel-picker-scroll-fog]");
+    expect(scrollFog?.style.getPropertyValue("--scroll-fog-size-top")).toBe(
+      "var(--seed-wheel-picker-public-scroll-fog-size)",
+    );
+    expect(scrollFog?.style.getPropertyValue("--scroll-fog-size-bottom")).toBe(
+      "var(--seed-wheel-picker-public-scroll-fog-size)",
+    );
+  });
+
+  it("Small 크기의 geometry와 타이포그래피 Variant를 적용한다", () => {
+    const { container, getByRole } = render(
+      <WheelPicker.Root aria-label="작은 휠 피커" size="small">
+        <WheelPicker.Column aria-label="문자" options={options} defaultValue="a" />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByRole("group")).toHaveStyle({
+      "--seed-wheel-picker-public-item-size": "36px",
+      "--seed-wheel-picker-public-visible-item-count": "5",
+      "--seed-wheel-picker-public-viewport-size": "180px",
+      "--seed-wheel-picker-public-center-offset": "72px",
+      "--seed-wheel-picker-public-scroll-fog-max-height": "108px",
+    });
+    expect(getByRole("group")).toHaveClass("seed-wheel-picker-public__root--size_small");
+    expect(container.querySelector("[data-wheel-picker-item-label]")).toHaveClass(
+      "seed-wheel-picker-public__itemLabel--size_small",
+    );
+  });
+
+  it("itemSize를 지정하면 Size의 Item 높이와 Scroll Fog 최대 높이만 덮어쓴다", () => {
+    const { container, getByRole } = render(
+      <WheelPicker.Root
+        aria-label="사용자 지정 휠 피커"
+        size="small"
+        itemSize={56}
+        visibleItemCount={7}
+      >
+        <WheelPicker.Column aria-label="문자" options={options} defaultValue="a" />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByRole("group")).toHaveStyle({
+      "--seed-wheel-picker-public-item-size": "56px",
+      "--seed-wheel-picker-public-visible-item-count": "7",
+      "--seed-wheel-picker-public-viewport-size": "392px",
+      "--seed-wheel-picker-public-center-offset": "168px",
+      "--seed-wheel-picker-public-scroll-fog-max-height": "168px",
+    });
+    expect(container.querySelector("[data-wheel-picker-item-label]")).toHaveClass(
+      "seed-wheel-picker-public__itemLabel--size_small",
+    );
+  });
+
+  it("Item을 9개 표시해도 Scroll Fog 최대 높이는 Item 3개 높이로 유지한다", () => {
+    const { getByRole } = render(
+      <WheelPicker.Root aria-label="긴 휠 피커" visibleItemCount={9}>
+        <WheelPicker.Column aria-label="문자" options={options} defaultValue="a" />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByRole("group")).toHaveStyle({
+      "--seed-wheel-picker-public-viewport-size": "396px",
+      "--seed-wheel-picker-public-scroll-fog-max-height": "132px",
+    });
+  });
+
+  it("Root와 Column의 className을 허용한다", () => {
+    const { getByRole } = render(
+      <WheelPicker.Root aria-label="휠 피커" className="custom-root">
+        <WheelPicker.Column aria-label="문자" options={options} className="custom-column" />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByRole("group")).toHaveClass("custom-root");
+    expect(getByRole("spinbutton")).toHaveClass("custom-column");
+  });
+
+  it("renderLabel로 기본 ItemLabel을 대체한다", () => {
+    const { container, getByText } = render(
+      <WheelPicker.Root aria-label="휠 피커" itemSize={56}>
+        <WheelPicker.Column
+          aria-label="문자"
+          options={options}
+          renderLabel={(option) => <span data-custom-label="">{option.label}</span>}
+        />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByText("A")).toHaveAttribute("data-custom-label");
+    expect(getByText("A").parentElement).toHaveClass("seed-wheel-picker-public__item");
+    expect(container.querySelector("[data-wheel-picker-item-label]")).not.toBeInTheDocument();
+  });
+
+  it("renderLabel에서 공개 ItemLabel을 재사용한다", () => {
+    const { getByText } = render(
+      <WheelPicker.Root aria-label="휠 피커">
+        <WheelPicker.Column
+          aria-label="문자"
+          options={options}
+          renderLabel={(option) => (
+            <WheelPicker.ItemLabel data-reused-label="">{option.label}</WheelPicker.ItemLabel>
+          )}
+        />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByText("A")).toHaveClass("seed-wheel-picker-public__itemLabel");
+    expect(getByText("A")).toHaveAttribute("data-wheel-picker-item-label");
+    expect(getByText("A")).toHaveAttribute("data-reused-label");
+  });
+
+  it("option의 ariaLabel을 기본 접근성 텍스트로 사용한다", () => {
+    const { getByRole } = render(
+      <WheelPicker.Root aria-label="배지 선택">
+        <WheelPicker.Column
+          aria-label="배지"
+          options={[{ value: "popular", label: <span>◆ 인기</span>, ariaLabel: "인기" }]}
+        />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByRole("spinbutton", { name: "배지" })).toHaveAttribute("aria-valuetext", "인기");
+  });
+
+  it("숫자 label을 기본 접근성 텍스트로 변환한다", () => {
+    const { getByRole } = render(
+      <WheelPicker.Root aria-label="수량 선택">
+        <WheelPicker.Column aria-label="수량" options={[{ value: "one", label: 1 }]} />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByRole("spinbutton", { name: "수량" })).toHaveAttribute("aria-valuetext", "1");
+  });
+
+  it("Root의 disabled 상태를 Column과 Item에 전파한다", () => {
+    const { container, getByRole } = render(
+      <WheelPicker.Root aria-label="비활성 휠 피커" disabled>
+        <WheelPicker.Column aria-label="문자" options={options} defaultValue="a" />
+      </WheelPicker.Root>,
+    );
+
+    expect(getByRole("group")).toHaveAttribute("data-disabled");
+    expect(getByRole("spinbutton")).toHaveAttribute("data-disabled");
+    expect(getByRole("spinbutton")).toHaveAttribute("aria-disabled", "true");
+    expect(container.querySelector('[data-wheel-picker-value="a"]')).toHaveAttribute(
+      "data-selected",
+    );
+  });
+
+  it("지원하지 않는 readOnly 값이 런타임에 전달되어도 읽기 전용으로 동작하지 않는다", () => {
+    const RootWithLegacyReadOnly = WheelPicker.Root as React.ComponentType<
+      WheelPicker.RootProps & { readOnly?: boolean }
+    >;
+    const { getByRole } = render(
+      <RootWithLegacyReadOnly aria-label="휠 피커" readOnly>
+        <WheelPicker.Column aria-label="문자" options={options} defaultValue="a" />
+      </RootWithLegacyReadOnly>,
+    );
+
+    expect(getByRole("group")).not.toHaveAttribute("data-readonly");
+    expect(getByRole("spinbutton")).not.toHaveAttribute("aria-readonly");
+  });
+
+  it("BottomSheet 안에서 컬럼을 스크롤할 때 시트 드래그를 시작하지 않는다", () => {
+    const originalSetPointerCapture = HTMLElement.prototype.setPointerCapture;
+    HTMLElement.prototype.setPointerCapture = mock(() => {});
+
+    try {
+      const { container, getByRole } = render(
+        <BottomSheet.Root defaultOpen modal={false} autoFocus={false} skipAnimation>
+          <BottomSheet.Content>
+            <BottomSheet.Title>값 선택</BottomSheet.Title>
+            <BottomSheet.Description>원하는 값을 선택하세요.</BottomSheet.Description>
+            <WheelPicker.Root aria-label="휠 피커">
+              <WheelPicker.Column aria-label="문자" options={options} defaultValue="b" />
+            </WheelPicker.Root>
+          </BottomSheet.Content>
+        </BottomSheet.Root>,
+      );
+      const content = container.ownerDocument.querySelector("[data-drawer]") as HTMLElement;
+      const column = getByRole("spinbutton");
+
+      content.style.transform = "matrix(1, 0, 0, 1, 0, 0)";
+      spyOn(content, "getBoundingClientRect").mockReturnValue({
+        x: 0,
+        y: 0,
+        width: 320,
+        height: 400,
+        top: 0,
+        left: 0,
+        right: 320,
+        bottom: 400,
+        toJSON: () => {},
+      });
+      Object.defineProperties(column, {
+        clientHeight: { value: 220, configurable: true },
+        scrollHeight: { value: 440, configurable: true },
+      });
+      column.scrollTop = 44;
+
+      fireTouchPointer("pointerdown", column, 100);
+      fireTouchPointer("pointermove", column, 130);
+
+      expect(content.style.transform).toBe("matrix(1, 0, 0, 1, 0, 0)");
+    } finally {
+      HTMLElement.prototype.setPointerCapture = originalSetPointerCapture;
+    }
+  });
+});