|
1 |
| -# shadcn/ui monorepo template |
| 1 | +## packages 워크스페이스 내 pacakge 추가 |
2 | 2 |
|
3 |
| -This template is for creating a monorepo with shadcn/ui. |
| 3 | +### 기능 |
4 | 4 |
|
5 |
| -## Usage |
| 5 | +- 패키지 이름의 kebab-case 형식 검증 |
| 6 | +- 이미 존재하는 패키지 이름 중복 확인 |
| 7 | +- 일반 패키지 또는 React 패키지 생성 선택 가능 |
| 8 | +- 패키지 생성 후 자동 `pnpm install` 실행 |
| 9 | +- 패키지 사용법 안내 |
| 10 | + |
| 11 | +### 사용 방법 |
6 | 12 |
|
7 | 13 | ```bash
|
8 |
| -pnpm dlx shadcn@latest init |
| 14 | +turbo gen package |
9 | 15 | ```
|
10 | 16 |
|
11 |
| -## Adding components |
| 17 | +명령어 실행 후 다음 과정을 따라주세요: |
| 18 | + |
| 19 | +1. 패키지 이름 입력 (kebab-case 형식) |
| 20 | +2. 패키지 유형 선택 |
| 21 | + - 일반 패키지: 기본 TypeScript 패키지 |
| 22 | + - React 패키지: React 라이브러리 패키지 |
12 | 23 |
|
13 |
| -To add components to your app, run the following command at the root of your `web` app: |
| 24 | +#### 일반 패키지 생성 예제 |
14 | 25 |
|
15 | 26 | ```bash
|
16 |
| -pnpm dlx shadcn@latest add button -c apps/web |
| 27 | +$ turbo gen package |
| 28 | +? 패키지 이름 입력 > utils |
| 29 | +? 패키지 유형을 선택해주세요 > 일반 패키지 |
17 | 30 | ```
|
18 | 31 |
|
19 |
| -This will place the ui components in the `packages/ui/src/components` directory. |
| 32 | +#### React 패키지 생성 예제 |
20 | 33 |
|
21 |
| -## Tailwind |
| 34 | +```bash |
| 35 | +$ turbo gen package |
| 36 | +? 패키지 이름 입력 > ui-components |
| 37 | +? 패키지 유형을 선택해주세요 > React 패키지 |
| 38 | +``` |
22 | 39 |
|
23 |
| -Your `tailwind.config.ts` and `globals.css` are already set up to use the components from the `ui` package. |
| 40 | +#### 생성 파일 구조 |
24 | 41 |
|
25 |
| -## Using components |
| 42 | +``` |
| 43 | +//일반 패키지 |
| 44 | +
|
| 45 | +packages/your-package/ |
| 46 | +├── package.json |
| 47 | +├── tsconfig.json |
| 48 | +├── eslint.config.js |
| 49 | +├── build.js |
| 50 | +└── src/ |
| 51 | + └── index.ts |
| 52 | +``` |
26 | 53 |
|
27 |
| -To use the components in your app, import them from the `ui` package. |
| 54 | +``` |
| 55 | +//React 패키지 |
28 | 56 |
|
29 |
| -```tsx |
30 |
| -import { Button } from "@workspace/ui/components/ui/button" |
| 57 | +packages/your-react-package/ |
| 58 | +├── package.json (React 의존성 포함) |
| 59 | +├── tsconfig.json |
| 60 | +├── eslint.config.js |
| 61 | +├── build.js |
| 62 | +└── src/ |
| 63 | + ├── index.ts |
| 64 | + └── components/ |
31 | 65 | ```
|
| 66 | + |
| 67 | +### 템플릿 파일 |
| 68 | + |
| 69 | +패키지 생성 도구는 다음 위치의 템플릿 파일을 사용합니다. |
| 70 | + |
| 71 | +#### 일반 패키지 템플릿 |
| 72 | + |
| 73 | +- `./templates/package.json.hbs`: 패키지 기본 구성 |
| 74 | +- `./templates/tsconfig.json.hbs`: TypeScript 설정 |
| 75 | +- `./templates/eslint.config.js.hbs`: ESLint 설정 |
| 76 | +- `./templates/build.js.hbs`: 빌드 스크립트(공통) |
| 77 | +- `./templates/src/index.ts.hbs`: 소스 코드 진입점 (공통) |
| 78 | + |
| 79 | +#### React 패키지 템플릿 |
| 80 | + |
| 81 | +- `./templates/react/package.json.hbs`: React 의존성을 포함한 패키지 구성 |
| 82 | +- `./templates/react/tsconfig.json.hbs`: React 프로젝트에 맞는 TypeScript 설정 |
| 83 | +- `./templates/react/eslint.config.js.hbs`: React 프로젝트에 맞는 ESLint 설정 |
| 84 | +- `./templates/build.js.hbs`: 빌드 스크립트(공통) |
| 85 | +- `./templates/src/index.ts.hbs`: 소스 코드 진입점 (공통) |
0 commit comments