[React] Storybook 사용

Storybook 사용

• Storybook 설치
  • cmd 프로젝트 위치에서 npx storybook@latest init
  • http://localhost:6006/ 접속 후 확인
• Storybook tailwind 적용
  • .storybook 폴더- previews.ts 파일 안에 import '../src/index.css'; import 하기
    • previews.ts

    import type { Preview } from '@storybook/react';
    **import '../src/index.css';  // 추가!** 
    
    const preview: Preview = {
    

    • index.css (파일 안에 tailwind가 있어야 함)

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    

• Storybook 서버 가동
  • cmd 프로젝트 위치에서 yarn storybook
  • http://localhost:6006/ 접속
• 예시
  • 버튼 만들기
    • Button.stories.tsx 파일 생성

    import { Meta, StoryObj } from '@storybook/react';
    import { Button } from './Button';
    
    const meta: Meta<typeof Button> = {
      component: Button,
      title: 'Button',
      tags: ['autodocs'],
    };
    
    export const Primary: StoryObj<typeof Button> = {
      args: {
        variant: 'primary',
        children: 'Sign In',
      },
    };
    
    export const Danger: StoryObj<typeof Button> = {
      args: {
        variant: 'danger',
      },
      render: (args) => <Button {...args}>Remove</Button>,
    };
    
    export const Others: StoryObj<typeof Button> = {
      render: () => (
        <div className='border'>
          <Button variant='default' className='p-7' style={{ color: 'yellow' }}>
            Primary
          </Button>
          <Button variant='primary' className='p-7'>
            Primary
          </Button>
          <Button onClick={() => alert('danger')} variant='danger' className='p-7'>
            Danger
          </Button>
        </div>
      ),
    };
    
    export default meta;
    
    

    • Storybook에서 확인

      •