From 42ba59de57f0b7cf410fb5870f9493ab8e40021f Mon Sep 17 00:00:00 2001
From: wookki <bwlimtony@gmail.com>
Date: Sat, 20 Jan 2024 11:32:51 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20Skeleton=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/skeleton/Skeleton.module.scss       | 18 ++++++++++++++++++
 src/components/shared/skeleton/Skeleton.tsx    | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/shared/skeleton/Skeleton.module.scss
 create mode 100644 src/components/shared/skeleton/Skeleton.tsx

diff --git a/src/components/shared/skeleton/Skeleton.module.scss b/src/components/shared/skeleton/Skeleton.module.scss
new file mode 100644
index 00000000..7c6119d3
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/shared/skeleton/Skeleton.tsx b/src/components/shared/skeleton/Skeleton.tsx
new file mode 100644
index 00000000..c147a234
--- /dev/null
+++ b/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;

From a1034fbd57eeae746b512e06369a91824db55e86 Mon Sep 17 00:00:00 2001
From: wookki <bwlimtony@gmail.com>
Date: Sat, 20 Jan 2024 11:33:06 +0900
Subject: [PATCH 2/2] =?UTF-8?q?test:=20Skeleton=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/skeleton/Skeleton.stories.tsx      | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/shared/skeleton/Skeleton.stories.tsx

diff --git a/src/components/shared/skeleton/Skeleton.stories.tsx b/src/components/shared/skeleton/Skeleton.stories.tsx
new file mode 100644
index 00000000..fdc66b02
--- /dev/null
+++ b/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,
+  },
+};