Web - BasicFormGroup (Added in 1.3)

Added in 1.3

Definition

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

Principle

한 섹션에 들어가는 타이틀, 상세 내용, 캡션과 함께 다양한 Form 형태의 컴포넌트들이 조합된 형태입니다.

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

구성

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

참고

Spec

Guide

세트는 간격 정도만 참고로 봐주세요.

Size, Property

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

text

IconButton

적용되어 있는 Component

Web - TextLabel 참고

titleText
- styleTheme : Property 참고
descText
- styleTheme : caption1Regular
captionText
- styleTheme : caption1Regular
annotationText
- styleTheme : caption2Bold

Web - IconButton 참고

iconName : (제작 예정 / 임의로 ic_unavailable 적용)
iconSize : 24
shapeType : round

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

Color Key

구성	내용
titleText	TextLabel colorTheme : sysTextPrimary
descText	TextLabel colorTheme : sysTextSecondary
captionText	TextLabel colorTheme : sysTextPrimary
annotationText	TextLabel colorTheme : sysTextTertiary
IconButton	baseColorKey ui_cpnt_button_fill_base_default iconColorKey 비활성화 : ui_cpnt_button_icon_disabled 활성화 : ui_cpnt_button_icon_primary
그 외 적용되어 있는 Component	해당 컴포넌트의 Color 값 참고

Properties

titleStyleTheme

Added in 1.3

타이틀의 텍스트 스타일을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'subTitleBold'`

Enum Values Description
`'subTitleBold'`
`'leadParaBold'`	Added in 1.9
`'headingBold'`

titleText

Added in 1.3

표시할 타이틀의 텍스트 값입니다.

기획 지시사항

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

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

titleRequirementMode

Added in 2.2

타이틀 텍스트 필수(*) 표시 사용 여부를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않습니다.
`'use'`	사용합니다.

multilingualBtnMode

Added in 2.2

다국어 버튼 사용 여부를 결정합니다.

Type	`enum`
Default	`'none'`

Enum Values Description

'none'

사용하지 않습니다.

'use'

사용합니다.

타이틀 영역 우측에 다국어 버튼 노출

multilingualBtnState

Added in 2.2

다국어 버튼의 상태를 결정합니다.

Type	`enum`
Default	`'normal'`

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

annotationText

Added in 2.2

표시할 타이틀의 텍스트 값입니다.

기획 지시사항

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

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

descText

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	-

inputForm

Added in 1.4

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

form간의 간격은 spacingD(16px)를 권장합니다.

기획 지시사항

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

Type	`JSX.Element`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2025/06/24 : 다국어 관련 prop 추가 - 김혜진
2024/06/26 : titleRequirementMode 추가 - 김혜진
2023/01/19 : titleStyleTheme 내 leadParaBold 추가, 가이드 수정(title, desc 사이 간격) - 김혜진
2022/06/08 : spec 내 이미지 수정 - 김혜진
2022/05/25 : Principle, Spec 수정 - 김혜진
2022/05/24 : inputForm prop추가 - 안은수
2022/04/18 : Property 기술방법 변경 - 김혜진
2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진