[Storybook & Github Action] - storybook 설치 chromatic 배포 github action 사용

심화프로젝트에 들어가며 프로젝트 세팅하는 과정중에 내가 storybook 세팅을 하게되었다.

🎨 storybook을 사용하면 좋은 이유

storybook은 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공한다.

⚙️ 스토리북 설치

1. 설치

npm install --save-dev @storybook/react

2. script 확인

package.json 파일의 scripts 섹션에서 storybook 스크립트가 올바르게 설정되어 있는지 확인해야한다. storybook은 6006포트를 사용하고있다.

"scripts": {
  "storybook": "storybook dev -p 6006"
}

3. 명령어 실행

npm run storybook

추가된 devDependencies

설치가 된 후 storybook 관련 폴더가 생성되었다.

기본 폴더 구조

폴더 구조 변경

📁 .storybook 폴더의 역할

1. 스토리 파일 경로 설정 : storybook이 로드할 스토리 파일의 경로를 정의
2. 애드온 설정 : 기능 확장 플러그인
3. framework 설정 : React와 Vite를 기반으로 storybook을 설정

📁 .stories 폴더의 역할

1. 컴포넌트 문서화 : 각 컴포넌트의 상태와 사용 사례를 문서화하여 팀원들이 컴포넌트의 동작 방식을 쉽게 이해
2. 컴포넌트 테스트 : 컴포넌트의 다양한 상태를 시각적으로 테스트할 수 있는 환경을 제공하여 예상대로 동작하는지 확인
3. 개발 생상성 향상 : 컴포넌트를 독립적으로 개발하고 테스트하여 문제를 빠르게 발견하고 수정
4. storybook 설정 : export default에서 스토리를 어떻게 보여줄지 설정

⚙️ Chromatic 설치 및 설정

1. 설치

npm install --save-dev chromatic

2. Chromatic 실행 스크립트 추가

"scripts": {
  "chromatic": "chromatic --project-token <your-project-token>"
}

<your-project-token>에 Chromatic에서 복사한 토큰을 입력

3. 실행

npm run chromatic

➕ GitHub Actions 워크플로 추가

.github/workflows/chromatic.yml파일을 생성하고 다음 내용을 추가

📋 복사

name: Chromatic Deployment

on:
  push:
    branches:
      - main  # 배포를 실행할 브랜치
  pull_request: # PR 생성 시에도 테스트
    branches:
      - "**"

jobs:
  chromatic:
    name: Run Chromatic
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16  # Node.js 버전 조정 가능

      - name: Install dependencies
        run: npm install

      - name: Run Chromatic
        run: npx chromatic --project-token ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

5. 프로젝트 토큰 설정

Chromatic 토큰을 GitHub Secrets에 저장해야 합니다

1) GitHub 리포지토리로 이동합니다.
2) Settings > Secrets and variables > Actions로 이동합니다.
3) New repository secret를 클릭합니다.
4) Name에 CHROMATIC\_PROJECT\_TOKEN을 입력하고, Value에 Chromatic 프로젝트 토큰을 붙여넣습니다.

이 과정을 완료하면 Chromatic이 GitHub Actions와 통합되어 자동화된 스토리 배포 및 테스트가 가능합니다. 🚀