컴포넌트
Keypad
Alphabet Keypad

Alphabet Keypad

AlphabetKeypad 컴포넌트는 알파벳이 표시된 키패드로, 주로 알파벳을 입력하는 인증 번호나 코드를 입력할 때 사용해요. 키를 자유롭게 배치할 수 있어서, 원하는 입력 방식에 맞는 키패드를 구성할 수 있어요.

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z

사용법

키 배치 커스텀하기

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

Editable Example
<AlphabetKeypad
  alphabets={[
    'z',
    'y',
    'x',
    'w',
    'v',
    'u',
    't',
    's',
    'r',
    'q',
    'p',
    'o',
    'n',
    'm',
    'l',
    'k',
    'j',
    'i',
    'h',
    'g',
    'f',
    'e',
    'd',
    'c',
    'b',
    'a',
  ]}
  onKeyClick={() => {}}
  onBackspaceClick={() => {}}
/>

인터페이스

AlphabetKeypadProps

속성기본값타입
onKeyClick*
-
(value: string) => void
`AlphabetKeypad` 컴포넌트에서 알파벳 키를 클릭했을 때 실행되는 함수예요. 클릭된 알파벳 값이 `value`로 전달돼요.
onBackspaceClick*
-
() => void
`AlphabetKeypad` 컴포넌트에서 `backspace` 키를 클릭하면 실행되는 함수예요. 기본적으로 마지막 입력 값을 삭제하는 데 사용되지만, 이 함수에 원하는 동작을 추가해 다양한 상황에 맞게 활용할 수 있어요. 예를 들어, 삭제 전에 확인 메시지를 표시하는 동작을 구현할 수 있어요.
alphabets
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
("A" | "a" | "B" | "b" | "C" | "c" | "D" | "d" | "E" | "e" | "F" | "f" | "G" | "g" | "H" | "h" | "I" | "i" | "J" | "j" | "K" | "k" | "L" | "l" | "M" | "m" | "N" | "n" | "O" | "o" | "P" | "p" | "Q" | "q" | "R" | "r" | "S" | "s" | "T" | "t" | "U" | "u" | "V" | "v" | "W" | "w" | "X" | "x" | "Y" | "y" | "Z" | "z")[]
`AlphabetKeypad` 컴포넌트에 표시할 알파벳 배열이에요. 대소문자를 구분할 수 있으며, 배열에 포함된 순서대로 버튼이 만들어져요. 배열을 전달하지 않으면 기본적으로 대문자 A-Z가 표시돼요.
ConfirmDialogFull Secure Keypad