entity-search-iniput 수정

frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx

@@ -10,7 +10,7 @@ import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
 import { Plus, X, Check, ChevronsUpDown, Database, Info, Link2, ExternalLink } from "lucide-react";
 // allComponents는 현재 사용되지 않지만 향후 확장을 위해 props에 유지
-import { EntitySearchInputConfig } from "./config";
+import { EntitySearchInputConfig, AutoFillMapping } from "./config";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { tableTypeApi } from "@/lib/api/screen";
 import { cascadingRelationApi, CascadingRelation } from "@/lib/api/cascadingRelation";
@@ -236,6 +236,7 @@ export function EntitySearchInputConfigPanel({
     const newConfig = { ...localConfig, ...updates };
     setLocalConfig(newConfig);
     onConfigChange(newConfig);
+    console.log("📝 [EntitySearchInput] 설정 업데이트:", { updates, newConfig });
   };
   
   // 연쇄 드롭다운 활성화/비활성화
@@ -636,9 +637,9 @@ export function EntitySearchInputConfigPanel({
               <CommandList>
                 <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
                 <CommandGroup>
-                  {tableColumns.map((column) => (
+                  {tableColumns.map((column, idx) => (
                     <CommandItem
-                      key={column.columnName}
+                      key={column.columnName || `display-col-${idx}`}
                       value={`${column.displayName || column.columnName}-${column.columnName}`}
                       onSelect={() => {
                         updateConfig({ displayField: column.columnName });
@@ -690,9 +691,9 @@ export function EntitySearchInputConfigPanel({
               <CommandList>
                 <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
                 <CommandGroup>
-                  {tableColumns.map((column) => (
+                  {tableColumns.map((column, idx) => (
                     <CommandItem
-                      key={column.columnName}
+                      key={column.columnName || `value-col-${idx}`}
                       value={`${column.displayName || column.columnName}-${column.columnName}`}
                       onSelect={() => {
                         updateConfig({ valueField: column.columnName });
@@ -812,8 +813,8 @@ export function EntitySearchInputConfigPanel({
                       <SelectValue placeholder="컬럼 선택" />
                     </SelectTrigger>
                     <SelectContent>
-                      {tableColumns.map((col) => (
-                        <SelectItem key={col.columnName} value={col.columnName}>
+                      {tableColumns.map((col, colIdx) => (
+                        <SelectItem key={col.columnName || `modal-col-${colIdx}`} value={col.columnName}>
                           {col.displayName || col.columnName}
                         </SelectItem>
                       ))}
@@ -860,8 +861,8 @@ export function EntitySearchInputConfigPanel({
                   <SelectValue placeholder="필드 선택" />
                 </SelectTrigger>
                 <SelectContent>
-                  {tableColumns.map((col) => (
-                    <SelectItem key={col.columnName} value={col.columnName}>
+                  {tableColumns.map((col, colIdx) => (
+                    <SelectItem key={col.columnName || `search-col-${colIdx}`} value={col.columnName}>
                       {col.displayName || col.columnName}
                     </SelectItem>
                   ))}
@@ -919,8 +920,8 @@ export function EntitySearchInputConfigPanel({
                     <SelectValue placeholder="필드 선택" />
                   </SelectTrigger>
                   <SelectContent>
-                    {tableColumns.map((col) => (
-                      <SelectItem key={col.columnName} value={col.columnName}>
+                    {tableColumns.map((col, colIdx) => (
+                      <SelectItem key={col.columnName || `additional-col-${colIdx}`} value={col.columnName}>
                         {col.displayName || col.columnName}
                       </SelectItem>
                     ))}
@@ -939,6 +940,105 @@ export function EntitySearchInputConfigPanel({
           </div>
         </div>
       )}
+
+      {/* 자동 채움 매핑 설정 */}
+      <div className="border-t pt-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Link2 className="h-4 w-4" />
+            <h4 className="text-sm font-medium">자동 채움 매핑</h4>
+          </div>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              const mappings = localConfig.autoFillMappings || [];
+              updateConfig({ autoFillMappings: [...mappings, { sourceField: "", targetField: "" }] });
+            }}
+            className="h-7 text-xs"
+            disabled={!localConfig.tableName || isLoadingColumns}
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            추가
+          </Button>
+        </div>
+        <p className="text-muted-foreground text-xs">
+          엔티티를 선택하면 소스 필드의 값이 대상 필드에 자동으로 채워집니다.
+        </p>
+        
+        {(localConfig.autoFillMappings || []).length > 0 && (
+          <div className="space-y-2">
+            {(localConfig.autoFillMappings || []).map((mapping, index) => (
+              <div key={`autofill-mapping-${index}`} className="flex items-center gap-2 rounded-md border p-2 bg-muted/30">
+                {/* 소스 필드 (선택된 엔티티) */}
+                <div className="flex-1">
+                  <Label className="text-[10px] text-muted-foreground mb-1 block">소스 (엔티티)</Label>
+                  <Select
+                    value={mapping.sourceField || ""}
+                    onValueChange={(value) => {
+                      const mappings = [...(localConfig.autoFillMappings || [])];
+                      mappings[index] = { ...mappings[index], sourceField: value };
+                      updateConfig({ autoFillMappings: mappings });
+                    }}
+                    disabled={!localConfig.tableName || isLoadingColumns}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue placeholder="필드 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {tableColumns.map((col, colIdx) => (
+                        <SelectItem key={col.columnName || `col-${colIdx}`} value={col.columnName}>
+                          {col.displayName || col.columnName}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                
+                {/* 화살표 */}
+                <div className="flex items-center justify-center pt-4">
+                  <span className="text-muted-foreground text-sm">→</span>
+                </div>
+                
+                {/* 대상 필드 (폼) */}
+                <div className="flex-1">
+                  <Label className="text-[10px] text-muted-foreground mb-1 block">대상 (폼)</Label>
+                  <Input
+                    value={mapping.targetField || ""}
+                    onChange={(e) => {
+                      const mappings = [...(localConfig.autoFillMappings || [])];
+                      mappings[index] = { ...mappings[index], targetField: e.target.value };
+                      updateConfig({ autoFillMappings: mappings });
+                    }}
+                    placeholder="폼 필드명"
+                    className="h-8 text-xs"
+                  />
+                </div>
+                
+                {/* 삭제 버튼 */}
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    const mappings = [...(localConfig.autoFillMappings || [])];
+                    mappings.splice(index, 1);
+                    updateConfig({ autoFillMappings: mappings });
+                  }}
+                  className="h-8 w-8 p-0 mt-4"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+        
+        {(localConfig.autoFillMappings || []).length === 0 && (
+          <div className="text-muted-foreground text-xs text-center py-3 rounded-md border border-dashed">
+            매핑이 없습니다. + 추가 버튼을 클릭하여 매핑을 추가하세요.
+          </div>
+        )}
+      </div>
     </div>
   );
 }