@teamsparta/stack-framer

TeamSparta Stack design system components for Framer.

Development

# 개발 모드 (watch 모드)
pnpm dev

# 빌드
pnpm build

# 빌드 후 자동으로 정적 파일 서버 시작
pnpm build:serve

# 빌드된 파일만 서빙 (dist 폴더가 있을 때)
pnpm serve

# 코드 린팅
pnpm lint

# 코드 린팅 및 자동 수정
pnpm lint:fix

Release Management

이 프로젝트는 Changesets을 사용하여 버전 관리와 배포를 자동화합니다.

새로운 변경사항 추가

# changeset 생성 (변경사항 설명 및 버전 범위 선택)
pnpm changeset

배포 프로세스

• Main 브랜치: 정규 버전으로 npm에 배포 (예: 1.0.0, 1.1.0)
• Pull Request & Stage 브랜치: pkg.pr.new를 통한 미리보기 패키지 자동 생성

미리보기 패키지 설치

PR이나 stage 브랜치에서 자동으로 생성되는 미리보기 패키지:

# PR별 미리보기 패키지 (PR 댓글에서 확인 가능)
npm install https://pkg.pr.new/@teamsparta/stack-framer@pr-123

# Stage 브랜치 최신 버전
npm install https://pkg.pr.new/@teamsparta/stack-framer@stage

Setup

Main 브랜치 배포를 위한 설정

GitHub repository secrets에 다음을 설정해야 합니다:

• NPM_TOKEN: npm 배포를 위한 토큰 (npm access tokens 페이지에서 생성)

pkg.pr.new 미리보기

별도 설정 없이 자동으로 작동합니다. PR과 stage 브랜치에 push하면 자동으로 미리보기 패키지가 생성됩니다.

Static File Serving

빌드 완료 후 http://localhost:3000에서 빌드된 파일들에 접근할 수 있습니다:

• CommonJS: http://localhost:3000/index.js
• ES Module: http://localhost:3000/index.mjs
• Framer Component: http://localhost:3000/Framer.js
• Type Definitions: http://localhost:3000/index.d.ts

환경 변수

• PORT: 서버 포트 번호 (기본값: 3000)

PORT=8080 pnpm build