[작업중] Web - PriceTextLabel

정의

PriceTextLabel

최적화 대상

Desktop

Mobile

기획 배포

예정

디자인 가이드 배포

예정

개발 코드 배포

예정

displayBold

wizardPageTitleBold

headingBold

leadParaBold

leadParaRegular

subTitleBold

subTitleRegular

body1Bold

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

body1Regular

body2Bold

body2Regular

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

caption1Bold

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

caption1Regular

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

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

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

https://publ.atlassian.net/wiki/pages/resumedraft.action?draftId=3796008961&draftShareId=dec3d4d1-9346-439a-9a75-c3d47700f785 참고

• colorOverride : ui_cpnt_textlabel_button_tooltip

Icon

• colorKey : ui_cpnt_icon_sys_error_01

object

{ amount: number | string; currency: CurrencyCode; }

CurrencyCode = { KRW = 'KRW', USD = 'USD'}

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

'right'

'left'

'right'

enum

'body2Regular'

'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줄로만 사용할 시 부여합니다.

string

-

enum

-

'bold'

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

'regular'

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

enum

'none'

'none'

사용하지 않습니다.

'line_through'

취소선

string

-

'use' | 'none'

'none'

'use' | 'none'

'none'

'suffix' | 'prefix'

'suffix'

곽은선, 김혜진

• 2025/06/20 : 최초 문서 작성 - 곽은선