diff --git a/frontend/components/v2/config-panels/V2NumberingRuleConfigPanel.tsx b/frontend/components/v2/config-panels/V2NumberingRuleConfigPanel.tsx new file mode 100644 index 00000000..d30ac6e7 --- /dev/null +++ b/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 = ({ + 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 ( +
+ {/* ─── 1단계: 최대 규칙 수 카드 선택 ─── */} +
+

최대 파트 수

+
+ {MAX_RULES_CARDS.map((card) => { + const isSelected = (config.maxRules || 6) === card.value; + return ( + + ); + })} +
+

+ 하나의 채번 규칙에 추가할 수 있는 최대 파트 개수에요 +

+
+ + {/* ─── 2단계: 카드 레이아웃 카드 선택 ─── */} +
+

파트 배치 방향

+
+ {LAYOUT_CARDS.map((card) => { + const Icon = card.icon; + const isSelected = (config.cardLayout || "vertical") === card.value; + return ( + + ); + })} +
+
+ + {/* ─── 3단계: 표시 설정 (Switch) ─── */} +
+

표시 설정

+
+
+
+

미리보기 표시

+

+ 코드 미리보기를 항상 보여줘요 +

+
+ updateConfig("showPreview", checked)} + /> +
+
+
+

규칙 목록 표시

+

+ 저장된 규칙 목록을 보여줘요 +

+
+ updateConfig("showRuleList", checked)} + /> +
+
+
+ + {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */} + + + + + +
+
+
+

읽기 전용

+

+ 편집 기능을 비활성화해요 +

+
+ updateConfig("readonly", checked)} + /> +
+
+ + +
+ ); +}; + +V2NumberingRuleConfigPanel.displayName = "V2NumberingRuleConfigPanel"; + +export default V2NumberingRuleConfigPanel; diff --git a/frontend/components/v2/config-panels/V2StatusCountConfigPanel.tsx b/frontend/components/v2/config-panels/V2StatusCountConfigPanel.tsx new file mode 100644 index 00000000..5f8f793c --- /dev/null +++ b/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) => void; +} + +export const V2StatusCountConfigPanel: React.FC = ({ + config, + onChange, +}) => { + const handleChange = (newConfig: Partial) => { + onChange(newConfig); + + if (typeof window !== "undefined") { + window.dispatchEvent( + new CustomEvent("componentConfigChanged", { + detail: { config: { ...config, ...newConfig } }, + }) + ); + } + }; + + return ( + + ); +}; + +V2StatusCountConfigPanel.displayName = "V2StatusCountConfigPanel"; + +export default V2StatusCountConfigPanel; diff --git a/frontend/lib/registry/components/v2-numbering-rule/index.ts b/frontend/lib/registry/components/v2-numbering-rule/index.ts index 92d42d34..5f37f1fb 100644 --- a/frontend/lib/registry/components/v2-numbering-rule/index.ts +++ b/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", diff --git a/frontend/lib/registry/components/v2-status-count/index.ts b/frontend/lib/registry/components/v2-status-count/index.ts index 27495f0c..e02bebbf 100644 --- a/frontend/lib/registry/components/v2-status-count/index.ts +++ b/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: "",