Front-end/React

[React] Storybook 사용

Bay Im 2024. 2. 29. 17:41

Storybook 사용

  • Storybook 설치
  • 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 서버 가동
  • 예시
    • 버튼 만들기
      • 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에서 확인
     
728x90