Storybook 이란??

정의

Storybook은 다양한 프레임워크에서 UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있도록 도와주는 도구입니다.

---

효과

컴포넌트를 분리된 환경에서 개발하고, 재사용성과 유지보수성을 높일 수 있도록 구성 요소별로 스토리를 작성합니다. 이를 통해 디자인과 기능을 팀원들과 쉽게 공유하고, 버그를 미리 방지할 수 있다는 장점이 있습니다.

---

storybook 사이트
위 사이트에 설치방법과 사용방법이 나와있다.

우리 팀원들은 아직 Storybook 이론만 알고있지 프로젝트에서 실제로 써본 적이 없다고 해서 이참에 한번 써보기로 하였습니다.

이번에 하는 프로젝트에서 맡은 Dropdown 공통 컴포넌트에 대해 storybook을 작성해보았습니다.

Dropdown은 토글을 하여 열림/닫힘을 봐야하므로 저는 tsx파일로 작성하였습니다.

구성요소

Meta : 컴포넌트의 정보를 설정하는 객체입니다.

const meta: Meta<typeof Dropdown> = {
  title: 'Components/Dropdown', // Storybook에서 컴포넌트를 탐색할 때 사용하는 경로
  component: Dropdown,         // 대상 컴포넌트
  parameters: {
    layout: 'centered',        // 스토리를 가운데 정렬
  },
  tags: ['autodocs'],          // 자동 문서화를 위한 태그
};                               

Args : 스토리에서 사용하는 컴포넌트의 기본 속성 값을 설정합니다.

export const Default: Story = {
  args: {
    dropdownData: ['Option 1', 'Option 2', 'Option 3'],
    onSelectItem: (item: string) => console.log(item), // 콜백 동작 정의
    isOpenDropdown: false,  // 기본 상태: 닫힘
  },
};

Render : 컴포넌트의 동작과 UI를 정의하는 함수입니다.

render: function Render(args: DropdownProps) {
  const [isOpen, setIsOpen] = useState(args.isOpenDropdown);
  return (
    <Dropdown
      dropdownData={args.dropdownData}
      onSelectItem={args.onSelectItem}
      isOpenDropdown={isOpen}
    />
  );
};

---

또한 JSDoc을 이용하여 문서화와 컴포넌트를 이해하는 데 도움을 주도록 하였습니다.

JSDoc의 작성 위치는 코드의 직전에 작성하는 것이 일반적입니다.

/**
 * Dropdown 컴포넌트
 *
 * 사용자가 선택할 수 있는 항목들이 표시되는 드롭다운 메뉴 컴포넌트입니다.
 *
 * @param {string[]} dropdownData - 드롭다운에 표시될 항목 배열
 * @param {(item: string) => void} onSelectItem - 항목 클릭 시 호출되는 콜백 함수
 * @param {boolean} isOpenDropdown - 드롭다운 열림 상태
 * @returns {JSX.Element} 드롭다운 컴포넌트 JSX
 */
export const Dropdown = ({
  dropdownData,
  onSelectItem,
  isOpenDropdown,
}: DropdownProps) => {
  return (
    <div>
      {/* Dropdown logic */}
    </div>
  );
};

---

최종 결과는

잘나왔다!!!!

---

추가 사항

Chromatic

Chromatic은 GitHub와 통합하여 Storybook 기반의 UI 컴포넌트를 자동화된 방식으로 테스트, 배포, 리뷰할 수 있는 툴입니다. Storybook에서 정의된 컴포넌트를 기반으로 UI 변경 사항을 시각적으로 비교하고, CI/CD 파이프라인에 통합하여 자동화된 테스트를 제공합니다.

저희 팀은 Chromatic을 이용하여 Storybook CI/CD를 진행하기로 하였습니다.

푸시 또는 PR(풀 리퀘스트) 이벤트가 발생할 때, 자동으로 Storybook을 빌드하고 배포하기 때문에 로컬에서 pnpm or npm run storybook의 명령 실행을 통해 확인하지 않아도 됩니다.

Chromatic 사이트