@@ -164,6 +216,9 @@ export function AutocompleteSearchInputConfigPanel({
+
+ 검색할 데이터가 저장된 테이블을 선택하세요
+
@@ -211,6 +266,9 @@ export function AutocompleteSearchInputConfigPanel({
+
+ 사용자에게 보여줄 필드 (예: 거래처명)
+
@@ -258,6 +316,9 @@ export function AutocompleteSearchInputConfigPanel({
+
+ 검색 테이블에서 가져올 값의 컬럼 (예: customer_code)
+
@@ -270,6 +331,196 @@ export function AutocompleteSearchInputConfigPanel({
/>
+ {/* 값 필드 저장 위치 설정 */}
+
+
+
값 필드 저장 위치 (고급)
+
+ 위에서 선택한 "값 필드"의 데이터를 어느 테이블/컬럼에 저장할지 지정합니다.
+
+ 미설정 시 화면의 연결 테이블에 컴포넌트의 바인딩 필드로 자동 저장됩니다.
+
+
+
+ {/* 저장 테이블 선택 */}
+
+
+
+
+
+
+
+
+
+
+ 테이블을 찾을 수 없습니다.
+
+ {/* 기본값 옵션 */}
+ {
+ updateConfig({
+ valueFieldStorage: {
+ ...localConfig.valueFieldStorage,
+ targetTable: undefined,
+ targetColumn: undefined,
+ },
+ });
+ setOpenStorageTableCombo(false);
+ }}
+ className="text-xs sm:text-sm"
+ >
+
+
+ 기본값
+ 화면의 연결 테이블 사용
+
+
+ {allTables.map((table) => (
+ {
+ updateConfig({
+ valueFieldStorage: {
+ ...localConfig.valueFieldStorage,
+ targetTable: table.tableName,
+ targetColumn: undefined, // 테이블 변경 시 컬럼 초기화
+ },
+ });
+ setOpenStorageTableCombo(false);
+ }}
+ className="text-xs sm:text-sm"
+ >
+
+
+ {table.displayName || table.tableName}
+ {table.displayName && {table.tableName}}
+
+
+ ))}
+
+
+
+
+
+
+ 값을 저장할 테이블 (기본값: 화면 연결 테이블)
+
+
+
+ {/* 저장 컬럼 선택 */}
+ {localConfig.valueFieldStorage?.targetTable && (
+
+
+
+
+
+
+
+
+
+
+ 컬럼을 찾을 수 없습니다.
+
+ {storageTableColumns.map((column) => (
+ {
+ updateConfig({
+ valueFieldStorage: {
+ ...localConfig.valueFieldStorage,
+ targetColumn: column.columnName,
+ },
+ });
+ setOpenStorageColumnCombo(false);
+ }}
+ className="text-xs sm:text-sm"
+ >
+
+
+ {column.displayName || column.columnName}
+ {column.displayName && {column.columnName}}
+
+
+ ))}
+
+
+
+
+
+
+ 값을 저장할 컬럼명
+
+
+ )}
+
+ {/* 설명 박스 */}
+
+
+ 저장 위치 동작
+
+
+ {localConfig.valueFieldStorage?.targetTable ? (
+ <>
+
+ 선택한 값({localConfig.valueField})을
+
+
+
+ {localConfig.valueFieldStorage.targetTable}
+ {" "}
+ 테이블의{" "}
+
+ {localConfig.valueFieldStorage.targetColumn || "(컬럼 미지정)"}
+ {" "}
+ 컬럼에 저장합니다.
+
+
+ ) : (
+
기본값: 화면의 연결 테이블에 컴포넌트의 바인딩 필드로 저장됩니다.
+ )}
+
+
+
+
@@ -375,6 +626,175 @@ export function AutocompleteSearchInputConfigPanel({
)}
+
+ {/* 필드 자동 매핑 설정 */}
+
+
+
필드 자동 매핑
+
+ 선택한 항목의 필드를 화면의 다른 입력 필드에 자동으로 채워넣습니다
+
+
+
+
+
+
+
+ updateConfig({ enableFieldMapping: checked })
+ }
+ />
+
+
+ 활성화하면 항목 선택 시 설정된 필드들이 자동으로 채워집니다
+
+
+
+ {localConfig.enableFieldMapping && (
+
+
+
+
+
+
+
+ {(localConfig.fieldMappings || []).map((mapping, index) => (
+
+
+
+ 매핑 #{index + 1}
+
+
+
+
+ {/* 표시명 */}
+
+
+
+ updateFieldMapping(index, { label: e.target.value })
+ }
+ placeholder="예: 거래처명"
+ className="h-8 text-xs sm:h-10 sm:text-sm"
+ />
+
+ 이 매핑의 설명 (선택사항)
+
+
+
+ {/* 소스 필드 (테이블의 컬럼) */}
+
+
+
+
+ 가져올 데이터의 컬럼명
+
+
+
+ {/* 타겟 필드 (화면의 input ID) */}
+
+
+
+ updateFieldMapping(index, { targetField: e.target.value })
+ }
+ placeholder="예: customer_name_input"
+ className="h-8 text-xs sm:h-10 sm:text-sm"
+ />
+
+ 값을 채울 화면 컴포넌트의 ID (예: input의 id 속성)
+
+
+
+ {/* 예시 설명 */}
+
+
+ {mapping.sourceField && mapping.targetField ? (
+ <>
+ {mapping.label || "이 필드"}: 테이블의{" "}
+
+ {mapping.sourceField}
+ {" "}
+ 값을 화면의{" "}
+
+ {mapping.targetField}
+ {" "}
+ 컴포넌트에 자동으로 채웁니다
+
+ ) : (
+ "소스 필드와 타겟 필드를 모두 선택하세요"
+ )}
+
+
+
+ ))}
+
+
+ {/* 사용 안내 */}
+ {localConfig.fieldMappings && localConfig.fieldMappings.length > 0 && (
+
+
+ 사용 방법
+
+
+ - 화면에서 이 검색 컴포넌트로 항목을 선택하면
+ - 설정된 매핑에 따라 다른 입력 필드들이 자동으로 채워집니다
+ - 타겟 필드 ID는 화면 디자이너에서 설정한 컴포넌트 ID와 일치해야 합니다
+
+
+ )}
+
+ )}
+
);
}
diff --git a/frontend/lib/registry/components/autocomplete-search-input/README.md b/frontend/lib/registry/components/autocomplete-search-input/README.md
index 3018d5c6..688d0c3a 100644
--- a/frontend/lib/registry/components/autocomplete-search-input/README.md
+++ b/frontend/lib/registry/components/autocomplete-search-input/README.md
@@ -9,9 +9,12 @@
- 추가 정보 표시 가능
- X 버튼으로 선택 초기화
- 외부 클릭 시 자동 닫힘
+- **필드 자동 매핑**: 선택한 항목의 값을 화면의 다른 입력 필드에 자동으로 채움
## 사용 예시
+### 기본 사용
+
```tsx