Tailwind CSS + Next.Js 12용 Storybook 설정 방법(기존 프로젝트)

추상적인

UI Component Documentation이란 하천은 가장 가까운 확장 도구는 바로Storybook 이다.
설명할 내용은 Utility-first CSS 프레임워크인Tailwind CSS을 적용한Next.Js 기반 Storybook을 작성하는 방법이다.

기존Storybook 에봐온Next.Js 12 적용 방법은 하기의 전기를 봐storybook cli 기능을 이용해서 프로젝트 설정을 하는 방식이다.
하지만 이 방법은 시간이 오래 걸리데다 실패율도 얻는다는 점이 있다.

npx sb init --builder webpack5

따라서 본 논문에서는 기존 프로젝트에 직접Storybook를 적용하는 방법을 소개하고자 한다.

기존 방법은 하기 관련 링크를 참조합니다.
https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

시작하기

원하는 프로젝트를 폴더에 Next.Js TypeScript + Tailwind CSS 프로젝트 생성


단말기

# Next.Js 프로젝트 생성
pnpm create next-app . --typescript

# Tailwind CSS 설치
pnpm add -D tailwindcss postcss autoprefixer

pnpm dlx tailwindcss init -p 

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

스타일/globals.css

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

Tailwind CSS 을 이용한 버튼 컴포넌트 Button.tsx 을 생성


구성 요소/Button.tsx

import type { FC } from 'react';

interface ButtonProps {
    name: string;
    className: string;
}

const Button: FC<ButtonProps> = ({ name, className }) => {
    return (
        <button className={`p-2 rounded-lg shadow-lg hover:shadow font-bold ${className}`}>
            {name}
        </button>
    );
};

export default Button;

index.tsx 다음과 함께 작성


페이지/index.tsx

import type { NextPage } from 'next';
import Button from '../components/Button';

const Home: NextPage = () => {
    return (
        <main className='w-[100vw] h-[100vh] flex justify-center items-center'>
            <div className='text-center'>
                <header className='mb-5'>
                    <h1 className='text-4xl font-bold text-pink-500'>Storybook</h1>
                    <h3 className='text-sm text-gray-400'>Next.JS, Tailwind CSS</h3>
                </header>
                <Button name={'Hello Tailwind CSS'} className={'bg-teal-400 text-white'} />
            </div>
        </main>
    );
};

export default Home;

시사


Storybook 관련 설치 패키지


단말기

# Storybook Core
pnpm add -D @storybook/addon-actions @storybook/addon-essentials @storybook/addon-links @storybook/builder-webpack5 @storybook/manager-webpack5 @storybook/react

# Storybook Addons
pnpm add -D @storybook/preset-scss css-loader sass sass-loader style-loader postcss-loader

# For Next.JS Public Serve
pnpm add -D serve

.storybook 폴더 생성 후 main.js , preview.js 생성

메모

눕힌 전용 폴더를 관리하지 않고 직접 컴포넌트 폴더에서 [filename].stories.ts 방식으로 관리할 것이기에 다음과 같이 적용 범위 설정

stories: [
        '../components/**/*.stories.@(js|jsx|ts|tsx)',
        '../pages/**/*.stories.@(js|jsx|ts|tsx)',
    ],

필수 요소를 메모한 addon은 Sass 관련, Next.Js 12 관련 addon

.storybook/main.js

module.exports = {
    stories: [
        '../components/**/*.stories.@(js|jsx|ts|tsx)',
        '../pages/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-actions',
        '@storybook/addon-essentials',
        {
            name: '@storybook/preset-scss',
            options: {
                cssLoaderOptions: {
                    modules: { localIdentName: '[name]__[local]--[hash:base64:5]' },
                },
            },
        },
        'storybook-addon-next',
    ],
    framework: '@storybook/react',
    core: {
        builder: 'webpack5',
    },
};

.storybook/preview.js

import '../styles/globals.css';

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

tsconfig.json 에 baseUrl 추가


tsconfig.json

{
    "compilerOptions": {
        ...
        "baseUrl": "."
        ...
    },
    ...
}

package.json 에 script 추가


패키지.json

{
    ...
    "scripts": {
        ...
        "storybook:dev": "start-storybook -p 6006 -s public",
        "storybook:prod": "serve storybook-static",
        "storybook:build": "build-storybook -s public"
    },
    ...
}

components 폴더에 Button.tsx 대응하는 Button.stories.tsx 생성자


구성 요소/Button.stories.tsx

import Button from './Button';
import { ComponentMeta, ComponentStory } from '@storybook/react';

export default {
    title: 'Button',
    component: Button,
    argTypes: {
        name: {
            control: 'text',
        },
        className: {
            control: 'text',
        },
    },
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Default = Template.bind({});

Default.args = {
    name: 'Hello Tailwind CSS',
    className: 'bg-teal-400 text-white',
};

storybook 구동후 Storybook Dashboard 확인


단말기

pnpm storybook:dev

시사



➕ Stackblitz 샘플

결론

본 게시물에서는 Next.Js 12 을 기준으로 Tailwind CSS 와 함께 StoryBook 을 적용하는 방법을 알아봤습니다.
현재 기준 (2022/08) StoryBook 이 Next.Js 12 에 가장 오래 걸리지는 않겠지만 구성 요소가 많은 UI 문서화 기능을 제공하는 StoryBook 자체 장점이 충분히 매력적인 선택지라고 생각한다.
StoryBook에는 위에 언급된 애드온 외에도 Tailwind CSS 다크 모드를 지원하는 Tailwind dark mode 포함된 다양한 애드온을 지원하고 있다.

하기 링크에서 더 많은 애드온을 확인할 수 있다.
SB 애드온 링크: https://storybook.js.org/addons/