taskmate_fe/.github/workflows/ci.yml at develop · taskmate-sprint/taskmate_fe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
name: CI

on:
  pull_request:
    branches:
      - develop
      - main

# 댓글 쓰기 권한을 부여
permissions:
  contents: read
  pull-requests: write

jobs:
  # 1) Jest 등 — 브랜치 보호에서 "CI / Run Tests" 를 필수로 지정
  test:
    name: Run Tests
    runs-on: ubuntu-latest

    steps:
      - name: Github Repository 불러오기
        uses: actions/checkout@v5

      - name: pnpm 설치
        uses: pnpm/action-setup@v4

      - name: Node.js 설치
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm

      - name: 의존성(라이브러리) 설치
        run: pnpm install --frozen-lockfile

      - name: 테스트 실행하기
        run: pnpm run test --coverage

      - name: 빌드 실행하기
        run: pnpm run build

  # 2) Chromatic — 테스트가 성공한 뒤에만 실행
  #    브랜치 보호에서 "CI / Chromatic" 을 필수로 지정
  chromatic:
    name: Chromatic
    runs-on: ubuntu-latest

    steps:
      - name: Github Repository 불러오기
        uses: actions/checkout@v5
        with:
          fetch-depth: 0

      - name: pnpm 설치
        uses: pnpm/action-setup@v4

      - name: Node.js 설치
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm

      - name: 의존성(라이브러리) 설치
        run: pnpm install --frozen-lockfile

      - name: Run Chromatic
        id: chromatic_build
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          # 변경사항이 있을 때 빌드를 실패(exit code 1)로 만들어 머지를 차단
          exitZeroOnChanges: true
          # 변경된 파일과 관련된 스토리만 테스트하여 빌드 속도를 최적화
          onlyChanged: true

      # 빌드가 성공하든 실패하든(변경사항이 있든 없든) 항상 PR 코멘트를 남김
      - name: Comment PR with Chromatic results
        if: always()
        uses: marocchino/sticky-pull-request-comment@v2
        with:
          header: "chromatic-review" # 여러 번 실행되어도 코멘트를 하나로 유지(업데이트)
          message: |
            ### 🎨 UI Review (Chromatic)

            | 결과 | 상세 내용 |
            | :--- | :--- |
            | 🚀 **Storybook Preview** | [미리보기 바로가기](${{ steps.chromatic_build.outputs.storybookUrl }}) |
            | 🛠 **Build Details** | [Chromatic 빌드 리포트](${{ steps.chromatic_build.outputs.buildUrl }}) |

            > **알림:** 시각적 변경 사항이 발견되면 리뷰어가 Chromatic에서 승인해야 머지가 가능합니다.