feat: tag 컴포넌트 제작

Author: sikkzz

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

@@ -0,0 +1,27 @@
+.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);
+  }
+}

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;
+}