Commands

공통 동작

add, add-all은 seed-design.json 설정 파일을 사용해요.
설정 파일이 없거나 읽을 수 없으면 생성할지 먼저 물어봐요.
항목 추가 시 필요한 npm 패키지 의존성은 자동으로 설치돼요.
add, add-all 실행 시 스니펫이 요구하는 @seed-design/react, @seed-design/css 버전과 현재 프로젝트 버전이 다르면 경고를 보여줘요.
기존 파일과 내용이 다르면 기본적으로 덮어쓰기 / 백업 후 교체 / 건너뛰기를 선택할 수 있어요.
--on-diff 옵션을 주면 충돌 처리 방식을 미리 고정할 수 있어요.
실패 원인을 자세히 확인하려면 --verbose 옵션을 사용할 수 있어요.

init

seed-design.json 파일을 생성하는 명령어예요.

Configuration

seed-design.json 파일에 대해 알아봅니다.

init 명령어 입력하기

npx @seed-design/cli@latest init

seed-design 설정

◇  TypeScript를 사용중이신가요?
│  Yes
│
◇  React Server Components를 사용중이신가요?
│  No
│
◇  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
│  ./seed-design
│
◇  개선을 위해 익명 사용 데이터를 수집할까요?
│  Yes

옵션

옵션	설명
`-c, --cwd <cwd>`	작업 디렉토리. 기본값은 현재 디렉토리
`-y, --yes`	질문 없이 기본값으로 `seed-design.json` 생성
`--default`	Deprecated. `--yes`와 동일하게 기본값으로 생성
`--verbose`	실패 시 stack trace 등 상세 오류 정보 출력
`-h, --help`	도움말 출력

npx @seed-design/cli@latest init --yes

add

스니펫을 다운로드하고 프로젝트에 추가하는 명령어예요.

Snippet

자주 쓰이는 UI 패턴의 재사용을 돕는 스니펫에 대해 알아봅니다.

npx @seed-design/cli@latest add [...item-ids]

item-ids를 생략하면, 다운로드 가능한 항목을 인터랙티브하게 선택할 수 있어요.

npx @seed-design/cli@latest add

◆  추가할 항목을 선택해주세요 (스페이스 바로 여러 개 선택 가능)
│  ◻ ui:action-button
│  ◻ ui:alert-dialog
│  ◻ ui:callout
│  ◻ ui:checkbox
│  ◻ ui:switch
│  ◻ ui:text-field
│  ◻ ui:tabs
│  ◻ (deprecated) ui:old-component
│  ◻ ...
└

여러 항목을 직접 지정할 수도 있어요.

npx @seed-design/cli@latest add ui:action-button ui:alert-dialog

옵션

옵션	설명
`-c, --cwd <cwd>`	작업 디렉토리. 기본값은 현재 디렉토리
`-u, --baseUrl <baseUrl>`	레지스트리 base URL
`--on-diff <mode>`	파일 충돌 처리 방식 지정 (`overwrite` 또는 `backup`)
`-a, --all`	Deprecated. 현재는 에러를 출력하고 `add-all` 사용을 안내
`--verbose`	실패 시 stack trace 등 상세 오류 정보 출력
`-h, --help`	도움말 출력

baseUrl 사용하기

--baseUrl 옵션을 사용하면 스니펫을 다운로드할 레지스트리를 직접 지정할 수 있습니다.

기본값은 배포 환경 기준 https://seed-design.io입니다.

이 옵션은 특정 SEED React 패키지와 호환되는 스니펫이 필요한 경우 활용할 수 있습니다.

npx @seed-design/cli@latest add --baseUrl https://1-0.seed-design.pages.dev

npx @seed-design/cli@latest add --baseUrl https://1-1.seed-design.pages.dev

파일 충돌 처리

--on-diff를 지정하지 않으면, 기존 파일과 새 스니펫이 다를 때 아래 중 하나를 직접 고를 수 있어요.

덮어쓰기
기존 파일을 legacy-<파일명>-<timestamp>로 백업 후 교체
건너뛰기

add-all

레지스트리 단위로 항목을 한 번에 추가하는 명령어예요.

npx @seed-design/cli@latest add-all [...registry-ids]

모든 레지스트리의 모든 항목을 추가하려면 --all 옵션을 사용하세요.

npx @seed-design/cli@latest add-all --all # 모든 레지스트리의 모든 항목 추가

특정 레지스트리의 모든 항목을 추가할 수도 있습니다.

npx @seed-design/cli@latest add-all breeze # breeze 레지스트리의 모든 항목 추가

deprecated 항목을 포함하려면 --include-deprecated 옵션을 사용하세요.

npx @seed-design/cli@latest add-all ui --include-deprecated # ui 레지스트리의 모든 항목 추가 (deprecated 포함)

레지스트리 ID와 --all을 모두 생략하면, 추가할 레지스트리를 인터랙티브하게 선택할 수 있어요.

옵션

옵션	설명
`-a, --all`	모든 레지스트리의 모든 항목 추가
`--include-deprecated`	deprecated 항목 포함
`-c, --cwd <cwd>`	작업 디렉토리. 기본값은 현재 디렉토리
`-u, --baseUrl <baseUrl>`	레지스트리 base URL
`--on-diff <mode>`	파일 충돌 처리 방식 지정 (`overwrite` 또는 `backup`)
`--verbose`	실패 시 stack trace 등 상세 오류 정보 출력
`-h, --help`	도움말 출력

compat

현재 프로젝트의 @seed-design/react, @seed-design/css 버전과 스니펫 요구 버전이 호환되는지 검사해요.

npx @seed-design/cli@latest compat

기본값은 seed-design.json의 path 아래에 이미 추가된 스니펫만 검사해요.

호환성 이슈가 있으면 종료 코드 1, 문제가 없으면 0으로 종료돼서 CI/에이전트 환경에서도 바로 사용할 수 있어요.

특정 항목만 검사할 수도 있어요.

npx @seed-design/cli@latest compat ui:action-button ui:alert-dialog

컴포넌트 shorthand를 쓸 때는 -c 옵션을 사용해요.

npx @seed-design/cli@latest compat -c action-button -c alert-dialog

모든 registry 항목을 검사하려면 --all을 사용하세요.

npx @seed-design/cli@latest compat --all

옵션

옵션	설명
`-c, --component <component>`	검사할 컴포넌트 ID. 여러 번 또는 쉼표로 지정 가능
`-r, --registry <registryId>`	`--component`에 shorthand를 사용할 때 기본 registry 지정
`-a, --all`	모든 registry 항목 검사
`--cwd <cwd>`	작업 디렉토리. 기본값은 현재 디렉토리
`-u, --baseUrl <baseUrl>`	레지스트리 base URL
`--verbose`	실패 시 stack trace 등 상세 오류 정보 출력
`-h, --help`	도움말 출력

Commands

Configuration

Snippet

On this page