> 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/story-control.md).

# Story 컨트롤

Storybook [Controls](https://storybook.js.org/docs/react/essentials/controls)는 별도의 코딩 없이도 컴포넌트 인자, 인터랙션 할 수 있는 GUI를 제공합니다. 애드온 패널을 생성하여 실시간으로 편집 할 수 있습니다.

{% embed url="<https://storybook.js.org/9d2e1f29cfb010e3aae6cd76547c4bab/addon-controls-optimized.mp4>" %}

## 컨트롤 타입 설정 <a href="#controls-type" id="controls-type"></a>

기본적으로 Storybook은 전달 인자(args) `backgroundColor`를 텍스트 입력 컨트롤로 렌더링합니다 .

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

```jsx
const Basic = Template.bind({});

Basic.args = {
   backgroundColor: '#e00',
};
```

{% endtab %}
{% endtabs %}

텍스트 컨트롤은 컬러 선택에 적합한 UI는 아닙니다. Storybook의 컬러 피커 컴포넌트로 대체할 필요가 있습니다.

![](/files/-MVXsRoQLazbTSEDqkhu)

[argTypes](https://storybook.js.org/docs/react/api/argtypes) 설정을 통해 사용 할 컨트롤을 지정할 수 있습니다.

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

```jsx
export default {
  title: 'Button',
  component: Button,
  argTypes: {
    // 배경 색상을 선택할 수 있는 컬러 피커 컨트롤 설정
    backgroundColor: { control: 'color' },
  },
}
```

{% endtab %}
{% endtabs %}

![](/files/-MVXtLiHFqUwnh8XKMxq)

## 컨트롤 목록 <a href="#controls-list" id="controls-list"></a>

다음은 사용할 수 있는 컨트롤의 전체 목록 표입니다.

| 데이터         | 컨트롤          | 설명                                 | 옵션             |
| ----------- | ------------ | ---------------------------------- | -------------- |
| **array**   | array        | 배열을 텍스트 필드에 콤마(,)로 구분 된 문자열로 직렬화   | separator      |
| **boolean** | boolean      | 체크 박스 인풋                           | -              |
| **number**  | number       | 숫자 텍스트 필드 인풋                       | min, max, step |
|             | range        | 레인지 슬라이더(range slider) 인풋          | min, max, step |
| **object**  | object       | json 에디터 텍스트 인풋                    | -              |
| **enum**    | radio        | 라디오(radio) 버튼                      | options        |
|             | inline-radio | 인라인 라디오(inline radio) 버튼           | options        |
|             | check        | 멀티 셀렉트 체크박스(multi-select checkbox) | options        |
|             | inline-check | 인라인 멀티 셀렉트 체크박스                    | options        |
|             | select       | 셀렉트 드롭다운(dropdown)                 | options        |
|             | multi-select | 멀티 셀렉트 드롭다운                        | options        |
| **string**  | text         | 텍스트 입력 인풋                          | -              |
|             | color        | 컬러 피커 (문자열이 색상 값이라고 가정)            | -              |
|             | date         | 날짜 피커                              | -              |

예를 들어 Story에서 열거 형 데이터를 사용하도록 컨트롤 지정하려면 `inline-radio`를 설정합니다.

{% tabs %}
{% tab title="컴포넌트 Story 포멧 (CSF)" %}

```jsx
export default {
  // ...
  argTypes: {
    // 컨트롤 할 속성
    loadingState: {
      control: {
        type: 'inline-radio',
        options: ['idle', 'pending', 'resolved', 'rejected'],
      },
    },
  },
}
```

{% endtab %}
{% endtabs %}

레인지 슬라이더를 사용하도록 컨트롤 지정하려면 `range`를 설정합니다.

```jsx
export default {
  // ...
  argTypes: {
    // 컨트롤 할 속성
    width: { 
      control: { 
        type: 'range', 
        min: 400, max: 1200, step: 50 
      },
    },
  },
}
```

셀렉트 드롭다운을 사용하도록 컨트롤 지정하려면 `select`를 설정합니다.

```jsx
export default {
  // ...
  argTypes: {
    // 컨트롤 할 속성
    type: { 
      control: {
        type: 'select',
        options: ['color', 'mono', 'black'],
      }
    },
  },
}
```

## 속성 문서 표시 <a href="#display-controls-doc" id="display-controls-doc"></a>

Controls는 Storybook Docs와 동일한 엔진에 구축되었으므로 확장 된 매개 변수를 사용하여 컨트롤과 함께 속성 문서를 함게 표시 할 수도 있습니다. 확장 모드를 글로벌 활성화하려면 다음과 같이 설정합니다.

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

```javascript
export const parameters = {
  controls: { expanded: true },
};
```

{% endtab %}
{% endtabs %}

![](/files/-MVXxixuLIxNLGJLBuwt)

## No Controls 경고

Story 내에서 controls를 사용하지 않을 경우 경고 메시지가 표시되지 않도록 설정할 수 있습니다.

{% tabs %}
{% tab title="Plain Text" %}

```jsx
export const Large = Template.bind({});

Large.parameters = {
  controls: { hideNoControlsWarning: true },
};
```

{% endtab %}
{% endtabs %}