file: ./content/react/components/action-button.mdx
# Action Button
사용자가 특정 액션을 실행할 수 있도록 도와주는 컴포넌트입니다.
```tsx
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonPreview() {
return 라벨;
}
```
## Installation
## Props
{"Whether the element should be rendered as a child of a slot."}
}
}}
/>
### `ExtendedActionSheetItem`
{"Whether the element should be rendered as a child of a slot."}
},
tone: {
"type": "\"neutral\" | \"critical\"",
"default": "neutral"
}
}}
/>
file: ./content/react/components/extended-fab.mdx
# Extended FAB
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
```tsx
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabPreview() {
return (
} />
알림 설정
);
}
```
## Usage
```tsx
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
```
```tsx
} />
라벨
```
## Props
{"Whether the element should be rendered as a child of a slot."}
}
}}
/>
## Examples
### Medium
```tsx
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabMedium() {
return (
} />
알림 설정
);
}
```
### Small
```tsx
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabSmall() {
return (
} />
알림 설정
);
}
```
### Neutral Solid
```tsx
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabNeutralSolid() {
return (
} />
알림 설정
);
}
```
### Layer Floating
```tsx
import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
export default function ExtendedFabLayerFloating() {
return (
} />
알림 설정
);
}
```
file: ./content/react/components/fab.mdx
# FAB
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
```tsx
import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";
import { Fab, Icon } from "@seed-design/react";
export default function FabPreview() {
return (
} />
);
}
```
## Usage
```tsx
import { Fab, Icon } from "@seed-design/react";
import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
```
```tsx
} />
```
## Props
{"Whether the element should be rendered as a child of a slot."}
}
}}
/>
file: ./content/react/components/help-bubble.mdx
# Help Bubble
Help Bubble은 사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 제공하는 부가적인 도움말 컴포넌트입니다.
```tsx
import { ActionButton } from "seed-design/ui/action-button";
import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";
export default function HelpBubblePreview() {
return (
열기
);
}
```
## Installation
## Props
{"Whether the floating element is initially open"}
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente.
Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque
dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde
minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab
voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio
officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at
blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas
porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit
dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat
necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum!
Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum
asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis,
deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim,
sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus
officiis distinctio laborum!
);
};
export default InlineBannerActivity;
```
file: ./content/react/components/link-content.mdx
# Link Content
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
```tsx
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
import { LinkContent, SuffixIcon } from "@seed-design/react";
export default function LinkContentPreview() {
return (
새 글
} />
);
}
```
## Usage
```tsx
import { LinkContent, SuffixIcon } from "@seed-design/react";
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
```
```tsx
Label
} />
```
## Props
{"Whether the element should be rendered as a child of a slot."}
},
color: {
"type": "ScopedColorFg | ScopedColorPalette | (string & {})",
"default": undefined
}
}}
/>
## Examples
### Size
```tsx
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
import { LinkContent, SuffixIcon, VStack } from "@seed-design/react";
export default function LinkContentSize() {
return (
추가
} />
추가
} />
추가
} />
);
}
```
### Color
```tsx
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
import { LinkContent, VStack, SuffixIcon } from "@seed-design/react";
export default function LinkContentColor() {
return (
더보기
} />
더보기
} />
더보기
} />
더보기
} />
);
}
```
file: ./content/react/components/manner-temp-badge.mdx
# Manner Temp Badge
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
```tsx
import { VStack } from "@seed-design/react";
import { MannerTempBadge } from "seed-design/ui/manner-temp-badge";
export default function BadgePreview() {
return (
);
}
```
## Installation
## Props
{"The manner temperature of the badge.\nLevel will be calculated based on this value.\nIf level is provided, this will be ignored."}
},
level: {
"type": "\"l1\" | \"l2\" | \"l3\" | \"l4\" | \"l5\" | \"l6\"",
"default": "l1"
}
}}
/>
file: ./content/react/components/manner-temp.mdx
# Manner Temp
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
```tsx
import { VStack } from "@seed-design/react";
import { MannerTemp } from "seed-design/ui/manner-temp";
export default function MannerTempPreview() {
return (
);
}
```
## Installation
## Props
{"The manner temperature of the MannerTemp component.\nLevel will be calculated based on this value.\nIf level is provided, this will be ignored."}
},
level: {
"type": "\"l1\" | \"l2\" | \"l3\" | \"l4\" | \"l5\" | \"l6\"",
"default": "l1"
}
}}
/>
file: ./content/react/components/progress-circle.mdx
# Progress Circle
작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 데 사용됩니다.
```tsx
import { ProgressCircle } from "seed-design/ui/progress-circle";
export default function ProgressCirclePreview() {
return ;
}
```
## Installation
## Props
{"The current value of the progress. if undefined, it will be indeterminate."}
{"Callback when the pull-to-refresh is released.\nIt does not matter if it is ready or not. If you want to handle the refresh, use "}{"onPtrRefresh"}{"."}
{"The label of the item.\nType is restricted to string for consistent width between font-weight changes.\nIf you need to render a React element, use each element separately."}
{"Whether the element should be rendered as a child of a slot."}
}
}}
/>
## Examples
### Disabled
```tsx
import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
export default function SegmentedControlPreview() {
return (
HotNew
);
}
```
### Long Label
Pill 형태의 `SegmentedControlItem` 한 개는 86px의 최소 너비를 가져요. 제공한 옵션 중 이 너비를 초과하는 옵션이 있다면, 가장 긴 옵션의 너비에 모든 옵션의 너비가 맞춰져요.
```tsx
import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
export default function SegmentedControlLongLabel() {
return (
가격 높은 순할인율 높은 순인기 많은 순
);
}
```
### Fixed Width
`SegmentedControl`의 `style` prop에 `width`를 제공해서 직접 너비를 설정할 수 있어요.
직접 설정한 너비 안에서 모든 레이블을 overflow 없이 표시할 수 없는 경우, 직접
지정한 너비 대신 overflow 없이 표시할 수 있는 최소 너비로 자동 조정돼요.
```tsx
import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
export default function SegmentedControlFixedWidth() {
return (
NewHot
);
}
```
### Long Label & Fixed Width
```tsx
import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
export default function SegmentedControlLongLabelFixedWidth() {
return (
가격 높은 순할인율 높은 순인기 많은 순
);
}
```
file: ./content/react/components/skeleton.mdx
# Skeleton
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
```tsx
import { Skeleton, VStack } from "@seed-design/react";
export default function SkeletonPreview() {
return (
);
}
```
## Usage
```tsx
import { Skeleton } from "@seed-design/react";
```
```tsx
```
## Props
{"Whether the element should be rendered as a child of a slot."}
)
);
}
```
file: ./content/react/get-started/llms-txt.mdx
# LLMs.txt
대규모 언어 모델(LLM)이 SEED Design React를 쉽게 이해할 수 있도록 LLMs.txt를 제공합니다.
## 구조
다음과 같은 LLMs.txt 파일들을 제공합니다:
* [llms.txt](https://seed-design.io/react/llms.txt): LLMs.txt 파일들의 구조를 제공하는 메인 파일입니다.
* [llms-full.txt](https://seed-design.io/react/llms-full.txt): SEED Design React의 모든 문서를 포함합니다.
* [llms-components.txt](https://seed-design.io/react/llms-components.txt): 컴포넌트 문서만을 포함하고 있어 context window가 제한된 경우 유용합니다.
## AI 도구와 함께 사용하기
### Cursor
Cursor의 `@Docs` 기능을 사용하여 프로젝트에 LLMs.txt 파일을 포함할 수 있습니다.
[Cursor @Docs에 대해 자세히 알아보기](https://docs.cursor.com/context/@-symbols/@-docs)
file: ./content/react/get-started/mcp.mdx
# MCP
AI Agent를 활용해 생산성을 높일 수 있는 Model Context Protocol(MCP)를 제공합니다.
## 설치
### Prerequisites
* [Bun](https://bun.sh/docs/installation)
### Cursor
Cursor Settings > MCP > Add MCP Server 에 다음 설정을 추가합니다.
```json
{
"mcpServers": {
"SEED Design": {
"command": "bunx",
"args": ["-y", "@seed-design/mcp"],
"type": "stdio"
}
}
}
```
[Cursor MCP에 대해 자세히 알아보기](https://docs.cursor.com/context/model-context-protocol)
### Figma
[Figma MCP 플러그인](https://www.figma.com/community/plugin/1496384010980477154)을 설치합니다.
## 사용법
### 웹소켓 서버 실행
```bash
bunx --bun @seed-design/mcp socket
```
### Figma 플러그인 실행
설치된 SEED Design MCP 플러그인을 실행합니다.
### 채널 연결
실행된 Figma 플러그인에 채널이 표기됩니다.
예시:
```
Connected to server on port 3055 in channel: onh8wul9
```
에이전트에 아래 프롬프트를 전달해 웹소켓 서버와 채널을 연결합니다.
```
join_channel {채널명}
```
연결이 완료되면, `선택된 노드를 참고해 React로 구현해주세요.` 와 같은 요청을 전달할 수 있습니다.
## 주요 툴 목록
### `join_channel`
웹소켓 서버와 채널을 연결합니다.
### `get_selection`
선택한 노드의 id를 반환합니다.
### `get_node_react_code`
노드의 React codegen 결과를 반환합니다.
### `export_node_as_image`
노드의 이미지를 반환합니다. [Playwright MCP](https://github.com/microsoft/playwright-mcp) 등과 통합해 이미지 단위 비교에 활용할 수 있습니다.
### `add_annotations`
Figma 파일에 Annotation을 추가합니다. [참고](https://help.figma.com/hc/en-us/articles/20774752502935-Add-measurements-and-annotate-designs)
## 커스텀 설정 사용하기
`--config` 플래그를 통해 커스텀 설정 파일을 로드할 수 있습니다.
```bash
bunx --bun @seed-design/mcp --config /path/to/config.ts
```
### 지원하는 설정 파일 형식
`@seed-design/mcp`는 다음 확장자의 설정 파일을 지원합니다:
* `.js`
* `.mjs`
* `.ts`
* `.mts`
### 설정 파일 예시
```typescript
import { type react, defineComponentHandler, createElement } from "@seed-design/figma";
export default {
extend: {
componentHandlers: [
(_deps: react.ComponentHandlerDeps) => defineComponentHandler(
"figma_component_key",
({ componentProperties: props }) => {
const tone = props.Tone.value.toLowerCase();
return createElement(
"CustomButton",
{
tone
}
);
}
)
]
},
} satisfies react.CreatePipelineConfig;
```
### MCP로 ComponentHandler 작성하기
#### 1. 프롬프트 복사
아래 프롬프트를 복사해 파일로 저장합니다.
Cursor IDE를 사용하는 경우, [Cursor rule](https://docs.cursor.com/context/rules)로 저장할 수 있습니다.
```markdown
# ComponentHandler Implementation Guide
## Initial Context Gathering
1. **Analyze Figma Selection**:
- Use \`get_selection()\` to examine the currently selected node(s)
- If no selection exists, prompt the user to select a specific component node
- Verify the selected node is a component that can be transformed
2. **Retrieve Component Information**:
- Use \`get_component_info(nodeId)\` to extract detailed information about the component
- Collect the component key, all component properties, and variant definitions
- Identify any nested components or instances that might need special handling
## Component Analysis and Planning
3. **Determine Component Structure**:
- Analyze the component's visual structure, layout, and behavior patterns
- If the target React component implementation is unknown, request an example or props interface
- Identify which Figma properties should map to which React props
4. **Define Transformation Strategy**:
- Plan how to handle variants, properties, nested components and children
- Determine if additional utilities or helper functions are needed
- Consider edge cases and special requirements for this component
## Implementation
5. **Create Component Handler**:
- Implement the handler using the following pattern:
\`\`\`typescript
import {
createElement,
defineComponentHandler,
type InferComponentDefinition,
type react,
} from "@seed-design/figma";
// Define component properties based on Figma definition
export type ComponentNameProperties = InferComponentDefinition<{
// Map all component properties from Figma
// Example:
"PropertyName": {
type: "VARIANT" | "TEXT" | "BOOLEAN" | "INSTANCE_SWAP",
variantOptions?: string[], // For VARIANT type
defaultValue?: string | boolean
}
}>;
// Create and export the handler
export const createComponentNameHandler = (_deps: react.ComponentHandlerDeps) => defineComponentHandler(
"component-key-from-figma", // Replace with actual component key
({ componentProperties: props }) => {
// Transform Figma properties to React props
// Use conditionals for variants and property handling
return createElement(
"ComponentName", // The React component name
{
// Map properties appropriately
propName: props.PropertyName.value,
// Add additional props as needed
},
[], // Nested elements if any (undefined or omitted if not needed)
"Optional comment for accessibility or development notes, use sparingly"
);
}
);
\`\`\`
## Validation and Testing
6. **Verify Handler Functionality**:
- Test the handler with different component variants
- Ensure all properties are correctly mapped and transformed
- Check that nested components and children are handled properly
## Best Practices
- Create reusable helper functions for common transformation patterns
- Handle edge cases and optional properties gracefully
- Add descriptive comments for complex transformations
- Consider performance implications for deeply nested components
- Ensure type safety throughout the transformation process
```
#### 2. 프롬프트 실행
저장된 프롬프트 파일과 구현해야 할 컴포넌트 파일을 맥락으로 전달하며 프롬프트를 실행합니다.
**예시**:
```bash
@CustomButton.tsx @ComponentHandlerRule.md CustomButton 컴포넌트의 ComponentHandler를 구현해주세요.
```
#### 3. 결과 확인
프롬프트 실행 결과로 생성된 ComponentHandler를 확인합니다.
**예시**
```typescript
import {
createElement,
defineComponentHandler,
type InferComponentDefinition,
type react,
} from "@seed-design/figma";
export type CustomButtonProperties = InferComponentDefinition<{
tone: {
type: "VARIANT";
variantOptions: ["neutral", "brand"];
};
}>;
export const createCustomButtonHandler = (_deps: react.ComponentHandlerDeps) => defineComponentHandler(
"figma_component_key",
({ componentProperties: props }) => {
const tone = props.tone.value.toLowerCase();
return createElement(
"CustomButton",
{
tone
}
);
}
)
```
#### 4. 설정 파일 적용
생성된 ComponentHandler를 설정 파일에 추가합니다.
```typescript
import { type react } from "@seed-design/figma";
import { createCustomButtonHandler } from "./CustomButton";
export default {
extend: {
componentHandlers: [
createCustomButtonHandler,
]
},
} satisfies react.CreatePipelineConfig;
```
file: ./content/react/get-started/seed-design-json.mdx
# seed-design.json
[@seed-design/cli](./cli) 를 사용할 때 필요한 설정들을 명시할 파일이에요.
## 설정
`seed-design.json` 파일을 생성하기 위한 명령어에요.
### init 명령어 입력하기
```sh
npx @seed-design/cli@latest init
```
### seed-design 설정
```sh
◇ TypeScript를 사용중이신가요?
│ Yes
│
◇ React Server Components를 사용중이신가요?
│ No
│
◇ seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
│ ./seed-design
```
아래 파일을 프로젝트 루트에 생성해주세요.
```json title="seed-design.json"
{
"rsc": false,
"tsx": true,
"path": "./seed-design"
}
```
## 옵션
### path
`path`는 생성되는 컴포넌트의 기본 경로를 설정해요.
seed-design이 필요로 하는 폴더나 파일들은 `path`로 지정된 경로의 하위에 생겨요.
`seed-design`의 root 폴더는 유저가 입력할 수 있게 하되, 그 내부에 생성되는 폴더나 파일들은 고정되는 형식이에요.
```json title="seed-design.json"
{
"path": "./seed-design"
}
```
만약 위와 같이 설정했다면, `./seed-design` 폴더가 생성이 되고,
그 안에 `ui`, `utils`, `hooks`와 같은 폴더들이 생기게 될거에요.
### rsc
리액트 서버 컴포넌트를 사용할지 여부를 설정해요.
`true`로 설정하면 컴포넌트에 `use client` directive가 추가돼요.
```json title="seed-design.json"
{
"rsc": true | false (default: false)
}
```
### tsx
타입스크립트를 사용할지 여부를 설정해요.
`true`로 설정하면 컴포넌트에 `.tsx` 확장자이고, `false`로 설정하면 `.jsx` 확장자로 생성돼요.
```json title="seed-design.json"
{
"tsx": true | false (default: true)
}
```
### $schema
준비중이에요.
file: ./content/react/iconography/codemod.mdx
# Codemod
SEED V2 아이콘을 V3 아이콘으로 변환하는 Codemod
## 업그레이드 방법
현재 아이콘을 사용하고 있는 방법에 따라 적용할 수 있는 2가지 방법이 있어요.
### Codemod 스크립트
아래 3개 아이콘 패키지를 사용하고 있다면, 제공되는 codemod 스크립트를 사용해서 리뉴얼된 아이콘 패키지로 손쉽게 업그레이드할 수 있어요.
* [`@seed-deesign/react-icon`](https://www.npmjs.com/package/@seed-design/react-icon)
* [`@seed-design/icon`](https://www.npmjs.com/package/@seed-design/icon) (deprecated)
* [`@karrotmarket/karrot-ui-icon`](https://www.npmjs.com/package/@karrotmarket/karrot-ui-icon) (deprecated) (React 컴포넌트를 사용하는 경우)
3개 패키지에서 사용하고 있는 아이콘은 [`@karrotmarket/react-monochrome-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-monochrome-icon)의 아이콘으로 대체돼요.
### 수동 업그레이드
다음과 같은 경우에는 수동으로 업그레이드해야 해요.
* PNG, SVG 등의 파일로 기존 아이콘을 사용하는 경우
* [`@karrotmarket/karrot-ui-icon`](https://www.npmjs.com/package/@karrotmarket/karrot-ui-icon) (deprecated)에서 제공되는 SVG 파일을 사용하는 경우
* 다음 패키지를 사용하는 경우
* [`@seed-design/vue2-icon`](https://www.npmjs.com/package/@seed-design/vue2-icon) → [`@daangn/vue2-monochrome-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/vue2-monochrome-icon)으로 대체돼요.
* [`@seed-design/vue3-icon`](https://www.npmjs.com/package/@seed-design/vue3-icon) → [`@daangn/vue3-monochrome-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/vue3-monochrome-icon)으로 대체돼요.
## 작업 순서
많은 변경사항이 발생하게 되므로, 커밋하지 않은 변경사항이 없는지 확인하고 시작하는 것이 좋아요.
### Codemod 스크립트
실행 전
```tsx
import {
IconSellRegular,
IconListFill,
IconCarRegular,
IconAddFill as AddIconAlias,
} from "@seed-design/react-icon";
import IconSellFill from "@seed-design/react-icon/IconSellFill";
function App() {
console.log(IconSellRegular);
return (
<>
);
}
```
실행 후
```tsx
import {
IconPlusSquareLine,
IconDothorizline3VerticalFill,
IconCarFrontsideLine,
IconPlusFill as AddIconAlias,
} from "@karrotmarket/react-monochrome-icon";
import IconPlusSquareFill from "@karrotmarket/react-monochrome-icon/IconPlusSquareFill";
function App() {
console.log(IconPlusSquareLine);
return (
<>
);
}
```
#### 리뉴얼된 아이콘 패키지 설치
```bash
npm install @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
```bash
pnpm add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
```bash
yarn add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
```bash
bun add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
2개 패키지 중 필요한 패키지만 설치해요.
* [`@karrotmarket/react-monochrome-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-monochrome-icon)
* 단색 아이콘 패키지에요. **일반** 아이콘, **카테고리** 아이콘, **서비스** 아이콘이 포함되어 있어요.
* 이 패키지에서 제공되는 서비스 아이콘은 검은색으로만 사용할 수 있어요.
* codemod 실행 시, 기존 패키지들의 아이콘은 모두 이 패키지의 아이콘으로 대체돼요.
* [`@karrotmarket/react-multicolor-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-multicolor-icon)
* 멀티컬러 아이콘 패키지에요. **카테고리** 아이콘과 **서비스** 아이콘이 포함되어 있어요.
* 이 패키지에서 제공되는 카테고리 아이콘과 서비스 아이콘은 패키지에서 제공되는 색상 그대로만 사용할 수 있어요.
* 기존에 SVG로 사용하던 멀티컬러 아이콘들을 이 패키지로 직접 대체할 수 있어요. 따라서, 필요한 경우에만 설치해도 좋아요.
#### Codemod 스크립트 실행
경로 내의 코드를 일괄적으로 변환하는 codemod 스크립트를 실행해요.
```shell
npx @seed-design/codemod migrate-icons <...경로> <옵션>
```
```shell
npx @seed-design/codemod migrate-icons src
```
스크립트 실행을 위해서는 **Node.js 20.16.0 이상**의 버전이 필요해요. 버전 요구사항을 만족시키지 않으면 안내 문구가 표시돼요.
nvm을 사용한다면 codemod 실행을 위해 Node.js 버전을 잠시 변경할 수 있어요.
```shell
nvm install 20.16
```
* `--log`
* 로그를 파일로 저장해요.
* `./`에 `migrate-icons-combined.log`와 `migrate-icons-warnings.log` 파일이 생성돼요.
* [`--extensions`](https://jscodeshift.com/run/cli/#--extensionsext)
* 변환할 파일 확장자를 지정해요.
* 이 옵션을 지정하지 않으면 경로 안의 `js`, `jsx`, `ts`, `tsx` 파일을 변환해요. (`d.ts` 제외)
* 예시: `--extensions="ts,tsx"`
* [`--ignore-config`](https://jscodeshift.com/run/cli/#--ignore-configfile)
* 변환하지 않을 경로들을 glob 패턴으로 작성한 파일을 지정해요.
* 예시: `--ignore-config=".gitignore"`
* 이 옵션을 지정하지 않아도 jscodeshift에 의해 `**/node_modules/**`는 자동으로 무시돼요.
#### 결과 확인
문제 없이 모든 변환이 완료된 경우 다음과 같은 결과가 표시돼요.
```
All done.
Results:
0 errors // [!code highlight]
439 unmodified
1 skipped
27 ok
Time elapsed: 43.376seconds
```
* `errors`: 파싱 오류 등으로 인해, 아이콘을 참조하는 코드가 있는지 확인하지 못한 파일의 수에요.
* 에러가 발생한 파일에 이전 아이콘을 참조하는 코드가 없다면, 해당 파일에서 발생하는 에러는 무시해도 좋아요.
* 이전 아이콘을 참조하는 코드가 있다면, 문제가 발생한 부분을 수정하고 다시 스크립트를 실행하거나, 해당 파일의 아이콘 마이그레이션을 직접 진행해주세요.
* `unmodified`: 아이콘을 참조하는 코드가 없어, 아무 변환도 이루어지지 않은 파일의 수에요.
* `skipped`: 빈 파일 등 변환 대상이 아니어서, 아무 변환도 이루어지지 않은 파일의 수에요.
* `ok`: 변환이 이루어진 파일의 수에요.
```
ERR /Users/seed/foo/bar.js Transformation error (Unexpected reserved word 'package'. (3:3))
```
codemod 스크립트 실행 중 파싱 오류가 발생할 수 있어요. 파싱 오류는 다음과 같은 이유로 발생해요.
* `assert`를 사용한 [import assertion](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html#import-attributes)과 같은, deprecated된 문법이 있는 경우
* `package`와 같은 예약어를 변수 이름으로 사용한 경우 등
#### 코드 포맷
프로젝트에서 사용하는 포매터를 사용해서 코드를 포맷해요.
#### 이전 패키지 제거
이전 아이콘이 모두 대체된 것을 확인하고, 이전 패키지를 제거해요.
```bash
npm uninstall @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon
```
```bash
pnpm remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon
```
```bash
yarn remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon
```
```bash
bun remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon
```
#### 사이드 이펙트 확인
* [사이드 이펙트](#발생-가능한-사이드-이펙트)가 발생했는지 확인하여 의도한 대로 변경이 이루어졌는지 검토해요.
* 디자인 QA 과정에서, 자동으로 변경된 아이콘이 아닌 새로운 아이콘을 사용하도록 결정되었을 수 있어요. 이러한 경우, Figma 디자인 파일을 참고하여 코드에 반영해요.
* 멀티컬러 아이콘 사용이 필요한 곳에는 [멀티컬러 아이콘 패키지](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-multicolor-icon)를 사용해주세요.
### 수동 업그레이드
#### 이전 패키지 제거
이전 아이콘 패키지들을 제거해요.
```bash
npm uninstall @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon @seed-design/vue2-icon @seed-design/vue3-icon
```
```bash
pnpm remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon @seed-design/vue2-icon @seed-design/vue3-icon
```
```bash
yarn remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon @seed-design/vue2-icon @seed-design/vue3-icon
```
```bash
bun remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon @seed-design/vue2-icon @seed-design/vue3-icon
```
#### 리뉴얼된 패키지 설치
##### React
```bash
npm install @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
```bash
pnpm add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
```bash
yarn add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
```bash
bun add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
##### Vue 2
```bash
npm install @daangn/vue2-monochrome-icon @daangn/vue2-multicolor-icon
```
```bash
pnpm add @daangn/vue2-monochrome-icon @daangn/vue2-multicolor-icon
```
```bash
yarn add @daangn/vue2-monochrome-icon @daangn/vue2-multicolor-icon
```
```bash
bun add @daangn/vue2-monochrome-icon @daangn/vue2-multicolor-icon
```
##### Vue 3
```bash
npm install @daangn/vue3-monochrome-icon @daangn/vue3-multicolor-icon
```
```bash
pnpm add @daangn/vue3-monochrome-icon @daangn/vue3-multicolor-icon
```
```bash
yarn add @daangn/vue3-monochrome-icon @daangn/vue3-multicolor-icon
```
```bash
bun add @daangn/vue3-monochrome-icon @daangn/vue3-multicolor-icon
```
2개 패키지 중 필요한 패키지만 설치해요.
* `@daangn/*-monochrome-icon`
* 단색 아이콘 패키지에요. **일반** 아이콘, **카테고리** 아이콘, **서비스** 아이콘이 포함되어 있어요.
* 이 패키지에서 제공되는 서비스 아이콘은 검은색으로만 사용할 수 있어요.
* codemod 실행 시, 기존 패키지들의 아이콘은 모두 이 패키지의 아이콘으로 대체돼요.
* `@daangn/*-multicolor-icon`
* 멀티컬러 아이콘 패키지에요. **카테고리** 아이콘과 **서비스** 아이콘이 포함되어 있어요.
* 이 패키지에서 제공되는 카테고리 아이콘과 서비스 아이콘은 패키지에서 제공되는 색상 그대로만 사용할 수 있어요.
* 기존에 SVG로 사용하던 멀티컬러 아이콘들을 이 패키지로 직접 대체할 수 있어요. 따라서, 필요한 경우에만 설치해도 좋아요.
#### 아이콘 이름 변경
[V2 V3 아이콘 맵핑](/react/foundation/iconography/v2-v3-list) 문서를 참고하여 리뉴얼된 패키지를 사용하도록 코드를 수정해요.
* 기존 아이콘의 `IconHome*`은 신규 아이콘에서 `IconHouse*`로 이름이 바뀌었어요.
* 기존 아이콘의 `IconHouse*`는 신규 아이콘에서 `IconWindow4House*`로 이름이 바뀌었어요.
따라서, 수동 마이그레이션 시 `IconHome*`이 `IconWindow4House*`로 잘못 변경되지 않게 주의해야 해요.
**`IconHouse*`를 먼저 마이그레이션**하고, `IconHome*`을 마이그레이션하는 것을 추천해요.
#### 사이드 이펙트 확인
* [사이드 이펙트](#발생-가능한-사이드-이펙트)가 발생했는지 확인하여 의도한 대로 변경이 이루어졌는지 검토해요.
* 디자인 QA 과정에서, [V2 V3 아이콘 맵핑](/react/foundation/iconography/v2-v3-list)에 따른 아이콘이 아닌 새로운 아이콘을 사용하도록 결정되었을 수 있어요. 이러한 경우, Figma 디자인 파일을 참고하여 코드에 반영해요.
* 멀티컬러 아이콘 사용이 필요한 곳에는 [멀티컬러 아이콘 패키지](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-multicolor-icon)를 사용해주세요.
## 발생 가능한 사이드 이펙트
### 정확히 대응되는 리뉴얼된 아이콘이 없는 경우
* 이전 아이콘 중 아래 5개 아이콘(총 15개 variant)은 리뉴얼된 아이콘 패키지에 시각적으로 정확히 대응되는 항목이 없어요.
* codemod 스크립트 실행 시 **추천되는 아이콘으로 변환되지만**, 시각적인 차이가 크기 때문에 변경 후 확인이 필요해요.
| 이전 아이콘 이름 | 리뉴얼된 아이콘 이름 |
| --------------------------------------- | ---------------------------------------------------------------------------------------- |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
* codemod 스크립트 사용 시, 5개 아이콘(총 15개 variant)이 사용된 경우 터미널에 메시지가 출력돼요.
```
REP ...을 ...로 변경했지만, 변경된 아이콘이 적절한지 확인이 필요해요
```
* codemod 스크립트를 `--log` flag와 함께 사용 시, 사용된 내역이 `migrate-icons-warnings.log`에 기록돼요.
* 다음을 활용하여 코드를 직접 검색할 수 있어요.
```regex tab="정규 표현식"
(IconBold|IconCobuying|IconDelivery|IconSuggest|IconWriteStory)(Thin|Regular|Fill)|(IconTUppercaseSerif|IconShoppingbag2Stacked|IconTruck|IconLightbulbDot5|IconHorizline2VerticalChatbubbleRight)(Line|Fill)
```
```shell tab="git grep"
git grep -E '(IconBold|IconCobuying|IconDelivery|IconSuggest|IconWriteStory)(Thin|Regular|Fill)|(IconTUppercaseSerif|IconShoppingbag2Stacked|IconTruck|IconLightbulbDot5|IconHorizline2VerticalChatbubbleRight)(Line|Fill)'
```
### 여러 이전 아이콘이 하나의 리뉴얼된 아이콘으로 대체되는 경우
**이전 아이콘과 리뉴얼된 아이콘은 `n:1`로 대응돼요.** 따라서, 같은 페이지에 표시되었던 서로 다른 여러 개의 아이콘이, 동일한 리뉴얼된 아이콘으로 대체되는 경우가 있어요. 의도한 목적대로 아이콘이 표시되는지 확인해요.
* 한 이전 아이콘의 3개 variant 중 `Thin` variant와 `Regular` variant는 리뉴얼된 아이콘에서 모두 `Line` variant로 대체돼요.
* 예를 들면, `IconForwardThin`, `IconForwardRegular`는 모두 [`IconArrowRightLine`](/docs/foundation/iconography/monochrome?icon=icon_arrow_right_line)으로 대체돼요.
* 이전 아이콘의 `Fill` variant는 리뉴얼된 아이콘에서도 `Fill` variant로 대체돼요.
* 여러 개의 이전 아이콘이 하나의 리뉴얼된 아이콘으로 대체되는 경우도 있어요.
* 예를 들면, `IconHeadphoneRegular`, `IconHelpcenterRegular`, `IconHelperRegular`는 모두 [`IconHeadsetLine`](/docs/foundation/iconography/monochrome?icon=icon_headset_line)으로 대체돼요.
file: ./content/react/iconography/library.mdx
# Library
리액트 아이콘 패키지는 아이콘을 사용할 때 필요한 컴포넌트를 제공합니다.
## Overview
[Iconography Library](/docs/foundation/iconography/library)
## Installation
```bash
npm install @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
```bash
pnpm add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
```bash
yarn add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
```bash
bun add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
```
## Package
* [@karrotmarket/react-monochrome-icon](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-monochrome-icon)
* [@karrotmarket/react-multicolor-icon](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-multicolor-icon)
file: ./content/react/components/(layout)/box.mdx
# Box
Box 컴포넌트는 가장 기초적인 레이아웃 컴포넌트입니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.
```tsx
import { Box } from "@seed-design/react";
export default function BoxPreview() {
return (
Box Example
);
}
```
## Usage
```tsx
import { Box } from "@seed-design/react";
```
```tsx
```
## Props
",
"default": undefined
},
background: {
"type": "ScopedColorBg | ScopedColorPalette | (string & {})",
"default": undefined
},
bg: {
"type": "ScopedColorBg | ScopedColorPalette | (string & {})",
"default": undefined,
description: <>
);
};
```
### Standalone
TabContent를 사용하지 않고, 컨텐츠 영역을 온전히 소유하고 싶을 때 사용하는 예시입니다.
탭에서 제공하는 Swipe 기능을 사용할 수 없습니다.
```tsx
import { useState } from "react";
import { TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";
export default function TabsStandalone() {
const [activeTab, setActiveTab] = useState("1");
return (
);
};
```
### Dynamic Height
각 탭의 높이가 다를 때, 아래의 컨텐츠를 탭 아래에 바로 맞추기 위해서 사용하는 예시입니다.
탭이 자주 바뀌고, 탭에 네트워크 요청이 많은 경우 캐싱을 잘 고려해주세요.
```tsx
import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";
export default function TabsDynamicHeight() {
return (
},
textStyle: {
"type": "\"screenTitle\" | \"articleBody\" | \"t1Regular\" | \"t1Medium\" | \"t1Bold\" | \"t2Regular\" | \"t2Medium\" | \"t2Bold\" | \"t3Regular\" | \"t3Medium\" | \"t3Bold\" | \"t4Regular\" | \"t4Medium\" | \"t4Bold\" | ... 12 more ...",
"default": "t5Regular"
}
}}
/>
file: ./content/react/components/concepts/composition.mdx
# Composition
컴포넌트를 조합하여 복잡한 UI를 구성하는 방법과 원칙을 설명합니다.
## `as` Prop
`as` prop은 React 컴포넌트가 렌더링하는 기본 HTML 요소를 변경하는 데 사용됩니다. 컴포넌트의 기능은 유지하면서 기본 요소를 변경할 수 있는 간단한 방법을 제공합니다.
```jsx
단락 텍스트인라인 텍스트제목 텍스트
```
## `asChild` Prop
`asChild` prop은 컴포넌트의 기능을 자식 요소에 합성하는 데 사용됩니다. 이를 활용해 HTML 태그를 변경하거나, 다른 컴포넌트에 기능을 주입할 수 있습니다.
[Radix UI](https://www.radix-ui.com/primitives/docs/utilities/slot)에서 제공하는 asChild 패턴과 동일한 기능을 제공합니다.
### 요소 타입 변경하기
```jsx
// FAB는 기본적으로 button 태그를 사용하지만, asChild를 사용해 링크로 변경할 수 있습니다.
} />
```
> 기본 요소 타입을 변경하는 경우, 해당 요소가 접근성을 유지하고 올바르게 작동하는지 확인하는 것은 개발자의 책임입니다. 예를 들어, 버튼을 `div`로 변경하면 더 이상 키보드로 접근할 수 없게 될 수 있습니다.
### React 컴포넌트와 조합하기
```jsx
// 라우터 라이브러리에서 제공하는 Link 컴포넌트에 기능을 합성할 수 있습니다.
```
`asChild`를 사용하여 컴포넌트를 조합할 때는 두 가지 원칙을 따라야 합니다.
#### 1. 컴포넌트는 props를 전개해야 합니다
asChild는 기능을 제공하고 접근성을 유지하기 위한 고유의 props와 이벤트 핸들러를 전달합니다. 컴포넌트가 이러한 props를 지원하지 않으면 제대로 작동하지 않습니다.
```jsx
// 잘못된 방법
const MyButton = () => ;
// 올바른 방법
const MyButton = (props) => ;
```
asChild의 자식 컴포넌트에 대해서는 항상 모든 props를 전개(spread)하는 것이 좋은 방법입니다.
#### 2. 컴포넌트는 ref를 전달해야 합니다
컴포넌트에 `ref`를 전달해야 할 수 있습니다(예: 요소 크기 측정). 컴포넌트가 `ref`를 받지 않으면 제대로 작동하지 않을 수 있습니다.
```jsx
// 잘못된 방법
const MyButton = (props) => ;
// 올바른 방법
const MyButton = React.forwardRef((props, forwardedRef) => (
));
```
모든 경우에 필수는 아니지만, 항상 `React.forwardRef`를 사용하는 것이 가장 안전합니다.
file: ./content/react/components/concepts/icon.mdx
# Icon
아이콘을 사용하는 방법을 설명합니다.
## 개요
[당근 아이콘 라이브러리](/react/iconography/library)는 디자인 시스템에 독립적(agnostic)으로 설계되었으며 SEED Design의 의견이 포함되어 있지 않습니다. 때로는 라이브러리에 없는 커스텀 아이콘을 사용하면서도 아이콘 합성 패턴을 활용해야 하는 경우가 있습니다.
이를 위해 `svg` 속성을 통해 아이콘을 받아 디자인 시스템에 연결하는 유틸리티 컴포넌트를 제공합니다:
* `Icon`: 아이콘을 독립적으로 사용하거나 아이콘만 표시하는 컴포넌트에서 사용합니다.
* `PrefixIcon`, `SuffixIcon`: 컴포넌트 내에 아이콘과 텍스트를 함께 배치할 때 사용합니다.
## Icon 컴포넌트
`Icon` 컴포넌트는 아이콘을 독립적으로 사용하거나 아이콘만 표시하는 컴포넌트에서 사용합니다.
```jsx
import { Icon } from "@seed-design/react";
import { IconHeartFill } from "@karrotmarket/react-monochrome-icon";
// 독립형 아이콘
} />
// 아이콘만 표시하는 버튼
} />
```
## PrefixIcon과 SuffixIcon
컴포넌트 내에 아이콘과 텍스트를 함께 배치할 때는 `PrefixIcon`, `SuffixIcon` 컴포넌트를 children으로 배치합니다.
```jsx
import { PrefixIcon, SuffixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import { IconPlusFill, IconChevronRightFill } from "@karrotmarket/react-monochrome-icon";
// 앞에 아이콘 배치
} />
라벨
// 뒤에 아이콘 배치
라벨
} />
// 아이콘 양쪽에 배치
} />
라벨
} />
```
이 패턴은 다음과 같은 컴포넌트에서 일관되게 사용됩니다:
* `ActionButton`: 버튼 내 아이콘 배치
* `Button`: 일반 버튼 내 아이콘 배치
* `ToggleButton`: 토글 버튼 내 아이콘 배치
* `ActionChip`: 액션 칩 내 아이콘 배치
* `ControlChip`: 컨트롤 칩 내 아이콘 배치
file: ./content/react/components/concepts/snippet.mdx
# Snippet
자주 사용되는 UI 패턴을 스니펫으로 제공하여 개발 효율성을 높이는 방법을 안내합니다.
## 개요
Snippet은 **Compound Components**를 기본으로 채택하면서도 개발자 경험(DX)을 최적화하기 위한 해결책입니다. 복잡한 compound components를 간단하게 사용할 수 있도록 도와주는 패턴입니다.
## **Compound Components**란?
기존의 닫힌 컴포넌트 방식에서는 컴포넌트의 커스터마이징이 제한적이었습니다. 예를 들어, 다음과 같은 닫힌 컴포넌트는:
```tsx
Click me
```
내부 구현이 숨겨져 있어 다음과 같은 커스터마이징 요구사항을 해결하기 어려웠습니다:
* label에 스타일을 추가하는 방법
* 체크박스의 아이콘을 변경하는 방법
* ref를 div와 input에 각각 전달하는 방법
이러한 문제를 해결하기 위해 compound components 패턴을 도입했습니다:
```tsx
Click me
```
## Snippet의 필요성
Compound components는 뛰어난 유연성을 제공하지만, 매번 이렇게 자세한 구현을 작성하는 것은 번거로울 수 있습니다. 이러한 유연성과 DX간의 trade-off를 해결하기 위해 Snippet 개념이 도입되었습니다.
## Snippet 사용하기
### 1. CLI 실행
다음 명령어를 통해 필요한 컴포넌트의 snippet을 프로젝트에 추가할 수 있습니다:
```bash
npx @seed-design/cli add
```
### 2. 생성된 Snippet 활용
CLI 실행 후, `seed-design/ui/*` 디렉토리에 snippet이 생성됩니다. 예를 들어:
```tsx
// seed-design/ui/checkbox.tsx
export const Checkbox = React.forwardRef(
({ inputProps, rootRef, label, variant = "square", ...otherProps }, ref) => {
return (
: null}
checked={}
indeterminate={}
/>
{label}
);
},
);
```
### 3. 간단한 사용법
Snippet을 통해 복잡한 compound components를 간단하게 사용할 수 있습니다:
```tsx
import { Checkbox } from "@/seed-design/ui/checkbox"
const Demo = () => Click me
```
file: ./content/react/components/stackflow/app-screen.mdx
# App Screen
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
## Installation
## Props
### AppScreen
{"Whether the element should be rendered as a child of a slot."}
{"The subtitle of the app bar.\nIf children is provided as ReactElement, this prop will be ignored."}
},
layout: {
"type": "\"titleOnly\" | \"withSubtitle\"",
"default": "titleOnly"
},
theme: {
"type": "\"cupertino\" | \"android\"",
"default": "cupertino"
},
transitionStyle: {
"type": "\"slideFromRightIOS\" | \"fadeFromBottomAndroid\"",
"default": "slideFromRightIOS"
},
tone: {
"type": "\"layer\" | \"transparent\"",
"default": "layer"
}
}}
/>
## Examples
### Transparent app bar
file: ./content/react/get-started/installation/index.mdx
# Installation
Seed Design을 설치하고 사용하는 방법을 알아봅니다.
## 번들러 가이드
Seed Design은 Vite, Webpack 번들러 통합을 지원합니다. 각 번들러별 가이드를 제공합니다.
} />
} />
## 수동 설치 가이드
Seed Design을 번들러 통합 없이 설치하고 사용하는 방법을 알아봅니다.
### 의존성 설치
필요한 의존성들을 설치해요.
```bash
npm install @seed-design/react @seed-design/css
```
```bash
pnpm add @seed-design/react @seed-design/css
```
```bash
yarn add @seed-design/react @seed-design/css
```
```bash
bun add @seed-design/react @seed-design/css
```
### index.html 수정하기
Seed Design의 컬러 토큰은 `` 태그의 `data-seed-color-mode`, `data-seed-user-color-scheme`
속성을 통해 라이트/다크모드 전환을 해요.
```tsx title="index.html"
```
```tsx title="index.html"
```
```tsx title="index.html"
```
### all.css import하기
스타일시트 크기를 줄이기 위해 `base.css` 및 각 컴포넌트의 스타일시트를 따로 import할 수 있어요.
번들러를 사용하는 경우 문서 상단의 번들러 가이드를 통해 컴포넌트 스타일시트를 자동으로 로드할 수 있어요.
```ts title="index.tsx"
import "@seed-design/react/all.css";
```
### seed-design.json 생성하기
### init 명령어 입력하기
```sh
npx @seed-design/cli@latest init
```
### seed-design 설정
```sh
◇ TypeScript를 사용중이신가요?
│ Yes
│
◇ React Server Components를 사용중이신가요?
│ No
│
◇ seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
│ ./seed-design
```
아래 파일을 프로젝트 루트에 생성해주세요.
```json title="seed-design.json"
{
"rsc": false,
"tsx": true,
"path": "./seed-design"
}
```
### 컴포넌트를 한번 사용해볼까요?
```sh
npx @seed-design/cli@latest add action-button
```
### tsconfig.json 설정하기
```json title="tsconfig.json"
{
"compilerOptions": {
// your options
"paths": { // [!code highlight]
"seed-design/ui/*": [ // [!code highlight]
"./seed-design/ui/*" // [!code highlight]
] // [!code highlight]
} // [!code highlight]
}
}
```
file: ./content/react/get-started/installation/vite.mdx
# Vite
vite 프로젝트에서 Seed Design을 설치하고 사용하는 방법을 알아봅니다.
### 의존성 설치
필요한 의존성들을 설치해요.
```bash
npm install @seed-design/react @seed-design/css
```
```bash
pnpm add @seed-design/react @seed-design/css
```
```bash
yarn add @seed-design/react @seed-design/css
```
```bash
bun add @seed-design/react @seed-design/css
```
### base.css import하기
```ts title="index.tsx"
import "@seed-design/css/base.css";
```
### seed-design.json 생성하기
### init 명령어 입력하기
```sh
npx @seed-design/cli@latest init
```
### seed-design 설정
```sh
◇ TypeScript를 사용중이신가요?
│ Yes
│
◇ React Server Components를 사용중이신가요?
│ No
│
◇ seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
│ ./seed-design
```
아래 파일을 프로젝트 루트에 생성해주세요.
```json title="seed-design.json"
{
"rsc": false,
"tsx": true,
"path": "./seed-design"
}
```
### tsconfig.json 설정하기
위에서 설정한 [seed-design.json path](/react/get-started/seed-design-json#path)의 경로와 동일해야 해요.
```json title="tsconfig.app.json"
{
"compilerOptions": {
// your options
"paths": { // [!code highlight]
"seed-design/ui/*": [ // [!code highlight]
"./seed-design/ui/*" // [!code highlight]
] // [!code highlight]
} // [!code highlight]
}
}
```
### vite config 수정하기
```bash
npm install -D @seed-design/vite-plugin vite-tsconfig-paths
```
```bash
pnpm add -D @seed-design/vite-plugin vite-tsconfig-paths
```
```bash
yarn add --dev @seed-design/vite-plugin vite-tsconfig-paths
```
```bash
bun add --dev @seed-design/vite-plugin vite-tsconfig-paths
```
* `seedDesignPlugin`은 theming 관련, CSS 파일 자동 로드 등을 담당해요.
* `tsconfigPaths`는 tsconfig.json의 경로를 자동으로 인식해요.
```ts title="vite.config.ts"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
import { seedDesignPlugin } from '@seed-design/vite-plugin'; // [!code highlight]
import tsconfigPaths from 'vite-tsconfig-paths'; // [!code highlight]
export default defineConfig({
plugins: [
react(),
seedDesignPlugin(), // [!code highlight]
tsconfigPaths(), // [!code highlight]
],
})
```
### 컴포넌트를 한번 사용해볼까요?
```sh
npx @seed-design/cli@latest add action-button
```
file: ./content/react/get-started/installation/webpack.mdx
# Webpack
Webpack 프로젝트에서 Seed Design을 설치하고 사용하는 방법을 알아봅니다.
### 의존성 설치
필요한 의존성들을 설치해요.
```bash
npm install @seed-design/react @seed-design/css @seed-design/webpack-plugin
```
```bash
pnpm add @seed-design/react @seed-design/css @seed-design/webpack-plugin
```
```bash
yarn add @seed-design/react @seed-design/css @seed-design/webpack-plugin
```
```bash
bun add @seed-design/react @seed-design/css @seed-design/webpack-plugin
```
### base.css import하기
```ts title="index.tsx"
import "@seed-design/css/base.css";
```
### webpack config 설정하기
```ts title="vite.config.ts"
+import { SeedDesignPlugin } from '@seed-design/webpack-plugin';
export default defineConfig({
plugins: [
+ new SeedDesignPlugin()
]
})
```
### seed-design.json 생성하기
### init 명령어 입력하기
```sh
npx @seed-design/cli@latest init
```
### seed-design 설정
```sh
◇ TypeScript를 사용중이신가요?
│ Yes
│
◇ React Server Components를 사용중이신가요?
│ No
│
◇ seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
│ ./seed-design
```
아래 파일을 프로젝트 루트에 생성해주세요.
```json title="seed-design.json"
{
"rsc": false,
"tsx": true,
"path": "./seed-design"
}
```
### 컴포넌트를 한번 사용해볼까요?
```sh
npx @seed-design/cli@latest add action-button
```
### tsconfig.json 설정하기
```json title="tsconfig.json"
{
"compilerOptions": {
// your options
"paths": { // [!code highlight]
"seed-design/ui/*": [ // [!code highlight]
"./seed-design/ui/*" // [!code highlight]
] // [!code highlight]
} // [!code highlight]
}
}
```
file: ./content/react/get-started/migration/guides.mdx
# Guides
Seed Design V2에서 V3로 마이그레이션하기 위해 필요한 작업들을 안내합니다.
## 마이그레이션 개요
V2에서 V3로 넘어가기 위해서는 크게 아래와 같은 순서로 진행됩니다.
1. 이전 버전 용례 분석
2. V3 설치
3. 파운데이션 마이그레이션 (일괄 적용 권장)
4. 컴포넌트 마이그레이션 (화면별로 적용 권장 및 점진적 적용 가능)
기본적으로 파운데이션까지는 프로젝트 전체에 일괄 교체를 진행합니다.
컴포넌트는 그 이후에 화면별로 적용하거나, 컴포넌트 별로 적용하는 것과 같이 점진적 적용이 가능합니다.
## V3 설치
V3를 사용하기 위한 기반 작업들을 먼저 진행합니다.
아래 작업들이 끝나면 V3 사용이 가능합니다.
### 의존성 설치
필요한 의존성들을 설치해요.
```bash
npm install @seed-design/react @seed-design/css
```
```bash
pnpm add @seed-design/react @seed-design/css
```
```bash
yarn add @seed-design/react @seed-design/css
```
```bash
bun add @seed-design/react @seed-design/css
```
* `@seed-design/react`는 리액트 컴포넌트 라이브러리가 전부 포함되어 있습니다.
* 기존 `sprout` 패키지들을 대체합니다.
* 컴포넌트 마이그레이션 전까지는 기존 패키지들을 사용해주세요.
* `@seed-design/css`는 스타일 관련된 모든 것이 포함되어 있습니다. (vars, theming, recipe, css, etc.)
* 기존 `@seed-design/stylesheet` 라이브러리를 대체합니다.
* 기존 `@seed-design/design-token` 라이브러리를 대체합니다.
* 파운데이션 마이그레이션 전까지는 기존 패키지들을 사용해주세요.
{/* ----------------------------------------------------------------------- */}
{/* ----------------------------------------------------------------------- */}
### CSS import
V2 `@seed-design/stylesheet` 패키지의 `global.css`와 상호운용이 가능합니다.
```ts title="index.tsx"
import "@seed-design/css/all.css"; // [!code ++]
```
V3 스타일시트 사용법은 [Installation의 css import](/react/get-started/installation#allcss-import하기) 설명을 참고해주세요.
### Theme 적용
#### 변경사항
기존 V2에서 사용되던 data-attribute가 바뀌었습니다.
```html
```
* `data-seed`: Seed Design 전역 테마 적용 (V3에서 그대로 유지)
* `data-seed-color-mode`: Seed Design 테마 강제 적용
* `light-only`, `dark-only`, `system` 중 하나를 선택할 수 있습니다.
* `data-seed-user-color-scheme`: 유저 기기의 설정
* `light`, `dark` 중 하나의 값을 가집니다.
* v2에서 `data-seed-scale-color` 속성을 사용하던 코드가 있다면 `data-seed-user-color-scheme` 속성으로 변경해주세요.
해당 속성들을 직접 적용하는 방법도 있지만 `플러그인 적용` 방식을 권장합니다.
지원되지 않는 번들러를 사용하는 경우 직접 `스크립트 적용` 방식을 사용해서 적용해주세요.
#### 플러그인 적용
Vite, Rsbuild, Webpack 등의 번들러를 사용하는 프로젝트에서는 플러그인을 추가하면 바로 Theming을 적용할 수 있습니다.
Vite 사용 시
* [@seed-design/vite-plugin](https://github.com/daangn/seed-design/tree/dev/packages/vite-plugin)
```bash
npm install @seed-design/vite-plugin
```
```bash
pnpm add @seed-design/vite-plugin
```
```bash
yarn add @seed-design/vite-plugin
```
```bash
bun add @seed-design/vite-plugin
```
Rsbuild 사용 시
* [@seed-design/rsbuild-plugin](https://github.com/daangn/seed-design/tree/dev/packages/rsbuild-plugin)
```bash
npm install @seed-design/rsbuild-plugin
```
```bash
pnpm add @seed-design/rsbuild-plugin
```
```bash
yarn add @seed-design/rsbuild-plugin
```
```bash
bun add @seed-design/rsbuild-plugin
```
Webpack 사용 시
* [@seed-design/webpack-plugin](https://github.com/daangn/seed-design/tree/dev/packages/webpack-plugin)
```bash
npm install @seed-design/webpack-plugin
```
```bash
pnpm add @seed-design/webpack-plugin
```
```bash
yarn add @seed-design/webpack-plugin
```
```bash
bun add @seed-design/webpack-plugin
```
#### 스크립트 적용
`@seed-design/css/theming` 패키지에서 제공하는 `generateThemingScript` 함수를 사용해서 스크립트를 생성해요.
```ts title="index.tsx"
import { generateThemingScript } from "@seed-design/css/theming";
```
생성된 스크립트를 직접 적용해주세요.
```html
```
혹은 직접 스크립트를 작성하실 수도 있습니다.
```html
```
## 파운데이션 마이그레이션
파운데이션 마이그레이션에는 크게 `Color`와 `Typography` 두 가지에 대해서 작업이 필요합니다.
### 용례 분석하기
우선 현재 프로젝트에서 `@seed-design/design-token` 패키지를 사용하는 용례를 분석해야합니다.
* `@seed-design/design-token` 패키지의 vars를 사용하는 용례
* `@seed-design/design-token` 패키지의 vars를 확장해서 사용하는 컴포넌트
* 위 컴포넌트를 사용중인 코드 용례
* `@seed-design/styleesheet` 패키지를 사용하는 용례
* `--seed-` prefix로 시작하는 CSS Variable을 사용하는 용례
* 사용중인 CSS 라이브러리와 `@seed-design/design-token` 패키지와 결합해서 사용하는 용례
아래의 프롬프트를 이용해서 현재 프로젝트에서 사용중인 용례를 분석할 수도 있습니다.
```text title="prompt"
Seed Design System의 디자인 토큰을 새로운 토큰으로 마이그레이션
할건데 코드 어디 부분들을 변경해야 하는지 보고서를 써줘.
1. `@seed-design/design-token` 패키지의 vars 변수를 사용하는 용례
2. `@seed-design/design-token` 패키지의 vars 변수를 확장해서 사용하는 컴포넌트
3. 2번 컴포넌트를 사용중인 코드 용례
4. `@seed-design/styleesheet` 패키지를 사용하는 용례
5. `--seed-` prefix로 시작하는 CSS Variable을 사용하는 용례
6. 사용중인 CSS 라이브러리와 `@seed-design/design-token` 패키지와 결합해서 사용하는 용례
위와 같은 사례들말고도 네가 더 분석해서 추가적으로 마이그레이션 해야하는 부분들도 알려줘.
```
### 마이그레이션 전략
* 만약 여러 패키지를 사용하는 경우에는 공통 패키지 먼저 마이그레이션 합니다.
* 전처리해서 사용하는 경우에는 전처리 코드 자체를 V3로 마이그레이션 한 후 나머지 코드들을 Codemod로 마이그레이션 하는게 좋습니다.
* Color와 Typography 각각 진행해도 되지만, Color와 Typography 마이그레이션을 동시에 진행 후 한번에 QA를 진행하는게 더 간결합니다.
### Typography Preset
많은 프로젝트에서 기존 타이포그래피 토큰을 이용해서 유틸리티 함수를 만들어서 사용하는 경우가 있습니다.
이런 경우에는 아래의 코드를 참고해서 전처리를 진행 후 코드들을 그에 맞게 변경해주세요.
* [replace-custom-seed-design-typography](https://seed-design.io/react/get-started/codemod#replace-custom-seed-design-typography) 커스텀 transform을 사용해서 마이그레이션 할 수 있습니다.
```ts title="typography.ts"
import type { TextVariant } from '@seed-design/css/recipes/text';
import { vars as typographyVars } from '@seed-design/css/vars/component/typography';
/**
* @see https://seed-design.io/docs/foundation/typography/overview
* @example
* typography.t1Bold
* typography.t2Regular
* typography.t3Bold
* typography.t4Regular
* typography.t5Bold
* typography.t6Bold
* typography.t7Bold
* typography.screenTitle
* ...
*/
export const typography = Object.entries(typographyVars).reduce(
(acc, [key, value]) => {
const withoutPrefix = key.replace('textStyle', '');
const firstChar = withoutPrefix.charAt(0).toLowerCase();
const restOfString = withoutPrefix.slice(1);
const name = (firstChar + restOfString) as TextVariant['textStyle'];
acc[name] = value.enabled.root;
return acc;
},
{} as Record<
TextVariant['textStyle'],
{
fontSize: string;
fontWeight: string;
lineHeight: string;
}
>,
);
```
### Codemod
기본적으로 마이그레이션은 [Codemod](/react/get-started/codemod)를 이용해 진행합니다.
```bash
npx @seed-design/codemod <옵션>
```
```bash
pnpm dlx @seed-design/codemod <옵션>
```
```bash
yarn dlx @seed-design/codemod <옵션>
```
```bash
bun x @seed-design/codemod <옵션>
```
* Codemod는 기본적으로 `color`와 `typography` transform을 분리해서 제공합니다.
* 현재는 Tailwind CSS, Stitches 혹은 Emotion, Vanilla Extract CSS와 같은 CSS-in-JS 라이브러리에 대한 transform을 제공합니다.
* 각팀에서 커스텀으로 제공되는 transform의 경우에는 `replace-custom-`의 prefix로 제공됩니다.
* 커스텀 transform의 변경 예시를 살펴보고 프로젝트와 상황이 같다면 사용할 수 있습니다.
* 추가로 특정 라이브러리의 transform이 필요하거나, 필요한 경우 커스텀 transform을 만들 수 있습니다. (디자인코어 팀에 문의)
#### Tailwind CSS
* Tailwind V3 플러그인을 제공합니다.
* [@seed-design/tailwind3-plugin](https://github.com/daangn/seed-design/tree/dev/packages/tailwind3-plugin)
* [@seed-design/tailwind4-theme](https://github.com/daangn/seed-design/tree/dev/packages/tailwind4-theme)
* Tailwind transform은 [replace-tailwind-typography](/react/get-started/codemod#replace-tailwind-typography), [replace-tailwind-color](/react/get-started/codemod#replace-tailwind-color) 두 개가 제공됩니다.
* Tailwind 같은 경우는 각 프로젝트에서 커스텀 플러그인을 작성해서 사용중인 경우가 많기 때문에 Codemod가 정확하게 맞지 않을 수 있습니다.
* Codemod 페이지에서 변경 예시를 살펴보고 프로젝트와 상황이 같다면 사용할 수 있습니다.
* 예시와 맞지 않다면 디자인코어팀에 문의해주세요.
#### Stitches CSS
* Stitches는 [replace-stitches-styled-typography](/react/get-started/codemod#replace-stitches-styled-typography), [replace-stitches-styled-color](/react/get-started/codemod#replace-stitches-styled-color), [replace-stitches-theme-color](/react/get-started/codemod#replace-stitches-theme-color) 의 형태로 제공합니다.
* 자세한 내용은 [Codemod](/react/get-started/codemod) 페이지를 참고해주세요.
#### Emotion, Vanilla Extract CSS, (CSS-in-JS)
* Emotion, Vanilla Extract CSS와 같은 CSS-in-JS 라이브러리는 `@seed-design/design-token`을 사용하는 경우가 대부분입니다.
* [replace-seed-design-token-vars](/react/get-started/codemod#replace-seed-design-token-vars) transform을 사용해서 일괄적으로 마이그레이션 할 수 있습니다.
* 해당 transform은 `color`와 `typography` 두 개 동시에 변경합니다.
* [replace-seed-design-token-vars](/react/get-started/codemod#replace-seed-design-token-vars)
#### Native CSS
* 기본적으로 `--seed-` prefix가 붙은 CSS Variable을 사용하는 경우가 있습니다.
* [replace-css-seed-design-color-variable](/react/get-started/codemod#replace-css-seed-design-color-variable) CSS transform도 제공합니다.
### Codemod 사용 시 주의사항
Codemod는 다수의 파일을 변경하기 때문에 주의가 필요합니다.
* 변경사항 추적과 히스토리 관리를 위해서 별도의 브랜치를 사용할 것을 권장합니다.
* transform에 따라 커밋을 나누는 것을 권장합니다.
* Codemod 실행 후 `lint`와 `test`를 진행해주세요.
### Codemod Log 파일
Codemod 실행 시 디버깅에 도움을 주는 로그 파일을 생성할 수 있습니다.
* `--log` 옵션을 추가해주세요.
* 로그 파일은 Codemod 실행 경로에 `.report` 폴더에 생성됩니다.
* 로그 파일은 변경사항을 추적하고 히스토리 관리에 도움을 줍니다.
#### debug.log
* 디버깅 정보를 기록합니다.
* 변경 시도한 파일 경로와 시간을 기록합니다.
```log title="debug.log"
2025-03-28 19:17:36 [DEBUG]: Starting transformation of /Project/src/component1.tsx
2025-03-28 19:17:36 [DEBUG]: Starting transformation of /Project/src/component2.tsx
2025-03-28 19:17:36 [DEBUG]: Starting transformation of /Project/src/component3.tsx
2025-03-28 19:17:36 [DEBUG]: Starting transformation of /Project/src/component4.tsx
```
#### issues.log
* 확인이 필요한 변경사항을 기록합니다.
* 문제가 있는 파일 경로와 라인 번호를 기록합니다.
* 문제가 있는 이유를 기록합니다.
* 매핑이 없는 경우를 제외하고는 이미 변경된 상태입니다.
```log title="issues.log"
2025-03-28 18:46:55 [WARN]: /Project/src/component1.tsx (line: 171)
↳ reason: $gray900-static static에서 palette로 변경되는 색상으로 용도 파악 필요
2025-03-28 18:46:55 [WARN]: /Project/src/component2.tsx (line: 194)
↳ reason: $gray900-static static에서 palette로 변경되는 색상으로 용도 파악 필요
2025-03-28 18:46:55 [WARN]: /Project/src/component3.tsx (line: 147)
↳ reason: $gray900-static static에서 palette로 변경되는 색상으로 용도 파악 필요
2025-03-28 18:46:56 [WARN]: /Project/src/component4.tsx (line: 242)
↳ reason: $gray900-static static에서 palette로 변경되는 색상으로 용도 파악 필요
```
자주 발생하는 문제들은 제일 아래 [issues.log 파일에 생긴 문제들은 어떻게 해결해야 하나요?](#issueslog-파일에-생긴-문제들은-어떻게-해결해야-하나요)에 정리해두었습니다.
#### success.log
* 변경사항 추적에 도움을 줍니다.
* 변경된 파일 경로와 라인 번호를 기록합니다
* 변경된 토큰을 기록합니다.
* CSS 파일을 변경하는 transform의 경우는 토큰을 일일이 기록하지 않습니다.
* tailwind 같은 경우는 변경된 className을 기록합니다.
```log title="success.log"
2025-03-28 18:46:54 /Project/src/hooks/hook1.tsx (line: 149): $gray900 → $palette-gray-1000 (line 149)
2025-03-28 18:46:54 /Project/src/hooks/hook2.tsx (line: 155): $gray700 → $palette-gray-800 (line 155)
2025-03-28 18:46:54 /Project/src/components/component1.tsx (line: 54): $divider1-semantic → $stroke-neutral-muted (line 54)
2025-03-28 18:46:54 /Project/src/components/component2.tsx (line: 60): $paperDefault-semantic → $bg-layer-default (line 60)
```
### V2 V3 Compatibility
Color, Typography 마이그레이션이 끝나고 나면 기존 Sprout (V2) 컴포넌트와의 호환성 문제가 있을 수 있습니다.
Sprout 내부에 V2 토큰을 V3 토큰으로 전부 교체한 Compatibility 버전을 제공합니다.
여기까지 진행해야 파운데이션 마이그레이션이 끝난 것으로 간주할 수 있습니다.
[Sprout Compatibility 버전](https://github.com/daangn/sprout/pkgs/npm/sprout-components-button) 페이지에서
`-v3-compat` 태그가 붙은 버전중에 최신 버전으로 모든 컴포넌트를 전부 교체해주시면 됩니다. (모든 컴포넌트 동일한 버전을 제공합니다.)
주의할 점: 너무 예전의 버전을 사용하는 경우 컴포넌트 내부에서 breaking changes가 있을 수 있습니다.
V2 V3 Compatibility 버전까지 설치가 되었다면 파운데이션 마이그레이션이 끝난 것으로 간주할 수 있습니다.
이론상 이때부터는 `@seed-design/design-token` 패키지와 `@seed-design/stylesheet` 패키지를 제거할 수 있습니다.
또한 V3 컴포넌트를 점진적 사용이 가능합니다.
### V3 Compat Script 제거
```html
```
기존에 25.10.0 앱버전 이상에서 V2 백그라운드 색상을 V3로 변경하기 위해 추가했던 스크립트는
마이그레이션이 끝나고 제거해도 됩니다.
## 컴포넌트 마이그레이션
TBD
## 자주 묻는 질문
### issues.log 파일에 생긴 문제들은 어떻게 해결해야 하나요?
#### 토큰 매핑이 안되는 경우 (컬러, 타이포그래피)
* V3에서 지원하지 않는 토큰을 사용하는 경우입니다. (주로 alpha 색상 토큰이거나 너무 작거나 큰 타이포 토큰입니다.)
* 토큰 매핑을 확인할 수 있는 방법은 [파운데이션을 토큰 매핑을 알고 싶습니다.](#파운데이션을-토큰-매핑을-알고-싶습니다) 설명을 참고해주세요.
* 해당 경우는 디자이너분과 상의 후 다른 적절한 토큰으로 직접 매핑해주세요.
* 결정에 어려움이 있는 경우 디자인코어팀에 문의해주세요.
#### alpha 토큰이 사라진 경우 (컬러)
* alpha가 들어간 토큰은 대부분의 경우 더 이상 사용되지 않습니다.
* 직접 CSS에 `alpha` 채널을 적용해주세요. (opacity 속성을 사용하거나, rgba 형식으로 직접 적용)
#### static 토큰이 palette로 변경된 경우 (컬러)
* V3에서 static 컬러 토큰은 웬만해서는 `white`, `black` 두 가지만 지원합니다.
* 나머지 색상 (yellow, green, blue, red, gray) 등은 palette 토큰으로 변경되었습니다.
* 다크모드와 라이트모드에 따라 색상이 달라질 수 있기 때문에 확인이 필요합니다.
* 배경은 변하는데 텍스트 색상이 변하지 않거나, 그 반대의 상황이 나올 수 있습니다.
* 대부분의 경우는 static 토큰이 필요한 경우가 아니기 때문에 palette 토큰으로 변경되었습니다.
* 이 경우는 디자이너분과 상의 후 기존 static 토큰을 다른 적절한 palette 토큰으로 직접 매핑해주세요.
#### 선택지가 두개인 토큰으로 매핑된 경우 (컬러)
* 컬러 토큰의 경우 대체 토큰이 두 가지인 경우가 있습니다. (ex. `primary` -> `bg.brand-solid`, `fg.brand`)
* `fg`는 텍스트, 아이콘 등 UI의 전경 요소에 사용되는 색상입니다. (color, fill, etc.)
* `bg`는 전체 화면 또는 UI의 배경에 사용하는 색상입니다. (backgroundColor, etc.)
* 변경되어야 하는 토큰을 Codemod가 판단하기 어려울 수 있습니다.
* 이 경우는 직접 적절한 토큰으로 매핑해주세요.
#### alternate 토큰으로 변경된 경우 (타이포그래피)
* 기본적으로 [Mapping](/docs/migration/migration-reference)은 1:1 매핑을 지원합니다.
* 하지만 V3에서 Deprecated 된 토큰인 경우, 대체 토큰으로 매핑 될 수 있습니다.
* 그런 경우 font size나 line height가 변경되었을 수 있습니다.
* 이 경우는 직접 UI를 확인해야 합니다.
### 파운데이션을 토큰 매핑은 어디서 확인할 수 있나요?
[Migration Reference](/docs/migration/migration-reference)에서 토큰 매핑을 확인할 수 있습니다.
## Known Issues
### Vanill Extract CSS + Vite + V3 사용시
* `@vanilla-extract/vite-plugin`와 `@seed-design/vite-plugin`을 같이 사용하는 경우 빌드가 실패할 수 있습니다.
* `@vanilla-extract/vite-plugin`의 버전을 `5` 이상으로 업그레이드 해주세요.
file: ./content/react/get-started/migration/improvements.mdx
# Improvements
Seed Design V3의 개선사항을 안내합니다.
## Composition
V3에서는 컴포넌트를 조합하여 복잡한 UI를 구성하는 방법과 원칙을 제공합니다.
as Prop, asChild Prop, 슬롯 등을 통해 컴포넌트를 조합할 수 있습니다.
[Composition](/react/components/concepts/composition) 페이지에서 자세히 설명합니다.
```tsx title="Composition"
// Text 컴포넌트는 기본적으로 span 태그를 사용하지만, as Prop을 사용해 다른 태그로 변경할 수 있습니다.
단락 텍스트인라인 텍스트제목 텍스트
// FAB는 기본적으로 button 태그를 사용하지만, asChild를 사용해 링크로 변경할 수 있습니다.
} />
```
## Snippet
V3에서는 자주 사용되는 UI 패턴을 스니펫으로 제공하여 개발 효율성을 높이는 방법을 제공합니다.
Compound Components 패턴과 Snippet의 조합을 통해 복잡한 컴포넌트를 쉽게 구현할 수 있습니다.
[Snippet](/react/components/concepts/snippet) 페이지에서 자세히 설명합니다.
```tsx title="Snippet"
Click me
```
## Icon Usage
V3에서의 아이콘 사용 방식이 달라졌습니다.
[Icon Usage](/react/components/concepts/icon) 페이지에서 자세히 설명합니다.
```tsx title="Icon Usage"
import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon, SuffixIcon, Icon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button"; // snippet 제공
import { ActionChip } from "seed-design/ui/action-chip"; // snippet 제공
export default function ActionButtonPrefixIcon() {
return (
<>
} />
} />
} />
Prefix Icon
} />
Suffix Icon
} />
);
}
```
## Avatar 컴포넌트 변경
```tsx
// [!code --]
import { Avatar } from "@daangn/sprout-components-avatar";
// [!code ++]
import { Avatar } from "seed-design/ui/avatar"; // snippet 제공
```
* `size` 옵션 확장: `"20" | "24" | "36" | "48" | "64" | "80" | "96"`
* 이미지 로딩 실패 시 대체 콘텐츠를 위한 `fallback` prop 제공
* 슬롯 기반 구조 추가: `Root`, `Image`, `Fallback`
* [V3 컴포넌트 보러가기 (Avatar)](/react/components/avatar)
## AlertDialog 관련 컴포넌트 변경
V2의 Dialog와 AlertDialog는 V3에서 각각 별도의 컴포넌트로 제공돼요.
```tsx
// [!code --]
import { Dialog, DialogContainer, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@daangn/sprout-components-dialog";
// [!code ++]
import { AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger } from "seed-design/ui/alert-dialog"; // snippet 제공
```
* 기존에 `DialogHeader`로만 구조화되어 있던 부분들 조금 더 세분화 (`AlertDialogContent`, `AlertDialogHeader`, `AlertDialogFooter`)
* 액션에 관한 슬롯 추가 `AlertDialogAction`
* `AlertDialogTrigger`로 명시적으로 trigger를 제공하거나 혹은 `open` prop을 통해 외부에서 제어 가능
* [V3 컴포넌트 보러가기 (AlertDialog)](/react/components/alert-dialog)
## 버튼 관련 컴포넌트 변경
### BoxButton, TextButton → ActionButton
V2의 [BoxButton](https://sprout-storybook.vercel.app/?path=/docs/components-buttons-boxbutton--docs), [TextButton](https://sprout-storybook.vercel.app/?path=/docs/components-buttons-textbutton--docs)을 대체하는 통합 버튼 컴포넌트
```tsx
// [!code --]
import { BoxButton, TextButton } from "@daangn/sprout-components-button";
// [!code ++]
import { ActionButton } from "seed-design/ui/action-button"; // snippet 제공
```
* `xlarge` size 제거
* 전체적인 variant 명칭 변경
* `Primary` → `Neutral Solid`
* `Primary low` → `Neutral Weak`
* `Secondary` → `Neutral Weak`
* `Danger` → `Critical Solid`
* 추가된 variant: `Neutral Outline`
* `isLoading`이 `loading`으로 변경
* `layout` prop 추가 (`withText`, `iconOnly`)
* `prefix`, `suffix`: 아이콘 배치 방식이 `children`으로 통합
* [V3 컴포넌트 보러가기 (ActionButton)](/react/components/action-button)
### BoxToggleButton, CapsuleToggleButton → ToggleButton, ReactionButton
V2의 [BoxToggleButton](https://sprout-storybook.vercel.app/?path=/docs/components-buttons-boxtogglebutton--docs), [CapsuleToggleButton](https://sprout-storybook.vercel.app/?path=/docs/components-buttons-capsuletogglebutton--docs)은 V3에서 각각 ToggleButton, ReactionButton으로 변경되었어요.
```tsx
// [!code --]
import { BoxToggleButton, CapsuleToggleButton } from "@daangn/sprout-components-button";
// [!code ++]
import { ToggleButton } from "seed-design/ui/toggle-button"; // snippet 제공
// [!code ++]
import { ReactionButton } from "seed-design/ui/reaction-button"; // snippet 제공
```
**ToggleButton 변경사항**
* size 변경: V2의 `xSmall`, `small`, `medium`, `large` → V3의 `xsmall`, `small`로 통합
* variant 명칭 변경
* `primaryLow` → `neutralWeak`
* `secondary` → `neutralWeak`
* `primary` → `brandSolid`
* State 관련 명칭 변경 (Selected + State 조합)
* [V3 컴포넌트 보러가기 (ToggleButton)](/react/components/toggle-button)
**ReactionButton 변경사항**
* CapsuleToggleButton V2의 `small`, `xsmall` 크기만 지원
* 좋아요 버튼 등 반응형 버튼에 특화된 컴포넌트
* V3에서는 `size` 옵션으로 `xsmall`, `small` 제공
* selected 상태일 때 스타일 변경 (브랜드 색상으로 강조)
* [V3 컴포넌트 보러가기 (ReactionButton)](/react/components/reaction-button)
## Chips 관련 컴포넌트 변경
V2에서는 `@daangn/sprout-components-chips` 패키지에서 여러 칩 관련 컴포넌트들을 제공했어요. V3에서는 이러한 컴포넌트들이 목적에 따라 재구성되었어요.
### ChipButton → ActionChip
V2의 [ChipButton](https://sprout-storybook.vercel.app/?path=/docs/components-chips-chipbutton--docs)은 V3에서 ActionChip으로 변경되었어요.
```tsx
// [!code --]
import { ChipButton } from "@daangn/sprout-components-chips";
// [!code ++]
import { ActionChip } from "seed-design/ui/action-chip"; // snippet 제공
```
* `layout` prop 추가 (`withText`, `iconOnly`)
* `prefix`, `suffix` prop 대신 `children`으로 아이콘 전달
* `count` prop 제거
* [V3 컴포넌트 보러가기 (ActionChip)](/react/components/action-chip)
### ChipToggleButton, ChipRadio, ChipRadioGroup → ControlChip
V2의 [ChipToggleButton](https://sprout-storybook.vercel.app/?path=/docs/components-chips-chiptogglebutton--docs)과 [ChipRadio, ChipRadioGroup](https://sprout-storybook.vercel.app/?path=/docs/components-chips-chipradiogroup--docs)는 V3에서 ControlChip으로 통합되었어요.
```tsx
// [!code --]
import { ChipToggleButton, ChipRadio, ChipRadioGroup } from "@daangn/sprout-components-chips";
// [!code ++]
import { ControlChip } from "seed-design/ui/control-chip"; // snippet 제공
```
* `ControlChip.Radio`와 `ControlChip.RadioGroup` 또는 `ControlChip.Toggle`로 사용
* `layout` prop 추가 (`withText`, `iconOnly`)
* `prefix`, `suffix` prop 대신 `children`으로 아이콘 전달
* [V3 컴포넌트 보러가기 (ControlChip)](/react/components/control-chip)
### ChipFilter → 제거됨
V2의 [ChipFilter](https://sprout-storybook.vercel.app/?path=/docs/components-chips-chipfilter--docs)는 V3에서 제거되었어요. 필요한 경우 ActionChip이나 ControlChip으로 대체할 수 있어요.
## Checkbox 관련 컴포넌트 변경
```tsx
// [!code --]
import { Checkbox } from "@daangn/sprout-components-checkbox";
// [!code ++]
import { Checkbox } from "seed-design/ui/checkbox"; // snippet 제공
```
* `variant` 옵션이 `shape` prop으로 변경 (`square`, `ghost`)
* `circle` variant가 제거되었으며 대신 `square`를 사용
* `size` 변경: `small` 크기가 제거되고 `medium`, `large`만 제공
* `bold` 속성은 `weight` prop으로 변경 (`default` | `stronger`)
* [V3 컴포넌트 보러가기 (Checkbox)](/react/components/checkbox)
## TextField 관련 컴포넌트 변경
V2에서는 TextField, MultilineTextField 컴포넌트를 따로 제공했지만, V3에서는 조합형 컴포넌트로 통합되었어요.
```tsx
// [!code --]
import { TextField, MultilineTextField } from "@daangn/sprout-components-text-field";
// [!code ++]
import { TextField, TextFieldInput, TextFieldTextarea } from "seed-design/ui/text-field"; // snippet 제공
```
* 크기 매핑 변경
* V2 `large` → V3 `xlarge`
* V2 `medium` → V3 `large`
* V2 `small` → V3 `medium`
* `TextFieldInput`은 텍스트 입력 컴포넌트로 사용
* `TextFieldTextarea`는 다중 라인 입력 컴포넌트로 사용
* `maxGraphemeCount` prop 추가 (기존 `maxLength` prop을 override해서 사용하던걸 명시적으로 표현)
* [V3 컴포넌트 보러가기 (TextField)](/react/components/text-field)
* [V3 컴포넌트 보러가기 (MultilineTextField)](/react/components/text-field/multiline-text-field)
## InlineAlert 관련 컴포넌트 변경
V2에서는 `@daangn/sprout-components-inline-alert` 패키지에서 여러 배너 관련 컴포넌트들을 제공했어요.
V3에서는 `InlineBanner` 컴포넌트로 제공되고 있어요.
```tsx
// [!code --]
import { InlineBanner, ActionableInlineBanner, DismissibleInlineBanner } from "@daangn/sprout-components-banner";
// [!code ++]
import { InlineBanner, ActionableInlineBanner, DismissibleInlineBanner } from "seed-design/ui/inline-banner"; // snippet 제공
```
* Variant 명칭 변경
* `normal` → `neutralWeak (default)`
* `info` → `informativeWeak`
* `warning` → `warningWeak`
* `danger` → `criticalWeak`
* 각 `neutral` 제외하고 `solid` variant 추가 (`informativeSolid`, `warningSolid`, `criticalSolid`)
* `criticalWeak`, `criticalSolid` variant는 `dismissible` prop 사용 불가
* [V3 컴포넌트 보러가기 (InlineBanner)](/react/components/inline-banner)
## Callout 관련 컴포넌트 변경
V2에서는 `@daangn/sprout-components-callout` 패키지에서 여러 Callout 관련 컴포넌트들을 제공했어요.
V3에서도 `Callout` 컴포넌트로 제공되고 있어요.
```tsx
// [!code --]
import { Callout, ActionableCallout, DismissibleCallout } from "@daangn/sprout-components-callout";
// [!code ++]
import { Callout, ActionableCallout, DismissibleCallout } from "seed-design/ui/callout"; // snippet 제공
```
* `variant` -> `tone`으로 변경
* `normal` → `neutral`
* `info` → `informative`
* `danger` → `critical`
* `warning` → `warning` (유지)
* `magic` -> `magic` (유지)
* [V3 컴포넌트 보러가기 (Callout)](/react/components/callout)
## SelectBox 관련 컴포넌트 변경
V2에서는 `@daangn/sprout-components-select-box` 패키지에서 여러 SelectBox 관련 컴포넌트들을 제공했어요. V3에서는 이러한 컴포넌트들이 목적에 따라 재구성되었어요.
### SelectBoxCheck -> CheckSelectBox, CheckSelectBoxGroup
V2의 RadioSelectBox와 CheckSelectBox는 V3에서 하나의 SelectBox 컴포넌트로 통합되었어요.
```tsx
// [!code --]
import { SelectBoxCheck } from "@daangn/sprout-components-select-box";
// [!code ++]
import { CheckSelectBox, CheckSelectBoxGroup } from "seed-design/ui/select-box"; // snippet 제공
```
* `SelectBoxCheck` -> `CheckSelectBox`
* 그룹 컴포넌트 추가: `CheckSelectBoxGroup`
* [V3 컴포넌트 보러가기 (CheckSelectBox)](/react/components/select-box/check-select-box)
### SelectBoxRadio, SelectBoxRadioGroup -> RadioSelectBoxItem, RadioSelectBoxRoot
```tsx
// [!code --]
import { SelectBoxRadio, SelectBoxRadioGroup } from "@daangn/sprout-components-select-box";
// [!code ++]
import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box"; // snippet 제공
```
* `SelectBoxRadio` -> `RadioSelectBoxItem`
* `SelectBoxRadioGroup` -> `RadioSelectBoxRoot`
* [V3 컴포넌트 보러가기 (RadioSelectBox)](/react/components/select-box/radio-select-box)
## Tabs 관련 컴포넌트 변경
### Tabs
```tsx
// [!code --]
import { Tabs, TabList, Tab, TabPanelGroup, TabPanel } from "@daangn/sprout-components-tabs";
// [!code ++]
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs"; // snippet 제공
```
**Tabs 변경사항**
* size 추가: `small`, `medium`
* 탭 내 알림 표시 옵션 제공 (`dot` -> `notification`)
* `stickyList` prop 추가: 스크롤 시 탭 목록 고정 가능
* `layout` -> `triggerLayout` 으로 변경 (`fill`, `hug`)
* 컨텐츠의 layout도 조절 가능 (`contentLayout`)
* 렌더링 관련 prop 변경
* `isLazy` -> `lazyMount`
* `lazyMode` (unmount, keepMounted) -> `unmountOnExit` (boolean)
* [V3 컴포넌트 보러가기 (Tabs)](/react/components/tabs/tabs)
### ChipTabs (신규)
```tsx
// [!code ++]
import { ChipTabsRoot, ChipTabsList, ChipTabsTrigger, ChipTabsContent, ChipTabsCarousel } from "seed-design/ui/chip-tabs"; // snippet 제공
```
* V3 Tabs와 동일한 인터페이스
* [V3 컴포넌트 보러가기 (ChipTabs)](/react/components/tabs/chip-tabs)
## Switch 컴포넌트 변경
```tsx
// [!code --]
import { Switch } from "@daangn/sprout-components-switch";
// [!code ++]
import { Switch } from "seed-design/ui/switch"; // snippet 제공
```
* 크기 기본값 `small` 추가 제공 (기존에는 `medium`만 제공)
* children으로 제공되던 label 대신 `label` prop 추가
* [V3 컴포넌트 보러가기 (Switch)](/react/components/switch)
## Spinner 컴포넌트 변경
```tsx
// [!code --]
import { Spinner } from "@daangn/sprout-components-spinner";
// [!code ++]
import { ProgressCircle } from "seed-design/ui/progress-circle"; // snippet 제공
```
* `Spinner`에서 `ProgressCircle`로 이름 변경
* `size` 옵션: `"24" | "40" | "inherit"`
* `tone` 옵션: `"neutral" | "brand" | "staticWhite" | "inherit"`
* 결정 상태(`value` prop 제공)와 미결정(로팅) 상태(`indeterminate` prop) 모두 지원
* [V3 컴포넌트 보러가기 (ProgressCircle)](/react/components/progress-circle)
## Snackbar 컴포넌트 변경
```tsx
// [!code --]
import { SnackBar, useSnackbarAdapter } from "@daangn/sprout-components-snackbar";
// [!code ++]
import { Snackbar, SnackbarProvider, useSnackbar } from "seed-design/ui/snackbar"; // snippet 제공
```
* `variant` 옵션: `"default" | "positive" | "critical"` 으로 변경
* `SnackbarProvider`와 `useSnackbar` hook을 통한 편리한 선언적 사용 방식 지원 (기존과 동일)
* [V3 컴포넌트 보러가기 (Snackbar)](/react/components/snackbar)
## HelpBubble 컴포넌트 변경
```tsx
// [!code --]
import { HelpBubbleAnchor, HelpBubbleTrigger } from "@daangn/sprout-components-help-bubble";
// [!code ++]
import { HelpBubbleTrigger, HelpBubbleAnchor } from "seed-design/ui/help-bubble"; // snippet 제공
```
* 두 가지 사용 방식 제공: `HelpBubbleTrigger`(클릭 시 표시) 및 `HelpBubbleAnchor`(요소에 앵커링)
* `title`, `description` prop으로 내용 구성
* `showCloseButton` prop으로 닫기 버튼 표시 여부 설정
* `strategy` (absolute, fixed) prop으로 포지셔닝 전략 선택 가능
* `gutter` prop으로 팝업 주변 여백 조절 가능
* `arrowPadding` prop으로 화살표 주변 여백 조절 가능
* `overflowPadding` prop으로 팝업 주변 여백 조절 가능
* [V3 컴포넌트 보러가기 (HelpBubble)](/react/components/help-bubble)
## FAB(Floating Action Button) 컴포넌트 변경
### FAB
```tsx
// [!code --]
import { FloatingActionButton } from "@daangn/sprout-components-floating-action-button";
// [!code ++]
import { FAB } from "seed-design/ui/fab"; // snippet 제공
import { ExtendedFAB } from "seed-design/ui/extended-fab"; // snippet 제공
```
* [V3 컴포넌트 보러가기 (FAB)](/react/components/fab)
### ExtendedFAB
```tsx
// [!code ++]
import { ExtendedFab } from "@daangn/sprout-components-fab";
// [!code ++]
import { ExtendedFAB } from "seed-design/react";
```
* `size` 옵션: `"small" | "medium"`
* `variant` 옵션: `"neutralSolid" | "layerFloating"`
* [V3 컴포넌트 보러가기 (ExtendedFAB)](/react/components/extended-fab)
## 새로운 컴포넌트
### AppScreen
Stackflow AppScreen 컴포넌트
```tsx
// [!code ++]
import { AppScreen } from "seed-design/ui/app-screen"; // snippet 제공
```
* `theme` prop: `"cupertino" | "android"`
* `transitionStyle` prop: `"slideFromRightIOS" | "fadeFromBottomAndroid"`
* `layerOffsetTop` prop: `"none" | "safeArea" | "appBar"`
* `layerOffsetBottom` prop: `"none" | "safeArea"`
* [V3 컴포넌트 보러가기 (AppScreen)](/react/components/stackflow/app-screen)
### BottomSheet, ActionSheet, ExtendedActionSheet
V3에서는 BottomSheet와 ActionSheet가 새로 추가되었어요.
```tsx
// [!code ++]
import { BottomSheet } from "seed-design/ui/bottom-sheet"; // snippet 제공
import { ActionSheet } from "seed-design/ui/action-sheet"; // snippet 제공
import { ExtendedActionSheet } from "seed-design/ui/extended-action-sheet"; // snippet 제공
```
* `BottomSheet`: 커스텀 콘텐츠를 담을 수 있는 바텀 시트
* `ActionSheet`: 액션 목록을 표시하는 바텀 시트
* `ExtendedActionSheet`: 확장된 기능을 가진 액션 시트
* 모바일 환경에 최적화된 상호작용 패턴 지원
* 접근성이 개선된 API 구조
* [V3 컴포넌트 보러가기 (BottomSheet)](/react/components/bottom-sheet)
* [V3 컴포넌트 보러가기 (ActionSheet)](/react/components/action-sheet)
* [V3 컴포넌트 보러가기 (ExtendedActionSheet)](/react/components/extended-action-sheet)
### PullToRefresh
PullToRefresh 컴포넌트
```tsx
// [!code ++]
import { PullToRefresh } from "seed-design/ui/pull-to-refresh"; // snippet 제공
```
* 모바일 앱과 같은 당겨서 새로고침 기능 제공
* [V3 컴포넌트 보러가기 (PullToRefresh)](/react/components/pull-to-refresh)
### SegmentedControl
세그먼트 컨트롤 컴포넌트
```tsx
// [!code ++]
import { SegmentedControl } from "seed-design/ui/segmented-control"; // snippet 제공
```
* 여러 옵션 중 하나를 선택할 수 있는 컴포넌트
* `size` 옵션: `"large" | "medium"`
* 커스텀 스타일과 접근성을 고려한 구조 제공
* [V3 컴포넌트 보러가기 (SegmentedControl)](/react/components/segmented-control)
### LinkContent
텍스트 링크 컴포넌트
```tsx
// [!code ++]
import { LinkContent } from "seed-design/ui/link-content"; // snippet 제공
```
* 기존 TextButton 컴포넌트의 용도를 대체하는 컴포넌트
* 다양한 색상과 크기를 지원하는 텍스트 링크 컴포넌트
* `size` 옵션: `"small" | "medium" | "large"`
* `color` 옵션: `"neutral" | "brand" | "information" | "positive" | "notice" | "critical" | "white"`
* 외부 링크, 다운로드 링크 등을 표현하는 데 유용
* [V3 컴포넌트 보러가기 (LinkContent)](/react/components/link-content)
### Skeleton
콘텐츠 로딩 상태를 표시하는 스켈레톤 컴포넌트
```tsx
// [!code ++]
import { Skeleton } from "seed-design/ui/skeleton"; // snippet 제공
```
* 다양한 반경(radius) 옵션을 제공하는 로딩 플레이스홀더
* 콘텐츠 로드 전 레이아웃을 미리 보여줘 사용자 경험 향상
* 애니메이션 효과로 로딩 중임을 시각적으로 표현
* [V3 컴포넌트 보러가기 (Skeleton)](/react/components/skeleton)
### MannerTempBadge
매너온도 뱃지 컴포넌트
```tsx
// [!code ++]
import { MannerTempBadge } from "seed-design/ui/manner-temp-badge"; // snippet 제공
```
* 당근마켓의 매너온도를 시각적으로 표현하는 뱃지
* 온도에 따른 다양한 색상 및 아이콘 변화 지원
* 매너온도 표시에 특화된 컴포넌트
* [V3 컴포넌트 보러가기 (MannerTempBadge)](/react/components/manner-temp-badge)
### Badge
```tsx
// [!code ++]
import { Badge } from "@seed-design/react";
```
* 정보를 강조하여 표시하는 뱃지 컴포넌트
* `size` 옵션: `"medium" | "large"`
* `variant` 옵션: `"weak" | "solid" | "outline"`
* `tone` 옵션: `"neutral" | "brand" | "informative" | "positive" | "critical"`
* `asChild` prop을 통해 다른 요소에 뱃지 스타일 적용 가능
* [V3 컴포넌트 보러가기 (Badge)](/react/components/badge)
### Error State
```tsx
// [!code ++]
import { ErrorState } from "seed-design/ui/error-state"; // snippet 제공
```
* 사용자에게 오류 혹은 조회 결과가 없음을 알리는 컴포넌트
* `variant` 옵션: `"basement"`
* 콘텐츠가 없거나 오류가 발생한 상황에서 사용자에게 적절한 피드백 제공
* [V3 컴포넌트 보러가기 (ErrorState)](/react/components/error-state)
### Identity Placeholder
```tsx
// [!code ++]
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder"; // snippet 제공
```
* 사용자나 항목의 신원을 표현하는 플레이스홀더 컴포넌트
* 사용자 아바타나 항목 이미지의 로딩 전 상태를 시각적으로 표현
* 콘텐츠 로드 전 일관된 사용자 인터페이스 제공
* [V3 컴포넌트 보러가기 (IdentityPlaceholder)](/react/components/identity-placeholder)
### 레이아웃 관련 컴포넌트
V3에서는 레이아웃 구성을 위한 다양한 컴포넌트를 제공해요.
```tsx
// [!code ++]
import { Box, Flex, VStack, HStack } from "@seed-design/react";
```
* `Box`: 기본 레이아웃 컨테이너
* `Flex`: Flex 레이아웃을 구성하기 위한 컴포넌트
* `VStack`: 수직 방향으로 요소를 쌓는 레이아웃
* `HStack`: 수평 방향으로 요소를 쌓는 레이아웃
* [V3 컴포넌트 보러가기 (Box)](/react/layout/box)
* [V3 컴포넌트 보러가기 (Flex)](/react/layout/flex)
* [V3 컴포넌트 보러가기 (VStack)](/react/layout/v-stack)
* [V3 컴포넌트 보러가기 (HStack)](/react/layout/h-stack)
