디자인 시스템 적용기: FE와 디자인팀 소통 창구 만들기

FE와 디자인 팀의 소통을 위해 디자인 시스템을 적용하고 한눈에 볼 수 있는 Storybook을 만들어 디자인팀에게 제공하고자 디자인 시스템 적용기를 써보고자 한다.

1. 디자인시스템 - 어떻게 만들어서 제공해주면 좋을까 ?

💡 공통 컴포넌트를 만들때는 적절한 책임 분배가 필요합니다.
하나의 컴포넌트가 너무 많은 일을 하는것도 너무 쪼개져있는것도 좋지 못합니다.

1. 비즈니스 로직이나 상태에 대한 관리는 상위에서 내려받는다.
   • 특정 컴포넌트가 관심사를 가지게되면 공통으로써의 기능을 할 수 없다.
2. 너무 많은 제어를 담당하지 않는다.
   • 외부에서 사용할때 자유도가 떨어진다.
3. 조합 가능한 구조로 만든다.
   • 각 컴포넌들의 책임을 분리하여 서로 상호작용 할 수 있는 조합가능한 구조로 만든다.
4. 어디서든 사용 할 수 있도록 쉽고 명확하게 만든다.

2. StoryBook

💡 컴포넌트를 독립적으로 개발하고 문서화할 수 있게 도와주는 도구

2-1. StoryBook 문서 생성

• index.stories.tsx

// BasicField 컴포넌트와 해당 컴포넌트의 props 타입을 현재 디렉토리로부터 import
import BasicField from ".";
import type { BasicFieldProps } from ".";

// Storybook의 메타데이터 객체 정의
const meta = {
  // Storybook에서 보여질 컴포넌트 그룹 이름
  title: "base/BasicField",
  // 연결할 실제 React 컴포넌트
  component: BasicField,
  // 컴포넌트 props에 대한 제어 설정 (Storybook의 Controls 패널에 표시됨)
  argTypes: {
    disabled: {
      // boolean 타입으로 control 가능하게 설정
      control: { type: "boolean", default: false },
    },
  },
  // 기본 props 설정 (Story 렌더링 시 기본값으로 사용됨)
  args: {
    disabled: false,
  },
};

// 위에서 정의한 메타데이터를 Storybook에 export (Storybook에서 인식함)
export default meta;

// Storybook에서 렌더링할 컴포넌트 예시 (Story) 정의
export const BasicFieldBox = ({ disabled, theme }: BasicFieldProps) => {
  return (
    <div>
      {/* 실제 BasicField 컴포넌트를 렌더링하면서 props 전달 */}
      <BasicField disabled={disabled} theme={theme} />
    </div>
  );
};

// Story의 이름을 지정 (Storybook UI에 표시될 이름 설정)
BasicFieldBox.storyName = "기본입력박스";

2-2. StoryBook 실행

$ pnpm run storybook

• 문서화된 컴포넌트 및 Props에 따른 컴포넌트의 변화를 확인 가능