fix(ui): Extend HTMLDivElement in Tag Component (#198)

* fix: Extend HTMLDivElement in Tag Component

* cs

Author: Brokyeom

.changeset/warm-hotels-march.md

@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+Extend HTMLDivElement in Tag Component

packages/ui/Tag/Tag.tsx

@@ -1,27 +1,24 @@
-import * as S from "./style.css";
-import createTagStyle from "./utils";
+import { forwardRef, type HTMLAttributes } from 'react';
+import * as S from './style.css';
+import createTagStyle from './utils';
 
-interface TagProps {
+export interface TagProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
-  size?: "sm" | "md" | "lg";
-  shape?: "rect" | "pill";
-  variant?: "default" | "primary" | "secondary";
-  type?: "solid" | "line";
+  size?: 'sm' | 'md' | 'lg';
+  shape?: 'rect' | 'pill';
+  variant?: 'default' | 'primary' | 'secondary';
+  type?: 'solid' | 'line';
 }
 
-function Tag({
-  children,
-  size = "sm",
-  shape = "rect",
-  variant = "default",
-  type = "solid",
-}: TagProps) {
+export const Tag = forwardRef<HTMLDivElement, TagProps>((props, forwardedRef) => {
+  const { children, size = 'sm', shape = 'rect', variant = 'default', type = 'solid' } = props;
   const style = createTagStyle(type, variant, shape, size);
+
   return (
-    <div className={`${S.root} ${style}`}>
+    <div className={`${S.root} ${style}`} ref={forwardedRef}>
       {children}
     </div>
   );
-}
+});
 
-export default Tag;
+Tag.displayName = 'Tag';

packages/ui/Tag/index.tsx

@@ -1 +1 @@
-export { default } from "./Tag";
+export * from './Tag';

packages/ui/index.ts

@@ -8,11 +8,11 @@ export type { DialogOptionType } from './Dialog';
 export { ToastProvider, useToast, Toast } from './Toast';
 export type { ToastOptionType } from './Toast';
 export { TextField, TextArea, SearchField, SelectV2, Select, UserMention } from './Input';
-export { default as Tag } from './Tag';
 export { default as Chip } from './Chip';
 export { default as Callout } from './Callout';
 export { default as Tab } from './Tab';
 export * from './Skeleton';
 export * from './FieldBox';
+export * from './Tag';
 // test component
 export { default as Test } from './Test';