@tipp/ui 1.4.7 → 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']>(() => {

package/src/molecules/expand-table/index.tsx

@@ -35,6 +35,7 @@ export interface ExpandTableProps<Datum extends RowData> {
   /** 행 클릭 시 실행할 콜백 */
   onRowClick?: OnRowClick<Datum>;
   getRowStyle?: (data: Datum) => CSSProperties;
+  getCellStyle?: (data: Datum) => CSSProperties;
   tableStyle?: CSSProperties;
   isLoading?: boolean;
 
@@ -64,6 +65,7 @@ export function ExpandTable<Datum extends RowData>(
     pageSize = 10,
     siblingCount = 2,
     getRowStyle,
+    getCellStyle,
   } = props;
   const defaultAlign = 'left';
   const [pagination, setPagination] = useState<PaginationState>({
@@ -86,7 +88,7 @@ export function ExpandTable<Datum extends RowData>(
     onPaginationChange: setPagination,
   });
 
-  const gridColTemp = useMemo<string>(() => {
+  const gridTemplateColumns = useMemo<string>(() => {
     return columns
       .map((col) => {
         if (col.meta?.autoSize) return '1fr';
@@ -149,7 +151,7 @@ export function ExpandTable<Datum extends RowData>(
           <div
             className="tr"
             key={headerGroup.id}
-            style={{ gridTemplateColumns: gridColTemp }}
+            style={{ gridTemplateColumns }}
           >
             {headerGroup.headers.map((header) => {
               const sortable = header.column.getCanSort();
@@ -208,8 +210,9 @@ export function ExpandTable<Datum extends RowData>(
               <Row
                 ExpandComp={ExpandComp}
                 defaultAlign={defaultAlign}
+                getCellStyle={getCellStyle}
                 getRowStyle={getRowStyle}
-                gridColTemp={gridColTemp}
+                gridTemplateColumns={gridTemplateColumns}
                 key={`row_${row.id}`}
                 onRowClick={onRowClick}
                 row={row}

package/src/molecules/expand-table/row.tsx

@@ -14,15 +14,17 @@ interface RowProps<Datum extends RowData> {
   row: TanstackRow<Datum>;
   ExpandComp?: ExpandComp<Datum>;
   onRowClick?: OnRowClick<Datum>;
-  gridColTemp: string;
+  gridTemplateColumns: string;
   getRowStyle?: (data: Datum) => React.CSSProperties;
+  getCellStyle?: (data: Datum) => React.CSSProperties;
   defaultAlign: CellAlign;
 }
 
 export function Row<Datum extends RowData>(
   props: RowProps<Datum>
 ): React.ReactNode {
-  const { row, ExpandComp, gridColTemp, getRowStyle } = props;
+  const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } =
+    props;
   const [open, setOpen] = useState(false);
 
   const onClickRow = useCallback(() => {
@@ -48,7 +50,7 @@ export function Row<Datum extends RowData>(
         key={`tr_${row.id}`}
         onClick={onClickRow}
         style={{
-          gridTemplateColumns: gridColTemp,
+          gridTemplateColumns,
           ...(getRowStyle?.(row.original) || {}),
         }}
         type="button"
@@ -66,6 +68,7 @@ export function Row<Datum extends RowData>(
                 // width: autoSize ? undefined : cell.column.getSize(),
                 flexGrow: autoSize ? 1 : undefined,
                 justifyContent,
+                ...(getCellStyle?.(row.original) || {}),
               }}
             >
               {flexRender(cell.column.columnDef.cell, cell.getContext())}