컴포넌트

전 컴포넌트를 한눈에 보려면 비주얼 인덱스를 참고하세요 — 공개 배럴에서 자동 도출되어 코드와 어긋나지 않습니다.

카탈로그 (56종)#

입력 · 폼 (22)#

컨테이너 · 데이터 (7)#

오버레이 (8)#

피드백 · 상태 (8)#

아이덴티티 · 내비게이션 (6)#

유틸리티 · AI (5)#

API 컨벤션 (요약)#

전 컴포넌트가 따르는 계약 — 정본은 docs/COMPONENT_API.md입니다.

• variant = 시각 위계: 'primary' | 'secondary' | 'ghost' — primary 채움은 AA 4.5:1 보장(DD-6)
• size = 'sm' | 'md' | 'lg' 3단 고정, 기본 md
• 상태는 prop이 아니라 CSS 의사클래스 — Hover/Focus/Active/Disabled
• 비제어 우선 — defaultValue + 선택적 onChange(문서 데모가 실물로 동작하는 이유)
• 모바일 표준(DK 승격) — 선택형 오버레이는 mobile?: boolean + mobileTitle?: string로 BottomSheet 전환, 다중/범위 선택은 임시 선택 → 확인/취소 확정
• RSC 우선 — 상태가 필요한 컴포넌트만 'use client'
• 스타일은 CSS Modules + --wds-* 토큰만 — stylelint가 하드코딩을 차단(DD-4)
• a11y는 명세의 일부 — 키보드 경로·ARIA 없는 인터랙션 컴포넌트는 미완성으로 간주

설치와 사용#

포털·사내 웹 제품은 pnpm 워크스페이스 의존으로 소스를 직접 소비합니다 (Next.js transpilePackages). GitLab Registry 배포는 원격 연결 시점(R-2)에 패키징과 함께.

import { MultiSelect, DateRangePicker, Button } from '@wds/ui-web';

<MultiSelect label="부서" options={departments} showAll searchable mobile={isMobile} />
<DateRangePicker mobile={isMobile} onConfirm={(range) => search(range)} />
<Button>검색</Button>

DK 프로젝트 통합 노트#

P3.6은 DK 프론트의 검증된 컴포넌트 사양(WizDropDown·WizDatePickerEx 등)을 사양 승격 방식으로 통합한 결과입니다 — 기능 명세는 DK에서, 구현은 WDS 레일(토큰·테스트·axe·문서)로. mobile prop 인터페이스는 DK와 호환되므로 DK가 @wds/ui-web 소비자로 전환할 때 코드 수정이 최소화됩니다. 도메인 결합 컴포넌트(OrgChart·Notification·Dashboard 등)는 DK 앱 소유로 유지합니다.

백로그#

• 차트 스위트 — ECharts 의존 결정과 함께 별도 패키지(@wds/charts) ADR로
• Editor · Gallery/ImageViewer — 수요 확인 후
• DataGrid 2차 — rowspan 병합·하위행·서버 페이징