> 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/write-story.md).
# 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 %}