Web - TextLabel

정의

TextLabel

최적화 대상

Desktop

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

displayBold

Desktop의 경우 WF 레이아웃 유형을 가진 화면의 타이틀에 주로 사용합니다.

(해당 스타일은 바로 사용하지 않고, Hero Component를 가지고 적용합니다.)

Mobile의 경우 거의 사용하고 있지 않습니다.

wizardPageTitleBold

대화형 양식 제출 레이아웃을 사용할 때만 사용합니다.

headingBold

섹션 타이틀이나 모달 타이틀에 주로 사용합니다.

leadParaBold

leadParaRegular

Desktop의 경우 WF 레이아웃 유형을 가진 화면의 설명 문구에 주로 사용합니다.

subTitleBold

섹션 내 요소 그룹의 타이틀에 주로 사용합니다.

subTitleRegular

모달의 설명 문구에 주로 사용합니다.

body1Bold

*컴포넌트 수준에서 사용됨 (버튼)

body1Regular

body2Bold

콘텐츠의 타이틀에 주로 사용합니다.

body2Regular

콘텐츠의 본문에 주로 사용합니다.

caption1Bold

caption1Regular

콘텐츠 내 설명 문구에 주로 사용합니다.

capion2Bold

caption2Regular

*컴포넌트 수준에서 사용됨 (유효성 검증 문구)

form1Regular

글 작성용 TextField인 BlogTextField에 사용합니다.

form2Regular

Textfield, EditApplyTextField, Select, Dropdown, ContextMenu에 사용합니다.

blog1Regular

게시글 본문에 사용합니다. (현재 피드형 커뮤니티만)

sysTextPrimary

시스템 컬러이며, 가장 명도가 높습니다.

타이틀에 주로 사용합니다.

ui_cpnt_textlabel_sys_primary

sysTextSecondary

시스템 컬러이며, 중간 명도를 갖습니다.

본문에 주로 사용합니다.

ui_cpnt_textlabel_sys_secondary

sysTextTertiary

시스템 컬러이며, 가장 명도가 낮습니다.

중요하지 않은 정보나, 비활성화 일 때 사용합니다.

ui_cpnt_textlabel_sys_tertiary

sysTextWhite

시스템 컬러이며, 배경이 존재하여 흰색 텍스트를 쓸 때 사용합니다.

ui_cpnt_textlabel_sys_white

sysTextBlack

시스템 컬러이며, 배경이 존재하여 검정색 텍스트를 쓸 때 사용합니다.

ui_cpnt_textlabel_sys_black

sysTextError

시스템 컬러이며, 오류 상황일 때 사용합니다.

ui_cpnt_textlabel_sys_error

sysTextWarning

시스템 컬러이며, 경고 상황일 때 사용합니다.

ui_cpnt_textlabel_sys_warning

sysTextBrandPrimary

시스템 컬러이며, publ의 브랜드 컬러를 나타낼 때 사용합니다.

ui_cpnt_textlabel_sys_brandprimary

sysTextBrandSeconVariant

시스템 컬러이며, 성공이나 공개 같은 문구에 사용합니다.

ui_cpnt_textlabel_sys_brandseconvariant

usrTextBrandPrimary

유저 컬러이며, 브랜드 컬러 중 메인 컬러를 사용합니다.

셀러의 브랜드 컬러에 맞춰 변경 가능합니다.

ui_cpnt_textlabel_usr_brandprimary

usrTextBrandSeconVariant

유저 컬러이며, 브랜드 컬러 중 서브 컬러를 사용합니다.

셀러의 브랜드 컬러에 맞춰 변경 가능합니다.

ui_cpnt_textlabel_usr_brandseconvariant

usrTextBrandOnPrimary

바탕색이 유저의 브랜드 컬러일 경우 그 위에 올라가는 텍스트로 사용합니다.

ui_cpnt_textlabel_usr_brandonprimary

tooltip base

• radius : 4px

• max-width : 240px

tooltip icon

Web - Icon 참고

• size : 16

• fillType : fill

• iconName : ic_question

tooltip text

https://publ.atlassian.net/wiki/pages/resumedraft.action?draftId=2801192579 참고

• styleTheme : caption2Regular

• singleLineMode : use

requirement icon

Web - Icon 참고

• size : 16

• fillType : line

• iconName : ic_requirement

bulletPoint

해당 텍스트와 같은 사이즈로 가운뎃점(글리프) 적용

Icon

• colorKey : ui_cpnt_icon_sys_grey_03

ui_cpnt_button_tooltip_base

Web - TextLabel 참고

• colorOverride : ui_cpnt_textlabel_button_tooltip

Icon

• colorKey : ui_cpnt_icon_sys_error_01

number | string | object | Array<string | object> | undefined | null

-

number | string | object | Array<string | object> | undefined | null

-

enum

'right_bottom'

'left_top'

'?' 기준 왼쪽 상단에 위치합니다.

'left_bottom'

