Félix Malfait
5d438bb70c
## Summary - **New Getting Started section** with quickstart guide and restructured navigation - **Halftone-style illustrations** for User Guide and Developer introduction cards using a Canvas 2D filter script - **Removed hero images** (`image:` frontmatter + `<Frame><img>` blocks) from all user-guide article pages - **Cleaned up translations** (13 languages): removed hero images and updated introduction cards to use halftone style - **Cleaned up twenty-ui pages**: removed outdated hero images from component docs - **Deleted orphaned images**: `table.png`, `kanban.png` - **Developer page**: fixed duplicate icon, switched to 3-column layout ## Test plan - [ ] Verify docs site builds without errors - [ ] Check User Guide introduction page renders halftone card images in both light and dark mode - [ ] Check Developer introduction page renders 3-column layout with distinct icons - [ ] Confirm article pages no longer show hero images at the top - [ ] Spot-check a few translated pages to ensure hero images are removed 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@twenty.com>
439 lines
20 KiB
Plaintext
439 lines
20 KiB
Plaintext
---
|
|
title: 버튼들
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="헤더" />
|
|
</Frame>
|
|
|
|
앱 전반에 걸쳐 사용되는 버튼 및 버튼 그룹의 목록.
|
|
|
|
## 버튼
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { Button } from "@/ui/input/button/components/Button";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="제목"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
size="medium"
|
|
position="standalone"
|
|
accent="default"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 |
|
|
| --------- | --------------------- | -------------------------------------------------------------------------------------------- |
|
|
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 클래스 이름 |
|
|
| 아이콘 | `React.ComponentType` | 버튼 내에 표시되는 선택적 아이콘 구성 요소 |
|
|
| 제목 | 문자열 | 버튼의 텍스트 내용 |
|
|
| fullWidth | 부울 | 버튼이 컨테이너의 전체 너비를 차지할 것인지 정의합니다 |
|
|
| 변형 | 문자열 | 버튼의 시각적 스타일 변형. 옵션에는 `primary`, `secondary` 및 `tertiary`가 포함됩니다 |
|
|
| 크기 | 문자열 | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium` |
|
|
| 위치 | 문자열 | 버튼의 위치가 형제 요소와의 관계에서 어디에 존재하는지 나타냅니다. 옵션에는: `standalone`, `left`, `right`, 및 `middle`가 포함됩니다 |
|
|
| 강조 | 문자열 | 버튼의 강조 색상. 옵션에는: `default`, `blue`, 및 `danger`가 포함됩니다 |
|
|
| 곧 | 부울 | 버튼이 "곧 출시"로 표시되는지 여부를 나타냅니다 (예: 곧 출시할 기능) |
|
|
| 비활성 | 부울 | 버튼이 비활성 상태인지 여부를 지정합니다 |
|
|
| 포커스 | 부울 | 버튼에 포커스가 있는지 나타냅니다 |
|
|
| onClick | function | 사용자가 버튼을 클릭할 때 트리거되는 콜백 함수 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 버튼 그룹
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { Button } from "@/ui/input/button/components/Button";
|
|
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<ButtonGroup variant="primary" size="large" accent="blue" className>
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="버튼 1"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
size="medium"
|
|
position="standalone"
|
|
accent="blue"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="버튼 2"
|
|
fullWidth={false}
|
|
variant="secondary"
|
|
size="medium"
|
|
position="left"
|
|
accent="blue"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="버튼 3"
|
|
fullWidth={false}
|
|
variant="tertiary"
|
|
size="medium"
|
|
position="right"
|
|
accent="blue"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
</ButtonGroup>
|
|
);
|
|
};
|
|
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 |
|
|
| -------- | --------- | --------------------------------------------------------------------- |
|
|
| 변형 | 문자열 | 그룹 내 버튼의 시각적 스타일 변형. 옵션에는 `primary`, `secondary`, 및 `tertiary`가 포함됩니다 |
|
|
| 크기 | 문자열 | 그룹 내 버튼의 크기. 두 가지 옵션이 있습니다: `medium` 및 `small` |
|
|
| 강조 | 문자열 | 그룹 내 버튼의 강조 색상. 옵션에는 `default`, `blue` 및 `danger`가 포함됩니다 |
|
|
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 클래스 이름 |
|
|
| children | ReactNode | 그룹 내 각 버튼을 나타내는 React 요소의 배열 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 떠 있는 버튼
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingButton
|
|
className
|
|
Icon={IconSearch}
|
|
title="제목"
|
|
size="medium"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={true}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 |
|
|
| ------ | --------------------- | -------------------------------------------------------------------------------------------- |
|
|
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
|
|
| 아이콘 | `React.ComponentType` | 버튼 내에 표시되는 선택적 아이콘 구성 요소 |
|
|
| 제목 | 문자열 | 버튼의 텍스트 내용 |
|
|
| 크기 | 문자열 | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium` |
|
|
| 위치 | 문자열 | 버튼의 위치가 형제 요소와의 관계에서 어디에 존재하는지 나타냅니다. 옵션에는: `standalone`, `left`, `middle`, 및 `right`가 포함됩니다 |
|
|
| 그림자 적용 | 부울 | 버튼에 그림자를 적용할지 여부를 결정합니다 |
|
|
| 블러 적용 | 부울 | 버튼에 블러 효과를 적용할지 여부를 결정합니다 |
|
|
| 비활성 | 부울 | 버튼이 비활성 상태인지 여부를 결정합니다 |
|
|
| 포커스 | 부울 | 버튼에 포커스가 있는지 나타냅니다 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 떠 있는 버튼 그룹
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
|
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
|
|
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingButtonGroup size="small">
|
|
<FloatingButton
|
|
className
|
|
Icon={IconClipboardText}
|
|
title
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={true}
|
|
/>
|
|
<FloatingButton
|
|
className
|
|
Icon={IconCheckbox}
|
|
title
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
/>
|
|
</FloatingButtonGroup>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 | 기본값 |
|
|
| -------- | --------- | ----------------------------------------- | --- |
|
|
| 크기 | 문자열 | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium` | 작은 |
|
|
| children | ReactNode | 그룹 내 각 버튼을 나타내는 React 요소의 배열 | |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 떠 있는 아이콘 버튼
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingIconButton
|
|
className
|
|
Icon={IconSearch}
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("click")}
|
|
isActive={true}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 |
|
|
| ---------- | --------------------- | -------------------------------------------------------------------------------------------- |
|
|
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
|
|
| 아이콘 | `React.ComponentType` | 버튼 내에 표시되는 선택적 아이콘 구성 요소 |
|
|
| 크기 | 문자열 | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium` |
|
|
| 위치 | 문자열 | 버튼의 위치가 형제 요소와의 관계에서 어디에 존재하는지 나타냅니다. 옵션에는: `standalone`, `left`, `right`, 및 `middle`가 포함됩니다 |
|
|
| 그림자 적용 | 부울 | 버튼에 그림자를 적용할지 여부를 결정합니다 |
|
|
| 블러 적용 | 부울 | 버튼에 블러 효과를 적용할지 여부를 결정합니다 |
|
|
| 비활성 | 부울 | 버튼이 비활성 상태인지 여부를 결정합니다 |
|
|
| 포커스 | 부울 | 버튼에 포커스가 있는지 나타냅니다 |
|
|
| onClick | function | 사용자가 버튼을 클릭할 때 트리거되는 콜백 함수 |
|
|
| 활성 상태인지 여부 | 부울 | 버튼이 활성 상태인지 여부를 결정합니다 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 떠 있는 아이콘 버튼 그룹
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
|
|
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
const iconButtons = [
|
|
{
|
|
Icon: IconClipboardText,
|
|
onClick: () => console.log("Button 1 clicked"),
|
|
isActive: true,
|
|
},
|
|
{
|
|
Icon: IconCheckbox,
|
|
onClick: () => console.log("Button 2 clicked"),
|
|
isActive: true,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<FloatingIconButtonGroup
|
|
className
|
|
size="small"
|
|
iconButtons={iconButtons} />
|
|
);
|
|
};
|
|
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 |
|
|
| ------ | --- | --------------------------------------------------------------------------------------------------------- |
|
|
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
|
|
| 크기 | 문자열 | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium` |
|
|
| 아이콘 버튼 | 배열 | 그룹 내 각 아이콘 버튼을 나타내는 객체의 배열. 각 객체에는 버튼에 표시할 아이콘 컴포넌트, 사용자가 버튼을 클릭할 때 호출할 함수, 그리고 버튼이 활성 상태인지 여부를 포함해야 합니다. |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 라이트 버튼
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { LightButton } from "@/ui/input/button/components/LightButton";
|
|
|
|
export const MyComponent = () => {
|
|
return <LightButton
|
|
className
|
|
icon={null}
|
|
title="제목"
|
|
accent="secondary"
|
|
active={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={()=>console.log('click')}
|
|
/>;
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 |
|
|
| ------- | ----------------- | ------------------------------------------------ |
|
|
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
|
|
| 아이콘 | `React.ReactNode` | 버튼에 표시할 아이콘 |
|
|
| 제목 | 문자열 | 버튼의 텍스트 내용 |
|
|
| 강조 | 문자열 | 버튼의 강조 색상. 옵션에는: `secondary` 및 `tertiary`가 포함됩니다 |
|
|
| 활성 | 부울 | 버튼이 활성 상태인지 여부를 결정합니다 |
|
|
| 비활성 | 부울 | 버튼이 비활성 상태인지 여부를 결정합니다 |
|
|
| 포커스 | 부울 | 버튼에 포커스가 있는지 나타냅니다 |
|
|
| onClick | 기능 | 사용자가 버튼을 클릭할 때 트리거되는 콜백 함수 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 라이트 아이콘 버튼
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<LightIconButton
|
|
className
|
|
testId="test1"
|
|
Icon={IconSearch}
|
|
title="제목"
|
|
size="small"
|
|
accent="secondary"
|
|
active={true}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 |
|
|
| ------- | --------------------- | ------------------------------------------------ |
|
|
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
|
|
| 테스트ID | 문자열 | 버튼의 테스트 식별자 |
|
|
| 아이콘 | `React.ComponentType` | 버튼 내에 표시되는 선택적 아이콘 구성 요소 |
|
|
| 제목 | 문자열 | 버튼의 텍스트 내용 |
|
|
| 크기 | 문자열 | 버튼의 크기. 두 가지 옵션이 있습니다: `small` 및 `medium` |
|
|
| 강조 | 문자열 | 버튼의 강조 색상. 옵션에는: `secondary` 및 `tertiary`가 포함됩니다 |
|
|
| 활성 | 부울 | 버튼이 활성 상태인지 여부를 결정합니다 |
|
|
| 비활성 | 부울 | 버튼이 비활성 상태인지 여부를 결정합니다 |
|
|
| 포커스 | 부울 | 버튼에 포커스가 있는지 나타냅니다 |
|
|
| onClick | 기능 | 사용자가 버튼을 클릭할 때 트리거되는 콜백 함수 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 메인 버튼
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { MainButton } from "@/ui/input/button/components/MainButton";
|
|
import { IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<MainButton
|
|
title="체크박스"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
soon={false}
|
|
Icon={IconCheckbox}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 |
|
|
| ----------------- | -------------------------------- | --------------------------------------------------- |
|
|
| 제목 | 문자열 | 버튼의 텍스트 내용 |
|
|
| 전체 폭 | 부울 | 버튼이 컨테이너의 전체 너비를 차지할 것인지 정의합니다 |
|
|
| 변형 | 문자열 | 버튼의 시각적 스타일 변형. 옵션에는 `primary` 및 `secondary`가 포함됩니다 |
|
|
| 곧 | 부울 | 버튼이 "곧 출시"로 표시되는지 여부를 나타냅니다 (예: 곧 출시할 기능) |
|
|
| 아이콘 | `React.ComponentType` | 버튼 내에 표시되는 선택적 아이콘 구성 요소 |
|
|
| React `button` 속성 | `React.ComponentProps<'button'>` | 모든 표준 HTML 버튼 속성을 지원합니다 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 둥근 아이콘 버튼
|
|
|
|
<Tabs>
|
|
<Tab title="사용법">
|
|
```jsx
|
|
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<RoundedIconButton
|
|
Icon={IconSearch}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="프로퍼티">
|
|
| 프로퍼티 | 유형 | 설명 |
|
|
| ----------------- | ----------------------------------------------- | -- |
|
|
| 아이콘 | `React.ComponentType` | |
|
|
| React `button` 속성 | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
</Tab>
|
|
</Tabs>
|