진행중인 프로젝트에 스토리북 도입하기.

왜 스토리북을 도입하려고 하였나요?

내가 구현해야하는 UI이다. 

그리고 아래 UI는 이미 구현해둔 UI 이다.

비슷하지만 조금다른 이 컴포넌트를 재활용하려고 했다.

 

하지만 HTML로 일일히 만들어둔 컴포넌트가 내가 원하는 형태인지 확인하는 과정이 귀찮았다.

이를 storybook을 사용했을 때 더 빠르게 확인이 가능하고 나는 확인된 컴포넌트로 UI를 완성만 하면 된다. 

이러한 장점으로 인해 storybook을 도입하자 라고 판단하였다.

 

Storybook 설치

 프로젝트에 루트에서 다음 명령어를 실행시킨다.

 npx storybook init

 

그러면 루트에 .storybook 폴더와 src/stories 폴더가 생성된다.

나는 src/stories 폴더는 삭제했다. 그 이유는 각 컴포넌트 폴더안에 해당 컴포넌트의 스토리북을 만들기로 계획을 했기 때문이다.

다음처럼 말이다.

 

 

이제 다음 에러를 만나게 될 것이다.

이는 리덕스 툴킷을 사용하고 있기때문에 provider 때문에 생긴 에러이다.

 

.storybook/preview.js 파일을 다음 코드로 수정해준다.

import { store } from '../src/store';
import { Provider } from 'react-redux';

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

export const decorators = [
  (Story) => (
    <Provider store={store}>
      <Story />
    </Provider>
  ),
]

 

또한 .storybook/main.js 파일을 다음 코드로 수정해준다.

아래코드로 수정하는 이유는 스토리북을 사용할때 assets 이미지를 사용하기때문에 현재 내 프로젝트의 이미지 폴더의 경로와 스토리북내의 이미지 경로때문에 에러가 생기는 문제가 발생하여 추가해주었다.

 

한줄로 간단하게 말하면 이미지 폴더 하나로 스토리북내에서 사용할 수 있게 되는 것이다.

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: '@storybook/react',
  webpackFinal: async config => {
    config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, '../src')];

    return config;
  },
};

 

짜잔! 정상적으로 동작하는 것을 확인할 수 있다.

 

Reference

https://storybook.js.org/docs/react/get-started/install/

https://stackoverflow.com/questions/51771077/storybook-with-absolute-paths

https://stackoverflow.com/questions/67376713/how-to-use-redux-toolkit-with-storybook