# AutocompleteSearchInput 컴포넌트

자동완성 드롭다운 방식의 엔티티 검색 입력 컴포넌트입니다.

## 특징

- 타이핑하면 즉시 드롭다운 표시
- 빈 값일 때 전체 목록 조회
- 추가 정보 표시 가능
- X 버튼으로 선택 초기화
- 외부 클릭 시 자동 닫힘
- **필드 자동 매핑**: 선택한 항목의 값을 화면의 다른 입력 필드에 자동으로 채움

## 사용 예시

### 기본 사용

```tsx
<AutocompleteSearchInputComponent
  tableName="customer_mng"
  displayField="customer_name"
  valueField="customer_code"
  searchFields={["customer_name", "customer_code"]}
  placeholder="거래처명 입력"
  showAdditionalInfo
  additionalFields={["customer_code", "address"]}
  value={selectedCode}
  onChange={(code, fullData) => {
    console.log("선택됨:", code, fullData);
  }}
/>
```

### 필드 자동 매핑 사용

```tsx
<AutocompleteSearchInputComponent
  config={{
    tableName: "customer_mng",
    displayField: "customer_name",
    valueField: "customer_code",
    searchFields: ["customer_name", "customer_code"],
    placeholder: "거래처 검색",
    enableFieldMapping: true,
    fieldMappings: [
      {
        sourceField: "customer_name",  // 테이블의 컬럼명
        targetField: "customer_name_input",  // 화면 input의 id
        label: "거래처명"
      },
      {
        sourceField: "address",
        targetField: "address_input",
        label: "주소"
      },
      {
        sourceField: "phone",
        targetField: "phone_input",
        label: "전화번호"
      }
    ]
  }}
  onChange={(code, fullData) => {
    console.log("선택됨:", code, fullData);
    // 필드 매핑은 자동으로 실행됩니다
  }}
/>

<!-- 화면의 다른 곳에 있는 입력 필드들 -->
<input id="customer_name_input" placeholder="거래처명" />
<input id="address_input" placeholder="주소" />
<input id="phone_input" placeholder="전화번호" />
```

## 설정 옵션

### 기본 설정

- `tableName`: 검색할 테이블명
- `displayField`: 표시할 필드
- `valueField`: 값으로 사용할 필드
- `searchFields`: 검색 대상 필드들
- `placeholder`: 플레이스홀더
- `showAdditionalInfo`: 추가 정보 표시 여부
- `additionalFields`: 추가로 표시할 필드들

### 값 필드 저장 위치 설정 (고급)

- `valueFieldStorage`: 값 필드 저장 위치 지정
  - `targetTable`: 저장할 테이블명 (미설정 시 화면 연결 테이블)
  - `targetColumn`: 저장할 컬럼명 (미설정 시 바인딩 필드)

### 필드 자동 매핑 설정

- `enableFieldMapping`: 필드 자동 매핑 활성화 여부
- `fieldMappings`: 매핑할 필드 목록
  - `sourceField`: 소스 테이블의 컬럼명 (예: customer_name)
  - `targetField`: 타겟 필드 ID (예: 화면의 input id 속성)
  - `label`: 표시명 (선택사항)

## 필드 자동 매핑 동작 방식

1. 사용자가 검색 컴포넌트에서 항목을 선택합니다
2. 선택된 항목의 데이터에서 `sourceField`에 해당하는 값을 가져옵니다
3. 화면에서 `targetField` ID를 가진 컴포넌트를 찾습니다
4. 해당 컴포넌트에 값을 자동으로 채워넣습니다
5. React의 change 이벤트를 트리거하여 상태 업데이트를 유발합니다

## 주의사항

- 타겟 필드 ID는 화면 디자이너에서 설정한 컴포넌트 ID와 정확히 일치해야 합니다
- 필드 매핑은 input, textarea 타입의 요소에만 동작합니다
- 여러 필드를 한 번에 매핑할 수 있습니다