tailwind + chromatic + storybook 자동배포 세팅하기

storybook 설치하기

npx storybook@latest init

그럼 관련된 eslint 까지 쫙쫙 설치 진행해준다.

tailwind로 storybook 사용하기

먼저 tailwind를 설치해주삼

npm install -D tailwindcss

npx tailwindcss init

npm install -D tailwindcss postcss autoprefixer

이렇게까지 하고....
tailwind.config.js 파일에

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이렇게 작성해준다.
vite는 postcss를 사용하기 때문에 아래 파일도 꼭 ㄲ꼭 넣어주어야 한다.
postcss.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이렇게요~

배포

1. 크로마틱 사이트 들어가서 깃헙 계정으로 로그인한다.

organization의 허락이 있어야지 체크할 수 있다.

2. 크로마틱 설치

npm install --D chromatic

npx chromatic --project-token=<project-token>

크로마틱 서비스에서 제공해주는 프로젝트 토큰을 통해서 배포합니다.

이렇게 설치하면 위와 같은 문자가 뜨는데, 나는 github action을 통하여 배포를 진행할 것이기 때문에 project-token 을 github secrets에 저장해두었다. 그리고 package.json 에 있는거 삭제했다.

https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/review/

3. github action 만들기

name: Build & Deploy Storybook
on:
  pull_request:
    branches: [main]
    paths: ['src/components/common/**']

jobs:
  test:
    permissions:
      pull-requests: write
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Install dependencies
        run: npm install
      - uses: chromaui/action@v1
      - name: Publish to Chromatic
        id: chromatic
        run : npm run chromatic
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
      - name: comment PR  
        uses: thollander/actions-comment-pull-request@v2  
        with:  
          message: "🚀storybook: https://www.chromatic.com/builds?appId=64ace737dc3be00731907172"  

https://velog.io/@93minki/Storybook-Chromatic-%EC%9C%BC%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

트러블 슈팅

 npm install -D tailwindcss postcss autoprefixer