refactor #67 : BaseButton이 아닌 Button에서 아이콘을 처리하도록 로직 수정

src/common/components/base-button/base-button.tsx

@@ -6,25 +6,15 @@ import * as styles from './base-button.styles';
 
 export interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   asChild?: boolean;
-  icon?: ReactNode;
-  iconPosition?: 'left' | 'right';
 }
 
 /** 기본 버튼 스타일 & 주입받은 props와 아이콘을 기반으로 최종 UI를 렌더링하는 컴포넌트 */
-/** 주입받은 스타일이 기본 버튼 스타일 일부 오버라이딩 */
-const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
-  ({ asChild, icon, iconPosition, children, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
+/** 상황에 따라 주입받은 스타일이 기본 버튼 스타일에 대한 오버라이딩 가능 */
+const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
 
-    return (
-      <Comp css={styles.button} ref={ref} {...props}>
-        {icon && iconPosition === 'left' && icon}
-        {children}
-        {icon && iconPosition === 'right' && icon}
-      </Comp>
-    );
-  },
-);
+  return <Comp css={styles.button} ref={ref} {...props}></Comp>;
+});
 BaseButton.displayName = 'BaseButton';
 
 export { BaseButton };

src/common/components/button/Button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, ReactNode } from 'react';
 
 import { Usage, ButtonVariant, Size } from '@/assets/styles/button';
 import { BaseButton, BaseButtonProps } from '@/common/components/base-button/base-button';
@@ -9,17 +9,26 @@ export interface ButtonProps extends BaseButtonProps {
   size: Size;
   usage: Usage;
   variant: ButtonVariant;
+  icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ size, usage, variant, icon, ...props }, ref) => {
-    const buttonStyle = generateCss(size, usage, variant, icon !== undefined && usage === 'normal');
+  ({ size, usage, variant, icon, children, iconPosition, ...props }, ref) => {
+    const isMultiButton = icon !== undefined && usage === 'normal';
+    const buttonStyle = generateCss(size, usage, variant, isMultiButton);
 
     // 텍스트만 >> size, usage, variant
     // 아이콘만 >> size, usage, variant, icon
-    // 텍스트+아이콘  >> size, usage, variant, icon, position
-
-    return <BaseButton ref={ref} css={buttonStyle} icon={icon} {...props} />;
+    // 텍스트+아이콘  >> size, usage, variant, icon, iconPosition
+
+    return (
+      <BaseButton ref={ref} css={buttonStyle} {...props}>
+        {isMultiButton && iconPosition === 'left' && icon}
+        {!isMultiButton && icon ? icon : children}
+        {isMultiButton && iconPosition === 'right' && icon}
+      </BaseButton>
+    );
   },
 );
 

src/route.tsx

@@ -11,7 +11,6 @@ export const router = createBrowserRouter([
     path: '/',
     element: (
       <div>
-        {/* icon은 props로 넘겨주기 && 아이콘 정렬 방향 따로 지정 */}
         <Button
           size="large"
           usage="normal"
@@ -27,7 +26,6 @@ export const router = createBrowserRouter([
           usage="iconOnly"
           variant="purlple"
           icon={<Icon name="pin" width={24} />}
-          iconPosition="right"
         />
 
         <Button size="large" usage="normal" variant="purlple">