storybook.yml

name: Optimized Preview
on:
  pull_request:
    branches: ["main", "develop"]
    paths:
      - "frontend/**"

permissions:
  contents: read
  pages: write
  id-token: write
  pull-requests: write

jobs:
  storybook-preview:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20.11.1"

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT

      - name: Cache yarn dependencies
        uses: actions/cache@v3
        id: yarn-cache
        with:
          path: |
            ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('frontend/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install dependencies
        run: |
          cd frontend
          yarn install --prefer-offline --frozen-lockfile

      - name: Build Storybook
        run: |
          cd frontend
          yarn build-storybook

      - name: Publish to Chromatic
        uses: chromaui/action@v1
        id: publish-to-chromatic # id 추가
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}
          workingDir: frontend
          storybookBuildDir: storybook-static
          onlyChanged: true
          exitZeroOnChanges: true

      - name: Get current time
        uses: josStorer/get-current-time@v2
        id: current-time
        with:
          format: "YYYY년 MM월 DD일 HH시 mm분 ss초"
          utcOffset: "+09:00"

    outputs:
      storybook_url: ${{ steps.publish-to-chromatic.outputs.storybookUrl }}

  github-bot-storybook:
    needs: [storybook-preview]
    runs-on: ubuntu-latest
    steps:
      - name: Comment on PR
        uses: thollander/actions-comment-pull-request@v2
        with:
          comment_tag: ${{github.event.number}}-storybook
          message: |
            💄 Storybook: ${{ needs.storybook-preview.outputs.storybook_url }}  # 출력된 URL 참조