@krds.ui/angular 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Initializer Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,82 @@
-# Temporary Holding Version
+# KRDS Angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[KRDS(대한민국 정부 디자인 시스템)](https://www.krds.go.kr/html/site/index.html)를 Angular로 구현한 컴포넌트 라이브러리입니다. Vue 버전인 [@krds.ui/vue](https://github.com/Initializer-org/krds-vue)와 같은 KRDS 스타일을 씁니다.
+
+문서와 예제: https://angular.krds.initializer.org
+
+> 초기 개발 단계입니다. 아직 npm에 배포하지 않았습니다. KRDS 공식 분류의 컴포넌트를 모두 옮겼고(아래 [컴포넌트](#컴포넌트)), 스타일시트에는 KRDS 컴포넌트 CSS가 모두 들어 있습니다.
+
+## 빠른 시작
+
+```bash
+pnpm add @krds.ui/angular
+```
+
+`angular.json`의 `styles`에 스타일시트를 추가합니다.
+
+```json
+"styles": ["@krds.ui/angular/style.css"]
+```
+
+```ts
+import { Component } from '@angular/core'
+import { KrdsButton } from '@krds.ui/angular'
+
+@Component({
+  selector: 'app-root',
+  imports: [KrdsButton],
+  template: `<button krdsButton variant="secondary" size="large">확인</button>`
+})
+export class App {}
+```
+
+Angular `^22.2.0`이 필요합니다.
+
+스타일시트는 KRDS 전체 CSS라 압축 전 약 620kB(전송 약 45kB)입니다. `ng new`의 기본 번들 예산(`initial` 경고 500kB)에서 경고가 나오면 `angular.json`의 `budgets`에서 `maximumWarning`을 `1mb`로 올리세요.
+
+## 컴포넌트
+
+[KRDS 공식 컴포넌트 목록](https://www.krds.go.kr/html/site/component/component_summary.html)의 분류 단위로 옮깁니다. 분류와 순서는 [krds-vue 문서](https://krds.initializer.org/components/)와 같습니다.
+
+- [x] 액션: 링크 `a[krdsLink]`, 버튼 `button[krdsButton]`, 플로팅 버튼 `<krds-floating-button>`
+- [x] 선택: 라디오 버튼 `<krds-radio>`, 체크박스 `<krds-checkbox>`, 셀렉트 `select[krdsSelect]`, 태그 `<krds-tag>`·`a[krdsTag]`, 토글 스위치 `<krds-toggle-switch>`, 묶음 `[krdsCheckArea]`·`[krdsTagGroup]`
+- [x] 입력: 날짜 입력 필드 `<krds-date-input>`, 텍스트 영역 `textarea[krdsInput]`·글자 수 `<krds-textarea>`, 텍스트 입력 필드 `input[krdsInput]`, 파일 업로드 `<krds-file-upload>`, 폼 그룹 `<krds-form-group>` (부가 컴포넌트에서 앞당김)
+- [x] 피드백: 단계 표시기 `ol[krdsStepIndicator]`·`li[krdsStep]`, 스피너 `<krds-spinner>` (입력 필드 로딩은 폼 그룹 `loading`)
+- [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]`
+- [x] 탐색: 건너뛰기 링크 `[krdsSkipLink]`, 메인 메뉴 `<krds-main-menu>`(PC·모바일), 브레드크럼 `nav[krdsBreadcrumb]`, 사이드 메뉴 `nav[krdsSideNavigation]`, 콘텐츠 내 탐색 `<krds-in-page-navigation>`, 페이지네이션 `nav[krdsPagination]`, 새 창 링크 `a[krdsExternal]`
+- [x] 아이덴티티: 공식 배너 `[krdsMasthead]`, 운영기관 식별자 `[krdsIdentifier]`, 헤더 `header[krdsHeader]`, 푸터 `footer[krdsFooter]`
+- [x] 도움: 패널 `<krds-panel>`, 맥락적 도움말 `<krds-contextual-help>`, 코치마크 `<krds-coach-mark>`, 툴팁 `<krds-tooltip>`, 음성 지원 `button[krdsTts]`
+- [x] 설정: 언어 변경 `<krds-language-switcher>`, 화면 크기 조정 `<krds-resize>`, 드롭다운 `[krdsDropdown]`
+- [x] 콘텐츠: 접근 가능한 미디어 `figure[krdsMedia]`, 숨긴 콘텐츠 `class="sr-only"` (KRDS CSS 클래스라 디렉티브 없이 `[class.sr-only]="조건"`으로 씀)
+- [x] 모바일: 범위슬라이드 `<krds-range-slider>`, 수량 토글 `<krds-quantity-toggle>`, 토스트 `<krds-toast>`·`KrdsToastService`, 스낵바 `<krds-snackbar>`·`KrdsSnackbarService`, 탭바 `nav[krdsTabBar]` (스플래시 스크린은 krds-vue처럼 제공하지 않음: 각 플랫폼의 기본 기능 영역)
+- [x] 부가 컴포넌트: 레이아웃 `[krdsLayout]`, 폼 그룹 `<krds-form-group>`(입력 분류에서 추가). 아이콘과 버튼 묶음은 KRDS 클래스를 그대로 씀: `<i class="svg-icon ico-help" aria-hidden="true"></i>`, `<div class="btn-group">`
+
+폼 컴포넌트는 기본 입력 요소를 그대로 씁니다. 텍스트 입력 필드·텍스트 영역은 `krdsInput`, 셀렉트는 `krdsSelect`, 체크박스·라디오·토글 스위치 안의 input은 `krdsControl`로 표시하면, 감싸는 컴포넌트가 KRDS 마크업과 label·도움말 연결(`aria-describedby`, 오류 상태의 `aria-invalid`)을 맡습니다. 값과 검증은 기본 요소 그대로라 `[(ngModel)]`, reactive forms, Signal Forms(`[formField]`), `required` 같은 기본 속성이 그대로 동작합니다.
+
+```html
+<krds-form-group label="이메일" hint="이메일 형식이 올바르지 않습니다" state="error">
+  <input krdsInput type="email" [formField]="signupForm.email" />
+</krds-form-group>
+
+<krds-checkbox description="부가 설명">
+  <input type="checkbox" krdsControl [(ngModel)]="agree" />
+  개인정보 수집에 동의합니다
+</krds-checkbox>
+```
+
+## 개발
+
+```bash
+pnpm install
+pnpm test     # 실제 브라우저(Chromium)에서 단위 테스트와 axe-core 접근성 검사 (처음 한 번 pnpm exec playwright install chromium)
+pnpm build    # dist/krds-angular에 패키지 생성
+pnpm lint
+pnpm format
+pnpm docs:dev   # 문서 사이트(VitePress) 개발 서버, 예제는 docs/components/demos/*.ts
+pnpm docs:check # 문서 예제 템플릿 타입 검사 (ngc)
+pnpm docs:build && pnpm docs:test  # 문서 빌드 후 모든 페이지의 예제 렌더링·axe-core 검사
+```
+
+## 라이선스
+
+MIT © [Initializer Team](https://github.com/Initializer-org)