Skip to content

Commit 5f81336

Browse files
committed
docs: README에 turbo gen 사용법 추가
1 parent 254e40e commit 5f81336

File tree

1 file changed

+68
-14
lines changed

1 file changed

+68
-14
lines changed

README.md

Lines changed: 68 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,85 @@
1-
# shadcn/ui monorepo template
1+
## packages 워크스페이스 내 pacakge 추가
22

3-
This template is for creating a monorepo with shadcn/ui.
3+
### 기능
44

5-
## Usage
5+
- 패키지 이름의 kebab-case 형식 검증
6+
- 이미 존재하는 패키지 이름 중복 확인
7+
- 일반 패키지 또는 React 패키지 생성 선택 가능
8+
- 패키지 생성 후 자동 `pnpm install` 실행
9+
- 패키지 사용법 안내
10+
11+
### 사용 방법
612

713
```bash
8-
pnpm dlx shadcn@latest init
14+
turbo gen package
915
```
1016

11-
## Adding components
17+
명령어 실행 후 다음 과정을 따라주세요:
18+
19+
1. 패키지 이름 입력 (kebab-case 형식)
20+
2. 패키지 유형 선택
21+
- 일반 패키지: 기본 TypeScript 패키지
22+
- React 패키지: React 라이브러리 패키지
1223

13-
To add components to your app, run the following command at the root of your `web` app:
24+
#### 일반 패키지 생성 예제
1425

1526
```bash
16-
pnpm dlx shadcn@latest add button -c apps/web
27+
$ turbo gen package
28+
? 패키지 이름 입력 > utils
29+
? 패키지 유형을 선택해주세요 > 일반 패키지
1730
```
1831

19-
This will place the ui components in the `packages/ui/src/components` directory.
32+
#### React 패키지 생성 예제
2033

21-
## Tailwind
34+
```bash
35+
$ turbo gen package
36+
? 패키지 이름 입력 > ui-components
37+
? 패키지 유형을 선택해주세요 > React 패키지
38+
```
2239

23-
Your `tailwind.config.ts` and `globals.css` are already set up to use the components from the `ui` package.
40+
#### 생성 파일 구조
2441

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+
```
2653

27-
To use the components in your app, import them from the `ui` package.
54+
```
55+
//React 패키지
2856
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/
3165
```
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

Comments
 (0)