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."}
);
};
```
### 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."}
