From a061ed5aaa7473722f179378a2b968d6b2f91d96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=84=B8=EB=AF=BC?=
 <89172499+semnil5202@users.noreply.github.com>
Date: Mon, 26 Aug 2024 22:20:18 +0900
Subject: [PATCH] =?UTF-8?q?feat(sds):=20Button=20loading=20=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=99=20=EC=B6=94=EA=B0=80=20(#130)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: Button Loading 기능 추가

* refactor: loading 초기값 지정

* fix: loading 상태에 따른 Spinner 및 leftDecor, Text 표시 여부 오류 수정

* rename: Spinner 공통 컴포넌트화 및 파일 네이밍 컨벤션 준수
---
 .../core/sds/src/components/Button/Button.tsx | 18 ++++++++--
 .../core/sds/src/components/Button/styles.ts  |  6 ++++
 .../sds/src/components/Spinner/Spinner.tsx    | 34 +++++++++++++++++++
 .../core/sds/src/components/Spinner/index.ts  |  3 ++
 .../core/sds/src/components/Spinner/styles.ts | 11 ++++++
 packages/core/sds/src/components/index.ts     | 15 ++++----
 6 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 packages/core/sds/src/components/Spinner/Spinner.tsx
 create mode 100644 packages/core/sds/src/components/Spinner/index.ts
 create mode 100644 packages/core/sds/src/components/Spinner/styles.ts

diff --git a/packages/core/sds/src/components/Button/Button.tsx b/packages/core/sds/src/components/Button/Button.tsx
index 0dc8b7e6..9540f1c7 100644
--- 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
index 0c4e9d77..a3b90b83 100644
--- 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
new file mode 100644
index 00000000..d60fd461
--- /dev/null
+++ 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
new file mode 100644
index 00000000..b1a1e650
--- /dev/null
+++ 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
new file mode 100644
index 00000000..58161cc0
--- /dev/null
+++ 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
index 35e50f8a..12632542 100644
--- 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';