MOAMOA FE Design System

모아모아의 디자인 시스템을 정립합니다.

Layout Components

Flex

flex와 관련된 props를 받습니다.
ex) alignItems, justifyContens 등

Grid

grid와 관련된 props를 받습니다.
ex) columns, columnGap, rows, rowGap 등

Responsive

Flex와 Grid는 mediaQuery속성을 객체로 받습니다.

Wrapper Component

const Wrapper = (children, width, height, padding, margin, border ... 등의 다양한 props) => <div>{children}</div>;

Common Components

공통 컴포넌트는 자주 사용될것들로 지정합니다.
컴포넌트 개발시 props만 잘 주면 다른곳에서도 쓸 수 있을것 같을때 공통 컴포넌트로 승격시킵니다.

Component Structure

예를들어 컴포넌트는 아래와 같이 작성합니다.

import Button from '@components/button';
import UnorderedList from '@components/unorderd-list';

// Props를 맨 위에 둡니다
export type StudyListProps = {
  children?: React.ReactNode;
  variant?: 'primary' | 'secondary';
  onAddButtonClick: React.MouseEventHandler<HTMLButtonElement>;
  onRemoveButtonClick: React.MouseEventHandler<HTMLButtonElement>;
};

// Component는 화살표 함수로 표현하고, React.FC<Props>로 타입을 명시합니다
// - return type을 더 쉽게 강제할 수 있습니다
const StudyList: React.FC<StudyListProps> = ({
  children,
  variant,
  onAddButtonClick: handleAddButtonClick,
  onRemoveButtonClick: handleRemoveButtonClick,
}) => {
  return (
    <Self>
      <List>
        <Item>리팩토링 스터디</Item>
        <Item>프론트 스터디</Item>
        <Item>자바 스터디</Item>
      </List>
      <AddButton onClick={handleAddButtonClick}>추가하기</AddButton>
      <RemoveButton onClick={handleRemoveButtonClick}>삭제하기</RemoveButton>
    </Self>
  );
};

export default StudyList;

// styled component는 component에 같이 둡니다. 왜냐하면
// 1. 응집성 -> 위에서 바로 사용하는 컴포넌트들을 바로 아래쪽에 둠으로써 아주 약간이지만 응집성을 높입니다.
// 2. 캡슐화 -> 이 컴포넌트에서만 사용하는 하위컴포넌트(Self, StudyList, AddStudyButton ..)들은 외부에 노출하지 않습니다.
// 3. styled 파일을 따로 만들면, VSC에서 검색할때 조금 불편합니다.

// Self를 다른 컴포넌트에서 상속받아 사용하고 싶다면, (사용하는쪽에서 이곳의) Component를 import해서 상속 받으면 됩니다.
// 가장 바깥 컴포넌트는 Self로 명명합니다.
// 원래라면 S.StudyList라고 하는데 S를 빼고 싶은데 빼면 컴포넌트와 이름이 같아지기 때문에 Self로 명명했습니다.
const Self = styled.div`
  ${({ theme }) => css`
    padding: 10px;
    max-width: 500px;
    border: 2px solid ${theme.color.black}; // color는 theme에 정의한 color를 사용합니다
  `}
`;

type ListProps = {
  theme: Theme;
  children: React.ReactNode;
};
const List: React.FC<ListProps> = ({ theme, children }) => (
  // custom props는 허용된 css property만 넣을 수 있습니다.
  // css props를 사용하게 되면 아무거나 넣을 수 있기 때문에 디자인을 강제할 수 없게됩니다.
  <UnorderedList custom={{ marginBottom: '20px', backgroundColor: theme.colors.green }}>{children}</UnorderedList>
);

type ItemProps = {
  theme: Theme;
  children: React.ReactNode;
};
const Item: React.FC<ItemProps> = ({ theme, children }) => (
  <UnorderedList.Item custom={{ padding: '4px' }}>{children}</UnorderedList.Item>
);

type AddButtonProps = {
  children: React.ReactNode;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
};

// 공통 컴포넌트는 이렇게 도메인에 대한 정보를 입혀서 활용합니다.
const AddButton = ({ children, onClick: handleClick }: AddButtonProps) => (
  <Button custom={{ marginBottom: '20px' }} variant="primary" onClick={handleClick}>
    {children}
  </Button>
);

type RemoveButtonProps = AddButtonProps;
const RemoveButton = ({ children, onClick: handleClick }: RemoveButtonProps) => (
  <Button custom={{ marginBottom: '30px' }} variant="danger" onClick={handleClick}>
    {children}
  </Button>
);

custom props

