섹션 레이아웃 및 템플릿 스타일 개선

src/app/editor/panels/ImagePropertiesPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ImageBlockProps } from "@/features/editor/state/editorStore";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
 
 export type ImagePropertiesPanelProps = {
   imageProps: ImageBlockProps;
@@ -37,6 +38,94 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
           />
         </label>
       </div>
+
+      <div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
+        <h4 className="text-[11px] font-semibold text-slate-200">이미지 스타일</h4>
+
+        {/* 정렬 */}
+        <label className="flex flex-col gap-1">
+          <span>정렬</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            aria-label="이미지 정렬"
+            value={imageProps.align ?? "center"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                align: e.target.value as ImageBlockProps["align"],
+              } as any)
+            }
+          >
+            <option value="left">왼쪽</option>
+            <option value="center">가운데</option>
+            <option value="right">오른쪽</option>
+          </select>
+        </label>
+
+        {/* 너비 모드 */}
+        <label className="flex flex-col gap-1">
+          <span>너비 모드</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            aria-label="이미지 너비 모드"
+            value={imageProps.widthMode ?? "auto"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                widthMode: e.target.value as ImageBlockProps["widthMode"],
+              } as any)
+            }
+          >
+            <option value="auto">내용에 맞춤</option>
+            <option value="fixed">고정 너비 (px)</option>
+          </select>
+        </label>
+
+        {(imageProps.widthMode ?? "auto") === "fixed" && (
+          <NumericPropertyControl
+            label="고정 너비 (px)"
+            unitLabel="(px)"
+            value={imageProps.widthPx ?? 320}
+            min={40}
+            max={1200}
+            step={10}
+            presets={[
+              { id: "sm", label: "작게", value: 240 },
+              { id: "md", label: "보통", value: 320 },
+              { id: "lg", label: "넓게", value: 480 },
+            ]}
+            onChangeValue={(v) => {
+              updateBlock(selectedBlockId, {
+                widthPx: v,
+              } as any);
+            }}
+          />
+        )}
+
+        {/* 모서리 둥글기 */}
+        <NumericPropertyControl
+          label="모서리 둥글기"
+          value={(() => {
+            const r = imageProps.borderRadius ?? "md";
+            return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
+          })()}
+          min={0}
+          max={8}
+          step={1}
+          presets={[
+            { id: "none", label: "없음", value: 0 },
+            { id: "sm", label: "작게", value: 2 },
+            { id: "md", label: "보통", value: 4 },
+            { id: "lg", label: "크게", value: 6 },
+            { id: "full", label: "완전 둥글게", value: 8 },
+          ]}
+          onChangeValue={(v) => {
+            const next =
+              v <= 0 ? "none" : v <= 2 ? "sm" : v <= 5 ? "md" : v <= 7 ? "lg" : "full";
+            updateBlock(selectedBlockId, {
+              borderRadius: next,
+            } as any);
+          }}
+        />
+      </div>
     </>
   );
 }