132 lines
4.7 KiB
TypeScript
132 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import type { ImageBlockProps } from "@/features/editor/state/editorStore";
|
|
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
|
|
|
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>
|
|
|
|
<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>
|
|
</>
|
|
);
|
|
}
|