storybook 세팅

1. 설치

• eslint 플러그인 추천해줘서 자동 설치
• npx sb init --builder webpack5 (초기화, nextjs v11 이상부터는 webpack5 를 사용하여 성능 향상)
• yarn storybook

2. 사용

• stories/components/~~
• stories/pages/~~
  식으로 폴더를 만들어서 관리 안그러면 폴더가 매우 보기싫게 늘어날거임.

// Home.stories.tsx
// 계속 추가하면됨.
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Home } from '../../pages/index';

export default {
  title: 'Pages/Home',
  component: Home,
} as ComponentMeta<typeof Home>;

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

export const Default = (args) => <Home />;

3. 이후 디자인 시스템에 적용
   https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/introduction/

4. 끝