> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/story-book.md).

# Story Book

{% embed url="<https://storybook.js.org/docs/react/get-started/introduction>" %}

##

## API

### 스토리북 이름 변경&#x20;

```javascript
Small.storyName = 'Small Input'
```

```javascript
import React from 'react'
import Input from './Input'

export default {
  title: 'Form/Input',
  component: Input,
}

export const Small = () => <Input size="small" placeholder="Small size" />
export const Medium = () => <Input size="medium" placeholder="Medium size" />
export const Large = () => <Input size="large" placeholder="Large size" />

Small.storyName = 'Small Input'

```

![](/files/-MW0rEWBq-lOv_9fW2q1)

## 오류&#x20;

{% hint style="warning" %}
스토리북을 사용하다 보면 오류가 생기는 경우가 있다. 이 경우 아래 명령어를 사용해서 설치해 주면 된다.&#x20;

```
npx --legacy-peer-deps sb init  
```

{% endhint %}

## 참고&#x20;

* [StoryBook을 이용한 컴포넌트 단위 개발 - 사용하면서 느낀 장단점들](https://velog.io/@younuk23/TILStoryBook%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%8B%A8%EC%9C%84-%EA%B0%9C%EB%B0%9C)