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

2025-11-20 00:53:39 +09:00
parent 211b0f8230
commit a6ef5f01cd
29 changed files with 3371 additions and 1052 deletions
@@ -0,0 +1,42 @@
+"use client";
+
+import type { ImageBlockProps } from "@/features/editor/state/editorStore";
+
+export type ImagePropertiesPanelProps = {
+  imageProps: ImageBlockProps;
+  selectedBlockId: string;
+  updateBlock: (id: string, partial: Partial<ImageBlockProps>) => void;
+};
+
+export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock }: ImagePropertiesPanelProps) {
+  return (
+    <>
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1 text-xs text-slate-400">
+          <span>이미지 URL</span>
+          <input
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            aria-label="이미지 URL"
+            value={imageProps.src}
+            onChange={(e) => {
+              updateBlock(selectedBlockId, { src: e.target.value } as any);
+            }}
+          />
+        </label>
+      </div>
+      <div className="space-y-1">
+        <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-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            aria-label="대체 텍스트"
+            value={imageProps.alt}
+            onChange={(e) => {
+              updateBlock(selectedBlockId, { alt: e.target.value } as any);
+            }}
+          />
+        </label>
+      </div>
+    </>
+  );
+}