[agent-pipeline] pipe-20260311221723-l7a9 round-1

frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx

@@ -13,8 +13,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Badge } from "@/components/ui/badge";
 import {
-  Settings, ChevronDown, Plus, Trash2, Check, ChevronsUpDown,
+  Settings, ChevronDown, ChevronRight, Plus, Trash2, Check, ChevronsUpDown,
   Database, Monitor, Columns,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -144,10 +145,12 @@ function ColumnCombobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="h-7 w-[140px] justify-between text-xs"
+          className="h-7 w-full justify-between text-xs"
           disabled={loading || !tableName}
         >
-          {loading ? "로딩..." : !tableName ? "테이블 먼저 선택" : selected ? selected.displayName || selected.columnName : placeholder || "컬럼 선택"}
+          <span className="truncate">
+            {loading ? "로딩..." : !tableName ? "테이블 먼저 선택" : selected ? selected.displayName || selected.columnName : placeholder || "컬럼 선택"}
+          </span>
           <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
@@ -220,10 +223,12 @@ function ScreenCombobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="h-7 w-[140px] justify-between text-xs"
+          className="h-7 w-full justify-between text-xs"
           disabled={loading}
         >
-          {loading ? "로딩..." : selected ? selected.screenName : "화면 선택"}
+          <span className="truncate">
+            {loading ? "로딩..." : selected ? selected.screenName : "화면 선택"}
+          </span>
           <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
@@ -262,6 +267,8 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
 }) => {
   const [tables, setTables] = useState<TableInfo[]>([]);
   const [loadingTables, setLoadingTables] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [columnsOpen, setColumnsOpen] = useState(false);
   const [dataSourceOpen, setDataSourceOpen] = useState(false);
   const [layoutOpen, setLayoutOpen] = useState(false);
 
@@ -344,107 +351,172 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
 
   return (
     <div className="space-y-4">
-      {/* ─── 1단계: 모달 연동 ─── */}
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <Monitor className="h-4 w-4 text-muted-foreground" />
-          <p className="text-sm font-medium">모달 연동</p>
-        </div>
-        <p className="text-[11px] text-muted-foreground">버전 추가/공정 추가·수정 시 열리는 화면을 설정해요</p>
-      </div>
-
-      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-        <div className="flex items-center justify-between py-1">
-          <span className="text-xs text-muted-foreground">버전 추가 화면</span>
-          <ScreenCombobox
-            value={config.modals.versionAddScreenId}
-            onChange={(v) => updateModals("versionAddScreenId", v)}
-          />
-        </div>
-        <div className="flex items-center justify-between py-1">
-          <span className="text-xs text-muted-foreground">공정 추가 화면</span>
-          <ScreenCombobox
-            value={config.modals.processAddScreenId}
-            onChange={(v) => updateModals("processAddScreenId", v)}
-          />
-        </div>
-        <div className="flex items-center justify-between py-1">
-          <span className="text-xs text-muted-foreground">공정 수정 화면</span>
-          <ScreenCombobox
-            value={config.modals.processEditScreenId}
-            onChange={(v) => updateModals("processEditScreenId", v)}
-          />
-        </div>
-      </div>
-
-      {/* ─── 2단계: 공정 테이블 컬럼 ─── */}
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <Columns className="h-4 w-4 text-muted-foreground" />
-          <p className="text-sm font-medium">공정 테이블 컬럼</p>
-        </div>
-        <p className="text-[11px] text-muted-foreground">공정 순서 테이블에 표시할 컬럼을 설정해요</p>
-      </div>
-
-      <div className="rounded-lg border bg-muted/30 p-4 space-y-2">
-        {config.processColumns.map((col, idx) => (
-          <div
-            key={idx}
-            className="flex items-center gap-1.5 rounded-md border bg-background p-2"
+      {/* ─── 1단계: 모달 연동 (Collapsible) ─── */}
+      <Collapsible open={modalOpen} onOpenChange={setModalOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
           >
-            <Input
-              value={col.name}
-              onChange={(e) => updateColumn(idx, "name", e.target.value)}
-              className="h-7 w-24 text-[10px]"
-              placeholder="컬럼명"
+            <div className="flex items-center gap-2">
+              <Monitor className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">모달 연동</span>
+              <Badge variant="secondary" className="text-[10px] h-5">
+                {[config.modals.versionAddScreenId, config.modals.processAddScreenId, config.modals.processEditScreenId].filter(Boolean).length}개 설정됨
+              </Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                modalOpen && "rotate-180",
+              )}
             />
-            <Input
-              value={col.label}
-              onChange={(e) => updateColumn(idx, "label", e.target.value)}
-              className="h-7 flex-1 text-[10px]"
-              placeholder="표시명"
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+            <p className="text-[10px] text-muted-foreground">버전 추가/공정 추가·수정 시 열리는 화면</p>
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">버전 추가</span>
+                <ScreenCombobox
+                  value={config.modals.versionAddScreenId}
+                  onChange={(v) => updateModals("versionAddScreenId", v)}
+                />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">공정 추가</span>
+                <ScreenCombobox
+                  value={config.modals.processAddScreenId}
+                  onChange={(v) => updateModals("processAddScreenId", v)}
+                />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">공정 수정</span>
+                <ScreenCombobox
+                  value={config.modals.processEditScreenId}
+                  onChange={(v) => updateModals("processEditScreenId", v)}
+                />
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ─── 2단계: 공정 테이블 컬럼 (Collapsible + 접이식 카드) ─── */}
+      <Collapsible open={columnsOpen} onOpenChange={setColumnsOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Columns className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">테이블 컬럼</span>
+              <Badge variant="secondary" className="text-[10px] h-5">
+                {config.processColumns.length}개
+              </Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                columnsOpen && "rotate-180",
+              )}
             />
-            <Input
-              type="number"
-              value={col.width || 100}
-              onChange={(e) => updateColumn(idx, "width", parseInt(e.target.value) || 100)}
-              className="h-7 w-14 text-[10px]"
-              placeholder="너비"
-            />
-            <Select
-              value={col.align || "left"}
-              onValueChange={(v) => updateColumn(idx, "align", v)}
-            >
-              <SelectTrigger className="h-7 w-16 text-[10px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="left">좌</SelectItem>
-                <SelectItem value="center">중</SelectItem>
-                <SelectItem value="right">우</SelectItem>
-              </SelectContent>
-            </Select>
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
+            <p className="text-[10px] text-muted-foreground mb-1">공정 순서 테이블에 표시할 컬럼</p>
+            <div className="max-h-[250px] space-y-1 overflow-y-auto">
+              {config.processColumns.map((col, idx) => (
+                <Collapsible key={idx}>
+                  <div className="rounded-md border">
+                    <CollapsibleTrigger asChild>
+                      <button
+                        type="button"
+                        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
+                      >
+                        <ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
+                        <span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
+                        <span className="text-xs font-medium truncate flex-1 min-w-0">{col.name || "미설정"}</span>
+                        <span className="text-[10px] text-muted-foreground truncate max-w-[60px] shrink-0">{col.label}</span>
+                        <Badge variant="outline" className="text-[9px] h-4 shrink-0">{col.align || "left"}</Badge>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => { e.stopPropagation(); removeColumn(idx); }}
+                          className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </button>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <div className="grid grid-cols-2 gap-1.5 border-t px-2.5 py-2">
+                        <div className="space-y-0.5">
+                          <span className="text-[10px] text-muted-foreground">컬럼명</span>
+                          <Input
+                            value={col.name}
+                            onChange={(e) => updateColumn(idx, "name", e.target.value)}
+                            className="h-7 text-xs"
+                            placeholder="컬럼명"
+                          />
+                        </div>
+                        <div className="space-y-0.5">
+                          <span className="text-[10px] text-muted-foreground">표시명</span>
+                          <Input
+                            value={col.label}
+                            onChange={(e) => updateColumn(idx, "label", e.target.value)}
+                            className="h-7 text-xs"
+                            placeholder="표시명"
+                          />
+                        </div>
+                        <div className="space-y-0.5">
+                          <span className="text-[10px] text-muted-foreground">너비</span>
+                          <Input
+                            type="number"
+                            value={col.width || 100}
+                            onChange={(e) => updateColumn(idx, "width", parseInt(e.target.value) || 100)}
+                            className="h-7 text-xs"
+                            placeholder="100"
+                          />
+                        </div>
+                        <div className="space-y-0.5">
+                          <span className="text-[10px] text-muted-foreground">정렬</span>
+                          <Select
+                            value={col.align || "left"}
+                            onValueChange={(v) => updateColumn(idx, "align", v)}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="left">좌</SelectItem>
+                              <SelectItem value="center">중</SelectItem>
+                              <SelectItem value="right">우</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </div>
+                </Collapsible>
+              ))}
+            </div>
             <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 shrink-0 text-destructive hover:text-destructive"
-              onClick={() => removeColumn(idx)}
+              variant="outline"
+              size="sm"
+              className="h-7 w-full gap-1 text-xs border-dashed"
+              onClick={addColumn}
             >
-              <Trash2 className="h-3 w-3" />
+              <Plus className="h-3 w-3" />
+              컬럼 추가
             </Button>
           </div>
-        ))}
-
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-7 w-full gap-1 text-xs"
-          onClick={addColumn}
-        >
-          <Plus className="h-3 w-3" />
-          컬럼 추가
-        </Button>
-      </div>
+        </CollapsibleContent>
+      </Collapsible>
 
       {/* ─── 3단계: 데이터 소스 (Collapsible) ─── */}
       <Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
