ai-code-app/docs/components/input.md

Input

목적

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

공통 설계 원칙

• 샘플(samples)을 제외한 컴포넌트에는 API 호출이나 화면 전용 로직을 직접 넣지 않습니다.
• 컴포넌트는 최대한 멍청하게 설계하고, 직관적인 props를 받아 직관적인 UI 동작만 수행합니다.
• 기능 처리와 비즈니스 로직은 src/features 또는 해당 화면 전용 패키지 레벨에서 담당합니다.
• 공통 컴포넌트는 여러 곳에서 재사용되므로, 수정 시에는 기존 동작을 바꾸지 않는 범위에서만 보완합니다.

폴더 구조

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을 적용한 확장 샘플

사용 예시

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

<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를 대표 샘플로 사용합니다.