pnpm dlx storybook@latest init

스토리북 설치하기

"next": "14.0.4",
"tailwindcss": "^3.3.0",
"@storybook/nextjs": "^7.6.6",
"@storybook/react": "^7.6.6",

기준으로 작성된 글입니다.

.storybook/main.ts

// .storybook/main.ts

import type { StorybookConfig } from "@storybook/nextjs";
import path from "path";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  staticDirs: ["../public"],

  // addons 부분은 그냥 스토리북 기본 설치했을 때 설정에서 변경하지 않았다.
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  webpackFinal: async (config) => {

// 필요함
    config.module?.rules?.forEach((rule: any) => {
      if (
        typeof rule !== "string" &&
        rule.test instanceof RegExp &&
        rule.test.test("test.css")
      ) {
        rule.exclude = /\.css$/i;
      }
    });


// 웹팩 설정에서 css 파일을 어떤 loader로 처리해줄 것인지 명시

// 사실 이부분은 없어도됨
    config.module?.rules?.push({
      test: /\.s[ac]ss$/i,
      use: ["style-loader", "sass-loader", "css-loader", "postcss-loader"],
    });

// 근데 얜 꼭 있어야함ㅋㅋ
    config.module?.rules?.push({
      test: /\.css$/i,
      use: ["style-loader", "css-loader", "postcss-loader"],
    });

// import alias 사용할 시 이 설정을 추가해준다. 필요없으면 안해줘도 됨.
    config.resolve = config.resolve || {};
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, "../src"),
    };
    return config;
  },
};
export default config;

뭐 framework를 react로 설정하고, core.builder로 webpack5를 설정해주고 어쩌고 하는거는 "나 넥스트 쓰는데 왜 !!!???" 라는 오기로 절대 적용하기싫어서 이거저거 해보다가 저렇게하면 된다는걸 깨달았다. 그리고나는 import alias사용할거라 넥스트 프리셋 못버려.

.storybook/preview.ts

// .storybook/preview.ts

import type { Preview } from "@storybook/react";

// globals.css 파일을 임포트 해주어야 한다.
import "../src/app/globals.css";

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

export default preview;

tailwind 프리셋을 사용해서 next 프로젝트를 생성하면 global.css가 자동으로 만들어짐

@tailwind base;
@tailwind components;
@tailwind utilities;

없으면 다음과같이 app 폴더 최상단에 만들어주도록 하자. 테일윈드는 예를 들자면 바닐라익스트랙(내가사용해서 익숙하니까 예시로 들었다)으로 누가 엄청나게 변태처럼 일일이 모든 스타일의 경우의 수를 지정해준 css 파일을 끌어다가 클래스명만 넣어서 쓰는거랑 같음. 그래서 global.css 파일에 해당 css파일을 임포트 해주면 누군가의 변태같은 작품을 내가 편하게 클래스명 만으로 스타일을 갖다쓸수있게되는것임.. 대단혀..

preview.ts에 global.css파일을 임포트 해주면 sass-loader 등에서 에러가 난다고 스토리북이 난리가 난다.

그래서 main.ts에 sass, scss, css 등의 파일이 들어오면 어떤 loader를 사용해줄것인지 꼭 명시해주어야 한다.

addon 으로 @storybook/addon-postcss를 설치하라는 블로그들도 많던데 사실 안해줘도 잘 돌아간다. 문제가 생긴다면 설치할것..

다른 블로그들 보면 next/image 도 preview에 임포트 해와서 unoptimize된 이미지로 다시 보여주도록 처리하던데, 그렇게 안해도 잘 돌아간다.(리모트 이미지는 잘 돌아감) 아직 프로젝트 내에서 이미지를 안불러와봐서 되는건지는 모르겠다. 이후 사용하면서 더 수정이 필요하다면 추가할 것.