Nextjs + Storybook

프로젝트 스토리북 초기화

npx sb init --builder webpack5

nextjs v11 이상부터는 webpack5 를 사용하여 성능 향상
바로가기

.storybook/main.js

const path = require("path");

module.exports = {
	stories: ["../**/*.stories.@(js|jsx|ts|tsx)"],
	addons: [
		"@storybook/addon-links",
		"@storybook/addon-essentials",
		"@storybook/addon-postcss",
	],
	framework: "@storybook/react",
	webpackFinal: async (config) => {
		config.resolve.alias = {
			...config.resolve.alias,
          	// 절대 경로 추가
			components: path.resolve(__dirname, "../components"),
			styles: path.resolve(__dirname, "../styles"),
			pages: path.resolve(__dirname, "../pages"),
		};
		return config;
	},
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": [
        "components/*"
      ],
      "pages/*": [
        "pages/*"
      ],
      "styles/*": [
        "styles/*"
      ]
    },
    ...
  },
  ...
}

절대 경로를 지원하기 위해 설정

stories 파일 생성

import { ComponentStory, ComponentMeta } from "@storybook/react";

import Modal from ".";

export default {
	// 분류 및 작명
	title: "Components/Modal",
  	// 렌더링 타켓
	component: Modal,
  	// 공통 args
	args: {
		title: "제목 입니다",
	},
} as ComponentMeta<typeof Modal>;

// 기본 템플릿
const Template: ComponentStory<typeof Modal> = (args) => (
	<Modal {...args}>MODAL 입니다</Modal>
);

// 템플릿 활용해서 상황별 args 추가
export const FullModal = Template.bind({});
FullModal.args = {
	show: true,
	onClose: () => console.log("닫기"),
	size: "full",
};

export const MiniModal = Template.bind({});
MiniModal.args = {
	...FullModal.args,
	size: "mini",
};

개발중인 모달 컴포넌트를 사용했다

결과

yarn storybook

args 에 전달한 값을 변경해 사용자가 즉시 값을 확인할 수 있다
추가로 DOCS를 활용하기 위해서 MDX 를 작성해야 한다
MDX 를 사용해서 문서화하는 것을 추천!

import { Canvas, Meta, Story } from "@storybook/addon-docs";

import Modal from ".";
Modal.displayName = "Modal";

<Meta title="MDX/Modal" component={Modal} />

export const Template = (args) => <Modal {...args} />;

# Modal

We can drop it in a `Canvas` to get a code snippet:

<Canvas>
	<Story
		name="negative"
		args={{
			title: "제목 입니다",
			show: true,
			size: "mini",
			onClose: () => console.log("닫기"),
		}}
	>
		{Template.bind({})}
	</Story>
</Canvas>