[작업중] Web - PriceTextField

Added in 2.2 (예정)

PriceTextField는 Web - TextLabel와 Web - Dropdown (Added in 1.3) 을 기반으로
제품 내에서 ‘가격’이 표시되는 형태를 통일하기 위해 사용합니다.
PriceTextField는 기본적으로 coreModule과 연동하여 가격을 표시합니다.

Definition

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

Principle

사용자가 가격을 입력, 조회, 수정할 수 있는 요소를 의미합니다.

PriceTextField는 제품 내에서 가격에 관련한 입력, 조회, 수정을 공통적으로 사용하기 위해 설계되었습니다.
따라서 기본적으로 PriceTextField가 포함하고 있는 사항 외 추가로 업데이트 될 내용은 가격 표시의 일관성 및 범용성의 관점에서 고려해 주세요.

Spec

Guide

기본 (단일 통화) 보완 예정

복수 통화 보완 예정

Size, Property

	Large	rlarge
Height	48px	48px
Width	432px	100vw
radius	14px	14px
text	[input] font size : form2 font weight : Bold textAlign : Right textLineType : single [dropDown] styleTheme : caption1Bold textAlign : Center	Large 값과 동일
error text	font size : caption2 font weight : regular 행간 singleLine 적용
drop down Icon	Icon 참고 baseSize : small iconSize : 16 iconName : ic_arrow_down fillType : line
delete Icon	문구 전체 삭제 버튼 fillType : fill baseSize : small iconSize : 20 shapeType : rectangle iconName : ic_delete iconFillType : fill

‌

Color 구성

Color Key *작성 중

PriceTextField는 다양한 상태들이 존재합니다. 요소들의 컬러 변화로 상태들을 표현합니다.

	priceColor	dotColor	currencyColor	borderColor	priceBaseColor	currencyBaseColor	iconColor	errorMessageColor
normal : placeholder (hintText)가 노출된 상태	`ui_cpnt_textfield_text_hint`	`ui_cpnt_alertdialog_icon_success`	`ui_cpnt_textfield_text_typed`	`ui_cpnt_textfield_border_normal`	`ui_cpnt_textfield_base_normal`	`ui_cpnt_textfield_base_normal`	`ui_cpnt_textfield_icon_03`	-
focus	`ui_cpnt_textfield_text_hint`		`ui_cpnt_textfield_text_typed`	`ui_cpnt_textfield_border_focus`	`ui_cpnt_textfield_base_normal`	`ui_cpnt_textfield_base_normal`		-
typed : 값이 입력된 상태	`ui_cpnt_textfield_text_typed`		`ui_cpnt_textfield_text_typed`	`ui_cpnt_textfield_border_normal`	`ui_cpnt_textfield_base_normal`	`ui_cpnt_textfield_base_normal`		-
disabled	`ui_cpnt_textfield_text_disabled`		`ui_cpnt_textfield_text_disabled`	`ui_cpnt_textfield_border_disabled`	`ui_cpnt_textfield_base_disabled`	`ui_cpnt_textfield_base_disabled`		-
read_only	`ui_cpnt_textfield_text_disabled`		`ui_cpnt_textfield_text_disabled`	`ui_cpnt_textfield_border_disabled`	`ui_cpnt_textfield_base_disabled`	`ui_cpnt_textfield_base_disabled`		-
error	입력값 : `ui_cpnt_textfield_text_typed` 에러문구 : `ui_cpnt_textfield_text_error`		`ui_cpnt_textfield_text_typed`	`ui_cpnt_textfield_border_error`	`ui_cpnt_textfield_base_normal`	`ui_cpnt_textfield_base_normal`		`ui_cpnt_textfield_text_error`
hover	-		-	-	`ui_cpnt_textfield_base_hover`	`ui_cpnt_textfield_base_hover`		-
pressed	-		-	-	`ui_cpnt_textfield_base_pressed`	`ui_cpnt_textfield_base_pressed`		-

기본 사항

아래 사항들은 기본적으로 PDS에 포함된 property이고, 일관성을 위해 기획자가 변경할 수 없습니다.

textAlign

Default	`'right'`	inputField의 텍스트는 항상 오른쪽에 위치합니다.

Validation

PriceTextField는 자체적으로 유효성 검사를 포함합니다.

채널에 따라 예외적으로 유효성 검사를 진행할 경우, ENUM을 선택하여 변경할 수 있습니다.
이 외의 경우에는 일관성을 위해 변경을 자제해 주세요.

최소 {{minPrice}} {{currency}} 이상 입력해 주세요.
최대 {{maxPrice}} {{currency}} 까지 입력할 수 있습니다.
{{priceUnit}} {{currency}} 단위로 입력해 주세요.

validationPoint

유효성 검증에 대한 시점은 항상 onChange 시점에 동작하는 것이 기본값이며, 이 외 prop은 제공하지 않습니다.

Default	`'onChange'`	입력때마다 바로 반영

preventBlankMode

가격을 입력하는 특성상 모든 공백을 막는 행위가 기본값이며, 이 외 prop은 제공하지 않습니다.

