# Story 작성
## Story란? 스토리 버튼
```
Storybook에 표시되는 Story 이름을 변경해야 한다면? `storyName` 속성을 사용할 수 있습니다.
```jsx
StoryButton.storyName = 'Secondary Button'
```
## 멀티 Story 작성
{label}
)
export default StoryInput
// 컴포넌트 속성 검사를 설정하면 Story 문서에 반영됩니다.
// 컴포넌트에 필요한 데이터 형태를 명시하려면 React에서 propTypes를 사용하는 것이 가장 좋습니다.
// 이는 자체적 문서화일 뿐만 아니라, 문제를 조기에 발견하는 데 도움이 됩니다.
StoryInput.propTypes = {
/** label 요소와 input 요소를 연결하는 key */
id: PropTypes.string.isRequired,
/** UI에 표시되는 레이블 */
label: PropTypes.string.isRequired,
/** 레이블을 UI에서 감춤 (스크린 리더 사용자에게는 읽힘) */
labelHidden: PropTypes.bool,
/** 플레이스홀더 */
placeholder: PropTypes.string,
/** 커스텀 클래스 이름 */
className: PropTypes.string,
/** 설정 가능한 인풋 타입 */
type: PropTypes.oneOf(['text', 'email', 'password', 'search']),
/** 인풋 크기 */
size: PropTypes.oneOf(['sm', 'md', 'lg']),
}
// 컴포넌트 기본 속성을 설정하면 Story 문서에 반영됩니다.
StoryInput.defaultProps = {
type: 'text',
className: '',
size: 'md',
labelHidden: false,
}
```
{% endtab %}
{% tab title="StoryInput.scss" %}
```css
@use 'sass:map';
$colors: (
dark: (
label: #767f96,
input: (
border: #1f57e7,
bg: #292f3a,
fg: #f5f5f5,
),
),
light: (
label: #595d65,
input: (
border: #9f9da9,
bg: #fdfdfd,
fg: #08163a,
),
),
);
@function getLabelColor($theme-name: light) {
$theme: map.get($colors, $theme-name);
@return map.get($theme, label);
}
@function getInputColor($name, $theme-name: light) {
$theme: map.get($colors, $theme-name);
$input: map.get($theme, input);
@return map.get($input, $name);
}
.storyInput {
$size: 14px;
display: inline-flex;
flex-direction: column;
label {
margin-bottom: 0.4em;
color: getLabelColor();
}
input {
border: 2px solid rgba(getInputColor(border), 0.4);
border-radius: 8px;
padding: 1em;
background: getInputColor(bg);
color: getInputColor(fg);
&:focus {
outline: 0;
border: 2px solid getInputColor(border);
box-shadow: 2px solid rgba(getInputColor(border), 0.4);
}
}
// Dark Mode
.dark & {
label {
color: getLabelColor(dark);
}
input {
border-color: rgba(getInputColor(border, dark), 0.4);
background: getInputColor(bg, dark);
color: getInputColor(fg, dark);
&:focus {
border-color: getInputColor(border, dark);
box-shadow: 2px solid rgba(getInputColor(border, dark), 0.4);
}
}
::placeholder {
color: #767f96;
}
}
// Size
&.sm {
label,
input {
font-size: $size * 0.8;
}
}
&.md,
input {
label {
font-size: $size;
}
}
&.lg {
label,
input {
font-size: $size * 1.2;
}
}
}
```
{% endtab %}
{% endtabs %}
## Storybook 구동
),
],
};
```
{% hint style="info" %}
보다 복잡한 데코레이터 구성 예(ThemeProvider 등)를 [참고](https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking)하세요.
{% endhint %}
## 멀티 컴포넌트 Story
;
// 1개의 하위 컴포넌트를 포함한 상위 컴포넌트 Story
export const OneItem = (args) => (
);
// 1개 이상 하위 컴포넌트를 포함한 상위 컴포넌트 Story
export const ManyItems = (args) => (
);
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
컴포넌트 구성이 보다 복잡하다면 [멀티 컴포넌트 Story 워크플로우](https://storybook.js.org/docs/react/workflows/stories-for-multiple-components)를 참고하세요.
{% endhint %}
---
# 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/write-story.md?ask=
```
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.