@teamsparta/stack-codemod

TeamSparta 구 디자인 시스템 마이그레이션을 위한 도구입니다.

사용법

npx로 실행하기

기본 사용법

npx @teamsparta/stack-codemod transform <버전> <마이그레이션-타입> --path <경로>

예시:

# v1 버전의 텍스트 마이그레이션 실행
npx @teamsparta/stack-codemod transform v1 text --path "./src"

# v1 버전의 폰트 스타일 마이그레이션 실행
npx @teamsparta/stack-codemod transform v1 font --path "./src"

# v1 버전의 컬러 스타일 마이그레이션 실행
npx @teamsparta/stack-codemod transform v1 color --path "./src"

사용 가능한 마이그레이션 타입 확인

특정 버전에서 사용할 수 있는 마이그레이션 타입을 확인할 수 있습니다:

npx @teamsparta/stack-codemod list v1

CLI 옵션

# 기본 사용법
npx @teamsparta/stack-codemod transform v1 font --path "./src"

# Dry run (파일 변경 없이 실행)
npx @teamsparta/stack-codemod transform v1 color --dry

# 특정 파서 지정 (기본값: tsx)
npx @teamsparta/stack-codemod transform v1 font --parser=babel

# 특정 확장자 지정
npx @teamsparta/stack-codemod transform v1 color --extensions js,jsx,ts,tsx

# 상세 로그 출력
npx @teamsparta/stack-codemod transform v1 font --verbose

# 특정 파일/폴더 무시
npx @teamsparta/stack-codemod transform v1 text --ignore "**/test/**" "**/node_modules/**"

# 커스텀 매핑 사용
npx @teamsparta/stack-codemod transform v1 color --mapping "./custom-mapping.json"

사용자 정의 매핑 사용

몇몇 codemod의 경우 기본 매핑 대신 사용자 정의 매핑을 사용할 수 있습니다:

# 사용자 정의 매핑 확인

npx @teamsparta/stack-codemod list v1

# 응답
# ℹ v1 버전에서 사용 가능한 마이그레이션 타입:
# - font 커스텀 매핑 지원 <- 지원인 경우 커스텀 매핑 사용 가능
# - color 커스텀 매핑 지원
# - text 커스텀 매핑 지원

# 커스텀 매핑 사용 방법:
  # npx @teamsparta/stack-codemod transform <버전> <마이그레이션-타입> -m <매핑-파일-경로>

# JSON 파일에서 매핑 로드
npx @teamsparta/stack-codemod transform v1 color -m "./custom-mapping.json"

매핑 파일 예시

매핑 파일은 JSON 형식이어야 합니다:

{
  "wHeader1": "customHeroTitle",
  "wBody1": "customBodyB",
  "mBody2": "customBodyM"
}

마이그레이션 내용

v1 버전 마이그레이션

폰트 마이그레이션

• 기존 폰트 스타일을 새로운 디자인 시스템 폰트로 마이그레이션
• import 구문 자동 업데이트
• 예: @teamsparta/design-system → @teamsparta/stack-font

텍스트 마이그레이션

• 기존 텍스트 컴포넌트를 새로운 디자인 시스템 컴포넌트로 마이그레이션
• import 구문 자동 업데이트
• 예: @teamsparta/design-system → @teamsparta/stack-text

컬러 마이그레이션

• 기존 컬러 토큰을 새로운 디자인 시스템 컬러로 마이그레이션
• import 구문 자동 업데이트
• 예: @teamsparta/design-system → @teamsparta/stack-tokens

지원하는 파일 형식

• TypeScript (.ts, .tsx)
• JavaScript (.js, .jsx)

주의사항

1. 마이그레이션 전 반드시 코드를 커밋하세요.
2. 큰 프로젝트의 경우 --dry --verbose 옵션으로 먼저 테스트해보세요.
3. 마이그레이션 후 코드 리뷰를 통해 변경 사항을 확인하세요.
4. 완벽하지 않습니다. 수동으로 수정해야 할 수도 있습니다.
5. 커스텀 매핑을 사용할 경우 기존 매핑과의 충돌을 주의하세요.