Shorts

storybook 세팅

2 minute read
2024-07-15

일단 기준은 vite 로 한다. 세팅법 참고는 공식 문서를 참고했다.


초기화

npx storybook@latest init


nextjs 도 (npx create-next@latest) 로 시작한 프로젝트도 이것만 해도 더이상 할 게 없다.


image-20240715195118480


나는 프로젝트가 pnpm 패키지 매니저를 사용하고 있기 때문에 이에 맞게 초기화 해주었다.


snippet

vscode snippet 을 이용해서 반복된 타이핑을 줄일 수 있다.


snippets/typescriptreact.json
 "Storybook Meta Template": {
  "prefix": "storybook-template",
  "body": [
    "import type { Meta, StoryObj } from '@storybook/react';",
    "import $0 from './$0';",
    "",
    "const meta: Meta<typeof $0> = {",
    "  title: 'ETC/$0',",
    "  component: $0,",
    "  parameters: {",
    "    layout: 'centered',",
    "  },",
    "  tags: ['autodocs'],",
    "  // argTypes: {},",
    "  // args: {},",
    "} satisfies Meta<typeof $0>;",
    "",
    "export default meta;",
    "type Story = StoryObj<typeof $0>;",
    "",
    "export const Base: Story = {",
    "  // args: {},",
    "};"
  ],
  "description": "Generate a Storybook meta template for *.stories.{ts|tsx} files"
}


NextJS

똑같이 초기화 해주고


스토리북에서 tailwindCSS 를 적용하기 위해선 preview.ts 에서 css 파일을 적용해줘야 한다.


.storybook/preview.ts
import '../src/app/styles/globals.css';