design: Tag 컴포넌트 구현

Author: im-na0

src/components/tag/Tag.styles.ts

@@ -0,0 +1,47 @@
+import styled, { type DefaultTheme, css } from "styled-components";
+
+const getVariantStyle = (theme: DefaultTheme) => ({
+  outline: css`
+    background-color: ${theme.color.white};
+    color: ${theme.color.percentOrange};
+  `,
+});
+
+const getRadiusStyle = () => ({
+  rectangle: css`
+    border-radius: 8px;
+  `,
+  pill: css`
+    border-radius: 20px;
+  `,
+});
+
+type ButtonProps = {
+  variant: "outline";
+  $isTextOnly: boolean;
+  radius: "rectangle" | "pill";
+};
+
+export const StyledTag = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["variant", "radius"].includes(prop),
+})<ButtonProps>`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0.35rem 0.5rem;
+
+  ${({ theme }) => theme.typo.caption4};
+
+  border: 1px solid ${({ theme }) => theme.color.percentOrange};
+
+  ${({ theme, variant }) => getVariantStyle(theme)[variant]};
+  ${({ radius }) => getRadiusStyle()[radius]};
+
+  aspect-ratio: ${({ $isTextOnly }) => ($isTextOnly ? "1/1" : "auto")}};
+`;
+
+export const StyledIcon = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;

src/components/tag/Tag.tsx

@@ -0,0 +1,51 @@
+import type { ButtonHTMLAttributes, PropsWithChildren } from "react";
+
+import { StyledIcon, StyledTag } from "./Tag.styles";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  tag?: "span" | "button";
+  icon?: boolean;
+  variant?: "outline";
+  radius?: "rectangle" | "pill";
+}
+
+const Tag = ({
+  children,
+  tag = "span",
+  icon = true,
+  variant = "outline",
+  radius = "pill",
+  ...props
+}: PropsWithChildren<ButtonProps>) => {
+  const contentProps = {
+    icon,
+    children,
+  };
+
+  return (
+    <StyledTag
+      as={tag}
+      variant={variant}
+      radius={radius}
+      $isTextOnly={!icon}
+      {...props}
+    >
+      <ButtonContent {...contentProps} />
+    </StyledTag>
+  );
+};
+
+type ButtonContentProps = Pick<ButtonProps, "icon" | "children">;
+
+const ButtonContent = (props: ButtonContentProps) => {
+  const { icon, children } = props;
+
+  return (
+    <>
+      {icon && <StyledIcon>#</StyledIcon>}
+      {children}
+    </>
+  );
+};
+
+export default Tag;