[agent-pipeline] pipe-20260311122226-4dkx round-3

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

@@ -2,16 +2,78 @@
 
 /**
  * V2Group 설정 패널
- * 통합 그룹 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 그룹 타입 카드 선택 -> 타입별 설정 -> 고급 설정(접힘)
  */
 
-import React from "react";
-import { Label } from "@/components/ui/label";
+import React, { useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
-import { Plus, Trash2 } from "lucide-react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  LayoutList,
+  Rows3,
+  ChevronsDownUp,
+  SquareStack,
+  AppWindow,
+  FileInput,
+  Settings,
+  ChevronDown,
+  Plus,
+  Trash2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── 그룹 타입 카드 정의 ───
+const GROUP_TYPE_CARDS = [
+  {
+    value: "section",
+    icon: LayoutList,
+    title: "섹션",
+    description: "기본 영역 구분이에요",
+  },
+  {
+    value: "tabs",
+    icon: Rows3,
+    title: "탭",
+    description: "탭으로 내용을 나눠요",
+  },
+  {
+    value: "accordion",
+    icon: ChevronsDownUp,
+    title: "아코디언",
+    description: "접었다 펼 수 있어요",
+  },
+  {
+    value: "card",
+    icon: SquareStack,
+    title: "카드 섹션",
+    description: "카드 형태로 묶어요",
+  },
+  {
+    value: "modal",
+    icon: AppWindow,
+    title: "모달",
+    description: "팝업으로 표시해요",
+  },
+  {
+    value: "form-modal",
+    icon: FileInput,
+    title: "폼 모달",
+    description: "입력 폼 팝업이에요",
+  },
+] as const;
 
 interface V2GroupConfigPanelProps {
   config: Record<string, any>;
@@ -22,10 +84,17 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
   config,
   onChange,
 }) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
