From 2d07c9bfa57aaf3e6b98089e01cac2bdd70b3c51 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 2 Jun 2024 03:16:37 +0900
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20Tag=20=EA=B8=B0=EB=B3=B8=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8B=80=20=EC=A0=95?=
 =?UTF-8?q?=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Tag/Tag.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 packages/ui/Tag/Tag.tsx

diff --git a/packages/ui/Tag/Tag.tsx b/packages/ui/Tag/Tag.tsx
new file mode 100644
index 0000000..b8a5164
--- /dev/null
+++ b/packages/ui/Tag/Tag.tsx
@@ -0,0 +1,21 @@
+import * as S from "./style.css";
+
+interface TagProps {
+  children?: React.ReactNode;
+  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) {
+  return <div>{children}</div>;
+}
+
+export default Tag;

From e1db3d9ffe1e420d4d949b4a059b817a85383448 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 2 Jun 2024 03:44:46 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20style=20=EC=A0=95=EC=9D=98=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/App.tsx        | 277 ++++++++++++++++++++++++++++++++---
 packages/ui/Tag/Tag.tsx      |   4 +-
 packages/ui/Tag/constants.ts |  39 +++++
 packages/ui/Tag/index.ts     |   1 +
 packages/ui/Tag/style.css.ts |  27 ++++
 packages/ui/Tag/types.ts     |   9 ++
 packages/ui/Tag/utils.ts     |  23 +++
 7 files changed, 356 insertions(+), 24 deletions(-)
 create mode 100644 packages/ui/Tag/constants.ts
 create mode 100644 packages/ui/Tag/index.ts
 create mode 100644 packages/ui/Tag/style.css.ts
 create mode 100644 packages/ui/Tag/types.ts
 create mode 100644 packages/ui/Tag/utils.ts

diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
index 99d71ba..0ca161f 100644
--- a/apps/docs/src/App.tsx
+++ b/apps/docs/src/App.tsx
@@ -1,50 +1,281 @@
-import { Test } from '@sopt-makers/ui';
-import './App.css';
-import { useState, ChangeEvent } from 'react';
-import TextField from '../../../packages/ui/Input/TextField';
-import TextArea from '../../../packages/ui/Input/TextArea';
-import SearchField from '../../../packages/ui/Input/SearchField';
+import "./App.css";
+
+import { ChangeEvent, useState } from "react";
+
+import SearchField from "../../../packages/ui/Input/SearchField";
+import Tag from "../../../packages/ui/Tag/Tag";
+import { Test } from "@sopt-makers/ui";
+import TextArea from "../../../packages/ui/Input/TextArea";
+import TextField from "../../../packages/ui/Input/TextField";
 
 function App() {
-  const [input, setInput] = useState('');
-  const [textarea, setTextarea] = useState('');
-  const [search, setSearch] = useState('');
+  const [input, setInput] = useState("");
+  const [textarea, setTextarea] = useState("");
+  const [search, setSearch] = useState("");
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInput(e.target.value);
-  }
+  };
 
   const inputValidation = (input: string) => {
     if (input && input.length > 10) return true;
     return false;
-  }
+  };
 
   const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setTextarea(e.target.value);
-  }
+  };
 
   const textareaValidation = (input: string) => {
     if (input && input.length > 10) return true;
     return false;
-  }
+  };
 
-  const handleTextareaSubmit = () => { console.log(textarea) }
+  const handleTextareaSubmit = () => {
+    console.log(textarea);
+  };
 
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
-  }
+  };
 
-  const handleSearchSubmit = () => { console.log(search) }
+  const handleSearchSubmit = () => {
+    console.log(search);
+  };
 
