Web - PageTitleTextGroup (Added in 1.3)

Added in 1.3.0

Definition

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

Principle

레이아웃 유형 중 WF 제외한 나머지 유형들에서 ContentsContainer 안에 전체 타이틀 역할로 들어가는 요소입니다.

구성

Spec

Guide

상세 문구 관련 가이드

Size, Property

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

구성	내용
height	40px
text	Web - TextLabel 참고 titleText styleTheme : headingBold
iBtn (displayType : edit_btn)	Web - IconButton 참고 fillType : fill baseSize : medium iconSize : 20 shapeType : rectangle iconName : ic_edit iconFillType : fill
기간 설정 버튼 (displayType : compound_btn)	Web - ContentSheet Panel 참고 height : 40px shapeType : round radius : 12 paddingTop : none paddingBottom : none Web - Icon 참고 size : 24 iconName : ic_booking Web - TextLabel 참고 styleTheme : body2Bold

Color 구성

Color Key

구성	내용
titleText	TextLabel colorTheme : sysTextPrimary
IconButton	iconColorKey 기본 : `ui_cpnt_button_icon_primary` 비활성 : `ui_cpnt_button_icon_disabled` baseColorKey : `ui_cpnt_button_fill_base_transparent`
base color	`ui_cpnt_textgroup_base_area`
compound_btn base	ContentSheet backgroundColorTheme : base3 height : 40px shapeType : round radius : 12되는지..? paddingTop : none paddingBottom : none
compound_btn icon	Icon colorKey : ui_cpnt_icon_sys_grey_01
compound_btn title	TextLabel colorTheme : sysTextPrimary
compound_btn content	TextLabel colorTheme : sysTextSecondary

Properties

titleText*

Added in 1.3

표시할 텍스트 값입니다.

기획 지시사항

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

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

tooltipText

Added in 1.9

해당 타이틀 대한 설명 문구를 표시할 툴팁 텍스트 값입니다.

기획 지시사항

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

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

displayType

Added in 1.3

TitleTextGroups의 유형을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	타이틀만 있는 기본 형태
`'sales_reports'`	~~수익에서 보여지는 형태~~ *현재 사용하지 않음	Deprecated
`'edit_btn'`	버튼의 유형 (edit)
`'compound_btn'`	title text와 content text가 화합되어 있는 형태의 버튼이 보여지는 형태	Added in 1.9

btn1State

Added in 1.3

displayType가 'edit_btn'인 경우 icon button의 상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

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

compoundBtnIconName

Added in 1.9

displayType이 "compound_btn"일 경우 사용 될 아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.

기획 지시사항

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

Type	`enum`
Default	-

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

compoundBtnIconFillType

Added in 1.9

displayType이 "compound_btn"일 경우 버튼에 사용 될 아이콘의 형태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'line'`

Enum Values Description
`'line'`	line 형태의 아이콘을 사용합니다.
`'fill'`	fill 형태의 아이콘을 사용합니다.

compoundBtnTitleText

Added in 1.9

displayType이 "compound_btn"일 경우 버튼에 표시할 타이틀 역할의 텍스트 값 입니다.

기획 지시사항

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

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

compoundBtnContentText

Added in 1.9

displayType이 "compound_btn"일 경우 버튼에 표시할 타이틀 역할의 텍스트 값 입니다.

기획 지시사항

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

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

onClickBtn1

Added in 1.3

displayType가 'edit_btn'인 경우 해당 button이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`() => void`
Default	-

onClickCompoundBtn

Added in 1.9

displayType가 'compound_btn'인 경우 해당 button이 클릭이 된 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`() => void`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2023/03/02 : tooltipText prop 추가 - 안은수
2023/02/28 : compound_btn 관련 prop들 추가(compoundBtnIconName, compoundBtnIconFillType, compoundBtnTitleText, compoundBtnContentText) - 안은수
2023/02/23 : date_btn을 compound_btn으로 수정 - 김혜진
2023/02/20 : tooltipText prop 추가 - 김혜진
2023/02/17 : displayType에 date_btn value 추가 - 김혜진
2022/08/30 : Spec 내 상세 문구 간격 가이드 추가 - 김혜진
2022/06/28 : titleText 필수 표시 추가 - 안은수
2022/06/08 : spec 내 이미지 수정 - 김혜진
2022/04/29 : 코드에만 있던 prop추가, 코드 배포 여부 추가 - 안은수
2022/04/19 : Property 기술방법 변경 - 김혜지
2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진