From c3127546c0f20a6bbd5791bdf21d48f8ca651530 Mon Sep 17 00:00:00 2001
From: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com>
Date: Thu, 26 Dec 2024 16:34:00 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui)=20Tag=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EC=97=90=20className=20prop=EC=9D=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=ED=95=A9=EB=8B=88=EB=8B=A4.=20(#232)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Add className prop in Tag component

* cs
---
 .changeset/short-hats-drop.md         |  5 ++++
 apps/docs/src/stories/Tag.stories.tsx | 35 +++++++++------------------
 packages/ui/Tag/Tag.tsx               |  5 ++--
 packages/ui/Tag/utils.ts              | 11 +++------
 4 files changed, 23 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/short-hats-drop.md

diff --git a/.changeset/short-hats-drop.md b/.changeset/short-hats-drop.md
new file mode 100644
index 00000000..3459ea94
--- /dev/null
+++ b/.changeset/short-hats-drop.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+Tag 컴포넌트에 ClassName Prop을 추가해 커스텀 스타일이 가능케 합니다.
diff --git a/apps/docs/src/stories/Tag.stories.tsx b/apps/docs/src/stories/Tag.stories.tsx
index 43b8aab9..8ae547cf 100644
--- a/apps/docs/src/stories/Tag.stories.tsx
+++ b/apps/docs/src/stories/Tag.stories.tsx
@@ -1,37 +1,26 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from '@storybook/react';
 
-import { type HTMLAttributes } from "react";
-import { Tag } from "@sopt-makers/ui";
-
-interface TagOwnProps extends HTMLAttributes<HTMLSpanElement> {
-  children?: string;
-  size?: "sm" | "md" | "lg";
-  shape?: "rect" | "pill";
-  variant?: "default" | "primary" | "secondary";
-  type?: "solid" | "line";
-}
-
-type TagStoryProps = TagOwnProps & { children: string };
+import { Tag, TagProps } from '@sopt-makers/ui';
 
 export default {
-  title: "Components/Tag",
+  title: 'Components/Tag',
   component: Tag,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     size: { control: 'radio', options: ['sm', 'md', 'lg'] },
     shape: { control: 'radio', options: ['rect', 'pill'] },
     variant: { control: 'radio', options: ['default', 'primary', 'secondary'] },
     type: { control: 'radio', options: ['solid', 'line'] },
-  }
-} as Meta<TagStoryProps>;
+  },
+} as Meta<TagProps>;
 
 // 기본 태그 스토리
-export const Default: StoryObj<TagStoryProps> = {
+export const Default: StoryObj<TagProps> = {
   args: {
-    children: "Default Tag",
-    size: "sm",
-    shape: "rect",
-    variant: "default",
-    type: "solid",
+    children: 'Default Tag',
+    size: 'sm',
+    shape: 'rect',
+    variant: 'default',
+    type: 'solid',
   },
 };
diff --git a/packages/ui/Tag/Tag.tsx b/packages/ui/Tag/Tag.tsx
index b86311be..017db606 100644
--- a/packages/ui/Tag/Tag.tsx
+++ b/packages/ui/Tag/Tag.tsx
@@ -4,6 +4,7 @@ import createTagStyle from './utils';
 
 export interface TagProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
+  className?: string;
   size?: 'sm' | 'md' | 'lg';
   shape?: 'rect' | 'pill';
   variant?: 'default' | 'primary' | 'secondary';
@@ -11,11 +12,11 @@ export interface TagProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const Tag = forwardRef<HTMLDivElement, TagProps>((props, forwardedRef) => {
-  const { children, size = 'sm', shape = 'rect', variant = 'default', type = 'solid', ...restProps } = props;
+  const { children, className, size = 'sm', shape = 'rect', variant = 'default', type = 'solid', ...restProps } = props;
   const style = createTagStyle(type, variant, shape, size);
 
   return (
-    <div className={`${S.root} ${style}`} ref={forwardedRef} {...restProps}>
+    <div className={`${S.root} ${style} ${className}`} ref={forwardedRef} {...restProps}>
       {children}
     </div>
   );
diff --git a/packages/ui/Tag/utils.ts b/packages/ui/Tag/utils.ts
index cfa73e49..809633a7 100644
--- a/packages/ui/Tag/utils.ts
+++ b/packages/ui/Tag/utils.ts
@@ -1,16 +1,11 @@
-import type {
-  TagShapeTheme,
-  TagSizeTheme,
-  TagTypeTheme,
-  TagVariantTheme,
-} from "./types";
-import { sprinkles } from "./style.css";
+import type { TagShapeTheme, TagSizeTheme, TagTypeTheme, TagVariantTheme } from './types';
+import { sprinkles } from './style.css';
 
 function createTagStyle(
   typeTheme: TagTypeTheme,
   variantTheme: TagVariantTheme,
   shapeTheme: TagShapeTheme,
-  sizeTheme: TagSizeTheme
+  sizeTheme: TagSizeTheme,
 ) {
   return sprinkles({
     backgroundColor: `${variantTheme}-${typeTheme}`,