Storybook Study 2week

Storybook 배포

1. Storybook 정적 파일로 빌드

yarn build-storybook

• storybook-static 폴더가 생성됨

2. Chromatic 설치

yarn add -D chromatic

• Chromatic에 로그인 & 프로젝트 생성
• 수동 배포 명령어 실행

yarn chromatic --project-token=<project-token>

3. 지속적 배포 설정 (GitHub Actions 사용)

mkdir .github && mkdir .github/workflows && touch .github/workflows/chromatic.yml

name: 'Chromatic Deployment'

on: push

jobs:
  chromatic:
    name: 'Run Chromatic'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - run: yarn
      - uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

• CHROMATIC_PROJECT_TOKEN을 Secrets에 추가
• 코드 push 시마다 Storybook 자동 배포

테스트

UI 테스트의 종류 (총 4가지)

테스트 종류	설명
수동 테스트	Storybook에서 개발자가 직접 UI 확인
접근성 테스트	@storybook/addon-a11y를 이용해 접근성 문제 탐지
컴포넌트 테스트	play 함수로 상호작용을 시뮬레이션하여 동작 검증
시각 회귀 테스트	UI 외관이 변경되었는지 스크린샷으로 비교

시각 회귀 테스트란

• UI의 스크린샷을 기준 이미지와 비교
• 레이아웃, 색상, 간격 등 미묘한 변화 감지 가능
• 예상치 못한 변경 사항을 자동 포착
• PR에 UI 변화 내용을 시각적으로 표시

Addon

• Storybook 기능을 확장하기 위한 플러그인

Controls란?

• Controls 애드온은 디자이너, QA, 개발자가 UI 컴포넌트의 props(args)를 실시간으로 조작할 수 있도록 해주는 기능
• 코드 없이도 Storybook의 애드온 패널에서 컴포넌트를 인터랙티브하게 조정
• 기본 Storybook 설치 시 포함되어 별도 설정 불필요

github

https://github.com/hyoseong1994/taskbox

chromatic

https://67f3c1a0eae193967de16f2b-polpgmwvfq.chromatic.com/