Web - Dropdown (Added in 1.3)

Added in 1.3

정의	Dropdown
최적화 대상	Desktop Mobile
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포	완료

드롭다운은 선택 시 ContextMenu가 뜨며 사용자가 목록에서 단일 또는 다중 선택을 할 수 있습니다.

형태는 Select와 동일하나 선택 시 기능들의 메뉴(ContextMenu)가 뜨고 이 메뉴 형태가 커스텀이 된 것이 Select와의 차이점입니다.

Dropdown은 Select와 다르게 submitsubmit이 함께 있지 않으며 자체적으로 값을 누르는 순간 바뀔 수 있습니다.

드롭다운 내렸을때 (Select와 생김새 같음 + ContextMenu, ContextMenuItem)

드롭다운 다중 선택

선택된 아이템까지 드롭다운 영역으로 포함시킬지 확인 필요

선택된 아이템 : Chip 참고

선택 시 뜨는 메뉴는 ContextMenu 참고, 다중 선택 시 Chip 참고

구성	내용
Height	Large (48px)	Medium (40px)	Small (32px)
Width	432px *icon_only일 땐 fit-content	188px *icon_only일 땐 fit-content	188px *icon_only일 땐 fit-content
radius	14px	12px	10px
text	Web - TextLabel 참고 styleTheme : form2Regular singleLineMode : use	Web - TextLabel 참고 styleTheme : form2Regular singleLineMode : use	Web - TextLabel 참고 styleTheme : form2Regular singleLineMode : use
좌측 icon (displayType이 icon_only, icon_text일 때)	size : 24	size : 24	size : 20
우측 icon (ContextMenu 펼치기 / 접기)	size : 16 fillType : line iconName : ic_arrow_down, ic_arrow_up	size : 16 fillType : line iconName : ic_arrow_down, ic_arrow_up	size : 16 fillType : line iconName : ic_arrow_down, ic_arrow_up
ContextMenu	Web - ContextMenu Web - ContextMenuItem 참고	Web - ContextMenu Web - ContextMenuItem 참고	Web - ContextMenu Web - ContextMenuItem 참고
Chip (다중 선택 시)	Web - Chip 참고 displayType : removable	Web - Chip 참고 displayType : removable	N/A
group title text Added 2.1	TextLabel colorTheme : sysTextSecondary	TextLabel colorTheme : sysTextSecondary	TextLabel colorTheme : sysTextSecondary
divider Added 2.1	Divider `ui_cpnt_divider`	Divider `ui_cpnt_divider`	Divider `ui_cpnt_divider`

‌

드롭다운에는 다양한 상태들이 존재합니다. 요소들의 컬러 변화로 상태들을 표현합니다.

	iconColor	textColor	arrowIconColor	borderColor	baseColor
normal	`ui_cpnt_dropdown_display_icon_normal`	TextLabel colorTheme : sysTextPrimary	`ui_cpnt_dropdown_icon_01`	`ui_cpnt_dropdown_border_normal`	`ui_cpnt_dropdown_base_normal`
focus	`ui_cpnt_dropdown_display_icon_normal`	TextLabel colorTheme : sysTextPrimary	`ui_cpnt_dropdown_icon_01`	`ui_cpnt_dropdown_border_focus`	`ui_cpnt_dropdown_base_normal`
selected	`ui_cpnt_dropdown_display_icon_normal`	TextLabel colorTheme : sysTextPrimary	`ui_cpnt_dropdown_icon_01`	`ui_cpnt_dropdown_border_normal`	`ui_cpnt_dropdown_base_normal`
disabled	`ui_cpnt_dropdown_display_icon_disabled`	TextLabel colorTheme : sysTextTertiary	`ui_cpnt_dropdown_icon_02`	`ui_cpnt_dropdown_border_disabled`	`ui_cpnt_dropdown_base_disabled`
read_only	`ui_cpnt_dropdown_display_icon_disabled`	TextLabel colorTheme : sysTextTertiary	`ui_cpnt_dropdown_icon_02`	`ui_cpnt_dropdown_border_disabled`	`ui_cpnt_dropdown_base_disabled`
hover	-	-	-	-	`ui_cpnt_dropdown_base_hover`
pressed	-	-	-	-	`ui_cpnt_dropdown_base_pressed`

colorTheme : dark

	iconColor	textColor	arrowIconColor	borderColor	baseColor
