@teamsparta/stack-framer/README.md

stack framer

# @teamsparta/stack-framer

TeamSparta Stack design system components for Framer.

## Development

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

# 빌드
pnpm build

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

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

# 코드 린팅
pnpm lint

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

## Release Management

이 프로젝트는 [Changesets](https://github.com/changesets/changesets)을 사용하여 버전 관리와 배포를 자동화합니다.

### 새로운 변경사항 추가

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

### 배포 프로세스

- **Main 브랜치**: 정규 버전으로 npm에 배포 (예: 1.0.0, 1.1.0)
- **Pull Request & Stage 브랜치**: [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new)를 통한 미리보기 패키지 자동 생성

### 미리보기 패키지 설치

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

```bash
# 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)

```bash
PORT=8080 pnpm build
```