Merge pull request #103 from sopt-makers/feat/storybook

[DOCS] storybook 수정 + UI 컴포넌트 오류 수정

apps/docs/src/stories/Button.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@sopt-makers/ui';
+import { IconPlus, IconChevronRight } from '@sopt-makers/icons';
 
 interface ButtonOwnProps {
   size?: 'sm' | 'md' | 'lg';
@@ -16,6 +17,13 @@ export default {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    theme: { control: 'radio', options: ['white', 'black', 'blue', 'red'] },
+    rounded: { control: 'radio', options: ['md', 'lg'] },
+    LeftIcon: { control: false },
+    RightIcon: { control: false }
+  }
 } as Meta<ButtonStoryProps>;
 
 // 기본 버튼 스토리
@@ -30,22 +38,24 @@ export const Default: StoryObj<ButtonStoryProps> = {
 };
 
 // 커스텀 버튼 스토리
-export const Another: StoryObj<ButtonStoryProps> = {
+export const LeftIcon: StoryObj<ButtonStoryProps> = {
   args: {
-    children: 'Another Button',
-    size: 'lg',
+    children: 'LeftIcon Button',
+    size: 'sm',
     theme: 'red',
     rounded: 'lg',
     disabled: false,
+    LeftIcon: IconPlus,
   },
 };
 
-export const Disabled: StoryObj<ButtonStoryProps> = {
+export const RightIcon: StoryObj<ButtonStoryProps> = {
   args: {
-    children: 'Disabled Button',
-    size: 'md',
+    children: 'RightIcon Button',
+    size: 'lg',
     theme: 'blue',
     rounded: 'lg',
-    disabled: true,
+    disabled: false,
+    RightIcon: IconChevronRight,
   },
 };

apps/docs/src/stories/Callout.stories.tsx

@@ -14,6 +14,9 @@ export default {
   title: "Components/Callout",
   component: Callout,
   tags: ["autodocs"],
+  argTypes: {
+    type: { control: 'radio', options: ['danger', 'information', 'warning'] },
+  }
 } as Meta<CalloutProps>;
 
 // danger 콜아웃 스토리

apps/docs/src/stories/CheckBox.stories.tsx

@@ -5,6 +5,11 @@ const meta = {
   title: "Components/Control/CheckBox",
   component: CheckBox,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+    label: { control: 'text' },
+    color: { control: 'color' },
+  }
 } as Meta<typeof CheckBox>;
 
 export default meta;

apps/docs/src/stories/Chip.stories.tsx

@@ -16,6 +16,12 @@ export default {
   title: 'Components/Chip',
   component: Chip,
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'md'] },
+    iconColor: { control: 'color' },
+    LeftIcon: { control: false },
+    RightIcon: { control: false },
+  }
 } as Meta<ChipStoryProps>;
 
 // 기본 chip 스토리

apps/docs/src/stories/Radio.stories.tsx

@@ -5,6 +5,11 @@ const meta = {
   title: "Components/Control/Radio",
   component: Radio,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+    label: { control: 'text' },
+    color: { control: 'color' },
+  }
 } as Meta<typeof Radio>;
 
 export default meta;

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

@@ -17,6 +17,12 @@ export default {
   title: "Components/Tag",
   component: Tag,
   tags: ["autodocs"],
+  argTypes: {
+    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'] },
+  }
 } as Meta<TagStoryProps>;
 
 // 기본 태그 스토리
@@ -29,14 +35,3 @@ export const Default: StoryObj<TagStoryProps> = {
     type: "solid",
   },
 };
-
-// 커스텀 버튼 스토리
-export const Another: StoryObj<TagStoryProps> = {
-  args: {
-    children: "Another Tag",
-    size: "md",
-    shape: "pill",
-    variant: "primary",
-    type: "line",
-  },
-};

apps/docs/src/stories/Toggle.stories.tsx

@@ -5,6 +5,9 @@ const meta = {
   title: "Components/Control/Toggle",
   component: Toggle,
   tags: ["autodocs"],
+  argTypes: {
+    size: { control: 'radio', options: ['sm', 'lg'] },
+  }
 } as Meta<typeof Toggle>;
 
 export default meta;

packages/ui/Button/Button.tsx

@@ -1,8 +1,9 @@
 import React, { type ButtonHTMLAttributes } from 'react';
 import * as S from './style.css';
 import createButtonVariant from './utils';
+import { iconSizes } from './constants';
 
-interface IconProps { color?: string }
+interface IconProps { color?: string, width: number, height: number }
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
@@ -25,14 +26,15 @@ function Button({
   ...buttonElementProps
 }: ButtonProps) {
   const variant = createButtonVariant(theme, rounded, size);
+  const iconSize = iconSizes[size];
   return (
     <button className={`${S.root} ${variant} ${className}`}
       type="button"
       {...buttonElementProps}
     >
-      {LeftIcon ? <LeftIcon /> : null}
+      {LeftIcon ? <LeftIcon height={iconSize} width={iconSize} /> : null}
       <span>{children}</span>
-      {RightIcon ? <RightIcon /> : null}
+      {(RightIcon && !LeftIcon) ? <RightIcon height={iconSize} width={iconSize} /> : null}
     </button>
   );
 }

packages/ui/Button/constants.ts

