# Docs

## index

- [Featuring Design System](/docs.mdx): Featuring Corp.의 React 디자인 시스템 — 일관된 UI를 위한 컴포넌트, 토큰, 아이콘

## components

- [Components](/docs/components.mdx): @featuring-corp/components — React UI 컴포넌트, Layout Primitives, CSS Preset
- [Checkbox](/docs/components/components/checkbox.mdx): 접근성을 준수하는 체크박스 컴포넌트.
- [Field](/docs/components/components/field.mdx): 폼 컨트롤을 감싸는 범용 레이아웃 + 접근성 크롬 컴포넌트.
- [Link](/docs/components/components/link.mdx): 접근성을 준수하는 텍스트 링크 컴포넌트.
- [Loader](/docs/components/components/loader.mdx): 로딩 상태를 표시하는 스피너 컴포넌트.
- [Radio](/docs/components/components/radio.mdx): 접근성을 준수하는 라디오 버튼 컴포넌트.
- [SectionMessage](/docs/components/components/section-message.mdx): 상태별 인라인 메시지 컴포넌트. Compound 패턴 기반, 아이콘·제목·설명·액션·닫기 버튼 조합.
- [SegmentedControl](/docs/components/components/segmented-control.mdx): 여러 옵션 중 하나 또는 여러 개를 선택하는 세그먼트 컨트롤.
- [Switch](/docs/components/components/switch.mdx): base-ui 기반 접근성 스위치 컴포넌트.
- [Tabs](/docs/components/components/tabs.mdx): 탭 기반 콘텐츠 전환 컴포넌트. Base UI Tabs 래핑.
- [Tag](/docs/components/components/tag.mdx): Compound 패턴 기반 태그 컴포넌트. useRenderComponent + rainbow-sprinkles 통합.
- [TextArea](/docs/components/components/text-area.mdx): 여러 줄 텍스트 입력을 위한 Field 연동 textarea 컴포넌트.
- [TextInput](/docs/components/components/text-input.mdx): 아이콘·텍스트·버튼을 자유롭게 조합하는 텍스트 입력 컴포넌트.
- [Tooltip](/docs/components/components/tooltip.mdx): 요소에 hover/focus 시 추가 정보를 표시하는 툴팁 컴포넌트.
- [Box](/docs/components/layout/box.mdx): 모든 레이아웃 컴포넌트의 기반이 되는 박스 컴포넌트. $css prop을 통해 rainbow-sprinkles 기반 반응형 스타일을 지원하고, render prop으로 렌더링할 요소를 변경할 수 있습니다. base-ui의 useRender + mergeProps 기반.
- [Center](/docs/components/layout/center.mdx): 자식 요소를 수평/수직 중앙에 배치하는 컴포넌트.
- [Flex](/docs/components/layout/flex.mdx): Flexbox 레이아웃을 위한 컴포넌트. Box를 확장하며 display가 flex로 설정됩니다.
- [Grid](/docs/components/layout/grid.mdx): CSS Grid 레이아웃 컴포넌트. gridTemplateColumns, gap 등으로 그리드를 구성합니다.
- [HStack](/docs/components/layout/hstack.mdx): 수평 스택 레이아웃 컴포넌트. 자식 요소를 가로로 배치합니다.
- [Typo](/docs/components/layout/typo.mdx): 시맨틱 타이포그래피 컴포넌트. heading, body, caption 변형을 지원합니다.
- [VStack](/docs/components/layout/vstack.mdx): 수직 스택 레이아웃 컴포넌트. 자식 요소를 세로로 배치합니다.
- [mergeProps](/docs/components/utils/merge-props.mdx): 여러 React props 객체를 안전하게 병합하는 유틸리티. 이벤트 핸들러는 체이닝, className은 연결, style은 병합됩니다.
- [useRender](/docs/components/utils/use-render.mdx): 컴포넌트의 렌더링 요소를 render prop으로 교체할 수 있게 해주는 Hook. base-ui의 useRender를 기반으로 ref 병합, 이벤트 핸들러 체이닝, state → data-* 자동 변환을 제공합니다.
- [CoreAvatarGroup](/docs/components/legacy/core-avatar-group.mdx): 아바타 그룹 컴포넌트
- [CoreAvatar](/docs/components/legacy/core-avatar.mdx): 아바타 컴포넌트
- [CoreButton](/docs/components/legacy/core-button.mdx): 버튼 컴포넌트
- [CoreCalendar](/docs/components/legacy/core-calendar.mdx): 캘린더 컴포넌트
- [CoreCheckbox](/docs/components/legacy/core-checkbox.mdx): 체크박스 컴포넌트
- [CoreDot](/docs/components/legacy/core-dot.mdx): 도트 컴포넌트
- [CoreDropdown](/docs/components/legacy/core-dropdown.mdx): 드롭다운 컴포넌트
- [CoreIconBadge](/docs/components/legacy/core-icon-badge.mdx): 아이콘 뱃지 컴포넌트
- [CoreLink](/docs/components/legacy/core-link.mdx): 링크 컴포넌트
- [CoreLoader](/docs/components/legacy/core-loader.mdx): 로더 컴포넌트
- [CoreModal](/docs/components/legacy/core-modal.mdx): 모달 컴포넌트
- [CoreMultiSelectPrim](/docs/components/legacy/core-multi-select-prim.mdx): 컴파운드 패턴으로 구성된 Select 컴포넌트입니다. 다중 값에 대한 선택을 지원합니다. 선택된 값은 CoreTag 컴포넌트로 표시됩니다.
- [CorePagination](/docs/components/legacy/core-pagination.mdx): 페이지네이션 컴포넌트
- [CorePortal](/docs/components/legacy/core-portal.mdx): 포털 컴포넌트
- [CoreRadio](/docs/components/legacy/core-radio.mdx): 라디오 버튼 컴포넌트
- [CoreSectionMessage](/docs/components/legacy/core-section-message.mdx): 섹션 메시지 컴포넌트
- [CoreSegmentedControlGroup](/docs/components/legacy/core-segmented-control-group.mdx): 세그먼트 컨트롤 그룹 컴포넌트
- [CoreSegmentedControl](/docs/components/legacy/core-segmented-control.mdx): 세그먼트 컨트롤 컴포넌트
- [CoreSelectItem](/docs/components/legacy/core-select-item.mdx): 셀렉트 아이템 컴포넌트
- [CoreSelectPrim](/docs/components/legacy/core-select-prim.mdx): 컴파운드 패턴으로 구성된 Select 컴포넌트입니다. 단일 값에 대한 선택을 지원합니다.
- [CoreSelect](/docs/components/legacy/core-select.mdx): 셀렉트 컴포넌트
- [CoreSideNavigation](/docs/components/legacy/core-side-navigation.mdx): 사이드 네비게이션 컴포넌트
- [CoreStatusBadge](/docs/components/legacy/core-status-badge.mdx): 상태 뱃지 컴포넌트
- [CoreTabItem](/docs/components/legacy/core-tab-item.mdx): 탭 아이템 컴포넌트
- [CoreTable](/docs/components/legacy/core-table.mdx): 테이블 컴포넌트
- [CoreTabs](/docs/components/legacy/core-tabs.mdx): 탭 컴포넌트
- [CoreTag](/docs/components/legacy/core-tag.mdx): 태그 컴포넌트
- [CoreTextArea](/docs/components/legacy/core-text-area.mdx): 텍스트 영역 컴포넌트
- [CoreTextInput](/docs/components/legacy/core-text-input.mdx): 텍스트 입력 컴포넌트
- [CoreToast](/docs/components/legacy/core-toast.mdx): 토스트 컴포넌트
- [CoreToggle](/docs/components/legacy/core-toggle.mdx): 토글 컴포넌트
- [CoreTooltip](/docs/components/legacy/core-tooltip.mdx): 툴팁 컴포넌트
- [Dot](/docs/components/components/badge/dot.mdx): 상태 또는 알림을 표시하는 소형 원형 인디케이터 컴포넌트.
- [IconBadge](/docs/components/components/badge/icon-badge.mdx): 아이콘을 원형 배지 형태로 감싸는 독립 컴포넌트. useRenderComponent + rainbow-sprinkles 통합.
- [StatusBadge](/docs/components/components/badge.mdx): Compound 패턴 기반 상태 배지 컴포넌트. status × type 조합으로 6가지 시맨틱 상태를 4가지 시각 강도로 표현.
- [AvatarGroup](/docs/components/components/avatar/avatar-group.mdx): 여러 아바타를 겹쳐 표시하는 그룹 컨테이너. max, total, renderSurplus로 유연한 초과 표시 지원.
- [Avatar](/docs/components/components/avatar.mdx): Compound 패턴 기반 아바타 컴포넌트. Base UI + useRenderComponent + rainbow-sprinkles 통합.
- [IconButton](/docs/components/components/button/icon-button.mdx): 아이콘 전용 버튼. Button을 래핑하며 width = height 자동 적용.
- [Button](/docs/components/components/button.mdx): Compound 패턴 기반 버튼 컴포넌트. base-ui Button + rainbow-sprinkles 통합.
- [Select (Single)](/docs/components/components/select.mdx): 드롭다운 목록에서 하나의 값을 선택하는 컴포넌트.
- [Select (Multiple)](/docs/components/components/select/multiple.mdx): 드롭다운 목록에서 여러 개의 값을 선택하는 다중 선택 컴포넌트.

