1차 싱크 완료

src/app/editor/forms/FormControllerPanel.tsx

@@ -2,6 +2,7 @@
 
 import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
 
 interface FormControllerPanelProps {
   block: Block; // type === "form"
@@ -188,6 +189,61 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
         />
       </div>
 
+      <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
+        <h3 className="text-[11px] font-semibold text-slate-200">폼 스타일</h3>
+        <ColorPickerField
+          label="폼 배경색"
+          ariaLabelColorInput="폼 배경색 피커"
+          ariaLabelHexInput="폼 배경색 HEX"
+          value={
+            formProps.backgroundColorCustom && formProps.backgroundColorCustom.trim() !== ""
+              ? formProps.backgroundColorCustom
+              : TEXT_COLOR_PALETTE[0]?.color ?? "#e5e7eb"
+          }
+          onChange={(hex) => {
+            updateBlock(selectedBlockId, {
+              backgroundColorCustom: hex,
+            } as any);
+          }}
+          palette={TEXT_COLOR_PALETTE}
+          onPaletteSelect={(item) => {
+            updateBlock(selectedBlockId, {
+              backgroundColorCustom: item.color,
+            } as any);
+          }}
+        />
+      </div>
+
+      <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
+        <h3 className="text-[11px] font-semibold text-slate-200">폼 메시지</h3>
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <span>성공 메시지</span>
+          <input
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            placeholder="예: 성공적으로 전송되었습니다."
+            value={formProps.successMessage ?? ""}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                successMessage: e.target.value,
+              } as any)
+            }
+          />
+        </label>
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <span>에러 메시지</span>
+          <input
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            placeholder="예: 전송 중 오류가 발생했습니다."
+            value={formProps.errorMessage ?? ""}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                errorMessage: e.target.value,
+              } as any)
+            }
+          />
+        </label>
+      </div>
+
       <div className="space-y-3 border-t border-slate-800 pt-3 mt-4">
         <h3 className="text-[11px] font-semibold text-slate-200">폼 컨트롤러</h3>