-  const handleSearchReset = () => { setSearch('') }
+  const handleSearchReset = () => {
+    setSearch("");
+  };
 
   return (
-    <>
-      <Test text="Test Component" size="big" color="blue" />
-      <TextField<string> placeholder="Placeholder..." required labelText="Label" descriptionText="description" validationFn={inputValidation} value={input} onChange={handleInputChange} />
-      <TextArea placeholder="Placeholder..." required labelText="Label" descriptionText="description" validationFn={textareaValidation} value={textarea} onChange={handleTextareaChange} onSubmit={handleTextareaSubmit} maxLength={300} />
-      <SearchField placeholder="Placeholder..." value={search} onChange={handleSearchChange} onSubmit={handleSearchSubmit} onReset={handleSearchReset} />
-    </>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "10px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="rect" variant="default" type="solid">
+          Tag
+        </Tag>
+        <Tag size="md" shape="rect" variant="default" type="solid">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="rect" variant="default" type="solid">
+          Tag
+        </Tag>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="pill" variant="default" type="solid">
+          Tag
+        </Tag>
+        <Tag size="md" shape="pill" variant="default" type="solid">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="pill" variant="default" type="solid">
+          Tag
+        </Tag>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="rect" variant="default" type="line">
+          Tag
+        </Tag>
+        <Tag size="md" shape="rect" variant="default" type="line">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="rect" variant="default" type="line">
+          Tag
+        </Tag>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="pill" variant="default" type="line">
+          Tag
+        </Tag>
+        <Tag size="md" shape="pill" variant="default" type="line">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="pill" variant="default" type="line">
+          Tag
+        </Tag>
+      </div>
+      // primary
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="rect" variant="primary" type="solid">
+          Tag
+        </Tag>
+        <Tag size="md" shape="rect" variant="primary" type="solid">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="rect" variant="primary" type="solid">
+          Tag
+        </Tag>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="pill" variant="primary" type="solid">
+          Tag
+        </Tag>
+        <Tag size="md" shape="pill" variant="primary" type="solid">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="pill" variant="primary" type="solid">
+          Tag
+        </Tag>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="rect" variant="primary" type="line">
+          Tag
+        </Tag>
+        <Tag size="md" shape="rect" variant="primary" type="line">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="rect" variant="primary" type="line">
+          Tag
+        </Tag>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="pill" variant="primary" type="line">
+          Tag
+        </Tag>
+        <Tag size="md" shape="pill" variant="primary" type="line">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="pill" variant="primary" type="line">
+          Tag
+        </Tag>
+      </div>
+      // secondary
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="rect" variant="secondary" type="solid">
+          Tag
+        </Tag>
+        <Tag size="md" shape="rect" variant="secondary" type="solid">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="rect" variant="secondary" type="solid">
+          Tag
+        </Tag>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="pill" variant="secondary" type="solid">
+          Tag
+        </Tag>
+        <Tag size="md" shape="pill" variant="secondary" type="solid">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="pill" variant="secondary" type="solid">
+          Tag
+        </Tag>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="rect" variant="secondary" type="line">
+          Tag
+        </Tag>
+        <Tag size="md" shape="rect" variant="secondary" type="line">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="rect" variant="secondary" type="line">
+          Tag
+        </Tag>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "3px",
+        }}
+      >
+        <Tag size="sm" shape="pill" variant="secondary" type="line">
+          Tag
+        </Tag>
+        <Tag size="md" shape="pill" variant="secondary" type="line">
+          Tag
+        </Tag>
+        <Tag size="lg" shape="pill" variant="secondary" type="line">
+          Tag
+        </Tag>
+      </div>
+    </div>
   );
 }
 
diff --git a/packages/ui/Tag/Tag.tsx b/packages/ui/Tag/Tag.tsx
index b8a5164..99ed884 100644
--- a/packages/ui/Tag/Tag.tsx
+++ b/packages/ui/Tag/Tag.tsx
@@ -1,4 +1,5 @@
 import * as S from "./style.css";
