Label props, style 변경

src/core/components/Label/Label.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta } from "@storybook/react";
 
+import { Info } from "@phosphor-icons/react";
 import Label from "./index";
 import { LabelProps } from "./types";
 
@@ -12,20 +13,10 @@ const meta = {
       options: [ "primary", "error", "border" ],
       description: "Label Variants",
     },
-    height: {
+    size: {
       control: "select",
-      options: [ "h-44", "h-40", "h-29" ],
-      description: "Label Height",
-    },
-    theme: {
-      control: "select",
-      options: [ "body-01-bold", "body-02-bold" ],
-      description: "Label Typography Theme",
-    },
-    rounded: {
-      control: "select",
-      options: [ "rounded-12", "rounded-8" ],
-      description: "Label Rounded Size",
+      options: [ "small", "medium", "large" ],
+      description: "Label Size",
     },
     label: {
       control: "text",
@@ -40,11 +31,9 @@ export const Primary = (props: LabelProps) => {
   return (
     <Label
       variants = {props.variants ?? "primary"}
-      height = {props.height ?? "h-44"}
-      rounded = {props.rounded ?? "rounded-12"}
-      label = {props.label ?? "Label"}
-      theme = {props.theme ?? "body-01-bold"}
-      className = "w-[15rem]"
+      size = "small"
+      label = {props.label ?? "label"}
+      icon = {<Info />}
     />
   );
 };
@@ -53,24 +42,40 @@ export const Error = (props: LabelProps) => {
   return (
     <Label
       variants = {props.variants ?? "error"}
-      height = {props.height ?? "h-44"}
-      rounded = {props.rounded ?? "rounded-12"}
-      label = {props.label ?? "Label"}
-      theme = {props.theme ?? "body-01-bold"}
-      className = "w-[15rem]"
+      size = "medium"
+      label = {props.label ?? "label"}
+      icon = {<Info />}
+    />
+  );
+};
+
+export const Success = (props: LabelProps) => {
+  return (
+    <Label
+      variants = {props.variants ?? "success"}
+      size = "large"
+      label = {props.label ?? "label"}
+      icon = {<Info />}
+    />
+  );
+};
+
+export const Warning = (props: LabelProps) => {
+  return (
+    <Label
+      variants = {props.variants ?? "warning"}
+      size = "small"
+      label = {props.label ?? "label"}
     />
   );
 };
 
-export const Border = (props: LabelProps) => {
+export const Secondary = (props: LabelProps) => {
   return (
     <Label
-      variants = {props.variants ?? "border"}
-      height = {props.height ?? "h-44"}
-      rounded = {props.rounded ?? "rounded-12"}
-      label = {props.label ?? "Label"}
-      theme = {props.theme ?? "body-01-bold"}
-      className = "w-[15rem]"
+      variants = {props.variants ?? "secondary"}
+      size = "small"
+      label = {props.label ?? "label"}
     />
   );
 };

src/core/components/Label/constants/index.ts

@@ -1,35 +1,29 @@
-import { RoundedType, SizeType, VariantsType } from "../types";
+import { SizeType, VariantsType } from "../types";
 
 export const VARIANTS = {
   PRIMARY: "primary",
   ERROR: "error",
-  BORDER: "border",
+  WARNING: "warning",
+  SUCCESS: "success",
+  SECONDARY: "secondary",
 } as const;
 
 export const SIZE = {
-  SIZE_44: "h-44",
-  SIZE_40: "h-40",
-  SIZE_29: "h-29",
-} as const;
-
-export const ROUNDED = {
-  ROUNDED_12: "rounded-12",
-  ROUNDED_8: "rounded-8",
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
 } as const;
 
 export const LABEL_VARIANTS: Record<VariantsType, string> = {
   [VARIANTS.PRIMARY]: "bg-primary-00 text-primary-03",
-  [VARIANTS.ERROR]: "bg-[#ff526033] text-error",
-  [VARIANTS.BORDER]: "bg-transparent text-primary-03 border border-primary-01",
+  [VARIANTS.ERROR]: "bg-rose-100 text-rose-500",
+  [VARIANTS.WARNING]: "bg-amber-100 text-amber-500",
+  [VARIANTS.SUCCESS]: "bg-green-100 text-green-500",
+  [VARIANTS.SECONDARY]: "bg-gray-02 text-gray-06",
 };
 
 export const LABEL_SIZE: Record<SizeType, string> = {
-  [SIZE.SIZE_44]: "h-11 py-2.5",
-  [SIZE.SIZE_40]: "h-10 py-2",
-  [SIZE.SIZE_29]: "h-[1.8125rem] py-1",
-};
-
-export const LABEL_ROUNDED: Record<RoundedType, string> = {
-  [ROUNDED.ROUNDED_12]: "rounded-xl",
-  [ROUNDED.ROUNDED_8]: "rounded-lg",
+  [SIZE.SMALL]: "text-body-03-regular px-1.5 py-0.5 rounded-md",
+  [SIZE.MEDIUM]: "text-body-02-regular px-2 py-1 rounded-md",
+  [SIZE.LARGE]: "text-body-01-regular px-2 py-1 rounded-lg",
 };

src/core/components/Label/index.tsx

@@ -1,17 +1,15 @@
 import clsx from "clsx";
 import { forwardRef } from "react";
 
-import { THEME_TYPOGRAPHY } from "@/constants/typography";
-import { LABEL_ROUNDED, LABEL_SIZE, LABEL_VARIANTS } from "./constants";
-import { LabelProps, ThemeType } from "./types";
+import { LABEL_SIZE, LABEL_VARIANTS } from "./constants";
+import { LabelProps } from "./types";
 
 const Label = forwardRef((
   {
     variants,
-    height,
-    theme = THEME_TYPOGRAPHY["BODY_01_BOLD"] as ThemeType,
-    rounded,
+    size,
     label,
+    icon,
     ...props
   }: LabelProps,
   ref: React.Ref<HTMLDivElement>,
@@ -23,15 +21,15 @@ const Label = forwardRef((
       ref = {ref}
       className = {
         clsx(
-          `flex items-center justify-center text-${theme}`,
+          "flex items-center gap-1 justify-center",
           LABEL_VARIANTS[variants],
-          LABEL_SIZE[height],
-          LABEL_ROUNDED[rounded],
+          LABEL_SIZE[size],
           className,
         )
       }
       {...rest}
     >
+      {icon && icon}
       {label}
     </div>
   );

src/core/components/Label/types/index.ts

@@ -1,20 +1,14 @@
-import { ThemeTypography } from "@/types";
 import { HTMLAttributes } from "react";
 
-import { ROUNDED, SIZE, VARIANTS } from "../constants";
+import { SIZE, VARIANTS } from "../constants";
 
 export type VariantsType = typeof VARIANTS[keyof typeof VARIANTS];
 
 export type SizeType = typeof SIZE[keyof typeof SIZE];
 
-export type RoundedType = typeof ROUNDED[keyof typeof ROUNDED];
-
-export type ThemeType = Extract<ThemeTypography, "body-01-bold" | "body-02-bold">;
-
 export interface LabelProps extends HTMLAttributes<HTMLDivElement>{
   variants: VariantsType
-  height: SizeType
-  theme?: ThemeType
-  rounded: RoundedType
+  size: SizeType
   label: string
+  icon?: React.ReactNode
 }