Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jaybe
|
9db7de9c79 |
@@ -1,136 +0,0 @@
|
|||||||
name: CI
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches:
|
|
||||||
- main
|
|
||||||
- feature/**
|
|
||||||
pull_request:
|
|
||||||
branches:
|
|
||||||
- main
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
test:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: Checkout repository
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: Setup Node.js
|
|
||||||
uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: 20
|
|
||||||
cache: npm
|
|
||||||
|
|
||||||
- name: Install dependencies
|
|
||||||
run: |
|
|
||||||
npm ci
|
|
||||||
|
|
||||||
- name: Generate Prisma Client
|
|
||||||
env:
|
|
||||||
# CI에서는 실제 DB에 접속하지 않고 Prisma Client만 생성하면 되므로,
|
|
||||||
# 유효한 형식의 더미 DATABASE_URL 을 사용한다.
|
|
||||||
DATABASE_URL: postgresql://example:example@localhost:5432/example
|
|
||||||
# Prisma 엔진 바이너리 체크섬 파일을 원격에서 가져오지 못하는 경우(예: 500 오류)에도
|
|
||||||
# CI가 계속 진행되도록 체크섬 누락을 무시한다.
|
|
||||||
PRISMA_ENGINES_CHECKSUM_IGNORE_MISSING: "1"
|
|
||||||
run: |
|
|
||||||
npx prisma generate
|
|
||||||
|
|
||||||
- name: Run unit tests
|
|
||||||
env:
|
|
||||||
# API 유닛 테스트에서도 PrismaClient가 필요하므로,
|
|
||||||
# generate 단계와 동일한 더미 DATABASE_URL 을 사용한다.
|
|
||||||
DATABASE_URL: postgresql://example:example@localhost:5432/example
|
|
||||||
# 테스트 중 Prisma가 엔진 체크섬 파일을 다시 확인하는 경우를 대비해 동일 설정을 적용한다.
|
|
||||||
PRISMA_ENGINES_CHECKSUM_IGNORE_MISSING: "1"
|
|
||||||
run: |
|
|
||||||
npm test
|
|
||||||
|
|
||||||
# Playwright 브라우저는 용량이 크기 때문에 캐시를 사용해 설치 시간을 단축한다.
|
|
||||||
- name: Cache Playwright browsers
|
|
||||||
if: github.ref == 'refs/heads/main' || github.event_name == 'pull_request'
|
|
||||||
uses: actions/cache@v4
|
|
||||||
with:
|
|
||||||
path: ~/.cache/ms-playwright
|
|
||||||
key: playwright-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
|
|
||||||
|
|
||||||
- name: Install Playwright browsers
|
|
||||||
if: github.ref == 'refs/heads/main' || github.event_name == 'pull_request'
|
|
||||||
run: |
|
|
||||||
npx playwright install --with-deps
|
|
||||||
|
|
||||||
- name: Run Playwright E2E tests
|
|
||||||
if: github.ref == 'refs/heads/main' || github.event_name == 'pull_request'
|
|
||||||
run: |
|
|
||||||
npx playwright test
|
|
||||||
|
|
||||||
pr_and_merge:
|
|
||||||
needs: test
|
|
||||||
# feature/* 브랜치에 push 되었을 때만 실행한다.
|
|
||||||
if: ${{ startsWith(github.ref, 'refs/heads/feature/') }}
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: Install jq
|
|
||||||
run: |
|
|
||||||
apt-get update
|
|
||||||
apt-get install -y jq
|
|
||||||
|
|
||||||
- name: Create or update PR and try auto-merge
|
|
||||||
env:
|
|
||||||
CI_BASE_URL: ${{ secrets.CI_BASE_URL }}
|
|
||||||
CI_TOKEN: ${{ secrets.CI_TOKEN }}
|
|
||||||
CI_OWNER: ${{ secrets.CI_OWNER }}
|
|
||||||
CI_REPO: ${{ secrets.CI_REPO }}
|
|
||||||
BRANCH_REF: ${{ github.ref }}
|
|
||||||
BRANCH_NAME: ${{ github.ref_name }}
|
|
||||||
run: |
|
|
||||||
set -e
|
|
||||||
|
|
||||||
if [ -z "$CI_BASE_URL" ] || [ -z "$CI_TOKEN" ] || [ -z "$CI_OWNER" ] || [ -z "$CI_REPO" ]; then
|
|
||||||
echo "CI_* 시크릿이 설정되지 않아 PR/자동 머지를 건너뜁니다." >&2
|
|
||||||
exit 0
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "현재 브랜치: $BRANCH_NAME ($BRANCH_REF)"
|
|
||||||
|
|
||||||
# 1) PR 생성 시도 (이미 존재하면 4xx를 허용)
|
|
||||||
create_pr_payload=$(jq -n \
|
|
||||||
--arg title "CI: $BRANCH_NAME" \
|
|
||||||
--arg head "$BRANCH_NAME" \
|
|
||||||
--arg base "main" \
|
|
||||||
'{title: $title, head: $head, base: $base}')
|
|
||||||
|
|
||||||
echo "PR 생성 시도..."
|
|
||||||
curl -sS -X POST \
|
|
||||||
-H "Content-Type: application/json" \
|
|
||||||
-H "Authorization: token $CI_TOKEN" \
|
|
||||||
"$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls" \
|
|
||||||
-d "$create_pr_payload" || true
|
|
||||||
|
|
||||||
# 2) 열린 PR 목록에서 해당 브랜치의 PR 번호를 찾는다.
|
|
||||||
echo "열린 PR 목록 조회..."
|
|
||||||
pr_list=$(curl -sS \
|
|
||||||
-H "Authorization: token $CI_TOKEN" \
|
|
||||||
"$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls?state=open")
|
|
||||||
|
|
||||||
pr_number=$(echo "$pr_list" | jq ".[] | select(.head.ref == \"$BRANCH_NAME\") | .number" | head -n 1)
|
|
||||||
|
|
||||||
if [ -z "$pr_number" ]; then
|
|
||||||
echo "브랜치 $BRANCH_NAME 에 대한 열린 PR을 찾지 못했습니다. 종료합니다."
|
|
||||||
exit 0
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "브랜치 $BRANCH_NAME 에 대한 PR #$pr_number 발견"
|
|
||||||
|
|
||||||
# 3) main 대상으로 자동 머지 시도
|
|
||||||
merge_payload=$(jq -n '{Do: "merge"}')
|
|
||||||
|
|
||||||
echo "PR #$pr_number 자동 머지 시도..."
|
|
||||||
curl -sS -X POST \
|
|
||||||
-H "Content-Type: application/json" \
|
|
||||||
-H "Authorization: token $CI_TOKEN" \
|
|
||||||
"$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls/$pr_number/merge" \
|
|
||||||
-d "$merge_payload" || true
|
|
||||||
@@ -19,6 +19,5 @@ blob-report/
|
|||||||
# Plans (exclude from Git)
|
# Plans (exclude from Git)
|
||||||
메인플랜.md
|
메인플랜.md
|
||||||
최초플랜.md
|
최초플랜.md
|
||||||
MAIN_PLAN.md
|
|
||||||
|
|
||||||
/src/generated/prisma
|
/src/generated/prisma
|
||||||
|
|||||||
@@ -16,10 +16,4 @@ export default defineConfig({
|
|||||||
use: { ...devices["Desktop Chrome"] },
|
use: { ...devices["Desktop Chrome"] },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
webServer: {
|
|
||||||
command: "npm run dev",
|
|
||||||
url: "http://localhost:3000",
|
|
||||||
reuseExistingServer: !process.env.CI,
|
|
||||||
timeout: 120_000,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,105 +0,0 @@
|
|||||||
import { NextResponse } from "next/server";
|
|
||||||
import type { FormBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
|
|
||||||
export async function POST(req: Request) {
|
|
||||||
const formData = await req.formData();
|
|
||||||
|
|
||||||
// 기본 필드(name/email/message)는 그대로 읽어둔다.
|
|
||||||
const name = formData.get("name");
|
|
||||||
const email = formData.get("email");
|
|
||||||
const message = formData.get("message");
|
|
||||||
|
|
||||||
// 에디터에서 넘겨준 폼 설정(JSON) 읽기
|
|
||||||
const rawConfig = formData.get("__config");
|
|
||||||
let config: FormBlockProps | null = null;
|
|
||||||
if (typeof rawConfig === "string") {
|
|
||||||
try {
|
|
||||||
config = JSON.parse(rawConfig) as FormBlockProps;
|
|
||||||
} catch {
|
|
||||||
config = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const submitTarget = config?.submitTarget ?? "internal";
|
|
||||||
|
|
||||||
// 1) internal: 우리 서버에서 직접 처리하는 기본 모드
|
|
||||||
if (submitTarget === "internal") {
|
|
||||||
// TODO: 이곳에서 DB 저장이나 이메일 전송 등 실제 처리를 수행한다.
|
|
||||||
console.log("[forms/submit][internal]", { name, email, message });
|
|
||||||
return NextResponse.json({ ok: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2) webhook: destinationUrl 로 서버에서 POST (Google Sheets 등 포함)
|
|
||||||
if (submitTarget === "webhook") {
|
|
||||||
const destinationUrl = config?.destinationUrl;
|
|
||||||
if (!destinationUrl) {
|
|
||||||
return NextResponse.json({ ok: false, error: "destinationUrl_missing" }, { status: 400 });
|
|
||||||
}
|
|
||||||
|
|
||||||
const payloadFormat = config?.payloadFormat ?? "form";
|
|
||||||
|
|
||||||
let body: string;
|
|
||||||
const headers: Record<string, string> = {
|
|
||||||
...(config?.headers ?? {}),
|
|
||||||
};
|
|
||||||
|
|
||||||
if (payloadFormat === "json") {
|
|
||||||
const jsonPayload: Record<string, string> = {};
|
|
||||||
formData.forEach((value, key) => {
|
|
||||||
if (key !== "__config") {
|
|
||||||
jsonPayload[key] = String(value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (config?.extraParams) {
|
|
||||||
Object.entries(config.extraParams).forEach(([k, v]) => {
|
|
||||||
jsonPayload[k] = v;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
headers["Content-Type"] = "application/json";
|
|
||||||
body = JSON.stringify(jsonPayload);
|
|
||||||
} else {
|
|
||||||
// 기본 동작: FormData -> x-www-form-urlencoded 로 변환 (많은 webhook/Apps Script가 이 형식을 사용)
|
|
||||||
const payload = new URLSearchParams();
|
|
||||||
formData.forEach((value, key) => {
|
|
||||||
if (key !== "__config") {
|
|
||||||
payload.append(key, String(value));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (config?.extraParams) {
|
|
||||||
Object.entries(config.extraParams).forEach(([k, v]) => {
|
|
||||||
payload.append(k, v);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
headers["Content-Type"] = "application/x-www-form-urlencoded";
|
|
||||||
body = payload.toString();
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(destinationUrl, {
|
|
||||||
method: config?.method ?? "POST",
|
|
||||||
headers,
|
|
||||||
body,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
console.error("[forms/submit][webhook] remote error", res.status, await res.text().catch(() => ""));
|
|
||||||
return NextResponse.json({ ok: false, error: "webhook_failed" }, { status: 502 });
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("[forms/submit][webhook] fetch error", error);
|
|
||||||
return NextResponse.json({ ok: false, error: "webhook_exception" }, { status: 500 });
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("[forms/submit][webhook] forwarded", { name, email, message, destinationUrl });
|
|
||||||
return NextResponse.json({ ok: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 그 외 알 수 없는 모드는 internal 과 동일하게 처리
|
|
||||||
console.warn("[forms/submit] unknown submitTarget, fallback to internal", submitTarget);
|
|
||||||
console.log("[forms/submit][internal]", { name, email, message });
|
|
||||||
return NextResponse.json({ ok: true });
|
|
||||||
}
|
|
||||||
@@ -1,119 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { ReactNode } from "react";
|
|
||||||
import {
|
|
||||||
DndContext,
|
|
||||||
DragOverlay,
|
|
||||||
type DragEndEvent,
|
|
||||||
type DragStartEvent,
|
|
||||||
} from "@dnd-kit/core";
|
|
||||||
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
|
||||||
import { rectIntersection } from "@dnd-kit/core";
|
|
||||||
|
|
||||||
import type { Block, ButtonBlockProps, ImageBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
|
|
||||||
interface EditorCanvasProps {
|
|
||||||
blocks: Block[];
|
|
||||||
rootBlocks: Block[];
|
|
||||||
selectedBlockId: string | null;
|
|
||||||
editingBlockId: string | null;
|
|
||||||
editingText: string;
|
|
||||||
activeDragId: string | null;
|
|
||||||
sensors: any;
|
|
||||||
onCanvasEmptyClick: () => void;
|
|
||||||
renderBlocks: (targetBlocks: Block[]) => ReactNode;
|
|
||||||
handleDragStart: (event: DragStartEvent) => void;
|
|
||||||
handleDragEnd: (event: DragEndEvent) => void;
|
|
||||||
handleDragCancel: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function EditorCanvas(props: EditorCanvasProps) {
|
|
||||||
const {
|
|
||||||
blocks,
|
|
||||||
rootBlocks,
|
|
||||||
activeDragId,
|
|
||||||
sensors,
|
|
||||||
onCanvasEmptyClick,
|
|
||||||
renderBlocks,
|
|
||||||
handleDragStart,
|
|
||||||
handleDragEnd,
|
|
||||||
handleDragCancel,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="flex-1 p-4 flex flex-col gap-2 text-sm text-slate-200 border-r border-slate-800 overflow-auto"
|
|
||||||
data-testid="editor-canvas"
|
|
||||||
onClick={(event) => {
|
|
||||||
if (event.target === event.currentTarget) {
|
|
||||||
onCanvasEmptyClick();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{blocks.length === 0 ? (
|
|
||||||
<div className="flex-1 flex items-center justify-center text-slate-500 text-xs">
|
|
||||||
왼쪽에서 "텍스트 블록 추가" 버튼을 눌러 블록을 추가해 보세요.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<DndContext
|
|
||||||
sensors={sensors}
|
|
||||||
collisionDetection={rectIntersection}
|
|
||||||
onDragStart={handleDragStart}
|
|
||||||
onDragEnd={handleDragEnd}
|
|
||||||
onDragCancel={handleDragCancel}
|
|
||||||
>
|
|
||||||
<SortableContext
|
|
||||||
items={rootBlocks.map((b) => b.id)}
|
|
||||||
strategy={verticalListSortingStrategy}
|
|
||||||
>
|
|
||||||
{renderBlocks(rootBlocks)}
|
|
||||||
</SortableContext>
|
|
||||||
<DragOverlay>
|
|
||||||
{activeDragId && (
|
|
||||||
<DragPreview block={blocks.find((b) => b.id === activeDragId) ?? null} />
|
|
||||||
)}
|
|
||||||
</DragOverlay>
|
|
||||||
</DndContext>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DragPreviewProps {
|
|
||||||
block: Block | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function DragPreview({ block }: DragPreviewProps) {
|
|
||||||
if (!block) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="pointer-events-none rounded border border-sky-500 bg-slate-900/80 px-3 py-2 text-xs text-slate-100 shadow-lg opacity-90 min-w-[160px] max-w-[260px]">
|
|
||||||
<div className="text-[10px] uppercase tracking-wide text-sky-300 mb-1">
|
|
||||||
{block.type === "text"
|
|
||||||
? "Text"
|
|
||||||
: block.type === "button"
|
|
||||||
? "Button"
|
|
||||||
: block.type === "image"
|
|
||||||
? "Image"
|
|
||||||
: block.type === "divider"
|
|
||||||
? "Divider"
|
|
||||||
: block.type === "list"
|
|
||||||
? "List"
|
|
||||||
: "Section"}
|
|
||||||
</div>
|
|
||||||
<div className="truncate">
|
|
||||||
{block.type === "text"
|
|
||||||
? (block.props as TextBlockProps).text || "텍스트 블록"
|
|
||||||
: block.type === "button"
|
|
||||||
? (block.props as ButtonBlockProps).label || "버튼 블록"
|
|
||||||
: block.type === "image"
|
|
||||||
? (block.props as ImageBlockProps).alt || "이미지 블록"
|
|
||||||
: block.type === "list"
|
|
||||||
? "리스트 블록"
|
|
||||||
: block.type === "divider"
|
|
||||||
? "구분선 블록"
|
|
||||||
: "섹션 블록"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,445 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import type { Block, FormCheckboxBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
|
||||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
|
||||||
|
|
||||||
interface FormCheckboxPropertiesPanelProps {
|
|
||||||
block: Block;
|
|
||||||
selectedBlockId: string | null;
|
|
||||||
updateBlock: (id: string, partial: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBlock }: FormCheckboxPropertiesPanelProps) {
|
|
||||||
if (!selectedBlockId || block.id !== selectedBlockId) return null;
|
|
||||||
|
|
||||||
const checkboxProps = block.props as FormCheckboxBlockProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3 text-xs">
|
|
||||||
<h3 className="text-[11px] font-semibold text-slate-200">체크박스 필드</h3>
|
|
||||||
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">그룹 타이틀 타입</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={checkboxProps.groupLabelMode ?? "text"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
groupLabelMode: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="text">텍스트</option>
|
|
||||||
<option value="image">이미지</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">그룹 타이틀</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={checkboxProps.groupLabel ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
groupLabel: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{checkboxProps.groupLabelMode === "image" && (
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">그룹 타이틀 이미지 URL</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={checkboxProps.groupLabelImageUrl ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
groupLabelImageUrl: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">전송 키</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={checkboxProps.formFieldName ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
formFieldName: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-slate-400">옵션</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="rounded border border-slate-700 bg-slate-900 px-2 py-0.5 text-[10px] text-slate-200 hover:bg-slate-800"
|
|
||||||
onClick={() => {
|
|
||||||
const next = Array.isArray((checkboxProps as any).options)
|
|
||||||
? [...(checkboxProps as any).options]
|
|
||||||
: [];
|
|
||||||
next.push({
|
|
||||||
label: "새 옵션",
|
|
||||||
value: `option_${next.length + 1}`,
|
|
||||||
});
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
옵션 추가
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{(((checkboxProps as any).options ?? []) as any[]).map((opt, index) => (
|
|
||||||
<div key={opt.value ?? index} className="space-y-1 rounded border border-slate-800 p-2">
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<input
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
placeholder="라벨"
|
|
||||||
value={opt.label ?? ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(((checkboxProps as any).options ?? []) as any[])];
|
|
||||||
next[index] = {
|
|
||||||
...next[index],
|
|
||||||
label: e.target.value,
|
|
||||||
};
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
placeholder="값(value)"
|
|
||||||
value={opt.value ?? ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(((checkboxProps as any).options ?? []) as any[])];
|
|
||||||
next[index] = {
|
|
||||||
...next[index],
|
|
||||||
value: e.target.value,
|
|
||||||
};
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="h-7 w-7 rounded border border-slate-700 bg-slate-950 text-[10px] text-slate-300 hover:bg-red-900/60 hover:border-red-700"
|
|
||||||
onClick={() => {
|
|
||||||
const next = (((checkboxProps as any).options ?? []) as any[]).filter((_, i) => i !== index);
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
placeholder="옵션 이미지 URL (선택)"
|
|
||||||
value={opt.labelImageUrl ?? ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(((checkboxProps as any).options ?? []) as any[])];
|
|
||||||
next[index] = {
|
|
||||||
...next[index],
|
|
||||||
labelImageUrl: e.target.value,
|
|
||||||
};
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label className="inline-flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
|
|
||||||
checked={Boolean(checkboxProps.required)}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
required: e.target.checked,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<span className="text-slate-400">필수 필드</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
|
||||||
<h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
|
|
||||||
{/* px 기반 체크박스 타이포 입력값을 노출하여 em 스케일 변환을 위한 근거를 남긴다 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="체크박스 텍스트 크기 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = checkboxProps.fontSizeCustom ?? "";
|
|
||||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 14;
|
|
||||||
})()}
|
|
||||||
min={8}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "XS", value: 12 },
|
|
||||||
{ id: "sm", label: "S", value: 14 },
|
|
||||||
{ id: "md", label: "M", value: 16 },
|
|
||||||
{ id: "lg", label: "L", value: 18 },
|
|
||||||
{ id: "xl", label: "XL", value: 20 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
fontSizeCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* 줄간격 px 입력값을 노출해 preview em 변환과 TDD 케이스를 연동한다 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="체크박스 줄간격 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = checkboxProps.lineHeightCustom ?? "";
|
|
||||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 20;
|
|
||||||
})()}
|
|
||||||
min={8}
|
|
||||||
max={60}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "타이트", value: 18 },
|
|
||||||
{ id: "normal", label: "보통", value: 24 },
|
|
||||||
{ id: "loose", label: "루즈", value: 32 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
lineHeightCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* 자간 px 입력을 통한 폼 체크박스 미세 조정값을 노출 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="체크박스 자간 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = checkboxProps.letterSpacingCustom ?? "";
|
|
||||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 0;
|
|
||||||
})()}
|
|
||||||
min={-10}
|
|
||||||
max={20}
|
|
||||||
step={0.5}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "좁게", value: -1 },
|
|
||||||
{ id: "normal", label: "보통", value: 0 },
|
|
||||||
{ id: "wide", label: "넓게", value: 2 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
letterSpacingCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
|
||||||
<span>필드 너비</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={checkboxProps.widthMode ?? "full"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthMode: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="auto">자동</option>
|
|
||||||
<option value="full">전체 폭</option>
|
|
||||||
<option value="fixed">고정 값</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
{(checkboxProps.widthMode ?? "full") === "fixed" && (
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 고정 너비"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={checkboxProps.widthPx ?? 240}
|
|
||||||
min={80}
|
|
||||||
max={800}
|
|
||||||
step={10}
|
|
||||||
presets={[
|
|
||||||
{ id: "sm", label: "작게", value: 200 },
|
|
||||||
{ id: "md", label: "보통", value: 280 },
|
|
||||||
{ id: "lg", label: "넓게", value: 360 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthPx: v,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="체크박스 가로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof checkboxProps.paddingX === "number" ? checkboxProps.paddingX : 12}
|
|
||||||
min={0}
|
|
||||||
max={60}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "아주 얇게", value: 6 },
|
|
||||||
{ id: "sm", label: "얇게", value: 10 },
|
|
||||||
{ id: "md", label: "보통", value: 12 },
|
|
||||||
{ id: "lg", label: "넓게", value: 16 },
|
|
||||||
{ id: "xl", label: "아주 넓게", value: 20 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingX: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="체크박스 세로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof checkboxProps.paddingY === "number" ? checkboxProps.paddingY : 10}
|
|
||||||
min={0}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "아주 얇게", value: 6 },
|
|
||||||
{ id: "sm", label: "얇게", value: 8 },
|
|
||||||
{ id: "md", label: "보통", value: 10 },
|
|
||||||
{ id: "lg", label: "넓게", value: 12 },
|
|
||||||
{ id: "xl", label: "아주 넓게", value: 16 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingY: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="체크박스 옵션 간격 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof checkboxProps.optionGapPx === "number" ? checkboxProps.optionGapPx : 4}
|
|
||||||
min={0}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "타이트", value: 2 },
|
|
||||||
{ id: "normal", label: "보통", value: 4 },
|
|
||||||
{ id: "relaxed", label: "느슨", value: 8 },
|
|
||||||
{ id: "extra", label: "넓게", value: 12 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
optionGapPx: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="텍스트 색상"
|
|
||||||
ariaLabelColorInput="체크박스 텍스트 색상 피커"
|
|
||||||
ariaLabelHexInput="체크박스 텍스트 색상 HEX"
|
|
||||||
value={
|
|
||||||
checkboxProps.textColorCustom && checkboxProps.textColorCustom.trim() !== ""
|
|
||||||
? checkboxProps.textColorCustom
|
|
||||||
: "#f9fafb"
|
|
||||||
}
|
|
||||||
onChange={(hex) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
textColorCustom: hex,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
palette={TEXT_COLOR_PALETTE}
|
|
||||||
onPaletteSelect={(item) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
textColorCustom: item.color,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="배경 색상"
|
|
||||||
ariaLabelColorInput="체크박스 배경 색상 피커"
|
|
||||||
ariaLabelHexInput="체크박스 배경 색상 HEX"
|
|
||||||
value={
|
|
||||||
checkboxProps.fillColorCustom && checkboxProps.fillColorCustom.trim() !== ""
|
|
||||||
? checkboxProps.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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="테두리 색상"
|
|
||||||
ariaLabelColorInput="체크박스 테두리 색상 피커"
|
|
||||||
ariaLabelHexInput="체크박스 테두리 색상 HEX"
|
|
||||||
value={
|
|
||||||
checkboxProps.strokeColorCustom && checkboxProps.strokeColorCustom.trim() !== ""
|
|
||||||
? checkboxProps.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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 모서리 둥글기"
|
|
||||||
value={(() => {
|
|
||||||
const r = checkboxProps.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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,266 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
|
||||||
|
|
||||||
interface FormControllerPanelProps {
|
|
||||||
block: Block; // type === "form"
|
|
||||||
blocks: Block[];
|
|
||||||
selectedBlockId: string | null;
|
|
||||||
updateBlock: (id: string, partial: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FormControllerPanel({ block, blocks, selectedBlockId, updateBlock }: FormControllerPanelProps) {
|
|
||||||
if (!selectedBlockId || block.id !== selectedBlockId) return null;
|
|
||||||
|
|
||||||
const formProps = block.props as FormBlockProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4 text-xs">
|
|
||||||
<p className="text-slate-400">
|
|
||||||
이 폼은 퍼블릭 페이지에서 <code className="font-mono text-[11px]">/api/forms/submit</code>
|
|
||||||
엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">전송 대상</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={formProps.submitTarget ?? "internal"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
submitTarget: e.target.value as FormBlockProps["submitTarget"],
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="internal">서버 처리 전용 (Webhook 없이 사용)</option>
|
|
||||||
<option value="webhook">외부 Webhook / Google Sheets 로 전달</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{formProps.submitTarget === "webhook" && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">Webhook / Google Sheets URL</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
placeholder="예: https://script.google.com/macros/s/.../exec"
|
|
||||||
value={formProps.destinationUrl ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
destinationUrl: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center justify-between gap-2">
|
|
||||||
<span className="text-slate-400">전송 포맷</span>
|
|
||||||
<select
|
|
||||||
className="w-40 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={formProps.payloadFormat ?? "form"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
payloadFormat: e.target.value as any,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="form">폼 데이터 (x-www-form-urlencoded)</option>
|
|
||||||
<option value="json">JSON (application/json)</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center justify-between gap-2">
|
|
||||||
<span className="text-slate-400">HTTP 메서드</span>
|
|
||||||
<select
|
|
||||||
className="w-28 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={formProps.method ?? "POST"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
method: e.target.value as FormBlockProps["method"],
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="POST">POST</option>
|
|
||||||
<option value="GET">GET</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">Authorization 토큰 (옵션)</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
placeholder="예: Bearer xxxxxx"
|
|
||||||
value={formProps.headers?.Authorization ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
headers: {
|
|
||||||
...(formProps.headers ?? {}),
|
|
||||||
Authorization: e.target.value,
|
|
||||||
},
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">추가 파라미터 (key=value 형식, 줄바꿈으로 구분)</span>
|
|
||||||
<textarea
|
|
||||||
className="w-full h-16 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] font-mono outline-none focus:border-sky-500"
|
|
||||||
placeholder={"예:\nsource=landing\nformId=contact-hero"}
|
|
||||||
value={Object.entries(formProps.extraParams ?? {})
|
|
||||||
.map(([k, v]) => `${k}=${v}`)
|
|
||||||
.join("\n")}
|
|
||||||
onChange={(e) => {
|
|
||||||
const lines = e.target.value.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
|
|
||||||
const next: Record<string, string> = {};
|
|
||||||
for (const line of lines) {
|
|
||||||
const idx = line.indexOf("=");
|
|
||||||
if (idx > 0) {
|
|
||||||
const key = line.slice(0, idx).trim();
|
|
||||||
const value = line.slice(idx + 1).trim();
|
|
||||||
if (key) next[key] = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
extraParams: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2 border-t border-slate-800 pt-3">
|
|
||||||
<h3 className="text-[11px] font-semibold text-slate-200">폼 레이아웃</h3>
|
|
||||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
|
||||||
<span>폼 너비 모드</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={formProps.formWidthMode ?? "auto"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
formWidthMode: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="auto">내용에 맞춤</option>
|
|
||||||
<option value="full">전체 폭</option>
|
|
||||||
<option value="fixed">고정 폭 (px)</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
{(formProps.formWidthMode ?? "auto") === "fixed" && (
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="폼 고정 너비 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 360}
|
|
||||||
min={160}
|
|
||||||
max={960}
|
|
||||||
step={10}
|
|
||||||
presets={[
|
|
||||||
{ id: "sm", label: "좁게", value: 280 },
|
|
||||||
{ id: "md", label: "보통", value: 360 },
|
|
||||||
{ id: "lg", label: "넓게", value: 480 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
formWidthPx: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="폼 위/아래 여백 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 16}
|
|
||||||
min={0}
|
|
||||||
max={80}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "좁게", value: 8 },
|
|
||||||
{ id: "normal", label: "보통", value: 16 },
|
|
||||||
{ id: "relaxed", label: "넓게", value: 32 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
marginYPx: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3 border-t border-slate-800 pt-3 mt-4">
|
|
||||||
<h3 className="text-[11px] font-semibold text-slate-200">폼 컨트롤러</h3>
|
|
||||||
|
|
||||||
<fieldset className="space-y-2" aria-label="폼 필드 매핑">
|
|
||||||
<legend className="text-[11px] text-slate-400 mb-1">폼 필드 매핑</legend>
|
|
||||||
{blocks
|
|
||||||
.filter((b) =>
|
|
||||||
b.type === "formInput" ||
|
|
||||||
b.type === "formSelect" ||
|
|
||||||
b.type === "formCheckbox" ||
|
|
||||||
b.type === "formRadio",
|
|
||||||
)
|
|
||||||
.map((fieldBlock) => {
|
|
||||||
const fieldId = fieldBlock.id;
|
|
||||||
const fieldLabel = (fieldBlock.props as any).label ??
|
|
||||||
(fieldBlock.props as any).groupLabel ??
|
|
||||||
(fieldBlock.props as any).formFieldName ??
|
|
||||||
fieldId;
|
|
||||||
|
|
||||||
const checked = (formProps.fieldIds ?? []).includes(fieldId);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<label
|
|
||||||
key={fieldId}
|
|
||||||
className="flex items-center gap-2 text-[11px] text-slate-200"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="h-3 w-3 rounded border-slate-600 bg-slate-950"
|
|
||||||
checked={checked}
|
|
||||||
onChange={(e) => {
|
|
||||||
const current = formProps.fieldIds ?? [];
|
|
||||||
const next = e.target.checked
|
|
||||||
? [...current, fieldId]
|
|
||||||
: current.filter((id) => id !== fieldId);
|
|
||||||
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
fieldIds: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span>{fieldLabel}</span>
|
|
||||||
</label>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<span className="text-[11px] text-slate-400">Submit 버튼</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
aria-label="Submit 버튼"
|
|
||||||
value={formProps.submitButtonId ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
submitButtonId: e.target.value || null,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="">선택 안 함</option>
|
|
||||||
{blocks
|
|
||||||
.filter((b) => b.type === "button")
|
|
||||||
.map((buttonBlock) => {
|
|
||||||
const btnProps = buttonBlock.props as ButtonBlockProps;
|
|
||||||
return (
|
|
||||||
<option key={buttonBlock.id} value={buttonBlock.id}>
|
|
||||||
{btnProps.label || buttonBlock.id}
|
|
||||||
</option>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,424 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import type { Block, FormInputBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
|
||||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
|
||||||
|
|
||||||
interface FormInputPropertiesPanelProps {
|
|
||||||
block: Block;
|
|
||||||
selectedBlockId: string | null;
|
|
||||||
updateBlock: (id: string, partial: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }: FormInputPropertiesPanelProps) {
|
|
||||||
if (!selectedBlockId || block.id !== selectedBlockId || block.type !== "formInput") return null;
|
|
||||||
|
|
||||||
const inputProps = block.props as FormInputBlockProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3 text-xs">
|
|
||||||
<h3 className="text-[11px] font-semibold text-slate-200">입력 필드</h3>
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">라벨 타입</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={inputProps.labelMode ?? "text"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
labelMode: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="text">텍스트</option>
|
|
||||||
<option value="image">이미지</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">필드 라벨</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={inputProps.label ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
label: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
{inputProps.labelMode === "image" && (
|
|
||||||
<>
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">라벨 이미지 URL</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={inputProps.labelImageUrl ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
labelImageUrl: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">라벨 이미지 대체 텍스트</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={inputProps.labelImageAlt ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
labelImageAlt: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">전송 키</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={inputProps.formFieldName ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
formFieldName: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">필드 타입</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
aria-label="필드 타입"
|
|
||||||
value={inputProps.inputType ?? "text"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
inputType: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="text">텍스트</option>
|
|
||||||
<option value="email">이메일</option>
|
|
||||||
<option value="textarea">긴 텍스트</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">Placeholder</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
aria-label="Placeholder"
|
|
||||||
value={inputProps.placeholder ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
placeholder: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="inline-flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
|
|
||||||
checked={Boolean(inputProps.required)}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
required: e.target.checked,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<span className="text-slate-400">필수 필드</span>
|
|
||||||
</label>
|
|
||||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
|
||||||
<h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 텍스트 크기 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = inputProps.fontSizeCustom ?? "";
|
|
||||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 14;
|
|
||||||
})()}
|
|
||||||
min={8}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "XS", value: 12 },
|
|
||||||
{ id: "sm", label: "S", value: 14 },
|
|
||||||
{ id: "md", label: "M", value: 16 },
|
|
||||||
{ id: "lg", label: "L", value: 18 },
|
|
||||||
{ id: "xl", label: "XL", value: 20 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
fontSizeCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* 줄간격 px 입력을 노출하여 preview em 변환의 근거를 제공 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 줄간격 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = inputProps.lineHeightCustom ?? "";
|
|
||||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 20;
|
|
||||||
})()}
|
|
||||||
min={8}
|
|
||||||
max={60}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "타이트", value: 18 },
|
|
||||||
{ id: "normal", label: "보통", value: 24 },
|
|
||||||
{ id: "loose", label: "루즈", value: 32 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
lineHeightCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* 자간 px 입력으로 폼 입력 타이포를 세밀하게 조정 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 자간 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = inputProps.letterSpacingCustom ?? "";
|
|
||||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 0;
|
|
||||||
})()}
|
|
||||||
min={-10}
|
|
||||||
max={20}
|
|
||||||
step={0.5}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "좁게", value: -1 },
|
|
||||||
{ id: "normal", label: "보통", value: 0 },
|
|
||||||
{ id: "wide", label: "넓게", value: 2 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
letterSpacingCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
|
||||||
<span>텍스트 정렬</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={inputProps.align ?? "left"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
align: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="left">왼쪽</option>
|
|
||||||
<option value="center">가운데</option>
|
|
||||||
<option value="right">오른쪽</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
|
||||||
<span>레이아웃</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={inputProps.labelLayout ?? "stacked"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
labelLayout: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="stacked">세로 (기본)</option>
|
|
||||||
<option value="inline">가로 (인라인)</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
{(inputProps.labelLayout ?? "stacked") === "inline" && (
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="라벨/필드 간격 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
|
|
||||||
min={0}
|
|
||||||
max={80}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "타이트", value: 4 },
|
|
||||||
{ id: "normal", label: "보통", value: 8 },
|
|
||||||
{ id: "relaxed", label: "느슨", value: 12 },
|
|
||||||
{ id: "extra", label: "넓게", value: 16 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
labelGapPx: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
|
||||||
<span>너비</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={inputProps.widthMode ?? "full"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthMode: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="auto">자동</option>
|
|
||||||
<option value="full">전체 폭</option>
|
|
||||||
<option value="fixed">고정 값</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
{(inputProps.widthMode ?? "full") === "fixed" && (
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 고정 너비"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={inputProps.widthPx ?? 240}
|
|
||||||
min={80}
|
|
||||||
max={800}
|
|
||||||
step={10}
|
|
||||||
presets={[
|
|
||||||
{ id: "sm", label: "작게", value: 200 },
|
|
||||||
{ id: "md", label: "보통", value: 280 },
|
|
||||||
{ id: "lg", label: "넓게", value: 360 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthPx: v,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 가로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof inputProps.paddingX === "number" ? inputProps.paddingX : 12}
|
|
||||||
min={0}
|
|
||||||
max={60}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "아주 얇게", value: 6 },
|
|
||||||
{ id: "sm", label: "얇게", value: 10 },
|
|
||||||
{ id: "md", label: "보통", value: 12 },
|
|
||||||
{ id: "lg", label: "넓게", value: 16 },
|
|
||||||
{ id: "xl", label: "아주 넓게", value: 20 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingX: v,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 세로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof inputProps.paddingY === "number" ? inputProps.paddingY : 10}
|
|
||||||
min={0}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "아주 얇게", value: 6 },
|
|
||||||
{ id: "sm", label: "얇게", value: 8 },
|
|
||||||
{ id: "md", label: "보통", value: 10 },
|
|
||||||
{ id: "lg", label: "넓게", value: 12 },
|
|
||||||
{ id: "xl", label: "아주 넓게", value: 16 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingY: v,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="필드 텍스트 색상"
|
|
||||||
ariaLabelColorInput="필드 텍스트 색상 피커"
|
|
||||||
ariaLabelHexInput="필드 텍스트 색상 HEX"
|
|
||||||
value={
|
|
||||||
inputProps.textColorCustom && inputProps.textColorCustom.trim() !== ""
|
|
||||||
? inputProps.textColorCustom
|
|
||||||
: "#f9fafb"
|
|
||||||
}
|
|
||||||
onChange={(hex) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
textColorCustom: hex,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
palette={TEXT_COLOR_PALETTE}
|
|
||||||
onPaletteSelect={(item) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
textColorCustom: item.color,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="필드 채움 색상"
|
|
||||||
ariaLabelColorInput="필드 채움 색상 피커"
|
|
||||||
ariaLabelHexInput="필드 채움 색상 HEX"
|
|
||||||
value={
|
|
||||||
inputProps.fillColorCustom && inputProps.fillColorCustom.trim() !== ""
|
|
||||||
? inputProps.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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="필드 테두리 색상"
|
|
||||||
ariaLabelColorInput="필드 테두리 색상 피커"
|
|
||||||
ariaLabelHexInput="필드 테두리 색상 HEX"
|
|
||||||
value={
|
|
||||||
inputProps.strokeColorCustom && inputProps.strokeColorCustom.trim() !== ""
|
|
||||||
? inputProps.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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 모서리 둥글기"
|
|
||||||
value={(() => {
|
|
||||||
const r = inputProps.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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,445 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import type { Block, FormRadioBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
|
||||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
|
||||||
|
|
||||||
interface FormRadioPropertiesPanelProps {
|
|
||||||
block: Block;
|
|
||||||
selectedBlockId: string | null;
|
|
||||||
updateBlock: (id: string, partial: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }: FormRadioPropertiesPanelProps) {
|
|
||||||
if (!selectedBlockId || block.id !== selectedBlockId) return null;
|
|
||||||
|
|
||||||
const radioProps = block.props as FormRadioBlockProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3 text-xs">
|
|
||||||
<h3 className="text-[11px] font-semibold text-slate-200">라디오 필드</h3>
|
|
||||||
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">그룹 타이틀 타입</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={radioProps.groupLabelMode ?? "text"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
groupLabelMode: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="text">텍스트</option>
|
|
||||||
<option value="image">이미지</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">그룹 타이틀</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={radioProps.groupLabel ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
groupLabel: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{radioProps.groupLabelMode === "image" && (
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">그룹 타이틀 이미지 URL</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={radioProps.groupLabelImageUrl ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
groupLabelImageUrl: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">전송 키</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={radioProps.formFieldName ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
formFieldName: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-slate-400">옵션</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="rounded border border-slate-700 bg-slate-900 px-2 py-0.5 text-[10px] text-slate-200 hover:bg-slate-800"
|
|
||||||
onClick={() => {
|
|
||||||
const next = Array.isArray((radioProps as any).options)
|
|
||||||
? [...(radioProps as any).options]
|
|
||||||
: [];
|
|
||||||
next.push({
|
|
||||||
label: "새 옵션",
|
|
||||||
value: `option_${next.length + 1}`,
|
|
||||||
});
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
옵션 추가
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{(((radioProps as any).options ?? []) as any[]).map((opt, index) => (
|
|
||||||
<div key={opt.value ?? index} className="space-y-1 rounded border border-slate-800 p-2">
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<input
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
placeholder="라벨"
|
|
||||||
value={opt.label ?? ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(((radioProps as any).options ?? []) as any[])];
|
|
||||||
next[index] = {
|
|
||||||
...next[index],
|
|
||||||
label: e.target.value,
|
|
||||||
};
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
placeholder="값(value)"
|
|
||||||
value={opt.value ?? ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(((radioProps as any).options ?? []) as any[])];
|
|
||||||
next[index] = {
|
|
||||||
...next[index],
|
|
||||||
value: e.target.value,
|
|
||||||
};
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="h-7 w-7 rounded border border-slate-700 bg-slate-950 text-[10px] text-slate-300 hover:bg-red-900/60 hover:border-red-700"
|
|
||||||
onClick={() => {
|
|
||||||
const next = (((radioProps as any).options ?? []) as any[]).filter((_, i) => i !== index);
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
placeholder="옵션 이미지 URL (선택)"
|
|
||||||
value={opt.labelImageUrl ?? ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(((radioProps as any).options ?? []) as any[])];
|
|
||||||
next[index] = {
|
|
||||||
...next[index],
|
|
||||||
labelImageUrl: e.target.value,
|
|
||||||
};
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label className="inline-flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
|
|
||||||
checked={Boolean(radioProps.required)}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
required: e.target.checked,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<span className="text-slate-400">필수 필드</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
|
||||||
<h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
|
|
||||||
{/* 라디오 타이포 px 값을 직접 입력받아 em 스케일 변환 로직과 연동한다 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="라디오 텍스트 크기 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = radioProps.fontSizeCustom ?? "";
|
|
||||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 14;
|
|
||||||
})()}
|
|
||||||
min={8}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "XS", value: 12 },
|
|
||||||
{ id: "sm", label: "S", value: 14 },
|
|
||||||
{ id: "md", label: "M", value: 16 },
|
|
||||||
{ id: "lg", label: "L", value: 18 },
|
|
||||||
{ id: "xl", label: "XL", value: 20 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
fontSizeCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* 줄간격 px 입력을 노출하여 preview 에서 em 변환 근거로 사용 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="라디오 줄간격 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = radioProps.lineHeightCustom ?? "";
|
|
||||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 20;
|
|
||||||
})()}
|
|
||||||
min={8}
|
|
||||||
max={60}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "타이트", value: 18 },
|
|
||||||
{ id: "normal", label: "보통", value: 24 },
|
|
||||||
{ id: "loose", label: "루즈", value: 32 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
lineHeightCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* 자간 px 입력 컨트롤로 프리뷰 적용 근거 제공 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="라디오 자간 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = radioProps.letterSpacingCustom ?? "";
|
|
||||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 0;
|
|
||||||
})()}
|
|
||||||
min={-10}
|
|
||||||
max={20}
|
|
||||||
step={0.5}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "좁게", value: -1 },
|
|
||||||
{ id: "normal", label: "보통", value: 0 },
|
|
||||||
{ id: "wide", label: "넓게", value: 2 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
letterSpacingCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
|
||||||
<span>필드 너비</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={radioProps.widthMode ?? "full"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthMode: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="auto">자동</option>
|
|
||||||
<option value="full">전체 폭</option>
|
|
||||||
<option value="fixed">고정 값</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
{(radioProps.widthMode ?? "full") === "fixed" && (
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 고정 너비"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={radioProps.widthPx ?? 240}
|
|
||||||
min={80}
|
|
||||||
max={800}
|
|
||||||
step={10}
|
|
||||||
presets={[
|
|
||||||
{ id: "sm", label: "작게", value: 200 },
|
|
||||||
{ id: "md", label: "보통", value: 280 },
|
|
||||||
{ id: "lg", label: "넓게", value: 360 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthPx: v,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="라디오 가로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof radioProps.paddingX === "number" ? radioProps.paddingX : 12}
|
|
||||||
min={0}
|
|
||||||
max={60}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "아주 얇게", value: 6 },
|
|
||||||
{ id: "sm", label: "얇게", value: 10 },
|
|
||||||
{ id: "md", label: "보통", value: 12 },
|
|
||||||
{ id: "lg", label: "넓게", value: 16 },
|
|
||||||
{ id: "xl", label: "아주 넓게", value: 20 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingX: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="라디오 세로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof radioProps.paddingY === "number" ? radioProps.paddingY : 10}
|
|
||||||
min={0}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "아주 얇게", value: 6 },
|
|
||||||
{ id: "sm", label: "얇게", value: 8 },
|
|
||||||
{ id: "md", label: "보통", value: 10 },
|
|
||||||
{ id: "lg", label: "넓게", value: 12 },
|
|
||||||
{ id: "xl", label: "아주 넓게", value: 16 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingY: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="라디오 옵션 간격 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof radioProps.optionGapPx === "number" ? radioProps.optionGapPx : 4}
|
|
||||||
min={0}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "타이트", value: 2 },
|
|
||||||
{ id: "normal", label: "보통", value: 4 },
|
|
||||||
{ id: "relaxed", label: "느슨", value: 8 },
|
|
||||||
{ id: "extra", label: "넓게", value: 12 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
optionGapPx: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="텍스트 색상"
|
|
||||||
ariaLabelColorInput="라디오 텍스트 색상 피커"
|
|
||||||
ariaLabelHexInput="라디오 텍스트 색상 HEX"
|
|
||||||
value={
|
|
||||||
radioProps.textColorCustom && radioProps.textColorCustom.trim() !== ""
|
|
||||||
? radioProps.textColorCustom
|
|
||||||
: "#f9fafb"
|
|
||||||
}
|
|
||||||
onChange={(hex) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
textColorCustom: hex,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
palette={TEXT_COLOR_PALETTE}
|
|
||||||
onPaletteSelect={(item) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
textColorCustom: item.color,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="배경 색상"
|
|
||||||
ariaLabelColorInput="라디오 배경 색상 피커"
|
|
||||||
ariaLabelHexInput="라디오 배경 색상 HEX"
|
|
||||||
value={
|
|
||||||
radioProps.fillColorCustom && radioProps.fillColorCustom.trim() !== ""
|
|
||||||
? radioProps.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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="테두리 색상"
|
|
||||||
ariaLabelColorInput="라디오 테두리 색상 피커"
|
|
||||||
ariaLabelHexInput="라디오 테두리 색상 HEX"
|
|
||||||
value={
|
|
||||||
radioProps.strokeColorCustom && radioProps.strokeColorCustom.trim() !== ""
|
|
||||||
? radioProps.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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 모서리 둥글기"
|
|
||||||
value={(() => {
|
|
||||||
const r = radioProps.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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,392 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import type { Block, FormSelectBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
|
||||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
|
||||||
|
|
||||||
interface FormSelectPropertiesPanelProps {
|
|
||||||
block: Block;
|
|
||||||
selectedBlockId: string | null;
|
|
||||||
updateBlock: (id: string, partial: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock }: FormSelectPropertiesPanelProps) {
|
|
||||||
if (!selectedBlockId || block.id !== selectedBlockId) return null;
|
|
||||||
|
|
||||||
const selectProps = block.props as FormSelectBlockProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3 text-xs">
|
|
||||||
<h3 className="text-[11px] font-semibold text-slate-200">셀렉트 필드</h3>
|
|
||||||
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">라벨 타입</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={selectProps.labelMode ?? "text"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
labelMode: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="text">텍스트</option>
|
|
||||||
<option value="image">이미지</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">필드 라벨</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={selectProps.label ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
label: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<span className="text-slate-400">전송 키</span>
|
|
||||||
<input
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
value={selectProps.formFieldName ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
formFieldName: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-slate-400">옵션</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="rounded border border-slate-700 bg-slate-900 px-2 py-0.5 text-[10px] text-slate-200 hover:bg-slate-800"
|
|
||||||
onClick={() => {
|
|
||||||
const next = Array.isArray((selectProps as any).options)
|
|
||||||
? [...(selectProps as any).options]
|
|
||||||
: [];
|
|
||||||
next.push({
|
|
||||||
label: "새 옵션",
|
|
||||||
value: `option_${next.length + 1}`,
|
|
||||||
});
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
옵션 추가
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{(((selectProps as any).options ?? []) as any[]).map((opt, index) => (
|
|
||||||
<div key={opt.value ?? index} className="space-y-1 rounded border border-slate-800 p-2">
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<input
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
placeholder="라벨"
|
|
||||||
value={opt.label ?? ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(((selectProps as any).options ?? []) as any[])];
|
|
||||||
next[index] = {
|
|
||||||
...next[index],
|
|
||||||
label: e.target.value,
|
|
||||||
};
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
placeholder="값(value)"
|
|
||||||
value={opt.value ?? ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
const next = [...(((selectProps as any).options ?? []) as any[])];
|
|
||||||
next[index] = {
|
|
||||||
...next[index],
|
|
||||||
value: e.target.value,
|
|
||||||
};
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="h-7 w-7 rounded border border-slate-700 bg-slate-950 text-[10px] text-slate-300 hover:bg-red-900/60 hover:border-red-700"
|
|
||||||
onClick={() => {
|
|
||||||
const next = (((selectProps as any).options ?? []) as any[]).filter((_, i) => i !== index);
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
options: next,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label className="inline-flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
|
|
||||||
checked={Boolean(selectProps.required)}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
required: e.target.checked,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<span className="text-slate-400">필수 필드</span>
|
|
||||||
</label>
|
|
||||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
|
||||||
<h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="셀렉트 텍스트 크기 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = selectProps.fontSizeCustom ?? "";
|
|
||||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 14;
|
|
||||||
})()}
|
|
||||||
min={8}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "XS", value: 12 },
|
|
||||||
{ id: "sm", label: "S", value: 14 },
|
|
||||||
{ id: "md", label: "M", value: 16 },
|
|
||||||
{ id: "lg", label: "L", value: 18 },
|
|
||||||
{ id: "xl", label: "XL", value: 20 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
fontSizeCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* 줄간격 px 입력을 받아 preview 렌더러의 em 변환 근거로 사용한다 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="셀렉트 줄간격 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = selectProps.lineHeightCustom ?? "";
|
|
||||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 20;
|
|
||||||
})()}
|
|
||||||
min={8}
|
|
||||||
max={60}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "타이트", value: 18 },
|
|
||||||
{ id: "normal", label: "보통", value: 24 },
|
|
||||||
{ id: "loose", label: "루즈", value: 32 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
lineHeightCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* 자간 px 입력을 제공하여 TDD 시나리오와 동기화한다 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="셀렉트 자간 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = selectProps.letterSpacingCustom ?? "";
|
|
||||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 0;
|
|
||||||
})()}
|
|
||||||
min={-10}
|
|
||||||
max={20}
|
|
||||||
step={0.5}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "좁게", value: -1 },
|
|
||||||
{ id: "normal", label: "보통", value: 0 },
|
|
||||||
{ id: "wide", label: "넓게", value: 2 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
letterSpacingCustom: `${v}px`,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
|
||||||
<span>필드 너비</span>
|
|
||||||
<select
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
|
|
||||||
value={selectProps.widthMode ?? "full"}
|
|
||||||
onChange={(e) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthMode: e.target.value,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="auto">자동</option>
|
|
||||||
<option value="full">전체 폭</option>
|
|
||||||
<option value="fixed">고정 값</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
{(selectProps.widthMode ?? "full") === "fixed" && (
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 고정 너비"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={selectProps.widthPx ?? 240}
|
|
||||||
min={80}
|
|
||||||
max={800}
|
|
||||||
step={10}
|
|
||||||
presets={[
|
|
||||||
{ id: "sm", label: "작게", value: 200 },
|
|
||||||
{ id: "md", label: "보통", value: 280 },
|
|
||||||
{ id: "lg", label: "넓게", value: 360 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthPx: v,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="셀렉트 가로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof selectProps.paddingX === "number" ? selectProps.paddingX : 12}
|
|
||||||
min={0}
|
|
||||||
max={60}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "아주 얇게", value: 6 },
|
|
||||||
{ id: "sm", label: "얇게", value: 10 },
|
|
||||||
{ id: "md", label: "보통", value: 12 },
|
|
||||||
{ id: "lg", label: "넓게", value: 16 },
|
|
||||||
{ id: "xl", label: "아주 넓게", value: 20 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingX: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="셀렉트 세로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof selectProps.paddingY === "number" ? selectProps.paddingY : 10}
|
|
||||||
min={0}
|
|
||||||
max={40}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "아주 얇게", value: 6 },
|
|
||||||
{ id: "sm", label: "얇게", value: 8 },
|
|
||||||
{ id: "md", label: "보통", value: 10 },
|
|
||||||
{ id: "lg", label: "넓게", value: 12 },
|
|
||||||
{ id: "xl", label: "아주 넓게", value: 16 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) =>
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingY: v,
|
|
||||||
} as any)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="필드 텍스트 색상"
|
|
||||||
ariaLabelColorInput="셀렉트 텍스트 색상 피커"
|
|
||||||
ariaLabelHexInput="셀렉트 텍스트 색상 HEX"
|
|
||||||
value={
|
|
||||||
selectProps.textColorCustom && selectProps.textColorCustom.trim() !== ""
|
|
||||||
? selectProps.textColorCustom
|
|
||||||
: "#f9fafb"
|
|
||||||
}
|
|
||||||
onChange={(hex) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
textColorCustom: hex,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
palette={TEXT_COLOR_PALETTE}
|
|
||||||
onPaletteSelect={(item) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
textColorCustom: item.color,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="필드 채움 색상"
|
|
||||||
ariaLabelColorInput="셀렉트 채움 색상 피커"
|
|
||||||
ariaLabelHexInput="셀렉트 채움 색상 HEX"
|
|
||||||
value={
|
|
||||||
selectProps.fillColorCustom && selectProps.fillColorCustom.trim() !== ""
|
|
||||||
? selectProps.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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorPickerField
|
|
||||||
label="필드 테두리 색상"
|
|
||||||
ariaLabelColorInput="셀렉트 테두리 색상 피커"
|
|
||||||
ariaLabelHexInput="셀렉트 테두리 색상 HEX"
|
|
||||||
value={
|
|
||||||
selectProps.strokeColorCustom && selectProps.strokeColorCustom.trim() !== ""
|
|
||||||
? selectProps.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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="필드 모서리 둥글기"
|
|
||||||
value={(() => {
|
|
||||||
const r = selectProps.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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
+388
-1466
File diff suppressed because it is too large
Load Diff
@@ -1,223 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useCallback } from "react";
|
|
||||||
import { useEditorStore } from "@/features/editor/state/editorStore";
|
|
||||||
|
|
||||||
// 좌측 블록/폼/템플릿 추가 사이드바를 분리한 컴포넌트
|
|
||||||
export function BlocksSidebar() {
|
|
||||||
const addTextBlock = useEditorStore((state) => state.addTextBlock);
|
|
||||||
const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
|
|
||||||
const addImageBlock = useEditorStore((state) => state.addImageBlock);
|
|
||||||
const addDividerBlock = useEditorStore((state) => state.addDividerBlock);
|
|
||||||
const addListBlock = useEditorStore((state) => state.addListBlock);
|
|
||||||
const addSectionBlock = useEditorStore((state) => state.addSectionBlock);
|
|
||||||
|
|
||||||
const addFormBlock = useEditorStore((state) => state.addFormBlock);
|
|
||||||
const addFormInputBlock = useEditorStore((state) => (state as any).addFormInputBlock);
|
|
||||||
const addFormSelectBlock = useEditorStore((state) => (state as any).addFormSelectBlock);
|
|
||||||
const addFormCheckboxBlock = useEditorStore((state) => (state as any).addFormCheckboxBlock);
|
|
||||||
const addFormRadioBlock = useEditorStore((state) => (state as any).addFormRadioBlock);
|
|
||||||
|
|
||||||
const addHeroTemplateSection = useEditorStore((state) => state.addHeroTemplateSection);
|
|
||||||
const addFeaturesTemplateSection = useEditorStore((state) => state.addFeaturesTemplateSection);
|
|
||||||
const addCtaTemplateSection = useEditorStore((state) => state.addCtaTemplateSection);
|
|
||||||
const addFaqTemplateSection = useEditorStore((state) => state.addFaqTemplateSection);
|
|
||||||
const addPricingTemplateSection = useEditorStore((state) => state.addPricingTemplateSection);
|
|
||||||
const addTestimonialsTemplateSection = useEditorStore((state) => state.addTestimonialsTemplateSection);
|
|
||||||
const addBlogTemplateSection = useEditorStore((state) => state.addBlogTemplateSection);
|
|
||||||
const addTeamTemplateSection = useEditorStore((state) => state.addTeamTemplateSection);
|
|
||||||
const addFooterTemplateSection = useEditorStore((state) => state.addFooterTemplateSection);
|
|
||||||
|
|
||||||
// 버튼 핸들러를 useCallback으로 래핑해 불필요한 재생성을 줄인다.
|
|
||||||
const handleAddText = useCallback(() => addTextBlock(), [addTextBlock]);
|
|
||||||
const handleAddButton = useCallback(() => addButtonBlock(), [addButtonBlock]);
|
|
||||||
const handleAddImage = useCallback(() => addImageBlock(), [addImageBlock]);
|
|
||||||
const handleAddDivider = useCallback(() => addDividerBlock(), [addDividerBlock]);
|
|
||||||
const handleAddList = useCallback(() => addListBlock(), [addListBlock]);
|
|
||||||
const handleAddSection = useCallback(() => addSectionBlock(), [addSectionBlock]);
|
|
||||||
|
|
||||||
const handleAddFormBlock = useCallback(() => addFormBlock(), [addFormBlock]);
|
|
||||||
const handleAddFormInput = useCallback(() => addFormInputBlock(), [addFormInputBlock]);
|
|
||||||
const handleAddFormSelect = useCallback(() => addFormSelectBlock(), [addFormSelectBlock]);
|
|
||||||
const handleAddFormRadio = useCallback(() => addFormRadioBlock(), [addFormRadioBlock]);
|
|
||||||
const handleAddFormCheckbox = useCallback(() => addFormCheckboxBlock(), [addFormCheckboxBlock]);
|
|
||||||
|
|
||||||
const handleAddHeroTemplate = useCallback(
|
|
||||||
() => addHeroTemplateSection(),
|
|
||||||
[addHeroTemplateSection],
|
|
||||||
);
|
|
||||||
const handleAddFeaturesTemplate = useCallback(
|
|
||||||
() => addFeaturesTemplateSection(),
|
|
||||||
[addFeaturesTemplateSection],
|
|
||||||
);
|
|
||||||
const handleAddCtaTemplate = useCallback(() => addCtaTemplateSection(), [addCtaTemplateSection]);
|
|
||||||
const handleAddFaqTemplate = useCallback(() => addFaqTemplateSection(), [addFaqTemplateSection]);
|
|
||||||
const handleAddPricingTemplate = useCallback(
|
|
||||||
() => addPricingTemplateSection(),
|
|
||||||
[addPricingTemplateSection],
|
|
||||||
);
|
|
||||||
const handleAddTestimonialsTemplate = useCallback(
|
|
||||||
() => addTestimonialsTemplateSection(),
|
|
||||||
[addTestimonialsTemplateSection],
|
|
||||||
);
|
|
||||||
const handleAddBlogTemplate = useCallback(() => addBlogTemplateSection(), [addBlogTemplateSection]);
|
|
||||||
const handleAddTeamTemplate = useCallback(() => addTeamTemplateSection(), [addTeamTemplateSection]);
|
|
||||||
const handleAddFooterTemplate = useCallback(
|
|
||||||
() => addFooterTemplateSection(),
|
|
||||||
[addFooterTemplateSection],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<aside className="w-60 border-r border-slate-800 p-4 text-sm space-y-3">
|
|
||||||
<h2 className="font-medium">블록</h2>
|
|
||||||
<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={handleAddText}
|
|
||||||
>
|
|
||||||
텍스트 블록 추가
|
|
||||||
</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={handleAddButton}
|
|
||||||
>
|
|
||||||
버튼 블록 추가
|
|
||||||
</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={handleAddImage}
|
|
||||||
>
|
|
||||||
이미지 블록 추가
|
|
||||||
</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={handleAddDivider}
|
|
||||||
>
|
|
||||||
구분선 블록 추가
|
|
||||||
</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={handleAddList}
|
|
||||||
>
|
|
||||||
리스트 블록 추가
|
|
||||||
</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={handleAddSection}
|
|
||||||
>
|
|
||||||
섹션 블록 추가
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="pt-3 border-t border-slate-800 mt-3 space-y-2">
|
|
||||||
<h3 className="text-[11px] font-medium text-slate-300">폼 요소</h3>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="w-full rounded border border-emerald-700 bg-emerald-950 px-3 py-2 text-left text-xs text-emerald-100 hover:bg-emerald-900"
|
|
||||||
onClick={handleAddFormBlock}
|
|
||||||
>
|
|
||||||
폼 블록 추가
|
|
||||||
</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={handleAddFormInput}
|
|
||||||
>
|
|
||||||
폼 입력 추가
|
|
||||||
</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={handleAddFormSelect}
|
|
||||||
>
|
|
||||||
폼 셀렉트 추가
|
|
||||||
</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={handleAddFormRadio}
|
|
||||||
>
|
|
||||||
폼 라디오 추가
|
|
||||||
</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={handleAddFormCheckbox}
|
|
||||||
>
|
|
||||||
폼 체크박스 추가
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-3 border-t border-slate-800 mt-3 space-y-2">
|
|
||||||
<h3 className="text-[11px] font-medium text-slate-300">템플릿</h3>
|
|
||||||
<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={handleAddHeroTemplate}
|
|
||||||
>
|
|
||||||
Hero 템플릿 추가
|
|
||||||
</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={handleAddFeaturesTemplate}
|
|
||||||
>
|
|
||||||
Features 템플릿 추가
|
|
||||||
</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={handleAddCtaTemplate}
|
|
||||||
>
|
|
||||||
CTA 템플릿 추가
|
|
||||||
</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={handleAddFaqTemplate}
|
|
||||||
>
|
|
||||||
FAQ 템플릿 추가
|
|
||||||
</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={handleAddPricingTemplate}
|
|
||||||
>
|
|
||||||
Pricing 템플릿 추가
|
|
||||||
</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={handleAddTestimonialsTemplate}
|
|
||||||
>
|
|
||||||
Testimonials 템플릿 추가
|
|
||||||
</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={handleAddBlogTemplate}
|
|
||||||
>
|
|
||||||
Blog 템플릿 추가
|
|
||||||
</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={handleAddTeamTemplate}
|
|
||||||
>
|
|
||||||
Team 템플릿 추가
|
|
||||||
</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={handleAddFooterTemplate}
|
|
||||||
>
|
|
||||||
Footer 템플릿 추가
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,358 +0,0 @@
|
|||||||
"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">
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="가로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={buttonProps.paddingX ?? 16}
|
|
||||||
min={0}
|
|
||||||
max={120}
|
|
||||||
step={4}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "XS", value: 8 },
|
|
||||||
{ id: "sm", label: "S", value: 12 },
|
|
||||||
{ id: "md", label: "M", value: 16 },
|
|
||||||
{ id: "lg", label: "L", value: 24 },
|
|
||||||
{ id: "xl", label: "XL", value: 32 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingX: v,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="세로 패딩 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={buttonProps.paddingY ?? 10}
|
|
||||||
min={0}
|
|
||||||
max={80}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "xs", label: "XS", value: 6 },
|
|
||||||
{ id: "sm", label: "S", value: 8 },
|
|
||||||
{ id: "md", label: "M", value: 10 },
|
|
||||||
{ id: "lg", label: "L", value: 14 },
|
|
||||||
{ id: "xl", label: "XL", value: 20 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
paddingY: v,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</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">
|
|
||||||
{/* 버튼 크기 스케일 컨트롤은 paddingX/paddingY 및 폰트 크기(px) 컨트롤로 충분하므로 제거했다. */}
|
|
||||||
</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">
|
|
||||||
<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.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")}
|
|
||||||
onChange={(e) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthMode: e.target.value as NonNullable<ButtonBlockProps["widthMode"]>,
|
|
||||||
} as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="auto">자동</option>
|
|
||||||
<option value="full">전체 폭</option>
|
|
||||||
<option value="fixed">고정 값</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
{(buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")) === "fixed" && (
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="버튼 고정 너비"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={buttonProps.widthPx ?? 240}
|
|
||||||
min={80}
|
|
||||||
max={600}
|
|
||||||
step={10}
|
|
||||||
presets={[
|
|
||||||
{ id: "sm", label: "작게", value: 180 },
|
|
||||||
{ id: "md", label: "보통", value: 240 },
|
|
||||||
{ id: "lg", label: "넓게", value: 320 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, {
|
|
||||||
widthPx: v,
|
|
||||||
} 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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import type { DividerBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
|
||||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
|
||||||
|
|
||||||
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>
|
|
||||||
|
|
||||||
<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="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
aria-label="구분선 길이 모드"
|
|
||||||
value={dividerProps.widthMode ?? "full"}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.target.value as NonNullable<DividerBlockProps["widthMode"]>;
|
|
||||||
updateBlock(selectedBlockId, { widthMode: value } as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="auto">내용에 맞춤</option>
|
|
||||||
<option value="full">전체 폭</option>
|
|
||||||
<option value="fixed">고정 길이 (px)</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{(dividerProps.widthMode ?? "full") === "fixed" && (
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="고정 길이 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={dividerProps.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);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 색상 */}
|
|
||||||
<ColorPickerField
|
|
||||||
label="선 색상"
|
|
||||||
ariaLabelColorInput="구분선 색상 피커"
|
|
||||||
ariaLabelHexInput="구분선 색상 HEX"
|
|
||||||
value={
|
|
||||||
dividerProps.colorHex && dividerProps.colorHex.trim() !== ""
|
|
||||||
? dividerProps.colorHex
|
|
||||||
: TEXT_COLOR_PALETTE[0]?.color ?? "#64748b"
|
|
||||||
}
|
|
||||||
onChange={(hex) => {
|
|
||||||
updateBlock(selectedBlockId, { colorHex: hex } as any);
|
|
||||||
}}
|
|
||||||
palette={TEXT_COLOR_PALETTE}
|
|
||||||
onPaletteSelect={(item) => {
|
|
||||||
updateBlock(selectedBlockId, { colorHex: item.color } as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 상하 여백 (슬라이더) */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="위/아래 여백"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
if (typeof dividerProps.marginYPx === "number") {
|
|
||||||
return dividerProps.marginYPx;
|
|
||||||
}
|
|
||||||
const y = dividerProps.marginY ?? "md";
|
|
||||||
return y === "sm" ? 8 : y === "lg" ? 24 : 16;
|
|
||||||
})()}
|
|
||||||
min={0}
|
|
||||||
max={50}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "sm", label: "작게", value: 8 },
|
|
||||||
{ id: "md", label: "보통", value: 16 },
|
|
||||||
{ id: "lg", label: "크게", value: 24 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, { marginYPx: v } as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
"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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,231 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import type { ListBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import {
|
|
||||||
buildItemsTreeFromItems,
|
|
||||||
itemsTreeToLines,
|
|
||||||
linesToItemsTree,
|
|
||||||
parseTextareaToLines,
|
|
||||||
stringifyLinesToTextarea,
|
|
||||||
} from "@/features/editor/state/editorStore";
|
|
||||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
|
||||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
|
||||||
|
|
||||||
export type ListPropertiesPanelProps = {
|
|
||||||
listProps: ListBlockProps;
|
|
||||||
selectedBlockId: string;
|
|
||||||
selectedListItemId: string | null;
|
|
||||||
updateBlock: (id: string, partial: Partial<ListBlockProps>) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function ListPropertiesPanel({
|
|
||||||
listProps,
|
|
||||||
selectedBlockId,
|
|
||||||
selectedListItemId,
|
|
||||||
updateBlock,
|
|
||||||
}: ListPropertiesPanelProps) {
|
|
||||||
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-[80px] rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
aria-label="리스트 아이템들"
|
|
||||||
value={(() => {
|
|
||||||
const tree = (listProps as any).itemsTree as any[] | undefined;
|
|
||||||
|
|
||||||
if (tree && tree.length > 0) {
|
|
||||||
// 중첩 리스트가 존재하는 경우, itemsTree → ListLine → textarea 문자열 순으로 직렬화한다.
|
|
||||||
const lines = itemsTreeToLines(tree as any);
|
|
||||||
return stringifyLinesToTextarea(lines as any);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 기존 하위호환: items 배열이 있다면 그대로 줄바꿈으로 이어 붙여 사용한다.
|
|
||||||
return (listProps.items ?? []).join("\n");
|
|
||||||
})()}
|
|
||||||
onChange={(e) => {
|
|
||||||
const textValue = e.target.value;
|
|
||||||
|
|
||||||
// textarea 내용을 ListLine 배열로 파싱한다.
|
|
||||||
const parsedLines = parseTextareaToLines(textValue);
|
|
||||||
|
|
||||||
// 전체 입력이 완전히 비어 있는 경우에는 빈 리스트 상태를 유지한다.
|
|
||||||
const hasAnyContent = parsedLines.some((line) => line.text.length > 0);
|
|
||||||
|
|
||||||
if (!hasAnyContent) {
|
|
||||||
updateBlock(
|
|
||||||
selectedBlockId,
|
|
||||||
{
|
|
||||||
items: [],
|
|
||||||
itemsTree: [],
|
|
||||||
} as any,
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// depth 기반 라인 모델에서 중첩 리스트 트리를 생성한다.
|
|
||||||
const nextTree = linesToItemsTree(selectedBlockId, parsedLines as any);
|
|
||||||
|
|
||||||
// 플랫 items 배열은 기존 하위호환을 위해 text 만 뽑아서 유지한다.
|
|
||||||
const flatItems = parsedLines.map((line) => line.text);
|
|
||||||
|
|
||||||
updateBlock(
|
|
||||||
selectedBlockId,
|
|
||||||
{
|
|
||||||
items: flatItems,
|
|
||||||
itemsTree: nextTree,
|
|
||||||
} as any,
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-xs text-slate-400">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* 글자 크기 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="글자 크기 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
const raw = listProps.fontSizeCustom ?? "";
|
|
||||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 14;
|
|
||||||
})()}
|
|
||||||
min={10}
|
|
||||||
max={32}
|
|
||||||
step={1}
|
|
||||||
presets={[
|
|
||||||
{ id: "sm", label: "작게", value: 12 },
|
|
||||||
{ id: "md", label: "보통", value: 14 },
|
|
||||||
{ id: "lg", label: "크게", value: 18 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(px) => {
|
|
||||||
updateBlock(selectedBlockId, { fontSizeCustom: `${px}px` } as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 줄 간격 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="줄 간격"
|
|
||||||
value={(() => {
|
|
||||||
const raw = listProps.lineHeightCustom ?? "";
|
|
||||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
|
||||||
if (match) return Number(match[1]);
|
|
||||||
return 1.5;
|
|
||||||
})()}
|
|
||||||
min={1}
|
|
||||||
max={3}
|
|
||||||
step={0.05}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "좁게", value: 1.2 },
|
|
||||||
{ id: "normal", label: "보통", value: 1.5 },
|
|
||||||
{ id: "relaxed", label: "넓게", value: 1.8 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, { lineHeightCustom: v.toString() } as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 텍스트 색상 */}
|
|
||||||
<ColorPickerField
|
|
||||||
label="텍스트 색상"
|
|
||||||
ariaLabelColorInput="리스트 텍스트 색상 피커"
|
|
||||||
ariaLabelHexInput="리스트 텍스트 색상 HEX"
|
|
||||||
value={
|
|
||||||
listProps.textColorCustom && listProps.textColorCustom.trim() !== ""
|
|
||||||
? listProps.textColorCustom
|
|
||||||
: "#e5e7eb"
|
|
||||||
}
|
|
||||||
onChange={(hex) => {
|
|
||||||
updateBlock(selectedBlockId, { textColorCustom: hex } as any);
|
|
||||||
}}
|
|
||||||
palette={TEXT_COLOR_PALETTE}
|
|
||||||
onPaletteSelect={(item) => {
|
|
||||||
updateBlock(selectedBlockId, { textColorCustom: item.color } as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 불릿 스타일 (● / ○ / ■ / 숫자형 / 없음) */}
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<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.bulletStyle ?? "disc"}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.target.value as NonNullable<ListBlockProps["bulletStyle"]>;
|
|
||||||
|
|
||||||
// 순서형 스타일(decimal / alpha / roman)은 ordered=true, 나머지는 false 로 설정한다.
|
|
||||||
const orderedStyles: Array<NonNullable<ListBlockProps["bulletStyle"]>> = [
|
|
||||||
"decimal",
|
|
||||||
"lower-alpha",
|
|
||||||
"upper-alpha",
|
|
||||||
"lower-roman",
|
|
||||||
"upper-roman",
|
|
||||||
];
|
|
||||||
const ordered = orderedStyles.includes(value);
|
|
||||||
|
|
||||||
updateBlock(selectedBlockId, { bulletStyle: value, ordered } as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="disc">기본 (●)</option>
|
|
||||||
<option value="circle">원 (○)</option>
|
|
||||||
<option value="square">사각 (■)</option>
|
|
||||||
<option value="decimal">숫자 (1.)</option>
|
|
||||||
<option value="lower-alpha">알파벳 소문자 (a.)</option>
|
|
||||||
<option value="upper-alpha">알파벳 대문자 (A.)</option>
|
|
||||||
<option value="lower-roman">로마 숫자 소문자 (i.)</option>
|
|
||||||
<option value="upper-roman">로마 숫자 대문자 (I.)</option>
|
|
||||||
<option value="none">없음</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{/* 아이템 간 여백 (슬라이더) */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="아이템 간 여백 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={(() => {
|
|
||||||
if (typeof listProps.gapYPx === "number") {
|
|
||||||
return listProps.gapYPx;
|
|
||||||
}
|
|
||||||
const token = listProps.gapY ?? "md";
|
|
||||||
return token === "sm" ? 4 : token === "lg" ? 16 : 8;
|
|
||||||
})()}
|
|
||||||
min={0}
|
|
||||||
max={40}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "tight", label: "좁게", value: 4 },
|
|
||||||
{ id: "normal", label: "보통", value: 8 },
|
|
||||||
{ id: "relaxed", label: "넓게", value: 16 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(v) => {
|
|
||||||
updateBlock(selectedBlockId, { gapYPx: v } as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,215 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import type { Block, ButtonBlockProps, FormBlockProps, ListBlockProps, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { ButtonPropertiesPanel } from "./ButtonPropertiesPanel";
|
|
||||||
import { TextPropertiesPanel } from "./TextPropertiesPanel";
|
|
||||||
import { ListPropertiesPanel } from "./ListPropertiesPanel";
|
|
||||||
import { DividerPropertiesPanel } from "./DividerPropertiesPanel";
|
|
||||||
import { ImagePropertiesPanel } from "./ImagePropertiesPanel";
|
|
||||||
import { SectionPropertiesPanel } from "./SectionPropertiesPanel";
|
|
||||||
import { FormInputPropertiesPanel } from "../forms/FormInputPropertiesPanel";
|
|
||||||
import { FormSelectPropertiesPanel } from "../forms/FormSelectPropertiesPanel";
|
|
||||||
import { FormCheckboxPropertiesPanel } from "../forms/FormCheckboxPropertiesPanel";
|
|
||||||
import { FormRadioPropertiesPanel } from "../forms/FormRadioPropertiesPanel";
|
|
||||||
import { FormControllerPanel } from "../forms/FormControllerPanel";
|
|
||||||
|
|
||||||
interface PropertiesSidebarProps {
|
|
||||||
blocks: Block[];
|
|
||||||
selectedBlockId: string | null;
|
|
||||||
selectedListItemId: string | null;
|
|
||||||
updateBlock: (id: string, partial: any) => void;
|
|
||||||
removeBlock: (id: string) => void;
|
|
||||||
duplicateBlock: (id: string) => void;
|
|
||||||
// 텍스트 속성 패널에서 사용하는 인라인 편집 상태를 그대로 전달한다.
|
|
||||||
editingBlockId: string | null;
|
|
||||||
setEditingText: (value: string) => void;
|
|
||||||
onMoveSelectedItemUp: (blockId: string) => void;
|
|
||||||
onMoveSelectedItemDown: (blockId: string) => void;
|
|
||||||
onIndentSelectedItem: (blockId: string) => void;
|
|
||||||
onOutdentSelectedItem: (blockId: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 우측 속성 패널을 분리한 컴포넌트
|
|
||||||
export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
|
||||||
const {
|
|
||||||
blocks,
|
|
||||||
selectedBlockId,
|
|
||||||
selectedListItemId,
|
|
||||||
updateBlock,
|
|
||||||
removeBlock,
|
|
||||||
duplicateBlock,
|
|
||||||
editingBlockId,
|
|
||||||
setEditingText,
|
|
||||||
onMoveSelectedItemUp,
|
|
||||||
onMoveSelectedItemDown,
|
|
||||||
onIndentSelectedItem,
|
|
||||||
onOutdentSelectedItem,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<aside
|
|
||||||
data-testid="properties-sidebar"
|
|
||||||
className="w-80 p-4 text-sm border-l border-slate-800 flex flex-col gap-4 overflow-auto"
|
|
||||||
onKeyDownCapture={(e) => {
|
|
||||||
// 속성 패널 안에서 발생한 키 입력은 에디터 단축키/텍스트 블록 편집으로 전달되지 않도록 막는다.
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h2 className="font-medium mb-2">속성 패널</h2>
|
|
||||||
{selectedBlockId ? (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex gap-2 text-[11px]">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-100 hover:bg-red-900/60 hover:border-red-700"
|
|
||||||
onClick={() => removeBlock(selectedBlockId)}
|
|
||||||
>
|
|
||||||
블록 삭제
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-100 hover:bg-slate-800"
|
|
||||||
onClick={() => duplicateBlock(selectedBlockId)}
|
|
||||||
>
|
|
||||||
블록 복제
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{(() => {
|
|
||||||
const selectedBlock = blocks.find((b) => b.id === selectedBlockId);
|
|
||||||
if (!selectedBlock) return null;
|
|
||||||
|
|
||||||
if (selectedBlock.type === "text") {
|
|
||||||
const textProps = selectedBlock.props as TextBlockProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TextPropertiesPanel
|
|
||||||
textProps={textProps}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
editingBlockId={editingBlockId}
|
|
||||||
setEditingText={setEditingText}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "button") {
|
|
||||||
const buttonProps = selectedBlock.props as ButtonBlockProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ButtonPropertiesPanel
|
|
||||||
buttonProps={buttonProps}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "list") {
|
|
||||||
const listProps = selectedBlock.props as ListBlockProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ListPropertiesPanel
|
|
||||||
listProps={listProps}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
selectedListItemId={selectedListItemId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "divider") {
|
|
||||||
const dividerProps = selectedBlock.props as any;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DividerPropertiesPanel
|
|
||||||
dividerProps={dividerProps}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "image") {
|
|
||||||
const imageProps = selectedBlock.props as any;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ImagePropertiesPanel
|
|
||||||
imageProps={imageProps}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "section") {
|
|
||||||
const sectionProps = selectedBlock.props as SectionBlockProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SectionPropertiesPanel
|
|
||||||
sectionProps={sectionProps}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "formInput") {
|
|
||||||
return (
|
|
||||||
<FormInputPropertiesPanel
|
|
||||||
block={selectedBlock}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "formSelect") {
|
|
||||||
return (
|
|
||||||
<FormSelectPropertiesPanel
|
|
||||||
block={selectedBlock}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "formCheckbox") {
|
|
||||||
return (
|
|
||||||
<FormCheckboxPropertiesPanel
|
|
||||||
block={selectedBlock}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "formRadio") {
|
|
||||||
return (
|
|
||||||
<FormRadioPropertiesPanel
|
|
||||||
block={selectedBlock}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedBlock.type === "form") {
|
|
||||||
return (
|
|
||||||
<FormControllerPanel
|
|
||||||
block={selectedBlock}
|
|
||||||
blocks={blocks}
|
|
||||||
selectedBlockId={selectedBlockId}
|
|
||||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
})()}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<p className="text-xs text-slate-500">왼쪽 캔버스에서 블록을 선택하면 속성을 편집할 수 있습니다.</p>
|
|
||||||
)}
|
|
||||||
</aside>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,389 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
|
||||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
|
||||||
|
|
||||||
export type SectionPropertiesPanelProps = {
|
|
||||||
sectionProps: SectionBlockProps;
|
|
||||||
selectedBlockId: string;
|
|
||||||
updateBlock: (id: string, partial: Partial<SectionBlockProps>) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* 섹션 배경: 커스텀 색상 피커만 사용 */}
|
|
||||||
<div className="mt-1">
|
|
||||||
<ColorPickerField
|
|
||||||
label="배경 색상"
|
|
||||||
ariaLabelColorInput="섹션 배경 색상 선택"
|
|
||||||
ariaLabelHexInput="섹션 배경 색상 HEX 입력"
|
|
||||||
value={sectionProps.backgroundColorCustom ?? ""}
|
|
||||||
onChange={(hex) => {
|
|
||||||
const next = hex && hex.trim().length > 0 ? hex : undefined;
|
|
||||||
updateBlock(selectedBlockId, { backgroundColorCustom: next } as any);
|
|
||||||
}}
|
|
||||||
palette={TEXT_COLOR_PALETTE}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 세로 패딩 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
|
|
||||||
<div className="mt-3 space-y-1">
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="세로 패딩"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof sectionProps.paddingYPx === "number" ? sectionProps.paddingYPx : 48}
|
|
||||||
min={16}
|
|
||||||
max={80}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "x-tight", label: "매우 좁게", value: 16 },
|
|
||||||
{ id: "tight", label: "좁게", value: 32 },
|
|
||||||
{ id: "normal", label: "보통", value: 48 },
|
|
||||||
{ id: "relaxed", label: "넓게", value: 64 },
|
|
||||||
{ id: "x-relaxed", label: "아주 넓게", value: 80 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(next) => {
|
|
||||||
const safe = Number.isFinite(next) ? next : 48;
|
|
||||||
updateBlock(selectedBlockId, { paddingYPx: safe } as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</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="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
aria-label="섹션 컬럼 레이아웃"
|
|
||||||
value={(() => {
|
|
||||||
const cols = sectionProps.columns ?? [];
|
|
||||||
const spans = cols.map((c) => c.span).join("-");
|
|
||||||
if (spans === "12") return "one-full";
|
|
||||||
if (spans === "6-6") return "two-equal";
|
|
||||||
if (spans === "4-8") return "two-1-2";
|
|
||||||
if (spans === "8-4") return "two-2-1";
|
|
||||||
if (spans === "4-4-4") return "three-equal";
|
|
||||||
return "custom";
|
|
||||||
})()}
|
|
||||||
onChange={(e) => {
|
|
||||||
const v = e.target.value as
|
|
||||||
| "one-full"
|
|
||||||
| "two-equal"
|
|
||||||
| "two-1-2"
|
|
||||||
| "two-2-1"
|
|
||||||
| "three-equal"
|
|
||||||
| "custom";
|
|
||||||
|
|
||||||
if (v === "custom") return;
|
|
||||||
const current = sectionProps.columns ?? [];
|
|
||||||
|
|
||||||
const ensureId = (index: number) => {
|
|
||||||
if (current[index]?.id) return current[index].id;
|
|
||||||
return `${selectedBlockId}_col_${index + 1}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const nextColumns =
|
|
||||||
v === "one-full"
|
|
||||||
? [
|
|
||||||
{ id: ensureId(0), span: 12 },
|
|
||||||
]
|
|
||||||
: v === "two-equal"
|
|
||||||
? [
|
|
||||||
{ id: ensureId(0), span: 6 },
|
|
||||||
{ id: ensureId(1), span: 6 },
|
|
||||||
]
|
|
||||||
: v === "two-1-2"
|
|
||||||
? [
|
|
||||||
{ id: ensureId(0), span: 4 },
|
|
||||||
{ id: ensureId(1), span: 8 },
|
|
||||||
]
|
|
||||||
: v === "two-2-1"
|
|
||||||
? [
|
|
||||||
{ id: ensureId(0), span: 8 },
|
|
||||||
{ id: ensureId(1), span: 4 },
|
|
||||||
]
|
|
||||||
: [
|
|
||||||
{ id: ensureId(0), span: 4 },
|
|
||||||
{ id: ensureId(1), span: 4 },
|
|
||||||
{ id: ensureId(2), span: 4 },
|
|
||||||
];
|
|
||||||
|
|
||||||
updateBlock(selectedBlockId, { columns: nextColumns } as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="one-full">1열 (1/1)</option>
|
|
||||||
<option value="two-equal">2열 (1/2 - 1/2)</option>
|
|
||||||
<option value="two-1-2">2열 (1/3 - 2/3)</option>
|
|
||||||
<option value="two-2-1">2열 (2/3 - 1/3)</option>
|
|
||||||
<option value="three-equal">3열 (1/3 - 1/3 - 1/3)</option>
|
|
||||||
<option value="custom">직접 조정</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{/* 컬럼 개수 직접 조정 (1~5열) */}
|
|
||||||
{(() => {
|
|
||||||
const current = sectionProps.columns ?? [];
|
|
||||||
const count = current.length || 1;
|
|
||||||
|
|
||||||
const handleChangeCount = (nextCount: number) => {
|
|
||||||
const clamped = Math.max(1, Math.min(5, Math.floor(nextCount)));
|
|
||||||
if (clamped === count) return;
|
|
||||||
|
|
||||||
const base = Math.floor(12 / clamped) || 1;
|
|
||||||
const rest = 12 - base * clamped;
|
|
||||||
|
|
||||||
const nextColumns = Array.from({ length: clamped }).map((_, index) => {
|
|
||||||
const existing = current[index];
|
|
||||||
const id = existing?.id ?? `${selectedBlockId}_col_${index + 1}`;
|
|
||||||
const span = base + (index === clamped - 1 ? rest : 0);
|
|
||||||
return { id, span };
|
|
||||||
});
|
|
||||||
|
|
||||||
updateBlock(selectedBlockId, { columns: nextColumns } as any);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mt-2 flex items-center justify-between text-xs text-slate-300">
|
|
||||||
<span>{`컬럼 개수: ${count}열 (최대 5열)`}</span>
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="rounded border border-slate-700 px-2 py-0.5 text-[11px] disabled:opacity-40"
|
|
||||||
onClick={() => handleChangeCount(count - 1)}
|
|
||||||
disabled={count <= 1}
|
|
||||||
>
|
|
||||||
- 열 제거
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="rounded border border-slate-700 px-2 py-0.5 text-[11px] disabled:opacity-40"
|
|
||||||
onClick={() => handleChangeCount(count + 1)}
|
|
||||||
disabled={count >= 5}
|
|
||||||
>
|
|
||||||
+ 열 추가
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})()}
|
|
||||||
|
|
||||||
{/* 컬럼별 span 조정
|
|
||||||
- 컬럼이 1개일 때: 12 고정, 편집 불가능
|
|
||||||
- 컬럼이 2개 이상일 때: 앞의 N-1개 컬럼만 직접 조정, 마지막 컬럼은 합이 항상 12가 되도록 자동 계산 */}
|
|
||||||
{(() => {
|
|
||||||
const columns = sectionProps.columns ?? [];
|
|
||||||
const colCount = columns.length || 1;
|
|
||||||
|
|
||||||
// 1컬럼인 경우: 12 고정 표시
|
|
||||||
if (colCount === 1) {
|
|
||||||
const only = columns[0];
|
|
||||||
return (
|
|
||||||
<label key={only.id} className="flex flex-col gap-1">
|
|
||||||
<span>{`1열 폭 (고정 12/12)`}</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min={12}
|
|
||||||
max={12}
|
|
||||||
step={1}
|
|
||||||
className="flex-1 opacity-60"
|
|
||||||
aria-label="1열 폭 슬라이더 (고정)"
|
|
||||||
value={12}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
min={12}
|
|
||||||
max={12}
|
|
||||||
className="w-16 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none text-slate-400"
|
|
||||||
aria-label="1열 폭 (고정 12/12)"
|
|
||||||
value={12}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const lastIndex = colCount - 1;
|
|
||||||
|
|
||||||
return columns.map((col, index) => {
|
|
||||||
const maxSpanForEach = Math.max(1, 12 - (colCount - 1));
|
|
||||||
|
|
||||||
// 마지막 컬럼: 자동 계산, 편집 불가
|
|
||||||
if (index === lastIndex) {
|
|
||||||
const nonLast = columns.slice(0, lastIndex);
|
|
||||||
const nonLastSum = nonLast.reduce(
|
|
||||||
(sum, c) => sum + (Number.isFinite(c.span) ? c.span : 0),
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
let autoSpan = 12 - nonLastSum;
|
|
||||||
if (!Number.isFinite(autoSpan) || autoSpan < 1) autoSpan = 1;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<label key={col.id} className="flex flex-col gap-1">
|
|
||||||
<span>{`${index + 1}열 폭 (자동, 합계 12 유지)`}</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min={1}
|
|
||||||
max={maxSpanForEach}
|
|
||||||
step={1}
|
|
||||||
className="flex-1 opacity-60"
|
|
||||||
aria-label={`${index + 1}열 폭 슬라이더 (자동)`}
|
|
||||||
value={Number.isFinite(col.span) ? col.span : autoSpan}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
min={1}
|
|
||||||
max={maxSpanForEach}
|
|
||||||
className="w-16 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none text-slate-400"
|
|
||||||
aria-label={`${index + 1}열 폭 (자동)`}
|
|
||||||
value={Number.isFinite(col.span) ? col.span : autoSpan}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 앞의 N-1개 컬럼: 직접 조정하면 마지막 컬럼을 자동으로 보정해서 합계 12 유지
|
|
||||||
const otherNonLastSum = columns.reduce((sum, c, idx) => {
|
|
||||||
if (idx === index || idx === lastIndex) return sum;
|
|
||||||
return sum + (Number.isFinite(c.span) ? c.span : 0);
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
const maxForCurrent = Math.max(
|
|
||||||
1,
|
|
||||||
Math.min(maxSpanForEach, 11 - otherNonLastSum),
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleChange = (raw: number) => {
|
|
||||||
if (Number.isNaN(raw)) return;
|
|
||||||
const clampedCurrent = Math.min(
|
|
||||||
maxForCurrent,
|
|
||||||
Math.max(1, Math.floor(raw)),
|
|
||||||
);
|
|
||||||
|
|
||||||
const newNonLastTotal = otherNonLastSum + clampedCurrent;
|
|
||||||
let lastSpan = 12 - newNonLastTotal;
|
|
||||||
if (!Number.isFinite(lastSpan) || lastSpan < 1) {
|
|
||||||
lastSpan = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextColumns = columns.map((c, idx) => {
|
|
||||||
if (idx === index) {
|
|
||||||
return { ...c, span: clampedCurrent };
|
|
||||||
}
|
|
||||||
if (idx === lastIndex) {
|
|
||||||
return { ...c, span: lastSpan };
|
|
||||||
}
|
|
||||||
return c;
|
|
||||||
});
|
|
||||||
|
|
||||||
updateBlock(selectedBlockId, { columns: nextColumns } as any);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<label key={col.id} className="flex flex-col gap-1">
|
|
||||||
<span>{`${index + 1}열 폭 (1~${maxForCurrent})`}</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min={1}
|
|
||||||
max={maxForCurrent}
|
|
||||||
step={1}
|
|
||||||
className="flex-1"
|
|
||||||
aria-label={`${index + 1}열 폭 슬라이더`}
|
|
||||||
value={Number.isFinite(col.span) ? col.span : 12}
|
|
||||||
onChange={(e) => {
|
|
||||||
handleChange(Number(e.target.value));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
min={1}
|
|
||||||
max={maxForCurrent}
|
|
||||||
className="w-16 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
aria-label={`${index + 1}열 폭 (1~${maxForCurrent})`}
|
|
||||||
value={Number.isFinite(col.span) ? col.span : 12}
|
|
||||||
onChange={(e) => {
|
|
||||||
handleChange(Number(e.target.value));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
})()}
|
|
||||||
|
|
||||||
{/* 최대 폭 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="최대 폭 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof sectionProps.maxWidthPx === "number" ? sectionProps.maxWidthPx : 960}
|
|
||||||
min={640}
|
|
||||||
max={1440}
|
|
||||||
step={16}
|
|
||||||
presets={[
|
|
||||||
{ id: "x-narrow", label: "매우 좁게", value: 640 },
|
|
||||||
{ id: "narrow", label: "좁게", value: 800 },
|
|
||||||
{ id: "normal", label: "보통", value: 960 },
|
|
||||||
{ id: "wide", label: "넓게", value: 1200 },
|
|
||||||
{ id: "x-wide", label: "아주 넓게", value: 1440 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(next) => {
|
|
||||||
const safe = Number.isFinite(next) ? next : 960;
|
|
||||||
updateBlock(selectedBlockId, { maxWidthPx: safe } as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 컬럼 간 간격 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
|
|
||||||
<NumericPropertyControl
|
|
||||||
label="컬럼 간 간격 (px)"
|
|
||||||
unitLabel="(px)"
|
|
||||||
value={typeof sectionProps.gapXPx === "number" ? sectionProps.gapXPx : 24}
|
|
||||||
min={0}
|
|
||||||
max={64}
|
|
||||||
step={2}
|
|
||||||
presets={[
|
|
||||||
{ id: "zero", label: "0", value: 0 },
|
|
||||||
{ id: "tight", label: "좁게", value: 16 },
|
|
||||||
{ id: "normal", label: "보통", value: 24 },
|
|
||||||
{ id: "relaxed", label: "넓게", value: 32 },
|
|
||||||
{ id: "x-relaxed", label: "아주 넓게", value: 48 },
|
|
||||||
{ id: "max", label: "최대", value: 64 },
|
|
||||||
]}
|
|
||||||
onChangeValue={(next) => {
|
|
||||||
const safe = Number.isFinite(next) ? next : 24;
|
|
||||||
updateBlock(selectedBlockId, { gapXPx: safe } as any);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 세로 정렬 */}
|
|
||||||
<label className="flex flex-col gap-1">
|
|
||||||
<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.alignItems ?? "top"}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.target.value as NonNullable<SectionBlockProps["alignItems"]>;
|
|
||||||
updateBlock(selectedBlockId, { alignItems: value } as any);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="top">위</option>
|
|
||||||
<option value="center">가운데</option>
|
|
||||||
<option value="bottom">아래</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,505 +0,0 @@
|
|||||||
"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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
"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",
|
|
||||||
// 블로그 리스트는 넓은 폭과 충분한 카드 간격을 사용한다.
|
|
||||||
paddingYPx: 72,
|
|
||||||
maxWidthPx: 1120,
|
|
||||||
gapXPx: 32,
|
|
||||||
backgroundColorCustom: "#020617",
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
"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",
|
|
||||||
// CTA 는 강한 색상과 적당한 여백, 비교적 좁은 폭을 사용한다.
|
|
||||||
paddingYPx: 64,
|
|
||||||
maxWidthPx: 960,
|
|
||||||
gapXPx: 24,
|
|
||||||
backgroundColorCustom: "#0c4a6e",
|
|
||||||
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",
|
|
||||||
textColorCustom: "#0b1120",
|
|
||||||
fillColorCustom: "#0ea5e9",
|
|
||||||
strokeColorCustom: "#0284c7",
|
|
||||||
};
|
|
||||||
const buttonBlock: Block = {
|
|
||||||
id: buttonId,
|
|
||||||
type: "button",
|
|
||||||
props: buttonProps,
|
|
||||||
sectionId,
|
|
||||||
columnId: firstColumnId,
|
|
||||||
};
|
|
||||||
|
|
||||||
const blocks: Block[] = [sectionBlock, textBlock, buttonBlock];
|
|
||||||
const lastSelectedId = buttonId;
|
|
||||||
|
|
||||||
return { blocks, lastSelectedId };
|
|
||||||
}
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
"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",
|
|
||||||
// FAQ 는 비교적 좁은 폭과 보통 여백을 사용한다.
|
|
||||||
paddingYPx: 56,
|
|
||||||
maxWidthPx: 720,
|
|
||||||
backgroundColorCustom: "#020617",
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
"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",
|
|
||||||
// 기능 리스트는 비교적 넓은 폭과 보통 수준의 여백을 사용한다.
|
|
||||||
paddingYPx: 72,
|
|
||||||
maxWidthPx: 1040,
|
|
||||||
gapXPx: 32,
|
|
||||||
backgroundColorCustom: "#0f172a",
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
"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",
|
|
||||||
// 푸터는 상대적으로 낮은 높이와 좁은 최대 폭을 사용한다.
|
|
||||||
paddingYPx: 40,
|
|
||||||
maxWidthPx: 800,
|
|
||||||
backgroundColorCustom: "#020617",
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
"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",
|
|
||||||
// 히어로는 가장 여백이 넓고 화면 중앙에 집중되도록 설정한다.
|
|
||||||
paddingYPx: 96,
|
|
||||||
maxWidthPx: 960,
|
|
||||||
gapXPx: 40,
|
|
||||||
backgroundColorCustom: "#020617", // 다크 히어로 섹션
|
|
||||||
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",
|
|
||||||
textColorCustom: "#0b1120",
|
|
||||||
fillColorCustom: "#0ea5e9",
|
|
||||||
strokeColorCustom: "#0284c7",
|
|
||||||
};
|
|
||||||
const heroButton: Block = {
|
|
||||||
id: heroButtonId,
|
|
||||||
type: "button",
|
|
||||||
props: heroButtonProps,
|
|
||||||
sectionId,
|
|
||||||
columnId: firstColumnId,
|
|
||||||
};
|
|
||||||
|
|
||||||
const blocks: Block[] = [sectionBlock, heroHeadline, heroSub, heroButton];
|
|
||||||
|
|
||||||
return { blocks, lastSelectedId: heroButtonId };
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
"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",
|
|
||||||
// 요금제는 꽤 넓은 여백과 넓은 최대 폭, 넉넉한 컬럼 간격을 사용한다.
|
|
||||||
paddingYPx: 88,
|
|
||||||
maxWidthPx: 1120,
|
|
||||||
gapXPx: 40,
|
|
||||||
backgroundColorCustom: "#0f172a",
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
"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",
|
|
||||||
// 팀 섹션은 보라 계열 배경과 넓은 폭, 보통 간격을 사용한다.
|
|
||||||
paddingYPx: 80,
|
|
||||||
maxWidthPx: 1120,
|
|
||||||
gapXPx: 32,
|
|
||||||
backgroundColorCustom: "#1e1b4b", // 보라/인디고 계열
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
"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",
|
|
||||||
// 후기 섹션은 중간 폭과 적당한 카드 간격을 사용한다.
|
|
||||||
paddingYPx: 80,
|
|
||||||
maxWidthPx: 1040,
|
|
||||||
gapXPx: 36,
|
|
||||||
backgroundColorCustom: "#020617",
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
import "../styles/globals.css";
|
import "../styles/globals.css";
|
||||||
import "../styles/builder.css";
|
|
||||||
import type { ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEditorStore } from "@/features/editor/state/editorStore";
|
|
||||||
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
|
|
||||||
|
|
||||||
export default function PreviewPage() {
|
|
||||||
const blocks = useEditorStore((state) => state.blocks);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
|
|
||||||
<header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between">
|
|
||||||
<h1 className="text-xl font-semibold">Page Preview</h1>
|
|
||||||
<p className="text-xs text-slate-400">빌더로 만든 페이지를 미리 보는 화면</p>
|
|
||||||
</header>
|
|
||||||
{/* 에디터 크롬 없이 순수 페이지 형태로 블록들을 렌더링 */}
|
|
||||||
<PublicPageRenderer blocks={blocks} />
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,178 +0,0 @@
|
|||||||
import type { ChangeEvent } from "react";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export type ColorPaletteItem = {
|
|
||||||
// 팔레트 식별자
|
|
||||||
id: string;
|
|
||||||
// UI에 보여줄 이름
|
|
||||||
label: string;
|
|
||||||
// HEX 색상 값
|
|
||||||
color: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ColorPickerFieldProps = {
|
|
||||||
// 필드 라벨 텍스트
|
|
||||||
label: string;
|
|
||||||
// 컬러 인풋에 대한 접근성 라벨
|
|
||||||
ariaLabelColorInput: string;
|
|
||||||
// HEX 텍스트 인풋에 대한 접근성 라벨
|
|
||||||
ariaLabelHexInput: string;
|
|
||||||
// 현재 선택된 색상 값 (HEX)
|
|
||||||
value: string;
|
|
||||||
// 값 변경 콜백
|
|
||||||
onChange: (value: string) => void;
|
|
||||||
// 선택 가능한 팔레트 목록
|
|
||||||
palette?: ColorPaletteItem[];
|
|
||||||
// 현재 선택된 팔레트 ID (있다면 드롭다운 요약에 표시)
|
|
||||||
selectedPaletteId?: string;
|
|
||||||
// 팔레트 선택 시 호출되는 콜백 (팔레트 메타 정보까지 필요할 때 사용)
|
|
||||||
onPaletteSelect?: (item: ColorPaletteItem) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 텍스트/버튼 등에서 공통으로 사용하는 기본 색상 팔레트
|
|
||||||
export const TEXT_COLOR_PALETTE: ColorPaletteItem[] = [
|
|
||||||
// 기본/중립 계열
|
|
||||||
{ id: "default", label: "기본", color: "#e5e7eb" },
|
|
||||||
// 투명
|
|
||||||
{ id: "transparent", label: "투명", color: "transparent" },
|
|
||||||
{ id: "muted", label: "연한", color: "#9ca3af" },
|
|
||||||
{ id: "strong", label: "강조", color: "#f9fafb" },
|
|
||||||
{ id: "neutral", label: "중립", color: "#94a3b8" },
|
|
||||||
|
|
||||||
// 브랜드/포인트 계열
|
|
||||||
{ id: "accent", label: "포인트", color: "#38bdf8" },
|
|
||||||
{ id: "accent-deep", label: "포인트 진하게", color: "#0ea5e9" },
|
|
||||||
{ id: "accent-soft", label: "포인트 연하게", color: "#bae6fd" },
|
|
||||||
|
|
||||||
// 상태 계열
|
|
||||||
{ id: "danger", label: "위험", color: "#f97373" },
|
|
||||||
{ id: "danger-deep", label: "위험 진하게", color: "#ef4444" },
|
|
||||||
{ id: "success", label: "성공", color: "#22c55e" },
|
|
||||||
{ id: "success-soft", label: "성공 연하게", color: "#bbf7d0" },
|
|
||||||
{ id: "warning", label: "경고", color: "#eab308" },
|
|
||||||
{ id: "info", label: "정보", color: "#0ea5e9" },
|
|
||||||
|
|
||||||
// 보라/핑크 계열
|
|
||||||
{ id: "purple", label: "보라", color: "#a855f7" },
|
|
||||||
{ id: "purple-soft", label: "연한 보라", color: "#e9d5ff" },
|
|
||||||
{ id: "pink", label: "핑크", color: "#ec4899" },
|
|
||||||
{ id: "pink-soft", label: "연한 핑크", color: "#f9a8d4" },
|
|
||||||
|
|
||||||
// 배경 대비용 어두운 텍스트
|
|
||||||
{ id: "dark", label: "어두운 텍스트", color: "#020617" },
|
|
||||||
{ id: "dark-muted", label: "어두운 연한", color: "#64748b" },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function ColorPickerField({
|
|
||||||
label,
|
|
||||||
ariaLabelColorInput,
|
|
||||||
ariaLabelHexInput,
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
palette = [],
|
|
||||||
selectedPaletteId,
|
|
||||||
onPaletteSelect,
|
|
||||||
}: ColorPickerFieldProps) {
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
|
|
||||||
const colorInputValue = value && value.startsWith("#") ? value : "#ffffff";
|
|
||||||
// 컬러 인풋 변경 시 HEX 문자열을 onChange로 전달한다.
|
|
||||||
const handleColorInputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
onChange(event.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 텍스트 인풋 변경 시 그대로 onChange로 전달한다.
|
|
||||||
const handleHexInputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
onChange(event.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 팔레트 버튼 클릭 시 해당 팔레트의 색상으로 onChange를 호출한다.
|
|
||||||
const handlePaletteClick = (item: ColorPaletteItem) => {
|
|
||||||
onChange(item.color);
|
|
||||||
if (onPaletteSelect) {
|
|
||||||
onPaletteSelect(item);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 현재 선택된 팔레트 정보를 계산한다.
|
|
||||||
// 1) selectedPaletteId 가 넘어오면 ID 기준으로 찾고,
|
|
||||||
// 2) 없으면 현재 value 와 color 가 일치하는 팔레트 항목을 사용한다.
|
|
||||||
let selectedPalette: ColorPaletteItem | null = null;
|
|
||||||
if (palette.length > 0) {
|
|
||||||
if (selectedPaletteId) {
|
|
||||||
selectedPalette = palette.find((item) => item.id === selectedPaletteId) ?? null;
|
|
||||||
} else if (value) {
|
|
||||||
selectedPalette = palette.find((item) => item.color === value) ?? null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-1 text-xs text-slate-400">
|
|
||||||
<span>{label}</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
aria-label={ariaLabelColorInput}
|
|
||||||
className="h-8 w-8 rounded border border-slate-700 bg-slate-900 p-0"
|
|
||||||
value={colorInputValue}
|
|
||||||
onChange={handleColorInputChange}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
className="w-28 flex-none rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
||||||
aria-label={ariaLabelHexInput}
|
|
||||||
placeholder="예: #ff0000"
|
|
||||||
value={value}
|
|
||||||
onChange={handleHexInputChange}
|
|
||||||
/>
|
|
||||||
{palette.length > 0 ? (
|
|
||||||
<div className="relative text-[11px] flex-none">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="w-28 rounded border border-slate-800 bg-slate-950/60 flex items-center justify-between px-2 py-1 text-left"
|
|
||||||
onClick={() => setOpen((prev) => !prev)}
|
|
||||||
>
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<span
|
|
||||||
className="inline-block h-3 w-3 rounded-full"
|
|
||||||
style={{ backgroundColor: selectedPalette?.color ?? value ?? "#ffffff" }}
|
|
||||||
/>
|
|
||||||
<span className="truncate text-slate-200">
|
|
||||||
{selectedPalette?.label ?? "색상 팔레트"}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span className="text-slate-500 text-[10px]">▼</span>
|
|
||||||
</button>
|
|
||||||
{open ? (
|
|
||||||
<div className="absolute right-0 top-full mt-1 w-32 rounded border border-slate-800 bg-slate-950 max-h-40 overflow-auto z-10">
|
|
||||||
{palette.map((item) => (
|
|
||||||
<button
|
|
||||||
key={item.id}
|
|
||||||
type="button"
|
|
||||||
className={`w-full flex items-center justify-between px-2 py-1 text-left text-[11px] border-b border-slate-900 last:border-b-0 ${
|
|
||||||
selectedPaletteId === item.id
|
|
||||||
? "bg-sky-900/40 text-sky-100"
|
|
||||||
: "bg-transparent text-slate-300 hover:bg-slate-900/60"
|
|
||||||
}`}
|
|
||||||
onClick={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
handlePaletteClick(item);
|
|
||||||
setOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="flex items-center gap-2">
|
|
||||||
<span
|
|
||||||
className="inline-block h-3 w-3 rounded-full"
|
|
||||||
style={{ backgroundColor: item.color }}
|
|
||||||
/>
|
|
||||||
<span>{item.label}</span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
import type { ChangeEvent } from "react";
|
|
||||||
import { PropertySliderField } from "@/features/editor/components/PropertySliderField";
|
|
||||||
|
|
||||||
export type NumericPresetOption = {
|
|
||||||
// 프리셋 식별자 (예: "tight", "normal")
|
|
||||||
id: string;
|
|
||||||
// UI 에 표시할 라벨
|
|
||||||
label: string;
|
|
||||||
// UI 기준 값 (px, 배율 등)
|
|
||||||
value: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type NumericPropertyControlProps = {
|
|
||||||
// 필드 라벨 (예: 글자 크기, 줄 간격)
|
|
||||||
label: string;
|
|
||||||
// 단위 설명 (예: px, 배율 등)
|
|
||||||
unitLabel?: string;
|
|
||||||
// 현재 UI 값
|
|
||||||
value: number;
|
|
||||||
min: number;
|
|
||||||
max: number;
|
|
||||||
step: number;
|
|
||||||
// 프리셋 목록 (없으면 select 를 렌더링하지 않음)
|
|
||||||
presets?: NumericPresetOption[];
|
|
||||||
// 값 변경 시 호출되는 콜백 (UI 값 기준)
|
|
||||||
onChangeValue: (value: number) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function NumericPropertyControl({
|
|
||||||
label,
|
|
||||||
unitLabel,
|
|
||||||
value,
|
|
||||||
min,
|
|
||||||
max,
|
|
||||||
step,
|
|
||||||
presets,
|
|
||||||
onChangeValue,
|
|
||||||
}: NumericPropertyControlProps) {
|
|
||||||
// 현재 값에 가장 가까운 프리셋 ID 를 계산한다.
|
|
||||||
const currentPresetId = (() => {
|
|
||||||
if (!presets || presets.length === 0) return "";
|
|
||||||
let bestId = presets[0].id;
|
|
||||||
let bestDist = Math.abs(presets[0].value - value);
|
|
||||||
for (let i = 1; i < presets.length; i += 1) {
|
|
||||||
const dist = Math.abs(presets[i].value - value);
|
|
||||||
if (dist < bestDist) {
|
|
||||||
bestDist = dist;
|
|
||||||
bestId = presets[i].id;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return bestId;
|
|
||||||
})();
|
|
||||||
|
|
||||||
const handlePresetChange = (event: ChangeEvent<HTMLSelectElement>) => {
|
|
||||||
if (!presets || presets.length === 0) return;
|
|
||||||
const id = event.target.value;
|
|
||||||
const found = presets.find((p) => p.id === id);
|
|
||||||
if (!found) return;
|
|
||||||
onChangeValue(found.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
|
||||||
<span>
|
|
||||||
{label}
|
|
||||||
{unitLabel ? ` ${unitLabel}` : ""}
|
|
||||||
</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{presets && presets.length > 0 ? (
|
|
||||||
<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={`${label} 프리셋`}
|
|
||||||
value={currentPresetId}
|
|
||||||
onChange={handlePresetChange}
|
|
||||||
>
|
|
||||||
{presets.map((preset) => (
|
|
||||||
<option key={preset.id} value={preset.id}>
|
|
||||||
{preset.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<PropertySliderField
|
|
||||||
label=""
|
|
||||||
ariaLabelSlider={`${label} 슬라이더`}
|
|
||||||
ariaLabelInput={`${label} 커스텀${unitLabel ? ` ${unitLabel}` : ""}`}
|
|
||||||
value={Number.isFinite(value) ? value : 0}
|
|
||||||
min={min}
|
|
||||||
max={max}
|
|
||||||
step={step}
|
|
||||||
onChange={onChangeValue}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
import type { ChangeEvent } from "react";
|
|
||||||
|
|
||||||
export type PropertySliderFieldProps = {
|
|
||||||
// 슬라이더 그룹 전체 라벨 텍스트
|
|
||||||
label: string;
|
|
||||||
// 슬라이더 요소에 대한 접근성 라벨
|
|
||||||
ariaLabelSlider: string;
|
|
||||||
// 텍스트 입력 요소에 대한 접근성 라벨
|
|
||||||
ariaLabelInput: string;
|
|
||||||
// 현재 값 (슬라이더와 입력이 공유)
|
|
||||||
value: number;
|
|
||||||
// 최소 값
|
|
||||||
min: number;
|
|
||||||
// 최대 값
|
|
||||||
max: number;
|
|
||||||
// 슬라이더 스텝
|
|
||||||
step: number;
|
|
||||||
// 값 변경 콜백
|
|
||||||
onChange: (value: number) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function PropertySliderField({
|
|
||||||
label,
|
|
||||||
ariaLabelSlider,
|
|
||||||
ariaLabelInput,
|
|
||||||
value,
|
|
||||||
min,
|
|
||||||
max,
|
|
||||||
step,
|
|
||||||
onChange,
|
|
||||||
}: PropertySliderFieldProps) {
|
|
||||||
// 슬라이더 변경 시 상위에서 전달받은 onChange에 숫자 값으로 전달한다.
|
|
||||||
const handleSliderChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const numeric = Number(event.target.value || 0);
|
|
||||||
onChange(numeric);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 텍스트 입력 변경 시에도 숫자 값으로 파싱하여 onChange를 호출한다.
|
|
||||||
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const raw = event.target.value;
|
|
||||||
const numeric = Number(raw);
|
|
||||||
if (!Number.isNaN(numeric)) {
|
|
||||||
onChange(numeric);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
|
||||||
<span>{label}</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min={min}
|
|
||||||
max={max}
|
|
||||||
step={step}
|
|
||||||
aria-label={ariaLabelSlider}
|
|
||||||
value={value}
|
|
||||||
onChange={handleSliderChange}
|
|
||||||
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={ariaLabelInput}
|
|
||||||
value={Number.isFinite(value) ? value : ""}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,300 +0,0 @@
|
|||||||
/* Builder export/global design system classes */
|
|
||||||
|
|
||||||
/*
|
|
||||||
디자인 토큰: 폰트/라인하이트/색상/텍스트 폭
|
|
||||||
- 에디터 프리뷰와 내보내기 HTML 모두 이 토큰과 pb-* 클래스를 공유한다.
|
|
||||||
*/
|
|
||||||
:root {
|
|
||||||
/* Font sizes (rem 단위, Tailwind 스케일과 유사) */
|
|
||||||
--pb-font-xs: 0.75rem; /* 12px */
|
|
||||||
--pb-font-sm: 0.875rem; /* 14px */
|
|
||||||
--pb-font-base: 1rem; /* 16px */
|
|
||||||
--pb-font-lg: 1.125rem; /* 18px */
|
|
||||||
--pb-font-xl: 1.25rem; /* 20px */
|
|
||||||
--pb-font-2xl: 1.5rem; /* 24px */
|
|
||||||
--pb-font-3xl: 1.875rem; /* 30px */
|
|
||||||
|
|
||||||
/* Line heights */
|
|
||||||
--pb-leading-tight: 1.25;
|
|
||||||
--pb-leading-snug: 1.35;
|
|
||||||
--pb-leading-normal: 1.5;
|
|
||||||
--pb-leading-relaxed: 1.7;
|
|
||||||
--pb-leading-loose: 1.9;
|
|
||||||
|
|
||||||
/* Text colors (팔레트) */
|
|
||||||
--pb-color-text-default: #e5e7eb; /* slate-200 정도 */
|
|
||||||
--pb-color-text-muted: #9ca3af; /* slate-400 */
|
|
||||||
--pb-color-text-strong: #f9fafb; /* slate-50 */
|
|
||||||
--pb-color-text-accent: #38bdf8; /* sky-400 */
|
|
||||||
--pb-color-text-danger: #f97373; /* red-400 근처 */
|
|
||||||
|
|
||||||
/* Text max width */
|
|
||||||
--pb-text-maxw-prose: 60ch;
|
|
||||||
--pb-text-maxw-narrow: 40ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 에디터/프리뷰 공통 기본 타이포 설정 (em/rem 기반) */
|
|
||||||
body {
|
|
||||||
font-size: 1rem; /* 기본 16px 기준 */
|
|
||||||
line-height: 1.5; /* 읽기 좋은 기본 라인하이트 */
|
|
||||||
letter-spacing: 0em; /* 기본 글자 간격은 0em */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text alignment */
|
|
||||||
.pb-text-left {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.pb-text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.pb-text-right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text size scale (디자인 토큰 기반) */
|
|
||||||
.pb-text-xs {
|
|
||||||
font-size: var(--pb-font-xs);
|
|
||||||
}
|
|
||||||
.pb-text-sm {
|
|
||||||
font-size: var(--pb-font-sm);
|
|
||||||
}
|
|
||||||
.pb-text-base {
|
|
||||||
font-size: var(--pb-font-base);
|
|
||||||
}
|
|
||||||
.pb-text-lg {
|
|
||||||
font-size: var(--pb-font-lg);
|
|
||||||
}
|
|
||||||
.pb-text-xl {
|
|
||||||
font-size: var(--pb-font-xl);
|
|
||||||
}
|
|
||||||
.pb-text-2xl {
|
|
||||||
font-size: var(--pb-font-2xl);
|
|
||||||
}
|
|
||||||
.pb-text-3xl {
|
|
||||||
font-size: var(--pb-font-3xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Line-height scale */
|
|
||||||
.pb-leading-tight {
|
|
||||||
line-height: var(--pb-leading-tight);
|
|
||||||
}
|
|
||||||
.pb-leading-snug {
|
|
||||||
line-height: var(--pb-leading-snug);
|
|
||||||
}
|
|
||||||
.pb-leading-normal {
|
|
||||||
line-height: var(--pb-leading-normal);
|
|
||||||
}
|
|
||||||
.pb-leading-relaxed {
|
|
||||||
line-height: var(--pb-leading-relaxed);
|
|
||||||
}
|
|
||||||
.pb-leading-loose {
|
|
||||||
line-height: var(--pb-leading-loose);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Font weight scale */
|
|
||||||
.pb-font-normal {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.pb-font-medium {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.pb-font-semibold {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.pb-font-bold {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text color palette */
|
|
||||||
.pb-text-color-default {
|
|
||||||
color: var(--pb-color-text-default);
|
|
||||||
}
|
|
||||||
.pb-text-color-muted {
|
|
||||||
color: var(--pb-color-text-muted);
|
|
||||||
}
|
|
||||||
.pb-text-color-strong {
|
|
||||||
color: var(--pb-color-text-strong);
|
|
||||||
}
|
|
||||||
.pb-text-color-accent {
|
|
||||||
color: var(--pb-color-text-accent);
|
|
||||||
}
|
|
||||||
.pb-text-color-danger {
|
|
||||||
color: var(--pb-color-text-danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Additional text colors for presets */
|
|
||||||
.pb-text-color-success {
|
|
||||||
color: #22c55e;
|
|
||||||
}
|
|
||||||
.pb-text-color-warning {
|
|
||||||
color: #eab308;
|
|
||||||
}
|
|
||||||
.pb-text-color-info {
|
|
||||||
color: #0ea5e9;
|
|
||||||
}
|
|
||||||
.pb-text-color-neutral {
|
|
||||||
color: #94a3b8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text decoration & style */
|
|
||||||
.pb-underline {
|
|
||||||
text-decoration-line: underline;
|
|
||||||
}
|
|
||||||
.pb-line-through {
|
|
||||||
text-decoration-line: line-through;
|
|
||||||
}
|
|
||||||
.pb-italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text max width presets */
|
|
||||||
.pb-text-maxw-prose {
|
|
||||||
max-width: var(--pb-text-maxw-prose);
|
|
||||||
}
|
|
||||||
.pb-text-maxw-narrow {
|
|
||||||
max-width: var(--pb-text-maxw-narrow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-btn-base {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
.pb-btn-size-xs {
|
|
||||||
padding: 0.125rem 0.5rem;
|
|
||||||
}
|
|
||||||
.pb-btn-size-sm {
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
}
|
|
||||||
.pb-btn-size-md {
|
|
||||||
padding: 0.375rem 1rem;
|
|
||||||
}
|
|
||||||
.pb-btn-size-lg {
|
|
||||||
padding: 0.5rem 1.25rem;
|
|
||||||
}
|
|
||||||
.pb-btn-size-xl {
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-btn-radius-none {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
.pb-btn-radius-sm {
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
.pb-btn-radius-md {
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
|
||||||
.pb-btn-radius-lg {
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
}
|
|
||||||
.pb-btn-radius-full {
|
|
||||||
border-radius: 9999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-btn-variant-solid-primary {
|
|
||||||
background-color: #0ea5e9;
|
|
||||||
border-color: #0284c7;
|
|
||||||
color: #0b1120;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-solid-muted {
|
|
||||||
background-color: #1f2937;
|
|
||||||
border-color: #4b5563;
|
|
||||||
color: #e5e7eb;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-solid-danger {
|
|
||||||
background-color: #ef4444;
|
|
||||||
border-color: #b91c1c;
|
|
||||||
color: #f9fafb;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-solid-success {
|
|
||||||
background-color: #22c55e;
|
|
||||||
border-color: #15803d;
|
|
||||||
color: #022c22;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-solid-neutral {
|
|
||||||
background-color: #4b5563;
|
|
||||||
border-color: #374151;
|
|
||||||
color: #e5e7eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-btn-variant-outline-primary {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: #38bdf8;
|
|
||||||
color: #e0f2fe;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-outline-muted {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: #4b5563;
|
|
||||||
color: #e5e7eb;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-outline-danger {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: #f97373;
|
|
||||||
color: #fecaca;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-outline-success {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: #22c55e;
|
|
||||||
color: #bbf7d0;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-outline-neutral {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: #64748b;
|
|
||||||
color: #e5e7eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-btn-variant-ghost-primary {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: #38bdf8;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-ghost-muted {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: #9ca3af;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-ghost-danger {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: #f97373;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-ghost-success {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: #4ade80;
|
|
||||||
}
|
|
||||||
.pb-btn-variant-ghost-neutral {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: #cbd5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section background variants */
|
|
||||||
.pb-section-bg-default {
|
|
||||||
background-color: rgba(15, 23, 42, 0.6); /* slate-900/60 느낌 */
|
|
||||||
}
|
|
||||||
.pb-section-bg-muted {
|
|
||||||
background-color: rgba(15, 23, 42, 0.4); /* slate-950/40 느낌 */
|
|
||||||
}
|
|
||||||
.pb-section-bg-primary {
|
|
||||||
background-color: rgba(8, 47, 73, 0.4); /* sky-950/40 느낌 */
|
|
||||||
border-color: rgba(8, 47, 73, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section vertical padding scale */
|
|
||||||
.pb-section-py-sm {
|
|
||||||
padding-top: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.pb-section-py-md {
|
|
||||||
padding-top: 1.5rem;
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
.pb-section-py-lg {
|
|
||||||
padding-top: 2.5rem;
|
|
||||||
padding-bottom: 2.5rem;
|
|
||||||
}
|
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
@import "tailwindcss";
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
|
|||||||
@@ -1,147 +0,0 @@
|
|||||||
import "dotenv/config";
|
|
||||||
import { describe, it, expect, vi } from "vitest";
|
|
||||||
import type { FormBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
|
|
||||||
const BASE_URL = "http://localhost";
|
|
||||||
|
|
||||||
// /api/forms/submit 라우트에 대한 기본 TDD:
|
|
||||||
// - internal 모드에서 임의 필드가 포함된 FormData 를 받아도 에러 없이 ok:true 를 반환해야 한다.
|
|
||||||
// - webhook 모드에서는 config.extraParams / headers 와 함께 x-www-form-urlencoded 로 전달해야 한다.
|
|
||||||
|
|
||||||
describe("/api/forms/submit", () => {
|
|
||||||
it("internal 모드에서는 v2 필드 이름(email_address 등)을 포함한 FormData 를 받아도 ok:true 를 반환해야 한다", async () => {
|
|
||||||
const config: FormBlockProps = {
|
|
||||||
kind: "contact",
|
|
||||||
submitTarget: "internal",
|
|
||||||
successMessage: "성공적으로 전송되었습니다.",
|
|
||||||
errorMessage: "전송 중 오류가 발생했습니다.",
|
|
||||||
fieldIds: [],
|
|
||||||
submitButtonId: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("email_address", "test@example.com");
|
|
||||||
formData.append("__config", JSON.stringify(config));
|
|
||||||
|
|
||||||
const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
|
|
||||||
|
|
||||||
const res = await handleSubmit(
|
|
||||||
new Request(`${BASE_URL}/api/forms/submit`, {
|
|
||||||
method: "POST",
|
|
||||||
body: formData,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(res.status).toBe(200);
|
|
||||||
const json = (await res.json()) as any;
|
|
||||||
expect(json.ok).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("webhook 모드에서는 extraParams 와 FormData 필드들이 x-www-form-urlencoded payload 로 전달되어야 한다", async () => {
|
|
||||||
const destinationUrl = `${BASE_URL}/webhook-test`;
|
|
||||||
|
|
||||||
const config: FormBlockProps = {
|
|
||||||
kind: "contact",
|
|
||||||
submitTarget: "webhook",
|
|
||||||
destinationUrl,
|
|
||||||
method: "POST",
|
|
||||||
headers: { Authorization: "Bearer test-token" },
|
|
||||||
extraParams: { source: "builder", formId: "contact-hero" },
|
|
||||||
successMessage: "성공적으로 전송되었습니다.",
|
|
||||||
errorMessage: "전송 중 오류가 발생했습니다.",
|
|
||||||
fieldIds: [],
|
|
||||||
submitButtonId: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
// fetch 를 목킹하여 payload 와 헤더가 기대대로 전달되는지 검증한다.
|
|
||||||
const fetchMock = vi.fn(async () => new Response("ok", { status: 200 }));
|
|
||||||
// @ts-expect-error - 글로벌 fetch 재정의
|
|
||||||
global.fetch = fetchMock;
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("email_address", "test@example.com");
|
|
||||||
formData.append("__config", JSON.stringify(config));
|
|
||||||
|
|
||||||
const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
|
|
||||||
|
|
||||||
const res = await handleSubmit(
|
|
||||||
new Request(`${BASE_URL}/api/forms/submit`, {
|
|
||||||
method: "POST",
|
|
||||||
body: formData,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(res.status).toBe(200);
|
|
||||||
const json = (await res.json()) as any;
|
|
||||||
expect(json.ok).toBe(true);
|
|
||||||
|
|
||||||
expect(fetchMock).toHaveBeenCalledTimes(1);
|
|
||||||
const [url, options] = fetchMock.mock.calls[0] as [string, RequestInit];
|
|
||||||
expect(url).toBe(destinationUrl);
|
|
||||||
expect(options.method).toBe("POST");
|
|
||||||
expect(options.headers).toMatchObject({
|
|
||||||
"Content-Type": "application/x-www-form-urlencoded",
|
|
||||||
Authorization: "Bearer test-token",
|
|
||||||
});
|
|
||||||
|
|
||||||
const body = options.body as string;
|
|
||||||
// payload 안에 폼 필드와 extraParams 가 모두 포함되어야 한다.
|
|
||||||
expect(body).toContain("email_address=test%40example.com");
|
|
||||||
expect(body).toContain("source=builder");
|
|
||||||
expect(body).toContain("formId=contact-hero");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("webhook 모드에서 payloadFormat 이 json 인 경우 application/json 으로 JSON body 를 전송해야 한다", async () => {
|
|
||||||
const destinationUrl = `${BASE_URL}/webhook-json-test`;
|
|
||||||
|
|
||||||
const config: FormBlockProps = {
|
|
||||||
kind: "contact",
|
|
||||||
submitTarget: "webhook",
|
|
||||||
destinationUrl,
|
|
||||||
method: "POST",
|
|
||||||
headers: { Authorization: "Bearer json-token" },
|
|
||||||
extraParams: { source: "builder", formId: "contact-json" },
|
|
||||||
successMessage: "성공적으로 전송되었습니다.",
|
|
||||||
errorMessage: "전송 중 오류가 발생했습니다.",
|
|
||||||
fieldIds: [],
|
|
||||||
submitButtonId: null,
|
|
||||||
payloadFormat: "json",
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchMock = vi.fn(async () => new Response("ok", { status: 200 }));
|
|
||||||
// @ts-expect-error - 글로벌 fetch 재정의
|
|
||||||
global.fetch = fetchMock;
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("email_address", "json@example.com");
|
|
||||||
formData.append("__config", JSON.stringify(config));
|
|
||||||
|
|
||||||
const { POST: handleSubmit } = await import("@/app/api/forms/submit/route");
|
|
||||||
|
|
||||||
const res = await handleSubmit(
|
|
||||||
new Request(`${BASE_URL}/api/forms/submit`, {
|
|
||||||
method: "POST",
|
|
||||||
body: formData,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(res.status).toBe(200);
|
|
||||||
const json = (await res.json()) as any;
|
|
||||||
expect(json.ok).toBe(true);
|
|
||||||
|
|
||||||
expect(fetchMock).toHaveBeenCalledTimes(1);
|
|
||||||
const [url, options] = fetchMock.mock.calls[0] as unknown as [string, RequestInit];
|
|
||||||
expect(url).toBe(destinationUrl);
|
|
||||||
expect(options.method).toBe("POST");
|
|
||||||
expect(options.headers).toMatchObject({
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
Authorization: "Bearer json-token",
|
|
||||||
});
|
|
||||||
|
|
||||||
const body = options.body as string;
|
|
||||||
const parsed = JSON.parse(body) as Record<string, string>;
|
|
||||||
expect(parsed.email_address).toBe("json@example.com");
|
|
||||||
expect(parsed.source).toBe("builder");
|
|
||||||
expect(parsed.formId).toBe("contact-json");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,26 +1,7 @@
|
|||||||
import "dotenv/config";
|
import "dotenv/config";
|
||||||
import { describe, it, expect, vi } from "vitest";
|
import { describe, it, expect } from "vitest";
|
||||||
|
import { POST as createProject } from "@/app/api/projects/route";
|
||||||
// PrismaClient를 실제 DB 대신 메모리 기반 저장소를 사용하는 목으로 대체한다.
|
import { GET as getProjectBySlug } from "@/app/api/projects/[slug]/route";
|
||||||
// 이렇게 하면 CI/로컬 어디에서도 DATABASE_URL 이나 실제 DB 없이 API 테스트를 실행할 수 있다.
|
|
||||||
const inMemoryProjects: any[] = [];
|
|
||||||
|
|
||||||
vi.mock("@/generated/prisma/client", () => {
|
|
||||||
class PrismaClientMock {
|
|
||||||
project = {
|
|
||||||
create: async ({ data }: any) => {
|
|
||||||
const project = { id: inMemoryProjects.length + 1, ...data };
|
|
||||||
inMemoryProjects.push(project);
|
|
||||||
return project;
|
|
||||||
},
|
|
||||||
findUnique: async ({ where: { slug } }: any) => {
|
|
||||||
return inMemoryProjects.find((p) => p.slug === slug) ?? null;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return { PrismaClient: PrismaClientMock };
|
|
||||||
});
|
|
||||||
|
|
||||||
const BASE_URL = "http://localhost";
|
const BASE_URL = "http://localhost";
|
||||||
|
|
||||||
@@ -38,8 +19,6 @@ describe("/api/projects", () => {
|
|||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
const { POST: createProject } = await import("@/app/api/projects/route");
|
|
||||||
|
|
||||||
const createResponse = await createProject(
|
const createResponse = await createProject(
|
||||||
new Request(`${BASE_URL}/api/projects`, {
|
new Request(`${BASE_URL}/api/projects`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
@@ -58,8 +37,6 @@ describe("/api/projects", () => {
|
|||||||
expect(created.title).toBe(payload.title);
|
expect(created.title).toBe(payload.title);
|
||||||
expect(created.slug).toBe(payload.slug);
|
expect(created.slug).toBe(payload.slug);
|
||||||
|
|
||||||
const { GET: getProjectBySlug } = await import("@/app/api/projects/[slug]/route");
|
|
||||||
|
|
||||||
const getResponse = await getProjectBySlug(
|
const getResponse = await getProjectBySlug(
|
||||||
new Request(`${BASE_URL}/api/projects/${payload.slug}`),
|
new Request(`${BASE_URL}/api/projects/${payload.slug}`),
|
||||||
{ params: { slug: payload.slug } } as any,
|
{ params: { slug: payload.slug } } as any,
|
||||||
|
|||||||
+31
-906
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,19 +0,0 @@
|
|||||||
import { describe, it } from "vitest";
|
|
||||||
|
|
||||||
// NOTE:
|
|
||||||
// 이 파일은 원래 JSX 기반의 컴포넌트 단위 테스트(PropertySliderField/ColorPickerField)를 포함하고 있었지만,
|
|
||||||
// `.spec.ts` 확장자에서는 JSX 파서 오류가 발생해 전체 유닛 테스트를 막고 있다.
|
|
||||||
// 폼/에디터 핵심 흐름을 우선 정리하기 위해, JSX 없는 it.skip 플레이스홀더만 남기고
|
|
||||||
// 실제 컴포넌트 테스트는 후속 단계에서 `.tsx` 기반 테스트 파일로 옮겨서 TDD를 다시 정리한다.
|
|
||||||
|
|
||||||
describe("PropertySliderField (placeholder)", () => {
|
|
||||||
it.skip("슬라이더 필드 렌더링/동작 테스트는 후속 단계에서 TSX 테스트로 옮겨서 구현한다", () => {
|
|
||||||
// FIXME: JSX 파싱 문제가 해결된 뒤, 실제 렌더링 테스트를 복원한다.
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("ColorPickerField (placeholder)", () => {
|
|
||||||
it.skip("컬러 피커 필드 렌더링/동작 테스트는 후속 단계에서 TSX 테스트로 옮겨서 구현한다", () => {
|
|
||||||
// FIXME: JSX 파싱 문제가 해결된 뒤, 실제 렌더링 테스트를 복원한다.
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
import { describe, it, expect, vi } from "vitest";
|
|
||||||
import { render, screen, fireEvent } from "@testing-library/react";
|
|
||||||
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { SectionPropertiesPanel } from "@/app/editor/panels/SectionPropertiesPanel";
|
|
||||||
|
|
||||||
// 섹션 레이아웃 프리셋/직접 입력이 columns 배열의 span 값을 올바르게 업데이트하는지 검증한다.
|
|
||||||
describe("SectionPropertiesPanel - layout presets", () => {
|
|
||||||
const baseProps: SectionBlockProps = {
|
|
||||||
background: "default",
|
|
||||||
paddingY: "md",
|
|
||||||
columns: [{ id: "col-1", span: 12 }],
|
|
||||||
maxWidthMode: "normal",
|
|
||||||
gapX: "md",
|
|
||||||
};
|
|
||||||
|
|
||||||
it("2열 1/2-1/2 프리셋 선택 시 columns 가 [6,6] 분할로 업데이트된다", () => {
|
|
||||||
const updateBlock = vi.fn();
|
|
||||||
|
|
||||||
render(
|
|
||||||
<SectionPropertiesPanel
|
|
||||||
sectionProps={baseProps}
|
|
||||||
selectedBlockId="section-layout-1"
|
|
||||||
updateBlock={updateBlock}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
const select = screen.getByLabelText("섹션 컬럼 레이아웃");
|
|
||||||
|
|
||||||
fireEvent.change(select, { target: { value: "two-equal" } });
|
|
||||||
|
|
||||||
expect(updateBlock).toHaveBeenCalledWith(
|
|
||||||
"section-layout-1",
|
|
||||||
expect.objectContaining({
|
|
||||||
columns: expect.arrayContaining([
|
|
||||||
expect.objectContaining({ span: 6 }),
|
|
||||||
expect.objectContaining({ span: 6 }),
|
|
||||||
]),
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("컬럼 span 직접 입력 시 해당 컬럼 span 값이 업데이트된다", () => {
|
|
||||||
const updateBlock = vi.fn();
|
|
||||||
|
|
||||||
render(
|
|
||||||
<SectionPropertiesPanel
|
|
||||||
sectionProps={baseProps}
|
|
||||||
selectedBlockId="section-layout-2"
|
|
||||||
updateBlock={updateBlock}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
const input = screen.getByLabelText("1열 폭 (1~12)");
|
|
||||||
|
|
||||||
fireEvent.change(input, { target: { value: "8" } });
|
|
||||||
|
|
||||||
expect(updateBlock).toHaveBeenCalledWith(
|
|
||||||
"section-layout-2",
|
|
||||||
expect.objectContaining({
|
|
||||||
columns: expect.arrayContaining([
|
|
||||||
expect.objectContaining({ span: 8 }),
|
|
||||||
]),
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import { describe, it, expect, vi } from "vitest";
|
|
||||||
import { render, screen, fireEvent } from "@testing-library/react";
|
|
||||||
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { SectionPropertiesPanel } from "@/app/editor/panels/SectionPropertiesPanel";
|
|
||||||
|
|
||||||
// 섹션 패널의 숫자 슬라이더/프리셋 제어가 정상적으로 동작하는지 최소 한 번은 검증한다.
|
|
||||||
describe("SectionPropertiesPanel", () => {
|
|
||||||
const baseProps: SectionBlockProps = {
|
|
||||||
background: "default",
|
|
||||||
paddingY: "md",
|
|
||||||
columns: [],
|
|
||||||
maxWidthMode: "normal",
|
|
||||||
gapX: "md",
|
|
||||||
};
|
|
||||||
|
|
||||||
it("세로 패딩 프리셋/슬라이더 변경 시 updateBlock 이 paddingYPx 로 호출된다", () => {
|
|
||||||
const updateBlock = vi.fn();
|
|
||||||
render(
|
|
||||||
<SectionPropertiesPanel
|
|
||||||
sectionProps={{ ...baseProps, paddingYPx: 48 }}
|
|
||||||
selectedBlockId="section-1"
|
|
||||||
updateBlock={updateBlock}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
const slider = screen.getByLabelText("세로 패딩 슬라이더");
|
|
||||||
fireEvent.change(slider, { target: { value: "40" } });
|
|
||||||
|
|
||||||
expect(updateBlock).toHaveBeenCalledWith("section-1", expect.objectContaining({ paddingYPx: 40 }));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
+2
-1113
File diff suppressed because it is too large
Load Diff
@@ -1,66 +0,0 @@
|
|||||||
import { describe, it, expect } from "vitest";
|
|
||||||
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
|
||||||
import { getSectionLayoutConfig } from "@/features/editor/components/PublicPageRenderer";
|
|
||||||
|
|
||||||
describe("getSectionLayoutConfig", () => {
|
|
||||||
const baseProps: SectionBlockProps = {
|
|
||||||
background: "default",
|
|
||||||
paddingY: "md",
|
|
||||||
columns: [{ id: "sec_col_1", span: 12 }],
|
|
||||||
maxWidthMode: "normal",
|
|
||||||
gapX: "md",
|
|
||||||
alignItems: "top",
|
|
||||||
};
|
|
||||||
|
|
||||||
it("기본 섹션 설정에서 예상 클래스 조합을 반환해야 한다", () => {
|
|
||||||
const cfg = getSectionLayoutConfig(baseProps);
|
|
||||||
|
|
||||||
expect(cfg.backgroundClass).toBe("bg-slate-950");
|
|
||||||
expect(cfg.paddingYClass).toBe("py-12");
|
|
||||||
expect(cfg.maxWidthClass).toBe("max-w-5xl");
|
|
||||||
expect(cfg.gapXClass).toBe("gap-8");
|
|
||||||
expect(cfg.alignItemsClass).toBe("items-start");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("maxWidthMode/gapX/alignItems 토큰에 따라 클래스를 변경해야 한다", () => {
|
|
||||||
const wideCentered: SectionBlockProps = {
|
|
||||||
...baseProps,
|
|
||||||
maxWidthMode: "wide",
|
|
||||||
gapX: "lg",
|
|
||||||
alignItems: "center",
|
|
||||||
};
|
|
||||||
|
|
||||||
const narrowBottomMuted: SectionBlockProps = {
|
|
||||||
...baseProps,
|
|
||||||
background: "muted",
|
|
||||||
maxWidthMode: "narrow",
|
|
||||||
gapX: "sm",
|
|
||||||
alignItems: "bottom",
|
|
||||||
paddingY: "sm",
|
|
||||||
};
|
|
||||||
|
|
||||||
const wideCfg = getSectionLayoutConfig(wideCentered);
|
|
||||||
expect(wideCfg.maxWidthClass).toBe("max-w-6xl");
|
|
||||||
expect(wideCfg.gapXClass).toBe("gap-10");
|
|
||||||
expect(wideCfg.alignItemsClass).toBe("items-center");
|
|
||||||
|
|
||||||
const narrowCfg = getSectionLayoutConfig(narrowBottomMuted);
|
|
||||||
expect(narrowCfg.backgroundClass).toBe("bg-slate-900");
|
|
||||||
expect(narrowCfg.maxWidthClass).toBe("max-w-3xl");
|
|
||||||
expect(narrowCfg.gapXClass).toBe("gap-4");
|
|
||||||
expect(narrowCfg.alignItemsClass).toBe("items-end");
|
|
||||||
expect(narrowCfg.paddingYClass).toBe("py-8");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("primary 배경과 큰 패딩에 대해 올바른 클래스를 반환해야 한다", () => {
|
|
||||||
const primaryLarge: SectionBlockProps = {
|
|
||||||
...baseProps,
|
|
||||||
background: "primary",
|
|
||||||
paddingY: "lg",
|
|
||||||
};
|
|
||||||
|
|
||||||
const cfg = getSectionLayoutConfig(primaryLarge);
|
|
||||||
expect(cfg.backgroundClass).toBe("bg-sky-900");
|
|
||||||
expect(cfg.paddingYClass).toBe("py-20");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user