refactor(Tag): Tag 컴포넌트 type, icon 추가

apps/docs/src/stories/Tag.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Tag, TagProps } from '@sopt-makers/ui';
+import { IconLocationFilled } from '@sopt-makers/icons';
 
 export default {
   title: 'Components/Tag',
@@ -10,17 +11,29 @@ export default {
     size: { control: 'radio', options: ['sm', 'md', 'lg'] },
     shape: { control: 'radio', options: ['rect', 'pill'] },
     variant: { control: 'radio', options: ['default', 'primary', 'secondary'] },
-    type: { control: 'radio', options: ['solid', 'line'] },
+    type: { control: 'radio', options: ['solid', 'line', 'accent'] },
+    LeftIcon: { control: false },
   },
 } as Meta<TagProps>;
 
 // 기본 태그 스토리
 export const Default: StoryObj<TagProps> = {
   args: {
     children: 'Default Tag',
-    size: 'sm',
+    size: 'lg',
     shape: 'rect',
     variant: 'default',
     type: 'solid',
   },
 };
+
+// Primary Variant 스토리들
+export const LeftIcon: StoryObj<TagProps> = {
+  args: {
+    children: 'Tag w Icon',
+    size: 'lg',
+    variant: 'primary',
+    type: 'line',
+    LeftIcon: IconLocationFilled,
+  },
+};

packages/ui/Tag/Tag.tsx

@@ -1,22 +1,40 @@
 import { forwardRef, type HTMLAttributes } from 'react';
 import * as S from './style.css';
 import createTagStyle from './utils';
+import { iconSizes } from './constants';
 
+interface IconProps {
+  color?: string;
+  width: number;
+  height: number;
+}
 export interface TagProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   className?: string;
   size?: 'sm' | 'md' | 'lg';
   shape?: 'rect' | 'pill';
   variant?: 'default' | 'primary' | 'secondary';
-  type?: 'solid' | 'line';
+  type?: 'solid' | 'line' | 'accent';
+  LeftIcon?: React.ComponentType<IconProps>;
 }
 
 export const Tag = forwardRef<HTMLDivElement, TagProps>((props, forwardedRef) => {
-  const { children, className, size = 'sm', shape = 'rect', variant = 'default', type = 'solid', ...restProps } = props;
+  const {
+    children,
+    className,
+    size = 'sm',
+    shape = 'rect',
+    variant = 'default',
+    type = 'solid',
+    LeftIcon,
+    ...restProps
+  } = props;
   const style = createTagStyle(type, variant, shape, size);
+  const iconSize = iconSizes[size];
 
   return (
     <div className={`${S.root} ${style} ${className}`} ref={forwardedRef} {...restProps}>
+      {LeftIcon ? <LeftIcon height={iconSize} width={iconSize} /> : null}
       {children}
     </div>
   );

packages/ui/Tag/constants.ts

@@ -3,7 +3,6 @@ import type {
   TagBgColorTheme,
   TagShapeTheme,
   TagSizeTheme,
-  TagVariantTheme,
 } from "./types";
 
 export const bgColors: Record<TagBgColorTheme, string> = {
@@ -13,6 +12,9 @@ export const bgColors: Record<TagBgColorTheme, string> = {
   "default-line": "unset",
   "primary-line": "unset",
   "secondary-line": "unset",
+  "default-accent": theme.colors.gray10,
+  "primary-accent": theme.colors.secondary,
+  "secondary-accent": theme.colors.success,
 };
 
 export const borders: Record<TagBgColorTheme, string> = {
@@ -22,12 +24,21 @@ export const borders: Record<TagBgColorTheme, string> = {
   "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`,
+  "default-accent": "none",
+  "primary-accent": "none",
+  "secondary-accent": "none",
 };
 
-export const textColors: Record<TagVariantTheme, string> = {
-  default: theme.colors.gray10,
-  primary: theme.colors.secondary,
-  secondary: theme.colors.success,
+export const textColors: Record<TagBgColorTheme, string> = {
+  "default-solid": theme.colors.gray10,
+  "primary-solid": theme.colors.secondary,
+  "secondary-solid": theme.colors.success,
+  "default-line": theme.colors.gray10,
+  "primary-line": theme.colors.secondary,
+  "secondary-line": theme.colors.success,
+  "default-accent": theme.colors.gray950,
+  "primary-accent": theme.colors.gray950,
+  "secondary-accent": theme.colors.gray50,
 };
 
 export const borderRadiuses: Record<TagShapeTheme, string> = {
@@ -46,3 +57,9 @@ export const fonts = {
   md: theme.fontsObject.LABEL_3_14_SB,
   lg: theme.fontsObject.LABEL_2_16_SB,
 };
+
+export const iconSizes: Record<TagSizeTheme, number> = {
+  sm: 14,
+  md: 16,
+  lg: 18,
+};

packages/ui/Tag/style.css.ts

@@ -1,20 +1,14 @@
-import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
-import { style } from "@vanilla-extract/css";
-import {
-  bgColors,
-  borderRadiuses,
-  borders,
-  fonts,
-  paddings,
-  textColors,
-} from "./constants";
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
+import { style } from '@vanilla-extract/css';
+import { bgColors, borderRadiuses, borders, fonts, paddings, textColors } from './constants';
 
 export const root = style({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: "fit-content",
-  height: "fit-content",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 'fit-content',
+  height: 'fit-content',
+  gap: '4px',
 });
 
 const sprinkleProperties = defineProperties({

packages/ui/Tag/types.ts

@@ -4,6 +4,6 @@ export type TagShapeTheme = "rect" | "pill";
 
 export type TagVariantTheme = "default" | "primary" | "secondary";
 
-export type TagTypeTheme = "solid" | "line";
+export type TagTypeTheme = "solid" | "line" | "accent";
 
 export type TagBgColorTheme = `${TagVariantTheme}-${TagTypeTheme}`;

packages/ui/Tag/utils.ts

@@ -10,7 +10,7 @@ function createTagStyle(
   return sprinkles({
     backgroundColor: `${variantTheme}-${typeTheme}`,
     boxShadow: `${variantTheme}-${typeTheme}`,
-    color: variantTheme,
+    color: `${variantTheme}-${typeTheme}`,
     borderRadius: shapeTheme,
     padding: sizeTheme,
     fontStyle: sizeTheme,