커버리지 | Surflane

범위와 준비 상태

범위는 플랫폼 개발에 필요한 웹 UI와 Base UI 컴포넌트 목록을 포함합니다. 아래 요약과 인벤토리는 실제 구현 및 문서화 준비 상태를 보여줍니다.

Available: 100

Primitive only: 0

Planned: 0

사용 가능: 공유 구현과 동작하는 예시가 있습니다. 프리미티브만: 업스트림 프리미티브를 다시 내보냅니다. 스타일링은 아직 시작하지 않았습니다. 계획됨: 공유 구현 또는 전용 가이드가 아직 필요합니다. 제품 배포와 전체 접근성 인증은 별도로 검토합니다.

도입 단계

0단계 — 기존 컨트롤과 오버레이
기존 입력, 선택, 확인, 패널, 스크롤을 각각의 페이지로 옮깁니다. 각 동작에 사용법 안내를 함께 제공합니다.
1단계 — 일상 제품 UI
Field, Checkbox, Radio, Switch, Tabs, 상태, 테이블, 빈 상태, 사이드바의 구성과 인터랙션을 다듬습니다.
2단계 — 풍부한 인터랙션
검색 가능한 선택, 숫자 입력, Toast, 데이터 테이블, 실행 흐름을 확장합니다. 각 컴포넌트의 고유 단계 라벨이 우선합니다.
3단계 — 특화 UI
날짜, 파일, 트리, 차트, OTP, 명령 검색의 전용 동작과 라이브러리 적합성을 검토합니다.

커버리지 인벤토리

100개 커버리지 항목
항목	레이어 / 카테고리	근거	단계	준비 상태
Layout	foundation / Structure	Shared CSS tokens	0	사용 가능
Visual hierarchy	foundation / Structure	Shared CSS tokens	0	사용 가능
Layers	foundation / Structure	Shared CSS tokens	0	사용 가능
Color	foundation / Style	Shared CSS tokens	0	사용 가능
Typography	foundation / Style	Shared CSS tokens	0	사용 가능
Iconography	foundation / Style	Shared CSS tokens	0	사용 가능
Themes	foundation / Style	Shared CSS tokens	0	사용 가능
Interaction states	foundation / Behavior	Shared CSS tokens	0	사용 가능
Motion	foundation / Behavior	Shared CSS tokens	0	사용 가능
Accessibility	foundation / Standards	Shared CSS tokens	0	사용 가능
Content and localization	foundation / Standards	Shared CSS tokens	0	사용 가능
Design tokens	foundation / Standards	Shared CSS tokens	0	사용 가능
Button	component / Actions	Base UI	0	사용 가능
Input	component / Forms	Base UI	0	사용 가능
Select	component / Forms	Base UI	0	사용 가능
NativeSelect adapter	component / Forms	Compatibility adapter	0	사용 가능
Field	component / Forms	Base UI	1	사용 가능
Fieldset	component / Forms	Base UI	1	사용 가능
Form	component / Forms	Base UI	1	사용 가능
Textarea	component / Forms	Semantic HTML / product composition	1	사용 가능
Checkbox	component / Selection	Base UI	1	사용 가능
Checkbox Group	component / Selection	Base UI	1	사용 가능
Radio Group	component / Selection	Base UI	1	사용 가능
Switch	component / Selection	Base UI	1	사용 가능
Toggle	component / Selection	Base UI	2	사용 가능
Toggle Group	component / Selection	Base UI	2	사용 가능
Segmented control	component / Selection	Base UI ToggleGroup composition	2	사용 가능
Theme switch	component / Selection	Base UI ToggleGroup composition	2	사용 가능
Combobox	component / Forms	Base UI	1	사용 가능
Autocomplete	component / Forms	Base UI	2	사용 가능
Number Field	component / Forms	Base UI	2	사용 가능
Slider	component / Forms	Base UI	2	사용 가능
OTP Field	component / Forms	Base UI	3	사용 가능
Date / time picker	component / Forms	React Aria / internationalized date composition	3	사용 가능
Time range picker	component / Forms	Semantic HTML / product composition	2	사용 가능
File upload	component / Forms	Native file input / Base UI Field composition	3	사용 가능
Popover	component / Overlays	Base UI	0	사용 가능
Menu	component / Overlays	Base UI	0	사용 가능
Context Menu	component / Overlays	Base UI	2	사용 가능
Tooltip	component / Overlays	Base UI	0	사용 가능
Preview Card	component / Overlays	Base UI	3	사용 가능
Dialog	component / Overlays	Base UI	0	사용 가능
Alert Dialog	component / Overlays	Base UI	0	사용 가능
Sheet	component / Overlays	Base UI Dialog composition	0	사용 가능
Drawer	component / Overlays	Base UI	0	사용 가능
Tabs	component / Navigation	Base UI	1	사용 가능
Accordion	component / Navigation	Base UI	1	사용 가능
Collapsible	component / Navigation	Base UI	1	사용 가능
Navigation Menu	component / Navigation	Base UI	2	사용 가능
Menubar	component / Navigation	Base UI	3	사용 가능
Toolbar	component / Actions	Base UI	2	사용 가능
Link	component / Navigation	Semantic HTML / product composition	1	사용 가능
Breadcrumbs	component / Navigation	Semantic HTML / product composition	1	사용 가능
Pagination	component / Navigation	Semantic HTML / product composition	2	사용 가능
Bottom navigation	component / Navigation	Semantic HTML / product composition	2	사용 가능
Avatar	component / Data display	Base UI	1	사용 가능
Badge / Status	component / Data display	Semantic HTML / product composition	1	사용 가능
Description list	component / Data display	Semantic HTML / product composition	1	사용 가능
Timeline	component / Data display	Semantic HTML / product composition	2	사용 가능
Kbd	component / Data display	Semantic HTML / product composition	1	사용 가능
Card / Surface	component / Data display	Semantic HTML / product composition	1	사용 가능
Table	component / Data display	Semantic HTML / product composition	1	사용 가능
Code block	component / Data display	Semantic HTML / product composition	2	사용 가능
Syntax highlighter	component / Data display	Shiki TextMate composition	2	사용 가능
Markdown	component / Data display	react-markdown / remark-gfm composition	2	사용 가능
List	component / Data display	Semantic HTML / product composition	1	사용 가능
Stat	component / Data display	Semantic HTML / product composition	2	사용 가능
Tree view	component / Data display	Headless Tree / TanStack Virtual composition	3	사용 가능
Line chart	component / Charts	Recharts composition	3	사용 가능
Area chart	component / Charts	Recharts composition	3	사용 가능
Bar chart	component / Charts	Recharts composition	3	사용 가능
Scatter chart	component / Charts	Recharts composition	3	사용 가능
Sparkline	component / Charts	Semantic HTML / product composition	2	사용 가능
Bar list	component / Charts	Semantic HTML / product composition	2	사용 가능
Proportion bar	component / Charts	Semantic HTML / product composition	2	사용 가능
Diverging bar	component / Charts	Semantic HTML / product composition	2	사용 가능
Scroll Area	component / Structure	Base UI	0	사용 가능
Separator	component / Structure	Base UI	1	사용 가능
Progress	component / Feedback	Base UI	2	사용 가능
Meter	component / Feedback	Base UI	2	사용 가능
Toast	component / Feedback	Base UI	1	사용 가능
Data state	component / Feedback	Semantic HTML / product composition	2	사용 가능
Banner	component / Feedback	Semantic HTML / product composition	2	사용 가능
Inline message	component / Feedback	Semantic HTML / product composition	1	사용 가능
Spinner	component / Feedback	Semantic HTML / product composition	1	사용 가능
Skeleton	component / Feedback	Semantic HTML / product composition	1	사용 가능
Empty state	component / Feedback	Semantic HTML / product composition	1	사용 가능
App shell / Sidebar	pattern / Patterns	Product composition	1	사용 가능
Page header	pattern / Patterns	Product composition	1	사용 가능
Search / filter bar	pattern / Patterns	Product composition	1	사용 가능
Data table	pattern / Patterns	Product composition	2	사용 가능
Resource list	pattern / Patterns	Product composition	1	사용 가능
Inline confirmation	pattern / Patterns	Base UI Popover composition	1	사용 가능
Form workflow	pattern / Patterns	Product composition	1	사용 가능
Async job / Run detail	pattern / Patterns	Product composition	2	사용 가능
Documentation page	pattern / Patterns	Product composition	2	사용 가능
Command search	pattern / Patterns	Product composition	3	사용 가능
Error / permission / offline	pattern / Patterns	Product composition	2	사용 가능
Responsive navigation	pattern / Patterns	Product composition	1	사용 가능
Dashboard	pattern / Patterns	Product composition	2	사용 가능

