next.js , tailwindcss, path alias storybook 세팅하기

할때마다 세팅방법 찾아보는게 지긋지긋하다

이런 세팅을 할때마다 꼭 문제가 발생합니다.

해결방법도 보통 전에 했던 방법과 비슷하게 하면 해결이 되곤하는데요

문제는 이게 여러가지 파일을 만져줘야하는 경우도 많고 하다보니

뭐 하나 빠뜨려서 잘 안되고 스트레스받고 그런 경우가 많다는 것입니다.

환경세팅 포스트는 유통기한이 짧긴하지만.. 없는것보단 나으니..

 

이번 글에서는 tailwindcss를 storybook과 통합하는 방법

nextjs에서 storybook을 사용하는 방법

그리고 path alias를 사용하는 모듈도 적절히 resolve 하는 방법을 다룹니다.

 

nextjs에서 storybook 깔기

npx storybook@latest init

간단합니다. 최신버전으로 깔아주시면 되겠습니다.

 

 

tailwindcss 를 스토리북에서 사용하기

tailwind.config.js의 content:[] 배열에 다음 코드를 추가합니다.

스토리폴더내부에서도 테일윈드를 쓰겠다는 의미입니다.

    "./stories/**/*.{js,ts,jsx,tsx,mdx}",

만약 나는 스토리폴더를 쓰지 않을거다. 하는 분들은 생략하셔도 좋습니다.

저는 스토리북 파일은 테스트파일과 마찬가지로 컴포넌트와 붙어있는게 좋다고 생각하기때문에

스토리폴더를 사용하지 않습니다.

 

.storybook/preview.ts

import type { Preview } from "@storybook/react";
import "../src/style/theme/global.css";
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

스토리북을 인스톨하고 나면 다음과 같은 파일이 생성되어있습니다.

여기서 자신이 tailwind css 설정을 해준 css 파일을 import 해야합니다.

 

저는 src/style/theme/global.css 파일에 tailwind 설정이 담긴 css 파일이 있어

이를 임포트했습니다.

 

.storybook/main.ts

import type { StorybookConfig } from "@storybook/nextjs";
import path from "path";
const config: StorybookConfig = {
  stories: ["../**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  staticDirs: ["../public"],
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        "@": path.resolve(__dirname, "../"),
      };
    }
    return config;
  },
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    "@storybook/addon-styling-webpack",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

다음은 프리뷰 파일과 함께 생성된 메인 파일입니다.

여기서는 path alias 설정과 정적 어셋 경로 지정

그리고 stories 폴더가 아닌 곳에서도 stories 라는 네이밍이 들어간 파일은

스토리 파일로 인식하겠다는 설정을 해줄 것입니다.

 

  stories: ["../**/*.stories.@(js|jsx|mjs|ts|tsx)"],

.stories. 이 포함된 파일은 스토리파일로 보겠다는 의미입니다.

  staticDirs: ["../public"],

다음은 staticasset에 대한 설정입니다.

 

여기까지 마치고 image 컴포넌트를 테스팅해봤는데 명시적으로 import문을 걸어줘야만

 

동작하는 사소한 찐빠가 있긴 합니다만 동작은 하네요

@ path alias 설정하기

  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        "@": path.resolve(__dirname, "../"),
      };
    }
    return config;
  },

다음은 저와같이 @ path alias 설정을 사용하시는 분들을 위한 설정입니다.

저는 next.js 프레임워크 위에서 동작하는 프로젝트이기때문에

별도의 종속성 없이 기본 path 모듈과 위 웹팩코드 설정만으로 설정을 할 수 있었습니다만

 

만약 이런 프레임워크를 사용하고 계시지 않으신 경우에는

별도의 webpack 플러그인 설치가 필요하실 수 있습니다.

 

import type { Meta, StoryObj } from "@storybook/react";
import ButtonAtom from "./button-atom";

const meta = {
  title: "atom/button",
  component: ButtonAtom,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
} satisfies Meta<typeof ButtonAtom>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    variant: "primary",
    children: "",
  },
};

잘 돌아가는지 테스트한번 해보겠습니다

 

기존 컴포넌트를 스토리북에 올려볼게요

 

잘되네요..

 

스토리북... 무겁고.. 버전올리면 맨날 터지고... 화가납니다만...

그래도 참 테스트하기는 편해서 안쓰기는 또 애매한...