[React] Story Book 사용법

파일구조

 

Button.tsx

export interface ButtonProps {

  label?: string;

  size?: 'sm' | 'md' | 'lg';

  backgroundColor?: string;

  color?: string;

  handleClick?: () => void;

}

export default function Button({

  label,

  backgroundColor,

  size,

  color,

  handleClick,

}: ButtonProps) {

  let scale = 1;

  if (size === 'sm') scale = 0.75;

  if (size === 'lg') scale = 1.5;

  const style = {

    backgroundColor,

    padding: `${scale * 0.5}rem ${scale * 1}rem`,

    border: 'none',

    color,

  };

  return (

    <button onClick={handleClick} style={style}>

      {label}

    </button>

  );

}

 

stories> Button.stories.tsx

import Button, { ButtonProps } from '../Button';

import type { Meta, StoryFn } from '@storybook/react';

export default {

  title: 'Button',

  component: Button,

  argTypes: { handleClick: { action: 'clicked' } },

} as Meta;

 

const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;

export const RedBtn = Template.bind({});

RedBtn.args = {

  label: 'Red',

  backgroundColor: 'red',

  size: 'md',

  color: 'white',

};

export const BlueBtn = Template.bind({});

BlueBtn.args = {

  label: 'Blue',

  backgroundColor: 'blue',

  size: 'md',

  color: 'white',

};

export const SmBtn = Template.bind({});

SmBtn.args = {

  label: 'Sm Btn',

  backgroundColor: 'gray',

  size: 'sm',

  color: 'white',

};

export const LgBtn = Template.bind({});

LgBtn.args = {

  label: 'Lg Btn',

  backgroundColor: 'gray',

  size: 'lg',

  color: 'white',

};

export const MainBtn = Template.bind({});

MainBtn.args = {

  label: 'Main Btn',

  backgroundColor: 'brown',

  size: 'md',

};

 

유튜브 개발같은소리하네