feat: Spinner 컴포넌트 구현 [woowacourse#5]

src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import Spinner from '@/components/Spinner';
+
+export default {
+	component: Spinner,
+	title: 'Spinner',
+} as Meta;
+
+const Template: StoryFn = () => <Spinner />;
+
+export const Default = Template.bind({});

src/components/Spinner/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface SpinnerProps {
+	size?: string;
+	color?: string;
+}
+const StyledDefaultLoading = styled.div<SpinnerProps>`
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+	display: inline-block;
+	box-sizing: border-box;
+	animation: rotation 1s linear infinite;
+	border: 5px solid #000;
+
+	${(props) => {
+		return (
+			props.size &&
+			css`
+				width: ${props.size};
+				height: ${props.size};
+			`
+		);
+	}}
+
+	${(props) => {
+		return (
+			props.color &&
+			css`
+        border: 5px solid ${props.color}
+        height: ${props.size};
+      `
+		);
+	}}
+
+  border-bottom-color: transparent;
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`;
+
+const Spinner: React.FC<SpinnerProps> = ({ ...rest }) => {
+	return <StyledDefaultLoading {...rest} />;
+};
+
+export default Spinner;