Next.js + Storybook + Typescript 기본틀

설치

1. Next.js + Typescript 설치
   npx create-next-app@latest --ts
2. 스토리 북 설치
   npm i -D sb
3. 스토리 북 초기 라이브러리 설치
   npx sb init

기본 세팅

1. global style을 읽을 수 있도록 preview.js에 import
   import '../styles/globals.css';

2. storybook파일을 읽을 수 있도록 main.js에 경로를 수정한다.

module.exports = {
  stories: [
    // 기본
    // "../stories/**/*.stories.mdx",
    // "../stories/**/*.stories.@(js|jsx|ts|tsx)"
    // 직접 경로 설정
    // '../src/components/*.stories.mdx',
    // '../src/components/*.stories.@(js|jsx|ts|tsx)',
    // 포괄적인 경로 설정
    '../**/*.stories.mdx',
    '../**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/react',
};

기본적인 tsx파일과 stories.tsx 파일

Button.tsx

import styled, { css } from 'styled-components';

interface ButtonProps {
  size?: 'small' | 'medium' | 'large';
  color?: string;
}

export default function Button({ size = 'medium', color, ...props }: Button2Props) {
  const Button = styled.button`
    color: ${color || 'yellow'};
    ${size === 'small' &&
    css`
      padding: 6px;
    `}
    ${size === 'medium' &&
    css`
      padding: 10px;
    `}
    ${size === 'large' &&
    css`
      padding: 16px;
    `}
  `;
  return <Button {...props}>버튼</Button>;
}

Button.stories.tsx

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

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

const template: ComponentStory<typeof Button2> = args => <Button2 {...args} />;

export const Primary = template.bind({});
Primary.args = {
  size: 'medium',
  color: 'blue',
};