@krds.ui/angular 0.1.0 → 0.1.1
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 +38 -35
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,10 +1,39 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://angular.krds.initializer.org/">
|
|
3
|
+
<img src="./.github/assets/banner.jpg" alt="KRDS Angular" />
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
<div align="center">
|
|
4
8
|
|
|
5
|
-
|
|
9
|
+
[](https://github.com/Initializer-org/krds-angular/actions/workflows/ci.yml)
|
|
10
|
+
[](https://angular.dev/)
|
|
11
|
+
[](https://github.com/KRDS-uiux/krds-uiux)
|
|
12
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
13
|
|
|
7
|
-
>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<hr />
|
|
17
|
+
<div align="center">
|
|
18
|
+
|
|
19
|
+
<a href="https://angular.krds.initializer.org/">문서</a>
|
|
20
|
+
<span> • </span>
|
|
21
|
+
<a href="https://angular.krds.initializer.org/guide/getting-started">시작하기</a>
|
|
22
|
+
<span> • </span>
|
|
23
|
+
<a href="https://angular.krds.initializer.org/components/">컴포넌트</a>
|
|
24
|
+
|
|
25
|
+
</div>
|
|
26
|
+
<hr />
|
|
27
|
+
|
|
28
|
+
## KRDS Angular: 대한민국 정부 디자인 시스템을 Angular로
|
|
29
|
+
|
|
30
|
+
[KRDS(대한민국 정부 디자인 시스템)](https://www.krds.go.kr/html/site/index.html)를 Angular + TypeScript로 구현한 컴포넌트 라이브러리입니다. 공공 웹서비스에서 반복되는 폼, 내비게이션, 레이아웃, 피드백 UI를 KRDS 원본과 같은 모습과 동작으로 제공합니다.
|
|
31
|
+
|
|
32
|
+
- **KRDS 원본 그대로.** KRDS 원본 v1.1.0의 마크업·클래스·키보드 동작을 따르고, [KRDS Vue](https://github.com/Initializer-org/krds-vue)와 같은 스타일을 씁니다. [공식 컴포넌트 목록](https://www.krds.go.kr/html/site/component/component_summary.html)의 분류를 모두 옮겼습니다(스플래시 스크린은 각 플랫폼의 기본 기능 영역이라 제외).
|
|
33
|
+
- **접근성 자동 검사.** 모든 컴포넌트 테스트와 문서 예제가 실제 브라우저에서 axe-core 접근성 검사를 실행하고, 위반이 있으면 CI가 실패합니다. 고대비 모드를 지원합니다.
|
|
34
|
+
- **Angular 방식 그대로.** standalone 컴포넌트·디렉티브와 signal 입력으로 만들었고 zoneless로 동작합니다. 폼은 기본 입력 요소에 디렉티브를 붙이는 방식이라 `[(ngModel)]`, reactive forms, Signal Forms가 그대로 동작합니다.
|
|
35
|
+
|
|
36
|
+
> 초기 개발 단계입니다. 아직 npm에 배포하지 않았습니다.
|
|
8
37
|
|
|
9
38
|
## 빠른 시작
|
|
10
39
|
|
|
@@ -30,41 +59,15 @@ import { KrdsButton } from '@krds.ui/angular'
|
|
|
30
59
|
export class App {}
|
|
31
60
|
```
|
|
32
61
|
|
|
33
|
-
Angular
|
|
34
|
-
|
|
35
|
-
스타일시트는 KRDS 전체 CSS라 압축 전 약 620kB(전송 약 45kB)입니다. `ng new`의 기본 번들 예산(`initial` 경고 500kB)에서 경고가 나오면 `angular.json`의 `budgets`에서 `maximumWarning`을 `1mb`로 올리세요.
|
|
36
|
-
|
|
37
|
-
## 컴포넌트
|
|
62
|
+
Angular 20·21·22를 지원합니다(Signal Forms는 Angular 21부터). 번들 예산, 작성 방식, 폼, 고대비 모드는 [시작하기](https://angular.krds.initializer.org/guide/getting-started)를 참고하세요.
|
|
38
63
|
|
|
39
|
-
|
|
64
|
+
## 접근성
|
|
40
65
|
|
|
41
|
-
|
|
42
|
-
- [x] 선택: 라디오 버튼 `<krds-radio>`, 체크박스 `<krds-checkbox>`, 셀렉트 `select[krdsSelect]`, 태그 `<krds-tag>`·`a[krdsTag]`, 토글 스위치 `<krds-toggle-switch>`, 묶음 `[krdsCheckArea]`·`[krdsTagGroup]`
|
|
43
|
-
- [x] 입력: 날짜 입력 필드 `<krds-date-input>`, 텍스트 영역 `textarea[krdsInput]`·글자 수 `<krds-textarea>`, 텍스트 입력 필드 `input[krdsInput]`, 파일 업로드 `<krds-file-upload>`, 폼 그룹 `<krds-form-group>` (부가 컴포넌트에서 앞당김)
|
|
44
|
-
- [x] 피드백: 단계 표시기 `ol[krdsStepIndicator]`·`li[krdsStep]`, 스피너 `<krds-spinner>` (입력 필드 로딩은 폼 그룹 `loading`)
|
|
45
|
-
- [x] 레이아웃 및 표현: 구조화 목록 `ul[krdsStructuredList]`, 긴급 공지 `<krds-critical-alerts>`, 디스클로저 `<krds-disclosure>`, 모달 `<krds-modal>`, 배지 `[krdsBadge]`, 아코디언 `[krdsAccordion]`·`<krds-accordion-item>`, 이미지 `img[krdsImage]`·`figure[krdsFigure]`, 캐러셀 `<krds-carousel>`·`li[krdsSlide]`, 탭 `<krds-tabs>`, 표 `<krds-table>`, 텍스트 목록 `[krdsTextList]`
|
|
46
|
-
- [x] 탐색: 건너뛰기 링크 `[krdsSkipLink]`, 메인 메뉴 `<krds-main-menu>`(PC·모바일), 브레드크럼 `nav[krdsBreadcrumb]`, 사이드 메뉴 `nav[krdsSideNavigation]`, 콘텐츠 내 탐색 `<krds-in-page-navigation>`, 페이지네이션 `nav[krdsPagination]`, 새 창 링크 `a[krdsExternal]`
|
|
47
|
-
- [x] 아이덴티티: 공식 배너 `[krdsMasthead]`, 운영기관 식별자 `[krdsIdentifier]`, 헤더 `header[krdsHeader]`, 푸터 `footer[krdsFooter]`
|
|
48
|
-
- [x] 도움: 패널 `<krds-panel>`, 맥락적 도움말 `<krds-contextual-help>`, 코치마크 `<krds-coach-mark>`, 툴팁 `<krds-tooltip>`, 음성 지원 `button[krdsTts]`
|
|
49
|
-
- [x] 설정: 언어 변경 `<krds-language-switcher>`, 화면 크기 조정 `<krds-resize>`, 드롭다운 `[krdsDropdown]`
|
|
50
|
-
- [x] 콘텐츠: 접근 가능한 미디어 `figure[krdsMedia]`, 숨긴 콘텐츠 `class="sr-only"` (KRDS CSS 클래스라 디렉티브 없이 `[class.sr-only]="조건"`으로 씀)
|
|
51
|
-
- [x] 모바일: 범위슬라이드 `<krds-range-slider>`, 수량 토글 `<krds-quantity-toggle>`, 토스트 `<krds-toast>`·`KrdsToastService`, 스낵바 `<krds-snackbar>`·`KrdsSnackbarService`, 탭바 `nav[krdsTabBar]` (스플래시 스크린은 krds-vue처럼 제공하지 않음: 각 플랫폼의 기본 기능 영역)
|
|
52
|
-
- [x] 부가 컴포넌트: 레이아웃 `[krdsLayout]`, 폼 그룹 `<krds-form-group>`(입력 분류에서 추가). 아이콘과 버튼 묶음은 KRDS 클래스를 그대로 씀: `<i class="svg-icon ico-help" aria-hidden="true"></i>`, `<div class="btn-group">`
|
|
66
|
+
라이브러리 차원의 자동 검사는 KWCAG/WCAG 적합성 평가를 대체하지 않습니다. 서비스 전체의 접근성 준수는 사용처에서 별도로 검증해야 합니다.
|
|
53
67
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
```html
|
|
57
|
-
<krds-form-group label="이메일" hint="이메일 형식이 올바르지 않습니다" state="error">
|
|
58
|
-
<input krdsInput type="email" [formField]="signupForm.email" />
|
|
59
|
-
</krds-form-group>
|
|
60
|
-
|
|
61
|
-
<krds-checkbox description="부가 설명">
|
|
62
|
-
<input type="checkbox" krdsControl [(ngModel)]="agree" />
|
|
63
|
-
개인정보 수집에 동의합니다
|
|
64
|
-
</krds-checkbox>
|
|
65
|
-
```
|
|
68
|
+
## 기여하기
|
|
66
69
|
|
|
67
|
-
|
|
70
|
+
**버그와 기능 요청**은 [이슈](https://github.com/Initializer-org/krds-angular/issues)로 남겨 주세요. 큰 변경은 이슈에서 먼저 논의해 주세요.
|
|
68
71
|
|
|
69
72
|
```bash
|
|
70
73
|
pnpm install
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krds.ui/angular",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "대한민국 정부 디자인 시스템(KRDS) Angular 컴포넌트 라이브러리 - KRDS 원본의 마크업·스타일을 그대로 따르는 TypeScript 컴포넌트",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"krds",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"accessibility",
|
|
15
15
|
"a11y"
|
|
16
16
|
],
|
|
17
|
-
"homepage": "https://
|
|
17
|
+
"homepage": "https://angular.krds.initializer.org",
|
|
18
18
|
"bugs": {
|
|
19
19
|
"url": "https://github.com/Initializer-org/krds-angular/issues"
|
|
20
20
|
},
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
}
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
|
-
"@angular/common": "^22.
|
|
40
|
-
"@angular/core": "^22.
|
|
39
|
+
"@angular/common": "^20.0.0 || ^21.0.0 || ^22.0.0",
|
|
40
|
+
"@angular/core": "^20.0.0 || ^21.0.0 || ^22.0.0"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"tslib": "^2.3.0"
|