Component Wiki CLI

shadcn 스타일의 CLI 도구로 Component Wiki에서 컴포넌트를 다운로드합니다.

로컬에서 사용 (npm 발행 전)

방법 1: npx로 로컬 경로 실행 (권장)

# CLI 디렉토리 경로를 직접 지정
npx /path/to/workspace/cli add <component-id> --registry http://localhost:4000

# 예시
npx /Users/junwon/dev/soongsil/team-project/problem-is-occured/workspace/cli add 73590081-6384-4135-9986-5f1d2c88944a --registry http://localhost:4000

# CLI 디렉토리에서 실행
cd /path/to/workspace/cli
npx . add <component-id> --registry http://localhost:4000

방법 2: node로 직접 실행

node /path/to/workspace/cli/bin/component-wiki.js add <component-id> --registry http://localhost:4000

방법 3: npm link (개발 환경)

cd /path/to/workspace/cli
npm link

# 이제 어디서든 사용 가능
component-wiki-cli add <component-id> --registry http://localhost:4000
cwiki add <component-id> --registry http://localhost:4000

npm 발행 후 사용

npm에 발행한 후에는 누구나 사용 가능합니다:

npx component-wiki-cli add <component-id>

사용법

기본 사용법

# 컴포넌트 다운로드
npx component-wiki-cli add abc123

# 짧은 별칭 사용
npx cwiki add abc123

서버 URL 지정

# 로컬 서버
npx component-wiki-cli add abc123 --registry http://localhost:4000

# 프로덕션 서버
npx component-wiki-cli add abc123 --registry https://api.example.com

출력 디렉토리 지정

# 특정 디렉토리에 저장
npx component-wiki-cli add abc123 --output ./components/ui

# 모든 옵션 함께 사용
npx component-wiki-cli add abc123 \
  --registry http://localhost:4000 \
  --output ./src/components

옵션

| 옵션 | 별칭 | 설명 | 기본값 | |------|------|------|--------| | --registry | -r | API 서버 URL | http://localhost:4000 | | --output | -o | 출력 디렉토리 | ./src/components/extracted |

예시

# 1. 기본 사용
npx cwiki add button-primary

# 2. 프로덕션 서버에서 다운로드
npx cwiki add button-primary --registry https://component-wiki.com

# 3. 특정 디렉토리에 저장
npx cwiki add button-primary --output ./components/buttons

# 4. 모든 옵션 사용
npx cwiki add card-premium \
  --registry http://localhost:4000 \
  --output ./src/components/cards

작동 방식

1. API 서버에서 컴포넌트 정보를 가져옵니다
2. 컴포넌트 파일을 지정된 디렉토리에 저장합니다
3. 필요한 의존성 설치 명령어를 안내합니다

전역 설치 (선택사항)

자주 사용한다면 전역으로 설치할 수 있습니다:

npm install -g component-wiki-cli

# 이제 npx 없이 사용 가능
component-wiki add abc123
cwiki add abc123

npm에 발행하기

이 CLI를 npm에 발행하려면:

cd cli
npm login
npm publish

발행 후 누구나 다음과 같이 사용 가능:

npx component-wiki-cli@latest add <component-id>

로컬에서 테스트

npm에 발행하기 전에 로컬에서 테스트:

cd cli
npm link

# 이제 전역 명령어로 사용 가능
component-wiki add abc123

# 테스트 완료 후 링크 제거
npm unlink -g component-wiki-cli

shadcn과 비교

| 기능 | shadcn | Component Wiki CLI | |------|--------|-------------------| | 사용법 | npx shadcn@latest add button | npx component-wiki-cli add <id> | | 서버 지정 | 내장 | --registry 옵션 | | 출력 디렉토리 | 프로젝트 설정 | --output 옵션 | | 의존성 설치 | 자동 | 안내만 제공 |