06. test + CI & Changesets 설정

[aahreum]

🚀 CI & Release 파이프라인 구축

• 워크플로우 테스트를 위해 base를 main으로 설정했습니다.

🧑‍⚖️ Changesets 도입

• @changesets/cli 루트에 설치
• 패키지별 독립 버전(Independent Versioning) 전략 적용
• main PR에서 배포 영향 코드 변경 시 changeset 필수 검증

---

🎨 Chromatic

chromatic.yml

• dev 브랜치 PR에서만 실행 (지금은 테스트를 위해서 main도 추가했습니다)
• apps/storybook/**, packages/** 변경 시 트리거
• PR에 Storybook Preview 링크 자동 코멘트
• GitHub Step Summary 출력
• Discord로 배포 링크 알림 전송

👉 UI 변경사항을 시각적으로 확인 가능하도록 구성

---

🧪 CI (코드 품질 검증)

ci.yml

• dev / main PR 대상
• pnpm + turbo 기반 검증

검증 항목

• LS-Lint
• ESLint
• Typecheck
• Test
• Build

Turbo 캐시 전략

key: turbo-${{ runner.os }}-${{ github.ref }}

→ 브랜치 단위 캐시 적용

---

📦 Release Ready (배포 준비 검증)

release-ready.yml

• main PR에서만 실행
• packages 변경 감지 후 changeset 필수 여부 검사

제외 파일

• .test.ts(x)
• .stories.tsx
• .md, .mdx

👉 실제 배포 코드 변경일 때만 changeset 강제

---

🚀 Release (npm 배포)

release.yml

• main 브랜치 push 시 실행
• Changesets 기반 Release PR 전략 사용

동작 흐름

1. main push
2. unreleased changeset 존재 시 → Release PR 생성
3. Release PR merge 시 → npm publish
4. publish 성공 시 → Discord 알림 전송

---

🧩 최종 파이프라인 구조

PR → CI (품질 검증)
   → Chromatic (UI 검증)

dev → main PR
   → Release Ready (changeset 검증)

main merge
   → Release PR 생성
   → Release PR merge
   → npm publish
   → Discord 알림

[github-actions]

🎨 스토리북 배포 링크 확인

• 🔗 Storybook: https://69a1914cee031a546b3446cd-doweaodfug.chromatic.com/
• 🧩 Build: https://www.chromatic.com/build?appId=69a1914cee031a546b3446cd&number=5

[github-actions]

🎨 스토리북 배포 링크 확인

• 🔗 Storybook: https://69a1914cee031a546b3446cd-liqcxazeyc.chromatic.com/
• 🧩 Build: https://www.chromatic.com/build?appId=69a1914cee031a546b3446cd&number=6