06. test + CI & Changesets 설정

[Jihyun0522]

작업 내용

CI 자동화, 스토리 테스트, 버전 관리를 위한 초기 세팅을 진행

파일 구조

study/
├── .github/
│   └── workflows/
│       ├── ci.yml         # lint, typecheck, build, test 자동 실행
│       ├── chromatic.yml # 스토리 변경 시 Chromatic 배포
│       └── release.yml   # main 머지 시 버전 업데이트 및 배포
└── .changeset/
│   └── config.json       # Changesets 설정
└── .ls-lint.yml

주요 설정

CI (ci.yml)

push와 PR 모두에서 실행되도록 설정했습니다.

• push — main, dev, feat/** 브랜치에 코드가 올라올 때 실행됩니다.
• pull_request — main, dev, feat/** 브랜치를 대상으로 하는 PR이 생성되거나 업데이트될 때 실행됩니다.

실행 순서는 아래와 같습니다.

1. pnpm install --frozen-lockfile — lock 파일 기준으로 정확한 버전을 설치합니다.
2. pnpm typecheck — TypeScript 타입 오류를 검사합니다.
3. pnpm lint — ESLint 규칙을 검사합니다.
4. pnpm build — 전체 패키지를 빌드합니다.
5. pnpm test — 스토리 테스트를 실행합니다.

Test

turbo.json에 test 태스크를 추가하고 apps/storybook에 vitest 설정을 완료했습니다.
실제 테스트 코드는 컴포넌트 작업 시 함께 작성할 예정이라 현재 단계에서는 테스트 파일을 추가하지 않았습니다.

Chromatic (chromatic.yml)

스토리 파일이나 MDX가 변경됐을 때만 실행되도록 paths를 설정했습니다.
불필요한 Chromatic 실행을 줄여 스냅샷 비용을 절약하기 위해서입니다.

PR이 완료되면 Storybook URL과 빌드 URL을 PR에 자동으로 코멘트합니다.

Changesets (release.yml)

main 브랜치에 머지될 때만 실행됩니다.
changeset 파일이 있으면 버전 업데이트 PR을 자동으로 생성하고, 버전 업데이트 PR이 머지되면 npm에 자동으로 배포합니다.

사용 방법
기능 개발 후 PR을 올리기 전에 아래 명령어로 changeset 파일을 생성합니다.

pnpm changeset

생성된 .changeset/*.md 파일을 PR에 함께 커밋합니다.

제외한 항목

GitHub Secrets 설정(CHROMATIC_PROJECT_TOKEN, NPM_TOKEN)은 이번 PR에서 제외했습니다.
Chromatic 배포와 npm 배포가 실제로 필요한 시점에 별도로 진행할 예정입니다.

현재 CI의 pnpm test 단계는 스토리 파일이 없어 실패합니다.
컴포넌트 작업 시 스토리 파일이 추가되면 정상적으로 통과될 예정입니다.

고민한 점

CI on 설정

push만 유지할지, pull_request도 포함할지 고민했습니다.
PR 단계에서 CI가 실행되면 머지 전에 문제를 미리 발견할 수 있어서 둘 다 포함하는 방식으로 결정했습니다.

feat/** 브랜치 포함 여부

feat/** 브랜치를 포함하면 작업 중에도 CI가 실행되어 문제를 빠르게 발견할 수 있습니다.
GitHub Actions 사용량이 늘어나는 단점이 있지만 현재 스터디 프로젝트에서는 안전성이 더 중요하다고 판단했습니다.