'?' 기준 왼쪽 하단에 위치합니다.

'right_top'

'?' 기준 오른쪽 상단에 위치합니다.

'right_bottom'

'?' 기준 오른쪽 하단에 위치합니다.

enum

'ui_cpnt_icon_sys_grey_03'

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

'left'

'left'

'center'

'right'

enum

'body2Bold'

'displayBold'

'wizardPageTitleBold'

'headingBold'

'leadParaBold'

'leadParaRegular'

'subTitleBold'

'subTitleRegular'

'body1Bold'

'body1Regular'

'body2Bold'

'body2Regular'

'caption1Bold'

'caption1Regular'

'capion2Bold'

'caption2Regular'

'form1Regular'

'form1Bold'

'form2Regular'

'form2Bold'

'blog1Regular'

enum

-

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

'sysTextPrimary'

'sysTextPrimary'

'sysTextSecondary'

'sysTextTertiary'

'sysTextWhite'

'sysTextBlack'

'sysTextError'

'sysTextWarning'

'sysTextBrandPrimary'

'sysTextBrandSeconVariant'

'usrTextBrandPrimary'

'usrTextBrandSeconVariant'

'usrTextBrandOnPrimary'

enum

'none'

'none'

텍스트 사용 규칙 참조

*텍스트 스타일(사이즈)에 기본적으로 부여된 행간을 사용합니다.

'use'

텍스트 사용 규칙 참조

*텍스트가 1줄로만 사용할 시 부여합니다.

enum

'none'

'none'

말줄임표 사용하지 않음

'use'

말줄임표 사용

number

-

enum

'none'

'none'

'use'

string

-

enum

-

'bold'

텍스트 사용 규칙의 ‘bold’를 따릅니다.

'regular'

텍스트 사용 규칙의 ‘regular’를 따릅니다.

enum

'none'

'none'

사용하지 않습니다.

'line_through'

취소선

enum

'none'

'none'

사용하지 않습니다.

'use'

사용합니다.

enum

'none'

'none'

사용하지 않습니다.

'use'

사용합니다.

enum

'keep_all'

'normal'

기본 줄 바꿈 규칙을 사용합니다.

'break_all'

오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)

'keep_all'

한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 normal과 동일합니다.

'break_word'

실제 overflow-wrap 속성에 상관하지 않고, word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과를 냅니다. (사용을 지양하길 권장합니다.)

string

-

김혜진, 박윤규

• 2023/07/13 : styleTheme에 form1Bold, form2Bold value 추가 / 툴팁 디자인 스펙 변경 - 김혜진

• 2023/02/21 : tooltipIconColorKey prop 추가 - 김혜진

• 2023/01/27 : letterSpacing prop 추가 - 안은수

• 2023/01/18 : sysTextBlack 추가 - 김혜원

• 2023/01/17 : wizardPageTitle 추가 - 김혜진

• 2022/11/29 : sysTextWarning prop 추가 - 김혜진

• 2022/06/08 : wordBreak prop 추가 - 안은수

• 2022/05/25 : 가운뎃점 영역 정렬에 대한 spec 추가 - 김혜진

• 2022/05/06 : requirementMode, bulletPointMode, textDecorationType prop 추가 - 김혜진

• 2022/04/21 : tooltipPosition Prop 추가 - 김혜진

• 2022/04/14 : tooltip spec 추가 - 김혜진

• 2022/04/04 : Property 기술방법 변경 - 안은수

• 2022/04/04 : customFontSize, customFontWeight, userSelectMode prop 추가 - 김혜진

• 2022/03/11 : tooltipText 추가 - 김혜진

• 2022/03/10 : underline deprecate - 김혜진

• 2022/02/25 : 개발 코드 배포여부 추가 - 안은수

• 2021/11/26 : leadParaBold value 추가 - 김혜진

• 2021/11/24 : color에 대한 prop 추가 - 김혜진

• 2021/11/18 : ellipsisMode, lineLimit에 대한 prop 추가 - 김혜진

• 2021/11/17 : style을 styleTheme로 수정 - 김혜진

• 2021/11/15 : 아이콘에 대한 prop값 삭제 - 김혜진

• 2021/11/11 : Spec 삭제, colorTheme의 컬러 키값 수정 - 김혜진

• 2021/10/27 : colorTheme 값 추가 - 김혜진

• 2021/10/26 : form 텍스트 유형 추가 - 김혜진

• 2021/10/25 : colorTheme 값 추가 - 김혜진

• 2021/10/22 : underline에 대한 prop 추가 - 김혜진

• 2021/09/24 : Principle, Property, Value 업데이트 - 김혜진

• 2021/09/16 : Principle 내용 추가 - 김혜진

• 2021/09/10-11 : Property 및 Value 업데이트 - 박윤규

• 2021/09/08 : Principle 내용 추가 - 김혜진

• 2021/09/08 : Property 및 Constant, Definition 초안 작성 - 박윤규