[FEAT] Button 컴포넌트에 isLoading props 추가 (#280)

package.json

@@ -16,12 +16,14 @@
     "@emotion/styled": "^11.12.0",
     "@tanstack/react-query": "^5.51.1",
     "axios": "^1.7.4",
+    "babel-runtime": "^6.26.0",
     "dayjs": "^1.11.11",
     "framer-motion": "^11.3.28",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
     "react-helmet-async": "^2.0.5",
+    "react-lottie": "^1.2.9",
     "react-router-dom": "^6.24.1",
     "upgrade": "^1.1.0"
   },
@@ -41,6 +43,7 @@
     "@tanstack/react-query-devtools": "^5.51.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/react-lottie": "^1",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",

src/components/common/Button/Button.stories.tsx

@@ -44,6 +44,7 @@ export const Basic: Story = {
   args: {
     variant: 'primary',
     height: 'large',
+    isLoading: false,
     children: '다음',
     disabled: false,
   },
@@ -60,6 +61,9 @@ export const Basic: Story = {
       },
       options: ['large', 'medium', 'small'],
     },
+    isLoading: {
+      control: 'boolean',
+    },
     disabled: {
       control: 'boolean',
     },

src/components/common/Button/Button.types.ts

@@ -9,6 +9,11 @@ export type Props = {
    * The height of the button.
    */
   height: 'large' | 'medium' | 'small';
+  /**
+   * Whether the button is disabled.
+   * @default false
+   */
+  isLoading?: boolean;
   /**
    * Optional children for the button, typically a string.
    */

src/components/common/Button/index.tsx

@@ -3,10 +3,14 @@ import { forwardRef } from 'react';
 import { StyledButton } from './Button.styled';
 import { Props } from './Button.types';
 
-export const Button = forwardRef<HTMLButtonElement, Props>(({ children, ...props }, ref) => {
-  return (
-    <StyledButton ref={ref} {...props}>
-      {children}
-    </StyledButton>
-  );
-});
+import { Loading } from '../Loading';
+
+export const Button = forwardRef<HTMLButtonElement, Props>(
+  ({ children, isLoading = false, ...props }, ref) => {
+    return (
+      <StyledButton ref={ref} {...props}>
+        {isLoading ? <Loading /> : children}
+      </StyledButton>
+    );
+  }
+);