Legacy Patterns

⚠️ 이 페이지는 식별용 레퍼런스입니다. 기계적으로 치환하지 마세요. Legacy와 Modern API는 이름이 비슷해도 prop·토큰 키·컴포넌트 구조가 다릅니다. 이 표는 "어떤 API가 Legacy인지" 확인할 때만 쓰세요. 셋업 방법과 마이그레이션 절차는 이 페이지에서 다루지 않습니다.

Featuring Design System은 두 세대의 API를 병행 제공합니다. 기존 코드베이스가 Legacy API를 쓰고 있어도 동작에는 문제가 없으며, 새 코드를 작성할 때만 Modern API를 선택하세요.

두 세대 API

세대	스타일링	타이포그래피	컴포넌트
Modern	`$css` prop	`<Typo>` 컴포넌트	Compound (`Button.Root` 등)
Legacy	`sprinkles` / `createGlobalTheme` 기반 VE 선언	`typoVariant` / `styleVariants`	`Core*` (`CoreButton` 등)

Modern API는 Legacy 셋업을 내장합니다. Modern 경로만 쓰면 createGlobalTheme·sprinkles·typoVariant를 앱에서 직접 선언할 필요가 없습니다.

Legacy 식별자

코드에서 아래 식별자를 발견하면 Legacy 계열입니다. Modern 계열에 같은 역할의 도구가 있습니다.

스타일링

Legacy 식별자	Modern 계열의 대응 도구
`createGlobalTheme`, `createGlobalThemeContract`	CSS Preset import (`@featuring-corp/components/preset/*`)
`sprinkles({ ... })`	`$css` prop
`style([sprinkles(...), ...])`	`$css` prop
`vars.global.spacing[400]` 직접 참조	`$css` 안 토큰 문자열 (`'$spacing-400'`)

타이포그래피

Legacy 식별자	Modern 계열의 대응 도구
`typoVariant.heading[3]`	`<Typo variant="$heading-3">`
`styleVariants(vars.semantic.typography.*, ...)`	`<Typo>` 컴포넌트

컴포넌트

Legacy	Modern
`CoreButton`	`Button.Root` + `Button.Text` + `Button.Icon`
`CoreTag`	`Tag.Root` + `Tag.Text` + `Tag.RemoveButton`
`CoreLink`	`Link.Root` + `Link.Text` + `Link.Icon`
`CoreTextInput`	`TextInput.Root` + `TextInput.Input` + `TextInput.Icon` + `TextInput.Text`
`CoreTextArea`	`TextArea`
`CoreCheckbox`	`Checkbox`
`CoreRadio`	`Radio` + `Radio.Group`
`CoreToggle`	`Switch.Root` + `Switch.Thumb`
`CoreSegmentedControl`	`SegmentedControl.Group` + `SegmentedControl.Item` + `SegmentedControl.Icon`
`CoreSelect`	`Select.Root` + `Select.Trigger` + `Select.Popup` + `Select.Item` + …
`CoreDropdown`	`Dropdown.Trigger` + `Dropdown.Popup` + `Dropdown.Item` + …
`CoreTabs`	`Tabs.Root` + `Tabs.List` + `Tabs.Tab` + `Tabs.Panel`
`CoreTooltip`	`Tooltip.Root` + `Tooltip.Trigger` + `Tooltip.Content` + …
`CoreAvatar`	`Avatar.Root` + `Avatar.Image` + `Avatar.Fallback` + `Avatar.Indicator` + `Avatar.Group`
`CoreSectionMessage`	`SectionMessage.Root` + `SectionMessage.Icon` + …
`CoreModal`	`Modal.Root` + `Modal.Trigger` + `Modal.Overlay` + `Modal.Popup` + …
`CoreToast`	`Toast.Provider` + `Toast.Viewport` + `Toast.Root` + … + `useToastManager()`
`CorePagination`	`Pagination.Root` + `Pagination.Items` + …
`CoreStatusBadge`	`StatusBadge.Root` + `StatusBadge.Dot` + `StatusBadge.Icon` + `StatusBadge.Text` + `StatusBadge.Loader`
`CoreIconBadge`	`IconBadge`
`CoreDot`	`Dot`
`CoreLoader`	`Loader`

전체 매핑과 전환 현황은 Components 개요의 마이그레이션 현황 표 참고.

이름이 비슷해도 같은 값이 아닙니다

직접 치환하면 동작하지 않는 차이점들입니다.

토큰 키 표기 — Legacy sprinkles는 'spacing-400', Modern $css는 '$spacing-400'
컴포넌트 prop 이름 — CoreButton의 buttonType ↔ Button.Root의 variant
컴포넌트 구조 — Core*는 단일 컴포넌트 ↔ Compound는 여러 서브컴포넌트로 분리됨

어떤 변환이 안전한지는 각 사이트의 코드 리뷰와 시각 회귀 테스트로 판단합니다.