[agent-pipeline] pipe-20260311124806-lfrk round-2

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">
+    <div className="space-y-4">
-      {/* BUSINESS TYPE 섹션 */}
+      {/* ─── 1단계: 비즈니스 타입 선택 (카드) ─── */}
-      <div className="border-b border-border/50 pb-3 mb-3">
+      <div className="space-y-2">
-        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">BUSINESS TYPE</h4>
+        <p className="text-sm font-medium">어떤 비즈니스 기능을 사용하나요?</p>
-        <div className="flex items-center justify-between py-1.5">
+        <div className="grid grid-cols-2 gap-2">
-          <span className="text-xs text-muted-foreground">비즈니스 타입</span>
+          {BIZ_TYPE_CARDS.map((card) => {
-          <div className="w-[140px]">
+            const Icon = card.icon;
-            <Select
+            const isSelected = bizType === card.value;
-              value={config.bizType || config.type || "flow"}
+            return (
-              onValueChange={(value) => updateConfig("bizType", value)}
+              <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"
+                )}
               >
-              <SelectTrigger className="h-7 text-xs">
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
-                <SelectValue placeholder="타입 선택" />
+                <span className="text-xs font-medium leading-tight">{card.title}</span>
-              </SelectTrigger>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
-              <SelectContent>
+              </button>
-                <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>
       </div>
 
-      {/* FLOW SETTINGS 섹션 */}
+      {/* ─── 2단계: 타입별 설정 ─── */}
-      {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>
+      {bizType === "flow" && (
-          <div className="flex items-center justify-between py-1.5">
+        <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">
             <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"
+              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>
-          <div className="flex items-center justify-between py-1.5">
+            <Switch
-            <span className="text-xs text-muted-foreground">편집 가능</span>
-            <Checkbox
               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>
+          <div className="flex items-center justify-between py-1">
-            <Checkbox
+            <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,10 +226,16 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
         </div>
       )}
 
-      {/* RACK SETTINGS 섹션 */}
+      {/* 랙 구조 설정 */}
-      {config.bizType === "rack" && (
+      {bizType === "rack" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">RACK SETTINGS</h4>
+          <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>
@@ -218,9 +260,14 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
                 />
               </div>
             </div>
-          <div className="flex items-center justify-between py-1.5">
+          </div>
-            <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" && (
+      {bizType === "numbering" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">NUMBERING SETTINGS</h4>
+          <div className="flex items-center gap-2">
-          <div className="flex items-center justify-between py-1.5">
+            <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"
+              className="h-7 w-[160px] text-xs"
             />
           </div>
-          </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"
+              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>
-          <div className="flex items-center justify-between py-1.5">
+            <Switch
-            <span className="text-xs text-muted-foreground">자동 생성</span>
-            <Checkbox
               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" && (
+      {bizType === "category" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">CATEGORY SETTINGS</h4>
+          <div className="flex items-center gap-2">
-          <div className="flex items-center justify-between py-1.5">
+            <FolderTree className="h-4 w-4 text-primary" />
-            <span className="text-xs text-muted-foreground">카테고리 테이블</span>
+            <span className="text-sm font-medium">카테고리 설정</span>
-            <div className="w-[140px]">
+          </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">
+                <SelectTrigger className="h-8 text-sm">
-                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
+                  <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">
+            <div>
-              <span className="text-xs text-muted-foreground">컬럼</span>
+              <p className="mb-1.5 text-xs text-muted-foreground">컬럼</p>
-              <div className="w-[140px]">
+              {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">
+                  <SelectTrigger className="h-8 text-sm">
-                    <SelectValue placeholder={loadingColumns ? "로딩 중..." : "컬럼 선택"} />
+                    <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" && (
+      {bizType === "data-mapping" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATA MAPPING</h4>
+          <div className="flex items-center gap-2">
-          <div className="flex items-center justify-between py-1.5">
+            <ArrowRightLeft className="h-4 w-4 text-primary" />
-            <span className="text-xs text-muted-foreground">소스 테이블</span>
+            <span className="text-sm font-medium">데이터 매핑 설정</span>
-            <div className="w-[140px]">
+          </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">
+                <SelectTrigger className="h-8 text-sm">
-                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
+                  <SelectValue placeholder="소스 테이블 선택" />
                 </SelectTrigger>
                 <SelectContent>
                   {tables.map((table) => (
@@ -342,18 +415,23 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
                   ))}
                 </SelectContent>
               </Select>
+            )}
           </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>
-          <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.targetTable || ""}
                 onValueChange={(value) => updateConfig("targetTable", value)}
-                disabled={loadingTables}
               >
-                <SelectTrigger className="h-7 text-xs">
+                <SelectTrigger className="h-8 text-sm">
-                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
+                  <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" && (
+      {bizType === "related-data" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">RELATED DATA</h4>
+          <div className="flex items-center gap-2">
-          <div className="flex items-center justify-between py-1.5">
+            <Link2 className="h-4 w-4 text-primary" />
-            <span className="text-xs text-muted-foreground">관련 테이블</span>
+            <span className="text-sm font-medium">관련 데이터 설정</span>
-            <div className="w-[140px]">
+          </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">
+                <SelectTrigger className="h-8 text-sm">
-                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
+                  <SelectValue placeholder="관련 테이블 선택" />
                 </SelectTrigger>
                 <SelectContent>
                   {tables.map((table) => (
@@ -394,17 +480,17 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
                   ))}
                 </SelectContent>
               </Select>
+            )}
           </div>
-          </div>
+
           {config.relatedTable && (
-            <div className="flex items-center justify-between py-1.5">
+            <div>
-              <span className="text-xs text-muted-foreground">연결 컬럼</span>
+              <p className="mb-1.5 text-xs text-muted-foreground">연결 컬럼</p>
-              <div className="w-[140px]">
               <Select
                 value={config.linkColumn || ""}
                 onValueChange={(value) => updateConfig("linkColumn", value)}
               >
-                  <SelectTrigger className="h-7 text-xs">
+                <SelectTrigger className="h-8 text-sm">
                   <SelectValue placeholder="컬럼 선택" />
                 </SelectTrigger>
                 <SelectContent>
@@ -416,20 +502,18 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
                 </SelectContent>
               </Select>
             </div>
-            </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"
+              className="h-7 w-[160px] text-xs"
             />
           </div>
         </div>
-        </div>
       )}
     </div>
   );