feat: Loading 컴포넌트 구현 (#89)

* chore: lottie-web 설치

* chore: lottie json 추가

* feat: Lottie 컴포넌트 구현

* chore: storybook staticDir 설정 추가

* feat: Lottie storybook 추가

* feat: Loading 컴포넌트 구현

* fix: Loading 스토리북 경로 atoms -> molecules로 변경

* refactor: use client 제거

* refactor: container props 제거

.storybook/main.ts

@@ -24,6 +24,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../public'],
   webpackFinal: async (config) => {
     if (!config.resolve) return config;
 

package.json

@@ -27,6 +27,7 @@
     "class-variance-authority": "^0.7.0",
     "jotai": "^2.6.0",
     "js-cookie": "^3.0.5",
+    "lottie-web": "^5.12.2",
     "modern-screenshot": "^4.4.37",
     "next": "14.0.2",
     "react": "^18",

src/components/atoms/lottie/Lottie.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Lottie } from './Lottie';
+
+const meta: Meta<typeof Lottie> = {
+  title: 'components/atoms/lottie',
+  component: Lottie,
+  argTypes: {
+    src: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Lottie>;
+
+export const Default: Story = {
+  args: {
+    src: '/lotties/bandiboodi-loading.json',
+    className: 'h-[250px] w-[250px]',
+  },
+};

src/components/atoms/lottie/Lottie.tsx

@@ -0,0 +1,35 @@
+import type { HTMLAttributes } from 'react';
+import { useEffect, useRef } from 'react';
+import type { AnimationConfig, AnimationItem } from 'lottie-web';
+import lottie from 'lottie-web';
+
+interface LottieProps extends HTMLAttributes<HTMLDivElement>, Omit<AnimationConfig, 'container'> {
+  src: string;
+}
+
+export const Lottie = ({ src, loop = true, autoplay = true, ...props }: LottieProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animationRef = useRef<AnimationItem>();
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    animationRef.current = lottie.loadAnimation({
+      container: containerRef.current,
+      loop,
+      autoplay,
+      renderer: 'svg',
+      path: src,
+      rendererSettings: {
+        progressiveLoad: true,
+        hideOnTransparent: true,
+      },
+    });
+
+    return () => {
+      animationRef.current?.destroy();
+    };
+  }, [autoplay, loop, src]);
+
+  return <div ref={containerRef} {...props} />;
+};

src/components/atoms/lottie/index.ts

@@ -0,0 +1 @@
+export { Lottie } from './Lottie';

src/components/molecules/loading/Loading.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Loading } from './Loading';
+
+const meta: Meta<typeof Loading> = {
+  title: 'components/molecules/loading',
+  component: Loading,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Loading>;
+
+export const Default: Story = {
+  args: {
+    className: 'h-[250px] w-[250px]',
+  },
+};

src/components/molecules/loading/Loading.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+
+import { Lottie } from '@/components/atoms/lottie';
+
+interface LoadingProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const Loading = ({ ...props }: LoadingProps) => {
+  return <Lottie src="/lotties/bandiboodi-loading.json" {...props} />;
+};

src/components/molecules/loading/index.ts

@@ -0,0 +1 @@
+export { Loading } from './Loading';

yarn.lock

@@ -6447,6 +6447,7 @@ __metadata:
     jotai: "npm:^2.6.0"
     js-cookie: "npm:^3.0.5"
     lint-staged: "npm:^15.0.2"
+    lottie-web: "npm:^5.12.2"
     modern-screenshot: "npm:^4.4.37"
     next: "npm:14.0.2"
     postcss: "npm:^8"
@@ -12313,6 +12314,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lottie-web@npm:^5.12.2":
+  version: 5.12.2
+  resolution: "lottie-web@npm:5.12.2"
+  checksum: 0aeaf631b10a76afd025df70c2a1486543530708e07a316946c08e55891dac483ffbaf2bf3648ae0b9c54c733118a0a086fd150aa76f7848606214c67ad72c30
+  languageName: node
+  linkType: hard
+
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"