Number Keypad

NumberKeypad 컴포넌트는 숫자가 표시된 키패드로, 주로 숫자로 된 비밀번호를 입력할 때 사용해요. 키를 자유롭게 배치할 수 있어서, 원하는 입력 방식에 맞는 키패드를 구성할 수 있어요.

사용법

numbers 속성을 사용해서 키패드에 표시할 숫자를 자유롭게 정하고 배치할 수 있어요. 이 속성에 원하는 숫자를 배열로 전달하면, 해당 값들이 설정한 순서대로 키패드에 표시돼요.

Editable Example

<NumberKeypad numbers={[1, 3, 5, 7, 9, 2, 4, 6, 8, 0]} onKeyClick={() => {}} onBackspaceClick={() => {}} />

보안이 필요한 입력값이 있을 때는 secure 속성을 사용하세요. 이 기능은 사용자가 클릭한 숫자와 함께, 상하좌우에 있는 숫자를 제외한 무작위 두 개의 숫자가 함께 눌린 것처럼 처리해요. 즉, 사용자가 어떤 숫자를 입력했는지 알아보기 어려워 보안이 강화돼요.

또, 앱이 백그라운드로 이동될 때 앱의 화면을 가리고 Android 기기에서는 스크린 캡쳐를 막아줘요.

Editable Example

<NumberKeypad secure={true} onKeyClick={() => {}} onBackspaceClick={() => {}} />

💡

사용자의 주민등록번호 뒷자리를 입력받을 때는 보안을 위해 secure 속성을 반드시 true로 설정해주세요.

속성	기본값	타입
onKeyClick*	`-`	`(value: string) => void` `NumberKeypad` 컴포넌트의 숫자 키를 클릭하면 실행되는 함수예요.
onBackspaceClick*	`-`	`() => void` `NumberKeypad` 컴포넌트에서 `backspace` 키를 클릭하면 실행되는 함수예요. 기본적으로 마지막 입력 값을 삭제하는 데 사용되지만, 이 함수에 원하는 동작을 추가해 다양한 상황에 맞게 활용할 수 있어요. 예를 들어, 삭제 전에 확인 메시지를 표시하는 동작을 구현할 수 있어요.
numbers	`[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]`	`(0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9)[]` `NumberKeypad` 컴포넌트에 표시할 숫자들의 배열이에요. 배열에 포함된 순서대로 버튼이 만들어져요.
secure	`false`	`false`\|`true` 이 값이 `true`라면 보안 키패드로 동작해요. 클릭한 숫자 키의 상하좌우에 있는 키를 제외한 무작위의 숫자 키 2개가 눌린 것처럼 처리돼요.