[PEAUTY-42] 태그 컴포넌트 생성

src/components/global/Tag/Tag.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "./Tag";
+import { colors } from "../../../style/color";
+
+// Storybook 메타데이터 설정
+const meta: Meta<typeof Tag> = {
+  title: "Components/Tag", // Storybook에서의 위치
+  component: Tag,
+  parameters: {
+    layout: "centered", // 컴포넌트를 중앙에 배치
+  },
+  tags: ["autodocs"], // 자동 문서화 태그
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+// 기본 태그
+export const Default: Story = {
+  args: {
+    children: "기본 태그", // children으로 전달
+  },
+};
+
+// 커스텀 색상 태그
+export const CustomColorTag: Story = {
+  args: {
+    children: "커스텀 색상 태그", // children으로 전달
+    color: {
+      backgroundColor: colors.white,  // 황금색 배경
+      borderColor: colors.gray300,      // 주황색 테두리
+      fontColor: colors.gray300,        // 흰색 폰트
+    },
+  },
+};
+
+// 길이가 긴 태그
+export const LongTag: Story = {
+  args: {
+    children: "문자가 기이이이인 태그", // children으로 전달
+  },
+};

src/components/global/Tag/Tag.tsx

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import { colors } from "../../../style/color";
+import { typography } from "../../../style/typography";
+
+interface TagProps {
+  // tagName은 이제 children으로 대체됩니다.
+  color?: {
+    backgroundColor?: string;
+    borderColor?: string;
+    fontColor?: string;
+  };
+}
+
+const TagWrapper = styled.div<TagProps>`
+  color: ${({ color }) => color?.fontColor || colors.blue200}; /* 폰트 색상 */
+  border: 1px solid ${({ color }) => color?.borderColor || colors.blue200}; /* border 색상 */
+  border-radius: 5px;
+  background-color: ${({ color }) => color?.backgroundColor || colors.blue100}; /* 배경 색상 */
+  font-size: ${typography.body6};
+  padding: 3px 10px;
+  font-weight: 500;
+`;
+
+export function Tag({ children, color }: React.PropsWithChildren<TagProps>) {
+  return <TagWrapper color={color}>{children}</TagWrapper>;
+}