[agent-pipeline] pipe-20260311151253-nyk7 round-9
This commit is contained in:
DDD1542
parent
fcae946a3f
commit
33e8f6e8f1
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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: "",
|
||||
|
|
|
|||
Loading…
Reference in New Issue