@@ -456,6 +528,11 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
             <div className="flex items-center gap-2">
               <Database className="h-4 w-4 text-muted-foreground" />
               <span className="text-sm font-medium">데이터 소스 설정</span>
+              {config.dataSource.itemTable && (
+                <Badge variant="secondary" className="text-[10px] h-5 truncate max-w-[100px]">
+                  {config.dataSource.itemTable}
+                </Badge>
+              )}
             </div>
             <ChevronDown
               className={cn(
@@ -476,7 +553,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
                 loading={loadingTables}
               />
             </div>
-            <div className="flex items-center justify-between py-1">
+            <div className="space-y-1">
               <span className="text-xs text-muted-foreground">품목명 컬럼</span>
               <ColumnCombobox
                 value={config.dataSource.itemNameColumn}
@@ -485,7 +562,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
                 placeholder="품목명"
               />
             </div>
-            <div className="flex items-center justify-between py-1">
+            <div className="space-y-1">
               <span className="text-xs text-muted-foreground">품목코드 컬럼</span>
               <ColumnCombobox
                 value={config.dataSource.itemCodeColumn}
@@ -503,7 +580,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
                 loading={loadingTables}
               />
             </div>
-            <div className="flex items-center justify-between py-1">
+            <div className="space-y-1">
               <span className="text-xs text-muted-foreground">품목 FK 컬럼</span>
               <ColumnCombobox
                 value={config.dataSource.routingVersionFkColumn}
@@ -512,7 +589,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
                 placeholder="FK 컬럼"
               />
             </div>
-            <div className="flex items-center justify-between py-1">
+            <div className="space-y-1">
               <span className="text-xs text-muted-foreground">버전명 컬럼</span>
               <ColumnCombobox
                 value={config.dataSource.routingVersionNameColumn}
@@ -530,7 +607,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
                 loading={loadingTables}
               />
             </div>
-            <div className="flex items-center justify-between py-1">
+            <div className="space-y-1">
               <span className="text-xs text-muted-foreground">버전 FK 컬럼</span>
               <ColumnCombobox
                 value={config.dataSource.routingDetailFkColumn}
@@ -548,7 +625,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
                 loading={loadingTables}
               />
             </div>
-            <div className="flex items-center justify-between py-1">
+            <div className="space-y-1">
               <span className="text-xs text-muted-foreground">공정명 컬럼</span>
               <ColumnCombobox
                 value={config.dataSource.processNameColumn}
@@ -557,7 +634,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
                 placeholder="공정명"
               />
             </div>
-            <div className="flex items-center justify-between py-1">
+            <div className="space-y-1">
               <span className="text-xs text-muted-foreground">공정코드 컬럼</span>
               <ColumnCombobox
                 value={config.dataSource.processCodeColumn}