Dropdowns
드롭다운은 서브뷰에서 액션을 그룹화할 때 사용합니다. 메뉴를 숨기거나 여러 액션을 하나로 묶어야 할 때 유용합니다.
Figma 컴포넌트: Base components/Dropdowns
Dropdown Trigger
드롭다운을 여는 트리거 버튼입니다. Button / Icon / Avatar 세 가지 타입을 지원합니다.
Default
Open (focus ring)
open 상태에서는 브랜드 컬러의 포커스 링이 나타납니다.
Dropdown Menu
Avatar 헤더 + 메뉴
가장 일반적인 계정 메뉴 형태입니다. 헤더에는 아바타, 이름, 이메일이 표시되고 우측 하단에 온라인 상태 인디케이터가 자리합니다.
기본 메뉴
단축키 chip
단축키는 보더가 있는 작은 칩 형태로 우측 정렬됩니다.
체크박스 메뉴
상태
Select
폼에서 사용하는 선택 입력 컴포넌트입니다. 라벨에 옵션 * 표시(필수)와 헬프 아이콘을 포함할 수 있고, 값 옆에 보조 텍스트(@핸들)가 인라인으로 표시됩니다.
기본 Select
사이즈
Leading 변형
Search & Tags
상태
Select Menu Items
기본 아이템
체크 표시는 브랜드 그린 컬러로 우측에 정렬됩니다. 보조 텍스트는 라벨 옆에 인라인으로 표시됩니다.
아이콘 / 아바타 / Dot
상태
Props
Dropdown
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | button | icon | avatar | button | 트리거 버튼 타입 |
label | string | Options | 버튼 트리거의 레이블 텍스트 |
open | boolean | false | 메뉴 열림 여부 (포커스 링 표시) |
avatarText | string | - | 아바타 트리거의 이니셜 텍스트 |
DropdownItem
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | - | 왼쪽 아이콘 (16×16) |
shortcut | string | - | 오른쪽 단축키 chip 텍스트 |
disabled | boolean | false | 비활성화 여부 |
checked | boolean | - | 체크박스 상태 |
state | default | hover | disabled | default | 상태 (문서용 강제값) |
DropdownHeader
| Prop | Type | Default | Description |
|---|---|---|---|
avatar | boolean | false | 아바타 헤더 사용 |
name | string | - | 이름 |
email | string | - | 이메일/핸들 |
online | boolean | true | 온라인 인디케이터 표시 |
Select
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | 라벨 텍스트 |
required | boolean | false | 필수 표시 (`*`) |
placeholder | string | - | 플레이스홀더 |
value | string | - | 선택된 값 |
supportingText | string | - | 값 옆에 인라인으로 표시되는 보조 텍스트 |
hint | string | - | 입력 아래 힌트 텍스트 |
size | sm | md | md | 사이즈 |
state | default | focused | disabled | open | default | 상태 |
leadingIcon | ReactNode | - | 왼쪽 아이콘 |
leadingAvatar | boolean | false | 왼쪽 아바타 |
leadingDot | string | - | 왼쪽 점 색상 |
search | boolean | false | 검색 모드 |
tags | string[] | [] | 태그 배열 |
SelectItem
| Prop | Type | Default | Description |
|---|---|---|---|
selected | boolean | false | 선택 여부 (브랜드 그린 체크) |
disabled | boolean | false | 비활성화 |
state | default | hover | disabled | default | 상태 (문서용 강제값) |
size | sm | md | md | 사이즈 |
icon | ReactNode | - | 왼쪽 아이콘 |
avatar | string | - | 아바타 이니셜 |
dot | string | - | 점 색상 |
supportingText | string | - | 라벨 옆 인라인 보조 텍스트 |
Figma Variants
Dropdown
| Property | Values |
|---|---|
| Type | Button Icon Avatar |
| Open | True False |
Dropdown List Item
| Property | Values |
|---|---|
| Icon | True False |
| Checkbox | True False |
| State | Default Hover/active Disabled |
| Divider | True False |
Select
| Property | Values |
|---|---|
| Size | sm md |
| Type | Default Icon leading Avatar leading Dot leading Search Tags |
| State | Default Placeholder Focused Disabled Open |
Select Menu Item
| Property | Values |
|---|---|
| Size | sm md |
| Selected | True False |
| Type | Default Icon leading Avatar leading Dot leading |
| State | Default Hover Disabled |