From 1f9fe9ecb4acdb493656014453823be62a2f4004 Mon Sep 17 00:00:00 2001
From: juyeon-park <lpjy1107@gmail.com>
Date: Mon, 30 Oct 2023 03:46:47 +0900
Subject: [PATCH] =?UTF-8?q?:tada:=20Badge=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/Badge/Badge.stories.tsx | 20 +++++++++++
 src/components/ui/Badge/Badge.tsx         | 42 +++++++++++++++++++++++
 src/components/ui/Badge/index.tsx         |  3 ++
 3 files changed, 65 insertions(+)
 create mode 100644 src/components/ui/Badge/Badge.stories.tsx
 create mode 100644 src/components/ui/Badge/Badge.tsx
 create mode 100644 src/components/ui/Badge/index.tsx

diff --git a/src/components/ui/Badge/Badge.stories.tsx b/src/components/ui/Badge/Badge.stories.tsx
new file mode 100644
index 00000000..ed875344
--- /dev/null
+++ b/src/components/ui/Badge/Badge.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Badge } from './Badge'
+
+const meta = {
+  title: 'UI/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Badge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {
+    variant: 'gradation',
+    size: 'sm',
+    children: '거래성사',
+  },
+}
diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx
new file mode 100644
index 00000000..cce0aead
--- /dev/null
+++ b/src/components/ui/Badge/Badge.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full px-2 font-medium',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary-color text-white',
+        secondary: 'bg-secondary-color text-white',
+        gradation: 'bg-gradient-primary text-white',
+        information: 'bg-background-secondary-color text-black',
+      },
+      size: {
+        sm: 'h-[18px] text-xs',
+        lg: 'h-6 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'information',
+      size: 'sm',
+    },
+  },
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+const Badge = ({ className, variant, size, ...props }: BadgeProps) => {
+  return (
+    <div
+      className={cn(badgeVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+}
+
+Badge.displayName = 'Badge'
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/Badge/index.tsx b/src/components/ui/Badge/index.tsx
new file mode 100644
index 00000000..97ca7067
--- /dev/null
+++ b/src/components/ui/Badge/index.tsx
@@ -0,0 +1,3 @@
+import { Badge } from './Badge'
+
+export default Badge