로 감싼 경우 */
#app-root {
isolation: isolate;
}
```
이 설정으로 앱 내부의 `z-index` 값들이 Portal과 경쟁하지 않게 됩니다. 별도의 z-index 관리가 필요 없습니다.
> **원리**: `isolation: isolate`는 앱 루트를 하나의 [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context)로 만듭니다. 내부의 `z-index: 20` 같은 값은 그 안에서만 유효하고, Portal은 루트 바깥(`document.body`)에 렌더링되므로 자연스럽게 위에 표시됩니다.
## 6. 사용 시작
### 레이아웃 컴포넌트
```tsx
import { Box, HStack, VStack, Typo } from '@featuring-corp/components';
function Card({ title, description }: { title: string; description: string }) {
return (
{description}
);
}
```
### Button 컴포넌트
```tsx
import { Button, IconButton } from '@featuring-corp/components';
import { IconSearchOutline, IconPlusOutline } from '@featuring-corp/icons';
// 텍스트 버튼
저장
// 아이콘 + 텍스트 버튼
검색
// 아이콘 전용 버튼
```
### Core 컴포넌트
```tsx
import { CoreTextInput, CoreSelect, CoreTag } from '@featuring-corp/components';
관리자
멤버
```
### 아이콘
```tsx
import { IconHomeFilled, IconSearchOutline, IconSettingsOutline } from '@featuring-corp/icons';
```
아이콘은 `size`와 `color` prop을 지원합니다. 시스템 아이콘은 `currentColor`를 사용하므로 부모의 `color` 속성을 상속합니다.
### 디자인 토큰 직접 사용
```css
/* CSS에서 직접 사용 */
.my-element {
background-color: var(--semantic-color-background-1);
color: var(--semantic-color-text-1);
padding: var(--global-spacing-400);
border-radius: var(--global-radius-200);
box-shadow: var(--global-elevation-4);
}
```
```tsx
// JavaScript에서 사용
import { global, semantic } from '@featuring-corp/design-tokens';
const spacing = global.spacing[400]; // '1rem'
const color = global.colors.red[50]; // '#e97259'
```
## 프레임워크별 설정
프레임워크에 따라 추가 설정이 필요할 수 있습니다.
* [Next.js 설정 가이드](/docs/guide/nextjs)
* [Vite 설정 가이드](/docs/guide/vite)
## 다음 단계
* [$css Prop 이해하기](/docs/guide/css-prop) — 핵심 스타일링 시스템
* [Responsive Design](/docs/guide/responsive) — 반응형 레이아웃
* [Design Philosophy](/docs/guide/design-philosophy) — 설계 원칙과 아키텍처
* [Design Tokens](/docs/design-tokens/colors) — 색상, 간격, 타이포그래피 토큰
# LLMs.txt
## LLMs.txt란?
Featuring Corp. Design System의 문서를 LLM(Large Language Model)이 잘 이해하도록 구조화한 텍스트 파일입니다. AI 코딩 도구와 함께 사용하면 디자인 시스템을 더 효과적으로 활용할 수 있습니다.
## 제공 파일
| 파일명 | 설명 | 용도 |
| ------------------------------- | ---------------- | ------------ |
| [llms.txt](/llms.txt) | 전체 라우트 및 카테고리 개요 | 빠른 참조, 구조 파악 |
| [llms-full.txt](/llms-full.txt) | 모든 문서의 전체 내용 | 상세 정보, 코드 생성 |
## AI 도구와 함께 사용하기
### Cursor
Cursor IDE에서 `@Docs` 기능을 사용하여 디자인 시스템 문서를 참조할 수 있습니다.
1. **Docs 추가**: Settings → Features → Docs → Add new doc
2. **URL 입력**: `https://your-docs-url.com/llms-full.txt`
3. **사용하기**: 채팅에서 `@Docs`로 참조
자세한 내용: [Cursor @Docs 문서](https://docs.cursor.com/context/@-symbols/@-docs)
### 프롬프트 예시
```
@Docs CoreButton 컴포넌트를 사용해서 Primary 버튼을 만들어줘
```
```
@Docs semantic color 토큰 중에서 에러 상태를 나타내는 색상을 알려줘
```
```
@Docs CoreModal을 사용해서 확인/취소 모달을 구현해줘
```
## 포함된 정보
### 컴포넌트 (`@featuring-corp/components`)
각 컴포넌트 문서에는 다음 정보가 포함됩니다:
* **Props 테이블**: 모든 props의 타입, 기본값, 설명
* **스타일 토큰**: 사용된 디자인 토큰과 CSS 변수
* **Variant 스타일**: size, type 등 variant별 스타일 값
* **상태별 스타일**: hover, disabled, focus 등 상태별 스타일
### 디자인 토큰 (`@featuring-corp/design-tokens`)
* **Colors**: 글로벌 색상, 시맨틱 색상, Primary 색상 (Featuring/DataEffect)
* **Spacing**: 0px \~ 80px 간격 토큰
* **Radius**: 2px \~ 999px 모서리 반경
* **Elevation**: 그림자 깊이 (2dp \~ 64dp)
* **Typography**: 제목, 본문, 캡션 타이포그래피
### 아이콘 (`@featuring-corp/icons`)
* **System Icons**: 333개 아이콘 (Outline/Filled)
* **Service Icons**: 26개 서비스 브랜드 아이콘 (Colored/White)
## LLM 최적화 내용
문서는 LLM이 이해하기 쉽도록 다음과 같이 구성되어 있습니다:
1. **명시적 토큰 목록**: 모든 디자인 토큰이 개별적으로 나열됨
2. **정확한 값 포함**: CSS 변수와 실제 값이 함께 표시됨
3. **구조화된 테이블**: Props, 스타일, Variant가 테이블로 정리됨
4. **완전한 import 경로**: 모든 컴포넌트/아이콘의 import 문 포함
5. **사용 예시**: 각 기능의 코드 예시 포함
# Next.js
Next.js 프로젝트에서 Featuring Design System을 사용하는 방법을 안내합니다.
## 기본 설정
### 1. 패키지 설치
npm
pnpm
yarn
bun
```bash
npm install @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons
```
```bash
pnpm add @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons
```
```bash
yarn add @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons
```
```bash
bun add @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons
```
### 2. Next.js 설정
`next.config.ts`에 `transpilePackages` 설정을 추가합니다.
```ts title="next.config.ts"
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
transpilePackages: ['@featuring-corp/components'],
};
export default nextConfig;
```
### 3. CSS Preset Import
#### App Router (app/)
```tsx title="app/layout.tsx"
import '@featuring-corp/components/preset/featuring';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
#### Pages Router (pages/)
```tsx title="pages/_app.tsx"
import '@featuring-corp/components/preset/featuring';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return
;
}
```
### 4. 사용 시작
```tsx title="app/page.tsx"
import { VStack, Typo, Button } from '@featuring-corp/components';
import { IconRocketOutline } from '@featuring-corp/icons';
export default function Page() {
return (
Launch
);
}
```
## Vanilla Extract와 함께 사용
프로젝트에서 Vanilla Extract를 직접 사용하려면 추가 설정이 필요합니다.
### 1. 추가 패키지 설치
npm
pnpm
yarn
bun
```bash
npm install -D @vanilla-extract/css @vanilla-extract/next-plugin
```
```bash
pnpm add -D @vanilla-extract/css @vanilla-extract/next-plugin
```
```bash
yarn add --dev @vanilla-extract/css @vanilla-extract/next-plugin
```
```bash
bun add --dev @vanilla-extract/css @vanilla-extract/next-plugin
```
### 2. Next.js 설정 업데이트
```ts title="next.config.ts"
import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
import type { NextConfig } from 'next';
const withVanillaExtract = createVanillaExtractPlugin();
const nextConfig: NextConfig = {
transpilePackages: ['@featuring-corp/components'],
};
export default withVanillaExtract(nextConfig);
```
### 3. Theme Contract 설정
```ts title="src/styles/theme.css.ts"
import { getGlobalColors, getVarName, global, semantic } from '@featuring-corp/design-tokens';
import { createGlobalTheme, createGlobalThemeContract } from '@vanilla-extract/css';
export const vars = createGlobalThemeContract(
{
global: {
colors: getGlobalColors('featuring'),
elevation: global.elevation,
spacing: global.spacing,
radius: global.radius,
typography: global.typography,
},
semantic,
},
getVarName,
);
createGlobalTheme(':root', vars, {
global: {
colors: getGlobalColors('featuring'),
elevation: global.elevation,
spacing: global.spacing,
radius: global.radius,
typography: global.typography,
},
semantic,
});
```
### 4. 스타일 파일에서 사용
```ts title="src/styles/card.css.ts"
import { style } from '@vanilla-extract/css';
import { vars } from './theme.css';
export const card = style({
backgroundColor: vars.semantic.color.background[1],
border: `1px solid ${vars.semantic.color.border.default}`,
borderRadius: vars.global.radius[200],
padding: vars.global.spacing[400],
boxShadow: vars.global.elevation[4],
});
```
> **참고**: Vanilla Extract 설정은 선택 사항입니다. `$css` prop과 CSS 변수만으로도 대부분의 스타일링이 가능합니다.
# Responsive Design
Featuring Design System은 Mobile-First 반응형 디자인을 기본으로 지원합니다. `$css` prop의 레이아웃 속성에서 객체 구문을 사용하여 브레이크포인트별 스타일을 지정할 수 있습니다.
## 브레이크포인트
| 이름 | 최소 너비 | 미디어 쿼리 |
| --------- | ------ | ---------------------------- |
| `mobile` | 0px | 기본값 (미디어 쿼리 없음) |
| `tablet` | 768px | `@media (min-width: 768px)` |
| `desktop` | 1024px | `@media (min-width: 1024px)` |
| `wide` | 1440px | `@media (min-width: 1440px)` |
## 기본 사용법
레이아웃 속성에 객체를 전달하면 브레이크포인트별로 다른 값을 적용합니다. `mobile`은 기본값이므로 생략할 수 있으며, 지정하지 않은 브레이크포인트는 이전 값을 상속합니다.
화면 크기에 따라 padding이 변합니다
`}
/>
## 반응형 레이아웃 패턴
### 반응형 그리드
화면 크기에 따라 컬럼 수가 자동으로 조절됩니다. 브라우저 창 크기를 조절해 확인해 보세요.
{[1,2,3,4,5,6].map(i => (
Card {i}
))}
`}
/>
### 반응형 방향 전환
모바일에서는 세로로, 태블릿 이상에서는 가로로 배치됩니다.
Item 1
Item 2
Item 3
`}
/>
### 반응형 타이포그래피
`Typo` 컴포넌트는 `variant` prop에서 직접 반응형 값을 지원합니다.
화면 크기에 따라 텍스트 크기가 변합니다.
`}
/>
### 반응형 표시/숨김
태블릿 이상에서만 표시
모바일/태블릿에서만 표시
항상 표시
`}
/>
## 반응형 컴포넌트 사이즈
`Button`과 `Typo` 컴포넌트는 `size`/`variant` prop에서 반응형 값을 지원합니다.
### 반응형 버튼 사이즈
Responsive
Add Item
`}
/>
## 반응형 속성 목록
`$css` prop에서 반응형 객체 구문을 지원하는 속성:
| 카테고리 | 속성 |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Display | `display` |
| Flex | `flexDirection`, `flexWrap`, `flex`, `flexGrow`, `flexShrink`, `flexBasis`, `alignItems`, `alignSelf`, `justifyContent`, `justifyItems`, `justifySelf`, `order`, `alignContent` |
| Grid | `gridTemplateColumns`, `gridTemplateRows`, `gridColumn`, `gridRow`, `gridAutoFlow`, `gridAutoColumns`, `gridAutoRows`, `gridArea`, `gridColumnStart`, `gridColumnEnd`, `gridRowStart`, `gridRowEnd` |
| Spacing | `padding`, `paddingX`, `paddingY`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `margin`, `marginX`, `marginY`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `gap`, `rowGap`, `columnGap` |
| Sizing | `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `size` |
| Position | `position`, `top`, `right`, `bottom`, `left`, `inset`, `insetX`, `insetY`, `zIndex` |
| Border | `borderWidth`, `borderStyle`, `borderRadius`, `rounded`, `borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomLeftRadius`, `borderBottomRightRadius` |
| Typography | `fontSize`, `fontWeight`, `fontFamily`, `lineHeight`, `textAlign`, `textDecoration`, `textTransform`, `letterSpacing`, `wordBreak`, `whiteSpace`, `textOverflow` |
| Visual | `overflow`, `overflowX`, `overflowY`, `opacity`, `cursor`, `pointerEvents`, `userSelect`, `visibility`, `objectFit`, `objectPosition`, `aspectRatio` |
| Transform | `transform`, `transition`, `animation`, `scale`, `rotate`, `translate` |
> **참고**: 색상 관련 속성(`color`, `backgroundColor`, `borderColor` 등)은 반응형이 아닌 **인터랙티브 조건**(hover, focus 등)을 지원합니다. 자세한 내용은 [$css Prop](/docs/guide/css-prop) 문서를 참조하세요.
# Theming
Featuring Design System은 두 가지 브랜드 테마를 지원합니다. CSS 파일 하나로 전체 테마를 전환할 수 있습니다.
## 브랜드 테마
| 테마 | Primary 색상 | CSS 파일 |
| -------------- | ------------------ | ---------------- |
| **Featuring** | `#5e51ff` (보라색 계열) | `featuring.css` |
| **DataEffect** | `#0065ff` (파란색 계열) | `dataEffect.css` |
### 테마 전환
앱 진입점에서 import하는 Preset만 변경하면 전체 테마가 전환됩니다. Preset은 Reset, Normalize, 브랜드 토큰, CSS Layer 순서를 한 파일로 제공합니다.
```tsx
// Featuring 테마 (Reset + Normalize + 토큰 + Layer 순서 포함)
import '@featuring-corp/components/preset/featuring';
// DataEffect 테마
import '@featuring-corp/components/preset/dataEffect';
```
> Preset은 `@layer ft.reset, ft.normalize, ft.components, ft.utilities` 순서를 선언합니다. 소비자 CSS는 레이어 밖에 있으므로 항상 디자인 시스템 스타일보다 우선합니다.
Primary 색상만 달라지며, 나머지 글로벌 토큰(gray, red, blue 등)과 시맨틱 토큰은 동일합니다.
### 테마별 Primary 팔레트
| Shade | Featuring | DataEffect |
| ----------- | --------- | ---------- |
| primary-10 | `#ecefff` | `#edf5ff` |
| primary-20 | `#dce2ff` | `#d0e2ff` |
| primary-30 | `#c0c8ff` | `#a6c8ff` |
| primary-40 | `#9aa3ff` | `#4c9aff` |
| primary-50 | `#7273ff` | `#2684ff` |
| primary-60 | `#5e51ff` | `#0065ff` |
| primary-70 | `#5032f9` | `#0052cc` |
| primary-80 | `#3821b2` | `#0747a6` |
| primary-90 | `#31238c` | `#001d6c` |
| primary-100 | `#1f1551` | `#001141` |
## CSS 변수로 테마 사용
CSS 파일을 import하면 모든 토큰이 `:root`에 CSS 변수로 등록됩니다.
```css
.my-button {
background-color: var(--global-colors-primary-60);
color: var(--global-colors-white);
border-radius: var(--global-radius-100);
padding: var(--global-spacing-200) var(--global-spacing-400);
}
.my-button:hover {
background-color: var(--global-colors-primary-70);
}
```
시맨틱 토큰도 CSS 변수로 사용할 수 있습니다:
```css
.my-card {
background-color: var(--semantic-color-background-1);
border: 1px solid var(--semantic-color-border-default);
color: var(--semantic-color-text-1);
}
```
## JavaScript에서 토큰 접근
```tsx
import { global, semantic, colorSet } from '@featuring-corp/design-tokens';
// Global tokens
global.colors.red[50] // '#e97259'
global.spacing[400] // '1rem'
global.radius[200] // '8px'
global.elevation[4] // CSS box-shadow 값
global.typography.fontSize[300] // '0.875rem'
// Semantic tokens (CSS 변수 참조)
semantic.color.background[1] // 'var(--global-colors-white)'
semantic.color.text[1] // 'var(--global-colors-gray-90)'
// Color sets (실제 hex 값)
colorSet.featuringPrimary[60] // '#5e51ff'
colorSet.dataEffectPrimary[60] // '#0065ff'
```
## Vanilla Extract 고급 설정
프로젝트에서 Vanilla Extract를 직접 사용하여 타입 안전한 테마를 구성할 수 있습니다.
### 설치
npm
pnpm
yarn
bun
```bash
npm install -D @vanilla-extract/css @vanilla-extract/next-plugin
```
```bash
pnpm add -D @vanilla-extract/css @vanilla-extract/next-plugin
```
```bash
yarn add --dev @vanilla-extract/css @vanilla-extract/next-plugin
```
```bash
bun add --dev @vanilla-extract/css @vanilla-extract/next-plugin
```
### Next.js 설정
```ts
// next.config.ts
import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
import type { NextConfig } from 'next';
const withVanillaExtract = createVanillaExtractPlugin();
const nextConfig: NextConfig = {
transpilePackages: ['@featuring-corp/components'],
};
export default withVanillaExtract(nextConfig);
```
### Theme Contract 생성
```ts
// theme.css.ts
import { getGlobalColors, getVarName, global, semantic } from '@featuring-corp/design-tokens';
import { createGlobalTheme, createGlobalThemeContract } from '@vanilla-extract/css';
export const vars = createGlobalThemeContract(
{
global: {
colors: getGlobalColors('featuring'),
elevation: global.elevation,
spacing: global.spacing,
radius: global.radius,
typography: global.typography,
},
semantic,
},
getVarName,
);
createGlobalTheme(':root', vars, {
global: {
colors: getGlobalColors('featuring'),
elevation: global.elevation,
spacing: global.spacing,
radius: global.radius,
typography: global.typography,
},
semantic,
});
```
### 사용 예시
```ts
// card.css.ts
import { style } from '@vanilla-extract/css';
import { vars } from './theme.css';
export const card = style({
backgroundColor: vars.semantic.color.background[1],
border: `1px solid ${vars.semantic.color.border.default}`,
borderRadius: vars.global.radius[200],
padding: vars.global.spacing[400],
boxShadow: vars.global.elevation[4],
});
export const cardTitle = style({
fontSize: vars.semantic.typography.heading[3].fontSize,
fontWeight: vars.semantic.typography.heading[3].fontWeight,
lineHeight: vars.semantic.typography.heading[3].lineHeight,
color: vars.semantic.color.text[1],
});
```
### Typography Variants
```ts
// typography.css.ts
import { styleVariants, ComplexStyleRule, StyleRule } from '@vanilla-extract/css';
import { vars } from './theme.css';
const base = { fontFamily: vars.global.typography.font.sans } as const;
const getTypoObj = (typo: unknown) => ({ ...base, ...(typo as StyleRule) }) as ComplexStyleRule;
export const heading = styleVariants(vars.semantic.typography.heading, getTypoObj);
export const body = styleVariants(vars.semantic.typography.body, getTypoObj);
export const caption = styleVariants(vars.semantic.typography.caption, getTypoObj);
```
## 커스텀 Primary 색상
`getGlobalColors`에 커스텀 색상 객체를 전달하여 새로운 브랜드 테마를 만들 수 있습니다.
```ts
import { getGlobalColors } from '@featuring-corp/design-tokens';
const customColors = getGlobalColors({
10: '#fef3e2',
20: '#fde4b8',
30: '#fbd38d',
40: '#f9b851',
50: '#f6a623',
60: '#e8930a',
70: '#c47a08',
80: '#9f6206',
90: '#7b4c05',
100: '#573603',
});
```
# UX Guide
> 이 문서는 피처링의 사용자 경험 원칙입니다.
> AI agent는 이 원칙을 따라 피처링 브랜드에 맞는 UX를 설계할 수 있습니다.
***
## 핵심 UX 성격
**"안내하되 강요하지 않는, 관대한 전문가 도구"**
피처링은 인플루언서 마케팅의 복잡한 워크플로를 다루는 B2B SaaS다. 사용자는 브랜드 마케터, 대행사, 유통사 — 데이터에 기반한 의사결정을 하는 전문가들이다. 우리 UX는 이들의 판단을 존중하면서, 필요한 순간에 조용히 길을 안내한다.
***
## UX 원칙
### 원칙 1: 비동기 의사결정 (Async Decision Making)
**기능적 측면**
사용자의 모든 중요한 결정은 **별도의 공간**(모달, 사이드시트)에서 이루어진다. 모달은 "질문을 던지고 답을 기다리는" 구조다. 사용자가 결정을 내리면 그 결과가 원래 맥락으로 돌아온다. 이 패턴은 복잡한 다단계 의사결정을 자연스럽게 표현한다.
**감성적 측면**
사용자는 \*\*"내가 제어하고 있다"\*\*고 느낀다. 시스템이 일방적으로 변경하지 않고, 항상 동의를 구한다.
**적용 기준**
모달 vs 사이드시트 vs 새 페이지:
* **모달**: 흐름을 잠시 멈추고 한 가지를 결정해야 할 때 (생성, 확인, 선택, 삭제)
* **사이드시트**: 현재 보고 있는 목록을 유지하면서 상세 정보를 열어볼 때
* **새 페이지**: 완전히 다른 도메인으로 이동할 때
모달 크기의 의미:
* **작은 모달**: "한 가지만 결정해주세요" — 확인, 간단한 선택
* **중간 모달**: "여러 정보를 입력해주세요" — 복잡한 폼
* **큰 모달**: "도구를 사용해주세요" — 좌우 패널 분리, 설정 에디터
액션 버튼 배치:
* 취소는 항상 왼쪽 (기본 동작 = 탈출)
* 주요 액션은 항상 오른쪽
* 파괴적 액션은 시각적으로 위험을 표시
* 선택 수를 버튼에 표시: "저장(3)"
***
### 원칙 2: 4단계 상태 표시 (Four-State Feedback)
**기능적 측면**
모든 데이터 영역은 동일한 4단계 상태 진행을 따른다: **Loading → Error → Empty → Success**. 각 상태에서 사용자는 "지금 무슨 일이 일어나고 있는지" 항상 알 수 있다.
**감성적 측면**
사용자는 \*\*"시스템이 나를 방치하지 않는다"\*\*고 느낀다. 로딩 중에도, 에러가 나도, 데이터가 없어도 항상 다음 행동을 알 수 있다.
**적용 기준**
Loading:
* 스켈레톤 UI로 최종 레이아웃의 뼈대를 미리 보여줌
* 부드러운 pulse 애니메이션 — 시스템이 살아 있다는 고요한 호흡
* 버튼에 로딩 스피너 — 중복 제출 방지
Error:
* 토스트: 무엇이 실패했고(title), 다음에 무엇을 해야 하는지(description)
* 인라인: 폼 필드 아래에 해당 필드의 문제를 표시
* 인라인은 "입력 문제", 토스트는 "시스템 문제" — 역할이 다르다
* 에러 보더는 빨간 배경이 아닌 빨간 테두리
Empty:
* **반드시 다음 행동을 안내한다** — "데이터 없음"만 표시하고 끝내지 않는다
* 이상적 구조: 제목 + 설명 + CTA 버튼
* 첫 사용 빈 상태 vs 검색 결과 없음을 구분한다
* AI 기능의 빈 상태: 초대형(invitational) 어조 — "해보세요"
Success:
* 토스트로 간결하게 확인
* 일부 경우 "바로가기" 액션 버튼 제공
***
### 원칙 3: 관대한 폼 (Forgiving Forms)
**기능적 측면**
폼은 사용자의 실수를 예방하되, 완성을 강요하지 않는다. 필수 필드를 최소화하고, 선택 필드는 자유롭게 비워둘 수 있다. 유효성 검증은 입력 중이 아니라 **필드를 벗어날 때** 발생한다 — 입력하는 동안 방해하지 않는다.
**감성적 측면**
사용자는 \*\*"실수해도 괜찮다"\*\*고 느낀다. 폼이 사용자를 시험하는 것이 아니라, 올바른 입력을 도와주는 가이드.
**적용 기준**
유효성 검증 타이밍:
* 기본: 필드를 벗어날 때(onBlur) — 입력 중 방해 최소화
* 예외: 글자 수 초과는 즉시 잘라내기 + 에러 표시
* 서버 검증(중복 확인 등): 필드를 벗어날 때 비동기 호출
에러 표시:
* 인라인: 해당 필드 아래에 "어떤 조건이 충족되지 않았는지" 표시
* 서버 에러: 토스트로 "시스템 문제"를 알림
* 빨간 배경이 아닌 빨간 보더로 에러 필드 표시
필수 필드 최소화:
* 생성 폼의 필수 필드는 가능한 한 1\~2개로 제한
* 필수에 별표(\*) 표시, 나머지는 나중에 편집 가능
* 조건부 필드: 선택에 따라 관련 필드만 노출 (점진적 공개)
파괴적 액션 보호:
* 삭제/해지 전 반드시 확인 모달
* "복구할 수 없습니다" 경고 포함
* 다중 삭제 시 영향 범위(삭제될 항목 목록) 표시
* 파괴적 버튼은 시각적으로 위험을 표시
***
### 원칙 4: 투명한 접근 제어 (Transparent Access Control)
**기능적 측면**
기능을 차단할 때, **왜 차단되었고 어떻게 해제하는지** 항상 안내한다. 설명 없이 리디렉션하거나 기능을 완전히 숨기지 않는다. 가치를 미리 보여주되, 접근을 자연스럽게 유도한다.
**감성적 측면**
사용자는 \*\*"이 기능이 존재하고, 내가 접근할 수 있는 방법이 있다"\*\*고 느낀다. 벽이 아니라 문 — 열 수 있는 방법이 보인다.
**적용 기준**
게이팅 방식 (투명한 순서대로):
1. **소프트 게이트**: 데이터를 흐릿하게 보여줌(blur) + 구독 CTA — "있지만 아직 볼 수 없다"
2. **하드 게이트**: 기능을 미리보기 + 업그레이드 안내로 대체 — "이런 것이 가능하다"
3. **비활성 + 설명**: 버튼 비활성화 + "왜" 비활성인지 툴팁 — "권한이 필요하다"
4. **리디렉션** (지양): 설명 없이 다른 페이지로 보내기 — 최후의 수단
권한별 경험:
* 읽기 전용 사용자: 편집 버튼 비활성 + 이유 툴팁
* 편집 가능 사용자: 편집 가능, 관리 기능 비활성
* 관리자: 전체 기능
***
### 원칙 5: 맥락을 유지하는 데이터 탐색 (Contextual Data Exploration)
**기능적 측면**
데이터 테이블은 피처링의 핵심 인터페이스다. 사용자가 대량의 인플루언서/캠페인 데이터를 탐색할 때, **현재 맥락을 잃지 않도록** 설계한다. 핵심 식별 컬럼은 좌측에 고정하고, 상세 정보는 사이드시트로 열어 목록을 유지하며, 필터 상태는 태그로 항상 가시화한다.
**감성적 측면**
사용자는 \*\*"내가 어디에 있고, 무엇을 보고 있는지 항상 안다"\*\*고 느낀다. 복잡한 데이터 속에서도 길을 잃지 않는다.
**적용 기준**
테이블:
* 핵심 컬럼(선택, 이름) 좌측 고정, 나머지 수평 스크롤
* 행 높이는 넉넉하게 — 데이터가 숨을 쉰다
* 행 선택 시 헤더가 일괄 작업 UI로 변환
* 정렬 상태는 URL에 유지 — 새로고침해도 사라지지 않는다
필터:
* 적용된 필터를 태그로 항상 가시화
* 태그별 개별 삭제 + 전체 초기화
* 즉시 반영이 아닌 명시적 "적용" — 사용자가 준비됐을 때
사이드시트:
* 목록에서 항목 클릭 → 사이드시트로 상세 표시 (목록 유지)
* 좌측: 읽기 전용 데이터 / 우측: 편집 가능한 관리 정보
* 변경사항 있으면 닫기 전 확인 요청
***
## 마이크로카피 원칙
### 톤
* **정중하되 직접적**: "\~해 주세요", "\~됩니다" — 격식 있지만 거리감 없는
* **감정 절제**: 성공도 과하게 축하하지 않고, 에러도 패닉을 유발하지 않는다
* **행동 유도**: "회원님" 같은 호칭 없이 바로 행동 안내
### 에러 메시지
```
title: 무엇이 실패했는지 (명사형, 간결하게)
description: 왜 실패했고, 다음에 무엇을 해야 하는지
```
* title과 description에 같은 정보를 반복하지 않는다
* "잠시 후 다시 시도해 주세요"로 끝나면 안 된다 — 재시도 후에도 안 되면 어떻게 하는지까지
### CTA 레이블
* 구체적 동사형: "새 그룹 생성하기", "초대 메일 보내기" (모호한 "확인" 지양)
* 선택 수 포함: "저장(3)", "삭제(5)"
* 파괴적 액션은 결과를 명시: "영구 삭제", "해지 확인"
### 플레이스홀더
* 예시형 우선: "홍길동", "[example@email.com](mailto\:example@email.com)" — 형식을 즉시 이해
* 기술 필드에 실제 예시 필수: "smtp.gmail.com"
* "입력해주세요"는 레이블과 중복 — 지양
### 빈 상태 카피
* 상태만 알리지 말고 다음 행동을 안내한다
* 이상적: 제목 + 설명 + CTA
* AI 기능: "\~해보세요" 초대형 어조로 호기심 유발
***
## DO / DON'T
### DO
* 모달로 의사결정을 요청하고, 결과를 반환받는다
* 모든 데이터 영역에 Loading/Error/Empty/Success 4단계를 구현한다
* 빈 상태에 CTA를 포함하여 다음 행동을 안내한다
* 에러 메시지에 "왜"와 "다음 행동"을 포함한다
* 필터 적용 상태를 태그로 항상 보여준다
* 테이블 핵심 컬럼을 좌측 고정한다
* 사이드시트로 목록 맥락을 유지하며 상세를 표시한다
* 폼 유효성은 onBlur에서 — 입력 중 방해하지 않는다
* 파괴적 액션 전 반드시 확인 모달 + 영향 범위를 표시한다
* 접근 차단 시 "왜"와 "어떻게 해제하는지"를 안내한다
### DON'T
* 접근 차단 시 설명 없이 리디렉션하지 않는다
* 에러 발생 시 무응답으로 두지 않는다
* 모달을 3단계 이상 중첩하지 않는다
* 빈 상태에서 "데이터 없음"만 표시하고 끝내지 않는다
* 폼 입력 중(onChange)에 에러 메시지를 바로 띄우지 않는다
* 토스트 title과 description에 같은 정보를 반복하지 않는다
* 파괴적 CTA를 단일 단어("삭제")로만 표시하지 않는다
* 동일 카테고리 모달의 닫기 동작을 다르게 하지 않는다
***
## 피처링 UX의 감정 키워드
```
안내하는 · 관대한 · 투명한 · 점진적인
예측 가능한 · 조용한 · 맥락을 유지하는 · 행동을 유도하는
```
# Visual Design Philosophy
> 이 문서는 피처링의 시각 디자인 철학입니다.
> AI agent는 이 원칙을 따라 피처링 브랜드에 맞는 디자인을 생성할 수 있습니다.
***
## 핵심 선언
**"전문가를 위한 도구는 스스로를 과시하지 않는다."**
피처링은 인플루언서 마케팅의 복잡한 데이터를 다루는 B2B SaaS 플랫폼이다. 화려한 크리에이터 이코노미를 다루지만, 사용자(브랜드 마케터)는 냉철한 ROI를 원한다. 우리 디자인은 이 이중성을 해결한다 — **크리에이티브하되 신뢰할 수 있는** 시각 언어.
***
## 디자인 원칙
### 원칙 1: 데이터가 주인공이다 (Data Takes the Stage)
**기능적 측면**
인터페이스의 모든 요소는 데이터를 돕는 역할이다. 텍스트는 가볍게(font-weight 300\~500), 여백은 넉넉하게, 보더는 얇게(1px). UI 요소가 콘텐츠보다 시선을 끌면 안 된다. 인플루언서 프로필 이미지, 성과 숫자, 차트가 화면의 주인공이고, 레이블과 구분선은 조용한 조연이다.
**감성적 측면**
사용자는 "데이터를 분석하고 있다"가 아니라 \*\*"인사이트를 발견하고 있다"\*\*고 느낀다. 도구가 투명해질수록 사용자의 판단력이 빛난다.
**적용 기준**
* 본문 텍스트는 가벼운 무게(300)를 기본으로 한다 — 글씨가 겸손해야 데이터가 돋보인다
* 제목은 semi-bold(600)까지만 — 700(bold)은 선언적이고 강압적이다. 우리는 제시한다
* 본문 줄 간격은 넉넉하게(1.75) — 빠른 스캔이 아니라 이해를 위한 읽기
* 페이지 좌우에 충분한 여백을 둔다 — 콘텐츠가 화면 가장자리에서 숨을 쉰다
* 리포트/상세 영역은 고정 너비(\~920px)로 시선을 집중시킨다
***
### 원칙 2: 조용한 신뢰 (Quiet Confidence)
**기능적 측면**
피처링의 시각 언어는 "정밀한 네오-플랫"이다. 완전한 플랫은 너무 차갑고, 머티리얼 디자인의 elevation은 너무 무겁다. 우리는 \*\*아주 얇은 보더(1px)\*\*와 **극도로 절제된 그림자**를 조합해서 깊이를 표현한다. 장식적 그라디언트는 사용하지 않는다. 브랜드 컬러(인디고 바이올렛)는 강하지만, 쓰는 빈도와 방식은 극도로 자제한다.
**감성적 측면**
사용자는 \*\*"이 도구는 신뢰할 수 있다"\*\*고 느낀다. 과시하지 않는 자신감. Bloomberg Terminal의 조밀함도, Notion의 미니멀리즘도 아닌, 에디토리얼 수준의 정돈된 전문성.
**적용 기준**
색상:
* 브랜드 컬러 `#4232FF`(딥 인디고 바이올렛)은 CTA 버튼, 활성 인디케이터 등 강조에만 사용
* 연한 브랜드 컬러가 인터랙션 언어 — hover 배경, 선택 카드 배경, 정보 뱃지
* 배경은 밝고 에어리하게 — 흰색과 연회색이 지배적
* 본문 텍스트는 순수 블랙 대신 다크 그레이 — 덜 공격적이지만 충분히 읽힌다
* 시스템 컬러(빨강, 초록, 노랑, 파랑)는 포화도를 낮춰 감정을 전달하되 지배하지 않는다
형태:
* 보더 두께는 항상 1px — 2px는 없다. 이 절제가 UI를 가볍게 만든다
* 모든 모서리를 약간 둥글게 — 각진 요소 없음. 기술적 정밀함에 인간적 온기를 더한다
* 그림자는 4단계 depth 시스템, 최대 opacity 0.1 — 존재를 증명하는 게 아니라 공간을 암시
그라디언트:
* 기본: 회색/흰색 페이드뿐 — 스크롤 끝에서 "더 있음"을 암시하는 마스크
* 예외: AI 기능 영역에서만 스펙트럼 그라디언트 허용 — "AI = 다른 차원"이라는 시각적 선언
* 나머지 UI가 절제를 유지하기에, AI 영역의 그라디언트가 극적인 차별성을 갖는다
***
### 원칙 3: 점진적 공개 (Progressive Revelation)
**기능적 측면**
모든 정보를 한꺼번에 보여주지 않는다. 복잡한 과업은 단계(위저드)로 나누고, 고급 필터는 펼쳐야 보이게 하고, 상세 정보는 사이드시트로 열어본다. 필터 적용도 즉시 반영이 아닌 명시적 "적용" 버튼을 둔다 — 사용자가 준비됐을 때 결과를 본다.
**감성적 측면**
사용자는 \*\*"압도되지 않고, 한 걸음씩 이해해간다"\*\*고 느낀다. 복잡한 인플루언서 마케팅 데이터가 소화 가능한 크기로 다가온다. 전문가도 처음 보는 화면에서 길을 잃지 않는다.
**적용 기준**
* 복잡한 폼은 위저드로 단계 분리, 상단에 진행 인디케이터 표시
* 조건부 필드: 선택에 따라 관련 필드만 노출
* 필터: 기본 키워드 필터 + 펼쳐야 보이는 고급 필터
* 상세 정보: 사이드시트로 열어 목록 맥락을 유지
* 접기/펼치기: 기본 정보 섹션을 접어 요약만 보여줄 수 있도록
* 툴팁/팝오버: 복잡한 지표의 설명을 hover 시에만 노출
***
### 원칙 4: 예측 가능한 리듬 (Predictable Rhythm)
**기능적 측면**
일관된 스페이싱 스케일, 일관된 모션 타이밍, 일관된 피드백 패턴. 모든 카드의 패딩이 같고, 모든 hover가 같은 속도(0.2초)로 반응하고, 모든 진입 애니메이션이 같은 easing을 쓴다. 예외가 적을수록 사용자의 인지 부하가 줄어든다.
**감성적 측면**
사용자는 \*\*"어디서든 같은 방식으로 동작한다"\*\*는 안심을 느낀다. 새로운 기능을 처음 써도 이미 익숙한 것 같은 친숙함.
**적용 기준**
스페이싱:
* 요소 내부 간격: 8px 기본
* 섹션 내 간격: 16px
* 섹션 간 간격: 32px
* 페이지 좌우 패딩: 32px
* 이 리듬을 전체 UI에 일관되게 적용
모션:
* 진입: 0.2\~0.4초, easeOut — 여유 있게 등장
* 퇴장: 0.1\~0.2초, easeIn — 빠르게 비켜줌 (비대칭: 새 콘텐츠에 관심이 있지, 사라지는 것에 없다)
* 호버: 0.2초 — 의도를 인정하는 최소한의 예의
* 연속 애니메이션(로딩): 6초 주기 pulse — 시스템이 살아 있다는 고요한 호흡
* GPU 최적화: transform과 opacity만 애니메이트
피드백:
* hover = 연한 브랜드 컬러 배경 전환만으로 충분
* selected = hover + 보더 추가 (일시적 vs 영구적 신호 구분)
* error = 빨간 배경이 아닌 빨간 보더 — 최소 면적, 최대 명확함
* disabled = 투명도 감소 + "왜" 비활성인지 툴팁 설명
***
### 원칙 5: 크리에이티브한 전문성 (Creative Professionalism)
**기능적 측면**
피처링의 브랜드 컬러는 파란색과 보라색 경계의 딥 인디고 바이올렛(`#4232FF`)이다. 순수한 파란색의 신뢰에 보라색의 창의성을 더했다. 이 색은 인플루언서 마케팅의 본질 — 데이터와 크리에이티비티의 공존 — 을 한 색으로 압축한다. 차가운 그레이 톤과 결합하면 "정확하고 프로페셔널하면서도 창의적인" 분위기가 된다.
**감성적 측면**
사용자는 \*\*"이 도구로 일하면 내가 더 스마트해 보인다"\*\*고 느낀다. 데이터의 냉철함과 크리에이터 이코노미의 활력이 공존하는, 피처링만의 독특한 전문성.
**적용 기준**
* 프라이머리 팔레트: 11단계 인디고 바이올렛 (연한 → 진한)
* 그레이 팔레트: 11단계 차가운 그레이 (따뜻한 기운 배제)
* 시스템 컬러: 빨강, 초록, 노랑, 파랑, 주황, 갈색 (각 3단계: 연한/기본/진한)
* 의미론적 색상 계층:
* 배경: 4단계 (흰색 → 연회색 → 회색 → 진회색)
* 텍스트: 6단계 (가장 진한 → 흰색)
* 보더: 5단계 (기본 → 강조)
* 상태: error=빨강, warning=주황, success=초록, info=브랜드 컬러
***
## 트레이드오프 기준
원칙이 충돌할 때 우선순위:
```
데이터 가독성 > 시각적 일관성 > 인터랙션 풍부함 > 장식적 아름다움
```
* 데이터가 잘 읽히는 것이 최우선
* 그 다음은 예측 가능한 일관성
* 인터랙션은 필요한 만큼만
* 장식은 거의 하지 않는다
***
## DO / DON'T
### DO
* 밝고 에어리한 배경 위에 콘텐츠를 배치한다
* 텍스트는 가볍게 — 데이터가 주인공
* 보더는 항상 1px, 색상 변화로 상태를 표현한다
* 그림자는 극도로 미묘하게 — 의식되지 않지만 공간감을 준다
* hover는 연한 브랜드 컬러 배경 전환만으로 충분하다
* 여백을 넉넉히 — 콘텐츠가 숨을 쉰다
* 모든 모서리를 약간 둥글게
* 진입은 느리게, 퇴장은 빠르게 — 비대칭 모션
* 고정 너비로 콘텐츠 집중 유도 (리포트/상세)
* AI 영역은 나머지 UI와 시각적으로 분리 (스펙트럼 그라디언트 허용)
### DON'T
* 브랜드 컬러를 넓은 면적에 쓰지 않는다 — 강조에만
* 2px 이상의 보더를 사용하지 않는다
* 장식적 그라디언트를 쓰지 않는다 (AI 영역 제외)
* 빨간 배경으로 에러를 표시하지 않는다 — 빨간 보더로
* 정보를 빽빽하게 채우지 않는다 — 여백이 정보다
* 0.5초 이상의 UI 전환을 사용하지 않는다 (로딩 제외)
* font-weight 700(bold)을 사용하지 않는다 — 600까지
* 순수 블랙을 텍스트에 쓰지 않는다 — 다크 그레이 사용
* 완전히 각진 모서리를 사용하지 않는다
***
## 피처링 디자인의 감정 키워드
```
전문적 · 절제된 · 에어리한 · 신뢰할 수 있는
조용한 · 정밀한 · 겸손한 · 크리에이티브한
```
# Vite
Vite 프로젝트에서 Featuring Design System을 사용하는 방법을 안내합니다. Vite는 별도의 추가 설정 없이 바로 사용할 수 있습니다.
## 설정
### 1. 패키지 설치
npm
pnpm
yarn
bun
```bash
npm install @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons
```
```bash
pnpm add @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons
```
```bash
yarn add @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons
```
```bash
bun add @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons
```
### 2. CSS Preset Import
앱 진입점에서 Preset CSS를 import합니다. Reset, Normalize, 브랜드 토큰, CSS Layer 순서가 한 줄로 설정됩니다.
```tsx title="src/main.tsx"
import '@featuring-corp/components/preset/featuring';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')!).render(
);
```
### 3. 사용 시작
```tsx title="src/App.tsx"
import { VStack, HStack, Typo, Button, Box } from '@featuring-corp/components';
import { IconHomeFilled } from '@featuring-corp/icons';
function App() {
return (
Home
Learn More
);
}
export default App;
```
## Vite 설정 (참고)
기본 Vite 설정으로 충분하지만, React Compiler를 사용하려면 다음과 같이 설정합니다:
```ts title="vite.config.ts"
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react({
babel: {
plugins: [['babel-plugin-react-compiler']],
},
}),
],
});
```
## TypeScript 설정 (참고)
```json title="tsconfig.json"
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
"skipLibCheck": true
}
}
```
> **참고**: Vite는 `@vanilla-extract/next-plugin` 같은 추가 플러그인이 필요하지 않습니다. 빌드된 CSS가 이미 정적 파일로 제공되기 때문입니다.
# Icons
## @featuring-corp/icons
SVG 기반 React 아이콘 컴포넌트 패키지입니다. 시스템 아이콘과 서비스(브랜드) 아이콘을 제공합니다.
### 설치
npm
pnpm
yarn
bun
```bash
npm install @featuring-corp/icons
```
```bash
pnpm add @featuring-corp/icons
```
```bash
yarn add @featuring-corp/icons
```
```bash
bun add @featuring-corp/icons
```
### 아이콘 종류
| 종류 | 수량 | 설명 |
| ------------------------------------ | ---- | -------------------------------------------------- |
| [System Icons](/docs/icons/system) | 333개 | UI 시스템 아이콘 — 10개 카테고리 (Business, Controls, Data 등) |
| [Service Icons](/docs/icons/service) | 26개 | 소셜/브랜드 아이콘 — Apple, Google, Facebook 등 |
### 사용법
```tsx
import { IconSearchOutline, IconHomeFilled } from '@featuring-corp/icons';
// 기본 사용
'12px' | '14px' | '16px' | '20px' | '24px' | '32px' | number,
default: 16px,
},
fill: {
description: '아이콘 색상',
type: string,
default: 'currentColor',
},
'...props': {
description: 'SVGProps 타입을 확장한 컴포넌트입니다.',
type: {`SVGProps`} ,
default: {`{ style: { cursor: !!props.onClick ? "pointer" : "inherit", flexShrink: 0 } }`},
},
}}
/>
## Usage
```tsx
import { IconAppleColored, IconGoogleWhite } from '@featuring-corp/icons';
'12px' | '14px' | '16px' | '20px' | '24px' | '32px' | number,
default: 16px,
},
fill: {
description: '아이콘 색상',
type: string,
default: #000,
},
'...props': {
description: 'SVGProps 타입을 확장한 컴포넌트입니다.',
type: {`SVGProps`} ,
default: {`{ style: { cursor: !!props.onClick ? "pointer" : "inherit", flexShrink: 0 } }`},
},
}}
/>
## Usage
```tsx
import { IconAccountFilled, IconSearchOutline } from '@featuring-corp/icons';
` 래핑으로 input과 레이블 프로그래밍 연관
* **WCAG 3.3.2** — 레이블이 체크박스 옆에 표시
* **WCAG 4.1.2** — 네이티브 checkbox로 name/role/value 자동 충족
* **WCAG 2.4.7** — `focus-visible` 시 아웃라인
* **키보드** — Space로 토글, Tab으로 포커스 이동
* **Indeterminate** — DOM property로 설정, 스크린리더에 `aria-checked="mixed"` 자동 전달
### Checkbox vs Switch
| | Checkbox | Switch (Toggle) |
| ----- | ----------------------------- | ---------------- |
| 효과 시점 | form 제출 후 반영 | 즉시 반영 |
| 상태 | 3가지 (checked/unchecked/mixed) | 2가지 (on/off) |
| 용도 | 폼, 다중 선택, 약관 동의 | 설정 on/off, 알림 토글 |
## Usage
### 기본 사용법
{
const [checked, setChecked] = React.useState(false);
return (
setChecked(e.currentTarget.checked)} />
동의합니다
);
}`}
/>
### 크기
Small
Medium (default)
Large
`}
/>
### 레이블 위치 — 순서로 제어
서브컴포넌트의 배치 순서를 바꾸면 레이아웃이 바뀝니다.
{
const [checked, setChecked] = React.useState(false);
return (
setChecked(e.currentTarget.checked)} />
Input → Label
Label → Input
setChecked(e.currentTarget.checked)} />
);
}`}
/>
### Indeterminate (부모 체크박스)
부모 체크박스가 자식 체크박스 그룹의 상태를 요약합니다.
{
const [selected, setSelected] = React.useState(['react']);
const all = ['react', 'vue', 'svelte'];
const allChecked = selected.length === all.length;
const indeterminate = selected.length > 0 && !allChecked;
const toggleAll = () => setSelected(allChecked ? [] : [...all]);
const toggle = (v) => setSelected(prev => prev.includes(v) ? prev.filter(x => x !== v) : [...prev, v]);
return (
전체 선택
{all.map(item => (
toggle(item)} />
{item}
))}
);
}`}
/>
### 비활성 상태
Disabled (unchecked)
{}} />
Disabled (checked)
Disabled (indeterminate)
`}
/>
### 단독 사용
서브컴포넌트는 `Root` 없이 단독으로 사용할 수 있습니다. `Checkbox.Input`은 Root 없이도 체크/포커스/hover가 동작합니다. `Checkbox.Label`은 `size`를 직접 지정할 수 있습니다.
{
const [checked, setChecked] = React.useState(false);
return (
setChecked(e.currentTarget.checked)} />
sm 레이블 (단독)
md 레이블 (단독)
lg 레이블 (단독)
);
}`}
/>
### Rich Label (ReactNode)
`Checkbox.Label`은 텍스트뿐 아니라 아이콘, 복합 레이아웃 등 어떤 ReactNode든 받을 수 있습니다.
{
const [checked, setChecked] = React.useState(false);
return (
setChecked(e.currentTarget.checked)} />
이용약관 동의 (필수)
서비스 이용을 위해 필수로 동의해야 합니다.
);
}`}
/>
## Props
> **공통 Props** — `$css`, `render`, `className`, `style`는 모든 서브컴포넌트에서 지원됩니다.
> [useRenderComponent 가이드 →](/docs/components/utils/use-render)
### Checkbox.Root
레이아웃 wrapper. ``로 렌더링되어 클릭 시 체크박스가 토글됩니다.
sm,md,lg