feat: 리뷰 반영 & changest 추가

.changeset/real-gorillas-camp.md

@@ -0,0 +1,7 @@
+---
+"wowds-tokens": patch
+"wowds-theme": patch
+"wowds-ui": patch
+---
+
+Tag 컴포넌트를 구현합니다.

packages/wow-ui/package.json

@@ -152,6 +152,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "lottie-react": "^2.4.0",
     "wowds-icons": "workspace:^"
   },

packages/wow-ui/src/components/Tag/index.tsx

@@ -2,7 +2,8 @@
 
 import { cva } from "@styled-system/css/cva";
 import { styled } from "@styled-system/jsx";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { clsx } from "clsx";
+import type { HTMLAttributes, PropsWithChildren } from "react";
 import { forwardRef } from "react";
 
 type Variant = "outline" | "solid1" | "solid2";
@@ -17,38 +18,34 @@ type VariantColorMap = {
   solid2: Solid2Colors;
 };
 
-export interface BaseTagProps extends HTMLAttributes<HTMLSpanElement> {
-  children: ReactNode;
-  style?: CSSProperties;
-  className?: string;
-}
+export interface BaseTagProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    PropsWithChildren {}
 
 /**
  * @description 태그 컴포넌트의 속성을 정의합니다.
  *
  * @param {ReactNode} children - 태그의 자식 요소.
  * @param {"outline" | "solid1" | 'solid2'} [variant] - 태그의 종류.
  * @param {"red" | "blue" | "green" | "yellow" | "grey"} [color] - 태그의 색상.
- * @param {CSSProperties} [style] - 태그의 커스텀 스타일.
- * @param {string} [className] - 태그에 전달하는 커스텀 클래스.
  * @param {ComponentPropsWithoutRef<T>} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props.
  * @param {ComponentPropsWithRef<T>["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref.
  */
 
-type SpecificTagProps = BaseTagProps & {
+type TagProps = BaseTagProps & {
   variant: Variant;
   color: VariantColorMap[Variant];
 };
 
-const Tag = forwardRef<HTMLSpanElement, SpecificTagProps>(
-  ({ children, variant = "outline", color, ...rest }, ref) => {
+const Tag = forwardRef<HTMLSpanElement, TagProps>(
+  (
+    { children, variant = "outline", color = "blue", className, ...rest },
+    ref
+  ) => {
     return (
       <styled.span
+        className={clsx(TagStyle({ variant, color }), className)}
         ref={ref}
-        className={TagStyle({
-          variant,
-          color,
-        })}
         {...rest}
       >
         {children}