input-box

글자 입력 컴포넌트

Props

Prop	Type	Default	Description
type	'text' | 'password'	'text'	input 타입
name	string	-	input 고유 이름
value	string	-	input 입력 값
placeholder	string	-	입력란 텍스트
maxLength	number	-	최대 입력 가능 길이
subMessage	string	-	하단 보조 메세지
className	string	-	커스텀 스타일
isRequired	boolean	-	필수값 여부
onChange	function	-	input 입력 값 변경 핸들러
validate	function	-	유효성 검사 함수
formatter	function	-	포맷 적용 함수
handleEnter	function	-	엔터키 입력 핸들러

Usage

import { InputBox } from '@/src/component/ui'

function InputBoxDemo() {
  return (
    // ID
    <InputBox
      name={'id'}
      placeholder="6자리 이상 12자리 이하"
      value={id}
      maxLength={12}
      onChange={handleChange}
      validate={checkValidId}
    />
    
    // 전화번호
    <InputBox
      name={'phoneNumber'}
      placeholder="010 - 0000 - 0000"
      value={phoneNumber}
      onChange={handleChange}
      validate={checkValidPhoneNumber}
      formatter={formatPhoneNumber}
    />
  )
}