Web - HorizontalFormGroup (Added in 1.3)

Added in 1.3

Definition

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

Principle

하나의 타이틀 내에 각 Form별 라벨이 필요할 경우 사용합니다.

Form 계열의 컴포넌트를 넣을 수 있으며, 기획서에 해당 컴포넌트의 Property 값을 적어야합니다.

구성

적용할 수 있는 Form과 관련된 Component : TextField, EditApplyTextField, Select, Dropdown

참고

Spec

Guide

Size, Property

(color와 관련한 사항은 하단에 기술)

text

적용되어 있는 Component

Web - TextLabel 참고

labelText
- styleTheme : body2Bold
- width : 112px
- 글자수가 길어질 경우, 줄내림 처리

2줄까지 허용하며 그 이상일 경우 말 줄임표 처리
이때, TextField의 높이 값이 작은 경우 labelText의 영역이 더 높아 captionText가 밀려나 보일 수 있습니다.

captionText
- styleTheme : caption1Regular

해당 컴포넌트의 Property, Value 값 참고

Color Key

구성

내용

labelText

TextLabel

colorTheme : sysTextPrimary

captionText

TextLabel

colorTheme : sysTextPrimary

그 외 적용되어 있는 Component

해당 컴포넌트의 Color 값 참고

Properties

labelText*

Added in 1.3

표시할 라벨 텍스트 값입니다.

기획 지시사항

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

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

captionText

Added in 1.3

부가 설명을 보여주는 텍스트 값입니다.

기획 지시사항

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

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

displayType (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~Form의 유형을 결정합니다.~~

~~기획 지시사항~~

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

Type	`enum`
Default	`'textfield'`

Enum Values Description
`'textfield'`	~~개행 방법 및 유형을 선택할 수 있습니다.~~
`'editapply_textfield'`	~~편집적용형 유형입니다.~~
`'select'`	~~선택을 하는 유형입니다.~~
`'dropdown'`	~~단일 선택하는 드랍다운 유형입니다.~~

hintText (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~미리 보여주는 텍스트 값입니다.~~

~~기획 지시사항~~

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

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

defaultText(Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~지정된 기본 값을 보여줘야 할 때 사용합니다.~~

~~기획 지시사항~~

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

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

errorText (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~보여주는 오류 텍스트 값입니다.~~

~~기획 지시사항~~

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

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

textFieldTextLineType (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~displayType가 textfield 일 때, 텍스트의 개행 방법을 결정합니다.~~

~~기획 지시사항~~

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

Type	`enum`
Default	`'single'`

Enum Values Description
`'single'`	~~1줄 입력이 고려된 화면~~
`'multi'`	~~여러줄 입력이 고려된 화면~~
`'auto'`	~~개행 / 내용 길어짐 시 자동 확장~~

textFieldInputType (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~displayType가 textfield 일 때, input의 유형을 설정합니다. CSS input type을 참고합니다. (*값을 직접 입력하는 종류의 타입만 사용.)~~

~~기획 지시사항~~

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

Type	`enum`
Default	`'text'`

Enum Values Description
`'text'`	CODE `... <input type="text"/> ...`
`'email'`	CODE `... <input type="email"/> ...`
`'tel'`	CODE `... <input type="tel"/> ...`
`'search'`	CODE `... <input type="search"/> ...`
`'password'`	CODE `... <input type="password"/> ...`
`'number'`	CODE `... <input type="number"/> ...`
`'url'`	CODE `... <input type="url"/> ...`

textFieldState (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~displayType가 textfield 일 때, 상태를 결정합니다.~~

~~기획 지시사항~~

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

Type	`enum`
Default	`'normal'`

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

selectTextArray (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~displayType 값이 select 일 때, 클릭 시 뜨는 선택 리스트들 값입니다.~~

~~기획 지시사항~~

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

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

selectState (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~displayType 값이 select 일 때, 상태를 결정합니다.~~

~~기획 지시사항~~

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

Type	`enum`
Default	`'normal'`

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

dropdownTextArray (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~displayType 값이 dropdown 일 때, 클릭 시 뜨는 선택 리스트들 값입니다.~~

~~기획 지시사항~~

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

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

dropdownType (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~displayType 값이 dropdown 일 때, 콘텍스트 메뉴에 표시될 체크박스 표시 여부를 정합니다.~~

~~기획 지시사항~~

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

Type	`enum`
Default	`'one'`

Enum Values Description

Visual Ref

'one'

~~단일 선택하는 드랍다운 유형입니다.~~

'multi'

~~다중 선택하는 드랍다운 유형입니다.~~

dropdownSelectMode (Deprecated in 1.4)

Deprecated in 1.4

Added in 1.3

~~displayType 값이 dropdown 일 때, 콘텍스트 메뉴에 표시될 체크박스 표시 여부를 정합니다.~~

~~기획 지시사항~~

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

Type	`enum`
Default	`'simple'`

Enum Values Description
`'simple'`	~~기본 유형의 드롭다운~~
`'check'`	~~체크박스가 있는 유형의 드롭다운~~

labelAlignType

Added in 1.3

라벨과 Form의 정렬 방식을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'center'`

Enum Values Description		Visual Ref
`'top'`	Form 기준 상단에 정해진 높이값을 두고 정렬합니다.
`'center'`	Form 기준 중앙에 정렬합니다.

labelTopSpacing

Added in 1.3

labelAlignType : top일 때, 간격을 결정합니다. (Form 사이즈별 정해진 높이값 존재)

기획 지시사항

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

Type	`enum`
Default	`'large'`

Enum Values Description
`'small'`	Form의 사이즈가 small인 경우
`'medium'`	Form의 사이즈가 medium인 경우
`'large'`	Form의 사이즈가 large인 경우

inputForm*

Added in 1.4

사용하고자하는 form 컴포넌트를 가져와 사용합니다.

기획 지시사항

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

Type	`JSX.Element`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/06/29 : inputForm 필수 표시 추가 - 안은수
2022/06/08 : spec 내 이미지 수정 - 김혜진
2022/05/25 : 코드에만 있던 prop추가, 컴포넌트 자체 개념 변경으로 인한 쓰이지 않을 prop Deprecated 처리 - 안은수
2022/04/20 : prop 추가 (labelAlignType, labelTopSpacing) - 김혜진
2022/04/19 : Property 기술방법 변경 - 김혜지
2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진