storybook 사용방법 2

• 전달 인자를 직접 받으면서, Styled Components를 사용해서 만든 컴포넌트를 스토리로 만들기
  (주의사항) 만들기 전에 Styled Components 설치하기!

npm install --save styled-components

1. Buttons.js 만들기

import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
    // props.color가 있으면 props.color를, 그렇지 않으면 흰색을 배경색으로 사용합니다.
    background: ${ (props) => props.color || "white"};
    // props.size가 "big"이면 200px를, 그렇지 않으면 100px를 너비로 사용합니다.
    width: ${ (props) => (props.size === "big" ? "200px" : "100px")};
    // props.size가 "big"이면 80px를, 그렇지 않으면 4px를 높이로 사용합니다.
    height: ${ (props) => (props.size === "big" ? "80px" : "40px")};
    font-size: 40px;
    color: ${(props)=> (props.textColor || "black")};
    `

const Button = ({color, size, textColor, text}) => (

    //위에서 작성한 props + text를 받아 textContent로 사용합니다.
    <StyledButton color={color} size={size} textColor={textColor} >{text}</StyledButton>
);

export default Button;

2. Button.stories.js 만들기

// 컴포넌트를 불러옵니다.
import 내가정한 from "./Buttons";

export default {
    title: "Practice/ButtonButton",
    component: 내가정한,

    //이번에 작성한 전달인자의 타입은 Storybook을 보고 직접 확인해보자.
    argTypes: {
        color: { control: 'color'},
        size: {control: {type:'radio', options: ['big', 'small']}},
        text: {control: 'text'},
        textColor: {control: 'color'}
    }
};

export const StorybookButton = (args) => (
    <내가정한 {...args}></내가정한>
)