feat: Loading Indicator 컴포넌트 구현

src/components/LoadingIndicator/LoadingIndicator.mdx

@@ -0,0 +1,56 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as LoadingIndicatorStories from './LoadingIndicator.stories';
+import { LoadingIndicator } from './LoadingIndicator';
+import React from 'react';
+
+<Meta of={LoadingIndicatorStories} />
+
+# Loading Indicator
+
+Loading Indicator는 사용자가 불특정한 시간을 기다려야 할 때 사용합니다.<br />
+
+<Canvas of={LoadingIndicatorStories.Primary} />
+<Controls />
+
+<br />
+<br />
+
+## 개발 시 참고하면 좋을 내용
+
+- Loading Indicator의 `width`는 기본적으로 부모 컴포넌트의 100%로 지정되어 있으며, 변경할 수 없습니다.
+
+  - 컴포넌트가 항상 화면 수평 중앙에 위치하도록 보장하기 위함입니다.<br /><br />
+
+- Loading Indicator의 크기는 40 \* 40(px)로 고정되어 있습니다.
+
+<br />
+<br />
+
+## 사용법
+
+Loading Indicator의 기본 사용법입니다.
+
+```tsx
+import { LoadingIndicator } from '@yourssu/design-system-react';
+```
+
+```tsx
+<LoadingIndicator />
+```
+
+<br />
+<br />
+
+## 예시
+
+### indicatorColor
+
+Loading Indicator는 기본적으로 `line/brand/primary` 색상을 사용합니다.<br />
+
+`indicatorColor` 프로퍼티를 지정하여 색상을 변경할 수 있습니다.
+
+```tsx
+<LoadingIndicator indicatorColor={'#000000'}>
+```
+
+<Canvas of={LoadingIndicatorStories.Color} />

src/components/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LoadingIndicator } from './LoadingIndicator';
+import { LoadingIndicatorProps } from './LoadingIndicator.type';
+
+const meta: Meta<LoadingIndicatorProps> = {
+  title: 'Components/Loading Indicator',
+  component: LoadingIndicator,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    indicatorColor: {
+      description: 'Loading Indicator의 색상을 결정하는 속성',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Primary: Story = {};
+
+export const Color: Story = {
+  args: {
+    indicatorColor: '#000000',
+  },
+};

src/components/LoadingIndicator/LoadingIndicator.style.ts

@@ -0,0 +1,23 @@
+import { styled } from 'styled-components';
+
+export const StyledIndicator = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  transform: rotate(0deg);
+  animation: rotateAnimation 600ms linear infinite;
+
+  @keyframes rotateAnimation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;

src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,31 @@
+import { useTheme } from 'styled-components';
+
+import { StyledIndicator } from './LoadingIndicator.style';
+import { LoadingIndicatorProps } from './LoadingIndicator.type';
+
+export const LoadingIndicator = ({ indicatorColor }: LoadingIndicatorProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledIndicator>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="40"
+        height="40"
+        viewBox="0 0 40 40"
+        fill="none"
+      >
+        <path
+          d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM5 20C5 28.2843 11.7157 35 20 35C28.2843 35 35 28.2843 35 20C35 11.7157 28.2843 5 20 5C11.7157 5 5 11.7157 5 20Z"
+          fill={theme.semantic.color.bgBasicStrong}
+        />
+        <path
+          d="M37.5 20C37.5 22.2981 37.0473 24.5738 36.1679 26.697C35.2884 28.8202 33.9994 30.7493 32.3744 32.3744C30.7493 33.9994 28.8202 35.2884 26.697 36.1679C24.5738 37.0473 22.2981 37.5 20 37.5C17.7019 37.5 15.4262 37.0473 13.303 36.1679C11.1798 35.2884 9.25066 33.9994 7.62563 32.3744C6.00061 30.7493 4.71156 28.8202 3.83211 26.697C2.95265 24.5738 2.5 22.2981 2.5 20"
+          stroke={indicatorColor ?? theme.semantic.color.lineBrandPrimary}
+          strokeWidth="5"
+          strokeLinecap="round"
+        />
+      </svg>
+    </StyledIndicator>
+  );
+};

src/components/LoadingIndicator/LoadingIndicator.type.ts

@@ -0,0 +1,3 @@
+export interface LoadingIndicatorProps {
+  indicatorColor?: string;
+}

src/components/LoadingIndicator/index.ts

@@ -0,0 +1,2 @@
+export { LoadingIndicator } from './LoadingIndicator';
+export type { LoadingIndicatorProps } from './LoadingIndicator.type';

src/components/index.ts

@@ -58,3 +58,6 @@ export type { DividerProps } from './Divider';
 export { SnackbarProvider } from './Snackbar/SnackbarProvider';
 export { useSnackbar } from './Snackbar/hooks/useSnackbar';
 export type * from './Snackbar';
+
+export { LoadingIndicator } from './LoadingIndicator';
+export type { LoadingIndicatorProps } from './LoadingIndicator';