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

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

@@ -16,6 +16,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
 import {
   Database,
   Link2,
@@ -30,6 +31,7 @@ import {
   LayoutGrid,
   Paintbrush,
   ChevronDown,
+  ChevronRight,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { tableManagementApi } from "@/lib/api/tableManagement";
@@ -238,6 +240,8 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
   const [filterOpen, setFilterOpen] = useState(false);
   const [layoutOpen, setLayoutOpen] = useState(false);
   const [styleOpen, setStyleOpen] = useState(false);
+  const [itemsOpen, setItemsOpen] = useState(true);
+  const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
 
   const dataSourceType = config.dataSourceType || "table";
 
@@ -650,16 +654,24 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
       {/* ═══════════════════════════════════════ */}
       {/* 2단계: 집계 항목                         */}
       {/* ═══════════════════════════════════════ */}
-      <div className="space-y-3">
+      <Collapsible open={itemsOpen} onOpenChange={setItemsOpen}>
-        <div className="flex items-center justify-between">
+        <CollapsibleTrigger asChild>
-          <SectionHeader icon={Calculator} title="집계 항목" description="집계할 컬럼과 연산을 설정하세요" />
+          <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">
-          <Button type="button" variant="outline" size="sm" onClick={addItem} className="h-6 shrink-0 px-2 text-xs">
+            <div className="flex items-center gap-2">
-            <Plus className="mr-1 h-3 w-3" />
+              <Calculator className="h-4 w-4 text-muted-foreground" />
-            추가
+              <span className="text-sm font-medium">집계 항목</span>
-          </Button>
+              <Badge variant="secondary" className="text-[10px] h-5">{(config.items || []).length}개</Badge>
             </div>
-        <Separator />
+            <div className="flex items-center gap-1">
-
+              <Button type="button" variant="outline" size="sm" onClick={(e) => { e.stopPropagation(); addItem(); }} className="h-6 shrink-0 px-2 text-xs">
+                <Plus className="mr-1 h-3 w-3" />추가
+              </Button>
+              <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", itemsOpen && "rotate-180")} />
+            </div>
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
             {(config.items || []).length === 0 ? (
               <div className="rounded-lg border-2 border-dashed py-6 text-center">
                 <Calculator className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
@@ -667,23 +679,24 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
                 <p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
               </div>
             ) : (
-          <div className="space-y-2">
+              <div className="max-h-[300px] space-y-1.5 overflow-y-auto">
                 {(config.items || []).map((item, index) => (
-              <div key={item.id} className="space-y-2 rounded-md border p-2.5">
+                  <div key={item.id} className="rounded-md border">
-                <div className="flex items-center justify-between">
+                    <button
-                  <span className="text-xs font-medium">항목 {index + 1}</span>
-                  <Button
                       type="button"
-                    variant="ghost"
+                      onClick={() => setExpandedItemId(expandedItemId === item.id ? null : item.id)}
-                    size="sm"
+                      className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
-                    onClick={() => removeItem(item.id)}
-                    className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive"
                     >
+                      <ChevronRight className={cn("h-3 w-3 text-muted-foreground transition-transform shrink-0", expandedItemId === item.id && "rotate-90")} />
+                      <span className="text-[10px] text-muted-foreground font-medium shrink-0">#{index + 1}</span>
+                      <span className="text-xs font-medium truncate flex-1 min-w-0">{item.columnLabel || item.columnName || "미설정"}</span>
+                      <Badge variant="outline" className="text-[9px] h-4 shrink-0">{AGGREGATION_TYPE_OPTIONS.find((o) => o.value === item.type)?.label || item.type}</Badge>
+                      <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); removeItem(item.id); }} className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0">
                         <Trash2 className="h-3 w-3" />
                       </Button>
-                </div>
+                    </button>
-
+                    {expandedItemId === item.id && (
-                <div className="grid grid-cols-2 gap-2">
+                      <div className="grid grid-cols-2 gap-2 border-t px-2.5 py-2">
                         {/* 컬럼 */}
                         <div className="space-y-1">
                           <span className="text-[10px] text-muted-foreground">컬럼</span>
@@ -783,11 +796,14 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
                           />
                         </div>
                       </div>
+                    )}
                   </div>
                 ))}
               </div>
             )}
           </div>
