v0.10.0

ComponentsP3 본문

비주얼 인덱스

@wds/ui-web 전 컴포넌트를 한눈에 — 공개 배럴에서 자동 도출한 그리드입니다. 수기 목록이 아니라 코드에서 생성되므로, 컴포넌트가 추가되면 이 인덱스에 자동 반영됩니다.

마지막 업데이트 2026-06-13

전 컴포넌트 한눈에#

이 인덱스는 @wds/ui-web의 공개 배럴(packages/ui-web/src/index.ts)을 읽어 코드에서 자동 생성됩니다. 토큰 표(TokenTable)가 토큰 매니페스트와 묶여 있듯, 이 그리드도 컴포넌트 export와 묶여 있어 문서와 코드가 어긋나지 않습니다.

각 카드는 컴포넌트 이름, 문서 슬러그, 그리고 가능한 경우 한 줄 요약을 보여줍니다. 카드를 누르면 해당 컴포넌트 문서로 이동합니다. 레이아웃 프리미티브처럼 06 컴포넌트 카탈로그에 개별 페이지가 없는 항목은 07 레이아웃 시스템 등 해당 문서로 연결됩니다.

컴포넌트
78
카테고리
10
개별 문서
71
Flutter
0

@wds/ui-web 배럴에서 자동 도출하고 기능별로 분류했습니다. 각 타일은 실제 컴포넌트를 그대로 렌더하므로 — 문서와 코드가 구조적으로 어긋날 수 없습니다. 필터로 좁히거나 매트릭스로 웹↔Flutter 패리티를 확인하세요.

78개 컴포넌트 표시 중

액션

