From 86ba6862f5097a2a75dec1af2ac3d8bde999e44a Mon Sep 17 00:00:00 2001
From: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com>
Date: Sun, 3 Nov 2024 01:56:41 +0900
Subject: [PATCH] fix(ui): Extend HTMLDivElement in Tag Component (#198)

* fix: Extend HTMLDivElement in Tag Component

* cs
---
 .changeset/warm-hotels-march.md |  5 +++++
 packages/ui/Tag/Tag.tsx         | 31 ++++++++++++++-----------------
 packages/ui/Tag/index.tsx       |  2 +-
 packages/ui/index.ts            |  2 +-
 4 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/warm-hotels-march.md

diff --git a/.changeset/warm-hotels-march.md b/.changeset/warm-hotels-march.md
new file mode 100644
index 0000000..25c6cc9
--- /dev/null
+++ b/.changeset/warm-hotels-march.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+Extend HTMLDivElement in Tag Component
diff --git a/packages/ui/Tag/Tag.tsx b/packages/ui/Tag/Tag.tsx
index 92383ff..79c9f48 100644
--- a/packages/ui/Tag/Tag.tsx
+++ b/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';
diff --git a/packages/ui/Tag/index.tsx b/packages/ui/Tag/index.tsx
index 21bb058..9790fcb 100644
--- a/packages/ui/Tag/index.tsx
+++ b/packages/ui/Tag/index.tsx
@@ -1 +1 @@
-export { default } from "./Tag";
+export * from './Tag';
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index c2d36b5..8046228 100644
--- a/packages/ui/index.ts
+++ b/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';