프로젝트 환경
- react: 18.2.0 (vite 5.0.8.)
- SCSS
- storybook: 8.0.2.
참고
https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/
Storybook Tutorials
Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community.
storybook.js.org
스토리북?
프로젝트의 컴포넌트들을 문서화하여 협업을 할 때 컴포넌트가 잘 만들어졌는지,
구성이 어떠한지 한눈에 알아볼 수 있게 도움을 주는 라이브러리 (UI 테스트)
스토리북 사용 방법
// 스토리북 설치
npx storybook@latest init
// 스토리북 실행
npm run storybook
실행하면 아래 사진처럼 작성한 컴포넌트의 스토리가 나타난다.
스토리북을 설치하면 .storybook 폴더와 stories 폴더가 생성된다.
.storybook 폴더에는 위 사진처럼 main.ts, preview.ts 파일이 있고
stories 폴더에는 예시 스토리 파일들이 저장되어 있다.
설치된 예시처럼 스토리 파일을 별도로 stories 폴더에 한번에 저장을 해두려다가
해당하는 컴포넌트 폴더 하위에 저장하는 것이 관리가 편할 것 같아서 아래 사진처럼 해두었다.
main.ts
메인 파일은 스토리북 설정파일이다.
메인 파일은 크게 변경한 부분 없이 기본설정 그대로 사용하였다.
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: ['@storybook/addon-onboarding', '@storybook/addon-links', '@storybook/addon-essentials', '@chromatic-com/storybook', '@storybook/addon-interactions'],
core: {
builder: '@storybook/builder-vite',
},
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
}
export default config
preview.ts
프리뷰 파일은 스토리가 그려질 화면에 관한 파일이다.
스토리북 화면에서 컴포넌트들이 중앙정렬되었으면 좋겠어서
layout: 'centered'를 추가해주었다.
import type { Preview } from '@storybook/react'
const preview: Preview = {
parameters: {
layout: 'centered',
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
}
export default preview
스토리 작성
import { Meta, StoryObj } from '@storybook/react'
import LinkButton from './LinkButton'
import { BrowserRouter } from 'react-router-dom'
const meta = {
title: 'Components/common/LinkButton',
component: LinkButton,
parameters: {
componentSubtitle: '링크 버튼 컴포넌트는 페이지 이동 시 사용하는 버튼입니다.',
docs: {
description: {
component: `<li>link: 이동할 경로를 입력합니다.</li><li>label: 버튼 텍스트를 입력합니다.</li><li>primary: 버튼 스타일 값으로 <span class='css-o1d7ko css-in3yi3'>'true' | 'false'</span> 중 하나를 선택할 수 있습니다.</li>
`,
},
},
},
decorators: (story) => (
<BrowserRouter>
<div style={{ width: '600px' }}>{story()}</div>
</BrowserRouter>
),
tags: ['autodocs'],
} satisfies Meta<typeof LinkButton>
export default meta
type Story = StoryObj<typeof meta>
export const Primary: Story = {
args: {
link: '/mumukji',
label: '페이지 이동 버튼',
primary: true,
},
}
export const Secondary: Story = {
args: {
link: '/mumukji',
label: '페이지 이동 버튼',
primary: false,
},
}
title에 입력한 내용으로 스토리북의 사이드바 메뉴가 구성된다.
parameters 객체의 값들은 스토리북 docs에 설명으로 추가된다.
decorators는 스토리 컴포넌트를 감싸는 부모컴포넌트를 추가할 수 있다.
LinkButton 컴포넌트는 Link태그로 작성하여서 스토리북에 단독으로 보여지게 되면
BrowserRouter를 입력하라는 오류가 계속해서 나타나는데
데코레이터 기능 덕분에 해당 오류를 해결했다.
tags: ['autodocs']를 추가해야 자동으로 해당 컴포넌트의 docs를 만들어준다.
Primary, Secondary 객체는 스토리북에서 보여지는 구성요소이다.
args에 입력한 값이 기본값으로 보여지고 controls 탭에서 테스트해 볼 수 있다.
별다른 설정없이 스토리 파일만 입력하면
사이트 형태로 가독성 좋게 컴포넌트를 확인할 수 있다는 점이 좋았고,
스토리북이 피그마 파일에도 연동이 가능하다고 해서 디자이너와 소통하기에도 좋을 것 같다.