본 컴포넌트는 Next.js 환경에서 공통으로 사용할 수 있는 Input 컴포넌트를 제공하기 위해 설계되었습니다.
현재 Input은 클라이언트 컴포넌트에서의 사용을 기준으로 하며, 이벤트 핸들러(onChange 등)를 포함한 일반적인 입력 인터랙션을 지원한다.
| 파일명 | 유형 | 주요 역할 |
|---|---|---|
| input.tsx | Client | <input />를 렌더링하는 공통 Input 컴포넌트 이벤트(onChange 등) 사용 forwardRef를 통한 ref 전달 지원 |
useUnit 속성을 통해 별도의 HTML 구성 없이 입력창 우측에 고정된 단위(예: 원, %, kg)를 표시할 수 있다.autoComplete="off"를 기본값으로 설정하여 불필요한 자동완성 팝업을 방지하며, 포커스 시 ring 효과를 통해 시각적 피드백을 강화하였다.relative div 래퍼를 포함하고 있다.모든 Input 컴포넌트는 아래 타입을 기반으로 하며, 기본적인 HTML input 속성을 모두 지원합니다.\
| 속성명 | 타입 | 기본값 | 설명 |
|---|---|---|---|
useUnit |
string |
- |
입력창 우측 내부에 표시할 단위 텍스트 (예: "원", "km") |
className |
string |
- |
input 요소 자체에 적용될 스타일 확장 |
wrapperClassName |
string |
- |
input과 단위를 감싸는 최외곽 div의 스타일 확장 |
p-4의 여백과 rounded-md(Medium) 곡률을 가진다.shadow-card가 적용되어 있으며, 기본 테두리는 gray-100 이다.primary-blue로 변경되며, 부드러운 ring 효과가 추가된다.useUnit 존재 시 텍스트가 단위와 겹치지 않도록 우측 패딩(pr-12)이 자동으로 조절된다.