From 1bf0178643e6aeef4ad4473797a336e9f6831a45 Mon Sep 17 00:00:00 2001
From: sikkzz <sling0623@gmail.com>
Date: Sat, 1 Feb 2025 14:11:12 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20tag=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/Tag/Tag.module.scss | 19 ++++++++++++
 src/components/ui/Tag/Tag.stories.tsx | 44 +++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/components/ui/Tag/Tag.stories.tsx

diff --git a/src/components/ui/Tag/Tag.module.scss b/src/components/ui/Tag/Tag.module.scss
index 4dba675..ae5273c 100644
--- a/src/components/ui/Tag/Tag.module.scss
+++ b/src/components/ui/Tag/Tag.module.scss
@@ -25,3 +25,22 @@
     fill: var(--color-gray500);
   }
 }
+
+.TagStory {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .Wrapper {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    width: 300px;
+  }
+
+  .Text {
+    font-size: 1.125rem;
+    width: 120px;
+  }
+}
diff --git a/src/components/ui/Tag/Tag.stories.tsx b/src/components/ui/Tag/Tag.stories.tsx
new file mode 100644
index 0000000..68c0ea4
--- /dev/null
+++ b/src/components/ui/Tag/Tag.stories.tsx
@@ -0,0 +1,44 @@
+import Tag from "@/components/ui/Tag/Tag";
+import styles from "@/components/ui/Tag/Tag.module.scss";
+import type { TagProps } from "@/components/ui/Tag/Tag.types";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Tag> = {
+  title: "Example/Tag",
+  component: Tag,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["!autodocs"],
+};
+
+export default meta;
+
+export const Primary: StoryObj<TagProps> = {
+  args: {
+    text: "태그",
+    variant: "primary",
+    isSelect: false,
+  },
+};
+
+export const VariantProps: StoryObj<typeof Tag> = {
+  render: () => (
+    <div className={styles.TagStory}>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>primary</p>
+        <Tag variant="primary" text="primary" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>add</p>
+
+        <Tag variant="add" text="add" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>isSelect</p>
+        <Tag variant="primary" text="isSelect" isSelect />
+      </div>
+    </div>
+  ),
+};