@haloduck/ui 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +104 -0
- package/documentation.json +2104 -0
- package/haloduck-ui-1.0.0.tgz +0 -0
- package/package.json +57 -0
- package/public/i18n/en.json +1 -0
- package/public/i18n/haloduck/en.json +52 -0
- package/public/i18n/haloduck/ko.json +52 -0
- package/public/i18n/icons/en.png +0 -0
- package/public/i18n/icons/ko.png +0 -0
- package/public/i18n/ko.json +1 -0
- package/public/image/search.svg +3 -0
- package/scripts/copy-i18n.js +26 -0
package/README.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# @haloduck/ui
|
|
2
|
+
|
|
3
|
+
HaloDuck UI Library는 Angular 기반 애플리케이션을 위한 현대적이고 재사용 가능한 UI 컴포넌트 라이브러리입니다.
|
|
4
|
+
|
|
5
|
+
## 설치
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @haloduck/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 설치 후
|
|
12
|
+
### update `angular.json`
|
|
13
|
+
Update `angular.json` file.
|
|
14
|
+
```json
|
|
15
|
+
"build": {
|
|
16
|
+
"options": {
|
|
17
|
+
"assets": [
|
|
18
|
+
...
|
|
19
|
+
"node_modules/@haloduck/ui/src/tailwind.css"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Copy i18n
|
|
26
|
+
Copy i18n files to `public/i18n` folder in the root folder.
|
|
27
|
+
```bash
|
|
28
|
+
npx haloduck-copy-i18n
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## 주요 컴포넌트
|
|
32
|
+
|
|
33
|
+
### Control 컴포넌트
|
|
34
|
+
- **Button**: 다양한 스타일의 버튼 컴포넌트
|
|
35
|
+
- **Input**: 폼 입력 컴포넌트
|
|
36
|
+
- **Select**: 드롭다운 선택 컴포넌트
|
|
37
|
+
- **DatePicker**: 날짜 선택 컴포넌트
|
|
38
|
+
- **DateRange**: 날짜 범위 선택 컴포넌트
|
|
39
|
+
- **Calendar**: 캘린더 컴포넌트
|
|
40
|
+
- **Toggle**: 토글 스위치 컴포넌트
|
|
41
|
+
- **CopyButton**: 텍스트 복사 버튼
|
|
42
|
+
- **LanguageSelector**: 언어 선택 컴포넌트
|
|
43
|
+
- **ImageUploader**: 이미지 업로드 컴포넌트
|
|
44
|
+
- **FileUploader**: 파일 업로드 컴포넌트
|
|
45
|
+
- **ImageViewer**: 이미지 뷰어 컴포넌트
|
|
46
|
+
- **STLViewer**: 3D STL 파일 뷰어
|
|
47
|
+
- **MapToAddress**: 주소 매핑 컴포넌트
|
|
48
|
+
- **DrawCanvas**: 그리기 캔버스 컴포넌트
|
|
49
|
+
- **Flip**: 플립 애니메이션 컴포넌트
|
|
50
|
+
- **ConfirmDialog**: 확인 다이얼로그
|
|
51
|
+
- **Table**: 데이터 테이블 컴포넌트
|
|
52
|
+
|
|
53
|
+
### Layout 컴포넌트
|
|
54
|
+
- **Breadcrumb**: 브레드크럼 네비게이션
|
|
55
|
+
- **DialogContainer**: 다이얼로그 컨테이너
|
|
56
|
+
- **Notification**: 알림 컴포넌트
|
|
57
|
+
- **SideMenu**: 사이드 메뉴 컴포넌트
|
|
58
|
+
|
|
59
|
+
### Widget 컴포넌트
|
|
60
|
+
- **PictureName**: 이미지와 이름 표시 위젯
|
|
61
|
+
|
|
62
|
+
## 사용법
|
|
63
|
+
|
|
64
|
+
### 기본 설정
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
export const appConfig: ApplicationConfig = {
|
|
68
|
+
providers: [
|
|
69
|
+
// ...
|
|
70
|
+
provideHaloduckUtilIconSet({
|
|
71
|
+
default: '/app/images/default-file-preview.svg',
|
|
72
|
+
stl: '/app/images/default-stl-preview.svg',
|
|
73
|
+
pdf: '/app/images/default-pdf-preview.svg',
|
|
74
|
+
}),
|
|
75
|
+
// ...
|
|
76
|
+
],
|
|
77
|
+
};
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## 스타일링
|
|
81
|
+
|
|
82
|
+
이 라이브러리는 Tailwind CSS를 기반으로 제작되었습니다. Tailwind CSS가 프로젝트에 설치되어 있어야 합니다.
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
npm install tailwindcss
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## 의존성
|
|
89
|
+
|
|
90
|
+
- Angular 19.2.0+
|
|
91
|
+
- RxJS 7.8.0+
|
|
92
|
+
- Angular Forms 19.2.10+
|
|
93
|
+
- Transloco 7.6.1+
|
|
94
|
+
- Angular CDK 19.2.15+
|
|
95
|
+
- NgRx Component Store 19.0.0+
|
|
96
|
+
- Three.js 0.175.0+ (3D 컴포넌트용)
|
|
97
|
+
|
|
98
|
+
## 라이선스
|
|
99
|
+
|
|
100
|
+
MIT License
|
|
101
|
+
|
|
102
|
+
## 지원
|
|
103
|
+
|
|
104
|
+
이슈나 질문이 있으시면 [GitHub Issues](https://github.com/haloduck/haloduck-frontend/issues)에 등록해 주세요.
|