Vite + React + Typescript를 이용해서 NPM 배포하기 - 2

지난 번에 이어서 NPM에 내가 만든 라이브러리를 배포하는 방법에 대해 알아보는 시간을 갖겠습니다. 이번에는 Storybook을 이용해서 자신이 만들 컴포넌트를 미리 확인할 수 있도록 해보겠습니다. 

스토리북 설치

npx storybook@latest init

위의 명령어를 입력하고 설치가 완료되면 .storybook 폴더가 생기고 하위에 main.ts와 preview.ts 파일이 생성된다.

.storybook/main.ts를 보면, stories 필드가 있는데, story 파일을 읽을 수 있는 경로를 명시하고 있다. 

Button 스토리 작성

예시로, src/stories/button.stories.ts를 아래와 같이 작성하고 npm run storybook을 실행하면 구현한 컴포넌트를 미리 확인할 수 있다.

import type { Meta, StoryObj } from "@storybook/react";
import Button from "../components/button";

const meta = {
  title: "UI",
  component: Button,
} satisfies Meta<typeof Button>;

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

export const _Button: Story = {
  args: {
    children: "로그인",
  },
};

 

현재 저는 skeleton-loading-ui를 직접 제작하고 있습니다. 제작기에 대해서 계속해서 작성하도록 하겠습니다.