엔티티타입 입력 셀렉트박스 다중선택 기능

2026-01-08 14:49:24 +09:00
parent 3f81c449ad
commit 11e25694b9
11 changed files with 547 additions and 99 deletions
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchInputWrapper.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputWrapper.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import React from "react";
+import { EntitySearchInputComponent } from "./EntitySearchInputComponent";
+import { WebTypeComponentProps } from "@/lib/registry/types";
+
+/**
+ * EntitySearchInput 래퍼 컴포넌트
+ * WebTypeRegistry에서 사용하기 위한 래퍼로,
+ * 레지스트리 props를 EntitySearchInputComponent에 맞게 변환합니다.
+ */
+export const EntitySearchInputWrapper: React.FC<WebTypeComponentProps> = ({
+  component,
+  value,
+  onChange,
+  readonly = false,
+  ...props
+}) => {
+  // component에서 필요한 설정 추출
+  const widget = component as any;
+  const webTypeConfig = widget?.webTypeConfig || {};
+  const componentConfig = widget?.componentConfig || {};
+  
+  // 설정 우선순위: webTypeConfig > componentConfig > component 직접 속성
+  const config = { ...componentConfig, ...webTypeConfig };
+  
+  // 테이블 타입 관리에서 설정된 참조 테이블 정보 사용
+  const tableName = config.referenceTable || widget?.referenceTable || "";
+  const displayField = config.labelField || config.displayColumn || config.displayField || "name";
+  const valueField = config.valueField || config.referenceColumn || "id";
+  
+  // UI 모드: uiMode > mode 순서
+  const uiMode = config.uiMode || config.mode || "select";
+  
+  // 다중선택 설정
+  const multiple = config.multiple ?? false;
+
+  // placeholder
+  const placeholder = config.placeholder || widget?.placeholder || "항목을 선택하세요";
+
+  console.log("🏢 EntitySearchInputWrapper 렌더링:", {
+    tableName,
+    displayField,
+    valueField,
+    uiMode,
+    multiple,
+    value,
+    config,
+  });
+
+  // 테이블 정보가 없으면 안내 메시지 표시
+  if (!tableName) {
+    return (
+      <div className="text-muted-foreground flex h-full w-full items-center rounded-md border border-dashed px-3 py-2 text-sm">
+        테이블 타입 관리에서 참조 테이블을 설정해주세요
+      </div>
+    );
+  }
+
+  return (
+    <EntitySearchInputComponent
+      tableName={tableName}
+      displayField={displayField}
+      valueField={valueField}
+      uiMode={uiMode}
+      placeholder={placeholder}
+      disabled={readonly}
+      value={value}
+      onChange={onChange}
+      multiple={multiple}
+      component={component}
+      isInteractive={props.isInteractive}
+      onFormDataChange={props.onFormDataChange}
+      formData={props.formData}
+      className="h-full w-full"
+      style={widget?.style}
+      {...props}
+    />
+  );
+};
+
+EntitySearchInputWrapper.displayName = "EntitySearchInputWrapper";
+