## design-tokens

- [Base Styles](/docs/design-tokens/base-styles.mdx): 브라우저 기본 스타일 초기화 및 정규화를 위한 CSS 파일. reset.css와 normalize.css를 제공합니다.
- [Colors](/docs/design-tokens/colors.mdx): 브랜드 아이덴티티를 위한 컬러 팔레트. Featuring/DataEffect 테마별 Primary 색상과 Secondary, Red, Orange, Yellow, Green, Blue, Purple 등 글로벌 컬러, Background/Border/Text/Support 등 시맨틱 컬러 토큰 제공.
- [Elevation](/docs/design-tokens/elevation.mdx): 컴포넌트의 높이, 그림자 깊이를 위한 토큰. elevation-2, 4, 8, 16, 28, 64 제공.
- [Font Size](/docs/design-tokens/font-size.mdx): 폰트 크기 토큰. fontSize-100(11px)부터 fontSize-800(40px)까지 제공.
- [Font Weight](/docs/design-tokens/font-weight.mdx): 폰트 굵기 토큰. thin(100)부터 black(900)까지 9단계 제공.
- [Design Tokens](/docs/design-tokens.mdx): @featuring-corp/design-tokens — 1,000개 이상의 디자인 토큰 (색상, 간격, 타이포그래피, 반지름, 그림자)
- [Line Height](/docs/design-tokens/line-height.mdx): 줄 높이 토큰. lineHeight-100(16px)부터 lineHeight-800(52px)까지 제공.
- [Radius](/docs/design-tokens/radius.mdx): 컴포넌트의 모서리 둥글기를 위한 토큰. radius-50(2px), 100(4px), 200(8px), 300(12px), 400(16px), full(999px) 제공.
- [Spacing](/docs/design-tokens/spacing.mdx): 일관된 레이아웃과 간격을 위한 스페이싱 토큰. spacing-0(0px)부터 spacing-2000(80px)까지 제공.
- [Typography](/docs/design-tokens/typography.mdx): 텍스트 스타일과 타이포그래피 시스템. Heading(1-7), Body(1-4), Caption(1-2) 시맨틱 토큰 제공.