Default	`'all'`	모든 공백을 막으며, onChange 시점에 적용됩니다.

enterSubmitMode

Enter키를 통해 제출할 수 없으며, 이 외 prop은 제공하지 않습니다.

Default	`'none'`	엔터키를 통해 제출할 수 없습니다.

inputType

PriceTextField는 항상 숫자로 입력하며, 이 외 prop은 제공하지 않습니다.

Default	`'number'`	숫자만 입력할 수 있습니다.

inputMode

inputType의 number를 대응하기 위해 가상 키보드 형태로 제어할 수 있습니다.

Default	`'decimal'`	소수점 입력이 가능한 숫자 키보드를 표시합니다.

textLineType

항상 1줄 입력이 고려된 화면으로 제공하며, 이 외 prop은 제공하지 않습니다.

Default	`'single'`	1줄 입력이 고려된 화면

Properties

responsiveMode

화면에 맞춰 늘릴 것인지 결정합니다. (반응형)

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'use'`	사용함

hintText

placeholder에 표시할 텍스트 값입니다.

기획 지시사항

‘가격을 입력해 주세요’가 기본으로 적용되어 있으며, 다른 표현이 필요할 경우 변경할 수 있습니다.
기획서 상 작성 방법 : 텍스트만 기술

Type	`number \| string \| Array<string \| object> \| undefined \| null`
Default	가격을 입력해 주세요. `str_err_7171`

defaultAmount

지정된 기본 값을 보여줘야 할 때 사용합니다.
*defaultAmount를 지우면, hintText가 보여집니다.

기획 지시사항

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

Type	`number`
Default	-

validation

PriceTextField는 기본적으로 가격 validation을 갖고 있습니다.
다만, 채널에 따라 입력할 수 있는 최소/최대 금액과 단위가 다를 경우에 한하여 validation을 변경할 수 있습니다.

기획 지시사항

반드시 https://publ.atlassian.net/wiki/x/SAAK4 에 따라, Validation을 생성할 수 있도록 합니다.
기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`{ [key: string]: any }`
Default	최소 {{minPrice}} {{currency}} 이상 입력해 주세요. 최대 {{maxPrice}} {{currency}} 까지 입력할 수 있습니다. {{priceUnit}} {{currency}} 단위로 입력해 주세요.

size

크기를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'large'`

Enum Values Description
`'large'`
`'rlarge'`	화면 영역에 꽉 차게

state

InputField의 상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

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

dropdownState

Dropdown의 상태는 채널 정보에 따라 자동으로 설정되며, 기획자가 임의로 변경할 수 없습니다.

일반 채널에서 dropdownState는 read_only 로 제공됩니다.
복수 채널에서 dropdownState는 normal 로 제공됩니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

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

name*

form의 고유한 이름을 지정합니다.

기획 지시사항

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

Type	`Path<IFormValues>` (React-hook-form참고)
Default	-

customWidth

TextField의 너비를 직접 결정합니다. (단위도 함께 적어주어야 합니다.)

*반드시 디자인 검수 후에 사용가능합니다.

기획 지시사항

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

Type	`string`
Default	-

deleteBtnMode

TextField가 활성화 됐을때 우측에 뜨는 delete 버튼의 나타남 유무를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'use'`

Enum Values Description
`'none'`	가격 삭제 아이콘이 표시되지 않음
`'use'`	가격 삭제 아이콘이 표시됨

useRequirementMode

필수로 가격 입력이 되어야 함을 설정합니다.

기획 지시사항

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

Type	`enum`
Default	`'use'`

Enum Values Description
`'none'`	유효성 검사를 적용하지 않습니다.
`'use'`	유효성 검사를 진행합니다.

onBlur

포커스를 잃는 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`(e: React.FocusEvent<HTMLInputElement> \| React.FocusEvent<HTMLTextAreaElement>) => void`
Default	-

onChange

데이터가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`(e: React.ChangeEvent<HTMLInputElement> \| React.ChangeEvent<HTMLTextAreaElement>) => void`
Default	-

onFocus

포커스를 받은 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`(e: React.FocusEvent<HTMLInputElement> \| React.FocusEvent<HTMLTextAreaElement>) => void`
Default	-

onKeyDown

키보드를 누르는 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`(e: React.KeyboardEvent<HTMLInputElement> \| React.KeyboardEvent<HTMLTextAreaElement>) => void`
Default	-

onKeyUp

키보드를 눌렀다가 떼는 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`(e: React.KeyboardEvent<HTMLInputElement> \| React.KeyboardEvent<HTMLTextAreaElement>) => void`
Default	-

onTarget

타겟이 된 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`() => void`
Default	-

onCurrencyChange

Dropdown의 통화가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`(selectedCurrency: string) => void`
Default	-

onValueChange

통화, 환율이 적용된 가격이 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`(selectedCurrency: string; baseCurrencyValue: number; calculatedValue: number; displayValue: string;) => void`
Default	-

문서 작성 정보

소유자 / 관리자	곽은선, 김혜진
변경 이력	2025/06/20 : 최초 문서 작성 - 곽은선