Storybook + styled-component

settings about styled-component - styled-components

---

storybook 사용은 npx로 설치하고 npm run 으로 돌리면 바로 수행되지만 styled-component의 props을 사용하려고 할 때 에러 발생 -> ThemeProvider를 감싸주는 데코레이터가 없기 때문

또한 엄청난 에러라인이 발생하는데 절대경로 설정해주지 않아서 나는거 임 "거의"

절대경로

//main.js

const path = require("path");
module.exports = {
  stories: [
    //.stories를 읽을 경로도 잘 지정해주어야 한다. default에 있는 폴더 외에 스토리를 작성할 때 변경
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-styled-component-theme",
  ],
  framework: "@storybook/react",
  //경로설정라인
  webpackFinal: async (config) => {
    config.resolve.modules = [
      path.resolve(__dirname, ".."),
      "node_modules",
      "styles",
    ];
    config.resolve.alias = {
      ...config.resolve.alias,
      components: path.resolve(__dirname, "../components"),
      assets: path.resolve(__dirname, "../assets"),
    };
    return config;
  },
   //경로설정라인
};

데코레이터 설정

npm i storybook-addon-styled-component-theme - addon 설치

//~~.stories.tsx
export default {
  title: "Atomics/Button",
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: { control: "color" },
    disabled: { control: "boolean" },
  },
  //ThemeProvider로 감싸주면 끝.
  decorators: [
    (Story) => (
      <ThemeProvider theme={theme}>
        <Story />
      </ThemeProvider>
    ),
  ],
} as ComponentMeta<typeof Button>;

여담 : 티스토리 글작성 2번누르면 같은 글 2개 생기네;;