# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/react/story-book.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.