Merge pull request #97 from Kernel360/common-component-skeletron

공통 컴포넌트: Skeleton

src/components/shared/skeleton/Skeleton.module.scss

@@ -0,0 +1,18 @@
+.container {
+  animation: opacity 2s ease-in-out 0.5s infinite;
+  background-color: var(--gray);
+}
+
+@keyframes opacity {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/components/shared/skeleton/Skeleton.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Skeleton from './Skeleton';
+
+const meta = {
+  title: 'Shared/Skeleton',
+  component: Skeleton,
+  parameters: {
+  },
+  tags: ['autodocs'],
+  argTypes: {
+
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const t1: Story = {
+  args: {
+    width: 300,
+    height: 200,
+  },
+};

src/components/shared/skeleton/Skeleton.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames/bind';
+
+import styles from './Skeleton.module.scss';
+
+const cx = classNames.bind(styles);
+
+interface SkeletonProps {
+  width: number
+  height: number
+}
+
+function Skeleton({ width, height }: SkeletonProps) {
+  return (
+    <div style={{ width, height }} className={cx('container')} />
+  );
+}
+
+export default Skeleton;