From 5eb10fd9a90e6830211c262f3df73d7e60dbae4c Mon Sep 17 00:00:00 2001 From: DDD1542 Date: Thu, 12 Mar 2026 00:19:59 +0900 Subject: [PATCH] [agent-pipeline] pipe-20260311151253-nyk7 round-2 --- .../V2SectionPaperConfigPanel.tsx | 255 ++++++++++++++++++ .../components/v2-section-paper/index.ts | 4 +- 2 files changed, 257 insertions(+), 2 deletions(-) create mode 100644 frontend/components/v2/config-panels/V2SectionPaperConfigPanel.tsx diff --git a/frontend/components/v2/config-panels/V2SectionPaperConfigPanel.tsx b/frontend/components/v2/config-panels/V2SectionPaperConfigPanel.tsx new file mode 100644 index 00000000..509d7508 --- /dev/null +++ b/frontend/components/v2/config-panels/V2SectionPaperConfigPanel.tsx @@ -0,0 +1,255 @@ +"use client"; + +/** + * V2SectionPaper 설정 패널 + * 토스식 단계별 UX: 배경색 카드 선택 -> 여백/모서리 카드 선택 -> 고급 설정(접힘) + */ + +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, Palette } from "lucide-react"; +import { cn } from "@/lib/utils"; + +// ─── 배경색 카드 정의 ─── +const BG_CARDS = [ + { value: "default", label: "기본", description: "연한 회색" }, + { value: "muted", label: "회색", description: "조금 더 진한" }, + { value: "accent", label: "강조", description: "연한 파랑" }, + { value: "primary", label: "브랜드", description: "브랜드 컬러" }, + { value: "custom", label: "커스텀", description: "직접 선택" }, +] as const; + +// ─── 내부 여백 카드 정의 ─── +const PADDING_CARDS = [ + { value: "none", label: "없음", size: "0px" }, + { value: "sm", label: "작게", size: "12px" }, + { value: "md", label: "중간", size: "16px" }, + { value: "lg", label: "크게", size: "24px" }, +] as const; + +// ─── 둥근 모서리 카드 정의 ─── +const ROUNDED_CARDS = [ + { value: "none", label: "없음", size: "0px" }, + { value: "sm", label: "작게", size: "2px" }, + { value: "md", label: "중간", size: "6px" }, + { value: "lg", label: "크게", size: "8px" }, +] as const; + +// ─── 그림자 카드 정의 ─── +const SHADOW_CARDS = [ + { value: "none", label: "없음" }, + { value: "sm", label: "작게" }, + { value: "md", label: "중간" }, +] as const; + +interface V2SectionPaperConfigPanelProps { + config: Record; + onChange: (config: Record) => void; +} + +export const V2SectionPaperConfigPanel: React.FC< + V2SectionPaperConfigPanelProps +> = ({ config, onChange }) => { + const [advancedOpen, setAdvancedOpen] = useState(false); + + const updateConfig = (field: string, value: any) => { + const newConfig = { ...config, [field]: value }; + onChange(newConfig); + + if (typeof window !== "undefined") { + window.dispatchEvent( + new CustomEvent("componentConfigChanged", { + detail: { config: newConfig }, + }) + ); + } + }; + + const selectedBg = config.backgroundColor || "default"; + + return ( +
+ {/* ─── 1단계: 배경색 카드 선택 ─── */} +
+

배경색

+
+ {BG_CARDS.map((card) => { + const isSelected = selectedBg === card.value; + return ( + + ); + })} +
+

+ 색종이 컨셉의 배경색을 선택해요 +

+
+ + {/* 커스텀 색상 선택 */} + {selectedBg === "custom" && ( +
+
+ 커스텀 색상 + updateConfig("customColor", e.target.value)} + className="h-8 w-[80px] cursor-pointer" + /> +
+
+ )} + + {/* ─── 2단계: 내부 여백 카드 선택 ─── */} +
+

내부 여백

+
+ {PADDING_CARDS.map((card) => { + const isSelected = (config.padding || "md") === card.value; + return ( + + ); + })} +
+
+ + {/* ─── 3단계: 모서리 카드 선택 ─── */} +
+

둥근 모서리

+
+ {ROUNDED_CARDS.map((card) => { + const isSelected = + (config.roundedCorners || "md") === card.value; + return ( + + ); + })} +
+
+ + {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */} + + + + + +
+ {/* 그림자 */} +
+ 그림자 +
+ {SHADOW_CARDS.map((card) => { + const isSelected = + (config.shadow || "none") === card.value; + return ( + + ); + })} +
+
+ + {/* 테두리 표시 */} +
+
+

미묘한 테두리

+

+ 섹션 경계를 살짝 구분하는 테두리에요 +

+
+ + updateConfig("showBorder", checked) + } + /> +
+
+ + +
+ ); +}; + +V2SectionPaperConfigPanel.displayName = "V2SectionPaperConfigPanel"; + +export default V2SectionPaperConfigPanel; diff --git a/frontend/lib/registry/components/v2-section-paper/index.ts b/frontend/lib/registry/components/v2-section-paper/index.ts index 5c45275a..c67f5886 100644 --- a/frontend/lib/registry/components/v2-section-paper/index.ts +++ b/frontend/lib/registry/components/v2-section-paper/index.ts @@ -3,7 +3,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition"; import { ComponentCategory } from "@/types/component"; import { SectionPaperComponent } from "./SectionPaperComponent"; -import { SectionPaperConfigPanel } from "./SectionPaperConfigPanel"; +import { V2SectionPaperConfigPanel } from "@/components/v2/config-panels/V2SectionPaperConfigPanel"; /** * Section Paper 컴포넌트 정의 @@ -25,7 +25,7 @@ export const V2SectionPaperDefinition = createComponentDefinition({ showBorder: false, }, defaultSize: { width: 800, height: 200 }, - configPanel: SectionPaperConfigPanel, + configPanel: V2SectionPaperConfigPanel, icon: "Square", tags: ["섹션", "그룹", "배경", "컨테이너", "색종이", "paper"], version: "1.0.0",