@krds.ui/react 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 +22 -61
- package/dist/index.js +157 -154
- package/dist/index.js.map +1 -1
- package/dist/types/index.d.ts +317 -22
- package/package.json +14 -16
package/README.md
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<
|
|
2
|
+
<a href="https://react.krds.initializer.org/">
|
|
3
|
+
<img src="./.github/assets/banner.jpg" alt="KRDS React" />
|
|
4
|
+
</a>
|
|
3
5
|
</p>
|
|
4
6
|
|
|
5
7
|
<div align="center">
|
|
6
8
|
|
|
7
9
|
[](https://www.npmjs.com/package/@krds.ui/react)
|
|
10
|
+
[](https://www.npmjs.com/package/@krds.ui/react)
|
|
8
11
|
[](https://github.com/Initializer-org/krds-react/actions/workflows/ci.yml)
|
|
9
|
-
[](https://www.typescriptlang.org/)
|
|
12
|
+
[](https://www.npmjs.com/package/@krds.ui/react)
|
|
13
|
+
[](https://react.dev/)
|
|
12
14
|
[](https://www.npmjs.com/package/krds-react)
|
|
15
|
+
[](./LICENSE)
|
|
13
16
|
|
|
14
17
|
</div>
|
|
15
18
|
|
|
@@ -24,8 +27,6 @@
|
|
|
24
27
|
<span> • </span>
|
|
25
28
|
<a href="https://www.npmjs.com/package/krds-react">공식 krds-react</a>
|
|
26
29
|
<span> • </span>
|
|
27
|
-
<a href="https://www.krds.go.kr/storybook/react">공식 Storybook</a>
|
|
28
|
-
<span> • </span>
|
|
29
30
|
<a href="https://krds.initializer.org/">KRDS Vue</a>
|
|
30
31
|
|
|
31
32
|
</div>
|
|
@@ -33,11 +34,11 @@
|
|
|
33
34
|
|
|
34
35
|
## KRDS React: 대한민국 정부 디자인 시스템을 React로
|
|
35
36
|
|
|
36
|
-
[KRDS(대한민국 정부 디자인 시스템)](https://www.krds.go.kr/html/site/index.html) 공식 React 패키지 [`krds-react@1.1.1`](https://www.npmjs.com/package/krds-react)
|
|
37
|
+
[KRDS(대한민국 정부 디자인 시스템)](https://www.krds.go.kr/html/site/index.html) 공식 React 패키지 [`krds-react@1.1.1`](https://www.npmjs.com/package/krds-react)을 포팅한 React + TypeScript 컴포넌트 라이브러리입니다. 공공 웹서비스에서 반복되는 폼, 내비게이션, 레이아웃, 피드백 UI를 제공합니다.
|
|
37
38
|
|
|
38
|
-
- **공식 krds-react
|
|
39
|
-
- **접근성 자동 검사.**
|
|
40
|
-
-
|
|
39
|
+
- **공식 krds-react 기반.** 원본의 컴포넌트·props·CSS를 기반으로 접근성과 React 호환성 문제를 수정했습니다. 원본과의 차이는 [포팅 기록](./PORTING.md)에 정리했습니다.
|
|
40
|
+
- **접근성 자동 검사.** 문서의 모든 컴포넌트 예제를 실제 브라우저에서 axe-core로 검사합니다. 레이블 연결·접근 가능한 이름·서버 렌더링 ID는 회귀 테스트로 확인합니다.
|
|
41
|
+
- **필요한 만큼만.** ESM·Tree-shaking으로 쓰는 컴포넌트만 번들에 포함됩니다. TypeScript 타입 정의와 Next.js App Router를 지원합니다.
|
|
41
42
|
|
|
42
43
|
## 빠른 시작
|
|
43
44
|
|
|
@@ -59,68 +60,28 @@ export default function Page() {
|
|
|
59
60
|
}
|
|
60
61
|
```
|
|
61
62
|
|
|
62
|
-
React `>=18.2.0`과 ESM을 지원하는 번들러가 필요합니다(CommonJS `require()`는 지원하지 않음).
|
|
63
|
+
React `>=18.2.0`과 ESM을 지원하는 번들러가 필요합니다(CommonJS `require()`는 지원하지 않음). 개별 import, Next.js App Router, 스타일, 글꼴 설정은 [시작하기](https://react.krds.initializer.org/guide/getting-started)를 참고하세요.
|
|
63
64
|
|
|
64
65
|
위 설정을 담은 Vite 예제가 [`examples/vite`](./examples/vite)에 있습니다.
|
|
65
66
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
- ESM 전용으로 빌드합니다. 원본의 `main`과 `exports.require`는 배포 파일에 없는 `dist/index.js`를 가리켜 CommonJS에서 불러올 수 없었습니다.
|
|
69
|
-
- 빌드 결과 첫 줄에 `"use client"`를 넣었습니다.
|
|
70
|
-
- 스타일 경로는 `@krds.ui/react/style`이며, TypeScript 6부터 기본으로 켜진 `noUncheckedSideEffectImports`에서 오류가 나지 않도록 빈 타입 선언(`style.d.ts`)을 함께 둡니다.
|
|
71
|
-
|
|
72
|
-
**접근성 수정**
|
|
73
|
-
|
|
74
|
-
- `Checkbox`: children으로 레이블을 쓰면 입력 요소의 이름이 고정 문자열 `'레이블'`이 되던 것(`aria-label={label || '레이블'}`)을 지워, 연결된 레이블이 이름이 됩니다. axe는 이름이 있다고 보고 통과시켜 화면낭독기에서만 드러나던 문제입니다.
|
|
75
|
-
- `Checkbox`, `CheckboxChip`, `Select`: `id`를 주지 않으면 레이블이 입력 요소와 연결되지 않던 것(레이블을 눌러도 선택되지 않음)을 `useId`로 자동 id를 만들어 연결합니다.
|
|
76
|
-
- `Modal`: 렌더된 `Modal.Title`(`Modal.Header`의 `title` 포함)을 대화상자의 `aria-labelledby`로 연결합니다. 원본은 대화상자에 이름이 없었습니다. 직접 준 `aria-labelledby`가 우선합니다.
|
|
77
|
-
- `Tooltip`: 트리거 버튼이 툴팁 내용을 이름(`aria-labelledby`)으로 쓰던 것을 설명(`aria-describedby`)으로 바꾸고 말풍선에 `role="tooltip"`을 붙였습니다. 보이는 글자가 버튼 이름이 됩니다(WCAG 2.5.3). 폼 안에서 제출 버튼이 되지 않도록 `type="button"`도 붙였습니다.
|
|
78
|
-
- `LanguageSwitcher`: 트리거 버튼의 `aria-label`(기본값 `'Language'`)이 보이는 현재 언어를 이름에서 빼던 것을, 숨긴 글자로 바꿔 현재 언어가 이름에 들어가게 했습니다.
|
|
79
|
-
- `Radio`, `RadioChip`: 렌더할 때마다 `Math.random()`으로 만들던 id를 `useId`로 바꿔 서버 렌더링 결과와 브라우저의 id가 같습니다.
|
|
80
|
-
|
|
81
|
-
**React**
|
|
67
|
+
[](https://stackblitz.com/github/Initializer-org/krds-react/tree/main/examples/vite)
|
|
82
68
|
|
|
83
|
-
|
|
69
|
+
## 접근성
|
|
84
70
|
|
|
85
|
-
|
|
71
|
+
라이브러리 차원의 자동 검사는 서비스 전체의 접근성 평가를 대체하지 않습니다. 사용처의 콘텐츠와 화면 구성에 맞춰 별도로 검증해야 합니다.
|
|
86
72
|
|
|
87
|
-
|
|
73
|
+
## 기준 버전과 호환성
|
|
88
74
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
- `TagWrap`(태그 묶음), `HelpPanel` 하위 컴포넌트, `SelectOption`·`StepItem`·`BreadcrumbItem` 같은 props 타입이 패키지 최상위에서 export되지 않아 쓸 수 없습니다. 태그는 `TagWrap`과 같은 마크업(`<div className="krds-tag-wrap">`)을 직접 써야 스타일이 적용됩니다.
|
|
92
|
-
|
|
93
|
-
**React**
|
|
94
|
-
|
|
95
|
-
- `Modal`: 콜백 ref가 정리 함수를 반환합니다(React 19 기능). React 18에서는 경고가 나고 정리 함수가 실행되지 않습니다.
|
|
96
|
-
|
|
97
|
-
## 개발
|
|
98
|
-
|
|
99
|
-
```bash
|
|
100
|
-
pnpm install
|
|
101
|
-
pnpm docs:dev # 문서 사이트 개발 서버 (VitePress, KRDS Vue 문서와 같은 테마)
|
|
102
|
-
pnpm test # 문서 예제 접근성 검사와 회귀 테스트 (vitest 브라우저 모드, Playwright Chromium)
|
|
103
|
-
pnpm lint # oxlint
|
|
104
|
-
pnpm format # oxfmt
|
|
105
|
-
pnpm build # 타입 검사(TypeScript 7)와 라이브러리 빌드
|
|
106
|
-
pnpm ssr-smoke # 빌드 결과의 모든 컴포넌트 서버 렌더링 확인
|
|
107
|
-
pnpm docs:build # 문서 사이트 빌드
|
|
108
|
-
```
|
|
75
|
+
공식 `krds-react@1.1.1`(ISC)을 기준으로 합니다. 원본과의 차이와 남아 있는 제약은 [포팅 기록](./PORTING.md)에 있습니다.
|
|
109
76
|
|
|
110
|
-
|
|
77
|
+
`0.1.1`에서 React 18의 Modal 정리 문제와 누락된 컴포넌트·타입 export를 수정했습니다. 변경 내역은 [릴리스](https://github.com/Initializer-org/krds-react/releases)를 참고하세요.
|
|
111
78
|
|
|
112
|
-
|
|
79
|
+
## 기여하기
|
|
113
80
|
|
|
114
|
-
|
|
81
|
+
**버그와 기능 요청**은 [이슈](https://github.com/Initializer-org/krds-react/issues)로 남겨 주세요.
|
|
115
82
|
|
|
116
|
-
|
|
117
|
-
| ----------------------------- | ----------------------------------------------------- |
|
|
118
|
-
| `react/purity` | Calendar, DateInput |
|
|
119
|
-
| `react/refs` | HelpPanel, Tooltip |
|
|
120
|
-
| `react/set-state-in-effect` | Calendar, DateInput, MainMenu, Portal, TextInput |
|
|
121
|
-
| `react/static-components` | InPageNavigation |
|
|
122
|
-
| `react-hooks/exhaustive-deps` | Calendar, ContextualHelp, DateInput, InPageNavigation |
|
|
83
|
+
개발 환경과 빌드·테스트 방법은 [CONTRIBUTING](./.github/CONTRIBUTING.md)에 있습니다.
|
|
123
84
|
|
|
124
85
|
## 라이선스
|
|
125
86
|
|
|
126
|
-
ISC. 원본 krds-react의 저작권 표시를 [LICENSE](./LICENSE)에 함께 남깁니다.
|
|
87
|
+
ISC © [Initializer Team](https://github.com/Initializer-org). 원본 krds-react의 저작권 표시를 [LICENSE](./LICENSE)에 함께 남깁니다.
|