From c535d63eba58e7634bdeadf7de7e309121978acd Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sun, 25 Aug 2024 02:22:23 +0900
Subject: [PATCH] =?UTF-8?q?rename:=20Spinner=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=BB=A8?=
 =?UTF-8?q?=EB=B2=A4=EC=85=98=20=EC=A4=80=EC=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core/sds/src/components/Button/styles.ts  |  6 +++++
 .../{Button => }/Spinner/Spinner.tsx          | 24 ++++++++++++-------
 .../core/sds/src/components/Spinner/index.ts  |  3 +++
 .../Spinner.styles.ts => Spinner/styles.ts}   |  0
 packages/core/sds/src/components/index.ts     | 15 ++++++------
 5 files changed, 32 insertions(+), 16 deletions(-)
 rename packages/core/sds/src/components/{Button => }/Spinner/Spinner.tsx (62%)
 create mode 100644 packages/core/sds/src/components/Spinner/index.ts
 rename packages/core/sds/src/components/{Button/Spinner/Spinner.styles.ts => Spinner/styles.ts} (100%)

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/Button/Spinner/Spinner.tsx b/packages/core/sds/src/components/Spinner/Spinner.tsx
similarity index 62%
rename from packages/core/sds/src/components/Button/Spinner/Spinner.tsx
rename to packages/core/sds/src/components/Spinner/Spinner.tsx
index e8ae5955..d60fd461 100644
--- a/packages/core/sds/src/components/Button/Spinner/Spinner.tsx
+++ b/packages/core/sds/src/components/Spinner/Spinner.tsx
@@ -1,28 +1,34 @@
-import { HTMLAttributes } from 'react';
+import { forwardRef, HTMLAttributes } from 'react';
 
-import { spinnerAnimationCss } from './Spinner.styles';
+import { spinnerAnimationCss } from './styles.ts';
 
-interface Props extends HTMLAttributes<SVGSVGElement> {
-  fill?: string;
+export interface SpinnerProps extends HTMLAttributes<SVGSVGElement> {
+  size?: number;
+  color?: string;
 }
 
-export const Spinner = ({ fill = '#8E8E8E', ...rest }: Props) => {
+export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>((props, ref) => {
+  const { size = 20, color = '#8E8E8E', ...rest } = props;
+
   return (
     <svg
-      width="20"
-      height="20"
+      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={fill}
+        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/Button/Spinner/Spinner.styles.ts b/packages/core/sds/src/components/Spinner/styles.ts
similarity index 100%
rename from packages/core/sds/src/components/Button/Spinner/Spinner.styles.ts
rename to packages/core/sds/src/components/Spinner/styles.ts
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';