npx create-react-app my-app

npx -p @storybook/cli sb init

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  // storybook에서 가져온 코드
  options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind
        ? 0
        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
};

import React from 'react';
// 해당 버튼 컴포넌트에 적용할 Button.css를 import로 연결
import './Button.css';

// 버튼 컴포넌트 구성
export const Button = ({ buttonstate, size, label, ...props }) => {
  // buttonstate : 버튼 상태 제어
  // size : 버튼 사이즈 제어
  // label : 버튼 내부 텍스트
  // ...props : 그 외 다양한 값 넘길 때
  return (
    <button type="button" className={`button ${buttonstate} ${size}`} {...props}>
      {label}
    </button>
  );
};

// 아무것도 설정하지 않았을 경우 default로 보이는 상태 값 설정
Button.defaultProps = {
  buttonstate: 'secondary',
  size: 'medium',
  onClick: undefined,
};

/* 버튼의 기본 스타일*/
.button {
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}
/*버튼의 상태별 스타일*/
.primary {
  color: white;
  background-color: #1ea7fd;
}
.secondary {
  color: #333;
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.danger {
  color: white;
  background-color: #e73124;
}
.small {
  font-size: 12px;
  padding: 10px 16px;
}
.medium {
  font-size: 14px;
  padding: 11px 20px;
}
.large {
  font-size: 16px;
  padding: 12px 24px;
}

import React from 'react';
// 스토리북에 노출할 컴포넌트를 import 해줍니다.
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

export const Primary = (args) => <Button buttonstate="primary" label="Primary"></Button>;
export const Secondary = (args) => (
  <Button buttonstate="secondary" label="Secondary"></Button>
);

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

// option 값을 args에 넣어 Button Template을 생성해줍니다.
// 반복적으로 사용하는 공통 스타일 코드의 경우 Template화 하면 좋겠죠.
const Template = (args) => <Button {...args} />;

// 각 버튼 스타일을 선언해주고 Template을 만든 것을 bind 해주어 연결시켜줍니다.
export const Primary = Template.bind({});
// 상태별로 적용해야 할 option 값을 설정해줍니다.
Primary.args = {
  buttonstate: 'primary',
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  // Secondary의 경우 Button.js 에 defaultProps로 기본값 설정을 해주었기에 primary는 선언하지 않았습니다.
  label: 'Button',
};

export const Danger = Template.bind({});
Danger.args = {
  buttonstate: 'danger',
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Large Button',
};

export const Medium = Template.bind({});
Medium.args = {
  // Medium도 마찬가지로 기본값 설정을 해주었기에 size는 선언하지 않았습니다.
  label: 'Medium Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Small Button',
};