섹션 삭제 후 텍스트 블록 추가 버그 수정 및 버튼/구분선 스타일-속성 패널 동기화

src/features/editor/state/editorStore.ts

@@ -95,7 +95,11 @@ export interface ButtonBlockProps {
   variant?: "solid" | "outline" | "ghost";
   colorPalette?: "primary" | "muted" | "danger" | "success" | "neutral";
   fullWidth?: boolean;
+  widthMode?: "auto" | "full" | "fixed";
+  widthPx?: number;
   borderRadius?: "none" | "sm" | "md" | "lg" | "full";
+  paddingX?: number;
+  paddingY?: number;
   // 버튼 텍스트 크기 (예: "14px")
   fontSizeCustom?: string;
   // 버튼 텍스트 줄 간격 (예: "1.4")
@@ -487,6 +491,10 @@ export interface FormFieldStyleProps {
   // 필드 너비 및 레이아웃
   widthMode?: "auto" | "full" | "fixed";
   widthPx?: number;
+  paddingX?: number;
+  paddingY?: number;
+  optionGapPx?: number;
+  labelGapPx?: number;
   labelLayout?: "stacked" | "inline";
   borderRadius?: "none" | "sm" | "md" | "lg" | "full";
   // 필드 텍스트 색상/타이포그라피
@@ -597,6 +605,10 @@ export interface FormBlockProps {
   // v2 컨트롤러: 개별 폼 요소 블록과 제출 버튼을 연결하기 위한 ID 목록
   fieldIds?: string[];
   submitButtonId?: string | null;
+  // 폼 레이아웃
+  formWidthMode?: "auto" | "full" | "fixed";
+  formWidthPx?: number;
+  marginYPx?: number;
 }
 
 // 공통 블록 모델
@@ -982,7 +994,11 @@ const createEditorState = (set: any, get: any): EditorState => ({
           strokeColorCustom: "",
           textColorCustom: "",
           widthMode: "full",
+          paddingX: 12,
+          paddingY: 10,
+          optionGapPx: 4,
           labelLayout: "stacked",
+          labelGapPx: 8,
         },
         sectionId: null,
         columnId: null,
@@ -1020,7 +1036,10 @@ const createEditorState = (set: any, get: any): EditorState => ({
           strokeColorCustom: "",
           textColorCustom: "",
           widthMode: "full",
+          paddingX: 12,
+          paddingY: 10,
           labelLayout: "stacked",
+          labelGapPx: 8,
         },
         sectionId: null,
         columnId: null,
@@ -1058,7 +1077,11 @@ const createEditorState = (set: any, get: any): EditorState => ({
           strokeColorCustom: "",
           textColorCustom: "",
           widthMode: "full",
+          paddingX: 12,
+          paddingY: 10,
+          optionGapPx: 4,
           labelLayout: "stacked",
+          labelGapPx: 8,
         },
         sectionId: null,
         columnId: null,
@@ -1096,7 +1119,11 @@ const createEditorState = (set: any, get: any): EditorState => ({
           strokeColorCustom: "",
           textColorCustom: "",
           widthMode: "full",
+          paddingX: 12,
+          paddingY: 10,
+          optionGapPx: 4,
           labelLayout: "stacked",
+          labelGapPx: 8,
         },
         sectionId: null,
         columnId: null,
@@ -1136,6 +1163,7 @@ const createEditorState = (set: any, get: any): EditorState => ({
         props: {
           align: "center",
           thickness: "thin",
+          colorHex: "#475569",
         },
         sectionId,
         columnId,
@@ -1302,10 +1330,17 @@ const createEditorState = (set: any, get: any): EditorState => ({
           variant: "solid",
           colorPalette: "primary",
           fullWidth: false,
+          widthMode: "auto",
+          widthPx: 240,
           borderRadius: "md",
+          paddingX: 16,
+          paddingY: 10,
           fontSizeCustom: "14px",
-          fillColorCustom: "",
-          strokeColorCustom: "",
+          // 기본 primary/solid 버튼 색상과 동일한 커스텀 색상 값을 사용해
+          // 에디터/프리뷰/속성 패널이 모두 같은 색상을 공유하도록 한다.
+          textColorCustom: "#0b1120",
+          fillColorCustom: "#0ea5e9",
+          strokeColorCustom: "#0284c7",
         },
         sectionId,
         columnId,
@@ -1510,19 +1545,21 @@ const createEditorState = (set: any, get: any): EditorState => ({
         if (index === -1) {
           return state;
         }
+        const target = current[index];
 
-        const nextBlocks = current.filter((b) => b.id !== id);
+        let nextBlocks: Block[];
+        if (target.type === "section") {
+          // 섹션 블록이 삭제될 때는 해당 섹션 안에 속한 자식 블록들도 함께 제거한다.
+          nextBlocks = current.filter((b) => b.id !== id && b.sectionId !== id);
+        } else {
+          nextBlocks = current.filter((b) => b.id !== id);
+        }
 
         // 선택 상태는 삭제된 블록의 이전 블록 또는 다음 블록으로 이동한다.
         let nextSelected: string | null = null;
         if (nextBlocks.length > 0) {
-          const prevIndex = index - 1;
-          if (prevIndex >= 0) {
-            nextSelected = nextBlocks[prevIndex].id;
-          } else {
-            // 첫 블록이 삭제된 경우, 새 첫 블록을 선택한다.
-            nextSelected = nextBlocks[0].id;
-          }
+          const candidateIndex = Math.min(Math.max(index - 1, 0), nextBlocks.length - 1);
+          nextSelected = nextBlocks[candidateIndex].id;
         }
 
         return {