WIZ Design System

카탈로그#

업무 화면에서 반복되는 UI 컴포넌트를 기능 기준으로 정리했습니다. 시각 프리뷰까지 함께 보려면 비주얼 인덱스를 참고하세요.

컴포넌트: 102
카테고리: 10
개별 문서: 89
Flutter: 0

업무 화면에서 반복되는 UI 어휘를 기능 기준으로 정리했습니다. 필터로 범위를 좁히고, 목록에서 웹과 Flutter 적용 상태를 함께 확인하세요.

검색 결과 102건

목록표시

정렬기준

AuthMethodButtonauth-method-buttonWDS 테마 인증 방식 버튼 — 패스키·조직 SSO·비밀번호·이메일·매직링크. 코어 Button(secondary) 위에 코어 아이콘 + 한국어 라벨을 얹은 얇은 래퍼입니다.액션웹Flutter 미지원
Buttonbutton행동 유도 기본 컨트롤 — 3변형(primary·secondary·ghost) × 3크기. 기본 채움은 AA 4.5:1을 보장하고, 높이는 control 토큰으로 Flutter와 공유합니다.액션웹Flutter 미지원
CopyButtoncopy-button클립보드 복사 버튼 — 포털 Copy 패턴 v1 승격. 복사 성공 시 체크 아이콘 2초 전환, 실패는 오류 상태로 가시화합니다.액션웹Flutter 미지원
IconButtonicon-button아이콘 전용 버튼 — aria-label 필수. sm(시각 32px)은 ::after로 44px 히트 영역을 확보하고, 높이는 control 토큰으로 Button과 같은 줄에 정렬됩니다.액션웹Flutter 미지원
LoginMethodslogin-methods인증 방식 버튼을 동등하게 노출하는 그룹 — prominence parity를 풀폭 균등 스택으로 강제하고, 선택적 "또는" 라벨 구분선으로 1차 폼과 방식 목록을 가릅니다.액션웹Flutter 미지원
ProviderButtonprovider-button서드파티 사인인 버튼(Sign in with Apple / Google / Microsoft) — 브랜드 가이드라인이 색·로고·라벨을 고정. prominence parity로 다른 방식과 동등하게 노출합니다.액션웹Flutter 미지원
SegmentedButtonsegmented-button연결된 세그먼트 컨트롤 — single(라디오 그룹)·multi(토글) 선택. BadgeToggle을 정식화한 ADR-012 Track C 컴포넌트입니다.액션웹Flutter 미지원
문서 보기
TextLinktext-link본문 속 텍스트 링크 — color.link 토큰 쌍 소비. external이면 ExternalLinkIcon과 새 탭 기본값, 보조기술에는 "(새 창 열림)"을 알립니다.액션웹Flutter 미지원
아직 선택 없음
Autocompleteautocomplete비동기 태그 입력 콤보박스 — 자유 텍스트로 검색하고 외부 주입 suggestions에서 골라 칩으로 쌓습니다. 서버 조회는 소비자가 onQueryChange로 수행하는 비제어 컴포넌트입니다.입력·선택웹Flutter 미지원
BadgeTogglebadge-toggle필 버튼 단일 선택 그룹 — APG radio group 패턴(roving tabindex + 화살표 이동 + 즉시 선택). 필터 칩 줄에 적합하고 비활성 항목은 건너뜁니다. 비제어(defaultValue) 우선 (DK 사양 승격).입력·선택웹Flutter 미지원

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 responsive="auto" 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 병합·하위행·서버 페이징