normal	`ui_cpnt_dropdown_display_icon_darktheme_enabled`	`ui_cpnt_dropdown_text_darktheme_hint`	`ui_cpnt_dropdown_icon_darktheme_default`	`ui_cpnt_dropdown_border_darktheme_normal`	`ui_cpnt_dropdown_base_darktheme_normal`
focus	`ui_cpnt_dropdown_display_icon_darktheme_enabled`	`ui_cpnt_dropdown_text_darktheme_enabled`	`ui_cpnt_dropdown_icon_darktheme_default`	`ui_cpnt_dropdown_border_darktheme_focus`	`ui_cpnt_dropdown_base_darktheme_normal`
selected	`ui_cpnt_dropdown_display_icon_darktheme_enabled`	`ui_cpnt_dropdown_text_darktheme_enabled`	`ui_cpnt_dropdown_icon_darktheme_default`	`ui_cpnt_dropdown_border_darktheme_normal`	`ui_cpnt_dropdown_base_darktheme_normal`
disabled	`ui_cpnt_dropdown_display_icon_darktheme_disabled`	`ui_cpnt_dropdown_text_darktheme_disabled`	`ui_cpnt_dropdown_icon_darktheme_disabled`	`ui_cpnt_dropdown_border_darktheme_disabled`	`ui_cpnt_dropdown_base_darktheme_disabled`
read_only	`ui_cpnt_dropdown_display_icon_darktheme_disabled`	`ui_cpnt_dropdown_text_darktheme_readonly`	`ui_cpnt_dropdown_icon_darktheme_disabled`	`ui_cpnt_dropdown_border_darktheme_disabled`	`ui_cpnt_dropdown_base_darktheme_disabled`
hover	-	-	-	-	`ui_cpnt_dropdown_base_hover_darktheme`
pressed	-	-	-	-	`ui_cpnt_dropdown_base_pressed_darktheme`

colorTheme : white

	iconColor	textColor	arrowIconColor	borderColor	baseColor
normal	`ui_cpnt_dropdown_display_icon_white_enabled`	`ui_cpnt_dropdown_text_white_hint`	`ui_cpnt_dropdown_icon_white_default`	`ui_cpnt_dropdown_border_white_normal`	`ui_cpnt_dropdown_base_white_normal`
focus	`ui_cpnt_dropdown_display_icon_white_enabled`	`ui_cpnt_dropdown_text_white_enabled`	`ui_cpnt_dropdown_icon_white_default`	`ui_cpnt_dropdown_border_white_focus`	`ui_cpnt_dropdown_base_white_normal`
selected	`ui_cpnt_dropdown_display_icon_white_enabled`	`ui_cpnt_dropdown_text_white_enabled`	`ui_cpnt_dropdown_icon_white_default`	`ui_cpnt_dropdown_border_white_normal`	`ui_cpnt_dropdown_base_white_normal`
disabled	`ui_cpnt_dropdown_display_icon_white_disabled`	`ui_cpnt_dropdown_text_white_disabled`	`ui_cpnt_dropdown_icon_02`	`ui_cpnt_dropdown_border_white_disabled`	`ui_cpnt_dropdown_base_white_disabled`
read_only	`ui_cpnt_dropdown_display_icon_white_disabled`	`ui_cpnt_dropdown_text_white_readonly`	`ui_cpnt_dropdown_icon_02`	`ui_cpnt_dropdown_border_white_disabled`	`ui_cpnt_dropdown_base_white_disabled`
hover	-	-	-	-	`ui_cpnt_dropdown_base_hover_white`
pressed	-	-	-	-	`ui_cpnt_dropdown_base_pressed_white`

Added in 1.3

크기를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'large'`

Enum Values Description
`'large'`	CODE `{ height : 48px; }`
`'medium'`	Added in 2.1 CODE `{ height : 40px; }`
`'small'`	CODE `{ height : 32px; }`

Added in 2.1

외관 유형을 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'text_only'`

Enum Values Description
`'text_only'`	텍스트만 보여짐
`'icon_only'`	아이콘만 보여짐
`'icon_text'`	아이콘과 텍스트가 조합된 형태

Added in 1.3

선택하기 전 기본으로 표시할 값입니다.
*displayType이 icon_only일 경우 사용하지 않음

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

Added in 1.3

지정된 기본 값을 보여줘야 할 때 사용합니다.
*displayType이 icon_only 또는 icon_text일 경우, iconName도 기술 할 것

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type

CODE

{
  text?: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
  iconName?: enum;
  iconFillType?: 'fill' | 'line';
  state?: 'normal' | 'disabled';
}

Default

-

기획서 기술 예시

text :
iconName : ic_
iconFillType : line / fill
state(특정 값만 적용되는 상태) : normal / disabled

Enum Values Description
iconName	Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

Added in 1.4

드롭다운의 값입니다. (예외 상황이 있을 때 원래 값이나 다른 값을 설정하기위해 주로 쓰입니다.)

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

CODE

{
  text?: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
  iconName?: enum;
  iconFillType?: 'fill' | 'line';
  state?: 'normal' | 'disabled';
}

Default

-

기획서 기술 예시