준비 완료 조건

동작하는 예시와 사용법, 안티패턴, 상태, API, 키보드 문서를 같은 페이지에 유지하세요.
라이트, 다크, 시스템 테마를 확인하세요. 등장 모션, 즉시 닫힘, 축소 모션을 확인하세요.
라벨, 초기 포커스, 포커스 이동과 복원, 오류 메시지를 확인하세요. 320px 너비, 긴 한국어와 영어 텍스트, 확대를 확인하세요.
폼에서 제출, 초기화, 서버 오류를 확인하세요. 오버레이에서 포털, 중첩, 외부 클릭을 확인하세요. 데이터 UI에서 로딩, 빈 값, 부분 실패를 확인하세요.
React는 Base UI 위에 빌드하며, 특화 기능은 명시적 라이브러리 구성으로 처리합니다. Astro 문서는 프레임워크 독립 CSS를 선호합니다. 도메인 규칙은 제품에 유지됩니다.

연구와 구현 경계

Base UI는 접근성과 동작 프리미티브를 제공합니다. 테이블, 상태, 앱 셸, 문서 흐름은 의미 있는 HTML과 공유 스타일 위에 만듭니다. 날짜, 트리, 차트 등 유사한 기능은 Base UI가 제공하는 것을 확인한 뒤 사용하세요.

2026-10-17 기준으로 컴포넌트 목록과 패키지를 검토했으며 Base UI 1.9.0을 사용합니다. 프레임워크 유틸리티 CSP, Direction, mergeProps, useRender는 별도의 인터랙티브 컴포넌트로 치지 않습니다.