행동을 트리거하고 제출하는 컨트롤

  • 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 미지원
  • ProviderButtonprovider-button서드파티 사인인 버튼(Sign in with Apple / Google) — 브랜드 가이드라인이 색·로고·라벨을 고정. 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 미지원
  • Checkboxcheckbox네이티브 input 기반 체크박스 — 커스텀 박스 시각화, indeterminate(혼합) 상태, children 라벨 자동 연동.웹Flutter 미지원
  • ColorPickercolor-picker스와치/field 트리거 + 스펙트럼·그리드·슬라이더 모드 팝업 — 진실원천은 HSV(+alpha)라 s=0에서도 hue가 보존되고 onChange 출력은 항상 HEX입니다. 표시 포맷(HEX/RGB/HSL) 전환·최근 색·alpha 자동 감지 포함. 외부 클릭·Escape 닫기(논모달), 비제어(defaultValue) 우선 (P3.7-B1 ColorPicker 2.0).웹Flutter 미지원
  • 파일을 끌어다 놓거나 클릭해 선택
    FileUploadfile-upload파일 선택·드래그앤드롭 표면 — dropzone/button 변형, list/picture-card 목록. 업로드 전송은 소비자 책임(엔드포인트 결합 없음), items 주입으로 제어형 업로드 상태(진행률/성공/실패+재시도) 표현. 제약 위반은 인라인 오류(role=alert) + onReject(한국어 reason + 표준 code). 붙여넣기(enablePaste)·폴더(directory) 추가 지원 (DK File/* 사양의 결합 제거판).웹Flutter 미지원

  • 회사 메일 주소

    FormFieldform-field라벨·컨트롤·설명/오류 묶음 — htmlFor와 aria-describedby 배선을 자동화하고 단일 자식에 id를 주입합니다.웹Flutter 미지원
  • FormMessageform-message폼 레벨(Tier 2) 인라인 메시지 — 단일 필드에 귀속되지 않는 제출 실패·계정 잠금을 CTA 바로 위에 컴팩트하게. 메시지 위계의 가운데 층.웹Flutter 미지원
  • Inputinput텍스트 입력 — leading/trailing 아이콘 슬롯과 invalid 상태. 포커스 링은 래퍼의 focus-within이 그립니다.웹Flutter 미지원
  • MultiSelectmulti-select다중 선택 콤보박스 — 칩 트리거 + aria-multiselectable 리스트박스. Enter/Space 토글은 목록을 닫지 않고, 포커스는 트리거(검색 시 검색 입력)에 머뭅니다. 비제어(defaultValue) 우선 (DK WizDropDown 사양 승격).웹Flutter 미지원
  • QuantityStepperquantity-stepper수량 증감 입력기 — −/값/+ 구성에 min·max·step 클램핑. 진행 단계 Stepper와 역할이 달라 별도 이름을 씁니다(ADR-012 Track C).웹Flutter 미지원
  • RadioGroupradio-groupAPG radio group 패턴 — roving tabindex로 그룹이 탭 순서에 한 번만 잡히고, 화살표 키가 순환 이동하며 즉시 선택합니다. 비제어(defaultValue) 우선, value로 제어 모드도 지원.웹Flutter 미지원
  • RangeSliderrange-slider두 네이티브 input[type="range"]를 겹친 두-썸 범위 슬라이더 — 각 썸이 실제 슬라이더라 키보드/ARIA는 네이티브가 보장하고, 두 썸은 교차 불가(low ≤ high). 비제어(defaultValue) 우선 + 제어(value/onChange).웹Flutter 미지원
  • SearchFieldsearch-field검색 입력 — SearchIcon leading 고정, 값이 있으면 지우기 버튼 노출, Enter로 onSearch 호출. 비제어(defaultValue) 우선이라 서버 MDX에서도 그대로 동작합니다.웹Flutter 미지원
  • Selectselect커스텀 리스트박스 — APG select-only combobox 패턴. 포커스는 트리거에 머물고 aria-activedescendant가 활성 옵션을 가리킵니다. 제어(value)·비제어(defaultValue) 모두 지원, 옵션 그룹 헤더 지원.웹Flutter 미지원
  • Sliderslider네이티브 input[type="range"] 기반 슬라이더 — 키보드/ARIA는 네이티브가 보장하고, 토큰 스타일 트랙·썸에 현재값 라벨(showValue) 옵션. 비제어(defaultValue) 우선.웹Flutter 미지원
  • Switchswitch토글 스위치 — button[role="switch"] + aria-checked. 라벨(children)은 label로 감싸 클릭 연동, 24px 트랙에 44px 히트 영역. 제어(checked)·비제어(defaultChecked) 모두 지원.웹Flutter 미지원
  • Textareatextarea여러 줄 텍스트 입력 — Input과 동일한 invalid·disabled 어휘. 자동 높이 없이 rows와 세로 리사이즈로 높이를 제어합니다.웹Flutter 미지원

날짜·시간

날짜·시간·기간을 고르는 피커

  • CalendarcalendarDatePicker 내부 프리미티브에서 문서화웹Flutter 미지원
  • 단일 선택 — mode: single (기본)

    아직 선택 없음

    범위 선택 — mode: range (시작 → 끝, 역순은 자동 정렬)

    아직 선택 없음

    DatePickerdate-pickerInput형 트리거 + Calendar 팝업 — 단일/범위 날짜를 비제어로 선택하고 트리거에 YYYY-MM-DD로 표시합니다.웹Flutter 미지원
  • 데스크톱 모드 — 임의선택(프리셋) / 달력선택(듀얼 먼스) 후 선택완료로 확정

    아직 확정 없음

    DateRangePickerdate-range-picker업무 기간 조회용 범위 선택기 — 임의선택(프리셋)/달력선택(듀얼 먼스) 2탭 팝업. 비제어 defaultValue + onChange(즉시)/onConfirm(선택완료 확정). 외부 클릭·Escape는 이전 확정값을 복원합니다 (DK WizDatePickerEx 사양 승격).웹Flutter 미지원
  • DayPickerday-picker반복 일정 요일/일자 다중 선택 — week는 일~토 7버튼(0~6), monthly는 1~31 그리드를 aria-pressed 토글 버튼 그룹으로 제공하는 비제어 컴포넌트입니다.웹Flutter 미지원
  • TimePickertime-pickerInput형 트리거 + 시간 목록 드롭다운 — interval·minTime·maxTime으로 'HH:mm' 옵션을 생성하는 비제어 컴포넌트입니다. mobile이면 BottomSheet 목록으로 전환됩니다 (DK 사양 승격).웹Flutter 미지원

내비게이션

화면과 단계를 이동하는 길잡이

  • Breadcrumbbreadcrumb경로 내비게이션 — nav + ol/li 시맨틱. 마지막 항목은 aria-current="page"의 현재 위치(링크 아님), 구분자는 장식 아이콘입니다.웹Flutter 미지원
    • 새 파일 만들기
    • 프로젝트 열기
    • 문서 검색
    • 테마 전환
    • 배포 (권한 필요)
    • 설정

    ↑/↓로 이동(비활성 건너뜀·순환) · Enter 또는 클릭으로 선택

    Commandcommand검색 입력 + 필터된 명령 리스트(명령 팔레트 표면) — combobox + listbox를 aria-activedescendant로 연결. 검색은 label 부분 일치, 비제어(query 내부 소유).웹Flutter 미지원
  • Paginationpagination페이지 내비게이션 — 비제어(defaultPage) + onPageChange 알림. 줄임 로직(1 … 9 10 11 … 20), 경계에서 이전/다음 disabled.웹Flutter 미지원
    1. 계정 (완료)이름·이메일
    2. 팀구성
    3. 완료시작
    Stepperstepper단계 표시기 — ol/li 시맨틱. 완료는 체크+primary, 현재는 aria-current="step", 미래는 muted 숫자로 색+마커를 병행합니다.웹Flutter 미지원
  • 탭 패널 콘텐츠
    TabstabsAPG Tabs 패턴 컴파운드 컴포넌트 — 비제어(defaultValue) 또는 제어(value) 선택 상태, roving tabindex, 화살표 자동 활성화.웹Flutter 미지원

컨테인먼트·오버레이

콘텐츠를 담거나 위에 띄우는 표면

  • tokens/ SSOT에서 생성됩니다.

    AccordionaccordionAPG Accordion 패턴 컴파운드 컴포넌트 — single/multiple 펼침을 비제어(defaultValue) 또는 제어(value)로 소유, h3+button과 region으로 구조화.웹Flutter 미지원
  • BottomSheetbottom-sheet화면 하단에서 올라오는 모바일 선택 표면 — 포커스 트랩 · Escape/배경 닫기 · 핸들 드래그 다운 닫기 · 스크롤 잠금을 내장한 제어 컴포넌트입니다. Select/DatePicker의 mobile 모드가 이 컴포넌트를 합성합니다 (DK 사양 승격).웹Flutter 미지원
  • 어떤 콘텐츠든 담는 기본 표면입니다.
    Cardcardsurface 컨테이너 프리미티브 — emphasis(outlined·filled·elevated) × function(static·clickable)와 media/header/body/footer 슬롯. 풍부함은 prop이 아니라 시스템 재료 조립으로.웹Flutter 미지원
  • Drawerdrawer화면 가장자리에서 슬라이드 인하는 오버레이 패널(Modal 변형) — 포커스 트랩 · Escape/배경 닫기 · 포커스 복원 · 스크롤 잠금을 내장한 제어 컴포넌트입니다.웹Flutter 미지원
  • DropdownMenudropdown-menu트리거 버튼 + 액션 메뉴(WAI-ARIA menu button 패턴) — 열리면 첫 항목으로 포커스 이동, 화살표 순환 탐색, Escape는 닫고 트리거로 복귀. 비제어(defaultOpen).웹Flutter 미지원
  • Modalmodal오버레이 다이얼로그 — 포커스 트랩 · Escape/배경 닫기 · 포커스 복원 · 스크롤 잠금을 내장한 제어 컴포넌트입니다.웹Flutter 미지원
  • Popoverpopover트리거 기준으로 뜨는 논모달 패널 — 외부 클릭/Escape 닫기, 하단 공간 부족 시 상단 플립. 포커스 트랩 없이 Tab이 자연 진행합니다. 비제어(defaultOpen).웹Flutter 미지원
  • SideSheetside-sheetBottomSheet의 적응형 확장 짝 — 좁은 화면은 하단 시트, 넓은 화면은 측면 패널로 자동 전환합니다. 두 표면을 합성한 ADR-012 Track C 컴포넌트입니다.웹Flutter 미지원
  • Tooltiptooltip트리거 상단 중앙의 짧은 텍스트 힌트 — hover는 400ms 지연, focus는 즉시 표시. role="tooltip" + aria-describedby 연결(WAI-ARIA tooltip 패턴).웹Flutter 미지원

피드백·상태

상태·진행·결과를 알리는 신호

  • 새 버전 안내

    다크 테마가 기본 제공됩니다.
    Alertalert페이지 내 정적 배너 — variant 4종. 뉴트럴 표면 + 채운 아이콘 배지로 의미를 전하고, error만 role="alert"로 즉시 낭독됩니다.웹Flutter 미지원
  • 기본
    Badgebadge상태/라벨 칩 — 의미별 variant 6종. 상태색은 *-text 잉크 + 8% 틴트 배경으로 라이트/다크 모두 AA를 보장합니다.웹Flutter 미지원
  • ChipchipM3 칩 시스템 — assist·filter·input·suggestion 4변형의 인터랙션 칩. 단순 라벨/제거 칩 Tag와 별개의 컴포넌트입니다(ADR-012 Track C).웹Flutter 미지원

  • 검색 결과가 없습니다

    다른 검색어로 다시 시도해 보세요.

    EmptyStateempty-state빈 상태 안내 — 중앙 정렬의 icon·title·description·action 4슬롯. 아이콘은 surface-muted 원형 장식, 행동 슬롯으로 다음 단계를 제시합니다.웹Flutter 미지원
  • Progressprogress진행률 표시기 — role="progressbar" + aria-value 트리오. 결정(value 0–100)·불명(indeterminate) 두 모드, 모션은 transform만 사용합니다.웹Flutter 미지원
  • Spinnerspinner인라인 로딩 인디케이터 — transform 회전만 사용(컴포지터 친화). role="status" + 기본 라벨 '로딩 중', reduced-motion에서는 정지 대신 감속합니다.웹Flutter 미지원
  • 디자인 시스템
    Tagtag칩/태그 — variant 5종 × size 2단. onRemove를 주면 44px 히트 영역의 제거 버튼이 붙는 입력성 칩이 됩니다.웹Flutter 미지원
  • Toasttoast전역 알림 스택 — ToastProvider + useToast 3분할 구조. 5초 자동 해제에 hover 일시정지, error/warning은 role="alert"로 즉시 낭독됩니다.웹Flutter 미지원

데이터 표시

구조화된 데이터를 보여주는 표면

  • AreaChartarea-chart누적감 있는 추세를 면적으로 — 세로 그라데이션 채움 + 선, 0 베이스라인 강제. 겹침은 ≤2, 그 이상은 누적(stacked).웹Flutter 미지원
  • Avataravatar사용자/팀 표시 — src 이미지 또는 이름 이니셜 폴백(primary-subtle 원형). 서로게이트 쌍 안전 이니셜, 3단 크기.웹Flutter 미지원
  • BarChartbar-chart카테고리별 절대량을 막대로 — 둥근 막대, 0 베이스라인 강제, 그룹·누적(stacked)·가로(horizontal) 지원.웹Flutter 미지원
  • Carouselcarousel가로 스크롤 캐러셀 — scroll-snap 트랙 + 이전/다음 컨트롤, multiBrowse·hero·fullScreen 레이아웃(ADR-012 Track C).웹Flutter 미지원
  • ChartExportchart-export차트를 CSV·PNG·SVG로 내보내기 — 컨테이너 DOM(데이터 표 + SVG)을 읽어 모든 WDS 차트에 동작. 웹 전용 DX.웹Flutter 미지원
  • ComboChartcombo-chart혼합 series(막대+선)를 한 플롯에 — 카테고리 band 공유, 이중 Y축으로 단위가 다른 두 지표(절대량·비율)를 겹친다.웹Flutter 미지원
  • DataGriddata-grid편집형 데이터 그리드 — 정렬·행 선택·인라인 편집·클라이언트 페이징을 갖춘 표. 정적 표는 Table, 인터랙션이 필요하면 DataGrid. 비제어 defaultData + onDataChange(불변) (DK WizDataTable 사양의 절제된 1차 승격).웹Flutter 미지원
  • FunnelChartfunnel-chart전환/파이프라인 단계별 감소를 사다리꼴 밴드로 — 단계 폭 ∝ 도달 수, 첫·직전 단계 대비 전환율.웹Flutter 미지원
  • GaugeChartgauge-chartKPI 단일 지표를 방사형 아크로 — 목표 대비 달성률, 임계 구간색(미달·주의·달성), 목표 마커.웹Flutter 미지원
  • HeatmapChartheatmap-chart매트릭스(행×열) 값을 순차 색 강도로 인코딩 — 요일×시간대, 상관행렬, 캘린더 활동 등. 색 = 단일 토큰의 레벨 불투명도.웹Flutter 미지원
  • LineChartline-chart연속 추세를 선으로 — 자체 SVG(zero-dep), monotone 곡선 기본, 색맹 안전 토큰, WDS Tooltip 도그푸딩.웹Flutter 미지원
  • PieChartpie-chart부분-전체(비례)를 슬라이스로 — 자체 SVG(zero-dep), 파이/도넛 2변형, 도넛 중앙 합계, 색맹 안전 토큰, 범주×값×% sr-only 표.웹Flutter 미지원
  • RadarChartradar-chart다변량 비교를 방사형 폴리곤으로 — 여러 지표를 한 축마다 펼쳐 시리즈를 겹쳐 본다.웹Flutter 미지원
  • ScatterChartscatter-chart두 연속 변수의 분포·상관을 점으로 — 자체 SVG(zero-dep), 마커만 상시(선 없음), 최소제곱 추세선, 색맹 안전 토큰.웹Flutter 미지원
  • Sparklinesparkline카드·표·KPI 옆에 끼우는 초소형 무축 차트 — 자체 SVG(zero-dep), 선·영역·막대 3변형, 손익 추세색, role=img 글랜스 a11y.웹Flutter 미지원
  • StockChartstock-chart애플 주식앱식 시계열 주가 차트 — 손익 색·개장가 기준선·정밀 스크럽 readout·기간 선택.웹Flutter 미지원
  • 에이전트 실행 현황
    에이전트작업
    플래너12
    코더34
    Tabletable컬럼 정의 기반 정적 데이터 테이블 — 빈 상태 내장, 정렬·페이지네이션은 소비자 책임(YAGNI)입니다.웹Flutter 미지원

로딩·스켈레톤

불러오는 동안 구조를 유지하는 자리표시

  • Skeleton프리셋 7skeleton로딩 중 구조 유지 플레이스홀더 3계층 — variant 4종(text/rect/rounded/circle)·animation 3종(pulse/wave/none)·tone 3종(subtle/default/strong) 프리미티브, 6종 프리셋(Text·Media·Card·List·Table·Image), SkeletonLoadable a11y 래퍼. 모션은 컴포지터 친화(opacity/transform)이며 prefers-reduced-motion에서 정적입니다.웹Flutter 미지원

AI

AI 모먼트를 위한 전용 컴포넌트

  • 위즈봇코드 리뷰어
    완료
    PR 3건 리뷰 완료 — CRITICAL 0 · HIGH 1
    AgentCardagent-cardAI 에이전트 상태 카드 — 이름·역할·상태·결과 4요소. 상태 칩은 색+텍스트 병행으로 색맹 안전합니다.웹Flutter 미지원

  • Enter 전송 · Shift+Enter 줄바꿈 · 한글 조합 중 Enter는 무시됩니다

    AiChatInputai-chat-inputAI 채팅 입력 — Enter 전송, Shift+Enter 줄바꿈, 한글 IME 보호, 자동 높이. 스트리밍 중에는 중단 버튼으로 바뀝니다.웹Flutter 미지원
    • 검색 결과 없음검색·필터 결과 0
    • 데이터 없음데이터·통계 비었음
    • 폼 없음설문·양식 없음
    • 시트 없음스프레드시트·표 비었음
    • 질문 없음FAQ·Q&A 비었음
    • 그룹 없음팀·그룹 비었음
    • 라이브러리 비었음컬렉션·보관함 없음
    • 할 일 없음작업·태스크 비었음

    검색 결과가 없습니다

    다른 검색어로 다시 시도하거나, 필터를 초기화해 보세요.

    BloomSpotbloom-spot웹Flutter 미지원

레이아웃

구성과 정렬을 책임지는 프리미티브

  • Containercontainer07 레이아웃 시스템에서 문서화웹Flutter 미지원
  • Gridgrid07 레이아웃 시스템에서 문서화웹Flutter 미지원

  • 위 콘텐츠

    아래 콘텐츠

    Separatorseparator1px 헤어라인 구분선 — 기본은 순수 장식(role="none")으로 접근성 트리에서 제외되고, decorative={false}일 때만 의미적 구분자가 됩니다.웹Flutter 미지원
  • Splitsplit07 레이아웃 시스템에서 문서화웹Flutter 미지원
  • Splittersplitter2패널 드래그 리사이즈 — APG window splitter 패턴. 구분선이 role=separator + aria-valuenow(0~100)를 보고하고 키보드 화살표·Home/End·더블클릭 리셋을 지원합니다. 비율(%) 비제어 (DK 사양 승격).웹Flutter 미지원
  • Stackstack07 레이아웃 시스템에서 문서화웹Flutter 미지원

작동 방식#

  • 단일 출처: 배럴의 export * from './<Component>' 한 줄이 곧 인덱스 항목입니다. 컴포넌트 디렉터리를 만들고 배럴에 export를 추가하면 별도 작업 없이 여기에 나타납니다.
  • 메타 병합: 이름은 PascalCase 디렉터리명을, 슬러그는 kebab-case 변환값을 씁니다 (BottomSheet는 bottom-sheet). 요약·상태는 06-components/<slug>.mdx의 frontmatter에서 가져옵니다.
  • 드리프트 0: 코드에 컴포넌트가 추가됐는데 인덱스에서 빠지는 일이 구조적으로 불가능합니다. 도출원이 곧 라이브러리 공개 표면이기 때문입니다.

썸네일(시각 회귀 baseline 재사용)과 per-component 체인지로그는 후속 단계에서 이 인덱스 위에 얹습니다.