74 lines
2.1 KiB
Markdown
74 lines
2.1 KiB
Markdown
# Input
|
|
|
|
## 목적
|
|
|
|
Ant Design `Input`을 기반으로 하되, 타이핑 중에는 내부 상태만 변경하고 `Enter` 또는 `blur` 시점에만 외부 `onChange`를 호출하는 입력 컴포넌트입니다.
|
|
|
|
## 공통 설계 원칙
|
|
|
|
- 샘플(`samples`)을 제외한 컴포넌트에는 API 호출이나 화면 전용 로직을 직접 넣지 않습니다.
|
|
- 컴포넌트는 최대한 멍청하게 설계하고, 직관적인 props를 받아 직관적인 UI 동작만 수행합니다.
|
|
- 기능 처리와 비즈니스 로직은 `src/features` 또는 해당 화면 전용 패키지 레벨에서 담당합니다.
|
|
- 공통 컴포넌트는 여러 곳에서 재사용되므로, 수정 시에는 기존 동작을 바꾸지 않는 범위에서만 보완합니다.
|
|
|
|
## 폴더 구조
|
|
|
|
```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`를 대표 샘플로 사용합니다.
|