[DS] 컴포넌트 디자인하기 with Storybook

December 25, 2020

이 글은 ([DS] Monorepo 환경에서 디자인시스템 구축 I)시리즈에서 Design System 컴포넌트에 관련한 글입니다.

들어가기 전에

이 글은 Monorepo에서 packages 환경으로 디자인시스템 구축하는 내용을 담고 있습니다. 들어가기에 앞서 [DS] Monorepo 환경에서 디자인시스템 구축 를 참고 하시면 좋을거 같습니다.

Environments

컴포넌트 개발에 앞서 Storybook Settings 을 하도록 하겠습니다. 저번에 만든 monorepo 프로젝트에 Storybook을 생성해서 만들어 주시면 됩니다.

이번 포스트에는 Storybook 설정 내용은 생략하도록 하겠습니다. https://www.learnstorybook.com/intro-to-storybook/react/en/get-started/ 참고 해주세요.

환경은 아래와 같습니다.

@emotion/react
@storybook/addon-actions
@storybook/addon-docs
@storybook/addon-essentials
@storybook/addon-links@storybook/react

컴포넌트 구조 및 관리

컴포넌트 개발에 앞서 어떻게 컴포넌트 구조 및 관리를 해야 효율적인가를 고민하게 됩니다. 사실 작은 프로젝트도 컴포넌트 관리 여부에 따라서 많은 파일이 컴포넌트가 생기고 적은 컴포넌트가 생기게 됩니다.

많은 컴포넌트 구조와 관리 방법이 있습니다. Atomic Design , 도메인 단위 방법, Presentational and Container Components(데이터와 화면분리) 등이 있습니다.

처음에 접근했던 모듈화 방법

if(마크업 동일 && stateful 로직 동일)
if(마크업 다르다 && stateful 로직 동일)
if(마크업 동일 && stateful 로직 다르다)

... 안될때  새로 개발
if(마크업 다르다 && stateful 로직 동일)

해당 프로젝트는 레이아웃 컴포넌트기 때문에 화면분리를 좀더 효율적인 방법으로 관리하기 위해서 아토믹디자인 패턴을 적용하도록 하겠습니다.

왜 분리 하는것이 효율적일까?

레이아웃단위 컴포넌트를 쪼개지 않는다면 중복되는 컴포넌트가 많아지게 됩니다. 그래서 내부적으로 컴포넌트를 쪼개는 디자인 패턴인 아토믹디자인 패턴을 선택하게 되었습니다. 쉽게 설명하자면 UI 복잡성을 최대한 낮게 표현한다가 될거 같습니다.

참고-Atomic Design?

Sample

아래와 같은 Button 디자인을 가지고 해당 관리 패턴을 가지고 진행을 하겠습니다.

/** @jsx jsx */

import { SerializedStyles, css, jsx } from '@emotion/react';
import { IComponentProps } from '../../../model/commonProps';
import React from 'react';
import { palette } from '../../../index';

...생략

interface IProps extends IComponentProps {
  isCapture?: boolean;
  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
  theme?: string;
  size?: 'small' | 'medium' | 'large';
}

function Button({
  children,
  theme = 'primary',
  isCapture = false,
  onClick,
  size = 'large',
}: IProps) {
  const clickEvent = isCapture ? { onClickCapture: onClick } : { onClick };
  const colors = themes[theme];

  return (
    <button css={[style, colors, sizes[size]]} {...clickEvent}>
      {children}
    </button>
  );
});
};
Button.defaultProps = {
  theme: 'primary',
  size: 'medium',
};

export default Button;