에디터 인라인/속성 패널 리팩터링 및 폼 전송 기본 기능 추가
This commit is contained in:
+604
-436
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,295 @@
|
||||
"use client";
|
||||
|
||||
import type { ButtonBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
||||
|
||||
export type ButtonPropertiesPanelProps = {
|
||||
buttonProps: ButtonBlockProps;
|
||||
selectedBlockId: string;
|
||||
updateBlock: (id: string, partial: Partial<ButtonBlockProps>) => void;
|
||||
};
|
||||
|
||||
export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBlock }: ButtonPropertiesPanelProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>버튼 텍스트</span>
|
||||
<textarea
|
||||
className="w-full min-h-[60px] rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label="버튼 텍스트"
|
||||
value={buttonProps.label}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { label: 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={buttonProps.href}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { href: 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>
|
||||
<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={buttonProps.align ?? "left"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<ButtonBlockProps["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">
|
||||
<NumericPropertyControl
|
||||
label="버튼 크기"
|
||||
value={(() => {
|
||||
const s = buttonProps.size ?? "md";
|
||||
return s === "xs" ? 1 : s === "sm" ? 2 : s === "lg" ? 4 : s === "xl" ? 5 : 3;
|
||||
})()}
|
||||
min={1}
|
||||
max={5}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "xs", label: "아주 작게", value: 1 },
|
||||
{ id: "sm", label: "작게", value: 2 },
|
||||
{ id: "md", label: "보통", value: 3 },
|
||||
{ id: "lg", label: "크게", value: 4 },
|
||||
{ id: "xl", label: "아주 크게", value: 5 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const next = v <= 1 ? "xs" : v === 2 ? "sm" : v === 4 ? "lg" : v >= 5 ? "xl" : "md";
|
||||
updateBlock(selectedBlockId, { size: next } as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="텍스트 색상"
|
||||
ariaLabelColorInput="버튼 텍스트 색상 피커"
|
||||
ariaLabelHexInput="버튼 텍스트 색상 HEX"
|
||||
value={
|
||||
buttonProps.textColorCustom && buttonProps.textColorCustom.startsWith("#")
|
||||
? buttonProps.textColorCustom
|
||||
: "#f9fafb"
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
textColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</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={buttonProps.variant ?? "solid"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<ButtonBlockProps["variant"]>;
|
||||
updateBlock(selectedBlockId, { variant: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="solid">채움</option>
|
||||
<option value="outline">외곽선</option>
|
||||
<option value="ghost">고스트</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="채움 색상"
|
||||
ariaLabelColorInput="버튼 채움 색상 피커"
|
||||
ariaLabelHexInput="버튼 채움 색상 HEX"
|
||||
value={
|
||||
buttonProps.fillColorCustom && buttonProps.fillColorCustom.startsWith("#")
|
||||
? buttonProps.fillColorCustom
|
||||
: TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
fillColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="외곽선 색상"
|
||||
ariaLabelColorInput="버튼 외곽선 색상 피커"
|
||||
ariaLabelHexInput="버튼 외곽선 색상 HEX"
|
||||
value={
|
||||
buttonProps.strokeColorCustom && buttonProps.strokeColorCustom.startsWith("#")
|
||||
? buttonProps.strokeColorCustom
|
||||
: TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: hex,
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
onPaletteSelect={(item) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strokeColorCustom: item.color,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="모서리 둥글기"
|
||||
value={(() => {
|
||||
const r = buttonProps.borderRadius ?? "md";
|
||||
return r === "none" ? 0 : r === "sm" ? 1 : r === "lg" ? 3 : r === "full" ? 4 : 2;
|
||||
})()}
|
||||
min={0}
|
||||
max={4}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "none", label: "없음", value: 0 },
|
||||
{ id: "sm", label: "작게", value: 1 },
|
||||
{ id: "md", label: "보통", value: 2 },
|
||||
{ id: "lg", label: "크게", value: 3 },
|
||||
{ id: "full", label: "완전 둥글게", value: 4 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const next =
|
||||
v <= 0 ? "none" : v === 1 ? "sm" : v === 3 ? "lg" : v >= 4 ? "full" : "md";
|
||||
updateBlock(selectedBlockId, { borderRadius: next } as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="글자 크기"
|
||||
unitLabel="(px)"
|
||||
value={(() => {
|
||||
const raw = buttonProps.fontSizeCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
if (match) return Number(match[1]);
|
||||
// 기본 버튼 텍스트 크기: md 스케일(16px) 기준
|
||||
return 16;
|
||||
})()}
|
||||
min={10}
|
||||
max={32}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "xs", label: "XS", value: 12 },
|
||||
{ id: "sm", label: "S", value: 14 },
|
||||
{ id: "base", label: "M", value: 16 },
|
||||
{ id: "lg", label: "L", value: 18 },
|
||||
{ id: "xl", label: "XL", value: 20 },
|
||||
{ id: "2xl", label: "2XL", value: 24 },
|
||||
{ id: "3xl", label: "3XL", value: 30 },
|
||||
]}
|
||||
onChangeValue={(px) => {
|
||||
// 버튼은 텍스트 스케일 상태 없이 px만 저장하지만,
|
||||
// 프리셋 값은 TextPropertiesPanel과 동일한 테이블을 사용한다.
|
||||
updateBlock(selectedBlockId, {
|
||||
fontSizeCustom: `${px}px`,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="줄 간격"
|
||||
value={(() => {
|
||||
const raw = buttonProps.lineHeightCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
if (match) return Number(match[1]);
|
||||
return 1.4;
|
||||
})()}
|
||||
min={0.8}
|
||||
max={3}
|
||||
step={0.05}
|
||||
presets={[
|
||||
{ id: "tight", label: "좁게", value: 1.1 },
|
||||
{ id: "normal", label: "보통", value: 1.4 },
|
||||
{ id: "relaxed", label: "넓게", value: 1.8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
lineHeightCustom: v.toString(),
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="글자 간격"
|
||||
unitLabel="(px)"
|
||||
value={(() => {
|
||||
const raw = buttonProps.letterSpacingCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
if (match) {
|
||||
const em = Number(match[1]);
|
||||
if (Number.isFinite(em)) return em * 16;
|
||||
}
|
||||
return 0;
|
||||
})()}
|
||||
min={-2}
|
||||
max={10}
|
||||
step={0.1}
|
||||
presets={[
|
||||
{ id: "tighter", label: "아주 좁게", value: -1.5 },
|
||||
{ id: "tight", label: "좁게", value: -0.5 },
|
||||
{ id: "normal", label: "보통", value: 0 },
|
||||
{ id: "wide", label: "넓게", value: 1 },
|
||||
{ id: "wider", label: "아주 넓게", value: 2 },
|
||||
]}
|
||||
onChangeValue={(px) => {
|
||||
const em = px / 16;
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${em}em`,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="flex items-center justify-between text-xs text-slate-400">
|
||||
<span>가로 전체 사용</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={buttonProps.fullWidth ?? false}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { fullWidth: e.target.checked } as any);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
|
||||
import type { ListBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export type ListPropertiesPanelProps = {
|
||||
listProps: ListBlockProps;
|
||||
selectedBlockId: string;
|
||||
updateBlock: (id: string, partial: Partial<ListBlockProps>) => void;
|
||||
};
|
||||
|
||||
export function ListPropertiesPanel({ listProps, selectedBlockId, updateBlock }: ListPropertiesPanelProps) {
|
||||
const firstItem = listProps.items && listProps.items.length > 0 ? listProps.items[0] : "";
|
||||
|
||||
return (
|
||||
<>
|
||||
<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={firstItem}
|
||||
onChange={(e) => {
|
||||
const nextItems = [...(listProps.items ?? [])];
|
||||
if (nextItems.length === 0) {
|
||||
nextItems.push(e.target.value);
|
||||
} else {
|
||||
nextItems[0] = e.target.value;
|
||||
}
|
||||
updateBlock(selectedBlockId, { items: nextItems } as any);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-slate-400">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={listProps.ordered}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { ordered: e.target.checked } as any);
|
||||
}}
|
||||
/>
|
||||
<span>번호 매기기</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<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={listProps.align}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as ListBlockProps["align"];
|
||||
updateBlock(selectedBlockId, { align: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="left">왼쪽</option>
|
||||
<option value="center">가운데</option>
|
||||
<option value="right">오른쪽</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export type SectionPropertiesPanelProps = {
|
||||
sectionProps: SectionBlockProps;
|
||||
selectedBlockId: string;
|
||||
updateBlock: (id: string, partial: Partial<SectionBlockProps>) => void;
|
||||
};
|
||||
|
||||
export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) {
|
||||
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={sectionProps.background ?? "default"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<SectionBlockProps["background"]>;
|
||||
updateBlock(selectedBlockId, { background: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="default">기본</option>
|
||||
<option value="muted">Muted</option>
|
||||
<option value="primary">Primary</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={sectionProps.paddingY ?? "md"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<SectionBlockProps["paddingY"]>;
|
||||
updateBlock(selectedBlockId, { paddingY: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="sm">작게</option>
|
||||
<option value="md">보통</option>
|
||||
<option value="lg">크게</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,505 @@
|
||||
"use client";
|
||||
|
||||
import type { TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { PropertySliderField } from "@/features/editor/components/PropertySliderField";
|
||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
|
||||
export type TextPropertiesPanelProps = {
|
||||
textProps: TextBlockProps;
|
||||
selectedBlockId: string;
|
||||
updateBlock: (id: string, partial: Partial<TextBlockProps>) => void;
|
||||
editingBlockId: string | null;
|
||||
setEditingText: (value: string) => void;
|
||||
};
|
||||
|
||||
export function TextPropertiesPanel({
|
||||
textProps,
|
||||
selectedBlockId,
|
||||
updateBlock,
|
||||
editingBlockId,
|
||||
setEditingText,
|
||||
}: TextPropertiesPanelProps) {
|
||||
const fontSizeMode = textProps.fontSizeMode ?? "scale";
|
||||
const fallbackScale =
|
||||
textProps.size === "sm" ? "sm" : textProps.size === "lg" ? "lg" : "base";
|
||||
const fontSizeScale = textProps.fontSizeScale ?? fallbackScale;
|
||||
const lineHeightMode = textProps.lineHeightMode ?? "scale";
|
||||
const lineHeightScale = textProps.lineHeightScale ?? "normal";
|
||||
const fontWeightMode = textProps.fontWeightMode ?? "scale";
|
||||
const fontWeightScale = textProps.fontWeightScale ?? "normal";
|
||||
const colorPalette = textProps.colorPalette ?? "default";
|
||||
const maxWidthMode = textProps.maxWidthMode ?? "scale";
|
||||
const maxWidthScale = textProps.maxWidthScale ?? "none";
|
||||
|
||||
const fontSizeScaleToPx: Record<NonNullable<TextBlockProps["fontSizeScale"]>, number> = {
|
||||
xs: 12,
|
||||
sm: 14,
|
||||
base: 16,
|
||||
lg: 18,
|
||||
xl: 20,
|
||||
"2xl": 24,
|
||||
"3xl": 30,
|
||||
};
|
||||
|
||||
const parsedFontSize = (() => {
|
||||
const raw = textProps.fontSizeCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
if (match) return Number(match[1]);
|
||||
return fontSizeScaleToPx[fontSizeScale];
|
||||
})();
|
||||
|
||||
const parsedLineHeight = (() => {
|
||||
const raw = textProps.lineHeightCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
if (match) return Number(match[1]);
|
||||
return 1.5;
|
||||
})();
|
||||
|
||||
// 글자 간격: 내부 저장은 em 이지만, UI 에서는 px 단위로 보여준다.
|
||||
const parsedLetterSpacingPx = (() => {
|
||||
const raw = textProps.letterSpacingCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
if (match) {
|
||||
const em = Number(match[1]);
|
||||
if (Number.isFinite(em)) {
|
||||
return em * 16; // 1em = 16px 기준으로 환산
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
})();
|
||||
|
||||
const letterSpacingPreset = (() => {
|
||||
const px = parsedLetterSpacingPx;
|
||||
if (px <= -1) return "tighter" as const;
|
||||
if (px < 0) return "tight" as const;
|
||||
if (px < 1) return "normal" as const;
|
||||
if (px < 3) return "wide" as const;
|
||||
return "wider" as const;
|
||||
})();
|
||||
|
||||
const parsedFontWeight = (() => {
|
||||
const raw = textProps.fontWeightCustom ?? "";
|
||||
const match = raw.match(/([0-9]{3})/);
|
||||
if (match) return Number(match[1]);
|
||||
switch (fontWeightScale) {
|
||||
case "medium":
|
||||
return 500;
|
||||
case "semibold":
|
||||
return 600;
|
||||
case "bold":
|
||||
return 700;
|
||||
default:
|
||||
return 400;
|
||||
}
|
||||
})();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-slate-400">선택한 텍스트 블록 내용</p>
|
||||
<textarea
|
||||
className="w-full min-h-[80px] rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
||||
aria-label="선택한 텍스트 블록 내용"
|
||||
value={textProps.text}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
updateBlock(selectedBlockId, { text: value });
|
||||
if (editingBlockId === selectedBlockId) {
|
||||
setEditingText(value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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={textProps.align}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as "left" | "center" | "right";
|
||||
updateBlock(selectedBlockId, { align: value });
|
||||
}}
|
||||
>
|
||||
<option value="left">왼쪽</option>
|
||||
<option value="center">가운데</option>
|
||||
<option value="right">오른쪽</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between text-[11px] text-slate-400">
|
||||
<span>텍스트 스타일</span>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`px-2 py-0.5 rounded border text-[11px] ${
|
||||
textProps.underline
|
||||
? "border-sky-500 bg-sky-900/40 text-sky-100"
|
||||
: "border-slate-700 bg-slate-900 text-slate-300"
|
||||
}`}
|
||||
onClick={() => {
|
||||
updateBlock(selectedBlockId, {
|
||||
underline: !textProps.underline,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
밑줄
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`px-2 py-0.5 rounded border text-[11px] ${
|
||||
textProps.strike
|
||||
? "border-sky-500 bg-sky-900/40 text-sky-100"
|
||||
: "border-slate-700 bg-slate-900 text-slate-300"
|
||||
}`}
|
||||
onClick={() => {
|
||||
updateBlock(selectedBlockId, {
|
||||
strike: !textProps.strike,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
가운데줄
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`px-2 py-0.5 rounded border text-[11px] ${
|
||||
textProps.italic
|
||||
? "border-sky-500 bg-sky-900/40 text-sky-100"
|
||||
: "border-slate-700 bg-slate-900 text-slate-300"
|
||||
}`}
|
||||
onClick={() => {
|
||||
updateBlock(selectedBlockId, {
|
||||
italic: !textProps.italic,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
이탤릭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="글자 크기"
|
||||
unitLabel="(px)"
|
||||
value={Number.isFinite(parsedFontSize) ? parsedFontSize : 16}
|
||||
min={10}
|
||||
max={72}
|
||||
step={1}
|
||||
presets={(
|
||||
["xs", "sm", "base", "lg", "xl", "2xl", "3xl"] as NonNullable<
|
||||
TextBlockProps["fontSizeScale"]
|
||||
>[]
|
||||
).map((scale) => ({
|
||||
id: scale,
|
||||
label:
|
||||
scale === "xs"
|
||||
? "XS"
|
||||
: scale === "sm"
|
||||
? "S"
|
||||
: scale === "base"
|
||||
? "M"
|
||||
: scale === "lg"
|
||||
? "L"
|
||||
: scale === "xl"
|
||||
? "XL"
|
||||
: scale === "2xl"
|
||||
? "2XL"
|
||||
: "3XL",
|
||||
value: fontSizeScaleToPx[scale],
|
||||
}))}
|
||||
onChangeValue={(px) => {
|
||||
const raw = textProps.fontSizeCustom ?? "";
|
||||
const suffixMatch = raw.match(/px|rem|em|%/);
|
||||
const suffix = suffixMatch ? suffixMatch[0] : "px";
|
||||
|
||||
const entries = Object.entries(fontSizeScaleToPx) as [
|
||||
NonNullable<TextBlockProps["fontSizeScale"]>,
|
||||
number,
|
||||
][];
|
||||
const closest = entries.reduce(
|
||||
(best, [scale, value]) => {
|
||||
const dist = Math.abs(value - px);
|
||||
if (dist < best.dist) return { scale, dist };
|
||||
return best;
|
||||
},
|
||||
{ scale: fontSizeScale as NonNullable<TextBlockProps["fontSizeScale"]>, dist: Infinity },
|
||||
).scale;
|
||||
|
||||
updateBlock(selectedBlockId, {
|
||||
fontSizeScale: closest,
|
||||
fontSizeCustom: `${px}${suffix}`,
|
||||
fontSizeMode: "custom",
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>글자 간격</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className="w-32 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
||||
aria-label="글자 간격 프리셋"
|
||||
value={letterSpacingPreset}
|
||||
onChange={(e) => {
|
||||
const preset = e.target.value as
|
||||
| "tighter"
|
||||
| "tight"
|
||||
| "normal"
|
||||
| "wide"
|
||||
| "wider";
|
||||
|
||||
const presetPxMap: Record<
|
||||
"tighter" | "tight" | "normal" | "wide" | "wider",
|
||||
number
|
||||
> = {
|
||||
tighter: -1.5,
|
||||
tight: -0.5,
|
||||
normal: 0,
|
||||
wide: 1,
|
||||
wider: 2,
|
||||
};
|
||||
|
||||
const px = presetPxMap[preset];
|
||||
const em = px / 16;
|
||||
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${em}em`,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
<option value="tighter">아주 좁게</option>
|
||||
<option value="tight">좁게</option>
|
||||
<option value="normal">보통</option>
|
||||
<option value="wide">넓게</option>
|
||||
<option value="wider">아주 넓게</option>
|
||||
</select>
|
||||
|
||||
<PropertySliderField
|
||||
label=""
|
||||
ariaLabelSlider="글자 간격 슬라이더"
|
||||
ariaLabelInput="글자 간격 커스텀 (px)"
|
||||
value={Number.isFinite(parsedLetterSpacingPx) ? parsedLetterSpacingPx : 0}
|
||||
min={-2}
|
||||
max={10}
|
||||
step={0.1}
|
||||
onChange={(px) => {
|
||||
const em = px / 16;
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${em}em`,
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="줄 간격"
|
||||
unitLabel=""
|
||||
value={Number.isFinite(parsedLineHeight) ? parsedLineHeight : 1.5}
|
||||
min={-1}
|
||||
max={3}
|
||||
step={0.05}
|
||||
presets={[
|
||||
{ id: "tight", label: "좁게", value: 1.25 },
|
||||
{ id: "snug", label: "약간 좁게", value: 1.35 },
|
||||
{ id: "normal", label: "보통", value: 1.5 },
|
||||
{ id: "relaxed", label: "넓게", value: 1.7 },
|
||||
{ id: "loose", label: "아주 넓게", value: 1.9 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const preset: Record<NonNullable<TextBlockProps["lineHeightScale"]>, number> = {
|
||||
tight: 1.25,
|
||||
snug: 1.35,
|
||||
normal: 1.5,
|
||||
relaxed: 1.7,
|
||||
loose: 1.9,
|
||||
};
|
||||
|
||||
const entries = Object.entries(preset) as [
|
||||
NonNullable<TextBlockProps["lineHeightScale"]>,
|
||||
number,
|
||||
][];
|
||||
const closest = entries.reduce(
|
||||
(best, [scale, value]) => {
|
||||
const dist = Math.abs(value - v);
|
||||
if (dist < best.dist) return { scale, dist };
|
||||
return best;
|
||||
},
|
||||
{ scale: lineHeightScale as NonNullable<TextBlockProps["lineHeightScale"]>, dist: Infinity },
|
||||
).scale;
|
||||
|
||||
updateBlock(selectedBlockId, {
|
||||
lineHeightScale: closest,
|
||||
lineHeightCustom: v.toString(),
|
||||
lineHeightMode: "custom",
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="굵기"
|
||||
value={Number.isFinite(parsedFontWeight) ? parsedFontWeight : 400}
|
||||
min={100}
|
||||
max={900}
|
||||
step={100}
|
||||
presets={(
|
||||
["normal", "medium", "semibold", "bold"] as NonNullable<
|
||||
TextBlockProps["fontWeightScale"]
|
||||
>[]
|
||||
).map((scale) => ({
|
||||
id: scale,
|
||||
label:
|
||||
scale === "normal"
|
||||
? "보통"
|
||||
: scale === "medium"
|
||||
? "중간"
|
||||
: scale === "semibold"
|
||||
? "세미볼드"
|
||||
: "볼드",
|
||||
value:
|
||||
scale === "normal"
|
||||
? 400
|
||||
: scale === "medium"
|
||||
? 500
|
||||
: scale === "semibold"
|
||||
? 600
|
||||
: 700,
|
||||
}))}
|
||||
onChangeValue={(v) => {
|
||||
const preset: Record<NonNullable<TextBlockProps["fontWeightScale"]>, number> = {
|
||||
normal: 400,
|
||||
medium: 500,
|
||||
semibold: 600,
|
||||
bold: 700,
|
||||
};
|
||||
|
||||
const entries = Object.entries(preset) as [
|
||||
NonNullable<TextBlockProps["fontWeightScale"]>,
|
||||
number,
|
||||
][];
|
||||
const closest = entries.reduce(
|
||||
(best, [scale, value]) => {
|
||||
const dist = Math.abs(value - v);
|
||||
if (dist < best.dist) return { scale, dist };
|
||||
return best;
|
||||
},
|
||||
{ scale: fontWeightScale as NonNullable<TextBlockProps["fontWeightScale"]>, dist: Infinity },
|
||||
).scale;
|
||||
|
||||
updateBlock(selectedBlockId, {
|
||||
fontWeightScale: closest,
|
||||
fontWeightCustom: v.toString(),
|
||||
fontWeightMode: "custom",
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="텍스트 색상"
|
||||
ariaLabelColorInput="텍스트 색상 피커"
|
||||
ariaLabelHexInput="텍스트 색상 HEX"
|
||||
value={
|
||||
(textProps.colorCustom && textProps.colorCustom.startsWith("#")
|
||||
? textProps.colorCustom
|
||||
: TEXT_COLOR_PALETTE.find((p) => p.id === colorPalette)?.color ?? "#ffffff")
|
||||
}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
colorCustom: hex,
|
||||
colorMode: "custom",
|
||||
} as any);
|
||||
}}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
selectedPaletteId={colorPalette}
|
||||
onPaletteSelect={(item) => {
|
||||
const paletteId = item.id as NonNullable<TextBlockProps["colorPalette"]>;
|
||||
updateBlock(selectedBlockId, {
|
||||
colorPalette: paletteId,
|
||||
colorCustom: item.color,
|
||||
colorMode: "custom",
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>최대 너비</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className="w-32 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
||||
aria-label="최대 너비 프리셋"
|
||||
value={maxWidthScale}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<TextBlockProps["maxWidthScale"]>;
|
||||
let custom = textProps.maxWidthCustom ?? "";
|
||||
if (value === "prose") custom = "60ch";
|
||||
else if (value === "narrow") custom = "40ch";
|
||||
else custom = "";
|
||||
updateBlock(selectedBlockId, {
|
||||
maxWidthScale: value,
|
||||
maxWidthMode: custom ? "custom" : "scale",
|
||||
maxWidthCustom: custom,
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
<option value="none">제한 없음</option>
|
||||
<option value="prose">본문 폭 (60ch)</option>
|
||||
<option value="narrow">좁게 (40ch)</option>
|
||||
</select>
|
||||
<input
|
||||
type="range"
|
||||
min={20}
|
||||
max={120}
|
||||
step={5}
|
||||
aria-label="최대 너비 슬라이더 (ch 단위)"
|
||||
value={(() => {
|
||||
const raw = textProps.maxWidthCustom ?? "";
|
||||
const match = raw.match(/([0-9]+)ch/);
|
||||
if (match) return Number(match[1]);
|
||||
if (maxWidthScale === "prose") return 60;
|
||||
if (maxWidthScale === "narrow") return 40;
|
||||
return 120;
|
||||
})()}
|
||||
onChange={(e) => {
|
||||
const ch = Number(e.target.value || 60);
|
||||
updateBlock(selectedBlockId, {
|
||||
maxWidthCustom: `${ch}ch`,
|
||||
maxWidthMode: "custom",
|
||||
} as any);
|
||||
}}
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<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="최대 너비 커스텀"
|
||||
placeholder="예: 600px, 40rem, 80%, 60ch"
|
||||
value={textProps.maxWidthCustom ?? ""}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
maxWidthCustom: e.target.value,
|
||||
maxWidthMode: "custom",
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export function createBlogTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId } = opts;
|
||||
|
||||
const columns: SectionBlockProps["columns"] = [
|
||||
{ id: `${sectionId}_col_1`, span: 4 },
|
||||
{ id: `${sectionId}_col_2`, span: 4 },
|
||||
{ id: `${sectionId}_col_3`, span: 4 },
|
||||
];
|
||||
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "lg",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: sectionProps,
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const postDefinitions = [
|
||||
{ title: "블로그 포스트 1", summary: "첫 번째 포스트 요약을 여기에 입력하세요." },
|
||||
{ title: "블로그 포스트 2", summary: "두 번째 포스트 요약을 여기에 입력하세요." },
|
||||
{ title: "블로그 포스트 3", summary: "세 번째 포스트 요약을 여기에 입력하세요." },
|
||||
];
|
||||
|
||||
const blogBlocks: Block[] = columns.flatMap((col, index) => {
|
||||
const post = postDefinitions[index] ?? postDefinitions[0];
|
||||
|
||||
const titleId = createId();
|
||||
const summaryId = createId();
|
||||
|
||||
const titleProps: TextBlockProps = {
|
||||
text: post.title,
|
||||
align: "left",
|
||||
size: "lg",
|
||||
} as any;
|
||||
|
||||
const summaryProps: TextBlockProps = {
|
||||
text: post.summary,
|
||||
align: "left",
|
||||
size: "sm",
|
||||
} as any;
|
||||
|
||||
const titleBlock: Block = {
|
||||
id: titleId,
|
||||
type: "text",
|
||||
props: titleProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
const summaryBlock: Block = {
|
||||
id: summaryId,
|
||||
type: "text",
|
||||
props: summaryProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
return [titleBlock, summaryBlock];
|
||||
});
|
||||
|
||||
const blocks: Block[] = [sectionBlock, ...blogBlocks];
|
||||
const lastSelectedId = blogBlocks[blogBlocks.length - 1]?.id ?? sectionId;
|
||||
|
||||
return { blocks, lastSelectedId };
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export function createCtaTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId } = opts;
|
||||
|
||||
const columns: SectionBlockProps["columns"] = [
|
||||
{ id: `${sectionId}_col_1`, span: 12 },
|
||||
];
|
||||
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "primary",
|
||||
paddingY: "md",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: sectionProps,
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const firstColumnId = `${sectionId}_col_1`;
|
||||
|
||||
const textId = createId();
|
||||
const textProps: TextBlockProps = {
|
||||
text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.",
|
||||
align: "center",
|
||||
size: "base",
|
||||
} as any;
|
||||
const textBlock: Block = {
|
||||
id: textId,
|
||||
type: "text",
|
||||
props: textProps,
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const buttonId = createId();
|
||||
const buttonProps: ButtonBlockProps = {
|
||||
label: "CTA 버튼",
|
||||
href: "#",
|
||||
align: "center",
|
||||
size: "md",
|
||||
variant: "solid",
|
||||
colorPalette: "primary",
|
||||
fullWidth: false,
|
||||
borderRadius: "md",
|
||||
};
|
||||
const buttonBlock: Block = {
|
||||
id: buttonId,
|
||||
type: "button",
|
||||
props: buttonProps,
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const blocks: Block[] = [sectionBlock, textBlock, buttonBlock];
|
||||
const lastSelectedId = buttonId;
|
||||
|
||||
return { blocks, lastSelectedId };
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export function createFaqTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId } = opts;
|
||||
|
||||
const columns: SectionBlockProps["columns"] = [
|
||||
{ id: `${sectionId}_col_1`, span: 12 },
|
||||
];
|
||||
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "md",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: sectionProps,
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const firstColumnId = `${sectionId}_col_1`;
|
||||
|
||||
const faqPairs = [
|
||||
{
|
||||
question: "자주 묻는 질문 1",
|
||||
answer: "첫 번째 질문에 대한 답변을 여기에 입력하세요.",
|
||||
},
|
||||
{
|
||||
question: "자주 묻는 질문 2",
|
||||
answer: "두 번째 질문에 대한 답변을 여기에 입력하세요.",
|
||||
},
|
||||
{
|
||||
question: "자주 묻는 질문 3",
|
||||
answer: "세 번째 질문에 대한 답변을 여기에 입력하세요.",
|
||||
},
|
||||
];
|
||||
|
||||
const faqBlocks: Block[] = faqPairs.flatMap((pair) => {
|
||||
const qId = createId();
|
||||
const aId = createId();
|
||||
|
||||
const questionProps: TextBlockProps = {
|
||||
text: pair.question,
|
||||
align: "left",
|
||||
size: "lg",
|
||||
} as any;
|
||||
|
||||
const answerProps: TextBlockProps = {
|
||||
text: pair.answer,
|
||||
align: "left",
|
||||
size: "sm",
|
||||
} as any;
|
||||
|
||||
const questionBlock: Block = {
|
||||
id: qId,
|
||||
type: "text",
|
||||
props: questionProps,
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const answerBlock: Block = {
|
||||
id: aId,
|
||||
type: "text",
|
||||
props: answerProps,
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
return [questionBlock, answerBlock];
|
||||
});
|
||||
|
||||
const blocks: Block[] = [sectionBlock, ...faqBlocks];
|
||||
const lastSelectedId = faqBlocks[faqBlocks.length - 1]?.id ?? sectionId;
|
||||
|
||||
return { blocks, lastSelectedId };
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export function createFeaturesTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId } = opts;
|
||||
|
||||
const columns = [
|
||||
{ id: `${sectionId}_col_1`, span: 4 },
|
||||
{ id: `${sectionId}_col_2`, span: 4 },
|
||||
{ id: `${sectionId}_col_3`, span: 4 },
|
||||
];
|
||||
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "muted",
|
||||
paddingY: "md",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: sectionProps,
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const featureBlocks: Block[] = columns.flatMap((col, index) => {
|
||||
const titleId = createId();
|
||||
const descId = createId();
|
||||
|
||||
const titleProps: TextBlockProps = {
|
||||
text: `Feature ${index + 1} 제목`,
|
||||
align: "left",
|
||||
size: "lg",
|
||||
} as any;
|
||||
|
||||
const descProps: TextBlockProps = {
|
||||
text: "해당 기능을 간단히 설명하는 텍스트입니다.",
|
||||
align: "left",
|
||||
size: "sm",
|
||||
} as any;
|
||||
|
||||
const title: Block = {
|
||||
id: titleId,
|
||||
type: "text",
|
||||
props: titleProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
const description: Block = {
|
||||
id: descId,
|
||||
type: "text",
|
||||
props: descProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
return [title, description];
|
||||
});
|
||||
|
||||
const blocks: Block[] = [sectionBlock, ...featureBlocks];
|
||||
const lastSelectedId = featureBlocks[featureBlocks.length - 1]?.id ?? sectionId;
|
||||
|
||||
return { blocks, lastSelectedId };
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export function createFooterTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId } = opts;
|
||||
|
||||
const columns: SectionBlockProps["columns"] = [
|
||||
{ id: `${sectionId}_col_1`, span: 12 },
|
||||
];
|
||||
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "muted",
|
||||
paddingY: "md",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: sectionProps,
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const firstColumnId = `${sectionId}_col_1`;
|
||||
|
||||
const linksId = createId();
|
||||
const linksProps: TextBlockProps = {
|
||||
text: "이용약관 · 개인정보처리방침",
|
||||
align: "center",
|
||||
size: "sm",
|
||||
} as any;
|
||||
const linksBlock: Block = {
|
||||
id: linksId,
|
||||
type: "text",
|
||||
props: linksProps,
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const copyrightId = createId();
|
||||
const copyrightProps: TextBlockProps = {
|
||||
text: "© 2025 MyLanding. All rights reserved.",
|
||||
align: "center",
|
||||
size: "sm",
|
||||
} as any;
|
||||
const copyrightBlock: Block = {
|
||||
id: copyrightId,
|
||||
type: "text",
|
||||
props: copyrightProps,
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const blocks: Block[] = [sectionBlock, linksBlock, copyrightBlock];
|
||||
const lastSelectedId = copyrightId;
|
||||
|
||||
return { blocks, lastSelectedId };
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import type {
|
||||
Block,
|
||||
SectionBlockProps,
|
||||
TextBlockProps,
|
||||
ButtonBlockProps,
|
||||
} from "@/features/editor/state/editorStore";
|
||||
|
||||
export function createHeroTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId } = opts;
|
||||
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "lg",
|
||||
columns: [
|
||||
{
|
||||
id: `${sectionId}_col_1`,
|
||||
span: 12,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: sectionProps,
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const firstColumnId = `${sectionId}_col_1`;
|
||||
|
||||
const heroHeadlineId = createId();
|
||||
const heroHeadlineProps: TextBlockProps = {
|
||||
text: "Hero 제목을 여기에 입력하세요",
|
||||
align: "center",
|
||||
size: "lg",
|
||||
} as any;
|
||||
const heroHeadline: Block = {
|
||||
id: heroHeadlineId,
|
||||
type: "text",
|
||||
props: heroHeadlineProps,
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const heroSubId = createId();
|
||||
const heroSubProps: TextBlockProps = {
|
||||
text: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.",
|
||||
align: "center",
|
||||
size: "base",
|
||||
} as any;
|
||||
const heroSub: Block = {
|
||||
id: heroSubId,
|
||||
type: "text",
|
||||
props: heroSubProps,
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const heroButtonId = createId();
|
||||
const heroButtonProps: ButtonBlockProps = {
|
||||
label: "지금 시작하기",
|
||||
href: "#",
|
||||
align: "center",
|
||||
size: "md",
|
||||
variant: "solid",
|
||||
colorPalette: "primary",
|
||||
fullWidth: false,
|
||||
borderRadius: "md",
|
||||
fontSizeCustom: "14px",
|
||||
fillColorCustom: "",
|
||||
strokeColorCustom: "",
|
||||
};
|
||||
const heroButton: Block = {
|
||||
id: heroButtonId,
|
||||
type: "button",
|
||||
props: heroButtonProps,
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const blocks: Block[] = [sectionBlock, heroHeadline, heroSub, heroButton];
|
||||
|
||||
return { blocks, lastSelectedId: heroButtonId };
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export function createPricingTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId } = opts;
|
||||
|
||||
const columns: SectionBlockProps["columns"] = [
|
||||
{ id: `${sectionId}_col_1`, span: 4 },
|
||||
{ id: `${sectionId}_col_2`, span: 4 },
|
||||
{ id: `${sectionId}_col_3`, span: 4 },
|
||||
];
|
||||
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "muted",
|
||||
paddingY: "lg",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: sectionProps,
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const planDefinitions: Array<{ name: string; price: string }> = [
|
||||
{ name: "Basic", price: "₩9,900/월" },
|
||||
{ name: "Pro", price: "₩29,900/월" },
|
||||
{ name: "Enterprise", price: "문의" },
|
||||
];
|
||||
|
||||
const pricingBlocks: Block[] = columns.flatMap((col, index) => {
|
||||
const plan = planDefinitions[index] ?? planDefinitions[0];
|
||||
|
||||
const nameId = createId();
|
||||
const priceId = createId();
|
||||
|
||||
const nameProps: TextBlockProps = {
|
||||
text: plan.name,
|
||||
align: "center",
|
||||
size: "lg",
|
||||
} as any;
|
||||
|
||||
const priceProps: TextBlockProps = {
|
||||
text: plan.price,
|
||||
align: "center",
|
||||
size: "base",
|
||||
} as any;
|
||||
|
||||
const nameBlock: Block = {
|
||||
id: nameId,
|
||||
type: "text",
|
||||
props: nameProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
const priceBlock: Block = {
|
||||
id: priceId,
|
||||
type: "text",
|
||||
props: priceProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
return [nameBlock, priceBlock];
|
||||
});
|
||||
|
||||
const blocks: Block[] = [sectionBlock, ...pricingBlocks];
|
||||
const lastSelectedId = pricingBlocks[pricingBlocks.length - 1]?.id ?? sectionId;
|
||||
|
||||
return { blocks, lastSelectedId };
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export function createTeamTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId } = opts;
|
||||
|
||||
const columns: SectionBlockProps["columns"] = [
|
||||
{ id: `${sectionId}_col_1`, span: 4 },
|
||||
{ id: `${sectionId}_col_2`, span: 4 },
|
||||
{ id: `${sectionId}_col_3`, span: 4 },
|
||||
];
|
||||
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "muted",
|
||||
paddingY: "lg",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: sectionProps,
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const memberDefinitions = [
|
||||
{ name: "홍길동", role: "Product Designer", bio: "사용자 경험을 설계합니다." },
|
||||
{ name: "김영희", role: "Frontend Engineer", bio: "깔끔한 UI를 구현합니다." },
|
||||
{ name: "이철수", role: "Backend Engineer", bio: "안정적인 인프라를 책임집니다." },
|
||||
];
|
||||
|
||||
const teamBlocks: Block[] = columns.flatMap((col, index) => {
|
||||
const m = memberDefinitions[index] ?? memberDefinitions[0];
|
||||
|
||||
const nameId = createId();
|
||||
const roleId = createId();
|
||||
const bioId = createId();
|
||||
|
||||
const nameProps: TextBlockProps = {
|
||||
text: m.name,
|
||||
align: "center",
|
||||
size: "lg",
|
||||
} as any;
|
||||
|
||||
const roleProps: TextBlockProps = {
|
||||
text: m.role,
|
||||
align: "center",
|
||||
size: "base",
|
||||
} as any;
|
||||
|
||||
const bioProps: TextBlockProps = {
|
||||
text: m.bio,
|
||||
align: "center",
|
||||
size: "sm",
|
||||
} as any;
|
||||
|
||||
const nameBlock: Block = {
|
||||
id: nameId,
|
||||
type: "text",
|
||||
props: nameProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
const roleBlock: Block = {
|
||||
id: roleId,
|
||||
type: "text",
|
||||
props: roleProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
const bioBlock: Block = {
|
||||
id: bioId,
|
||||
type: "text",
|
||||
props: bioProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
return [nameBlock, roleBlock, bioBlock];
|
||||
});
|
||||
|
||||
const blocks: Block[] = [sectionBlock, ...teamBlocks];
|
||||
const lastSelectedId = teamBlocks[teamBlocks.length - 1]?.id ?? sectionId;
|
||||
|
||||
return { blocks, lastSelectedId };
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
export function createTestimonialsTemplateBlocks(opts: {
|
||||
sectionId: string;
|
||||
createId: () => string;
|
||||
}): { blocks: Block[]; lastSelectedId: string } {
|
||||
const { sectionId, createId } = opts;
|
||||
|
||||
const columns: SectionBlockProps["columns"] = [
|
||||
{ id: `${sectionId}_col_1`, span: 4 },
|
||||
{ id: `${sectionId}_col_2`, span: 4 },
|
||||
{ id: `${sectionId}_col_3`, span: 4 },
|
||||
];
|
||||
|
||||
const sectionProps: SectionBlockProps = {
|
||||
background: "default",
|
||||
paddingY: "lg",
|
||||
columns,
|
||||
} as any;
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: sectionProps,
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const testimonialDefinitions: Array<{ body: string; author: string }> = [
|
||||
{ body: "이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.", author: "홍길동" },
|
||||
{ body: "디자인을 잘 못해도 깔끔한 페이지를 만들 수 있어요.", author: "김영희" },
|
||||
{ body: "팀 전체가 만족하는 빌더입니다.", author: "이철수" },
|
||||
];
|
||||
|
||||
const testimonialBlocks: Block[] = columns.flatMap((col, index) => {
|
||||
const t = testimonialDefinitions[index] ?? testimonialDefinitions[0];
|
||||
|
||||
const bodyId = createId();
|
||||
const authorId = createId();
|
||||
|
||||
const bodyProps: TextBlockProps = {
|
||||
text: t.body,
|
||||
align: "left",
|
||||
size: "base",
|
||||
} as any;
|
||||
|
||||
const authorProps: TextBlockProps = {
|
||||
text: `- ${t.author}`,
|
||||
align: "left",
|
||||
size: "sm",
|
||||
} as any;
|
||||
|
||||
const bodyBlock: Block = {
|
||||
id: bodyId,
|
||||
type: "text",
|
||||
props: bodyProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
const authorBlock: Block = {
|
||||
id: authorId,
|
||||
type: "text",
|
||||
props: authorProps,
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
return [bodyBlock, authorBlock];
|
||||
});
|
||||
|
||||
const blocks: Block[] = [sectionBlock, ...testimonialBlocks];
|
||||
const lastSelectedId = testimonialBlocks[testimonialBlocks.length - 1]?.id ?? sectionId;
|
||||
|
||||
return { blocks, lastSelectedId };
|
||||
}
|
||||
Reference in New Issue
Block a user