i18n 적용
This commit is contained in:
+44
-28
@@ -4,6 +4,8 @@ import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
|
||||
|
||||
// 대시보드 페이지 (/dashboard)
|
||||
// - /api/dashboard/overview 에서 요약/프로젝트별 통계를 가져와 카드 형태로 렌더링한다.
|
||||
@@ -35,6 +37,8 @@ type PageStatus = "idle" | "loading" | "error";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const locale = useAppLocale();
|
||||
const t = getDashboardMessages(locale);
|
||||
|
||||
const [summary, setSummary] = useState<SummaryStats | null>(null);
|
||||
const [projects, setProjects] = useState<ProjectStatsItem[]>([]);
|
||||
@@ -59,13 +63,13 @@ export default function DashboardPage() {
|
||||
|
||||
if (res.status === 401) {
|
||||
setStatus("error");
|
||||
setErrorMessage("대시보드를 보려면 로그인이 필요합니다. 다시 로그인해 주세요.");
|
||||
setErrorMessage(t.errorUnauthorized);
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("error");
|
||||
setErrorMessage("대시보드 데이터를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(t.errorGeneric);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -87,9 +91,7 @@ export default function DashboardPage() {
|
||||
} catch {
|
||||
if (!cancelled) {
|
||||
setStatus("error");
|
||||
setErrorMessage(
|
||||
"대시보드 데이터를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
|
||||
);
|
||||
setErrorMessage(t.errorGeneric);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -141,8 +143,8 @@ export default function DashboardPage() {
|
||||
<main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">대시보드</h1>
|
||||
<p className="text-sm text-slate-500 mt-1 dark:text-slate-400">프로젝트와 폼 제출 현황을 한눈에 확인할 수 있는 요약 화면입니다.</p>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{t.title}</h1>
|
||||
<p className="text-sm text-slate-500 mt-1 dark:text-slate-400">{t.description}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
|
||||
@@ -152,21 +154,21 @@ export default function DashboardPage() {
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-sky-600 text-white shadow-sm hover:bg-sky-700"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" aria-hidden="true" />
|
||||
<span>대시보드</span>
|
||||
<span>{t.navDashboard}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<FolderKanban className="w-4 h-4" aria-hidden="true" />
|
||||
<span>프로젝트 목록</span>
|
||||
<span>{t.navProjects}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects/submissions"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-emerald-700 hover:bg-emerald-50 hover:text-emerald-800 dark:text-emerald-200 dark:hover:bg-emerald-900/60 dark:hover:text-emerald-100"
|
||||
>
|
||||
<ListChecks className="w-4 h-4" aria-hidden="true" />
|
||||
<span>전체 제출 내역</span>
|
||||
<span>{t.navSubmissions}</span>
|
||||
</Link>
|
||||
</nav>
|
||||
<button
|
||||
@@ -175,7 +177,7 @@ export default function DashboardPage() {
|
||||
onClick={handleToggleTheme}
|
||||
>
|
||||
<SunMoon className="w-4 h-4" aria-hidden="true" />
|
||||
<span>테마 전환</span>
|
||||
<span>{t.themeToggleLabel}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
@@ -185,7 +187,7 @@ export default function DashboardPage() {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
메뉴
|
||||
{t.menuLabel}
|
||||
</button>
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
|
||||
@@ -197,7 +199,7 @@ export default function DashboardPage() {
|
||||
void handleLogout();
|
||||
}}
|
||||
>
|
||||
로그아웃
|
||||
{t.logoutLabel}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -211,7 +213,7 @@ export default function DashboardPage() {
|
||||
)}
|
||||
|
||||
{status === "loading" && (
|
||||
<p className="text-xs text-slate-400">대시보드 데이터를 불러오는 중입니다...</p>
|
||||
<p className="text-xs text-slate-400">{t.loadingText}</p>
|
||||
)}
|
||||
|
||||
{/* 상단 요약 위젯 영역 */}
|
||||
@@ -220,7 +222,9 @@ export default function DashboardPage() {
|
||||
data-testid="dashboard-summary-total-projects"
|
||||
className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">프로젝트 수</span>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
|
||||
{t.summaryTotalProjectsLabel}
|
||||
</span>
|
||||
<span className="text-2xl font-bold tracking-tight">{safeSummary.totalProjects}</span>
|
||||
</div>
|
||||
|
||||
@@ -228,7 +232,9 @@ export default function DashboardPage() {
|
||||
data-testid="dashboard-summary-total-submissions"
|
||||
className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">전체 폼 제출 수</span>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
|
||||
{t.summaryTotalSubmissionsLabel}
|
||||
</span>
|
||||
<span className="text-2xl font-bold tracking-tight">{safeSummary.totalSubmissions}</span>
|
||||
</div>
|
||||
|
||||
@@ -236,7 +242,9 @@ export default function DashboardPage() {
|
||||
data-testid="dashboard-summary-today-submissions"
|
||||
className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">오늘 제출 수</span>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
|
||||
{t.summaryTodaySubmissionsLabel}
|
||||
</span>
|
||||
<span className="text-2xl font-bold tracking-tight">{safeSummary.todaySubmissions}</span>
|
||||
</div>
|
||||
|
||||
@@ -244,7 +252,9 @@ export default function DashboardPage() {
|
||||
data-testid="dashboard-summary-last7days-submissions"
|
||||
className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">최근 7일 제출 수</span>
|
||||
<span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
|
||||
{t.summaryLast7DaysSubmissionsLabel}
|
||||
</span>
|
||||
<span className="text-2xl font-bold tracking-tight">{safeSummary.last7DaysSubmissions}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -255,12 +265,12 @@ export default function DashboardPage() {
|
||||
className="mt-2 rounded-xl border border-slate-200 bg-white/80 px-4 py-3 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
|
||||
>
|
||||
<div className="flex items-baseline justify-between mb-2">
|
||||
<h2 className="text-sm font-semibold text-slate-800 dark:text-slate-200">최근 제출 추이 (일별)</h2>
|
||||
<span className="text-[10px] text-slate-500 dark:text-slate-500">최근 활동이 있는 날짜만 표시됩니다.</span>
|
||||
<h2 className="text-sm font-semibold text-slate-800 dark:text-slate-200">{t.chartTitle}</h2>
|
||||
<span className="text-[10px] text-slate-500 dark:text-slate-500">{t.chartSubtitle}</span>
|
||||
</div>
|
||||
|
||||
{dailySubmissions.length === 0 ? (
|
||||
<p className="text-[11px] text-slate-500 dark:text-slate-400">아직 일별 제출 내역이 없습니다.</p>
|
||||
<p className="text-[11px] text-slate-500 dark:text-slate-400">{t.chartEmptyLabel}</p>
|
||||
) : (
|
||||
<div className="flex items-end gap-2 text-[10px]">
|
||||
{dailySubmissions.map((item) => (
|
||||
@@ -283,10 +293,12 @@ export default function DashboardPage() {
|
||||
|
||||
{/* 프로젝트 카드 리스트 영역 */}
|
||||
<div className="mt-2">
|
||||
<h2 className="text-base font-semibold mb-2 text-slate-800 dark:text-slate-100">프로젝트별 제출 현황</h2>
|
||||
<h2 className="text-base font-semibold mb-2 text-slate-800 dark:text-slate-100">
|
||||
{t.sectionProjectsTitle}
|
||||
</h2>
|
||||
|
||||
{projects.length === 0 && status === "idle" && !errorMessage && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">아직 생성된 프로젝트가 없거나 제출 내역이 없습니다.</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{t.sectionProjectsEmpty}</p>
|
||||
)}
|
||||
|
||||
{projects.length > 0 && (
|
||||
@@ -294,7 +306,7 @@ export default function DashboardPage() {
|
||||
{projects.map((project) => {
|
||||
const lastSubmitted = project.lastSubmissionAt
|
||||
? new Date(project.lastSubmissionAt).toLocaleString()
|
||||
: "제출 내역 없음";
|
||||
: t.projectLatestSubmissionEmpty;
|
||||
|
||||
return (
|
||||
<article
|
||||
@@ -314,9 +326,13 @@ export default function DashboardPage() {
|
||||
|
||||
<div className="mt-1 flex items-center justify-between text-[11px] text-slate-700 dark:text-slate-300">
|
||||
<span>
|
||||
총 제출 <span className="font-semibold">{project.totalSubmissions}</span>건
|
||||
{t.projectTotalSubmissionsPrefix}
|
||||
<span className="font-semibold">{project.totalSubmissions}</span>
|
||||
{t.projectTotalSubmissionsSuffix}
|
||||
</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">
|
||||
{t.projectLatestSubmissionPrefix} {lastSubmitted}
|
||||
</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">최근 제출: {lastSubmitted}</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex items-center gap-2 text-[11px]">
|
||||
@@ -324,13 +340,13 @@ export default function DashboardPage() {
|
||||
href={`/projects/${encodeURIComponent(project.slug)}/submissions`}
|
||||
className="text-emerald-700 hover:text-emerald-900 underline-offset-2 hover:underline dark:text-emerald-300 dark:hover:text-emerald-100"
|
||||
>
|
||||
폼 제출 내역 보기
|
||||
{t.projectViewSubmissionsLink}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/p/${encodeURIComponent(project.slug)}`}
|
||||
className="text-sky-700 hover:text-sky-900 underline-offset-2 hover:underline dark:text-sky-300 dark:hover:text-sky-200"
|
||||
>
|
||||
퍼블릭 페이지 열기
|
||||
{t.projectOpenPublicPageLink}
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -11,6 +11,8 @@ import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
|
||||
import { rectIntersection } from "@dnd-kit/core";
|
||||
|
||||
import type { Block, ButtonBlockProps, ImageBlockProps, ProjectConfig, TextBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorCanvasMessages } from "@/features/i18n/messages/editorCanvas";
|
||||
|
||||
interface EditorCanvasProps {
|
||||
blocks: Block[];
|
||||
@@ -42,6 +44,9 @@ export function EditorCanvas(props: EditorCanvasProps) {
|
||||
projectConfig,
|
||||
} = props;
|
||||
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorCanvasMessages(locale);
|
||||
|
||||
const canvasOuterStyle: CSSProperties = {};
|
||||
const canvasInnerStyle: CSSProperties = {};
|
||||
const preset = projectConfig.canvasPreset ?? "full";
|
||||
@@ -86,7 +91,7 @@ export function EditorCanvas(props: EditorCanvasProps) {
|
||||
>
|
||||
{blocks.length === 0 ? (
|
||||
<div className="flex-1 flex items-center justify-center text-slate-500 text-xs">
|
||||
왼쪽에서 "텍스트" 버튼을 눌러 블록을 추가해 보세요.
|
||||
{m.emptyStateHint}
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
@@ -121,6 +126,9 @@ interface DragPreviewProps {
|
||||
export function EditorCanvasDragPreview({ block }: DragPreviewProps) {
|
||||
if (!block) return null;
|
||||
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorCanvasMessages(locale);
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none rounded border border-sky-500 bg-white px-3 py-2 text-xs text-slate-900 shadow-lg opacity-90 min-w-[160px] max-w-[260px] dark:bg-slate-900 dark:text-slate-100">
|
||||
<div className="text-[10px] uppercase tracking-wide text-sky-300 mb-1">
|
||||
@@ -138,16 +146,16 @@ export function EditorCanvasDragPreview({ block }: DragPreviewProps) {
|
||||
</div>
|
||||
<div className="truncate">
|
||||
{block.type === "text"
|
||||
? (block.props as TextBlockProps).text || "텍스트 블록"
|
||||
? (block.props as TextBlockProps).text || m.previewFallbackTextBlock
|
||||
: block.type === "button"
|
||||
? (block.props as ButtonBlockProps).label || "버튼 블록"
|
||||
? (block.props as ButtonBlockProps).label || m.previewFallbackButtonBlock
|
||||
: block.type === "image"
|
||||
? (block.props as ImageBlockProps).alt || "이미지 블록"
|
||||
? (block.props as ImageBlockProps).alt || m.previewFallbackImageBlock
|
||||
: block.type === "list"
|
||||
? "리스트 블록"
|
||||
? m.previewFallbackListBlock
|
||||
: block.type === "divider"
|
||||
? "구분선 블록"
|
||||
: "섹션 블록"}
|
||||
? m.previewFallbackDividerBlock
|
||||
: m.previewFallbackSectionBlock}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormCheckboxPanelMessages } from "@/features/i18n/messages/editorFormCheckboxPanel";
|
||||
|
||||
interface FormCheckboxPropertiesPanelProps {
|
||||
block: Block;
|
||||
@@ -11,6 +13,8 @@ interface FormCheckboxPropertiesPanelProps {
|
||||
}
|
||||
|
||||
export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBlock }: FormCheckboxPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorFormCheckboxPanelMessages(locale);
|
||||
if (!selectedBlockId || block.id !== selectedBlockId) return null;
|
||||
|
||||
const checkboxProps = block.props as FormCheckboxBlockProps;
|
||||
@@ -18,10 +22,10 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
|
||||
return (
|
||||
<div className="space-y-3 text-xs">
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">체크박스 필드</h3>
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.sectionTitle}</h3>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">그룹 타이틀 타입</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.groupTitleTypeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.groupLabelMode ?? "text"}
|
||||
@@ -31,13 +35,13 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="text">텍스트</option>
|
||||
<option value="image">이미지</option>
|
||||
<option value="text">{m.groupTitleTypeOptionText}</option>
|
||||
<option value="image">{m.groupTitleTypeOptionImage}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">그룹 타이틀 표시 방식</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.groupTitleDisplayLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={groupLabelDisplay}
|
||||
@@ -47,14 +51,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="visible">표시 (기본)</option>
|
||||
<option value="hidden">숨김</option>
|
||||
<option value="visible">{m.groupTitleDisplayOptionVisible}</option>
|
||||
<option value="hidden">{m.groupTitleDisplayOptionHidden}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{groupLabelDisplay === "visible" && (
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>레이아웃</span>
|
||||
<span>{m.layoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.labelLayout ?? "stacked"}
|
||||
@@ -64,14 +68,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">세로 (기본)</option>
|
||||
<option value="inline">가로 (인라인)</option>
|
||||
<option value="stacked">{m.layoutOptionStacked}</option>
|
||||
<option value="inline">{m.layoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>옵션 레이아웃</span>
|
||||
<span>{m.optionLayoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.optionLayout ?? "stacked"}
|
||||
@@ -81,14 +85,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">세로 (기본)</option>
|
||||
<option value="inline">가로 (인라인)</option>
|
||||
<option value="stacked">{m.layoutOptionStacked}</option>
|
||||
<option value="inline">{m.layoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{groupLabelDisplay === "visible" && (checkboxProps.labelLayout ?? "stacked") === "inline" && (
|
||||
<NumericPropertyControl
|
||||
label="라벨/필드 간격 (px)"
|
||||
label={m.labelGapLabel}
|
||||
unitLabel="(px)"
|
||||
value={typeof checkboxProps.labelGapPx === "number" ? checkboxProps.labelGapPx : 8}
|
||||
min={0}
|
||||
@@ -109,7 +113,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">그룹 타이틀</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.groupTitleLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.groupLabel ?? ""}
|
||||
@@ -131,7 +135,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-400">그룹 타이틀 이미지 소스</span>
|
||||
<span className="text-slate-400">{m.groupTitleImageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={source}
|
||||
@@ -141,14 +145,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="url">URL</option>
|
||||
<option value="upload">파일 업로드</option>
|
||||
<option value="url">{m.groupTitleImageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.groupTitleImageSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{source === "url" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-400">그룹 타이틀 이미지 URL</span>
|
||||
<span className="text-slate-400">{m.groupTitleImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.groupLabelImageUrl ?? ""}
|
||||
@@ -163,12 +167,12 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
|
||||
{source === "upload" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-400">그룹 타이틀 이미지 파일 업로드</span>
|
||||
<span className="text-slate-400">{m.groupTitleImageUploadLabel}</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
|
||||
aria-label="그룹 타이틀 이미지 파일 업로드"
|
||||
aria-label={m.groupTitleImageUploadAria}
|
||||
onChange={async (event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
@@ -208,7 +212,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
})()}
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">전송 키</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.submitKeyLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.formFieldName ?? ""}
|
||||
@@ -222,7 +226,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-500 dark:text-slate-400">옵션</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.optionsLabel}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
@@ -239,12 +243,12 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
옵션 추가
|
||||
{m.addOptionButtonLabel}
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">옵션 이미지 소스</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.optionImageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={(() => {
|
||||
@@ -259,8 +263,8 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="url">URL</option>
|
||||
<option value="upload">파일 업로드</option>
|
||||
<option value="url">{m.optionImageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.optionImageSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
@@ -269,7 +273,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
|
||||
<input
|
||||
className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder="라벨"
|
||||
placeholder={m.optionLabelPlaceholder}
|
||||
value={opt.label ?? ""}
|
||||
onChange={(e) => {
|
||||
const next = [...(((checkboxProps as any).options ?? []) as any[])];
|
||||
@@ -284,7 +288,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
/>
|
||||
<input
|
||||
className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder="값(value)"
|
||||
placeholder={m.optionValuePlaceholder}
|
||||
value={opt.value ?? ""}
|
||||
onChange={(e) => {
|
||||
const next = [...(((checkboxProps as any).options ?? []) as any[])];
|
||||
@@ -321,7 +325,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
{source === "url" && (
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder="옵션 이미지 URL (선택)"
|
||||
placeholder={m.optionImageUrlPlaceholder}
|
||||
value={opt.labelImageUrl ?? ""}
|
||||
onChange={(e) => {
|
||||
const next = [...(((checkboxProps as any).options ?? []) as any[])];
|
||||
@@ -337,12 +341,12 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
)}
|
||||
{source === "upload" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">옵션 이미지 파일 업로드</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.optionImageUploadLabel}</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
|
||||
aria-label="옵션 이미지 파일 업로드"
|
||||
aria-label={m.optionImageUploadAria}
|
||||
onChange={async (event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
@@ -393,15 +397,15 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
</div>
|
||||
|
||||
<label className="inline-flex items-center gap-2">
|
||||
<span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
|
||||
<span className="text-slate-500">{m.requiredNoticeText}</span>
|
||||
</label>
|
||||
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">필드 스타일</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
{/* px 기반 체크박스 타이포 입력값을 노출하여 em 스케일 변환을 위한 근거를 남긴다 */}
|
||||
<NumericPropertyControl
|
||||
label="체크박스 텍스트 크기 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.textSizeLabel}
|
||||
unitLabel={m.textSizeUnitLabel}
|
||||
value={(() => {
|
||||
const raw = checkboxProps.fontSizeCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -418,16 +422,16 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
{ id: "lg", label: "L", value: 18 },
|
||||
{ id: "xl", label: "XL", value: 20 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
fontSizeCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
{/* 줄간격 px 입력값을 노출해 preview em 변환과 TDD 케이스를 연동한다 */}
|
||||
<NumericPropertyControl
|
||||
label="체크박스 줄간격 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.lineHeightLabel}
|
||||
unitLabel={m.lineHeightUnitLabel}
|
||||
value={(() => {
|
||||
const raw = checkboxProps.lineHeightCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -442,16 +446,16 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
{ id: "normal", label: "보통", value: 24 },
|
||||
{ id: "loose", label: "루즈", value: 32 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
lineHeightCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
{/* 자간 px 입력을 통한 폼 체크박스 미세 조정값을 노출 */}
|
||||
<NumericPropertyControl
|
||||
label="체크박스 자간 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
value={(() => {
|
||||
const raw = checkboxProps.letterSpacingCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -466,14 +470,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
{ id: "normal", label: "보통", value: 0 },
|
||||
{ id: "wide", label: "넓게", value: 2 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
||||
<span>필드 너비</span>
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={checkboxProps.widthMode ?? "full"}
|
||||
@@ -483,15 +487,15 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">자동</option>
|
||||
<option value="full">전체 폭</option>
|
||||
<option value="fixed">고정 값</option>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="full">{m.widthModeOptionFull}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
{(checkboxProps.widthMode ?? "full") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="필드 고정 너비"
|
||||
unitLabel="(px)"
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={checkboxProps.widthPx ?? 240}
|
||||
min={80}
|
||||
max={800}
|
||||
@@ -501,16 +505,16 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
{ id: "md", label: "보통", value: 280 },
|
||||
{ id: "lg", label: "넓게", value: 360 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any);
|
||||
}}
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<NumericPropertyControl
|
||||
label="체크박스 가로 패딩 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.paddingXLabel}
|
||||
unitLabel={m.paddingXUnitLabel}
|
||||
value={typeof checkboxProps.paddingX === "number" ? checkboxProps.paddingX : 12}
|
||||
min={0}
|
||||
max={60}
|
||||
@@ -529,8 +533,8 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label="체크박스 세로 패딩 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
value={typeof checkboxProps.paddingY === "number" ? checkboxProps.paddingY : 10}
|
||||
min={0}
|
||||
max={40}
|
||||
@@ -549,8 +553,8 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label="체크박스 옵션 간격 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.optionGapLabel}
|
||||
unitLabel={m.optionGapUnitLabel}
|
||||
value={typeof checkboxProps.optionGapPx === "number" ? checkboxProps.optionGapPx : 4}
|
||||
min={0}
|
||||
max={40}
|
||||
@@ -568,9 +572,9 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label="텍스트 색상"
|
||||
ariaLabelColorInput="체크박스 텍스트 색상 피커"
|
||||
ariaLabelHexInput="체크박스 텍스트 색상 HEX"
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
checkboxProps.textColorCustom && checkboxProps.textColorCustom.trim() !== ""
|
||||
? checkboxProps.textColorCustom
|
||||
@@ -589,9 +593,9 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label="배경 색상"
|
||||
ariaLabelColorInput="체크박스 배경 색상 피커"
|
||||
ariaLabelHexInput="체크박스 배경 색상 HEX"
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
checkboxProps.fillColorCustom && checkboxProps.fillColorCustom.trim() !== ""
|
||||
? checkboxProps.fillColorCustom
|
||||
@@ -610,9 +614,9 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label="테두리 색상"
|
||||
ariaLabelColorInput="체크박스 테두리 색상 피커"
|
||||
ariaLabelHexInput="체크박스 테두리 색상 HEX"
|
||||
label={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
checkboxProps.strokeColorCustom && checkboxProps.strokeColorCustom.trim() !== ""
|
||||
? checkboxProps.strokeColorCustom
|
||||
@@ -631,7 +635,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label="필드 모서리 둥글기"
|
||||
label={m.borderRadiusLabel}
|
||||
value={(() => {
|
||||
const r = checkboxProps.borderRadius ?? "md";
|
||||
return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
|
||||
@@ -640,11 +644,11 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
|
||||
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 },
|
||||
{ id: "none", label: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 4 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, value: 8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const next =
|
||||
|
||||
@@ -4,6 +4,8 @@ import { useState } from "react";
|
||||
import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
import { computeFormControllerPublicTokens } from "@/features/editor/utils/formHelpers";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormControllerPanelMessages } from "@/features/i18n/messages/editorFormControllerPanel";
|
||||
|
||||
interface FormControllerPanelProps {
|
||||
block: Block; // type === "form"
|
||||
@@ -18,6 +20,8 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
const [showSheetsGuide, setShowSheetsGuide] = useState(false);
|
||||
|
||||
const formProps = block.props as FormBlockProps;
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorFormControllerPanelMessages(locale);
|
||||
|
||||
const sheetsScriptExample = (() => {
|
||||
const tokens = computeFormControllerPublicTokens(block, blocks);
|
||||
@@ -71,13 +75,14 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
return (
|
||||
<div className="space-y-4 text-xs">
|
||||
<p className="text-slate-400">
|
||||
이 폼은 퍼블릭 페이지에서 <code className="font-mono text-[11px]">/api/forms/submit</code>
|
||||
엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다.
|
||||
{m.introTextPrefix}
|
||||
<code className="font-mono text-[11px]">/api/forms/submit</code>
|
||||
{m.introTextSuffix}
|
||||
</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">전송 대상</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.submitTargetLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={formProps.submitTarget ?? "internal"}
|
||||
@@ -87,18 +92,18 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="internal">서버 처리 전용 (Webhook 없이 사용)</option>
|
||||
<option value="webhook">외부 Webhook / Google Sheets 로 전달</option>
|
||||
<option value="internal">{m.submitTargetOptionInternal}</option>
|
||||
<option value="webhook">{m.submitTargetOptionWebhook}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{formProps.submitTarget === "webhook" && (
|
||||
<div className="space-y-3">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">Webhook URL (예: Google Apps Script 웹 앱 URL)</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.webhookUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder="예: https://script.google.com/macros/s/.../exec"
|
||||
placeholder={m.webhookUrlPlaceholder}
|
||||
value={formProps.destinationUrl ?? ""}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -108,7 +113,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
/>
|
||||
</label>
|
||||
<label className="flex items-center justify-between gap-2">
|
||||
<span className="text-slate-500 dark:text-slate-400">전송 포맷</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.payloadFormatLabel}</span>
|
||||
<select
|
||||
className="w-40 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={formProps.payloadFormat ?? "form"}
|
||||
@@ -118,12 +123,12 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="form">폼 데이터 (x-www-form-urlencoded)</option>
|
||||
<option value="json">JSON (application/json)</option>
|
||||
<option value="form">{m.payloadFormatOptionForm}</option>
|
||||
<option value="json">{m.payloadFormatOptionJson}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex items-center justify-between gap-2">
|
||||
<span className="text-slate-500 dark:text-slate-400">HTTP 메서드</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.httpMethodLabel}</span>
|
||||
<select
|
||||
className="w-28 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={formProps.method ?? "POST"}
|
||||
@@ -138,10 +143,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">Authorization 토큰 (옵션)</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.authTokenLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder="예: Bearer xxxxxx"
|
||||
placeholder={m.authTokenPlaceholder}
|
||||
value={formProps.headers?.Authorization ?? ""}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -154,10 +159,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">추가 파라미터 (key=value 형식, 줄바꿈으로 구분)</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.extraParamsLabel}</span>
|
||||
<textarea
|
||||
className="w-full h-16 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder={"예:\nsource=landing\nformId=contact-hero"}
|
||||
placeholder={m.extraParamsPlaceholder}
|
||||
value={Object.entries(formProps.extraParams ?? {})
|
||||
.map(([k, v]) => `${k}=${v}`)
|
||||
.join("\n")}
|
||||
@@ -186,7 +191,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
className="inline-flex items-center gap-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={() => setShowSheetsGuide(true)}
|
||||
>
|
||||
Google Sheets 연동 가이드
|
||||
{m.sheetsGuideButtonLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -194,9 +199,9 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 레이아웃</h3>
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.layoutSectionTitle}</h3>
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span>폼 너비 모드</span>
|
||||
<span>{m.formWidthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={formProps.formWidthMode ?? "auto"}
|
||||
@@ -206,14 +211,14 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">자동</option>
|
||||
<option value="full">전체 폭</option>
|
||||
<option value="fixed">고정 값</option>
|
||||
<option value="auto">{m.formWidthModeOptionAuto}</option>
|
||||
<option value="full">{m.formWidthModeOptionFull}</option>
|
||||
<option value="fixed">{m.formWidthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
{(formProps.formWidthMode ?? "auto") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="폼 고정 너비 (px)"
|
||||
label={m.formFixedWidthLabel}
|
||||
unitLabel="(px)"
|
||||
value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 480}
|
||||
min={160}
|
||||
@@ -232,17 +237,17 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
/>
|
||||
)}
|
||||
<NumericPropertyControl
|
||||
label="폼 위/아래 여백 (px)"
|
||||
label={m.marginYLabel}
|
||||
unitLabel="(px)"
|
||||
value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 24}
|
||||
min={0}
|
||||
max={160}
|
||||
step={4}
|
||||
presets={[
|
||||
{ id: "none", label: "없음", value: 0 },
|
||||
{ id: "compact", label: "좁게", value: 16 },
|
||||
{ id: "normal", label: "보통", value: 24 },
|
||||
{ id: "spacious", label: "넓게", value: 40 },
|
||||
{ id: "none", label: m.marginYPresetNone, value: 0 },
|
||||
{ id: "compact", label: m.marginYPresetCompact, value: 16 },
|
||||
{ id: "normal", label: m.marginYPresetNormal, value: 24 },
|
||||
{ id: "spacious", label: m.marginYPresetSpacious, value: 40 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -253,12 +258,12 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 메시지</h3>
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.messagesSectionTitle}</h3>
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span>성공 메시지</span>
|
||||
<span>{m.successMessageLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder="예: 성공적으로 전송되었습니다."
|
||||
placeholder={m.successMessagePlaceholder}
|
||||
value={formProps.successMessage ?? ""}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -268,10 +273,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
<span>에러 메시지</span>
|
||||
<span>{m.errorMessageLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder="예: 전송 중 오류가 발생했습니다."
|
||||
placeholder={m.errorMessagePlaceholder}
|
||||
value={formProps.errorMessage ?? ""}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -283,10 +288,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 border-t border-slate-800 pt-3 mt-4">
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 컨트롤러</h3>
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.controllerSectionTitle}</h3>
|
||||
|
||||
<fieldset className="space-y-2" aria-label="폼 필드 매핑">
|
||||
<legend className="text-[11px] text-slate-400 mb-1">폼 필드 매핑</legend>
|
||||
<fieldset className="space-y-2" aria-label={m.fieldMappingAriaLabel}>
|
||||
<legend className="text-[11px] text-slate-400 mb-1">{m.fieldMappingLegend}</legend>
|
||||
{blocks
|
||||
.filter((b) =>
|
||||
b.type === "formInput" ||
|
||||
@@ -355,10 +360,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
</fieldset>
|
||||
|
||||
<div className="space-y-1">
|
||||
<span className="text-[11px] text-slate-400">Submit 버튼</span>
|
||||
<span className="text-[11px] text-slate-400">{m.submitButtonLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="Submit 버튼"
|
||||
aria-label={m.submitButtonAriaLabel}
|
||||
value={formProps.submitButtonId ?? ""}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -393,27 +398,26 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
|
||||
<div className="w-full max-w-xl rounded border border-slate-200 bg-white px-4 py-3 text-xs text-slate-900 shadow-lg dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h4 className="text-[11px] font-semibold">Google Sheets 연동 가이드</h4>
|
||||
<h4 className="text-[11px] font-semibold">{m.sheetsGuideHeading}</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[11px] text-slate-400 hover:text-slate-100"
|
||||
onClick={() => setShowSheetsGuide(false)}
|
||||
aria-label="Google Sheets 연동 가이드 닫기"
|
||||
aria-label={m.sheetsGuideCloseAriaLabel}
|
||||
>
|
||||
닫기
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||
구글 시트 주소를 그대로 입력하는 것이 아니라, 시트에 연결된 Google Apps Script 웹 앱 URL 을 입력해야 합니다.
|
||||
아래 순서를 따르면 코드를 잘 모르는 사용자도 연동할 수 있습니다.
|
||||
{m.sheetsGuideIntro}
|
||||
</p>
|
||||
<ol className="list-decimal list-inside space-y-1 text-[11px] text-slate-400 mt-2">
|
||||
<li>Google Sheets 에서 새 스프레드시트를 만들고, 1행에 name, email, message 같은 헤더를 추가합니다.</li>
|
||||
<li>시트 메뉴의 "확장 프로그램 → 앱스 스크립트" 를 열고 아래 예제 코드를 붙여넣습니다.</li>
|
||||
<li>"배포 → 새 배포" 에서 웹 앱으로 배포한 뒤, 발급된 웹 앱 URL(…/exec) 을 Webhook URL 칸에 붙여넣습니다.</li>
|
||||
<li>{m.sheetsGuideStep1}</li>
|
||||
<li>{m.sheetsGuideStep2}</li>
|
||||
<li>{m.sheetsGuideStep3}</li>
|
||||
</ol>
|
||||
<div className="mt-2 space-y-1">
|
||||
<span className="text-[11px] text-slate-500 dark:text-slate-400">예시 Apps Script 코드</span>
|
||||
<span className="text-[11px] text-slate-500 dark:text-slate-400">{m.sheetsGuideExampleCodeLabel}</span>
|
||||
<textarea
|
||||
className="w-full h-40 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
readOnly
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormInputPanelMessages } from "@/features/i18n/messages/editorFormInputPanel";
|
||||
|
||||
interface FormInputPropertiesPanelProps {
|
||||
block: Block;
|
||||
@@ -11,6 +13,8 @@ interface FormInputPropertiesPanelProps {
|
||||
}
|
||||
|
||||
export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }: FormInputPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorFormInputPanelMessages(locale);
|
||||
if (!selectedBlockId || block.id !== selectedBlockId || block.type !== "formInput") return null;
|
||||
|
||||
const inputProps = block.props as FormInputBlockProps;
|
||||
@@ -18,9 +22,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
|
||||
return (
|
||||
<div className="space-y-3 text-xs">
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">입력 필드</h3>
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.sectionTitle}</h3>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">라벨 타입</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelTypeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.labelMode ?? "text"}
|
||||
@@ -30,12 +34,12 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="text">텍스트</option>
|
||||
<option value="image">이미지</option>
|
||||
<option value="text">{m.labelTypeOptionText}</option>
|
||||
<option value="image">{m.labelTypeOptionImage}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">필드 라벨</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.fieldLabelLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.label ?? ""}
|
||||
@@ -47,7 +51,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">라벨 표시 방식</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelDisplayLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={labelDisplay}
|
||||
@@ -57,14 +61,14 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="visible">표시 (기본)</option>
|
||||
<option value="hidden">숨김</option>
|
||||
<option value="floating">플로팅 라벨</option>
|
||||
<option value="visible">{m.labelDisplayOptionVisible}</option>
|
||||
<option value="hidden">{m.labelDisplayOptionHidden}</option>
|
||||
<option value="floating">{m.labelDisplayOptionFloating}</option>
|
||||
</select>
|
||||
</label>
|
||||
{labelDisplay === "visible" && (
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>레이아웃</span>
|
||||
<span>{m.layoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.labelLayout ?? "stacked"}
|
||||
@@ -74,15 +78,15 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">세로 (기본)</option>
|
||||
<option value="inline">가로 (인라인)</option>
|
||||
<option value="stacked">{m.layoutOptionStacked}</option>
|
||||
<option value="inline">{m.layoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
{labelDisplay === "visible" && (inputProps.labelLayout ?? "stacked") === "inline" && (
|
||||
<NumericPropertyControl
|
||||
label="라벨/필드 간격 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.labelGapLabel}
|
||||
unitLabel={m.labelGapUnitLabel}
|
||||
value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
|
||||
min={0}
|
||||
max={80}
|
||||
@@ -103,7 +107,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
{inputProps.labelMode === "image" && (
|
||||
<>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">라벨 이미지 URL</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.labelImageUrl ?? ""}
|
||||
@@ -115,7 +119,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">라벨 이미지 대체 텍스트</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelImageAltLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.labelImageAlt ?? ""}
|
||||
@@ -129,7 +133,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
</>
|
||||
)}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">전송 키</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.submitKeyLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.formFieldName ?? ""}
|
||||
@@ -141,10 +145,10 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">필드 타입</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.fieldTypeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="필드 타입"
|
||||
aria-label={m.fieldTypeAria}
|
||||
value={inputProps.inputType ?? "text"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -152,16 +156,16 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="text">텍스트</option>
|
||||
<option value="email">이메일</option>
|
||||
<option value="textarea">긴 텍스트</option>
|
||||
<option value="text">{m.fieldTypeOptionText}</option>
|
||||
<option value="email">{m.fieldTypeOptionEmail}</option>
|
||||
<option value="textarea">{m.fieldTypeOptionTextarea}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">Placeholder</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.placeholderLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="Placeholder"
|
||||
aria-label={m.placeholderAria}
|
||||
value={inputProps.placeholder ?? ""}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -171,13 +175,13 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
/>
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-2">
|
||||
<span className="text-slate-500 dark:text-slate-400">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.requiredNoticeText}</span>
|
||||
</label>
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">필드 스타일</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
<NumericPropertyControl
|
||||
label="필드 텍스트 크기 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.textSizeLabel}
|
||||
unitLabel={m.textSizeUnitLabel}
|
||||
value={(() => {
|
||||
const raw = inputProps.fontSizeCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -202,8 +206,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
/>
|
||||
{/* 줄간격 px 입력을 노출하여 preview em 변환의 근거를 제공 */}
|
||||
<NumericPropertyControl
|
||||
label="필드 줄간격 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.lineHeightLabel}
|
||||
unitLabel={m.lineHeightUnitLabel}
|
||||
value={(() => {
|
||||
const raw = inputProps.lineHeightCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -226,8 +230,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
/>
|
||||
{/* 자간 px 입력으로 폼 입력 타이포를 세밀하게 조정 */}
|
||||
<NumericPropertyControl
|
||||
label="필드 자간 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
value={(() => {
|
||||
const raw = inputProps.letterSpacingCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -249,7 +253,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
}}
|
||||
/>
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>텍스트 정렬</span>
|
||||
<span>{m.textAlignLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={inputProps.align ?? "left"}
|
||||
@@ -259,16 +263,16 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="left">왼쪽</option>
|
||||
<option value="center">가운데</option>
|
||||
<option value="right">오른쪽</option>
|
||||
<option value="left">{m.textAlignOptionLeft}</option>
|
||||
<option value="center">{m.textAlignOptionCenter}</option>
|
||||
<option value="right">{m.textAlignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>너비</span>
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="너비"
|
||||
aria-label={m.widthModeAria}
|
||||
value={inputProps.widthMode ?? "full"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -276,14 +280,14 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">자동</option>
|
||||
<option value="full">전체 폭</option>
|
||||
<option value="fixed">고정 값</option>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="full">{m.widthModeOptionFull}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
<NumericPropertyControl
|
||||
label="필드 고정 너비"
|
||||
unitLabel="(px)"
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={inputProps.widthPx ?? 240}
|
||||
min={80}
|
||||
max={800}
|
||||
@@ -300,8 +304,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label="필드 가로 패딩 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.paddingXLabel}
|
||||
unitLabel={m.paddingXUnitLabel}
|
||||
value={typeof inputProps.paddingX === "number" ? inputProps.paddingX : 12}
|
||||
min={0}
|
||||
max={60}
|
||||
@@ -320,8 +324,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label="필드 세로 패딩 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
value={typeof inputProps.paddingY === "number" ? inputProps.paddingY : 10}
|
||||
min={0}
|
||||
max={40}
|
||||
@@ -340,9 +344,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label="필드 텍스트 색상"
|
||||
ariaLabelColorInput="필드 텍스트 색상 피커"
|
||||
ariaLabelHexInput="필드 텍스트 색상 HEX"
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
inputProps.textColorCustom && inputProps.textColorCustom.trim() !== ""
|
||||
? inputProps.textColorCustom
|
||||
@@ -361,9 +365,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label="필드 채움 색상"
|
||||
ariaLabelColorInput="필드 채움 색상 피커"
|
||||
ariaLabelHexInput="필드 채움 색상 HEX"
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
inputProps.fillColorCustom && inputProps.fillColorCustom.trim() !== ""
|
||||
? inputProps.fillColorCustom
|
||||
@@ -382,9 +386,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label="필드 테두리 색상"
|
||||
ariaLabelColorInput="필드 테두리 색상 피커"
|
||||
ariaLabelHexInput="필드 테두리 색상 HEX"
|
||||
label={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
inputProps.strokeColorCustom && inputProps.strokeColorCustom.trim() !== ""
|
||||
? inputProps.strokeColorCustom
|
||||
@@ -403,7 +407,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label="필드 모서리 둥글기"
|
||||
label={m.borderRadiusLabel}
|
||||
value={(() => {
|
||||
const r = inputProps.borderRadius ?? "md";
|
||||
return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
|
||||
@@ -412,15 +416,14 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
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 },
|
||||
{ id: "none", label: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 4 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, value: 8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const next =
|
||||
v <= 0 ? "none" : v <= 2 ? "sm" : v <= 5 ? "md" : v <= 7 ? "lg" : "full";
|
||||
const next = v <= 0 ? "none" : v <= 2 ? "sm" : v <= 5 ? "md" : v <= 7 ? "lg" : "full";
|
||||
updateBlock(selectedBlockId, {
|
||||
borderRadius: next,
|
||||
} as any);
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormRadioPanelMessages } from "@/features/i18n/messages/editorFormRadioPanel";
|
||||
|
||||
interface FormRadioPropertiesPanelProps {
|
||||
block: Block;
|
||||
@@ -11,6 +13,8 @@ interface FormRadioPropertiesPanelProps {
|
||||
}
|
||||
|
||||
export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }: FormRadioPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorFormRadioPanelMessages(locale);
|
||||
if (!selectedBlockId || block.id !== selectedBlockId) return null;
|
||||
|
||||
const radioProps = block.props as FormRadioBlockProps;
|
||||
@@ -18,7 +22,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
|
||||
return (
|
||||
<div className="space-y-3 text-xs">
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">라디오 필드</h3>
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.sectionTitle}</h3>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">그룹 타이틀 타입</span>
|
||||
@@ -225,7 +229,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
<span className="text-slate-500 dark:text-slate-400">옵션</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-red-900/60 dark:hover:border-red-700"
|
||||
onClick={() => {
|
||||
const next = Array.isArray((radioProps as any).options)
|
||||
? [...(radioProps as any).options]
|
||||
@@ -393,15 +397,15 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
</div>
|
||||
|
||||
<label className="inline-flex items-center gap-2">
|
||||
<span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
|
||||
<span className="text-slate-500">{m.requiredNoticeText}</span>
|
||||
</label>
|
||||
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">필드 스타일</h4>
|
||||
{/* 라디오 타이포 px 값을 직접 입력받아 em 스케일 변환 로직과 연동한다 */}
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
<NumericPropertyControl
|
||||
label="라디오 텍스트 크기 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.textSizeLabel}
|
||||
unitLabel={m.textSizeUnitLabel}
|
||||
value={(() => {
|
||||
const raw = radioProps.fontSizeCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -424,10 +428,10 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
{/* 줄간격 px 입력을 노출하여 preview 에서 em 변환 근거로 사용 */}
|
||||
|
||||
<NumericPropertyControl
|
||||
label="라디오 줄간격 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.lineHeightLabel}
|
||||
unitLabel={m.lineHeightUnitLabel}
|
||||
value={(() => {
|
||||
const raw = radioProps.lineHeightCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -448,10 +452,10 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
{/* 자간 px 입력 컨트롤로 프리뷰 적용 근거 제공 */}
|
||||
|
||||
<NumericPropertyControl
|
||||
label="라디오 자간 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
value={(() => {
|
||||
const raw = radioProps.letterSpacingCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -472,8 +476,9 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-400">
|
||||
<span>필드 너비</span>
|
||||
<span>Field width</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={radioProps.widthMode ?? "full"}
|
||||
@@ -483,23 +488,24 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">자동</option>
|
||||
<option value="full">전체 폭</option>
|
||||
<option value="fixed">고정 값</option>
|
||||
<option value="auto">Auto</option>
|
||||
<option value="full">Full width</option>
|
||||
<option value="fixed">Fixed width</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(radioProps.widthMode ?? "full") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="필드 고정 너비"
|
||||
label="Field fixed width"
|
||||
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 },
|
||||
{ id: "sm", label: "Small", value: 200 },
|
||||
{ id: "md", label: "Medium", value: 280 },
|
||||
{ id: "lg", label: "Large", value: 360 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -508,19 +514,20 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<NumericPropertyControl
|
||||
label="라디오 가로 패딩 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.paddingXLabel}
|
||||
unitLabel={m.paddingXUnitLabel}
|
||||
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 },
|
||||
{ id: "xs", label: "Extra small", value: 6 },
|
||||
{ id: "sm", label: "Small", value: 10 },
|
||||
{ id: "md", label: "Medium", value: 12 },
|
||||
{ id: "lg", label: "Large", value: 16 },
|
||||
{ id: "xl", label: "Extra large", value: 20 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -528,19 +535,20 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label="라디오 세로 패딩 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
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 },
|
||||
{ id: "xs", label: "Extra small", value: 6 },
|
||||
{ id: "sm", label: "Small", value: 8 },
|
||||
{ id: "md", label: "Medium", value: 10 },
|
||||
{ id: "lg", label: "Large", value: 12 },
|
||||
{ id: "xl", label: "Extra large", value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -548,18 +556,19 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label="라디오 옵션 간격 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.optionGapLabel}
|
||||
unitLabel={m.optionGapUnitLabel}
|
||||
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 },
|
||||
{ id: "tight", label: "Tight", value: 2 },
|
||||
{ id: "normal", label: "Normal", value: 4 },
|
||||
{ id: "relaxed", label: "Relaxed", value: 8 },
|
||||
{ id: "extra", label: "Extra", value: 12 },
|
||||
]}
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -567,10 +576,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
|
||||
<ColorPickerField
|
||||
label="텍스트 색상"
|
||||
ariaLabelColorInput="라디오 텍스트 색상 피커"
|
||||
ariaLabelHexInput="라디오 텍스트 색상 HEX"
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
radioProps.textColorCustom && radioProps.textColorCustom.trim() !== ""
|
||||
? radioProps.textColorCustom
|
||||
@@ -588,10 +598,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorPickerField
|
||||
label="배경 색상"
|
||||
ariaLabelColorInput="라디오 배경 색상 피커"
|
||||
ariaLabelHexInput="라디오 배경 색상 HEX"
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
radioProps.fillColorCustom && radioProps.fillColorCustom.trim() !== ""
|
||||
? radioProps.fillColorCustom
|
||||
@@ -609,10 +620,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorPickerField
|
||||
label="테두리 색상"
|
||||
ariaLabelColorInput="라디오 테두리 색상 피커"
|
||||
ariaLabelHexInput="라디오 테두리 색상 HEX"
|
||||
label={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
radioProps.strokeColorCustom && radioProps.strokeColorCustom.trim() !== ""
|
||||
? radioProps.strokeColorCustom
|
||||
@@ -630,8 +642,9 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
} as any);
|
||||
}}
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label="필드 모서리 둥글기"
|
||||
label={m.borderRadiusLabel}
|
||||
value={(() => {
|
||||
const r = radioProps.borderRadius ?? "md";
|
||||
return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
|
||||
@@ -640,11 +653,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
|
||||
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 },
|
||||
{ id: "none", label: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 4 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, value: 8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const next =
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorFormSelectPanelMessages } from "@/features/i18n/messages/editorFormSelectPanel";
|
||||
|
||||
interface FormSelectPropertiesPanelProps {
|
||||
block: Block;
|
||||
@@ -11,6 +13,8 @@ interface FormSelectPropertiesPanelProps {
|
||||
}
|
||||
|
||||
export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock }: FormSelectPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorFormSelectPanelMessages(locale);
|
||||
if (!selectedBlockId || block.id !== selectedBlockId) return null;
|
||||
|
||||
const selectProps = block.props as FormSelectBlockProps;
|
||||
@@ -18,10 +22,10 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
|
||||
return (
|
||||
<div className="space-y-3 text-xs">
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">셀렉트 필드</h3>
|
||||
<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.sectionTitle}</h3>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">라벨 타입</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelTypeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={selectProps.labelMode ?? "text"}
|
||||
@@ -31,13 +35,13 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="text">텍스트</option>
|
||||
<option value="image">이미지</option>
|
||||
<option value="text">{m.labelTypeOptionText}</option>
|
||||
<option value="image">{m.labelTypeOptionImage}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">라벨 표시 방식</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.labelDisplayLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={labelDisplay}
|
||||
@@ -47,14 +51,14 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="visible">표시 (기본)</option>
|
||||
<option value="hidden">숨김</option>
|
||||
<option value="visible">{m.labelDisplayOptionVisible}</option>
|
||||
<option value="hidden">{m.labelDisplayOptionHidden}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{labelDisplay === "visible" && (
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>레이아웃</span>
|
||||
<span>{m.layoutLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={selectProps.labelLayout ?? "stacked"}
|
||||
@@ -64,15 +68,15 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="stacked">세로 (기본)</option>
|
||||
<option value="inline">가로 (인라인)</option>
|
||||
<option value="stacked">{m.layoutOptionStacked}</option>
|
||||
<option value="inline">{m.layoutOptionInline}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{labelDisplay === "visible" && (selectProps.labelLayout ?? "stacked") === "inline" && (
|
||||
<NumericPropertyControl
|
||||
label="라벨/필드 간격 (px)"
|
||||
label={m.labelGapLabel}
|
||||
unitLabel="(px)"
|
||||
value={typeof selectProps.labelGapPx === "number" ? selectProps.labelGapPx : 8}
|
||||
min={0}
|
||||
@@ -93,7 +97,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">필드 라벨</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.fieldLabelLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={selectProps.label ?? ""}
|
||||
@@ -106,7 +110,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">전송 키</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.submitKeyLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={selectProps.formFieldName ?? ""}
|
||||
@@ -120,7 +124,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-500 dark:text-slate-400">옵션</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.optionsLabel}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
@@ -137,7 +141,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
옵션 추가
|
||||
{m.addOptionButtonLabel}
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
@@ -146,7 +150,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
|
||||
<input
|
||||
className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder="라벨"
|
||||
placeholder={m.optionLabelPlaceholder}
|
||||
value={opt.label ?? ""}
|
||||
onChange={(e) => {
|
||||
const next = [...(((selectProps as any).options ?? []) as any[])];
|
||||
@@ -161,7 +165,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
/>
|
||||
<input
|
||||
className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
placeholder="값(value)"
|
||||
placeholder={m.optionValuePlaceholder}
|
||||
value={opt.value ?? ""}
|
||||
onChange={(e) => {
|
||||
const next = [...(((selectProps as any).options ?? []) as any[])];
|
||||
@@ -193,13 +197,13 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
</div>
|
||||
|
||||
<label className="inline-flex items-center gap-2">
|
||||
<span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
|
||||
<span className="text-slate-500">{m.requiredNoticeText}</span>
|
||||
</label>
|
||||
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">필드 스타일</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
<NumericPropertyControl
|
||||
label="셀렉트 텍스트 크기 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.textSizeLabel}
|
||||
unitLabel={m.textSizeUnitLabel}
|
||||
value={(() => {
|
||||
const raw = selectProps.fontSizeCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -216,16 +220,16 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
{ id: "lg", label: "L", value: 18 },
|
||||
{ id: "xl", label: "XL", value: 20 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
fontSizeCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
{/* 줄간격 px 입력을 받아 preview 렌더러의 em 변환 근거로 사용한다 */}
|
||||
<NumericPropertyControl
|
||||
label="셀렉트 줄간격 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.lineHeightLabel}
|
||||
unitLabel={m.lineHeightUnitLabel}
|
||||
value={(() => {
|
||||
const raw = selectProps.lineHeightCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -240,16 +244,16 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
{ id: "normal", label: "보통", value: 24 },
|
||||
{ id: "loose", label: "루즈", value: 32 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
lineHeightCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
{/* 자간 px 입력을 제공하여 TDD 시나리오와 동기화한다 */}
|
||||
<NumericPropertyControl
|
||||
label="셀렉트 자간 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
value={(() => {
|
||||
const raw = selectProps.letterSpacingCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -264,14 +268,14 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
{ id: "normal", label: "보통", value: 0 },
|
||||
{ id: "wide", label: "넓게", value: 2 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
letterSpacingCustom: `${v}px`,
|
||||
} as any);
|
||||
}}
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
<span>필드 너비</span>
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={selectProps.widthMode ?? "full"}
|
||||
@@ -282,14 +286,14 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
}
|
||||
>
|
||||
<option value="auto">자동</option>
|
||||
<option value="full">전체 폭</option>
|
||||
<option value="fixed">고정 값</option>
|
||||
<option value="full">전체</option>
|
||||
<option value="fixed">고정</option>
|
||||
</select>
|
||||
</label>
|
||||
{(selectProps.widthMode ?? "full") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="필드 고정 너비"
|
||||
unitLabel="(px)"
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={selectProps.widthPx ?? 240}
|
||||
min={80}
|
||||
max={800}
|
||||
@@ -299,16 +303,16 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
{ id: "md", label: "보통", value: 280 },
|
||||
{ id: "lg", label: "넓게", value: 360 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
onChangeValue={(v) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
widthPx: v,
|
||||
} as any);
|
||||
}}
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<NumericPropertyControl
|
||||
label="셀렉트 가로 패딩 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.paddingXLabel}
|
||||
unitLabel={m.paddingXUnitLabel}
|
||||
value={typeof selectProps.paddingX === "number" ? selectProps.paddingX : 12}
|
||||
min={0}
|
||||
max={60}
|
||||
@@ -327,8 +331,8 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label="셀렉트 세로 패딩 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
value={typeof selectProps.paddingY === "number" ? selectProps.paddingY : 10}
|
||||
min={0}
|
||||
max={40}
|
||||
@@ -347,9 +351,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label="필드 텍스트 색상"
|
||||
ariaLabelColorInput="셀렉트 텍스트 색상 피커"
|
||||
ariaLabelHexInput="셀렉트 텍스트 색상 HEX"
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
selectProps.textColorCustom && selectProps.textColorCustom.trim() !== ""
|
||||
? selectProps.textColorCustom
|
||||
@@ -368,9 +372,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label="필드 채움 색상"
|
||||
ariaLabelColorInput="셀렉트 채움 색상 피커"
|
||||
ariaLabelHexInput="셀렉트 채움 색상 HEX"
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
selectProps.fillColorCustom && selectProps.fillColorCustom.trim() !== ""
|
||||
? selectProps.fillColorCustom
|
||||
@@ -389,9 +393,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
}}
|
||||
/>
|
||||
<ColorPickerField
|
||||
label="필드 테두리 색상"
|
||||
ariaLabelColorInput="셀렉트 테두리 색상 피커"
|
||||
ariaLabelHexInput="셀렉트 테두리 색상 HEX"
|
||||
label={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
selectProps.strokeColorCustom && selectProps.strokeColorCustom.trim() !== ""
|
||||
? selectProps.strokeColorCustom
|
||||
@@ -410,7 +414,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
}}
|
||||
/>
|
||||
<NumericPropertyControl
|
||||
label="필드 모서리 둥글기"
|
||||
label={m.borderRadiusLabel}
|
||||
value={(() => {
|
||||
const r = selectProps.borderRadius ?? "md";
|
||||
return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
|
||||
@@ -419,11 +423,11 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
|
||||
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 },
|
||||
{ id: "none", label: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 4 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, value: 8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const next =
|
||||
|
||||
+84
-67
@@ -4,7 +4,19 @@ import type { CSSProperties, ReactNode } from "react";
|
||||
import { Fragment, Suspense, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { FilePlus2, Trash2, Eye, Pencil, ListChecks, Undo2, Redo2 } from "lucide-react";
|
||||
import {
|
||||
FilePlus2,
|
||||
Trash2,
|
||||
Eye,
|
||||
Pencil,
|
||||
ListChecks,
|
||||
Undo2,
|
||||
Redo2,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
IndentIncrease,
|
||||
IndentDecrease,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
DndContext,
|
||||
PointerSensor,
|
||||
@@ -25,6 +37,8 @@ import {
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { useEditorStore } from "@/features/editor/state/editorStore";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorMessages } from "@/features/i18n/messages/editor";
|
||||
import type {
|
||||
Block,
|
||||
TextBlockProps,
|
||||
@@ -81,6 +95,8 @@ export default function EditorPage() {
|
||||
function EditorPageInner() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorMessages(locale);
|
||||
const blocks = useEditorStore((state) => state.blocks);
|
||||
const selectedBlockId = useEditorStore((state) => state.selectedBlockId);
|
||||
const selectedListItemId = useEditorStore((state) => (state as any).selectedListItemId as string | null | undefined);
|
||||
@@ -454,7 +470,7 @@ function EditorPageInner() {
|
||||
const handleSaveProject = async () => {
|
||||
const slug = (projectConfig.slug ?? "").trim();
|
||||
if (!slug) {
|
||||
setProjectMessage("프로젝트 주소를 입력해 주세요.");
|
||||
setProjectMessage(m.projectMessageSlugRequired);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -510,26 +526,26 @@ function EditorPageInner() {
|
||||
}
|
||||
}
|
||||
|
||||
setProjectMessage("프로젝트 저장에 실패했습니다.");
|
||||
setProjectMessage(m.projectMessageSaveFailed);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setProjectMessage(`프로젝트가 저장되었습니다: ${data.slug}`);
|
||||
setProjectMessage(`${m.projectMessageSaveSuccessPrefix}${data.slug}`);
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
window.location.href = "/projects";
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setProjectMessage("프로젝트 저장 중 오류가 발생했습니다.");
|
||||
setProjectMessage(m.projectMessageSaveError);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoadProject = async () => {
|
||||
const slug = (projectConfig.slug ?? "").trim();
|
||||
if (!slug) {
|
||||
setProjectMessage("불러올 주소를 입력해 주세요.");
|
||||
setProjectMessage(m.projectMessageLoadSlugRequired);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -552,7 +568,7 @@ function EditorPageInner() {
|
||||
// 다른 프로젝트(slug)를 불러왔으므로 이전 history/future 를 초기화한다.
|
||||
resetHistory();
|
||||
|
||||
setProjectMessage(`로컬에서 프로젝트를 불러왔습니다: ${slug}`);
|
||||
setProjectMessage(`${m.projectMessageLoadLocalSuccessPrefix}${slug}`);
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
@@ -564,7 +580,7 @@ function EditorPageInner() {
|
||||
// 2) 로컬에 없으면 서버에서 조회
|
||||
const response = await fetch(`/api/projects/${slug}`);
|
||||
if (!response.ok) {
|
||||
setProjectMessage("프로젝트를 불러오지 못했습니다.");
|
||||
setProjectMessage(m.projectMessageLoadFailed);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -580,28 +596,26 @@ function EditorPageInner() {
|
||||
// 서버에서 다른 프로젝트를 불러온 뒤에는 이전 history/future 를 모두 비운다.
|
||||
resetHistory();
|
||||
|
||||
setProjectMessage(`프로젝트를 불러왔습니다: ${slug}`);
|
||||
setProjectMessage(`${m.projectMessageLoadServerSuccessPrefix}${slug}`);
|
||||
} else {
|
||||
setProjectMessage("프로젝트 데이터 형식이 올바르지 않습니다.");
|
||||
setProjectMessage(m.projectMessageInvalidFormat);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setProjectMessage("프로젝트 불러오기 중 오류가 발생했습니다.");
|
||||
setProjectMessage(m.projectMessageLoadError);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteProject = async () => {
|
||||
const slug = (projectConfig.slug ?? "").trim();
|
||||
if (!slug) {
|
||||
setProjectMessage("삭제할 프로젝트 주소가 없습니다.");
|
||||
setProjectMessage(m.projectMessageDeleteSlugMissing);
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
const confirmed = window.confirm(
|
||||
"현재 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
|
||||
);
|
||||
const confirmed = window.confirm(m.confirmDeleteProject);
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
@@ -610,7 +624,7 @@ function EditorPageInner() {
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
setProjectMessage("프로젝트 삭제에 실패했습니다.");
|
||||
setProjectMessage(m.projectMessageDeleteFailed);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -618,12 +632,12 @@ function EditorPageInner() {
|
||||
window.localStorage.removeItem(`pb:project:${slug}`);
|
||||
window.localStorage.removeItem(`pb:autosave:${slug}`);
|
||||
|
||||
setProjectMessage("프로젝트가 삭제되었습니다.");
|
||||
setProjectMessage(m.projectMessageDeleteSuccess);
|
||||
|
||||
window.location.href = "/projects";
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setProjectMessage("프로젝트 삭제 중 오류가 발생했습니다.");
|
||||
setProjectMessage(m.projectMessageDeleteError);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1063,7 +1077,11 @@ function EditorPageInner() {
|
||||
selectListItem={selectListItem}
|
||||
allBlocks={blocks}
|
||||
renderBlocks={renderBlocks}
|
||||
updateBlock={updateBlock}
|
||||
updateBlock={(id, partial) => updateBlock(id, partial as any)}
|
||||
listItemToolbarMoveUpLabel={m.listItemToolbarMoveUpLabel}
|
||||
listItemToolbarMoveDownLabel={m.listItemToolbarMoveDownLabel}
|
||||
listItemToolbarIndentLabel={m.listItemToolbarIndentLabel}
|
||||
listItemToolbarOutdentLabel={m.listItemToolbarOutdentLabel}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
@@ -1077,8 +1095,8 @@ function EditorPageInner() {
|
||||
<Pencil className="w-4 h-4 text-sky-400" aria-hidden="true" />
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="text-xl font-semibold">Page Editor</h1>
|
||||
<p className="text-xs text-slate-400">빌더 MVP용 에디터 페이지 골격</p>
|
||||
<h1 className="text-xl font-semibold">{m.headerTitle}</h1>
|
||||
<p className="text-xs text-slate-400">{m.headerDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
@@ -1087,14 +1105,14 @@ function EditorPageInner() {
|
||||
className="inline-flex items-center gap-1 rounded border border-slate-700 bg-slate-900 px-3 py-1 text-slate-100 hover:bg-slate-800"
|
||||
>
|
||||
<ListChecks className="w-3 h-3" aria-hidden="true" />
|
||||
<span>프로젝트 목록</span>
|
||||
<span>{m.navProjects}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href={previewHref}
|
||||
className="inline-flex items-center gap-1 rounded border border-slate-700 bg-slate-900 px-3 py-1 text-slate-100 hover:bg-slate-800"
|
||||
>
|
||||
<Eye className="w-3 h-3" aria-hidden="true" />
|
||||
<span>프리뷰 열기</span>
|
||||
<span>{m.navPreview}</span>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
@@ -1103,7 +1121,7 @@ function EditorPageInner() {
|
||||
disabled={!canUndo}
|
||||
>
|
||||
<Undo2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>실행 취소</span>
|
||||
<span>{m.undoLabel}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -1112,7 +1130,7 @@ function EditorPageInner() {
|
||||
disabled={!canRedo}
|
||||
>
|
||||
<Redo2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>다시 실행</span>
|
||||
<span>{m.redoLabel}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
@@ -1121,7 +1139,7 @@ function EditorPageInner() {
|
||||
onClick={() => setMenuOpen((prev) => !prev)}
|
||||
>
|
||||
<FilePlus2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>메뉴</span>
|
||||
<span>{m.menuLabel}</span>
|
||||
<span className="text-[9px]">▼</span>
|
||||
</button>
|
||||
{menuOpen && (
|
||||
@@ -1136,7 +1154,7 @@ function EditorPageInner() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<FilePlus2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>프로젝트 저장/불러오기</span>
|
||||
<span>{m.menuProjectSaveLoad}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -1149,7 +1167,7 @@ function EditorPageInner() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<FilePlus2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>JSON 내보내기/불러오기</span>
|
||||
<span>{m.menuJsonImportExport}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -1162,22 +1180,7 @@ function EditorPageInner() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<FilePlus2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>페이지 파일로 내보내기 (ZIP)</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full px-3 py-2 text-left hover:bg-red-900/60 text-red-100 border-t border-slate-800"
|
||||
onClick={() => {
|
||||
setMenuOpen(false);
|
||||
if (window.confirm("캔버스를 모두 초기화할까요? 이 작업은 실행 취소로만 되돌릴 수 있습니다.")) {
|
||||
handleClearCanvas();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Trash2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>캔버스 초기화</span>
|
||||
<span>{m.menuExportZip}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -1190,7 +1193,7 @@ function EditorPageInner() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 text-red-500">
|
||||
<Trash2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>프로젝트 삭제</span>
|
||||
<span>{m.menuDeleteProject}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -1235,7 +1238,7 @@ function EditorPageInner() {
|
||||
<div className="fixed inset-0 z-30 flex items-center justify-center bg-black/60">
|
||||
<div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-4 text-xs text-slate-900 shadow-xl dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-medium">프로젝트 저장 / 불러오기</h3>
|
||||
<h3 className="text-sm font-medium">{m.modalProjectTitle}</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="text-slate-400 hover:text-slate-700 text-sm dark:hover:text-slate-100"
|
||||
@@ -1246,7 +1249,7 @@ function EditorPageInner() {
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-600 dark:text-slate-400">프로젝트 제목</span>
|
||||
<span className="text-slate-600 dark:text-slate-400">{m.modalProjectTitleLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={projectConfig.title ?? ""}
|
||||
@@ -1254,7 +1257,7 @@ function EditorPageInner() {
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-600 dark:text-slate-400">프로젝트 주소 (예: my-landing)</span>
|
||||
<span className="text-slate-600 dark:text-slate-400">{m.modalProjectSlugLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={projectConfig.slug ?? ""}
|
||||
@@ -1267,14 +1270,14 @@ function EditorPageInner() {
|
||||
className="flex-1 rounded border border-sky-500 bg-sky-50 px-2 py-1 text-sky-700 hover:bg-sky-100 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-100 dark:hover:bg-sky-900"
|
||||
onClick={handleSaveProject}
|
||||
>
|
||||
저장 (로컬 + 서버)
|
||||
{m.modalSaveButton}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleLoadProject}
|
||||
>
|
||||
불러오기
|
||||
{m.modalLoadButton}
|
||||
</button>
|
||||
</div>
|
||||
{projectMessage && (
|
||||
@@ -1292,10 +1295,8 @@ function EditorPageInner() {
|
||||
<div className="w-full max-w-2xl rounded-lg border border-slate-200 bg-white p-4 text-xs text-slate-900 shadow-xl dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-medium">
|
||||
JSON Export / Import
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
* 에디터 내용을 가져오거나 내보낼 수 있습니다.
|
||||
</span>
|
||||
{m.jsonModalTitle}
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">{m.jsonModalSubtitle}</span>
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
@@ -1312,19 +1313,19 @@ function EditorPageInner() {
|
||||
className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleExportJson}
|
||||
>
|
||||
JSON 내보내기
|
||||
{m.jsonExportButton}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-red-300 bg-white px-2 py-1 text-red-700 hover:bg-red-50 dark:border-red-700 dark:bg-red-950 dark:text-red-100 dark:hover:bg-red-900"
|
||||
onClick={handleClearCanvas}
|
||||
>
|
||||
캔버스 초기화
|
||||
{m.jsonClearCanvasButton}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-600 dark:text-slate-400">에디터 상태 JSON</span>
|
||||
<span className="text-slate-600 dark:text-slate-400">{m.jsonEditorStateLabel}</span>
|
||||
<textarea
|
||||
className="w-full h-48 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] font-mono text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={exportJson}
|
||||
@@ -1332,7 +1333,7 @@ function EditorPageInner() {
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-600 dark:text-slate-400">JSON에서 불러오기</span>
|
||||
<span className="text-slate-600 dark:text-slate-400">{m.jsonImportLabel}</span>
|
||||
<textarea
|
||||
className="w-full h-48 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] font-mono text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
value={importJson}
|
||||
@@ -1343,7 +1344,7 @@ function EditorPageInner() {
|
||||
className="mt-1 w-full rounded border border-slate-300 bg-white px-2 py-1 text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleApplyImportJson}
|
||||
>
|
||||
JSON 적용하기
|
||||
{m.jsonApplyButton}
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
@@ -1418,6 +1419,10 @@ interface SortableEditorBlockProps {
|
||||
allBlocks: Block[];
|
||||
renderBlocks: (targetBlocks: Block[]) => ReactNode;
|
||||
updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps & FormBlockProps>) => void;
|
||||
listItemToolbarMoveUpLabel: string;
|
||||
listItemToolbarMoveDownLabel: string;
|
||||
listItemToolbarIndentLabel: string;
|
||||
listItemToolbarOutdentLabel: string;
|
||||
}
|
||||
|
||||
function SortableEditorBlock({
|
||||
@@ -1438,6 +1443,10 @@ function SortableEditorBlock({
|
||||
allBlocks,
|
||||
renderBlocks,
|
||||
updateBlock,
|
||||
listItemToolbarMoveUpLabel,
|
||||
listItemToolbarMoveDownLabel,
|
||||
listItemToolbarIndentLabel,
|
||||
listItemToolbarOutdentLabel,
|
||||
}: SortableEditorBlockProps) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
|
||||
id: block.id,
|
||||
@@ -2172,7 +2181,9 @@ function SortableEditorBlock({
|
||||
<span className="ml-2 inline-flex items-center gap-1 text-[10px] text-slate-900 dark:text-slate-300 align-middle">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800 inline-flex items-center justify-center"
|
||||
aria-label={listItemToolbarMoveUpLabel}
|
||||
title={listItemToolbarMoveUpLabel}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
selectBlock(block.id);
|
||||
@@ -2180,11 +2191,13 @@ function SortableEditorBlock({
|
||||
(useEditorStore.getState() as any).moveSelectedListItemUp(block.id);
|
||||
}}
|
||||
>
|
||||
위
|
||||
<ArrowUp className="w-3 h-3" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800 inline-flex items-center justify-center"
|
||||
aria-label={listItemToolbarMoveDownLabel}
|
||||
title={listItemToolbarMoveDownLabel}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
selectBlock(block.id);
|
||||
@@ -2192,11 +2205,13 @@ function SortableEditorBlock({
|
||||
(useEditorStore.getState() as any).moveSelectedListItemDown(block.id);
|
||||
}}
|
||||
>
|
||||
아래
|
||||
<ArrowDown className="w-3 h-3" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800 inline-flex items-center justify-center"
|
||||
aria-label={listItemToolbarIndentLabel}
|
||||
title={listItemToolbarIndentLabel}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
selectBlock(block.id);
|
||||
@@ -2204,11 +2219,13 @@ function SortableEditorBlock({
|
||||
(useEditorStore.getState() as any).indentSelectedListItem(block.id);
|
||||
}}
|
||||
>
|
||||
들여쓰기
|
||||
<IndentIncrease className="w-3 h-3" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
|
||||
className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800 inline-flex items-center justify-center"
|
||||
aria-label={listItemToolbarOutdentLabel}
|
||||
title={listItemToolbarOutdentLabel}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
selectBlock(block.id);
|
||||
@@ -2216,7 +2233,7 @@ function SortableEditorBlock({
|
||||
(useEditorStore.getState() as any).outdentSelectedListItem(block.id);
|
||||
}}
|
||||
>
|
||||
내어쓰기
|
||||
<IndentDecrease className="w-3 h-3" aria-hidden="true" />
|
||||
</button>
|
||||
</span>
|
||||
{node.children && node.children.length > 0 && renderListNodes(node.children, level + 1)}
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
import { useCallback, useState } from "react";
|
||||
import { useEditorStore } from "@/features/editor/state/editorStore";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorSidebarMessages } from "@/features/i18n/messages/editorSidebar";
|
||||
import {
|
||||
FilePlus2,
|
||||
ListChecks,
|
||||
@@ -21,6 +23,8 @@ import {
|
||||
|
||||
// 좌측 블록/폼/템플릿 추가 사이드바를 분리한 컴포넌트
|
||||
export function BlocksSidebar() {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorSidebarMessages(locale);
|
||||
const addTextBlock = useEditorStore((state) => state.addTextBlock);
|
||||
const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
|
||||
const addImageBlock = useEditorStore((state) => state.addImageBlock);
|
||||
@@ -103,7 +107,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Pencil className="w-4 h-4 text-sky-400" aria-hidden="true" />
|
||||
<span>블록</span>
|
||||
<span>{m.blocksTitle}</span>
|
||||
</span>
|
||||
</button>
|
||||
</h2>
|
||||
@@ -116,7 +120,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Type className="w-3 h-3" aria-hidden="true" />
|
||||
<span>텍스트</span>
|
||||
<span>{m.blocksText}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -126,7 +130,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<MousePointerClick className="w-3 h-3" aria-hidden="true" />
|
||||
<span>버튼</span>
|
||||
<span>{m.blocksButton}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -136,7 +140,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<ImageIcon className="w-3 h-3" aria-hidden="true" />
|
||||
<span>이미지</span>
|
||||
<span>{m.blocksImage}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -146,7 +150,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Video className="w-3 h-3" aria-hidden="true" />
|
||||
<span>비디오</span>
|
||||
<span>{m.blocksVideo}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -156,7 +160,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Minus className="w-3 h-3" aria-hidden="true" />
|
||||
<span>구분선</span>
|
||||
<span>{m.blocksDivider}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -166,7 +170,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<List className="w-3 h-3" aria-hidden="true" />
|
||||
<span>리스트</span>
|
||||
<span>{m.blocksList}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -176,7 +180,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<LayoutTemplate className="w-3 h-3" aria-hidden="true" />
|
||||
<span>섹션</span>
|
||||
<span>{m.blocksSection}</span>
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
@@ -192,7 +196,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<ListChecks className="w-3 h-3" aria-hidden="true" />
|
||||
<span>폼 요소</span>
|
||||
<span>{m.formsTitle}</span>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
@@ -205,7 +209,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<FilePlus2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>폼 컨트롤러</span>
|
||||
<span>{m.formsController}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -215,7 +219,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<FileText className="w-3 h-3" aria-hidden="true" />
|
||||
<span>입력(Input)</span>
|
||||
<span>{m.formsInput}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -225,7 +229,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<ListFilter className="w-3 h-3" aria-hidden="true" />
|
||||
<span>셀렉트(Select)</span>
|
||||
<span>{m.formsSelect}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -235,7 +239,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<CircleDot className="w-3 h-3" aria-hidden="true" />
|
||||
<span>단일 선택(Radio)</span>
|
||||
<span>{m.formsRadio}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -245,7 +249,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<SquareCheck className="w-3 h-3" aria-hidden="true" />
|
||||
<span>다중 선택(Checkbox)</span>
|
||||
<span>{m.formsCheckbox}</span>
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
@@ -262,7 +266,7 @@ export function BlocksSidebar() {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<FilePlus2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>템플릿</span>
|
||||
<span>{m.templatesTitle}</span>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
@@ -270,7 +274,7 @@ export function BlocksSidebar() {
|
||||
{isTemplatesOpen && (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">히어로 · CTA</p>
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupHeroCta}</p>
|
||||
<div className="space-y-2">
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
@@ -279,7 +283,7 @@ export function BlocksSidebar() {
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddHeroTemplate}
|
||||
>
|
||||
Hero 템플릿
|
||||
{m.templateHeroLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-hero"
|
||||
@@ -292,9 +296,7 @@ export function BlocksSidebar() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">
|
||||
페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">{m.templateHeroDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
@@ -304,7 +306,7 @@ export function BlocksSidebar() {
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddCtaTemplate}
|
||||
>
|
||||
CTA 템플릿
|
||||
{m.templateCtaLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-cta"
|
||||
@@ -319,13 +321,13 @@ export function BlocksSidebar() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">콜투액션(CTA) 섹션</p>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">{m.templateCtaDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">콘텐츠 섹션</p>
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupContent}</p>
|
||||
<div className="space-y-2">
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
@@ -334,7 +336,7 @@ export function BlocksSidebar() {
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFeaturesTemplate}
|
||||
>
|
||||
기능 템플릿
|
||||
{m.templateFeaturesLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-features"
|
||||
@@ -354,7 +356,7 @@ export function BlocksSidebar() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">3컬럼 기능 소개 섹션</p>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">{m.templateFeaturesDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
@@ -364,7 +366,7 @@ export function BlocksSidebar() {
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFaqTemplate}
|
||||
>
|
||||
FAQ 템플릿
|
||||
{m.templateFaqLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-faq"
|
||||
@@ -380,7 +382,7 @@ export function BlocksSidebar() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">자주 묻는 질문(FAQ) 섹션</p>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">{m.templateFaqDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
@@ -390,7 +392,7 @@ export function BlocksSidebar() {
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddPricingTemplate}
|
||||
>
|
||||
상품 템플릿
|
||||
{m.templatePricingLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-pricing"
|
||||
@@ -411,7 +413,7 @@ export function BlocksSidebar() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">요금제/플랜 소개 섹션</p>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">{m.templatePricingDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
@@ -421,7 +423,7 @@ export function BlocksSidebar() {
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddBlogTemplate}
|
||||
>
|
||||
블로그 템플릿
|
||||
{m.templateBlogLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-blog"
|
||||
@@ -444,13 +446,13 @@ export function BlocksSidebar() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">블로그 포스트 목록 섹션</p>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">{m.templateBlogDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">신뢰/소개</p>
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupTrust}</p>
|
||||
<div className="space-y-2">
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
@@ -459,7 +461,7 @@ export function BlocksSidebar() {
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddTestimonialsTemplate}
|
||||
>
|
||||
후기 템플릿
|
||||
{m.templateTestimonialsLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-testimonials"
|
||||
@@ -479,7 +481,7 @@ export function BlocksSidebar() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">고객 후기(Testimonials) 섹션</p>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">{m.templateTestimonialsDescription}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
@@ -489,7 +491,7 @@ export function BlocksSidebar() {
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddTeamTemplate}
|
||||
>
|
||||
Team 템플릿
|
||||
{m.templateTeamLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-team"
|
||||
@@ -512,13 +514,13 @@ export function BlocksSidebar() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">팀 소개 섹션</p>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">{m.templateTeamDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">푸터/기타</p>
|
||||
<p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupFooter}</p>
|
||||
<div className="space-y-2">
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
@@ -527,7 +529,7 @@ export function BlocksSidebar() {
|
||||
className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={handleAddFooterTemplate}
|
||||
>
|
||||
Footer 템플릿
|
||||
{m.templateFooterLabel}
|
||||
</button>
|
||||
<div
|
||||
data-testid="template-preview-footer"
|
||||
@@ -541,7 +543,7 @@ export function BlocksSidebar() {
|
||||
<div className="flex-1 h-[1px] bg-slate-700/40" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">페이지 푸터 섹션</p>
|
||||
<p className="text-[10px] text-slate-400 leading-snug">{m.templateFooterDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorButtonPanelMessages } from "@/features/i18n/messages/editorButtonPanel";
|
||||
|
||||
export type ButtonPropertiesPanelProps = {
|
||||
buttonProps: ButtonBlockProps;
|
||||
@@ -11,6 +13,8 @@ export type ButtonPropertiesPanelProps = {
|
||||
};
|
||||
|
||||
export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBlock }: ButtonPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorButtonPanelMessages(locale);
|
||||
const imageSource: "none" | "url" | "upload" = (() => {
|
||||
const hasSrc = (buttonProps.imageSrc ?? "").trim() !== "";
|
||||
if (!hasSrc) return "none";
|
||||
@@ -22,10 +26,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>버튼 텍스트</span>
|
||||
<span>{m.buttonTextLabel}</span>
|
||||
<textarea
|
||||
className="w-full min-h-[60px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="버튼 텍스트"
|
||||
aria-label={m.buttonTextAria}
|
||||
value={buttonProps.label}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { label: e.target.value } as any);
|
||||
@@ -34,14 +38,14 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</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-800 dark:text-slate-200">버튼 이미지</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.imageSectionTitle}</h4>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>버튼 이미지 소스</span>
|
||||
<span>{m.imageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="버튼 이미지 소스"
|
||||
aria-label={m.imageSourceAria}
|
||||
value={imageSource}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value as "none" | "url" | "upload";
|
||||
@@ -62,9 +66,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="none">사용 안 함</option>
|
||||
<option value="url">URL</option>
|
||||
<option value="upload">파일 업로드</option>
|
||||
<option value="none">{m.imageSourceOptionNone}</option>
|
||||
<option value="url">{m.imageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.imageSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
@@ -72,10 +76,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
{imageSource === "url" && (
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>버튼 이미지 URL</span>
|
||||
<span>{m.imageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="버튼 이미지 URL"
|
||||
aria-label={m.imageUrlAria}
|
||||
value={buttonProps.imageSrc ?? ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
@@ -93,12 +97,12 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
{imageSource === "upload" && (
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>버튼 이미지 파일 업로드</span>
|
||||
<span>{m.imageUploadLabel}</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
|
||||
aria-label="버튼 이미지 파일 업로드"
|
||||
aria-label={m.imageUploadAria}
|
||||
onChange={async (event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
@@ -113,7 +117,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("버튼 이미지 업로드 실패", await response.text());
|
||||
console.error("Button image upload failed", await response.text());
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -126,7 +130,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
imageAssetId: data.id,
|
||||
} as any);
|
||||
} catch (error) {
|
||||
console.error("버튼 이미지 업로드 중 오류", error);
|
||||
console.error("Error while uploading button image", error);
|
||||
} finally {
|
||||
event.target.value = "";
|
||||
}
|
||||
@@ -140,10 +144,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>버튼 이미지 대체 텍스트</span>
|
||||
<span>{m.imageAltLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="버튼 이미지 대체 텍스트"
|
||||
aria-label={m.imageAltAria}
|
||||
value={buttonProps.imageAlt ?? ""}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { imageAlt: e.target.value } as any);
|
||||
@@ -154,10 +158,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>버튼 이미지 위치</span>
|
||||
<span>{m.imagePlacementLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="버튼 이미지 위치"
|
||||
aria-label={m.imagePlacementAria}
|
||||
value={buttonProps.imagePlacement ?? "left"}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -165,10 +169,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
<option value="left">텍스트 왼쪽</option>
|
||||
<option value="right">텍스트 오른쪽</option>
|
||||
<option value="top">텍스트 위쪽</option>
|
||||
<option value="bottom">텍스트 아래쪽</option>
|
||||
<option value="left">{m.imagePlacementOptionLeft}</option>
|
||||
<option value="right">{m.imagePlacementOptionRight}</option>
|
||||
<option value="top">{m.imagePlacementOptionTop}</option>
|
||||
<option value="bottom">{m.imagePlacementOptionBottom}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
@@ -177,7 +181,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="가로 패딩 (px)"
|
||||
label={m.paddingXLabel}
|
||||
unitLabel="(px)"
|
||||
value={buttonProps.paddingX ?? 16}
|
||||
min={0}
|
||||
@@ -199,7 +203,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="세로 패딩 (px)"
|
||||
label={m.paddingYLabel}
|
||||
unitLabel="(px)"
|
||||
value={buttonProps.paddingY ?? 10}
|
||||
min={0}
|
||||
@@ -221,10 +225,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>버튼 링크</span>
|
||||
<span>{m.linkLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="버튼 링크"
|
||||
aria-label={m.linkAria}
|
||||
value={buttonProps.href}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { href: e.target.value } as any);
|
||||
@@ -234,19 +238,19 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>정렬</span>
|
||||
<span>{m.alignLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="버튼 정렬"
|
||||
aria-label={m.alignAria}
|
||||
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>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
@@ -255,9 +259,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="텍스트 색상"
|
||||
ariaLabelColorInput="버튼 텍스트 색상 피커"
|
||||
ariaLabelHexInput="버튼 텍스트 색상 HEX"
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
buttonProps.textColorCustom && buttonProps.textColorCustom.trim() !== ""
|
||||
? buttonProps.textColorCustom
|
||||
@@ -278,27 +282,27 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>스타일</span>
|
||||
<span>{m.styleLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="버튼 스타일"
|
||||
aria-label={m.styleAria}
|
||||
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>
|
||||
<option value="solid">{m.styleOptionSolid}</option>
|
||||
<option value="outline">{m.styleOptionOutline}</option>
|
||||
<option value="ghost">{m.styleOptionGhost}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="채움 색상"
|
||||
ariaLabelColorInput="버튼 채움 색상 피커"
|
||||
ariaLabelHexInput="버튼 채움 색상 HEX"
|
||||
label={m.fillColorLabel}
|
||||
ariaLabelColorInput={m.fillColorPickerAria}
|
||||
ariaLabelHexInput={m.fillColorHexAria}
|
||||
value={
|
||||
buttonProps.fillColorCustom && buttonProps.fillColorCustom.trim() !== ""
|
||||
? buttonProps.fillColorCustom
|
||||
@@ -319,9 +323,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="외곽선 색상"
|
||||
ariaLabelColorInput="버튼 외곽선 색상 피커"
|
||||
ariaLabelHexInput="버튼 외곽선 색상 HEX"
|
||||
label={m.strokeColorLabel}
|
||||
ariaLabelColorInput={m.strokeColorPickerAria}
|
||||
ariaLabelHexInput={m.strokeColorHexAria}
|
||||
value={
|
||||
buttonProps.strokeColorCustom && buttonProps.strokeColorCustom.trim() !== ""
|
||||
? buttonProps.strokeColorCustom
|
||||
@@ -342,7 +346,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="모서리 둥글기"
|
||||
label={m.borderRadiusLabel}
|
||||
value={(() => {
|
||||
const r = buttonProps.borderRadius ?? "md";
|
||||
return r === "none" ? 0 : r === "sm" ? 1 : r === "lg" ? 3 : r === "full" ? 4 : 2;
|
||||
@@ -351,11 +355,11 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
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 },
|
||||
{ id: "none", label: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 1 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 2 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 3 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, value: 4 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const next =
|
||||
@@ -366,10 +370,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>버튼 너비 모드</span>
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="버튼 너비 모드"
|
||||
aria-label={m.widthModeAria}
|
||||
value={buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -377,23 +381,23 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
<option value="auto">자동</option>
|
||||
<option value="full">전체 폭</option>
|
||||
<option value="fixed">고정 값</option>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="full">{m.widthModeOptionFull}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
{(buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")) === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="버튼 고정 너비"
|
||||
unitLabel="(px)"
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
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 },
|
||||
{ id: "sm", label: m.fixedWidthPresetSmall, value: 180 },
|
||||
{ id: "md", label: m.fixedWidthPresetMedium, value: 240 },
|
||||
{ id: "lg", label: m.fixedWidthPresetLarge, value: 320 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -405,8 +409,8 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="버튼 크기"
|
||||
unitLabel="(px)"
|
||||
label={m.fontSizeLabel}
|
||||
unitLabel={m.fontSizeUnitLabel}
|
||||
value={(() => {
|
||||
const raw = buttonProps.fontSizeCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -437,7 +441,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="줄 간격"
|
||||
label={m.lineHeightLabel}
|
||||
value={(() => {
|
||||
const raw = buttonProps.lineHeightCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -448,9 +452,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
max={3}
|
||||
step={0.05}
|
||||
presets={[
|
||||
{ id: "tight", label: "좁게", value: 1.1 },
|
||||
{ id: "normal", label: "보통", value: 1.4 },
|
||||
{ id: "relaxed", label: "넓게", value: 1.8 },
|
||||
{ id: "tight", label: m.lineHeightPresetTight, value: 1.1 },
|
||||
{ id: "normal", label: m.lineHeightPresetNormal, value: 1.4 },
|
||||
{ id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -461,8 +465,8 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="글자 간격"
|
||||
unitLabel="(px)"
|
||||
label={m.letterSpacingLabel}
|
||||
unitLabel={m.letterSpacingUnitLabel}
|
||||
value={(() => {
|
||||
const raw = buttonProps.letterSpacingCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -476,11 +480,11 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
|
||||
max={32}
|
||||
step={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 },
|
||||
{ id: "tighter", label: m.letterSpacingPresetTighter, value: -1.5 },
|
||||
{ id: "tight", label: m.letterSpacingPresetTight, value: -0.5 },
|
||||
{ id: "normal", label: m.letterSpacingPresetNormal, value: 0 },
|
||||
{ id: "wide", label: m.letterSpacingPresetWide, value: 1 },
|
||||
{ id: "wider", label: m.letterSpacingPresetWider, value: 2 },
|
||||
]}
|
||||
onChangeValue={(px) => {
|
||||
const em = px / 16;
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorDividerPropertiesPanelMessages } from "@/features/i18n/messages/editorDividerPropertiesPanel";
|
||||
|
||||
export type DividerPropertiesPanelProps = {
|
||||
dividerProps: DividerBlockProps;
|
||||
@@ -11,77 +13,80 @@ export type DividerPropertiesPanelProps = {
|
||||
};
|
||||
|
||||
export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBlock }: DividerPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorDividerPropertiesPanelMessages(locale);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>정렬</span>
|
||||
<span>{m.alignLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="구분선 정렬"
|
||||
aria-label={m.alignAria}
|
||||
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>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>두께</span>
|
||||
<span>{m.thicknessLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="구분선 두께"
|
||||
aria-label={m.thicknessAria}
|
||||
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>
|
||||
<option value="thin">{m.thicknessOptionThin}</option>
|
||||
<option value="medium">{m.thicknessOptionMedium}</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-800 dark:text-slate-200">구분선 스타일</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
{/* 길이/너비 모드 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>길이 모드</span>
|
||||
<span>{m.lengthModeLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="구분선 길이 모드"
|
||||
aria-label={m.lengthModeAria}
|
||||
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>
|
||||
<option value="auto">{m.lengthModeOptionAuto}</option>
|
||||
<option value="full">{m.lengthModeOptionFull}</option>
|
||||
<option value="fixed">{m.lengthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(dividerProps.widthMode ?? "full") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="고정 길이 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.fixedLengthLabel}
|
||||
unitLabel={m.fixedLengthUnitLabel}
|
||||
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 },
|
||||
{ id: "sm", label: m.fixedLengthPresetShort, value: 240 },
|
||||
{ id: "md", label: m.fixedLengthPresetNormal, value: 320 },
|
||||
{ id: "lg", label: m.fixedLengthPresetLong, value: 480 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { widthPx: v } as any);
|
||||
@@ -91,9 +96,9 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
|
||||
|
||||
{/* 색상 */}
|
||||
<ColorPickerField
|
||||
label="선 색상"
|
||||
ariaLabelColorInput="구분선 색상 피커"
|
||||
ariaLabelHexInput="구분선 색상 HEX"
|
||||
label={m.colorLabel}
|
||||
ariaLabelColorInput={m.colorPickerAria}
|
||||
ariaLabelHexInput={m.colorHexAria}
|
||||
value={
|
||||
dividerProps.colorHex && dividerProps.colorHex.trim() !== ""
|
||||
? dividerProps.colorHex
|
||||
@@ -110,8 +115,8 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
|
||||
|
||||
{/* 상하 여백 (슬라이더) */}
|
||||
<NumericPropertyControl
|
||||
label="위/아래 여백"
|
||||
unitLabel="(px)"
|
||||
label={m.marginLabel}
|
||||
unitLabel={m.marginUnitLabel}
|
||||
value={(() => {
|
||||
if (typeof dividerProps.marginYPx === "number") {
|
||||
return dividerProps.marginYPx;
|
||||
@@ -123,9 +128,9 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
|
||||
max={50}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "sm", label: "작게", value: 8 },
|
||||
{ id: "md", label: "보통", value: 16 },
|
||||
{ id: "lg", label: "크게", value: 24 },
|
||||
{ id: "sm", label: m.marginPresetSmall, value: 8 },
|
||||
{ id: "md", label: m.marginPresetNormal, value: 16 },
|
||||
{ id: "lg", label: m.marginPresetLarge, value: 24 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { marginYPx: v } as any);
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
import type { ImageBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorImagePanelMessages } from "@/features/i18n/messages/editorImagePanel";
|
||||
|
||||
export type ImagePropertiesPanelProps = {
|
||||
imageProps: ImageBlockProps;
|
||||
@@ -11,6 +13,8 @@ export type ImagePropertiesPanelProps = {
|
||||
};
|
||||
|
||||
export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock }: ImagePropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorImagePanelMessages(locale);
|
||||
const source: "url" | "upload" =
|
||||
imageProps.sourceType === "asset" || (imageProps.src && imageProps.src.startsWith("/api/image/"))
|
||||
? "upload"
|
||||
@@ -20,10 +24,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>이미지 소스</span>
|
||||
<span>{m.imageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="이미지 소스"
|
||||
aria-label={m.imageSourceAria}
|
||||
value={source}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value as "url" | "upload";
|
||||
@@ -39,8 +43,8 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="url">URL</option>
|
||||
<option value="upload">파일 업로드</option>
|
||||
<option value="url">{m.imageSourceOptionUrl}</option>
|
||||
<option value="upload">{m.imageSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
@@ -48,10 +52,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
{source === "url" && (
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>이미지 URL</span>
|
||||
<span>{m.imageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="이미지 URL"
|
||||
aria-label={m.imageUrlAria}
|
||||
value={imageProps.src}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
@@ -69,12 +73,12 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
{source === "upload" && (
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>이미지 파일 업로드</span>
|
||||
<span>{m.imageUploadLabel}</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
|
||||
aria-label="이미지 파일 업로드"
|
||||
aria-label={m.imageUploadAria}
|
||||
onChange={async (event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
@@ -89,7 +93,7 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("이미지 업로드 실패", await response.text());
|
||||
console.error("Image upload failed", await response.text());
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -102,7 +106,7 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
assetId: data.id,
|
||||
} as any);
|
||||
} catch (error) {
|
||||
console.error("이미지 업로드 중 오류", error);
|
||||
console.error("Error while uploading image", error);
|
||||
} finally {
|
||||
event.target.value = "";
|
||||
}
|
||||
@@ -113,10 +117,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>대체 텍스트</span>
|
||||
<span>{m.altLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="대체 텍스트"
|
||||
aria-label={m.altAria}
|
||||
value={imageProps.alt}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { alt: e.target.value } as any);
|
||||
@@ -126,14 +130,14 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
</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-800 dark:text-slate-200">이미지 스타일</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
{/* 카드 배경색 */}
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="카드 배경색"
|
||||
ariaLabelColorInput="이미지 카드 배경색 피커"
|
||||
ariaLabelHexInput="이미지 카드 배경색 HEX"
|
||||
label={m.cardBackgroundLabel}
|
||||
ariaLabelColorInput={m.cardBackgroundPickerAria}
|
||||
ariaLabelHexInput={m.cardBackgroundHexAria}
|
||||
value={imageProps.backgroundColorCustom ?? ""}
|
||||
onChange={(hex) => {
|
||||
const next = hex && hex.trim().length > 0 ? hex : undefined;
|
||||
@@ -145,10 +149,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
|
||||
{/* 정렬 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>정렬</span>
|
||||
<span>{m.alignLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="이미지 정렬"
|
||||
aria-label={m.alignAria}
|
||||
value={imageProps.align ?? "center"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -156,18 +160,18 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="left">왼쪽</option>
|
||||
<option value="center">가운데</option>
|
||||
<option value="right">오른쪽</option>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* 너비 모드 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>너비 모드</span>
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="이미지 너비 모드"
|
||||
aria-label={m.widthModeAria}
|
||||
value={imageProps.widthMode ?? "auto"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -175,23 +179,23 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">내용에 맞춤</option>
|
||||
<option value="fixed">고정 너비 (px)</option>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(imageProps.widthMode ?? "auto") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="고정 너비 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
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 },
|
||||
{ id: "sm", label: m.fixedWidthPresetSmall, value: 240 },
|
||||
{ id: "md", label: m.fixedWidthPresetMedium, value: 320 },
|
||||
{ id: "lg", label: m.fixedWidthPresetLarge, value: 480 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -203,7 +207,7 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
|
||||
{/* 모서리 둥글기 */}
|
||||
<NumericPropertyControl
|
||||
label="모서리 둥글기"
|
||||
label={m.borderRadiusLabel}
|
||||
value={(() => {
|
||||
if (typeof imageProps.borderRadiusPx === "number") {
|
||||
return imageProps.borderRadiusPx;
|
||||
@@ -216,11 +220,11 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
|
||||
max={200}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "none", label: "없음", value: 0 },
|
||||
{ id: "sm", label: "작게", value: 20 },
|
||||
{ id: "md", label: "보통", value: 60 },
|
||||
{ id: "lg", label: "크게", value: 120 },
|
||||
{ id: "full", label: "완전 둥글게", value: 180 },
|
||||
{ id: "none", label: m.borderRadiusPresetNone, value: 0 },
|
||||
{ id: "sm", label: m.borderRadiusPresetSmall, value: 20 },
|
||||
{ id: "md", label: m.borderRadiusPresetMedium, value: 60 },
|
||||
{ id: "lg", label: m.borderRadiusPresetLarge, value: 120 },
|
||||
{ id: "full", label: m.borderRadiusPresetFull, value: 180 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
// 0~50 범위를 토큰으로 매핑한다.
|
||||
|
||||
@@ -10,6 +10,8 @@ import {
|
||||
} from "@/features/editor/state/editorStore";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorListPanelMessages } from "@/features/i18n/messages/editorListPanel";
|
||||
|
||||
export type ListPropertiesPanelProps = {
|
||||
listProps: ListBlockProps;
|
||||
@@ -24,14 +26,16 @@ export function ListPropertiesPanel({
|
||||
selectedListItemId,
|
||||
updateBlock,
|
||||
}: ListPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorListPanelMessages(locale);
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>리스트 아이템 (줄바꿈으로 구분)</span>
|
||||
<span>{m.listItemsLabel}</span>
|
||||
<textarea
|
||||
className="w-full min-h-[80px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="리스트 아이템들"
|
||||
aria-label={m.listItemsAria}
|
||||
value={(() => {
|
||||
const tree = (listProps as any).itemsTree as any[] | undefined;
|
||||
|
||||
@@ -83,30 +87,30 @@ export function ListPropertiesPanel({
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-slate-400">
|
||||
<label className="flex items-center gap-2">
|
||||
<span>정렬</span>
|
||||
<span>{m.alignLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="리스트 정렬"
|
||||
aria-label={m.alignAria}
|
||||
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>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</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-800 dark:text-slate-200">리스트 스타일</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
{/* 글자 크기 */}
|
||||
<NumericPropertyControl
|
||||
label="글자 크기 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.fontSizeLabel}
|
||||
unitLabel={m.fontSizeUnitLabel}
|
||||
value={(() => {
|
||||
const raw = listProps.fontSizeCustom ?? "";
|
||||
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -117,9 +121,9 @@ export function ListPropertiesPanel({
|
||||
max={32}
|
||||
step={1}
|
||||
presets={[
|
||||
{ id: "sm", label: "작게", value: 12 },
|
||||
{ id: "md", label: "보통", value: 14 },
|
||||
{ id: "lg", label: "크게", value: 18 },
|
||||
{ id: "sm", label: m.fontSizePresetSmall, value: 12 },
|
||||
{ id: "md", label: m.fontSizePresetMedium, value: 14 },
|
||||
{ id: "lg", label: m.fontSizePresetLarge, value: 18 },
|
||||
]}
|
||||
onChangeValue={(px) => {
|
||||
updateBlock(selectedBlockId, { fontSizeCustom: `${px}px` } as any);
|
||||
@@ -128,7 +132,7 @@ export function ListPropertiesPanel({
|
||||
|
||||
{/* 줄 간격 */}
|
||||
<NumericPropertyControl
|
||||
label="줄 간격"
|
||||
label={m.lineHeightLabel}
|
||||
value={(() => {
|
||||
const raw = listProps.lineHeightCustom ?? "";
|
||||
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
|
||||
@@ -139,9 +143,9 @@ export function ListPropertiesPanel({
|
||||
max={3}
|
||||
step={0.05}
|
||||
presets={[
|
||||
{ id: "tight", label: "좁게", value: 1.2 },
|
||||
{ id: "normal", label: "보통", value: 1.5 },
|
||||
{ id: "relaxed", label: "넓게", value: 1.8 },
|
||||
{ id: "tight", label: m.lineHeightPresetTight, value: 1.2 },
|
||||
{ id: "normal", label: m.lineHeightPresetNormal, value: 1.5 },
|
||||
{ id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.8 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { lineHeightCustom: v.toString() } as any);
|
||||
@@ -150,9 +154,9 @@ export function ListPropertiesPanel({
|
||||
|
||||
{/* 텍스트 색상 */}
|
||||
<ColorPickerField
|
||||
label="텍스트 색상"
|
||||
ariaLabelColorInput="리스트 텍스트 색상 피커"
|
||||
ariaLabelHexInput="리스트 텍스트 색상 HEX"
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
// textColorCustom 이 비어 있으면 커스텀 색상을 사용하지 않고, "없음" 상태로 취급한다.
|
||||
// 이 경우 HEX 인풋은 빈 문자열을 유지하고, 팔레트 라벨은 "없음"으로 표시된다.
|
||||
value={
|
||||
@@ -170,9 +174,9 @@ export function ListPropertiesPanel({
|
||||
/>
|
||||
|
||||
<ColorPickerField
|
||||
label="블록 배경색"
|
||||
ariaLabelColorInput="리스트 배경색 피커"
|
||||
ariaLabelHexInput="리스트 배경색 HEX"
|
||||
label={m.backgroundColorLabel}
|
||||
ariaLabelColorInput={m.backgroundColorPickerAria}
|
||||
ariaLabelHexInput={m.backgroundColorHexAria}
|
||||
value={listProps.backgroundColorCustom ?? ""}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, { backgroundColorCustom: hex } as any);
|
||||
@@ -182,10 +186,10 @@ export function ListPropertiesPanel({
|
||||
|
||||
{/* 불릿 스타일 (● / ○ / ■ / 숫자형 / 없음) */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>불릿 스타일</span>
|
||||
<span>{m.bulletStyleLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="리스트 불릿 스타일"
|
||||
aria-label={m.bulletStyleAria}
|
||||
value={listProps.bulletStyle ?? "disc"}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<ListBlockProps["bulletStyle"]>;
|
||||
@@ -203,22 +207,22 @@ export function ListPropertiesPanel({
|
||||
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>
|
||||
<option value="disc">{m.bulletStyleOptionDisc}</option>
|
||||
<option value="circle">{m.bulletStyleOptionCircle}</option>
|
||||
<option value="square">{m.bulletStyleOptionSquare}</option>
|
||||
<option value="decimal">{m.bulletStyleOptionDecimal}</option>
|
||||
<option value="lower-alpha">{m.bulletStyleOptionLowerAlpha}</option>
|
||||
<option value="upper-alpha">{m.bulletStyleOptionUpperAlpha}</option>
|
||||
<option value="lower-roman">{m.bulletStyleOptionLowerRoman}</option>
|
||||
<option value="upper-roman">{m.bulletStyleOptionUpperRoman}</option>
|
||||
<option value="none">{m.bulletStyleOptionNone}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* 아이템 간 여백 (슬라이더) */}
|
||||
<NumericPropertyControl
|
||||
label="아이템 간 여백 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.gapLabel}
|
||||
unitLabel={m.gapUnitLabel}
|
||||
value={(() => {
|
||||
if (typeof listProps.gapYPx === "number") {
|
||||
return listProps.gapYPx;
|
||||
@@ -230,9 +234,9 @@ export function ListPropertiesPanel({
|
||||
max={40}
|
||||
step={2}
|
||||
presets={[
|
||||
{ id: "tight", label: "좁게", value: 4 },
|
||||
{ id: "normal", label: "보통", value: 8 },
|
||||
{ id: "relaxed", label: "넓게", value: 16 },
|
||||
{ id: "tight", label: m.gapPresetTight, value: 4 },
|
||||
{ id: "normal", label: m.gapPresetNormal, value: 8 },
|
||||
{ id: "relaxed", label: m.gapPresetRelaxed, value: 16 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, { gapYPx: v } as any);
|
||||
|
||||
@@ -4,6 +4,8 @@ import { useEditorStore } from "@/features/editor/state/editorStore";
|
||||
import type { CanvasPreset, ProjectConfig } from "@/features/editor/state/editorStore";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorProjectPropertiesPanelMessages } from "@/features/i18n/messages/editorProjectPropertiesPanel";
|
||||
|
||||
export function ProjectPropertiesPanel() {
|
||||
const projectConfig = useEditorStore((state) => (state as any).projectConfig as ProjectConfig);
|
||||
@@ -11,6 +13,9 @@ export function ProjectPropertiesPanel() {
|
||||
(state) => (state as any).updateProjectConfig as (partial: Partial<ProjectConfig>) => void,
|
||||
);
|
||||
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorProjectPropertiesPanelMessages(locale);
|
||||
|
||||
const handleChangePreset = (preset: CanvasPreset) => {
|
||||
if (preset === "mobile") {
|
||||
updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 390 });
|
||||
@@ -39,14 +44,14 @@ export function ProjectPropertiesPanel() {
|
||||
|
||||
return (
|
||||
<div className="space-y-4 text-xs text-slate-900 dark:text-slate-200">
|
||||
<h3 className="text-sm font-medium text-slate-100">프로젝트 설정</h3>
|
||||
<h3 className="text-sm font-medium text-slate-100">{m.sectionTitle}</h3>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">프로젝트 제목</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.projectTitleLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="프로젝트 제목"
|
||||
aria-label={m.projectTitleAria}
|
||||
value={projectConfig.title}
|
||||
onChange={(e) => updateProjectConfig({ title: e.target.value })}
|
||||
/>
|
||||
@@ -55,10 +60,10 @@ export function ProjectPropertiesPanel() {
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">프로젝트 주소 (slug)</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.projectSlugLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="프로젝트 주소 (slug)"
|
||||
aria-label={m.projectSlugAria}
|
||||
value={projectConfig.slug}
|
||||
onChange={(e) => updateProjectConfig({ slug: e.target.value })}
|
||||
/>
|
||||
@@ -67,16 +72,16 @@ export function ProjectPropertiesPanel() {
|
||||
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="캔버스 너비"
|
||||
unitLabel="(px)"
|
||||
label={m.canvasWidthLabel}
|
||||
unitLabel={m.canvasWidthUnitLabel}
|
||||
value={projectConfig.canvasWidthPx ?? 1024}
|
||||
min={320}
|
||||
max={1920}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "mobile", label: "모바일 (390px)", value: 390 },
|
||||
{ id: "tablet", label: "태블릿 (768px)", value: 768 },
|
||||
{ id: "desktop", label: "데스크톱 (1200px)", value: 1200 },
|
||||
{ id: "mobile", label: m.canvasWidthPresetMobile, value: 390 },
|
||||
{ id: "tablet", label: m.canvasWidthPresetTablet, value: 768 },
|
||||
{ id: "desktop", label: m.canvasWidthPresetDesktop, value: 1200 },
|
||||
]}
|
||||
onChangeValue={handleChangeCanvasWidth}
|
||||
/>
|
||||
@@ -84,9 +89,9 @@ export function ProjectPropertiesPanel() {
|
||||
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="캔버스 배경색"
|
||||
ariaLabelColorInput="캔버스 배경색"
|
||||
ariaLabelHexInput="캔버스 배경색 HEX"
|
||||
label={m.canvasBgLabel}
|
||||
ariaLabelColorInput={m.canvasBgColorAria}
|
||||
ariaLabelHexInput={m.canvasBgHexAria}
|
||||
value={projectConfig.canvasBgColorHex ?? "#020617"}
|
||||
onChange={(hex) => updateProjectConfig({ canvasBgColorHex: hex })}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
@@ -95,9 +100,9 @@ export function ProjectPropertiesPanel() {
|
||||
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="페이지 배경색"
|
||||
ariaLabelColorInput="페이지 배경색"
|
||||
ariaLabelHexInput="페이지 배경색 HEX"
|
||||
label={m.pageBgLabel}
|
||||
ariaLabelColorInput={m.pageBgColorAria}
|
||||
ariaLabelHexInput={m.pageBgHexAria}
|
||||
value={projectConfig.bodyBgColorHex ?? "#020617"}
|
||||
onChange={(hex) => updateProjectConfig({ bodyBgColorHex: hex })}
|
||||
palette={TEXT_COLOR_PALETTE}
|
||||
@@ -105,47 +110,47 @@ export function ProjectPropertiesPanel() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t border-slate-800 pt-3">
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">SEO / 메타</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.seoSectionTitle}</h4>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">SEO 타이틀</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.seoTitleLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="SEO 타이틀"
|
||||
placeholder={projectConfig.title || "페이지 제목"}
|
||||
aria-label={m.seoTitleAria}
|
||||
placeholder={projectConfig.title || m.seoTitlePlaceholderFallback}
|
||||
value={projectConfig.seoTitle ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ seoTitle: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">메타 디스크립션</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.seoDescriptionLabel}</span>
|
||||
<textarea
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 min-h-[56px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="메타 디스크립션"
|
||||
placeholder="검색엔진 및 SNS 공유에 노출될 페이지 설명을 입력하세요."
|
||||
aria-label={m.seoDescriptionAria}
|
||||
placeholder={m.seoDescriptionPlaceholder}
|
||||
value={projectConfig.seoDescription ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ seoDescription: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">OG/Twitter 이미지 URL</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.seoOgImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="OG/Twitter 이미지 URL"
|
||||
placeholder="예: https://example.com/og-image.png"
|
||||
aria-label={m.seoOgImageUrlAria}
|
||||
placeholder={m.seoOgImageUrlPlaceholder}
|
||||
value={projectConfig.seoOgImageUrl ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ seoOgImageUrl: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">Canonical URL</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.seoCanonicalUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="Canonical URL"
|
||||
placeholder="예: https://example.com/landing"
|
||||
aria-label={m.seoCanonicalUrlAria}
|
||||
placeholder={m.seoCanonicalUrlPlaceholder}
|
||||
value={projectConfig.seoCanonicalUrl ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ seoCanonicalUrl: e.target.value })}
|
||||
/>
|
||||
@@ -155,36 +160,36 @@ export function ProjectPropertiesPanel() {
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3 w-3 rounded border-slate-300 bg-white text-sky-600 dark:border-slate-600 dark:bg-slate-900"
|
||||
aria-label="검색 엔진에 노출하지 않기 (noindex)"
|
||||
aria-label={m.seoNoIndexAria}
|
||||
checked={Boolean(projectConfig.seoNoIndex)}
|
||||
onChange={(e) => updateProjectConfig({ seoNoIndex: e.target.checked })}
|
||||
/>
|
||||
<span>검색 엔진에 노출하지 않기 (noindex)</span>
|
||||
<span>{m.seoNoIndexLabel}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">페이지 head HTML</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.headHtmlLabel}</span>
|
||||
<textarea
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 min-h-[72px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="페이지 head HTML"
|
||||
aria-label={m.headHtmlAria}
|
||||
value={projectConfig.headHtml ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ headHtml: e.target.value })}
|
||||
placeholder="예: <meta name="description" content="..." />"
|
||||
placeholder={m.headHtmlPlaceholder}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-slate-500 dark:text-slate-400">추적 스크립트</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">{m.trackingScriptLabel}</span>
|
||||
<textarea
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 min-h-[72px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="추적 스크립트"
|
||||
aria-label={m.trackingScriptAria}
|
||||
value={projectConfig.trackingScript ?? ""}
|
||||
onChange={(e) => updateProjectConfig({ trackingScript: e.target.value })}
|
||||
placeholder="예: <script>/* GA, Pixel 코드 */</script>"
|
||||
placeholder={m.trackingScriptPlaceholder}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -16,6 +16,8 @@ import { FormRadioPropertiesPanel } from "../forms/FormRadioPropertiesPanel";
|
||||
import { FormControllerPanel } from "../forms/FormControllerPanel";
|
||||
import { ProjectPropertiesPanel } from "./ProjectPropertiesPanel";
|
||||
import { Trash2, Copy, SlidersHorizontal, HelpCircle } from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorPropertiesSidebarMessages } from "@/features/i18n/messages/editorPropertiesSidebar";
|
||||
|
||||
type BlockHelpProperty = {
|
||||
label: string;
|
||||
@@ -62,6 +64,8 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
||||
} = props;
|
||||
|
||||
const [helpOpen, setHelpOpen] = useState(false);
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorPropertiesSidebarMessages(locale);
|
||||
|
||||
const getHelpContentForSelectedBlock = (): BlockHelpContent | null => {
|
||||
if (!selectedBlockId) return null;
|
||||
@@ -70,596 +74,31 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
||||
|
||||
switch (selectedBlock.type) {
|
||||
case "text":
|
||||
return {
|
||||
title: "텍스트 블록 튜토리얼",
|
||||
description:
|
||||
"제목과 본문 텍스트를 입력할 때 사용하는 기본 블록입니다.\n\n좌측 패널에서 텍스트를 추가한 뒤, 캔버스에서 텍스트를 더블클릭하거나 속성 패널에서 내용을 수정해 보세요. 정렬, 크기, 색상 등을 조절해 다양한 스타일의 텍스트를 만들 수 있습니다.",
|
||||
properties: [
|
||||
{
|
||||
label: "선택한 텍스트 블록 내용",
|
||||
description:
|
||||
"이 블록에 실제로 표시될 문장을 입력하는 영역입니다. 캔버스에서 텍스트를 더블클릭했을 때와 동일한 내용이며, 여러 줄을 입력하면 줄바꿈이 그대로 반영됩니다.",
|
||||
},
|
||||
{
|
||||
label: "정렬",
|
||||
description:
|
||||
"텍스트를 왼쪽/가운데/오른쪽 중 어디에 맞출지 결정합니다. 일반 본문은 왼쪽, Hero 제목이나 짧은 강조 문구는 가운데 정렬을 추천합니다.",
|
||||
},
|
||||
{
|
||||
label: "텍스트 스타일 (밑줄/가운데줄/이탤릭)",
|
||||
description:
|
||||
"밑줄은 링크처럼 보이게 하거나 특정 단어를 강조할 때, 가운데줄은 할인 전 가격처럼 취소선을 표현할 때, 이탤릭은 인용구나 제품명 등 살짝 톤을 바꾸고 싶을 때 사용합니다.",
|
||||
},
|
||||
{
|
||||
label: "글자 크기",
|
||||
description:
|
||||
"텍스트의 폰트 크기를 px 단위로 조절합니다. 프리셋(XS~3XL)으로 대략적인 크기를 고른 뒤, 슬라이더/숫자 입력으로 세밀하게 조정할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "글자 간격",
|
||||
description:
|
||||
"문자 사이의 간격(자간)을 조절합니다. 본문은 보통 또는 약간 넓게, 대문자 위주의 짧은 타이틀은 살짝 넓게 설정하면 가독성과 디자인이 좋아집니다.",
|
||||
},
|
||||
{
|
||||
label: "줄 간격",
|
||||
description:
|
||||
"행과 행 사이의 간격(행간)을 정합니다. 본문은 1.5~1.7 정도가 읽기 좋고, 아주 짧은 제목은 1.25 정도로 줄이면 한 덩어리로 단단해 보입니다.",
|
||||
},
|
||||
{
|
||||
label: "굵기",
|
||||
description:
|
||||
"폰트 두께를 100~900 범위에서 조절합니다. 본문은 보통(400), 섹션 제목은 세미볼드(600), 강한 CTA 문구는 볼드(700) 정도를 추천합니다.",
|
||||
},
|
||||
{
|
||||
label: "텍스트 색상",
|
||||
description:
|
||||
"글자 색을 팔레트 또는 HEX 코드로 지정합니다. 본문은 대비가 높은 짙은 색을, 강조 문구는 브랜드 메인 색을 사용하는 것이 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "블록 배경색",
|
||||
description:
|
||||
"텍스트가 들어 있는 카드/박스 전체 배경색을 지정합니다. 공지사항, 강조 박스, 경고 문구 등을 만들 때 연한 배경색과 함께 사용하면 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "최대 너비",
|
||||
description:
|
||||
"한 줄 텍스트가 지나치게 길어지지 않도록 최대 줄 길이를 제한합니다. `본문 폭(60ch)`는 일반 문단에, `좁게(40ch)`는 카드/배너 같은 짧은 문구에 적합합니다.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.text;
|
||||
case "button":
|
||||
return {
|
||||
title: "버튼 블록 튜토리얼",
|
||||
description:
|
||||
"폼 제출이나 링크 이동을 위한 CTA 버튼을 만들 때 사용하는 블록입니다. 라벨, 링크(URL), 정렬, 색상/크기를 조절해 원하는 액션 버튼을 구성해 보세요.",
|
||||
properties: [
|
||||
{
|
||||
label: "버튼 텍스트",
|
||||
description:
|
||||
"버튼 위에 표시될 문구입니다. 예: '지금 시작하기', '문의 남기기'. 짧고 행동을 유도하는 문장을 사용하는 것이 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "가로 패딩 (px)",
|
||||
description:
|
||||
"버튼 양 옆의 여백을 조절합니다. 값이 클수록 버튼이 가로로 넓어져 더 강조됩니다.",
|
||||
},
|
||||
{
|
||||
label: "세로 패딩 (px)",
|
||||
description:
|
||||
"버튼 위·아래 여백을 조절합니다. 값이 클수록 버튼 높이가 높아져 더 눈에 띱니다.",
|
||||
},
|
||||
{
|
||||
label: "버튼 링크",
|
||||
description:
|
||||
"버튼 클릭 시 이동할 URL 또는 앵커(#section)입니다. 외부 페이지, 페이지 내 섹션, 폼 제출 엔드포인트 등으로 연결할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "정렬",
|
||||
description:
|
||||
"해당 버튼이 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다. 주요 CTA 버튼은 가운데 정렬이 많이 쓰입니다.",
|
||||
},
|
||||
{
|
||||
label: "텍스트 색상",
|
||||
description:
|
||||
"버튼 라벨 글자 색입니다. 채움 색상과 충분한 대비가 나도록 설정해야 가독성이 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "스타일",
|
||||
description:
|
||||
"버튼 외형 스타일입니다. '채움'은 꽉 찬 스타일, '외곽선'은 테두리만 있는 스타일, '고스트'는 배경 없이 텍스트/테두리만 있는 스타일입니다.",
|
||||
},
|
||||
{
|
||||
label: "채움 색상",
|
||||
description:
|
||||
"채움 스타일에서 버튼 내부를 채우는 색입니다. 브랜드 메인 색이나 강조 색을 사용하면 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "외곽선 색상",
|
||||
description:
|
||||
"외곽선/고스트 스타일에서 버튼 테두리 색입니다. 배경색과의 대비를 고려해 설정합니다.",
|
||||
},
|
||||
{
|
||||
label: "모서리 둥글기",
|
||||
description:
|
||||
"버튼 모서리를 얼마나 둥글게 처리할지 결정합니다. '없음'은 각진 버튼, '완전 둥글게'는 알약 모양 버튼입니다.",
|
||||
},
|
||||
{
|
||||
label: "버튼 너비 모드 / 버튼 고정 너비",
|
||||
description:
|
||||
"버튼이 컨테이너 너비에 맞춰 늘어날지(전체 폭), 내용 길이에 맞출지(자동), 고정 px 너비를 가질지 결정합니다.",
|
||||
},
|
||||
{
|
||||
label: "버튼 크기",
|
||||
description:
|
||||
"버튼 라벨 텍스트의 폰트 크기입니다. 중요한 CTA 버튼은 주변 텍스트보다 조금 더 크게 설정하면 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "줄 간격 / 글자 간격",
|
||||
description:
|
||||
"버튼 라벨의 행간과 자간을 조절합니다. 글자가 너무 답답해 보이면 자간을 약간 넓히고, 여러 줄 버튼 문구는 줄 간격을 조금 넓혀 주세요.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.button;
|
||||
case "image":
|
||||
return {
|
||||
title: "이미지 블록 튜토리얼",
|
||||
description:
|
||||
"배너, 썸네일, 설명 이미지를 배치할 때 사용하는 블록입니다. 외부 이미지 URL을 입력하거나 업로드 이미지를 선택하고, 너비/정렬/모서리 둥글기를 조절해 레이아웃에 맞게 배치해 보세요.",
|
||||
properties: [
|
||||
{
|
||||
label: "이미지 소스",
|
||||
description:
|
||||
"이미지를 외부 URL에서 가져올지(URL), 빌더에 업로드한 에셋을 사용할지(파일 업로드) 선택합니다.",
|
||||
},
|
||||
{
|
||||
label: "이미지 URL / 이미지 파일 업로드",
|
||||
description:
|
||||
"URL 모드에서는 외부 이미지 주소를 입력하고, 업로드 모드에서는 로컬 이미지를 업로드해 `/api/image/:id` 형식으로 관리합니다.",
|
||||
},
|
||||
{
|
||||
label: "대체 텍스트",
|
||||
description:
|
||||
"이미지가 로드되지 않거나 스크린리더를 사용하는 사용자에게 보여질 설명 텍스트입니다. 이미지가 전달하는 의미를 한두 문장으로 작성해 주세요.",
|
||||
},
|
||||
{
|
||||
label: "카드 배경색",
|
||||
description:
|
||||
"이미지를 감싸는 카드 영역의 배경색입니다. 투명한 PNG 아이콘이나 로고를 올릴 때 배경을 살짝 깔아주면 더 잘 보입니다.",
|
||||
},
|
||||
{
|
||||
label: "정렬",
|
||||
description:
|
||||
"이미지가 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다.",
|
||||
},
|
||||
{
|
||||
label: "너비 모드 / 고정 너비 (px)",
|
||||
description:
|
||||
"이미지를 내용 크기에 맞출지(auto) 또는 px 단위로 고정된 너비를 사용할지 선택합니다. 썸네일 그리드에서는 고정 너비를 사용하는 편이 레이아웃이 안정적입니다.",
|
||||
},
|
||||
{
|
||||
label: "모서리 둥글기",
|
||||
description:
|
||||
"이미지 카드 모서리 둥글기를 px 단위로 조절합니다. 아바타/아이콘은 완전 둥글게, 일반 사진은 살짝 둥글게 설정하면 자연스럽습니다.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.image;
|
||||
case "list":
|
||||
return {
|
||||
title: "리스트 블록 튜토리얼",
|
||||
description:
|
||||
"불릿/번호 리스트를 만들 때 사용하는 블록입니다. 아이템 텍스트를 수정하고, 정렬/불릿 스타일을 바꿔 체크리스트나 단계별 안내 등을 표현할 수 있습니다.",
|
||||
properties: [
|
||||
{
|
||||
label: "리스트 아이템 (줄바꿈으로 구분)",
|
||||
description:
|
||||
"각 줄이 하나의 리스트 항목이 됩니다. 들여쓰기를 이용한 중첩 리스트는 TDD 기준의 변환 로직에 따라 자동으로 트리 구조로 변환됩니다.",
|
||||
},
|
||||
{
|
||||
label: "정렬",
|
||||
description:
|
||||
"리스트 전체를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 체크리스트는 왼쪽 정렬, 특징 요약은 가운데 정렬이 자주 사용됩니다.",
|
||||
},
|
||||
{
|
||||
label: "글자 크기 (px)",
|
||||
description:
|
||||
"리스트 텍스트의 폰트 크기를 조절합니다. 본문보다 약간 작게 설정하면 보조 정보 느낌을 줄 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "줄 간격",
|
||||
description:
|
||||
"리스트 항목 내부의 행간을 조절합니다. 항목 내용이 길어질수록 1.5~1.8 정도의 넉넉한 값을 추천합니다.",
|
||||
},
|
||||
{
|
||||
label: "텍스트 색상",
|
||||
description:
|
||||
"리스트 텍스트의 색상입니다. 배경색과의 대비를 고려해 본문과 동일하거나 약간 연한 색상을 사용할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "블록 배경색",
|
||||
description:
|
||||
"리스트 전체 카드의 배경색입니다. 단계별 안내나 체크리스트 박스를 강조하는 용도로 사용할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "불릿 스타일",
|
||||
description:
|
||||
"불릿(●/○/■) 또는 번호(1., a., i.) 형식을 선택합니다. 숫자/알파벳/로마 숫자 스타일을 선택하면 자동으로 순서형 리스트(ordered)가 됩니다.",
|
||||
},
|
||||
{
|
||||
label: "아이템 간 여백 (px)",
|
||||
description:
|
||||
"각 리스트 항목 사이의 세로 간격입니다. 설명이 긴 항목이 많다면 여백을 넉넉히 두어 가독성을 확보하세요.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.list;
|
||||
case "divider":
|
||||
return {
|
||||
title: "구분선 블록 튜토리얼",
|
||||
description:
|
||||
"섹션과 섹션 사이를 나누거나 콘텐츠를 시각적으로 구분할 때 사용하는 블록입니다. 정렬, 두께, 길이, 색상, 여백을 조절해 페이지 흐름을 정리해 보세요.",
|
||||
properties: [
|
||||
{
|
||||
label: "정렬",
|
||||
description:
|
||||
"구분선을 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
|
||||
},
|
||||
{
|
||||
label: "두께",
|
||||
description:
|
||||
"선의 두께입니다. '얇게'는 가벼운 보조 구분선, '보통'은 섹션 경계를 확실히 나눌 때 사용합니다.",
|
||||
},
|
||||
{
|
||||
label: "길이 모드 / 고정 길이 (px)",
|
||||
description:
|
||||
"구분선을 전체 폭으로 쓸지, 내용에 맞출지, 또는 px 단위의 고정 길이를 사용할지 선택합니다.",
|
||||
},
|
||||
{
|
||||
label: "선 색상",
|
||||
description:
|
||||
"구분선 컬러입니다. 너무 진한 색보다는 섹션 배경보다 살짝 진한 정도의 중간 톤을 추천합니다.",
|
||||
},
|
||||
{
|
||||
label: "위/아래 여백",
|
||||
description:
|
||||
"구분선 위·아래에 들어가는 공백입니다. 값이 클수록 섹션이 더 명확하게 나뉘어 보입니다.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.divider;
|
||||
case "section":
|
||||
return {
|
||||
title: "섹션 블록 튜토리얼",
|
||||
description:
|
||||
"레이아웃의 큰 덩어리를 나누는 컨테이너 블록입니다. 배경색/배경 이미지/비디오, 위아래 패딩, 너비를 설정해 Hero, Features, Footer 같은 영역을 구성할 수 있습니다.",
|
||||
properties: [
|
||||
{
|
||||
label: "배경 색상",
|
||||
description:
|
||||
"섹션 전체의 기본 배경색입니다. 페이지의 큰 분위기를 결정하는 요소이므로, 섹션 간 배경 대비를 적절히 주는 것이 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "배경 이미지 소스 / URL / 파일 업로드",
|
||||
description:
|
||||
"섹션 배경으로 사용할 이미지를 외부 URL 또는 업로드 파일로 지정합니다. Hero 배경, 패턴, 질감 이미지를 설정할 때 사용합니다.",
|
||||
},
|
||||
{
|
||||
label: "배경 이미지 크기 / 위치 / 반복",
|
||||
description:
|
||||
"cover/contain/auto로 크기를 조절하고, 프리셋 또는 X/Y 퍼센트로 위치를 조절하며, 반복 여부를 설정해 패턴 형태로 사용할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "배경 비디오 소스 / URL / 파일 업로드",
|
||||
description:
|
||||
"섹션 배경에 비디오를 설정합니다. 시선을 끌어야 하는 Hero 영역 등에 사용하되, 가독성 저하를 막기 위해 텍스트 대비를 꼭 확인하세요.",
|
||||
},
|
||||
{
|
||||
label: "세로 패딩",
|
||||
description:
|
||||
"섹션 위·아래 여백입니다. 값이 클수록 섹션이 여유 있고 강조되어 보입니다. Hero 섹션은 넉넉한 패딩을, 보조 섹션은 중간 정도를 추천합니다.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.section;
|
||||
case "video":
|
||||
return {
|
||||
title: "비디오 블록 튜토리얼",
|
||||
description:
|
||||
"YouTube/영상 URL 또는 직접 호스팅한 비디오를 삽입할 때 사용하는 블록입니다. 동영상 주소를 입력하고, 비율/정렬/재생 옵션을 조정해 페이지에 맞게 배치해 보세요.",
|
||||
properties: [
|
||||
{
|
||||
label: "비디오 소스 / 비디오 URL / 비디오 파일 업로드",
|
||||
description:
|
||||
"외부 동영상 URL(YouTube, Vimeo 등)을 직접 입력하거나, 비디오 파일을 업로드해 `/api/video/:id` 형태로 사용할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "포스터 이미지 URL",
|
||||
description:
|
||||
"동영상 재생 전/로딩 중에 보여줄 썸네일 이미지입니다. 영상의 핵심 장면이나 대표 이미지를 사용하면 클릭률을 높일 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "카드 배경색",
|
||||
description:
|
||||
"비디오가 들어가는 카드 영역의 배경색입니다. 주변 섹션과의 대비를 위해 살짝 어둡거나 밝은 색을 설정할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "비디오 정렬",
|
||||
description:
|
||||
"비디오를 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
|
||||
},
|
||||
{
|
||||
label: "비디오 너비 모드 / 고정 너비 (px)",
|
||||
description:
|
||||
"비디오를 내용 너비에 맞출지, 가로 전체를 채울지, 특정 px 너비로 고정할지 선택합니다.",
|
||||
},
|
||||
{
|
||||
label: "카드 패딩 / 카드 모서리 둥글기",
|
||||
description:
|
||||
"비디오 주변 카드의 안쪽 여백과 모서리 둥글기입니다. 카드형 레이아웃에서는 적당한 패딩과 둥근 모서리를 주면 디자인이 정돈됩니다.",
|
||||
},
|
||||
{
|
||||
label: "시작 시점 (초) / 종료 시점 (초)",
|
||||
description:
|
||||
"영상의 특정 구간만 재생하고 싶을 때 사용하는 옵션입니다. 예를 들어 10초~30초만 재생하도록 설정할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "화면 비율",
|
||||
description:
|
||||
"동영상 프레임 비율입니다. 대부분의 웹 영상은 16:9를 사용하며, 정사각형/세로형 콘텐츠는 1:1, 4:3 등을 사용할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "자동 재생 / 반복 재생 / 음소거 / 재생 컨트롤 표시",
|
||||
description:
|
||||
"자동 재생/반복 재생/음소거/컨트롤 표시 여부를 설정합니다. 자동 재생 영상은 보통 음소거를 함께 켜 두는 것이 좋습니다.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.video;
|
||||
case "form":
|
||||
return {
|
||||
title: "폼 컨트롤러 블록 튜토리얼",
|
||||
description:
|
||||
"입력 필드(formInput/select/checkbox/radio)를 하나의 폼으로 묶는 컨트롤러입니다. 전송 대상, 전송 포맷, 너비, 여백 등을 설정해 네이티브 폼 제출을 구성하고, 필드 ID를 연결해 폼 구조를 완성할 수 있습니다.",
|
||||
properties: [
|
||||
{
|
||||
label: "전송 대상 / Webhook 설정",
|
||||
description:
|
||||
"폼 데이터를 내부 처리로만 사용할지, 외부 Webhook/Google Sheets 등으로 전송할지 결정하고, 목적지 URL/전송 포맷/HTTP 메서드 등을 설정합니다.",
|
||||
},
|
||||
{
|
||||
label: "추가 파라미터",
|
||||
description:
|
||||
"`key=value` 형식으로 줄바꿈해 작성하면, 모든 폼 제출에 공통으로 포함될 추가 파라미터를 지정할 수 있습니다. 예: `source=landing`.",
|
||||
},
|
||||
{
|
||||
label: "폼 너비 모드 / 폼 고정 너비 (px)",
|
||||
description:
|
||||
"폼 전체의 가로 폭을 자동/전체 폭/고정 px 값 중에서 선택합니다. 문의 폼은 보통 480~640px 정도의 고정 폭이 읽기 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "폼 위/아래 여백 (px)",
|
||||
description:
|
||||
"폼 블록 위·아래에 들어가는 공백입니다. 페이지 내 다른 섹션과의 간격을 조절할 때 사용합니다.",
|
||||
},
|
||||
{
|
||||
label: "성공 메시지 / 에러 메시지",
|
||||
description:
|
||||
"폼 전송 성공 또는 실패 시 사용자에게 보여줄 텍스트입니다. 명확하고 친절한 문구로 작성하는 것이 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "폼 필드 매핑",
|
||||
description:
|
||||
"폼 컨트롤러와 연결할 입력 필드(formInput/select/checkbox/radio)를 체크박스로 선택합니다. 체크된 필드만 실제 폼 제출 payload에 포함됩니다.",
|
||||
},
|
||||
{
|
||||
label: "Submit 버튼",
|
||||
description:
|
||||
"폼 제출을 담당할 버튼 블록을 지정합니다. 별도 버튼 블록을 만들어 이 컨트롤러와 연결하면, 해당 버튼 클릭 시 폼이 제출됩니다.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.form;
|
||||
case "formInput":
|
||||
return {
|
||||
title: "폼 입력 블록 튜토리얼",
|
||||
description:
|
||||
"이름, 이메일 등 한 줄 텍스트 또는 긴 텍스트 입력 필드를 만들 때 사용하는 블록입니다. 레이블, 플레이스홀더, 필수 여부, 너비 등을 설정해 폼 컨트롤러와 함께 사용합니다.",
|
||||
properties: [
|
||||
{
|
||||
label: "라벨 타입 / 필드 라벨",
|
||||
description:
|
||||
"입력 필드 위나 옆에 표시될 설명입니다. 텍스트 또는 이미지로 라벨을 구성할 수 있으며, 사용자가 어떤 값을 입력해야 하는지 명확하게 알려줍니다.",
|
||||
},
|
||||
{
|
||||
label: "라벨 이미지 URL / 대체 텍스트",
|
||||
description:
|
||||
"라벨을 이미지로 사용할 때 경로와 alt 텍스트를 지정합니다. 로고형 라벨이나 아이콘 기반 UI를 만들 때 활용할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "전송 키",
|
||||
description:
|
||||
"이 입력값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
|
||||
},
|
||||
{
|
||||
label: "필드 타입",
|
||||
description:
|
||||
"텍스트/이메일/긴 텍스트 중 어떤 형태의 입력을 받을지 결정합니다. 이메일 타입은 브라우저 기본 이메일 검증을 활용할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "Placeholder",
|
||||
description:
|
||||
"입력 전 필드 안에 흐릿하게 보여줄 안내 문구입니다. 예: '이메일을 입력해 주세요'.",
|
||||
},
|
||||
{
|
||||
label: "필수 필드",
|
||||
description:
|
||||
"체크 시 이 필드는 반드시 채워야 합니다. 이름/이메일 같은 필수 값에는 활성화하고, 선택 항목에는 비활성화하는 것을 추천합니다.",
|
||||
},
|
||||
{
|
||||
label: "텍스트 크기 / 줄간격 / 자간",
|
||||
description:
|
||||
"입력 값의 폰트 크기(px), 줄간격(px), 자간(px)을 조절해 폼 필드의 가독성과 분위기를 세밀하게 튜닝합니다.",
|
||||
},
|
||||
{
|
||||
label: "텍스트 정렬",
|
||||
description:
|
||||
"필드 안 텍스트를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 일반 입력은 왼쪽 정렬을 권장합니다.",
|
||||
},
|
||||
{
|
||||
label: "레이아웃 / 라벨/필드 간격",
|
||||
description:
|
||||
"라벨과 필드를 세로(stack) 또는 가로(inline)로 배치하고, inline 모드에서 라벨과 입력 사이 간격(px)을 조절합니다.",
|
||||
},
|
||||
{
|
||||
label: "너비 / 필드 고정 너비",
|
||||
description:
|
||||
"필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다. 짧은 필드는 고정 값, 긴 입력은 전체 폭을 사용할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "필드 가로/세로 패딩",
|
||||
description:
|
||||
"입력 상자 안쪽 여백을 조절합니다. 값이 클수록 필드가 커지고 누르기/입력하기 편해집니다.",
|
||||
},
|
||||
{
|
||||
label: "필드 텍스트/채움/테두리 색상",
|
||||
description:
|
||||
"입력 텍스트, 배경, 테두리 색상을 각각 조절합니다. 에러 상태/강조 상태 등을 표현할 때 조합해서 사용할 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "필드 모서리 둥글기",
|
||||
description:
|
||||
"입력 상자의 모서리를 얼마나 둥글게 할지 결정합니다. 페이지의 전체 디자인 톤과 맞춰 사용하세요.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.formInput;
|
||||
case "formSelect":
|
||||
return {
|
||||
title: "폼 셀렉트 블록 튜토리얼",
|
||||
description:
|
||||
"드롭다운 선택 필드를 만들 때 사용하는 블록입니다. 옵션 목록과 기본 선택값, 너비를 설정해 폼 컨트롤러와 함께 사용합니다.",
|
||||
properties: [
|
||||
{
|
||||
label: "라벨 타입 / 필드 라벨",
|
||||
description:
|
||||
"셀렉트 필드의 제목 역할을 하는 라벨입니다. 텍스트 또는 이미지로 구성할 수 있으며, 선택해야 할 값의 의미를 설명합니다.",
|
||||
},
|
||||
{
|
||||
label: "전송 키",
|
||||
description:
|
||||
"선택된 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
|
||||
},
|
||||
{
|
||||
label: "옵션",
|
||||
description:
|
||||
"사용자가 선택할 수 있는 옵션 목록입니다. 라벨과 value를 함께 설정하며, '옵션 추가' 버튼으로 새 옵션을 만들 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "필수 필드",
|
||||
description:
|
||||
"체크 시 반드시 하나의 옵션을 선택해야 합니다. 중요 선택 항목에는 필수로 설정하는 것을 권장합니다.",
|
||||
},
|
||||
{
|
||||
label: "셀렉트 텍스트 크기 / 줄간격 / 자간",
|
||||
description:
|
||||
"드롭다운 필드의 텍스트 타이포그래피를 px 단위로 조절해 가독성과 분위기를 맞춥니다.",
|
||||
},
|
||||
{
|
||||
label: "필드 너비 / 필드 고정 너비",
|
||||
description:
|
||||
"셀렉트 필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다.",
|
||||
},
|
||||
{
|
||||
label: "셀렉트 가로/세로 패딩",
|
||||
description:
|
||||
"드롭다운 안쪽 여백을 조절해 클릭 영역과 시각적 무게감을 조정합니다.",
|
||||
},
|
||||
{
|
||||
label: "필드 텍스트/채움/테두리 색상",
|
||||
description:
|
||||
"선택 영역의 텍스트, 배경, 테두리 색상을 설정합니다. 폼 전체 톤과 잘 어울리는 색상을 사용하는 것이 좋습니다.",
|
||||
},
|
||||
{
|
||||
label: "필드 모서리 둥글기",
|
||||
description:
|
||||
"셀렉트 박스의 모서리를 얼마나 둥글게 표시할지 결정합니다.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.formSelect;
|
||||
case "formCheckbox":
|
||||
return {
|
||||
title: "폼 체크박스 블록 튜토리얼",
|
||||
description:
|
||||
"여러 항목 중 복수 선택이 필요한 경우 사용하는 체크박스 그룹 블록입니다. 그룹 타이틀과 옵션 라벨/이미지를 설정해 동의 항목이나 관심사 선택 등을 구성할 수 있습니다.",
|
||||
properties: [
|
||||
{
|
||||
label: "그룹 타이틀 타입 / 그룹 타이틀",
|
||||
description:
|
||||
"체크박스 그룹 전체의 제목입니다. 텍스트 또는 이미지로 표현할 수 있으며, 사용자가 어떤 범주를 선택하는지 알려줍니다.",
|
||||
},
|
||||
{
|
||||
label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
|
||||
description:
|
||||
"그룹 라벨을 이미지로 사용할 때, URL 또는 업로드된 이미지를 선택합니다.",
|
||||
},
|
||||
{
|
||||
label: "전송 키",
|
||||
description:
|
||||
"체크된 옵션들의 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
|
||||
},
|
||||
{
|
||||
label: "옵션 / 옵션 이미지 소스",
|
||||
description:
|
||||
"각 체크박스 옵션의 라벨/값/이미지를 설정합니다. URL 또는 업로드 이미지로 옵션별 아이콘을 붙일 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "필수 필드",
|
||||
description:
|
||||
"체크 시 하나 이상 옵션을 선택해야 합니다. 약관 동의 등 필수 동의 항목에 사용합니다.",
|
||||
},
|
||||
{
|
||||
label: "체크박스 텍스트 크기 / 줄간격 / 자간",
|
||||
description:
|
||||
"체크박스 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 항목이 길어질수록 줄간격을 넉넉히 두는 것이 좋습니다.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.formCheckbox;
|
||||
case "formRadio":
|
||||
return {
|
||||
title: "폼 라디오 블록 튜토리얼",
|
||||
description:
|
||||
"여러 옵션 중 하나만 선택해야 할 때 사용하는 라디오 버튼 그룹 블록입니다. 옵션 라벨/이미지와 기본 선택값을 설정해 요금제 선택 등 단일 선택 시나리오를 구성할 수 있습니다.",
|
||||
properties: [
|
||||
{
|
||||
label: "그룹 타이틀 타입 / 그룹 타이틀",
|
||||
description:
|
||||
"라디오 그룹의 제목입니다. 요금제 이름, 질문 문구 등 단일 선택의 맥락을 설명합니다.",
|
||||
},
|
||||
{
|
||||
label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
|
||||
description:
|
||||
"그룹 라벨을 이미지로 사용할 때, URL 또는 업로드 이미지를 선택합니다.",
|
||||
},
|
||||
{
|
||||
label: "전송 키",
|
||||
description:
|
||||
"선택된 하나의 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
|
||||
},
|
||||
{
|
||||
label: "옵션 / 옵션 이미지 소스",
|
||||
description:
|
||||
"각 라디오 옵션의 라벨/값/이미지를 설정합니다. 옵션별 아이콘이나 썸네일을 붙여 더 풍부한 선택 UI를 만들 수 있습니다.",
|
||||
},
|
||||
{
|
||||
label: "필수 필드",
|
||||
description:
|
||||
"체크 시 반드시 하나의 옵션을 선택해야 합니다. 요금제/유형 선택처럼 반드시 선택이 필요한 경우에 사용합니다.",
|
||||
},
|
||||
{
|
||||
label: "라디오 텍스트 크기 / 줄간격 / 자간",
|
||||
description:
|
||||
"라디오 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 옵션 설명이 긴 경우 줄간격을 넉넉히 두세요.",
|
||||
},
|
||||
],
|
||||
};
|
||||
return m.formRadio;
|
||||
default:
|
||||
return {
|
||||
title: "블록 튜토리얼",
|
||||
description: "이 블록에 대한 자세한 도움말은 추후 추가될 예정입니다.",
|
||||
};
|
||||
return m.fallback;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -674,7 +113,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
||||
>
|
||||
<h2 className="font-medium mb-2 flex items-center gap-2 text-slate-900 dark:text-slate-100">
|
||||
<SlidersHorizontal className="w-4 h-4 text-sky-400" aria-hidden="true" />
|
||||
<span>속성 패널</span>
|
||||
<span>{m.panelTitle}</span>
|
||||
</h2>
|
||||
{selectedBlockId ? (
|
||||
<div className="space-y-3">
|
||||
@@ -686,7 +125,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Trash2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>블록 삭제</span>
|
||||
<span>{m.actionDeleteBlock}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -696,7 +135,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Copy className="w-3 h-3" aria-hidden="true" />
|
||||
<span>블록 복제</span>
|
||||
<span>{m.actionDuplicateBlock}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -707,7 +146,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
||||
onClick={() => setHelpOpen(true)}
|
||||
>
|
||||
<HelpCircle className="w-3 h-3" aria-hidden="true" />
|
||||
<span>HELP</span>
|
||||
<span>{m.actionHelp}</span>
|
||||
</button>
|
||||
</div>
|
||||
{(() => {
|
||||
@@ -869,21 +308,21 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
|
||||
<h3 className="text-sm font-medium">{help.title}</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="text-slate-400 hover:text-slate-100 text-xs"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-slate-100 text-xs"
|
||||
onClick={() => setHelpOpen(false)}
|
||||
>
|
||||
닫기
|
||||
{m.modalCloseLabel}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-200 whitespace-pre-line">{help.description}</p>
|
||||
<p className="text-[11px] text-slate-600 dark:text-slate-200 whitespace-pre-line">{help.description}</p>
|
||||
{help.properties && help.properties.length > 0 && (
|
||||
<div className="mt-3 border-t border-slate-700 pt-2 space-y-2">
|
||||
<h4 className="text-[11px] font-semibold text-slate-200">속성별 설명</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-900 dark:text-slate-200">{m.modalPropertiesSectionTitle}</h4>
|
||||
<ul className="space-y-1">
|
||||
{help.properties.map((prop) => (
|
||||
<li key={prop.label}>
|
||||
<div className="text-[11px] font-semibold text-slate-100">{prop.label}</div>
|
||||
<div className="text-[11px] text-slate-300">{prop.description}</div>
|
||||
<div className="text-[11px] font-semibold text-slate-600 dark:text-slate:-100">{prop.label}</div>
|
||||
<div className="text-[11px] text-slate-500 dark:text-slate-300">{prop.description}</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorSectionPanelMessages } from "@/features/i18n/messages/editorSectionPanel";
|
||||
|
||||
export type SectionPropertiesPanelProps = {
|
||||
sectionProps: SectionBlockProps;
|
||||
@@ -11,6 +13,8 @@ export type SectionPropertiesPanelProps = {
|
||||
};
|
||||
|
||||
export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorSectionPanelMessages(locale);
|
||||
const backgroundSource: "none" | "url" | "upload" = (() => {
|
||||
const src = sectionProps.backgroundImageSrc?.trim();
|
||||
const type = sectionProps.backgroundImageSourceType;
|
||||
@@ -44,9 +48,9 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
{/* 섹션 배경: 커스텀 색상 피커만 사용 */}
|
||||
<div className="mt-1">
|
||||
<ColorPickerField
|
||||
label="배경 색상"
|
||||
ariaLabelColorInput="섹션 배경 색상 선택"
|
||||
ariaLabelHexInput="섹션 배경 색상 HEX 입력"
|
||||
label={m.backgroundColorLabel}
|
||||
ariaLabelColorInput={m.backgroundColorPickerAria}
|
||||
ariaLabelHexInput={m.backgroundColorHexAria}
|
||||
value={sectionProps.backgroundColorCustom ?? ""}
|
||||
onChange={(hex) => {
|
||||
const next = hex && hex.trim().length > 0 ? hex : undefined;
|
||||
@@ -59,10 +63,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
{/* 섹션 배경 이미지 */}
|
||||
<div className="mt-3 space-y-2 text-xs text-slate-400">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 이미지 소스</span>
|
||||
<span>{m.backgroundImageSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="배경 이미지 소스"
|
||||
aria-label={m.backgroundImageSourceAria}
|
||||
value={backgroundSource}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value as "none" | "url" | "upload";
|
||||
@@ -84,18 +88,18 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="none">없음</option>
|
||||
<option value="url">URL</option>
|
||||
<option value="upload">파일 업로드</option>
|
||||
<option value="none">{m.backgroundVideoSourceOptionNone}</option>
|
||||
<option value="url">{m.backgroundVideoSourceOptionUrl}</option>
|
||||
<option value="upload">{m.backgroundVideoSourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{backgroundSource === "url" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 이미지 URL</span>
|
||||
<span>{m.backgroundImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="배경 이미지 URL"
|
||||
aria-label={m.backgroundImageUrlAria}
|
||||
value={sectionProps.backgroundImageSrc ?? ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
@@ -111,12 +115,12 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
|
||||
{backgroundSource === "upload" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 이미지 파일 업로드</span>
|
||||
<span>{m.backgroundImageUploadLabel}</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
|
||||
aria-label="배경 이미지 파일 업로드"
|
||||
aria-label={m.backgroundImageUploadAria}
|
||||
onChange={async (event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
@@ -155,10 +159,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
{backgroundSource !== "none" && (
|
||||
<>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 이미지 위치 모드</span>
|
||||
<span>{m.backgroundImagePositionModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="배경 이미지 위치 모드"
|
||||
aria-label={m.backgroundImagePositionModeAria}
|
||||
value={positionMode}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -166,16 +170,16 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="preset">프리셋</option>
|
||||
<option value="custom">커스텀 (X/Y)</option>
|
||||
<option value="preset">{m.backgroundImagePositionModeOptionPreset}</option>
|
||||
<option value="custom">{m.backgroundImagePositionModeOptionCustom}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 이미지 크기</span>
|
||||
<span>{m.backgroundImageSizeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="배경 이미지 크기"
|
||||
aria-label={m.backgroundImageSizeAria}
|
||||
value={sectionProps.backgroundImageSize ?? "cover"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -191,10 +195,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
|
||||
{positionMode === "preset" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 이미지 위치</span>
|
||||
<span>{m.backgroundImagePositionLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="배경 이미지 위치"
|
||||
aria-label={m.backgroundImagePositionAria}
|
||||
value={sectionProps.backgroundImagePosition ?? "center"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -202,11 +206,11 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="center">가운데</option>
|
||||
<option value="top">위</option>
|
||||
<option value="bottom">아래</option>
|
||||
<option value="left">왼쪽</option>
|
||||
<option value="right">오른쪽</option>
|
||||
<option value="center">{m.backgroundImagePositionOptionCenter}</option>
|
||||
<option value="top">{m.backgroundImagePositionOptionTop}</option>
|
||||
<option value="bottom">{m.backgroundImagePositionOptionBottom}</option>
|
||||
<option value="left">{m.backgroundImagePositionOptionLeft}</option>
|
||||
<option value="right">{m.backgroundImagePositionOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
@@ -214,7 +218,7 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
{positionMode === "custom" && (
|
||||
<>
|
||||
<NumericPropertyControl
|
||||
label="배경 이미지 가로 위치"
|
||||
label={m.backgroundImagePositionXLabel}
|
||||
unitLabel="(%)"
|
||||
value={
|
||||
typeof sectionProps.backgroundImagePositionXPercent === "number"
|
||||
@@ -238,7 +242,7 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
/>
|
||||
|
||||
<NumericPropertyControl
|
||||
label="배경 이미지 세로 위치"
|
||||
label={m.backgroundImagePositionYLabel}
|
||||
unitLabel="(%)"
|
||||
value={
|
||||
typeof sectionProps.backgroundImagePositionYPercent === "number"
|
||||
@@ -264,10 +268,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
)}
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 이미지 반복</span>
|
||||
<span>{m.backgroundImageRepeatLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="배경 이미지 반복"
|
||||
aria-label={m.backgroundImageRepeatAria}
|
||||
value={sectionProps.backgroundImageRepeat ?? "no-repeat"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -275,10 +279,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="no-repeat">반복 없음</option>
|
||||
<option value="repeat">가로/세로 반복</option>
|
||||
<option value="repeat-x">가로 반복</option>
|
||||
<option value="repeat-y">세로 반복</option>
|
||||
<option value="no-repeat">{m.backgroundImageRepeatOptionNone}</option>
|
||||
<option value="repeat">{m.backgroundImageRepeatOptionBoth}</option>
|
||||
<option value="repeat-x">{m.backgroundImageRepeatOptionX}</option>
|
||||
<option value="repeat-y">{m.backgroundImageRepeatOptionY}</option>
|
||||
</select>
|
||||
</label>
|
||||
</>
|
||||
@@ -288,10 +292,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
{/* 섹션 배경 비디오 */}
|
||||
<div className="mt-3 space-y-2 text-xs text-slate-400">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 비디오 소스</span>
|
||||
<span>{m.backgroundVideoSourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="배경 비디오 소스"
|
||||
aria-label={m.backgroundVideoSourceAria}
|
||||
value={backgroundVideoSource}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value as "none" | "url" | "upload";
|
||||
@@ -321,10 +325,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
|
||||
{backgroundVideoSource === "url" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 비디오 URL</span>
|
||||
<span>{m.backgroundVideoUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="배경 비디오 URL"
|
||||
aria-label={m.backgroundVideoUrlAria}
|
||||
value={sectionProps.backgroundVideoSrc ?? ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
@@ -340,12 +344,12 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
|
||||
{backgroundVideoSource === "upload" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>배경 비디오 파일 업로드</span>
|
||||
<span>{m.backgroundVideoUploadLabel}</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
|
||||
aria-label="배경 비디오 파일 업로드"
|
||||
aria-label={m.backgroundVideoUploadAria}
|
||||
onChange={async (event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
@@ -386,8 +390,8 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
{/* 세로 패딩 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
|
||||
<div className="mt-3 space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="세로 패딩"
|
||||
unitLabel="(px)"
|
||||
label={m.paddingYLabel}
|
||||
unitLabel={m.paddingYUnitLabel}
|
||||
value={typeof sectionProps.paddingYPx === "number" ? sectionProps.paddingYPx : 48}
|
||||
min={16}
|
||||
max={80}
|
||||
@@ -407,14 +411,14 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
</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>
|
||||
<h4 className="text-[11px] font-semibold text-slate-200">{m.layoutSectionTitle}</h4>
|
||||
|
||||
{/* 컬럼 레이아웃 프리셋 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>섹션 컬럼 레이아웃</span>
|
||||
<span>{m.columnLayoutLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="섹션 컬럼 레이아웃"
|
||||
aria-label={m.columnLayoutAria}
|
||||
value={(() => {
|
||||
const cols = sectionProps.columns ?? [];
|
||||
const spans = cols.map((c) => c.span).join("-");
|
||||
@@ -471,12 +475,12 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
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>
|
||||
<option value="one-full">{m.columnLayoutOptionOneFull}</option>
|
||||
<option value="two-equal">{m.columnLayoutOptionTwoEqual}</option>
|
||||
<option value="two-1-2">{m.columnLayoutOptionTwoOneTwo}</option>
|
||||
<option value="two-2-1">{m.columnLayoutOptionTwoTwoOne}</option>
|
||||
<option value="three-equal">{m.columnLayoutOptionThreeEqual}</option>
|
||||
<option value="custom">{m.columnLayoutOptionCustom}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
@@ -680,8 +684,8 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
|
||||
{/* 최대 폭 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
|
||||
<NumericPropertyControl
|
||||
label="최대 폭 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.maxWidthLabel}
|
||||
unitLabel={m.maxWidthUnitLabel}
|
||||
value={typeof sectionProps.maxWidthPx === "number" ? sectionProps.maxWidthPx : 960}
|
||||
min={640}
|
||||
max={1440}
|
||||
@@ -701,8 +705,8 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
|
||||
{/* 컬럼 간 간격 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
|
||||
<NumericPropertyControl
|
||||
label="컬럼 간 간격 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.gapXLabel}
|
||||
unitLabel={m.gapXUnitLabel}
|
||||
value={typeof sectionProps.gapXPx === "number" ? sectionProps.gapXPx : 24}
|
||||
min={0}
|
||||
max={64}
|
||||
@@ -723,19 +727,19 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
|
||||
|
||||
{/* 세로 정렬 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>컬럼 세로 정렬</span>
|
||||
<span>{m.alignItemsLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="섹션 컬럼 세로 정렬"
|
||||
aria-label={m.alignItemsAria}
|
||||
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>
|
||||
<option value="top">{m.alignItemsOptionTop}</option>
|
||||
<option value="center">{m.alignItemsOptionCenter}</option>
|
||||
<option value="bottom">{m.alignItemsOptionBottom}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,8 @@ 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";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorTextPanelMessages } from "@/features/i18n/messages/editorTextPanel";
|
||||
|
||||
export type TextPropertiesPanelProps = {
|
||||
textProps: TextBlockProps;
|
||||
@@ -20,6 +22,8 @@ export function TextPropertiesPanel({
|
||||
editingBlockId,
|
||||
setEditingText,
|
||||
}: TextPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorTextPanelMessages(locale);
|
||||
const fontSizeMode = textProps.fontSizeMode ?? "scale";
|
||||
const fallbackScale =
|
||||
textProps.size === "sm" ? "sm" : textProps.size === "lg" ? "lg" : "base";
|
||||
@@ -97,10 +101,10 @@ export function TextPropertiesPanel({
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-slate-400">선택한 텍스트 블록 내용</p>
|
||||
<p className="text-xs text-slate-400">{m.selectedTextLabel}</p>
|
||||
<textarea
|
||||
className="w-full min-h-[80px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="선택한 텍스트 블록 내용"
|
||||
aria-label={m.selectedTextAria}
|
||||
value={textProps.text}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
@@ -114,26 +118,26 @@ export function TextPropertiesPanel({
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>정렬</span>
|
||||
<span>{m.alignLabel}</span>
|
||||
<select
|
||||
className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="정렬"
|
||||
aria-label={m.alignAria}
|
||||
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>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between text-[11px] text-slate-400">
|
||||
<span>텍스트 스타일</span>
|
||||
<span>{m.textStyleLabel}</span>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
@@ -148,7 +152,7 @@ export function TextPropertiesPanel({
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
밑줄
|
||||
{m.underlineLabel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -163,7 +167,7 @@ export function TextPropertiesPanel({
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
가운데줄
|
||||
{m.strikeLabel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -178,7 +182,7 @@ export function TextPropertiesPanel({
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
이탤릭
|
||||
{m.italicLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,8 +190,8 @@ export function TextPropertiesPanel({
|
||||
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="글자 크기"
|
||||
unitLabel="(px)"
|
||||
label={m.fontSizeLabel}
|
||||
unitLabel={m.fontSizeUnitLabel}
|
||||
value={Number.isFinite(parsedFontSize) ? parsedFontSize : 16}
|
||||
min={10}
|
||||
max={72}
|
||||
@@ -243,11 +247,11 @@ export function TextPropertiesPanel({
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>글자 간격</span>
|
||||
<span>{m.letterSpacingLabel}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className="w-32 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="글자 간격 프리셋"
|
||||
aria-label={m.letterSpacingPresetAria}
|
||||
value={letterSpacingPreset}
|
||||
onChange={(e) => {
|
||||
const preset = e.target.value as
|
||||
@@ -276,17 +280,17 @@ export function TextPropertiesPanel({
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
<option value="tighter">아주 좁게</option>
|
||||
<option value="tight">좁게</option>
|
||||
<option value="normal">보통</option>
|
||||
<option value="wide">넓게</option>
|
||||
<option value="wider">아주 넓게</option>
|
||||
<option value="tighter">{m.letterSpacingPresetTighter}</option>
|
||||
<option value="tight">{m.letterSpacingPresetTight}</option>
|
||||
<option value="normal">{m.letterSpacingPresetNormal}</option>
|
||||
<option value="wide">{m.letterSpacingPresetWide}</option>
|
||||
<option value="wider">{m.letterSpacingPresetWider}</option>
|
||||
</select>
|
||||
|
||||
<PropertySliderField
|
||||
label=""
|
||||
ariaLabelSlider="글자 간격 슬라이더"
|
||||
ariaLabelInput="글자 간격 커스텀 (px)"
|
||||
ariaLabelSlider={m.letterSpacingSliderAria}
|
||||
ariaLabelInput={m.letterSpacingInputAria}
|
||||
value={Number.isFinite(parsedLetterSpacingPx) ? parsedLetterSpacingPx : 0}
|
||||
min={-2}
|
||||
max={10}
|
||||
@@ -304,18 +308,18 @@ export function TextPropertiesPanel({
|
||||
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="줄 간격"
|
||||
label={m.lineHeightLabel}
|
||||
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 },
|
||||
{ id: "tight", label: m.lineHeightPresetTight, value: 1.25 },
|
||||
{ id: "snug", label: m.lineHeightPresetSnug, value: 1.35 },
|
||||
{ id: "normal", label: m.lineHeightPresetNormal, value: 1.5 },
|
||||
{ id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.7 },
|
||||
{ id: "loose", label: m.lineHeightPresetLoose, value: 1.9 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
const preset: Record<NonNullable<TextBlockProps["lineHeightScale"]>, number> = {
|
||||
@@ -350,7 +354,7 @@ export function TextPropertiesPanel({
|
||||
|
||||
<div className="space-y-1">
|
||||
<NumericPropertyControl
|
||||
label="굵기"
|
||||
label={m.fontWeightLabel}
|
||||
value={Number.isFinite(parsedFontWeight) ? parsedFontWeight : 400}
|
||||
min={100}
|
||||
max={900}
|
||||
@@ -363,12 +367,12 @@ export function TextPropertiesPanel({
|
||||
id: scale,
|
||||
label:
|
||||
scale === "normal"
|
||||
? "보통"
|
||||
? m.fontWeightPresetNormal
|
||||
: scale === "medium"
|
||||
? "중간"
|
||||
? m.fontWeightPresetMedium
|
||||
: scale === "semibold"
|
||||
? "세미볼드"
|
||||
: "볼드",
|
||||
? m.fontWeightPresetSemibold
|
||||
: m.fontWeightPresetBold,
|
||||
value:
|
||||
scale === "normal"
|
||||
? 400
|
||||
@@ -410,9 +414,9 @@ export function TextPropertiesPanel({
|
||||
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="텍스트 색상"
|
||||
ariaLabelColorInput="텍스트 색상 피커"
|
||||
ariaLabelHexInput="텍스트 색상 HEX"
|
||||
label={m.textColorLabel}
|
||||
ariaLabelColorInput={m.textColorPickerAria}
|
||||
ariaLabelHexInput={m.textColorHexAria}
|
||||
value={
|
||||
(textProps.colorCustom && textProps.colorCustom.startsWith("#")
|
||||
? textProps.colorCustom
|
||||
@@ -439,9 +443,9 @@ export function TextPropertiesPanel({
|
||||
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="블록 배경색"
|
||||
ariaLabelColorInput="텍스트 블록 배경색 피커"
|
||||
ariaLabelHexInput="텍스트 블록 배경색 HEX"
|
||||
label={m.backgroundColorLabel}
|
||||
ariaLabelColorInput={m.backgroundColorPickerAria}
|
||||
ariaLabelHexInput={m.backgroundColorHexAria}
|
||||
value={textProps.backgroundColorCustom ?? ""}
|
||||
onChange={(hex) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -454,11 +458,11 @@ export function TextPropertiesPanel({
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>최대 너비</span>
|
||||
<span>{m.maxWidthLabel}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className="w-32 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="최대 너비 프리셋"
|
||||
aria-label={m.maxWidthPresetAria}
|
||||
value={maxWidthScale}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as NonNullable<TextBlockProps["maxWidthScale"]>;
|
||||
@@ -473,16 +477,16 @@ export function TextPropertiesPanel({
|
||||
} as any);
|
||||
}}
|
||||
>
|
||||
<option value="none">제한 없음</option>
|
||||
<option value="prose">본문 폭 (60ch)</option>
|
||||
<option value="narrow">좁게 (40ch)</option>
|
||||
<option value="none">{m.maxWidthPresetNone}</option>
|
||||
<option value="prose">{m.maxWidthPresetProse}</option>
|
||||
<option value="narrow">{m.maxWidthPresetNarrow}</option>
|
||||
</select>
|
||||
<input
|
||||
type="range"
|
||||
min={20}
|
||||
max={120}
|
||||
step={5}
|
||||
aria-label="최대 너비 슬라이더 (ch 단위)"
|
||||
aria-label={m.maxWidthSliderAria}
|
||||
value={(() => {
|
||||
const raw = textProps.maxWidthCustom ?? "";
|
||||
const match = raw.match(/([0-9]+)ch/);
|
||||
@@ -503,8 +507,8 @@ export function TextPropertiesPanel({
|
||||
</div>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="최대 너비 커스텀"
|
||||
placeholder="예: 600px, 40rem, 80%, 60ch"
|
||||
aria-label={m.maxWidthCustomAria}
|
||||
placeholder={m.maxWidthPlaceholder}
|
||||
value={textProps.maxWidthCustom ?? ""}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
import type { VideoBlockProps } from "@/features/editor/state/editorStore";
|
||||
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
|
||||
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getEditorVideoPanelMessages } from "@/features/i18n/messages/editorVideoPanel";
|
||||
|
||||
export type VideoPropertiesPanelProps = {
|
||||
videoProps: VideoBlockProps;
|
||||
@@ -11,6 +13,8 @@ export type VideoPropertiesPanelProps = {
|
||||
};
|
||||
|
||||
export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock }: VideoPropertiesPanelProps) {
|
||||
const locale = useAppLocale();
|
||||
const m = getEditorVideoPanelMessages(locale);
|
||||
// 비디오 소스 유형: 업로드(/api/video/:id) 또는 외부 URL 구분
|
||||
const source: "url" | "upload" =
|
||||
videoProps.sourceType === "asset" || (videoProps.sourceUrl && videoProps.sourceUrl.startsWith("/api/video/"))
|
||||
@@ -22,10 +26,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
{/* 비디오 소스 선택 (URL / 업로드) */}
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>비디오 소스</span>
|
||||
<span>{m.sourceLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="비디오 소스"
|
||||
aria-label={m.sourceAria}
|
||||
value={source}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value as "url" | "upload";
|
||||
@@ -41,8 +45,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="url">URL</option>
|
||||
<option value="upload">파일 업로드</option>
|
||||
<option value="url">{m.sourceOptionUrl}</option>
|
||||
<option value="upload">{m.sourceOptionUpload}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
@@ -51,10 +55,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
{source === "url" && (
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>비디오 URL</span>
|
||||
<span>{m.urlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="비디오 URL"
|
||||
aria-label={m.urlAria}
|
||||
value={videoProps.sourceUrl ?? ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
@@ -70,10 +74,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
{/* 접근성: 제목 / aria-label / 캡션 텍스트 (현재는 UI에서 숨김 처리) */}
|
||||
<div className="hidden">
|
||||
<label className="flex flex-col gap-1 mt-2">
|
||||
<span>비디오 제목</span>
|
||||
<span>{m.titleLabel}</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="비디오 제목"
|
||||
aria-label={m.titleAria}
|
||||
value={(videoProps as any).titleText ?? ""}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { titleText: e.target.value } as any);
|
||||
@@ -82,10 +86,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
</label>
|
||||
|
||||
<label className="mt-2 flex flex-col gap-1">
|
||||
<span>비디오 aria-label</span>
|
||||
<span>{m.ariaLabelLabel}</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="비디오 aria-label"
|
||||
aria-label={m.ariaLabelAria}
|
||||
value={(videoProps as any).ariaLabel ?? ""}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { ariaLabel: e.target.value } as any);
|
||||
@@ -94,10 +98,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
</label>
|
||||
|
||||
<label className="mt-2 flex flex-col gap-1">
|
||||
<span>비디오 캡션 텍스트</span>
|
||||
<span>{m.captionTextLabel}</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="비디오 캡션 텍스트"
|
||||
aria-label={m.captionTextAria}
|
||||
value={(videoProps as any).captionText ?? ""}
|
||||
onChange={(e) => {
|
||||
updateBlock(selectedBlockId, { captionText: e.target.value } as any);
|
||||
@@ -110,10 +114,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
|
||||
<div className="mt-3 space-y-1 text-xs text-slate-400">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>포스터 이미지 URL</span>
|
||||
<span>{m.posterImageUrlLabel}</span>
|
||||
<input
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="포스터 이미지 URL"
|
||||
aria-label={m.posterImageUrlAria}
|
||||
value={videoProps.posterImageSrc ?? ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
@@ -131,12 +135,12 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
{source === "upload" && (
|
||||
<div className="space-y-1">
|
||||
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
||||
<span>비디오 파일 업로드</span>
|
||||
<span>{m.uploadLabel}</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
|
||||
aria-label="비디오 파일 업로드"
|
||||
aria-label={m.uploadAria}
|
||||
onChange={async (event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
@@ -175,14 +179,14 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
)}
|
||||
|
||||
<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-800 dark:text-slate-200">비디오 스타일</h4>
|
||||
<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
|
||||
|
||||
{/* 카드 배경색 */}
|
||||
<div className="space-y-1">
|
||||
<ColorPickerField
|
||||
label="카드 배경색"
|
||||
ariaLabelColorInput="비디오 카드 배경색 피커"
|
||||
ariaLabelHexInput="비디오 카드 배경색 HEX"
|
||||
label={m.cardBackgroundLabel}
|
||||
ariaLabelColorInput={m.cardBackgroundPickerAria}
|
||||
ariaLabelHexInput={m.cardBackgroundHexAria}
|
||||
value={videoProps.backgroundColorCustom ?? ""}
|
||||
onChange={(hex) => {
|
||||
const next = hex && hex.trim().length > 0 ? hex : undefined;
|
||||
@@ -194,10 +198,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
|
||||
{/* 정렬 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>비디오 정렬</span>
|
||||
<span>{m.alignLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="비디오 정렬"
|
||||
aria-label={m.alignAria}
|
||||
value={videoProps.align ?? "center"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -205,18 +209,18 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="left">왼쪽</option>
|
||||
<option value="center">가운데</option>
|
||||
<option value="right">오른쪽</option>
|
||||
<option value="left">{m.alignOptionLeft}</option>
|
||||
<option value="center">{m.alignOptionCenter}</option>
|
||||
<option value="right">{m.alignOptionRight}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* 너비 모드 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>비디오 너비 모드</span>
|
||||
<span>{m.widthModeLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="비디오 너비 모드"
|
||||
aria-label={m.widthModeAria}
|
||||
value={videoProps.widthMode ?? "auto"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -224,24 +228,24 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
>
|
||||
<option value="auto">내용에 맞춤</option>
|
||||
<option value="full">가로 전체</option>
|
||||
<option value="fixed">고정 너비 (px)</option>
|
||||
<option value="auto">{m.widthModeOptionAuto}</option>
|
||||
<option value="full">{m.widthModeOptionFull}</option>
|
||||
<option value="fixed">{m.widthModeOptionFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{(videoProps.widthMode ?? "auto") === "fixed" && (
|
||||
<NumericPropertyControl
|
||||
label="고정 너비 (px)"
|
||||
unitLabel="(px)"
|
||||
label={m.fixedWidthLabel}
|
||||
unitLabel={m.fixedWidthUnitLabel}
|
||||
value={videoProps.widthPx ?? 640}
|
||||
min={160}
|
||||
max={1920}
|
||||
step={10}
|
||||
presets={[
|
||||
{ id: "sm", label: "작게", value: 480 },
|
||||
{ id: "md", label: "보통", value: 640 },
|
||||
{ id: "lg", label: "넓게", value: 960 },
|
||||
{ id: "sm", label: m.fixedWidthPresetSmall, value: 480 },
|
||||
{ id: "md", label: m.fixedWidthPresetMedium, value: 640 },
|
||||
{ id: "lg", label: m.fixedWidthPresetLarge, value: 960 },
|
||||
]}
|
||||
onChangeValue={(v) => {
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -253,8 +257,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
|
||||
{/* 카드 패딩 */}
|
||||
<NumericPropertyControl
|
||||
label="카드 패딩"
|
||||
unitLabel="(px)"
|
||||
label={m.cardPaddingLabel}
|
||||
unitLabel={m.cardPaddingUnitLabel}
|
||||
value={typeof videoProps.cardPaddingPx === "number" ? videoProps.cardPaddingPx : 0}
|
||||
min={0}
|
||||
max={64}
|
||||
@@ -267,8 +271,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
|
||||
{/* 카드 모서리 둥글기 */}
|
||||
<NumericPropertyControl
|
||||
label="카드 모서리 둥글기"
|
||||
unitLabel="(px)"
|
||||
label={m.cardBorderRadiusLabel}
|
||||
unitLabel={m.cardBorderRadiusUnitLabel}
|
||||
value={typeof videoProps.borderRadiusPx === "number" ? videoProps.borderRadiusPx : 0}
|
||||
min={0}
|
||||
max={64}
|
||||
@@ -281,8 +285,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
|
||||
{/* 시작 시점 (초) */}
|
||||
<NumericPropertyControl
|
||||
label="시작 시점 (초)"
|
||||
unitLabel="(초)"
|
||||
label={m.startTimeLabel}
|
||||
unitLabel={m.startTimeUnitLabel}
|
||||
value={typeof videoProps.startTimeSec === "number" ? videoProps.startTimeSec : 0}
|
||||
min={0}
|
||||
max={600}
|
||||
@@ -295,8 +299,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
|
||||
{/* 종료 시점 (초) */}
|
||||
<NumericPropertyControl
|
||||
label="종료 시점 (초)"
|
||||
unitLabel="(초)"
|
||||
label={m.endTimeLabel}
|
||||
unitLabel={m.endTimeUnitLabel}
|
||||
value={typeof videoProps.endTimeSec === "number" ? videoProps.endTimeSec : 0}
|
||||
min={0}
|
||||
max={600}
|
||||
@@ -309,10 +313,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
|
||||
{/* 화면 비율 */}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span>화면 비율</span>
|
||||
<span>{m.aspectRatioLabel}</span>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
aria-label="화면 비율"
|
||||
aria-label={m.aspectRatioAria}
|
||||
value={videoProps.aspectRatio ?? "16:9"}
|
||||
onChange={(e) =>
|
||||
updateBlock(selectedBlockId, {
|
||||
@@ -339,7 +343,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<span className="text-[11px]">자동 재생</span>
|
||||
<span className="text-[11px]">{m.autoplayLabel}</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
@@ -352,7 +356,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<span className="text-[11px]">반복 재생</span>
|
||||
<span className="text-[11px]">{m.loopLabel}</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
@@ -365,7 +369,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<span className="text-[11px]">음소거</span>
|
||||
<span className="text-[11px]">{m.mutedLabel}</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
@@ -378,7 +382,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
|
||||
} as any)
|
||||
}
|
||||
/>
|
||||
<span className="text-[11px]">재생 컨트롤 표시</span>
|
||||
<span className="text-[11px]">{m.controlsLabel}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+14
-3
@@ -1,17 +1,28 @@
|
||||
import "../styles/globals.css";
|
||||
import "../styles/builder.css";
|
||||
import type { ReactNode } from "react";
|
||||
import { headers } from "next/headers";
|
||||
import { LocaleProvider } from "@/features/i18n/LocaleProvider";
|
||||
import { LocaleSwitcher } from "@/features/i18n/LocaleSwitcher";
|
||||
import { resolveLocaleFromAcceptLanguage, DEFAULT_LOCALE } from "@/features/i18n/locale";
|
||||
|
||||
export const metadata = {
|
||||
title: "Page Builder",
|
||||
description: "No-code single page builder",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: ReactNode }) {
|
||||
export default async function RootLayout({ children }: { children: ReactNode }) {
|
||||
const headerList = await headers();
|
||||
const acceptLanguage = headerList.get("accept-language");
|
||||
const locale = resolveLocaleFromAcceptLanguage(acceptLanguage ?? undefined) ?? DEFAULT_LOCALE;
|
||||
|
||||
return (
|
||||
<html lang="ko" suppressHydrationWarning>
|
||||
<html lang={locale} suppressHydrationWarning>
|
||||
<body className="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
{children}
|
||||
<LocaleProvider initialLocale={locale}>
|
||||
{children}
|
||||
<LocaleSwitcher />
|
||||
</LocaleProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
+18
-12
@@ -4,6 +4,8 @@ import { FormEvent, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { SunMoon } from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getAuthMessages } from "@/features/i18n/messages/auth";
|
||||
|
||||
// 로그인 페이지 컴포넌트
|
||||
// - 이메일/비밀번호를 입력받아 /api/auth/login 으로 요청을 전송한다.
|
||||
@@ -12,6 +14,9 @@ import { SunMoon } from "lucide-react";
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const locale = useAppLocale();
|
||||
const { login: t } = getAuthMessages(locale);
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -67,9 +72,9 @@ export default function LoginPage() {
|
||||
if (!res.ok) {
|
||||
try {
|
||||
const data = await res.json();
|
||||
setError(data?.message ?? "로그인에 실패했습니다. 다시 시도해 주세요.");
|
||||
setError(data?.message ?? t.errorLoginFailed);
|
||||
} catch {
|
||||
setError("로그인에 실패했습니다. 다시 시도해 주세요.");
|
||||
setError(t.errorLoginFailed);
|
||||
}
|
||||
setLoading(false);
|
||||
return;
|
||||
@@ -78,7 +83,7 @@ export default function LoginPage() {
|
||||
// 성공 시에는 /dashboard 로 이동한다.
|
||||
router.push("/dashboard");
|
||||
} catch {
|
||||
setError("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setError(t.errorNetwork);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -88,24 +93,24 @@ export default function LoginPage() {
|
||||
<main className="min-h-screen flex items-center justify-center bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<div className="w-full max-w-sm rounded-lg border border-slate-200 bg-white p-6 shadow-xl dark:border-slate-800 dark:bg-slate-900/70">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h1 className="text-lg font-semibold">로그인</h1>
|
||||
<h1 className="text-lg font-semibold">{t.title}</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-2 py-1 text-[11px] font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
onClick={handleToggleTheme}
|
||||
>
|
||||
<SunMoon className="w-4 h-4" aria-hidden="true" />
|
||||
<span>테마 전환</span>
|
||||
<span>{t.themeToggleLabel}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mb-4 dark:text-slate-400">프로젝트를 관리하려면 먼저 계정으로 로그인하세요.</p>
|
||||
<p className="text-xs text-slate-500 mb-4 dark:text-slate-400">{t.description}</p>
|
||||
|
||||
{error && <p className="mb-3 text-xs text-red-300">{error}</p>}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-3 text-xs">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="email" className="block text-slate-800 dark:text-slate-200">
|
||||
이메일
|
||||
{t.emailLabel}
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
@@ -119,7 +124,7 @@ export default function LoginPage() {
|
||||
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="password" className="block text-slate-800 dark:text-slate-200">
|
||||
비밀번호
|
||||
{t.passwordLabel}
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
@@ -137,17 +142,18 @@ export default function LoginPage() {
|
||||
disabled={loading}
|
||||
className="mt-2 w-full inline-flex items-center justify-center gap-1 rounded bg-sky-600 hover:bg-sky-500 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-1 text-xs font-medium"
|
||||
>
|
||||
{loading ? "로그인 중..." : "로그인"}
|
||||
{loading ? t.submitLoading : t.submitIdle}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
아직 계정이 없다면
|
||||
{t.signupPromptPrefix}
|
||||
{" "}
|
||||
<Link href="/signup" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
|
||||
회원가입
|
||||
{t.signupLinkText}
|
||||
</Link>
|
||||
을 진행해 주세요.
|
||||
{t.signupPromptSuffix && " "}
|
||||
{t.signupPromptSuffix}
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -4,11 +4,15 @@ import type { CSSProperties } from "react";
|
||||
import { useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getPreviewMessages } from "@/features/i18n/messages/preview";
|
||||
import { useEditorStore } from "@/features/editor/state/editorStore";
|
||||
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
|
||||
|
||||
export default function PreviewPage() {
|
||||
const router = useRouter();
|
||||
const locale = useAppLocale();
|
||||
const m = getPreviewMessages(locale);
|
||||
const blocks = useEditorStore((state) => state.blocks);
|
||||
const projectConfig = useEditorStore((state) => (state as any).projectConfig);
|
||||
const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
|
||||
@@ -164,8 +168,8 @@ export default function PreviewPage() {
|
||||
<main className="min-h-screen flex flex-col" style={mainStyle}>
|
||||
<header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">Page Preview</h1>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">빌더로 만든 페이지를 미리 보는 화면</p>
|
||||
<h1 className="text-xl font-semibold">{m.headerTitle}</h1>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{m.headerDescription}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<button
|
||||
@@ -175,19 +179,19 @@ export default function PreviewPage() {
|
||||
void handleExportZip();
|
||||
}}
|
||||
>
|
||||
페이지 파일로 내보내기 (ZIP)
|
||||
{m.exportZipButtonLabel}
|
||||
</button>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center rounded border border-slate-300 bg-white px-3 py-1 text-xs text-slate-800 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
프로젝트 목록
|
||||
{m.navProjects}
|
||||
</Link>
|
||||
<Link
|
||||
href={editorHref}
|
||||
className="inline-flex items-center rounded border border-slate-300 bg-white px-3 py-1 text-xs text-slate-800 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
에디터로 돌아가기
|
||||
{m.navBackToEditor}
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
+47
-45
@@ -15,6 +15,9 @@ import {
|
||||
FolderKanban,
|
||||
SunMoon,
|
||||
} from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
|
||||
import { getProjectsMessages } from "@/features/i18n/messages/projects";
|
||||
|
||||
interface ProjectListItem {
|
||||
id: string;
|
||||
@@ -27,6 +30,9 @@ interface ProjectListItem {
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const router = useRouter();
|
||||
const locale = useAppLocale();
|
||||
const t = getDashboardMessages(locale);
|
||||
const p = getProjectsMessages(locale);
|
||||
const [projects, setProjects] = useState<ProjectListItem[]>([]);
|
||||
const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
@@ -49,12 +55,10 @@ export default function ProjectsPage() {
|
||||
setStatus("error");
|
||||
|
||||
if (res.status === 401) {
|
||||
setErrorMessage("프로젝트 목록을 불러오는 중 인증 오류가 발생했습니다. 다시 로그인해 주세요.");
|
||||
setErrorMessage(p.errorFetchUnauthorized);
|
||||
router.push("/login");
|
||||
} else {
|
||||
setErrorMessage(
|
||||
"프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
|
||||
);
|
||||
setErrorMessage(p.errorFetchGeneric);
|
||||
}
|
||||
}
|
||||
return;
|
||||
@@ -69,7 +73,7 @@ export default function ProjectsPage() {
|
||||
} catch {
|
||||
if (!cancelled) {
|
||||
setStatus("error");
|
||||
setErrorMessage("프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(p.errorFetchGeneric);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -88,9 +92,7 @@ export default function ProjectsPage() {
|
||||
|
||||
const handleDelete = async (slug: string) => {
|
||||
if (typeof window !== "undefined") {
|
||||
const confirmed = window.confirm(
|
||||
"이 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
|
||||
);
|
||||
const confirmed = window.confirm(p.confirmDeleteSingle);
|
||||
|
||||
if (!confirmed) return;
|
||||
}
|
||||
@@ -102,7 +104,7 @@ export default function ProjectsPage() {
|
||||
|
||||
if (!res.ok) {
|
||||
setStatus("error");
|
||||
setErrorMessage("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(p.errorDeleteSingle);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -118,7 +120,7 @@ export default function ProjectsPage() {
|
||||
setErrorMessage(null);
|
||||
} catch {
|
||||
setStatus("error");
|
||||
setErrorMessage("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(p.errorDeleteSingle);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -152,9 +154,7 @@ export default function ProjectsPage() {
|
||||
if (slugs.length === 0) return;
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
const confirmed = window.confirm(
|
||||
"선택한 프로젝트를 모두 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
|
||||
);
|
||||
const confirmed = window.confirm(p.confirmDeleteBulk);
|
||||
if (!confirmed) return;
|
||||
}
|
||||
|
||||
@@ -170,7 +170,7 @@ export default function ProjectsPage() {
|
||||
|
||||
if (okSlugs.length === 0) {
|
||||
setStatus("error");
|
||||
setErrorMessage("선택한 프로젝트를 삭제하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(p.errorDeleteBulkAllFailed);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -186,16 +186,14 @@ export default function ProjectsPage() {
|
||||
|
||||
if (okSlugs.length !== slugs.length) {
|
||||
setStatus("error");
|
||||
setErrorMessage(
|
||||
"일부 프로젝트 삭제에 실패했습니다. 페이지를 새로고침한 뒤 목록을 확인해 주세요.",
|
||||
);
|
||||
setErrorMessage(p.errorDeleteBulkSomeFailed);
|
||||
} else {
|
||||
setStatus("idle");
|
||||
setErrorMessage(null);
|
||||
}
|
||||
} catch {
|
||||
setStatus("error");
|
||||
setErrorMessage("선택한 프로젝트를 삭제하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(p.errorDeleteBulkAllFailed);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -216,8 +214,8 @@ export default function ProjectsPage() {
|
||||
<main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">프로젝트 목록</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">저장된 프로젝트들을 한 눈에 볼 수 있는 목록</p>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{p.headerTitle}</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{p.headerDescription}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
|
||||
@@ -226,7 +224,7 @@ export default function ProjectsPage() {
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" aria-hidden="true" />
|
||||
<span>대시보드</span>
|
||||
<span>{t.navDashboard}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects"
|
||||
@@ -234,14 +232,14 @@ export default function ProjectsPage() {
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-sky-600 text-white shadow-sm hover:bg-sky-700"
|
||||
>
|
||||
<FolderKanban className="w-4 h-4" aria-hidden="true" />
|
||||
<span>프로젝트 목록</span>
|
||||
<span>{t.navProjects}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects/submissions"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-emerald-700 hover:bg-emerald-50 hover:text-emerald-800 dark:text-emerald-200 dark:hover:bg-emerald-900/60 dark:hover:text-emerald-100"
|
||||
>
|
||||
<ListChecks className="w-4 h-4" aria-hidden="true" />
|
||||
<span>전체 제출 내역</span>
|
||||
<span>{t.navSubmissions}</span>
|
||||
</Link>
|
||||
</nav>
|
||||
<button
|
||||
@@ -250,7 +248,7 @@ export default function ProjectsPage() {
|
||||
onClick={handleToggleTheme}
|
||||
>
|
||||
<SunMoon className="w-4 h-4" aria-hidden="true" />
|
||||
<span>테마 전환</span>
|
||||
<span>{t.themeToggleLabel}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
@@ -260,7 +258,7 @@ export default function ProjectsPage() {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
메뉴
|
||||
{t.menuLabel}
|
||||
</button>
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
|
||||
@@ -272,7 +270,7 @@ export default function ProjectsPage() {
|
||||
void handleLogout();
|
||||
}}
|
||||
>
|
||||
로그아웃
|
||||
{t.logoutLabel}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -282,7 +280,7 @@ export default function ProjectsPage() {
|
||||
<section className="flex-1 px-6 py-4 overflow-auto bg-slate-50/60 dark:bg-transparent">
|
||||
{status === "error" && (
|
||||
<p className="text-xs text-red-500 mb-3 dark:text-red-300">
|
||||
{errorMessage ?? "프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."}
|
||||
{errorMessage ?? p.errorFetchGeneric}
|
||||
</p>
|
||||
)}
|
||||
{projects.length === 0 && status === "idle" && (
|
||||
@@ -298,7 +296,9 @@ export default function ProjectsPage() {
|
||||
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full border bg-slate-100 border-slate-300 text-slate-700 dark:bg-slate-900/70 dark:border-slate-700 dark:text-slate-200">
|
||||
<ListChecks className="w-3 h-3 text-slate-400 dark:text-slate-500" aria-hidden="true" />
|
||||
<span>
|
||||
선택된 프로젝트: <span className="font-semibold">{selectedSlugs.length}</span>개
|
||||
{p.toolbarSelectedPrefix}
|
||||
<span className="font-semibold">{selectedSlugs.length}</span>
|
||||
{p.toolbarSelectedSuffix}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -312,14 +312,14 @@ export default function ProjectsPage() {
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>선택 삭제</span>
|
||||
<span>{p.toolbarDeleteSelected}</span>
|
||||
</button>
|
||||
<Link
|
||||
href="/editor?new=1"
|
||||
className="inline-flex items-center gap-1 rounded border px-2 py-1 text-xs font-medium border-sky-500 bg-sky-600 text-white hover:bg-sky-700 shadow-sm dark:border-sky-700 dark:bg-sky-950 dark:text-sky-100 dark:hover:bg-sky-900"
|
||||
>
|
||||
<FilePlus2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>새 프로젝트 만들기</span>
|
||||
<span>{p.toolbarCreateNew}</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -330,7 +330,7 @@ export default function ProjectsPage() {
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3 w-3 rounded border-slate-700 bg-slate-900 align-middle"
|
||||
aria-label="전체 선택"
|
||||
aria-label={p.tableHeaderSelectAllAria}
|
||||
checked={
|
||||
pageProjects.length > 0 && pageProjects.every((p) => selectedSlugs.includes(p.slug))
|
||||
}
|
||||
@@ -345,12 +345,12 @@ export default function ProjectsPage() {
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
<th className="py-2 pr-4">제목</th>
|
||||
<th className="py-2 pr-4">주소(slug)</th>
|
||||
<th className="py-2 pr-4">상태</th>
|
||||
<th className="py-2 pr-4">생성일</th>
|
||||
<th className="py-2 pr-4">수정일</th>
|
||||
<th className="py-2 pr-4 text-right">액션</th>
|
||||
<th className="py-2 pr-4">{p.tableHeaderTitle}</th>
|
||||
<th className="py-2 pr-4">{p.tableHeaderSlug}</th>
|
||||
<th className="py-2 pr-4">{p.tableHeaderStatus}</th>
|
||||
<th className="py-2 pr-4">{p.tableHeaderCreatedAt}</th>
|
||||
<th className="py-2 pr-4">{p.tableHeaderUpdatedAt}</th>
|
||||
<th className="py-2 pr-4 text-right">{p.tableHeaderActions}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -365,7 +365,7 @@ export default function ProjectsPage() {
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3 w-3 rounded border-slate-700 bg-slate-900 align-middle"
|
||||
aria-label={`${project.title} 선택`}
|
||||
aria-label={`${project.title}${p.tableRowSelectAriaSuffix}`}
|
||||
checked={checked}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
@@ -394,21 +394,21 @@ export default function ProjectsPage() {
|
||||
className="inline-flex items-center gap-1 text-sky-600 hover:text-sky-700 underline-offset-2 hover:underline dark:text-sky-300 dark:hover:text-sky-200"
|
||||
>
|
||||
<Pencil className="w-3 h-3" aria-hidden="true" />
|
||||
<span>편집</span>
|
||||
<span>{p.actionEdit}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/preview?slug=${encodeURIComponent(project.slug)}`}
|
||||
className="inline-flex items-center gap-1 text-slate-600 hover:text-slate-800 underline-offset-2 hover:underline dark:text-slate-300 dark:hover:text-slate-100"
|
||||
>
|
||||
<Eye className="w-3 h-3" aria-hidden="true" />
|
||||
<span>미리보기</span>
|
||||
<span>{p.actionPreview}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/projects/${encodeURIComponent(project.slug)}/submissions`}
|
||||
className="inline-flex items-center gap-1 text-emerald-600 hover:text-emerald-700 underline-offset-2 hover:underline dark:text-emerald-300 dark:hover:text-emerald-100"
|
||||
>
|
||||
<ListChecks className="w-3 h-3" aria-hidden="true" />
|
||||
<span>폼 제출 내역</span>
|
||||
<span>{p.actionViewSubmissions}</span>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
@@ -418,7 +418,7 @@ export default function ProjectsPage() {
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" aria-hidden="true" />
|
||||
<span>삭제</span>
|
||||
<span>{p.actionDelete}</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
@@ -431,7 +431,9 @@ export default function ProjectsPage() {
|
||||
<div className="mt-3 flex items-center justify-between text-[11px] text-slate-600 dark:text-slate-300">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="px-2 py-1 rounded-full bg-slate-100 border border-slate-300 text-slate-700 dark:bg-slate-900/70 dark:border-slate-700 dark:text-slate-200">
|
||||
전체 {totalCount}개 중{" "}
|
||||
{p.pagerTotalPrefix}
|
||||
{totalCount}
|
||||
{p.pagerTotalCountSuffix}
|
||||
<span className="font-semibold">
|
||||
{totalCount === 0 ? 0 : startIndex + 1}–{Math.min(endIndex, totalCount)}
|
||||
</span>
|
||||
@@ -465,7 +467,7 @@ export default function ProjectsPage() {
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
<ChevronLeft className="w-3 h-3" aria-hidden="true" />
|
||||
<span>이전</span>
|
||||
<span>{p.pagerPrevLabel}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -473,7 +475,7 @@ export default function ProjectsPage() {
|
||||
className="inline-flex items-center gap-1 px-2 py-1 rounded border border-slate-300 text-slate-700 bg-white disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:bg-slate-900 dark:hover:bg-slate-800"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
>
|
||||
<span>다음</span>
|
||||
<span>{p.pagerNextLabel}</span>
|
||||
<ChevronRight className="w-3 h-3" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,9 @@ import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
|
||||
import { getSubmissionsMessages } from "@/features/i18n/messages/submissions";
|
||||
|
||||
interface SubmissionItem {
|
||||
id: string;
|
||||
@@ -17,6 +20,9 @@ type PageStatus = "idle" | "loading" | "error";
|
||||
|
||||
export default function AllProjectSubmissionsPage() {
|
||||
const router = useRouter();
|
||||
const locale = useAppLocale();
|
||||
const t = getDashboardMessages(locale);
|
||||
const m = getSubmissionsMessages(locale);
|
||||
const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
|
||||
const [status, setStatus] = useState<PageStatus>("idle");
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
@@ -37,13 +43,13 @@ export default function AllProjectSubmissionsPage() {
|
||||
|
||||
if (res.status === 401) {
|
||||
setStatus("error");
|
||||
setErrorMessage("폼 제출 내역을 조회하려면 로그인이 필요합니다. 다시 로그인해 주세요.");
|
||||
setErrorMessage(m.errorUnauthorized);
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("error");
|
||||
setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(m.errorGeneric);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -57,7 +63,7 @@ export default function AllProjectSubmissionsPage() {
|
||||
} catch {
|
||||
if (!cancelled) {
|
||||
setStatus("error");
|
||||
setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(m.errorGeneric);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -92,13 +98,13 @@ export default function AllProjectSubmissionsPage() {
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
setErrorMessage("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(m.errorLogout);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/login");
|
||||
} catch {
|
||||
setErrorMessage("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setErrorMessage(m.errorLogout);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -106,8 +112,8 @@ export default function AllProjectSubmissionsPage() {
|
||||
<main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">전체 폼 제출 내역</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">로그인한 계정의 모든 프로젝트에 대한 폼 제출 데이터를 확인할 수 있습니다.</p>
|
||||
<h1 className="text-2xl font-bold tracking-tight">{m.headerTitle}</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{m.headerDescription}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
|
||||
@@ -116,14 +122,14 @@ export default function AllProjectSubmissionsPage() {
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" aria-hidden="true" />
|
||||
<span>대시보드</span>
|
||||
<span>{t.navDashboard}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
|
||||
>
|
||||
<FolderKanban className="w-4 h-4" aria-hidden="true" />
|
||||
<span>프로젝트 목록</span>
|
||||
<span>{t.navProjects}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects/submissions"
|
||||
@@ -131,7 +137,7 @@ export default function AllProjectSubmissionsPage() {
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-emerald-600 text-white shadow-sm hover:bg-emerald-700"
|
||||
>
|
||||
<ListChecks className="w-4 h-4" aria-hidden="true" />
|
||||
<span>전체 제출 내역</span>
|
||||
<span>{t.navSubmissions}</span>
|
||||
</Link>
|
||||
</nav>
|
||||
<button
|
||||
@@ -151,7 +157,7 @@ export default function AllProjectSubmissionsPage() {
|
||||
}}
|
||||
>
|
||||
<SunMoon className="w-4 h-4" aria-hidden="true" />
|
||||
<span>테마 전환</span>
|
||||
<span>{t.themeToggleLabel}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
@@ -161,7 +167,7 @@ export default function AllProjectSubmissionsPage() {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
메뉴
|
||||
{t.menuLabel}
|
||||
</button>
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
|
||||
@@ -173,7 +179,7 @@ export default function AllProjectSubmissionsPage() {
|
||||
void handleLogout();
|
||||
}}
|
||||
>
|
||||
로그아웃
|
||||
{t.logoutLabel}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -187,25 +193,25 @@ export default function AllProjectSubmissionsPage() {
|
||||
)}
|
||||
|
||||
{status === "loading" && (
|
||||
<p className="text-xs text-slate-500 mb-3 dark:text-slate-400">폼 제출 내역을 불러오는 중입니다...</p>
|
||||
<p className="text-xs text-slate-500 mb-3 dark:text-slate-400">{m.loadingText}</p>
|
||||
)}
|
||||
|
||||
{submissions.length === 0 && status === "idle" && !errorMessage && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">아직 수집된 폼 제출 내역이 없습니다.</p>
|
||||
{status === "idle" && !errorMessage && submissions.length === 0 && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{m.emptyText}</p>
|
||||
)}
|
||||
|
||||
{submissions.length > 0 && (
|
||||
<table className="w-full text-xs text-left border-collapse mt-2">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 text-slate-600 dark:border-slate-800 dark:text-slate-400">
|
||||
<th className="py-2 pr-4">제출 시각</th>
|
||||
<th className="py-2 pr-4">프로젝트</th>
|
||||
<th className="py-2 pr-4">Slug</th>
|
||||
<th className="py-2 pr-4">이름</th>
|
||||
<th className="py-2 pr-4">이메일</th>
|
||||
<th className="py-2 pr-4">전화번호</th>
|
||||
<th className="py-2 pr-4">생년월일</th>
|
||||
<th className="py-2 pr-4">기타 필드</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderCreatedAt}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderProject}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderSlug}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderName}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderEmail}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderPhone}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderBirthdate}</th>
|
||||
<th className="py-2 pr-4">{m.tableHeaderOtherFields}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
+37
-22
@@ -3,8 +3,10 @@
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { useAppLocale } from "@/features/i18n/LocaleProvider";
|
||||
import { getAuthMessages } from "@/features/i18n/messages/auth";
|
||||
|
||||
type PasswordStrengthLabel = "약함" | "보통" | "강함";
|
||||
type PasswordStrengthLabel = "weak" | "medium" | "strong";
|
||||
|
||||
function getPasswordStrengthLabel(password: string): PasswordStrengthLabel | null {
|
||||
if (!password || password.length < 4) {
|
||||
@@ -19,19 +21,22 @@ function getPasswordStrengthLabel(password: string): PasswordStrengthLabel | nul
|
||||
if (password.length >= 12) score += 1;
|
||||
|
||||
if (password.length < 8 || score <= 2) {
|
||||
return "약함";
|
||||
return "weak";
|
||||
}
|
||||
|
||||
if (score === 3) {
|
||||
return "보통";
|
||||
return "medium";
|
||||
}
|
||||
|
||||
return "강함";
|
||||
return "strong";
|
||||
}
|
||||
|
||||
export default function SignupPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const locale = useAppLocale();
|
||||
const { signup: t } = getAuthMessages(locale);
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [passwordConfirm, setPasswordConfirm] = useState("");
|
||||
@@ -64,7 +69,7 @@ export default function SignupPage() {
|
||||
|
||||
setError(null);
|
||||
if (password !== passwordConfirm) {
|
||||
setError("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
|
||||
setError(t.mismatchError);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -80,9 +85,9 @@ export default function SignupPage() {
|
||||
if (!res.ok) {
|
||||
try {
|
||||
const data = await res.json();
|
||||
setError(data?.message ?? "회원가입에 실패했습니다. 다시 시도해 주세요.");
|
||||
setError(data?.message ?? t.signupFailedFallbackError);
|
||||
} catch {
|
||||
setError("회원가입에 실패했습니다. 다시 시도해 주세요.");
|
||||
setError(t.signupFailedFallbackError);
|
||||
}
|
||||
setLoading(false);
|
||||
return;
|
||||
@@ -90,26 +95,35 @@ export default function SignupPage() {
|
||||
|
||||
router.push("/dashboard");
|
||||
} catch {
|
||||
setError("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
setError(t.errorNetwork);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const strengthLabel = getPasswordStrengthLabel(password);
|
||||
let strengthText: string | null = null;
|
||||
if (strengthLabel) {
|
||||
strengthText =
|
||||
strengthLabel === "weak"
|
||||
? t.passwordStrengthWeak
|
||||
: strengthLabel === "medium"
|
||||
? t.passwordStrengthMedium
|
||||
: t.passwordStrengthStrong;
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen flex items-center justify-center bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
|
||||
<div className="w-full max-w-sm rounded-lg border border-slate-200 bg-white p-6 shadow-xl dark:border-slate-800 dark:bg-slate-900/70">
|
||||
<h1 className="text-lg font-semibold mb-1">회원가입</h1>
|
||||
<p className="text-xs text-slate-500 mb-4 dark:text-slate-400">새 계정을 생성한 뒤 프로젝트를 저장하고 관리할 수 있습니다.</p>
|
||||
<h1 className="text-lg font-semibold mb-1">{t.title}</h1>
|
||||
<p className="text-xs text-slate-500 mb-4 dark:text-slate-400">{t.description}</p>
|
||||
|
||||
{error && <p className="mb-3 text-xs text-red-300">{error}</p>}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-3 text-xs">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="email" className="block text-slate-800 dark:text-slate-200">
|
||||
이메일
|
||||
{t.emailLabel}
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
@@ -123,7 +137,7 @@ export default function SignupPage() {
|
||||
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="password" className="block text-slate-800 dark:text-slate-200">
|
||||
비밀번호
|
||||
{t.passwordLabel}
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
@@ -143,9 +157,9 @@ export default function SignupPage() {
|
||||
data-testid="password-strength-bar"
|
||||
className={
|
||||
"h-full transition-all " +
|
||||
(strengthLabel === "약함"
|
||||
(strengthLabel === "weak"
|
||||
? "w-1/3 bg-red-500"
|
||||
: strengthLabel === "보통"
|
||||
: strengthLabel === "medium"
|
||||
? "w-2/3 bg-amber-500"
|
||||
: "w-full bg-emerald-600")
|
||||
}
|
||||
@@ -154,21 +168,21 @@ export default function SignupPage() {
|
||||
<p
|
||||
className={
|
||||
"text-[11px] " +
|
||||
(strengthLabel === "약함"
|
||||
(strengthLabel === "weak"
|
||||
? "text-red-500 dark:text-red-300"
|
||||
: strengthLabel === "보통"
|
||||
: strengthLabel === "medium"
|
||||
? "text-amber-500 dark:text-amber-300"
|
||||
: "text-emerald-600 dark:text-emerald-300")
|
||||
}
|
||||
>
|
||||
비밀번호 난이도: {strengthLabel}
|
||||
{t.passwordStrengthPrefix} {strengthText}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="passwordConfirm" className="block text-slate-800 dark:text-slate-200">
|
||||
비밀번호 확인
|
||||
{t.passwordConfirmLabel}
|
||||
</label>
|
||||
<input
|
||||
id="passwordConfirm"
|
||||
@@ -186,17 +200,18 @@ export default function SignupPage() {
|
||||
disabled={loading}
|
||||
className="mt-2 w-full inline-flex items-center justify-center gap-1 rounded bg-sky-600 hover:bg-sky-500 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-1 text-xs font-medium"
|
||||
>
|
||||
{loading ? "회원가입 중..." : "회원가입"}
|
||||
{loading ? t.submitLoading : t.submitIdle}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-[11px] text-slate-500 dark:text-slate-400">
|
||||
이미 계정이 있다면
|
||||
{t.loginPromptPrefix}
|
||||
{" "}
|
||||
<Link href="/login" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
|
||||
로그인
|
||||
{t.loginLinkText}
|
||||
</Link>
|
||||
으로 이동해 주세요.
|
||||
{t.loginPromptSuffix && " "}
|
||||
{t.loginPromptSuffix}
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user