@toss-design-system에서 마이그레이션

🚫

Deprecation Notice

@toss-design-system/* scope의 패키지들은 더 이상 지원되지 않습니다. 해당 scope에 대한 npm 권한은 회수되었으며, 앞으로 새로운 버전이 배포되지 않습니다.

모든 사용자는 @toss/tds-* scope의 패키지로 마이그레이션해야 합니다.

개요

기존 @toss-design-system/react-native 패키지를 사용하고 계셨다면, @toss/tds-react-native 패키지로 마이그레이션해야 합니다. 이 가이드에서는 자동화된 CLI 도구를 사용하여 쉽게 마이그레이션하는 방법을 안내합니다.

패키지 매핑

다음은 기존 패키지와 새 패키지 간의 매핑입니다:

기존 패키지	새 패키지	버전
`@toss-design-system/colors`	`@toss/tds-colors`	^0
`@toss-design-system/css-utils`	`@toss/tds-css-utils`	^0
`@toss-design-system/typography`	`@toss/tds-typography`	^0
`@toss-design-system/color-utils`	`@toss/tds-color-utils`	^0
`@toss-design-system/spring-easing`	`@toss/tds-spring-easing`	^0
`@toss-design-system/easings`	`@toss/tds-easings`	^0
`@toss-design-system/react-native`	`@toss/tds-react-native`	^1
`@toss-design-system/mobile`	`@toss/tds-mobile`	^2
`@toss-design-system/mobile-bedrock`	`@toss/tds-mobile-ait`	^1
`@toss-design-system/mobile-migration`	`@toss/tds-mobile-migration`	^2

CLI를 활용한 자동 마이그레이션

@toss/tds-migration CLI 도구를 사용하면 import path와 package.json dependencies를 자동으로 변환할 수 있습니다.

1. 마이그레이션 CLI 설치

# pnpm
pnpm add -D @toss/tds-migration
 
# yarn
yarn add -D @toss/tds-migration
 
# npm
npm install -D @toss/tds-migration

2. Import Path 마이그레이션

TypeScript/TSX 파일의 import path를 자동으로 변환합니다.

# pnpm
pnpm exec tds-migrate imports --path "src/**/*.{ts,tsx}"
 
# yarn
yarn tds-migrate imports --path "src/**/*.{ts,tsx}"
 
# npx
npx tds-migrate imports --path "src/**/*.{ts,tsx}"

변환 예시:

- import { Button } from '@toss-design-system/react-native';
- import { colors } from '@toss-design-system/colors';
+ import { Button } from '@toss/tds-react-native';
+ import { colors } from '@toss/tds-colors';

3. package.json Dependencies 마이그레이션

package.json의 dependencies를 자동으로 변환합니다.

# pnpm
pnpm exec tds-migrate deps --path "**/package.json"
 
# yarn
yarn tds-migrate deps --path "**/package.json"
 
# npx
npx tds-migrate deps --path "**/package.json"

변환 예시:

{
  "dependencies": {
-   "@toss-design-system/react-native": "1.2.1",
-   "@toss-design-system/colors": "0.1.0"
+   "@toss/tds-react-native": "^1",
+   "@toss/tds-colors": "^0"
  }
}

4. 전체 마이그레이션 (한 번에 실행)

import path와 package.json을 모두 마이그레이션합니다.

# pnpm
pnpm exec tds-migrate all --path "."
 
# yarn
yarn tds-migrate all --path "."
 
# npx
npx tds-migrate all --path "."

5. 패키지 재설치

마이그레이션 후 패키지를 다시 설치합니다.

# pnpm
pnpm install
 
# yarn
yarn install
 
# npm
npm install

CLI 옵션

옵션	설명	기본값
`-p, --path <path>`	마이그레이션 대상 경로 (glob 패턴)	`*/.{ts,tsx}` / `**/package.json`
`--tsconfig <path>`	tsconfig.json 경로	`tsconfig.json`
`--dry-run`	변경 없이 미리보기만	`false`

Dry-run 모드

실제 변경 전에 어떤 파일이 변경될지 미리 확인할 수 있습니다.

npx tds-migrate imports --path "src/**/*.{ts,tsx}" --dry-run

수동 마이그레이션

CLI 도구 대신 수동으로 마이그레이션하려면 다음 단계를 따르세요.

1. 새 패키지 설치

# pnpm
pnpm add @toss/tds-react-native@^1
pnpm remove @toss-design-system/react-native
 
# yarn
yarn add @toss/tds-react-native@^1
yarn remove @toss-design-system/react-native
 
# npm
npm install @toss/tds-react-native@^1
npm uninstall @toss-design-system/react-native

2. Import 경로 변경

IDE의 전역 검색 및 바꾸기 기능을 사용하여 import 경로를 변경합니다.

- import { Button, Switch } from '@toss-design-system/react-native';
+ import { Button, Switch } from '@toss/tds-react-native';

주의사항

⚠️

mobile-bedrock → mobile-ait 변경 (해당 패키지 사용 시)

@toss-design-system/mobile-bedrock 패키지는 @toss/tds-mobile-ait로 변경되었습니다. 패키지 이름만 변경된 것이 아니라, Provider 이름도 변경되었습니다.

CLI는 import 문과 JSX 엘리먼트를 모두 자동으로 변경합니다:

- import { TDSMobileBedrockProvider } from '@toss-design-system/mobile-bedrock';
+ import { TDSMobileAITProvider } from '@toss/tds-mobile-ait';
 
- <TDSMobileBedrockProvider>
+ <TDSMobileAITProvider>
    {/* ... */}
- </TDSMobileBedrockProvider>
+ </TDSMobileAITProvider>

문의

마이그레이션 중 문제가 발생하거나 문의사항이 있으시면 앱인토스 커뮤니티로 연락해 주세요.

Bar Chart