[Feat/#24] Tag 컴포넌트 제작

src/components/ui/Tag/Tag.module.scss

@@ -0,0 +1,46 @@
+.Tag {
+  border-radius: 0.75rem;
+  height: 2.5rem;
+  background-color: var(--color-white);
+
+  &.Selected {
+    background-color: var(--color-gray600);
+  }
+
+  &.style-primary {
+    width: fit-content;
+    padding: 0.5rem 0.875rem;
+  }
+
+  &.style-add {
+    width: 2.5rem;
+    padding: 0.625rem;
+  }
+
+  & > span {
+    line-height: 1.5rem;
+  }
+
+  & > svg > path {
+    fill: var(--color-gray500);
+  }
+}
+
+.TagStory {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .Wrapper {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    width: 300px;
+  }
+
+  .Text {
+    font-size: 1.125rem;
+    width: 120px;
+  }
+}

src/components/ui/Tag/Tag.stories.tsx

@@ -0,0 +1,44 @@
+import Tag from "@/components/ui/Tag/Tag";
+import styles from "@/components/ui/Tag/Tag.module.scss";
+import type { TagProps } from "@/components/ui/Tag/Tag.types";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Tag> = {
+  title: "Example/Tag",
+  component: Tag,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["!autodocs"],
+};
+
+export default meta;
+
+export const Primary: StoryObj<TagProps> = {
+  args: {
+    text: "태그",
+    variant: "primary",
+    isSelect: false,
+  },
+};
+
+export const VariantProps: StoryObj<typeof Tag> = {
+  render: () => (
+    <div className={styles.TagStory}>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>primary</p>
+        <Tag variant="primary" text="primary" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>add</p>
+
+        <Tag variant="add" text="add" />
+      </div>
+      <div className={styles.Wrapper}>
+        <p className={styles.Text}>isSelect</p>
+        <Tag variant="primary" text="isSelect" isSelect />
+      </div>
+    </div>
+  ),
+};

src/components/ui/Tag/Tag.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from "react";
+
+import classNames from "classnames";
+
+import Icon from "@/components/ui/Icon/Icon";
+import styles from "@/components/ui/Tag/Tag.module.scss";
+import type { TagProps } from "@/components/ui/Tag/Tag.types";
+import Text from "@/components/ui/Text/Text";
+
+const Tag = forwardRef<HTMLDivElement, TagProps>(
+  ({ variant = "primary", text, isSelect, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={classNames(
+          styles.Tag,
+          styles[`style-${variant}`],
+          { [styles.Selected]: isSelect },
+          className,
+        )}
+        {...props}
+      >
+        {variant === "primary" && (
+          <Text variant="bodyM" color={isSelect ? "white" : "secondary"}>
+            {text}
+          </Text>
+        )}
+
+        {variant === "add" && <Icon name="plus" />}
+      </div>
+    );
+  },
+);
+
+export default Tag;

src/components/ui/Tag/Tag.types.ts

@@ -0,0 +1,7 @@
+type TagVariant = "primary" | "add";
+
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+  text?: string;
+  variant?: TagVariant;
+  isSelect?: boolean;
+}