feat(button): 버튼 아이콘에도 색상 테마 적용

apps/docs/src/stories/Button.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Button } from 'ui';
+import { IconCheck } from '../../../../packages/icons/src';
 
 interface ButtonOwnProps {
   size?: 'sm' | 'md' | 'lg';
@@ -21,8 +22,8 @@ export default {
     backgrounds: {
       default: 'dark', // 기본 배경을 'dark'로 설정
       values: [
-        { name: 'dark', value: "#0F1012" }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: 'white', value: '#ffffff' }
+        { name: 'dark', value: '#0F1012' }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: 'white', value: '#ffffff' },
       ],
     },
   },
@@ -47,6 +48,7 @@ export const Another: StoryObj<ButtonStoryProps> = {
     theme: 'red',
     rounded: 'lg',
     disabled: false,
+    LeftIcon: IconCheck,
   },
 };
 
@@ -58,4 +60,4 @@ export const Disabled: StoryObj<ButtonStoryProps> = {
     rounded: 'lg',
     disabled: true,
   },
-};
+};

packages/ui/Button/Button.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import * as S from './style.css';
-import { createButtonVariant } from './utils';
-
-type IconProps = { color?: string };
+import { createButtonVariant, getIconStyles } from './utils';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   className?: string;
   size?: 'sm' | 'md' | 'lg';
   theme?: 'white' | 'black' | 'blue' | 'red';
   rounded?: 'md' | 'lg';
-  LeftIcon?: React.ComponentType<IconProps>;
-  RightIcon?: React.ComponentType<IconProps>;
+  LeftIcon?: React.ComponentType<any>;
+  RightIcon?: React.ComponentType<any>;
 }
 
 function Button({
@@ -25,14 +23,16 @@ function Button({
   ...buttonElementProps
 }: ButtonProps) {
   const variant = createButtonVariant(theme, rounded, size);
+  const iconStyles = getIconStyles(theme, size);
+
   return (
     <button
       className={`${S.root} ${variant} ${className}`}
       {...buttonElementProps}
     >
-      {LeftIcon && <LeftIcon />}
+      {LeftIcon && <LeftIcon style={iconStyles} />}
       <span>{children}</span>
-      {RightIcon && <RightIcon />}
+      {RightIcon && <RightIcon style={iconStyles} />}
     </button>
   );
 }

packages/ui/Button/constants.ts

@@ -50,3 +50,9 @@ export const fontSizes: Record<ButtonSizeTheme, string> = {
   md: '14px',
   lg: '18px',
 };
+
+export const iconSizes: Record<ButtonSizeTheme, string> = {
+  sm: '16px',
+  md: '20px',
+  lg: '24px',
+};

packages/ui/Button/utils.ts

@@ -1,4 +1,4 @@
-import { colorThemeToTextColor } from './constants';
+import { colorThemeToTextColor, iconSizes, textColors } from './constants';
 import { sprinkles } from './style.css';
 import { ButtonColorTheme, ButtonRadiusTheme, ButtonSizeTheme } from './types';
 
@@ -23,3 +23,16 @@ export function createButtonVariant(
     fontSize: sizeTheme,
   });
 }
+
+export function getIconStyles(
+  colorTheme: ButtonColorTheme,
+  sizeTheme: ButtonSizeTheme
+): React.CSSProperties {
+  const iconSize = iconSizes[sizeTheme];
+  const iconColor = textColors[colorThemeToTextColor[colorTheme]];
+  return {
+    color: iconColor,
+    width: iconSize,
+    height: iconSize,
+  };
+}