Storybook 브랜드 로고 변경하기

해결방법

스토리북 테마 생성 퀵스타트
해당 링크에 더욱 자세히 설명되어 있습니다.

0. 시작하기에 앞서

해당 글은 Storybook 프로젝트로 초기화 후 진행할 수 있습니다.

1. .storybook 폴더에 테마 설정 파일 만들기

.storybook 폴더에서 원하는 파일명으로 테마 설정 파일을 만들면 됩니다. 저는 프로젝트 이름에 "Theme" 글자를 합쳐서 파일명으로 만들었습니다.

2. 테마 설정 파일에서 create 함수 호출

import { create } from '@storybook/theming/create';

export default create({
  brandImage: 'brand image 경로'
})

storybook/theming의 create 함수를 사용하여 Storybook 관련된 커스텀을 진행할 수 있습니다.

3. .storybook 폴더에 manager.js 파일 만들기

.storybook 폴더에서 manager.js (!!파일명 고정) 파일을 생성 후 @storybook/manager-api의 addons 객체를 불러와야 됩니다. 자동완성 기능 때문에 간혹 @storybook/addon-essentials의 addons 함수를 불러올 수 있는데 실행하면 오류가 발생합니다.

import { addons } from "@storybook/manager-api";
import YourTheme from "./YourTheme";

addons.setConfig({
  theme: YourTheme
});

yarn storybook을 실행하면 아래와 같이 변경된 모습을 확인할 수 있습니다.