[Storybook] 스토리북 mdx 기본틀 잡기

스토리북 공식문서에 정말 상세하게 잘 나오기는 했으나 필요한 기능을 찾아 조합하는 것은 좀 다른 문젠 것 같다. 가장 단순한 샘플 Button 컴포넌트를 예시로 기록해보겠다.

 

1. 버튼의 props 옵션 선택하는 기능 추가하기

import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs';
import BaseButton from 'common/components/input/BaseButton.vue';

<Meta
    title="Button"
    component={BaseButton}
    argTypes={{
        boxStyle: {
            name: 'Button Style',
            control: {
                type: 'select',
                options: ['block', 'inline-block'],
            },
        },
        theme: {
            name: 'Button Color',
            control: {
                type: 'radio',
                options: ['blue', 'sky', 'grey', 'red', 'pink', 'yellow'],
            },
        },
        size: {
            name: 'Button Size',
            control: {
                type: 'select',
                options: ['medium', 'semi-large', 'large'],
            },
        },
        onClick: {action: 'clicked'},
    }}
/>

Meta > argTypes에 옵션이름 > control > options 에 배열로 기존 컴포넌트에서 props로 넘겨받는 값들을 나열해서 넣어준다. control > type에 select로 지정하면 드롭다운이, radio로 지정하면 라디오 버튼으로 나온다. 라디오 버튼이 선택지를 모두 노출하기 때문에 개인적으로 라디오 버튼을 선호한다. 그렇게 하면 docs에 다음과 같이 나온다.

 

 

2. 클릭 이벤트 찍기

<Meta
    title="Button"
    component={BaseButton}
    argTypes={{
        // ...
        
        onClick: {action: 'clicked'},
    }}
/>

클릭 이벤트 찍는 방법은 다양한데, 그중에 공식문서에서 나오는 방법은 위와 같다. 이렇게 argTypes에 onClick을 작성해 주면 클릭 때마다 다음과 같이 나온다.

 

이 외에도 parameters에 어떤 엘리먼트를 클릭했는지 명확히 하는 방법도 있다. parameters > actions.handles에 'click'과 컴포넌트의 클래스를 작성해주는 방법이다.

<Meta
    // ...
    parameters={{
        actions: {
            handles: ['click .accept-btn'],
        },
    }}
/>

 

또 부모 컴포넌트에 emit 하는 함수를 action에 등록할 수도 있다. 그런데 이건 레거시라고 한다. 개인적으론 이게 더 컴포넌트에서 어떤 함수를 emit하고 있는지 명확히 할 수 있어서 더 좋아 보인다.  https://github.com/storybookjs/storybook/blob/master/addons/actions/ADVANCED.md 

export const Template = (args, {argTypes}) => ({
    components: {BaseConfirm},
    setup() {
        return {args, argTypes};
    },
    template: `<base-confirm v-bind="args" @click="accept" />`,
    methods: {
        accept: action('accept-clicked'),
    },
});

 

3. canvas 뷰포트 설정하기

 

preview.js에서 여러 종류의 viewport를 설정할 수 있다.

export const parameters = {
    viewport: {
        viewports: {
            mobile1: {
                name: 'iPhone 4, 4s',
                styles: {
                    width: '320px',
                    height: '480px',
                },
                type: 'mobile',
            },
            mobile3: {
                name: 'iPhone 6, 6s, 7, 8',
                styles: {
                    width: '375px',
                    height: '667px',
                },
                type: 'mobile',
            },
            mobile4: {
                name: 'iPhone 6+, 6s+, 7+, 8+',
                styles: {
                    width: '414px',
                    height: '736px',
                },
                type: 'mobile',
            },
            mobile5: {
                name: 'iPhone X, XS',
                styles: {
                    width: '375px',
                    height: '812px',
                },
                type: 'mobile',
            },
            // ...
        },
        defaultViewport: 'mobile5',
    },
    // ...
};

parameters.viewport.viewports에 위와 같이 뷰포트 이름, 가로세로 픽셀, 타입 이렇게 정해줄 수 있다. 또 defaultViewport로 스토리북 기본 뷰포트를 설정할 수 있다. 이런 parameter는 이렇게 preview.js에 전역으로 설정해줄 수도 있지만 컴포넌트 독스마다 각기 다른 설정을 해줄 수도 있다.

뷰포트를 커스텀해서 적용한 모습이다.