text :
iconName : ic_
iconFillType : line / fill
state(특정 값만 적용되는 상태) : normal / disabled

Enum Values Description
iconName	Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

옵션으로 표시될 값들의 배열입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type

CODE

{
  text?: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
  iconName?: enum;
  iconFillType?: 'fill' | 'line';
  state?: 'normal' | 'disabled';
}[]

Default

-

기획서 기술 예시

text :
iconName : ic_
iconFillType : line / fill
state(특정 값만 적용되는 상태) : normal / disabled

Enum Values Description
iconName	Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

Added in 1.3

상태를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	사이 간격 없음
`'read_only'`	읽기 전용입니다. (입력창 수정 불가)
`'disabled'`	비활성화 상태입니다.

Added in 1.3

단일 또는 다중 선택을 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'single'`

Enum Values Description
`'single'`	단일 선택
`'multi'`	다중 선택

Added in 1.3

미리 결정되어 있는 컬러 테마를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description

'none'

사용하지 않습니다.

'dark'

*톤 설정과 상관없이 어두운 배경에 올라갈 때 사용합니다.

(spec 기술 참고)

'white'

Added in 1.4

*톤 설정과 상관없이 흰색으로 보입니다.

(spec 기술 참고)

Added in 1.4

입력한 개수만큼 보이고 나머지는 스크롤이 됩니다.

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	-

Added 2.2

내용을 그루핑하여 사용하고 싶을 시, 그룹의 제목과 옵션으로 표시될 값들의 배열입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	CODE `{ key: string; values: DropdownValueOption['value'][]; title?: number \| string \| object \| Array<string \| object> \| undefined \| null; }[]`
Default	-
기획서 기술 예시	title : group의 title 명칭 지정

Added in 1.4

width를 반응형으로 적용합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	기본으로 부여되어있는 width를 사용합니다.
`'use'`	width를 반응형으로 적용합니다.

Added in 1.4

직접 지정한 Dropdown의 사이즈를 결정합니다. (단위도 함께 적어주어야 합니다.)

*반드시 디자인 검수후에 사용가능합니다.
*해당 Property 사용시 ContextMenu의 customWidth에도 자동으로 적용됩니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`string`
Default	-

Added in 2.1

Editor에서만 사용하는 Prop입니다. 다른 곳에서는 사용하지 마세요.

텍스트의 굵기를 의미합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'regular'`

Enum Values Description
`'bold'`	텍스트 사용 규칙의 ‘bold’를 따릅니다.
`'regular'`	텍스트 사용 규칙의 ‘regular’를 따릅니다.

Added in 1.3

데이터가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	CODE `(option: { text?: number \| string \| object \| Array<string \| object> \| undefined \| null; value: string \| number \| null \| boolean; iconName?: enum; state?: 'normal' \| 'disabled'; }) => void;`
Default	-

소유자 / 관리자

김혜진, 박윤규

변경 이력

2023/12/06 : groupInfoArray 관련 spec 및 Props & value 추가 - 김혜원
2023/07/13 : fontWeight prop 추가 - 김혜진
2023/06/26 : value(defaultValue, value, valueArray) 관련 prop에 기획서 작성법 및 iconFillType에 대한 내용 추가 - 김혜진
2023/06/08 : prop 섹션에 icon 내용 추가 (hintText, defaultValue, value, valueArray) - 안은수
2023/06/07 : icon에 대한 옵션 관련 내용 추가 - 김혜진
2023/03/24 : hintText prop 타입 변경 - 안은수
2022/07/08 : customWidth prop에 추가 문구 작성 - 김혜진
2022/07/01 : customWidth prop 추가 - 안은수
2022/06/29 : valueArray 필수 표시 추가, value prop 추가 - 안은수
2022/05/31 : Spec 수정 (컬러, radius) - 김혜진
2022/05/26 : 멀티선택할 시 형태 변경 / colorTheme 중 white 일 때 read only, disabled 컬러키 추가 - 김혜진
2022/05/25 : contextMenuSelectMode prop 제거 - 안은수
2022/05/24 : maxHeightItemNumber, responsiveMode prop추가 - 안은수
2022/05/06 : colorTheme value 추가(white), spec 내용 추가, contextMenuSelectMode prop 추가 - 김혜진
2022/04/29 : onChange prop 추가 - 안은수
2022/04/28 : selectMode prop 삭제 / selectionMode prop 추가 - 김혜진
2022/04/19 : Property 기술방법 변경 - 김혜지
2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진

Definition

Principle

Spec

Guide

groupInfoArray 사용 시

Size, Property

Color 구성

Color Key

Properties

size

displayType

hintText

defaultValue

value

valueArray*

state

selectionMode

colorTheme

maxHeightItemNumber

groupInfoArray

responsiveMode

customWidth

fontWeight

onChange

문서 작성 정보