Components

@featuring-corp/components — React UI 컴포넌트, Layout Primitives, CSS Preset

@featuring-corp/components

Layout Primitives, UI 컴포넌트, CSS Preset을 제공하는 React 컴포넌트 패키지입니다.

설치

npm install @featuring-corp/components

CSS Preset

// 앱 진입점 — Reset + Normalize + 브랜드 토큰 + CSS Layer 순서
import '@featuring-corp/components/preset/featuring';

컴포넌트 분류

분류	설명
Layout	Box, Flex, HStack, VStack, Center, Grid, Typo — `$css` prop + `render` prop 기반
Components	Button, Tag, Link, Toggle, Checkbox, Radio 등 — Context 기반 상태 공유, `$css`/`render` 지원
Legacy	Core* 컴포넌트 — `forwardRef` + `clsx` + recipe 기반 (마이그레이션 대상)
Utils	useRender, mergeProps — Base UI 유틸리티

마이그레이션 현황

기존 Core* 패턴에서 $css + render + Context 기반 패턴으로 순차적으로 마이그레이션하고 있습니다.

컴포넌트	상태	Legacy	신규
Button	✅ 완료	`CoreButton`	`Button.Root` + `Button.Icon` + `Button.Text`
IconButton	✅ 완료	—	`IconButton`
Tag	✅ 완료	`CoreTag`	`Tag.Root` + `Tag.Icon` + `Tag.Text` + `Tag.RemoveButton`
StatusBadge	✅ 완료	`CoreStatusBadge`	`StatusBadge.Root` + `StatusBadge.Icon` + `StatusBadge.Text`
IconBadge	✅ 완료	`CoreIconBadge`	`IconBadge`
Dot	✅ 완료	`CoreDot`	`Dot`
Loader	✅ 완료	`CoreLoader`	`Loader`
Link	✅ 완료	`CoreLink`	`Link.Root` + `Link.Icon` + `Link.Text`
Switch	✅ 완료	`CoreToggle`	`Switch.Root` + `Switch.Thumb` (base-ui Switch 기반)
Checkbox	✅ 완료	`CoreCheckbox`	`Checkbox.Root` + `Checkbox.Input` + `Checkbox.Label`
Radio	✅ 완료	`CoreRadio`	`Radio.Group` + `Radio.Root` + `Radio.Input` + `Radio.Label`
SegmentedControl	✅ 완료	`CoreSegmentedControl`	`SegmentedControl.Group` + `SegmentedControl.Item`
TextInput	🔜 예정	`CoreTextInput`	—
Select	🔜 예정	`CoreSelect`	—
Modal	🔜 예정	`CoreModal`	—
Tabs	✅ 완료	`CoreTabs`	`Tabs.Root` + `Tabs.List` + `Tabs.Tab` + `Tabs.Panel`
Toast	🔜 예정	`CoreToast`	—
Tooltip	🔜 예정	`CoreTooltip`	—
Dropdown	🔜 예정	`CoreDropdown`	—

패턴 비교

신규 패턴 (Button, Tag)

import { Button } from '@featuring-corp/components';

<Button.Root variant="primary" size="md" $css={{ width: '100%' }}>
  <Button.Icon><IconSearchOutline /></Button.Icon>
  <Button.Text>Search</Button.Text>
</Button.Root>

$css prop — 토큰 기반 atomic CSS
render prop — 시맨틱 HTML 변경 (<a>, <Link> 등)
Context — 부모→자식 상태 공유 (size, loading, disabled)
className/style — state callback 지원

Legacy 패턴 (Core*)

import { CoreButton } from '@featuring-corp/components';

<CoreButton buttonType="primary" size="md">
  Search
</CoreButton>

forwardRef + clsx
Recipe 기반 variants
Legacy sprinkles 시스템

On this page