@@ -1,52 +1,53 @@
-import theme from '../theme.css';
-import type {
-  ButtonColorTheme,
-  ButtonColorThemeWithStatus,
-  ButtonSizeTheme,
-} from './types';
+import theme from "../theme.css";
+import type { ButtonColorTheme, ButtonColorThemeWithStatus, ButtonSizeTheme } from "./types";
 
 export const bgColors: Record<ButtonColorThemeWithStatus, string> = {
-  'white-default': theme.colors.white,
-  'black-default': theme.colors.gray700,
-  'blue-default': theme.colors.success,
-  'red-default': theme.colors.error,
-  'white-hover': theme.colors.gray50,
-  'black-hover': theme.colors.gray600,
-  'blue-hover': theme.colors.blue500,
-  'red-hover': theme.colors.red500,
-  'white-press': theme.colors.gray100,
-  'black-press': theme.colors.gray500,
-  'blue-press': theme.colors.blue600,
-  'red-press': theme.colors.red600,
+  "white-default": theme.colors.white,
+  "black-default": theme.colors.gray700,
+  "blue-default": theme.colors.success,
+  "red-default": theme.colors.error,
+  "white-hover": theme.colors.gray50,
+  "black-hover": theme.colors.gray600,
+  "blue-hover": theme.colors.blue500,
+  "red-hover": theme.colors.red500,
+  "white-press": theme.colors.gray100,
+  "black-press": theme.colors.gray500,
+  "blue-press": theme.colors.blue600,
+  "red-press": theme.colors.red600,
 };
 
 export const textColors = {
   light: theme.colors.white,
   dark: theme.colors.gray800,
 };
 
-export const colorThemeToTextColor: Record<ButtonColorTheme, 'light' | 'dark'> =
-  {
-    white: 'dark',
-    black: 'light',
-    red: 'light',
-    blue: 'light',
-  };
+export const colorThemeToTextColor: Record<ButtonColorTheme, "light" | "dark"> = {
+  white: "dark",
+  black: "light",
+  red: "light",
+  blue: "light",
+};
 
 export const borderRadiuses: Record<ButtonSizeTheme, string> = {
-  sm: '8px',
-  md: '10px',
-  lg: '12px',
+  sm: "8px",
+  md: "10px",
+  lg: "12px",
 };
 
 export const paddings: Record<ButtonSizeTheme, string> = {
-  sm: '9px 14px',
-  md: '12px 20px',
-  lg: '16px 26px',
+  sm: "9px 14px",
+  md: "12px 20px",
+  lg: "16px 26px",
 };
 
 export const fontSizes: Record<ButtonSizeTheme, string> = {
-  sm: '14px',
-  md: '14px',
-  lg: '18px',
+  sm: "14px",
+  md: "14px",
+  lg: "18px",
+};
+
+export const iconSizes: Record<ButtonSizeTheme, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
 };

packages/ui/Control/CheckBox.tsx

@@ -1,34 +1,34 @@
 import type { InputHTMLAttributes } from "react";
 import { forwardRef } from "react";
 import { IconCheck } from "@sopt-makers/icons";
+import theme from "../theme.css";
 import {
   check,
   checkBox,
   checkBoxChecked,
   checkBoxInput,
   controlLabel,
   controlWrapper,
-  labelColor,
 } from "./style.css";
 
 export interface CheckBoxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   label?: string;
   size?: "sm" | "lg";
   checked?: boolean;
-  color?: "white";
+  color?: string;
 }
 
 const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
-  ({ checked = false, label, size = "sm", color = "white", ...props }, ref) => {
+  ({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => {
     return (
       <label className={controlWrapper}>
         <input className={checkBoxInput} ref={ref} type="checkbox" {...props} />
         <div className={`${checkBox[size]} ${checkBoxChecked[`${checked}`]}`}>
           {checked ? <IconCheck className={check[size]} /> : null}
         </div>
         {label ? (
-          <p className={`${controlLabel[size]} ${labelColor[color]}`}>label</p>
+          <p className={controlLabel[size]} style={{ color }}>{label}</p>
         ) : null}
       </label>
     );

packages/ui/Control/Radio.tsx

@@ -1,17 +1,18 @@
 import type { InputHTMLAttributes } from "react";
 import { forwardRef } from "react";
-import { controlLabel, controlWrapper, labelColor, radio } from "./style.css";
+import theme from "../theme.css";
+import { controlLabel, controlWrapper, radio } from "./style.css";
 
 export interface RadioProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   label?: string;
   size?: "sm" | "lg";
   checked?: boolean;
-  color?: "white";
+  color?: string;
 }
 
 const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ checked = false, label, size = "sm", color = "white", ...props }, ref) => {
+  ({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => {
     return (
       <label className={controlWrapper}>
         <input
@@ -22,7 +23,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
           {...props}
         />
         {label ? (
-          <p className={`${controlLabel[size]} ${labelColor[color]}`}>label</p>
+          <p className={controlLabel[size]} style={{ color }}>label</p>
         ) : null}
       </label>
     );

packages/ui/Control/style.css.ts

@@ -24,12 +24,6 @@ export const controlLabel = styleVariants({
   ],
 });
 
-export const labelColor = styleVariants({
-  white: {
-    color: theme.colors.gray10,
-  },
-});
-
 // Radio 관련 스타일링
 const radioBase = style({
   all: "unset",

packages/ui/Toast/parts/style.css.ts

@@ -7,7 +7,7 @@ const toastAnimation = keyframes({
 });
 
 export const root = style({
-  animation: `${toastAnimation} 4s`,
+  animation: `${toastAnimation} 3s`,
   animationFillMode: "forwards",
 
   display: "flex",
@@ -19,7 +19,7 @@ export const root = style({
   left: "calc(50% - 16px)",
   transform: "translateX(-50%)",
   transition: "transform .2s linear",
-  
+
   width: "var(--mds-toast-width, 380px)",
   margin: "0 16px",
   padding: "14px 16px",