feat(ui) Tag 컴포넌트에 className prop을 추가합니다. (#232)

* feat: Add className prop in Tag component

* cs

.changeset/short-hats-drop.md

@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+Tag 컴포넌트에 ClassName Prop을 추가해 커스텀 스타일이 가능케 합니다.

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',
   },
 };

packages/ui/Tag/Tag.tsx

@@ -4,18 +4,19 @@ 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';
   type?: 'solid' | 'line';
 }
 
 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>
   );

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}`,