[TIL] 스토리북 찍먹하기

스토리북

스토리북은 컴포넌트 기반의 뷰를 위한 독립적인 UI 개발 환경입니다.
처음 리액트를 기반으로 개발되었고, 이후 Vue, Angular, Web Components, Svelte 등 다양한 프레임워크를 지원하고 있습니다.
스토리북은 컴포넌트를 목록화하여 보고 싶은 컴포넌트를 언제든 확인 가능하도록 만들어줍니다.하나의 디자인 시스템이라고 생각하시면 편하실 것 같네요.
스토리북의 컴포넌트는 Mockup 상태 값을 넣어줄 수 있도록 되어있어 각종 상태 값에 따라 바로바로 디자인이 변경되는 것을 확인하실 수 있고 또한, 각 개체별로 볼 수도 있지만 페이지 단위로 여러 가지 컴포넌트를 묶어 보여줄 수도 있습니다.
위와 같은 기능을 제공함으로써 개발 요건을 반영하여 기획, 디자인 파트와 같이 확인하며 협업이 가능합니다.스토리북을 확인하면서 여러 케이스를 미리 테스트할 수 있고 이렇게 검수를 선진행하여 수정이 필요한 경우 빠르게 확인한 내용을 반영하여 작업함에 있어 수월하게 진행할 수 있도록 도와줍니다.

 

스토리북 찍먹하기

설치하기

$ npx -p @storybook/cli sb init

설치가 완료되면 .storybook 과 stories라는 폴더가 생성된 것을 확인할 수 있다.

 

내가만든 컴포넌트 스토리북에 추가하기

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

function Button({ label, color, backgroundColor, size, handleClick }) {
  return (
    <StButton color={color} backgroundColor={backgroundColor} size={size} handleClick={handleClick}>
      {label}
    </StButton>
  );
}

Button.propTypes = {
  /** 버튼 내부 text */
  label: PropTypes.string,
  /** 버튼 글자 색 */
  color: PropTypes.string,
  /** 버튼 배경 색 */
  backgroundColor: PropTypes.string,
  /** 버튼 사이즈 small, medium, large */
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  /** 버튼 click handler */
  handleClick: PropTypes.func,
};

Button.defaultProps = {
  label: 'press me',
  color: 'white',
  backgroundColor: 'red',
  size: 'md',
};

const StButton = styled.button`
  color: ${({ color }) => color};
  background-color: ${({ backgroundColor }) => backgroundColor};
  border: none;
  padding: ${({ size }) => {
    let scale = 1;
    if (size === 'sm') scale = 0.75;
    if (size === 'lg') scale = 1.5;
    return `${scale * 0.5}rem ${scale * 1}rem`;
  }};
`;

export default Button;

이렇게 공통 컴포넌트 버튼을 추가했습니다.

이런 경우에는 잘 완성되었는지 리액트앱에 올려서 모든 경우의 수를 불편하게 확인했었는데요!

이제는 그럴 필요가 없습니다.

스토리북을 통해서 확인하면 되니까요

stories 폴더 내부에 추가하려는 컴포넌트에서 stories를 추가해서 파일을 만들어 줍니다.

import React from 'react';
import Button from '../components/common/Button';

export default {
  title: 'Button',
  componenet: Button,
};

function Template(args) {
  return <Button {...args} />;
}

export const Default = Template.bind({});
Default.args = {
  color: 'white',
  backgroundColor: 'red',
  label: 'Press Me',
  size: 'md',
};

 

이제 스토리북을 실행시켜서 확인해봅시다.

$ yarn storybook
$ npm start storybook

default 포트는 6006으로 설정되어있으니 http://localhost:6006/로 접속해줍니다.

만들어 놓았던 컴포넌트를 캔버스에서 확인할 수 있네요!

우측의 컨트롤러에서 mock data를 바꿔보면서 실행해볼 수 있습니다.

Controls 커스텀하기

여기까지 따라오면서 controls가 다르다고 느끼셨을 수 있습니다.

왜냐하면 argTypes를 추가해주지 않았기 때문입니다.

controls의 입력 타입들을 변경시켜봅시다.

export default {
  title: 'Button',
  componenet: Button,
  argTypes: {
    backgroundColor: {
      control: { type: 'color' },
    },
    size: {
      options: ['sm', 'md', 'lg'],
      control: { type: 'select' },
    },
    handleClick: { action: 'handleClick' },
  },
};

이렇게 각 props의 컨트롤 타입을 지정해주어서 어떻게 선택해줄 수 있을지 옵션을 어떻게 줄지 지정해줄 수 있습니다.

Log in vs Sign in

sign up, sign in, log on, log in의 차이점은??

팀원들과 로그인에 대한 명칭을 정하면서 나온 얘기이다.

외국에서는 log in은 어색하다고 한다. log는 통나무를 뜻하기 때문.

외국인을 위한 서비스라면 sign in을 채택하는 게 맞는 것 같다.