From 5f703b5ae81d9868a6987cc4f0b33f4def4ac222 Mon Sep 17 00:00:00 2001
From: leeheejin <imleesinok@gmail.com>
Date: Thu, 23 Oct 2025 18:01:26 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=80=EC=83=89=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/flow/FlowConditionBuilder.tsx  | 93 ++++++++++++++-----
 1 file changed, 72 insertions(+), 21 deletions(-)

diff --git a/frontend/components/flow/FlowConditionBuilder.tsx b/frontend/components/flow/FlowConditionBuilder.tsx
index 0440d049..70e8b91d 100644
--- a/frontend/components/flow/FlowConditionBuilder.tsx
+++ b/frontend/components/flow/FlowConditionBuilder.tsx
@@ -4,14 +4,17 @@
  */
 
 import { useState, useEffect } from "react";
-import { Plus, Trash2 } from "lucide-react";
+import { Plus, Trash2, Check, ChevronsUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { FlowConditionGroup, FlowCondition, ConditionOperator } from "@/types/flow";
 import { getTableColumns } from "@/lib/api/tableManagement";
+import { cn } from "@/lib/utils";
 
 interface FlowConditionBuilderProps {
   flowId: number;
@@ -49,6 +52,7 @@ export function FlowConditionBuilder({
   const [loadingColumns, setLoadingColumns] = useState(false);
   const [conditionType, setConditionType] = useState<"AND" | "OR">(condition?.type || "AND");
   const [conditions, setConditions] = useState<FlowCondition[]>(condition?.conditions || []);
+  const [columnComboboxOpen, setColumnComboboxOpen] = useState<Record<number, boolean>>({});
 
   // condition prop이 변경될 때 상태 동기화
   useEffect(() => {
@@ -238,27 +242,74 @@ export function FlowConditionBuilder({
                     className="h-8"
                   />
                 ) : (
-                  <Select value={cond.column} onValueChange={(value) => updateCondition(index, "column", value)}>
-                    <SelectTrigger className="h-8">
-                      <SelectValue placeholder="컬럼 선택" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {columns.map((col, idx) => {
-                        const columnName = col.column_name || col.columnName || "";
-                        const dataType = col.data_type || col.dataType || "";
-                        const displayName = col.displayName || col.display_name || columnName;
+                  <Popover
+                    open={columnComboboxOpen[index] || false}
+                    onOpenChange={(open) => setColumnComboboxOpen({ ...columnComboboxOpen, [index]: open })}
+                  >
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={columnComboboxOpen[index] || false}
+                        className="h-8 w-full justify-between text-xs font-normal"
+                      >
+                        {cond.column
+                          ? (() => {
+                              const col = columns.find((c) => (c.column_name || c.columnName) === cond.column);
+                              const displayName = col?.displayName || col?.display_name || cond.column;
+                              const dataType = col?.data_type || col?.dataType || "";
+                              return (
+                                <span className="flex items-center gap-2">
+                                  <span className="font-medium">{displayName}</span>
+                                  {dataType && <span className="text-gray-500">({dataType})</span>}
+                                </span>
+                              );
+                            })()
+                          : "컬럼 선택"}
+                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[300px] p-0" align="start">
+                      <Command>
+                        <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                        <CommandList>
+                          <CommandEmpty className="py-2 text-center text-xs text-gray-500">
+                            컬럼을 찾을 수 없습니다.
+                          </CommandEmpty>
+                          <CommandGroup>
+                            {columns.map((col, idx) => {
+                              const columnName = col.column_name || col.columnName || "";
+                              const dataType = col.data_type || col.dataType || "";
+                              const displayName = col.displayName || col.display_name || columnName;
 
-                        return (
-                          <SelectItem key={`${columnName}-${idx}`} value={columnName}>
-                            <div className="flex items-center gap-2">
-                              <span className="font-medium">{displayName}</span>
-                              <span className="text-xs text-gray-500">({dataType})</span>
-                            </div>
-                          </SelectItem>
-                        );
-                      })}
-                    </SelectContent>
-                  </Select>
+                              return (
+                                <CommandItem
+                                  key={`${columnName}-${idx}`}
+                                  value={columnName}
+                                  onSelect={(currentValue) => {
+                                    updateCondition(index, "column", currentValue);
+                                    setColumnComboboxOpen({ ...columnComboboxOpen, [index]: false });
+                                  }}
+                                  className="text-xs"
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-3 w-3",
+                                      cond.column === columnName ? "opacity-100" : "opacity-0",
+                                    )}
+                                  />
+                                  <div className="flex items-center gap-2">
+                                    <span className="font-medium">{displayName}</span>
+                                    <span className="text-gray-500">({dataType})</span>
+                                  </div>
+                                </CommandItem>
+                              );
+                            })}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
                 )}
               </div>