[Storybook] 스토리북 환경 설정하기 (with Styled-component)

서론

웹 UI 개발에 빠질 수 없는 라이브러리가 있다면 바로, 스토리북일 것입니다. 오늘은 스토리북 환경설하는 방법에 대해서 간단히 알아보겠습니다.

대상독자

• 스토리북을 처음 접하는 프론트엔드 개발 입문자.

오늘의 학습 목표

• storybook cli를 통해 리액트에서 스토리북 환경 설정을 하는 방법, 그리고 기본적으로 제공되는 파일들의 기능을 아는 것이 목표입니다.
• storybook 설정에 대해서 집중해서 알아보기 위해, 자동으로 많은 설정을 해주는 create-react-app 혹은 create-next-app을 사용하지 않았습니다. create-next-app을 사용한 후, storybook cli로 환경설정을 해줘도 같은 결과가 나타납니다. create-react-app와 같이, 이미 부트스트래핑된 환경에서 환경설정 해주기 위해선 해당 링크를 참조 바랍니다. 
• CSS in JS인 Styled-component로 스토리북 컴포넌트 활용하기

 

본론

스토리북 설치하기

npx -p @storybook/cli sb init --type react

스토리북 파일 구조 살펴보기

그러면 자동으로 다음과 같은 파일구조가 설정됩니다. 이 중에서도 설정과 관련된 파일들은 .stories 디렉토리에 생성됩니다. main.js와 preview.js가 그러합니다. 또 기본으로 생성되는 컴포넌트들(Button, Header, Page) 등이 있습니다.

├── .stories
│ ├── main.js
│ └── preview.js
├── node_modules
├── package-lock.json
├── package.json
└── stories
├── Button.stories.tsx
├── Button.tsx
├── Header.stories.tsx
├── Header.tsx
├── Introduction.stories.mdx
├── Page.stories.tsx
├── Page.tsx
├── assets
│ ├── code-brackets.svg
│ ├── colors.svg
│ ├── comments.svg
│ ├── direction.svg
│ ├── flow.svg
│ ├── plugin.svg
│ ├── repo.svg
│ └── stackalt.svg
├── button.css
├── header.css
└── page.css

이 중 main.js의 코드를 살펴보면

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

1) stories에는 storybook 파일을 불러올 수 있도록 스토리북 디렉토리 설정이 추가됩니다. 파일 위치에 따라, 해당 경로를 수정하면 stroybook 파일을 불러올 수 있게 됩니다.
2) addons은 일종의 storybook plugin입니다. addon-links와 addon-essentials가 자동으로 설치되네요.

스토리북에서 Styled-Component 사용하기

스토리북에서 Styled-Component를 사용하려면 preview.js에서 설정을 해줘야 합니다.

import React from "react";
import { StylesProvider } from "@material-ui/core";
import { ThemeProvider } from "styled-components";
import GlobalStyle from "../src/GlobalStyle";

export const decorators = [
  (Story) => (
    <ThemeProvider theme="default">
      <StylesProvider injectFirst>
        <GlobalStyle />
        <Story />
      </StylesProvider>
    </ThemeProvider>
  ),
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

preview 파일에선 다양한 설정을 해줄 수 있습니다. decorators에선 Mui에서 제공하는 StylesProvider로 Style-component의 스타일링 속성이 적용되도록 처리해줄 수 있습니다. 또한 Styled-component의 공통 스타일링 속성을 추가해줄 수도 있습니다. 그 외에 파라미터에 관한 설정도 할 수 있습니다.

스토리북 실행하기

npm run storybook 

이제 한번 실행해볼까요? 실행하시면 곧 바로 새로운 창에 스토리북 화면이 뜨는 것을 확인하실 수 있을 겁니다.

마무리

오늘은 storybook cli를 통해, 간단하게 storybook 프로젝트를 살펴보았습니다. 참고로 모노레포 환경에서 진행할 경우, 복수 프로젝트 파일에 스토리북을 각각 설치할 필요 없이, 설정이 필요한 프로젝트에서만 main.js 파일만 복사하여 사용하시면 됩니다. 오늘도 방문해주시고 읽어주셔서 감사합니다.