Web - Radio

Definition

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

Principle

Radio는 이용자들이 제공된 여러가지 옵션들 중 한 개만 선택할 수 있게 해주는 요소입니다. 라디오 버튼 선택 후 액션 버튼을 같이 제공하여, 버튼 클릭 시 선택된 내용을 반영되게 합니다.

이용자에게 처음 보여줄 때 한 개의 옵션이 미리 선택되어 있어야 합니다.

Spec

Guide

‌

Size, Property

종류

Height

text

icon

XSmall

24px

font size : body2
font weight : regular, bold

textLineType : single일 경우, 행간 singleLine 적용

그 외 body2에 적용한 행간 적용

Unselected
- fillType : line
- iconName : ic_radio_off
Selected
- fillType : line
- iconName : ic_radio_on

Color 구성

‌

Icon Color

Unselected : 시스템 컬러를 적용합니다.
Selected : 브랜드 컬러를 적용합니다.

Text

시스템 컬러를 적용합니다.

Color Key

	iconColor	textColor
unselected	default :`ui_cpnt_selcontrols_icon_default` disabled : `ui_cpnt_selcontrols_icon_disabled`	default : `ui_cpnt_selcontrols_text_default` disabled : `ui_cpnt_selcontrols_text_disabled`
selected	default :`ui_cpnt_selcontrols_icon_primary` disabled : `ui_cpnt_selcontrols_icon_on_base_hover` (`ui_cpnt_selcontrols_icon_primary` 위에 겹쳐짐)	default : `ui_cpnt_selcontrols_text_default` disabled : `ui_cpnt_selcontrols_text_disabled`

Properties

text

표시할 텍스트 값입니다.

//TODO 시각적 기준의 글자수 길이 제한

기획 지시사항

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

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

fontWeight

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

기획 지시사항

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

Type	`enum`
Default	`'regular'`

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

state

상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'disabled'`	비활성화 상태입니다.

checked

Added in 1.2

체크 여부를 결정합니다.

기획 지시사항

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

Type	`boolean`
Default	`false`

name*

Added in 1.2

form의 고유한 이름을 지정합니다.

그룹 내에서 동시에 하나의 라디오 버튼만 선택할 수 있게 하기 위한 명칭입니다.

기획 지시사항

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

Type	`string`
Default	-

value*

Added in 1.2

라디오 버튼 선택 시 콜백으로 받는 고유한 값입니다.

기획 지시사항

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

Type	`string`
Default	-

onChange*

Added in 1.2

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

기획 지시사항

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

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

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/04/01 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2021/12/28 : spec 내 text 사이즈, 컬러값 수정 - 김혜진
2021/11/18 : prop 내 status 삭제, state 추가 - 김혜진
2021/11/17 : style을 styleTheme로 수정 - 김혜진
2021/11/16 : icon에 대한 spec 추가 - 김혜진
2021/11/11 : 행간에 대한 내용 추가 - 김혜진
2021/10/26 : 텍스트 부분 TextLabel 값으로 수정 - 김혜진
2021/09/29 : Spec 내용 추가 - 김혜진
2021/09/10-11 : Property 및 Value 업데이트 - 박윤규
2021/09/08 : Principle 내용 추가 - 김혜진
2021/09/08 : Property 및 Constant, Definition 초안 작성 - 박윤규
2021/09/07 : 최초 작성 - 김혜원