[agent-pipeline] pipe-20260311151253-nyk7 round-9

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

@@ -0,0 +1,194 @@
+"use client";
+
+/**
+ * V2NumberingRule 설정 패널
+ * 토스식 단계별 UX: 최대 규칙 수(카드선택) -> 카드 레이아웃(카드선택) -> 표시/동작(Switch) -> 고급(접힘)
+ */
+
+import React, { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Settings, ChevronDown, LayoutList, LayoutGrid } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { NumberingRuleComponentConfig } from "@/lib/registry/components/v2-numbering-rule/types";
+
+const MAX_RULES_CARDS = [
+  { value: 3, label: "3개", desc: "간단한 코드" },
+  { value: 6, label: "6개", desc: "기본 (권장)" },
+  { value: 8, label: "8개", desc: "복잡한 코드" },
+  { value: 10, label: "10개", desc: "최대" },
+] as const;
+
+const LAYOUT_CARDS = [
+  { value: "vertical", label: "세로", desc: "위에서 아래로", icon: LayoutList },
+  { value: "horizontal", label: "가로", desc: "왼쪽에서 오른쪽으로", icon: LayoutGrid },
+] as const;
+
+interface V2NumberingRuleConfigPanelProps {
+  config: NumberingRuleComponentConfig;
+  onChange: (config: NumberingRuleComponentConfig) => void;
+}
+
+export const V2NumberingRuleConfigPanel: React.FC<V2NumberingRuleConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const updateConfig = (field: keyof NumberingRuleComponentConfig, value: any) => {
+    const newConfig = { ...config, [field]: value };
+    onChange(newConfig);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 최대 규칙 수 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">최대 파트 수</p>
+        <div className="grid grid-cols-4 gap-2">
+          {MAX_RULES_CARDS.map((card) => {
+            const isSelected = (config.maxRules || 6) === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("maxRules", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <span className="text-xs font-medium">{card.label}</span>
+                <span className="text-[10px] text-muted-foreground mt-0.5">
+                  {card.desc}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+        <p className="text-[11px] text-muted-foreground">
+          하나의 채번 규칙에 추가할 수 있는 최대 파트 개수에요
+        </p>
+      </div>
+
+      {/* ─── 2단계: 카드 레이아웃 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">파트 배치 방향</p>
+        <div className="grid grid-cols-2 gap-2">
+          {LAYOUT_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = (config.cardLayout || "vertical") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("cardLayout", card.value)}
+                className={cn(
+                  "flex items-center gap-2 rounded-lg border p-3 text-left transition-all",
+                  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 shrink-0 text-muted-foreground" />
+                <div>
+                  <span className="text-xs font-medium block">{card.label}</span>
+                  <span className="text-[10px] text-muted-foreground block">
+                    {card.desc}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 3단계: 표시 설정 (Switch) ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">표시 설정</p>
+        <div className="rounded-lg border bg-muted/30 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.showPreview !== false}
+              onCheckedChange={(checked) => updateConfig("showPreview", checked)}
+            />
+          </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.showRuleList !== false}
+              onCheckedChange={(checked) => updateConfig("showRuleList", checked)}
+            />
+          </div>
+        </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.readonly || false}
+                onCheckedChange={(checked) => updateConfig("readonly", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2NumberingRuleConfigPanel.displayName = "V2NumberingRuleConfigPanel";
+
+export default V2NumberingRuleConfigPanel;

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

@@ -0,0 +1,47 @@
+"use client";
+
+/**
+ * V2StatusCount 설정 패널
+ * 기존 StatusCountConfigPanel의 모든 로직(테이블/컬럼 Combobox, 동적 아이템 관리,
+ * 카테고리 값 자동 로드 등)을 유지하면서 componentConfigChanged 이벤트를 추가하여
+ * 실시간 업데이트 지원
+ */
+
+import React from "react";
+import {
+  StatusCountConfigPanel,
+} from "@/lib/registry/components/v2-status-count/StatusCountConfigPanel";
+import type { StatusCountConfig } from "@/lib/registry/components/v2-status-count/types";
+
+interface V2StatusCountConfigPanelProps {
+  config: StatusCountConfig;
+  onChange: (config: Partial<StatusCountConfig>) => void;
+}
+
+export const V2StatusCountConfigPanel: React.FC<V2StatusCountConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  const handleChange = (newConfig: Partial<StatusCountConfig>) => {
+    onChange(newConfig);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: { ...config, ...newConfig } },
+        })
+      );
+    }
+  };
+
+  return (
+    <StatusCountConfigPanel
+      config={config}
+      onChange={handleChange}
+    />
+  );
+};
+
+V2StatusCountConfigPanel.displayName = "V2StatusCountConfigPanel";
+
+export default V2StatusCountConfigPanel;

frontend/lib/registry/components/v2-numbering-rule/index.ts

@@ -4,7 +4,7 @@ import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { NumberingRuleWrapper } from "./NumberingRuleComponent";
-import { NumberingRuleConfigPanel } from "./NumberingRuleConfigPanel";
+import { V2NumberingRuleConfigPanel } from "@/components/v2/config-panels/V2NumberingRuleConfigPanel";
 import { defaultConfig } from "./config";
 
 /**
@@ -25,7 +25,7 @@ export const V2NumberingRuleDefinition = createComponentDefinition({
     height: 800,
     gridColumnSpan: "12",
   },
-  configPanel: NumberingRuleConfigPanel,
+  configPanel: V2NumberingRuleConfigPanel,
   icon: "Hash",
   tags: ["코드", "채번", "규칙", "표시", "자동생성"],
   version: "1.0.0",

frontend/lib/registry/components/v2-status-count/index.ts

@@ -3,7 +3,7 @@
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { StatusCountWrapper } from "./StatusCountComponent";
-import { StatusCountConfigPanel } from "./StatusCountConfigPanel";
+import { V2StatusCountConfigPanel } from "@/components/v2/config-panels/V2StatusCountConfigPanel";
 
 export const V2StatusCountDefinition = createComponentDefinition({
   id: "v2-status-count",
@@ -13,7 +13,7 @@ export const V2StatusCountDefinition = createComponentDefinition({
   category: ComponentCategory.DISPLAY,
   webType: "text",
   component: StatusCountWrapper,
-  configPanel: StatusCountConfigPanel,
+  configPanel: V2StatusCountConfigPanel,
   defaultConfig: {
     title: "상태 현황",
     tableName: "",