Storybook에서 Ant Design 사용하기

1. 프리셋 라이브러리 설치: npm i -D @storybook/preset-ant-design

2. 따로 antd 변수를 변경하지 않는다면 addons 배열에 "@storybook/preset-ant-design"만 추가하시면 됩니다.

antd 변수를 변경하여 사용한다면 .storybook/main.js 파일의 addons에 아래 부분을 추가합니다. primary-color 값에는 프로젝트에서 사용하는 primary color 값을 넣으시면 됩니다.

1{
2  name: '@storybook/preset-ant-design',
3  options: {
4    lessOptions: {
5      modifyVars: {
6        'primary-color': '#000',
7      },
8    },
9  },
10}

아래는 main.js 파일 예시입니다.

1module.exports = {
2  "stories": [
3    "../src/**/*.stories.mdx",
4    "../src/**/*.stories.@(js|jsx|ts|tsx)"
5  ],
6  "addons": [
7    "@storybook/addon-links",
8    "@storybook/addon-essentials",
9    {
10      name: '@storybook/preset-ant-design',
11      options: {
12        lessOptions: {
13          modifyVars: {
14            'primary-color': '#fc1150',
15          },
16        },
17      },
18    },
19  ],
20  webpackFinal: async (config) => {
21    ...
22    return config;
23  }
24}