Storybook 애드온 (공식)

Storybook 코어 팀에서 개발한 "공식" 애드온을 사용해 Storybook의 기능을 추가/변경 설정 할 수 있습니다.

Actions

Story 액션을 참고하세요. 액션은 공식 애드온입니다.

Story 액션

addon-viewport

Viewport 도구 모음 애드온은 Storybook에 기본 설치되어 있어 별도 설치가 필요 없습니다. 다만, 몇가지 설정을 통해 보다 다양한 Viewport를 활용할 수 있습니다.

커스텀 뷰포트 추가 설정

.storybook/preview.js

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'

const customViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  kindleFireHD: {
    name: 'Kindle Fire HD',
    styles: {
      width: '533px',
      height: '801px',
    },
  },
}

export const parameters = {
  // ...
  viewport: { 
    viewports: { 
      ...INITIAL_VIEWPORTS, 
      ...customViewports 
    } 
  }
}

컴포넌트 개별 뷰포트 설정

Component.stories.js

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'

export default {
  title: 'Guides/Viewport/Component',
  parameters: {
    // 뷰포트 애드온 설정
    viewport: {
      viewports: INITIAL_VIEWPORTS,
      // iPhoneX,XR 만 추출
      defaultViewport: ['iphonex', 'iphonexr']
    },
  }
};

const Template = (args) => <StoryInput {...args} />

export const SmSize = Template.bind({})
SmSize.parameters = {
  viewport: {
    // iPhoneX 뷰포트로 표시
    defaultViewport: 'iphonex',
  },
}