에디터 인라인/속성 패널 리팩터링 및 폼 전송 기본 기능 추가

2025-11-20 00:53:39 +09:00
parent 211b0f8230
commit a6ef5f01cd
29 changed files with 3371 additions and 1052 deletions
@@ -0,0 +1,51 @@
+"use client";
+
+import type { DividerBlockProps } from "@/features/editor/state/editorStore";
+
+export type DividerPropertiesPanelProps = {
+  dividerProps: DividerBlockProps;
+  selectedBlockId: string;
+  updateBlock: (id: string, partial: Partial<DividerBlockProps>) => void;
+};
+
+export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBlock }: DividerPropertiesPanelProps) {
+  return (
+    <>
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <span>정렬</span>
+          <select
+            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            aria-label="구분선 정렬"
+            value={dividerProps.align}
+            onChange={(e) => {
+              const value = e.target.value as DividerBlockProps["align"];
+              updateBlock(selectedBlockId, { align: value } as any);
+            }}
+          >
+            <option value="left">왼쪽</option>
+            <option value="center">가운데</option>
+            <option value="right">오른쪽</option>
+          </select>
+        </label>
+      </div>
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <span>두께</span>
+          <select
+            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            aria-label="구분선 두께"
+            value={dividerProps.thickness}
+            onChange={(e) => {
+              const value = e.target.value as DividerBlockProps["thickness"];
+              updateBlock(selectedBlockId, { thickness: value } as any);
+            }}
+          >
+            <option value="thin">얇게</option>
+            <option value="medium">보통</option>
+          </select>
+        </label>
+      </div>
+    </>
+  );
+}