main.ts

• stories를 위한 config 설정

preview.ts

• 모든 story들에 글로벌하게 적용될 포맷 세팅

Story 작성

https://official.palms.blog/storybook

• 파일명 : {컴포넌트이름}.stories.ts

export default {
  title: //스토리북에 올릴 component폴더 계층 구조,
  component: // 스토리를 만들 컴포넌트 이름
}

export const 스토리이름 = () => 해당스토리에서 테스트할 인자가 담긴 컴포넌트

• title
  • 스토리북에 올릴 component 폴더 계층 구조
  • ex) title: ‘Example/Button’ → Example 그룹의 Button 스토리
• component
  • 스토리를 만들 컴포넌트 이름
  • args : 모든 스토리에 공통으로 전달될 props
  • argTypes : 각 Story args의 행동 방식 설정
  • ex) backgroundColor : { control : ‘color’ } → controls에서 선택한 컬러를 컴포넌트의 props로 전달
• decorators
  • Story를 감싸 추가적인 렌더링 가능한 기능
  • parameters : Story에 대한 정적 메타 데이터 정의
  • excludeStories : 렌더링 제외 설정
  • actios : 클릭이 될 때 Storybook UI의 actios 패널에 나타날 콜백을 생성함으로써 버튼 클릭이 성공적이었는지 테스트 UI에서 확인 가능

Example

import React from 'react';
import Input from './Input';

export default {
  title: 'components/Form/Input',
  component: Input
};

// 기본 포맷
const Template = args => <Input {...args} />;

// bind로 제어
// 이 아래 각각이 새로운 스토리들인 것!
export const Password = Template.bind({});
Password.args = {
  id: 'password',
  label: '패스워드',
  type: 'password',
  value: '1234',
  placeholder: '패스워드를 입력하세요.'
};
Password.storyName = 'Password';

export const UserIdError = Template.bind({});
UserIdError.args = {
  id: 'userid',
  label: '아이디',
  value: 'user@email.',
  placeholder: '아이디로 사용할 이메일을 입력하세요.',
  error: '아이디(이메일)는 이메일 형식으로 입력해주세요.'
};
UserIdError.storyName = 'Password(Error)';

export const Large = {
  args: {
    size: 'large',
    label: 'Button',
  },
};

export const Small = {
  args: {
    size: 'small',
    label: 'Button',
  },
};