+import createTagStyle from "./utils";
 
 interface TagProps {
   children?: React.ReactNode;
@@ -15,7 +16,8 @@ function Tag({
   variant = "default",
   type = "solid",
 }: TagProps) {
-  return <div>{children}</div>;
+  const style = createTagStyle(type, variant, shape, size);
+  return <div className={`${S.root} ${style}`}>{children}</div>;
 }
 
 export default Tag;
diff --git a/packages/ui/Tag/constants.ts b/packages/ui/Tag/constants.ts
new file mode 100644
index 0000000..028cf9d
--- /dev/null
+++ b/packages/ui/Tag/constants.ts
@@ -0,0 +1,39 @@
+import theme from "../theme.css";
+import type {
+  TagBgColorTheme,
+  TagShapeTheme,
+  TagSizeTheme,
+  TagVariantTheme,
+} from "./types";
+
+export const bgColors: Record<TagBgColorTheme, string> = {
+  "default-solid": theme.colors.gray700,
+  "primary-solid": theme.colors.orangeAlpha200,
+  "secondary-solid": theme.colors.blueAlpha200,
+  "default-line": "none",
+  "primary-line": "none",
+  "secondary-line": "none",
+};
+
+export const textColors: Record<TagVariantTheme, string> = {
+  default: theme.colors.gray10,
+  primary: theme.colors.secondary,
+  secondary: theme.colors.success,
+};
+
+export const borderRadiuses: Record<TagShapeTheme, string> = {
+  rect: "4px",
+  pill: "100px",
+};
+
+export const paddings: Record<TagSizeTheme, string> = {
+  sm: "3px 6px",
+  md: "3px 7px",
+  lg: "3px 8px",
+};
+
+export const fonts = {
+  sm: theme.fontsObject.LABEL_5_11_SB,
+  md: theme.fontsObject.LABEL_3_14_SB,
+  lg: theme.fontsObject.LABEL_2_16_SB,
+};
diff --git a/packages/ui/Tag/index.ts b/packages/ui/Tag/index.ts
new file mode 100644
index 0000000..21bb058
--- /dev/null
+++ b/packages/ui/Tag/index.ts
@@ -0,0 +1 @@
+export { default } from "./Tag";
diff --git a/packages/ui/Tag/style.css.ts b/packages/ui/Tag/style.css.ts
new file mode 100644
index 0000000..004e18c
--- /dev/null
+++ b/packages/ui/Tag/style.css.ts
@@ -0,0 +1,27 @@
+import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
+import { style } from "@vanilla-extract/css";
+import {
+  bgColors,
+  borderRadiuses,
+  fonts,
+  paddings,
+  textColors,
+} from "./constants";
+
+export const root = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+});
+
+const sprinkleProperties = defineProperties({
+  properties: {
+    backgroundColor: bgColors,
+    color: textColors,
+    borderRadius: borderRadiuses,
+    padding: paddings,
+    fontStyle: fonts,
+  },
+});
+
+export const sprinkles = createSprinkles(sprinkleProperties);
diff --git a/packages/ui/Tag/types.ts b/packages/ui/Tag/types.ts
new file mode 100644
index 0000000..dd54cd5
--- /dev/null
+++ b/packages/ui/Tag/types.ts
@@ -0,0 +1,9 @@
+export type TagSizeTheme = "sm" | "md" | "lg";
+
+export type TagShapeTheme = "rect" | "pill";
+
+export type TagVariantTheme = "default" | "primary" | "secondary";
+
+export type TagTypeTheme = "solid" | "line";
+
+export type TagBgColorTheme = `${TagVariantTheme}-${TagTypeTheme}`;
diff --git a/packages/ui/Tag/utils.ts b/packages/ui/Tag/utils.ts
new file mode 100644
index 0000000..a0e231c
--- /dev/null
+++ b/packages/ui/Tag/utils.ts
@@ -0,0 +1,23 @@
+import type {
+  TagShapeTheme,
+  TagSizeTheme,
+  TagTypeTheme,
+  TagVariantTheme,
+} from "./types";
+import { sprinkles } from "./style.css";
+
+function createTagStyle(
+  typeTheme: TagTypeTheme,
+  variantTheme: TagVariantTheme,
+  shapeTheme: TagShapeTheme,
+  sizeTheme: TagSizeTheme
+) {
+  return sprinkles({
+    backgroundColor: `${variantTheme}-${typeTheme}`,
+    color: variantTheme,
+    borderRadius: shapeTheme,
+    padding: sizeTheme,
+    fontStyle: sizeTheme,
+  });
+}
+export default createTagStyle;

From 92c295a27426d38960121220ce6f280b52b05ba4 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 2 Jun 2024 03:52:16 +0900
Subject: [PATCH 03/10] =?UTF-8?q?feat:=20border=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/App.tsx        | 220 +++++++++++++++++------------------
 packages/ui/Tag/Tag.tsx      |   6 +-
 packages/ui/Tag/constants.ts |   9 ++
 packages/ui/Tag/style.css.ts |   2 +
 packages/ui/Tag/utils.ts     |   1 +
 5 files changed, 127 insertions(+), 111 deletions(-)

diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
index 0ca161f..5efca36 100644
--- a/apps/docs/src/App.tsx
+++ b/apps/docs/src/App.tsx
@@ -1,10 +1,10 @@
 import "./App.css";
 
+import { Button, Test } from "@sopt-makers/ui";
 import { ChangeEvent, useState } from "react";
 
 import SearchField from "../../../packages/ui/Input/SearchField";
-import Tag from "../../../packages/ui/Tag/Tag";
-import { Test } from "@sopt-makers/ui";
+import TAG from "../../../packages/ui/TAG/TAG";
 import TextArea from "../../../packages/ui/Input/TextArea";
 import TextField from "../../../packages/ui/Input/TextField";
 
