> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/storybook-for-react/storybook-addons-official.md).

# Storybook 애드온 (공식)

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

## Actions

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

{% content-ref url="/pages/-MVY2AcW1xTozNs4suHS" %}
[Story 액션](/learning-react-app/tip-and-references/storybook-for-react/story-action.md)
{% endcontent-ref %}

## addon-viewport

[Viewport](https://storybook.js.org/docs/react/essentials/viewport) 도구 모음 애드온은 Storybook에 기본 설치되어 있어 별도 설치가 필요 없습니다. 다만, 몇가지 설정을 통해 보다 다양한 Viewport를 활용할 수 있습니다.

#### 커스텀 뷰포트 추가 설정

{% tabs %}
{% tab title=".storybook/preview\.js" %}

```javascript
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 
    } 
  }
}
```

{% endtab %}
{% endtabs %}

#### 컴포넌트 개별 뷰포트 설정

{% tabs %}
{% tab title="Component.stories.js" %}

```javascript
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',
  },
}
```

{% endtab %}
{% endtabs %}