# Viewport

{% embed url="<https://storybook.js.org/docs/react/essentials/viewport#add-new-devices>" %}

&#x20; StoryBook에서 작업을 할 때, 사용자 정의 중단점을 만들고 싶다면 preview\.js 파일에 등록하여 만들 수 있다.&#x20;

```javascript
// .storybook/preview.js

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

```javascript
// .storybook/preview.js

export const parameters = {
  viewport: { viewports: customViewports },
};
```
