@tipp/ui 1.4.8 → 1.4.9

package/src/atoms/button.tsx

@@ -2,28 +2,56 @@ import {
   Button as RadixButton,
   type ButtonProps as RadixButtonProps,
 } from '@radix-ui/themes';
+import type { Breakpoint, Responsive } from '@radix-ui/themes/props';
 import React, { forwardRef, useMemo } from 'react';
 
 export type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {
-  size?: 'small' | 'medium' | 'large';
+  size?: Responsive<'small' | 'medium' | 'large'>;
   variant?: RadixButtonProps['variant'] | 'transparent';
 };
 
+const convertSizeStr = (size: ButtonProps['size']): '1' | '2' | '3' | '4' => {
+  switch (size) {
+    case 'small':
+      return '1';
+    case 'medium':
+      return '2';
+    case 'large':
+      return '3';
+    default:
+      return '2';
+  }
+};
+
+const convertSizeResponse = (
+  size: ButtonProps['size']
+): RadixButtonProps['size'] => {
+  if (typeof size === 'string' || typeof size === 'undefined') {
+    return convertSizeStr(size);
+  }
+  const radixSize: RadixButtonProps['size'] = {};
+  let key: Breakpoint = 'initial';
+  for (key in radixSize) {
+    radixSize[key] = convertSizeStr(size[key]);
+  }
+  return radixSize;
+};
+
+const convertSize = (size: ButtonProps['size']): RadixButtonProps['size'] => {
+  if (typeof size === 'string') {
+    return convertSizeStr(size);
+  }
+  return convertSizeResponse(size);
+};
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref): React.ReactElement => {
     const { size, style, variant, ...restProps } = props;
+    // string인 경우
+    //object인 경우
 
     const radixSize = useMemo(() => {
-      switch (size) {
-        case 'small':
-          return '1';
-        case 'medium':
-          return '2';
-        case 'large':
-          return '3';
-        default:
-          return '2';
-      }
+      return convertSize(size);
     }, [size]);
 
     const mergedStyle = useMemo<ButtonProps['style']>(() => {