custom prop은 해당 컴포넌트의 핵심이 아닌 스타일을 넣을때 사용합니다.
단!! 아무 스타일이나 넣는것이 아니라, 컴포넌트가 허용한 스타일만 넣을 수 있도록 설정할 수 있습니다.

import { css } from '@emotion/react';
import { type CSSProperties as OriginalCSSProperties } from '@emotion/serialize';

import { BreakPoint, BreakpointsFor, mqDown } from '@styles/responsive';

type KeyOfOriginalCSSProperties = keyof OriginalCSSProperties;

export type PickAllowedCSSProperties<CSSProperties extends KeyOfOriginalCSSProperties> = Pick<
  OriginalCSSProperties,
  CSSProperties
>;

export type CSSPropertyWithValue<AllowedCSSProperties extends KeyOfOriginalCSSProperties> = {
  [K in keyof PickAllowedCSSProperties<AllowedCSSProperties>]: OriginalCSSProperties[K];
};

export type ResponsiveCSSPropertyWithValue<AllowedCSSProperties extends KeyOfOriginalCSSProperties> = BreakpointsFor<
  CSSPropertyWithValue<AllowedCSSProperties>
>;

export type CustomCSS<AllowedCSSProperties extends KeyOfOriginalCSSProperties> =
  CSSPropertyWithValue<AllowedCSSProperties> & { responsive?: ResponsiveCSSPropertyWithValue<AllowedCSSProperties> };

export const getResponsiveStyle = <AllowedCSSProperties extends KeyOfOriginalCSSProperties>(
  breakPoint: BreakPoint,
  styleObject: CSSPropertyWithValue<AllowedCSSProperties>,
) => {
  return css`
    ${mqDown(breakPoint)} {
      ${styleObject}
    }
  `;
};

export const resolveCustomCSS = <AllowedCSSProperties extends KeyOfOriginalCSSProperties>(
  custom?: CustomCSS<AllowedCSSProperties>,
) => {
  if (!custom) return css``;
  const { responsive, ...defaultStyle } = custom;

  if (responsive) {
    const { xs, sm, md, lg, xl, xxl, xxxl } = responsive;
    const xsStyle = xs && getResponsiveStyle<AllowedCSSProperties>('xs', xs);
    const smStyle = sm && getResponsiveStyle<AllowedCSSProperties>('sm', sm);
    const mdStyle = md && getResponsiveStyle<AllowedCSSProperties>('md', md);
    const lgStyle = lg && getResponsiveStyle<AllowedCSSProperties>('lg', lg);
    const xlStyle = xl && getResponsiveStyle<AllowedCSSProperties>('xl', xl);
    const xxlStyle = xxl && getResponsiveStyle<AllowedCSSProperties>('xxl', xxl);
    const xxxlStyle = xxxl && getResponsiveStyle<AllowedCSSProperties>('xxxl', xxxl);

    return css`
      ${defaultStyle}
      // 우선순위가 중요합니다!! xxxl -> xs 순으로 놓아야 합니다
      ${xxxlStyle}
      ${xxlStyle}
      ${xlStyle}
      ${lgStyle}
      ${mdStyle}
      ${smStyle}
      ${xsStyle}
    `;
  }

  return css`
    ${defaultStyle}
  `;
};

Button 컴포넌트는 이렇게 생겼습니다

type ButtonProps = {
  children: React.ReactNode;
  type: 'submit' | 'button';
  fluid?: boolean;
  disabled?: boolean;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  custom?: CustomCSS<'marginBottom'>;
};

const Button: React.FC<ButtonProps> = ({ children, type = 'button', disabled, onClick, custom }) => {
  <button css={resolveCustomCSS(custom)} disabled={disabled} type={type} onClick={onClick}>
    {children}
  </button>;
};

공원의 피드백

• 컴포넌트의 본질이 되는 속성은 주관적이다
• 이 디자인 시스템을 모르는 사람이 와도 잘 쓸 수 있을까? => 어떤 컴포넌트에는 fontSize가 본질적인 속성이고, 어떤 것은 custom에 넣어야 한다. 왜 이것은 본질이고, 저것은 아닌지 코드만 보고 판단하기 어렵다. 다시 말해서 납득 안 될 수도 있다.

병민의 생각

• Storybook에 설명을 넣으면 되지 않을까?
• 너무 자유를 주는 것보다는 좋을 것 같다!
• 주관이 많이 들어가는 건 맞다!

태태 생각

• '모아모아' 프로젝트를 위한 디자인시스템이므로 주관적인 건 당연하다.
• 그러나, 팀원 간에도 의견 차이가 있을 수 있으므로 커스텀할 필요 없는 '기본 속성'에 대해 다시 한 번 이야기를 나누는 게 좋을 것 같다.

참고

• Orbit
• Adobe React Spectrum

디스커션

• discussion#366