# 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 %}


---

# 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://yamoo9.gitbook.io/learning-react-app/tip-and-references/storybook-for-react/story-control.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.