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 폴더- previews.ts 파일 안에 import '../src/index.css'; import 하기
- 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에서 확인
- 버튼 만들기
728x90
'Front-end > React' 카테고리의 다른 글
[React] Style 적용 (css) (0) | 2024.03.09 |
---|---|
[React] React 작업 환경 설정 및 프로젝트 생성 (0) | 2024.03.09 |
[React] Routing (0) | 2024.02.29 |
[React] Component Styling (0) | 2024.02.29 |
[React] React Hooks - browser storage (local storage, session storage) (0) | 2024.02.29 |