+  const currentGroupType = config.groupType || config.type || "section";
+  const isSectionType = currentGroupType === "section" || currentGroupType === "accordion";
+  const isModalType = currentGroupType === "modal" || currentGroupType === "form-modal";
+  const isTabsType = currentGroupType === "tabs";
+
   const tabs = config.tabs || [];
 
   const addTab = () => {
@@ -45,138 +114,165 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
   };
 
   return (
-    <div className="space-y-1">
-      {/* GROUP 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">GROUP 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.groupType || config.type || "section"}
-              onValueChange={(value) => updateConfig("groupType", value)}
-            >
-              <SelectTrigger className="h-7 text-xs">
-                <SelectValue placeholder="타입 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="section">섹션</SelectItem>
-                <SelectItem value="tabs">탭</SelectItem>
-                <SelectItem value="accordion">아코디언</SelectItem>
-                <SelectItem value="card">카드 섹션</SelectItem>
-                <SelectItem value="modal">모달</SelectItem>
-                <SelectItem value="form-modal">폼 모달</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-3 gap-2">
+          {GROUP_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = currentGroupType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("groupType", 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>
 
-      {/* TITLE 섹션 */}
-      <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">TITLE</h4>
+      {/* ─── 2단계: 기본 설정 ─── */}
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <span className="text-sm font-medium">기본 설정</span>
+
         <div className="flex items-center justify-between py-1.5">
           <span className="text-xs text-muted-foreground">제목</span>
-          <div className="w-[140px]">
-            <Input
-              value={config.title || ""}
-              onChange={(e) => updateConfig("title", e.target.value)}
-              placeholder="그룹 제목"
-              className="h-7 text-xs"
-            />
-          </div>
+          <Input
+            value={config.title || ""}
+            onChange={(e) => updateConfig("title", e.target.value)}
+            placeholder="그룹 제목"
+            className="h-8 w-[180px] text-sm"
+          />
         </div>
       </div>
 
-      {/* TABS 섹션 - 탭 타입일 때만 */}
-      {config.groupType === "tabs" && (
-        <div className="border-b border-border/50 pb-3 mb-3">
-          <div className="flex items-center justify-between py-2">
-            <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">TABS</h4>
+      {/* ─── 3단계: 타입별 설정 ─── */}
+
+      {/* 탭 타입: 탭 목록 관리 */}
+      {isTabsType && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Rows3 className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">탭 목록</span>
+            </div>
             <Button
               type="button"
-              variant="ghost"
+              variant="outline"
               size="sm"
               onClick={addTab}
-              className="h-6 px-2 text-xs"
+              className="h-7 px-2 text-xs"
             >
-              <Plus className="h-3 w-3 mr-1" />
+              <Plus className="mr-1 h-3 w-3" />
               추가
             </Button>
           </div>
-          <div className="space-y-1.5 max-h-40 overflow-y-auto">
-            {tabs.map((tab: any, index: number) => (
-              <div key={index} className="flex items-center gap-1.5">
-                <Input
-                  value={tab.id || ""}
-                  onChange={(e) => updateTab(index, "id", e.target.value)}
-                  placeholder="ID"
-                  className="h-7 text-xs flex-1"
-                />
-                <Input
-                  value={tab.label || ""}
-                  onChange={(e) => updateTab(index, "label", e.target.value)}
-                  placeholder="라벨"
-                  className="h-7 text-xs flex-1"
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => removeTab(index)}
-                  className="h-7 w-7 p-0 text-destructive"
-                >
-                  <Trash2 className="h-3 w-3" />
-                </Button>
-              </div>
-            ))}
-            {tabs.length === 0 && (
-              <p className="text-xs text-muted-foreground text-center py-2">
-                탭을 추가해주세요
-              </p>
-            )}
-          </div>
+
+          {tabs.length > 0 ? (
+            <div className="max-h-40 space-y-1.5 overflow-y-auto">
+              {tabs.map((tab: any, index: number) => (
+                <div key={index} className="flex items-center gap-1.5">
+                  <Input
+                    value={tab.id || ""}
+                    onChange={(e) => updateTab(index, "id", e.target.value)}
+                    placeholder="ID"
+                    className="h-8 flex-1 text-sm"
+                  />
+                  <Input
+                    value={tab.label || ""}
+                    onChange={(e) => updateTab(index, "label", e.target.value)}
+                    placeholder="라벨"
+                    className="h-8 flex-1 text-sm"
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeTab(index)}
+                    className="text-destructive h-8 w-8 shrink-0"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-6 text-muted-foreground">
+              <Rows3 className="mx-auto mb-2 h-8 w-8 opacity-30" />
+              <p className="text-sm">아직 탭이 없어요</p>
+              <p className="text-xs mt-0.5">위의 추가 버튼으로 탭을 만들어보세요</p>
+            </div>
+          )}
         </div>
       )}
 
-      {/* SECTION OPTIONS 섹션 - 섹션/아코디언일 때 */}
-      {(config.groupType === "section" || config.groupType === "accordion" || !config.groupType) && (
-        <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">SECTION OPTIONS</h4>
-
-          <div className="flex items-center justify-between py-1.5">
-            <span className="text-xs text-muted-foreground">접기/펴기 가능</span>
-            <Checkbox
+      {/* 섹션/아코디언 타입: 접기/펴기 옵션 */}
+      {isSectionType && (
+        <div className="space-y-2">
+          <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.collapsible || false}
               onCheckedChange={(checked) => updateConfig("collapsible", checked)}
             />
           </div>
 
           {config.collapsible && (
-            <div className="flex items-center justify-between py-1.5">
-              <span className="text-xs text-muted-foreground">기본으로 펼침</span>
-              <Checkbox
-                checked={config.defaultOpen !== false}
-                onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
-              />
+            <div className="ml-4 border-l-2 border-primary/20 pl-3">
+              <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.defaultOpen !== false}
+                  onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
+                />
+              </div>
             </div>
           )}
         </div>
       )}
 
-      {/* MODAL OPTIONS 섹션 - 모달/폼모달일 때 */}
-      {(config.groupType === "modal" || config.groupType === "form-modal") && (
-        <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">MODAL OPTIONS</h4>
+      {/* 모달/폼모달 타입: 모달 옵션 */}
+      {isModalType && (
+        <div className="space-y-3">
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <AppWindow 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>
-            <div className="w-[140px]">
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">모달 크기</span>
               <Select
                 value={config.modalSize || "md"}
                 onValueChange={(value) => updateConfig("modalSize", value)}
               >
-                <SelectTrigger className="h-7 text-xs">
+                <SelectTrigger className="h-8 w-[180px] text-sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -190,17 +286,27 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
             </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">
+                모달 우측 상단에 X 버튼이 표시돼요
+              </p>
+            </div>
+            <Switch
               checked={config.closeable !== false}
               onCheckedChange={(checked) => updateConfig("closeable", 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.backdrop !== false}
               onCheckedChange={(checked) => updateConfig("backdrop", checked)}
             />
@@ -208,17 +314,42 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
         </div>
       )}
 
-      {/* DISPLAY 섹션 */}
-      <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">DISPLAY</h4>
-        <div className="flex items-center justify-between py-1.5">
-          <span className="text-xs text-muted-foreground">헤더 표시</span>
-          <Checkbox
-            checked={config.showHeader !== false}
-            onCheckedChange={(checked) => updateConfig("showHeader", checked)}
-          />
-        </div>
-      </div>
+      {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <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>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <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.showHeader !== false}
+                onCheckedChange={(checked) => updateConfig("showHeader", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </div>
   );
 };