Storybook 설치 및 테마 설정하기

시작하기

Storybook은 React, Vue 및 Angular와 독립적으로 UI 구성 요소를 개발하기위한 오픈 소스 도구입니다.
뛰어난 UI를 체계적이고 효율적으로 구축 할 수 있습니다.
공식 홈페이지에서 자세한 내용을 알 수 있습니다.

설치하기

프로젝트 내부에서

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

storybook을 react 타입으로 설치를 해줍니다.

npm run storybook

설치가 완료 이후 실행을 합니다.

테마 설정하기

스토리 북 테마를 설치 합니다.

npm install -D @storybook/theming

.storybook폴더 내부에 theme.js, manager.js파일을 생성합니다

.storybook/theme.js

import logo from "./logo.svg";
import { create } from "@storybook/theming";

export default create({
  // theme dark or light
  base: "dark",

  // brand logo
  brandImage: logo,
  brandName: "logo name",
  brandUrl: "url"
});

.storybook/manager.js

import { addons } from "@storybook/addons";
import theme from "./theme";

addons.setConfig({ theme });

이후 다시 실행시켜주면 dark 테마로 변경되는것을 확인할 수 있습니다.