Toggle size prop 추가

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bbodek-ui",
-  "version": "0.0.203",
+  "version": "0.0.209",
   "type": "module",
   "author": "Bbodek",
   "license": "MIT",

src/core/components/FormLabel/index.tsx

@@ -1,18 +1,23 @@
 import { forwardRef } from "react";
+
+import { THEME_COLOR } from "@/constants/color";
+import { THEME_TYPOGRAPHY } from "@/constants/typography";
+import { ThemeColors, ThemeTypography } from "@/types";
 import Typography from "../Typography";
 import { FormLabelProps } from "./types";
 
 const FormLabel = forwardRef((
     {
-      labelColor = "gray-06",
+      labelTheme = THEME_TYPOGRAPHY["BODY_02_MEDIUM"] as ThemeTypography,
+      labelColor = THEME_COLOR["GRAY_06"] as ThemeColors,
       label,
       required,
       labelSubText,
     }: FormLabelProps,
     ref: React.Ref<HTMLDivElement>,
   ) => {
   return (
-    <div ref = {ref} className = {`flex text-${labelColor} text-body-02-medium`}>
+    <div ref = {ref} className = {`flex text-${labelColor} text-${labelTheme}`}>
       {label}
       {required && <span className = "ml-0.5 text-primary-03">*</span>}
       {labelSubText && <Typography className = "ml-3" theme = "body-02-regular" text = {labelSubText} color = "error"/>}

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

@@ -1,7 +1,8 @@
-import { ThemeColors } from "@/types";
+import { ThemeColors, ThemeTypography } from "@/types";
 import { InputHTMLAttributes } from "react";
 
 export interface FormLabelProps {
+  labelTheme?: ThemeTypography;
   labelColor?: ThemeColors;
   label: string;
   required?: InputHTMLAttributes<HTMLInputElement>["required"];

src/core/components/Toggle/Toggle.stories.tsx

@@ -1,12 +1,12 @@
 import { Meta } from "@storybook/react";
 
 import Toggle from "../Toggle/index";
+import { SIZE } from "./constants";
 import { ToggleProps } from "./types";
 
 const meta = {
     title: "core/Toggle",
     component: Toggle,
-    tags: ["autodocs"],
     argTypes: {
       label: {
           control: "text",
@@ -34,7 +34,7 @@ const meta = {
 export default meta;
 
 export const Default = (props: ToggleProps) => {
-  const { label, ...rest } = props;
+  const { label, size, ...rest } = props;
 
-  return <Toggle label = {label || "토글"} {...rest}/>;
+  return <Toggle size = {size || SIZE["SMALL"]} label = {label || "토글"} {...rest}/>;
 };

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

@@ -0,0 +1,20 @@
+import { SizeType } from "../types";
+
+export const SIZE = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+} as const;
+
+export const TOGGLE_CIRCLE_SIZE = {
+  [SIZE.SMALL]: "w-[1.25rem] h-[1.25rem]",
+  [SIZE.MEDIUM]: "w-[1.5rem] h-[1.5rem]",
+  [SIZE.LARGE]: "w-[1.75rem] h-[1.75rem]",
+};
+
+export const TOGGLE_SIZE: Record<SizeType, string> = {
+  [SIZE.SMALL]: "w-[2.5rem] h-[1.5rem] peer-checked:[&>.circle]:translate-x-[calc(2.5rem-1.25rem)]",
+  [SIZE.MEDIUM]: "w-[3rem] h-[1.75rem] peer-checked:[&>.circle]:translate-x-[calc(3rem-1.5rem)]",
+  [SIZE.LARGE]: "w-[3.5rem] h-[2rem] peer-checked:[&>.circle]:translate-x-[calc(3.5rem-1.75rem)]",
+};
+

src/core/components/Toggle/index.tsx

@@ -2,15 +2,18 @@ import clsx from "clsx";
 import { useId } from "react";
 
 import FormLabel from "../FormLabel";
+import { TOGGLE_CIRCLE_SIZE, TOGGLE_SIZE } from "./constants";
 import { ToggleProps } from "./types";
 
 const Toggle = ({
+  size,
   label,
   className,
   onChange,
   checked,
   disabled = false,
   reverse = false,
+  labelTheme,
   labelColor,
   required,
 }: ToggleProps) => {
@@ -24,7 +27,7 @@ const Toggle = ({
         className,
       )}
     >
-      <FormLabel label = {label} labelColor = {labelColor} required = {required} />
+      <FormLabel labelTheme = {labelTheme} label = {label} labelColor = {labelColor} required = {required} />
       <label htmlFor = {id}>
         <input
           id = {id}
@@ -34,12 +37,23 @@ const Toggle = ({
           onChange = {onChange}
           disabled = {disabled}
         />
-        <div className = 'relative h-[2rem] w-[3.5rem] cursor-pointer rounded-full bg-gray-03 transition-all peer-disabled:bg-gray-09 peer-checked:bg-primary-03 peer-checked:[&>.circle]:-left-[0.125rem] peer-checked:[&>.circle]:translate-x-full peer-disabled:cursor-not-allowed'>
-          <div className = 'circle absolute left-[0.125rem] top-1/2 h-[1.75rem] w-[1.75rem] -translate-y-1/2 translate-x-0 transform rounded-full border border-solid border-gray-03 bg-white transition-all' />
+        <div
+          className = {clsx(
+            "relative cursor-pointer rounded-full bg-gray-03 transition-all peer-disabled:bg-gray-09 peer-checked:bg-primary-03 peer-checked:[&>.circle]:-left-[0.125rem] peer-disabled:cursor-not-allowed",
+            TOGGLE_SIZE[size],
+          )
+        }>
+          <div
+            className = {clsx(
+              "circle absolute left-[0.125rem] top-1/2 -translate-y-1/2 translate-x-0 transform rounded-full border border-solid border-gray-03 bg-white transition-all",
+              TOGGLE_CIRCLE_SIZE[size],
+            )}
+          />
         </div>
       </label>
     </div>
   );
 };
 
 export default Toggle;
+

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

@@ -1,10 +1,14 @@
 import { FormLabelProps } from "../../FormLabel/types";
+import { SIZE } from "../constants";
 
 export interface ToggleProps
   extends Pick<
     React.InputHTMLAttributes<HTMLInputElement>,
     "onChange" | "className" | "checked" | "disabled"
   >, Omit<FormLabelProps, "label" | "labelSubText"> {
+  size: SizeType;
   label: string;
   reverse?: boolean;
 }
+
+export type SizeType = typeof SIZE[keyof typeof SIZE];