[Hanaro] 32일차 / Storybook

04 React - Routing

• 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;
      
      

      • Storyboard에서 확인

      •