+        </CollapsibleContent>
+      </Collapsible>
 
       {/* ═══════════════════════════════════════ */}
       {/* 3단계: 필터 조건 (접힘)                  */}
@@ -803,9 +819,9 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
                 <Filter className="h-4 w-4 text-muted-foreground" />
                 <span className="text-sm font-medium">필터 조건</span>
                 {(config.filters || []).length > 0 && (
-                  <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                  <Badge variant="secondary" className="text-[10px] h-5">
                     {(config.filters || []).length}
-                  </span>
+                  </Badge>
                 )}
               </div>
               <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", filterOpen && "rotate-180")} />
@@ -845,7 +861,7 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
                   <p className="text-xs text-muted-foreground">필터 없음 - 전체 데이터를 집계합니다</p>
                 </div>
               ) : (
-                <div className="space-y-2">
+                <div className="max-h-[250px] space-y-2 overflow-y-auto">
                   {(config.filters || []).map((filter, index) => (
                     <div
                       key={filter.id}
@@ -1067,6 +1083,7 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
             <div className="flex items-center gap-2">
               <LayoutGrid className="h-4 w-4 text-muted-foreground" />
               <span className="text-sm font-medium">레이아웃</span>
+              <Badge variant="secondary" className="text-[10px] h-5">{config.layout === "vertical" ? "세로" : "가로"}</Badge>
             </div>
             <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", layoutOpen && "rotate-180")} />
           </button>

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

@@ -34,6 +34,7 @@ import {
   Check,
   ChevronsUpDown,
   GitBranch,
+  Settings,
 } from "lucide-react";
 import {
   Command,
@@ -48,6 +49,12 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import { tableTypeApi } from "@/lib/api/screen";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { cn } from "@/lib/utils";
@@ -171,6 +178,9 @@ export function V2BomItemEditorConfigPanel({
   const [loadingRelations, setLoadingRelations] = useState(false);
   const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
   const [expandedColumn, setExpandedColumn] = useState<string | null>(null);
+  const [featureOptionsOpen, setFeatureOptionsOpen] = useState(false);
+  const [columnSelectOpen, setColumnSelectOpen] = useState(false);
+  const [selectedColumnsOpen, setSelectedColumnsOpen] = useState(false);
 
   // ─── 업데이트 헬퍼 (리피터 패턴) ───
   const updateConfig = useCallback(
@@ -803,10 +813,39 @@ export function V2BomItemEditorConfigPanel({
             )}
           </div>
 
-          {/* 기능 옵션 - Switch + 설명 텍스트 */}
+          {/* 기능 옵션 - Collapsible + Badge */}
-          <div className="rounded-lg border bg-muted/30 p-4 space-y-1">
+          <Collapsible open={featureOptionsOpen} onOpenChange={setFeatureOptionsOpen}>
+            <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">
+                  <Settings className="h-4 w-4 text-muted-foreground" />
                   <span className="text-sm font-medium">기능 옵션</span>
-            <div className="space-y-2">
+                  <Badge
+                    variant="secondary"
+                    className="text-[10px] h-5"
+                  >
+                    {[
+                      config.features?.showAddButton ?? true,
+                      config.features?.showDeleteButton ?? true,
+                      config.features?.inlineEdit ?? false,
+                      config.features?.showRowNumber ?? false,
+                    ].filter(Boolean).length}
+                    개
+                  </Badge>
+                </div>
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    featureOptionsOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
                 <div className="flex items-center justify-between py-1">
                   <div>
                     <p className="text-sm">추가 버튼</p>
@@ -848,17 +887,36 @@ export function V2BomItemEditorConfigPanel({
                   />
                 </div>
               </div>
-          </div>
+            </CollapsibleContent>
+          </Collapsible>
         </TabsContent>
 
         {/* ─── 컬럼 설정 탭 ─── */}
         <TabsContent value="columns" className="mt-4 space-y-4">
-          {/* 통합 컬럼 선택 */}
+          {/* 컬럼 선택 - Collapsible + Badge */}
-          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
+            <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">
-              <Database className="h-4 w-4 text-primary" />
+                  <Database className="h-4 w-4 text-muted-foreground" />
-              <span className="text-sm font-medium">어떤 컬럼을 표시하고 입력받을까요?</span>
+                  <span className="text-sm font-medium">컬럼 선택</span>
+                  <Badge variant="secondary" className="text-[10px] h-5">
+                    {config.columns.length}개 선택됨
+                  </Badge>
                 </div>
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    columnSelectOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-3 space-y-3">
                 <p className="text-[11px] text-muted-foreground">
                   소스 테이블 컬럼은 표시용, 저장 테이블 컬럼은 입력용이에요
                 </p>
@@ -866,7 +924,7 @@ export function V2BomItemEditorConfigPanel({
                 {/* 소스 테이블 컬럼 (표시용) */}
                 {config.dataSource?.sourceTable && (
                   <>
-                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
+                    <div className="mb-1 flex items-center gap-1 text-[10px] font-medium text-primary">
                       <Link2 className="h-3 w-3" />
                       소스 테이블 ({config.dataSource.sourceTable}) - 표시용
                     </div>
@@ -901,7 +959,7 @@ export function V2BomItemEditorConfigPanel({
                 )}
 
                 {/* 저장 테이블 컬럼 (입력용) */}
-            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
+                <div className="mb-1 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
                   <Database className="h-3 w-3" />
                   저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
                 </div>
@@ -933,12 +991,34 @@ export function V2BomItemEditorConfigPanel({
                   </div>
                 )}
               </div>
+            </CollapsibleContent>
+          </Collapsible>
 
-          {/* 선택된 컬럼 상세 */}
+          {/* 선택된 컬럼 상세 - Collapsible + Badge */}
           {config.columns.length > 0 && (
-            <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
+              <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">
+                    <span className="text-sm font-medium">선택된 컬럼</span>
+                    <Badge variant="secondary" className="text-[10px] h-5">
+                      {config.columns.length}개
+                    </Badge>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                      selectedColumnsOpen && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="rounded-b-lg border border-t-0 p-3 space-y-3">
                   <div className="flex items-center justify-between">
-                <span className="text-sm font-medium">선택된 컬럼 ({config.columns.length})</span>
                     <span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span>
                   </div>
                   <div className="max-h-48 space-y-1 overflow-y-auto">
@@ -1069,6 +1149,8 @@ export function V2BomItemEditorConfigPanel({
                 ))}
                   </div>
                 </div>
+              </CollapsibleContent>
+            </Collapsible>
           )}
         </TabsContent>
       </Tabs>

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

@@ -22,6 +22,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Badge } from "@/components/ui/badge";
 import {
   Database,
   Link2,
@@ -163,6 +164,10 @@ export function V2BomTreeConfigPanel({
   const [loadingRelations, setLoadingRelations] = useState(false);
   const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
   const [expandedColumn, setExpandedColumn] = useState<string | null>(null);
+  const [displayOptionsOpen, setDisplayOptionsOpen] = useState(false);
+  const [columnSelectOpen, setColumnSelectOpen] = useState(false);
+  const [selectedColumnsOpen, setSelectedColumnsOpen] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
 
   const updateConfig = useCallback(
     (updates: Partial<BomTreeConfig>) => {
@@ -680,10 +685,39 @@ export function V2BomTreeConfigPanel({
             )}
           </div>
 
-          {/* 표시 옵션 - Switch + 설명 텍스트 */}
+          {/* 표시 옵션 - Collapsible + Badge */}
-          <div className="rounded-lg border bg-muted/30 p-4 space-y-1">
+          <Collapsible open={displayOptionsOpen} onOpenChange={setDisplayOptionsOpen}>
+            <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">
+                  <Eye className="h-4 w-4 text-muted-foreground" />
                   <span className="text-sm font-medium">표시 옵션</span>
-            <div className="space-y-2">
+                  <Badge
+                    variant="secondary"
+                    className="text-[10px] h-5"
+                  >
+                    {[
+                      config.features?.showExpandAll ?? true,
+                      config.features?.showHeader ?? true,
+                      config.features?.showQuantity ?? true,
+                      config.features?.showLossRate ?? true,
+                    ].filter(Boolean).length}
+                    /4
+                  </Badge>
+                </div>
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    displayOptionsOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
                 <div className="flex items-center justify-between py-1">
                   <div>
                     <p className="text-sm">전체 펼치기/접기</p>
@@ -725,17 +759,29 @@ export function V2BomTreeConfigPanel({
                   />
                 </div>
               </div>
-          </div>
+            </CollapsibleContent>
+          </Collapsible>
 
-          {/* 고급 설정 (이력/버전 관리) - Collapsible */}
+          {/* 고급 설정 (이력/버전 관리) - Collapsible + Badge */}
-          <Collapsible>
+          <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
             <CollapsibleTrigger asChild>
-              <button className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left hover:bg-muted/50 transition-colors">
+              <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">
                   <Settings className="h-4 w-4 text-muted-foreground" />
                   <span className="text-sm font-medium">고급 설정</span>
+                  <Badge variant="secondary" className="text-[10px] h-5">
+                    2개
+                  </Badge>
                 </div>
-                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    advancedOpen && "rotate-180",
+                  )}
+                />
               </button>
             </CollapsibleTrigger>
             <CollapsibleContent>
@@ -880,12 +926,30 @@ export function V2BomTreeConfigPanel({
 
         {/* ─── 컬럼 설정 탭 ─── */}
         <TabsContent value="columns" className="mt-4 space-y-4">
-          {/* 통합 컬럼 선택 */}
+          {/* 컬럼 선택 - Collapsible + Badge */}
-          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
+            <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">
-              <Database className="h-4 w-4 text-primary" />
+                  <Database className="h-4 w-4 text-muted-foreground" />
-              <span className="text-sm font-medium">트리에 어떤 컬럼을 표시할까요?</span>
+                  <span className="text-sm font-medium">컬럼 선택</span>
+                  <Badge variant="secondary" className="text-[10px] h-5">
+                    {config.columns.length}개 선택됨
+                  </Badge>
                 </div>
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    columnSelectOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
                 <p className="text-[11px] text-muted-foreground">
                   소스 테이블 컬럼은 표시용, 디테일 테이블 컬럼은 직접 컬럼이에요
                 </p>
@@ -960,14 +1024,35 @@ export function V2BomTreeConfigPanel({
                   </div>
                 )}
               </div>
+            </CollapsibleContent>
+          </Collapsible>
 
-          {/* 선택된 컬럼 상세 */}
+          {/* 선택된 컬럼 상세 - Collapsible + Badge */}
           {config.columns.length > 0 && (
-            <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
-              <div className="flex items-center justify-between">
+              <CollapsibleTrigger asChild>
-                <span className="text-sm font-medium">선택된 컬럼 ({config.columns.length})</span>
+                <button
-                <span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span>
+                  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">
+                    <GripVertical className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">선택된 컬럼</span>
+                    <Badge variant="secondary" className="text-[10px] h-5">
+                      {config.columns.length}개
+                    </Badge>
                   </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                      selectedColumnsOpen && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+                  <span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span>
                   <div className="max-h-48 space-y-1 overflow-y-auto">
                 {config.columns.map((col, index) => (
                   <div key={col.key} className="space-y-1">
@@ -1077,6 +1162,8 @@ export function V2BomTreeConfigPanel({
                 ))}
                   </div>
                 </div>
+              </CollapsibleContent>
+            </Collapsible>
           )}
         </TabsContent>
       </Tabs>