@@ -65,15 +65,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="rect" variant="default" type="solid">
-          Tag
-        </Tag>
-        <Tag size="md" shape="rect" variant="default" type="solid">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="rect" variant="default" type="solid">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="rect" variant="default" type="solid">
+          TAG
+        </TAG>
+        <TAG size="md" shape="rect" variant="default" type="solid">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="rect" variant="default" type="solid">
+          TAG
+        </TAG>
       </div>
       <div
         style={{
@@ -83,15 +83,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="pill" variant="default" type="solid">
-          Tag
-        </Tag>
-        <Tag size="md" shape="pill" variant="default" type="solid">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="pill" variant="default" type="solid">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="pill" variant="default" type="solid">
+          TAG
+        </TAG>
+        <TAG size="md" shape="pill" variant="default" type="solid">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="pill" variant="default" type="solid">
+          TAG
+        </TAG>
       </div>
       <div
         style={{
@@ -101,15 +101,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="rect" variant="default" type="line">
-          Tag
-        </Tag>
-        <Tag size="md" shape="rect" variant="default" type="line">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="rect" variant="default" type="line">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="rect" variant="default" type="line">
+          TAG
+        </TAG>
+        <TAG size="md" shape="rect" variant="default" type="line">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="rect" variant="default" type="line">
+          TAG
+        </TAG>
       </div>
       <div
         style={{
@@ -119,15 +119,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="pill" variant="default" type="line">
-          Tag
-        </Tag>
-        <Tag size="md" shape="pill" variant="default" type="line">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="pill" variant="default" type="line">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="pill" variant="default" type="line">
+          TAG
+        </TAG>
+        <TAG size="md" shape="pill" variant="default" type="line">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="pill" variant="default" type="line">
+          TAG
+        </TAG>
       </div>
       // primary
       <div
@@ -138,15 +138,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="rect" variant="primary" type="solid">
-          Tag
-        </Tag>
-        <Tag size="md" shape="rect" variant="primary" type="solid">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="rect" variant="primary" type="solid">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="rect" variant="primary" type="solid">
+          TAG
+        </TAG>
+        <TAG size="md" shape="rect" variant="primary" type="solid">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="rect" variant="primary" type="solid">
+          TAG
+        </TAG>
       </div>
       <div
         style={{
@@ -156,15 +156,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="pill" variant="primary" type="solid">
-          Tag
-        </Tag>
-        <Tag size="md" shape="pill" variant="primary" type="solid">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="pill" variant="primary" type="solid">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="pill" variant="primary" type="solid">
+          TAG
+        </TAG>
+        <TAG size="md" shape="pill" variant="primary" type="solid">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="pill" variant="primary" type="solid">
+          TAG
+        </TAG>
       </div>
       <div
         style={{
@@ -174,15 +174,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="rect" variant="primary" type="line">
-          Tag
-        </Tag>
-        <Tag size="md" shape="rect" variant="primary" type="line">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="rect" variant="primary" type="line">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="rect" variant="primary" type="line">
+          TAG
+        </TAG>
+        <TAG size="md" shape="rect" variant="primary" type="line">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="rect" variant="primary" type="line">
+          TAG
+        </TAG>
       </div>
       <div
         style={{
@@ -192,15 +192,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="pill" variant="primary" type="line">
-          Tag
-        </Tag>
-        <Tag size="md" shape="pill" variant="primary" type="line">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="pill" variant="primary" type="line">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="pill" variant="primary" type="line">
+          TAG
+        </TAG>
+        <TAG size="md" shape="pill" variant="primary" type="line">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="pill" variant="primary" type="line">
+          TAG
+        </TAG>
       </div>
       // secondary
       <div
@@ -211,15 +211,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="rect" variant="secondary" type="solid">
-          Tag
-        </Tag>
-        <Tag size="md" shape="rect" variant="secondary" type="solid">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="rect" variant="secondary" type="solid">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="rect" variant="secondary" type="solid">
+          TAG
+        </TAG>
+        <TAG size="md" shape="rect" variant="secondary" type="solid">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="rect" variant="secondary" type="solid">
+          TAG
+        </TAG>
       </div>
       <div
         style={{
@@ -229,15 +229,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="pill" variant="secondary" type="solid">
-          Tag
-        </Tag>
-        <Tag size="md" shape="pill" variant="secondary" type="solid">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="pill" variant="secondary" type="solid">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="pill" variant="secondary" type="solid">
+          TAG
+        </TAG>
+        <TAG size="md" shape="pill" variant="secondary" type="solid">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="pill" variant="secondary" type="solid">
+          TAG
+        </TAG>
       </div>
       <div
         style={{
@@ -247,15 +247,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="rect" variant="secondary" type="line">
-          Tag
-        </Tag>
-        <Tag size="md" shape="rect" variant="secondary" type="line">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="rect" variant="secondary" type="line">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="rect" variant="secondary" type="line">
+          TAG
+        </TAG>
+        <TAG size="md" shape="rect" variant="secondary" type="line">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="rect" variant="secondary" type="line">
+          TAG
+        </TAG>
       </div>
       <div
         style={{
@@ -265,15 +265,15 @@ function App() {
           gap: "3px",
         }}
       >
-        <Tag size="sm" shape="pill" variant="secondary" type="line">
-          Tag
-        </Tag>
-        <Tag size="md" shape="pill" variant="secondary" type="line">
-          Tag
-        </Tag>
-        <Tag size="lg" shape="pill" variant="secondary" type="line">
-          Tag
-        </Tag>
+        <TAG size="sm" shape="pill" variant="secondary" type="line">
+          TAG
+        </TAG>
+        <TAG size="md" shape="pill" variant="secondary" type="line">
+          TAG
+        </TAG>
+        <TAG size="lg" shape="pill" variant="secondary" type="line">
+          TAG
+        </TAG>
       </div>
     </div>
   );
diff --git a/packages/ui/Tag/Tag.tsx b/packages/ui/Tag/Tag.tsx
index 99ed884..2b2af67 100644
--- a/packages/ui/Tag/Tag.tsx
+++ b/packages/ui/Tag/Tag.tsx
@@ -17,7 +17,11 @@ function Tag({
   type = "solid",
 }: TagProps) {
   const style = createTagStyle(type, variant, shape, size);
-  return <div className={`${S.root} ${style}`}>{children}</div>;
+  return (
+    <div className={`${S.root} ${style}`}>
+      <span>{children}</span>
+    </div>
+  );
 }
 
 export default Tag;
diff --git a/packages/ui/Tag/constants.ts b/packages/ui/Tag/constants.ts
index 028cf9d..4f2fd51 100644
--- a/packages/ui/Tag/constants.ts
+++ b/packages/ui/Tag/constants.ts
@@ -15,6 +15,15 @@ export const bgColors: Record<TagBgColorTheme, string> = {
   "secondary-line": "none",
 };
 
+export const borders: Record<TagBgColorTheme, string> = {
+  "default-solid": "none",
+  "primary-solid": "none",
+  "secondary-solid": "none",
+  "default-line": `1px solid ${theme.colors.gray300}`,
+  "primary-line": `1px solid ${theme.colors.orange700}`,
+  "secondary-line": `1px solid ${theme.colors.blue700}`,
+};
+
 export const textColors: Record<TagVariantTheme, string> = {
   default: theme.colors.gray10,
   primary: theme.colors.secondary,
diff --git a/packages/ui/Tag/style.css.ts b/packages/ui/Tag/style.css.ts
index 004e18c..afba3ff 100644
--- a/packages/ui/Tag/style.css.ts
+++ b/packages/ui/Tag/style.css.ts
@@ -3,6 +3,7 @@ import { style } from "@vanilla-extract/css";
 import {
   bgColors,
   borderRadiuses,
+  borders,
   fonts,
   paddings,
   textColors,
@@ -17,6 +18,7 @@ export const root = style({
 const sprinkleProperties = defineProperties({
   properties: {
     backgroundColor: bgColors,
+    border: borders,
     color: textColors,
     borderRadius: borderRadiuses,
     padding: paddings,
diff --git a/packages/ui/Tag/utils.ts b/packages/ui/Tag/utils.ts
index a0e231c..96017e4 100644
--- a/packages/ui/Tag/utils.ts
+++ b/packages/ui/Tag/utils.ts
@@ -14,6 +14,7 @@ function createTagStyle(
 ) {
   return sprinkles({
     backgroundColor: `${variantTheme}-${typeTheme}`,
+    border: `${variantTheme}-${typeTheme}`,
     color: variantTheme,
     borderRadius: shapeTheme,
     padding: sizeTheme,

From d208f7aa5396a76add7b63e9057806160f5ef19f Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 2 Jun 2024 04:01:09 +0900
Subject: [PATCH 04/10] =?UTF-8?q?feat:=20fit-content=20=EC=86=8D=EC=84=B1?=
 =?UTF-8?q?=20=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/App.tsx        | 18 ++++--------------
 apps/docs/src/index.css      | 17 +++++++++++------
 packages/ui/Tag/style.css.ts |  2 ++
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
index 5efca36..5bba3e6 100644
--- a/apps/docs/src/App.tsx
+++ b/apps/docs/src/App.tsx
@@ -51,17 +51,18 @@ function App() {
     <div
       style={{
         display: "flex",
+        width: "100%",
         flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",
         gap: "10px",
       }}
     >
+      <span style={{ color: "white", fontSize: "12px" }}>Default</span>
       <div
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -79,7 +80,6 @@ function App() {
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -97,7 +97,6 @@ function App() {
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -115,7 +114,6 @@ function App() {
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -129,12 +127,11 @@ function App() {
           TAG
         </TAG>
       </div>
-      // primary
+      <span style={{ color: "white", fontSize: "12px" }}>Primary</span>
       <div
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -152,7 +149,6 @@ function App() {
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -170,7 +166,6 @@ function App() {
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -188,7 +183,6 @@ function App() {
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -202,12 +196,11 @@ function App() {
           TAG
         </TAG>
       </div>
-      // secondary
+      <span style={{ color: "white", fontSize: "12px" }}>Secondary</span>
       <div
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -225,7 +218,6 @@ function App() {
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -243,7 +235,6 @@ function App() {
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
@@ -261,7 +252,6 @@ function App() {
         style={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center",
           gap: "3px",
         }}
       >
diff --git a/apps/docs/src/index.css b/apps/docs/src/index.css
index 4e11abb..544c531 100644
--- a/apps/docs/src/index.css
+++ b/apps/docs/src/index.css
@@ -7,36 +7,41 @@
 }
 
 body {
-  background-color: rgb(0, 0, 0);
+  background-color: #1e1e1e;
 }
 
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2")
+    format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2")
+    format("woff2");
   font-weight: 400;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2")
+    format("woff2");
   font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2")
+    format("woff2");
   font-weight: 600;
   font-style: normal;
 }
 @font-face {
   font-family: "SUIT";
-  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2") format("woff2");
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2")
+    format("woff2");
   font-weight: 700;
   font-style: normal;
 }
diff --git a/packages/ui/Tag/style.css.ts b/packages/ui/Tag/style.css.ts
index afba3ff..af9e58f 100644
--- a/packages/ui/Tag/style.css.ts
+++ b/packages/ui/Tag/style.css.ts
@@ -13,6 +13,8 @@ export const root = style({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
+  width: "fit-content",
+  height: "fit-content",
 });
 
 const sprinkleProperties = defineProperties({

From 8666c06330e591552e03d3819bc0c3bda1a6b575 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 2 Jun 2024 04:03:47 +0900
Subject: [PATCH 05/10] =?UTF-8?q?chore:=20App.tsx=20=EB=B3=B5=EA=B5=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/App.tsx | 251 ++++++------------------------------------
 1 file changed, 31 insertions(+), 220 deletions(-)

diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
index 5bba3e6..ae949d4 100644
--- a/apps/docs/src/App.tsx
+++ b/apps/docs/src/App.tsx
@@ -1,10 +1,9 @@
 import "./App.css";
 
-import { Button, Test } from "@sopt-makers/ui";
 import { ChangeEvent, useState } from "react";
 
 import SearchField from "../../../packages/ui/Input/SearchField";
-import TAG from "../../../packages/ui/TAG/TAG";
+import { Test } from "@sopt-makers/ui";
 import TextArea from "../../../packages/ui/Input/TextArea";
 import TextField from "../../../packages/ui/Input/TextField";
 
@@ -48,224 +47,36 @@ function App() {
   };
 
   return (
-    <div
-      style={{
-        display: "flex",
-        width: "100%",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "10px",
-      }}
-    >
-      <span style={{ color: "white", fontSize: "12px" }}>Default</span>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="rect" variant="default" type="solid">
-          TAG
-        </TAG>
-        <TAG size="md" shape="rect" variant="default" type="solid">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="rect" variant="default" type="solid">
-          TAG
-        </TAG>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="pill" variant="default" type="solid">
-          TAG
-        </TAG>
-        <TAG size="md" shape="pill" variant="default" type="solid">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="pill" variant="default" type="solid">
-          TAG
-        </TAG>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="rect" variant="default" type="line">
-          TAG
-        </TAG>
-        <TAG size="md" shape="rect" variant="default" type="line">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="rect" variant="default" type="line">
-          TAG
-        </TAG>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="pill" variant="default" type="line">
-          TAG
-        </TAG>
-        <TAG size="md" shape="pill" variant="default" type="line">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="pill" variant="default" type="line">
-          TAG
-        </TAG>
-      </div>
-      <span style={{ color: "white", fontSize: "12px" }}>Primary</span>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="rect" variant="primary" type="solid">
-          TAG
-        </TAG>
-        <TAG size="md" shape="rect" variant="primary" type="solid">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="rect" variant="primary" type="solid">
-          TAG
-        </TAG>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="pill" variant="primary" type="solid">
-          TAG
-        </TAG>
-        <TAG size="md" shape="pill" variant="primary" type="solid">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="pill" variant="primary" type="solid">
-          TAG
-        </TAG>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="rect" variant="primary" type="line">
-          TAG
-        </TAG>
-        <TAG size="md" shape="rect" variant="primary" type="line">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="rect" variant="primary" type="line">
-          TAG
-        </TAG>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="pill" variant="primary" type="line">
-          TAG
-        </TAG>
-        <TAG size="md" shape="pill" variant="primary" type="line">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="pill" variant="primary" type="line">
-          TAG
-        </TAG>
-      </div>
-      <span style={{ color: "white", fontSize: "12px" }}>Secondary</span>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="rect" variant="secondary" type="solid">
-          TAG
-        </TAG>
-        <TAG size="md" shape="rect" variant="secondary" type="solid">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="rect" variant="secondary" type="solid">
-          TAG
-        </TAG>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="pill" variant="secondary" type="solid">
-          TAG
-        </TAG>
-        <TAG size="md" shape="pill" variant="secondary" type="solid">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="pill" variant="secondary" type="solid">
-          TAG
-        </TAG>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="rect" variant="secondary" type="line">
-          TAG
-        </TAG>
-        <TAG size="md" shape="rect" variant="secondary" type="line">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="rect" variant="secondary" type="line">
-          TAG
-        </TAG>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "3px",
-        }}
-      >
-        <TAG size="sm" shape="pill" variant="secondary" type="line">
-          TAG
-        </TAG>
-        <TAG size="md" shape="pill" variant="secondary" type="line">
-          TAG
-        </TAG>
-        <TAG size="lg" shape="pill" variant="secondary" type="line">
-          TAG
-        </TAG>
-      </div>
-    </div>
+    <>
+      <Test text="Test Component" size="big" color="blue" />
+      <TextField<string>
+        placeholder="Placeholder..."
+        required
+        labelText="Label"
+        descriptionText="description"
+        validationFn={inputValidation}
+        value={input}
+        onChange={handleInputChange}
+      />
+      <TextArea
+        placeholder="Placeholder..."
+        required
+        labelText="Label"
+        descriptionText="description"
+        validationFn={textareaValidation}
+        value={textarea}
+        onChange={handleTextareaChange}
+        onSubmit={handleTextareaSubmit}
+        maxLength={300}
+      />
+      <SearchField
+        placeholder="Placeholder..."
+        value={search}
+        onChange={handleSearchChange}
+        onSubmit={handleSearchSubmit}
+        onReset={handleSearchReset}
+      />
+    </>
   );
 }
 

From dc9940efe8c6b74b953cbb9fd8f9e9f9d0bc35e7 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 2 Jun 2024 15:11:55 +0900
Subject: [PATCH 06/10] =?UTF-8?q?fix:=20index=20=ED=99=95=EC=9E=A5?=
 =?UTF-8?q?=EC=9E=90=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Tag/{index.ts => index.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/ui/Tag/{index.ts => index.tsx} (100%)

diff --git a/packages/ui/Tag/index.ts b/packages/ui/Tag/index.tsx
similarity index 100%
rename from packages/ui/Tag/index.ts
rename to packages/ui/Tag/index.tsx

From f014b4b0ec6b2073ad51aab5db04af984c5bcdc3 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sun, 2 Jun 2024 15:28:25 +0900
Subject: [PATCH 07/10] =?UTF-8?q?fix:=20border=20->=20boxShadow=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Tag/constants.ts | 12 ++++++------
 packages/ui/Tag/style.css.ts |  2 +-
 packages/ui/Tag/utils.ts     |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/ui/Tag/constants.ts b/packages/ui/Tag/constants.ts
index 4f2fd51..ff699e0 100644
--- a/packages/ui/Tag/constants.ts
+++ b/packages/ui/Tag/constants.ts
@@ -10,18 +10,18 @@ export const bgColors: Record<TagBgColorTheme, string> = {
   "default-solid": theme.colors.gray700,
   "primary-solid": theme.colors.orangeAlpha200,
   "secondary-solid": theme.colors.blueAlpha200,
-  "default-line": "none",
-  "primary-line": "none",
-  "secondary-line": "none",
+  "default-line": "unset",
+  "primary-line": "unset",
+  "secondary-line": "unset",
 };
 
 export const borders: Record<TagBgColorTheme, string> = {
   "default-solid": "none",
   "primary-solid": "none",
   "secondary-solid": "none",
-  "default-line": `1px solid ${theme.colors.gray300}`,
-  "primary-line": `1px solid ${theme.colors.orange700}`,
-  "secondary-line": `1px solid ${theme.colors.blue700}`,
+  "default-line": `0 0 0 1px ${theme.colors.gray300} inset`,
+  "primary-line": `0 0 0 1px ${theme.colors.orange700} inset`,
+  "secondary-line": `0 0 0 1px ${theme.colors.blue700} inset`,
 };
 
 export const textColors: Record<TagVariantTheme, string> = {
diff --git a/packages/ui/Tag/style.css.ts b/packages/ui/Tag/style.css.ts
index af9e58f..7f5969e 100644
--- a/packages/ui/Tag/style.css.ts
+++ b/packages/ui/Tag/style.css.ts
@@ -20,7 +20,7 @@ export const root = style({
 const sprinkleProperties = defineProperties({
   properties: {
     backgroundColor: bgColors,
-    border: borders,
+    boxShadow: borders,
     color: textColors,
     borderRadius: borderRadiuses,
     padding: paddings,
diff --git a/packages/ui/Tag/utils.ts b/packages/ui/Tag/utils.ts
index 96017e4..cfa73e4 100644
--- a/packages/ui/Tag/utils.ts
+++ b/packages/ui/Tag/utils.ts
@@ -14,7 +14,7 @@ function createTagStyle(
 ) {
   return sprinkles({
     backgroundColor: `${variantTheme}-${typeTheme}`,
-    border: `${variantTheme}-${typeTheme}`,
+    boxShadow: `${variantTheme}-${typeTheme}`,
     color: variantTheme,
     borderRadius: shapeTheme,
     padding: sizeTheme,

From 39c614bb681b9c1fb9c3086e9212dbfbc682fc1a Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 8 Jun 2024 16:57:51 +0900
Subject: [PATCH 08/10] =?UTF-8?q?docs:=20storybook=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 8cd806e..4f9a4d1 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -8,6 +8,7 @@ export type { DialogOptionType } from "./Dialog";
 export { ToastProvider, useToast, Toast } from "./Toast";
 export type { ToastOptionType } from "./Toast";
 export { TextField, TextArea, SearchField } from './Input';
+export { default as Tag } from "./Tag";
 
 // test component
 export { default as Test } from "./Test";

From e1de3d8b38eb572715a87b6e1a4bb488bdfd9344 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 8 Jun 2024 17:38:43 +0900
Subject: [PATCH 09/10] =?UTF-8?q?fix:=20Tag=20children=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20span=ED=83=9C=EA=B7=B8=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Tag/Tag.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/Tag/Tag.tsx b/packages/ui/Tag/Tag.tsx
index 2b2af67..92383ff 100644
--- a/packages/ui/Tag/Tag.tsx
+++ b/packages/ui/Tag/Tag.tsx
@@ -19,7 +19,7 @@ function Tag({
   const style = createTagStyle(type, variant, shape, size);
   return (
     <div className={`${S.root} ${style}`}>
-      <span>{children}</span>
+      {children}
     </div>
   );
 }

From da6bacdf61c0ae241e53549d709e9266e84ed18f Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 8 Jun 2024 19:13:06 +0900
Subject: [PATCH 10/10] =?UTF-8?q?fix:=20children=EC=9D=84=20string?=
 =?UTF-8?q?=EB=A7=8C=20=ED=97=88=EC=9A=A9=ED=95=98=EA=B3=A0,=20Tag=20?=
 =?UTF-8?q?=EC=9E=90=EC=B2=B4=EB=A5=BC=20span=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/stories/Tag.stories.tsx | 42 +++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 apps/docs/src/stories/Tag.stories.tsx

diff --git a/apps/docs/src/stories/Tag.stories.tsx b/apps/docs/src/stories/Tag.stories.tsx
new file mode 100644
index 0000000..2bd216c
--- /dev/null
+++ b/apps/docs/src/stories/Tag.stories.tsx
@@ -0,0 +1,42 @@
+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 };
+
+export default {
+  title: "Components/Tag",
+  component: Tag,
+  tags: ["autodocs"],
+} as Meta<TagStoryProps>;
+
+// 기본 태그 스토리
+export const Default: StoryObj<TagStoryProps> = {
+  args: {
+    children: "Default Tag",
+    size: "sm",
+    shape: "rect",
+    variant: "default",
+    type: "solid",
+  },
+};
+
+// 커스텀 버튼 스토리
+export const Another: StoryObj<TagStoryProps> = {
+  args: {
+    children: "Another Tag",
+    size: "md",
+    shape: "pill",
+    variant: "primary",
+    type: "line",
+  },
+};