diff --git a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx
index 1c5920f0..7a115ea3 100644
--- a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx
+++ b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx
@@ -42,10 +42,26 @@ export function AutocompleteSearchInputComponent({
// config prop 우선, 없으면 개별 prop 사용
const tableName = config?.tableName || propTableName || "";
const displayField = config?.displayField || propDisplayField || "";
+ const displayFields = config?.displayFields || (displayField ? [displayField] : []); // 다중 표시 필드
+ const displaySeparator = config?.displaySeparator || " → "; // 구분자
const valueField = config?.valueField || propValueField || "";
- const searchFields = config?.searchFields || propSearchFields || [displayField];
+ const searchFields = config?.searchFields || propSearchFields || displayFields; // 검색 필드도 다중 표시 필드 사용
const placeholder = config?.placeholder || propPlaceholder || "검색...";
+ // 다중 필드 값을 조합하여 표시 문자열 생성
+ const getDisplayValue = (item: EntitySearchResult): string => {
+ if (displayFields.length > 1) {
+ // 여러 필드를 구분자로 조합
+ const values = displayFields
+ .map((field) => item[field])
+ .filter((v) => v !== null && v !== undefined && v !== "")
+ .map((v) => String(v));
+ return values.join(displaySeparator);
+ }
+ // 단일 필드
+ return item[displayField] || "";
+ };
+
const [inputValue, setInputValue] = useState("");
const [isOpen, setIsOpen] = useState(false);
const [selectedData, setSelectedData] = useState(null);
@@ -115,7 +131,7 @@ export function AutocompleteSearchInputComponent({
const handleSelect = (item: EntitySearchResult) => {
setSelectedData(item);
- setInputValue(item[displayField] || "");
+ setInputValue(getDisplayValue(item));
console.log("🔍 AutocompleteSearchInput handleSelect:", {
item,
@@ -239,7 +255,7 @@ export function AutocompleteSearchInputComponent({
onClick={() => handleSelect(item)}
className="w-full px-3 py-2 text-left text-xs transition-colors hover:bg-accent sm:text-sm"
>
- {item[displayField]}
+ {getDisplayValue(item)}
))}
diff --git a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
index d2290c2f..bb0b8175 100644
--- a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
@@ -184,52 +184,118 @@ export function AutocompleteSearchInputConfigPanel({
- {/* 2. 표시 필드 선택 */}
+ {/* 2. 표시 필드 선택 (다중 선택 가능) */}
-
-
-
-
-
-
-
-
-
- 필드를 찾을 수 없습니다.
-
- {sourceTableColumns.map((column) => (
- {
- updateConfig({ displayField: column.columnName });
- setOpenDisplayFieldCombo(false);
+
+
+ {/* 선택된 필드 표시 */}
+ {(localConfig.displayFields && localConfig.displayFields.length > 0) ? (
+
+ {localConfig.displayFields.map((fieldName) => {
+ const col = sourceTableColumns.find((c) => c.columnName === fieldName);
+ return (
+
+ {col?.displayName || fieldName}
+
+
+ );
+ })}
+
+ ) : (
+
+ 아래에서 표시할 필드를 선택하세요
+
+ )}
+
+ {/* 필드 선택 드롭다운 */}
+
+
+
+
+
+
+
+
+ 필드를 찾을 수 없습니다.
+
+ {sourceTableColumns.map((column) => {
+ const isSelected = localConfig.displayFields?.includes(column.columnName);
+ return (
+ {
+ const currentFields = localConfig.displayFields || [];
+ let newFields: string[];
+ if (isSelected) {
+ newFields = currentFields.filter((f) => f !== column.columnName);
+ } else {
+ newFields = [...currentFields, column.columnName];
+ }
+ updateConfig({
+ displayFields: newFields,
+ displayField: newFields[0] || "", // 첫 번째 필드를 기본 displayField로
+ });
+ }}
+ className="text-xs sm:text-sm"
+ >
+
+
+ {column.displayName || column.columnName}
+ {column.displayName && {column.columnName}}
+
+
+ );
+ })}
+
+
+
+
+
+
+ {/* 구분자 설정 */}
+ {localConfig.displayFields && localConfig.displayFields.length > 1 && (
+
+
+ updateConfig({ displaySeparator: e.target.value })}
+ placeholder=" → "
+ className="h-7 w-20 text-xs text-center"
+ />
+
+ 미리보기: {localConfig.displayFields.map((f) => {
+ const col = sourceTableColumns.find((c) => c.columnName === f);
+ return col?.displayName || f;
+ }).join(localConfig.displaySeparator || " → ")}
+
+
+ )}
+
{/* 3. 저장 대상 테이블 선택 */}
@@ -419,7 +485,9 @@ export function AutocompleteSearchInputConfigPanel({
외부 테이블: {localConfig.tableName}
- 표시 필드: {localConfig.displayField}
+ 표시 필드: {localConfig.displayFields?.length
+ ? localConfig.displayFields.join(localConfig.displaySeparator || " → ")
+ : localConfig.displayField}
저장 테이블: {localConfig.targetTable}
diff --git a/frontend/lib/registry/components/autocomplete-search-input/types.ts b/frontend/lib/registry/components/autocomplete-search-input/types.ts
index 85101e89..ea1c3734 100644
--- a/frontend/lib/registry/components/autocomplete-search-input/types.ts
+++ b/frontend/lib/registry/components/autocomplete-search-input/types.ts
@@ -29,5 +29,8 @@ export interface AutocompleteSearchInputConfig {
fieldMappings?: FieldMapping[]; // 매핑할 필드 목록
// 저장 대상 테이블 (간소화 버전)
targetTable?: string;
+ // 🆕 다중 표시 필드 설정 (여러 컬럼 조합)
+ displayFields?: string[]; // 여러 컬럼을 조합하여 표시
+ displaySeparator?: string; // 구분자 (기본값: " - ")
}