텍스트/버튼/이미지/섹션 블록 타입 확장 및 에디터 UI 연동
This commit is contained in:
+330
-90
@@ -17,12 +17,21 @@ import {
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { useEditorStore } from "@/features/editor/state/editorStore";
|
||||
import type { Block } from "@/features/editor/state/editorStore";
|
||||
import type {
|
||||
Block,
|
||||
TextBlockProps,
|
||||
ButtonBlockProps,
|
||||
ImageBlockProps,
|
||||
SectionBlockProps,
|
||||
} from "@/features/editor/state/editorStore";
|
||||
|
||||
export default function EditorPage() {
|
||||
const blocks = useEditorStore((state) => state.blocks);
|
||||
const selectedBlockId = useEditorStore((state) => state.selectedBlockId);
|
||||
const addTextBlock = useEditorStore((state) => state.addTextBlock);
|
||||
const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
|
||||
const addImageBlock = useEditorStore((state) => state.addImageBlock);
|
||||
const addSectionBlock = useEditorStore((state) => state.addSectionBlock);
|
||||
const updateBlock = useEditorStore((state) => state.updateBlock);
|
||||
const selectBlock = useEditorStore((state) => state.selectBlock);
|
||||
const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
|
||||
@@ -166,6 +175,27 @@ export default function EditorPage() {
|
||||
>
|
||||
텍스트 블록 추가
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
|
||||
onClick={addButtonBlock}
|
||||
>
|
||||
버튼 블록 추가
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
|
||||
onClick={addImageBlock}
|
||||
>
|
||||
이미지 블록 추가
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
|
||||
onClick={addSectionBlock}
|
||||
>
|
||||
섹션 블록 추가
|
||||
</button>
|
||||
<p className="text-xs text-slate-500">
|
||||
Text / Image / Button / Section 블록을 이 영역에서 추가할 수 있습니다.
|
||||
</p>
|
||||
@@ -214,66 +244,189 @@ export default function EditorPage() {
|
||||
<h2 className="font-medium mb-2">속성 패널</h2>
|
||||
{selectedBlockId ? (
|
||||
<div className="space-y-3">
|
||||
<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={
|
||||
blocks.find((b) => b.id === selectedBlockId)?.props.text ?? ""
|
||||
}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
updateBlock(selectedBlockId, { text: value });
|
||||
// 인라인 편집과의 상태 차이를 막기 위해, 현재 인라인 편집 중인 블록이라면 로컬 상태도 동기화한다.
|
||||
if (editingBlockId === selectedBlockId) {
|
||||
setEditingText(value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{(() => {
|
||||
const selectedBlock = blocks.find((b) => b.id === selectedBlockId);
|
||||
if (!selectedBlock) return null;
|
||||
|
||||
<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={
|
||||
blocks.find((b) => b.id === selectedBlockId)?.props.align ?? "left"
|
||||
}
|
||||
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>
|
||||
if (selectedBlock.type === "text") {
|
||||
const textProps = selectedBlock.props as TextBlockProps;
|
||||
|
||||
<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={
|
||||
blocks.find((b) => b.id === selectedBlockId)?.props.size ?? "base"
|
||||
}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as "sm" | "base" | "lg";
|
||||
updateBlock(selectedBlockId, { size: value });
|
||||
}}
|
||||
>
|
||||
<option value="sm">작게</option>
|
||||
<option value="base">보통</option>
|
||||
<option value="lg">크게</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
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">
|
||||
<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.size}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as "sm" | "base" | "lg";
|
||||
updateBlock(selectedBlockId, { size: value });
|
||||
}}
|
||||
>
|
||||
<option value="sm">작게</option>
|
||||
<option value="base">보통</option>
|
||||
<option value="lg">크게</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (selectedBlock.type === "image") {
|
||||
const imageProps = selectedBlock.props as ImageBlockProps;
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (selectedBlock.type === "section") {
|
||||
const sectionProps = selectedBlock.props as SectionBlockProps;
|
||||
|
||||
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}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as 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}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as SectionBlockProps["paddingY"];
|
||||
updateBlock(selectedBlockId, { paddingY: value } as any);
|
||||
}}
|
||||
>
|
||||
<option value="sm">작게</option>
|
||||
<option value="md">보통</option>
|
||||
<option value="lg">크게</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (selectedBlock.type === "button") {
|
||||
const buttonProps = selectedBlock.props as ButtonBlockProps;
|
||||
|
||||
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={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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-slate-500">
|
||||
@@ -416,19 +569,36 @@ function SortableEditorBlock({
|
||||
transition,
|
||||
};
|
||||
|
||||
const alignClass =
|
||||
block.props.align === "center"
|
||||
? "text-center"
|
||||
: block.props.align === "right"
|
||||
? "text-right"
|
||||
: "text-left";
|
||||
let alignClass = "";
|
||||
let sizeClass = "";
|
||||
|
||||
const sizeClass =
|
||||
block.props.size === "sm"
|
||||
? "text-sm"
|
||||
: block.props.size === "lg"
|
||||
? "text-lg"
|
||||
: "text-base";
|
||||
if (block.type === "text") {
|
||||
const textProps = block.props as TextBlockProps;
|
||||
alignClass =
|
||||
textProps.align === "center"
|
||||
? "text-center"
|
||||
: textProps.align === "right"
|
||||
? "text-right"
|
||||
: "text-left";
|
||||
|
||||
sizeClass =
|
||||
textProps.size === "sm"
|
||||
? "text-sm"
|
||||
: textProps.size === "lg"
|
||||
? "text-lg"
|
||||
: "text-base";
|
||||
} else if (block.type === "button") {
|
||||
// 버튼 블록은 기본 텍스트 스타일만 적용
|
||||
alignClass = "text-left";
|
||||
sizeClass = "text-base";
|
||||
} else if (block.type === "image") {
|
||||
alignClass = "text-left";
|
||||
sizeClass = "text-base";
|
||||
} else {
|
||||
// 섹션 블록: 텍스트 크기 대신 섹션 자체에 패딩/배경을 입히므로 텍스트 클래스는 기본값만
|
||||
alignClass = "text-left";
|
||||
sizeClass = "text-base";
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -441,7 +611,12 @@ function SortableEditorBlock({
|
||||
isSelected ? "border-sky-500 bg-slate-900/80" : "border-slate-700 bg-slate-900"
|
||||
}`}
|
||||
onClick={() => selectBlock(block.id)}
|
||||
onDoubleClick={() => startEditing(block.id, block.props.text)}
|
||||
onDoubleClick={() => {
|
||||
if (block.type === "text") {
|
||||
const textProps = block.props as TextBlockProps;
|
||||
startEditing(block.id, textProps.text);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<button
|
||||
@@ -454,25 +629,90 @@ function SortableEditorBlock({
|
||||
≡
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
{isEditing ? (
|
||||
<textarea
|
||||
className="w-full bg-transparent outline-none resize-none text-sm"
|
||||
aria-label="텍스트 블록 내용 편집"
|
||||
value={editingText}
|
||||
onChange={(e) => setEditingText(e.target.value)}
|
||||
onBlur={commitEditing}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
commitEditing();
|
||||
}
|
||||
}}
|
||||
rows={1}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div>{block.props.text}</div>
|
||||
{block.type === "text" && (
|
||||
isEditing ? (
|
||||
<textarea
|
||||
className="w-full bg-transparent outline-none resize-none text-sm"
|
||||
aria-label="텍스트 블록 내용 편집"
|
||||
value={editingText}
|
||||
onChange={(e) => setEditingText(e.target.value)}
|
||||
onBlur={commitEditing}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
commitEditing();
|
||||
}
|
||||
}}
|
||||
rows={1}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div>{(block.props as TextBlockProps).text}</div>
|
||||
)
|
||||
)}
|
||||
{block.type === "button" && (() => {
|
||||
const buttonProps = block.props as ButtonBlockProps;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded border border-slate-600 bg-slate-800 px-3 py-1 text-xs font-medium text-slate-50 hover:bg-slate-700"
|
||||
aria-label={buttonProps.label}
|
||||
onClick={(e) => {
|
||||
// 에디터 내 버튼 클릭은 선택만 유지하고 실제 이동은 막는다.
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{buttonProps.label}
|
||||
</button>
|
||||
);
|
||||
})()}
|
||||
{block.type === "image" && (() => {
|
||||
const imageProps = block.props as ImageBlockProps;
|
||||
const hasSrc = imageProps.src.trim().length > 0;
|
||||
return (
|
||||
<div className="w-full border border-dashed border-slate-700 bg-slate-900/40 rounded flex items-center justify-center overflow-hidden">
|
||||
{hasSrc ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={imageProps.src}
|
||||
alt={imageProps.alt}
|
||||
className="max-w-full h-auto object-contain"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-[10px] text-slate-500 px-2 py-4">
|
||||
이미지 URL을 속성 패널에서 입력하세요.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{block.type === "section" && (() => {
|
||||
const sectionProps = block.props as SectionBlockProps;
|
||||
|
||||
const bgClass =
|
||||
sectionProps.background === "muted"
|
||||
? "bg-slate-950/40"
|
||||
: sectionProps.background === "primary"
|
||||
? "bg-sky-950/40 border-sky-900/60"
|
||||
: "bg-slate-900/60";
|
||||
|
||||
const pyClass =
|
||||
sectionProps.paddingY === "sm"
|
||||
? "py-4"
|
||||
: sectionProps.paddingY === "lg"
|
||||
? "py-10"
|
||||
: "py-6";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`w-full ${bgClass} ${pyClass} rounded border border-dashed border-slate-700 flex items-center justify-center`}
|
||||
>
|
||||
<span className="text-[11px] text-slate-400 px-2 text-center">
|
||||
섹션 영역입니다. (레이아웃 단계에서 컬럼/블록을 배치할 예정입니다.)
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user