스토리북 배포하기

https://github.com/TEAM-DAWM/NUTSHELL-FE/pull/295

[DOCS] 스토리북 배포 by wrryu09 · Pull Request #295 · TEAM-DAWM/NUTSHELL-FE

 

 

chromatic workflow 연결까지는 yml 파일을 관련 문서

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/

Storybook Tutorials

에서 제공해주고 있기 때문에 secrets.CHROMATIC_PROJECT_TOKEN 을 사용하기 위해 깃허브 시크릿에 프로젝트 토큰을 넣어주고 야믈파일을 복붙해주면 쉽게 연결할 수 있었다.

그런데 pr 에 배포된 스토리북 주소를 댓글로 달아주는 기능을 만들고 싶어 

   - name: Create comment PR
        uses: thollander/actions-comment-pull-request@v2
        env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
           message: |
            🚀 Storybook 🚀
            - ${{ steps.chromatic.outputs.storybookUrl }}

이런 내용을 야믈파일에 추가했다.

그러나..

쓰기권한이 없어서 Resource not accessible by integration 이라는 에러메시지가 뜨고 실패했다

이를 위해서 다음과 같이 권한 설정도 야믈파일 안에서 해주니 잘 돌아갔다.

permissions:
  pull-requests: write
  contents: read

 

이제 워크플로우가 잘 돌아가면서 댓글은 잘 달렸는데...

 

url 이 비어서 안 뜨는 문제가 있었다. 잘못된 줄 알고 메시지를 수정해보기도 했으나 계속 뜨지 않았다

원인은 바로..

${{ steps.chromatic.outputs.storybookUrl }} 을 yml 파일에서 사용하고 있는데, steps의 chromatic 의 아웃풋에 접근하기 때문에chromatic 이라는 이름으로 id를 붙여줘야 이 링크에 접근해서 출력 가능하다.

 

그렇군.. 내가 id 를 안 써두고 id.output을 달라고 했으니 없을 수밖에 없다.

 

   steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - run: yarn
        #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@latest
        # Options required for Chromatic's GitHub Action
        id: chromatic
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

저 id 부분에 chromatic을 추가했다.

 

이제 잘 뜨게 되었다!