@krds.ui/vue 0.0.18 → 0.0.20

package/README.md

@@ -12,7 +12,7 @@ KRDS Vue는 공공 웹서비스에서 반복되는 폼, 내비게이션, 레이
 
 ## 링크
 
-- [Storybook 문서](https://krds.initializer.org/) - 컴포넌트 예제, Controls, API 문서
+- [문서 사이트](https://krds.initializer.org/) - 컴포넌트 예제, 코드, API(props·events·slots) 문서
 - [npm 패키지](https://www.npmjs.com/package/@krds.ui/vue)
 - [GitHub 저장소](https://github.com/Initializer-org/krds-vue)
 - [KRDS 공식 홈페이지](https://www.krds.go.kr/html/site/index.html)
@@ -69,6 +69,16 @@ app.use(KrdsVue, {
 })
 ```
 
+전역 등록한 컴포넌트의 템플릿 타입 검사·자동완성(Volar/vue-tsc)을 쓰려면 `tsconfig.json`에 전역 타입을 추가합니다. 전체 컴포넌트와 `v-sr-only`, `$krds`가 전역으로 선언되므로 일부만 등록했다면 등록하지 않은 컴포넌트 사용에 주의하세요.
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@krds.ui/vue/global"]
+  }
+}
+```
+
 ### 3. 개별 컴포넌트 import
 
 전역 등록이 필요 없다면 필요한 컴포넌트만 가져옵니다.
@@ -91,6 +101,33 @@ app.use(KrdsVue, {
 </template>
 ```
 
+### 4. Nuxt
+
+서버 렌더링을 지원합니다. 스타일은 `nuxt.config.ts`에 추가하고, 플러그인에서 등록합니다.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: ['@krds.ui/vue/style']
+})
+```
+
+```ts
+// plugins/krds.ts (Nuxt 4 기본 구조에서는 app/plugins/krds.ts)
+import KrdsVue from '@krds.ui/vue'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.use(KrdsVue)
+})
+```
+
+Nuxt는 tsconfig를 자동 생성하므로, 전역 타입은 프로젝트의 `.d.ts` 파일에 참조를 추가합니다.
+
+```ts
+// types/krds.d.ts
+/// <reference types="@krds.ui/vue/global" />
+```
+
 ## TypeScript
 
 컴포넌트 props와 공통 타입을 패키지 루트에서 가져올 수 있습니다.
@@ -137,7 +174,7 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
 
 ## 컴포넌트 범위
 
-[KRDS 공식 컴포넌트 목록](https://www.krds.go.kr/html/site/component/component_summary.html) 55종 기준 대응 현황입니다. 각 컴포넌트의 props/events는 [Storybook 문서](https://krds.initializer.org/)에서 확인하세요.
+[KRDS 공식 컴포넌트 목록](https://www.krds.go.kr/html/site/component/component_summary.html) 55종 기준 대응 현황입니다. 각 컴포넌트의 예제와 props/events는 [문서 사이트](https://krds.initializer.org/)에서 확인하세요.
 
 | 분류             | 공식 컴포넌트 → 제공 컴포넌트                                                                                                                                                                                                                                                                                  |
 | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -158,8 +195,8 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
 
 아래 항목은 KRDS 원본 저장소가 구현(HTML/SCSS)을 제공하지 않아 포팅 대상이 아닙니다.
 
-- **플로팅 버튼(FAB), 이미지**: 이미지는 Storybook에 안내 문서만 제공합니다.
-- **모바일 계열**(범위슬라이드, 뒤로가기 버튼, 바텀시트, 수량 토글, 토스트, 스낵바, 탭바, 스플래시 스크린): 모바일 앱 전용 항목입니다. 탭바·스플래시 스크린은 Storybook에 안내 문서만 제공합니다.
+- **플로팅 버튼(FAB), 이미지**: 이미지는 문서 사이트에 안내 문서만 제공합니다.
+- **모바일 계열**(범위슬라이드, 뒤로가기 버튼, 바텀시트, 수량 토글, 토스트, 스낵바, 탭바, 스플래시 스크린): 모바일 앱 전용 항목입니다. 탭바·스플래시 스크린은 문서 사이트에 안내 문서만 제공합니다.
 - **파비콘, 접근 가능한 미디어**: 컴포넌트가 아닌 가이드 항목입니다.
 
 ### 원본 동기화 기준
@@ -171,8 +208,8 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
 ## 접근성
 
 - 컴포넌트는 원본 KRDS 마크업 구조와 ARIA 속성, 키보드 인터랙션을 따라 구현합니다.
-- 모든 스토리에 대해 axe-core 기반 자동 접근성 검사(`@storybook/addon-a11y`)를 실행하며, 위반이 있으면 CI가 실패합니다(`test: 'error'`).
-- 원본 KRDS 마크업에서 비롯된 위반(탭의 `li[role=tab] > button` 중첩, 정렬 셀렉트의 `title` 전용 레이블, 페이지네이션 비활성 버튼 대비)은 원본을 따르기 위해 해당 스토리에서 요소 단위로만 검사를 제외합니다.
+- 모든 컴포넌트 테스트(`src/components/*/__tests__`)는 렌더한 화면에 axe-core 접근성 검사를 실행하며, 위반이 있으면 CI가 실패합니다.
+- 원본 KRDS 마크업에서 비롯된 위반(탭의 `li[role=tab] > button` 중첩, 정렬 셀렉트의 `title` 전용 레이블, 페이지네이션 비활성 버튼 대비, 사이드 메뉴 팝업의 `role=menu` 하위 구조)은 원본을 따르기 위해 해당 테스트에서 요소 단위로만 검사를 제외합니다.
 - 고대비 모드(`data-krds-mode="high-contrast"`)를 지원합니다.
 
 라이브러리 차원의 자동 검사는 KWCAG/WCAG 적합성 평가를 대체하지 않습니다. 서비스 전체의 접근성 준수는 사용처에서 별도 검증이 필요합니다.
@@ -214,11 +251,12 @@ git clone https://github.com/Initializer-org/krds-vue.git
 cd krds-vue
 
 pnpm install
-pnpm storybook       # Storybook 개발 서버 실행
+pnpm docs:dev       # 문서 사이트 개발 서버 실행
 pnpm test            # Vitest 실행 (Playwright 브라우저 모드)
-pnpm lint            # ESLint 검사 및 자동 수정
+pnpm lint            # oxlint 검사 (--fix로 자동 수정)
+pnpm format          # oxfmt 포매팅
 pnpm build           # 타입 검사와 라이브러리 빌드
-pnpm build-storybook # 정적 Storybook 빌드
+pnpm docs:build     # 문서 사이트 빌드
 ```
 
 커밋 메시지는 Conventional Commits(`feat:`, `fix:`, `docs:` 등)를 따릅니다. 커밋 타입과 내용이 체인지로그와 버전 산정에 그대로 반영됩니다.
@@ -227,10 +265,11 @@ pnpm build-storybook # 정적 Storybook 빌드
 
 `npm pack --dry-run` 기준으로 패키지에는 다음 산출물이 포함됩니다.
 
-- `dist/krds-vue.es.js`
+- `dist/krds-vue.es.js` (+ 소스맵 `dist/krds-vue.es.js.map`)
 - `dist/style.css`
-- `dist/types/index.d.ts`
+- `dist/types/index.d.ts`, `global.d.ts` (전역 컴포넌트 타입)
 - `dist/img/component/icon/*.svg`
+- `dist/fonts/*.woff2` (Pretendard GOV)
 
 ## 라이선스