Web - Select

Definition

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

Principle

양식을 보내기위해 시스템 디폴트가 뜨는 옵션들 중에 무언가를 select하게 하는 행위를 말합니다.

현재 Select 선택 시 표시되는 화면은 OS 기본 형태에 맞춰 띄웁니다.

Select는 submit이 함께 있는 Form의 구성요소 중 하나이며, radio와 같은 개념입니다.

Spec

Guide

Size

	Large	Medium	Small
Height	48px	40px	32px
Width	432px	188px	188px
radius	14px	12px	10px
text	font size : form2 font weight : regular textLineType : single일 경우, 행간 singleLine 적용 그 외 form2에 적용한 행간 적용	font size : form2 font weight : regular textLineType : single일 경우, 행간 singleLine 적용 그 외 form2에 적용한 행간 적용	font size : form2 font weight : regular textLineType : single일 경우, 행간 singleLine 적용 그 외 form2에 적용한 행간 적용
icon	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

‌

Color 구성

‌

Color Key

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

	textColor	iconColor	borderColor	baseColor
normal	`ui_cpnt_select_text_hint`	`ui_cpnt_select_icon_01`	`ui_cpnt_select_border_normal`	`ui_cpnt_select_base_normal`
focus	`ui_cpnt_select_text_selected`	`ui_cpnt_select_icon_01`	`ui_cpnt_select_border_focus`	`ui_cpnt_select_base_normal`
selected	`ui_cpnt_select_text_selected`	`ui_cpnt_select_icon_01`	`ui_cpnt_select_border_normal`	`ui_cpnt_select_base_normal`
disabled	`ui_cpnt_select_text_disabled`	`ui_cpnt_select_icon_02`	`ui_cpnt_select_border_disabled`	`ui_cpnt_select_base_disabled`
read_only	`ui_cpnt_select_text_readonly`	`ui_cpnt_select_icon_02`	`ui_cpnt_select_border_disabled`	`ui_cpnt_select_base_disabled`
hover	-	-	-	`ui_cpnt_select_base_hover`
pressed	-	-	-	`ui_cpnt_select_base_pressed`

colorTheme : dark

	textColor	iconColor	borderColor	baseColor
normal	`ui_cpnt_select_text_darktheme_hint`	`ui_cpnt_select_icon_darktheme_default`	`ui_cpnt_select_border_darktheme_normal`	`ui_cpnt_select_base_darktheme_normal`
focus	`ui_cpnt_select_text_darktheme_enabled`	`ui_cpnt_select_icon_darktheme_default`	`ui_cpnt_select_border_darktheme_focus`	`ui_cpnt_select_base_darktheme_normal`
selected	`ui_cpnt_select_text_darktheme_enabled`	`ui_cpnt_select_icon_darktheme_default`	`ui_cpnt_select_border_darktheme_normal`	`ui_cpnt_select_base_darktheme_normal`
disabled	`ui_cpnt_select_text_darktheme_disabled`	`ui_cpnt_select_icon_darktheme_disabled`	`ui_cpnt_select_border_darktheme_disabled`	`ui_cpnt_select_base_darktheme_disabled`
read_only	`ui_cpnt_select_text_darktheme_readonly`	`ui_cpnt_select_icon_darktheme_default`	`ui_cpnt_select_border_darktheme_disabled`	`ui_cpnt_select_base_darktheme_disabled`
hover	-	-	-	`ui_cpnt_select_base_hover_darktheme`
pressed	-	-	-	`ui_cpnt_select_base_pressed_darktheme`

Properties

responsiveMode

Added in 1.2

화면에 맞춰 늘릴 것인지 결정합니다. (반응형)

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'use'`	사용함

hintText

선택하기 전 기본으로 표시할 값입니다.

기획 지시사항

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

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

defaultText (Deprecated in 1.2)

Deprecated in 1.2

~~선택하기 전 기본으로 표시할 값입니다.~~

~~기획 지시사항~~

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

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

defaultValue

Added in 1.2

지정된 기본 값을 보여줘야 할 때 사용합니다.
*hintText와 함께 사용할 수 없습니다.

기획 지시사항

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

Type	CODE `{ text: string; value: string \| number; }`
Default	-

value

Added in 1.4

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

기획 지시사항

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

Type	CODE `{ text: number \| string \| object \| Array<string \| object> \| undefined \| null; value: string \| number \| null \| boolean; }`
Default	-

valueArray*

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

기획 지시사항

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

Type	CODE `{ text: string; value: string \| number; }[]`
Default	-

size

크기를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'large'`

Enum Values Description
`'large'`	CODE `{ height : 48px; }`
`'medium'`	CODE `{ height : 40px; }`
`'small'`	CODE `{ height : 32px; }`
`'rlarge'`	화면 영역에 꽉 차게 (높이는 large동일) *responsiveMode의 추가로 인해 추후 삭제 고려

state

상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

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

colorTheme

컬러의 프리셋 테마입니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description

'none'

기본값을 따릅니다.

'dark'

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

(spec 기술 참고)

customWidth

Added in 1.4

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

*반드시 디자인 검수후에 사용가능합니다.

기획 지시사항

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

Type	`string`
Default	-

onChange

Added in 1.2

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

기획 지시사항

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

Type	`(e: React.ChangeEvent<HTMLSelectElement>) => void`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/07/01 : customWidth prop 추가 - 안은수
2022/06/29 : value prop 추가 - 안은수
2022/05/31 : spec 수정(color, radius) - 김혜진
2022/04/01 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2021/12/28 : spec 내 텍스트 사이즈, 컬러 값 수정 - 김혜진
2021/12/22 : colorTheme prop 추가, 자세한 컬러값 spec에 기술 - 김혜진
2021/11/17 : style을 styleTheme로 수정 - 김혜진
2021/11/16 : icon에 대한 spec 내용 추가 - 김혜진
2021/11/11 : 행간에 대한 내용 추가 - 김혜진
2021/11/09 : MobileWeb 통합, size value 추가(medium, rlarge) - 김혜진
2021/11/01 : prop 추가(defaultText) - 김혜진
2021/10/26 : 텍스트 부분 TextLabel 값으로 수정, 기본 width 값 spec 추가 - 김혜진
2021/10/25 : hintText prop 추가 - 김혜진
2021/09/29 : Spec 내용 추가 - 김혜진
2021/09/08 : Property 및 Constant, Definition 초안 작성 - 박윤규
2021/09/07 : 최초 작성 - 김혜원