feat(sds): Button loading 스펙 추가 (#130)

* refactor: Button Loading 기능 추가 * refactor: loading 초기값 지정 * fix: loading 상태에 따른 Spinner 및 leftDecor, Text 표시 여부 오류 수정 * rename: Spinner 공통 컴포넌트화 및 파일 네이밍 컨벤션 준수
depromeet · Aug 26, 2024 · a061ed5 · a061ed5
1 parent 53d4338
commit a061ed5
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 10 deletions.
diff --git a/packages/core/sds/src/components/Button/Button.tsx b/packages/core/sds/src/components/Button/Button.tsx
@@ -1,12 +1,22 @@
 import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
 
-import { buttonCss, buttonDisabledVariants, buttonSizeVariants, buttonVariantVariants, leftDecorCss } from './styles';
+import { Spinner } from '../Spinner/Spinner';
+
+import {
+  buttonCss,
+  buttonDisabledVariants,
+  buttonSizeVariants,
+  buttonVariantVariants,
+  leftDecorCss,
+  spinnerCss,
+} from './styles';
 import { ButtonSize, ButtonVariant } from './types';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: ButtonSize;
   variant?: ButtonVariant;
   leftDecor?: ReactNode;
+  loading?: boolean;
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
@@ -16,6 +26,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     disabled = false,
     style: styleFromProps,
     leftDecor,
+    loading = false,
     children,
     ...restProps
   } = props;
@@ -29,8 +40,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
 
   return (
     <button ref={ref} disabled={disabled} style={style} css={buttonCss} {...restProps}>
-      {leftDecor != null && <span css={leftDecorCss}>{leftDecor}</span>}
-      {children}
+      {loading && <Spinner css={spinnerCss} />}
+      {!loading && leftDecor != null && <span css={leftDecorCss}>{leftDecor}</span>}
+      {!loading && children}
     </button>
   );
 });

diff --git a/packages/core/sds/src/components/Button/styles.ts b/packages/core/sds/src/components/Button/styles.ts
@@ -112,3 +112,9 @@ export const leftDecorCss = css({
     fill: `var(${buttonColorVar})`,
   },
 });
+
+export const spinnerCss = css({
+  '& path': {
+    fill: `var(${buttonColorVar})`,
+  },
+});
diff --git a/packages/core/sds/src/components/Spinner/Spinner.tsx b/packages/core/sds/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,34 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import { spinnerAnimationCss } from './styles.ts';
+
+export interface SpinnerProps extends HTMLAttributes<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+
+export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>((props, ref) => {
+  const { size = 20, color = '#8E8E8E', ...rest } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      css={spinnerAnimationCss}
+      ref={ref}
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.6538 0.955217C9.6538 1.5075 10.1038 1.94866 10.6518 2.01686C14.5991 2.50808 17.6538 5.87491 17.6538 9.95522C17.6538 14.3735 14.0721 17.9552 9.6538 17.9552C7.80416 17.9552 6.10113 17.3275 4.74612 16.2735C4.31019 15.9344 3.68036 15.9287 3.28984 16.3192C2.89931 16.7097 2.89644 17.3473 3.3238 17.6971C5.04786 19.1084 7.25194 19.9552 9.6538 19.9552C15.1766 19.9552 19.6538 15.4781 19.6538 9.95522C19.6538 4.76939 15.7064 0.505529 10.6524 0.00445341C10.1028 -0.0500354 9.6538 0.402932 9.6538 0.955217Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+
+Spinner.displayName = 'Spinner';
diff --git a/packages/core/sds/src/components/Spinner/index.ts b/packages/core/sds/src/components/Spinner/index.ts
@@ -0,0 +1,3 @@
+export { Spinner } from './Spinner';
+
+export type { SpinnerProps } from './Spinner';
diff --git a/packages/core/sds/src/components/Spinner/styles.ts b/packages/core/sds/src/components/Spinner/styles.ts
@@ -0,0 +1,11 @@
+import { keyframes } from '@emotion/react';
+
+const rotate = keyframes`
+	100% {
+    transform: rotate(360deg);
+  }
+`;
+
+export const spinnerAnimationCss = {
+  animation: `${rotate} 0.8s linear infinite`,
+};
diff --git a/packages/core/sds/src/components/index.ts b/packages/core/sds/src/components/index.ts
@@ -1,10 +1,11 @@
-export * from './Typography';
-export * from './Icon';
-export * from './Button';
-export * from './TextButton';
-export * from './Badge';
-export * from './SegmentedControl';
 export * from './Accordion';
+export * from './Badge';
+export * from './Button';
+export * from './Checkbox';
+export * from './Icon';
 export * from './Loader';
+export * from './SegmentedControl';
 export * from './Skeleton';
-export * from './Checkbox';
+export * from './Spinner';
+export * from './TextButton';
+export * from './Typography';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export { Spinner } from './Spinner';

		export type { SpinnerProps } from './Spinner';