> 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-layout.md).

# Storybook 레이아웃

Storybook의 Canvas에 Story가 레이아웃 되는 방식을 설정 할 수 있습니다.

| 레이아웃         | 설명                    |
| ------------ | --------------------- |
| `fullscreen` | Canvas 영역을 꽉 채운 레이아웃  |
| `padded`     | 컴포넌트 주변에 패딩을 추가한 레이아웃 |
| `centered`   | 정 중앙에 컴포넌트 레이아웃       |

예를 들어 모든 Story를 중앙에 배치하고자 한다면 `centered` 값을 사용합니다.

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

```jsx
export const parameters = {
  layout: 'centered',
};
```

{% endtab %}
{% endtabs %}

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVXotkDzGiIhRqiJhtB%2F-MVXq4343Hd0gdGkJHwg%2Fimage.png?alt=media\&token=415e0aca-84d4-455f-be49-bd9e4f1b31f4)