## guide

- [$css Prop](/docs/guide/css-prop.mdx): Rainbow Sprinkles 기반의 $css prop으로 토큰 기반 스타일링하기
- [CSS Usage](/docs/guide/css-usage.mdx): CSS 변수를 사용하여 디자인 토큰 활용하기
- [Design Philosophy](/docs/guide/design-philosophy.mdx): Featuring Design System의 설계 원칙과 디자인 철학
- [Getting Started](/docs/guide.mdx): Featuring Design System 시작하기 — 패키지 구조, 핵심 개념, 기술 스택
- [Installation](/docs/guide/installation.mdx): Featuring Design System 설치 및 기본 설정 방법
- [LLMs.txt](/docs/guide/llms-txt.mdx): 디자인시스템 문서를 LLM에서 활용하는 방법
- [Next.js](/docs/guide/nextjs.mdx): Next.js 프로젝트에서 Featuring Design System 설정하기
- [Responsive Design](/docs/guide/responsive.mdx): $css prop의 반응형 시스템으로 모든 화면 크기에 대응하기
- [Theming](/docs/guide/theming.mdx): 브랜드 테마 전환과 Vanilla Extract를 활용한 고급 테마 구성
- [UX Guide](/docs/guide/ux-guide.mdx): 피처링의 사용자 경험 원칙 — 비동기 의사결정, 4단계 상태, 관대한 폼
- [Visual Design Philosophy](/docs/guide/visual-philosophy.mdx): 피처링의 시각 디자인 철학 — 데이터 중심, 조용한 신뢰, 점진적 공개
- [Vite](/docs/guide/vite.mdx): Vite 프로젝트에서 Featuring Design System 설정하기

## icons

- [Icons](/docs/icons.mdx): @featuring-corp/icons — 333개 시스템 아이콘 + 26개 서비스 아이콘
- [Service Icons](/docs/icons/service.mdx): 소셜 미디어 및 서비스 브랜드 아이콘 26개. Apple, Facebook, Google, Instagram, TikTok, YouTube 등 브랜드 아이콘을 Colored/White 버전으로 제공.
- [System Icons](/docs/icons/system.mdx): UI에 사용되는 시스템 아이콘 336개. Business, Controls, Data, Formatting, Navigation, Social, Status, Time, Toggle, Travel 등 카테고리로 분류됨.