# Input

## 목적

Ant Design `Input`을 기반으로 하되, 타이핑 중에는 내부 상태만 변경하고 `Enter` 또는 `blur` 시점에만 외부 `onChange`를 호출하는 입력 컴포넌트입니다.

## 폴더 구조

```text
src/components/inputs/primitives/input
├─ plugins/
│  ├─ index.ts
│  └─ input.plugin.ts
├─ samples/
│  ├─ Sample.tsx
│  └─ ValidInputSample.tsx
├─ types/
│  ├─ index.ts
│  └─ input.ts
├─ InputUI.tsx
└─ index.ts
```

## 동작 방식

- 입력 중에는 내부 `draftValue`만 변경
- `Enter` 시 외부 `onChange` 호출
- `blur` 시 외부 `onChange` 호출
- 검증이나 추가 기능은 `commitPlugins`로 주입
- 나머지 props는 Ant Design `InputProps`를 그대로 전달

## 샘플 규칙

- `samples/Sample.tsx`: 기본형 `InputUI`
- `samples/ValidInputSample.tsx`: validation plugin을 적용한 확장 샘플

## 사용 예시

```tsx
<InputUI
  value={value}
  placeholder="입력 후 Enter"
  onChange={(event) => {
    setValue(event.target.value);
  }}
/>
```

```tsx
<InputUI
  value={value}
  placeholder="3글자 이상만 허용"
  commitPlugins={[
    createValidInputPlugin(({ nextValue }) => nextValue.trim().length >= 3),
  ]}
  onChange={(event) => {
    setValue(event.target.value);
  }}
/>
```

## 참고

- 외부에서 제어하는 값은 확정 시점에만 변경됩니다.
- `InputUI.tsx` 하나만 두고 기능은 plugin으로 확장하는 구조입니다.
- API 게시판이나 문서 예시는 `samples/Sample.tsx`를 대표 샘플로 사용합니다.