[Feat] Spinner 컴포넌트 추가

apps/web/src/app/page.tsx

@@ -27,6 +27,14 @@ const LottieAnimation = dynamic(
     ssr: false,
   }
 );
+
+const Spinner = dynamic(
+  () => import('@repo/ui/Spinner').then((mod) => mod.Spinner),
+  {
+    ssr: false,
+  }
+);
+
 export default function Home() {
   const { register, handleSubmit } = useForm<FormValues>({
     defaultValues: {
@@ -202,9 +210,15 @@ export default function Home() {
           <Breadcrumb.Item active>기초 경제 지식</Breadcrumb.Item>
         </Breadcrumb>
       </div>
-      <div style={{ display: 'flex', gap: '8px' }}>
-        <IconButton icon="arrowBottom" />
-        <IconButton icon="plus" />
+      <div
+        style={{
+          display: 'flex',
+          gap: '8px',
+          backgroundColor: 'grey',
+        }}
+      >
+        <Spinner color="black" />
+        <Spinner color="white" />
       </div>
     </div>
   );

packages/ui/package.json

@@ -10,6 +10,7 @@
       "import": "./dist/index.js"
     },
     "./LottieAnimation": "./dist/components/LottieAnimation/LottieAnimation.js",
+    "./Spinner": "./dist/components/Spinner/Spinner.js",
     "./styles": "./dist/index.css"
   },
   "scripts": {

packages/ui/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { lotties } from '../LottieAnimation/assets';
+import {
+  LottieAnimation,
+  LottieAnimationProps,
+} from '../LottieAnimation/LottieAnimation';
+
+type LottieType = keyof typeof lotties;
+
+type SpinnerColorType = 'black' | 'white';
+
+const SpinnerColor: Record<SpinnerColorType, LottieType> = {
+  black: 'loadingBlack',
+  white: 'loadingWhite',
+};
+
+export type SpinnerProps = {
+  color?: keyof typeof SpinnerColor;
+} & Omit<LottieAnimationProps, 'animationData'>;
+
+/**
+ * @param {SpinnerProps} props - 스피너 속성
+ * @property {SpinnerColor} [color='white'] - 스피너 색상 선택
+ * @property {LottieAnimationProps} [otherProps] - LottieAnimation의 props
+ */
+export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
+  ({ color = 'white', width = '4rem', height = '4rem', ...rest }) => {
+    return (
+      <span>
+        <LottieAnimation
+          animationData={SpinnerColor[color]}
+          width={width}
+          height={height}
+          {...rest}
+        />
+      </span>
+    );
+  }
+);
+
+Spinner.displayName = 'Spinner';