From f72649291c4a95ec30d21c9d3b2a4fda87f5d2cd Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Wed, 11 Mar 2026 21:55:21 +0900
Subject: [PATCH] [agent-pipeline] pipe-20260311124806-lfrk round-2

---
 .../v2/config-panels/V2BizConfigPanel.tsx     | 440 +++++++++++-------
 1 file changed, 262 insertions(+), 178 deletions(-)

diff --git a/frontend/components/v2/config-panels/V2BizConfigPanel.tsx b/frontend/components/v2/config-panels/V2BizConfigPanel.tsx
index c116c595..60ffeb46 100644
--- a/frontend/components/v2/config-panels/V2BizConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2BizConfigPanel.tsx
@@ -2,14 +2,25 @@
 
 /**
  * V2Biz 설정 패널
- * 통합 비즈니스 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 비즈니스 타입 카드 선택 -> 타입별 설정 -> 고급 설정(접힘)
  */
 
 import React, { useState, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import {
+  GitBranch,
+  LayoutGrid,
+  MapPin,
+  Hash,
+  FolderTree,
+  ArrowRightLeft,
+  Link2,
+  Loader2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 import { tableTypeApi } from "@/lib/api/screen";
 
 interface V2BizConfigPanelProps {
@@ -27,6 +38,16 @@ interface ColumnOption {
   displayName: string;
 }
 
+const BIZ_TYPE_CARDS = [
+  { value: "flow", icon: GitBranch, title: "플로우", description: "워크플로우를 구성해요" },
+  { value: "rack", icon: LayoutGrid, title: "랙 구조", description: "창고 렉 위치를 관리해요" },
+  { value: "map", icon: MapPin, title: "지도", description: "위치 정보를 표시해요" },
+  { value: "numbering", icon: Hash, title: "채번 규칙", description: "자동 번호를 생성해요" },
+  { value: "category", icon: FolderTree, title: "카테고리", description: "분류 체계를 관리해요" },
+  { value: "data-mapping", icon: ArrowRightLeft, title: "데이터 매핑", description: "테이블 간 매핑해요" },
+  { value: "related-data", icon: Link2, title: "관련 데이터", description: "연결된 데이터를 조회해요" },
+] as const;
+
 export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
   config,
   onChange,
@@ -128,61 +149,76 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
     loadColumns();
   }, [config.tableName]);
 
+  const bizType = config.bizType || config.type || "flow";
+
   return (
-    <div className="space-y-1">
-      {/* BUSINESS TYPE 섹션 */}
-      <div className="border-b border-border/50 pb-3 mb-3">
-        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">BUSINESS TYPE</h4>
-        <div className="flex items-center justify-between py-1.5">
-          <span className="text-xs text-muted-foreground">비즈니스 타입</span>
-          <div className="w-[140px]">
-            <Select
-              value={config.bizType || config.type || "flow"}
-              onValueChange={(value) => updateConfig("bizType", value)}
-            >
-              <SelectTrigger className="h-7 text-xs">
-                <SelectValue placeholder="타입 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="flow">플로우</SelectItem>
-                <SelectItem value="rack">랙 구조</SelectItem>
-                <SelectItem value="map">지도</SelectItem>
-                <SelectItem value="numbering">채번 규칙</SelectItem>
-                <SelectItem value="category">카테고리</SelectItem>
-                <SelectItem value="data-mapping">데이터 매핑</SelectItem>
-                <SelectItem value="related-data">관련 데이터</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+    <div className="space-y-4">
+      {/* ─── 1단계: 비즈니스 타입 선택 (카드) ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">어떤 비즈니스 기능을 사용하나요?</p>
+        <div className="grid grid-cols-2 gap-2">
+          {BIZ_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = bizType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("bizType", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">{card.title}</span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
+              </button>
+            );
+          })}
         </div>
       </div>
 
-      {/* FLOW SETTINGS 섹션 */}
-      {config.bizType === "flow" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">FLOW SETTINGS</h4>
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">플로우 ID</span>
-            <div className="w-[140px]">
-              <Input
-                type="number"
-                value={config.flowId || ""}
-                onChange={(e) => updateConfig("flowId", e.target.value ? Number(e.target.value) : undefined)}
-                placeholder="플로우 ID"
-                className="h-7 text-xs"
-              />
-            </div>
+      {/* ─── 2단계: 타입별 설정 ─── */}
+
+      {/* 플로우 설정 */}
+      {bizType === "flow" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <GitBranch className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">플로우 설정</span>
           </div>
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">편집 가능</span>
-            <Checkbox
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">플로우 ID</span>
+            <Input
+              type="number"
+              value={config.flowId || ""}
+              onChange={(e) => updateConfig("flowId", e.target.value ? Number(e.target.value) : undefined)}
+              placeholder="플로우 ID"
+              className="h-7 w-[160px] text-xs"
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">편집 가능</p>
+              <p className="text-[11px] text-muted-foreground">플로우를 직접 수정할 수 있어요</p>
+            </div>
+            <Switch
               checked={config.editable || false}
               onCheckedChange={(checked) => updateConfig("editable", checked)}
             />
           </div>
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">미니맵 표시</span>
-            <Checkbox
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">미니맵 표시</p>
+              <p className="text-[11px] text-muted-foreground">전체 구조를 한눈에 볼 수 있어요</p>
+            </div>
+            <Switch
               checked={config.showMinimap || false}
               onCheckedChange={(checked) => updateConfig("showMinimap", checked)}
             />
@@ -190,37 +226,48 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
         </div>
       )}
 
-      {/* RACK SETTINGS 섹션 */}
-      {config.bizType === "rack" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">RACK SETTINGS</h4>
-          <div className="flex gap-2">
-            <div className="flex-1">
-              <Label className="text-[10px] text-muted-foreground">행 수</Label>
-              <Input
-                type="number"
-                value={config.rows || ""}
-                onChange={(e) => updateConfig("rows", e.target.value ? Number(e.target.value) : undefined)}
-                placeholder="5"
-                min="1"
-                className="h-7 text-xs"
-              />
-            </div>
-            <div className="flex-1">
-              <Label className="text-[10px] text-muted-foreground">열 수</Label>
-              <Input
-                type="number"
-                value={config.columns || ""}
-                onChange={(e) => updateConfig("columns", e.target.value ? Number(e.target.value) : undefined)}
-                placeholder="10"
-                min="1"
-                className="h-7 text-xs"
-              />
+      {/* 랙 구조 설정 */}
+      {bizType === "rack" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <LayoutGrid className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">랙 구조 설정</span>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs text-muted-foreground">렉 크기</p>
+            <div className="flex gap-2">
+              <div className="flex-1">
+                <Label className="text-[10px] text-muted-foreground">행 수</Label>
+                <Input
+                  type="number"
+                  value={config.rows || ""}
+                  onChange={(e) => updateConfig("rows", e.target.value ? Number(e.target.value) : undefined)}
+                  placeholder="5"
+                  min="1"
+                  className="h-7 text-xs"
+                />
+              </div>
+              <div className="flex-1">
+                <Label className="text-[10px] text-muted-foreground">열 수</Label>
+                <Input
+                  type="number"
+                  value={config.columns || ""}
+                  onChange={(e) => updateConfig("columns", e.target.value ? Number(e.target.value) : undefined)}
+                  placeholder="10"
+                  min="1"
+                  className="h-7 text-xs"
+                />
+              </div>
             </div>
           </div>
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">라벨 표시</span>
-            <Checkbox
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">라벨 표시</p>
+              <p className="text-[11px] text-muted-foreground">각 셀에 위치 라벨이 표시돼요</p>
+            </div>
+            <Switch
               checked={config.showLabels !== false}
               onCheckedChange={(checked) => updateConfig("showLabels", checked)}
             />
@@ -228,36 +275,41 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
         </div>
       )}
 
-      {/* NUMBERING SETTINGS 섹션 */}
-      {config.bizType === "numbering" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">NUMBERING SETTINGS</h4>
-          <div className="flex items-center justify-between py-1.5">
+      {/* 채번 규칙 설정 */}
+      {bizType === "numbering" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Hash className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">채번 규칙 설정</span>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
             <span className="text-xs text-muted-foreground">채번 규칙 ID</span>
-            <div className="w-[140px]">
-              <Input
-                type="number"
-                value={config.ruleId || ""}
-                onChange={(e) => updateConfig("ruleId", e.target.value ? Number(e.target.value) : undefined)}
-                placeholder="규칙 ID"
-                className="h-7 text-xs"
-              />
-            </div>
+            <Input
+              type="number"
+              value={config.ruleId || ""}
+              onChange={(e) => updateConfig("ruleId", e.target.value ? Number(e.target.value) : undefined)}
+              placeholder="규칙 ID"
+              className="h-7 w-[160px] text-xs"
+            />
           </div>
-          <div className="flex items-center justify-between py-1.5">
+
+          <div className="flex items-center justify-between py-1">
             <span className="text-xs text-muted-foreground">접두사</span>
-            <div className="w-[140px]">
-              <Input
-                value={config.prefix || ""}
-                onChange={(e) => updateConfig("prefix", e.target.value)}
-                placeholder="예: INV-"
-                className="h-7 text-xs"
-              />
-            </div>
+            <Input
+              value={config.prefix || ""}
+              onChange={(e) => updateConfig("prefix", e.target.value)}
+              placeholder="예: INV-"
+              className="h-7 w-[160px] text-xs"
+            />
           </div>
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">자동 생성</span>
-            <Checkbox
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">자동 생성</p>
+              <p className="text-[11px] text-muted-foreground">저장할 때 번호가 자동으로 생성돼요</p>
+            </div>
+            <Switch
               checked={config.autoGenerate !== false}
               onCheckedChange={(checked) => updateConfig("autoGenerate", checked)}
             />
@@ -265,23 +317,31 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
         </div>
       )}
 
-      {/* CATEGORY SETTINGS 섹션 */}
-      {config.bizType === "category" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">CATEGORY SETTINGS</h4>
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">카테고리 테이블</span>
-            <div className="w-[140px]">
+      {/* 카테고리 설정 */}
+      {bizType === "category" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <FolderTree className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">카테고리 설정</span>
+          </div>
+
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">카테고리 테이블</p>
+            {loadingTables ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                테이블 로딩 중...
+              </div>
+            ) : (
               <Select
                 value={config.tableName || ""}
                 onValueChange={(value) => {
                   updateConfig("tableName", value);
                   updateConfig("columnName", "");
                 }}
-                disabled={loadingTables}
               >
-                <SelectTrigger className="h-7 text-xs">
-                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="테이블 선택" />
                 </SelectTrigger>
                 <SelectContent>
                   {tables.map((table) => (
@@ -291,19 +351,24 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-            </div>
+            )}
           </div>
+
           {config.tableName && (
-            <div className="flex items-center justify-between py-1.5">
-              <span className="text-xs text-muted-foreground">컬럼</span>
-              <div className="w-[140px]">
+            <div>
+              <p className="mb-1.5 text-xs text-muted-foreground">컬럼</p>
+              {loadingColumns ? (
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  컬럼 로딩 중...
+                </div>
+              ) : (
                 <Select
                   value={config.columnName || ""}
                   onValueChange={(value) => updateConfig("columnName", value)}
-                  disabled={loadingColumns}
                 >
-                  <SelectTrigger className="h-7 text-xs">
-                    <SelectValue placeholder={loadingColumns ? "로딩 중..." : "컬럼 선택"} />
+                  <SelectTrigger className="h-8 text-sm">
+                    <SelectValue placeholder="컬럼 선택" />
                   </SelectTrigger>
                   <SelectContent>
                     {categoryColumns.map((col) => (
@@ -313,26 +378,34 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
                     ))}
                   </SelectContent>
                 </Select>
-              </div>
+              )}
             </div>
           )}
         </div>
       )}
 
-      {/* DATA MAPPING 섹션 */}
-      {config.bizType === "data-mapping" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATA MAPPING</h4>
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">소스 테이블</span>
-            <div className="w-[140px]">
+      {/* 데이터 매핑 설정 */}
+      {bizType === "data-mapping" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <ArrowRightLeft className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">데이터 매핑 설정</span>
+          </div>
+
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">소스 테이블</p>
+            {loadingTables ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                테이블 로딩 중...
+              </div>
+            ) : (
               <Select
                 value={config.sourceTable || ""}
                 onValueChange={(value) => updateConfig("sourceTable", value)}
-                disabled={loadingTables}
               >
-                <SelectTrigger className="h-7 text-xs">
-                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="소스 테이블 선택" />
                 </SelectTrigger>
                 <SelectContent>
                   {tables.map((table) => (
@@ -342,18 +415,23 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-            </div>
+            )}
           </div>
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">대상 테이블</span>
-            <div className="w-[140px]">
+
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">대상 테이블</p>
+            {loadingTables ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                테이블 로딩 중...
+              </div>
+            ) : (
               <Select
                 value={config.targetTable || ""}
                 onValueChange={(value) => updateConfig("targetTable", value)}
-                disabled={loadingTables}
               >
-                <SelectTrigger className="h-7 text-xs">
-                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="대상 테이블 선택" />
                 </SelectTrigger>
                 <SelectContent>
                   {tables.map((table) => (
@@ -363,28 +441,36 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-            </div>
+            )}
           </div>
         </div>
       )}
 
-      {/* RELATED DATA 섹션 */}
-      {config.bizType === "related-data" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">RELATED DATA</h4>
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">관련 테이블</span>
-            <div className="w-[140px]">
+      {/* 관련 데이터 설정 */}
+      {bizType === "related-data" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Link2 className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">관련 데이터 설정</span>
+          </div>
+
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">관련 테이블</p>
+            {loadingTables ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                테이블 로딩 중...
+              </div>
+            ) : (
               <Select
                 value={config.relatedTable || ""}
                 onValueChange={(value) => {
                   updateConfig("relatedTable", value);
                   updateConfig("linkColumn", "");
                 }}
-                disabled={loadingTables}
               >
-                <SelectTrigger className="h-7 text-xs">
-                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="관련 테이블 선택" />
                 </SelectTrigger>
                 <SelectContent>
                   {tables.map((table) => (
@@ -394,40 +480,38 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-            </div>
+            )}
           </div>
+
           {config.relatedTable && (
-            <div className="flex items-center justify-between py-1.5">
-              <span className="text-xs text-muted-foreground">연결 컬럼</span>
-              <div className="w-[140px]">
-                <Select
-                  value={config.linkColumn || ""}
-                  onValueChange={(value) => updateConfig("linkColumn", value)}
-                >
-                  <SelectTrigger className="h-7 text-xs">
-                    <SelectValue placeholder="컬럼 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {relatedColumns.map((col) => (
-                      <SelectItem key={col.columnName} value={col.columnName}>
-                        {col.displayName}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
+            <div>
+              <p className="mb-1.5 text-xs text-muted-foreground">연결 컬럼</p>
+              <Select
+                value={config.linkColumn || ""}
+                onValueChange={(value) => updateConfig("linkColumn", value)}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="컬럼 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {relatedColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
           )}
-          <div className="flex items-center justify-between py-1.5">
+
+          <div className="flex items-center justify-between py-1">
             <span className="text-xs text-muted-foreground">버튼 텍스트</span>
-            <div className="w-[140px]">
-              <Input
-                value={config.buttonText || ""}
-                onChange={(e) => updateConfig("buttonText", e.target.value)}
-                placeholder="관련 데이터 보기"
-                className="h-7 text-xs"
-              />
-            </div>
+            <Input
+              value={config.buttonText || ""}
+              onChange={(e) => updateConfig("buttonText", e.target.value)}
+              placeholder="관련 데이터 보기"
+              className="h-7 w-[160px] text-xs"
+            />
           </div>
         </div>
       )}