jaybe/page-builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CI: feature/i18n-browser-locale #34

Merged
jaybe merged 3 commits from feature/i18n-browser-locale into main 2025-12-10 08:11:49 +00:00
Conversation 0 Commits 3 Files Changed 153
+7511 -2296
153 changed files with 7511 additions and 2296 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/dashboard/page.tsx
+44 -28
View File
@@ -4,6 +4,8 @@ import { useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react"; import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
// 대시보드 페이지 (/dashboard) // 대시보드 페이지 (/dashboard)
// - /api/dashboard/overview 에서 요약/프로젝트별 통계를 가져와 카드 형태로 렌더링한다. // - /api/dashboard/overview 에서 요약/프로젝트별 통계를 가져와 카드 형태로 렌더링한다.
@@ -35,6 +37,8 @@ type PageStatus = "idle" | "loading" | "error";
export default function DashboardPage() { export default function DashboardPage() {
const router = useRouter(); const router = useRouter();
const locale = useAppLocale();
const t = getDashboardMessages(locale);
const [summary, setSummary] = useState<SummaryStats | null>(null); const [summary, setSummary] = useState<SummaryStats | null>(null);
const [projects, setProjects] = useState<ProjectStatsItem[]>([]); const [projects, setProjects] = useState<ProjectStatsItem[]>([]);
@@ -59,13 +63,13 @@ export default function DashboardPage() {
if (res.status === 401) { if (res.status === 401) {
setStatus("error"); setStatus("error");
setErrorMessage("대시보드를 보려면 로그인이 필요합니다. 다시 로그인해 주세요."); setErrorMessage(t.errorUnauthorized);
router.push("/login"); router.push("/login");
return; return;
} }
setStatus("error"); setStatus("error");
setErrorMessage("대시보드 데이터를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setErrorMessage(t.errorGeneric);
return; return;
} }
@@ -87,9 +91,7 @@ export default function DashboardPage() {
} catch { } catch {
if (!cancelled) { if (!cancelled) {
setStatus("error"); 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"> <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"> <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> <div>
<h1 className="text-2xl font-bold tracking-tight">대시보드</h1> <h1 className="text-2xl font-bold tracking-tight">{t.title}</h1>
<p className="text-sm text-slate-500 mt-1 dark:text-slate-400">프로젝트와 폼 제출 현황을 한눈에 확인할 수 있는 요약 화면입니다.</p> <p className="text-sm text-slate-500 mt-1 dark:text-slate-400">{t.description}</p>
</div> </div>
<div className="flex items-center gap-3 text-sm"> <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"> <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" 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" /> <LayoutDashboard className="w-4 h-4" aria-hidden="true" />
<span>대시보드</span> <span>{t.navDashboard}</span>
</Link> </Link>
<Link <Link
href="/projects" 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" 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" /> <FolderKanban className="w-4 h-4" aria-hidden="true" />
<span>프로젝트 목록</span> <span>{t.navProjects}</span>
</Link> </Link>
<Link <Link
href="/projects/submissions" 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" 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" /> <ListChecks className="w-4 h-4" aria-hidden="true" />
<span>전체 제출 내역</span> <span>{t.navSubmissions}</span>
</Link> </Link>
</nav> </nav>
<button <button
@@ -175,7 +177,7 @@ export default function DashboardPage() {
onClick={handleToggleTheme} onClick={handleToggleTheme}
> >
<SunMoon className="w-4 h-4" aria-hidden="true" /> <SunMoon className="w-4 h-4" aria-hidden="true" />
<span>테마 전환</span> <span>{t.themeToggleLabel}</span>
</button> </button>
<div className="relative"> <div className="relative">
<button <button
@@ -185,7 +187,7 @@ export default function DashboardPage() {
setIsMenuOpen((prev) => !prev); setIsMenuOpen((prev) => !prev);
}} }}
> >
메뉴 {t.menuLabel}
</button> </button>
{isMenuOpen && ( {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"> <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(); void handleLogout();
}} }}
> >
로그아웃 {t.logoutLabel}
</button> </button>
</div> </div>
)} )}
@@ -211,7 +213,7 @@ export default function DashboardPage() {
)} )}
{status === "loading" && ( {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" 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" 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> <span className="text-2xl font-bold tracking-tight">{safeSummary.totalProjects}</span>
</div> </div>
@@ -228,7 +232,9 @@ export default function DashboardPage() {
data-testid="dashboard-summary-total-submissions" 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" 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> <span className="text-2xl font-bold tracking-tight">{safeSummary.totalSubmissions}</span>
</div> </div>
@@ -236,7 +242,9 @@ export default function DashboardPage() {
data-testid="dashboard-summary-today-submissions" 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" 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> <span className="text-2xl font-bold tracking-tight">{safeSummary.todaySubmissions}</span>
</div> </div>
@@ -244,7 +252,9 @@ export default function DashboardPage() {
data-testid="dashboard-summary-last7days-submissions" 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" 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> <span className="text-2xl font-bold tracking-tight">{safeSummary.last7DaysSubmissions}</span>
</div> </div>
</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" 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"> <div className="flex items-baseline justify-between mb-2">
<h2 className="text-sm font-semibold text-slate-800 dark:text-slate-200">최근 제출 추이 (일별)</h2> <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">최근 활동이 있는 날짜만 표시됩니다.</span> <span className="text-[10px] text-slate-500 dark:text-slate-500">{t.chartSubtitle}</span>
</div> </div>
{dailySubmissions.length === 0 ? ( {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]"> <div className="flex items-end gap-2 text-[10px]">
{dailySubmissions.map((item) => ( {dailySubmissions.map((item) => (
@@ -283,10 +293,12 @@ export default function DashboardPage() {
{/* 프로젝트 카드 리스트 영역 */} {/* 프로젝트 카드 리스트 영역 */}
<div className="mt-2"> <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 && ( {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 && ( {projects.length > 0 && (
@@ -294,7 +306,7 @@ export default function DashboardPage() {
{projects.map((project) => { {projects.map((project) => {
const lastSubmitted = project.lastSubmissionAt const lastSubmitted = project.lastSubmissionAt
? new Date(project.lastSubmissionAt).toLocaleString() ? new Date(project.lastSubmissionAt).toLocaleString()
: "제출 내역 없음"; : t.projectLatestSubmissionEmpty;
return ( return (
<article <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"> <div className="mt-1 flex items-center justify-between text-[11px] text-slate-700 dark:text-slate-300">
<span> <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>
<span className="text-slate-500 dark:text-slate-400">최근 제출: {lastSubmitted}</span>
</div> </div>
<div className="mt-2 flex items-center gap-2 text-[11px]"> <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`} 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" 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>
<Link <Link
href={`/p/${encodeURIComponent(project.slug)}`} 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" 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> </Link>
</div> </div>
</article> </article>
src/app/editor/EditorCanvas.tsx
+15 -7
View File
@@ -11,6 +11,8 @@ import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
import { rectIntersection } from "@dnd-kit/core"; import { rectIntersection } from "@dnd-kit/core";
import type { Block, ButtonBlockProps, ImageBlockProps, ProjectConfig, TextBlockProps } from "@/features/editor/state/editorStore"; 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 { interface EditorCanvasProps {
blocks: Block[]; blocks: Block[];
@@ -42,6 +44,9 @@ export function EditorCanvas(props: EditorCanvasProps) {
projectConfig, projectConfig,
} = props; } = props;
const locale = useAppLocale();
const m = getEditorCanvasMessages(locale);
const canvasOuterStyle: CSSProperties = {}; const canvasOuterStyle: CSSProperties = {};
const canvasInnerStyle: CSSProperties = {}; const canvasInnerStyle: CSSProperties = {};
const preset = projectConfig.canvasPreset ?? "full"; const preset = projectConfig.canvasPreset ?? "full";
@@ -86,7 +91,7 @@ export function EditorCanvas(props: EditorCanvasProps) {
> >
{blocks.length === 0 ? ( {blocks.length === 0 ? (
<div className="flex-1 flex items-center justify-center text-slate-500 text-xs"> <div className="flex-1 flex items-center justify-center text-slate-500 text-xs">
왼쪽에서 "텍스트" 버튼을 눌러 블록을 추가해 보세요. {m.emptyStateHint}
</div> </div>
) : ( ) : (
<DndContext <DndContext
@@ -121,6 +126,9 @@ interface DragPreviewProps {
export function EditorCanvasDragPreview({ block }: DragPreviewProps) { export function EditorCanvasDragPreview({ block }: DragPreviewProps) {
if (!block) return null; if (!block) return null;
const locale = useAppLocale();
const m = getEditorCanvasMessages(locale);
return ( 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="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"> <div className="text-[10px] uppercase tracking-wide text-sky-300 mb-1">
@@ -138,16 +146,16 @@ export function EditorCanvasDragPreview({ block }: DragPreviewProps) {
</div> </div>
<div className="truncate"> <div className="truncate">
{block.type === "text" {block.type === "text"
? (block.props as TextBlockProps).text || "텍스트 블록" ? (block.props as TextBlockProps).text || m.previewFallbackTextBlock
: block.type === "button" : block.type === "button"
? (block.props as ButtonBlockProps).label || "버튼 블록" ? (block.props as ButtonBlockProps).label || m.previewFallbackButtonBlock
: block.type === "image" : block.type === "image"
? (block.props as ImageBlockProps).alt || "이미지 블록" ? (block.props as ImageBlockProps).alt || m.previewFallbackImageBlock
: block.type === "list" : block.type === "list"
? "리스트 블록" ? m.previewFallbackListBlock
: block.type === "divider" : block.type === "divider"
? "구분선 블록" ? m.previewFallbackDividerBlock
: "섹션 블록"} : m.previewFallbackSectionBlock}
</div> </div>
</div> </div>
); );
src/app/editor/forms/FormCheckboxPropertiesPanel.tsx
+83 -79
View File
@@ -3,6 +3,8 @@
import type { Block, FormCheckboxBlockProps } from "@/features/editor/state/editorStore"; import type { Block, FormCheckboxBlockProps } from "@/features/editor/state/editorStore";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorFormCheckboxPanelMessages } from "@/features/i18n/messages/editorFormCheckboxPanel";
interface FormCheckboxPropertiesPanelProps { interface FormCheckboxPropertiesPanelProps {
block: Block; block: Block;
@@ -11,6 +13,8 @@ interface FormCheckboxPropertiesPanelProps {
} }
export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBlock }: FormCheckboxPropertiesPanelProps) { export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBlock }: FormCheckboxPropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorFormCheckboxPanelMessages(locale);
if (!selectedBlockId || block.id !== selectedBlockId) return null; if (!selectedBlockId || block.id !== selectedBlockId) return null;
const checkboxProps = block.props as FormCheckboxBlockProps; const checkboxProps = block.props as FormCheckboxBlockProps;
@@ -18,10 +22,10 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
return ( return (
<div className="space-y-3 text-xs"> <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"> <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 <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" 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"} value={checkboxProps.groupLabelMode ?? "text"}
@@ -31,13 +35,13 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="text">텍스트</option> <option value="text">{m.groupTitleTypeOptionText}</option>
<option value="image">이미지</option> <option value="image">{m.groupTitleTypeOptionImage}</option>
</select> </select>
</label> </label>
<label className="flex flex-col gap-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.groupTitleDisplayLabel}</span>
<select <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" 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} value={groupLabelDisplay}
@@ -47,14 +51,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="visible">표시 (기본)</option> <option value="visible">{m.groupTitleDisplayOptionVisible}</option>
<option value="hidden">숨김</option> <option value="hidden">{m.groupTitleDisplayOptionHidden}</option>
</select> </select>
</label> </label>
{groupLabelDisplay === "visible" && ( {groupLabelDisplay === "visible" && (
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400"> <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
<span>레이아웃</span> <span>{m.layoutLabel}</span>
<select <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" 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"} value={checkboxProps.labelLayout ?? "stacked"}
@@ -64,14 +68,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="stacked">세로 (기본)</option> <option value="stacked">{m.layoutOptionStacked}</option>
<option value="inline">가로 (인라인)</option> <option value="inline">{m.layoutOptionInline}</option>
</select> </select>
</label> </label>
)} )}
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400"> <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
<span>옵션 레이아웃</span> <span>{m.optionLayoutLabel}</span>
<select <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" 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"} value={checkboxProps.optionLayout ?? "stacked"}
@@ -81,14 +85,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="stacked">세로 (기본)</option> <option value="stacked">{m.layoutOptionStacked}</option>
<option value="inline">가로 (인라인)</option> <option value="inline">{m.layoutOptionInline}</option>
</select> </select>
</label> </label>
{groupLabelDisplay === "visible" && (checkboxProps.labelLayout ?? "stacked") === "inline" && ( {groupLabelDisplay === "visible" && (checkboxProps.labelLayout ?? "stacked") === "inline" && (
<NumericPropertyControl <NumericPropertyControl
label="라벨/필드 간격 (px)" label={m.labelGapLabel}
unitLabel="(px)" unitLabel="(px)"
value={typeof checkboxProps.labelGapPx === "number" ? checkboxProps.labelGapPx : 8} value={typeof checkboxProps.labelGapPx === "number" ? checkboxProps.labelGapPx : 8}
min={0} min={0}
@@ -109,7 +113,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
)} )}
<label className="flex flex-col gap-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.groupTitleLabel}</span>
<input <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" 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 ?? ""} value={checkboxProps.groupLabel ?? ""}
@@ -131,7 +135,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
return ( return (
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span className="text-slate-400">그룹 타이틀 이미지 소스</span> <span className="text-slate-400">{m.groupTitleImageSourceLabel}</span>
<select <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" 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} value={source}
@@ -141,14 +145,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="url">URL</option> <option value="url">{m.groupTitleImageSourceOptionUrl}</option>
<option value="upload">파일 업로드</option> <option value="upload">{m.groupTitleImageSourceOptionUpload}</option>
</select> </select>
</label> </label>
{source === "url" && ( {source === "url" && (
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span className="text-slate-400">그룹 타이틀 이미지 URL</span> <span className="text-slate-400">{m.groupTitleImageUrlLabel}</span>
<input <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" 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 ?? ""} value={checkboxProps.groupLabelImageUrl ?? ""}
@@ -163,12 +167,12 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
{source === "upload" && ( {source === "upload" && (
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span className="text-slate-400">그룹 타이틀 이미지 파일 업로드</span> <span className="text-slate-400">{m.groupTitleImageUploadLabel}</span>
<input <input
type="file" type="file"
accept="image/*" 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" 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) => { onChange={async (event) => {
const file = event.target.files?.[0]; const file = event.target.files?.[0];
if (!file) return; if (!file) return;
@@ -208,7 +212,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
})()} })()}
<label className="flex flex-col gap-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.submitKeyLabel}</span>
<input <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" 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 ?? ""} value={checkboxProps.formFieldName ?? ""}
@@ -222,7 +226,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between"> <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 <button
type="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-slate-800"
@@ -239,12 +243,12 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} as any); } as any);
}} }}
> >
옵션 추가 {m.addOptionButtonLabel}
</button> </button>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="flex flex-col gap-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.optionImageSourceLabel}</span>
<select <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" 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={(() => { value={(() => {
@@ -259,8 +263,8 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="url">URL</option> <option value="url">{m.optionImageSourceOptionUrl}</option>
<option value="upload">파일 업로드</option> <option value="upload">{m.optionImageSourceOptionUpload}</option>
</select> </select>
</label> </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"> <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
<input <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" 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 ?? ""} value={opt.label ?? ""}
onChange={(e) => { onChange={(e) => {
const next = [...(((checkboxProps as any).options ?? []) as any[])]; const next = [...(((checkboxProps as any).options ?? []) as any[])];
@@ -284,7 +288,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
/> />
<input <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" 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 ?? ""} value={opt.value ?? ""}
onChange={(e) => { onChange={(e) => {
const next = [...(((checkboxProps as any).options ?? []) as any[])]; const next = [...(((checkboxProps as any).options ?? []) as any[])];
@@ -321,7 +325,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
{source === "url" && ( {source === "url" && (
<input <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" 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 ?? ""} value={opt.labelImageUrl ?? ""}
onChange={(e) => { onChange={(e) => {
const next = [...(((checkboxProps as any).options ?? []) as any[])]; const next = [...(((checkboxProps as any).options ?? []) as any[])];
@@ -337,12 +341,12 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
)} )}
{source === "upload" && ( {source === "upload" && (
<label className="flex flex-col gap-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.optionImageUploadLabel}</span>
<input <input
type="file" type="file"
accept="image/*" 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" 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) => { onChange={async (event) => {
const file = event.target.files?.[0]; const file = event.target.files?.[0];
if (!file) return; if (!file) return;
@@ -393,15 +397,15 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
</div> </div>
<label className="inline-flex items-center gap-2"> <label className="inline-flex items-center gap-2">
<span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span> <span className="text-slate-500">{m.requiredNoticeText}</span>
</label> </label>
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3"> <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 스케일 변환을 위한 근거를 남긴다 */} {/* px 기반 체크박스 타이포 입력값을 노출하여 em 스케일 변환을 위한 근거를 남긴다 */}
<NumericPropertyControl <NumericPropertyControl
label="체크박스 텍스트 크기 (px)" label={m.textSizeLabel}
unitLabel="(px)" unitLabel={m.textSizeUnitLabel}
value={(() => { value={(() => {
const raw = checkboxProps.fontSizeCustom ?? ""; const raw = checkboxProps.fontSizeCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); 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: "lg", label: "L", value: 18 },
{ id: "xl", label: "XL", value: 20 }, { id: "xl", label: "XL", value: 20 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
fontSizeCustom: `${v}px`, fontSizeCustom: `${v}px`,
} as any); } as any)
}} }
/> />
{/* 줄간격 px 입력값을 노출해 preview em 변환과 TDD 케이스를 연동한다 */} {/* 줄간격 px 입력값을 노출해 preview em 변환과 TDD 케이스를 연동한다 */}
<NumericPropertyControl <NumericPropertyControl
label="체크박스 줄간격 (px)" label={m.lineHeightLabel}
unitLabel="(px)" unitLabel={m.lineHeightUnitLabel}
value={(() => { value={(() => {
const raw = checkboxProps.lineHeightCustom ?? ""; const raw = checkboxProps.lineHeightCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -442,16 +446,16 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
{ id: "normal", label: "보통", value: 24 }, { id: "normal", label: "보통", value: 24 },
{ id: "loose", label: "루즈", value: 32 }, { id: "loose", label: "루즈", value: 32 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
lineHeightCustom: `${v}px`, lineHeightCustom: `${v}px`,
} as any); } as any)
}} }
/> />
{/* 자간 px 입력을 통한 폼 체크박스 미세 조정값을 노출 */} {/* 자간 px 입력을 통한 폼 체크박스 미세 조정값을 노출 */}
<NumericPropertyControl <NumericPropertyControl
label="체크박스 자간 (px)" label={m.letterSpacingLabel}
unitLabel="(px)" unitLabel={m.letterSpacingUnitLabel}
value={(() => { value={(() => {
const raw = checkboxProps.letterSpacingCustom ?? ""; const raw = checkboxProps.letterSpacingCustom ?? "";
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -466,14 +470,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
{ id: "normal", label: "보통", value: 0 }, { id: "normal", label: "보통", value: 0 },
{ id: "wide", label: "넓게", value: 2 }, { id: "wide", label: "넓게", value: 2 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
letterSpacingCustom: `${v}px`, letterSpacingCustom: `${v}px`,
} as any); } as any)
}} }
/> />
<label className="flex flex-col gap-1 text-[11px] text-slate-400"> <label className="flex flex-col gap-1 text-[11px] text-slate-400">
<span>필드 너비</span> <span>{m.widthModeLabel}</span>
<select <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" 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"} value={checkboxProps.widthMode ?? "full"}
@@ -483,15 +487,15 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="auto">자동</option> <option value="auto">{m.widthModeOptionAuto}</option>
<option value="full">전체 폭</option> <option value="full">{m.widthModeOptionFull}</option>
<option value="fixed">고정 값</option> <option value="fixed">{m.widthModeOptionFixed}</option>
</select> </select>
</label> </label>
{(checkboxProps.widthMode ?? "full") === "fixed" && ( {(checkboxProps.widthMode ?? "full") === "fixed" && (
<NumericPropertyControl <NumericPropertyControl
label="필드 고정 너비" label={m.fixedWidthLabel}
unitLabel="(px)" unitLabel={m.fixedWidthUnitLabel}
value={checkboxProps.widthPx ?? 240} value={checkboxProps.widthPx ?? 240}
min={80} min={80}
max={800} max={800}
@@ -501,16 +505,16 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
{ id: "md", label: "보통", value: 280 }, { id: "md", label: "보통", value: 280 },
{ id: "lg", label: "넓게", value: 360 }, { id: "lg", label: "넓게", value: 360 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
widthPx: v, widthPx: v,
} as any); } as any)
}} }
/> />
)} )}
<NumericPropertyControl <NumericPropertyControl
label="체크박스 가로 패딩 (px)" label={m.paddingXLabel}
unitLabel="(px)" unitLabel={m.paddingXUnitLabel}
value={typeof checkboxProps.paddingX === "number" ? checkboxProps.paddingX : 12} value={typeof checkboxProps.paddingX === "number" ? checkboxProps.paddingX : 12}
min={0} min={0}
max={60} max={60}
@@ -529,8 +533,8 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} }
/> />
<NumericPropertyControl <NumericPropertyControl
label="체크박스 세로 패딩 (px)" label={m.paddingYLabel}
unitLabel="(px)" unitLabel={m.paddingYUnitLabel}
value={typeof checkboxProps.paddingY === "number" ? checkboxProps.paddingY : 10} value={typeof checkboxProps.paddingY === "number" ? checkboxProps.paddingY : 10}
min={0} min={0}
max={40} max={40}
@@ -549,8 +553,8 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} }
/> />
<NumericPropertyControl <NumericPropertyControl
label="체크박스 옵션 간격 (px)" label={m.optionGapLabel}
unitLabel="(px)" unitLabel={m.optionGapUnitLabel}
value={typeof checkboxProps.optionGapPx === "number" ? checkboxProps.optionGapPx : 4} value={typeof checkboxProps.optionGapPx === "number" ? checkboxProps.optionGapPx : 4}
min={0} min={0}
max={40} max={40}
@@ -568,9 +572,9 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
} }
/> />
<ColorPickerField <ColorPickerField
label="텍스트 색상" label={m.textColorLabel}
ariaLabelColorInput="체크박스 텍스트 색상 피커" ariaLabelColorInput={m.textColorPickerAria}
ariaLabelHexInput="체크박스 텍스트 색상 HEX" ariaLabelHexInput={m.textColorHexAria}
value={ value={
checkboxProps.textColorCustom && checkboxProps.textColorCustom.trim() !== "" checkboxProps.textColorCustom && checkboxProps.textColorCustom.trim() !== ""
? checkboxProps.textColorCustom ? checkboxProps.textColorCustom
@@ -589,9 +593,9 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
}} }}
/> />
<ColorPickerField <ColorPickerField
label="배경 색상" label={m.fillColorLabel}
ariaLabelColorInput="체크박스 배경 색상 피커" ariaLabelColorInput={m.fillColorPickerAria}
ariaLabelHexInput="체크박스 배경 색상 HEX" ariaLabelHexInput={m.fillColorHexAria}
value={ value={
checkboxProps.fillColorCustom && checkboxProps.fillColorCustom.trim() !== "" checkboxProps.fillColorCustom && checkboxProps.fillColorCustom.trim() !== ""
? checkboxProps.fillColorCustom ? checkboxProps.fillColorCustom
@@ -610,9 +614,9 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
}} }}
/> />
<ColorPickerField <ColorPickerField
label="테두리 색상" label={m.strokeColorLabel}
ariaLabelColorInput="체크박스 테두리 색상 피커" ariaLabelColorInput={m.strokeColorPickerAria}
ariaLabelHexInput="체크박스 테두리 색상 HEX" ariaLabelHexInput={m.strokeColorHexAria}
value={ value={
checkboxProps.strokeColorCustom && checkboxProps.strokeColorCustom.trim() !== "" checkboxProps.strokeColorCustom && checkboxProps.strokeColorCustom.trim() !== ""
? checkboxProps.strokeColorCustom ? checkboxProps.strokeColorCustom
@@ -631,7 +635,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
}} }}
/> />
<NumericPropertyControl <NumericPropertyControl
label="필드 모서리 둥글기" label={m.borderRadiusLabel}
value={(() => { value={(() => {
const r = checkboxProps.borderRadius ?? "md"; const r = checkboxProps.borderRadius ?? "md";
return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4; 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} max={8}
step={1} step={1}
presets={[ presets={[
{ id: "none", label: "없음", value: 0 }, { id: "none", label: m.borderRadiusPresetNone, value: 0 },
{ id: "sm", label: "작게", value: 2 }, { id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
{ id: "md", label: "보통", value: 4 }, { id: "md", label: m.borderRadiusPresetMedium, value: 4 },
{ id: "lg", label: "크게", value: 6 }, { id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
{ id: "full", label: "완전 둥글게", value: 8 }, { id: "full", label: m.borderRadiusPresetFull, value: 8 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
const next = const next =
src/app/editor/forms/FormControllerPanel.tsx
+50 -46
View File
@@ -4,6 +4,8 @@ import { useState } from "react";
import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore"; import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { computeFormControllerPublicTokens } from "@/features/editor/utils/formHelpers"; import { computeFormControllerPublicTokens } from "@/features/editor/utils/formHelpers";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorFormControllerPanelMessages } from "@/features/i18n/messages/editorFormControllerPanel";
interface FormControllerPanelProps { interface FormControllerPanelProps {
block: Block; // type === "form" block: Block; // type === "form"
@@ -18,6 +20,8 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
const [showSheetsGuide, setShowSheetsGuide] = useState(false); const [showSheetsGuide, setShowSheetsGuide] = useState(false);
const formProps = block.props as FormBlockProps; const formProps = block.props as FormBlockProps;
const locale = useAppLocale();
const m = getEditorFormControllerPanelMessages(locale);
const sheetsScriptExample = (() => { const sheetsScriptExample = (() => {
const tokens = computeFormControllerPublicTokens(block, blocks); const tokens = computeFormControllerPublicTokens(block, blocks);
@@ -71,13 +75,14 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
return ( return (
<div className="space-y-4 text-xs"> <div className="space-y-4 text-xs">
<p className="text-slate-400"> <p className="text-slate-400">
이 폼은 퍼블릭 페이지에서 <code className="font-mono text-[11px]">/api/forms/submit</code> {m.introTextPrefix}
엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다. <code className="font-mono text-[11px]">/api/forms/submit</code>
{m.introTextSuffix}
</p> </p>
<div className="space-y-2"> <div className="space-y-2">
<label className="flex flex-col gap-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.submitTargetLabel}</span>
<select <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" 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"} value={formProps.submitTarget ?? "internal"}
@@ -87,18 +92,18 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="internal">서버 처리 전용 (Webhook 없이 사용)</option> <option value="internal">{m.submitTargetOptionInternal}</option>
<option value="webhook">외부 Webhook / Google Sheets 로 전달</option> <option value="webhook">{m.submitTargetOptionWebhook}</option>
</select> </select>
</label> </label>
{formProps.submitTarget === "webhook" && ( {formProps.submitTarget === "webhook" && (
<div className="space-y-3"> <div className="space-y-3">
<label className="flex flex-col gap-1"> <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 <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" 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 ?? ""} value={formProps.destinationUrl ?? ""}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -108,7 +113,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
/> />
</label> </label>
<label className="flex items-center justify-between gap-2"> <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 <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" 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"} value={formProps.payloadFormat ?? "form"}
@@ -118,12 +123,12 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="form">폼 데이터 (x-www-form-urlencoded)</option> <option value="form">{m.payloadFormatOptionForm}</option>
<option value="json">JSON (application/json)</option> <option value="json">{m.payloadFormatOptionJson}</option>
</select> </select>
</label> </label>
<label className="flex items-center justify-between gap-2"> <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 <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" 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"} value={formProps.method ?? "POST"}
@@ -138,10 +143,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
</select> </select>
</label> </label>
<label className="flex flex-col gap-1"> <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 <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" 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 ?? ""} value={formProps.headers?.Authorization ?? ""}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -154,10 +159,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
/> />
</label> </label>
<label className="flex flex-col gap-1"> <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 <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" 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 ?? {}) value={Object.entries(formProps.extraParams ?? {})
.map(([k, v]) => `${k}=${v}`) .map(([k, v]) => `${k}=${v}`)
.join("\n")} .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" 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)} onClick={() => setShowSheetsGuide(true)}
> >
Google Sheets 연동 가이드 {m.sheetsGuideButtonLabel}
</button> </button>
</div> </div>
</div> </div>
@@ -194,9 +199,9 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-2 border-t border-slate-800 pt-3 mt-4"> <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"> <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
<span>폼 너비 모드</span> <span>{m.formWidthModeLabel}</span>
<select <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" 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"} value={formProps.formWidthMode ?? "auto"}
@@ -206,14 +211,14 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
} as any) } as any)
} }
> >
<option value="auto">자동</option> <option value="auto">{m.formWidthModeOptionAuto}</option>
<option value="full">전체 폭</option> <option value="full">{m.formWidthModeOptionFull}</option>
<option value="fixed">고정 값</option> <option value="fixed">{m.formWidthModeOptionFixed}</option>
</select> </select>
</label> </label>
{(formProps.formWidthMode ?? "auto") === "fixed" && ( {(formProps.formWidthMode ?? "auto") === "fixed" && (
<NumericPropertyControl <NumericPropertyControl
label="폼 고정 너비 (px)" label={m.formFixedWidthLabel}
unitLabel="(px)" unitLabel="(px)"
value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 480} value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 480}
min={160} min={160}
@@ -232,17 +237,17 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
/> />
)} )}
<NumericPropertyControl <NumericPropertyControl
label="폼 위/아래 여백 (px)" label={m.marginYLabel}
unitLabel="(px)" unitLabel="(px)"
value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 24} value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 24}
min={0} min={0}
max={160} max={160}
step={4} step={4}
presets={[ presets={[
{ id: "none", label: "없음", value: 0 }, { id: "none", label: m.marginYPresetNone, value: 0 },
{ id: "compact", label: "좁게", value: 16 }, { id: "compact", label: m.marginYPresetCompact, value: 16 },
{ id: "normal", label: "보통", value: 24 }, { id: "normal", label: m.marginYPresetNormal, value: 24 },
{ id: "spacious", label: "넓게", value: 40 }, { id: "spacious", label: m.marginYPresetSpacious, value: 40 },
]} ]}
onChangeValue={(v) => onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -253,12 +258,12 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-2 border-t border-slate-800 pt-3 mt-4"> <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"> <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
<span>성공 메시지</span> <span>{m.successMessageLabel}</span>
<input <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" 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 ?? ""} value={formProps.successMessage ?? ""}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -268,10 +273,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
/> />
</label> </label>
<label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
<span>에러 메시지</span> <span>{m.errorMessageLabel}</span>
<input <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" 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 ?? ""} value={formProps.errorMessage ?? ""}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -283,10 +288,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-3 border-t border-slate-800 pt-3 mt-4"> <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="폼 필드 매핑"> <fieldset className="space-y-2" aria-label={m.fieldMappingAriaLabel}>
<legend className="text-[11px] text-slate-400 mb-1">폼 필드 매핑</legend> <legend className="text-[11px] text-slate-400 mb-1">{m.fieldMappingLegend}</legend>
{blocks {blocks
.filter((b) => .filter((b) =>
b.type === "formInput" || b.type === "formInput" ||
@@ -355,10 +360,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
</fieldset> </fieldset>
<div className="space-y-1"> <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 <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" 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 ?? ""} value={formProps.submitButtonId ?? ""}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { 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="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="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"> <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 <button
type="button" type="button"
className="text-[11px] text-slate-400 hover:text-slate-100" className="text-[11px] text-slate-400 hover:text-slate-100"
onClick={() => setShowSheetsGuide(false)} onClick={() => setShowSheetsGuide(false)}
aria-label="Google Sheets 연동 가이드 닫기" aria-label={m.sheetsGuideCloseAriaLabel}
> >
닫기 ×
</button> </button>
</div> </div>
<p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed"> <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
구글 시트 주소를 그대로 입력하는 것이 아니라, 시트에 연결된 Google Apps Script 웹 앱 URL 을 입력해야 합니다. {m.sheetsGuideIntro}
아래 순서를 따르면 코드를 잘 모르는 사용자도 연동할 수 있습니다.
</p> </p>
<ol className="list-decimal list-inside space-y-1 text-[11px] text-slate-400 mt-2"> <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>{m.sheetsGuideStep1}</li>
<li>시트 메뉴의 "확장 프로그램 → 앱스 스크립트" 를 열고 아래 예제 코드를 붙여넣습니다.</li> <li>{m.sheetsGuideStep2}</li>
<li>"배포 → 새 배포" 에서 웹 앱으로 배포한 뒤, 발급된 웹 앱 URL(…/exec) 을 Webhook URL 칸에 붙여넣습니다.</li> <li>{m.sheetsGuideStep3}</li>
</ol> </ol>
<div className="mt-2 space-y-1"> <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 <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" 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 readOnly
src/app/editor/forms/FormInputPropertiesPanel.tsx
+67 -64
View File
@@ -3,6 +3,8 @@
import type { Block, FormInputBlockProps } from "@/features/editor/state/editorStore"; import type { Block, FormInputBlockProps } from "@/features/editor/state/editorStore";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorFormInputPanelMessages } from "@/features/i18n/messages/editorFormInputPanel";
interface FormInputPropertiesPanelProps { interface FormInputPropertiesPanelProps {
block: Block; block: Block;
@@ -11,6 +13,8 @@ interface FormInputPropertiesPanelProps {
} }
export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }: 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; if (!selectedBlockId || block.id !== selectedBlockId || block.type !== "formInput") return null;
const inputProps = block.props as FormInputBlockProps; const inputProps = block.props as FormInputBlockProps;
@@ -18,9 +22,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
return ( return (
<div className="space-y-3 text-xs"> <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"> <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 <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" 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"} value={inputProps.labelMode ?? "text"}
@@ -30,12 +34,12 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
> >
<option value="text">텍스트</option> <option value="text">{m.labelTypeOptionText}</option>
<option value="image">이미지</option> <option value="image">{m.labelTypeOptionImage}</option>
</select> </select>
</label> </label>
<label className="flex flex-col gap-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.fieldLabelLabel}</span>
<input <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" 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 ?? ""} value={inputProps.label ?? ""}
@@ -47,7 +51,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
/> />
</label> </label>
<label className="flex flex-col gap-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.labelDisplayLabel}</span>
<select <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" 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} value={labelDisplay}
@@ -57,14 +61,14 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
> >
<option value="visible">표시 (기본)</option> <option value="visible">{m.labelDisplayOptionVisible}</option>
<option value="hidden">숨김</option> <option value="hidden">{m.labelDisplayOptionHidden}</option>
<option value="floating">플로팅 라벨</option> <option value="floating">{m.labelDisplayOptionFloating}</option>
</select> </select>
</label> </label>
{labelDisplay === "visible" && ( {labelDisplay === "visible" && (
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400"> <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
<span>레이아웃</span> <span>{m.layoutLabel}</span>
<select <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" 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"} value={inputProps.labelLayout ?? "stacked"}
@@ -74,15 +78,15 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
> >
<option value="stacked">세로 (기본)</option> <option value="stacked">{m.layoutOptionStacked}</option>
<option value="inline">가로 (인라인)</option> <option value="inline">{m.layoutOptionInline}</option>
</select> </select>
</label> </label>
)} )}
{labelDisplay === "visible" && (inputProps.labelLayout ?? "stacked") === "inline" && ( {labelDisplay === "visible" && (inputProps.labelLayout ?? "stacked") === "inline" && (
<NumericPropertyControl <NumericPropertyControl
label="라벨/필드 간격 (px)" label={m.labelGapLabel}
unitLabel="(px)" unitLabel={m.labelGapUnitLabel}
value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8} value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
min={0} min={0}
max={80} max={80}
@@ -103,7 +107,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
{inputProps.labelMode === "image" && ( {inputProps.labelMode === "image" && (
<> <>
<label className="flex flex-col gap-1"> <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 <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" 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 ?? ""} value={inputProps.labelImageUrl ?? ""}
@@ -115,7 +119,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
/> />
</label> </label>
<label className="flex flex-col gap-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.labelImageAltLabel}</span>
<input <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" 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 ?? ""} value={inputProps.labelImageAlt ?? ""}
@@ -129,7 +133,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
</> </>
)} )}
<label className="flex flex-col gap-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.submitKeyLabel}</span>
<input <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" 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 ?? ""} value={inputProps.formFieldName ?? ""}
@@ -141,10 +145,10 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
/> />
</label> </label>
<label className="flex flex-col gap-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.fieldTypeLabel}</span>
<select <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" 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"} value={inputProps.inputType ?? "text"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -152,16 +156,16 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
> >
<option value="text">텍스트</option> <option value="text">{m.fieldTypeOptionText}</option>
<option value="email">이메일</option> <option value="email">{m.fieldTypeOptionEmail}</option>
<option value="textarea">긴 텍스트</option> <option value="textarea">{m.fieldTypeOptionTextarea}</option>
</select> </select>
</label> </label>
<label className="flex flex-col gap-1"> <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 <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" 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 ?? ""} value={inputProps.placeholder ?? ""}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -171,13 +175,13 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
/> />
</label> </label>
<label className="inline-flex items-center gap-2"> <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> </label>
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3"> <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 <NumericPropertyControl
label="필드 텍스트 크기 (px)" label={m.textSizeLabel}
unitLabel="(px)" unitLabel={m.textSizeUnitLabel}
value={(() => { value={(() => {
const raw = inputProps.fontSizeCustom ?? ""; const raw = inputProps.fontSizeCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -202,8 +206,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
/> />
{/* 줄간격 px 입력을 노출하여 preview em 변환의 근거를 제공 */} {/* 줄간격 px 입력을 노출하여 preview em 변환의 근거를 제공 */}
<NumericPropertyControl <NumericPropertyControl
label="필드 줄간격 (px)" label={m.lineHeightLabel}
unitLabel="(px)" unitLabel={m.lineHeightUnitLabel}
value={(() => { value={(() => {
const raw = inputProps.lineHeightCustom ?? ""; const raw = inputProps.lineHeightCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -226,8 +230,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
/> />
{/* 자간 px 입력으로 폼 입력 타이포를 세밀하게 조정 */} {/* 자간 px 입력으로 폼 입력 타이포를 세밀하게 조정 */}
<NumericPropertyControl <NumericPropertyControl
label="필드 자간 (px)" label={m.letterSpacingLabel}
unitLabel="(px)" unitLabel={m.letterSpacingUnitLabel}
value={(() => { value={(() => {
const raw = inputProps.letterSpacingCustom ?? ""; const raw = inputProps.letterSpacingCustom ?? "";
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/); 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"> <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
<span>텍스트 정렬</span> <span>{m.textAlignLabel}</span>
<select <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" 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"} value={inputProps.align ?? "left"}
@@ -259,16 +263,16 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
> >
<option value="left">왼쪽</option> <option value="left">{m.textAlignOptionLeft}</option>
<option value="center">가운데</option> <option value="center">{m.textAlignOptionCenter}</option>
<option value="right">오른쪽</option> <option value="right">{m.textAlignOptionRight}</option>
</select> </select>
</label> </label>
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400"> <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
<span>너비</span> <span>{m.widthModeLabel}</span>
<select <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" 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"} value={inputProps.widthMode ?? "full"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -276,14 +280,14 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
> >
<option value="auto">자동</option> <option value="auto">{m.widthModeOptionAuto}</option>
<option value="full">전체 폭</option> <option value="full">{m.widthModeOptionFull}</option>
<option value="fixed">고정 값</option> <option value="fixed">{m.widthModeOptionFixed}</option>
</select> </select>
</label> </label>
<NumericPropertyControl <NumericPropertyControl
label="필드 고정 너비" label={m.fixedWidthLabel}
unitLabel="(px)" unitLabel={m.fixedWidthUnitLabel}
value={inputProps.widthPx ?? 240} value={inputProps.widthPx ?? 240}
min={80} min={80}
max={800} max={800}
@@ -300,8 +304,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
}} }}
/> />
<NumericPropertyControl <NumericPropertyControl
label="필드 가로 패딩 (px)" label={m.paddingXLabel}
unitLabel="(px)" unitLabel={m.paddingXUnitLabel}
value={typeof inputProps.paddingX === "number" ? inputProps.paddingX : 12} value={typeof inputProps.paddingX === "number" ? inputProps.paddingX : 12}
min={0} min={0}
max={60} max={60}
@@ -320,8 +324,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
}} }}
/> />
<NumericPropertyControl <NumericPropertyControl
label="필드 세로 패딩 (px)" label={m.paddingYLabel}
unitLabel="(px)" unitLabel={m.paddingYUnitLabel}
value={typeof inputProps.paddingY === "number" ? inputProps.paddingY : 10} value={typeof inputProps.paddingY === "number" ? inputProps.paddingY : 10}
min={0} min={0}
max={40} max={40}
@@ -340,9 +344,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
}} }}
/> />
<ColorPickerField <ColorPickerField
label="필드 텍스트 색상" label={m.textColorLabel}
ariaLabelColorInput="필드 텍스트 색상 피커" ariaLabelColorInput={m.textColorPickerAria}
ariaLabelHexInput="필드 텍스트 색상 HEX" ariaLabelHexInput={m.textColorHexAria}
value={ value={
inputProps.textColorCustom && inputProps.textColorCustom.trim() !== "" inputProps.textColorCustom && inputProps.textColorCustom.trim() !== ""
? inputProps.textColorCustom ? inputProps.textColorCustom
@@ -361,9 +365,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
}} }}
/> />
<ColorPickerField <ColorPickerField
label="필드 채움 색상" label={m.fillColorLabel}
ariaLabelColorInput="필드 채움 색상 피커" ariaLabelColorInput={m.fillColorPickerAria}
ariaLabelHexInput="필드 채움 색상 HEX" ariaLabelHexInput={m.fillColorHexAria}
value={ value={
inputProps.fillColorCustom && inputProps.fillColorCustom.trim() !== "" inputProps.fillColorCustom && inputProps.fillColorCustom.trim() !== ""
? inputProps.fillColorCustom ? inputProps.fillColorCustom
@@ -382,9 +386,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
}} }}
/> />
<ColorPickerField <ColorPickerField
label="필드 테두리 색상" label={m.strokeColorLabel}
ariaLabelColorInput="필드 테두리 색상 피커" ariaLabelColorInput={m.strokeColorPickerAria}
ariaLabelHexInput="필드 테두리 색상 HEX" ariaLabelHexInput={m.strokeColorHexAria}
value={ value={
inputProps.strokeColorCustom && inputProps.strokeColorCustom.trim() !== "" inputProps.strokeColorCustom && inputProps.strokeColorCustom.trim() !== ""
? inputProps.strokeColorCustom ? inputProps.strokeColorCustom
@@ -403,7 +407,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
}} }}
/> />
<NumericPropertyControl <NumericPropertyControl
label="필드 모서리 둥글기" label={m.borderRadiusLabel}
value={(() => { value={(() => {
const r = inputProps.borderRadius ?? "md"; const r = inputProps.borderRadius ?? "md";
return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4; 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} max={8}
step={1} step={1}
presets={[ presets={[
{ id: "none", label: "없음", value: 0 }, { id: "none", label: m.borderRadiusPresetNone, value: 0 },
{ id: "sm", label: "작게", value: 2 }, { id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
{ id: "md", label: "보통", value: 4 }, { id: "md", label: m.borderRadiusPresetMedium, value: 4 },
{ id: "lg", label: "크게", value: 6 }, { id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
{ id: "full", label: "완전 둥글게", value: 8 }, { id: "full", label: m.borderRadiusPresetFull, value: 8 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
const next = const next = v <= 0 ? "none" : v <= 2 ? "sm" : v <= 5 ? "md" : v <= 7 ? "lg" : "full";
v <= 0 ? "none" : v <= 2 ? "sm" : v <= 5 ? "md" : v <= 7 ? "lg" : "full";
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
borderRadius: next, borderRadius: next,
} as any); } as any);
src/app/editor/forms/FormRadioPropertiesPanel.tsx
+69 -56
View File
@@ -3,6 +3,8 @@
import type { Block, FormRadioBlockProps } from "@/features/editor/state/editorStore"; import type { Block, FormRadioBlockProps } from "@/features/editor/state/editorStore";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorFormRadioPanelMessages } from "@/features/i18n/messages/editorFormRadioPanel";
interface FormRadioPropertiesPanelProps { interface FormRadioPropertiesPanelProps {
block: Block; block: Block;
@@ -11,6 +13,8 @@ interface FormRadioPropertiesPanelProps {
} }
export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }: FormRadioPropertiesPanelProps) { export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }: FormRadioPropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorFormRadioPanelMessages(locale);
if (!selectedBlockId || block.id !== selectedBlockId) return null; if (!selectedBlockId || block.id !== selectedBlockId) return null;
const radioProps = block.props as FormRadioBlockProps; const radioProps = block.props as FormRadioBlockProps;
@@ -18,7 +22,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
return ( return (
<div className="space-y-3 text-xs"> <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"> <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">그룹 타이틀 타입</span>
@@ -225,7 +229,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
<span className="text-slate-500 dark:text-slate-400">옵션</span> <span className="text-slate-500 dark:text-slate-400">옵션</span>
<button <button
type="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={() => { onClick={() => {
const next = Array.isArray((radioProps as any).options) const next = Array.isArray((radioProps as any).options)
? [...(radioProps as any).options] ? [...(radioProps as any).options]
@@ -393,15 +397,15 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
</div> </div>
<label className="inline-flex items-center gap-2"> <label className="inline-flex items-center gap-2">
<span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span> <span className="text-slate-500">{m.requiredNoticeText}</span>
</label> </label>
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3"> <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 <NumericPropertyControl
label="라디오 텍스트 크기 (px)" label={m.textSizeLabel}
unitLabel="(px)" unitLabel={m.textSizeUnitLabel}
value={(() => { value={(() => {
const raw = radioProps.fontSizeCustom ?? ""; const raw = radioProps.fontSizeCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -424,10 +428,10 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any); } as any);
}} }}
/> />
{/* 줄간격 px 입력을 노출하여 preview 에서 em 변환 근거로 사용 */}
<NumericPropertyControl <NumericPropertyControl
label="라디오 줄간격 (px)" label={m.lineHeightLabel}
unitLabel="(px)" unitLabel={m.lineHeightUnitLabel}
value={(() => { value={(() => {
const raw = radioProps.lineHeightCustom ?? ""; const raw = radioProps.lineHeightCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -448,10 +452,10 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any); } as any);
}} }}
/> />
{/* 자간 px 입력 컨트롤로 프리뷰 적용 근거 제공 */}
<NumericPropertyControl <NumericPropertyControl
label="라디오 자간 (px)" label={m.letterSpacingLabel}
unitLabel="(px)" unitLabel={m.letterSpacingUnitLabel}
value={(() => { value={(() => {
const raw = radioProps.letterSpacingCustom ?? ""; const raw = radioProps.letterSpacingCustom ?? "";
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -472,8 +476,9 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any); } as any);
}} }}
/> />
<label className="flex flex-col gap-1 text-[11px] text-slate-400"> <label className="flex flex-col gap-1 text-[11px] text-slate-400">
<span>필드 너비</span> <span>Field width</span>
<select <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" 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"} value={radioProps.widthMode ?? "full"}
@@ -483,23 +488,24 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
> >
<option value="auto">자동</option> <option value="auto">Auto</option>
<option value="full">전체 폭</option> <option value="full">Full width</option>
<option value="fixed">고정 값</option> <option value="fixed">Fixed width</option>
</select> </select>
</label> </label>
{(radioProps.widthMode ?? "full") === "fixed" && ( {(radioProps.widthMode ?? "full") === "fixed" && (
<NumericPropertyControl <NumericPropertyControl
label="필드 고정 너비" label="Field fixed width"
unitLabel="(px)" unitLabel="(px)"
value={radioProps.widthPx ?? 240} value={radioProps.widthPx ?? 240}
min={80} min={80}
max={800} max={800}
step={10} step={10}
presets={[ presets={[
{ id: "sm", label: "작게", value: 200 }, { id: "sm", label: "Small", value: 200 },
{ id: "md", label: "보통", value: 280 }, { id: "md", label: "Medium", value: 280 },
{ id: "lg", label: "넓게", value: 360 }, { id: "lg", label: "Large", value: 360 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -508,19 +514,20 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
}} }}
/> />
)} )}
<NumericPropertyControl <NumericPropertyControl
label="라디오 가로 패딩 (px)" label={m.paddingXLabel}
unitLabel="(px)" unitLabel={m.paddingXUnitLabel}
value={typeof radioProps.paddingX === "number" ? radioProps.paddingX : 12} value={typeof radioProps.paddingX === "number" ? radioProps.paddingX : 12}
min={0} min={0}
max={60} max={60}
step={2} step={2}
presets={[ presets={[
{ id: "xs", label: "아주 얇게", value: 6 }, { id: "xs", label: "Extra small", value: 6 },
{ id: "sm", label: "얇게", value: 10 }, { id: "sm", label: "Small", value: 10 },
{ id: "md", label: "보통", value: 12 }, { id: "md", label: "Medium", value: 12 },
{ id: "lg", label: "넓게", value: 16 }, { id: "lg", label: "Large", value: 16 },
{ id: "xl", label: "아주 넓게", value: 20 }, { id: "xl", label: "Extra large", value: 20 },
]} ]}
onChangeValue={(v) => onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -528,19 +535,20 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
/> />
<NumericPropertyControl <NumericPropertyControl
label="라디오 세로 패딩 (px)" label={m.paddingYLabel}
unitLabel="(px)" unitLabel={m.paddingYUnitLabel}
value={typeof radioProps.paddingY === "number" ? radioProps.paddingY : 10} value={typeof radioProps.paddingY === "number" ? radioProps.paddingY : 10}
min={0} min={0}
max={40} max={40}
step={1} step={1}
presets={[ presets={[
{ id: "xs", label: "아주 얇게", value: 6 }, { id: "xs", label: "Extra small", value: 6 },
{ id: "sm", label: "얇게", value: 8 }, { id: "sm", label: "Small", value: 8 },
{ id: "md", label: "보통", value: 10 }, { id: "md", label: "Medium", value: 10 },
{ id: "lg", label: "넓게", value: 12 }, { id: "lg", label: "Large", value: 12 },
{ id: "xl", label: "아주 넓게", value: 16 }, { id: "xl", label: "Extra large", value: 16 },
]} ]}
onChangeValue={(v) => onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -548,18 +556,19 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
/> />
<NumericPropertyControl <NumericPropertyControl
label="라디오 옵션 간격 (px)" label={m.optionGapLabel}
unitLabel="(px)" unitLabel={m.optionGapUnitLabel}
value={typeof radioProps.optionGapPx === "number" ? radioProps.optionGapPx : 4} value={typeof radioProps.optionGapPx === "number" ? radioProps.optionGapPx : 4}
min={0} min={0}
max={40} max={40}
step={1} step={1}
presets={[ presets={[
{ id: "tight", label: "타이트", value: 2 }, { id: "tight", label: "Tight", value: 2 },
{ id: "normal", label: "보통", value: 4 }, { id: "normal", label: "Normal", value: 4 },
{ id: "relaxed", label: "느슨", value: 8 }, { id: "relaxed", label: "Relaxed", value: 8 },
{ id: "extra", label: "넓게", value: 12 }, { id: "extra", label: "Extra", value: 12 },
]} ]}
onChangeValue={(v) => onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -567,10 +576,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any) } as any)
} }
/> />
<ColorPickerField <ColorPickerField
label="텍스트 색상" label={m.textColorLabel}
ariaLabelColorInput="라디오 텍스트 색상 피커" ariaLabelColorInput={m.textColorPickerAria}
ariaLabelHexInput="라디오 텍스트 색상 HEX" ariaLabelHexInput={m.textColorHexAria}
value={ value={
radioProps.textColorCustom && radioProps.textColorCustom.trim() !== "" radioProps.textColorCustom && radioProps.textColorCustom.trim() !== ""
? radioProps.textColorCustom ? radioProps.textColorCustom
@@ -588,10 +598,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any); } as any);
}} }}
/> />
<ColorPickerField <ColorPickerField
label="배경 색상" label={m.fillColorLabel}
ariaLabelColorInput="라디오 배경 색상 피커" ariaLabelColorInput={m.fillColorPickerAria}
ariaLabelHexInput="라디오 배경 색상 HEX" ariaLabelHexInput={m.fillColorHexAria}
value={ value={
radioProps.fillColorCustom && radioProps.fillColorCustom.trim() !== "" radioProps.fillColorCustom && radioProps.fillColorCustom.trim() !== ""
? radioProps.fillColorCustom ? radioProps.fillColorCustom
@@ -609,10 +620,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any); } as any);
}} }}
/> />
<ColorPickerField <ColorPickerField
label="테두리 색상" label={m.strokeColorLabel}
ariaLabelColorInput="라디오 테두리 색상 피커" ariaLabelColorInput={m.strokeColorPickerAria}
ariaLabelHexInput="라디오 테두리 색상 HEX" ariaLabelHexInput={m.strokeColorHexAria}
value={ value={
radioProps.strokeColorCustom && radioProps.strokeColorCustom.trim() !== "" radioProps.strokeColorCustom && radioProps.strokeColorCustom.trim() !== ""
? radioProps.strokeColorCustom ? radioProps.strokeColorCustom
@@ -630,8 +642,9 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
} as any); } as any);
}} }}
/> />
<NumericPropertyControl <NumericPropertyControl
label="필드 모서리 둥글기" label={m.borderRadiusLabel}
value={(() => { value={(() => {
const r = radioProps.borderRadius ?? "md"; const r = radioProps.borderRadius ?? "md";
return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4; 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} max={8}
step={1} step={1}
presets={[ presets={[
{ id: "none", label: "없음", value: 0 }, { id: "none", label: m.borderRadiusPresetNone, value: 0 },
{ id: "sm", label: "작게", value: 2 }, { id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
{ id: "md", label: "보통", value: 4 }, { id: "md", label: m.borderRadiusPresetMedium, value: 4 },
{ id: "lg", label: "크게", value: 6 }, { id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
{ id: "full", label: "완전 둥글게", value: 8 }, { id: "full", label: m.borderRadiusPresetFull, value: 8 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
const next = const next =
src/app/editor/forms/FormSelectPropertiesPanel.tsx
+65 -61
View File
@@ -3,6 +3,8 @@
import type { Block, FormSelectBlockProps } from "@/features/editor/state/editorStore"; import type { Block, FormSelectBlockProps } from "@/features/editor/state/editorStore";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorFormSelectPanelMessages } from "@/features/i18n/messages/editorFormSelectPanel";
interface FormSelectPropertiesPanelProps { interface FormSelectPropertiesPanelProps {
block: Block; block: Block;
@@ -11,6 +13,8 @@ interface FormSelectPropertiesPanelProps {
} }
export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock }: FormSelectPropertiesPanelProps) { export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock }: FormSelectPropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorFormSelectPanelMessages(locale);
if (!selectedBlockId || block.id !== selectedBlockId) return null; if (!selectedBlockId || block.id !== selectedBlockId) return null;
const selectProps = block.props as FormSelectBlockProps; const selectProps = block.props as FormSelectBlockProps;
@@ -18,10 +22,10 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
return ( return (
<div className="space-y-3 text-xs"> <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"> <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 <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" 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"} value={selectProps.labelMode ?? "text"}
@@ -31,13 +35,13 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
} as any) } as any)
} }
> >
<option value="text">텍스트</option> <option value="text">{m.labelTypeOptionText}</option>
<option value="image">이미지</option> <option value="image">{m.labelTypeOptionImage}</option>
</select> </select>
</label> </label>
<label className="flex flex-col gap-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.labelDisplayLabel}</span>
<select <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" 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} value={labelDisplay}
@@ -47,14 +51,14 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
} as any) } as any)
} }
> >
<option value="visible">표시 (기본)</option> <option value="visible">{m.labelDisplayOptionVisible}</option>
<option value="hidden">숨김</option> <option value="hidden">{m.labelDisplayOptionHidden}</option>
</select> </select>
</label> </label>
{labelDisplay === "visible" && ( {labelDisplay === "visible" && (
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400"> <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
<span>레이아웃</span> <span>{m.layoutLabel}</span>
<select <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" 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"} value={selectProps.labelLayout ?? "stacked"}
@@ -64,15 +68,15 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
} as any) } as any)
} }
> >
<option value="stacked">세로 (기본)</option> <option value="stacked">{m.layoutOptionStacked}</option>
<option value="inline">가로 (인라인)</option> <option value="inline">{m.layoutOptionInline}</option>
</select> </select>
</label> </label>
)} )}
{labelDisplay === "visible" && (selectProps.labelLayout ?? "stacked") === "inline" && ( {labelDisplay === "visible" && (selectProps.labelLayout ?? "stacked") === "inline" && (
<NumericPropertyControl <NumericPropertyControl
label="라벨/필드 간격 (px)" label={m.labelGapLabel}
unitLabel="(px)" unitLabel="(px)"
value={typeof selectProps.labelGapPx === "number" ? selectProps.labelGapPx : 8} value={typeof selectProps.labelGapPx === "number" ? selectProps.labelGapPx : 8}
min={0} min={0}
@@ -93,7 +97,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
)} )}
<label className="flex flex-col gap-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.fieldLabelLabel}</span>
<input <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" 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 ?? ""} value={selectProps.label ?? ""}
@@ -106,7 +110,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
</label> </label>
<label className="flex flex-col gap-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.submitKeyLabel}</span>
<input <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" 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 ?? ""} value={selectProps.formFieldName ?? ""}
@@ -120,7 +124,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between"> <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 <button
type="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-slate-800"
@@ -137,7 +141,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
} as any); } as any);
}} }}
> >
옵션 추가 {m.addOptionButtonLabel}
</button> </button>
</div> </div>
<div className="space-y-2"> <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"> <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
<input <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" 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 ?? ""} value={opt.label ?? ""}
onChange={(e) => { onChange={(e) => {
const next = [...(((selectProps as any).options ?? []) as any[])]; const next = [...(((selectProps as any).options ?? []) as any[])];
@@ -161,7 +165,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
/> />
<input <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" 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 ?? ""} value={opt.value ?? ""}
onChange={(e) => { onChange={(e) => {
const next = [...(((selectProps as any).options ?? []) as any[])]; const next = [...(((selectProps as any).options ?? []) as any[])];
@@ -193,13 +197,13 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
</div> </div>
<label className="inline-flex items-center gap-2"> <label className="inline-flex items-center gap-2">
<span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span> <span className="text-slate-500">{m.requiredNoticeText}</span>
</label> </label>
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3"> <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 <NumericPropertyControl
label="셀렉트 텍스트 크기 (px)" label={m.textSizeLabel}
unitLabel="(px)" unitLabel={m.textSizeUnitLabel}
value={(() => { value={(() => {
const raw = selectProps.fontSizeCustom ?? ""; const raw = selectProps.fontSizeCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); 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: "lg", label: "L", value: 18 },
{ id: "xl", label: "XL", value: 20 }, { id: "xl", label: "XL", value: 20 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
fontSizeCustom: `${v}px`, fontSizeCustom: `${v}px`,
} as any); } as any)
}} }
/> />
{/* 줄간격 px 입력을 받아 preview 렌더러의 em 변환 근거로 사용한다 */} {/* 줄간격 px 입력을 받아 preview 렌더러의 em 변환 근거로 사용한다 */}
<NumericPropertyControl <NumericPropertyControl
label="셀렉트 줄간격 (px)" label={m.lineHeightLabel}
unitLabel="(px)" unitLabel={m.lineHeightUnitLabel}
value={(() => { value={(() => {
const raw = selectProps.lineHeightCustom ?? ""; const raw = selectProps.lineHeightCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -240,16 +244,16 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
{ id: "normal", label: "보통", value: 24 }, { id: "normal", label: "보통", value: 24 },
{ id: "loose", label: "루즈", value: 32 }, { id: "loose", label: "루즈", value: 32 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
lineHeightCustom: `${v}px`, lineHeightCustom: `${v}px`,
} as any); } as any)
}} }
/> />
{/* 자간 px 입력을 제공하여 TDD 시나리오와 동기화한다 */} {/* 자간 px 입력을 제공하여 TDD 시나리오와 동기화한다 */}
<NumericPropertyControl <NumericPropertyControl
label="셀렉트 자간 (px)" label={m.letterSpacingLabel}
unitLabel="(px)" unitLabel={m.letterSpacingUnitLabel}
value={(() => { value={(() => {
const raw = selectProps.letterSpacingCustom ?? ""; const raw = selectProps.letterSpacingCustom ?? "";
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -264,14 +268,14 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
{ id: "normal", label: "보통", value: 0 }, { id: "normal", label: "보통", value: 0 },
{ id: "wide", label: "넓게", value: 2 }, { id: "wide", label: "넓게", value: 2 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
letterSpacingCustom: `${v}px`, letterSpacingCustom: `${v}px`,
} as any); } as any)
}} }
/> />
<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400"> <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
<span>필드 너비</span> <span>{m.widthModeLabel}</span>
<select <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" 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"} value={selectProps.widthMode ?? "full"}
@@ -282,14 +286,14 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
} }
> >
<option value="auto">자동</option> <option value="auto">자동</option>
<option value="full">전체 폭</option> <option value="full">전체</option>
<option value="fixed">고정 값</option> <option value="fixed">고정</option>
</select> </select>
</label> </label>
{(selectProps.widthMode ?? "full") === "fixed" && ( {(selectProps.widthMode ?? "full") === "fixed" && (
<NumericPropertyControl <NumericPropertyControl
label="필드 고정 너비" label={m.fixedWidthLabel}
unitLabel="(px)" unitLabel={m.fixedWidthUnitLabel}
value={selectProps.widthPx ?? 240} value={selectProps.widthPx ?? 240}
min={80} min={80}
max={800} max={800}
@@ -299,16 +303,16 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
{ id: "md", label: "보통", value: 280 }, { id: "md", label: "보통", value: 280 },
{ id: "lg", label: "넓게", value: 360 }, { id: "lg", label: "넓게", value: 360 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
widthPx: v, widthPx: v,
} as any); } as any)
}} }
/> />
)} )}
<NumericPropertyControl <NumericPropertyControl
label="셀렉트 가로 패딩 (px)" label={m.paddingXLabel}
unitLabel="(px)" unitLabel={m.paddingXUnitLabel}
value={typeof selectProps.paddingX === "number" ? selectProps.paddingX : 12} value={typeof selectProps.paddingX === "number" ? selectProps.paddingX : 12}
min={0} min={0}
max={60} max={60}
@@ -327,8 +331,8 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
} }
/> />
<NumericPropertyControl <NumericPropertyControl
label="셀렉트 세로 패딩 (px)" label={m.paddingYLabel}
unitLabel="(px)" unitLabel={m.paddingYUnitLabel}
value={typeof selectProps.paddingY === "number" ? selectProps.paddingY : 10} value={typeof selectProps.paddingY === "number" ? selectProps.paddingY : 10}
min={0} min={0}
max={40} max={40}
@@ -347,9 +351,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
} }
/> />
<ColorPickerField <ColorPickerField
label="필드 텍스트 색상" label={m.textColorLabel}
ariaLabelColorInput="셀렉트 텍스트 색상 피커" ariaLabelColorInput={m.textColorPickerAria}
ariaLabelHexInput="셀렉트 텍스트 색상 HEX" ariaLabelHexInput={m.textColorHexAria}
value={ value={
selectProps.textColorCustom && selectProps.textColorCustom.trim() !== "" selectProps.textColorCustom && selectProps.textColorCustom.trim() !== ""
? selectProps.textColorCustom ? selectProps.textColorCustom
@@ -368,9 +372,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
}} }}
/> />
<ColorPickerField <ColorPickerField
label="필드 채움 색상" label={m.fillColorLabel}
ariaLabelColorInput="셀렉트 채움 색상 피커" ariaLabelColorInput={m.fillColorPickerAria}
ariaLabelHexInput="셀렉트 채움 색상 HEX" ariaLabelHexInput={m.fillColorHexAria}
value={ value={
selectProps.fillColorCustom && selectProps.fillColorCustom.trim() !== "" selectProps.fillColorCustom && selectProps.fillColorCustom.trim() !== ""
? selectProps.fillColorCustom ? selectProps.fillColorCustom
@@ -389,9 +393,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
}} }}
/> />
<ColorPickerField <ColorPickerField
label="필드 테두리 색상" label={m.strokeColorLabel}
ariaLabelColorInput="셀렉트 테두리 색상 피커" ariaLabelColorInput={m.strokeColorPickerAria}
ariaLabelHexInput="셀렉트 테두리 색상 HEX" ariaLabelHexInput={m.strokeColorHexAria}
value={ value={
selectProps.strokeColorCustom && selectProps.strokeColorCustom.trim() !== "" selectProps.strokeColorCustom && selectProps.strokeColorCustom.trim() !== ""
? selectProps.strokeColorCustom ? selectProps.strokeColorCustom
@@ -410,7 +414,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
}} }}
/> />
<NumericPropertyControl <NumericPropertyControl
label="필드 모서리 둥글기" label={m.borderRadiusLabel}
value={(() => { value={(() => {
const r = selectProps.borderRadius ?? "md"; const r = selectProps.borderRadius ?? "md";
return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4; 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} max={8}
step={1} step={1}
presets={[ presets={[
{ id: "none", label: "없음", value: 0 }, { id: "none", label: m.borderRadiusPresetNone, value: 0 },
{ id: "sm", label: "작게", value: 2 }, { id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
{ id: "md", label: "보통", value: 4 }, { id: "md", label: m.borderRadiusPresetMedium, value: 4 },
{ id: "lg", label: "크게", value: 6 }, { id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
{ id: "full", label: "완전 둥글게", value: 8 }, { id: "full", label: m.borderRadiusPresetFull, value: 8 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
const next = const next =
src/app/editor/page.tsx
+86 -67
View File
@@ -4,7 +4,19 @@ import type { CSSProperties, ReactNode } from "react";
import { Fragment, Suspense, useEffect, useState } from "react"; import { Fragment, Suspense, useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation"; 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 { import {
DndContext, DndContext,
PointerSensor, PointerSensor,
@@ -25,6 +37,8 @@ import {
} from "@dnd-kit/sortable"; } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities"; import { CSS } from "@dnd-kit/utilities";
import { useEditorStore } from "@/features/editor/state/editorStore"; import { useEditorStore } from "@/features/editor/state/editorStore";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorMessages } from "@/features/i18n/messages/editor";
import type { import type {
Block, Block,
TextBlockProps, TextBlockProps,
@@ -81,6 +95,8 @@ export default function EditorPage() {
function EditorPageInner() { function EditorPageInner() {
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const locale = useAppLocale();
const m = getEditorMessages(locale);
const blocks = useEditorStore((state) => state.blocks); const blocks = useEditorStore((state) => state.blocks);
const selectedBlockId = useEditorStore((state) => state.selectedBlockId); const selectedBlockId = useEditorStore((state) => state.selectedBlockId);
const selectedListItemId = useEditorStore((state) => (state as any).selectedListItemId as string | null | undefined); const selectedListItemId = useEditorStore((state) => (state as any).selectedListItemId as string | null | undefined);
@@ -454,7 +470,7 @@ function EditorPageInner() {
const handleSaveProject = async () => { const handleSaveProject = async () => {
const slug = (projectConfig.slug ?? "").trim(); const slug = (projectConfig.slug ?? "").trim();
if (!slug) { if (!slug) {
setProjectMessage("프로젝트 주소를 입력해 주세요."); setProjectMessage(m.projectMessageSlugRequired);
return; return;
} }
@@ -510,26 +526,26 @@ function EditorPageInner() {
} }
} }
setProjectMessage("프로젝트 저장에 실패했습니다."); setProjectMessage(m.projectMessageSaveFailed);
return; return;
} }
const data = await response.json(); const data = await response.json();
setProjectMessage(`프로젝트가 저장되었습니다: ${data.slug}`); setProjectMessage(`${m.projectMessageSaveSuccessPrefix}${data.slug}`);
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
window.location.href = "/projects"; window.location.href = "/projects";
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setProjectMessage("프로젝트 저장 중 오류가 발생했습니다."); setProjectMessage(m.projectMessageSaveError);
} }
}; };
const handleLoadProject = async () => { const handleLoadProject = async () => {
const slug = (projectConfig.slug ?? "").trim(); const slug = (projectConfig.slug ?? "").trim();
if (!slug) { if (!slug) {
setProjectMessage("불러올 주소를 입력해 주세요."); setProjectMessage(m.projectMessageLoadSlugRequired);
return; return;
} }
@@ -552,7 +568,7 @@ function EditorPageInner() {
// 다른 프로젝트(slug)를 불러왔으므로 이전 history/future 를 초기화한다. // 다른 프로젝트(slug)를 불러왔으므로 이전 history/future 를 초기화한다.
resetHistory(); resetHistory();
setProjectMessage(`로컬에서 프로젝트를 불러왔습니다: ${slug}`); setProjectMessage(`${m.projectMessageLoadLocalSuccessPrefix}${slug}`);
return; return;
} }
} catch { } catch {
@@ -564,7 +580,7 @@ function EditorPageInner() {
// 2) 로컬에 없으면 서버에서 조회 // 2) 로컬에 없으면 서버에서 조회
const response = await fetch(`/api/projects/${slug}`); const response = await fetch(`/api/projects/${slug}`);
if (!response.ok) { if (!response.ok) {
setProjectMessage("프로젝트를 불러오지 못했습니다."); setProjectMessage(m.projectMessageLoadFailed);
return; return;
} }
@@ -580,28 +596,26 @@ function EditorPageInner() {
// 서버에서 다른 프로젝트를 불러온 뒤에는 이전 history/future 를 모두 비운다. // 서버에서 다른 프로젝트를 불러온 뒤에는 이전 history/future 를 모두 비운다.
resetHistory(); resetHistory();
setProjectMessage(`프로젝트를 불러왔습니다: ${slug}`); setProjectMessage(`${m.projectMessageLoadServerSuccessPrefix}${slug}`);
} else { } else {
setProjectMessage("프로젝트 데이터 형식이 올바르지 않습니다."); setProjectMessage(m.projectMessageInvalidFormat);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setProjectMessage("프로젝트 불러오기 중 오류가 발생했습니다."); setProjectMessage(m.projectMessageLoadError);
} }
}; };
const handleDeleteProject = async () => { const handleDeleteProject = async () => {
const slug = (projectConfig.slug ?? "").trim(); const slug = (projectConfig.slug ?? "").trim();
if (!slug) { if (!slug) {
setProjectMessage("삭제할 프로젝트 주소가 없습니다."); setProjectMessage(m.projectMessageDeleteSlugMissing);
return; return;
} }
if (typeof window === "undefined") return; if (typeof window === "undefined") return;
const confirmed = window.confirm( const confirmed = window.confirm(m.confirmDeleteProject);
"현재 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
);
if (!confirmed) return; if (!confirmed) return;
try { try {
@@ -610,7 +624,7 @@ function EditorPageInner() {
}); });
if (!response.ok) { if (!response.ok) {
setProjectMessage("프로젝트 삭제에 실패했습니다."); setProjectMessage(m.projectMessageDeleteFailed);
return; return;
} }
@@ -618,12 +632,12 @@ function EditorPageInner() {
window.localStorage.removeItem(`pb:project:${slug}`); window.localStorage.removeItem(`pb:project:${slug}`);
window.localStorage.removeItem(`pb:autosave:${slug}`); window.localStorage.removeItem(`pb:autosave:${slug}`);
setProjectMessage("프로젝트가 삭제되었습니다."); setProjectMessage(m.projectMessageDeleteSuccess);
window.location.href = "/projects"; window.location.href = "/projects";
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setProjectMessage("프로젝트 삭제 중 오류가 발생했습니다."); setProjectMessage(m.projectMessageDeleteError);
} }
}; };
@@ -879,6 +893,8 @@ function EditorPageInner() {
if (!authUserId) return; if (!authUserId) return;
if (typeof window === "undefined") return; if (typeof window === "undefined") return;
return;
const slugRaw = projectConfig?.slug; const slugRaw = projectConfig?.slug;
const slug = typeof slugRaw === "string" ? slugRaw.trim() : ""; const slug = typeof slugRaw === "string" ? slugRaw.trim() : "";
if (!slug || slug === "my-landing") return; if (!slug || slug === "my-landing") return;
@@ -1063,7 +1079,11 @@ function EditorPageInner() {
selectListItem={selectListItem} selectListItem={selectListItem}
allBlocks={blocks} allBlocks={blocks}
renderBlocks={renderBlocks} 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> </Fragment>
); );
@@ -1077,8 +1097,8 @@ function EditorPageInner() {
<Pencil className="w-4 h-4 text-sky-400" aria-hidden="true" /> <Pencil className="w-4 h-4 text-sky-400" aria-hidden="true" />
</span> </span>
<div className="flex flex-col"> <div className="flex flex-col">
<h1 className="text-xl font-semibold">Page Editor</h1> <h1 className="text-xl font-semibold">{m.headerTitle}</h1>
<p className="text-xs text-slate-400">빌더 MVP용 에디터 페이지 골격</p> <p className="text-xs text-slate-400">{m.headerDescription}</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">
@@ -1087,14 +1107,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" 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" /> <ListChecks className="w-3 h-3" aria-hidden="true" />
<span>프로젝트 목록</span> <span>{m.navProjects}</span>
</Link> </Link>
<Link <Link
href={previewHref} 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" 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" /> <Eye className="w-3 h-3" aria-hidden="true" />
<span>프리뷰 열기</span> <span>{m.navPreview}</span>
</Link> </Link>
<button <button
type="button" type="button"
@@ -1103,7 +1123,7 @@ function EditorPageInner() {
disabled={!canUndo} disabled={!canUndo}
> >
<Undo2 className="w-3 h-3" aria-hidden="true" /> <Undo2 className="w-3 h-3" aria-hidden="true" />
<span>실행 취소</span> <span>{m.undoLabel}</span>
</button> </button>
<button <button
type="button" type="button"
@@ -1112,7 +1132,7 @@ function EditorPageInner() {
disabled={!canRedo} disabled={!canRedo}
> >
<Redo2 className="w-3 h-3" aria-hidden="true" /> <Redo2 className="w-3 h-3" aria-hidden="true" />
<span>다시 실행</span> <span>{m.redoLabel}</span>
</button> </button>
<div className="relative"> <div className="relative">
<button <button
@@ -1121,7 +1141,7 @@ function EditorPageInner() {
onClick={() => setMenuOpen((prev) => !prev)} onClick={() => setMenuOpen((prev) => !prev)}
> >
<FilePlus2 className="w-3 h-3" aria-hidden="true" /> <FilePlus2 className="w-3 h-3" aria-hidden="true" />
<span>메뉴</span> <span>{m.menuLabel}</span>
<span className="text-[9px]">▼</span> <span className="text-[9px]">▼</span>
</button> </button>
{menuOpen && ( {menuOpen && (
@@ -1136,7 +1156,7 @@ function EditorPageInner() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<FilePlus2 className="w-3 h-3" aria-hidden="true" /> <FilePlus2 className="w-3 h-3" aria-hidden="true" />
<span>프로젝트 저장/불러오기</span> <span>{m.menuProjectSaveLoad}</span>
</span> </span>
</button> </button>
<button <button
@@ -1149,7 +1169,7 @@ function EditorPageInner() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<FilePlus2 className="w-3 h-3" aria-hidden="true" /> <FilePlus2 className="w-3 h-3" aria-hidden="true" />
<span>JSON 내보내기/불러오기</span> <span>{m.menuJsonImportExport}</span>
</span> </span>
</button> </button>
<button <button
@@ -1162,22 +1182,7 @@ function EditorPageInner() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<FilePlus2 className="w-3 h-3" aria-hidden="true" /> <FilePlus2 className="w-3 h-3" aria-hidden="true" />
<span>페이지 파일로 내보내기 (ZIP)</span> <span>{m.menuExportZip}</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> </span>
</button> </button>
<button <button
@@ -1190,7 +1195,7 @@ function EditorPageInner() {
> >
<span className="inline-flex items-center gap-2 text-red-500"> <span className="inline-flex items-center gap-2 text-red-500">
<Trash2 className="w-3 h-3" aria-hidden="true" /> <Trash2 className="w-3 h-3" aria-hidden="true" />
<span>프로젝트 삭제</span> <span>{m.menuDeleteProject}</span>
</span> </span>
</button> </button>
</div> </div>
@@ -1235,7 +1240,7 @@ function EditorPageInner() {
<div className="fixed inset-0 z-30 flex items-center justify-center bg-black/60"> <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="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"> <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 <button
type="button" type="button"
className="text-slate-400 hover:text-slate-700 text-sm dark:hover:text-slate-100" className="text-slate-400 hover:text-slate-700 text-sm dark:hover:text-slate-100"
@@ -1246,7 +1251,7 @@ function EditorPageInner() {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="flex flex-col gap-1"> <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 <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" 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 ?? ""} value={projectConfig.title ?? ""}
@@ -1254,7 +1259,7 @@ function EditorPageInner() {
/> />
</label> </label>
<label className="flex flex-col gap-1"> <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 <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" 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 ?? ""} value={projectConfig.slug ?? ""}
@@ -1267,14 +1272,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" 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} onClick={handleSaveProject}
> >
저장 (로컬 + 서버) {m.modalSaveButton}
</button> </button>
<button <button
type="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" 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} onClick={handleLoadProject}
> >
불러오기 {m.modalLoadButton}
</button> </button>
</div> </div>
{projectMessage && ( {projectMessage && (
@@ -1292,10 +1297,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="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"> <div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-medium"> <h3 className="text-sm font-medium">
JSON Export / Import {m.jsonModalTitle}
<span className="text-xs text-slate-500 dark:text-slate-400"> <span className="text-xs text-slate-500 dark:text-slate-400">{m.jsonModalSubtitle}</span>
* 에디터 내용을 가져오거나 내보낼 수 있습니다.
</span>
</h3> </h3>
<button <button
type="button" type="button"
@@ -1312,19 +1315,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" 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} onClick={handleExportJson}
> >
JSON 내보내기 {m.jsonExportButton}
</button> </button>
<button <button
type="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" 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} onClick={handleClearCanvas}
> >
캔버스 초기화 {m.jsonClearCanvasButton}
</button> </button>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<label className="flex flex-col gap-1"> <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 <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" 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} value={exportJson}
@@ -1332,7 +1335,7 @@ function EditorPageInner() {
/> />
</label> </label>
<label className="flex flex-col gap-1"> <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 <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" 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} value={importJson}
@@ -1343,7 +1346,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" 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} onClick={handleApplyImportJson}
> >
JSON 적용하기 {m.jsonApplyButton}
</button> </button>
</label> </label>
</div> </div>
@@ -1418,6 +1421,10 @@ interface SortableEditorBlockProps {
allBlocks: Block[]; allBlocks: Block[];
renderBlocks: (targetBlocks: Block[]) => ReactNode; renderBlocks: (targetBlocks: Block[]) => ReactNode;
updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps & FormBlockProps>) => void; updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps & FormBlockProps>) => void;
listItemToolbarMoveUpLabel: string;
listItemToolbarMoveDownLabel: string;
listItemToolbarIndentLabel: string;
listItemToolbarOutdentLabel: string;
} }
function SortableEditorBlock({ function SortableEditorBlock({
@@ -1438,6 +1445,10 @@ function SortableEditorBlock({
allBlocks, allBlocks,
renderBlocks, renderBlocks,
updateBlock, updateBlock,
listItemToolbarMoveUpLabel,
listItemToolbarMoveDownLabel,
listItemToolbarIndentLabel,
listItemToolbarOutdentLabel,
}: SortableEditorBlockProps) { }: SortableEditorBlockProps) {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
id: block.id, id: block.id,
@@ -2172,7 +2183,9 @@ function SortableEditorBlock({
<span className="ml-2 inline-flex items-center gap-1 text-[10px] text-slate-900 dark:text-slate-300 align-middle"> <span className="ml-2 inline-flex items-center gap-1 text-[10px] text-slate-900 dark:text-slate-300 align-middle">
<button <button
type="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) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
selectBlock(block.id); selectBlock(block.id);
@@ -2180,11 +2193,13 @@ function SortableEditorBlock({
(useEditorStore.getState() as any).moveSelectedListItemUp(block.id); (useEditorStore.getState() as any).moveSelectedListItemUp(block.id);
}} }}
> >
위 <ArrowUp className="w-3 h-3" aria-hidden="true" />
</button> </button>
<button <button
type="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) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
selectBlock(block.id); selectBlock(block.id);
@@ -2192,11 +2207,13 @@ function SortableEditorBlock({
(useEditorStore.getState() as any).moveSelectedListItemDown(block.id); (useEditorStore.getState() as any).moveSelectedListItemDown(block.id);
}} }}
> >
아래 <ArrowDown className="w-3 h-3" aria-hidden="true" />
</button> </button>
<button <button
type="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) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
selectBlock(block.id); selectBlock(block.id);
@@ -2204,11 +2221,13 @@ function SortableEditorBlock({
(useEditorStore.getState() as any).indentSelectedListItem(block.id); (useEditorStore.getState() as any).indentSelectedListItem(block.id);
}} }}
> >
들여쓰기 <IndentIncrease className="w-3 h-3" aria-hidden="true" />
</button> </button>
<button <button
type="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) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
selectBlock(block.id); selectBlock(block.id);
@@ -2216,7 +2235,7 @@ function SortableEditorBlock({
(useEditorStore.getState() as any).outdentSelectedListItem(block.id); (useEditorStore.getState() as any).outdentSelectedListItem(block.id);
}} }}
> >
내어쓰기 <IndentDecrease className="w-3 h-3" aria-hidden="true" />
</button> </button>
</span> </span>
{node.children && node.children.length > 0 && renderListNodes(node.children, level + 1)} {node.children && node.children.length > 0 && renderListNodes(node.children, level + 1)}
src/app/editor/panels/BlocksSidebar.tsx
+41 -39
View File
@@ -2,6 +2,8 @@
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { useEditorStore } from "@/features/editor/state/editorStore"; import { useEditorStore } from "@/features/editor/state/editorStore";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorSidebarMessages } from "@/features/i18n/messages/editorSidebar";
import { import {
FilePlus2, FilePlus2,
ListChecks, ListChecks,
@@ -21,6 +23,8 @@ import {
// 좌측 블록/폼/템플릿 추가 사이드바를 분리한 컴포넌트 // 좌측 블록/폼/템플릿 추가 사이드바를 분리한 컴포넌트
export function BlocksSidebar() { export function BlocksSidebar() {
const locale = useAppLocale();
const m = getEditorSidebarMessages(locale);
const addTextBlock = useEditorStore((state) => state.addTextBlock); const addTextBlock = useEditorStore((state) => state.addTextBlock);
const addButtonBlock = useEditorStore((state) => state.addButtonBlock); const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
const addImageBlock = useEditorStore((state) => state.addImageBlock); const addImageBlock = useEditorStore((state) => state.addImageBlock);
@@ -103,7 +107,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<Pencil className="w-4 h-4 text-sky-400" aria-hidden="true" /> <Pencil className="w-4 h-4 text-sky-400" aria-hidden="true" />
<span>블록</span> <span>{m.blocksTitle}</span>
</span> </span>
</button> </button>
</h2> </h2>
@@ -116,7 +120,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<Type className="w-3 h-3" aria-hidden="true" /> <Type className="w-3 h-3" aria-hidden="true" />
<span>텍스트</span> <span>{m.blocksText}</span>
</span> </span>
</button> </button>
<button <button
@@ -126,7 +130,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<MousePointerClick className="w-3 h-3" aria-hidden="true" /> <MousePointerClick className="w-3 h-3" aria-hidden="true" />
<span>버튼</span> <span>{m.blocksButton}</span>
</span> </span>
</button> </button>
<button <button
@@ -136,7 +140,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<ImageIcon className="w-3 h-3" aria-hidden="true" /> <ImageIcon className="w-3 h-3" aria-hidden="true" />
<span>이미지</span> <span>{m.blocksImage}</span>
</span> </span>
</button> </button>
<button <button
@@ -146,7 +150,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<Video className="w-3 h-3" aria-hidden="true" /> <Video className="w-3 h-3" aria-hidden="true" />
<span>비디오</span> <span>{m.blocksVideo}</span>
</span> </span>
</button> </button>
<button <button
@@ -156,7 +160,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<Minus className="w-3 h-3" aria-hidden="true" /> <Minus className="w-3 h-3" aria-hidden="true" />
<span>구분선</span> <span>{m.blocksDivider}</span>
</span> </span>
</button> </button>
<button <button
@@ -166,7 +170,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<List className="w-3 h-3" aria-hidden="true" /> <List className="w-3 h-3" aria-hidden="true" />
<span>리스트</span> <span>{m.blocksList}</span>
</span> </span>
</button> </button>
<button <button
@@ -176,7 +180,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<LayoutTemplate className="w-3 h-3" aria-hidden="true" /> <LayoutTemplate className="w-3 h-3" aria-hidden="true" />
<span>섹션</span> <span>{m.blocksSection}</span>
</span> </span>
</button> </button>
</> </>
@@ -192,7 +196,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<ListChecks className="w-3 h-3" aria-hidden="true" /> <ListChecks className="w-3 h-3" aria-hidden="true" />
<span>폼 요소</span> <span>{m.formsTitle}</span>
</span> </span>
</button> </button>
</h3> </h3>
@@ -205,7 +209,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<FilePlus2 className="w-3 h-3" aria-hidden="true" /> <FilePlus2 className="w-3 h-3" aria-hidden="true" />
<span>폼 컨트롤러</span> <span>{m.formsController}</span>
</span> </span>
</button> </button>
<button <button
@@ -215,7 +219,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<FileText className="w-3 h-3" aria-hidden="true" /> <FileText className="w-3 h-3" aria-hidden="true" />
<span>입력(Input)</span> <span>{m.formsInput}</span>
</span> </span>
</button> </button>
<button <button
@@ -225,7 +229,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<ListFilter className="w-3 h-3" aria-hidden="true" /> <ListFilter className="w-3 h-3" aria-hidden="true" />
<span>셀렉트(Select)</span> <span>{m.formsSelect}</span>
</span> </span>
</button> </button>
<button <button
@@ -235,7 +239,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<CircleDot className="w-3 h-3" aria-hidden="true" /> <CircleDot className="w-3 h-3" aria-hidden="true" />
<span>단일 선택(Radio)</span> <span>{m.formsRadio}</span>
</span> </span>
</button> </button>
<button <button
@@ -245,7 +249,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<SquareCheck className="w-3 h-3" aria-hidden="true" /> <SquareCheck className="w-3 h-3" aria-hidden="true" />
<span>다중 선택(Checkbox)</span> <span>{m.formsCheckbox}</span>
</span> </span>
</button> </button>
</> </>
@@ -262,7 +266,7 @@ export function BlocksSidebar() {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<FilePlus2 className="w-3 h-3" aria-hidden="true" /> <FilePlus2 className="w-3 h-3" aria-hidden="true" />
<span>템플릿</span> <span>{m.templatesTitle}</span>
</span> </span>
</button> </button>
</h3> </h3>
@@ -270,7 +274,7 @@ export function BlocksSidebar() {
{isTemplatesOpen && ( {isTemplatesOpen && (
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-2"> <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="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="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"> <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" 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} onClick={handleAddHeroTemplate}
> >
Hero 템플릿 {m.templateHeroLabel}
</button> </button>
<div <div
data-testid="template-preview-hero" data-testid="template-preview-hero"
@@ -292,9 +296,7 @@ export function BlocksSidebar() {
</div> </div>
</div> </div>
</div> </div>
<p className="text-[10px] text-slate-400 leading-snug"> <p className="text-[10px] text-slate-400 leading-snug">{m.templateHeroDescription}</p>
페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)
</p>
</div> </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"> <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" 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} onClick={handleAddCtaTemplate}
> >
CTA 템플릿 {m.templateCtaLabel}
</button> </button>
<div <div
data-testid="template-preview-cta" data-testid="template-preview-cta"
@@ -319,13 +321,13 @@ export function BlocksSidebar() {
</div> </div>
</div> </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>
</div> </div>
<div className="space-y-2"> <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="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="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"> <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" 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} onClick={handleAddFeaturesTemplate}
> >
기능 템플릿 {m.templateFeaturesLabel}
</button> </button>
<div <div
data-testid="template-preview-features" data-testid="template-preview-features"
@@ -354,7 +356,7 @@ export function BlocksSidebar() {
</div> </div>
</div> </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>
<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="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" 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} onClick={handleAddFaqTemplate}
> >
FAQ 템플릿 {m.templateFaqLabel}
</button> </button>
<div <div
data-testid="template-preview-faq" data-testid="template-preview-faq"
@@ -380,7 +382,7 @@ export function BlocksSidebar() {
</div> </div>
</div> </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>
<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="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" 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} onClick={handleAddPricingTemplate}
> >
상품 템플릿 {m.templatePricingLabel}
</button> </button>
<div <div
data-testid="template-preview-pricing" data-testid="template-preview-pricing"
@@ -411,7 +413,7 @@ export function BlocksSidebar() {
</div> </div>
</div> </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>
<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="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" 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} onClick={handleAddBlogTemplate}
> >
블로그 템플릿 {m.templateBlogLabel}
</button> </button>
<div <div
data-testid="template-preview-blog" data-testid="template-preview-blog"
@@ -444,13 +446,13 @@ export function BlocksSidebar() {
</div> </div>
</div> </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>
</div> </div>
<div className="space-y-2"> <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="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="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"> <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" 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} onClick={handleAddTestimonialsTemplate}
> >
후기 템플릿 {m.templateTestimonialsLabel}
</button> </button>
<div <div
data-testid="template-preview-testimonials" data-testid="template-preview-testimonials"
@@ -479,7 +481,7 @@ export function BlocksSidebar() {
</div> </div>
</div> </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>
<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="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" 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} onClick={handleAddTeamTemplate}
> >
Team 템플릿 {m.templateTeamLabel}
</button> </button>
<div <div
data-testid="template-preview-team" data-testid="template-preview-team"
@@ -512,13 +514,13 @@ export function BlocksSidebar() {
</div> </div>
</div> </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>
</div> </div>
<div className="space-y-2"> <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="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="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"> <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" 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} onClick={handleAddFooterTemplate}
> >
Footer 템플릿 {m.templateFooterLabel}
</button> </button>
<div <div
data-testid="template-preview-footer" data-testid="template-preview-footer"
@@ -541,7 +543,7 @@ export function BlocksSidebar() {
<div className="flex-1 h-[1px] bg-slate-700/40" /> <div className="flex-1 h-[1px] bg-slate-700/40" />
</div> </div>
</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> </div>
</div> </div>
src/app/editor/panels/ButtonPropertiesPanel.tsx
+78 -74
View File
@@ -3,6 +3,8 @@
import type { ButtonBlockProps } from "@/features/editor/state/editorStore"; import type { ButtonBlockProps } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; 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 = { export type ButtonPropertiesPanelProps = {
buttonProps: ButtonBlockProps; buttonProps: ButtonBlockProps;
@@ -11,6 +13,8 @@ export type ButtonPropertiesPanelProps = {
}; };
export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBlock }: ButtonPropertiesPanelProps) { export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBlock }: ButtonPropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorButtonPanelMessages(locale);
const imageSource: "none" | "url" | "upload" = (() => { const imageSource: "none" | "url" | "upload" = (() => {
const hasSrc = (buttonProps.imageSrc ?? "").trim() !== ""; const hasSrc = (buttonProps.imageSrc ?? "").trim() !== "";
if (!hasSrc) return "none"; if (!hasSrc) return "none";
@@ -22,10 +26,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
<> <>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>버튼 텍스트</span> <span>{m.buttonTextLabel}</span>
<textarea <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" 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} value={buttonProps.label}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { label: e.target.value } as any); updateBlock(selectedBlockId, { label: e.target.value } as any);
@@ -34,14 +38,14 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</label> </label>
</div> </div>
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400"> <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"> <div className="space-y-1">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>버튼 이미지 소스</span> <span>{m.imageSourceLabel}</span>
<select <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" 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} value={imageSource}
onChange={(e) => { onChange={(e) => {
const next = e.target.value as "none" | "url" | "upload"; 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="none">{m.imageSourceOptionNone}</option>
<option value="url">URL</option> <option value="url">{m.imageSourceOptionUrl}</option>
<option value="upload">파일 업로드</option> <option value="upload">{m.imageSourceOptionUpload}</option>
</select> </select>
</label> </label>
</div> </div>
@@ -72,10 +76,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
{imageSource === "url" && ( {imageSource === "url" && (
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>버튼 이미지 URL</span> <span>{m.imageUrlLabel}</span>
<input <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" 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 ?? ""} value={buttonProps.imageSrc ?? ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
@@ -93,12 +97,12 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
{imageSource === "upload" && ( {imageSource === "upload" && (
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>버튼 이미지 파일 업로드</span> <span>{m.imageUploadLabel}</span>
<input <input
type="file" type="file"
accept="image/*" 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" 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) => { onChange={async (event) => {
const file = event.target.files?.[0]; const file = event.target.files?.[0];
if (!file) return; if (!file) return;
@@ -113,7 +117,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
}); });
if (!response.ok) { if (!response.ok) {
console.error("버튼 이미지 업로드 실패", await response.text()); console.error("Button image upload failed", await response.text());
return; return;
} }
@@ -126,7 +130,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
imageAssetId: data.id, imageAssetId: data.id,
} as any); } as any);
} catch (error) { } catch (error) {
console.error("버튼 이미지 업로드 중 오류", error); console.error("Error while uploading button image", error);
} finally { } finally {
event.target.value = ""; event.target.value = "";
} }
@@ -140,10 +144,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
<> <>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>버튼 이미지 대체 텍스트</span> <span>{m.imageAltLabel}</span>
<input <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" 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 ?? ""} value={buttonProps.imageAlt ?? ""}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { imageAlt: e.target.value } as any); updateBlock(selectedBlockId, { imageAlt: e.target.value } as any);
@@ -154,10 +158,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>버튼 이미지 위치</span> <span>{m.imagePlacementLabel}</span>
<select <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" 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"} value={buttonProps.imagePlacement ?? "left"}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -165,10 +169,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
} as any); } as any);
}} }}
> >
<option value="left">텍스트 왼쪽</option> <option value="left">{m.imagePlacementOptionLeft}</option>
<option value="right">텍스트 오른쪽</option> <option value="right">{m.imagePlacementOptionRight}</option>
<option value="top">텍스트 위쪽</option> <option value="top">{m.imagePlacementOptionTop}</option>
<option value="bottom">텍스트 아래쪽</option> <option value="bottom">{m.imagePlacementOptionBottom}</option>
</select> </select>
</label> </label>
</div> </div>
@@ -177,7 +181,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="가로 패딩 (px)" label={m.paddingXLabel}
unitLabel="(px)" unitLabel="(px)"
value={buttonProps.paddingX ?? 16} value={buttonProps.paddingX ?? 16}
min={0} min={0}
@@ -199,7 +203,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="세로 패딩 (px)" label={m.paddingYLabel}
unitLabel="(px)" unitLabel="(px)"
value={buttonProps.paddingY ?? 10} value={buttonProps.paddingY ?? 10}
min={0} min={0}
@@ -221,10 +225,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>버튼 링크</span> <span>{m.linkLabel}</span>
<input <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" 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} value={buttonProps.href}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { href: e.target.value } as any); updateBlock(selectedBlockId, { href: e.target.value } as any);
@@ -234,19 +238,19 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>정렬</span> <span>{m.alignLabel}</span>
<select <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" 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"} value={buttonProps.align ?? "left"}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as NonNullable<ButtonBlockProps["align"]>; const value = e.target.value as NonNullable<ButtonBlockProps["align"]>;
updateBlock(selectedBlockId, { align: value } as any); updateBlock(selectedBlockId, { align: value } as any);
}} }}
> >
<option value="left">왼쪽</option> <option value="left">{m.alignOptionLeft}</option>
<option value="center">가운데</option> <option value="center">{m.alignOptionCenter}</option>
<option value="right">오른쪽</option> <option value="right">{m.alignOptionRight}</option>
</select> </select>
</label> </label>
</div> </div>
@@ -255,9 +259,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<ColorPickerField <ColorPickerField
label="텍스트 색상" label={m.textColorLabel}
ariaLabelColorInput="버튼 텍스트 색상 피커" ariaLabelColorInput={m.textColorPickerAria}
ariaLabelHexInput="버튼 텍스트 색상 HEX" ariaLabelHexInput={m.textColorHexAria}
value={ value={
buttonProps.textColorCustom && buttonProps.textColorCustom.trim() !== "" buttonProps.textColorCustom && buttonProps.textColorCustom.trim() !== ""
? buttonProps.textColorCustom ? buttonProps.textColorCustom
@@ -278,27 +282,27 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>스타일</span> <span>{m.styleLabel}</span>
<select <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" 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"} value={buttonProps.variant ?? "solid"}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as NonNullable<ButtonBlockProps["variant"]>; const value = e.target.value as NonNullable<ButtonBlockProps["variant"]>;
updateBlock(selectedBlockId, { variant: value } as any); updateBlock(selectedBlockId, { variant: value } as any);
}} }}
> >
<option value="solid">채움</option> <option value="solid">{m.styleOptionSolid}</option>
<option value="outline">외곽선</option> <option value="outline">{m.styleOptionOutline}</option>
<option value="ghost">고스트</option> <option value="ghost">{m.styleOptionGhost}</option>
</select> </select>
</label> </label>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<ColorPickerField <ColorPickerField
label="채움 색상" label={m.fillColorLabel}
ariaLabelColorInput="버튼 채움 색상 피커" ariaLabelColorInput={m.fillColorPickerAria}
ariaLabelHexInput="버튼 채움 색상 HEX" ariaLabelHexInput={m.fillColorHexAria}
value={ value={
buttonProps.fillColorCustom && buttonProps.fillColorCustom.trim() !== "" buttonProps.fillColorCustom && buttonProps.fillColorCustom.trim() !== ""
? buttonProps.fillColorCustom ? buttonProps.fillColorCustom
@@ -319,9 +323,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<ColorPickerField <ColorPickerField
label="외곽선 색상" label={m.strokeColorLabel}
ariaLabelColorInput="버튼 외곽선 색상 피커" ariaLabelColorInput={m.strokeColorPickerAria}
ariaLabelHexInput="버튼 외곽선 색상 HEX" ariaLabelHexInput={m.strokeColorHexAria}
value={ value={
buttonProps.strokeColorCustom && buttonProps.strokeColorCustom.trim() !== "" buttonProps.strokeColorCustom && buttonProps.strokeColorCustom.trim() !== ""
? buttonProps.strokeColorCustom ? buttonProps.strokeColorCustom
@@ -342,7 +346,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="모서리 둥글기" label={m.borderRadiusLabel}
value={(() => { value={(() => {
const r = buttonProps.borderRadius ?? "md"; const r = buttonProps.borderRadius ?? "md";
return r === "none" ? 0 : r === "sm" ? 1 : r === "lg" ? 3 : r === "full" ? 4 : 2; 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} max={4}
step={1} step={1}
presets={[ presets={[
{ id: "none", label: "없음", value: 0 }, { id: "none", label: m.borderRadiusPresetNone, value: 0 },
{ id: "sm", label: "작게", value: 1 }, { id: "sm", label: m.borderRadiusPresetSmall, value: 1 },
{ id: "md", label: "보통", value: 2 }, { id: "md", label: m.borderRadiusPresetMedium, value: 2 },
{ id: "lg", label: "크게", value: 3 }, { id: "lg", label: m.borderRadiusPresetLarge, value: 3 },
{ id: "full", label: "완전 둥글게", value: 4 }, { id: "full", label: m.borderRadiusPresetFull, value: 4 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
const next = const next =
@@ -366,10 +370,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>버튼 너비 모드</span> <span>{m.widthModeLabel}</span>
<select <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" 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")} value={buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -377,23 +381,23 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
} as any); } as any);
}} }}
> >
<option value="auto">자동</option> <option value="auto">{m.widthModeOptionAuto}</option>
<option value="full">전체 폭</option> <option value="full">{m.widthModeOptionFull}</option>
<option value="fixed">고정 값</option> <option value="fixed">{m.widthModeOptionFixed}</option>
</select> </select>
</label> </label>
{(buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")) === "fixed" && ( {(buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")) === "fixed" && (
<NumericPropertyControl <NumericPropertyControl
label="버튼 고정 너비" label={m.fixedWidthLabel}
unitLabel="(px)" unitLabel={m.fixedWidthUnitLabel}
value={buttonProps.widthPx ?? 240} value={buttonProps.widthPx ?? 240}
min={80} min={80}
max={600} max={600}
step={10} step={10}
presets={[ presets={[
{ id: "sm", label: "작게", value: 180 }, { id: "sm", label: m.fixedWidthPresetSmall, value: 180 },
{ id: "md", label: "보통", value: 240 }, { id: "md", label: m.fixedWidthPresetMedium, value: 240 },
{ id: "lg", label: "넓게", value: 320 }, { id: "lg", label: m.fixedWidthPresetLarge, value: 320 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -405,8 +409,8 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="버튼 크기" label={m.fontSizeLabel}
unitLabel="(px)" unitLabel={m.fontSizeUnitLabel}
value={(() => { value={(() => {
const raw = buttonProps.fontSizeCustom ?? ""; const raw = buttonProps.fontSizeCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -437,7 +441,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="줄 간격" label={m.lineHeightLabel}
value={(() => { value={(() => {
const raw = buttonProps.lineHeightCustom ?? ""; const raw = buttonProps.lineHeightCustom ?? "";
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -448,9 +452,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
max={3} max={3}
step={0.05} step={0.05}
presets={[ presets={[
{ id: "tight", label: "좁게", value: 1.1 }, { id: "tight", label: m.lineHeightPresetTight, value: 1.1 },
{ id: "normal", label: "보통", value: 1.4 }, { id: "normal", label: m.lineHeightPresetNormal, value: 1.4 },
{ id: "relaxed", label: "넓게", value: 1.8 }, { id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.8 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -461,8 +465,8 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="글자 간격" label={m.letterSpacingLabel}
unitLabel="(px)" unitLabel={m.letterSpacingUnitLabel}
value={(() => { value={(() => {
const raw = buttonProps.letterSpacingCustom ?? ""; const raw = buttonProps.letterSpacingCustom ?? "";
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -476,11 +480,11 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
max={32} max={32}
step={1} step={1}
presets={[ presets={[
{ id: "tighter", label: "아주 좁게", value: -1.5 }, { id: "tighter", label: m.letterSpacingPresetTighter, value: -1.5 },
{ id: "tight", label: "좁게", value: -0.5 }, { id: "tight", label: m.letterSpacingPresetTight, value: -0.5 },
{ id: "normal", label: "보통", value: 0 }, { id: "normal", label: m.letterSpacingPresetNormal, value: 0 },
{ id: "wide", label: "넓게", value: 1 }, { id: "wide", label: m.letterSpacingPresetWide, value: 1 },
{ id: "wider", label: "아주 넓게", value: 2 }, { id: "wider", label: m.letterSpacingPresetWider, value: 2 },
]} ]}
onChangeValue={(px) => { onChangeValue={(px) => {
const em = px / 16; const em = px / 16;
src/app/editor/panels/DividerPropertiesPanel.tsx
+33 -28
View File
@@ -3,6 +3,8 @@
import type { DividerBlockProps } from "@/features/editor/state/editorStore"; import type { DividerBlockProps } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; 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 = { export type DividerPropertiesPanelProps = {
dividerProps: DividerBlockProps; dividerProps: DividerBlockProps;
@@ -11,77 +13,80 @@ export type DividerPropertiesPanelProps = {
}; };
export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBlock }: DividerPropertiesPanelProps) { export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBlock }: DividerPropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorDividerPropertiesPanelMessages(locale);
return ( return (
<> <>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>정렬</span> <span>{m.alignLabel}</span>
<select <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" 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} value={dividerProps.align}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as DividerBlockProps["align"]; const value = e.target.value as DividerBlockProps["align"];
updateBlock(selectedBlockId, { align: value } as any); updateBlock(selectedBlockId, { align: value } as any);
}} }}
> >
<option value="left">왼쪽</option> <option value="left">{m.alignOptionLeft}</option>
<option value="center">가운데</option> <option value="center">{m.alignOptionCenter}</option>
<option value="right">오른쪽</option> <option value="right">{m.alignOptionRight}</option>
</select> </select>
</label> </label>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>두께</span> <span>{m.thicknessLabel}</span>
<select <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" 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} value={dividerProps.thickness}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as DividerBlockProps["thickness"]; const value = e.target.value as DividerBlockProps["thickness"];
updateBlock(selectedBlockId, { thickness: value } as any); updateBlock(selectedBlockId, { thickness: value } as any);
}} }}
> >
<option value="thin">얇게</option> <option value="thin">{m.thicknessOptionThin}</option>
<option value="medium">보통</option> <option value="medium">{m.thicknessOptionMedium}</option>
</select> </select>
</label> </label>
</div> </div>
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400"> <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"> <label className="flex flex-col gap-1">
<span>길이 모드</span> <span>{m.lengthModeLabel}</span>
<select <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" 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"} value={dividerProps.widthMode ?? "full"}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as NonNullable<DividerBlockProps["widthMode"]>; const value = e.target.value as NonNullable<DividerBlockProps["widthMode"]>;
updateBlock(selectedBlockId, { widthMode: value } as any); updateBlock(selectedBlockId, { widthMode: value } as any);
}} }}
> >
<option value="auto">내용에 맞춤</option> <option value="auto">{m.lengthModeOptionAuto}</option>
<option value="full">전체 폭</option> <option value="full">{m.lengthModeOptionFull}</option>
<option value="fixed">고정 길이 (px)</option> <option value="fixed">{m.lengthModeOptionFixed}</option>
</select> </select>
</label> </label>
{(dividerProps.widthMode ?? "full") === "fixed" && ( {(dividerProps.widthMode ?? "full") === "fixed" && (
<NumericPropertyControl <NumericPropertyControl
label="고정 길이 (px)" label={m.fixedLengthLabel}
unitLabel="(px)" unitLabel={m.fixedLengthUnitLabel}
value={dividerProps.widthPx ?? 320} value={dividerProps.widthPx ?? 320}
min={40} min={40}
max={1200} max={1200}
step={10} step={10}
presets={[ presets={[
{ id: "sm", label: "짧게", value: 240 }, { id: "sm", label: m.fixedLengthPresetShort, value: 240 },
{ id: "md", label: "보통", value: 320 }, { id: "md", label: m.fixedLengthPresetNormal, value: 320 },
{ id: "lg", label: "길게", value: 480 }, { id: "lg", label: m.fixedLengthPresetLong, value: 480 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
updateBlock(selectedBlockId, { widthPx: v } as any); updateBlock(selectedBlockId, { widthPx: v } as any);
@@ -91,9 +96,9 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
{/* 색상 */} {/* 색상 */}
<ColorPickerField <ColorPickerField
label="선 색상" label={m.colorLabel}
ariaLabelColorInput="구분선 색상 피커" ariaLabelColorInput={m.colorPickerAria}
ariaLabelHexInput="구분선 색상 HEX" ariaLabelHexInput={m.colorHexAria}
value={ value={
dividerProps.colorHex && dividerProps.colorHex.trim() !== "" dividerProps.colorHex && dividerProps.colorHex.trim() !== ""
? dividerProps.colorHex ? dividerProps.colorHex
@@ -110,8 +115,8 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
{/* 상하 여백 (슬라이더) */} {/* 상하 여백 (슬라이더) */}
<NumericPropertyControl <NumericPropertyControl
label="위/아래 여백" label={m.marginLabel}
unitLabel="(px)" unitLabel={m.marginUnitLabel}
value={(() => { value={(() => {
if (typeof dividerProps.marginYPx === "number") { if (typeof dividerProps.marginYPx === "number") {
return dividerProps.marginYPx; return dividerProps.marginYPx;
@@ -123,9 +128,9 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
max={50} max={50}
step={2} step={2}
presets={[ presets={[
{ id: "sm", label: "작게", value: 8 }, { id: "sm", label: m.marginPresetSmall, value: 8 },
{ id: "md", label: "보통", value: 16 }, { id: "md", label: m.marginPresetNormal, value: 16 },
{ id: "lg", label: "크게", value: 24 }, { id: "lg", label: m.marginPresetLarge, value: 24 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
updateBlock(selectedBlockId, { marginYPx: v } as any); updateBlock(selectedBlockId, { marginYPx: v } as any);
src/app/editor/panels/ImagePropertiesPanel.tsx
+40 -36
View File
@@ -3,6 +3,8 @@
import type { ImageBlockProps } from "@/features/editor/state/editorStore"; import type { ImageBlockProps } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; 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 = { export type ImagePropertiesPanelProps = {
imageProps: ImageBlockProps; imageProps: ImageBlockProps;
@@ -11,6 +13,8 @@ export type ImagePropertiesPanelProps = {
}; };
export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock }: ImagePropertiesPanelProps) { export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock }: ImagePropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorImagePanelMessages(locale);
const source: "url" | "upload" = const source: "url" | "upload" =
imageProps.sourceType === "asset" || (imageProps.src && imageProps.src.startsWith("/api/image/")) imageProps.sourceType === "asset" || (imageProps.src && imageProps.src.startsWith("/api/image/"))
? "upload" ? "upload"
@@ -20,10 +24,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
<> <>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>이미지 소스</span> <span>{m.imageSourceLabel}</span>
<select <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" 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} value={source}
onChange={(e) => { onChange={(e) => {
const next = e.target.value as "url" | "upload"; 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="url">{m.imageSourceOptionUrl}</option>
<option value="upload">파일 업로드</option> <option value="upload">{m.imageSourceOptionUpload}</option>
</select> </select>
</label> </label>
</div> </div>
@@ -48,10 +52,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
{source === "url" && ( {source === "url" && (
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>이미지 URL</span> <span>{m.imageUrlLabel}</span>
<input <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" 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} value={imageProps.src}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
@@ -69,12 +73,12 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
{source === "upload" && ( {source === "upload" && (
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>이미지 파일 업로드</span> <span>{m.imageUploadLabel}</span>
<input <input
type="file" type="file"
accept="image/*" 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" 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) => { onChange={async (event) => {
const file = event.target.files?.[0]; const file = event.target.files?.[0];
if (!file) return; if (!file) return;
@@ -89,7 +93,7 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
}); });
if (!response.ok) { if (!response.ok) {
console.error("이미지 업로드 실패", await response.text()); console.error("Image upload failed", await response.text());
return; return;
} }
@@ -102,7 +106,7 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
assetId: data.id, assetId: data.id,
} as any); } as any);
} catch (error) { } catch (error) {
console.error("이미지 업로드 중 오류", error); console.error("Error while uploading image", error);
} finally { } finally {
event.target.value = ""; event.target.value = "";
} }
@@ -113,10 +117,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
)} )}
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>대체 텍스트</span> <span>{m.altLabel}</span>
<input <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" 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} value={imageProps.alt}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { alt: e.target.value } as any); updateBlock(selectedBlockId, { alt: e.target.value } as any);
@@ -126,14 +130,14 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
</div> </div>
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400"> <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"> <div className="space-y-1">
<ColorPickerField <ColorPickerField
label="카드 배경색" label={m.cardBackgroundLabel}
ariaLabelColorInput="이미지 카드 배경색 피커" ariaLabelColorInput={m.cardBackgroundPickerAria}
ariaLabelHexInput="이미지 카드 배경색 HEX" ariaLabelHexInput={m.cardBackgroundHexAria}
value={imageProps.backgroundColorCustom ?? ""} value={imageProps.backgroundColorCustom ?? ""}
onChange={(hex) => { onChange={(hex) => {
const next = hex && hex.trim().length > 0 ? hex : undefined; 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"> <label className="flex flex-col gap-1">
<span>정렬</span> <span>{m.alignLabel}</span>
<select <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" 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"} value={imageProps.align ?? "center"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -156,18 +160,18 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
} as any) } as any)
} }
> >
<option value="left">왼쪽</option> <option value="left">{m.alignOptionLeft}</option>
<option value="center">가운데</option> <option value="center">{m.alignOptionCenter}</option>
<option value="right">오른쪽</option> <option value="right">{m.alignOptionRight}</option>
</select> </select>
</label> </label>
{/* 너비 모드 */} {/* 너비 모드 */}
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>너비 모드</span> <span>{m.widthModeLabel}</span>
<select <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" 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"} value={imageProps.widthMode ?? "auto"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -175,23 +179,23 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
} as any) } as any)
} }
> >
<option value="auto">내용에 맞춤</option> <option value="auto">{m.widthModeOptionAuto}</option>
<option value="fixed">고정 너비 (px)</option> <option value="fixed">{m.widthModeOptionFixed}</option>
</select> </select>
</label> </label>
{(imageProps.widthMode ?? "auto") === "fixed" && ( {(imageProps.widthMode ?? "auto") === "fixed" && (
<NumericPropertyControl <NumericPropertyControl
label="고정 너비 (px)" label={m.fixedWidthLabel}
unitLabel="(px)" unitLabel={m.fixedWidthUnitLabel}
value={imageProps.widthPx ?? 320} value={imageProps.widthPx ?? 320}
min={40} min={40}
max={1200} max={1200}
step={10} step={10}
presets={[ presets={[
{ id: "sm", label: "작게", value: 240 }, { id: "sm", label: m.fixedWidthPresetSmall, value: 240 },
{ id: "md", label: "보통", value: 320 }, { id: "md", label: m.fixedWidthPresetMedium, value: 320 },
{ id: "lg", label: "넓게", value: 480 }, { id: "lg", label: m.fixedWidthPresetLarge, value: 480 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -203,7 +207,7 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
{/* 모서리 둥글기 */} {/* 모서리 둥글기 */}
<NumericPropertyControl <NumericPropertyControl
label="모서리 둥글기" label={m.borderRadiusLabel}
value={(() => { value={(() => {
if (typeof imageProps.borderRadiusPx === "number") { if (typeof imageProps.borderRadiusPx === "number") {
return imageProps.borderRadiusPx; return imageProps.borderRadiusPx;
@@ -216,11 +220,11 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
max={200} max={200}
step={1} step={1}
presets={[ presets={[
{ id: "none", label: "없음", value: 0 }, { id: "none", label: m.borderRadiusPresetNone, value: 0 },
{ id: "sm", label: "작게", value: 20 }, { id: "sm", label: m.borderRadiusPresetSmall, value: 20 },
{ id: "md", label: "보통", value: 60 }, { id: "md", label: m.borderRadiusPresetMedium, value: 60 },
{ id: "lg", label: "크게", value: 120 }, { id: "lg", label: m.borderRadiusPresetLarge, value: 120 },
{ id: "full", label: "완전 둥글게", value: 180 }, { id: "full", label: m.borderRadiusPresetFull, value: 180 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
// 0~50 범위를 토큰으로 매핑한다. // 0~50 범위를 토큰으로 매핑한다.
src/app/editor/panels/ListPropertiesPanel.tsx
+43 -39
View File
@@ -10,6 +10,8 @@ import {
} from "@/features/editor/state/editorStore"; } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; 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 = { export type ListPropertiesPanelProps = {
listProps: ListBlockProps; listProps: ListBlockProps;
@@ -24,14 +26,16 @@ export function ListPropertiesPanel({
selectedListItemId, selectedListItemId,
updateBlock, updateBlock,
}: ListPropertiesPanelProps) { }: ListPropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorListPanelMessages(locale);
return ( return (
<> <>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>리스트 아이템 (줄바꿈으로 구분)</span> <span>{m.listItemsLabel}</span>
<textarea <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" 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={(() => { value={(() => {
const tree = (listProps as any).itemsTree as any[] | undefined; const tree = (listProps as any).itemsTree as any[] | undefined;
@@ -83,30 +87,30 @@ export function ListPropertiesPanel({
</div> </div>
<div className="flex items-center justify-between text-xs text-slate-400"> <div className="flex items-center justify-between text-xs text-slate-400">
<label className="flex items-center gap-2"> <label className="flex items-center gap-2">
<span>정렬</span> <span>{m.alignLabel}</span>
<select <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" 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} value={listProps.align}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as ListBlockProps["align"]; const value = e.target.value as ListBlockProps["align"];
updateBlock(selectedBlockId, { align: value } as any); updateBlock(selectedBlockId, { align: value } as any);
}} }}
> >
<option value="left">왼쪽</option> <option value="left">{m.alignOptionLeft}</option>
<option value="center">가운데</option> <option value="center">{m.alignOptionCenter}</option>
<option value="right">오른쪽</option> <option value="right">{m.alignOptionRight}</option>
</select> </select>
</label> </label>
</div> </div>
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400"> <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 <NumericPropertyControl
label="글자 크기 (px)" label={m.fontSizeLabel}
unitLabel="(px)" unitLabel={m.fontSizeUnitLabel}
value={(() => { value={(() => {
const raw = listProps.fontSizeCustom ?? ""; const raw = listProps.fontSizeCustom ?? "";
const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -117,9 +121,9 @@ export function ListPropertiesPanel({
max={32} max={32}
step={1} step={1}
presets={[ presets={[
{ id: "sm", label: "작게", value: 12 }, { id: "sm", label: m.fontSizePresetSmall, value: 12 },
{ id: "md", label: "보통", value: 14 }, { id: "md", label: m.fontSizePresetMedium, value: 14 },
{ id: "lg", label: "크게", value: 18 }, { id: "lg", label: m.fontSizePresetLarge, value: 18 },
]} ]}
onChangeValue={(px) => { onChangeValue={(px) => {
updateBlock(selectedBlockId, { fontSizeCustom: `${px}px` } as any); updateBlock(selectedBlockId, { fontSizeCustom: `${px}px` } as any);
@@ -128,7 +132,7 @@ export function ListPropertiesPanel({
{/* 줄 간격 */} {/* 줄 간격 */}
<NumericPropertyControl <NumericPropertyControl
label="줄 간격" label={m.lineHeightLabel}
value={(() => { value={(() => {
const raw = listProps.lineHeightCustom ?? ""; const raw = listProps.lineHeightCustom ?? "";
const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/); const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -139,9 +143,9 @@ export function ListPropertiesPanel({
max={3} max={3}
step={0.05} step={0.05}
presets={[ presets={[
{ id: "tight", label: "좁게", value: 1.2 }, { id: "tight", label: m.lineHeightPresetTight, value: 1.2 },
{ id: "normal", label: "보통", value: 1.5 }, { id: "normal", label: m.lineHeightPresetNormal, value: 1.5 },
{ id: "relaxed", label: "넓게", value: 1.8 }, { id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.8 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
updateBlock(selectedBlockId, { lineHeightCustom: v.toString() } as any); updateBlock(selectedBlockId, { lineHeightCustom: v.toString() } as any);
@@ -150,9 +154,9 @@ export function ListPropertiesPanel({
{/* 텍스트 색상 */} {/* 텍스트 색상 */}
<ColorPickerField <ColorPickerField
label="텍스트 색상" label={m.textColorLabel}
ariaLabelColorInput="리스트 텍스트 색상 피커" ariaLabelColorInput={m.textColorPickerAria}
ariaLabelHexInput="리스트 텍스트 색상 HEX" ariaLabelHexInput={m.textColorHexAria}
// textColorCustom 이 비어 있으면 커스텀 색상을 사용하지 않고, "없음" 상태로 취급한다. // textColorCustom 이 비어 있으면 커스텀 색상을 사용하지 않고, "없음" 상태로 취급한다.
// 이 경우 HEX 인풋은 빈 문자열을 유지하고, 팔레트 라벨은 "없음"으로 표시된다. // 이 경우 HEX 인풋은 빈 문자열을 유지하고, 팔레트 라벨은 "없음"으로 표시된다.
value={ value={
@@ -170,9 +174,9 @@ export function ListPropertiesPanel({
/> />
<ColorPickerField <ColorPickerField
label="블록 배경색" label={m.backgroundColorLabel}
ariaLabelColorInput="리스트 배경색 피커" ariaLabelColorInput={m.backgroundColorPickerAria}
ariaLabelHexInput="리스트 배경색 HEX" ariaLabelHexInput={m.backgroundColorHexAria}
value={listProps.backgroundColorCustom ?? ""} value={listProps.backgroundColorCustom ?? ""}
onChange={(hex) => { onChange={(hex) => {
updateBlock(selectedBlockId, { backgroundColorCustom: hex } as any); updateBlock(selectedBlockId, { backgroundColorCustom: hex } as any);
@@ -182,10 +186,10 @@ export function ListPropertiesPanel({
{/* 불릿 스타일 (● / ○ / ■ / 숫자형 / 없음) */} {/* 불릿 스타일 (● / ○ / ■ / 숫자형 / 없음) */}
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>불릿 스타일</span> <span>{m.bulletStyleLabel}</span>
<select <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" 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"} value={listProps.bulletStyle ?? "disc"}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as NonNullable<ListBlockProps["bulletStyle"]>; const value = e.target.value as NonNullable<ListBlockProps["bulletStyle"]>;
@@ -203,22 +207,22 @@ export function ListPropertiesPanel({
updateBlock(selectedBlockId, { bulletStyle: value, ordered } as any); updateBlock(selectedBlockId, { bulletStyle: value, ordered } as any);
}} }}
> >
<option value="disc">기본 (●)</option> <option value="disc">{m.bulletStyleOptionDisc}</option>
<option value="circle">원 (○)</option> <option value="circle">{m.bulletStyleOptionCircle}</option>
<option value="square">사각 (■)</option> <option value="square">{m.bulletStyleOptionSquare}</option>
<option value="decimal">숫자 (1.)</option> <option value="decimal">{m.bulletStyleOptionDecimal}</option>
<option value="lower-alpha">알파벳 소문자 (a.)</option> <option value="lower-alpha">{m.bulletStyleOptionLowerAlpha}</option>
<option value="upper-alpha">알파벳 대문자 (A.)</option> <option value="upper-alpha">{m.bulletStyleOptionUpperAlpha}</option>
<option value="lower-roman">로마 숫자 소문자 (i.)</option> <option value="lower-roman">{m.bulletStyleOptionLowerRoman}</option>
<option value="upper-roman">로마 숫자 대문자 (I.)</option> <option value="upper-roman">{m.bulletStyleOptionUpperRoman}</option>
<option value="none">없음</option> <option value="none">{m.bulletStyleOptionNone}</option>
</select> </select>
</label> </label>
{/* 아이템 간 여백 (슬라이더) */} {/* 아이템 간 여백 (슬라이더) */}
<NumericPropertyControl <NumericPropertyControl
label="아이템 간 여백 (px)" label={m.gapLabel}
unitLabel="(px)" unitLabel={m.gapUnitLabel}
value={(() => { value={(() => {
if (typeof listProps.gapYPx === "number") { if (typeof listProps.gapYPx === "number") {
return listProps.gapYPx; return listProps.gapYPx;
@@ -230,9 +234,9 @@ export function ListPropertiesPanel({
max={40} max={40}
step={2} step={2}
presets={[ presets={[
{ id: "tight", label: "좁게", value: 4 }, { id: "tight", label: m.gapPresetTight, value: 4 },
{ id: "normal", label: "보통", value: 8 }, { id: "normal", label: m.gapPresetNormal, value: 8 },
{ id: "relaxed", label: "넓게", value: 16 }, { id: "relaxed", label: m.gapPresetRelaxed, value: 16 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
updateBlock(selectedBlockId, { gapYPx: v } as any); updateBlock(selectedBlockId, { gapYPx: v } as any);
src/app/editor/panels/ProjectPropertiesPanel.tsx
+42 -37
View File
@@ -4,6 +4,8 @@ import { useEditorStore } from "@/features/editor/state/editorStore";
import type { CanvasPreset, ProjectConfig } from "@/features/editor/state/editorStore"; import type { CanvasPreset, ProjectConfig } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; 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() { export function ProjectPropertiesPanel() {
const projectConfig = useEditorStore((state) => (state as any).projectConfig as ProjectConfig); 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, (state) => (state as any).updateProjectConfig as (partial: Partial<ProjectConfig>) => void,
); );
const locale = useAppLocale();
const m = getEditorProjectPropertiesPanelMessages(locale);
const handleChangePreset = (preset: CanvasPreset) => { const handleChangePreset = (preset: CanvasPreset) => {
if (preset === "mobile") { if (preset === "mobile") {
updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 390 }); updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 390 });
@@ -39,14 +44,14 @@ export function ProjectPropertiesPanel() {
return ( return (
<div className="space-y-4 text-xs text-slate-900 dark:text-slate-200"> <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"> <div className="space-y-1">
<label className="flex flex-col gap-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 <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" 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} value={projectConfig.title}
onChange={(e) => updateProjectConfig({ title: e.target.value })} onChange={(e) => updateProjectConfig({ title: e.target.value })}
/> />
@@ -55,10 +60,10 @@ export function ProjectPropertiesPanel() {
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-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 <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" 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} value={projectConfig.slug}
onChange={(e) => updateProjectConfig({ slug: e.target.value })} onChange={(e) => updateProjectConfig({ slug: e.target.value })}
/> />
@@ -67,16 +72,16 @@ export function ProjectPropertiesPanel() {
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="캔버스 너비" label={m.canvasWidthLabel}
unitLabel="(px)" unitLabel={m.canvasWidthUnitLabel}
value={projectConfig.canvasWidthPx ?? 1024} value={projectConfig.canvasWidthPx ?? 1024}
min={320} min={320}
max={1920} max={1920}
step={10} step={10}
presets={[ presets={[
{ id: "mobile", label: "모바일 (390px)", value: 390 }, { id: "mobile", label: m.canvasWidthPresetMobile, value: 390 },
{ id: "tablet", label: "태블릿 (768px)", value: 768 }, { id: "tablet", label: m.canvasWidthPresetTablet, value: 768 },
{ id: "desktop", label: "데스크톱 (1200px)", value: 1200 }, { id: "desktop", label: m.canvasWidthPresetDesktop, value: 1200 },
]} ]}
onChangeValue={handleChangeCanvasWidth} onChangeValue={handleChangeCanvasWidth}
/> />
@@ -84,9 +89,9 @@ export function ProjectPropertiesPanel() {
<div className="space-y-1"> <div className="space-y-1">
<ColorPickerField <ColorPickerField
label="캔버스 배경색" label={m.canvasBgLabel}
ariaLabelColorInput="캔버스 배경색" ariaLabelColorInput={m.canvasBgColorAria}
ariaLabelHexInput="캔버스 배경색 HEX" ariaLabelHexInput={m.canvasBgHexAria}
value={projectConfig.canvasBgColorHex ?? "#020617"} value={projectConfig.canvasBgColorHex ?? "#020617"}
onChange={(hex) => updateProjectConfig({ canvasBgColorHex: hex })} onChange={(hex) => updateProjectConfig({ canvasBgColorHex: hex })}
palette={TEXT_COLOR_PALETTE} palette={TEXT_COLOR_PALETTE}
@@ -95,9 +100,9 @@ export function ProjectPropertiesPanel() {
<div className="space-y-1"> <div className="space-y-1">
<ColorPickerField <ColorPickerField
label="페이지 배경색" label={m.pageBgLabel}
ariaLabelColorInput="페이지 배경색" ariaLabelColorInput={m.pageBgColorAria}
ariaLabelHexInput="페이지 배경색 HEX" ariaLabelHexInput={m.pageBgHexAria}
value={projectConfig.bodyBgColorHex ?? "#020617"} value={projectConfig.bodyBgColorHex ?? "#020617"}
onChange={(hex) => updateProjectConfig({ bodyBgColorHex: hex })} onChange={(hex) => updateProjectConfig({ bodyBgColorHex: hex })}
palette={TEXT_COLOR_PALETTE} palette={TEXT_COLOR_PALETTE}
@@ -105,47 +110,47 @@ export function ProjectPropertiesPanel() {
</div> </div>
<div className="space-y-2 border-t border-slate-800 pt-3"> <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"> <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 <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" 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 타이틀" aria-label={m.seoTitleAria}
placeholder={projectConfig.title || "페이지 제목"} placeholder={projectConfig.title || m.seoTitlePlaceholderFallback}
value={projectConfig.seoTitle ?? ""} value={projectConfig.seoTitle ?? ""}
onChange={(e) => updateProjectConfig({ seoTitle: e.target.value })} onChange={(e) => updateProjectConfig({ seoTitle: e.target.value })}
/> />
</label> </label>
<label className="flex flex-col gap-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.seoDescriptionLabel}</span>
<textarea <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" 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="메타 디스크립션" aria-label={m.seoDescriptionAria}
placeholder="검색엔진 및 SNS 공유에 노출될 페이지 설명을 입력하세요." placeholder={m.seoDescriptionPlaceholder}
value={projectConfig.seoDescription ?? ""} value={projectConfig.seoDescription ?? ""}
onChange={(e) => updateProjectConfig({ seoDescription: e.target.value })} onChange={(e) => updateProjectConfig({ seoDescription: e.target.value })}
/> />
</label> </label>
<label className="flex flex-col gap-1"> <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 <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" 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" aria-label={m.seoOgImageUrlAria}
placeholder="예: https://example.com/og-image.png" placeholder={m.seoOgImageUrlPlaceholder}
value={projectConfig.seoOgImageUrl ?? ""} value={projectConfig.seoOgImageUrl ?? ""}
onChange={(e) => updateProjectConfig({ seoOgImageUrl: e.target.value })} onChange={(e) => updateProjectConfig({ seoOgImageUrl: e.target.value })}
/> />
</label> </label>
<label className="flex flex-col gap-1"> <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 <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" 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" aria-label={m.seoCanonicalUrlAria}
placeholder="예: https://example.com/landing" placeholder={m.seoCanonicalUrlPlaceholder}
value={projectConfig.seoCanonicalUrl ?? ""} value={projectConfig.seoCanonicalUrl ?? ""}
onChange={(e) => updateProjectConfig({ seoCanonicalUrl: e.target.value })} onChange={(e) => updateProjectConfig({ seoCanonicalUrl: e.target.value })}
/> />
@@ -155,36 +160,36 @@ export function ProjectPropertiesPanel() {
<input <input
type="checkbox" type="checkbox"
className="h-3 w-3 rounded border-slate-300 bg-white text-sky-600 dark:border-slate-600 dark:bg-slate-900" 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)} checked={Boolean(projectConfig.seoNoIndex)}
onChange={(e) => updateProjectConfig({ seoNoIndex: e.target.checked })} onChange={(e) => updateProjectConfig({ seoNoIndex: e.target.checked })}
/> />
<span>검색 엔진에 노출하지 않기 (noindex)</span> <span>{m.seoNoIndexLabel}</span>
</label> </label>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-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 <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" 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 ?? ""} value={projectConfig.headHtml ?? ""}
onChange={(e) => updateProjectConfig({ headHtml: e.target.value })} onChange={(e) => updateProjectConfig({ headHtml: e.target.value })}
placeholder="예: &lt;meta name=&quot;description&quot; content=&quot;...&quot; /&gt;" placeholder={m.headHtmlPlaceholder}
/> />
</label> </label>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-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 <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" 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 ?? ""} value={projectConfig.trackingScript ?? ""}
onChange={(e) => updateProjectConfig({ trackingScript: e.target.value })} onChange={(e) => updateProjectConfig({ trackingScript: e.target.value })}
placeholder="예: &lt;script&gt;/* GA, Pixel 코드 */&lt;/script&gt;" placeholder={m.trackingScriptPlaceholder}
/> />
</label> </label>
</div> </div>
src/app/editor/panels/PropertiesSidebar.tsx
+27 -588
View File
@@ -16,6 +16,8 @@ import { FormRadioPropertiesPanel } from "../forms/FormRadioPropertiesPanel";
import { FormControllerPanel } from "../forms/FormControllerPanel"; import { FormControllerPanel } from "../forms/FormControllerPanel";
import { ProjectPropertiesPanel } from "./ProjectPropertiesPanel"; import { ProjectPropertiesPanel } from "./ProjectPropertiesPanel";
import { Trash2, Copy, SlidersHorizontal, HelpCircle } from "lucide-react"; import { Trash2, Copy, SlidersHorizontal, HelpCircle } from "lucide-react";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorPropertiesSidebarMessages } from "@/features/i18n/messages/editorPropertiesSidebar";
type BlockHelpProperty = { type BlockHelpProperty = {
label: string; label: string;
@@ -62,6 +64,8 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
} = props; } = props;
const [helpOpen, setHelpOpen] = useState(false); const [helpOpen, setHelpOpen] = useState(false);
const locale = useAppLocale();
const m = getEditorPropertiesSidebarMessages(locale);
const getHelpContentForSelectedBlock = (): BlockHelpContent | null => { const getHelpContentForSelectedBlock = (): BlockHelpContent | null => {
if (!selectedBlockId) return null; if (!selectedBlockId) return null;
@@ -70,596 +74,31 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
switch (selectedBlock.type) { switch (selectedBlock.type) {
case "text": case "text":
return { return m.text;
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)`는 카드/배너 같은 짧은 문구에 적합합니다.",
},
],
};
case "button": case "button":
return { return m.button;
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:
"버튼 라벨의 행간과 자간을 조절합니다. 글자가 너무 답답해 보이면 자간을 약간 넓히고, 여러 줄 버튼 문구는 줄 간격을 조금 넓혀 주세요.",
},
],
};
case "image": case "image":
return { return m.image;
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 단위로 조절합니다. 아바타/아이콘은 완전 둥글게, 일반 사진은 살짝 둥글게 설정하면 자연스럽습니다.",
},
],
};
case "list": case "list":
return { return m.list;
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:
"각 리스트 항목 사이의 세로 간격입니다. 설명이 긴 항목이 많다면 여백을 넉넉히 두어 가독성을 확보하세요.",
},
],
};
case "divider": case "divider":
return { return m.divider;
title: "구분선 블록 튜토리얼",
description:
"섹션과 섹션 사이를 나누거나 콘텐츠를 시각적으로 구분할 때 사용하는 블록입니다. 정렬, 두께, 길이, 색상, 여백을 조절해 페이지 흐름을 정리해 보세요.",
properties: [
{
label: "정렬",
description:
"구분선을 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
},
{
label: "두께",
description:
"선의 두께입니다. '얇게'는 가벼운 보조 구분선, '보통'은 섹션 경계를 확실히 나눌 때 사용합니다.",
},
{
label: "길이 모드 / 고정 길이 (px)",
description:
"구분선을 전체 폭으로 쓸지, 내용에 맞출지, 또는 px 단위의 고정 길이를 사용할지 선택합니다.",
},
{
label: "선 색상",
description:
"구분선 컬러입니다. 너무 진한 색보다는 섹션 배경보다 살짝 진한 정도의 중간 톤을 추천합니다.",
},
{
label: "위/아래 여백",
description:
"구분선 위·아래에 들어가는 공백입니다. 값이 클수록 섹션이 더 명확하게 나뉘어 보입니다.",
},
],
};
case "section": case "section":
return { return m.section;
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 섹션은 넉넉한 패딩을, 보조 섹션은 중간 정도를 추천합니다.",
},
],
};
case "video": case "video":
return { return m.video;
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:
"자동 재생/반복 재생/음소거/컨트롤 표시 여부를 설정합니다. 자동 재생 영상은 보통 음소거를 함께 켜 두는 것이 좋습니다.",
},
],
};
case "form": case "form":
return { return m.form;
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:
"폼 제출을 담당할 버튼 블록을 지정합니다. 별도 버튼 블록을 만들어 이 컨트롤러와 연결하면, 해당 버튼 클릭 시 폼이 제출됩니다.",
},
],
};
case "formInput": case "formInput":
return { return m.formInput;
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:
"입력 상자의 모서리를 얼마나 둥글게 할지 결정합니다. 페이지의 전체 디자인 톤과 맞춰 사용하세요.",
},
],
};
case "formSelect": case "formSelect":
return { return m.formSelect;
title: "폼 셀렉트 블록 튜토리얼",
description:
"드롭다운 선택 필드를 만들 때 사용하는 블록입니다. 옵션 목록과 기본 선택값, 너비를 설정해 폼 컨트롤러와 함께 사용합니다.",
properties: [
{
label: "라벨 타입 / 필드 라벨",
description:
"셀렉트 필드의 제목 역할을 하는 라벨입니다. 텍스트 또는 이미지로 구성할 수 있으며, 선택해야 할 값의 의미를 설명합니다.",
},
{
label: "전송 키",
description:
"선택된 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
},
{
label: "옵션",
description:
"사용자가 선택할 수 있는 옵션 목록입니다. 라벨과 value를 함께 설정하며, '옵션 추가' 버튼으로 새 옵션을 만들 수 있습니다.",
},
{
label: "필수 필드",
description:
"체크 시 반드시 하나의 옵션을 선택해야 합니다. 중요 선택 항목에는 필수로 설정하는 것을 권장합니다.",
},
{
label: "셀렉트 텍스트 크기 / 줄간격 / 자간",
description:
"드롭다운 필드의 텍스트 타이포그래피를 px 단위로 조절해 가독성과 분위기를 맞춥니다.",
},
{
label: "필드 너비 / 필드 고정 너비",
description:
"셀렉트 필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다.",
},
{
label: "셀렉트 가로/세로 패딩",
description:
"드롭다운 안쪽 여백을 조절해 클릭 영역과 시각적 무게감을 조정합니다.",
},
{
label: "필드 텍스트/채움/테두리 색상",
description:
"선택 영역의 텍스트, 배경, 테두리 색상을 설정합니다. 폼 전체 톤과 잘 어울리는 색상을 사용하는 것이 좋습니다.",
},
{
label: "필드 모서리 둥글기",
description:
"셀렉트 박스의 모서리를 얼마나 둥글게 표시할지 결정합니다.",
},
],
};
case "formCheckbox": case "formCheckbox":
return { return m.formCheckbox;
title: "폼 체크박스 블록 튜토리얼",
description:
"여러 항목 중 복수 선택이 필요한 경우 사용하는 체크박스 그룹 블록입니다. 그룹 타이틀과 옵션 라벨/이미지를 설정해 동의 항목이나 관심사 선택 등을 구성할 수 있습니다.",
properties: [
{
label: "그룹 타이틀 타입 / 그룹 타이틀",
description:
"체크박스 그룹 전체의 제목입니다. 텍스트 또는 이미지로 표현할 수 있으며, 사용자가 어떤 범주를 선택하는지 알려줍니다.",
},
{
label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
description:
"그룹 라벨을 이미지로 사용할 때, URL 또는 업로드된 이미지를 선택합니다.",
},
{
label: "전송 키",
description:
"체크된 옵션들의 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
},
{
label: "옵션 / 옵션 이미지 소스",
description:
"각 체크박스 옵션의 라벨/값/이미지를 설정합니다. URL 또는 업로드 이미지로 옵션별 아이콘을 붙일 수 있습니다.",
},
{
label: "필수 필드",
description:
"체크 시 하나 이상 옵션을 선택해야 합니다. 약관 동의 등 필수 동의 항목에 사용합니다.",
},
{
label: "체크박스 텍스트 크기 / 줄간격 / 자간",
description:
"체크박스 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 항목이 길어질수록 줄간격을 넉넉히 두는 것이 좋습니다.",
},
],
};
case "formRadio": case "formRadio":
return { return m.formRadio;
title: "폼 라디오 블록 튜토리얼",
description:
"여러 옵션 중 하나만 선택해야 할 때 사용하는 라디오 버튼 그룹 블록입니다. 옵션 라벨/이미지와 기본 선택값을 설정해 요금제 선택 등 단일 선택 시나리오를 구성할 수 있습니다.",
properties: [
{
label: "그룹 타이틀 타입 / 그룹 타이틀",
description:
"라디오 그룹의 제목입니다. 요금제 이름, 질문 문구 등 단일 선택의 맥락을 설명합니다.",
},
{
label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
description:
"그룹 라벨을 이미지로 사용할 때, URL 또는 업로드 이미지를 선택합니다.",
},
{
label: "전송 키",
description:
"선택된 하나의 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
},
{
label: "옵션 / 옵션 이미지 소스",
description:
"각 라디오 옵션의 라벨/값/이미지를 설정합니다. 옵션별 아이콘이나 썸네일을 붙여 더 풍부한 선택 UI를 만들 수 있습니다.",
},
{
label: "필수 필드",
description:
"체크 시 반드시 하나의 옵션을 선택해야 합니다. 요금제/유형 선택처럼 반드시 선택이 필요한 경우에 사용합니다.",
},
{
label: "라디오 텍스트 크기 / 줄간격 / 자간",
description:
"라디오 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 옵션 설명이 긴 경우 줄간격을 넉넉히 두세요.",
},
],
};
default: default:
return { return m.fallback;
title: "블록 튜토리얼",
description: "이 블록에 대한 자세한 도움말은 추후 추가될 예정입니다.",
};
} }
}; };
@@ -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"> <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" /> <SlidersHorizontal className="w-4 h-4 text-sky-400" aria-hidden="true" />
<span>속성 패널</span> <span>{m.panelTitle}</span>
</h2> </h2>
{selectedBlockId ? ( {selectedBlockId ? (
<div className="space-y-3"> <div className="space-y-3">
@@ -686,7 +125,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<Trash2 className="w-3 h-3" aria-hidden="true" /> <Trash2 className="w-3 h-3" aria-hidden="true" />
<span>블록 삭제</span> <span>{m.actionDeleteBlock}</span>
</span> </span>
</button> </button>
<button <button
@@ -696,7 +135,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
> >
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<Copy className="w-3 h-3" aria-hidden="true" /> <Copy className="w-3 h-3" aria-hidden="true" />
<span>블록 복제</span> <span>{m.actionDuplicateBlock}</span>
</span> </span>
</button> </button>
</div> </div>
@@ -707,7 +146,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
onClick={() => setHelpOpen(true)} onClick={() => setHelpOpen(true)}
> >
<HelpCircle className="w-3 h-3" aria-hidden="true" /> <HelpCircle className="w-3 h-3" aria-hidden="true" />
<span>HELP</span> <span>{m.actionHelp}</span>
</button> </button>
</div> </div>
{(() => { {(() => {
@@ -869,21 +308,21 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
<h3 className="text-sm font-medium">{help.title}</h3> <h3 className="text-sm font-medium">{help.title}</h3>
<button <button
type="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)} onClick={() => setHelpOpen(false)}
> >
닫기 {m.modalCloseLabel}
</button> </button>
</div> </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 && ( {help.properties && help.properties.length > 0 && (
<div className="mt-3 border-t border-slate-700 pt-2 space-y-2"> <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"> <ul className="space-y-1">
{help.properties.map((prop) => ( {help.properties.map((prop) => (
<li key={prop.label}> <li key={prop.label}>
<div className="text-[11px] font-semibold text-slate-100">{prop.label}</div> <div className="text-[11px] font-semibold text-slate-600 dark:text-slate:-100">{prop.label}</div>
<div className="text-[11px] text-slate-300">{prop.description}</div> <div className="text-[11px] text-slate-500 dark:text-slate-300">{prop.description}</div>
</li> </li>
))} ))}
</ul> </ul>
src/app/editor/panels/SectionPropertiesPanel.tsx
+63 -59
View File
@@ -3,6 +3,8 @@
import type { SectionBlockProps } from "@/features/editor/state/editorStore"; import type { SectionBlockProps } from "@/features/editor/state/editorStore";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorSectionPanelMessages } from "@/features/i18n/messages/editorSectionPanel";
export type SectionPropertiesPanelProps = { export type SectionPropertiesPanelProps = {
sectionProps: SectionBlockProps; sectionProps: SectionBlockProps;
@@ -11,6 +13,8 @@ export type SectionPropertiesPanelProps = {
}; };
export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) { export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorSectionPanelMessages(locale);
const backgroundSource: "none" | "url" | "upload" = (() => { const backgroundSource: "none" | "url" | "upload" = (() => {
const src = sectionProps.backgroundImageSrc?.trim(); const src = sectionProps.backgroundImageSrc?.trim();
const type = sectionProps.backgroundImageSourceType; const type = sectionProps.backgroundImageSourceType;
@@ -44,9 +48,9 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{/* 섹션 배경: 커스텀 색상 피커만 사용 */} {/* 섹션 배경: 커스텀 색상 피커만 사용 */}
<div className="mt-1"> <div className="mt-1">
<ColorPickerField <ColorPickerField
label="배경 색상" label={m.backgroundColorLabel}
ariaLabelColorInput="섹션 배경 색상 선택" ariaLabelColorInput={m.backgroundColorPickerAria}
ariaLabelHexInput="섹션 배경 색상 HEX 입력" ariaLabelHexInput={m.backgroundColorHexAria}
value={sectionProps.backgroundColorCustom ?? ""} value={sectionProps.backgroundColorCustom ?? ""}
onChange={(hex) => { onChange={(hex) => {
const next = hex && hex.trim().length > 0 ? hex : undefined; 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"> <div className="mt-3 space-y-2 text-xs text-slate-400">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 이미지 소스</span> <span>{m.backgroundImageSourceLabel}</span>
<select <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" 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} value={backgroundSource}
onChange={(e) => { onChange={(e) => {
const next = e.target.value as "none" | "url" | "upload"; 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="none">{m.backgroundVideoSourceOptionNone}</option>
<option value="url">URL</option> <option value="url">{m.backgroundVideoSourceOptionUrl}</option>
<option value="upload">파일 업로드</option> <option value="upload">{m.backgroundVideoSourceOptionUpload}</option>
</select> </select>
</label> </label>
{backgroundSource === "url" && ( {backgroundSource === "url" && (
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 이미지 URL</span> <span>{m.backgroundImageUrlLabel}</span>
<input <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" 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 ?? ""} value={sectionProps.backgroundImageSrc ?? ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
@@ -111,12 +115,12 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{backgroundSource === "upload" && ( {backgroundSource === "upload" && (
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 이미지 파일 업로드</span> <span>{m.backgroundImageUploadLabel}</span>
<input <input
type="file" type="file"
accept="image/*" 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" 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) => { onChange={async (event) => {
const file = event.target.files?.[0]; const file = event.target.files?.[0];
if (!file) return; if (!file) return;
@@ -155,10 +159,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{backgroundSource !== "none" && ( {backgroundSource !== "none" && (
<> <>
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 이미지 위치 모드</span> <span>{m.backgroundImagePositionModeLabel}</span>
<select <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" 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} value={positionMode}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -166,16 +170,16 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
} as any) } as any)
} }
> >
<option value="preset">프리셋</option> <option value="preset">{m.backgroundImagePositionModeOptionPreset}</option>
<option value="custom">커스텀 (X/Y)</option> <option value="custom">{m.backgroundImagePositionModeOptionCustom}</option>
</select> </select>
</label> </label>
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 이미지 크기</span> <span>{m.backgroundImageSizeLabel}</span>
<select <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" 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"} value={sectionProps.backgroundImageSize ?? "cover"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -191,10 +195,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{positionMode === "preset" && ( {positionMode === "preset" && (
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 이미지 위치</span> <span>{m.backgroundImagePositionLabel}</span>
<select <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" 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"} value={sectionProps.backgroundImagePosition ?? "center"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -202,11 +206,11 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
} as any) } as any)
} }
> >
<option value="center">가운데</option> <option value="center">{m.backgroundImagePositionOptionCenter}</option>
<option value="top">위</option> <option value="top">{m.backgroundImagePositionOptionTop}</option>
<option value="bottom">아래</option> <option value="bottom">{m.backgroundImagePositionOptionBottom}</option>
<option value="left">왼쪽</option> <option value="left">{m.backgroundImagePositionOptionLeft}</option>
<option value="right">오른쪽</option> <option value="right">{m.backgroundImagePositionOptionRight}</option>
</select> </select>
</label> </label>
)} )}
@@ -214,7 +218,7 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{positionMode === "custom" && ( {positionMode === "custom" && (
<> <>
<NumericPropertyControl <NumericPropertyControl
label="배경 이미지 가로 위치" label={m.backgroundImagePositionXLabel}
unitLabel="(%)" unitLabel="(%)"
value={ value={
typeof sectionProps.backgroundImagePositionXPercent === "number" typeof sectionProps.backgroundImagePositionXPercent === "number"
@@ -238,7 +242,7 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
/> />
<NumericPropertyControl <NumericPropertyControl
label="배경 이미지 세로 위치" label={m.backgroundImagePositionYLabel}
unitLabel="(%)" unitLabel="(%)"
value={ value={
typeof sectionProps.backgroundImagePositionYPercent === "number" typeof sectionProps.backgroundImagePositionYPercent === "number"
@@ -264,10 +268,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
)} )}
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 이미지 반복</span> <span>{m.backgroundImageRepeatLabel}</span>
<select <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" 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"} value={sectionProps.backgroundImageRepeat ?? "no-repeat"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -275,10 +279,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
} as any) } as any)
} }
> >
<option value="no-repeat">반복 없음</option> <option value="no-repeat">{m.backgroundImageRepeatOptionNone}</option>
<option value="repeat">가로/세로 반복</option> <option value="repeat">{m.backgroundImageRepeatOptionBoth}</option>
<option value="repeat-x">가로 반복</option> <option value="repeat-x">{m.backgroundImageRepeatOptionX}</option>
<option value="repeat-y">세로 반복</option> <option value="repeat-y">{m.backgroundImageRepeatOptionY}</option>
</select> </select>
</label> </label>
</> </>
@@ -288,10 +292,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{/* 섹션 배경 비디오 */} {/* 섹션 배경 비디오 */}
<div className="mt-3 space-y-2 text-xs text-slate-400"> <div className="mt-3 space-y-2 text-xs text-slate-400">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 비디오 소스</span> <span>{m.backgroundVideoSourceLabel}</span>
<select <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" 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} value={backgroundVideoSource}
onChange={(e) => { onChange={(e) => {
const next = e.target.value as "none" | "url" | "upload"; const next = e.target.value as "none" | "url" | "upload";
@@ -321,10 +325,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{backgroundVideoSource === "url" && ( {backgroundVideoSource === "url" && (
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 비디오 URL</span> <span>{m.backgroundVideoUrlLabel}</span>
<input <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" 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 ?? ""} value={sectionProps.backgroundVideoSrc ?? ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
@@ -340,12 +344,12 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{backgroundVideoSource === "upload" && ( {backgroundVideoSource === "upload" && (
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>배경 비디오 파일 업로드</span> <span>{m.backgroundVideoUploadLabel}</span>
<input <input
type="file" type="file"
accept="video/*" 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" 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) => { onChange={async (event) => {
const file = event.target.files?.[0]; const file = event.target.files?.[0];
if (!file) return; if (!file) return;
@@ -386,8 +390,8 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{/* 세로 패딩 슬라이더 (px) - 프리셋 + 자유 슬라이더 */} {/* 세로 패딩 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
<div className="mt-3 space-y-1"> <div className="mt-3 space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="세로 패딩" label={m.paddingYLabel}
unitLabel="(px)" unitLabel={m.paddingYUnitLabel}
value={typeof sectionProps.paddingYPx === "number" ? sectionProps.paddingYPx : 48} value={typeof sectionProps.paddingYPx === "number" ? sectionProps.paddingYPx : 48}
min={16} min={16}
max={80} max={80}
@@ -407,14 +411,14 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
</div> </div>
<div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400"> <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"> <label className="flex flex-col gap-1">
<span>섹션 컬럼 레이아웃</span> <span>{m.columnLayoutLabel}</span>
<select <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" 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={(() => { value={(() => {
const cols = sectionProps.columns ?? []; const cols = sectionProps.columns ?? [];
const spans = cols.map((c) => c.span).join("-"); const spans = cols.map((c) => c.span).join("-");
@@ -471,12 +475,12 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
updateBlock(selectedBlockId, { columns: nextColumns } as any); updateBlock(selectedBlockId, { columns: nextColumns } as any);
}} }}
> >
<option value="one-full">1열 (1/1)</option> <option value="one-full">{m.columnLayoutOptionOneFull}</option>
<option value="two-equal">2열 (1/2 - 1/2)</option> <option value="two-equal">{m.columnLayoutOptionTwoEqual}</option>
<option value="two-1-2">2열 (1/3 - 2/3)</option> <option value="two-1-2">{m.columnLayoutOptionTwoOneTwo}</option>
<option value="two-2-1">2열 (2/3 - 1/3)</option> <option value="two-2-1">{m.columnLayoutOptionTwoTwoOne}</option>
<option value="three-equal">3열 (1/3 - 1/3 - 1/3)</option> <option value="three-equal">{m.columnLayoutOptionThreeEqual}</option>
<option value="custom">직접 조정</option> <option value="custom">{m.columnLayoutOptionCustom}</option>
</select> </select>
</label> </label>
@@ -680,8 +684,8 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{/* 최대 폭 슬라이더 (px) - 프리셋 + 자유 슬라이더 */} {/* 최대 폭 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
<NumericPropertyControl <NumericPropertyControl
label="최대 폭 (px)" label={m.maxWidthLabel}
unitLabel="(px)" unitLabel={m.maxWidthUnitLabel}
value={typeof sectionProps.maxWidthPx === "number" ? sectionProps.maxWidthPx : 960} value={typeof sectionProps.maxWidthPx === "number" ? sectionProps.maxWidthPx : 960}
min={640} min={640}
max={1440} max={1440}
@@ -701,8 +705,8 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{/* 컬럼 간 간격 슬라이더 (px) - 프리셋 + 자유 슬라이더 */} {/* 컬럼 간 간격 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
<NumericPropertyControl <NumericPropertyControl
label="컬럼 간 간격 (px)" label={m.gapXLabel}
unitLabel="(px)" unitLabel={m.gapXUnitLabel}
value={typeof sectionProps.gapXPx === "number" ? sectionProps.gapXPx : 24} value={typeof sectionProps.gapXPx === "number" ? sectionProps.gapXPx : 24}
min={0} min={0}
max={64} max={64}
@@ -723,19 +727,19 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
{/* 세로 정렬 */} {/* 세로 정렬 */}
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>컬럼 세로 정렬</span> <span>{m.alignItemsLabel}</span>
<select <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" 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"} value={sectionProps.alignItems ?? "top"}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as NonNullable<SectionBlockProps["alignItems"]>; const value = e.target.value as NonNullable<SectionBlockProps["alignItems"]>;
updateBlock(selectedBlockId, { alignItems: value } as any); updateBlock(selectedBlockId, { alignItems: value } as any);
}} }}
> >
<option value="top">위</option> <option value="top">{m.alignItemsOptionTop}</option>
<option value="center">가운데</option> <option value="center">{m.alignItemsOptionCenter}</option>
<option value="bottom">아래</option> <option value="bottom">{m.alignItemsOptionBottom}</option>
</select> </select>
</label> </label>
</div> </div>
src/app/editor/panels/TextPropertiesPanel.tsx
+51 -47
View File
@@ -4,6 +4,8 @@ import type { TextBlockProps } from "@/features/editor/state/editorStore";
import { PropertySliderField } from "@/features/editor/components/PropertySliderField"; import { PropertySliderField } from "@/features/editor/components/PropertySliderField";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorTextPanelMessages } from "@/features/i18n/messages/editorTextPanel";
export type TextPropertiesPanelProps = { export type TextPropertiesPanelProps = {
textProps: TextBlockProps; textProps: TextBlockProps;
@@ -20,6 +22,8 @@ export function TextPropertiesPanel({
editingBlockId, editingBlockId,
setEditingText, setEditingText,
}: TextPropertiesPanelProps) { }: TextPropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorTextPanelMessages(locale);
const fontSizeMode = textProps.fontSizeMode ?? "scale"; const fontSizeMode = textProps.fontSizeMode ?? "scale";
const fallbackScale = const fallbackScale =
textProps.size === "sm" ? "sm" : textProps.size === "lg" ? "lg" : "base"; textProps.size === "sm" ? "sm" : textProps.size === "lg" ? "lg" : "base";
@@ -97,10 +101,10 @@ export function TextPropertiesPanel({
return ( return (
<> <>
<div className="space-y-1"> <div className="space-y-1">
<p className="text-xs text-slate-400">선택한 텍스트 블록 내용</p> <p className="text-xs text-slate-400">{m.selectedTextLabel}</p>
<textarea <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" 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} value={textProps.text}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
@@ -114,26 +118,26 @@ export function TextPropertiesPanel({
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>정렬</span> <span>{m.alignLabel}</span>
<select <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" 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} value={textProps.align}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as "left" | "center" | "right"; const value = e.target.value as "left" | "center" | "right";
updateBlock(selectedBlockId, { align: value }); updateBlock(selectedBlockId, { align: value });
}} }}
> >
<option value="left">왼쪽</option> <option value="left">{m.alignOptionLeft}</option>
<option value="center">가운데</option> <option value="center">{m.alignOptionCenter}</option>
<option value="right">오른쪽</option> <option value="right">{m.alignOptionRight}</option>
</select> </select>
</label> </label>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<div className="flex items-center justify-between text-[11px] text-slate-400"> <div className="flex items-center justify-between text-[11px] text-slate-400">
<span>텍스트 스타일</span> <span>{m.textStyleLabel}</span>
<div className="flex gap-1"> <div className="flex gap-1">
<button <button
type="button" type="button"
@@ -148,7 +152,7 @@ export function TextPropertiesPanel({
} as any); } as any);
}} }}
> >
밑줄 {m.underlineLabel}
</button> </button>
<button <button
type="button" type="button"
@@ -163,7 +167,7 @@ export function TextPropertiesPanel({
} as any); } as any);
}} }}
> >
가운데줄 {m.strikeLabel}
</button> </button>
<button <button
type="button" type="button"
@@ -178,7 +182,7 @@ export function TextPropertiesPanel({
} as any); } as any);
}} }}
> >
이탤릭 {m.italicLabel}
</button> </button>
</div> </div>
</div> </div>
@@ -186,8 +190,8 @@ export function TextPropertiesPanel({
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="글자 크기" label={m.fontSizeLabel}
unitLabel="(px)" unitLabel={m.fontSizeUnitLabel}
value={Number.isFinite(parsedFontSize) ? parsedFontSize : 16} value={Number.isFinite(parsedFontSize) ? parsedFontSize : 16}
min={10} min={10}
max={72} max={72}
@@ -243,11 +247,11 @@ export function TextPropertiesPanel({
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <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"> <div className="flex items-center gap-2">
<select <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" 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} value={letterSpacingPreset}
onChange={(e) => { onChange={(e) => {
const preset = e.target.value as const preset = e.target.value as
@@ -276,17 +280,17 @@ export function TextPropertiesPanel({
} as any); } as any);
}} }}
> >
<option value="tighter">아주 좁게</option> <option value="tighter">{m.letterSpacingPresetTighter}</option>
<option value="tight">좁게</option> <option value="tight">{m.letterSpacingPresetTight}</option>
<option value="normal">보통</option> <option value="normal">{m.letterSpacingPresetNormal}</option>
<option value="wide">넓게</option> <option value="wide">{m.letterSpacingPresetWide}</option>
<option value="wider">아주 넓게</option> <option value="wider">{m.letterSpacingPresetWider}</option>
</select> </select>
<PropertySliderField <PropertySliderField
label="" label=""
ariaLabelSlider="글자 간격 슬라이더" ariaLabelSlider={m.letterSpacingSliderAria}
ariaLabelInput="글자 간격 커스텀 (px)" ariaLabelInput={m.letterSpacingInputAria}
value={Number.isFinite(parsedLetterSpacingPx) ? parsedLetterSpacingPx : 0} value={Number.isFinite(parsedLetterSpacingPx) ? parsedLetterSpacingPx : 0}
min={-2} min={-2}
max={10} max={10}
@@ -304,18 +308,18 @@ export function TextPropertiesPanel({
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="줄 간격" label={m.lineHeightLabel}
unitLabel="" unitLabel=""
value={Number.isFinite(parsedLineHeight) ? parsedLineHeight : 1.5} value={Number.isFinite(parsedLineHeight) ? parsedLineHeight : 1.5}
min={-1} min={-1}
max={3} max={3}
step={0.05} step={0.05}
presets={[ presets={[
{ id: "tight", label: "좁게", value: 1.25 }, { id: "tight", label: m.lineHeightPresetTight, value: 1.25 },
{ id: "snug", label: "약간 좁게", value: 1.35 }, { id: "snug", label: m.lineHeightPresetSnug, value: 1.35 },
{ id: "normal", label: "보통", value: 1.5 }, { id: "normal", label: m.lineHeightPresetNormal, value: 1.5 },
{ id: "relaxed", label: "넓게", value: 1.7 }, { id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.7 },
{ id: "loose", label: "아주 넓게", value: 1.9 }, { id: "loose", label: m.lineHeightPresetLoose, value: 1.9 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
const preset: Record<NonNullable<TextBlockProps["lineHeightScale"]>, number> = { const preset: Record<NonNullable<TextBlockProps["lineHeightScale"]>, number> = {
@@ -350,7 +354,7 @@ export function TextPropertiesPanel({
<div className="space-y-1"> <div className="space-y-1">
<NumericPropertyControl <NumericPropertyControl
label="굵기" label={m.fontWeightLabel}
value={Number.isFinite(parsedFontWeight) ? parsedFontWeight : 400} value={Number.isFinite(parsedFontWeight) ? parsedFontWeight : 400}
min={100} min={100}
max={900} max={900}
@@ -363,12 +367,12 @@ export function TextPropertiesPanel({
id: scale, id: scale,
label: label:
scale === "normal" scale === "normal"
? "보통" ? m.fontWeightPresetNormal
: scale === "medium" : scale === "medium"
? "중간" ? m.fontWeightPresetMedium
: scale === "semibold" : scale === "semibold"
? "세미볼드" ? m.fontWeightPresetSemibold
: "볼드", : m.fontWeightPresetBold,
value: value:
scale === "normal" scale === "normal"
? 400 ? 400
@@ -410,9 +414,9 @@ export function TextPropertiesPanel({
<div className="space-y-1"> <div className="space-y-1">
<ColorPickerField <ColorPickerField
label="텍스트 색상" label={m.textColorLabel}
ariaLabelColorInput="텍스트 색상 피커" ariaLabelColorInput={m.textColorPickerAria}
ariaLabelHexInput="텍스트 색상 HEX" ariaLabelHexInput={m.textColorHexAria}
value={ value={
(textProps.colorCustom && textProps.colorCustom.startsWith("#") (textProps.colorCustom && textProps.colorCustom.startsWith("#")
? textProps.colorCustom ? textProps.colorCustom
@@ -439,9 +443,9 @@ export function TextPropertiesPanel({
<div className="space-y-1"> <div className="space-y-1">
<ColorPickerField <ColorPickerField
label="블록 배경색" label={m.backgroundColorLabel}
ariaLabelColorInput="텍스트 블록 배경색 피커" ariaLabelColorInput={m.backgroundColorPickerAria}
ariaLabelHexInput="텍스트 블록 배경색 HEX" ariaLabelHexInput={m.backgroundColorHexAria}
value={textProps.backgroundColorCustom ?? ""} value={textProps.backgroundColorCustom ?? ""}
onChange={(hex) => { onChange={(hex) => {
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -454,11 +458,11 @@ export function TextPropertiesPanel({
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <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"> <div className="flex items-center gap-2">
<select <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" 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} value={maxWidthScale}
onChange={(e) => { onChange={(e) => {
const value = e.target.value as NonNullable<TextBlockProps["maxWidthScale"]>; const value = e.target.value as NonNullable<TextBlockProps["maxWidthScale"]>;
@@ -473,16 +477,16 @@ export function TextPropertiesPanel({
} as any); } as any);
}} }}
> >
<option value="none">제한 없음</option> <option value="none">{m.maxWidthPresetNone}</option>
<option value="prose">본문 폭 (60ch)</option> <option value="prose">{m.maxWidthPresetProse}</option>
<option value="narrow">좁게 (40ch)</option> <option value="narrow">{m.maxWidthPresetNarrow}</option>
</select> </select>
<input <input
type="range" type="range"
min={20} min={20}
max={120} max={120}
step={5} step={5}
aria-label="최대 너비 슬라이더 (ch 단위)" aria-label={m.maxWidthSliderAria}
value={(() => { value={(() => {
const raw = textProps.maxWidthCustom ?? ""; const raw = textProps.maxWidthCustom ?? "";
const match = raw.match(/([0-9]+)ch/); const match = raw.match(/([0-9]+)ch/);
@@ -503,8 +507,8 @@ export function TextPropertiesPanel({
</div> </div>
<input <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" 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.maxWidthCustomAria}
placeholder="예: 600px, 40rem, 80%, 60ch" placeholder={m.maxWidthPlaceholder}
value={textProps.maxWidthCustom ?? ""} value={textProps.maxWidthCustom ?? ""}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
src/app/editor/panels/VideoPropertiesPanel.tsx
+53 -49
View File
@@ -3,6 +3,8 @@
import type { VideoBlockProps } from "@/features/editor/state/editorStore"; import type { VideoBlockProps } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl"; import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField"; 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 = { export type VideoPropertiesPanelProps = {
videoProps: VideoBlockProps; videoProps: VideoBlockProps;
@@ -11,6 +13,8 @@ export type VideoPropertiesPanelProps = {
}; };
export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock }: VideoPropertiesPanelProps) { export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock }: VideoPropertiesPanelProps) {
const locale = useAppLocale();
const m = getEditorVideoPanelMessages(locale);
// 비디오 소스 유형: 업로드(/api/video/:id) 또는 외부 URL 구분 // 비디오 소스 유형: 업로드(/api/video/:id) 또는 외부 URL 구분
const source: "url" | "upload" = const source: "url" | "upload" =
videoProps.sourceType === "asset" || (videoProps.sourceUrl && videoProps.sourceUrl.startsWith("/api/video/")) videoProps.sourceType === "asset" || (videoProps.sourceUrl && videoProps.sourceUrl.startsWith("/api/video/"))
@@ -22,10 +26,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
{/* 비디오 소스 선택 (URL / 업로드) */} {/* 비디오 소스 선택 (URL / 업로드) */}
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>비디오 소스</span> <span>{m.sourceLabel}</span>
<select <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" 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} value={source}
onChange={(e) => { onChange={(e) => {
const next = e.target.value as "url" | "upload"; 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="url">{m.sourceOptionUrl}</option>
<option value="upload">파일 업로드</option> <option value="upload">{m.sourceOptionUpload}</option>
</select> </select>
</label> </label>
</div> </div>
@@ -51,10 +55,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
{source === "url" && ( {source === "url" && (
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>비디오 URL</span> <span>{m.urlLabel}</span>
<input <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" 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 ?? ""} value={videoProps.sourceUrl ?? ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
@@ -70,10 +74,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
{/* 접근성: 제목 / aria-label / 캡션 텍스트 (현재는 UI에서 숨김 처리) */} {/* 접근성: 제목 / aria-label / 캡션 텍스트 (현재는 UI에서 숨김 처리) */}
<div className="hidden"> <div className="hidden">
<label className="flex flex-col gap-1 mt-2"> <label className="flex flex-col gap-1 mt-2">
<span>비디오 제목</span> <span>{m.titleLabel}</span>
<input <input
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500" 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 ?? ""} value={(videoProps as any).titleText ?? ""}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { titleText: e.target.value } as any); updateBlock(selectedBlockId, { titleText: e.target.value } as any);
@@ -82,10 +86,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
</label> </label>
<label className="mt-2 flex flex-col gap-1"> <label className="mt-2 flex flex-col gap-1">
<span>비디오 aria-label</span> <span>{m.ariaLabelLabel}</span>
<input <input
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500" 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 ?? ""} value={(videoProps as any).ariaLabel ?? ""}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { ariaLabel: e.target.value } as any); updateBlock(selectedBlockId, { ariaLabel: e.target.value } as any);
@@ -94,10 +98,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
</label> </label>
<label className="mt-2 flex flex-col gap-1"> <label className="mt-2 flex flex-col gap-1">
<span>비디오 캡션 텍스트</span> <span>{m.captionTextLabel}</span>
<input <input
className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500" 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 ?? ""} value={(videoProps as any).captionText ?? ""}
onChange={(e) => { onChange={(e) => {
updateBlock(selectedBlockId, { captionText: e.target.value } as any); 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"> <div className="mt-3 space-y-1 text-xs text-slate-400">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>포스터 이미지 URL</span> <span>{m.posterImageUrlLabel}</span>
<input <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" 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 ?? ""} value={videoProps.posterImageSrc ?? ""}
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
@@ -131,12 +135,12 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
{source === "upload" && ( {source === "upload" && (
<div className="space-y-1"> <div className="space-y-1">
<label className="flex flex-col gap-1 text-xs text-slate-400"> <label className="flex flex-col gap-1 text-xs text-slate-400">
<span>비디오 파일 업로드</span> <span>{m.uploadLabel}</span>
<input <input
type="file" type="file"
accept="video/*" 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" 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) => { onChange={async (event) => {
const file = event.target.files?.[0]; const file = event.target.files?.[0];
if (!file) return; 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"> <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"> <div className="space-y-1">
<ColorPickerField <ColorPickerField
label="카드 배경색" label={m.cardBackgroundLabel}
ariaLabelColorInput="비디오 카드 배경색 피커" ariaLabelColorInput={m.cardBackgroundPickerAria}
ariaLabelHexInput="비디오 카드 배경색 HEX" ariaLabelHexInput={m.cardBackgroundHexAria}
value={videoProps.backgroundColorCustom ?? ""} value={videoProps.backgroundColorCustom ?? ""}
onChange={(hex) => { onChange={(hex) => {
const next = hex && hex.trim().length > 0 ? hex : undefined; 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"> <label className="flex flex-col gap-1">
<span>비디오 정렬</span> <span>{m.alignLabel}</span>
<select <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" 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"} value={videoProps.align ?? "center"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -205,18 +209,18 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
} as any) } as any)
} }
> >
<option value="left">왼쪽</option> <option value="left">{m.alignOptionLeft}</option>
<option value="center">가운데</option> <option value="center">{m.alignOptionCenter}</option>
<option value="right">오른쪽</option> <option value="right">{m.alignOptionRight}</option>
</select> </select>
</label> </label>
{/* 너비 모드 */} {/* 너비 모드 */}
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>비디오 너비 모드</span> <span>{m.widthModeLabel}</span>
<select <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" 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"} value={videoProps.widthMode ?? "auto"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -224,24 +228,24 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
} as any) } as any)
} }
> >
<option value="auto">내용에 맞춤</option> <option value="auto">{m.widthModeOptionAuto}</option>
<option value="full">가로 전체</option> <option value="full">{m.widthModeOptionFull}</option>
<option value="fixed">고정 너비 (px)</option> <option value="fixed">{m.widthModeOptionFixed}</option>
</select> </select>
</label> </label>
{(videoProps.widthMode ?? "auto") === "fixed" && ( {(videoProps.widthMode ?? "auto") === "fixed" && (
<NumericPropertyControl <NumericPropertyControl
label="고정 너비 (px)" label={m.fixedWidthLabel}
unitLabel="(px)" unitLabel={m.fixedWidthUnitLabel}
value={videoProps.widthPx ?? 640} value={videoProps.widthPx ?? 640}
min={160} min={160}
max={1920} max={1920}
step={10} step={10}
presets={[ presets={[
{ id: "sm", label: "작게", value: 480 }, { id: "sm", label: m.fixedWidthPresetSmall, value: 480 },
{ id: "md", label: "보통", value: 640 }, { id: "md", label: m.fixedWidthPresetMedium, value: 640 },
{ id: "lg", label: "넓게", value: 960 }, { id: "lg", label: m.fixedWidthPresetLarge, value: 960 },
]} ]}
onChangeValue={(v) => { onChangeValue={(v) => {
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -253,8 +257,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
{/* 카드 패딩 */} {/* 카드 패딩 */}
<NumericPropertyControl <NumericPropertyControl
label="카드 패딩" label={m.cardPaddingLabel}
unitLabel="(px)" unitLabel={m.cardPaddingUnitLabel}
value={typeof videoProps.cardPaddingPx === "number" ? videoProps.cardPaddingPx : 0} value={typeof videoProps.cardPaddingPx === "number" ? videoProps.cardPaddingPx : 0}
min={0} min={0}
max={64} max={64}
@@ -267,8 +271,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
{/* 카드 모서리 둥글기 */} {/* 카드 모서리 둥글기 */}
<NumericPropertyControl <NumericPropertyControl
label="카드 모서리 둥글기" label={m.cardBorderRadiusLabel}
unitLabel="(px)" unitLabel={m.cardBorderRadiusUnitLabel}
value={typeof videoProps.borderRadiusPx === "number" ? videoProps.borderRadiusPx : 0} value={typeof videoProps.borderRadiusPx === "number" ? videoProps.borderRadiusPx : 0}
min={0} min={0}
max={64} max={64}
@@ -281,8 +285,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
{/* 시작 시점 (초) */} {/* 시작 시점 (초) */}
<NumericPropertyControl <NumericPropertyControl
label="시작 시점 (초)" label={m.startTimeLabel}
unitLabel="(초)" unitLabel={m.startTimeUnitLabel}
value={typeof videoProps.startTimeSec === "number" ? videoProps.startTimeSec : 0} value={typeof videoProps.startTimeSec === "number" ? videoProps.startTimeSec : 0}
min={0} min={0}
max={600} max={600}
@@ -295,8 +299,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
{/* 종료 시점 (초) */} {/* 종료 시점 (초) */}
<NumericPropertyControl <NumericPropertyControl
label="종료 시점 (초)" label={m.endTimeLabel}
unitLabel="(초)" unitLabel={m.endTimeUnitLabel}
value={typeof videoProps.endTimeSec === "number" ? videoProps.endTimeSec : 0} value={typeof videoProps.endTimeSec === "number" ? videoProps.endTimeSec : 0}
min={0} min={0}
max={600} max={600}
@@ -309,10 +313,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
{/* 화면 비율 */} {/* 화면 비율 */}
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span>화면 비율</span> <span>{m.aspectRatioLabel}</span>
<select <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" 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"} value={videoProps.aspectRatio ?? "16:9"}
onChange={(e) => onChange={(e) =>
updateBlock(selectedBlockId, { updateBlock(selectedBlockId, {
@@ -339,7 +343,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
} as any) } as any)
} }
/> />
<span className="text-[11px]">자동 재생</span> <span className="text-[11px]">{m.autoplayLabel}</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input <input
@@ -352,7 +356,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
} as any) } as any)
} }
/> />
<span className="text-[11px]">반복 재생</span> <span className="text-[11px]">{m.loopLabel}</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input <input
@@ -365,7 +369,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
} as any) } as any)
} }
/> />
<span className="text-[11px]">음소거</span> <span className="text-[11px]">{m.mutedLabel}</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input <input
@@ -378,7 +382,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
} as any) } as any)
} }
/> />
<span className="text-[11px]">재생 컨트롤 표시</span> <span className="text-[11px]">{m.controlsLabel}</span>
</label> </label>
</div> </div>
</div> </div>
src/app/editor/templates/blogTemplate.ts
+4 -8
View File
@@ -1,12 +1,14 @@
"use client"; "use client";
import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore"; import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
import type { EditorBlogTemplateMessages } from "@/features/i18n/messages/editorTemplates";
export function createBlogTemplateBlocks(opts: { export function createBlogTemplateBlocks(opts: {
sectionId: string; sectionId: string;
createId: () => string; createId: () => string;
messages: EditorBlogTemplateMessages;
}): { blocks: Block[]; lastSelectedId: string } { }): { blocks: Block[]; lastSelectedId: string } {
const { sectionId, createId } = opts; const { sectionId, createId, messages } = opts;
const columns: SectionBlockProps["columns"] = [ const columns: SectionBlockProps["columns"] = [
{ id: `${sectionId}_col_1`, span: 4 }, { id: `${sectionId}_col_1`, span: 4 },
@@ -33,14 +35,8 @@ export function createBlogTemplateBlocks(opts: {
columnId: null, columnId: null,
}; };
const postDefinitions = [
{ title: "블로그 포스트 1", summary: "첫 번째 포스트 요약을 여기에 입력하세요." },
{ title: "블로그 포스트 2", summary: "두 번째 포스트 요약을 여기에 입력하세요." },
{ title: "블로그 포스트 3", summary: "세 번째 포스트 요약을 여기에 입력하세요." },
];
const blogBlocks: Block[] = columns.flatMap((col, index) => { const blogBlocks: Block[] = columns.flatMap((col, index) => {
const post = postDefinitions[index] ?? postDefinitions[0]; const post = messages.posts[index] ?? messages.posts[0];
const imageId = createId(); const imageId = createId();
const titleId = createId(); const titleId = createId();
src/app/editor/templates/ctaTemplate.ts
+5 -3
View File
@@ -1,12 +1,14 @@
"use client"; "use client";
import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore"; import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";
import type { EditorCtaTemplateMessages } from "@/features/i18n/messages/editorTemplates";
export function createCtaTemplateBlocks(opts: { export function createCtaTemplateBlocks(opts: {
sectionId: string; sectionId: string;
createId: () => string; createId: () => string;
messages: EditorCtaTemplateMessages;
}): { blocks: Block[]; lastSelectedId: string } { }): { blocks: Block[]; lastSelectedId: string } {
const { sectionId, createId } = opts; const { sectionId, createId, messages } = opts;
const columns: SectionBlockProps["columns"] = [ const columns: SectionBlockProps["columns"] = [
{ id: `${sectionId}_col_1`, span: 8 }, { id: `${sectionId}_col_1`, span: 8 },
@@ -37,7 +39,7 @@ export function createCtaTemplateBlocks(opts: {
const textId = createId(); const textId = createId();
const textProps: TextBlockProps = { const textProps: TextBlockProps = {
text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.\n망설이지 말고 시작하세요!", text: messages.body,
align: "left", align: "left",
size: "lg", size: "lg",
} as any; } as any;
@@ -51,7 +53,7 @@ export function createCtaTemplateBlocks(opts: {
const buttonId = createId(); const buttonId = createId();
const buttonProps: ButtonBlockProps = { const buttonProps: ButtonBlockProps = {
label: "CTA 버튼", label: messages.buttonLabel,
href: "#", href: "#",
align: "center", align: "center",
size: "lg", size: "lg",
src/app/editor/templates/faqTemplate.ts
+6 -19
View File
@@ -1,12 +1,14 @@
"use client"; "use client";
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore"; import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
import type { EditorFaqTemplateMessages } from "@/features/i18n/messages/editorTemplates";
export function createFaqTemplateBlocks(opts: { export function createFaqTemplateBlocks(opts: {
sectionId: string; sectionId: string;
createId: () => string; createId: () => string;
messages: EditorFaqTemplateMessages;
}): { blocks: Block[]; lastSelectedId: string } { }): { blocks: Block[]; lastSelectedId: string } {
const { sectionId, createId } = opts; const { sectionId, createId, messages } = opts;
const columns: SectionBlockProps["columns"] = [ const columns: SectionBlockProps["columns"] = [
{ id: `${sectionId}_col_1`, span: 3 }, { id: `${sectionId}_col_1`, span: 3 },
@@ -38,7 +40,7 @@ export function createFaqTemplateBlocks(opts: {
// Left Column: Title // Left Column: Title
const titleId = createId(); const titleId = createId();
const titleProps: TextBlockProps = { const titleProps: TextBlockProps = {
text: "FAQ", text: messages.title,
align: "left", align: "left",
size: "xl", size: "xl",
bold: true, bold: true,
@@ -53,7 +55,7 @@ export function createFaqTemplateBlocks(opts: {
const subTitleId = createId(); const subTitleId = createId();
const subTitleProps: TextBlockProps = { const subTitleProps: TextBlockProps = {
text: "자주 묻는 질문", text: messages.subtitle,
align: "left", align: "left",
size: "sm", size: "sm",
color: "muted", color: "muted",
@@ -68,22 +70,7 @@ export function createFaqTemplateBlocks(opts: {
// Right Column: Q&A List // Right Column: Q&A List
const faqPairs = [ const faqBlocks: Block[] = messages.items.flatMap((pair) => {
{
question: "서비스 이용료는 얼마인가요?",
answer: "기본 기능은 무료로 제공되며, 프리미엄 기능은 월 구독료가 발생합니다.",
},
{
question: "환불 정책은 어떻게 되나요?",
answer: "결제 후 7일 이내에 사용 이력이 없는 경우 전액 환불 가능합니다.",
},
{
question: "팀원 초대 기능이 있나요?",
answer: "네, 프로 요금제 이상부터 팀원 초대가 가능합니다.",
},
];
const faqBlocks: Block[] = faqPairs.flatMap((pair) => {
const qId = createId(); const qId = createId();
const aId = createId(); const aId = createId();
src/app/editor/templates/featuresTemplate.ts
+5 -3
View File
@@ -1,12 +1,14 @@
"use client"; "use client";
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore"; import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
import type { EditorFeaturesTemplateMessages } from "@/features/i18n/messages/editorTemplates";
export function createFeaturesTemplateBlocks(opts: { export function createFeaturesTemplateBlocks(opts: {
sectionId: string; sectionId: string;
createId: () => string; createId: () => string;
messages: EditorFeaturesTemplateMessages;
}): { blocks: Block[]; lastSelectedId: string } { }): { blocks: Block[]; lastSelectedId: string } {
const { sectionId, createId } = opts; const { sectionId, createId, messages } = opts;
const columns = [ const columns = [
{ id: `${sectionId}_col_1`, span: 4 }, { id: `${sectionId}_col_1`, span: 4 },
@@ -38,13 +40,13 @@ export function createFeaturesTemplateBlocks(opts: {
const descId = createId(); const descId = createId();
const titleProps: TextBlockProps = { const titleProps: TextBlockProps = {
text: `Feature ${index + 1} 제목`, text: `${messages.itemTitlePrefix} ${index + 1}${messages.itemTitleSuffix}`.trim(),
align: "left", align: "left",
size: "lg", size: "lg",
} as any; } as any;
const descProps: TextBlockProps = { const descProps: TextBlockProps = {
text: "해당 기능을 간단히 설명하는 텍스트입니다.", text: messages.itemDescription,
align: "left", align: "left",
size: "sm", size: "sm",
} as any; } as any;
src/app/editor/templates/footerTemplate.ts
+5 -3
View File
@@ -1,12 +1,14 @@
"use client"; "use client";
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore"; import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
import type { EditorFooterTemplateMessages } from "@/features/i18n/messages/editorTemplates";
export function createFooterTemplateBlocks(opts: { export function createFooterTemplateBlocks(opts: {
sectionId: string; sectionId: string;
createId: () => string; createId: () => string;
messages: EditorFooterTemplateMessages;
}): { blocks: Block[]; lastSelectedId: string } { }): { blocks: Block[]; lastSelectedId: string } {
const { sectionId, createId } = opts; const { sectionId, createId, messages } = opts;
const columns: SectionBlockProps["columns"] = [ const columns: SectionBlockProps["columns"] = [
{ id: `${sectionId}_col_1`, span: 4 }, { id: `${sectionId}_col_1`, span: 4 },
@@ -54,7 +56,7 @@ export function createFooterTemplateBlocks(opts: {
const descId = createId(); const descId = createId();
const descProps: TextBlockProps = { const descProps: TextBlockProps = {
text: "더 나은 웹사이트를 위한 최고의 선택.", text: messages.description,
align: "left", align: "left",
size: "sm", size: "sm",
color: "muted", color: "muted",
@@ -70,7 +72,7 @@ export function createFooterTemplateBlocks(opts: {
// Col 2: Links // Col 2: Links
const linksId = createId(); const linksId = createId();
const linksProps: TextBlockProps = { const linksProps: TextBlockProps = {
text: "서비스 소개\n요금제\n고객지원\n문의하기", text: messages.linksText,
align: "center", align: "center",
size: "sm", size: "sm",
color: "muted", color: "muted",
src/app/editor/templates/heroTemplate.ts
+6 -4
View File
@@ -6,12 +6,14 @@ import type {
TextBlockProps, TextBlockProps,
ButtonBlockProps, ButtonBlockProps,
} from "@/features/editor/state/editorStore"; } from "@/features/editor/state/editorStore";
import type { EditorHeroTemplateMessages } from "@/features/i18n/messages/editorTemplates";
export function createHeroTemplateBlocks(opts: { export function createHeroTemplateBlocks(opts: {
sectionId: string; sectionId: string;
createId: () => string; createId: () => string;
messages: EditorHeroTemplateMessages;
}): { blocks: Block[]; lastSelectedId: string } { }): { blocks: Block[]; lastSelectedId: string } {
const { sectionId, createId } = opts; const { sectionId, createId, messages } = opts;
const sectionProps: SectionBlockProps = { const sectionProps: SectionBlockProps = {
background: "default", background: "default",
@@ -41,7 +43,7 @@ export function createHeroTemplateBlocks(opts: {
const heroHeadlineId = createId(); const heroHeadlineId = createId();
const heroHeadlineProps: TextBlockProps = { const heroHeadlineProps: TextBlockProps = {
text: "Hero 제목을 여기에 입력하세요", text: messages.headline,
align: "center", align: "center",
size: "lg", size: "lg",
} as any; } as any;
@@ -55,7 +57,7 @@ export function createHeroTemplateBlocks(opts: {
const heroSubId = createId(); const heroSubId = createId();
const heroSubProps: TextBlockProps = { const heroSubProps: TextBlockProps = {
text: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.", text: messages.subheadline,
align: "center", align: "center",
size: "base", size: "base",
} as any; } as any;
@@ -69,7 +71,7 @@ export function createHeroTemplateBlocks(opts: {
const heroButtonId = createId(); const heroButtonId = createId();
const heroButtonProps: ButtonBlockProps = { const heroButtonProps: ButtonBlockProps = {
label: "지금 시작하기", label: messages.primaryButtonLabel,
href: "#", href: "#",
align: "center", align: "center",
size: "md", size: "md",
src/app/editor/templates/teamTemplate.ts
+4 -8
View File
@@ -1,12 +1,14 @@
"use client"; "use client";
import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore"; import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
import type { EditorTeamTemplateMessages } from "@/features/i18n/messages/editorTemplates";
export function createTeamTemplateBlocks(opts: { export function createTeamTemplateBlocks(opts: {
sectionId: string; sectionId: string;
createId: () => string; createId: () => string;
messages: EditorTeamTemplateMessages;
}): { blocks: Block[]; lastSelectedId: string } { }): { blocks: Block[]; lastSelectedId: string } {
const { sectionId, createId } = opts; const { sectionId, createId, messages } = opts;
const columns: SectionBlockProps["columns"] = [ const columns: SectionBlockProps["columns"] = [
{ id: `${sectionId}_col_1`, span: 4 }, { id: `${sectionId}_col_1`, span: 4 },
@@ -33,14 +35,8 @@ export function createTeamTemplateBlocks(opts: {
columnId: null, columnId: null,
}; };
const memberDefinitions = [
{ name: "홍길동", role: "Product Designer", bio: "사용자 경험을 설계합니다." },
{ name: "김영희", role: "Frontend Engineer", bio: "깔끔한 UI를 구현합니다." },
{ name: "이철수", role: "Backend Engineer", bio: "안정적인 인프라를 책임집니다." },
];
const teamBlocks: Block[] = columns.flatMap((col, index) => { const teamBlocks: Block[] = columns.flatMap((col, index) => {
const m = memberDefinitions[index] ?? memberDefinitions[0]; const m = messages.members[index] ?? messages.members[0];
const imageId = createId(); const imageId = createId();
const nameId = createId(); const nameId = createId();
src/app/layout.tsx
+14 -3
View File
@@ -1,17 +1,28 @@
import "../styles/globals.css"; import "../styles/globals.css";
import "../styles/builder.css"; import "../styles/builder.css";
import type { ReactNode } from "react"; 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 = { export const metadata = {
title: "Page Builder", title: "Page Builder",
description: "No-code single 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 ( 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"> <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> </body>
</html> </html>
); );
src/app/login/page.tsx
+18 -12
View File
@@ -4,6 +4,8 @@ import { FormEvent, useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { SunMoon } from "lucide-react"; import { SunMoon } from "lucide-react";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getAuthMessages } from "@/features/i18n/messages/auth";
// 로그인 페이지 컴포넌트 // 로그인 페이지 컴포넌트
// - 이메일/비밀번호를 입력받아 /api/auth/login 으로 요청을 전송한다. // - 이메일/비밀번호를 입력받아 /api/auth/login 으로 요청을 전송한다.
@@ -12,6 +14,9 @@ import { SunMoon } from "lucide-react";
export default function LoginPage() { export default function LoginPage() {
const router = useRouter(); const router = useRouter();
const locale = useAppLocale();
const { login: t } = getAuthMessages(locale);
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
@@ -67,9 +72,9 @@ export default function LoginPage() {
if (!res.ok) { if (!res.ok) {
try { try {
const data = await res.json(); const data = await res.json();
setError(data?.message ?? "로그인에 실패했습니다. 다시 시도해 주세요."); setError(data?.message ?? t.errorLoginFailed);
} catch { } catch {
setError("로그인에 실패했습니다. 다시 시도해 주세요."); setError(t.errorLoginFailed);
} }
setLoading(false); setLoading(false);
return; return;
@@ -78,7 +83,7 @@ export default function LoginPage() {
// 성공 시에는 /dashboard 로 이동한다. // 성공 시에는 /dashboard 로 이동한다.
router.push("/dashboard"); router.push("/dashboard");
} catch { } catch {
setError("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setError(t.errorNetwork);
} finally { } finally {
setLoading(false); 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"> <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="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"> <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 <button
type="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" 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} onClick={handleToggleTheme}
> >
<SunMoon className="w-4 h-4" aria-hidden="true" /> <SunMoon className="w-4 h-4" aria-hidden="true" />
<span>테마 전환</span> <span>{t.themeToggleLabel}</span>
</button> </button>
</div> </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>} {error && <p className="mb-3 text-xs text-red-300">{error}</p>}
<form onSubmit={handleSubmit} className="space-y-3 text-xs"> <form onSubmit={handleSubmit} className="space-y-3 text-xs">
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor="email" className="block text-slate-800 dark:text-slate-200"> <label htmlFor="email" className="block text-slate-800 dark:text-slate-200">
이메일 {t.emailLabel}
</label> </label>
<input <input
id="email" id="email"
@@ -119,7 +124,7 @@ export default function LoginPage() {
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor="password" className="block text-slate-800 dark:text-slate-200"> <label htmlFor="password" className="block text-slate-800 dark:text-slate-200">
비밀번호 {t.passwordLabel}
</label> </label>
<input <input
id="password" id="password"
@@ -137,17 +142,18 @@ export default function LoginPage() {
disabled={loading} 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" 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> </button>
</form> </form>
<p className="mt-4 text-[11px] text-slate-500 dark:text-slate-400"> <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"> <Link href="/signup" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
회원가입 {t.signupLinkText}
</Link> </Link>
을 진행해 주세요. {t.signupPromptSuffix && " "}
{t.signupPromptSuffix}
</p> </p>
</div> </div>
</main> </main>
src/app/preview/page.tsx
+9 -5
View File
@@ -4,11 +4,15 @@ import type { CSSProperties } from "react";
import { useEffect } from "react"; import { useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation"; 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 { useEditorStore } from "@/features/editor/state/editorStore";
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer"; import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
export default function PreviewPage() { export default function PreviewPage() {
const router = useRouter(); const router = useRouter();
const locale = useAppLocale();
const m = getPreviewMessages(locale);
const blocks = useEditorStore((state) => state.blocks); const blocks = useEditorStore((state) => state.blocks);
const projectConfig = useEditorStore((state) => (state as any).projectConfig); const projectConfig = useEditorStore((state) => (state as any).projectConfig);
const replaceBlocks = useEditorStore((state) => state.replaceBlocks); const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
@@ -164,8 +168,8 @@ export default function PreviewPage() {
<main className="min-h-screen flex flex-col" style={mainStyle}> <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"> <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> <div>
<h1 className="text-xl font-semibold">Page Preview</h1> <h1 className="text-xl font-semibold">{m.headerTitle}</h1>
<p className="text-xs text-slate-500 dark:text-slate-400">빌더로 만든 페이지를 미리 보는 화면</p> <p className="text-xs text-slate-500 dark:text-slate-400">{m.headerDescription}</p>
</div> </div>
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">
<button <button
@@ -175,19 +179,19 @@ export default function PreviewPage() {
void handleExportZip(); void handleExportZip();
}} }}
> >
페이지 파일로 내보내기 (ZIP) {m.exportZipButtonLabel}
</button> </button>
<Link <Link
href="/projects" 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" 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>
<Link <Link
href={editorHref} 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" 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> </Link>
</div> </div>
</header> </header>
src/app/projects/page.tsx
+47 -45
View File
@@ -15,6 +15,9 @@ import {
FolderKanban, FolderKanban,
SunMoon, SunMoon,
} from "lucide-react"; } 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 { interface ProjectListItem {
id: string; id: string;
@@ -27,6 +30,9 @@ interface ProjectListItem {
export default function ProjectsPage() { export default function ProjectsPage() {
const router = useRouter(); const router = useRouter();
const locale = useAppLocale();
const t = getDashboardMessages(locale);
const p = getProjectsMessages(locale);
const [projects, setProjects] = useState<ProjectListItem[]>([]); const [projects, setProjects] = useState<ProjectListItem[]>([]);
const [status, setStatus] = useState<"idle" | "loading" | "error">("idle"); const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
const [errorMessage, setErrorMessage] = useState<string | null>(null); const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -49,12 +55,10 @@ export default function ProjectsPage() {
setStatus("error"); setStatus("error");
if (res.status === 401) { if (res.status === 401) {
setErrorMessage("프로젝트 목록을 불러오는 중 인증 오류가 발생했습니다. 다시 로그인해 주세요."); setErrorMessage(p.errorFetchUnauthorized);
router.push("/login"); router.push("/login");
} else { } else {
setErrorMessage( setErrorMessage(p.errorFetchGeneric);
"프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
);
} }
} }
return; return;
@@ -69,7 +73,7 @@ export default function ProjectsPage() {
} catch { } catch {
if (!cancelled) { if (!cancelled) {
setStatus("error"); setStatus("error");
setErrorMessage("프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setErrorMessage(p.errorFetchGeneric);
} }
} }
}; };
@@ -88,9 +92,7 @@ export default function ProjectsPage() {
const handleDelete = async (slug: string) => { const handleDelete = async (slug: string) => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
const confirmed = window.confirm( const confirmed = window.confirm(p.confirmDeleteSingle);
"이 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
);
if (!confirmed) return; if (!confirmed) return;
} }
@@ -102,7 +104,7 @@ export default function ProjectsPage() {
if (!res.ok) { if (!res.ok) {
setStatus("error"); setStatus("error");
setErrorMessage("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setErrorMessage(p.errorDeleteSingle);
return; return;
} }
@@ -118,7 +120,7 @@ export default function ProjectsPage() {
setErrorMessage(null); setErrorMessage(null);
} catch { } catch {
setStatus("error"); setStatus("error");
setErrorMessage("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setErrorMessage(p.errorDeleteSingle);
} }
}; };
@@ -152,9 +154,7 @@ export default function ProjectsPage() {
if (slugs.length === 0) return; if (slugs.length === 0) return;
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
const confirmed = window.confirm( const confirmed = window.confirm(p.confirmDeleteBulk);
"선택한 프로젝트를 모두 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
);
if (!confirmed) return; if (!confirmed) return;
} }
@@ -170,7 +170,7 @@ export default function ProjectsPage() {
if (okSlugs.length === 0) { if (okSlugs.length === 0) {
setStatus("error"); setStatus("error");
setErrorMessage("선택한 프로젝트를 삭제하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setErrorMessage(p.errorDeleteBulkAllFailed);
return; return;
} }
@@ -186,16 +186,14 @@ export default function ProjectsPage() {
if (okSlugs.length !== slugs.length) { if (okSlugs.length !== slugs.length) {
setStatus("error"); setStatus("error");
setErrorMessage( setErrorMessage(p.errorDeleteBulkSomeFailed);
"일부 프로젝트 삭제에 실패했습니다. 페이지를 새로고침한 뒤 목록을 확인해 주세요.",
);
} else { } else {
setStatus("idle"); setStatus("idle");
setErrorMessage(null); setErrorMessage(null);
} }
} catch { } catch {
setStatus("error"); 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"> <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"> <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> <div>
<h1 className="text-2xl font-bold tracking-tight">프로젝트 목록</h1> <h1 className="text-2xl font-bold tracking-tight">{p.headerTitle}</h1>
<p className="text-sm text-slate-500 dark:text-slate-400">저장된 프로젝트들을 한 눈에 볼 수 있는 목록</p> <p className="text-sm text-slate-500 dark:text-slate-400">{p.headerDescription}</p>
</div> </div>
<div className="flex items-center gap-3 text-sm"> <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"> <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" 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" /> <LayoutDashboard className="w-4 h-4" aria-hidden="true" />
<span>대시보드</span> <span>{t.navDashboard}</span>
</Link> </Link>
<Link <Link
href="/projects" 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" 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" /> <FolderKanban className="w-4 h-4" aria-hidden="true" />
<span>프로젝트 목록</span> <span>{t.navProjects}</span>
</Link> </Link>
<Link <Link
href="/projects/submissions" 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" 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" /> <ListChecks className="w-4 h-4" aria-hidden="true" />
<span>전체 제출 내역</span> <span>{t.navSubmissions}</span>
</Link> </Link>
</nav> </nav>
<button <button
@@ -250,7 +248,7 @@ export default function ProjectsPage() {
onClick={handleToggleTheme} onClick={handleToggleTheme}
> >
<SunMoon className="w-4 h-4" aria-hidden="true" /> <SunMoon className="w-4 h-4" aria-hidden="true" />
<span>테마 전환</span> <span>{t.themeToggleLabel}</span>
</button> </button>
<div className="relative"> <div className="relative">
<button <button
@@ -260,7 +258,7 @@ export default function ProjectsPage() {
setIsMenuOpen((prev) => !prev); setIsMenuOpen((prev) => !prev);
}} }}
> >
메뉴 {t.menuLabel}
</button> </button>
{isMenuOpen && ( {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"> <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(); void handleLogout();
}} }}
> >
로그아웃 {t.logoutLabel}
</button> </button>
</div> </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"> <section className="flex-1 px-6 py-4 overflow-auto bg-slate-50/60 dark:bg-transparent">
{status === "error" && ( {status === "error" && (
<p className="text-xs text-red-500 mb-3 dark:text-red-300"> <p className="text-xs text-red-500 mb-3 dark:text-red-300">
{errorMessage ?? "프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."} {errorMessage ?? p.errorFetchGeneric}
</p> </p>
)} )}
{projects.length === 0 && status === "idle" && ( {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"> <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" /> <ListChecks className="w-3 h-3 text-slate-400 dark:text-slate-500" aria-hidden="true" />
<span> <span>
선택된 프로젝트: <span className="font-semibold">{selectedSlugs.length}</span>개 {p.toolbarSelectedPrefix}
<span className="font-semibold">{selectedSlugs.length}</span>
{p.toolbarSelectedSuffix}
</span> </span>
</span> </span>
</div> </div>
@@ -312,14 +312,14 @@ export default function ProjectsPage() {
}} }}
> >
<Trash2 className="w-3 h-3" aria-hidden="true" /> <Trash2 className="w-3 h-3" aria-hidden="true" />
<span>선택 삭제</span> <span>{p.toolbarDeleteSelected}</span>
</button> </button>
<Link <Link
href="/editor?new=1" 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" 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" /> <FilePlus2 className="w-3 h-3" aria-hidden="true" />
<span>새 프로젝트 만들기</span> <span>{p.toolbarCreateNew}</span>
</Link> </Link>
</div> </div>
</div> </div>
@@ -330,7 +330,7 @@ export default function ProjectsPage() {
<input <input
type="checkbox" type="checkbox"
className="h-3 w-3 rounded border-slate-700 bg-slate-900 align-middle" className="h-3 w-3 rounded border-slate-700 bg-slate-900 align-middle"
aria-label="전체 선택" aria-label={p.tableHeaderSelectAllAria}
checked={ checked={
pageProjects.length > 0 && pageProjects.every((p) => selectedSlugs.includes(p.slug)) pageProjects.length > 0 && pageProjects.every((p) => selectedSlugs.includes(p.slug))
} }
@@ -345,12 +345,12 @@ export default function ProjectsPage() {
}} }}
/> />
</th> </th>
<th className="py-2 pr-4">제목</th> <th className="py-2 pr-4">{p.tableHeaderTitle}</th>
<th className="py-2 pr-4">주소(slug)</th> <th className="py-2 pr-4">{p.tableHeaderSlug}</th>
<th className="py-2 pr-4">상태</th> <th className="py-2 pr-4">{p.tableHeaderStatus}</th>
<th className="py-2 pr-4">생성일</th> <th className="py-2 pr-4">{p.tableHeaderCreatedAt}</th>
<th className="py-2 pr-4">수정일</th> <th className="py-2 pr-4">{p.tableHeaderUpdatedAt}</th>
<th className="py-2 pr-4 text-right">액션</th> <th className="py-2 pr-4 text-right">{p.tableHeaderActions}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -365,7 +365,7 @@ export default function ProjectsPage() {
<input <input
type="checkbox" type="checkbox"
className="h-3 w-3 rounded border-slate-700 bg-slate-900 align-middle" 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} checked={checked}
onChange={(e) => { onChange={(e) => {
if (e.target.checked) { 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" 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" /> <Pencil className="w-3 h-3" aria-hidden="true" />
<span>편집</span> <span>{p.actionEdit}</span>
</Link> </Link>
<Link <Link
href={`/preview?slug=${encodeURIComponent(project.slug)}`} 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" 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" /> <Eye className="w-3 h-3" aria-hidden="true" />
<span>미리보기</span> <span>{p.actionPreview}</span>
</Link> </Link>
<Link <Link
href={`/projects/${encodeURIComponent(project.slug)}/submissions`} 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" 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" /> <ListChecks className="w-3 h-3" aria-hidden="true" />
<span>폼 제출 내역</span> <span>{p.actionViewSubmissions}</span>
</Link> </Link>
<button <button
type="button" type="button"
@@ -418,7 +418,7 @@ export default function ProjectsPage() {
}} }}
> >
<Trash2 className="w-3 h-3" aria-hidden="true" /> <Trash2 className="w-3 h-3" aria-hidden="true" />
<span>삭제</span> <span>{p.actionDelete}</span>
</button> </button>
</div> </div>
</td> </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="mt-3 flex items-center justify-between text-[11px] text-slate-600 dark:text-slate-300">
<div className="inline-flex items-center gap-2"> <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"> <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"> <span className="font-semibold">
{totalCount === 0 ? 0 : startIndex + 1}–{Math.min(endIndex, totalCount)} {totalCount === 0 ? 0 : startIndex + 1}–{Math.min(endIndex, totalCount)}
</span> </span>
@@ -465,7 +467,7 @@ export default function ProjectsPage() {
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))} onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
> >
<ChevronLeft className="w-3 h-3" aria-hidden="true" /> <ChevronLeft className="w-3 h-3" aria-hidden="true" />
<span>이전</span> <span>{p.pagerPrevLabel}</span>
</button> </button>
<button <button
type="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" 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))} onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
> >
<span>다음</span> <span>{p.pagerNextLabel}</span>
<ChevronRight className="w-3 h-3" aria-hidden="true" /> <ChevronRight className="w-3 h-3" aria-hidden="true" />
</button> </button>
</div> </div>
src/app/projects/submissions/page.tsx
+30 -24
View File
@@ -4,6 +4,9 @@ import { useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react"; 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 { interface SubmissionItem {
id: string; id: string;
@@ -17,6 +20,9 @@ type PageStatus = "idle" | "loading" | "error";
export default function AllProjectSubmissionsPage() { export default function AllProjectSubmissionsPage() {
const router = useRouter(); const router = useRouter();
const locale = useAppLocale();
const t = getDashboardMessages(locale);
const m = getSubmissionsMessages(locale);
const [submissions, setSubmissions] = useState<SubmissionItem[]>([]); const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
const [status, setStatus] = useState<PageStatus>("idle"); const [status, setStatus] = useState<PageStatus>("idle");
const [errorMessage, setErrorMessage] = useState<string | null>(null); const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -37,13 +43,13 @@ export default function AllProjectSubmissionsPage() {
if (res.status === 401) { if (res.status === 401) {
setStatus("error"); setStatus("error");
setErrorMessage("폼 제출 내역을 조회하려면 로그인이 필요합니다. 다시 로그인해 주세요."); setErrorMessage(m.errorUnauthorized);
router.push("/login"); router.push("/login");
return; return;
} }
setStatus("error"); setStatus("error");
setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setErrorMessage(m.errorGeneric);
return; return;
} }
@@ -57,7 +63,7 @@ export default function AllProjectSubmissionsPage() {
} catch { } catch {
if (!cancelled) { if (!cancelled) {
setStatus("error"); setStatus("error");
setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setErrorMessage(m.errorGeneric);
} }
} }
}; };
@@ -92,13 +98,13 @@ export default function AllProjectSubmissionsPage() {
}); });
if (!res.ok) { if (!res.ok) {
setErrorMessage("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setErrorMessage(m.errorLogout);
return; return;
} }
router.push("/login"); router.push("/login");
} catch { } 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"> <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"> <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> <div>
<h1 className="text-2xl font-bold tracking-tight">전체 폼 제출 내역</h1> <h1 className="text-2xl font-bold tracking-tight">{m.headerTitle}</h1>
<p className="text-sm text-slate-500 dark:text-slate-400">로그인한 계정의 모든 프로젝트에 대한 폼 제출 데이터를 확인할 수 있습니다.</p> <p className="text-sm text-slate-500 dark:text-slate-400">{m.headerDescription}</p>
</div> </div>
<div className="flex items-center gap-3 text-sm"> <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"> <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" 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" /> <LayoutDashboard className="w-4 h-4" aria-hidden="true" />
<span>대시보드</span> <span>{t.navDashboard}</span>
</Link> </Link>
<Link <Link
href="/projects" 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" 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" /> <FolderKanban className="w-4 h-4" aria-hidden="true" />
<span>프로젝트 목록</span> <span>{t.navProjects}</span>
</Link> </Link>
<Link <Link
href="/projects/submissions" 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" 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" /> <ListChecks className="w-4 h-4" aria-hidden="true" />
<span>전체 제출 내역</span> <span>{t.navSubmissions}</span>
</Link> </Link>
</nav> </nav>
<button <button
@@ -151,7 +157,7 @@ export default function AllProjectSubmissionsPage() {
}} }}
> >
<SunMoon className="w-4 h-4" aria-hidden="true" /> <SunMoon className="w-4 h-4" aria-hidden="true" />
<span>테마 전환</span> <span>{t.themeToggleLabel}</span>
</button> </button>
<div className="relative"> <div className="relative">
<button <button
@@ -161,7 +167,7 @@ export default function AllProjectSubmissionsPage() {
setIsMenuOpen((prev) => !prev); setIsMenuOpen((prev) => !prev);
}} }}
> >
메뉴 {t.menuLabel}
</button> </button>
{isMenuOpen && ( {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"> <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(); void handleLogout();
}} }}
> >
로그아웃 {t.logoutLabel}
</button> </button>
</div> </div>
)} )}
@@ -187,25 +193,25 @@ export default function AllProjectSubmissionsPage() {
)} )}
{status === "loading" && ( {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 && ( {status === "idle" && !errorMessage && submissions.length === 0 && (
<p className="text-xs text-slate-500 dark:text-slate-400">아직 수집된 폼 제출 내역이 없습니다.</p> <p className="text-xs text-slate-500 dark:text-slate-400">{m.emptyText}</p>
)} )}
{submissions.length > 0 && ( {submissions.length > 0 && (
<table className="w-full text-xs text-left border-collapse mt-2"> <table className="w-full text-xs text-left border-collapse mt-2">
<thead> <thead>
<tr className="border-b border-slate-200 text-slate-600 dark:border-slate-800 dark:text-slate-400"> <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">{m.tableHeaderCreatedAt}</th>
<th className="py-2 pr-4">프로젝트</th> <th className="py-2 pr-4">{m.tableHeaderProject}</th>
<th className="py-2 pr-4">Slug</th> <th className="py-2 pr-4">{m.tableHeaderSlug}</th>
<th className="py-2 pr-4">이름</th> <th className="py-2 pr-4">{m.tableHeaderName}</th>
<th className="py-2 pr-4">이메일</th> <th className="py-2 pr-4">{m.tableHeaderEmail}</th>
<th className="py-2 pr-4">전화번호</th> <th className="py-2 pr-4">{m.tableHeaderPhone}</th>
<th className="py-2 pr-4">생년월일</th> <th className="py-2 pr-4">{m.tableHeaderBirthdate}</th>
<th className="py-2 pr-4">기타 필드</th> <th className="py-2 pr-4">{m.tableHeaderOtherFields}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
src/app/signup/page.tsx
+37 -22
View File
@@ -3,8 +3,10 @@
import { FormEvent, useEffect, useState } from "react"; import { FormEvent, useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; 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 { function getPasswordStrengthLabel(password: string): PasswordStrengthLabel | null {
if (!password || password.length < 4) { if (!password || password.length < 4) {
@@ -19,19 +21,22 @@ function getPasswordStrengthLabel(password: string): PasswordStrengthLabel | nul
if (password.length >= 12) score += 1; if (password.length >= 12) score += 1;
if (password.length < 8 || score <= 2) { if (password.length < 8 || score <= 2) {
return "약함"; return "weak";
} }
if (score === 3) { if (score === 3) {
return "보통"; return "medium";
} }
return "강함"; return "strong";
} }
export default function SignupPage() { export default function SignupPage() {
const router = useRouter(); const router = useRouter();
const locale = useAppLocale();
const { signup: t } = getAuthMessages(locale);
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [passwordConfirm, setPasswordConfirm] = useState(""); const [passwordConfirm, setPasswordConfirm] = useState("");
@@ -64,7 +69,7 @@ export default function SignupPage() {
setError(null); setError(null);
if (password !== passwordConfirm) { if (password !== passwordConfirm) {
setError("비밀번호와 비밀번호 확인이 일치하지 않습니다."); setError(t.mismatchError);
return; return;
} }
@@ -80,9 +85,9 @@ export default function SignupPage() {
if (!res.ok) { if (!res.ok) {
try { try {
const data = await res.json(); const data = await res.json();
setError(data?.message ?? "회원가입에 실패했습니다. 다시 시도해 주세요."); setError(data?.message ?? t.signupFailedFallbackError);
} catch { } catch {
setError("회원가입에 실패했습니다. 다시 시도해 주세요."); setError(t.signupFailedFallbackError);
} }
setLoading(false); setLoading(false);
return; return;
@@ -90,26 +95,35 @@ export default function SignupPage() {
router.push("/dashboard"); router.push("/dashboard");
} catch { } catch {
setError("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."); setError(t.errorNetwork);
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
const strengthLabel = getPasswordStrengthLabel(password); const strengthLabel = getPasswordStrengthLabel(password);
let strengthText: string | null = null;
if (strengthLabel) {
strengthText =
strengthLabel === "weak"
? t.passwordStrengthWeak
: strengthLabel === "medium"
? t.passwordStrengthMedium
: t.passwordStrengthStrong;
}
return ( 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"> <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="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> <h1 className="text-lg font-semibold mb-1">{t.title}</h1>
<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>} {error && <p className="mb-3 text-xs text-red-300">{error}</p>}
<form onSubmit={handleSubmit} className="space-y-3 text-xs"> <form onSubmit={handleSubmit} className="space-y-3 text-xs">
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor="email" className="block text-slate-800 dark:text-slate-200"> <label htmlFor="email" className="block text-slate-800 dark:text-slate-200">
이메일 {t.emailLabel}
</label> </label>
<input <input
id="email" id="email"
@@ -123,7 +137,7 @@ export default function SignupPage() {
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor="password" className="block text-slate-800 dark:text-slate-200"> <label htmlFor="password" className="block text-slate-800 dark:text-slate-200">
비밀번호 {t.passwordLabel}
</label> </label>
<input <input
id="password" id="password"
@@ -143,9 +157,9 @@ export default function SignupPage() {
data-testid="password-strength-bar" data-testid="password-strength-bar"
className={ className={
"h-full transition-all " + "h-full transition-all " +
(strengthLabel === "약함" (strengthLabel === "weak"
? "w-1/3 bg-red-500" ? "w-1/3 bg-red-500"
: strengthLabel === "보통" : strengthLabel === "medium"
? "w-2/3 bg-amber-500" ? "w-2/3 bg-amber-500"
: "w-full bg-emerald-600") : "w-full bg-emerald-600")
} }
@@ -154,21 +168,21 @@ export default function SignupPage() {
<p <p
className={ className={
"text-[11px] " + "text-[11px] " +
(strengthLabel === "약함" (strengthLabel === "weak"
? "text-red-500 dark:text-red-300" ? "text-red-500 dark:text-red-300"
: strengthLabel === "보통" : strengthLabel === "medium"
? "text-amber-500 dark:text-amber-300" ? "text-amber-500 dark:text-amber-300"
: "text-emerald-600 dark:text-emerald-300") : "text-emerald-600 dark:text-emerald-300")
} }
> >
비밀번호 난이도: {strengthLabel} {t.passwordStrengthPrefix} {strengthText}
</p> </p>
</div> </div>
)} )}
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor="passwordConfirm" className="block text-slate-800 dark:text-slate-200"> <label htmlFor="passwordConfirm" className="block text-slate-800 dark:text-slate-200">
비밀번호 확인 {t.passwordConfirmLabel}
</label> </label>
<input <input
id="passwordConfirm" id="passwordConfirm"
@@ -186,17 +200,18 @@ export default function SignupPage() {
disabled={loading} 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" 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> </button>
</form> </form>
<p className="mt-4 text-[11px] text-slate-500 dark:text-slate-400"> <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"> <Link href="/login" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
로그인 {t.loginLinkText}
</Link> </Link>
으로 이동해 주세요. {t.loginPromptSuffix && " "}
{t.loginPromptSuffix}
</p> </p>
</div> </div>
</main> </main>
src/features/editor/components/ColorPickerField.tsx
+10 -3
View File
@@ -1,5 +1,7 @@
import type { ChangeEvent } from "react"; import type { ChangeEvent } from "react";
import { useState } from "react"; import { useState } from "react";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorColorPickerFieldMessages } from "@/features/i18n/messages/editorColorPickerField";
export type ColorPaletteItem = { export type ColorPaletteItem = {
// 팔레트 식별자 // 팔레트 식별자
@@ -75,6 +77,9 @@ export function ColorPickerField({
}: ColorPickerFieldProps) { }: ColorPickerFieldProps) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const locale = useAppLocale();
const m = getEditorColorPickerFieldMessages(locale);
const colorInputValue = value && value.startsWith("#") ? value : "#ffffff"; const colorInputValue = value && value.startsWith("#") ? value : "#ffffff";
// 컬러 인풋 변경 시 HEX 문자열을 onChange로 전달한다. // 컬러 인풋 변경 시 HEX 문자열을 onChange로 전달한다.
const handleColorInputChange = (event: ChangeEvent<HTMLInputElement>) => { const handleColorInputChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -122,7 +127,7 @@ export function ColorPickerField({
<input <input
className="w-28 flex-none 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" className="w-28 flex-none 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={ariaLabelHexInput} aria-label={ariaLabelHexInput}
placeholder="예: #ff0000" placeholder={m.hexPlaceholder}
value={value} value={value}
onChange={handleHexInputChange} onChange={handleHexInputChange}
/> />
@@ -139,7 +144,9 @@ export function ColorPickerField({
style={{ backgroundColor: selectedPalette?.color ?? value ?? "#ffffff" }} style={{ backgroundColor: selectedPalette?.color ?? value ?? "#ffffff" }}
/> />
<span className="truncate text-slate-700 dark:text-slate-100"> <span className="truncate text-slate-700 dark:text-slate-100">
{selectedPalette?.label ?? "색상 팔레트"} {selectedPalette
? m.paletteLabels[selectedPalette.id] ?? selectedPalette.label
: m.dropdownLabelDefault}
</span> </span>
</span> </span>
<span className="text-slate-400 dark:text-slate-500 text-[10px]">▼</span> <span className="text-slate-400 dark:text-slate-500 text-[10px]">▼</span>
@@ -166,7 +173,7 @@ export function ColorPickerField({
className="inline-block h-3 w-3 rounded-full border border-slate-300 dark:border-slate-700" className="inline-block h-3 w-3 rounded-full border border-slate-300 dark:border-slate-700"
style={{ backgroundColor: item.color }} style={{ backgroundColor: item.color }}
/> />
<span>{item.label}</span> <span>{m.paletteLabels[item.id] ?? item.label}</span>
</span> </span>
</button> </button>
))} ))}
src/features/editor/components/PublicPageRenderer.tsx
+12 -8
View File
@@ -39,6 +39,8 @@ import {
computeFormRadioPublicTokens, computeFormRadioPublicTokens,
computeFormControllerPublicTokens, computeFormControllerPublicTokens,
} from "@/features/editor/utils/formHelpers"; } from "@/features/editor/utils/formHelpers";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getPublicPageRendererMessages } from "@/features/i18n/messages/publicPageRenderer";
// 섹션 레이아웃/스타일 토큰을 실제 Tailwind 클래스 조합으로 변환하는 유틸 // 섹션 레이아웃/스타일 토큰을 실제 Tailwind 클래스 조합으로 변환하는 유틸
// (에디터/퍼블릭 렌더러에서 동일한 규칙을 재사용하기 위해 export 한다.) // (에디터/퍼블릭 렌더러에서 동일한 규칙을 재사용하기 위해 export 한다.)
@@ -101,6 +103,8 @@ const convertPxStringToEm = (value?: string | null) => {
}; };
export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererProps) { export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererProps) {
const locale = useAppLocale();
const m = getPublicPageRendererMessages(locale);
const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle"); const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
const [formMessage, setFormMessage] = useState<string>(""); const [formMessage, setFormMessage] = useState<string>("");
@@ -186,7 +190,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
setFormStatus("error"); setFormStatus("error");
const bulletLines = missingRequiredLabels.map((label) => `- ${label}`).join("\n"); const bulletLines = missingRequiredLabels.map((label) => `- ${label}`).join("\n");
const message = `다음 필수 항목을 입력해 주세요:\n${bulletLines}`; const message = `${m.requiredFieldsPrefix}\n${bulletLines}`;
setFormMessage(message); setFormMessage(message);
return; return;
@@ -257,15 +261,15 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
if (res.ok) { if (res.ok) {
setFormStatus("success"); setFormStatus("success");
setFormMessage(props.successMessage ?? "성공적으로 전송되었습니다."); setFormMessage(props.successMessage ?? m.submitSuccessDefault);
} else { } else {
setFormStatus("error"); setFormStatus("error");
setFormMessage(props.errorMessage ?? "전송 중 오류가 발생했습니다."); setFormMessage(props.errorMessage ?? m.submitErrorDefault);
} }
} catch (error) { } catch (error) {
console.error("[PublicPageRenderer] form submit error", error); console.error("[PublicPageRenderer] form submit error", error);
setFormStatus("error"); setFormStatus("error");
setFormMessage(props.errorMessage ?? "전송 중 오류가 발생했습니다."); setFormMessage(props.errorMessage ?? m.submitErrorDefault);
} }
}; };
@@ -541,7 +545,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img <img
src={props.groupLabelImageUrl} src={props.groupLabelImageUrl}
alt={props.groupLabel || "폼 그룹 타이틀"} alt={props.groupLabel || m.checkboxGroupLabelImageAltFallback}
className="inline-block max-w-full h-auto" className="inline-block max-w-full h-auto"
style={tokens.groupTextStyle} style={tokens.groupTextStyle}
/> />
@@ -571,7 +575,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img <img
src={opt.labelImageUrl} src={opt.labelImageUrl}
alt={opt.label || props.groupLabel || "체크박스 옵션"} alt={opt.label || props.groupLabel || m.checkboxOptionImageAltFallback}
className="inline-block max-w-full h-auto" className="inline-block max-w-full h-auto"
style={tokens.optionTextStyle} style={tokens.optionTextStyle}
/> />
@@ -634,7 +638,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img <img
src={props.groupLabelImageUrl} src={props.groupLabelImageUrl}
alt={props.groupLabel || "폼 그룹 타이틀"} alt={props.groupLabel || m.checkboxGroupLabelImageAltFallback}
className="inline-block max-w-full h-auto" className="inline-block max-w-full h-auto"
style={tokens.groupTextStyle} style={tokens.groupTextStyle}
/> />
@@ -663,7 +667,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img <img
src={opt.labelImageUrl} src={opt.labelImageUrl}
alt={opt.label || props.groupLabel || "라디오 옵션"} alt={opt.label || props.groupLabel || m.radioOptionImageAltFallback}
className="inline-block max-w-full h-auto" className="inline-block max-w-full h-auto"
style={tokens.optionTextStyle} style={tokens.optionTextStyle}
/> />
src/features/editor/state/editorStore.ts
+21 -5
View File
@@ -9,6 +9,8 @@ import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate";
import { createFaqTemplateBlocks } from "@/app/editor/templates/faqTemplate"; import { createFaqTemplateBlocks } from "@/app/editor/templates/faqTemplate";
import { createPricingTemplateBlocks } from "@/app/editor/templates/pricingTemplate"; import { createPricingTemplateBlocks } from "@/app/editor/templates/pricingTemplate";
import { createTestimonialsTemplateBlocks } from "@/app/editor/templates/testimonialsTemplate"; import { createTestimonialsTemplateBlocks } from "@/app/editor/templates/testimonialsTemplate";
import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
import { DEFAULT_LOCALE } from "@/features/i18n/locale";
// 블록 타입 정의: 텍스트/버튼/이미지/비디오/섹션/구분선/리스트/폼 블록/폼 요소 블록 // 블록 타입 정의: 텍스트/버튼/이미지/비디오/섹션/구분선/리스트/폼 블록/폼 요소 블록
export type BlockType = export type BlockType =
@@ -914,9 +916,11 @@ const createEditorState = (set: any, get: any): EditorState => {
} }
} }
const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks: templateBlocks, lastSelectedId } = createHeroTemplateBlocks({ const { blocks: templateBlocks, lastSelectedId } = createHeroTemplateBlocks({
sectionId, sectionId,
createId, createId,
messages: tpl.hero,
}); });
pushHistoryImpl(set, get); pushHistoryImpl(set, get);
@@ -937,11 +941,6 @@ const createEditorState = (set: any, get: any): EditorState => {
}); });
}, },
// 리스트 아이템 선택 상태를 업데이트한다.
selectListItem: (itemId) => {
set({ selectedListItemId: itemId ?? null });
},
// Features 템플릿 섹션 추가: 3컬럼(4/4/4) 섹션과 각 컬럼의 제목/설명 텍스트를 생성한다 // Features 템플릿 섹션 추가: 3컬럼(4/4/4) 섹션과 각 컬럼의 제목/설명 텍스트를 생성한다
addFeaturesTemplateSection: () => { addFeaturesTemplateSection: () => {
const { selectedBlockId, blocks } = get(); const { selectedBlockId, blocks } = get();
@@ -956,9 +955,11 @@ const createEditorState = (set: any, get: any): EditorState => {
} }
} }
const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks: templateBlocks, lastSelectedId } = createFeaturesTemplateBlocks({ const { blocks: templateBlocks, lastSelectedId } = createFeaturesTemplateBlocks({
sectionId, sectionId,
createId, createId,
messages: tpl.features,
}); });
pushHistoryImpl(set, get); pushHistoryImpl(set, get);
@@ -993,9 +994,11 @@ const createEditorState = (set: any, get: any): EditorState => {
} }
} }
const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks: templateBlocks, lastSelectedId } = createBlogTemplateBlocks({ const { blocks: templateBlocks, lastSelectedId } = createBlogTemplateBlocks({
sectionId, sectionId,
createId, createId,
messages: tpl.blog,
}); });
pushHistoryImpl(set, get); pushHistoryImpl(set, get);
@@ -1030,9 +1033,11 @@ const createEditorState = (set: any, get: any): EditorState => {
} }
} }
const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks: templateBlocks, lastSelectedId } = createTeamTemplateBlocks({ const { blocks: templateBlocks, lastSelectedId } = createTeamTemplateBlocks({
sectionId, sectionId,
createId, createId,
messages: tpl.team,
}); });
pushHistoryImpl(set, get); pushHistoryImpl(set, get);
@@ -1067,9 +1072,11 @@ const createEditorState = (set: any, get: any): EditorState => {
} }
} }
const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks: templateBlocks, lastSelectedId } = createFooterTemplateBlocks({ const { blocks: templateBlocks, lastSelectedId } = createFooterTemplateBlocks({
sectionId, sectionId,
createId, createId,
messages: tpl.footer,
}); });
pushHistoryImpl(set, get); pushHistoryImpl(set, get);
@@ -1104,9 +1111,11 @@ const createEditorState = (set: any, get: any): EditorState => {
} }
} }
const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks: templateBlocks, lastSelectedId } = createCtaTemplateBlocks({ const { blocks: templateBlocks, lastSelectedId } = createCtaTemplateBlocks({
sectionId, sectionId,
createId, createId,
messages: tpl.cta,
}); });
pushHistoryImpl(set, get); pushHistoryImpl(set, get);
@@ -1141,9 +1150,11 @@ const createEditorState = (set: any, get: any): EditorState => {
} }
} }
const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks: templateBlocks, lastSelectedId } = createFaqTemplateBlocks({ const { blocks: templateBlocks, lastSelectedId } = createFaqTemplateBlocks({
sectionId, sectionId,
createId, createId,
messages: tpl.faq,
}); });
pushHistoryImpl(set, get); pushHistoryImpl(set, get);
@@ -1733,6 +1744,11 @@ const createEditorState = (set: any, get: any): EditorState => {
})); }));
}, },
// 현재 선택된 리스트 아이템 ID 를 상태에 저장한다.
selectListItem: (itemId) => {
set({ selectedListItemId: itemId });
},
// 선택된 리스트 아이템을 들여쓰기한다. // 선택된 리스트 아이템을 들여쓰기한다.
indentSelectedListItem: (blockId) => { indentSelectedListItem: (blockId) => {
const { blocks, selectedListItemId } = get(); const { blocks, selectedListItemId } = get();
src/features/i18n/LocaleProvider.tsx
+39
View File
@@ -0,0 +1,39 @@
"use client";
import type { ReactNode } from "react";
import { createContext, useContext, useState } from "react";
import type { AppLocale } from "./locale";
import { DEFAULT_LOCALE } from "./locale";
type LocaleContextValue = {
locale: AppLocale;
setLocale: (locale: AppLocale) => void;
};
const LocaleContext = createContext<LocaleContextValue>({
locale: DEFAULT_LOCALE,
setLocale: () => {
// no-op default
},
});
export function LocaleProvider({
initialLocale,
children,
}: {
initialLocale: AppLocale;
children: ReactNode;
}) {
const [locale, setLocale] = useState<AppLocale>(initialLocale);
return <LocaleContext.Provider value={{ locale, setLocale }}>{children}</LocaleContext.Provider>;
}
export function useAppLocale(): AppLocale {
return useContext(LocaleContext).locale;
}
export function useLocaleActions() {
const { setLocale } = useContext(LocaleContext);
return { setLocale };
}
src/features/i18n/LocaleSwitcher.tsx
+30
View File
@@ -0,0 +1,30 @@
"use client";
import { useAppLocale, useLocaleActions } from "./LocaleProvider";
import type { AppLocale } from "./locale";
export function LocaleSwitcher() {
const locale = useAppLocale();
const { setLocale } = useLocaleActions();
const handleToggle = () => {
const nextLocale: AppLocale = locale === "en" ? "ko" : "en";
setLocale(nextLocale);
};
const labelText = locale === "en" ? "EN" : "KO";
return (
<div className="fixed bottom-4 right-4 z-50 text-xs">
<button
type="button"
aria-label="Toggle locale"
className="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white/80 px-2 py-1 text-slate-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/80 dark:text-slate-100"
onClick={handleToggle}
>
{labelText}
</button>
</div>
);
}
src/features/i18n/locale.ts
+22
View File
@@ -0,0 +1,22 @@
export const SUPPORTED_LOCALES = ["en", "ko"] as const;
export type AppLocale = (typeof SUPPORTED_LOCALES)[number];
// 기본 로케일은 항상 en
export const DEFAULT_LOCALE: AppLocale = "en";
// Accept-Language 헤더 문자열에서 앱 로케일(en/ko)을 결정한다.
// - ko 가 포함되어 있으면 ko
// - 그렇지 않으면 기본(en)
export function resolveLocaleFromAcceptLanguage(header: string | null | undefined): AppLocale {
if (!header) {
return DEFAULT_LOCALE;
}
const value = header.toLowerCase();
if (value.includes("ko")) {
return "ko";
}
return DEFAULT_LOCALE;
}
src/features/i18n/messages/auth.ts
+120
View File
@@ -0,0 +1,120 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type LoginMessages = {
title: string;
description: string;
emailLabel: string;
passwordLabel: string;
submitIdle: string;
submitLoading: string;
themeToggleLabel: string;
errorLoginFailed: string;
errorNetwork: string;
signupPromptPrefix: string;
signupLinkText: string;
signupPromptSuffix: string;
};
export type SignupMessages = {
title: string;
description: string;
emailLabel: string;
passwordLabel: string;
passwordConfirmLabel: string;
submitIdle: string;
submitLoading: string;
mismatchError: string;
signupFailedFallbackError: string;
errorNetwork: string;
passwordStrengthPrefix: string;
passwordStrengthWeak: string;
passwordStrengthMedium: string;
passwordStrengthStrong: string;
loginPromptPrefix: string;
loginLinkText: string;
loginPromptSuffix: string;
};
export type AuthMessages = {
login: LoginMessages;
signup: SignupMessages;
};
const AUTH_MESSAGES: Record<AppLocale, AuthMessages> = {
en: {
login: {
title: "Log in",
description: "Sign in to manage and save your projects.",
emailLabel: "Email",
passwordLabel: "Password",
submitIdle: "Log in",
submitLoading: "Logging in...",
themeToggleLabel: "Toggle theme",
errorLoginFailed: "Failed to log in. Please try again.",
errorNetwork: "A network error occurred. Please try again later.",
signupPromptPrefix: "Don't have an account yet?",
signupLinkText: "Sign up",
signupPromptSuffix: "",
},
signup: {
title: "Sign up",
description: "Create a new account to save and manage your projects.",
emailLabel: "Email",
passwordLabel: "Password",
passwordConfirmLabel: "Confirm password",
submitIdle: "Sign up",
submitLoading: "Signing up...",
mismatchError: "Password and confirmation do not match.",
signupFailedFallbackError: "Failed to sign up. Please try again.",
errorNetwork: "A network error occurred. Please try again later.",
passwordStrengthPrefix: "Password strength:",
passwordStrengthWeak: "Weak",
passwordStrengthMedium: "Medium",
passwordStrengthStrong: "Strong",
loginPromptPrefix: "Already have an account?",
loginLinkText: "Log in",
loginPromptSuffix: "",
},
},
ko: {
login: {
title: "로그인",
description: "프로젝트를 관리하려면 먼저 계정으로 로그인하세요.",
emailLabel: "이메일",
passwordLabel: "비밀번호",
submitIdle: "로그인",
submitLoading: "로그인 중...",
themeToggleLabel: "테마 전환",
errorLoginFailed: "로그인에 실패했습니다. 다시 시도해 주세요.",
errorNetwork: "네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
signupPromptPrefix: "아직 계정이 없다면",
signupLinkText: "회원가입",
signupPromptSuffix: "을 진행해 주세요.",
},
signup: {
title: "회원가입",
description: "새 계정을 생성한 뒤 프로젝트를 저장하고 관리할 수 있습니다.",
emailLabel: "이메일",
passwordLabel: "비밀번호",
passwordConfirmLabel: "비밀번호 확인",
submitIdle: "회원가입",
submitLoading: "회원가입 중...",
mismatchError: "비밀번호와 비밀번호 확인이 일치하지 않습니다.",
signupFailedFallbackError: "회원가입에 실패했습니다. 다시 시도해 주세요.",
errorNetwork: "네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
passwordStrengthPrefix: "비밀번호 난이도:",
passwordStrengthWeak: "약함",
passwordStrengthMedium: "보통",
passwordStrengthStrong: "강함",
loginPromptPrefix: "이미 계정이 있다면",
loginLinkText: "로그인",
loginPromptSuffix: "으로 이동해 주세요.",
},
},
};
export function getAuthMessages(locale: AppLocale | null | undefined): AuthMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return AUTH_MESSAGES[key] ?? AUTH_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/dashboard.ts
+103
View File
@@ -0,0 +1,103 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
// 대시보드/프로젝트 목록/전체 제출 내역 상단 GNB 및 헤더용 i18n 메시지
// - 로그인/회원가입과 동일하게 en(기본), ko 를 지원한다.
export type DashboardMessages = {
// 메인 대시보드 헤더 제목/설명
title: string;
description: string;
// 상단 GNB 탭 레이블
navDashboard: string;
navProjects: string;
navSubmissions: string;
// 헤더 오른쪽 액션 버튼/메뉴
themeToggleLabel: string;
menuLabel: string;
logoutLabel: string;
summaryTotalProjectsLabel: string;
summaryTotalSubmissionsLabel: string;
summaryTodaySubmissionsLabel: string;
summaryLast7DaysSubmissionsLabel: string;
chartTitle: string;
chartSubtitle: string;
chartEmptyLabel: string;
sectionProjectsTitle: string;
sectionProjectsEmpty: string;
projectTotalSubmissionsPrefix: string;
projectTotalSubmissionsSuffix: string;
projectLatestSubmissionPrefix: string;
projectLatestSubmissionEmpty: string;
projectViewSubmissionsLink: string;
projectOpenPublicPageLink: string;
errorUnauthorized: string;
errorGeneric: string;
loadingText: string;
};
const DASHBOARD_MESSAGES: Record<AppLocale, DashboardMessages> = {
en: {
title: "Dashboard",
description: "A quick overview of your projects and form submissions.",
navDashboard: "Dashboard",
navProjects: "Projects",
navSubmissions: "All submissions",
themeToggleLabel: "Toggle theme",
menuLabel: "Menu",
logoutLabel: "Log out",
summaryTotalProjectsLabel: "Projects",
summaryTotalSubmissionsLabel: "Total form submissions",
summaryTodaySubmissionsLabel: "Submissions today",
summaryLast7DaysSubmissionsLabel: "Submissions in last 7 days",
chartTitle: "Recent submissions (daily)",
chartSubtitle: "Only dates with recent activity are shown.",
chartEmptyLabel: "No daily submission data yet.",
sectionProjectsTitle: "Submissions by project",
sectionProjectsEmpty: "No projects created yet or no submissions have been received.",
projectTotalSubmissionsPrefix: "Total ",
projectTotalSubmissionsSuffix: " submissions",
projectLatestSubmissionPrefix: "Last submission:",
projectLatestSubmissionEmpty: "No submissions yet",
projectViewSubmissionsLink: "View form submissions",
projectOpenPublicPageLink: "Open public page",
errorUnauthorized: "You need to be signed in to view the dashboard. Please log in again.",
errorGeneric: "An error occurred while loading the dashboard. Please try again later.",
loadingText: "Loading dashboard data...",
},
ko: {
title: "대시보드",
description: "프로젝트와 폼 제출 현황을 한눈에 확인할 수 있는 요약 화면입니다.",
navDashboard: "대시보드",
navProjects: "프로젝트 목록",
navSubmissions: "전체 제출 내역",
themeToggleLabel: "테마 전환",
menuLabel: "메뉴",
logoutLabel: "로그아웃",
summaryTotalProjectsLabel: "프로젝트 수",
summaryTotalSubmissionsLabel: "전체 폼 제출 수",
summaryTodaySubmissionsLabel: "오늘 제출 수",
summaryLast7DaysSubmissionsLabel: "최근 7일 제출 수",
chartTitle: "최근 제출 추이 (일별)",
chartSubtitle: "최근 활동이 있는 날짜만 표시됩니다.",
chartEmptyLabel: "아직 일별 제출 내역이 없습니다.",
sectionProjectsTitle: "프로젝트별 제출 현황",
sectionProjectsEmpty: "아직 생성된 프로젝트가 없거나 제출 내역이 없습니다.",
projectTotalSubmissionsPrefix: "총 제출 ",
projectTotalSubmissionsSuffix: "건",
projectLatestSubmissionPrefix: "최근 제출:",
projectLatestSubmissionEmpty: "제출 내역 없음",
projectViewSubmissionsLink: "폼 제출 내역 보기",
projectOpenPublicPageLink: "퍼블릭 페이지 열기",
errorUnauthorized:
"대시보드를 보려면 로그인이 필요합니다. 다시 로그인해 주세요.",
errorGeneric:
"대시보드 데이터를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
loadingText: "대시보드 데이터를 불러오는 중입니다...",
},
};
export function getDashboardMessages(locale: AppLocale | null | undefined): DashboardMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return DASHBOARD_MESSAGES[key] ?? DASHBOARD_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editor.ts
+153
View File
@@ -0,0 +1,153 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorMessages = {
headerTitle: string;
headerDescription: string;
navProjects: string;
navPreview: string;
undoLabel: string;
redoLabel: string;
menuLabel: string;
menuProjectSaveLoad: string;
menuJsonImportExport: string;
menuExportZip: string;
menuClearCanvas: string;
menuDeleteProject: string;
confirmClearCanvas: string;
confirmDeleteProject: string;
modalProjectTitle: string;
modalProjectTitleLabel: string;
modalProjectSlugLabel: string;
modalSaveButton: string;
modalLoadButton: string;
projectMessageSlugRequired: string;
projectMessageSaveFailed: string;
projectMessageSaveError: string;
projectMessageSaveSuccessPrefix: string;
projectMessageLoadSlugRequired: string;
projectMessageLoadFailed: string;
projectMessageLoadLocalSuccessPrefix: string;
projectMessageLoadServerSuccessPrefix: string;
projectMessageInvalidFormat: string;
projectMessageLoadError: string;
projectMessageDeleteSlugMissing: string;
projectMessageDeleteFailed: string;
projectMessageDeleteSuccess: string;
projectMessageDeleteError: string;
jsonModalTitle: string;
jsonModalSubtitle: string;
jsonExportButton: string;
jsonClearCanvasButton: string;
jsonEditorStateLabel: string;
jsonImportLabel: string;
jsonApplyButton: string;
listItemToolbarMoveUpLabel: string;
listItemToolbarMoveDownLabel: string;
listItemToolbarIndentLabel: string;
listItemToolbarOutdentLabel: string;
};
const EDITOR_MESSAGES: Record<AppLocale, EditorMessages> = {
en: {
headerTitle: "Page Editor",
headerDescription: "Build and edit your landing pages with a visual editor.",
navProjects: "Projects",
navPreview: "Open preview",
undoLabel: "Undo",
redoLabel: "Redo",
menuLabel: "Menu",
menuProjectSaveLoad: "Save / load project",
menuJsonImportExport: "JSON export / import",
menuExportZip: "Export as page files (ZIP)",
menuClearCanvas: "Clear canvas",
menuDeleteProject: "Delete project",
confirmClearCanvas:
"Clear all blocks on the canvas? This can only be undone with the undo history.",
confirmDeleteProject:
"Delete the current project? This cannot be undone. Local and autosave data will also be removed.",
modalProjectTitle: "Save / load project",
modalProjectTitleLabel: "Project title",
modalProjectSlugLabel: "Project address (e.g. my-landing)",
modalSaveButton: "Save (local + server)",
modalLoadButton: "Load",
projectMessageSlugRequired: "Please enter a project address.",
projectMessageSaveFailed: "Failed to save the project.",
projectMessageSaveError: "An error occurred while saving the project.",
projectMessageSaveSuccessPrefix: "Project saved: ",
projectMessageLoadSlugRequired: "Please enter an address to load.",
projectMessageLoadFailed: "Failed to load the project.",
projectMessageLoadLocalSuccessPrefix: "Loaded project from local: ",
projectMessageLoadServerSuccessPrefix: "Loaded project from server: ",
projectMessageInvalidFormat: "Project data format is invalid.",
projectMessageLoadError: "An error occurred while loading the project.",
projectMessageDeleteSlugMissing: "There is no project address to delete.",
projectMessageDeleteFailed: "Failed to delete the project.",
projectMessageDeleteSuccess: "Project deleted.",
projectMessageDeleteError: "An error occurred while deleting the project.",
jsonModalTitle: "JSON Export / Import",
jsonModalSubtitle: "* Import or export the current editor state as JSON.",
jsonExportButton: "Export JSON",
jsonClearCanvasButton: "Clear canvas",
jsonEditorStateLabel: "Editor state JSON",
jsonImportLabel: "Import from JSON",
jsonApplyButton: "Apply JSON",
listItemToolbarMoveUpLabel: "Move item up",
listItemToolbarMoveDownLabel: "Move item down",
listItemToolbarIndentLabel: "Indent item",
listItemToolbarOutdentLabel: "Outdent item",
},
ko: {
headerTitle: "페이지 에디터",
headerDescription: "랜딩 페이지를 시각적으로 구성할 수 있는 에디터입니다.",
navProjects: "프로젝트 목록",
navPreview: "프리뷰 열기",
undoLabel: "실행 취소",
redoLabel: "다시 실행",
menuLabel: "메뉴",
menuProjectSaveLoad: "프로젝트 저장/불러오기",
menuJsonImportExport: "JSON 내보내기/불러오기",
menuExportZip: "페이지 파일로 내보내기 (ZIP)",
menuClearCanvas: "캔버스 초기화",
menuDeleteProject: "프로젝트 삭제",
confirmClearCanvas:
"캔버스를 모두 초기화할까요? 이 작업은 실행 취소 히스토리로만 되돌릴 수 있습니다.",
confirmDeleteProject:
"현재 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
modalProjectTitle: "프로젝트 저장 / 불러오기",
modalProjectTitleLabel: "프로젝트 제목",
modalProjectSlugLabel: "프로젝트 주소 (예: my-landing)",
modalSaveButton: "저장 (로컬 + 서버)",
modalLoadButton: "불러오기",
projectMessageSlugRequired: "프로젝트 주소를 입력해 주세요.",
projectMessageSaveFailed: "프로젝트 저장에 실패했습니다.",
projectMessageSaveError: "프로젝트 저장 중 오류가 발생했습니다.",
projectMessageSaveSuccessPrefix: "프로젝트가 저장되었습니다: ",
projectMessageLoadSlugRequired: "불러올 주소를 입력해 주세요.",
projectMessageLoadFailed: "프로젝트를 불러오지 못했습니다.",
projectMessageLoadLocalSuccessPrefix: "로컬에서 프로젝트를 불러왔습니다: ",
projectMessageLoadServerSuccessPrefix: "프로젝트를 불러왔습니다: ",
projectMessageInvalidFormat: "프로젝트 데이터 형식이 올바르지 않습니다.",
projectMessageLoadError: "프로젝트 불러오기 중 오류가 발생했습니다.",
projectMessageDeleteSlugMissing: "삭제할 프로젝트 주소가 없습니다.",
projectMessageDeleteFailed: "프로젝트 삭제에 실패했습니다.",
projectMessageDeleteSuccess: "프로젝트가 삭제되었습니다.",
projectMessageDeleteError: "프로젝트 삭제 중 오류가 발생했습니다.",
jsonModalTitle: "JSON Export / Import",
jsonModalSubtitle: "* 에디터 내용을 가져오거나 내보낼 수 있습니다.",
jsonExportButton: "JSON 내보내기",
jsonClearCanvasButton: "캔버스 초기화",
jsonEditorStateLabel: "에디터 상태 JSON",
jsonImportLabel: "JSON에서 불러오기",
jsonApplyButton: "JSON 적용하기",
listItemToolbarMoveUpLabel: "아이템 위로 이동",
listItemToolbarMoveDownLabel: "아이템 아래로 이동",
listItemToolbarIndentLabel: "아이템 들여쓰기",
listItemToolbarOutdentLabel: "아이템 내어쓰기",
},
};
export function getEditorMessages(locale: AppLocale | null | undefined): EditorMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_MESSAGES[key] ?? EDITOR_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorButtonPanel.ts
+286
View File
@@ -0,0 +1,286 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorButtonPanelMessages = {
buttonTextLabel: string;
buttonTextAria: string;
imageSectionTitle: string;
imageSourceLabel: string;
imageSourceAria: string;
imageSourceOptionNone: string;
imageSourceOptionUrl: string;
imageSourceOptionUpload: string;
imageUrlLabel: string;
imageUrlAria: string;
imageUploadLabel: string;
imageUploadAria: string;
imageAltLabel: string;
imageAltAria: string;
imagePlacementLabel: string;
imagePlacementAria: string;
imagePlacementOptionLeft: string;
imagePlacementOptionRight: string;
imagePlacementOptionTop: string;
imagePlacementOptionBottom: string;
paddingXLabel: string;
paddingYLabel: string;
linkLabel: string;
linkAria: string;
alignLabel: string;
alignAria: string;
alignOptionLeft: string;
alignOptionCenter: string;
alignOptionRight: string;
textColorLabel: string;
textColorPickerAria: string;
textColorHexAria: string;
styleLabel: string;
styleAria: string;
styleOptionSolid: string;
styleOptionOutline: string;
styleOptionGhost: string;
fillColorLabel: string;
fillColorPickerAria: string;
fillColorHexAria: string;
strokeColorLabel: string;
strokeColorPickerAria: string;
strokeColorHexAria: string;
borderRadiusLabel: string;
borderRadiusPresetNone: string;
borderRadiusPresetSmall: string;
borderRadiusPresetMedium: string;
borderRadiusPresetLarge: string;
borderRadiusPresetFull: string;
widthModeLabel: string;
widthModeAria: string;
widthModeOptionAuto: string;
widthModeOptionFull: string;
widthModeOptionFixed: string;
fixedWidthLabel: string;
fixedWidthUnitLabel: string;
fixedWidthPresetSmall: string;
fixedWidthPresetMedium: string;
fixedWidthPresetLarge: string;
fontSizeLabel: string;
fontSizeUnitLabel: string;
lineHeightLabel: string;
lineHeightPresetTight: string;
lineHeightPresetNormal: string;
lineHeightPresetRelaxed: string;
letterSpacingLabel: string;
letterSpacingUnitLabel: string;
letterSpacingPresetTighter: string;
letterSpacingPresetTight: string;
letterSpacingPresetNormal: string;
letterSpacingPresetWide: string;
letterSpacingPresetWider: string;
};
const EDITOR_BUTTON_PANEL_MESSAGES: Record<AppLocale, EditorButtonPanelMessages> = {
en: {
buttonTextLabel: "Button text",
buttonTextAria: "Button text",
imageSectionTitle: "Button image",
imageSourceLabel: "Button image source",
imageSourceAria: "Button image source",
imageSourceOptionNone: "None",
imageSourceOptionUrl: "URL",
imageSourceOptionUpload: "File upload",
imageUrlLabel: "Button image URL",
imageUrlAria: "Button image URL",
imageUploadLabel: "Button image file upload",
imageUploadAria: "Button image file upload",
imageAltLabel: "Button image alt text",
imageAltAria: "Button image alt text",
imagePlacementLabel: "Button image placement",
imagePlacementAria: "Button image placement",
imagePlacementOptionLeft: "Text left",
imagePlacementOptionRight: "Text right",
imagePlacementOptionTop: "Text top",
imagePlacementOptionBottom: "Text bottom",
paddingXLabel: "Horizontal padding (px)",
paddingYLabel: "Vertical padding (px)",
linkLabel: "Button link",
linkAria: "Button link",
alignLabel: "Alignment",
alignAria: "Button alignment",
alignOptionLeft: "Left",
alignOptionCenter: "Center",
alignOptionRight: "Right",
textColorLabel: "Text color",
textColorPickerAria: "Button text color picker",
textColorHexAria: "Button text color HEX",
styleLabel: "Style",
styleAria: "Button style",
styleOptionSolid: "Fill",
styleOptionOutline: "Outline",
styleOptionGhost: "Ghost",
fillColorLabel: "Fill color",
fillColorPickerAria: "Button fill color picker",
fillColorHexAria: "Button fill color HEX",
strokeColorLabel: "Border color",
strokeColorPickerAria: "Button border color picker",
strokeColorHexAria: "Button border color HEX",
borderRadiusLabel: "Border radius",
borderRadiusPresetNone: "None",
borderRadiusPresetSmall: "Small",
borderRadiusPresetMedium: "Medium",
borderRadiusPresetLarge: "Large",
borderRadiusPresetFull: "Full",
widthModeLabel: "Button width mode",
widthModeAria: "Button width mode",
widthModeOptionAuto: "Auto",
widthModeOptionFull: "Full width",
widthModeOptionFixed: "Fixed",
fixedWidthLabel: "Button fixed width",
fixedWidthUnitLabel: "(px)",
fixedWidthPresetSmall: "Small",
fixedWidthPresetMedium: "Medium",
fixedWidthPresetLarge: "Wide",
fontSizeLabel: "Button font size",
fontSizeUnitLabel: "(px)",
lineHeightLabel: "Line height",
lineHeightPresetTight: "Tight",
lineHeightPresetNormal: "Normal",
lineHeightPresetRelaxed: "Relaxed",
letterSpacingLabel: "Letter spacing",
letterSpacingUnitLabel: "(px)",
letterSpacingPresetTighter: "Very tight",
letterSpacingPresetTight: "Tight",
letterSpacingPresetNormal: "Normal",
letterSpacingPresetWide: "Wide",
letterSpacingPresetWider: "Very wide",
},
ko: {
buttonTextLabel: "버튼 텍스트",
buttonTextAria: "버튼 텍스트",
imageSectionTitle: "버튼 이미지",
imageSourceLabel: "버튼 이미지 소스",
imageSourceAria: "버튼 이미지 소스",
imageSourceOptionNone: "사용 안 함",
imageSourceOptionUrl: "URL",
imageSourceOptionUpload: "파일 업로드",
imageUrlLabel: "버튼 이미지 URL",
imageUrlAria: "버튼 이미지 URL",
imageUploadLabel: "버튼 이미지 파일 업로드",
imageUploadAria: "버튼 이미지 파일 업로드",
imageAltLabel: "버튼 이미지 대체 텍스트",
imageAltAria: "버튼 이미지 대체 텍스트",
imagePlacementLabel: "버튼 이미지 위치",
imagePlacementAria: "버튼 이미지 위치",
imagePlacementOptionLeft: "텍스트 왼쪽",
imagePlacementOptionRight: "텍스트 오른쪽",
imagePlacementOptionTop: "텍스트 위쪽",
imagePlacementOptionBottom: "텍스트 아래쪽",
paddingXLabel: "가로 패딩 (px)",
paddingYLabel: "세로 패딩 (px)",
linkLabel: "버튼 링크",
linkAria: "버튼 링크",
alignLabel: "정렬",
alignAria: "버튼 정렬",
alignOptionLeft: "왼쪽",
alignOptionCenter: "가운데",
alignOptionRight: "오른쪽",
textColorLabel: "텍스트 색상",
textColorPickerAria: "버튼 텍스트 색상 피커",
textColorHexAria: "버튼 텍스트 색상 HEX",
styleLabel: "스타일",
styleAria: "버튼 스타일",
styleOptionSolid: "채움",
styleOptionOutline: "외곽선",
styleOptionGhost: "고스트",
fillColorLabel: "채움 색상",
fillColorPickerAria: "버튼 채움 색상 피커",
fillColorHexAria: "버튼 채움 색상 HEX",
strokeColorLabel: "외곽선 색상",
strokeColorPickerAria: "버튼 외곽선 색상 피커",
strokeColorHexAria: "버튼 외곽선 색상 HEX",
borderRadiusLabel: "모서리 둥글기",
borderRadiusPresetNone: "없음",
borderRadiusPresetSmall: "작게",
borderRadiusPresetMedium: "보통",
borderRadiusPresetLarge: "크게",
borderRadiusPresetFull: "완전 둥글게",
widthModeLabel: "버튼 너비 모드",
widthModeAria: "버튼 너비 모드",
widthModeOptionAuto: "자동",
widthModeOptionFull: "전체 폭",
widthModeOptionFixed: "고정 값",
fixedWidthLabel: "버튼 고정 너비",
fixedWidthUnitLabel: "(px)",
fixedWidthPresetSmall: "작게",
fixedWidthPresetMedium: "보통",
fixedWidthPresetLarge: "넓게",
fontSizeLabel: "버튼 크기",
fontSizeUnitLabel: "(px)",
lineHeightLabel: "줄 간격",
lineHeightPresetTight: "좁게",
lineHeightPresetNormal: "보통",
lineHeightPresetRelaxed: "넓게",
letterSpacingLabel: "글자 간격",
letterSpacingUnitLabel: "(px)",
letterSpacingPresetTighter: "아주 좁게",
letterSpacingPresetTight: "좁게",
letterSpacingPresetNormal: "보통",
letterSpacingPresetWide: "넓게",
letterSpacingPresetWider: "아주 넓게",
},
};
export function getEditorButtonPanelMessages(
locale: AppLocale | null | undefined,
): EditorButtonPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_BUTTON_PANEL_MESSAGES[key] ?? EDITOR_BUTTON_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorCanvas.ts
+40
View File
@@ -0,0 +1,40 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorCanvasMessages = {
emptyStateHint: string;
previewFallbackTextBlock: string;
previewFallbackButtonBlock: string;
previewFallbackImageBlock: string;
previewFallbackListBlock: string;
previewFallbackDividerBlock: string;
previewFallbackSectionBlock: string;
};
const EDITOR_CANVAS_MESSAGES: Record<AppLocale, EditorCanvasMessages> = {
en: {
emptyStateHint: 'Click the "Text" button on the left to add your first block.',
previewFallbackTextBlock: "Text block",
previewFallbackButtonBlock: "Button block",
previewFallbackImageBlock: "Image block",
previewFallbackListBlock: "List block",
previewFallbackDividerBlock: "Divider block",
previewFallbackSectionBlock: "Section block",
},
ko: {
emptyStateHint: '왼쪽에서 "텍스트" 버튼을 눌러 블록을 추가해 보세요.',
previewFallbackTextBlock: "텍스트 블록",
previewFallbackButtonBlock: "버튼 블록",
previewFallbackImageBlock: "이미지 블록",
previewFallbackListBlock: "리스트 블록",
previewFallbackDividerBlock: "구분선 블록",
previewFallbackSectionBlock: "섹션 블록",
},
};
export function getEditorCanvasMessages(
locale: AppLocale | null | undefined,
): EditorCanvasMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_CANVAS_MESSAGES[key] ?? EDITOR_CANVAS_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorColorPickerField.ts
+70
View File
@@ -0,0 +1,70 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorColorPickerFieldMessages = {
dropdownLabelDefault: string;
hexPlaceholder: string;
paletteLabels: Record<string, string>;
};
const EDITOR_COLOR_PICKER_FIELD_MESSAGES: Record<AppLocale, EditorColorPickerFieldMessages> = {
en: {
dropdownLabelDefault: "Color palette",
hexPlaceholder: "e.g. #ff0000",
paletteLabels: {
default: "None",
transparent: "Transparent",
muted: "Muted",
strong: "Strong highlight",
neutral: "Neutral",
accent: "Accent",
"accent-deep": "Accent (deep)",
"accent-soft": "Accent (soft)",
danger: "Danger",
"danger-deep": "Danger (strong)",
success: "Success",
"success-soft": "Success (soft)",
warning: "Warning",
info: "Info",
purple: "Purple",
"purple-soft": "Purple (soft)",
pink: "Pink",
"pink-soft": "Pink (soft)",
dark: "Dark text",
"dark-muted": "Dark muted",
},
},
ko: {
dropdownLabelDefault: "색상 팔레트",
hexPlaceholder: "예: #ff0000",
paletteLabels: {
default: "없음",
transparent: "투명",
muted: "연한",
strong: "강조",
neutral: "중립",
accent: "포인트",
"accent-deep": "포인트 진하게",
"accent-soft": "포인트 연하게",
danger: "위험",
"danger-deep": "위험 진하게",
success: "성공",
"success-soft": "성공 연하게",
warning: "경고",
info: "정보",
purple: "보라",
"purple-soft": "연한 보라",
pink: "핑크",
"pink-soft": "연한 핑크",
dark: "어두운 텍스트",
"dark-muted": "어두운 연한",
},
},
};
export function getEditorColorPickerFieldMessages(
locale: AppLocale | null | undefined,
): EditorColorPickerFieldMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_COLOR_PICKER_FIELD_MESSAGES[key] ?? EDITOR_COLOR_PICKER_FIELD_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorDividerPropertiesPanel.ts
+122
View File
@@ -0,0 +1,122 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorDividerPropertiesPanelMessages = {
alignLabel: string;
alignAria: string;
alignOptionLeft: string;
alignOptionCenter: string;
alignOptionRight: string;
thicknessLabel: string;
thicknessAria: string;
thicknessOptionThin: string;
thicknessOptionMedium: string;
styleSectionTitle: string;
lengthModeLabel: string;
lengthModeAria: string;
lengthModeOptionAuto: string;
lengthModeOptionFull: string;
lengthModeOptionFixed: string;
fixedLengthLabel: string;
fixedLengthUnitLabel: string;
fixedLengthPresetShort: string;
fixedLengthPresetNormal: string;
fixedLengthPresetLong: string;
colorLabel: string;
colorPickerAria: string;
colorHexAria: string;
marginLabel: string;
marginUnitLabel: string;
marginPresetSmall: string;
marginPresetNormal: string;
marginPresetLarge: string;
};
const EDITOR_DIVIDER_PROPERTIES_PANEL_MESSAGES: Record<AppLocale, EditorDividerPropertiesPanelMessages> = {
en: {
alignLabel: "Alignment",
alignAria: "Divider alignment",
alignOptionLeft: "Left",
alignOptionCenter: "Center",
alignOptionRight: "Right",
thicknessLabel: "Thickness",
thicknessAria: "Divider thickness",
thicknessOptionThin: "Thin",
thicknessOptionMedium: "Normal",
styleSectionTitle: "Divider style",
lengthModeLabel: "Length mode",
lengthModeAria: "Divider length mode",
lengthModeOptionAuto: "Fit content",
lengthModeOptionFull: "Full width",
lengthModeOptionFixed: "Fixed length (px)",
fixedLengthLabel: "Fixed length (px)",
fixedLengthUnitLabel: "(px)",
fixedLengthPresetShort: "Short",
fixedLengthPresetNormal: "Normal",
fixedLengthPresetLong: "Long",
colorLabel: "Line color",
colorPickerAria: "Divider color picker",
colorHexAria: "Divider color HEX",
marginLabel: "Vertical margin",
marginUnitLabel: "(px)",
marginPresetSmall: "Small",
marginPresetNormal: "Normal",
marginPresetLarge: "Large",
},
ko: {
alignLabel: "정렬",
alignAria: "구분선 정렬",
alignOptionLeft: "왼쪽",
alignOptionCenter: "가운데",
alignOptionRight: "오른쪽",
thicknessLabel: "두께",
thicknessAria: "구분선 두께",
thicknessOptionThin: "얇게",
thicknessOptionMedium: "보통",
styleSectionTitle: "구분선 스타일",
lengthModeLabel: "길이 모드",
lengthModeAria: "구분선 길이 모드",
lengthModeOptionAuto: "내용에 맞춤",
lengthModeOptionFull: "전체 폭",
lengthModeOptionFixed: "고정 길이 (px)",
fixedLengthLabel: "고정 길이 (px)",
fixedLengthUnitLabel: "(px)",
fixedLengthPresetShort: "짧게",
fixedLengthPresetNormal: "보통",
fixedLengthPresetLong: "길게",
colorLabel: "선 색상",
colorPickerAria: "구분선 색상 피커",
colorHexAria: "구분선 색상 HEX",
marginLabel: "위/아래 여백",
marginUnitLabel: "(px)",
marginPresetSmall: "작게",
marginPresetNormal: "보통",
marginPresetLarge: "크게",
},
};
export function getEditorDividerPropertiesPanelMessages(
locale: AppLocale | null | undefined,
): EditorDividerPropertiesPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_DIVIDER_PROPERTIES_PANEL_MESSAGES[key] ?? EDITOR_DIVIDER_PROPERTIES_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorFormCheckboxPanel.ts
+298
View File
@@ -0,0 +1,298 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorFormCheckboxPanelMessages = {
sectionTitle: string;
groupTitleTypeLabel: string;
groupTitleTypeOptionText: string;
groupTitleTypeOptionImage: string;
groupTitleDisplayLabel: string;
groupTitleDisplayOptionVisible: string;
groupTitleDisplayOptionHidden: string;
layoutLabel: string;
layoutOptionStacked: string;
layoutOptionInline: string;
optionLayoutLabel: string;
optionLayoutOptionStacked: string;
optionLayoutOptionInline: string;
labelGapLabel: string;
groupTitleLabel: string;
submitKeyLabel: string;
optionsLabel: string;
addOptionButtonLabel: string;
optionLabelPlaceholder: string;
optionValuePlaceholder: string;
optionImageSourceLabel: string;
optionImageSourceOptionUrl: string;
optionImageSourceOptionUpload: string;
optionImageUrlPlaceholder: string;
optionImageUploadLabel: string;
optionImageUploadAria: string;
groupTitleImageSourceLabel: string;
groupTitleImageSourceOptionUrl: string;
groupTitleImageSourceOptionUpload: string;
groupTitleImageUrlLabel: string;
groupTitleImageUploadLabel: string;
groupTitleImageUploadAria: string;
requiredNoticeText: string;
styleSectionTitle: string;
textSizeLabel: string;
textSizeUnitLabel: string;
lineHeightLabel: string;
lineHeightUnitLabel: string;
letterSpacingLabel: string;
letterSpacingUnitLabel: string;
widthModeLabel: string;
widthModeOptionAuto: string;
widthModeOptionFull: string;
widthModeOptionFixed: string;
fixedWidthLabel: string;
fixedWidthUnitLabel: string;
paddingXLabel: string;
paddingXUnitLabel: string;
paddingYLabel: string;
paddingYUnitLabel: string;
optionGapLabel: string;
optionGapUnitLabel: string;
textColorLabel: string;
textColorPickerAria: string;
textColorHexAria: string;
fillColorLabel: string;
fillColorPickerAria: string;
fillColorHexAria: string;
strokeColorLabel: string;
strokeColorPickerAria: string;
strokeColorHexAria: string;
borderRadiusLabel: string;
borderRadiusPresetNone: string;
borderRadiusPresetSmall: string;
borderRadiusPresetMedium: string;
borderRadiusPresetLarge: string;
borderRadiusPresetFull: string;
};
const EDITOR_FORM_CHECKBOX_PANEL_MESSAGES: Record<AppLocale, EditorFormCheckboxPanelMessages> = {
en: {
sectionTitle: "Checkbox field",
groupTitleTypeLabel: "Group title type",
groupTitleTypeOptionText: "Text",
groupTitleTypeOptionImage: "Image",
groupTitleDisplayLabel: "Group title display mode",
groupTitleDisplayOptionVisible: "Visible (default)",
groupTitleDisplayOptionHidden: "Hidden",
layoutLabel: "Layout",
layoutOptionStacked: "Vertical (default)",
layoutOptionInline: "Horizontal (inline)",
optionLayoutLabel: "Option layout",
optionLayoutOptionStacked: "Vertical (default)",
optionLayoutOptionInline: "Horizontal (inline)",
labelGapLabel: "Label/field gap (px)",
groupTitleLabel: "Group title",
submitKeyLabel: "Submit key",
optionsLabel: "Options",
addOptionButtonLabel: "Add option",
optionLabelPlaceholder: "Label",
optionValuePlaceholder: "Value (value)",
optionImageSourceLabel: "Option image source",
optionImageSourceOptionUrl: "URL",
optionImageSourceOptionUpload: "File upload",
optionImageUrlPlaceholder: "Option image URL (optional)",
optionImageUploadLabel: "Option image file upload",
optionImageUploadAria: "Option image file upload",
groupTitleImageSourceLabel: "Group title image source",
groupTitleImageSourceOptionUrl: "URL",
groupTitleImageSourceOptionUpload: "File upload",
groupTitleImageUrlLabel: "Group title image URL",
groupTitleImageUploadLabel: "Group title image file upload",
groupTitleImageUploadAria: "Group title image file upload",
requiredNoticeText: "Required state is configured in the form controller.",
styleSectionTitle: "Field style",
textSizeLabel: "Checkbox text size (px)",
textSizeUnitLabel: "(px)",
lineHeightLabel: "Checkbox line height (px)",
lineHeightUnitLabel: "(px)",
letterSpacingLabel: "Checkbox letter spacing (px)",
letterSpacingUnitLabel: "(px)",
widthModeLabel: "Field width",
widthModeOptionAuto: "Auto",
widthModeOptionFull: "Full width",
widthModeOptionFixed: "Fixed value",
fixedWidthLabel: "Field fixed width",
fixedWidthUnitLabel: "(px)",
paddingXLabel: "Checkbox horizontal padding (px)",
paddingXUnitLabel: "(px)",
paddingYLabel: "Checkbox vertical padding (px)",
paddingYUnitLabel: "(px)",
optionGapLabel: "Checkbox option gap (px)",
optionGapUnitLabel: "(px)",
textColorLabel: "Text color",
textColorPickerAria: "Checkbox text color picker",
textColorHexAria: "Checkbox text color HEX",
fillColorLabel: "Background color",
fillColorPickerAria: "Checkbox background color picker",
fillColorHexAria: "Checkbox background color HEX",
strokeColorLabel: "Border color",
strokeColorPickerAria: "Checkbox border color picker",
strokeColorHexAria: "Checkbox border color HEX",
borderRadiusLabel: "Field border radius",
borderRadiusPresetNone: "None",
borderRadiusPresetSmall: "Small",
borderRadiusPresetMedium: "Medium",
borderRadiusPresetLarge: "Large",
borderRadiusPresetFull: "Fully rounded",
},
ko: {
sectionTitle: "체크박스 필드",
groupTitleTypeLabel: "그룹 타이틀 타입",
groupTitleTypeOptionText: "텍스트",
groupTitleTypeOptionImage: "이미지",
groupTitleDisplayLabel: "그룹 타이틀 표시 방식",
groupTitleDisplayOptionVisible: "표시 (기본)",
groupTitleDisplayOptionHidden: "숨김",
layoutLabel: "레이아웃",
layoutOptionStacked: "세로 (기본)",
layoutOptionInline: "가로 (인라인)",
optionLayoutLabel: "옵션 레이아웃",
optionLayoutOptionStacked: "세로 (기본)",
optionLayoutOptionInline: "가로 (인라인)",
labelGapLabel: "라벨/필드 간격 (px)",
groupTitleLabel: "그룹 타이틀",
submitKeyLabel: "전송 키",
optionsLabel: "옵션",
addOptionButtonLabel: "옵션 추가",
optionLabelPlaceholder: "라벨",
optionValuePlaceholder: "값(value)",
optionImageSourceLabel: "옵션 이미지 소스",
optionImageSourceOptionUrl: "URL",
optionImageSourceOptionUpload: "파일 업로드",
optionImageUrlPlaceholder: "옵션 이미지 URL (선택)",
optionImageUploadLabel: "옵션 이미지 파일 업로드",
optionImageUploadAria: "옵션 이미지 파일 업로드",
groupTitleImageSourceLabel: "그룹 타이틀 이미지 소스",
groupTitleImageSourceOptionUrl: "URL",
groupTitleImageSourceOptionUpload: "파일 업로드",
groupTitleImageUrlLabel: "그룹 타이틀 이미지 URL",
groupTitleImageUploadLabel: "그룹 타이틀 이미지 파일 업로드",
groupTitleImageUploadAria: "그룹 타이틀 이미지 파일 업로드",
requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
styleSectionTitle: "필드 스타일",
textSizeLabel: "체크박스 텍스트 크기 (px)",
textSizeUnitLabel: "(px)",
lineHeightLabel: "체크박스 줄간격 (px)",
lineHeightUnitLabel: "(px)",
letterSpacingLabel: "체크박스 자간 (px)",
letterSpacingUnitLabel: "(px)",
widthModeLabel: "필드 너비",
widthModeOptionAuto: "자동",
widthModeOptionFull: "전체 폭",
widthModeOptionFixed: "고정 값",
fixedWidthLabel: "필드 고정 너비",
fixedWidthUnitLabel: "(px)",
paddingXLabel: "체크박스 가로 패딩 (px)",
paddingXUnitLabel: "(px)",
paddingYLabel: "체크박스 세로 패딩 (px)",
paddingYUnitLabel: "(px)",
optionGapLabel: "체크박스 옵션 간격 (px)",
optionGapUnitLabel: "(px)",
textColorLabel: "텍스트 색상",
textColorPickerAria: "체크박스 텍스트 색상 피커",
textColorHexAria: "체크박스 텍스트 색상 HEX",
fillColorLabel: "배경 색상",
fillColorPickerAria: "체크박스 배경 색상 피커",
fillColorHexAria: "체크박스 배경 색상 HEX",
strokeColorLabel: "테두리 색상",
strokeColorPickerAria: "체크박스 테두리 색상 피커",
strokeColorHexAria: "체크박스 테두리 색상 HEX",
borderRadiusLabel: "필드 모서리 둥글기",
borderRadiusPresetNone: "없음",
borderRadiusPresetSmall: "작게",
borderRadiusPresetMedium: "보통",
borderRadiusPresetLarge: "크게",
borderRadiusPresetFull: "완전 둥글게",
},
};
export function getEditorFormCheckboxPanelMessages(
locale: AppLocale | null | undefined,
): EditorFormCheckboxPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_FORM_CHECKBOX_PANEL_MESSAGES[key] ?? EDITOR_FORM_CHECKBOX_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorFormControllerPanel.ts
+205
View File
@@ -0,0 +1,205 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorFormControllerPanelMessages = {
introTextPrefix: string;
introTextSuffix: string;
submitTargetLabel: string;
submitTargetOptionInternal: string;
submitTargetOptionWebhook: string;
webhookUrlLabel: string;
webhookUrlPlaceholder: string;
payloadFormatLabel: string;
payloadFormatOptionForm: string;
payloadFormatOptionJson: string;
httpMethodLabel: string;
authTokenLabel: string;
authTokenPlaceholder: string;
extraParamsLabel: string;
extraParamsPlaceholder: string;
layoutSectionTitle: string;
formWidthModeLabel: string;
formWidthModeOptionAuto: string;
formWidthModeOptionFull: string;
formWidthModeOptionFixed: string;
formFixedWidthLabel: string;
marginYLabel: string;
marginYPresetNone: string;
marginYPresetCompact: string;
marginYPresetNormal: string;
marginYPresetSpacious: string;
messagesSectionTitle: string;
successMessageLabel: string;
successMessagePlaceholder: string;
errorMessageLabel: string;
errorMessagePlaceholder: string;
controllerSectionTitle: string;
fieldMappingLegend: string;
fieldMappingAriaLabel: string;
requiredLabel: string;
submitButtonLabel: string;
submitButtonAriaLabel: string;
sheetsGuideButtonLabel: string;
sheetsGuideHeading: string;
sheetsGuideCloseAriaLabel: string;
sheetsGuideIntro: string;
sheetsGuideStep1: string;
sheetsGuideStep2: string;
sheetsGuideStep3: string;
sheetsGuideExampleCodeLabel: string;
};
const EDITOR_FORM_CONTROLLER_PANEL_MESSAGES: Record<AppLocale, EditorFormControllerPanelMessages> = {
en: {
introTextPrefix:
"This form is first submitted to the ",
introTextSuffix:
" endpoint on the public page, then processed internally or forwarded to a webhook depending on the settings.",
submitTargetLabel: "Submit target",
submitTargetOptionInternal: "Internal only (no webhook)",
submitTargetOptionWebhook: "Forward to external webhook / Google Sheets",
webhookUrlLabel: "Webhook URL (e.g. Google Apps Script web app URL)",
webhookUrlPlaceholder: "e.g. https://script.google.com/macros/s/.../exec",
payloadFormatLabel: "Payload format",
payloadFormatOptionForm: "Form data (x-www-form-urlencoded)",
payloadFormatOptionJson: "JSON (application/json)",
httpMethodLabel: "HTTP method",
authTokenLabel: "Authorization token (optional)",
authTokenPlaceholder: "e.g. Bearer xxxxxx",
extraParamsLabel: "Additional parameters (key=value lines, separated by line breaks)",
extraParamsPlaceholder: "e.g.\nsource=landing\nformId=contact-hero",
layoutSectionTitle: "Form layout",
formWidthModeLabel: "Form width mode",
formWidthModeOptionAuto: "Auto",
formWidthModeOptionFull: "Full width",
formWidthModeOptionFixed: "Fixed value",
formFixedWidthLabel: "Form fixed width (px)",
marginYLabel: "Form top/bottom margin (px)",
marginYPresetNone: "None",
marginYPresetCompact: "Compact",
marginYPresetNormal: "Normal",
marginYPresetSpacious: "Spacious",
messagesSectionTitle: "Form messages",
successMessageLabel: "Success message",
successMessagePlaceholder: "e.g. Your message has been sent successfully.",
errorMessageLabel: "Error message",
errorMessagePlaceholder: "e.g. An error occurred while submitting.",
controllerSectionTitle: "Form controller",
fieldMappingLegend: "Form field mapping",
fieldMappingAriaLabel: "Form field mapping",
requiredLabel: "Required",
submitButtonLabel: "Submit button",
submitButtonAriaLabel: "Submit button",
sheetsGuideButtonLabel: "Google Sheets integration guide",
sheetsGuideHeading: "Google Sheets integration guide",
sheetsGuideCloseAriaLabel: "Close Google Sheets integration guide",
sheetsGuideIntro:
"You must enter the Google Apps Script web app URL, not the spreadsheet URL itself. Follow the steps below to connect Google Sheets without writing code.",
sheetsGuideStep1:
"In Google Sheets, create a new spreadsheet and add headers like name, email, message in the first row.",
sheetsGuideStep2:
"From the menu, open \"Extensions → Apps Script\" and paste the example code below.",
sheetsGuideStep3:
"From \"Deploy → New deployment\", deploy as a web app and paste the issued web app URL (…/exec) into the Webhook URL field.",
sheetsGuideExampleCodeLabel: "Example Apps Script code",
},
ko: {
introTextPrefix:
"이 폼은 퍼블릭 페이지에서 ",
introTextSuffix:
" 엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다.",
submitTargetLabel: "전송 대상",
submitTargetOptionInternal: "서버 처리 전용 (Webhook 없이 사용)",
submitTargetOptionWebhook: "외부 Webhook / Google Sheets 로 전달",
webhookUrlLabel: "Webhook URL (예: Google Apps Script 웹 앱 URL)",
webhookUrlPlaceholder: "예: https://script.google.com/macros/s/.../exec",
payloadFormatLabel: "전송 포맷",
payloadFormatOptionForm: "폼 데이터 (x-www-form-urlencoded)",
payloadFormatOptionJson: "JSON (application/json)",
httpMethodLabel: "HTTP 메서드",
authTokenLabel: "Authorization 토큰 (옵션)",
authTokenPlaceholder: "예: Bearer xxxxxx",
extraParamsLabel: "추가 파라미터 (key=value 형식, 줄바꿈으로 구분)",
extraParamsPlaceholder: "예:\nsource=landing\nformId=contact-hero",
layoutSectionTitle: "폼 레이아웃",
formWidthModeLabel: "폼 너비 모드",
formWidthModeOptionAuto: "자동",
formWidthModeOptionFull: "전체 폭",
formWidthModeOptionFixed: "고정 값",
formFixedWidthLabel: "폼 고정 너비 (px)",
marginYLabel: "폼 위/아래 여백 (px)",
marginYPresetNone: "없음",
marginYPresetCompact: "좁게",
marginYPresetNormal: "보통",
marginYPresetSpacious: "넓게",
messagesSectionTitle: "폼 메시지",
successMessageLabel: "성공 메시지",
successMessagePlaceholder: "예: 성공적으로 전송되었습니다.",
errorMessageLabel: "에러 메시지",
errorMessagePlaceholder: "예: 전송 중 오류가 발생했습니다.",
controllerSectionTitle: "폼 컨트롤러",
fieldMappingLegend: "폼 필드 매핑",
fieldMappingAriaLabel: "폼 필드 매핑",
requiredLabel: "필수",
submitButtonLabel: "Submit 버튼",
submitButtonAriaLabel: "Submit 버튼",
sheetsGuideButtonLabel: "Google Sheets 연동 가이드",
sheetsGuideHeading: "Google Sheets 연동 가이드",
sheetsGuideCloseAriaLabel: "Google Sheets 연동 가이드 닫기",
sheetsGuideIntro:
"구글 시트 주소를 그대로 입력하는 것이 아니라, 시트에 연결된 Google Apps Script 웹 앱 URL 을 입력해야 합니다. 아래 순서를 따르면 코드를 잘 모르는 사용자도 연동할 수 있습니다.",
sheetsGuideStep1:
"Google Sheets 에서 새 스프레드시트를 만들고, 1행에 name, email, message 같은 헤더를 추가합니다.",
sheetsGuideStep2:
'시트 메뉴의 "확장 프로그램 → 앱스 스크립트" 를 열고 아래 예제 코드를 붙여넣습니다.',
sheetsGuideStep3:
'"배포 → 새 배포" 에서 웹 앱으로 배포한 뒤, 발급된 웹 앱 URL(…/exec) 을 Webhook URL 칸에 붙여넣습니다.',
sheetsGuideExampleCodeLabel: "예시 Apps Script 코드",
},
};
export function getEditorFormControllerPanelMessages(
locale: AppLocale | null | undefined,
): EditorFormControllerPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_FORM_CONTROLLER_PANEL_MESSAGES[key] ?? EDITOR_FORM_CONTROLLER_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorFormInputPanel.ts
+266
View File
@@ -0,0 +1,266 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorFormInputPanelMessages = {
sectionTitle: string;
styleSectionTitle: string;
labelTypeLabel: string;
labelTypeOptionText: string;
labelTypeOptionImage: string;
fieldLabelLabel: string;
labelDisplayLabel: string;
labelDisplayOptionVisible: string;
labelDisplayOptionHidden: string;
labelDisplayOptionFloating: string;
layoutLabel: string;
layoutOptionStacked: string;
layoutOptionInline: string;
labelGapLabel: string;
labelGapUnitLabel: string;
labelImageUrlLabel: string;
labelImageAltLabel: string;
submitKeyLabel: string;
fieldTypeLabel: string;
fieldTypeAria: string;
fieldTypeOptionText: string;
fieldTypeOptionEmail: string;
fieldTypeOptionTextarea: string;
placeholderLabel: string;
placeholderAria: string;
requiredNoticeText: string;
textSizeLabel: string;
textSizeUnitLabel: string;
lineHeightLabel: string;
lineHeightUnitLabel: string;
letterSpacingLabel: string;
letterSpacingUnitLabel: string;
textAlignLabel: string;
textAlignOptionLeft: string;
textAlignOptionCenter: string;
textAlignOptionRight: string;
widthModeLabel: string;
widthModeAria: string;
widthModeOptionAuto: string;
widthModeOptionFull: string;
widthModeOptionFixed: string;
fixedWidthLabel: string;
fixedWidthUnitLabel: string;
paddingXLabel: string;
paddingXUnitLabel: string;
paddingYLabel: string;
paddingYUnitLabel: string;
textColorLabel: string;
textColorPickerAria: string;
textColorHexAria: string;
fillColorLabel: string;
fillColorPickerAria: string;
fillColorHexAria: string;
strokeColorLabel: string;
strokeColorPickerAria: string;
strokeColorHexAria: string;
borderRadiusLabel: string;
borderRadiusPresetNone: string;
borderRadiusPresetSmall: string;
borderRadiusPresetMedium: string;
borderRadiusPresetLarge: string;
borderRadiusPresetFull: string;
};
const EDITOR_FORM_INPUT_PANEL_MESSAGES: Record<AppLocale, EditorFormInputPanelMessages> = {
en: {
sectionTitle: "Input field",
styleSectionTitle: "Field style",
labelTypeLabel: "Label type",
labelTypeOptionText: "Text",
labelTypeOptionImage: "Image",
fieldLabelLabel: "Field label",
labelDisplayLabel: "Label display mode",
labelDisplayOptionVisible: "Visible (default)",
labelDisplayOptionHidden: "Hidden",
labelDisplayOptionFloating: "Floating label",
layoutLabel: "Layout",
layoutOptionStacked: "Vertical (default)",
layoutOptionInline: "Horizontal (inline)",
labelGapLabel: "Label/field gap (px)",
labelGapUnitLabel: "(px)",
labelImageUrlLabel: "Label image URL",
labelImageAltLabel: "Label image alt text",
submitKeyLabel: "Submit key",
fieldTypeLabel: "Field type",
fieldTypeAria: "Field type",
fieldTypeOptionText: "Text",
fieldTypeOptionEmail: "Email",
fieldTypeOptionTextarea: "Multiline text",
placeholderLabel: "Placeholder",
placeholderAria: "Placeholder",
requiredNoticeText: "Required state is configured in the form controller.",
textSizeLabel: "Field text size (px)",
textSizeUnitLabel: "(px)",
lineHeightLabel: "Field line height (px)",
lineHeightUnitLabel: "(px)",
letterSpacingLabel: "Field letter spacing (px)",
letterSpacingUnitLabel: "(px)",
textAlignLabel: "Text alignment",
textAlignOptionLeft: "Left",
textAlignOptionCenter: "Center",
textAlignOptionRight: "Right",
widthModeLabel: "Width",
widthModeAria: "Width",
widthModeOptionAuto: "Auto",
widthModeOptionFull: "Full width",
widthModeOptionFixed: "Fixed value",
fixedWidthLabel: "Field fixed width",
fixedWidthUnitLabel: "(px)",
paddingXLabel: "Field horizontal padding (px)",
paddingXUnitLabel: "(px)",
paddingYLabel: "Field vertical padding (px)",
paddingYUnitLabel: "(px)",
textColorLabel: "Field text color",
textColorPickerAria: "Field text color picker",
textColorHexAria: "Field text color HEX",
fillColorLabel: "Field fill color",
fillColorPickerAria: "Field fill color picker",
fillColorHexAria: "Field fill color HEX",
strokeColorLabel: "Field border color",
strokeColorPickerAria: "Field border color picker",
strokeColorHexAria: "Field border color HEX",
borderRadiusLabel: "Field border radius",
borderRadiusPresetNone: "None",
borderRadiusPresetSmall: "Small",
borderRadiusPresetMedium: "Medium",
borderRadiusPresetLarge: "Large",
borderRadiusPresetFull: "Fully rounded",
},
ko: {
sectionTitle: "입력 필드",
styleSectionTitle: "필드 스타일",
labelTypeLabel: "라벨 타입",
labelTypeOptionText: "텍스트",
labelTypeOptionImage: "이미지",
fieldLabelLabel: "필드 라벨",
labelDisplayLabel: "라벨 표시 방식",
labelDisplayOptionVisible: "표시 (기본)",
labelDisplayOptionHidden: "숨김",
labelDisplayOptionFloating: "플로팅 라벨",
layoutLabel: "레이아웃",
layoutOptionStacked: "세로 (기본)",
layoutOptionInline: "가로 (인라인)",
labelGapLabel: "라벨/필드 간격 (px)",
labelGapUnitLabel: "(px)",
labelImageUrlLabel: "라벨 이미지 URL",
labelImageAltLabel: "라벨 이미지 대체 텍스트",
submitKeyLabel: "전송 키",
fieldTypeLabel: "필드 타입",
fieldTypeAria: "필드 타입",
fieldTypeOptionText: "텍스트",
fieldTypeOptionEmail: "이메일",
fieldTypeOptionTextarea: "긴 텍스트",
placeholderLabel: "Placeholder",
placeholderAria: "Placeholder",
requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
textSizeLabel: "필드 텍스트 크기 (px)",
textSizeUnitLabel: "(px)",
lineHeightLabel: "필드 줄간격 (px)",
lineHeightUnitLabel: "(px)",
letterSpacingLabel: "필드 자간 (px)",
letterSpacingUnitLabel: "(px)",
textAlignLabel: "텍스트 정렬",
textAlignOptionLeft: "왼쪽",
textAlignOptionCenter: "가운데",
textAlignOptionRight: "오른쪽",
widthModeLabel: "너비",
widthModeAria: "너비",
widthModeOptionAuto: "자동",
widthModeOptionFull: "전체 폭",
widthModeOptionFixed: "고정 값",
fixedWidthLabel: "필드 고정 너비",
fixedWidthUnitLabel: "(px)",
paddingXLabel: "필드 가로 패딩 (px)",
paddingXUnitLabel: "(px)",
paddingYLabel: "필드 세로 패딩 (px)",
paddingYUnitLabel: "(px)",
textColorLabel: "필드 텍스트 색상",
textColorPickerAria: "필드 텍스트 색상 피커",
textColorHexAria: "필드 텍스트 색상 HEX",
fillColorLabel: "필드 채움 색상",
fillColorPickerAria: "필드 채움 색상 피커",
fillColorHexAria: "필드 채움 색상 HEX",
strokeColorLabel: "필드 테두리 색상",
strokeColorPickerAria: "필드 테두리 색상 피커",
strokeColorHexAria: "필드 테두리 색상 HEX",
borderRadiusLabel: "필드 모서리 둥글기",
borderRadiusPresetNone: "없음",
borderRadiusPresetSmall: "작게",
borderRadiusPresetMedium: "보통",
borderRadiusPresetLarge: "크게",
borderRadiusPresetFull: "완전 둥글게",
},
};
export function getEditorFormInputPanelMessages(locale: AppLocale | null | undefined): EditorFormInputPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_FORM_INPUT_PANEL_MESSAGES[key] ?? EDITOR_FORM_INPUT_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorFormRadioPanel.ts
+152
View File
@@ -0,0 +1,152 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorFormRadioPanelMessages = {
sectionTitle: string;
requiredNoticeText: string;
styleSectionTitle: string;
textSizeLabel: string;
textSizeUnitLabel: string;
lineHeightLabel: string;
lineHeightUnitLabel: string;
letterSpacingLabel: string;
letterSpacingUnitLabel: string;
fixedWidthLabel: string;
fixedWidthUnitLabel: string;
paddingXLabel: string;
paddingXUnitLabel: string;
paddingYLabel: string;
paddingYUnitLabel: string;
optionGapLabel: string;
optionGapUnitLabel: string;
textColorLabel: string;
textColorPickerAria: string;
textColorHexAria: string;
fillColorLabel: string;
fillColorPickerAria: string;
fillColorHexAria: string;
strokeColorLabel: string;
strokeColorPickerAria: string;
strokeColorHexAria: string;
borderRadiusLabel: string;
borderRadiusPresetNone: string;
borderRadiusPresetSmall: string;
borderRadiusPresetMedium: string;
borderRadiusPresetLarge: string;
borderRadiusPresetFull: string;
};
const EDITOR_FORM_RADIO_PANEL_MESSAGES: Record<AppLocale, EditorFormRadioPanelMessages> = {
en: {
sectionTitle: "Radio field",
requiredNoticeText: "Required state is configured in the form controller.",
styleSectionTitle: "Field style",
textSizeLabel: "Radio text size (px)",
textSizeUnitLabel: "(px)",
lineHeightLabel: "Radio line height (px)",
lineHeightUnitLabel: "(px)",
letterSpacingLabel: "Radio letter spacing (px)",
letterSpacingUnitLabel: "(px)",
fixedWidthLabel: "Field fixed width",
fixedWidthUnitLabel: "(px)",
paddingXLabel: "Radio horizontal padding (px)",
paddingXUnitLabel: "(px)",
paddingYLabel: "Radio vertical padding (px)",
paddingYUnitLabel: "(px)",
optionGapLabel: "Radio option gap (px)",
optionGapUnitLabel: "(px)",
textColorLabel: "Text color",
textColorPickerAria: "Radio text color picker",
textColorHexAria: "Radio text color HEX",
fillColorLabel: "Background color",
fillColorPickerAria: "Radio background color picker",
fillColorHexAria: "Radio background color HEX",
strokeColorLabel: "Border color",
strokeColorPickerAria: "Radio border color picker",
strokeColorHexAria: "Radio border color HEX",
borderRadiusLabel: "Field border radius",
borderRadiusPresetNone: "None",
borderRadiusPresetSmall: "Small",
borderRadiusPresetMedium: "Medium",
borderRadiusPresetLarge: "Large",
borderRadiusPresetFull: "Fully rounded",
},
ko: {
sectionTitle: "라디오 필드",
requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
styleSectionTitle: "필드 스타일",
textSizeLabel: "라디오 텍스트 크기 (px)",
textSizeUnitLabel: "(px)",
lineHeightLabel: "라디오 줄간격 (px)",
lineHeightUnitLabel: "(px)",
letterSpacingLabel: "라디오 자간 (px)",
letterSpacingUnitLabel: "(px)",
fixedWidthLabel: "필드 고정 너비",
fixedWidthUnitLabel: "(px)",
paddingXLabel: "라디오 가로 패딩 (px)",
paddingXUnitLabel: "(px)",
paddingYLabel: "라디오 세로 패딩 (px)",
paddingYUnitLabel: "(px)",
optionGapLabel: "라디오 옵션 간격 (px)",
optionGapUnitLabel: "(px)",
textColorLabel: "텍스트 색상",
textColorPickerAria: "라디오 텍스트 색상 피커",
textColorHexAria: "라디오 텍스트 색상 HEX",
fillColorLabel: "배경 색상",
fillColorPickerAria: "라디오 배경 색상 피커",
fillColorHexAria: "라디오 배경 색상 HEX",
strokeColorLabel: "테두리 색상",
strokeColorPickerAria: "라디오 테두리 색상 피커",
strokeColorHexAria: "라디오 테두리 색상 HEX",
borderRadiusLabel: "필드 모서리 둥글기",
borderRadiusPresetNone: "없음",
borderRadiusPresetSmall: "작게",
borderRadiusPresetMedium: "보통",
borderRadiusPresetLarge: "크게",
borderRadiusPresetFull: "완전 둥글게",
},
};
export function getEditorFormRadioPanelMessages(locale: AppLocale | null | undefined): EditorFormRadioPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_FORM_RADIO_PANEL_MESSAGES[key] ?? EDITOR_FORM_RADIO_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorFormSelectPanel.ts
+226
View File
@@ -0,0 +1,226 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorFormSelectPanelMessages = {
sectionTitle: string;
labelTypeLabel: string;
labelTypeOptionText: string;
labelTypeOptionImage: string;
labelDisplayLabel: string;
labelDisplayOptionVisible: string;
labelDisplayOptionHidden: string;
layoutLabel: string;
layoutOptionStacked: string;
layoutOptionInline: string;
labelGapLabel: string;
fieldLabelLabel: string;
submitKeyLabel: string;
optionsLabel: string;
addOptionButtonLabel: string;
optionLabelPlaceholder: string;
optionValuePlaceholder: string;
requiredNoticeText: string;
styleSectionTitle: string;
textSizeLabel: string;
textSizeUnitLabel: string;
lineHeightLabel: string;
lineHeightUnitLabel: string;
letterSpacingLabel: string;
letterSpacingUnitLabel: string;
widthModeLabel: string;
widthModeOptionAuto: string;
widthModeOptionFull: string;
widthModeOptionFixed: string;
fixedWidthLabel: string;
fixedWidthUnitLabel: string;
paddingXLabel: string;
paddingXUnitLabel: string;
paddingYLabel: string;
paddingYUnitLabel: string;
textColorLabel: string;
textColorPickerAria: string;
textColorHexAria: string;
fillColorLabel: string;
fillColorPickerAria: string;
fillColorHexAria: string;
strokeColorLabel: string;
strokeColorPickerAria: string;
strokeColorHexAria: string;
borderRadiusLabel: string;
borderRadiusPresetNone: string;
borderRadiusPresetSmall: string;
borderRadiusPresetMedium: string;
borderRadiusPresetLarge: string;
borderRadiusPresetFull: string;
};
const EDITOR_FORM_SELECT_PANEL_MESSAGES: Record<AppLocale, EditorFormSelectPanelMessages> = {
en: {
sectionTitle: "Select field",
labelTypeLabel: "Label type",
labelTypeOptionText: "Text",
labelTypeOptionImage: "Image",
labelDisplayLabel: "Label display mode",
labelDisplayOptionVisible: "Visible (default)",
labelDisplayOptionHidden: "Hidden",
layoutLabel: "Layout",
layoutOptionStacked: "Vertical (default)",
layoutOptionInline: "Horizontal (inline)",
labelGapLabel: "Label/field gap (px)",
fieldLabelLabel: "Field label",
submitKeyLabel: "Submit key",
optionsLabel: "Options",
addOptionButtonLabel: "Add option",
optionLabelPlaceholder: "Label",
optionValuePlaceholder: "Value (value)",
requiredNoticeText: "Required state is configured in the form controller.",
styleSectionTitle: "Field style",
textSizeLabel: "Select text size (px)",
textSizeUnitLabel: "(px)",
lineHeightLabel: "Select line height (px)",
lineHeightUnitLabel: "(px)",
letterSpacingLabel: "Select letter spacing (px)",
letterSpacingUnitLabel: "(px)",
widthModeLabel: "Field width",
widthModeOptionAuto: "Auto",
widthModeOptionFull: "Full width",
widthModeOptionFixed: "Fixed value",
fixedWidthLabel: "Field fixed width",
fixedWidthUnitLabel: "(px)",
paddingXLabel: "Select horizontal padding (px)",
paddingXUnitLabel: "(px)",
paddingYLabel: "Select vertical padding (px)",
paddingYUnitLabel: "(px)",
textColorLabel: "Field text color",
textColorPickerAria: "Select text color picker",
textColorHexAria: "Select text color HEX",
fillColorLabel: "Field fill color",
fillColorPickerAria: "Select fill color picker",
fillColorHexAria: "Select fill color HEX",
strokeColorLabel: "Field border color",
strokeColorPickerAria: "Select border color picker",
strokeColorHexAria: "Select border color HEX",
borderRadiusLabel: "Field border radius",
borderRadiusPresetNone: "None",
borderRadiusPresetSmall: "Small",
borderRadiusPresetMedium: "Medium",
borderRadiusPresetLarge: "Large",
borderRadiusPresetFull: "Fully rounded",
},
ko: {
sectionTitle: "셀렉트 필드",
labelTypeLabel: "라벨 타입",
labelTypeOptionText: "텍스트",
labelTypeOptionImage: "이미지",
labelDisplayLabel: "라벨 표시 방식",
labelDisplayOptionVisible: "표시 (기본)",
labelDisplayOptionHidden: "숨김",
layoutLabel: "레이아웃",
layoutOptionStacked: "세로 (기본)",
layoutOptionInline: "가로 (인라인)",
labelGapLabel: "라벨/필드 간격 (px)",
fieldLabelLabel: "필드 라벨",
submitKeyLabel: "전송 키",
optionsLabel: "옵션",
addOptionButtonLabel: "옵션 추가",
optionLabelPlaceholder: "라벨",
optionValuePlaceholder: "값(value)",
requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
styleSectionTitle: "필드 스타일",
textSizeLabel: "셀렉트 텍스트 크기 (px)",
textSizeUnitLabel: "(px)",
lineHeightLabel: "셀렉트 줄간격 (px)",
lineHeightUnitLabel: "(px)",
letterSpacingLabel: "셀렉트 자간 (px)",
letterSpacingUnitLabel: "(px)",
widthModeLabel: "필드 너비",
widthModeOptionAuto: "자동",
widthModeOptionFull: "전체 폭",
widthModeOptionFixed: "고정 값",
fixedWidthLabel: "필드 고정 너비",
fixedWidthUnitLabel: "(px)",
paddingXLabel: "셀렉트 가로 패딩 (px)",
paddingXUnitLabel: "(px)",
paddingYLabel: "셀렉트 세로 패딩 (px)",
paddingYUnitLabel: "(px)",
textColorLabel: "필드 텍스트 색상",
textColorPickerAria: "셀렉트 텍스트 색상 피커",
textColorHexAria: "셀렉트 텍스트 색상 HEX",
fillColorLabel: "필드 채움 색상",
fillColorPickerAria: "셀렉트 채움 색상 피커",
fillColorHexAria: "셀렉트 채움 색상 HEX",
strokeColorLabel: "필드 테두리 색상",
strokeColorPickerAria: "셀렉트 테두리 색상 피커",
strokeColorHexAria: "셀렉트 테두리 색상 HEX",
borderRadiusLabel: "필드 모서리 둥글기",
borderRadiusPresetNone: "없음",
borderRadiusPresetSmall: "작게",
borderRadiusPresetMedium: "보통",
borderRadiusPresetLarge: "크게",
borderRadiusPresetFull: "완전 둥글게",
},
};
export function getEditorFormSelectPanelMessages(
locale: AppLocale | null | undefined,
): EditorFormSelectPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_FORM_SELECT_PANEL_MESSAGES[key] ?? EDITOR_FORM_SELECT_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorImagePanel.ts
+148
View File
@@ -0,0 +1,148 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorImagePanelMessages = {
imageSourceLabel: string;
imageSourceAria: string;
imageSourceOptionUrl: string;
imageSourceOptionUpload: string;
imageUrlLabel: string;
imageUrlAria: string;
imageUploadLabel: string;
imageUploadAria: string;
altLabel: string;
altAria: string;
styleSectionTitle: string;
cardBackgroundLabel: string;
cardBackgroundPickerAria: string;
cardBackgroundHexAria: string;
alignLabel: string;
alignAria: string;
alignOptionLeft: string;
alignOptionCenter: string;
alignOptionRight: string;
widthModeLabel: string;
widthModeAria: string;
widthModeOptionAuto: string;
widthModeOptionFixed: string;
fixedWidthLabel: string;
fixedWidthUnitLabel: string;
fixedWidthPresetSmall: string;
fixedWidthPresetMedium: string;
fixedWidthPresetLarge: string;
borderRadiusLabel: string;
borderRadiusPresetNone: string;
borderRadiusPresetSmall: string;
borderRadiusPresetMedium: string;
borderRadiusPresetLarge: string;
borderRadiusPresetFull: string;
};
const EDITOR_IMAGE_PANEL_MESSAGES: Record<AppLocale, EditorImagePanelMessages> = {
en: {
imageSourceLabel: "Image source",
imageSourceAria: "Image source",
imageSourceOptionUrl: "URL",
imageSourceOptionUpload: "File upload",
imageUrlLabel: "Image URL",
imageUrlAria: "Image URL",
imageUploadLabel: "Image file upload",
imageUploadAria: "Image file upload",
altLabel: "Alt text",
altAria: "Alt text",
styleSectionTitle: "Image style",
cardBackgroundLabel: "Card background color",
cardBackgroundPickerAria: "Image card background color picker",
cardBackgroundHexAria: "Image card background color HEX",
alignLabel: "Alignment",
alignAria: "Image alignment",
alignOptionLeft: "Left",
alignOptionCenter: "Center",
alignOptionRight: "Right",
widthModeLabel: "Width mode",
widthModeAria: "Image width mode",
widthModeOptionAuto: "Fit to content",
widthModeOptionFixed: "Fixed width (px)",
fixedWidthLabel: "Fixed width (px)",
fixedWidthUnitLabel: "(px)",
fixedWidthPresetSmall: "Small",
fixedWidthPresetMedium: "Medium",
fixedWidthPresetLarge: "Wide",
borderRadiusLabel: "Border radius",
borderRadiusPresetNone: "None",
borderRadiusPresetSmall: "Small",
borderRadiusPresetMedium: "Medium",
borderRadiusPresetLarge: "Large",
borderRadiusPresetFull: "Fully rounded",
},
ko: {
imageSourceLabel: "이미지 소스",
imageSourceAria: "이미지 소스",
imageSourceOptionUrl: "URL",
imageSourceOptionUpload: "파일 업로드",
imageUrlLabel: "이미지 URL",
imageUrlAria: "이미지 URL",
imageUploadLabel: "이미지 파일 업로드",
imageUploadAria: "이미지 파일 업로드",
altLabel: "대체 텍스트",
altAria: "대체 텍스트",
styleSectionTitle: "이미지 스타일",
cardBackgroundLabel: "카드 배경색",
cardBackgroundPickerAria: "이미지 카드 배경색 피커",
cardBackgroundHexAria: "이미지 카드 배경색 HEX",
alignLabel: "정렬",
alignAria: "이미지 정렬",
alignOptionLeft: "왼쪽",
alignOptionCenter: "가운데",
alignOptionRight: "오른쪽",
widthModeLabel: "너비 모드",
widthModeAria: "이미지 너비 모드",
widthModeOptionAuto: "내용에 맞춤",
widthModeOptionFixed: "고정 너비 (px)",
fixedWidthLabel: "고정 너비 (px)",
fixedWidthUnitLabel: "(px)",
fixedWidthPresetSmall: "작게",
fixedWidthPresetMedium: "보통",
fixedWidthPresetLarge: "넓게",
borderRadiusLabel: "모서리 둥글기",
borderRadiusPresetNone: "없음",
borderRadiusPresetSmall: "작게",
borderRadiusPresetMedium: "보통",
borderRadiusPresetLarge: "크게",
borderRadiusPresetFull: "완전 둥글게",
},
};
export function getEditorImagePanelMessages(
locale: AppLocale | null | undefined,
): EditorImagePanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_IMAGE_PANEL_MESSAGES[key] ?? EDITOR_IMAGE_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorListPanel.ts
+160
View File
@@ -0,0 +1,160 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorListPanelMessages = {
listItemsLabel: string;
listItemsAria: string;
alignLabel: string;
alignAria: string;
alignOptionLeft: string;
alignOptionCenter: string;
alignOptionRight: string;
styleSectionTitle: string;
fontSizeLabel: string;
fontSizeUnitLabel: string;
fontSizePresetSmall: string;
fontSizePresetMedium: string;
fontSizePresetLarge: string;
lineHeightLabel: string;
lineHeightPresetTight: string;
lineHeightPresetNormal: string;
lineHeightPresetRelaxed: string;
textColorLabel: string;
textColorPickerAria: string;
textColorHexAria: string;
backgroundColorLabel: string;
backgroundColorPickerAria: string;
backgroundColorHexAria: string;
bulletStyleLabel: string;
bulletStyleAria: string;
bulletStyleOptionDisc: string;
bulletStyleOptionCircle: string;
bulletStyleOptionSquare: string;
bulletStyleOptionDecimal: string;
bulletStyleOptionLowerAlpha: string;
bulletStyleOptionUpperAlpha: string;
bulletStyleOptionLowerRoman: string;
bulletStyleOptionUpperRoman: string;
bulletStyleOptionNone: string;
gapLabel: string;
gapUnitLabel: string;
gapPresetTight: string;
gapPresetNormal: string;
gapPresetRelaxed: string;
};
const EDITOR_LIST_PANEL_MESSAGES: Record<AppLocale, EditorListPanelMessages> = {
en: {
listItemsLabel: "List items (separated by line breaks)",
listItemsAria: "List items",
alignLabel: "Alignment",
alignAria: "List alignment",
alignOptionLeft: "Left",
alignOptionCenter: "Center",
alignOptionRight: "Right",
styleSectionTitle: "List style",
fontSizeLabel: "Font size (px)",
fontSizeUnitLabel: "(px)",
fontSizePresetSmall: "Small",
fontSizePresetMedium: "Medium",
fontSizePresetLarge: "Large",
lineHeightLabel: "Line height",
lineHeightPresetTight: "Tight",
lineHeightPresetNormal: "Normal",
lineHeightPresetRelaxed: "Relaxed",
textColorLabel: "Text color",
textColorPickerAria: "List text color picker",
textColorHexAria: "List text color HEX",
backgroundColorLabel: "Block background color",
backgroundColorPickerAria: "List background color picker",
backgroundColorHexAria: "List background color HEX",
bulletStyleLabel: "Bullet style",
bulletStyleAria: "List bullet style",
bulletStyleOptionDisc: "Default (●)",
bulletStyleOptionCircle: "Circle (○)",
bulletStyleOptionSquare: "Square (■)",
bulletStyleOptionDecimal: "Decimal (1.)",
bulletStyleOptionLowerAlpha: "Lower alpha (a.)",
bulletStyleOptionUpperAlpha: "Upper alpha (A.)",
bulletStyleOptionLowerRoman: "Lower roman (i.)",
bulletStyleOptionUpperRoman: "Upper roman (I.)",
bulletStyleOptionNone: "None",
gapLabel: "Item gap (px)",
gapUnitLabel: "(px)",
gapPresetTight: "Tight",
gapPresetNormal: "Normal",
gapPresetRelaxed: "Relaxed",
},
ko: {
listItemsLabel: "리스트 아이템 (줄바꿈으로 구분)",
listItemsAria: "리스트 아이템들",
alignLabel: "정렬",
alignAria: "리스트 정렬",
alignOptionLeft: "왼쪽",
alignOptionCenter: "가운데",
alignOptionRight: "오른쪽",
styleSectionTitle: "리스트 스타일",
fontSizeLabel: "글자 크기 (px)",
fontSizeUnitLabel: "(px)",
fontSizePresetSmall: "작게",
fontSizePresetMedium: "보통",
fontSizePresetLarge: "크게",
lineHeightLabel: "줄 간격",
lineHeightPresetTight: "좁게",
lineHeightPresetNormal: "보통",
lineHeightPresetRelaxed: "넓게",
textColorLabel: "텍스트 색상",
textColorPickerAria: "리스트 텍스트 색상 피커",
textColorHexAria: "리스트 텍스트 색상 HEX",
backgroundColorLabel: "블록 배경색",
backgroundColorPickerAria: "리스트 배경색 피커",
backgroundColorHexAria: "리스트 배경색 HEX",
bulletStyleLabel: "불릿 스타일",
bulletStyleAria: "리스트 불릿 스타일",
bulletStyleOptionDisc: "기본 (●)",
bulletStyleOptionCircle: "원 (○)",
bulletStyleOptionSquare: "사각 (■)",
bulletStyleOptionDecimal: "숫자 (1.)",
bulletStyleOptionLowerAlpha: "알파벳 소문자 (a.)",
bulletStyleOptionUpperAlpha: "알파벳 대문자 (A.)",
bulletStyleOptionLowerRoman: "로마 숫자 소문자 (i.)",
bulletStyleOptionUpperRoman: "로마 숫자 대문자 (I.)",
bulletStyleOptionNone: "없음",
gapLabel: "아이템 간 여백 (px)",
gapUnitLabel: "(px)",
gapPresetTight: "좁게",
gapPresetNormal: "보통",
gapPresetRelaxed: "넓게",
},
};
export function getEditorListPanelMessages(
locale: AppLocale | null | undefined,
): EditorListPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_LIST_PANEL_MESSAGES[key] ?? EDITOR_LIST_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorProjectPropertiesPanel.ts
+170
View File
@@ -0,0 +1,170 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorProjectPropertiesPanelMessages = {
sectionTitle: string;
projectTitleLabel: string;
projectTitleAria: string;
projectSlugLabel: string;
projectSlugAria: string;
canvasWidthLabel: string;
canvasWidthUnitLabel: string;
canvasWidthPresetMobile: string;
canvasWidthPresetTablet: string;
canvasWidthPresetDesktop: string;
canvasBgLabel: string;
canvasBgColorAria: string;
canvasBgHexAria: string;
pageBgLabel: string;
pageBgColorAria: string;
pageBgHexAria: string;
seoSectionTitle: string;
seoTitleLabel: string;
seoTitleAria: string;
seoTitlePlaceholderFallback: string;
seoDescriptionLabel: string;
seoDescriptionAria: string;
seoDescriptionPlaceholder: string;
seoOgImageUrlLabel: string;
seoOgImageUrlAria: string;
seoOgImageUrlPlaceholder: string;
seoCanonicalUrlLabel: string;
seoCanonicalUrlAria: string;
seoCanonicalUrlPlaceholder: string;
seoNoIndexAria: string;
seoNoIndexLabel: string;
headHtmlLabel: string;
headHtmlAria: string;
headHtmlPlaceholder: string;
trackingScriptLabel: string;
trackingScriptAria: string;
trackingScriptPlaceholder: string;
};
const EDITOR_PROJECT_PROPERTIES_PANEL_MESSAGES: Record<AppLocale, EditorProjectPropertiesPanelMessages> = {
en: {
sectionTitle: "Project settings",
projectTitleLabel: "Project title",
projectTitleAria: "Project title",
projectSlugLabel: "Project slug",
projectSlugAria: "Project slug",
canvasWidthLabel: "Canvas width",
canvasWidthUnitLabel: "(px)",
canvasWidthPresetMobile: "Mobile (390px)",
canvasWidthPresetTablet: "Tablet (768px)",
canvasWidthPresetDesktop: "Desktop (1200px)",
canvasBgLabel: "Canvas background color",
canvasBgColorAria: "Canvas background color",
canvasBgHexAria: "Canvas background HEX",
pageBgLabel: "Page background color",
pageBgColorAria: "Page background color",
pageBgHexAria: "Page background HEX",
seoSectionTitle: "SEO / meta",
seoTitleLabel: "SEO title",
seoTitleAria: "SEO title",
seoTitlePlaceholderFallback: "Page title",
seoDescriptionLabel: "Meta description",
seoDescriptionAria: "Meta description",
seoDescriptionPlaceholder: "Enter a description for search engines and social sharing.",
seoOgImageUrlLabel: "OG/Twitter image URL",
seoOgImageUrlAria: "OG/Twitter image URL",
seoOgImageUrlPlaceholder: "e.g. https://example.com/og-image.png",
seoCanonicalUrlLabel: "Canonical URL",
seoCanonicalUrlAria: "Canonical URL",
seoCanonicalUrlPlaceholder: "e.g. https://example.com/landing",
seoNoIndexAria: "Hide from search engines (noindex)",
seoNoIndexLabel: "Hide from search engines (noindex)",
headHtmlLabel: "Page head HTML",
headHtmlAria: "Page head HTML",
headHtmlPlaceholder: 'e.g. <meta name="description" content="..." />',
trackingScriptLabel: "Tracking script",
trackingScriptAria: "Tracking script",
trackingScriptPlaceholder: 'e.g. <script>/* GA, Pixel code */</script>',
},
ko: {
sectionTitle: "프로젝트 설정",
projectTitleLabel: "프로젝트 제목",
projectTitleAria: "프로젝트 제목",
projectSlugLabel: "프로젝트 주소 (slug)",
projectSlugAria: "프로젝트 주소 (slug)",
canvasWidthLabel: "캔버스 너비",
canvasWidthUnitLabel: "(px)",
canvasWidthPresetMobile: "모바일 (390px)",
canvasWidthPresetTablet: "태블릿 (768px)",
canvasWidthPresetDesktop: "데스크톱 (1200px)",
canvasBgLabel: "캔버스 배경색",
canvasBgColorAria: "캔버스 배경색",
canvasBgHexAria: "캔버스 배경색 HEX",
pageBgLabel: "페이지 배경색",
pageBgColorAria: "페이지 배경색",
pageBgHexAria: "페이지 배경색 HEX",
seoSectionTitle: "SEO / 메타",
seoTitleLabel: "SEO 타이틀",
seoTitleAria: "SEO 타이틀",
seoTitlePlaceholderFallback: "페이지 제목",
seoDescriptionLabel: "메타 디스크립션",
seoDescriptionAria: "메타 디스크립션",
seoDescriptionPlaceholder: "검색엔진 및 SNS 공유에 노출될 페이지 설명을 입력하세요.",
seoOgImageUrlLabel: "OG/Twitter 이미지 URL",
seoOgImageUrlAria: "OG/Twitter 이미지 URL",
seoOgImageUrlPlaceholder: "예: https://example.com/og-image.png",
seoCanonicalUrlLabel: "Canonical URL",
seoCanonicalUrlAria: "Canonical URL",
seoCanonicalUrlPlaceholder: "예: https://example.com/landing",
seoNoIndexAria: "검색 엔진에 노출하지 않기 (noindex)",
seoNoIndexLabel: "검색 엔진에 노출하지 않기 (noindex)",
headHtmlLabel: "페이지 head HTML",
headHtmlAria: "페이지 head HTML",
headHtmlPlaceholder: '예: <meta name="description" content="..." />',
trackingScriptLabel: "추적 스크립트",
trackingScriptAria: "추적 스크립트",
trackingScriptPlaceholder: '예: <script>/* GA, Pixel 코드 */</script>',
},
};
export function getEditorProjectPropertiesPanelMessages(
locale: AppLocale | null | undefined,
): EditorProjectPropertiesPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_PROJECT_PROPERTIES_PANEL_MESSAGES[key] ?? EDITOR_PROJECT_PROPERTIES_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorPropertiesSidebar.ts
+1251
View File
File diff suppressed because it is too large Load Diff
src/features/i18n/messages/editorSectionPanel.ts
+301
View File
@@ -0,0 +1,301 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorSectionPanelMessages = {
backgroundColorLabel: string;
backgroundColorPickerAria: string;
backgroundColorHexAria: string;
backgroundImageSourceLabel: string;
backgroundImageSourceAria: string;
backgroundImageSourceOptionNone: string;
backgroundImageSourceOptionUrl: string;
backgroundImageSourceOptionUpload: string;
backgroundImageUrlLabel: string;
backgroundImageUrlAria: string;
backgroundImageUploadLabel: string;
backgroundImageUploadAria: string;
backgroundImagePositionModeLabel: string;
backgroundImagePositionModeAria: string;
backgroundImagePositionModeOptionPreset: string;
backgroundImagePositionModeOptionCustom: string;
backgroundImageSizeLabel: string;
backgroundImageSizeAria: string;
backgroundImagePositionLabel: string;
backgroundImagePositionAria: string;
backgroundImagePositionOptionCenter: string;
backgroundImagePositionOptionTop: string;
backgroundImagePositionOptionBottom: string;
backgroundImagePositionOptionLeft: string;
backgroundImagePositionOptionRight: string;
backgroundImagePositionXLabel: string;
backgroundImagePositionYLabel: string;
backgroundImageRepeatLabel: string;
backgroundImageRepeatAria: string;
backgroundImageRepeatOptionNone: string;
backgroundImageRepeatOptionBoth: string;
backgroundImageRepeatOptionX: string;
backgroundImageRepeatOptionY: string;
backgroundVideoSourceLabel: string;
backgroundVideoSourceAria: string;
backgroundVideoSourceOptionNone: string;
backgroundVideoSourceOptionUrl: string;
backgroundVideoSourceOptionUpload: string;
backgroundVideoUrlLabel: string;
backgroundVideoUrlAria: string;
backgroundVideoUploadLabel: string;
backgroundVideoUploadAria: string;
paddingYLabel: string;
paddingYUnitLabel: string;
paddingYPresetExtraTight: string;
paddingYPresetTight: string;
paddingYPresetNormal: string;
paddingYPresetRelaxed: string;
paddingYPresetExtraRelaxed: string;
layoutSectionTitle: string;
columnLayoutLabel: string;
columnLayoutAria: string;
columnLayoutOptionOneFull: string;
columnLayoutOptionTwoEqual: string;
columnLayoutOptionTwoOneTwo: string;
columnLayoutOptionTwoTwoOne: string;
columnLayoutOptionThreeEqual: string;
columnLayoutOptionCustom: string;
maxWidthLabel: string;
maxWidthUnitLabel: string;
maxWidthPresetExtraNarrow: string;
maxWidthPresetNarrow: string;
maxWidthPresetNormal: string;
maxWidthPresetWide: string;
maxWidthPresetExtraWide: string;
gapXLabel: string;
gapXUnitLabel: string;
gapXPresetZero: string;
gapXPresetTight: string;
gapXPresetNormal: string;
gapXPresetRelaxed: string;
gapXPresetExtraRelaxed: string;
gapXPresetMax: string;
alignItemsLabel: string;
alignItemsAria: string;
alignItemsOptionTop: string;
alignItemsOptionCenter: string;
alignItemsOptionBottom: string;
};
const EDITOR_SECTION_PANEL_MESSAGES: Record<AppLocale, EditorSectionPanelMessages> = {
en: {
backgroundColorLabel: "Background color",
backgroundColorPickerAria: "Section background color picker",
backgroundColorHexAria: "Section background color HEX",
backgroundImageSourceLabel: "Background image source",
backgroundImageSourceAria: "Background image source",
backgroundImageSourceOptionNone: "None",
backgroundImageSourceOptionUrl: "URL",
backgroundImageSourceOptionUpload: "File upload",
backgroundImageUrlLabel: "Background image URL",
backgroundImageUrlAria: "Background image URL",
backgroundImageUploadLabel: "Background image file upload",
backgroundImageUploadAria: "Background image file upload",
backgroundImagePositionModeLabel: "Background image position mode",
backgroundImagePositionModeAria: "Background image position mode",
backgroundImagePositionModeOptionPreset: "Preset",
backgroundImagePositionModeOptionCustom: "Custom (X/Y)",
backgroundImageSizeLabel: "Background image size",
backgroundImageSizeAria: "Background image size",
backgroundImagePositionLabel: "Background image position",
backgroundImagePositionAria: "Background image position",
backgroundImagePositionOptionCenter: "Center",
backgroundImagePositionOptionTop: "Top",
backgroundImagePositionOptionBottom: "Bottom",
backgroundImagePositionOptionLeft: "Left",
backgroundImagePositionOptionRight: "Right",
backgroundImagePositionXLabel: "Background image horizontal position",
backgroundImagePositionYLabel: "Background image vertical position",
backgroundImageRepeatLabel: "Background image repeat",
backgroundImageRepeatAria: "Background image repeat",
backgroundImageRepeatOptionNone: "No repeat",
backgroundImageRepeatOptionBoth: "Repeat (x/y)",
backgroundImageRepeatOptionX: "Repeat horizontally",
backgroundImageRepeatOptionY: "Repeat vertically",
backgroundVideoSourceLabel: "Background video source",
backgroundVideoSourceAria: "Background video source",
backgroundVideoSourceOptionNone: "None",
backgroundVideoSourceOptionUrl: "URL",
backgroundVideoSourceOptionUpload: "File upload",
backgroundVideoUrlLabel: "Background video URL",
backgroundVideoUrlAria: "Background video URL",
backgroundVideoUploadLabel: "Background video file upload",
backgroundVideoUploadAria: "Background video file upload",
paddingYLabel: "Vertical padding",
paddingYUnitLabel: "(px)",
paddingYPresetExtraTight: "Very tight",
paddingYPresetTight: "Tight",
paddingYPresetNormal: "Normal",
paddingYPresetRelaxed: "Wide",
paddingYPresetExtraRelaxed: "Very wide",
layoutSectionTitle: "Section layout",
columnLayoutLabel: "Section column layout",
columnLayoutAria: "Section column layout",
columnLayoutOptionOneFull: "1 column (1/1)",
columnLayoutOptionTwoEqual: "2 columns (1/2 - 1/2)",
columnLayoutOptionTwoOneTwo: "2 columns (1/3 - 2/3)",
columnLayoutOptionTwoTwoOne: "2 columns (2/3 - 1/3)",
columnLayoutOptionThreeEqual: "3 columns (1/3 - 1/3 - 1/3)",
columnLayoutOptionCustom: "Custom",
maxWidthLabel: "Max width (px)",
maxWidthUnitLabel: "(px)",
maxWidthPresetExtraNarrow: "Very narrow",
maxWidthPresetNarrow: "Narrow",
maxWidthPresetNormal: "Normal",
maxWidthPresetWide: "Wide",
maxWidthPresetExtraWide: "Very wide",
gapXLabel: "Column gap (px)",
gapXUnitLabel: "(px)",
gapXPresetZero: "0",
gapXPresetTight: "Tight",
gapXPresetNormal: "Normal",
gapXPresetRelaxed: "Wide",
gapXPresetExtraRelaxed: "Very wide",
gapXPresetMax: "Max",
alignItemsLabel: "Column vertical alignment",
alignItemsAria: "Section column vertical alignment",
alignItemsOptionTop: "Top",
alignItemsOptionCenter: "Center",
alignItemsOptionBottom: "Bottom",
},
ko: {
backgroundColorLabel: "배경 색상",
backgroundColorPickerAria: "섹션 배경 색상 선택",
backgroundColorHexAria: "섹션 배경 색상 HEX 입력",
backgroundImageSourceLabel: "배경 이미지 소스",
backgroundImageSourceAria: "배경 이미지 소스",
backgroundImageSourceOptionNone: "없음",
backgroundImageSourceOptionUrl: "URL",
backgroundImageSourceOptionUpload: "파일 업로드",
backgroundImageUrlLabel: "배경 이미지 URL",
backgroundImageUrlAria: "배경 이미지 URL",
backgroundImageUploadLabel: "배경 이미지 파일 업로드",
backgroundImageUploadAria: "배경 이미지 파일 업로드",
backgroundImagePositionModeLabel: "배경 이미지 위치 모드",
backgroundImagePositionModeAria: "배경 이미지 위치 모드",
backgroundImagePositionModeOptionPreset: "프리셋",
backgroundImagePositionModeOptionCustom: "커스텀 (X/Y)",
backgroundImageSizeLabel: "배경 이미지 크기",
backgroundImageSizeAria: "배경 이미지 크기",
backgroundImagePositionLabel: "배경 이미지 위치",
backgroundImagePositionAria: "배경 이미지 위치",
backgroundImagePositionOptionCenter: "가운데",
backgroundImagePositionOptionTop: "위",
backgroundImagePositionOptionBottom: "아래",
backgroundImagePositionOptionLeft: "왼쪽",
backgroundImagePositionOptionRight: "오른쪽",
backgroundImagePositionXLabel: "배경 이미지 가로 위치",
backgroundImagePositionYLabel: "배경 이미지 세로 위치",
backgroundImageRepeatLabel: "배경 이미지 반복",
backgroundImageRepeatAria: "배경 이미지 반복",
backgroundImageRepeatOptionNone: "반복 없음",
backgroundImageRepeatOptionBoth: "가로/세로 반복",
backgroundImageRepeatOptionX: "가로 반복",
backgroundImageRepeatOptionY: "세로 반복",
backgroundVideoSourceLabel: "배경 비디오 소스",
backgroundVideoSourceAria: "배경 비디오 소스",
backgroundVideoSourceOptionNone: "없음",
backgroundVideoSourceOptionUrl: "URL",
backgroundVideoSourceOptionUpload: "파일 업로드",
backgroundVideoUrlLabel: "배경 비디오 URL",
backgroundVideoUrlAria: "배경 비디오 URL",
backgroundVideoUploadLabel: "배경 비디오 파일 업로드",
backgroundVideoUploadAria: "배경 비디오 파일 업로드",
paddingYLabel: "세로 패딩",
paddingYUnitLabel: "(px)",
paddingYPresetExtraTight: "매우 좁게",
paddingYPresetTight: "좁게",
paddingYPresetNormal: "보통",
paddingYPresetRelaxed: "넓게",
paddingYPresetExtraRelaxed: "아주 넓게",
layoutSectionTitle: "섹션 레이아웃",
columnLayoutLabel: "섹션 컬럼 레이아웃",
columnLayoutAria: "섹션 컬럼 레이아웃",
columnLayoutOptionOneFull: "1열 (1/1)",
columnLayoutOptionTwoEqual: "2열 (1/2 - 1/2)",
columnLayoutOptionTwoOneTwo: "2열 (1/3 - 2/3)",
columnLayoutOptionTwoTwoOne: "2열 (2/3 - 1/3)",
columnLayoutOptionThreeEqual: "3열 (1/3 - 1/3 - 1/3)",
columnLayoutOptionCustom: "직접 조정",
maxWidthLabel: "최대 폭 (px)",
maxWidthUnitLabel: "(px)",
maxWidthPresetExtraNarrow: "매우 좁게",
maxWidthPresetNarrow: "좁게",
maxWidthPresetNormal: "보통",
maxWidthPresetWide: "넓게",
maxWidthPresetExtraWide: "아주 넓게",
gapXLabel: "컬럼 간 간격 (px)",
gapXUnitLabel: "(px)",
gapXPresetZero: "0",
gapXPresetTight: "좁게",
gapXPresetNormal: "보통",
gapXPresetRelaxed: "넓게",
gapXPresetExtraRelaxed: "아주 넓게",
gapXPresetMax: "최대",
alignItemsLabel: "컬럼 세로 정렬",
alignItemsAria: "섹션 컬럼 세로 정렬",
alignItemsOptionTop: "위",
alignItemsOptionCenter: "가운데",
alignItemsOptionBottom: "아래",
},
};
export function getEditorSectionPanelMessages(
locale: AppLocale | null | undefined,
): EditorSectionPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_SECTION_PANEL_MESSAGES[key] ?? EDITOR_SECTION_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorSidebar.broken.ts.bak
BIN
View File
Binary file not shown.
src/features/i18n/messages/editorSidebar.ts
+128
View File
@@ -0,0 +1,128 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorSidebarMessages = {
blocksTitle: string;
blocksText: string;
blocksButton: string;
blocksImage: string;
blocksVideo: string;
blocksDivider: string;
blocksList: string;
blocksSection: string;
formsTitle: string;
formsController: string;
formsInput: string;
formsSelect: string;
formsRadio: string;
formsCheckbox: string;
templatesTitle: string;
templatesGroupHeroCta: string;
templatesGroupContent: string;
templatesGroupTrust: string;
templatesGroupFooter: string;
templateHeroLabel: string;
templateHeroDescription: string;
templateCtaLabel: string;
templateCtaDescription: string;
templateFeaturesLabel: string;
templateFeaturesDescription: string;
templateFaqLabel: string;
templateFaqDescription: string;
templatePricingLabel: string;
templatePricingDescription: string;
templateBlogLabel: string;
templateBlogDescription: string;
templateTestimonialsLabel: string;
templateTestimonialsDescription: string;
templateTeamLabel: string;
templateTeamDescription: string;
templateFooterLabel: string;
templateFooterDescription: string;
};
const EDITOR_SIDEBAR_MESSAGES: Record<AppLocale, EditorSidebarMessages> = {
en: {
blocksTitle: "Blocks",
blocksText: "Text",
blocksButton: "Button",
blocksImage: "Image",
blocksVideo: "Video",
blocksDivider: "Divider",
blocksList: "List",
blocksSection: "Section",
formsTitle: "Form elements",
formsController: "Form controller",
formsInput: "Input field",
formsSelect: "Select field",
formsRadio: "Radio group",
formsCheckbox: "Checkbox group",
templatesTitle: "Templates",
templatesGroupHeroCta: "Hero · CTA",
templatesGroupContent: "Content sections",
templatesGroupTrust: "Trust & about",
templatesGroupFooter: "Footer & misc",
templateHeroLabel: "Hero template",
templateHeroDescription: "Top-of-page hero section (headline + subtext + button)",
templateCtaLabel: "CTA template",
templateCtaDescription: "Call-to-action (CTA) section",
templateFeaturesLabel: "Features template",
templateFeaturesDescription: "Three-column features section",
templateFaqLabel: "FAQ template",
templateFaqDescription: "Frequently asked questions (FAQ) section",
templatePricingLabel: "Pricing template",
templatePricingDescription: "Pricing plans section",
templateBlogLabel: "Blog template",
templateBlogDescription: "Blog post listing section",
templateTestimonialsLabel: "Testimonials template",
templateTestimonialsDescription: "Customer testimonials section",
templateTeamLabel: "Team template",
templateTeamDescription: "Team members section",
templateFooterLabel: "Footer template",
templateFooterDescription: "Page footer section",
},
ko: {
blocksTitle: "블록",
blocksText: "텍스트",
blocksButton: "버튼",
blocksImage: "이미지",
blocksVideo: "비디오",
blocksDivider: "구분선",
blocksList: "리스트",
blocksSection: "섹션",
formsTitle: "폼 요소",
formsController: "폼 컨트롤러",
formsInput: "입력(Input)",
formsSelect: "셀렉트(Select)",
formsRadio: "단일 선택(Radio)",
formsCheckbox: "다중 선택(Checkbox)",
templatesTitle: "템플릿",
templatesGroupHeroCta: "히어로 · CTA",
templatesGroupContent: "콘텐츠 섹션",
templatesGroupTrust: "신뢰/소개",
templatesGroupFooter: "푸터/기타",
templateHeroLabel: "Hero 템플릿",
templateHeroDescription: "페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)",
templateCtaLabel: "CTA 템플릿",
templateCtaDescription: "콜투액션(CTA) 섹션",
templateFeaturesLabel: "기능 템플릿",
templateFeaturesDescription: "3컬럼 기능 소개 섹션",
templateFaqLabel: "FAQ 템플릿",
templateFaqDescription: "자주 묻는 질문(FAQ) 섹션",
templatePricingLabel: "상품 템플릿",
templatePricingDescription: "요금제/플랜 소개 섹션",
templateBlogLabel: "블로그 템플릿",
templateBlogDescription: "블로그 포스트 목록 섹션",
templateTestimonialsLabel: "후기 템플릿",
templateTestimonialsDescription: "고객 후기(Testimonials) 섹션",
templateTeamLabel: "Team 템플릿",
templateTeamDescription: "팀 소개 섹션",
templateFooterLabel: "Footer 템플릿",
templateFooterDescription: "페이지 푸터 섹션",
},
};
export function getEditorSidebarMessages(locale: AppLocale | null | undefined): EditorSidebarMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_SIDEBAR_MESSAGES[key] ?? EDITOR_SIDEBAR_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorTemplates.ts
+291
View File
@@ -0,0 +1,291 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorHeroTemplateMessages = {
headline: string;
subheadline: string;
primaryButtonLabel: string;
};
export type EditorFeaturesTemplateMessages = {
itemTitlePrefix: string;
itemTitleSuffix: string;
itemDescription: string;
};
export type EditorCtaTemplateMessages = {
body: string;
buttonLabel: string;
};
export type EditorFaqTemplateMessages = {
title: string;
subtitle: string;
items: Array<{
question: string;
answer: string;
}>;
};
export type EditorPricingTemplateMessages = {
plans: Array<{
name: string;
price: string;
popular?: boolean;
}>;
featuresText: string;
primaryButtonLabel: string;
secondaryButtonLabel: string;
};
export type EditorTeamTemplateMessages = {
members: Array<{
name: string;
role: string;
bio: string;
}>;
};
export type EditorTestimonialsTemplateMessages = {
items: Array<{
body: string;
author: string;
}>;
};
export type EditorBlogTemplateMessages = {
posts: Array<{
title: string;
summary: string;
}>;
};
export type EditorFooterTemplateMessages = {
description: string;
linksText: string;
};
export type EditorTemplatesMessages = {
hero: EditorHeroTemplateMessages;
features: EditorFeaturesTemplateMessages;
cta: EditorCtaTemplateMessages;
faq: EditorFaqTemplateMessages;
pricing: EditorPricingTemplateMessages;
team: EditorTeamTemplateMessages;
testimonials: EditorTestimonialsTemplateMessages;
blog: EditorBlogTemplateMessages;
footer: EditorFooterTemplateMessages;
};
const EDITOR_TEMPLATES_MESSAGES: Record<AppLocale, EditorTemplatesMessages> = {
en: {
hero: {
headline: "Your hero headline goes here",
subheadline: "Describe your product or service in a single, clear sentence.",
primaryButtonLabel: "Get started now",
},
features: {
itemTitlePrefix: "Feature",
itemTitleSuffix: "",
itemDescription: "A short description of this feature.",
},
cta: {
body:
"Write a compelling CTA message here.\nDon't hesitate to get started!",
buttonLabel: "Call to action",
},
faq: {
title: "FAQ",
subtitle: "Frequently asked questions",
items: [
{
question: "How much does the service cost?",
answer:
"The core features are free, and premium features are available with a monthly subscription.",
},
{
question: "What is your refund policy?",
answer:
"If there is no usage within 7 days after purchase, you can request a full refund.",
},
{
question: "Can I invite teammates?",
answer:
"Yes, team invitations are available on Pro plans and above.",
},
],
},
pricing: {
plans: [
{ name: "Basic", price: "$9/month" },
{ name: "Pro", price: "$29/month", popular: true },
{ name: "Enterprise", price: "Contact us" },
],
featuresText: "• All core features\n• Email support\n• 1GB storage",
primaryButtonLabel: "Start now",
secondaryButtonLabel: "Choose plan",
},
team: {
members: [
{
name: "Alex Kim",
role: "Product Designer",
bio: "Designs thoughtful user experiences.",
},
{
name: "Jamie Lee",
role: "Frontend Engineer",
bio: "Builds clean, accessible UIs.",
},
{
name: "Chris Park",
role: "Backend Engineer",
bio: "Keeps the infrastructure fast and reliable.",
},
],
},
testimonials: {
items: [
{
body: "This builder dramatically reduced the time we spend creating landing pages.",
author: "Alex Kim",
},
{
body: "Even without strong design skills, we can still launch clean, modern pages.",
author: "Jamie Lee",
},
{
body: "Our whole team is happy with this builder.",
author: "Chris Park",
},
],
},
blog: {
posts: [
{
title: "Blog post 1",
summary: "Write a short summary for your first post here.",
},
{
title: "Blog post 2",
summary: "Write a short summary for your second post here.",
},
{
title: "Blog post 3",
summary: "Write a short summary for your third post here.",
},
],
},
footer: {
description: "The best choice for building better websites.",
linksText: "Product\nPricing\nSupport\nContact",
},
},
ko: {
hero: {
headline: "Hero 제목을 여기에 입력하세요",
subheadline: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.",
primaryButtonLabel: "지금 시작하기",
},
features: {
itemTitlePrefix: "Feature",
itemTitleSuffix: " 제목",
itemDescription: "해당 기능을 간단히 설명하는 텍스트입니다.",
},
cta: {
body:
"지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.\n망설이지 말고 시작하세요!",
buttonLabel: "CTA 버튼",
},
faq: {
title: "FAQ",
subtitle: "자주 묻는 질문",
items: [
{
question: "서비스 이용료는 얼마인가요?",
answer: "기본 기능은 무료로 제공되며, 프리미엄 기능은 월 구독료가 발생합니다.",
},
{
question: "환불 정책은 어떻게 되나요?",
answer: "결제 후 7일 이내에 사용 이력이 없는 경우 전액 환불 가능합니다.",
},
{
question: "팀원 초대 기능이 있나요?",
answer: "네, 프로 요금제 이상부터 팀원 초대가 가능합니다.",
},
],
},
pricing: {
plans: [
{ name: "Basic", price: "₩9,900/월" },
{ name: "Pro", price: "₩29,900/월", popular: true },
{ name: "Enterprise", price: "문의" },
],
featuresText: "• 모든 기본 기능\n• 이메일 지원\n• 1GB 스토리지",
primaryButtonLabel: "시작하기",
secondaryButtonLabel: "선택하기",
},
team: {
members: [
{
name: "홍길동",
role: "Product Designer",
bio: "사용자 경험을 설계합니다.",
},
{
name: "김영희",
role: "Frontend Engineer",
bio: "깔끔한 UI를 구현합니다.",
},
{
name: "이철수",
role: "Backend Engineer",
bio: "안정적인 인프라를 책임집니다.",
},
],
},
testimonials: {
items: [
{
body: "이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.",
author: "홍길동",
},
{
body: "디자인을 잘 못해도 깔끔한 페이지를 만들 수 있어요.",
author: "김영희",
},
{
body: "팀 전체가 만족하는 빌더입니다.",
author: "이철수",
},
],
},
blog: {
posts: [
{
title: "블로그 포스트 1",
summary: "첫 번째 포스트 요약을 여기에 입력하세요.",
},
{
title: "블로그 포스트 2",
summary: "두 번째 포스트 요약을 여기에 입력하세요.",
},
{
title: "블로그 포스트 3",
summary: "세 번째 포스트 요약을 여기에 입력하세요.",
},
],
},
footer: {
description: "더 나은 웹사이트를 위한 최고의 선택.",
linksText: "서비스 소개\n요금제\n고객지원\n문의하기",
},
},
};
export function getEditorTemplatesMessages(
locale: AppLocale | null | undefined,
): EditorTemplatesMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_TEMPLATES_MESSAGES[key] ?? EDITOR_TEMPLATES_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorTextPanel.ts
+160
View File
@@ -0,0 +1,160 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorTextPanelMessages = {
selectedTextLabel: string;
selectedTextAria: string;
alignLabel: string;
alignAria: string;
alignOptionLeft: string;
alignOptionCenter: string;
alignOptionRight: string;
textStyleLabel: string;
underlineLabel: string;
strikeLabel: string;
italicLabel: string;
fontSizeLabel: string;
fontSizeUnitLabel: string;
letterSpacingLabel: string;
letterSpacingPresetAria: string;
letterSpacingSliderAria: string;
letterSpacingInputAria: string;
letterSpacingPresetTighter: string;
letterSpacingPresetTight: string;
letterSpacingPresetNormal: string;
letterSpacingPresetWide: string;
letterSpacingPresetWider: string;
lineHeightLabel: string;
lineHeightPresetTight: string;
lineHeightPresetSnug: string;
lineHeightPresetNormal: string;
lineHeightPresetRelaxed: string;
lineHeightPresetLoose: string;
fontWeightLabel: string;
fontWeightPresetNormal: string;
fontWeightPresetMedium: string;
fontWeightPresetSemibold: string;
fontWeightPresetBold: string;
textColorLabel: string;
textColorPickerAria: string;
textColorHexAria: string;
backgroundColorLabel: string;
backgroundColorPickerAria: string;
backgroundColorHexAria: string;
maxWidthLabel: string;
maxWidthPresetAria: string;
maxWidthSliderAria: string;
maxWidthCustomAria: string;
maxWidthPlaceholder: string;
maxWidthPresetNone: string;
maxWidthPresetProse: string;
maxWidthPresetNarrow: string;
};
const EDITOR_TEXT_PANEL_MESSAGES: Record<AppLocale, EditorTextPanelMessages> = {
en: {
selectedTextLabel: "Selected text block content",
selectedTextAria: "Selected text block content",
alignLabel: "Alignment",
alignAria: "Alignment",
alignOptionLeft: "Left",
alignOptionCenter: "Center",
alignOptionRight: "Right",
textStyleLabel: "Text style",
underlineLabel: "Underline",
strikeLabel: "Strikethrough",
italicLabel: "Italic",
fontSizeLabel: "Font size",
fontSizeUnitLabel: "(px)",
letterSpacingLabel: "Letter spacing",
letterSpacingPresetAria: "Letter spacing preset",
letterSpacingSliderAria: "Letter spacing slider",
letterSpacingInputAria: "Letter spacing custom (px)",
letterSpacingPresetTighter: "Very tight",
letterSpacingPresetTight: "Tight",
letterSpacingPresetNormal: "Normal",
letterSpacingPresetWide: "Wide",
letterSpacingPresetWider: "Very wide",
lineHeightLabel: "Line height",
lineHeightPresetTight: "Tight",
lineHeightPresetSnug: "Slightly tight",
lineHeightPresetNormal: "Normal",
lineHeightPresetRelaxed: "Relaxed",
lineHeightPresetLoose: "Loose",
fontWeightLabel: "Weight",
fontWeightPresetNormal: "Regular",
fontWeightPresetMedium: "Medium",
fontWeightPresetSemibold: "Semibold",
fontWeightPresetBold: "Bold",
textColorLabel: "Text color",
textColorPickerAria: "Text color picker",
textColorHexAria: "Text color HEX",
backgroundColorLabel: "Block background color",
backgroundColorPickerAria: "Text block background color picker",
backgroundColorHexAria: "Text block background color HEX",
maxWidthLabel: "Max width",
maxWidthPresetAria: "Max width preset",
maxWidthSliderAria: "Max width slider (ch)",
maxWidthCustomAria: "Max width custom",
maxWidthPlaceholder: "e.g. 600px, 40rem, 80%, 60ch",
maxWidthPresetNone: "No limit",
maxWidthPresetProse: "Body width (60ch)",
maxWidthPresetNarrow: "Narrow (40ch)",
},
ko: {
selectedTextLabel: "선택한 텍스트 블록 내용",
selectedTextAria: "선택한 텍스트 블록 내용",
alignLabel: "정렬",
alignAria: "정렬",
alignOptionLeft: "왼쪽",
alignOptionCenter: "가운데",
alignOptionRight: "오른쪽",
textStyleLabel: "텍스트 스타일",
underlineLabel: "밑줄",
strikeLabel: "가운데줄",
italicLabel: "이탤릭",
fontSizeLabel: "글자 크기",
fontSizeUnitLabel: "(px)",
letterSpacingLabel: "글자 간격",
letterSpacingPresetAria: "글자 간격 프리셋",
letterSpacingSliderAria: "글자 간격 슬라이더",
letterSpacingInputAria: "글자 간격 커스텀 (px)",
letterSpacingPresetTighter: "아주 좁게",
letterSpacingPresetTight: "좁게",
letterSpacingPresetNormal: "보통",
letterSpacingPresetWide: "넓게",
letterSpacingPresetWider: "아주 넓게",
lineHeightLabel: "줄 간격",
lineHeightPresetTight: "좁게",
lineHeightPresetSnug: "약간 좁게",
lineHeightPresetNormal: "보통",
lineHeightPresetRelaxed: "넓게",
lineHeightPresetLoose: "아주 넓게",
fontWeightLabel: "굵기",
fontWeightPresetNormal: "보통",
fontWeightPresetMedium: "중간",
fontWeightPresetSemibold: "세미볼드",
fontWeightPresetBold: "볼드",
textColorLabel: "텍스트 색상",
textColorPickerAria: "텍스트 색상 피커",
textColorHexAria: "텍스트 색상 HEX",
backgroundColorLabel: "블록 배경색",
backgroundColorPickerAria: "텍스트 블록 배경색 피커",
backgroundColorHexAria: "텍스트 블록 배경색 HEX",
maxWidthLabel: "최대 너비",
maxWidthPresetAria: "최대 너비 프리셋",
maxWidthSliderAria: "최대 너비 슬라이더 (ch 단위)",
maxWidthCustomAria: "최대 너비 커스텀",
maxWidthPlaceholder: "예: 600px, 40rem, 80%, 60ch",
maxWidthPresetNone: "제한 없음",
maxWidthPresetProse: "본문 폭 (60ch)",
maxWidthPresetNarrow: "좁게 (40ch)",
},
};
export function getEditorTextPanelMessages(
locale: AppLocale | null | undefined,
): EditorTextPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_TEXT_PANEL_MESSAGES[key] ?? EDITOR_TEXT_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/editorVideoPanel.ts
+215
View File
@@ -0,0 +1,215 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type EditorVideoPanelMessages = {
sourceLabel: string;
sourceAria: string;
sourceOptionUrl: string;
sourceOptionUpload: string;
urlLabel: string;
urlAria: string;
titleLabel: string;
titleAria: string;
ariaLabelLabel: string;
ariaLabelAria: string;
captionTextLabel: string;
captionTextAria: string;
posterImageUrlLabel: string;
posterImageUrlAria: string;
uploadLabel: string;
uploadAria: string;
styleSectionTitle: string;
cardBackgroundLabel: string;
cardBackgroundPickerAria: string;
cardBackgroundHexAria: string;
alignLabel: string;
alignAria: string;
alignOptionLeft: string;
alignOptionCenter: string;
alignOptionRight: string;
widthModeLabel: string;
widthModeAria: string;
widthModeOptionAuto: string;
widthModeOptionFull: string;
widthModeOptionFixed: string;
fixedWidthLabel: string;
fixedWidthUnitLabel: string;
fixedWidthPresetSmall: string;
fixedWidthPresetMedium: string;
fixedWidthPresetLarge: string;
cardPaddingLabel: string;
cardPaddingUnitLabel: string;
cardBorderRadiusLabel: string;
cardBorderRadiusUnitLabel: string;
startTimeLabel: string;
startTimeUnitLabel: string;
endTimeLabel: string;
endTimeUnitLabel: string;
aspectRatioLabel: string;
aspectRatioAria: string;
autoplayLabel: string;
loopLabel: string;
mutedLabel: string;
controlsLabel: string;
};
const EDITOR_VIDEO_PANEL_MESSAGES: Record<AppLocale, EditorVideoPanelMessages> = {
en: {
sourceLabel: "Video source",
sourceAria: "Video source",
sourceOptionUrl: "URL",
sourceOptionUpload: "File upload",
urlLabel: "Video URL",
urlAria: "Video URL",
titleLabel: "Video title",
titleAria: "Video title",
ariaLabelLabel: "Video aria-label",
ariaLabelAria: "Video aria-label",
captionTextLabel: "Video caption text",
captionTextAria: "Video caption text",
posterImageUrlLabel: "Poster image URL",
posterImageUrlAria: "Poster image URL",
uploadLabel: "Video file upload",
uploadAria: "Video file upload",
styleSectionTitle: "Video style",
cardBackgroundLabel: "Card background color",
cardBackgroundPickerAria: "Video card background color picker",
cardBackgroundHexAria: "Video card background color HEX",
alignLabel: "Video alignment",
alignAria: "Video alignment",
alignOptionLeft: "Left",
alignOptionCenter: "Center",
alignOptionRight: "Right",
widthModeLabel: "Video width mode",
widthModeAria: "Video width mode",
widthModeOptionAuto: "Fit to content",
widthModeOptionFull: "Full width",
widthModeOptionFixed: "Fixed width (px)",
fixedWidthLabel: "Fixed width (px)",
fixedWidthUnitLabel: "(px)",
fixedWidthPresetSmall: "Small",
fixedWidthPresetMedium: "Medium",
fixedWidthPresetLarge: "Wide",
cardPaddingLabel: "Card padding",
cardPaddingUnitLabel: "(px)",
cardBorderRadiusLabel: "Card border radius",
cardBorderRadiusUnitLabel: "(px)",
startTimeLabel: "Start time (sec)",
startTimeUnitLabel: "(sec)",
endTimeLabel: "End time (sec)",
endTimeUnitLabel: "(sec)",
aspectRatioLabel: "Video aspect ratio",
aspectRatioAria: "Video aspect ratio",
autoplayLabel: "Autoplay",
loopLabel: "Loop",
mutedLabel: "Muted",
controlsLabel: "Show controls",
},
ko: {
sourceLabel: "비디오 소스",
sourceAria: "비디오 소스",
sourceOptionUrl: "URL",
sourceOptionUpload: "파일 업로드",
urlLabel: "비디오 URL",
urlAria: "비디오 URL",
titleLabel: "비디오 제목",
titleAria: "비디오 제목",
ariaLabelLabel: "비디오 aria-label",
ariaLabelAria: "비디오 aria-label",
captionTextLabel: "비디오 캡션 텍스트",
captionTextAria: "비디오 캡션 텍스트",
posterImageUrlLabel: "포스터 이미지 URL",
posterImageUrlAria: "포스터 이미지 URL",
uploadLabel: "비디오 파일 업로드",
uploadAria: "비디오 파일 업로드",
styleSectionTitle: "비디오 스타일",
cardBackgroundLabel: "카드 배경색",
cardBackgroundPickerAria: "비디오 카드 배경색 피커",
cardBackgroundHexAria: "비디오 카드 배경색 HEX",
alignLabel: "비디오 정렬",
alignAria: "비디오 정렬",
alignOptionLeft: "왼쪽",
alignOptionCenter: "가운데",
alignOptionRight: "오른쪽",
widthModeLabel: "비디오 너비 모드",
widthModeAria: "비디오 너비 모드",
widthModeOptionAuto: "내용에 맞춤",
widthModeOptionFull: "가로 전체",
widthModeOptionFixed: "고정 너비 (px)",
fixedWidthLabel: "고정 너비 (px)",
fixedWidthUnitLabel: "(px)",
fixedWidthPresetSmall: "작게",
fixedWidthPresetMedium: "보통",
fixedWidthPresetLarge: "넓게",
cardPaddingLabel: "카드 패딩",
cardPaddingUnitLabel: "(px)",
cardBorderRadiusLabel: "카드 모서리 둥글기",
cardBorderRadiusUnitLabel: "(px)",
startTimeLabel: "시작 시점 (초)",
startTimeUnitLabel: "(초)",
endTimeLabel: "종료 시점 (초)",
endTimeUnitLabel: "(초)",
aspectRatioLabel: "화면 비율",
aspectRatioAria: "화면 비율",
autoplayLabel: "자동 재생",
loopLabel: "반복 재생",
mutedLabel: "음소거",
controlsLabel: "재생 컨트롤 표시",
},
};
export function getEditorVideoPanelMessages(locale: AppLocale | null | undefined): EditorVideoPanelMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return EDITOR_VIDEO_PANEL_MESSAGES[key] ?? EDITOR_VIDEO_PANEL_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/preview.ts
+32
View File
@@ -0,0 +1,32 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type PreviewMessages = {
headerTitle: string;
headerDescription: string;
exportZipButtonLabel: string;
navProjects: string;
navBackToEditor: string;
};
const PREVIEW_MESSAGES: Record<AppLocale, PreviewMessages> = {
en: {
headerTitle: "Page Preview",
headerDescription: "Preview of the page built with the visual editor.",
exportZipButtonLabel: "Export as page files (ZIP)",
navProjects: "Projects",
navBackToEditor: "Back to editor",
},
ko: {
headerTitle: "Page Preview",
headerDescription: "빌더로 만든 페이지를 미리 보는 화면",
exportZipButtonLabel: "페이지 파일로 내보내기 (ZIP)",
navProjects: "프로젝트 목록",
navBackToEditor: "에디터로 돌아가기",
},
};
export function getPreviewMessages(locale: AppLocale | null | undefined): PreviewMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return PREVIEW_MESSAGES[key] ?? PREVIEW_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/projects.ts
+122
View File
@@ -0,0 +1,122 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type ProjectsMessages = {
headerTitle: string;
headerDescription: string;
errorFetchUnauthorized: string;
errorFetchGeneric: string;
errorDeleteSingle: string;
errorDeleteBulkAllFailed: string;
errorDeleteBulkSomeFailed: string;
confirmDeleteSingle: string;
confirmDeleteBulk: string;
emptyListMessage: string;
toolbarSelectedPrefix: string;
toolbarSelectedSuffix: string;
toolbarDeleteSelected: string;
toolbarCreateNew: string;
tableHeaderTitle: string;
tableHeaderSlug: string;
tableHeaderStatus: string;
tableHeaderCreatedAt: string;
tableHeaderUpdatedAt: string;
tableHeaderActions: string;
tableHeaderSelectAllAria: string;
tableRowSelectAriaSuffix: string;
actionEdit: string;
actionPreview: string;
actionViewSubmissions: string;
actionDelete: string;
pagerTotalPrefix: string;
pagerTotalCountSuffix: string;
pagerPrevLabel: string;
pagerNextLabel: string;
};
const PROJECTS_MESSAGES: Record<AppLocale, ProjectsMessages> = {
en: {
headerTitle: "Projects",
headerDescription: "See all saved projects at a glance.",
errorFetchUnauthorized:
"You need to be signed in to view your projects. Please log in again.",
errorFetchGeneric:
"An error occurred while loading your projects. Please try again later.",
errorDeleteSingle:
"An error occurred while deleting the project. Please try again later.",
errorDeleteBulkAllFailed:
"An error occurred while deleting the selected projects. Please try again later.",
errorDeleteBulkSomeFailed:
"Failed to delete some projects. Please refresh and review the list.",
confirmDeleteSingle:
"Delete this project? This cannot be undone and any local/auto-saved data will also be removed.",
confirmDeleteBulk:
"Delete all selected projects? This cannot be undone and any local/auto-saved data will also be removed.",
emptyListMessage: "No projects saved yet. Save a project from the editor to see it here.",
toolbarSelectedPrefix: "Selected projects: ",
toolbarSelectedSuffix: "",
toolbarDeleteSelected: "Delete selected",
toolbarCreateNew: "Create new project",
tableHeaderTitle: "Title",
tableHeaderSlug: "Address (slug)",
tableHeaderStatus: "Status",
tableHeaderCreatedAt: "Created at",
tableHeaderUpdatedAt: "Updated at",
tableHeaderActions: "Actions",
tableHeaderSelectAllAria: "Select all projects on current page",
tableRowSelectAriaSuffix: " (select)",
actionEdit: "Edit",
actionPreview: "Preview",
actionViewSubmissions: "Form submissions",
actionDelete: "Delete",
pagerTotalPrefix: "Total ",
pagerTotalCountSuffix: " items, ",
pagerPrevLabel: "Previous",
pagerNextLabel: "Next",
},
ko: {
headerTitle: "프로젝트 목록",
headerDescription: "저장된 프로젝트들을 한 눈에 볼 수 있는 목록",
errorFetchUnauthorized:
"프로젝트 목록을 불러오는 중 인증 오류가 발생했습니다. 다시 로그인해 주세요.",
errorFetchGeneric:
"프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
errorDeleteSingle:
"프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
errorDeleteBulkAllFailed:
"선택한 프로젝트를 삭제하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
errorDeleteBulkSomeFailed:
"일부 프로젝트 삭제에 실패했습니다. 페이지를 새로고침한 뒤 목록을 확인해 주세요.",
confirmDeleteSingle:
"이 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
confirmDeleteBulk:
"선택한 프로젝트를 모두 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
emptyListMessage:
"아직 저장된 프로젝트가 없습니다. 에디터에서 프로젝트를 저장해 보세요.",
toolbarSelectedPrefix: "선택된 프로젝트: ",
toolbarSelectedSuffix: "개",
toolbarDeleteSelected: "선택 삭제",
toolbarCreateNew: "새 프로젝트 만들기",
tableHeaderTitle: "제목",
tableHeaderSlug: "주소(slug)",
tableHeaderStatus: "상태",
tableHeaderCreatedAt: "생성일",
tableHeaderUpdatedAt: "수정일",
tableHeaderActions: "액션",
tableHeaderSelectAllAria: "전체 선택",
tableRowSelectAriaSuffix: " 선택",
actionEdit: "편집",
actionPreview: "미리보기",
actionViewSubmissions: "폼 제출 내역",
actionDelete: "삭제",
pagerTotalPrefix: "전체 ",
pagerTotalCountSuffix: "개 중 ",
pagerPrevLabel: "이전",
pagerNextLabel: "다음",
},
};
export function getProjectsMessages(locale: AppLocale | null | undefined): ProjectsMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return PROJECTS_MESSAGES[key] ?? PROJECTS_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/publicPageRenderer.ts
+40
View File
@@ -0,0 +1,40 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type PublicPageRendererMessages = {
requiredFieldsPrefix: string;
submitSuccessDefault: string;
submitErrorDefault: string;
checkboxGroupLabelImageAltFallback: string;
checkboxOptionImageAltFallback: string;
radioOptionImageAltFallback: string;
};
const PUBLIC_PAGE_RENDERER_MESSAGES: Record<AppLocale, PublicPageRendererMessages> = {
en: {
requiredFieldsPrefix: "Please fill in the following required fields:",
submitSuccessDefault: "Submitted successfully.",
submitErrorDefault: "An error occurred while submitting.",
checkboxGroupLabelImageAltFallback: "Form group title",
checkboxOptionImageAltFallback: "Checkbox option",
radioOptionImageAltFallback: "Radio option",
},
ko: {
requiredFieldsPrefix: "다음 필수 항목을 입력해 주세요:",
submitSuccessDefault: "성공적으로 전송되었습니다.",
submitErrorDefault: "전송 중 오류가 발생했습니다.",
checkboxGroupLabelImageAltFallback: "폼 그룹 타이틀",
checkboxOptionImageAltFallback: "체크박스 옵션",
radioOptionImageAltFallback: "라디오 옵션",
},
};
export function getPublicPageRendererMessages(
locale: AppLocale | null | undefined,
): PublicPageRendererMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return PUBLIC_PAGE_RENDERER_MESSAGES[key] ?? PUBLIC_PAGE_RENDERER_MESSAGES[DEFAULT_LOCALE];
}
src/features/i18n/messages/submissions.ts
+70
View File
@@ -0,0 +1,70 @@
import type { AppLocale } from "../locale";
import { DEFAULT_LOCALE } from "../locale";
export type SubmissionsMessages = {
headerTitle: string;
headerDescription: string;
errorUnauthorized: string;
errorGeneric: string;
errorLogout: string;
loadingText: string;
emptyText: string;
tableHeaderCreatedAt: string;
tableHeaderProject: string;
tableHeaderSlug: string;
tableHeaderName: string;
tableHeaderEmail: string;
tableHeaderPhone: string;
tableHeaderBirthdate: string;
tableHeaderOtherFields: string;
};
const SUBMISSIONS_MESSAGES: Record<AppLocale, SubmissionsMessages> = {
en: {
headerTitle: "All form submissions",
headerDescription:
"View form submissions across all projects for the current signed-in account.",
errorUnauthorized:
"You need to be signed in to view form submissions. Please log in again.",
errorGeneric:
"An error occurred while loading form submissions. Please try again later.",
errorLogout:
"An error occurred while logging out. Please try again later.",
loadingText: "Loading form submissions...",
emptyText: "No form submissions have been collected yet.",
tableHeaderCreatedAt: "Submitted at",
tableHeaderProject: "Project",
tableHeaderSlug: "Slug",
tableHeaderName: "Name",
tableHeaderEmail: "Email",
tableHeaderPhone: "Phone",
tableHeaderBirthdate: "Birthdate",
tableHeaderOtherFields: "Other fields",
},
ko: {
headerTitle: "전체 폼 제출 내역",
headerDescription:
"로그인한 계정의 모든 프로젝트에 대한 폼 제출 데이터를 확인할 수 있습니다.",
errorUnauthorized:
"폼 제출 내역을 조회하려면 로그인이 필요합니다. 다시 로그인해 주세요.",
errorGeneric:
"폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
errorLogout:
"로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
loadingText: "폼 제출 내역을 불러오는 중입니다...",
emptyText: "아직 수집된 폼 제출 내역이 없습니다.",
tableHeaderCreatedAt: "제출 시각",
tableHeaderProject: "프로젝트",
tableHeaderSlug: "Slug",
tableHeaderName: "이름",
tableHeaderEmail: "이메일",
tableHeaderPhone: "전화번호",
tableHeaderBirthdate: "생년월일",
tableHeaderOtherFields: "기타 필드",
},
};
export function getSubmissionsMessages(locale: AppLocale | null | undefined): SubmissionsMessages {
const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
return SUBMISSIONS_MESSAGES[key] ?? SUBMISSIONS_MESSAGES[DEFAULT_LOCALE];
}
tests/api/export.spec.ts
+55 -123
View File
@@ -8,6 +8,8 @@ import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
import { createFeaturesTemplateBlocks } from "@/app/editor/templates/featuresTemplate"; import { createFeaturesTemplateBlocks } from "@/app/editor/templates/featuresTemplate";
import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate"; import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate";
import { createFooterTemplateBlocks } from "@/app/editor/templates/footerTemplate"; import { createFooterTemplateBlocks } from "@/app/editor/templates/footerTemplate";
import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
import { DEFAULT_LOCALE } from "@/features/i18n/locale";
import { buildStaticHtml } from "@/app/api/export/route"; import { buildStaticHtml } from "@/app/api/export/route";
const BASE_URL = "http://localhost"; const BASE_URL = "http://localhost";
@@ -2013,13 +2015,12 @@ describe("/api/export", () => {
expect(html).toContain("Pro"); expect(html).toContain("Pro");
}); });
describe("템플릿 섹션 정적 export", () => { function createIdFactory() {
function createIdFactory() { let i = 0;
let i = 0; return () => `tpl_${++i}`;
return () => `tpl_${++i}`; }
}
async function exportTemplateHtml(blocks: Block[]): Promise<string> { async function exportTemplateHtml(blocks: Block[]): Promise<string> {
const projectConfig: ProjectConfig = { const projectConfig: ProjectConfig = {
title: "템플릿 export 테스트", title: "템플릿 export 테스트",
slug: "template-export-test", slug: "template-export-test",
@@ -2050,148 +2051,80 @@ describe("/api/export", () => {
return html; return html;
} }
it("Hero 템플릿 섹션은 export HTML 에 기본 헤드라인/서브텍스트/버튼 텍스트를 포함해야 한다", async () => { it("Hero 템플릿 섹션은 export HTML 에 헤드라인/서브텍스트/버튼 텍스트를 포함해야 한다", async () => {
const sectionId = "hero_section_export"; const sectionId = "hero_section_export";
const { blocks } = createHeroTemplateBlocks({ sectionId, createId: createIdFactory() }); const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks } = createHeroTemplateBlocks({
sectionId,
createId: createIdFactory(),
messages: tpl.hero,
});
const html = await exportTemplateHtml(blocks as Block[]); const html = await exportTemplateHtml(blocks as Block[]);
expect(html).toContain("Hero 제목을 여기에 입력하세요"); expect(html).toContain("Your hero headline goes here");
expect(html).toContain("제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다."); expect(html).toContain(
expect(html).toContain("지금 시작하기"); "Describe your product or service in a single, clear sentence.",
);
expect(html).toContain("Get started now");
}); });
it("Features 템플릿 섹션은 export HTML 에 3개의 Feature 제목과 설명 텍스트를 포함해야 한다", async () => { it("Features 템플릿 섹션은 export HTML 에 3개의 Feature 제목과 설명 텍스트를 포함해야 한다", async () => {
const sectionId = "features_section_export"; const sectionId = "features_section_export";
const { blocks } = createFeaturesTemplateBlocks({ sectionId, createId: createIdFactory() }); const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks } = createFeaturesTemplateBlocks({
sectionId,
createId: createIdFactory(),
messages: tpl.features,
});
const html = await exportTemplateHtml(blocks as Block[]); const html = await exportTemplateHtml(blocks as Block[]);
expect(html).toContain("Feature 1 제목"); expect(html).toContain("Feature 1");
expect(html).toContain("Feature 2 제목"); expect(html).toContain("Feature 2");
expect(html).toContain("Feature 3 제목"); expect(html).toContain("Feature 3");
const descText = "해당 기능을 간단히 설명하는 텍스트입니다."; const descText = "A short description of this feature.";
const occurrences = html.split(descText).length - 1; const count = html.split(descText).length - 1;
expect(occurrences).toBeGreaterThanOrEqual(3); expect(count).toBeGreaterThanOrEqual(3);
}); });
it("CTA 템플릿 섹션은 export HTML 에 CTA 본문 텍스트와 버튼 라벨을 포함해야 한다", async () => { it("CTA 템플릿 섹션은 export HTML 에 CTA 텍스트와 버튼 라벨을 포함해야 한다", async () => {
const sectionId = "cta_section_export"; const sectionId = "cta_section_export";
const { blocks } = createCtaTemplateBlocks({ sectionId, createId: createIdFactory() }); const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks } = createCtaTemplateBlocks({
sectionId,
createId: createIdFactory(),
messages: tpl.cta,
});
const html = await exportTemplateHtml(blocks as Block[]); const html = await exportTemplateHtml(blocks as Block[]);
expect(html).toContain("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요."); expect(html).toContain("Write a compelling CTA message here.");
expect(html).toContain("CTA 버튼"); // 작은따옴표는 HTML 이스케이프되어 Don&#39;t 형태로 렌더된다.
expect(html).toContain("Don&#39;t hesitate to get started!");
expect(html).toContain("Call to action");
}); });
it("Footer 템플릿 섹션은 export HTML 의 마지막 섹션으로 렌더되고 푸터 텍스트를 포함해야 한다", async () => { it("Footer 템플릿 섹션은 export HTML 에 푸터 설명과 링크 텍스트를 포함해야 한다", async () => {
const sectionId = "footer_section_export"; const sectionId = "footer_section_export";
const { blocks } = createFooterTemplateBlocks({ sectionId, createId: createIdFactory() }); const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks } = createFooterTemplateBlocks({
sectionId,
createId: createIdFactory(),
messages: tpl.footer,
});
const html = await exportTemplateHtml(blocks as Block[]); const html = await exportTemplateHtml(blocks as Block[]);
expect(html).toContain("MyLanding"); expect(html).toContain("The best choice for building better websites.");
expect(html).toContain("더 나은 웹사이트를 위한 최고의 선택."); expect(html).toContain("Product");
expect(html).toContain("서비스 소개"); expect(html).toContain("Pricing");
expect(html).toContain("문의하기"); expect(html).toContain("Support");
expect(html).toContain(" 2025 MyLanding."); expect(html).toContain("Contact");
const lastSectionIndex = html.lastIndexOf("<section");
expect(lastSectionIndex).toBeGreaterThan(-1);
const lastSectionHtml = html.slice(lastSectionIndex);
expect(lastSectionHtml).toContain(" 2025 MyLanding.");
}); });
it("루트 버튼 내비게이션 링크는 Export HTML 에서 동일한 라벨과 href 로 렌더되어야 한다", async () => { it("기본 텍스트 블록은 프리뷰처럼 흰 글자와 줄바꿈 유지 스타일을 사용해야 한다", async () => {
const blocks: Block[] = [
{
id: "nav_btn_1",
type: "button",
props: {
label: "요금제",
href: "/pricing",
align: "left",
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "내비게이션 링크 테스트",
slug: "nav-link-test",
canvasPreset: "full",
};
const html = buildStaticHtml(blocks, projectConfig);
expect(html).toContain('<a href="/pricing"');
expect(html).toContain(">요금제</a>");
});
});
describe("buildStaticHtml", () => {
it("text 블록은 pb 텍스트 스타일 클래스를 포함해야 한다", async () => {
const blocks: Block[] = [
{
id: "text_styled",
type: "text",
props: {
text: "스타일 테스트",
align: "center",
size: "base",
fontSizeMode: "scale",
fontSizeScale: "lg",
lineHeightMode: "scale",
lineHeightScale: "relaxed",
fontWeightMode: "scale",
fontWeightScale: "semibold",
colorMode: "palette",
colorPalette: "strong",
underline: true,
italic: true,
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "텍스트 스타일 테스트",
slug: "text-style-test",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("스타일 테스트");
expect(html).toContain("pb-text-center");
expect(html).toContain("pb-text-lg");
expect(html).toContain("pb-leading-relaxed");
expect(html).toContain("pb-font-semibold");
expect(html).toContain("pb-text-color-strong");
expect(html).toContain("pb-underline");
expect(html).toContain("pb-italic");
});
it("기본 텍스트 블록은 프리뷰처럼 흰 글자와 줄바꿈 유지 스타일을 사용해야 한다", async () => {
const blocks: Block[] = [ const blocks: Block[] = [
{ {
id: "text_default", id: "text_default",
@@ -3244,4 +3177,3 @@ describe("/api/export", () => {
expect(css).toContain(".pb-section-column"); expect(css).toContain(".pb-section-column");
}); });
}); });
});
tests/e2e/auth.spec.ts
+8 -8
View File
@@ -16,7 +16,7 @@ test("비로그인 사용자가 /projects 에 접근하면 /login 으로 리다
await page.goto("/projects"); await page.goto("/projects");
// 최종적으로 로그인 페이지의 헤더가 보여야 한다. // 최종적으로 로그인 페이지의 헤더가 보여야 한다.
await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
}); });
test("비로그인 사용자가 /editor 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => { test("비로그인 사용자가 /editor 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
@@ -31,7 +31,7 @@ test("비로그인 사용자가 /editor 에 접근하면 /login 으로 리다이
await page.goto("/editor"); await page.goto("/editor");
await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
}); });
test("비로그인 사용자가 /preview 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => { test("비로그인 사용자가 /preview 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
@@ -45,7 +45,7 @@ test("비로그인 사용자가 /preview 에 접근하면 /login 으로 리다
await page.goto("/preview"); await page.goto("/preview");
await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
}); });
test("회원가입 후에는 /dashboard, /editor, /preview 에 정상 접근할 수 있어야 한다", async ({ page }) => { test("회원가입 후에는 /dashboard, /editor, /preview 에 정상 접근할 수 있어야 한다", async ({ page }) => {
@@ -94,14 +94,14 @@ test("회원가입 후에는 /dashboard, /editor, /preview 에 정상 접근할
// 1) 회원가입 // 1) 회원가입
await page.goto("/signup"); await page.goto("/signup");
await page.getByLabel("이메일").fill(email); await page.getByLabel("Email").fill(email);
await page.getByLabel("비밀번호", { exact: true }).fill(password); await page.getByLabel("Password", { exact: true }).fill(password);
await page.getByLabel("비밀번호 확인").fill(password); await page.getByLabel("Confirm password").fill(password);
await page.getByRole("button", { name: "회원가입" }).click(); await page.getByRole("button", { name: "Sign up" }).click();
// /dashboard 로 이동했는지, 헤더가 보이는지 확인 // /dashboard 로 이동했는지, 헤더가 보이는지 확인
await expect(page).toHaveURL(/\/dashboard/); await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
// 2) /editor 접근 확인 – 로그인 페이지로 리다이렉트되면 안 된다. // 2) /editor 접근 확인 – 로그인 페이지로 리다이렉트되면 안 된다.
await page.goto("/editor"); await page.goto("/editor");
tests/e2e/dashboard.spec.ts
+8 -8
View File
@@ -16,7 +16,7 @@ test("비로그인 사용자가 /dashboard 에 접근하면 /login 으로 리다
await page.goto("/dashboard"); await page.goto("/dashboard");
await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
}); });
test("로그인 사용자가 /dashboard 에 접근하면 요약 지표와 프로젝트 카드 리스트, 일별 그래프를 볼 수 있어야 한다", async ({ page }) => { test("로그인 사용자가 /dashboard 에 접근하면 요약 지표와 프로젝트 카드 리스트, 일별 그래프를 볼 수 있어야 한다", async ({ page }) => {
@@ -61,19 +61,19 @@ test("로그인 사용자가 /dashboard 에 접근하면 요약 지표와 프로
await page.goto("/dashboard"); await page.goto("/dashboard");
// 대시보드 헤더가 보여야 한다. // 대시보드 헤더가 보여야 한다.
await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
// 상단 헤더 내비게이션이 보여야 한다. // 상단 헤더 내비게이션이 보여야 한다.
const dashboardLink = page.getByRole("link", { name: "대시보드" }); const dashboardLink = page.getByRole("link", { name: "Dashboard" });
await expect(dashboardLink).toBeVisible(); await expect(dashboardLink).toBeVisible();
const projectsLink = page.getByRole("link", { name: "프로젝트 목록" }); const projectsLink = page.getByRole("link", { name: "Projects" });
await expect(projectsLink).toBeVisible(); await expect(projectsLink).toBeVisible();
const submissionsLink = page.getByRole("link", { name: "전체 제출 내역" }); const submissionsLink = page.getByRole("link", { name: "All submissions" });
await expect(submissionsLink).toBeVisible(); await expect(submissionsLink).toBeVisible();
const menuButton = page.getByRole("button", { name: "메뉴" }); const menuButton = page.getByRole("button", { name: "Menu" });
await expect(menuButton).toBeVisible(); await expect(menuButton).toBeVisible();
// 상단 요약 위젯의 지표들이 기대 값으로 렌더되어야 한다. // 상단 요약 위젯의 지표들이 기대 값으로 렌더되어야 한다.
@@ -112,7 +112,7 @@ test("로그인 사용자가 /dashboard 에 접근하면 요약 지표와 프로
// 메뉴 버튼을 클릭하면 로그아웃 항목이 보여야 한다. // 메뉴 버튼을 클릭하면 로그아웃 항목이 보여야 한다.
await menuButton.click(); await menuButton.click();
await expect(page.getByRole("button", { name: "로그아웃" })).toBeVisible(); await expect(page.getByRole("button", { name: "Log out" })).toBeVisible();
}); });
test("로그인 사용자가 / 에 접속하면 대시보드로 진입해야 한다", async ({ page }) => { test("로그인 사용자가 / 에 접속하면 대시보드로 진입해야 한다", async ({ page }) => {
@@ -136,5 +136,5 @@ test("로그인 사용자가 / 에 접속하면 대시보드로 진입해야 한
await page.goto("/"); await page.goto("/");
await expect(page).toHaveURL(/\/dashboard/); await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
}); });
tests/e2e/editor.spec.ts
+34 -30
View File
@@ -23,7 +23,7 @@ test("/editor 페이지가 존재하고 Page Editor 헤더를 보여줘야 한
test("텍스트 버튼을 누르면 캔버스에 '새 텍스트' 블록이 보여야 한다", async ({ page }) => { test("텍스트 버튼을 누르면 캔버스에 '새 텍스트' 블록이 보여야 한다", async ({ page }) => {
await page.goto("/editor"); await page.goto("/editor");
await page.getByRole("button", { name: "텍스트" }).first().click(); await page.getByRole("button", { name: "Text" }).first().click();
const canvas = page.getByTestId("editor-canvas"); const canvas = page.getByTestId("editor-canvas");
await expect(canvas.getByText("새 텍스트")).toBeVisible(); await expect(canvas.getByText("새 텍스트")).toBeVisible();
@@ -255,22 +255,22 @@ test("에디터 상태를 JSON으로 내보내고 다시 불러오면 동일한
await sizeSelect.selectOption("lg"); await sizeSelect.selectOption("lg");
// JSON 내보내기/불러오기 모달을 연다. // JSON 내보내기/불러오기 모달을 연다.
await page.getByRole("button", { name: "메뉴 ▼" }).click(); await page.getByRole("button", { name: "Menu" }).click();
await page.getByRole("button", { name: "JSON 내보내기/불러오기" }).click(); await page.getByRole("button", { name: "JSON export / import" }).click();
// 현재 상태를 JSON으로 내보낸다. // 현재 상태를 JSON으로 내보낸다.
await page.getByRole("button", { name: "JSON 내보내기" }).click(); await page.getByRole("button", { name: "Export JSON" }).click();
const exportArea = page.getByRole("textbox", { name: "에디터 상태 JSON" }); const exportArea = page.getByRole("textbox", { name: "Editor state JSON" });
const exportedJson = await exportArea.inputValue(); const exportedJson = await exportArea.inputValue();
// 캔버스를 초기화한다. // 캔버스를 초기화한다.
await page.getByRole("button", { name: "캔버스 초기화" }).click(); await page.getByRole("button", { name: "Clear canvas" }).click();
await expect(canvas.getByTestId("editor-block")).toHaveCount(0); await expect(canvas.getByTestId("editor-block")).toHaveCount(0);
// JSON을 다시 입력하고 불러온다. // JSON을 다시 입력하고 불러온다.
const importArea = page.getByRole("textbox", { name: "JSON에서 불러오기" }); const importArea = page.getByRole("textbox", { name: "Import from JSON" });
await importArea.fill(exportedJson); await importArea.fill(exportedJson);
await page.getByRole("button", { name: "JSON 적용하기" }).click(); await page.getByRole("button", { name: "Apply JSON" }).click();
// 복원된 캔버스에 두 블록이 모두 존재해야 한다. // 복원된 캔버스에 두 블록이 모두 존재해야 한다.
const restoredBlocks = canvas.getByTestId("editor-block"); const restoredBlocks = canvas.getByTestId("editor-block");
@@ -510,9 +510,9 @@ test("에디터 메뉴에서 페이지 파일로 내보내기 (ZIP)를 클릭하
await page.getByRole("button", { name: "텍스트" }).first().click(); await page.getByRole("button", { name: "텍스트" }).first().click();
// 헤더 메뉴를 연다. // 헤더 메뉴를 연다.
await page.getByRole("button", { name: "메뉴 ▼" }).click(); await page.getByRole("button", { name: "Menu" }).click();
const exportButton = page.getByRole("button", { name: "페이지 파일로 내보내기 (ZIP)" }); const exportButton = page.getByRole("button", { name: "Export as page files (ZIP)" });
await expect(exportButton).toBeVisible(); await expect(exportButton).toBeVisible();
const [download] = await Promise.all([ const [download] = await Promise.all([
@@ -573,10 +573,10 @@ test("Hero 템플릿 버튼을 클릭하면 섹션과 기본 텍스트/버튼
await expect(blocks.first()).toBeVisible(); await expect(blocks.first()).toBeVisible();
// Hero 헤드라인 텍스트가 포함된 블록이 보여야 한다. // Hero 헤드라인 텍스트가 포함된 블록이 보여야 한다.
await expect(canvas.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible(); await expect(canvas.getByText("Your hero headline goes here")).toBeVisible();
// CTA 버튼도 렌더되어 있어야 한다. // CTA 버튼도 렌더되어 있어야 한다.
const ctaButton = canvas.getByRole("button", { name: "지금 시작하기" }); const ctaButton = canvas.getByRole("button", { name: "Get started now" });
await expect(ctaButton).toBeVisible(); await expect(ctaButton).toBeVisible();
}); });
@@ -588,9 +588,9 @@ test("Features 템플릿 버튼을 클릭하면 3개의 Feature 항목(제목/
await page.getByRole("button", { name: "기능 템플릿" }).click(); await page.getByRole("button", { name: "기능 템플릿" }).click();
// Feature 제목들이 렌더되어야 한다. // Feature 제목들이 렌더되어야 한다.
await expect(canvas.getByText("Feature 1 제목")).toBeVisible(); await expect(canvas.getByText("Feature 1")).toBeVisible();
await expect(canvas.getByText("Feature 2 제목")).toBeVisible(); await expect(canvas.getByText("Feature 2")).toBeVisible();
await expect(canvas.getByText("Feature 3 제목")).toBeVisible(); await expect(canvas.getByText("Feature 3")).toBeVisible();
}); });
test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된 섹션이 캔버스에 생성되어야 한다", async ({ page }) => { test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된 섹션이 캔버스에 생성되어야 한다", async ({ page }) => {
@@ -600,8 +600,8 @@ test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된
await page.getByRole("button", { name: "CTA 템플릿" }).click(); await page.getByRole("button", { name: "CTA 템플릿" }).click();
await expect(canvas.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible(); await expect(canvas.getByText("Write a compelling CTA message here.")).toBeVisible();
const ctaButton = canvas.getByRole("button", { name: "CTA 버튼" }); const ctaButton = canvas.getByRole("button", { name: "Call to action" });
await expect(ctaButton).toBeVisible(); await expect(ctaButton).toBeVisible();
}); });
@@ -613,10 +613,14 @@ test("FAQ 템플릿 버튼을 클릭하면 질문/답변 텍스트가 세 쌍
await page.getByRole("button", { name: "FAQ 템플릿" }).click(); await page.getByRole("button", { name: "FAQ 템플릿" }).click();
// 기본 FAQ 질문/답변 텍스트들이 렌더되어야 한다. // 기본 FAQ 질문/답변 텍스트들이 렌더되어야 한다.
await expect(canvas.getByText("서비스 이용료는 얼마인가요?")).toBeVisible(); await expect(canvas.getByText("How much does the service cost?")).toBeVisible();
await expect(canvas.getByText("기본 기능은 무료로 제공되며, 프리미엄 기능은 월 구독료가 발생합니다.")).toBeVisible(); await expect(
await expect(canvas.getByText("환불 정책은 어떻게 되나요?")).toBeVisible(); canvas.getByText(
await expect(canvas.getByText("팀원 초대 기능이 있나요?")).toBeVisible(); "The core features are free, and premium features are available with a monthly subscription.",
),
).toBeVisible();
await expect(canvas.getByText("What is your refund policy?")).toBeVisible();
await expect(canvas.getByText("Can I invite teammates?")).toBeVisible();
}); });
test("Pricing 템플릿 버튼을 클릭하면 3개의 요금제 카드가 생성되어야 한다", async ({ page }) => { test("Pricing 템플릿 버튼을 클릭하면 3개의 요금제 카드가 생성되어야 한다", async ({ page }) => {
@@ -627,11 +631,11 @@ test("Pricing 템플릿 버튼을 클릭하면 3개의 요금제 카드가 생
await page.getByRole("button", { name: "상품 템플릿" }).click(); await page.getByRole("button", { name: "상품 템플릿" }).click();
await expect(canvas.getByText("Basic")).toBeVisible(); await expect(canvas.getByText("Basic")).toBeVisible();
await expect(canvas.getByText("₩9,900/월")).toBeVisible(); await expect(canvas.getByText("$9/month")).toBeVisible();
await expect(canvas.getByText("Pro")).toBeVisible(); await expect(canvas.getByText("Pro")).toBeVisible();
await expect(canvas.getByText("₩29,900/월")).toBeVisible(); await expect(canvas.getByText("$29/month")).toBeVisible();
await expect(canvas.getByText("Enterprise")).toBeVisible(); await expect(canvas.getByText("Enterprise")).toBeVisible();
await expect(canvas.getByText("문의")).toBeVisible(); await expect(canvas.getByText("Contact us")).toBeVisible();
}); });
test("Testimonials 템플릿 버튼을 클릭하면 3개의 후기 카드가 생성되어야 한다", async ({ page }) => { test("Testimonials 템플릿 버튼을 클릭하면 3개의 후기 카드가 생성되어야 한다", async ({ page }) => {
@@ -743,8 +747,8 @@ test("헤더의 실행 취소/다시 실행 버튼으로 블록 추가를 Undo/R
await page.getByRole("button", { name: "텍스트" }).first().click(); await page.getByRole("button", { name: "텍스트" }).first().click();
await expect(canvas.getByTestId("editor-block")).toHaveCount(1); await expect(canvas.getByTestId("editor-block")).toHaveCount(1);
const undoButton = page.getByRole("button", { name: "실행 취소" }); const undoButton = page.getByRole("button", { name: "Undo" });
const redoButton = page.getByRole("button", { name: "다시 실행" }); const redoButton = page.getByRole("button", { name: "Redo" });
await undoButton.click(); await undoButton.click();
await expect(canvas.getByTestId("editor-block")).toHaveCount(0); await expect(canvas.getByTestId("editor-block")).toHaveCount(0);
@@ -909,10 +913,10 @@ test("리스트 아이템을 선택하면 패널에서 아이템 위/아래/들
await firstItem.click({ force: true }); await firstItem.click({ force: true });
// 리스트 아이템 행에 위치한 조작 버튼들을 사용할 수 있어야 한다. // 리스트 아이템 행에 위치한 조작 버튼들을 사용할 수 있어야 한다.
const moveUpButton = firstItem.getByRole("button", { name: "위" }); const moveUpButton = firstItem.getByRole("button", { name: "Move item up" });
const moveDownButton = firstItem.getByRole("button", { name: "아래" }); const moveDownButton = firstItem.getByRole("button", { name: "Move item down" });
const indentButton = firstItem.getByRole("button", { name: "들여쓰기" }); const indentButton = firstItem.getByRole("button", { name: "Indent item" });
const outdentButton = firstItem.getByRole("button", { name: "내어쓰기" }); const outdentButton = firstItem.getByRole("button", { name: "Outdent item" });
await expect(moveUpButton).toBeVisible(); await expect(moveUpButton).toBeVisible();
await expect(moveDownButton).toBeVisible(); await expect(moveDownButton).toBeVisible();
tests/e2e/preview.spec.ts
+22 -18
View File
@@ -34,8 +34,8 @@ test("에디터에서 Hero 템플릿을 추가하면 프리뷰에서 동일한 H
// 헤드라인과 CTA 버튼이 에디터에서 생성되었는지 한 번 확인한다. // 헤드라인과 CTA 버튼이 에디터에서 생성되었는지 한 번 확인한다.
const editorCanvas = page.getByTestId("editor-canvas"); const editorCanvas = page.getByTestId("editor-canvas");
await expect(editorCanvas.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible(); await expect(editorCanvas.getByText("Your hero headline goes here")).toBeVisible();
await expect(editorCanvas.getByRole("button", { name: "지금 시작하기" })).toBeVisible(); await expect(editorCanvas.getByRole("button", { name: "Get started now" })).toBeVisible();
// 헤더의 프리뷰 열기 링크를 통해 /preview 로 이동한다 (클라이언트 내 내비게이션 유지). // 헤더의 프리뷰 열기 링크를 통해 /preview 로 이동한다 (클라이언트 내 내비게이션 유지).
await page.getByRole("link", { name: "프리뷰 열기" }).click(); await page.getByRole("link", { name: "프리뷰 열기" }).click();
@@ -44,9 +44,9 @@ test("에디터에서 Hero 템플릿을 추가하면 프리뷰에서 동일한 H
await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
// 프리뷰에서도 Hero 헤드라인과 CTA 버튼이 그대로 보여야 한다. // 프리뷰에서도 Hero 헤드라인과 CTA 버튼이 그대로 보여야 한다.
await expect(page.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible(); await expect(page.getByText("Your hero headline goes here")).toBeVisible();
// 프리뷰에서는 CTA를 실제 링크(<a>)로 렌더링하므로 텍스트 기준으로만 검증한다. // 프리뷰에서는 CTA를 실제 링크(<a>)로 렌더링하므로 텍스트 기준으로만 검증한다.
await expect(page.getByText("지금 시작하기")).toBeVisible(); await expect(page.getByText("Get started now")).toBeVisible();
// 프리뷰 화면에는 에디터용 "텍스트" 버튼이 없어야 한다. // 프리뷰 화면에는 에디터용 "텍스트" 버튼이 없어야 한다.
await expect(page.getByRole("button", { name: "텍스트" })).toHaveCount(0); await expect(page.getByRole("button", { name: "텍스트" })).toHaveCount(0);
@@ -73,17 +73,17 @@ test("에디터에서 Features 템플릿을 추가하면 프리뷰에서 3개의
await page.getByRole("button", { name: "기능 템플릿" }).click(); await page.getByRole("button", { name: "기능 템플릿" }).click();
const editorCanvas = page.getByTestId("editor-canvas"); const editorCanvas = page.getByTestId("editor-canvas");
await expect(editorCanvas.getByText("Feature 1 제목")).toBeVisible(); await expect(editorCanvas.getByText("Feature 1")).toBeVisible();
await expect(editorCanvas.getByText("Feature 2 제목")).toBeVisible(); await expect(editorCanvas.getByText("Feature 2")).toBeVisible();
await expect(editorCanvas.getByText("Feature 3 제목")).toBeVisible(); await expect(editorCanvas.getByText("Feature 3")).toBeVisible();
await page.getByRole("link", { name: "프리뷰 열기" }).click(); await page.getByRole("link", { name: "프리뷰 열기" }).click();
await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
await expect(page.getByText("Feature 1 제목")).toBeVisible(); await expect(page.getByText("Feature 1")).toBeVisible();
await expect(page.getByText("Feature 2 제목")).toBeVisible(); await expect(page.getByText("Feature 2")).toBeVisible();
await expect(page.getByText("Feature 3 제목")).toBeVisible(); await expect(page.getByText("Feature 3")).toBeVisible();
}); });
test("에디터에서 CTA 템플릿을 추가하면 프리뷰에서 CTA 텍스트와 버튼이 보여야 한다", async ({ page }) => { test("에디터에서 CTA 템플릿을 추가하면 프리뷰에서 CTA 텍스트와 버튼이 보여야 한다", async ({ page }) => {
@@ -92,15 +92,15 @@ test("에디터에서 CTA 템플릿을 추가하면 프리뷰에서 CTA 텍스
await page.getByRole("button", { name: "CTA 템플릿" }).click(); await page.getByRole("button", { name: "CTA 템플릿" }).click();
const editorCanvas = page.getByTestId("editor-canvas"); const editorCanvas = page.getByTestId("editor-canvas");
await expect(editorCanvas.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible(); await expect(editorCanvas.getByText("Write a compelling CTA message here.")).toBeVisible();
await expect(editorCanvas.getByRole("button", { name: "CTA 버튼" })).toBeVisible(); await expect(editorCanvas.getByRole("button", { name: "Call to action" })).toBeVisible();
await page.getByRole("link", { name: "프리뷰 열기" }).click(); await page.getByRole("link", { name: "프리뷰 열기" }).click();
await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
await expect(page.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible(); await expect(page.getByText("Write a compelling CTA message here.")).toBeVisible();
await expect(page.getByText("CTA 버튼")).toBeVisible(); await expect(page.getByText("Call to action")).toBeVisible();
}); });
test("모바일 뷰에서도 프리뷰 페이지가 깨지지 않고 주요 템플릿 컨텐츠를 보여줘야 한다", async ({ page }) => { test("모바일 뷰에서도 프리뷰 페이지가 깨지지 않고 주요 템플릿 컨텐츠를 보여줘야 한다", async ({ page }) => {
@@ -122,17 +122,21 @@ test("모바일 뷰에서도 프리뷰 페이지가 깨지지 않고 주요 템
await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
// Hero 헤드라인 // Hero 헤드라인
await expect(page.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible(); await expect(page.getByText("Your hero headline goes here")).toBeVisible();
// Features 제목 일부 // Features 제목 일부
await expect(page.getByText("Feature 1 제목")).toBeVisible(); await expect(page.getByText("Feature 1")).toBeVisible();
// Pricing 플랜 이름/가격 일부 // Pricing 플랜 이름/가격 일부
await expect(page.getByText("Basic")).toBeVisible(); await expect(page.getByText("Basic")).toBeVisible();
await expect(page.getByText("₩9,900/월")).toBeVisible(); await expect(page.getByText("$9/month")).toBeVisible();
// Testimonials 본문 일부 // Testimonials 본문 일부
await expect(page.getByText("이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.")).toBeVisible(); await expect(
page.getByText(
"This builder dramatically reduced the time we spend creating landing pages.",
),
).toBeVisible();
}); });
test("텍스트 블록의 정렬/폰트 크기/색상이 프리뷰에도 반영되어야 한다", async ({ page }) => { test("텍스트 블록의 정렬/폰트 크기/색상이 프리뷰에도 반영되어야 한다", async ({ page }) => {
tests/e2e/projects.spec.ts
+9 -9
View File
@@ -209,7 +209,7 @@ test("프로젝트 목록에서 '폼 제출 내역' 링크를 클릭하면 해
await expect(page.getByText("test-project-a")).toBeVisible(); await expect(page.getByText("test-project-a")).toBeVisible();
// 액션 영역의 "폼 제출 내역" 링크를 클릭하면 제출 내역 페이지로 이동해야 한다. // 액션 영역의 "폼 제출 내역" 링크를 클릭하면 제출 내역 페이지로 이동해야 한다.
await page.getByRole("link", { name: "폼 제출 내역" }).click(); await page.getByRole("link", { name: "Form submissions" }).click();
await expect(page).toHaveURL(/\/projects\/test-project-a\/submissions/); await expect(page).toHaveURL(/\/projects\/test-project-a\/submissions/);
@@ -284,10 +284,10 @@ test("프로젝트 목록 헤더에서 대시보드로 이동할 수 있어야
await expect(page.getByText("테스트 프로젝트 A")).toBeVisible(); await expect(page.getByText("테스트 프로젝트 A")).toBeVisible();
await page.getByRole("link", { name: "대시보드" }).click(); await page.getByRole("link", { name: "Dashboard" }).click();
await expect(page).toHaveURL(/\/dashboard/); await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
}); });
test("전체 제출 내역 페이지에서 공통 GNB와 메뉴가 보여야 한다", async ({ page }) => { test("전체 제출 내역 페이지에서 공통 GNB와 메뉴가 보여야 한다", async ({ page }) => {
@@ -309,20 +309,20 @@ test("전체 제출 내역 페이지에서 공통 GNB와 메뉴가 보여야 한
await page.goto("/projects/submissions"); await page.goto("/projects/submissions");
await expect(page.getByRole("heading", { name: "전체 폼 제출 내역" })).toBeVisible(); await expect(page.getByRole("heading", { name: "All form submissions" })).toBeVisible();
const dashboardLink = page.getByRole("link", { name: "대시보드" }); const dashboardLink = page.getByRole("link", { name: "Dashboard" });
await expect(dashboardLink).toBeVisible(); await expect(dashboardLink).toBeVisible();
const projectsLink = page.getByRole("link", { name: "프로젝트 목록" }); const projectsLink = page.getByRole("link", { name: "Projects" });
await expect(projectsLink).toBeVisible(); await expect(projectsLink).toBeVisible();
const submissionsLink = page.getByRole("link", { name: "전체 제출 내역" }); const submissionsLink = page.getByRole("link", { name: "All submissions" });
await expect(submissionsLink).toBeVisible(); await expect(submissionsLink).toBeVisible();
const menuButton = page.getByRole("button", { name: "메뉴" }); const menuButton = page.getByRole("button", { name: "Menu" });
await expect(menuButton).toBeVisible(); await expect(menuButton).toBeVisible();
await menuButton.click(); await menuButton.click();
await expect(page.getByRole("button", { name: "로그아웃" })).toBeVisible(); await expect(page.getByRole("button", { name: "Log out" })).toBeVisible();
}); });
tests/unit/AllProjectSubmissionsPage.spec.tsx
+11 -11
View File
@@ -73,7 +73,7 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
expect(url).toBe("/api/projects/submissions"); expect(url).toBe("/api/projects/submissions");
expect(options).toBeUndefined(); expect(options).toBeUndefined();
expect(await screen.findByText("전체 폼 제출 내역")).toBeTruthy(); expect(await screen.findByText("All form submissions")).toBeTruthy();
expect(screen.getByText("프로젝트 1")).toBeTruthy(); expect(screen.getByText("프로젝트 1")).toBeTruthy();
expect(screen.getByText("proj-1")).toBeTruthy(); expect(screen.getByText("proj-1")).toBeTruthy();
@@ -126,7 +126,7 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
render(<AllProjectSubmissionsPage />); render(<AllProjectSubmissionsPage />);
const errorText = await screen.findByText( const errorText = await screen.findByText(
"폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.", "An error occurred while loading form submissions. Please try again later.",
); );
expect(errorText).toBeTruthy(); expect(errorText).toBeTruthy();
@@ -144,7 +144,7 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
render(<AllProjectSubmissionsPage />); render(<AllProjectSubmissionsPage />);
const backLink = await screen.findByRole("link", { name: "프로젝트 목록" }); const backLink = await screen.findByRole("link", { name: "Projects" });
expect(backLink).toBeTruthy(); expect(backLink).toBeTruthy();
expect(backLink.closest("a")?.getAttribute("href")).toBe("/projects"); expect(backLink.closest("a")?.getAttribute("href")).toBe("/projects");
}); });
@@ -161,13 +161,13 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
render(<AllProjectSubmissionsPage />); render(<AllProjectSubmissionsPage />);
const dashboardLink = await screen.findByRole("link", { name: "대시보드" }); const dashboardLink = await screen.findByRole("link", { name: "Dashboard" });
expect(dashboardLink.closest("a")?.getAttribute("href")).toBe("/dashboard"); expect(dashboardLink.closest("a")?.getAttribute("href")).toBe("/dashboard");
const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" }); const projectsLink = await screen.findByRole("link", { name: "Projects" });
expect(projectsLink.closest("a")?.getAttribute("href")).toBe("/projects"); expect(projectsLink.closest("a")?.getAttribute("href")).toBe("/projects");
const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" }); const submissionsLink = await screen.findByRole("link", { name: "All submissions" });
expect(submissionsLink.closest("a")?.getAttribute("href")).toBe("/projects/submissions"); expect(submissionsLink.closest("a")?.getAttribute("href")).toBe("/projects/submissions");
}); });
@@ -237,9 +237,9 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
expect(fetchMock).toHaveBeenCalledTimes(1); expect(fetchMock).toHaveBeenCalledTimes(1);
}); });
const dashboardLink = await screen.findByRole("link", { name: "대시보드" }); const dashboardLink = await screen.findByRole("link", { name: "Dashboard" });
const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" }); const projectsLink = await screen.findByRole("link", { name: "Projects" });
const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" }); const submissionsLink = await screen.findByRole("link", { name: "All submissions" });
expect(submissionsLink.getAttribute("href")).toBe("/projects/submissions"); expect(submissionsLink.getAttribute("href")).toBe("/projects/submissions");
expect(submissionsLink.getAttribute("aria-current")).toBe("page"); expect(submissionsLink.getAttribute("aria-current")).toBe("page");
@@ -273,10 +273,10 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
render(<AllProjectSubmissionsPage />); render(<AllProjectSubmissionsPage />);
const menuButton = await screen.findByRole("button", { name: "메뉴" }); const menuButton = await screen.findByRole("button", { name: "Menu" });
menuButton.click(); menuButton.click();
const logoutButton = await screen.findByRole("button", { name: "로그아웃" }); const logoutButton = await screen.findByRole("button", { name: "Log out" });
logoutButton.click(); logoutButton.click();
await waitFor(() => { await waitFor(() => {
tests/unit/BlocksSidebar.spec.tsx
+43 -38
View File
@@ -54,7 +54,8 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
it("Hero 템플릿 버튼 클릭 시 addHeroTemplateSection 이 호출되어야 한다", () => { it("Hero 템플릿 버튼 클릭 시 addHeroTemplateSection 이 호출되어야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
const button = screen.getByRole("button", { name: "Hero 템플릿" });
const button = screen.getByRole("button", { name: "Hero template" });
fireEvent.click(button); fireEvent.click(button);
expect(templateActions.addHeroTemplateSection).toHaveBeenCalledTimes(1); expect(templateActions.addHeroTemplateSection).toHaveBeenCalledTimes(1);
@@ -62,7 +63,8 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
it("Features 템플릿 버튼 클릭 시 addFeaturesTemplateSection 이 호출되어야 한다", () => { it("Features 템플릿 버튼 클릭 시 addFeaturesTemplateSection 이 호출되어야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
const button = screen.getByRole("button", { name: "기능 템플릿" });
const button = screen.getByRole("button", { name: "Features template" });
fireEvent.click(button); fireEvent.click(button);
expect(templateActions.addFeaturesTemplateSection).toHaveBeenCalledTimes(1); expect(templateActions.addFeaturesTemplateSection).toHaveBeenCalledTimes(1);
@@ -70,7 +72,8 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
it("CTA 템플릿 버튼 클릭 시 addCtaTemplateSection 이 호출되어야 한다", () => { it("CTA 템플릿 버튼 클릭 시 addCtaTemplateSection 이 호출되어야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
const button = screen.getByRole("button", { name: "CTA 템플릿" });
const button = screen.getByRole("button", { name: "CTA template" });
fireEvent.click(button); fireEvent.click(button);
expect(templateActions.addCtaTemplateSection).toHaveBeenCalledTimes(1); expect(templateActions.addCtaTemplateSection).toHaveBeenCalledTimes(1);
@@ -78,12 +81,13 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
it("FAQ/Pricing/Testimonials/Blog/Team/Footer 템플릿 버튼도 각각의 액션을 호출해야 한다", () => { it("FAQ/Pricing/Testimonials/Blog/Team/Footer 템플릿 버튼도 각각의 액션을 호출해야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
fireEvent.click(screen.getByRole("button", { name: "FAQ 템플릿" }));
fireEvent.click(screen.getByRole("button", { name: "상품 템플릿" })); fireEvent.click(screen.getByRole("button", { name: "FAQ template" }));
fireEvent.click(screen.getByRole("button", { name: "후기 템플릿" })); fireEvent.click(screen.getByRole("button", { name: "Pricing template" }));
fireEvent.click(screen.getByRole("button", { name: "블로그 템플릿" })); fireEvent.click(screen.getByRole("button", { name: "Testimonials template" }));
fireEvent.click(screen.getByRole("button", { name: "Team 템플릿" })); fireEvent.click(screen.getByRole("button", { name: "Blog template" }));
fireEvent.click(screen.getByRole("button", { name: "Footer 템플릿" })); fireEvent.click(screen.getByRole("button", { name: "Team template" }));
fireEvent.click(screen.getByRole("button", { name: "Footer template" }));
expect(templateActions.addFaqTemplateSection).toHaveBeenCalledTimes(1); expect(templateActions.addFaqTemplateSection).toHaveBeenCalledTimes(1);
expect(templateActions.addPricingTemplateSection).toHaveBeenCalledTimes(1); expect(templateActions.addPricingTemplateSection).toHaveBeenCalledTimes(1);
@@ -96,20 +100,21 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
it("템플릿 섹션에는 각 템플릿의 용도를 설명하는 텍스트가 함께 표시되어야 한다", () => { it("템플릿 섹션에는 각 템플릿의 용도를 설명하는 텍스트가 함께 표시되어야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
expect(screen.getByText("페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)")); expect(screen.getByText("Top-of-page hero section (headline + subtext + button)"));
expect(screen.getByText("3컬럼 기능 소개 섹션")); expect(screen.getByText("Three-column features section"));
expect(screen.getByText("콜투액션(CTA) 섹션")); expect(screen.getByText("Call-to-action (CTA) section"));
expect(screen.getByText("자주 묻는 질문(FAQ) 섹션")); expect(screen.getByText("Frequently asked questions (FAQ) section"));
expect(screen.getByText("요금제/플랜 소개 섹션")); expect(screen.getByText("Pricing plans section"));
expect(screen.getByText("고객 후기(Testimonials) 섹션")); expect(screen.getByText("Customer testimonials section"));
expect(screen.getByText("블로그 포스트 목록 섹션")); expect(screen.getByText("Blog post listing section"));
expect(screen.getByText("팀 소개 섹션")); expect(screen.getByText("Team members section"));
expect(screen.getByText("페이지 푸터 섹션")); expect(screen.getByText("Page footer section"));
}); });
it("비디오 버튼 클릭 시 addVideoBlock 이 호출되어야 한다", () => { it("비디오 버튼 클릭 시 addVideoBlock 이 호출되어야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
const button = screen.getByRole("button", { name: "비디오" });
const button = screen.getByRole("button", { name: "Video" });
fireEvent.click(button); fireEvent.click(button);
expect(otherActions.addVideoBlock).toHaveBeenCalledTimes(1); expect(otherActions.addVideoBlock).toHaveBeenCalledTimes(1);
@@ -118,10 +123,10 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
it("템플릿들은 카테고리별로 그룹 헤더를 가져야 한다", () => { it("템플릿들은 카테고리별로 그룹 헤더를 가져야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
expect(screen.getByText("히어로 · CTA")).toBeDefined(); expect(screen.getByText("Hero · CTA")).toBeDefined();
expect(screen.getByText("콘텐츠 섹션")).toBeDefined(); expect(screen.getByText("Content sections")).toBeDefined();
expect(screen.getByText("신뢰/소개")).toBeDefined(); expect(screen.getByText("Trust & about")).toBeDefined();
expect(screen.getByText("푸터/기타")).toBeDefined(); expect(screen.getByText("Footer & misc")).toBeDefined();
}); });
it("각 템플릿 카드에는 미니 썸네일(레이아웃 힌트)가 렌더링되어야 한다", () => { it("각 템플릿 카드에는 미니 썸네일(레이아웃 힌트)가 렌더링되어야 한다", () => {
@@ -165,57 +170,57 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
// 초기에는 텍스트 버튼이 보여야 한다. // 초기에는 텍스트 버튼이 보여야 한다.
expect(screen.getByRole("button", { name: "텍스트" })).toBeDefined(); expect(screen.getByRole("button", { name: "Text" })).toBeDefined();
const blockToggle = screen.getByRole("button", { name: "블록" }); const blockToggle = screen.getByRole("button", { name: "Blocks" });
fireEvent.click(blockToggle); fireEvent.click(blockToggle);
// 접힌 상태에서는 텍스트 버튼이 보이지 않아야 한다. // 접힌 상태에서는 텍스트 버튼이 보이지 않아야 한다.
expect(screen.queryByRole("button", { name: "텍스트" })).toBeNull(); expect(screen.queryByRole("button", { name: "Text" })).toBeNull();
// 다시 클릭하면 펼쳐져야 한다. // 다시 클릭하면 펼쳐져야 한다.
fireEvent.click(blockToggle); fireEvent.click(blockToggle);
expect(screen.getByRole("button", { name: "텍스트" })).toBeDefined(); expect(screen.getByRole("button", { name: "Text" })).toBeDefined();
}); });
it("폼 요소 섹션 타이틀을 클릭하면 폼 관련 버튼들을 접고 펼 수 있어야 한다", () => { it("폼 요소 섹션 타이틀을 클릭하면 폼 관련 버튼들을 접고 펼 수 있어야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
// 초기에는 폼 입력 버튼이 보여야 한다. // 초기에는 폼 입력 버튼이 보여야 한다.
expect(screen.getByRole("button", { name: "입력(Input)" })).toBeDefined(); expect(screen.getByRole("button", { name: "Input field" })).toBeDefined();
const formToggle = screen.getByRole("button", { name: "폼 요소" }); const formToggle = screen.getByRole("button", { name: "Form elements" });
fireEvent.click(formToggle); fireEvent.click(formToggle);
// 접힌 상태에서는 폼 입력 버튼이 보이지 않아야 한다. // 접힌 상태에서는 폼 입력 버튼이 보이지 않아야 한다.
expect(screen.queryByRole("button", { name: "입력(Input)" })).toBeNull(); expect(screen.queryByRole("button", { name: "Input field" })).toBeNull();
// 다시 클릭하면 펼쳐져야 한다. // 다시 클릭하면 펼쳐져야 한다.
fireEvent.click(formToggle); fireEvent.click(formToggle);
expect(screen.getByRole("button", { name: "입력(Input)" })).toBeDefined(); expect(screen.getByRole("button", { name: "Input field" })).toBeDefined();
}); });
it("템플릿 섹션 타이틀을 클릭하면 템플릿 카드들을 접고 펼 수 있어야 한다", () => { it("템플릿 섹션 타이틀을 클릭하면 템플릿 카드들을 접고 펼 수 있어야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
// 초기에는 Hero 템플릿 버튼이 보여야 한다. // 초기에는 Hero 템플릿 버튼이 보여야 한다.
expect(screen.getByRole("button", { name: "Hero 템플릿" })).toBeDefined(); expect(screen.getByRole("button", { name: "Hero template" })).toBeDefined();
const templateToggle = screen.getByRole("button", { name: "템플릿" }); const templateToggle = screen.getByRole("button", { name: "Templates" });
fireEvent.click(templateToggle); fireEvent.click(templateToggle);
// 접힌 상태에서는 Hero 템플릿 버튼이 보이지 않아야 한다. // 접힌 상태에서는 Hero 템플릿 버튼이 보이지 않아야 한다.
expect(screen.queryByRole("button", { name: "Hero 템플릿" })).toBeNull(); expect(screen.queryByRole("button", { name: "Hero template" })).toBeNull();
// 다시 클릭하면 펼쳐져야 한다. // 다시 클릭하면 펼쳐져야 한다.
fireEvent.click(templateToggle); fireEvent.click(templateToggle);
expect(screen.getByRole("button", { name: "Hero 템플릿" })).toBeDefined(); expect(screen.getByRole("button", { name: "Hero template" })).toBeDefined();
}); });
it("블록 추가 버튼들은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => { it("블록 추가 버튼들은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
const textButton = screen.getByRole("button", { name: "텍스트" }); const textButton = screen.getByRole("button", { name: "Text" });
const className = textButton.getAttribute("class") ?? ""; const className = textButton.getAttribute("class") ?? "";
// 라이트 모드: 밝은 배경 + 어두운 텍스트 // 라이트 모드: 밝은 배경 + 어두운 텍스트
@@ -231,7 +236,7 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
const heroDescription = screen.getByText( const heroDescription = screen.getByText(
"페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)", "Top-of-page hero section (headline + subtext + button)",
); );
const card = heroDescription.closest("div"); const card = heroDescription.closest("div");
expect(card).not.toBeNull(); expect(card).not.toBeNull();
@@ -246,7 +251,7 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
it("히어로 템플릿 추가 버튼은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => { it("히어로 템플릿 추가 버튼은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
render(<BlocksSidebar />); render(<BlocksSidebar />);
const heroButton = screen.getByRole("button", { name: "Hero 템플릿" }); const heroButton = screen.getByRole("button", { name: "Hero template" });
const className = heroButton.getAttribute("class") ?? ""; const className = heroButton.getAttribute("class") ?? "";
// 라이트 모드: 밝은 배경 + 어두운 텍스트 // 라이트 모드: 밝은 배경 + 어두운 텍스트
tests/unit/ButtonPropertiesPanel.spec.tsx
+27 -27
View File
@@ -31,7 +31,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("버튼 텍스트 색상 HEX"); const hexInput = screen.getByLabelText("Button text color HEX");
fireEvent.change(hexInput, { target: { value: "#112233" } }); fireEvent.change(hexInput, { target: { value: "#112233" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -51,7 +51,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("버튼 채움 색상 HEX"); const hexInput = screen.getByLabelText("Button fill color HEX");
fireEvent.change(hexInput, { target: { value: "#445566" } }); fireEvent.change(hexInput, { target: { value: "#445566" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -71,7 +71,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("버튼 외곽선 색상 HEX"); const hexInput = screen.getByLabelText("Button border color HEX");
fireEvent.change(hexInput, { target: { value: "#778899" } }); fireEvent.change(hexInput, { target: { value: "#778899" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -80,7 +80,7 @@ describe("ButtonPropertiesPanel", () => {
); );
}); });
it("텍스트 색상 팔레트에서 \"없음\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => { it("텍스트 색상 팔레트에서 \"None\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
const updateBlock = vi.fn(); const updateBlock = vi.fn();
render( render(
@@ -92,11 +92,11 @@ describe("ButtonPropertiesPanel", () => {
); );
// 첫 번째 ColorPickerField(텍스트 색상)의 팔레트 버튼을 연다. // 첫 번째 ColorPickerField(텍스트 색상)의 팔레트 버튼을 연다.
const paletteButtons = screen.getAllByText("색상 팔레트"); const paletteButtons = screen.getAllByText("Color palette");
fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement); fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
// 팔레트에서 "없음" 항목을 버튼 role 기준으로 선택한다. // 팔레트에서 "None" 항목을 버튼 role 기준으로 선택한다.
const noneButtons = screen.getAllByRole("button", { name: "없음" }); const noneButtons = screen.getAllByRole("button", { name: "None" });
fireEvent.click(noneButtons[0]); fireEvent.click(noneButtons[0]);
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -116,7 +116,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("버튼 텍스트 색상 HEX") as HTMLInputElement; const hexInput = screen.getByLabelText("Button text color HEX") as HTMLInputElement;
expect(hexInput.value).toBe(""); expect(hexInput.value).toBe("");
}); });
@@ -131,7 +131,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("버튼 너비 모드"); const select = screen.getByLabelText("Button width mode");
fireEvent.change(select, { target: { value: "fixed" } }); fireEvent.change(select, { target: { value: "fixed" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -155,7 +155,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const urlInput = screen.getByLabelText("버튼 이미지 URL"); const urlInput = screen.getByLabelText("Button image URL");
fireEvent.change(urlInput, { target: { value: "https://example.com/new.png" } }); fireEvent.change(urlInput, { target: { value: "https://example.com/new.png" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -183,7 +183,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("버튼 이미지 위치"); const select = screen.getByLabelText("Button image placement");
fireEvent.change(select, { target: { value: "right" } }); fireEvent.change(select, { target: { value: "right" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -207,7 +207,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("버튼 이미지 소스"); const select = screen.getByLabelText("Button image source");
// 업로드 → URL 로 전환 // 업로드 → URL 로 전환
fireEvent.change(select, { target: { value: "url" } }); fireEvent.change(select, { target: { value: "url" } });
@@ -231,7 +231,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const textarea = screen.getByLabelText("버튼 텍스트"); const textarea = screen.getByLabelText("Button text");
fireEvent.change(textarea, { target: { value: "새 버튼" } }); fireEvent.change(textarea, { target: { value: "새 버튼" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -251,7 +251,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const textarea = screen.getByLabelText("버튼 텍스트") as HTMLTextAreaElement; const textarea = screen.getByLabelText("Button text") as HTMLTextAreaElement;
const className = textarea.getAttribute("class") ?? ""; const className = textarea.getAttribute("class") ?? "";
// 라이트 모드: 흰 배경 + 어두운 텍스트 // 라이트 모드: 흰 배경 + 어두운 텍스트
@@ -273,7 +273,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("가로 패딩 (px) 슬라이더"); const slider = screen.getByLabelText("Horizontal padding (px) 슬라이더");
fireEvent.change(slider, { target: { value: "24" } }); fireEvent.change(slider, { target: { value: "24" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -293,7 +293,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("세로 패딩 (px) 슬라이더"); const slider = screen.getByLabelText("Vertical padding (px) 슬라이더");
fireEvent.change(slider, { target: { value: "18" } }); fireEvent.change(slider, { target: { value: "18" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -313,7 +313,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const input = screen.getByLabelText("버튼 링크"); const input = screen.getByLabelText("Button link");
fireEvent.change(input, { target: { value: "/signup" } }); fireEvent.change(input, { target: { value: "/signup" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -333,7 +333,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("버튼 정렬"); const select = screen.getByLabelText("Button alignment");
fireEvent.change(select, { target: { value: "center" } }); fireEvent.change(select, { target: { value: "center" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -353,7 +353,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("버튼 스타일"); const select = screen.getByLabelText("Button style");
fireEvent.change(select, { target: { value: "outline" } }); fireEvent.change(select, { target: { value: "outline" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -373,7 +373,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("모서리 둥글기 슬라이더"); const slider = screen.getByLabelText("Border radius 슬라이더");
fireEvent.change(slider, { target: { value: "4" } }); fireEvent.change(slider, { target: { value: "4" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -393,7 +393,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("버튼 고정 너비 슬라이더"); const slider = screen.getByLabelText("Button fixed width 슬라이더");
fireEvent.change(slider, { target: { value: "300" } }); fireEvent.change(slider, { target: { value: "300" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -413,7 +413,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("버튼 크기 슬라이더"); const slider = screen.getByLabelText("Button font size 슬라이더");
fireEvent.change(slider, { target: { value: "20" } }); fireEvent.change(slider, { target: { value: "20" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -433,7 +433,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("줄 간격 슬라이더"); const slider = screen.getByLabelText("Line height 슬라이더");
fireEvent.change(slider, { target: { value: "1.8" } }); fireEvent.change(slider, { target: { value: "1.8" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -453,7 +453,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("글자 간격 슬라이더"); const slider = screen.getByLabelText("Letter spacing 슬라이더");
fireEvent.change(slider, { target: { value: "16" } }); fireEvent.change(slider, { target: { value: "16" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -473,7 +473,7 @@ describe("ButtonPropertiesPanel", () => {
/>, />,
); );
const labelTextarea = screen.getByLabelText("버튼 텍스트") as HTMLTextAreaElement; const labelTextarea = screen.getByLabelText("Button text") as HTMLTextAreaElement;
const labelClass = labelTextarea.getAttribute("class") ?? ""; const labelClass = labelTextarea.getAttribute("class") ?? "";
expect(labelClass).toContain("bg-white"); expect(labelClass).toContain("bg-white");
expect(labelClass).toContain("text-slate-900"); expect(labelClass).toContain("text-slate-900");
@@ -482,7 +482,7 @@ describe("ButtonPropertiesPanel", () => {
expect(labelClass).toContain("dark:text-slate-100"); expect(labelClass).toContain("dark:text-slate-100");
expect(labelClass).toContain("dark:border-slate-700"); expect(labelClass).toContain("dark:border-slate-700");
const imageSourceSelect = screen.getByLabelText("버튼 이미지 소스") as HTMLSelectElement; const imageSourceSelect = screen.getByLabelText("Button image source") as HTMLSelectElement;
const imageSourceClass = imageSourceSelect.getAttribute("class") ?? ""; const imageSourceClass = imageSourceSelect.getAttribute("class") ?? "";
expect(imageSourceClass).toContain("bg-white"); expect(imageSourceClass).toContain("bg-white");
expect(imageSourceClass).toContain("text-slate-900"); expect(imageSourceClass).toContain("text-slate-900");
@@ -491,7 +491,7 @@ describe("ButtonPropertiesPanel", () => {
expect(imageSourceClass).toContain("dark:text-slate-100"); expect(imageSourceClass).toContain("dark:text-slate-100");
expect(imageSourceClass).toContain("dark:border-slate-700"); expect(imageSourceClass).toContain("dark:border-slate-700");
const alignSelect = screen.getByLabelText("버튼 정렬") as HTMLSelectElement; const alignSelect = screen.getByLabelText("Button alignment") as HTMLSelectElement;
const alignClass = alignSelect.getAttribute("class") ?? ""; const alignClass = alignSelect.getAttribute("class") ?? "";
expect(alignClass).toContain("bg-white"); expect(alignClass).toContain("bg-white");
expect(alignClass).toContain("text-slate-900"); expect(alignClass).toContain("text-slate-900");
tests/unit/ColorPickerField.spec.tsx
+4 -5
View File
@@ -38,7 +38,7 @@ describe("ColorPickerField - 테마", () => {
/>, />,
); );
const [label] = screen.getAllByText("색상 팔레트"); const [label] = screen.getAllByText("Color palette");
const button = label.closest("button") as HTMLButtonElement | null; const button = label.closest("button") as HTMLButtonElement | null;
expect(button).not.toBeNull(); expect(button).not.toBeNull();
@@ -65,14 +65,13 @@ describe("ColorPickerField - 테마", () => {
); );
// 드롭다운을 연다 // 드롭다운을 연다
const [label] = screen.getAllByText("색상 팔레트"); const [label] = screen.getAllByText("Color palette");
const toggleButton = label.closest("button") as HTMLButtonElement | null; const toggleButton = label.closest("button") as HTMLButtonElement | null;
expect(toggleButton).not.toBeNull(); expect(toggleButton).not.toBeNull();
fireEvent.click(toggleButton!); fireEvent.click(toggleButton!);
// 팔레트 첫 항목 버튼을 찾는다 (TEXT_COLOR_PALETTE[0] 라벨과 동기화) // 팔레트 첫 항목 버튼(기본값: None)을 role/name 기준으로 찾는다
const firstItem = TEXT_COLOR_PALETTE[0]; const itemButton = screen.getByRole("button", { name: "None" }) as HTMLButtonElement;
const itemButton = screen.getByRole("button", { name: firstItem.label }) as HTMLButtonElement;
const className = itemButton.getAttribute("class") ?? ""; const className = itemButton.getAttribute("class") ?? "";
// 라이트 모드: 흰 배경 + 어두운 텍스트 // 라이트 모드: 흰 배경 + 어두운 텍스트
tests/unit/DashboardPage.spec.tsx
+51 -4
View File
@@ -42,9 +42,9 @@ describe("DashboardPage - GNB와 테마", () => {
render(<DashboardPage />); render(<DashboardPage />);
const dashboardLink = await screen.findByRole("link", { name: "대시보드" }); const dashboardLink = await screen.findByRole("link", { name: "Dashboard" });
const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" }); const projectsLink = await screen.findByRole("link", { name: "Projects" });
const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" }); const submissionsLink = await screen.findByRole("link", { name: "All submissions" });
expect(dashboardLink.getAttribute("href")).toBe("/dashboard"); expect(dashboardLink.getAttribute("href")).toBe("/dashboard");
expect(dashboardLink.getAttribute("aria-current")).toBe("page"); expect(dashboardLink.getAttribute("aria-current")).toBe("page");
@@ -79,7 +79,7 @@ describe("DashboardPage - GNB와 테마", () => {
const html = document.documentElement; const html = document.documentElement;
html.classList.remove("dark"); html.classList.remove("dark");
const themeToggleButton = await screen.findByRole("button", { name: "테마 전환" }); const themeToggleButton = await screen.findByRole("button", { name: "Toggle theme" });
expect(html.classList.contains("dark")).toBe(false); expect(html.classList.contains("dark")).toBe(false);
@@ -91,4 +91,51 @@ describe("DashboardPage - GNB와 테마", () => {
expect(html.classList.contains("dark")).toBe(false); expect(html.classList.contains("dark")).toBe(false);
}); });
it("대시보드 요약 카드와 프로젝트 카드가 라이트/다크 테마에서 읽기 쉬운 텍스트 색상 클래스를 사용해야 한다", async () => {
const overview = {
summaryStats: {
totalProjects: 1,
totalSubmissions: 10,
todaySubmissions: 2,
last7DaysSubmissions: 5,
},
projectStats: [
{
projectId: "p1",
title: "Test project 1",
slug: "test-project-1",
status: "DRAFT",
totalSubmissions: 3,
lastSubmissionAt: "2025-01-01T00:00:00.000Z",
},
],
dailySubmissions: [],
};
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify(overview), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
vi.stubGlobal("fetch", fetchMock as any);
const { container } = render(<DashboardPage />);
// 요약 카드가 렌더링될 때까지 기다린다.
await screen.findByTestId("dashboard-summary-total-projects");
const summaryCard = container.querySelector(
'[data-testid="dashboard-summary-total-projects"]',
) as HTMLElement | null;
expect(summaryCard).not.toBeNull();
const summaryLabel = summaryCard!.querySelector("span") as HTMLElement | null;
expect(summaryLabel).not.toBeNull();
const summaryLabelClass = summaryLabel!.className;
expect(summaryLabelClass).toContain("text-slate-500");
expect(summaryLabelClass).toContain("dark:text-slate-400");
});
}); });
tests/unit/DividerPropertiesPanel.spec.tsx
+9 -9
View File
@@ -32,7 +32,7 @@ describe("DividerPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("구분선 정렬"); const select = screen.getByLabelText("Divider alignment");
fireEvent.change(select, { target: { value: "center" } }); fireEvent.change(select, { target: { value: "center" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -52,7 +52,7 @@ describe("DividerPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("구분선 두께"); const select = screen.getByLabelText("Divider thickness");
fireEvent.change(select, { target: { value: "medium" } }); fireEvent.change(select, { target: { value: "medium" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -72,7 +72,7 @@ describe("DividerPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("구분선 길이 모드"); const select = screen.getByLabelText("Divider length mode");
fireEvent.change(select, { target: { value: "fixed" } }); fireEvent.change(select, { target: { value: "fixed" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -92,7 +92,7 @@ describe("DividerPropertiesPanel", () => {
/>, />,
); );
const widthInput = screen.getByLabelText("고정 길이 (px) 커스텀 (px)"); const widthInput = screen.getByLabelText("Fixed length (px) 커스텀 (px)");
fireEvent.change(widthInput, { target: { value: "480" } }); fireEvent.change(widthInput, { target: { value: "480" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -112,7 +112,7 @@ describe("DividerPropertiesPanel", () => {
/>, />,
); );
const hexInputs = screen.getAllByLabelText("구분선 색상 HEX"); const hexInputs = screen.getAllByLabelText("Divider color HEX");
const hexInput = hexInputs[0] as HTMLInputElement; const hexInput = hexInputs[0] as HTMLInputElement;
fireEvent.change(hexInput, { target: { value: "#123456" } }); fireEvent.change(hexInput, { target: { value: "#123456" } });
@@ -133,7 +133,7 @@ describe("DividerPropertiesPanel", () => {
/>, />,
); );
const marginInputs = screen.getAllByLabelText("위/아래 여백 커스텀 (px)"); const marginInputs = screen.getAllByLabelText("Vertical margin 커스텀 (px)");
const marginInput = marginInputs[0] as HTMLInputElement; const marginInput = marginInputs[0] as HTMLInputElement;
fireEvent.change(marginInput, { target: { value: "24" } }); fireEvent.change(marginInput, { target: { value: "24" } });
@@ -155,7 +155,7 @@ describe("DividerPropertiesPanel", () => {
/>, />,
); );
const alignSelect = screen.getByLabelText("구분선 정렬") as HTMLSelectElement; const alignSelect = screen.getByLabelText("Divider alignment") as HTMLSelectElement;
const alignClass = alignSelect.getAttribute("class") ?? ""; const alignClass = alignSelect.getAttribute("class") ?? "";
expect(alignClass).toContain("bg-white"); expect(alignClass).toContain("bg-white");
expect(alignClass).toContain("text-slate-900"); expect(alignClass).toContain("text-slate-900");
@@ -164,7 +164,7 @@ describe("DividerPropertiesPanel", () => {
expect(alignClass).toContain("dark:text-slate-100"); expect(alignClass).toContain("dark:text-slate-100");
expect(alignClass).toContain("dark:border-slate-700"); expect(alignClass).toContain("dark:border-slate-700");
const thicknessSelect = screen.getByLabelText("구분선 두께") as HTMLSelectElement; const thicknessSelect = screen.getByLabelText("Divider thickness") as HTMLSelectElement;
const thicknessClass = thicknessSelect.getAttribute("class") ?? ""; const thicknessClass = thicknessSelect.getAttribute("class") ?? "";
expect(thicknessClass).toContain("bg-white"); expect(thicknessClass).toContain("bg-white");
expect(thicknessClass).toContain("text-slate-900"); expect(thicknessClass).toContain("text-slate-900");
@@ -173,7 +173,7 @@ describe("DividerPropertiesPanel", () => {
expect(thicknessClass).toContain("dark:text-slate-100"); expect(thicknessClass).toContain("dark:text-slate-100");
expect(thicknessClass).toContain("dark:border-slate-700"); expect(thicknessClass).toContain("dark:border-slate-700");
const widthModeSelect = screen.getByLabelText("구분선 길이 모드") as HTMLSelectElement; const widthModeSelect = screen.getByLabelText("Divider length mode") as HTMLSelectElement;
const widthModeClass = widthModeSelect.getAttribute("class") ?? ""; const widthModeClass = widthModeSelect.getAttribute("class") ?? "";
expect(widthModeClass).toContain("bg-white"); expect(widthModeClass).toContain("bg-white");
expect(widthModeClass).toContain("text-slate-900"); expect(widthModeClass).toContain("text-slate-900");
tests/unit/EditorCanvasBackground.spec.tsx
+58 -4
View File
@@ -2,6 +2,8 @@ import { describe, it, expect, afterEach } from "vitest";
import { render, screen, cleanup } from "@testing-library/react"; import { render, screen, cleanup } from "@testing-library/react";
import type { Block, ProjectConfig } from "@/features/editor/state/editorStore"; import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
import { EditorCanvas, EditorCanvasDragPreview } from "@/app/editor/EditorCanvas"; import { EditorCanvas, EditorCanvasDragPreview } from "@/app/editor/EditorCanvas";
import { LocaleProvider } from "@/features/i18n/LocaleProvider";
import { DEFAULT_LOCALE } from "@/features/i18n/locale";
// 에디터 캔버스/페이지 배경색 적용 규칙에 대한 최소 TDD // 에디터 캔버스/페이지 배경색 적용 규칙에 대한 최소 TDD
// - canvasBgColorHex: 실제 캔버스 영역(editor-canvas-inner)의 배경색 // - canvasBgColorHex: 실제 캔버스 영역(editor-canvas-inner)의 배경색
@@ -37,15 +39,38 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
}; };
it("canvasBgColorHex 는 editor-canvas-inner 배경색에 적용되어야 한다", () => { it("canvasBgColorHex 는 editor-canvas-inner 배경색에 적용되어야 한다", () => {
render(<EditorCanvas {...baseProps} />); render(
<LocaleProvider initialLocale={DEFAULT_LOCALE}>
<EditorCanvas {...baseProps} />
</LocaleProvider>,
);
const inner = screen.getByTestId("editor-canvas-inner") as HTMLElement; const inner = screen.getByTestId("editor-canvas-inner") as HTMLElement;
expect(inner.style.backgroundColor).toBe("rgb(17, 17, 17)"); expect(inner.style.backgroundColor).toBe("rgb(17, 17, 17)");
}); });
it("blocks 가 없을 때 en 로케일에서는 영어 안내 문구를 표시해야 한다", () => {
render(
<LocaleProvider initialLocale={DEFAULT_LOCALE}>
<EditorCanvas {...baseProps} />
</LocaleProvider>,
);
const hint = screen.getByText(
'Click the "Text" button on the left to add your first block.',
);
expect(hint.textContent).toBe(
'Click the "Text" button on the left to add your first block.',
);
});
it("bodyBgColorHex 는 editor-canvas 바깥 래퍼(editor-canvas)의 배경색에 적용되어야 한다", () => { it("bodyBgColorHex 는 editor-canvas 바깥 래퍼(editor-canvas)의 배경색에 적용되어야 한다", () => {
const { container } = render(<EditorCanvas {...baseProps} />); const { container } = render(
<LocaleProvider initialLocale={DEFAULT_LOCALE}>
<EditorCanvas {...baseProps} />
</LocaleProvider>,
);
const outer = container.querySelector('[data-testid="editor-canvas"]') as HTMLElement | null; const outer = container.querySelector('[data-testid="editor-canvas"]') as HTMLElement | null;
@@ -56,7 +81,11 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
it("canvasPreset / canvasWidthPx 에 따라 editor-canvas-inner 의 maxWidth 가 설정되어야 한다", () => { it("canvasPreset / canvasWidthPx 에 따라 editor-canvas-inner 의 maxWidth 가 설정되어야 한다", () => {
const renderWithConfig = (partial: Partial<ProjectConfig>) => { const renderWithConfig = (partial: Partial<ProjectConfig>) => {
const projectConfig = { ...baseProjectConfig, ...partial } as ProjectConfig; const projectConfig = { ...baseProjectConfig, ...partial } as ProjectConfig;
const { getByTestId, unmount } = render(<EditorCanvas {...baseProps} projectConfig={projectConfig} />); const { getByTestId, unmount } = render(
<LocaleProvider initialLocale={DEFAULT_LOCALE}>
<EditorCanvas {...baseProps} projectConfig={projectConfig} />
</LocaleProvider>,
);
const inner = getByTestId("editor-canvas-inner") as HTMLElement; const inner = getByTestId("editor-canvas-inner") as HTMLElement;
const maxWidth = inner.style.maxWidth; const maxWidth = inner.style.maxWidth;
unmount(); unmount();
@@ -85,7 +114,11 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
}, },
} as any; } as any;
const { container } = render(<EditorCanvasDragPreview block={block} />); const { container } = render(
<LocaleProvider initialLocale={DEFAULT_LOCALE}>
<EditorCanvasDragPreview block={block} />
</LocaleProvider>,
);
const overlay = container.querySelector( const overlay = container.querySelector(
"div.pointer-events-none.rounded.border", "div.pointer-events-none.rounded.border",
@@ -99,4 +132,25 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
expect(className).toContain("dark:bg-slate-900"); expect(className).toContain("dark:bg-slate-900");
expect(className).toContain("dark:text-slate-100"); expect(className).toContain("dark:text-slate-100");
}); });
it("en 로케일에서는 EditorCanvasDragPreview 의 텍스트 블록 fallback 라벨이 영어로 표시되어야 한다", () => {
const block: Block = {
id: "text_fallback_1",
type: "text",
props: {
text: "",
align: "left",
size: "base",
},
} as any;
render(
<LocaleProvider initialLocale={DEFAULT_LOCALE}>
<EditorCanvasDragPreview block={block} />
</LocaleProvider>,
);
const fallbackLabel = screen.getByText("Text block");
expect(fallbackLabel.textContent).toBe("Text block");
});
}); });
tests/unit/EditorExportPreview.spec.tsx
+3 -3
View File
@@ -102,20 +102,20 @@ describe("EditorPage - 상단 메뉴 (Export 미리보기 제거)", () => {
it("메뉴를 열었을 때 'Export 미리보기' 항목은 보이지 않고, '프로젝트 목록' 항목이 노출되어야 한다", () => { it("메뉴를 열었을 때 'Export 미리보기' 항목은 보이지 않고, '프로젝트 목록' 항목이 노출되어야 한다", () => {
render(<EditorPage />); render(<EditorPage />);
const menuButton = screen.getByText("메뉴"); const menuButton = screen.getByText("Menu");
fireEvent.click(menuButton); fireEvent.click(menuButton);
const removedItem = screen.queryByText("Export 미리보기"); const removedItem = screen.queryByText("Export 미리보기");
expect(removedItem).toBeNull(); expect(removedItem).toBeNull();
const projectListItem = screen.getByText("프로젝트 목록"); const projectListItem = screen.getByText("Projects");
expect(projectListItem).toBeTruthy(); expect(projectListItem).toBeTruthy();
}); });
it("헤더의 '프리뷰 열기' 링크는 현재 프로젝트 slug 를 쿼리로 포함한 /preview?slug=... 형식이어야 한다", () => { it("헤더의 '프리뷰 열기' 링크는 현재 프로젝트 slug 를 쿼리로 포함한 /preview?slug=... 형식이어야 한다", () => {
render(<EditorPage />); render(<EditorPage />);
const previewLink = screen.getByRole("link", { name: "프리뷰 열기" }); const previewLink = screen.getByRole("link", { name: "Open preview" });
expect(previewLink).toBeTruthy(); expect(previewLink).toBeTruthy();
expect(previewLink.getAttribute("href")).toBe("/preview?slug=export-preview-test"); expect(previewLink.getAttribute("href")).toBe("/preview?slug=export-preview-test");
}); });
tests/unit/EditorJsonExportImport.spec.tsx
+8 -8
View File
@@ -103,10 +103,10 @@ vi.mock("next/navigation", () => {
}); });
function openJsonModal() { function openJsonModal() {
const menuButton = screen.getByText("메뉴"); const menuButton = screen.getByText("Menu");
fireEvent.click(menuButton); fireEvent.click(menuButton);
const jsonMenuItem = screen.getByText("JSON 내보내기/불러오기"); const jsonMenuItem = screen.getByText("JSON export / import");
fireEvent.click(jsonMenuItem); fireEvent.click(jsonMenuItem);
const modalTitle = screen.getByText("JSON Export / Import"); const modalTitle = screen.getByText("JSON Export / Import");
@@ -120,13 +120,13 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
const jsonModal = openJsonModal(); const jsonModal = openJsonModal();
const exportLabel = within(jsonModal).getByText("에디터 상태 JSON").closest("label") as HTMLElement; const exportLabel = within(jsonModal).getByText("Editor state JSON").closest("label") as HTMLElement;
const exportTextarea = within(exportLabel).getByRole("textbox") as HTMLTextAreaElement; const exportTextarea = within(exportLabel).getByRole("textbox") as HTMLTextAreaElement;
// 초기에는 비어 있어야 한다. // 초기에는 비어 있어야 한다.
expect(exportTextarea.value).toBe(""); expect(exportTextarea.value).toBe("");
const exportButton = within(jsonModal).getByText("JSON 내보내기"); const exportButton = within(jsonModal).getByText("Export JSON");
fireEvent.click(exportButton); fireEvent.click(exportButton);
const value = exportTextarea.value; const value = exportTextarea.value;
@@ -143,7 +143,7 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
const jsonModal = openJsonModal(); const jsonModal = openJsonModal();
const importLabel = within(jsonModal).getByText("JSON에서 불러오기").closest("label") as HTMLElement; const importLabel = within(jsonModal).getByText("Import from JSON").closest("label") as HTMLElement;
const importTextarea = within(importLabel).getByRole("textbox") as HTMLTextAreaElement; const importTextarea = within(importLabel).getByRole("textbox") as HTMLTextAreaElement;
const importedBlocks: Block[] = [ const importedBlocks: Block[] = [
@@ -175,7 +175,7 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
mockState.replaceBlocks.mockReset(); mockState.replaceBlocks.mockReset();
mockState.updateProjectConfig.mockReset(); mockState.updateProjectConfig.mockReset();
const applyButton = within(importLabel).getByText("JSON 적용하기"); const applyButton = within(importLabel).getByText("Apply JSON");
fireEvent.click(applyButton); fireEvent.click(applyButton);
expect(mockState.replaceBlocks).toHaveBeenCalledTimes(1); expect(mockState.replaceBlocks).toHaveBeenCalledTimes(1);
@@ -190,7 +190,7 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
const jsonModal = openJsonModal(); const jsonModal = openJsonModal();
const importLabel = within(jsonModal).getByText("JSON에서 불러오기").closest("label") as HTMLElement; const importLabel = within(jsonModal).getByText("Import from JSON").closest("label") as HTMLElement;
const importTextarea = within(importLabel).getByRole("textbox") as HTMLTextAreaElement; const importTextarea = within(importLabel).getByRole("textbox") as HTMLTextAreaElement;
fireEvent.change(importTextarea, { target: { value: "{ this-is: not-valid-json" } }); fireEvent.change(importTextarea, { target: { value: "{ this-is: not-valid-json" } });
@@ -198,7 +198,7 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
mockState.replaceBlocks.mockReset(); mockState.replaceBlocks.mockReset();
mockState.updateProjectConfig.mockReset(); mockState.updateProjectConfig.mockReset();
const applyButton = within(importLabel).getByText("JSON 적용하기"); const applyButton = within(importLabel).getByText("Apply JSON");
fireEvent.click(applyButton); fireEvent.click(applyButton);
expect(mockState.replaceBlocks).not.toHaveBeenCalled(); expect(mockState.replaceBlocks).not.toHaveBeenCalled();
tests/unit/EditorLayoutScroll.spec.tsx
+1 -1
View File
@@ -90,7 +90,7 @@ describe("EditorPage - 레이아웃 스크롤 컨테이너", () => {
it("좌측 사이드바, 캔버스, 우측 속성 패널에 pb-scroll 클래스가 적용되어야 한다", () => { it("좌측 사이드바, 캔버스, 우측 속성 패널에 pb-scroll 클래스가 적용되어야 한다", () => {
render(<EditorPage />); render(<EditorPage />);
const blocksHeading = screen.getByText("블록"); const blocksHeading = screen.getByText("Blocks");
const blocksSidebar = blocksHeading.closest("aside") as HTMLElement; const blocksSidebar = blocksHeading.closest("aside") as HTMLElement;
const canvas = screen.getByTestId("editor-canvas"); const canvas = screen.getByTestId("editor-canvas");
const propertiesSidebar = screen.getByTestId("properties-sidebar"); const propertiesSidebar = screen.getByTestId("properties-sidebar");
tests/unit/EditorPageBackground.spec.tsx
+7 -7
View File
@@ -114,13 +114,13 @@ describe("EditorPage - 페이지/캔버스 배경", () => {
it("프로젝트 저장/불러오기 모달 카드는 라이트/다크 테마에 맞는 카드/인풋 크롬을 사용해야 한다", () => { it("프로젝트 저장/불러오기 모달 카드는 라이트/다크 테마에 맞는 카드/인풋 크롬을 사용해야 한다", () => {
render(<EditorPage />); render(<EditorPage />);
const menuButton = screen.getByRole("button", { name: /메뉴/ }); const menuButton = screen.getByRole("button", { name: /Menu/ });
fireEvent.click(menuButton); fireEvent.click(menuButton);
const projectMenuItem = screen.getByRole("button", { name: "프로젝트 저장/불러오기" }); const projectMenuItem = screen.getByRole("button", { name: "Save / load project" });
fireEvent.click(projectMenuItem); fireEvent.click(projectMenuItem);
const heading = screen.getByText("프로젝트 저장 / 불러오기"); const heading = screen.getByText("Save / load project");
const headerDiv = heading.closest("div") as HTMLDivElement | null; const headerDiv = heading.closest("div") as HTMLDivElement | null;
expect(headerDiv).not.toBeNull(); expect(headerDiv).not.toBeNull();
@@ -136,7 +136,7 @@ describe("EditorPage - 페이지/캔버스 배경", () => {
expect(cardClass).toContain("dark:border-slate-700"); expect(cardClass).toContain("dark:border-slate-700");
const titleSpan = Array.from(card!.querySelectorAll("span")).find( const titleSpan = Array.from(card!.querySelectorAll("span")).find(
(el) => el.textContent === "프로젝트 제목", (el) => el.textContent === "Project title",
); );
expect(titleSpan).not.toBeUndefined(); expect(titleSpan).not.toBeUndefined();
const titleWrapper = (titleSpan as HTMLSpanElement).parentElement as HTMLElement | null; const titleWrapper = (titleSpan as HTMLSpanElement).parentElement as HTMLElement | null;
@@ -157,10 +157,10 @@ describe("EditorPage - 페이지/캔버스 배경", () => {
it("JSON Export / Import 모달 카드는 라이트/다크 테마에 맞는 카드/textarea 크롬을 사용해야 한다", () => { it("JSON Export / Import 모달 카드는 라이트/다크 테마에 맞는 카드/textarea 크롬을 사용해야 한다", () => {
render(<EditorPage />); render(<EditorPage />);
const menuButton = screen.getByRole("button", { name: /메뉴/ }); const menuButton = screen.getByRole("button", { name: /Menu/ });
fireEvent.click(menuButton); fireEvent.click(menuButton);
const jsonMenuItem = screen.getByRole("button", { name: "JSON 내보내기/불러오기" }); const jsonMenuItem = screen.getByRole("button", { name: "JSON export / import" });
fireEvent.click(jsonMenuItem); fireEvent.click(jsonMenuItem);
const heading = screen.getByText(/JSON Export \/ Import/); const heading = screen.getByText(/JSON Export \/ Import/);
@@ -178,7 +178,7 @@ describe("EditorPage - 페이지/캔버스 배경", () => {
expect(cardClass).toContain("dark:text-slate-100"); expect(cardClass).toContain("dark:text-slate-100");
expect(cardClass).toContain("dark:border-slate-700"); expect(cardClass).toContain("dark:border-slate-700");
const jsonLabel = screen.getByText("에디터 상태 JSON"); const jsonLabel = screen.getByText("Editor state JSON");
const jsonWrapper = jsonLabel.parentElement as HTMLElement | null; const jsonWrapper = jsonLabel.parentElement as HTMLElement | null;
expect(jsonWrapper).not.toBeNull(); expect(jsonWrapper).not.toBeNull();
tests/unit/EditorProjectSaveLoad.spec.tsx
+27 -27
View File
@@ -126,17 +126,17 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
const { rerender } = render(<EditorPage />); const { rerender } = render(<EditorPage />);
const menuButton = screen.getByText("메뉴"); const menuButton = screen.getByText("Menu");
fireEvent.click(menuButton); fireEvent.click(menuButton);
const projectMenuItem = screen.getByText("프로젝트 저장/불러오기"); const projectMenuItem = screen.getByText("Save / load project");
fireEvent.click(projectMenuItem); fireEvent.click(projectMenuItem);
const modalTitle = screen.getByText("프로젝트 저장 / 불러오기"); const modalTitle = screen.getByText("Save / load project");
const projectModal = (modalTitle.parentElement?.parentElement ?? document.body) as HTMLElement; const projectModal = (modalTitle.parentElement?.parentElement ?? document.body) as HTMLElement;
const titleInput = within(projectModal).getByLabelText("프로젝트 제목") as HTMLInputElement; const titleInput = within(projectModal).getByLabelText("Project title") as HTMLInputElement;
const slugInput = within(projectModal).getByLabelText("프로젝트 주소 (예: my-landing)") as HTMLInputElement; const slugInput = within(projectModal).getByLabelText("Project address (e.g. my-landing)") as HTMLInputElement;
expect(titleInput.value).toBe("프로젝트 저장/불러오기 테스트"); expect(titleInput.value).toBe("프로젝트 저장/불러오기 테스트");
expect(slugInput.value).toBe("editor-project-test"); expect(slugInput.value).toBe("editor-project-test");
@@ -149,7 +149,7 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
rerender(<EditorPage />); rerender(<EditorPage />);
const saveButton = screen.getByText("저장 (로컬 + 서버)"); const saveButton = screen.getByText("Save (local + server)");
fireEvent.click(saveButton); fireEvent.click(saveButton);
await waitFor(() => { await waitFor(() => {
@@ -184,7 +184,7 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
expect(Array.isArray(body.contentJson)).toBe(true); expect(Array.isArray(body.contentJson)).toBe(true);
expect(body.contentJson[0].id).toBe("blk_1"); expect(body.contentJson[0].id).toBe("blk_1");
const message = await screen.findByText("프로젝트가 저장되었습니다: save-test-slug"); const message = await screen.findByText("Project saved: save-test-slug");
expect(message).toBeTruthy(); expect(message).toBeTruthy();
}); });
@@ -213,24 +213,24 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
const { rerender } = render(<EditorPage />); const { rerender } = render(<EditorPage />);
const menuButton = screen.getByText("메뉴"); const menuButton = screen.getByText("Menu");
fireEvent.click(menuButton); fireEvent.click(menuButton);
const projectMenuItem = screen.getByText("프로젝트 저장/불러오기"); const projectMenuItem = screen.getByText("Save / load project");
fireEvent.click(projectMenuItem); fireEvent.click(projectMenuItem);
const modalTitle = screen.getByText("프로젝트 저장 / 불러오기"); const modalTitle = screen.getByText("Save / load project");
const projectModal = (modalTitle.parentElement?.parentElement ?? document.body) as HTMLElement; const projectModal = (modalTitle.parentElement?.parentElement ?? document.body) as HTMLElement;
const titleInput = within(projectModal).getByLabelText("프로젝트 제목") as HTMLInputElement; const titleInput = within(projectModal).getByLabelText("Project title") as HTMLInputElement;
const slugInput = within(projectModal).getByLabelText("프로젝트 주소 (예: my-landing)") as HTMLInputElement; const slugInput = within(projectModal).getByLabelText("Project address (e.g. my-landing)") as HTMLInputElement;
fireEvent.change(titleInput, { target: { value: "충돌 테스트 프로젝트" } }); fireEvent.change(titleInput, { target: { value: "충돌 테스트 프로젝트" } });
fireEvent.change(slugInput, { target: { value: "conflict-slug" } }); fireEvent.change(slugInput, { target: { value: "conflict-slug" } });
rerender(<EditorPage />); rerender(<EditorPage />);
const saveButton = screen.getByText("저장 (로컬 + 서버)"); const saveButton = screen.getByText("Save (local + server)");
fireEvent.click(saveButton); fireEvent.click(saveButton);
const message = await screen.findByText("이미 다른 사용자가 사용 중인 프로젝트 주소입니다."); const message = await screen.findByText("이미 다른 사용자가 사용 중인 프로젝트 주소입니다.");
@@ -268,16 +268,16 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
render(<EditorPage />); render(<EditorPage />);
const menuButton = screen.getByText("메뉴"); const menuButton = screen.getByText("Menu");
fireEvent.click(menuButton); fireEvent.click(menuButton);
const projectMenuItem = screen.getByText("프로젝트 저장/불러오기"); const projectMenuItem = screen.getByText("Save / load project");
fireEvent.click(projectMenuItem); fireEvent.click(projectMenuItem);
const modalTitle = screen.getByText("프로젝트 저장 / 불러오기"); const modalTitle = screen.getByText("Save / load project");
const projectModal = (modalTitle.parentElement?.parentElement ?? document.body) as HTMLElement; const projectModal = (modalTitle.parentElement?.parentElement ?? document.body) as HTMLElement;
const loadButton = screen.getByText("불러오기"); const loadButton = screen.getByText("Load");
fireEvent.click(loadButton); fireEvent.click(loadButton);
await waitFor(() => { await waitFor(() => {
@@ -297,7 +297,7 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
); );
expect(serverCalls.length).toBe(0); expect(serverCalls.length).toBe(0);
const message = await screen.findByText(`로컬에서 프로젝트를 불러왔습니다: ${slug}`); const message = await screen.findByText(`Loaded project from local: ${slug}`);
expect(message).toBeTruthy(); expect(message).toBeTruthy();
}); });
@@ -328,13 +328,13 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
render(<EditorPage />); render(<EditorPage />);
const menuButton = screen.getByText("메뉴"); const menuButton = screen.getByText("Menu");
fireEvent.click(menuButton); fireEvent.click(menuButton);
const projectMenuItem = screen.getByText("프로젝트 저장/불러오기"); const projectMenuItem = screen.getByText("Save / load project");
fireEvent.click(projectMenuItem); fireEvent.click(projectMenuItem);
const loadButton = screen.getByText("불러오기"); const loadButton = screen.getByText("Load");
fireEvent.click(loadButton); fireEvent.click(loadButton);
await waitFor(() => { await waitFor(() => {
@@ -362,7 +362,7 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
), ),
).toBe(true); ).toBe(true);
const message = await screen.findByText(`프로젝트를 불러왔습니다: ${slug}`); const message = await screen.findByText(`Loaded project from server: ${slug}`);
expect(message).toBeTruthy(); expect(message).toBeTruthy();
}); });
@@ -472,13 +472,13 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
render(<EditorPage />); render(<EditorPage />);
const menuButton = screen.getByText("메뉴"); const menuButton = screen.getByText("Menu");
fireEvent.click(menuButton); fireEvent.click(menuButton);
const projectMenuItem = screen.getByText("프로젝트 저장/불러오기"); const projectMenuItem = screen.getByText("Save / load project");
fireEvent.click(projectMenuItem); fireEvent.click(projectMenuItem);
const loadButton = screen.getByText("불러오기"); const loadButton = screen.getByText("Load");
fireEvent.click(loadButton); fireEvent.click(loadButton);
await waitFor(() => { await waitFor(() => {
@@ -514,10 +514,10 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
render(<EditorPage />); render(<EditorPage />);
const menuButton = screen.getByText("메뉴"); const menuButton = screen.getByText("Menu");
fireEvent.click(menuButton); fireEvent.click(menuButton);
const deleteMenuItem = screen.getByText("프로젝트 삭제"); const deleteMenuItem = screen.getByText("Delete project");
fireEvent.click(deleteMenuItem); fireEvent.click(deleteMenuItem);
await waitFor(() => { await waitFor(() => {
tests/unit/EditorSectionLayout.spec.tsx
+8 -1
View File
@@ -3,6 +3,8 @@ import { render, screen, cleanup } from "@testing-library/react";
import type { Block, ProjectConfig } from "@/features/editor/state/editorStore"; import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
import EditorPage from "@/app/editor/page"; import EditorPage from "@/app/editor/page";
import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate"; import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
import { DEFAULT_LOCALE } from "@/features/i18n/locale";
let mockState: any; let mockState: any;
@@ -191,7 +193,12 @@ describe("EditorPage - 섹션 레이아웃 속성", () => {
return () => `hero_${++i}`; return () => `hero_${++i}`;
})(); })();
const { blocks } = createHeroTemplateBlocks({ sectionId, createId }); const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks } = createHeroTemplateBlocks({
sectionId,
createId,
messages: tpl.hero,
});
mockState.blocks = blocks as Block[]; mockState.blocks = blocks as Block[];
mockState.selectedBlockId = sectionId; mockState.selectedBlockId = sectionId;
tests/unit/EditorServerAutosave.spec.tsx
+10 -39
View File
@@ -107,8 +107,8 @@ vi.mock("next/navigation", () => {
}; };
}); });
describe("EditorPage - 서버 자동 저장", () => { describe("EditorPage - 서버 자동 저장 비활성화", () => {
it("로그인된 사용자가 새 페이지를 편집하면 자동 생성된 slug 로 /api/projects 에 주기적으로 저장해야 한다", async () => { it("로그인된 사용자가 새 페이지를 편집하더라도 서버(/api/projects) 자동저장을 호출하지 않아야 한다", async () => {
const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => { const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
const url = typeof input === "string" ? input : input.url; const url = typeof input === "string" ? input : input.url;
const method = init?.method ?? "GET"; const method = init?.method ?? "GET";
@@ -152,28 +152,14 @@ describe("EditorPage - 서버 자동 저장", () => {
).toBe(true); ).toBe(true);
}); });
await waitFor(() => { const projectCalls = fetchMock.mock.calls.filter(
expect(
fetchMock.mock.calls.some(
([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
),
).toBe(true);
});
const projectCall = fetchMock.mock.calls.find(
([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST", ([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
) as any; );
const [, options] = projectCall; expect(projectCalls.length).toBe(0);
const body = JSON.parse((options.body as string) ?? "{}");
expect(typeof body.slug).toBe("string");
expect(body.slug).not.toBe("my-landing");
expect(body.slug.startsWith("page-")).toBe(false);
expect(mockState.projectConfig.slug).toBe(body.slug);
}); });
it("authUserId 가 없으면 /api/projects 자동 저장을 호출하지 않아야 한다", async () => { it("authUserId 가 없을 때는 물론, 서버 자동저장은 어떤 경우에도 /api/projects 를 호출하지 않아야 한다", async () => {
const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => { const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
const url = typeof input === "string" ? input : input.url; const url = typeof input === "string" ? input : input.url;
const method = init?.method ?? "GET"; const method = init?.method ?? "GET";
@@ -204,7 +190,7 @@ describe("EditorPage - 서버 자동 저장", () => {
expect(projectCalls.length).toBe(0); expect(projectCalls.length).toBe(0);
}); });
it("slug 쿼리 파라미터로 기존 프로젝트를 열었을 때는 해당 slug 로 서버 자동 저장을 해야 한다", async () => { it("slug 쿼리 파라미터로 기존 프로젝트를 열었을 때도 서버 자동저장을 호출하지 않아야 한다", async () => {
searchParamsSlug = "existing-slug"; searchParamsSlug = "existing-slug";
mockState.projectConfig.slug = "my-landing" as any; mockState.projectConfig.slug = "my-landing" as any;
@@ -268,25 +254,10 @@ describe("EditorPage - 서버 자동 저장", () => {
).toBe(true); ).toBe(true);
}); });
await waitFor(() => { const projectCalls = fetchMock.mock.calls.filter(
expect(
fetchMock.mock.calls.some(
([url, options]: any[]) =>
url === "/api/projects" && (options?.method ?? "GET") === "POST",
),
).toBe(true);
});
const projectCall = fetchMock.mock.calls.find(
([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST", ([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
) as any; );
expect(projectCall).toBeTruthy(); expect(projectCalls.length).toBe(0);
const [, options] = projectCall;
const body = JSON.parse((options.body as string) ?? "{}");
expect(body.slug).toBe("existing-slug");
expect(mockState.projectConfig.slug).toBe("existing-slug");
}); });
}); });
tests/unit/FormControllerPanel.spec.tsx
+19 -21
View File
@@ -42,7 +42,7 @@ describe("FormControllerPanel", () => {
/>, />,
); );
const input = screen.getByLabelText("성공 메시지"); const input = screen.getByLabelText("Success message");
fireEvent.change(input, { target: { value: "새 성공 메시지" } }); fireEvent.change(input, { target: { value: "새 성공 메시지" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -67,7 +67,7 @@ describe("FormControllerPanel", () => {
/>, />,
); );
const input = screen.getByLabelText("에러 메시지"); const input = screen.getByLabelText("Error message");
fireEvent.change(input, { target: { value: "새 에러 메시지" } }); fireEvent.change(input, { target: { value: "새 에러 메시지" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -143,7 +143,7 @@ describe("FormControllerPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("Submit 버튼") as HTMLSelectElement; const select = screen.getByLabelText("Submit button") as HTMLSelectElement;
const submitMainOption = screen.getByText("submit-main (제출하기)"); const submitMainOption = screen.getByText("submit-main (제출하기)");
@@ -168,17 +168,15 @@ describe("FormControllerPanel", () => {
/>, />,
); );
const guideButton = screen.getByRole("button", { name: "Google Sheets 연동 가이드" }); const guideButton = screen.getByRole("button", { name: "Google Sheets integration guide" });
guideButton.click(); guideButton.click();
// Google Sheets 연동 가이드 헤딩과 Apps Script 안내 문구가 노출되어야 한다. // Google Sheets integration guide heading and Apps Script web app URL hint should be visible.
expect(screen.getByText("Google Sheets 연동 가이드")).toBeTruthy(); expect(screen.getByText("Google Sheets integration guide")).toBeTruthy();
expect( expect(screen.getByText(/Apps Script web app URL/i)).toBeTruthy();
screen.getByText(/Apps Script 웹 앱 URL/i),
).toBeTruthy();
}); });
it("Google Sheets 가이드 모달의 Apps Script 코드가 컨트롤러에 매핑된 전송 키와 작성일시를 포함해야 한다", async () => { it("Google Sheets guide modal Apps Script code should include mapped submit keys and createdAt field", async () => {
const formBlock = makeFormBlock("form-webhook", { const formBlock = makeFormBlock("form-webhook", {
submitTarget: "webhook", submitTarget: "webhook",
fieldIds: ["input-name", "input-email"], fieldIds: ["input-name", "input-email"],
@@ -213,7 +211,7 @@ describe("FormControllerPanel", () => {
/>, />,
); );
const guideButton = screen.getByRole("button", { name: "Google Sheets 연동 가이드" }); const guideButton = screen.getByRole("button", { name: "Google Sheets integration guide" });
fireEvent.click(guideButton); fireEvent.click(guideButton);
const scriptTextarea = (await screen.findByDisplayValue(/function doPost/)) as HTMLTextAreaElement; const scriptTextarea = (await screen.findByDisplayValue(/function doPost/)) as HTMLTextAreaElement;
@@ -239,7 +237,7 @@ describe("FormControllerPanel", () => {
/>, />,
); );
const submitTargetSelect = screen.getByLabelText("전송 대상") as HTMLSelectElement; const submitTargetSelect = screen.getByLabelText("Submit target") as HTMLSelectElement;
const submitTargetClass = submitTargetSelect.getAttribute("class") ?? ""; const submitTargetClass = submitTargetSelect.getAttribute("class") ?? "";
expect(submitTargetClass).toContain("bg-white"); expect(submitTargetClass).toContain("bg-white");
expect(submitTargetClass).toContain("text-slate-900"); expect(submitTargetClass).toContain("text-slate-900");
@@ -248,7 +246,7 @@ describe("FormControllerPanel", () => {
expect(submitTargetClass).toContain("dark:text-slate-100"); expect(submitTargetClass).toContain("dark:text-slate-100");
expect(submitTargetClass).toContain("dark:border-slate-700"); expect(submitTargetClass).toContain("dark:border-slate-700");
const formWidthModeSelect = screen.getByLabelText("폼 너비 모드") as HTMLSelectElement; const formWidthModeSelect = screen.getByLabelText("Form width mode") as HTMLSelectElement;
const formWidthModeClass = formWidthModeSelect.getAttribute("class") ?? ""; const formWidthModeClass = formWidthModeSelect.getAttribute("class") ?? "";
expect(formWidthModeClass).toContain("bg-white"); expect(formWidthModeClass).toContain("bg-white");
expect(formWidthModeClass).toContain("text-slate-900"); expect(formWidthModeClass).toContain("text-slate-900");
@@ -257,7 +255,7 @@ describe("FormControllerPanel", () => {
expect(formWidthModeClass).toContain("dark:text-slate-100"); expect(formWidthModeClass).toContain("dark:text-slate-100");
expect(formWidthModeClass).toContain("dark:border-slate-700"); expect(formWidthModeClass).toContain("dark:border-slate-700");
const successInput = screen.getByLabelText("성공 메시지") as HTMLInputElement; const successInput = screen.getByLabelText("Success message") as HTMLInputElement;
const successClass = successInput.getAttribute("class") ?? ""; const successClass = successInput.getAttribute("class") ?? "";
expect(successClass).toContain("bg-white"); expect(successClass).toContain("bg-white");
expect(successClass).toContain("text-slate-900"); expect(successClass).toContain("text-slate-900");
@@ -266,7 +264,7 @@ describe("FormControllerPanel", () => {
expect(successClass).toContain("dark:text-slate-100"); expect(successClass).toContain("dark:text-slate-100");
expect(successClass).toContain("dark:border-slate-700"); expect(successClass).toContain("dark:border-slate-700");
const errorInput = screen.getByLabelText("에러 메시지") as HTMLInputElement; const errorInput = screen.getByLabelText("Error message") as HTMLInputElement;
const errorClass = errorInput.getAttribute("class") ?? ""; const errorClass = errorInput.getAttribute("class") ?? "";
expect(errorClass).toContain("bg-white"); expect(errorClass).toContain("bg-white");
expect(errorClass).toContain("text-slate-900"); expect(errorClass).toContain("text-slate-900");
@@ -275,7 +273,7 @@ describe("FormControllerPanel", () => {
expect(errorClass).toContain("dark:text-slate-100"); expect(errorClass).toContain("dark:text-slate-100");
expect(errorClass).toContain("dark:border-slate-700"); expect(errorClass).toContain("dark:border-slate-700");
const extraParamsTextarea = screen.getByLabelText(/추가 파라미터/) as HTMLTextAreaElement; const extraParamsTextarea = screen.getByLabelText(/Additional parameters/) as HTMLTextAreaElement;
const extraParamsClass = extraParamsTextarea.getAttribute("class") ?? ""; const extraParamsClass = extraParamsTextarea.getAttribute("class") ?? "";
expect(extraParamsClass).toContain("bg-white"); expect(extraParamsClass).toContain("bg-white");
expect(extraParamsClass).toContain("text-slate-900"); expect(extraParamsClass).toContain("text-slate-900");
@@ -285,7 +283,7 @@ describe("FormControllerPanel", () => {
expect(extraParamsClass).toContain("dark:border-slate-700"); expect(extraParamsClass).toContain("dark:border-slate-700");
}); });
it("Google Sheets 연동 가이드 모달 카드와 textarea 는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => { it("Google Sheets integration guide modal card and textarea should use dual light/dark theme chrome", () => {
const formBlock = makeFormBlock("form-webhook-theme", { const formBlock = makeFormBlock("form-webhook-theme", {
submitTarget: "webhook", submitTarget: "webhook",
} as any); } as any);
@@ -301,10 +299,10 @@ describe("FormControllerPanel", () => {
/>, />,
); );
const guideButton = screen.getByRole("button", { name: "Google Sheets 연동 가이드" }); const guideButton = screen.getByRole("button", { name: "Google Sheets integration guide" });
fireEvent.click(guideButton); fireEvent.click(guideButton);
const heading = screen.getByRole("heading", { name: "Google Sheets 연동 가이드" }); const heading = screen.getByRole("heading", { name: "Google Sheets integration guide" });
const card = heading.closest("div")?.parentElement as HTMLDivElement | null; const card = heading.closest("div")?.parentElement as HTMLDivElement | null;
expect(card).not.toBeNull(); expect(card).not.toBeNull();
@@ -352,7 +350,7 @@ describe("FormControllerPanel", () => {
/>, />,
); );
const fieldset = screen.getByRole("group", { name: "폼 필드 매핑" }); const fieldset = screen.getByRole("group", { name: "Form field mapping" });
const checkboxes = within(fieldset).getAllByRole("checkbox"); const checkboxes = within(fieldset).getAllByRole("checkbox");
const includeCheckbox = checkboxes[0] as HTMLInputElement; const includeCheckbox = checkboxes[0] as HTMLInputElement;
@@ -391,7 +389,7 @@ describe("FormControllerPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("Submit 버튼") as HTMLSelectElement; const select = screen.getByLabelText("Submit button") as HTMLSelectElement;
const className = select.getAttribute("class") ?? ""; const className = select.getAttribute("class") ?? "";
expect(className).toContain("bg-white"); expect(className).toContain("bg-white");
tests/unit/FormFieldPropertiesPanels.spec.tsx
+76 -76
View File
@@ -45,7 +45,7 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("필드 텍스트 색상 HEX"); const hexInput = screen.getByLabelText("Field text color HEX");
fireEvent.change(hexInput, { target: { value: "#112233" } }); fireEvent.change(hexInput, { target: { value: "#112233" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -70,7 +70,7 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("필드 채움 색상 HEX"); const hexInput = screen.getByLabelText("Field fill color HEX");
fireEvent.change(hexInput, { target: { value: "#445566" } }); fireEvent.change(hexInput, { target: { value: "#445566" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -95,7 +95,7 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("필드 테두리 색상 HEX"); const hexInput = screen.getByLabelText("Field border color HEX");
fireEvent.change(hexInput, { target: { value: "#778899" } }); fireEvent.change(hexInput, { target: { value: "#778899" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -104,7 +104,7 @@ describe("FormInputPropertiesPanel", () => {
); );
}); });
it("텍스트 색상 팔레트에서 \"없음\" 을 선택하면 FormInput textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => { it("텍스트 색상 팔레트에서 \"None\" 을 선택하면 FormInput textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
const updateBlock = vi.fn(); const updateBlock = vi.fn();
const block = makeBlock<FormInputBlockProps>("f-input-none", "formInput", { const block = makeBlock<FormInputBlockProps>("f-input-none", "formInput", {
@@ -121,11 +121,11 @@ describe("FormInputPropertiesPanel", () => {
); );
// 첫 번째 ColorPickerField(필드 텍스트 색상)의 팔레트 버튼을 연다. // 첫 번째 ColorPickerField(필드 텍스트 색상)의 팔레트 버튼을 연다.
const paletteButtons = screen.getAllByText("색상 팔레트"); const paletteButtons = screen.getAllByText("Color palette");
fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement); fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
// 팔레트에서 "없음" 항목을 버튼 role 기준으로 선택한다. // 팔레트에서 "None" 항목을 버튼 role 기준으로 선택한다.
const noneButtons = screen.getAllByRole("button", { name: "없음" }); const noneButtons = screen.getAllByRole("button", { name: "None" });
fireEvent.click(noneButtons[0]); fireEvent.click(noneButtons[0]);
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -150,7 +150,7 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("필드 텍스트 색상 HEX") as HTMLInputElement; const hexInput = screen.getByLabelText("Field text color HEX") as HTMLInputElement;
expect(hexInput.value).toBe(""); expect(hexInput.value).toBe("");
}); });
@@ -171,7 +171,7 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("너비"); const select = screen.getByLabelText("Width");
fireEvent.change(select, { target: { value: "fixed" } }); fireEvent.change(select, { target: { value: "fixed" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -197,7 +197,7 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
const layoutSelect = screen.getByLabelText("레이아웃"); const layoutSelect = screen.getByLabelText("Layout");
expect(layoutSelect).toBeTruthy(); expect(layoutSelect).toBeTruthy();
cleanup(); cleanup();
@@ -216,7 +216,7 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
expect(screen.queryByLabelText("레이아웃")).toBeNull(); expect(screen.queryByLabelText("Layout")).toBeNull();
}); });
it("폼 입력 텍스트/줄간격/자간 px 컨트롤이 fontSizeCustom/lineHeightCustom/letterSpacingCustom 으로 저장되어야 한다", () => { it("폼 입력 텍스트/줄간격/자간 px 컨트롤이 fontSizeCustom/lineHeightCustom/letterSpacingCustom 으로 저장되어야 한다", () => {
@@ -237,13 +237,13 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
const fontSizeInput = screen.getByLabelText("필드 텍스트 크기 (px) 커스텀 (px)"); const fontSizeInput = screen.getByLabelText("Field text size (px) 커스텀 (px)");
fireEvent.change(fontSizeInput, { target: { value: "24" } }); fireEvent.change(fontSizeInput, { target: { value: "24" } });
const lineHeightInput = screen.getByLabelText("필드 줄간격 (px) 커스텀 (px)"); const lineHeightInput = screen.getByLabelText("Field line height (px) 커스텀 (px)");
fireEvent.change(lineHeightInput, { target: { value: "30" } }); fireEvent.change(lineHeightInput, { target: { value: "30" } });
const letterSpacingInput = screen.getByLabelText("필드 자간 (px) 커스텀 (px)"); const letterSpacingInput = screen.getByLabelText("Field letter spacing (px) 커스텀 (px)");
fireEvent.change(letterSpacingInput, { target: { value: "1.5" } }); fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -280,19 +280,19 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
const alignSelect = screen.getByLabelText("텍스트 정렬"); const alignSelect = screen.getByLabelText("Text alignment");
fireEvent.change(alignSelect, { target: { value: "center" } }); fireEvent.change(alignSelect, { target: { value: "center" } });
const widthModeSelect = screen.getByLabelText("너비"); const widthModeSelect = screen.getByLabelText("Width");
fireEvent.change(widthModeSelect, { target: { value: "fixed" } }); fireEvent.change(widthModeSelect, { target: { value: "fixed" } });
const widthPxInput = screen.getByLabelText("필드 고정 너비 커스텀 (px)"); const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
fireEvent.change(widthPxInput, { target: { value: "320" } }); fireEvent.change(widthPxInput, { target: { value: "320" } });
const paddingXInput = screen.getByLabelText("필드 가로 패딩 (px) 커스텀 (px)"); const paddingXInput = screen.getByLabelText("Field horizontal padding (px) 커스텀 (px)");
fireEvent.change(paddingXInput, { target: { value: "16" } }); fireEvent.change(paddingXInput, { target: { value: "16" } });
const paddingYInput = screen.getByLabelText("필드 세로 패딩 (px) 커스텀 (px)"); const paddingYInput = screen.getByLabelText("Field vertical padding (px) 커스텀 (px)");
fireEvent.change(paddingYInput, { target: { value: "12" } }); fireEvent.change(paddingYInput, { target: { value: "12" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -332,7 +332,7 @@ describe("FormInputPropertiesPanel", () => {
/>, />,
); );
const labelTypeSelect = screen.getByLabelText("라벨 타입") as HTMLSelectElement; const labelTypeSelect = screen.getByLabelText("Label type") as HTMLSelectElement;
const labelTypeClass = labelTypeSelect.getAttribute("class") ?? ""; const labelTypeClass = labelTypeSelect.getAttribute("class") ?? "";
expect(labelTypeClass).toContain("bg-white"); expect(labelTypeClass).toContain("bg-white");
expect(labelTypeClass).toContain("text-slate-900"); expect(labelTypeClass).toContain("text-slate-900");
@@ -341,7 +341,7 @@ describe("FormInputPropertiesPanel", () => {
expect(labelTypeClass).toContain("dark:text-slate-100"); expect(labelTypeClass).toContain("dark:text-slate-100");
expect(labelTypeClass).toContain("dark:border-slate-700"); expect(labelTypeClass).toContain("dark:border-slate-700");
const labelInput = screen.getByLabelText("필드 라벨") as HTMLInputElement; const labelInput = screen.getByLabelText("Field label") as HTMLInputElement;
const labelInputClass = labelInput.getAttribute("class") ?? ""; const labelInputClass = labelInput.getAttribute("class") ?? "";
expect(labelInputClass).toContain("bg-white"); expect(labelInputClass).toContain("bg-white");
expect(labelInputClass).toContain("text-slate-900"); expect(labelInputClass).toContain("text-slate-900");
@@ -350,7 +350,7 @@ describe("FormInputPropertiesPanel", () => {
expect(labelInputClass).toContain("dark:text-slate-100"); expect(labelInputClass).toContain("dark:text-slate-100");
expect(labelInputClass).toContain("dark:border-slate-700"); expect(labelInputClass).toContain("dark:border-slate-700");
const labelDisplaySelect = screen.getByLabelText("라벨 표시 방식") as HTMLSelectElement; const labelDisplaySelect = screen.getByLabelText("Label display mode") as HTMLSelectElement;
const labelDisplayClass = labelDisplaySelect.getAttribute("class") ?? ""; const labelDisplayClass = labelDisplaySelect.getAttribute("class") ?? "";
expect(labelDisplayClass).toContain("bg-white"); expect(labelDisplayClass).toContain("bg-white");
expect(labelDisplayClass).toContain("text-slate-900"); expect(labelDisplayClass).toContain("text-slate-900");
@@ -359,7 +359,7 @@ describe("FormInputPropertiesPanel", () => {
expect(labelDisplayClass).toContain("dark:text-slate-100"); expect(labelDisplayClass).toContain("dark:text-slate-100");
expect(labelDisplayClass).toContain("dark:border-slate-700"); expect(labelDisplayClass).toContain("dark:border-slate-700");
const fieldTypeSelect = screen.getByLabelText("필드 타입") as HTMLSelectElement; const fieldTypeSelect = screen.getByLabelText("Field type") as HTMLSelectElement;
const fieldTypeClass = fieldTypeSelect.getAttribute("class") ?? ""; const fieldTypeClass = fieldTypeSelect.getAttribute("class") ?? "";
expect(fieldTypeClass).toContain("bg-white"); expect(fieldTypeClass).toContain("bg-white");
expect(fieldTypeClass).toContain("text-slate-900"); expect(fieldTypeClass).toContain("text-slate-900");
@@ -406,7 +406,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("셀렉트 텍스트 색상 HEX"); const hexInput = screen.getByLabelText("Select text color HEX");
fireEvent.change(hexInput, { target: { value: "#112233" } }); fireEvent.change(hexInput, { target: { value: "#112233" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -431,7 +431,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("셀렉트 채움 색상 HEX"); const hexInput = screen.getByLabelText("Select fill color HEX");
fireEvent.change(hexInput, { target: { value: "#445566" } }); fireEvent.change(hexInput, { target: { value: "#445566" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -456,7 +456,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("셀렉트 테두리 색상 HEX"); const hexInput = screen.getByLabelText("Select border color HEX");
fireEvent.change(hexInput, { target: { value: "#778899" } }); fireEvent.change(hexInput, { target: { value: "#778899" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -482,7 +482,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("필드 너비"); const select = screen.getByLabelText("Field width");
fireEvent.change(select, { target: { value: "fixed" } }); fireEvent.change(select, { target: { value: "fixed" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -509,13 +509,13 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const fontSizeInput = screen.getByLabelText("셀렉트 텍스트 크기 (px) 커스텀 (px)"); const fontSizeInput = screen.getByLabelText("Select text size (px) 커스텀 (px)");
fireEvent.change(fontSizeInput, { target: { value: "24" } }); fireEvent.change(fontSizeInput, { target: { value: "24" } });
const lineHeightInput = screen.getByLabelText("셀렉트 줄간격 (px) 커스텀 (px)"); const lineHeightInput = screen.getByLabelText("Select line height (px) 커스텀 (px)");
fireEvent.change(lineHeightInput, { target: { value: "30" } }); fireEvent.change(lineHeightInput, { target: { value: "30" } });
const letterSpacingInput = screen.getByLabelText("셀렉트 자간 (px) 커스텀 (px)"); const letterSpacingInput = screen.getByLabelText("Select letter spacing (px) 커스텀 (px)");
fireEvent.change(letterSpacingInput, { target: { value: "1.5" } }); fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -551,13 +551,13 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const widthPxInput = screen.getByLabelText("필드 고정 너비 커스텀 (px)"); const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
fireEvent.change(widthPxInput, { target: { value: "320" } }); fireEvent.change(widthPxInput, { target: { value: "320" } });
const paddingXInput = screen.getByLabelText("셀렉트 가로 패딩 (px) 커스텀 (px)"); const paddingXInput = screen.getByLabelText("Select horizontal padding (px) 커스텀 (px)");
fireEvent.change(paddingXInput, { target: { value: "16" } }); fireEvent.change(paddingXInput, { target: { value: "16" } });
const paddingYInput = screen.getByLabelText("셀렉트 세로 패딩 (px) 커스텀 (px)"); const paddingYInput = screen.getByLabelText("Select vertical padding (px) 커스텀 (px)");
fireEvent.change(paddingYInput, { target: { value: "12" } }); fireEvent.change(paddingYInput, { target: { value: "12" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -591,7 +591,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const layoutSelect = screen.getByLabelText("레이아웃"); const layoutSelect = screen.getByLabelText("Layout");
expect(layoutSelect).toBeTruthy(); expect(layoutSelect).toBeTruthy();
cleanup(); cleanup();
@@ -610,7 +610,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
expect(screen.queryByLabelText("레이아웃")).toBeNull(); expect(screen.queryByLabelText("Layout")).toBeNull();
}); });
it("라벨 타입 셀렉트 변경 시 updateBlock 이 labelMode 로 호출되어야 한다", () => { it("라벨 타입 셀렉트 변경 시 updateBlock 이 labelMode 로 호출되어야 한다", () => {
@@ -629,7 +629,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("라벨 타입"); const select = screen.getByLabelText("Label type");
fireEvent.change(select, { target: { value: "image" } }); fireEvent.change(select, { target: { value: "image" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -654,7 +654,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("라벨 표시 방식"); const select = screen.getByLabelText("Label display mode");
fireEvent.change(select, { target: { value: "hidden" } }); fireEvent.change(select, { target: { value: "hidden" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -680,7 +680,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("레이아웃"); const select = screen.getByLabelText("Layout");
fireEvent.change(select, { target: { value: "inline" } }); fireEvent.change(select, { target: { value: "inline" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -707,7 +707,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const gapInput = screen.getByLabelText("라벨/필드 간격 (px) 커스텀 (px)"); const gapInput = screen.getByLabelText("Label/field gap (px) 커스텀 (px)");
fireEvent.change(gapInput, { target: { value: "16" } }); fireEvent.change(gapInput, { target: { value: "16" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -732,7 +732,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const input = screen.getByLabelText("필드 라벨"); const input = screen.getByLabelText("Field label");
fireEvent.change(input, { target: { value: "새 카테고리" } }); fireEvent.change(input, { target: { value: "새 카테고리" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -757,7 +757,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const input = screen.getByLabelText("전송 키"); const input = screen.getByLabelText("Submit key");
fireEvent.change(input, { target: { value: "category_new" } }); fireEvent.change(input, { target: { value: "category_new" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -782,7 +782,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const radiusInput = screen.getByLabelText("필드 모서리 둥글기 커스텀"); const radiusInput = screen.getByLabelText("Field border radius 커스텀");
fireEvent.change(radiusInput, { target: { value: "8" } }); fireEvent.change(radiusInput, { target: { value: "8" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -806,7 +806,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const labelTypeSelect = screen.getByLabelText("라벨 타입") as HTMLSelectElement; const labelTypeSelect = screen.getByLabelText("Label type") as HTMLSelectElement;
const labelTypeClass = labelTypeSelect.getAttribute("class") ?? ""; const labelTypeClass = labelTypeSelect.getAttribute("class") ?? "";
expect(labelTypeClass).toContain("bg-white"); expect(labelTypeClass).toContain("bg-white");
expect(labelTypeClass).toContain("text-slate-900"); expect(labelTypeClass).toContain("text-slate-900");
@@ -815,7 +815,7 @@ describe("FormSelectPropertiesPanel", () => {
expect(labelTypeClass).toContain("dark:text-slate-100"); expect(labelTypeClass).toContain("dark:text-slate-100");
expect(labelTypeClass).toContain("dark:border-slate-700"); expect(labelTypeClass).toContain("dark:border-slate-700");
const labelInput = screen.getByLabelText("필드 라벨") as HTMLInputElement; const labelInput = screen.getByLabelText("Field label") as HTMLInputElement;
const labelInputClass = labelInput.getAttribute("class") ?? ""; const labelInputClass = labelInput.getAttribute("class") ?? "";
expect(labelInputClass).toContain("bg-white"); expect(labelInputClass).toContain("bg-white");
expect(labelInputClass).toContain("text-slate-900"); expect(labelInputClass).toContain("text-slate-900");
@@ -824,7 +824,7 @@ describe("FormSelectPropertiesPanel", () => {
expect(labelInputClass).toContain("dark:text-slate-100"); expect(labelInputClass).toContain("dark:text-slate-100");
expect(labelInputClass).toContain("dark:border-slate-700"); expect(labelInputClass).toContain("dark:border-slate-700");
const labelDisplaySelect = screen.getByLabelText("라벨 표시 방식") as HTMLSelectElement; const labelDisplaySelect = screen.getByLabelText("Label display mode") as HTMLSelectElement;
const labelDisplayClass = labelDisplaySelect.getAttribute("class") ?? ""; const labelDisplayClass = labelDisplaySelect.getAttribute("class") ?? "";
expect(labelDisplayClass).toContain("bg-white"); expect(labelDisplayClass).toContain("bg-white");
expect(labelDisplayClass).toContain("text-slate-900"); expect(labelDisplayClass).toContain("text-slate-900");
@@ -833,7 +833,7 @@ describe("FormSelectPropertiesPanel", () => {
expect(labelDisplayClass).toContain("dark:text-slate-100"); expect(labelDisplayClass).toContain("dark:text-slate-100");
expect(labelDisplayClass).toContain("dark:border-slate-700"); expect(labelDisplayClass).toContain("dark:border-slate-700");
const widthModeSelect = screen.getByLabelText("필드 너비") as HTMLSelectElement; const widthModeSelect = screen.getByLabelText("Field width") as HTMLSelectElement;
const widthModeClass = widthModeSelect.getAttribute("class") ?? ""; const widthModeClass = widthModeSelect.getAttribute("class") ?? "";
expect(widthModeClass).toContain("bg-white"); expect(widthModeClass).toContain("bg-white");
expect(widthModeClass).toContain("text-slate-900"); expect(widthModeClass).toContain("text-slate-900");
@@ -842,7 +842,7 @@ describe("FormSelectPropertiesPanel", () => {
expect(widthModeClass).toContain("dark:text-slate-100"); expect(widthModeClass).toContain("dark:text-slate-100");
expect(widthModeClass).toContain("dark:border-slate-700"); expect(widthModeClass).toContain("dark:border-slate-700");
const optionLabelInput = screen.getByPlaceholderText("라벨") as HTMLInputElement; const optionLabelInput = screen.getByPlaceholderText("Label") as HTMLInputElement;
const optionLabelClass = optionLabelInput.getAttribute("class") ?? ""; const optionLabelClass = optionLabelInput.getAttribute("class") ?? "";
expect(optionLabelClass).toContain("bg-white"); expect(optionLabelClass).toContain("bg-white");
expect(optionLabelClass).toContain("text-slate-900"); expect(optionLabelClass).toContain("text-slate-900");
@@ -867,7 +867,7 @@ describe("FormSelectPropertiesPanel", () => {
/>, />,
); );
const optionLabelInput = screen.getByPlaceholderText("라벨") as HTMLInputElement; const optionLabelInput = screen.getByPlaceholderText("Label") as HTMLInputElement;
const rowDiv = optionLabelInput.closest("div") as HTMLDivElement | null; const rowDiv = optionLabelInput.closest("div") as HTMLDivElement | null;
expect(rowDiv).not.toBeNull(); expect(rowDiv).not.toBeNull();
@@ -904,7 +904,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("체크박스 텍스트 색상 HEX"); const hexInput = screen.getByLabelText("Checkbox text color HEX");
fireEvent.change(hexInput, { target: { value: "#112233" } }); fireEvent.change(hexInput, { target: { value: "#112233" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -931,13 +931,13 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const fontSizeInput = screen.getByLabelText("체크박스 텍스트 크기 (px) 커스텀 (px)"); const fontSizeInput = screen.getByLabelText("Checkbox text size (px) 커스텀 (px)");
fireEvent.change(fontSizeInput, { target: { value: "24" } }); fireEvent.change(fontSizeInput, { target: { value: "24" } });
const lineHeightInput = screen.getByLabelText("체크박스 줄간격 (px) 커스텀 (px)"); const lineHeightInput = screen.getByLabelText("Checkbox line height (px) 커스텀 (px)");
fireEvent.change(lineHeightInput, { target: { value: "30" } }); fireEvent.change(lineHeightInput, { target: { value: "30" } });
const letterSpacingInput = screen.getByLabelText("체크박스 자간 (px) 커스텀 (px)"); const letterSpacingInput = screen.getByLabelText("Checkbox letter spacing (px) 커스텀 (px)");
fireEvent.change(letterSpacingInput, { target: { value: "1.5" } }); fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -973,13 +973,13 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const widthPxInput = screen.getByLabelText("필드 고정 너비 커스텀 (px)"); const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
fireEvent.change(widthPxInput, { target: { value: "320" } }); fireEvent.change(widthPxInput, { target: { value: "320" } });
const paddingXInput = screen.getByLabelText("체크박스 가로 패딩 (px) 커스텀 (px)"); const paddingXInput = screen.getByLabelText("Checkbox horizontal padding (px) 커스텀 (px)");
fireEvent.change(paddingXInput, { target: { value: "16" } }); fireEvent.change(paddingXInput, { target: { value: "16" } });
const paddingYInput = screen.getByLabelText("체크박스 세로 패딩 (px) 커스텀 (px)"); const paddingYInput = screen.getByLabelText("Checkbox vertical padding (px) 커스텀 (px)");
fireEvent.change(paddingYInput, { target: { value: "12" } }); fireEvent.change(paddingYInput, { target: { value: "12" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1013,7 +1013,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const layoutSelect = screen.getByLabelText("레이아웃"); const layoutSelect = screen.getByLabelText("Layout");
expect(layoutSelect).toBeTruthy(); expect(layoutSelect).toBeTruthy();
cleanup(); cleanup();
@@ -1032,7 +1032,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
expect(screen.queryByLabelText("레이아웃")).toBeNull(); expect(screen.queryByLabelText("Layout")).toBeNull();
}); });
it("그룹 타이틀 타입 셀렉트 변경 시 updateBlock 이 groupLabelMode 로 호출되어야 한다", () => { it("그룹 타이틀 타입 셀렉트 변경 시 updateBlock 이 groupLabelMode 로 호출되어야 한다", () => {
@@ -1051,7 +1051,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("그룹 타이틀 타입"); const select = screen.getByLabelText("Group title type");
fireEvent.change(select, { target: { value: "image" } }); fireEvent.change(select, { target: { value: "image" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1076,7 +1076,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("그룹 타이틀 표시 방식"); const select = screen.getByLabelText("Group title display mode");
fireEvent.change(select, { target: { value: "hidden" } }); fireEvent.change(select, { target: { value: "hidden" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1102,7 +1102,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("레이아웃"); const select = screen.getByLabelText("Layout");
fireEvent.change(select, { target: { value: "inline" } }); fireEvent.change(select, { target: { value: "inline" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1129,7 +1129,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const gapInput = screen.getByLabelText("라벨/필드 간격 (px) 커스텀 (px)"); const gapInput = screen.getByLabelText("Label/field gap (px) 커스텀 (px)");
fireEvent.change(gapInput, { target: { value: "16" } }); fireEvent.change(gapInput, { target: { value: "16" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1154,7 +1154,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const input = screen.getByLabelText("그룹 타이틀"); const input = screen.getByLabelText("Group title");
fireEvent.change(input, { target: { value: "새 옵션들" } }); fireEvent.change(input, { target: { value: "새 옵션들" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1179,7 +1179,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const gapInput = screen.getByLabelText("체크박스 옵션 간격 (px) 커스텀 (px)"); const gapInput = screen.getByLabelText("Checkbox option gap (px) 커스텀 (px)");
fireEvent.change(gapInput, { target: { value: "10" } }); fireEvent.change(gapInput, { target: { value: "10" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1204,7 +1204,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("옵션 레이아웃"); const select = screen.getByLabelText("Option layout");
fireEvent.change(select, { target: { value: "inline" } }); fireEvent.change(select, { target: { value: "inline" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1229,7 +1229,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const radiusInput = screen.getByLabelText("필드 모서리 둥글기 커스텀"); const radiusInput = screen.getByLabelText("Field border radius 커스텀");
fireEvent.change(radiusInput, { target: { value: "8" } }); fireEvent.change(radiusInput, { target: { value: "8" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1253,7 +1253,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("필드 너비") as HTMLSelectElement; const select = screen.getByLabelText("Field width") as HTMLSelectElement;
const className = select.getAttribute("class") ?? ""; const className = select.getAttribute("class") ?? "";
expect(className).toContain("bg-white"); expect(className).toContain("bg-white");
@@ -1282,13 +1282,13 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const fontSizeInput = screen.getByLabelText("라디오 텍스트 크기 (px) 커스텀 (px)"); const fontSizeInput = screen.getByLabelText("Radio text size (px) 커스텀 (px)");
fireEvent.change(fontSizeInput, { target: { value: "24" } }); fireEvent.change(fontSizeInput, { target: { value: "24" } });
const lineHeightInput = screen.getByLabelText("라디오 줄간격 (px) 커스텀 (px)"); const lineHeightInput = screen.getByLabelText("Radio line height (px) 커스텀 (px)");
fireEvent.change(lineHeightInput, { target: { value: "30" } }); fireEvent.change(lineHeightInput, { target: { value: "30" } });
const letterSpacingInput = screen.getByLabelText("라디오 자간 (px) 커스텀 (px)"); const letterSpacingInput = screen.getByLabelText("Radio letter spacing (px) 커스텀 (px)");
fireEvent.change(letterSpacingInput, { target: { value: "1.5" } }); fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1325,16 +1325,16 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const widthPxInput = screen.getByLabelText("필드 고정 너비 커스텀 (px)"); const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
fireEvent.change(widthPxInput, { target: { value: "320" } }); fireEvent.change(widthPxInput, { target: { value: "320" } });
const paddingXInput = screen.getByLabelText("라디오 가로 패딩 (px) 커스텀 (px)"); const paddingXInput = screen.getByLabelText("Radio horizontal padding (px) 커스텀 (px)");
fireEvent.change(paddingXInput, { target: { value: "12" } }); fireEvent.change(paddingXInput, { target: { value: "12" } });
const paddingYInput = screen.getByLabelText("라디오 세로 패딩 (px) 커스텀 (px)"); const paddingYInput = screen.getByLabelText("Radio vertical padding (px) 커스텀 (px)");
fireEvent.change(paddingYInput, { target: { value: "6" } }); fireEvent.change(paddingYInput, { target: { value: "6" } });
const optionGapInput = screen.getByLabelText("라디오 옵션 간격 (px) 커스텀 (px)"); const optionGapInput = screen.getByLabelText("Radio option gap (px) 커스텀 (px)");
fireEvent.change(optionGapInput, { target: { value: "10" } }); fireEvent.change(optionGapInput, { target: { value: "10" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1616,7 +1616,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("라디오 배경 색상 HEX"); const hexInput = screen.getByLabelText("Radio background color HEX");
fireEvent.change(hexInput, { target: { value: "#445566" } }); fireEvent.change(hexInput, { target: { value: "#445566" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1641,7 +1641,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("라디오 테두리 색상 HEX"); const hexInput = screen.getByLabelText("Radio border color HEX");
fireEvent.change(hexInput, { target: { value: "#778899" } }); fireEvent.change(hexInput, { target: { value: "#778899" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -1666,7 +1666,7 @@ describe("FormCheckboxPropertiesPanel", () => {
/>, />,
); );
const radiusInput = screen.getByLabelText("필드 모서리 둥글기 커스텀"); const radiusInput = screen.getByLabelText("Field border radius 커스텀");
fireEvent.change(radiusInput, { target: { value: "8" } }); fireEvent.change(radiusInput, { target: { value: "8" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
tests/unit/ImagePropertiesPanel.spec.tsx
+11 -11
View File
@@ -30,7 +30,7 @@ describe("ImagePropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("이미지 카드 배경색 HEX"); const hexInput = screen.getByLabelText("Image card background color HEX");
fireEvent.change(hexInput, { target: { value: "#112233" } }); fireEvent.change(hexInput, { target: { value: "#112233" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -55,7 +55,7 @@ describe("ImagePropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("이미지 소스"); const select = screen.getByLabelText("Image source");
fireEvent.change(select, { target: { value: "url" } }); fireEvent.change(select, { target: { value: "url" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -80,7 +80,7 @@ describe("ImagePropertiesPanel", () => {
/>, />,
); );
const urlInput = screen.getByLabelText("이미지 URL"); const urlInput = screen.getByLabelText("Image URL");
fireEvent.change(urlInput, { target: { value: "https://example.com/after.png" } }); fireEvent.change(urlInput, { target: { value: "https://example.com/after.png" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -104,7 +104,7 @@ describe("ImagePropertiesPanel", () => {
/>, />,
); );
const altInput = screen.getByLabelText("대체 텍스트"); const altInput = screen.getByLabelText("Alt text");
fireEvent.change(altInput, { target: { value: "새 대체 텍스트" } }); fireEvent.change(altInput, { target: { value: "새 대체 텍스트" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -124,7 +124,7 @@ describe("ImagePropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("이미지 정렬"); const select = screen.getByLabelText("Image alignment");
fireEvent.change(select, { target: { value: "left" } }); fireEvent.change(select, { target: { value: "left" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -144,7 +144,7 @@ describe("ImagePropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("이미지 너비 모드"); const select = screen.getByLabelText("Image width mode");
fireEvent.change(select, { target: { value: "fixed" } }); fireEvent.change(select, { target: { value: "fixed" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -164,7 +164,7 @@ describe("ImagePropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("고정 너비 (px) 슬라이더"); const slider = screen.getByLabelText("Fixed width (px) 슬라이더");
fireEvent.change(slider, { target: { value: "480" } }); fireEvent.change(slider, { target: { value: "480" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -184,7 +184,7 @@ describe("ImagePropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("모서리 둥글기 슬라이더"); const slider = screen.getByLabelText("Border radius 슬라이더");
fireEvent.change(slider, { target: { value: "24" } }); fireEvent.change(slider, { target: { value: "24" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -204,7 +204,7 @@ describe("ImagePropertiesPanel", () => {
/>, />,
); );
const sourceSelect = screen.getByLabelText("이미지 소스") as HTMLSelectElement; const sourceSelect = screen.getByLabelText("Image source") as HTMLSelectElement;
const sourceClass = sourceSelect.getAttribute("class") ?? ""; const sourceClass = sourceSelect.getAttribute("class") ?? "";
expect(sourceClass).toContain("bg-white"); expect(sourceClass).toContain("bg-white");
expect(sourceClass).toContain("text-slate-900"); expect(sourceClass).toContain("text-slate-900");
@@ -213,7 +213,7 @@ describe("ImagePropertiesPanel", () => {
expect(sourceClass).toContain("dark:text-slate-100"); expect(sourceClass).toContain("dark:text-slate-100");
expect(sourceClass).toContain("dark:border-slate-700"); expect(sourceClass).toContain("dark:border-slate-700");
const urlInput = screen.getByLabelText("이미지 URL") as HTMLInputElement; const urlInput = screen.getByLabelText("Image URL") as HTMLInputElement;
const urlClass = urlInput.getAttribute("class") ?? ""; const urlClass = urlInput.getAttribute("class") ?? "";
expect(urlClass).toContain("bg-white"); expect(urlClass).toContain("bg-white");
expect(urlClass).toContain("text-slate-900"); expect(urlClass).toContain("text-slate-900");
@@ -222,7 +222,7 @@ describe("ImagePropertiesPanel", () => {
expect(urlClass).toContain("dark:text-slate-100"); expect(urlClass).toContain("dark:text-slate-100");
expect(urlClass).toContain("dark:border-slate-700"); expect(urlClass).toContain("dark:border-slate-700");
const alignSelect = screen.getByLabelText("이미지 정렬") as HTMLSelectElement; const alignSelect = screen.getByLabelText("Image alignment") as HTMLSelectElement;
const alignClass = alignSelect.getAttribute("class") ?? ""; const alignClass = alignSelect.getAttribute("class") ?? "";
expect(alignClass).toContain("bg-white"); expect(alignClass).toContain("bg-white");
expect(alignClass).toContain("text-slate-900"); expect(alignClass).toContain("text-slate-900");
tests/unit/ListPropertiesPanel.spec.tsx
+16 -16
View File
@@ -26,7 +26,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const textarea = screen.getByLabelText("리스트 아이템들"); const textarea = screen.getByLabelText("List items");
fireEvent.change(textarea, { target: { value: "첫째\n둘째" } }); fireEvent.change(textarea, { target: { value: "첫째\n둘째" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -49,7 +49,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("리스트 정렬"); const select = screen.getByLabelText("List alignment");
fireEvent.change(select, { target: { value: "center" } }); fireEvent.change(select, { target: { value: "center" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -70,7 +70,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("글자 크기 (px) 슬라이더"); const slider = screen.getByLabelText("Font size (px) 슬라이더");
fireEvent.change(slider, { target: { value: "20" } }); fireEvent.change(slider, { target: { value: "20" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -91,7 +91,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("줄 간격 슬라이더"); const slider = screen.getByLabelText("Line height 슬라이더");
fireEvent.change(slider, { target: { value: "1.8" } }); fireEvent.change(slider, { target: { value: "1.8" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -112,7 +112,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("리스트 텍스트 색상 HEX"); const hexInput = screen.getByLabelText("List text color HEX");
fireEvent.change(hexInput, { target: { value: "#112233" } }); fireEvent.change(hexInput, { target: { value: "#112233" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -121,7 +121,7 @@ describe("ListPropertiesPanel", () => {
); );
}); });
it("텍스트 색상 팔레트에서 \"없음\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => { it("텍스트 색상 팔레트에서 \"None\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
const updateBlock = vi.fn(); const updateBlock = vi.fn();
render( render(
@@ -134,11 +134,11 @@ describe("ListPropertiesPanel", () => {
); );
// 첫 번째 ColorPickerField(텍스트 색상)의 팔레트 버튼을 연다. // 첫 번째 ColorPickerField(텍스트 색상)의 팔레트 버튼을 연다.
const paletteButtons = screen.getAllByText("색상 팔레트"); const paletteButtons = screen.getAllByText("Color palette");
fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement); fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
// 팔레트에서 "없음" 항목을 버튼 role 기준으로 선택한다 (불릿 스타일 select 의 option "없음" 과 구분). // 팔레트에서 "None" 항목을 버튼 role 기준으로 선택한다 (불릿 스타일 select 의 option "none" 과 구분).
const noneButtons = screen.getAllByRole("button", { name: "없음" }); const noneButtons = screen.getAllByRole("button", { name: "None" });
fireEvent.click(noneButtons[0]); fireEvent.click(noneButtons[0]);
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -159,7 +159,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("리스트 텍스트 색상 HEX") as HTMLInputElement; const hexInput = screen.getByLabelText("List text color HEX") as HTMLInputElement;
expect(hexInput.value).toBe(""); expect(hexInput.value).toBe("");
}); });
@@ -175,7 +175,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("리스트 불릿 스타일"); const select = screen.getByLabelText("List bullet style");
fireEvent.change(select, { target: { value: "decimal" } }); fireEvent.change(select, { target: { value: "decimal" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -196,7 +196,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("리스트 불릿 스타일"); const select = screen.getByLabelText("List bullet style");
fireEvent.change(select, { target: { value: "none" } }); fireEvent.change(select, { target: { value: "none" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -217,7 +217,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("아이템 간 여백 (px) 슬라이더"); const slider = screen.getByLabelText("Item gap (px) 슬라이더");
fireEvent.change(slider, { target: { value: "16" } }); fireEvent.change(slider, { target: { value: "16" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -238,7 +238,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("리스트 정렬") as HTMLSelectElement; const select = screen.getByLabelText("List alignment") as HTMLSelectElement;
const className = select.getAttribute("class") ?? ""; const className = select.getAttribute("class") ?? "";
expect(className).toContain("bg-white"); expect(className).toContain("bg-white");
@@ -261,7 +261,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("리스트 불릿 스타일") as HTMLSelectElement; const select = screen.getByLabelText("List bullet style") as HTMLSelectElement;
const className = select.getAttribute("class") ?? ""; const className = select.getAttribute("class") ?? "";
expect(className).toContain("bg-white"); expect(className).toContain("bg-white");
@@ -284,7 +284,7 @@ describe("ListPropertiesPanel", () => {
/>, />,
); );
const textarea = screen.getByLabelText("리스트 아이템들") as HTMLTextAreaElement; const textarea = screen.getByLabelText("List items") as HTMLTextAreaElement;
const className = textarea.getAttribute("class") ?? ""; const className = textarea.getAttribute("class") ?? "";
// 라이트 모드: 흰 배경 + 어두운 텍스트 // 라이트 모드: 흰 배경 + 어두운 텍스트
tests/unit/LocaleProvider.spec.tsx
+56
View File
@@ -0,0 +1,56 @@
import { describe, it, expect, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { LocaleProvider, useAppLocale, useLocaleActions } from "@/features/i18n/LocaleProvider";
// LocaleProvider / useAppLocale / useLocaleActions TDD
// - initialLocale 로 전달된 로케일이 하위 컴포넌트에서 그대로 노출되는지 검증한다.
// - useLocaleActions 로 setLocale 을 호출하면 하위 컴포넌트의 로케일이 변경되어야 한다.
describe("LocaleProvider", () => {
afterEach(() => {
cleanup();
});
function LocaleConsumer() {
const locale = useAppLocale();
return <div data-testid="current-locale">{locale}</div>;
}
function LocaleSetterButton({ next }: { next: "en" | "ko" }) {
const { setLocale } = useLocaleActions();
return (
<button type="button" onClick={() => setLocale(next)}>
set-{next}
</button>
);
}
it("initialLocale 로 en 을 전달하면 하위 컴포넌트에서 en 로케일을 읽을 수 있어야 한다", () => {
render(
<LocaleProvider initialLocale="en">
<LocaleConsumer />
</LocaleProvider>,
);
const current = screen.getByTestId("current-locale");
expect(current.textContent).toBe("en");
});
it("setLocale 을 호출하면 하위 컴포넌트의 useAppLocale 결과가 업데이트되어야 한다", () => {
render(
<LocaleProvider initialLocale="en">
<LocaleConsumer />
<LocaleSetterButton next="ko" />
</LocaleProvider>,
);
const current = screen.getByTestId("current-locale");
expect(current.textContent).toBe("en");
fireEvent.click(screen.getByText("set-ko"));
expect(current.textContent).toBe("ko");
});
});
tests/unit/LocaleSwitcher.spec.tsx
+54
View File
@@ -0,0 +1,54 @@
import { describe, it, expect, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { LocaleProvider, useAppLocale } from "@/features/i18n/LocaleProvider";
import { LocaleSwitcher } from "@/features/i18n/LocaleSwitcher";
// LocaleSwitcher TDD
// - 현재 로케일에 따라 EN/KO 버튼 텍스트가 표시되어야 한다.
// - 버튼을 클릭하면 로케일이 토글되고, 하위 컴포넌트의 useAppLocale 결과도 함께 변경되어야 한다.
describe("LocaleSwitcher", () => {
afterEach(() => {
cleanup();
});
function LocaleConsumer() {
const locale = useAppLocale();
return <div data-testid="current-locale">{locale}</div>;
}
it("초기 로케일이 en 이면 버튼 텍스트는 EN 이어야 한다", () => {
render(
<LocaleProvider initialLocale="en">
<LocaleSwitcher />
<LocaleConsumer />
</LocaleProvider>,
);
const button = screen.getByRole("button", { name: "Toggle locale" });
const current = screen.getByTestId("current-locale");
expect(button.textContent).toContain("EN");
expect(current.textContent).toBe("en");
});
it("버튼을 클릭하면 로케일이 en/ko 사이에서 토글되어야 한다", () => {
render(
<LocaleProvider initialLocale="en">
<LocaleSwitcher />
<LocaleConsumer />
</LocaleProvider>,
);
const button = screen.getByRole("button", { name: "Toggle locale" });
const current = screen.getByTestId("current-locale");
expect(current.textContent).toBe("en");
expect(button.textContent).toContain("EN");
fireEvent.click(button);
expect(current.textContent).toBe("ko");
expect(button.textContent).toContain("KO");
});
});
tests/unit/LoginPage.spec.tsx
+9 -9
View File
@@ -54,9 +54,9 @@ describe("LoginPage", () => {
render(<LoginPage />); render(<LoginPage />);
const emailInput = screen.getByLabelText("이메일") as HTMLInputElement; const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement; const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
const submitButton = screen.getByRole("button", { name: "로그인" }); const submitButton = screen.getByRole("button", { name: "Log in" });
fireEvent.change(emailInput, { target: { value: "user@example.com" } }); fireEvent.change(emailInput, { target: { value: "user@example.com" } });
fireEvent.change(passwordInput, { target: { value: "securePass1" } }); fireEvent.change(passwordInput, { target: { value: "securePass1" } });
@@ -116,9 +116,9 @@ describe("LoginPage", () => {
render(<LoginPage />); render(<LoginPage />);
const emailInput = screen.getByLabelText("이메일") as HTMLInputElement; const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement; const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
const submitButton = screen.getByRole("button", { name: "로그인" }); const submitButton = screen.getByRole("button", { name: "Log in" });
fireEvent.change(emailInput, { target: { value: "user@example.com" } }); fireEvent.change(emailInput, { target: { value: "user@example.com" } });
fireEvent.change(passwordInput, { target: { value: "wrongpass" } }); fireEvent.change(passwordInput, { target: { value: "wrongpass" } });
@@ -179,8 +179,8 @@ describe("LoginPage", () => {
render(<LoginPage />); render(<LoginPage />);
const emailInput = screen.getByLabelText("이메일") as HTMLInputElement; const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement; const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
const emailClass = emailInput.className; const emailClass = emailInput.className;
const passwordClass = passwordInput.className; const passwordClass = passwordInput.className;
@@ -215,7 +215,7 @@ describe("LoginPage", () => {
const html = document.documentElement; const html = document.documentElement;
html.classList.remove("dark"); html.classList.remove("dark");
const themeToggleButton = await screen.findByRole("button", { name: "테마 전환" }); const themeToggleButton = await screen.findByRole("button", { name: "Toggle theme" });
expect(html.classList.contains("dark")).toBe(false); expect(html.classList.contains("dark")).toBe(false);
tests/unit/PreviewExport.spec.tsx
+3 -3
View File
@@ -65,7 +65,7 @@ describe("PreviewPage - ZIP Export", () => {
it("프리뷰 헤더에 프로젝트 목록 링크가 노출되고 /projects 로 연결되어야 한다", () => { it("프리뷰 헤더에 프로젝트 목록 링크가 노출되고 /projects 로 연결되어야 한다", () => {
render(<PreviewPage />); render(<PreviewPage />);
const link = screen.getByText("프로젝트 목록"); const link = screen.getByText("Projects");
expect(link).toBeTruthy(); expect(link).toBeTruthy();
expect(link.closest("a")?.getAttribute("href")).toBe("/projects"); expect(link.closest("a")?.getAttribute("href")).toBe("/projects");
}); });
@@ -73,7 +73,7 @@ describe("PreviewPage - ZIP Export", () => {
it("프리뷰 헤더에 ZIP Export 버튼이 노출되어야 한다", () => { it("프리뷰 헤더에 ZIP Export 버튼이 노출되어야 한다", () => {
render(<PreviewPage />); render(<PreviewPage />);
const exportButton = screen.getByText("페이지 파일로 내보내기 (ZIP)"); const exportButton = screen.getByText("Export as page files (ZIP)");
expect(exportButton).toBeTruthy(); expect(exportButton).toBeTruthy();
}); });
@@ -88,7 +88,7 @@ describe("PreviewPage - ZIP Export", () => {
render(<PreviewPage />); render(<PreviewPage />);
const exportButton = screen.getByText("페이지 파일로 내보내기 (ZIP)"); const exportButton = screen.getByText("Export as page files (ZIP)");
fireEvent.click(exportButton); fireEvent.click(exportButton);
await waitFor(() => { await waitFor(() => {
tests/unit/ProjectPropertiesPanel.seo.spec.tsx
+4 -4
View File
@@ -41,7 +41,7 @@ describe("ProjectPropertiesPanel SEO 메타", () => {
it("SEO 타이틀 입력을 변경하면 seoTitle 이 updateProjectConfig 로 전달되어야 한다", () => { it("SEO 타이틀 입력을 변경하면 seoTitle 이 updateProjectConfig 로 전달되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const input = screen.getByLabelText("SEO 타이틀") as HTMLInputElement; const input = screen.getByLabelText("SEO title") as HTMLInputElement;
fireEvent.change(input, { target: { value: "새 SEO 타이틀" } }); fireEvent.change(input, { target: { value: "새 SEO 타이틀" } });
@@ -51,7 +51,7 @@ describe("ProjectPropertiesPanel SEO 메타", () => {
it("메타 디스크립션 입력을 변경하면 seoDescription 이 updateProjectConfig 로 전달되어야 한다", () => { it("메타 디스크립션 입력을 변경하면 seoDescription 이 updateProjectConfig 로 전달되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const textarea = screen.getByLabelText("메타 디스크립션") as HTMLTextAreaElement; const textarea = screen.getByLabelText("Meta description") as HTMLTextAreaElement;
fireEvent.change(textarea, { target: { value: "SEO 설명" } }); fireEvent.change(textarea, { target: { value: "SEO 설명" } });
@@ -63,7 +63,7 @@ describe("ProjectPropertiesPanel SEO 메타", () => {
it("OG/Twitter 이미지 URL 입력을 변경하면 seoOgImageUrl 이 updateProjectConfig 로 전달되어야 한다", () => { it("OG/Twitter 이미지 URL 입력을 변경하면 seoOgImageUrl 이 updateProjectConfig 로 전달되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const input = screen.getByLabelText("OG/Twitter 이미지 URL") as HTMLInputElement; const input = screen.getByLabelText("OG/Twitter image URL") as HTMLInputElement;
fireEvent.change(input, { target: { value: "https://example.com/og.png" } }); fireEvent.change(input, { target: { value: "https://example.com/og.png" } });
@@ -88,7 +88,7 @@ describe("ProjectPropertiesPanel SEO 메타", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const checkbox = screen.getByLabelText( const checkbox = screen.getByLabelText(
"검색 엔진에 노출하지 않기 (noindex)", "Hide from search engines (noindex)",
) as HTMLInputElement; ) as HTMLInputElement;
expect(checkbox.checked).toBe(false); expect(checkbox.checked).toBe(false);
tests/unit/ProjectPropertiesPanel.spec.tsx
+19 -19
View File
@@ -7,7 +7,7 @@ let mockState: { projectConfig: ProjectConfig; updateProjectConfig: ReturnType<t
beforeEach(() => { beforeEach(() => {
const baseConfig: ProjectConfig = { const baseConfig: ProjectConfig = {
title: "프로젝트", title: "Project",
slug: "project", slug: "project",
canvasPreset: "full", canvasPreset: "full",
canvasWidthPx: 1024, canvasWidthPx: 1024,
@@ -37,7 +37,7 @@ describe("ProjectPropertiesPanel", () => {
it("캔버스 너비 프리셋을 변경하면 canvasPreset/canvasWidthPx 가 업데이트되어야 한다", () => { it("캔버스 너비 프리셋을 변경하면 canvasPreset/canvasWidthPx 가 업데이트되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement; const select = screen.getByLabelText("Canvas width 프리셋") as HTMLSelectElement;
fireEvent.change(select, { target: { value: "mobile" } }); fireEvent.change(select, { target: { value: "mobile" } });
@@ -47,7 +47,7 @@ describe("ProjectPropertiesPanel", () => {
it("태블릿 프리셋을 선택하면 canvasPreset=tablet 과 canvasWidthPx=768 로 업데이트되어야 한다", () => { it("태블릿 프리셋을 선택하면 canvasPreset=tablet 과 canvasWidthPx=768 로 업데이트되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement; const select = screen.getByLabelText("Canvas width 프리셋") as HTMLSelectElement;
fireEvent.change(select, { target: { value: "tablet" } }); fireEvent.change(select, { target: { value: "tablet" } });
@@ -57,7 +57,7 @@ describe("ProjectPropertiesPanel", () => {
it("데스크톱 프리셋을 선택하면 canvasPreset=desktop 과 canvasWidthPx=1200 으로 업데이트되어야 한다", () => { it("데스크톱 프리셋을 선택하면 canvasPreset=desktop 과 canvasWidthPx=1200 으로 업데이트되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement; const select = screen.getByLabelText("Canvas width 프리셋") as HTMLSelectElement;
fireEvent.change(select, { target: { value: "desktop" } }); fireEvent.change(select, { target: { value: "desktop" } });
@@ -67,7 +67,7 @@ describe("ProjectPropertiesPanel", () => {
it("캔버스 너비를 390 으로 입력하면 mobile 프리셋으로 동기화되어야 한다", () => { it("캔버스 너비를 390 으로 입력하면 mobile 프리셋으로 동기화되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement; const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
fireEvent.change(input, { target: { value: "390" } }); fireEvent.change(input, { target: { value: "390" } });
@@ -77,7 +77,7 @@ describe("ProjectPropertiesPanel", () => {
it("캔버스 너비를 768 로 입력하면 tablet 프리셋으로 동기화되어야 한다", () => { it("캔버스 너비를 768 로 입력하면 tablet 프리셋으로 동기화되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement; const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
fireEvent.change(input, { target: { value: "768" } }); fireEvent.change(input, { target: { value: "768" } });
@@ -87,7 +87,7 @@ describe("ProjectPropertiesPanel", () => {
it("캔버스 너비를 1200 으로 입력하면 desktop 프리셋으로 동기화되어야 한다", () => { it("캔버스 너비를 1200 으로 입력하면 desktop 프리셋으로 동기화되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement; const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
fireEvent.change(input, { target: { value: "1200" } }); fireEvent.change(input, { target: { value: "1200" } });
@@ -97,7 +97,7 @@ describe("ProjectPropertiesPanel", () => {
it("캔버스 너비를 커스텀 값으로 입력하면 canvasPreset=custom 과 함께 canvasWidthPx 가 설정되어야 한다", () => { it("캔버스 너비를 커스텀 값으로 입력하면 canvasPreset=custom 과 함께 canvasWidthPx 가 설정되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement; const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
fireEvent.change(input, { target: { value: "1000" } }); fireEvent.change(input, { target: { value: "1000" } });
@@ -107,7 +107,7 @@ describe("ProjectPropertiesPanel", () => {
it("캔버스 배경색 HEX 입력을 변경하면 canvasBgColorHex 가 업데이트되어야 한다", () => { it("캔버스 배경색 HEX 입력을 변경하면 canvasBgColorHex 가 업데이트되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const input = screen.getByLabelText("캔버스 배경색 HEX") as HTMLInputElement; const input = screen.getByLabelText("Canvas background HEX") as HTMLInputElement;
fireEvent.change(input, { target: { value: "#123456" } }); fireEvent.change(input, { target: { value: "#123456" } });
@@ -117,35 +117,35 @@ describe("ProjectPropertiesPanel", () => {
it("페이지 배경색 HEX 입력을 변경하면 bodyBgColorHex 가 업데이트되어야 한다", () => { it("페이지 배경색 HEX 입력을 변경하면 bodyBgColorHex 가 업데이트되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const input = screen.getByLabelText("페이지 배경색 HEX") as HTMLInputElement; const input = screen.getByLabelText("Page background HEX") as HTMLInputElement;
fireEvent.change(input, { target: { value: "#654321" } }); fireEvent.change(input, { target: { value: "#654321" } });
expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "#654321" }); expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "#654321" });
}); });
it("캔버스 배경색 팔레트에서 \"없음\" 을 선택하면 canvasBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => { it("캔버스 배경색 팔레트에서 \"None\" 을 선택하면 canvasBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
// 첫 번째 ColorPickerField(캔버스 배경색)의 팔레트 버튼을 연다. // 첫 번째 ColorPickerField(캔버스 배경색)의 팔레트 버튼을 연다.
const paletteButtons = screen.getAllByText("색상 팔레트"); const paletteButtons = screen.getAllByText("Color palette");
fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement); fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
// 팔레트에서 "없음" 항목을 선택한다. // 팔레트에서 "None" 항목을 선택한다.
const noneButton = screen.getByText("없음"); const noneButton = screen.getByText("None");
fireEvent.click(noneButton); fireEvent.click(noneButton);
expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasBgColorHex: "" }); expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasBgColorHex: "" });
}); });
it("페이지 배경색 팔레트에서 \"없음\" 을 선택하면 bodyBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => { it("페이지 배경색 팔레트에서 \"None\" 을 선택하면 bodyBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
// 두 번째 ColorPickerField(페이지 배경색)의 팔레트 버튼은 기본 선택 팔레트 라벨("어두운 텍스트")를 기준으로 찾는다. // 두 번째 ColorPickerField(페이지 배경색)의 팔레트 버튼은 기본 선택 팔레트 라벨("Dark text")를 기준으로 찾는다.
const darkLabel = screen.getByText("어두운 텍스트"); const darkLabel = screen.getByText("Dark text");
fireEvent.click(darkLabel.closest("button") as HTMLButtonElement); fireEvent.click(darkLabel.closest("button") as HTMLButtonElement);
const noneButton = screen.getByText("없음"); const noneButton = screen.getByText("None");
fireEvent.click(noneButton); fireEvent.click(noneButton);
expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "" }); expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "" });
@@ -154,7 +154,7 @@ describe("ProjectPropertiesPanel", () => {
it("프로젝트 제목 입력은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => { it("프로젝트 제목 입력은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
render(<ProjectPropertiesPanel />); render(<ProjectPropertiesPanel />);
const input = screen.getByLabelText("프로젝트 제목") as HTMLInputElement; const input = screen.getByLabelText("Project title") as HTMLInputElement;
const className = input.getAttribute("class") ?? ""; const className = input.getAttribute("class") ?? "";
// 라이트 모드: 흰 배경 + 어두운 텍스트 // 라이트 모드: 흰 배경 + 어두운 텍스트
tests/unit/ProjectsPage.spec.tsx
+49 -33
View File
@@ -69,12 +69,12 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(await screen.findByText("테스트 프로젝트 B")).toBeTruthy(); expect(await screen.findByText("테스트 프로젝트 B")).toBeTruthy();
expect(screen.getByText("test-project-b")).toBeTruthy(); expect(screen.getByText("test-project-b")).toBeTruthy();
const editLinks = screen.getAllByText("편집"); const editLinks = screen.getAllByText("Edit");
expect(editLinks).toHaveLength(2); expect(editLinks).toHaveLength(2);
expect(editLinks[0].closest("a")?.getAttribute("href")).toBe("/editor?slug=test-project-a"); expect(editLinks[0].closest("a")?.getAttribute("href")).toBe("/editor?slug=test-project-a");
expect(editLinks[1].closest("a")?.getAttribute("href")).toBe("/editor?slug=test-project-b"); expect(editLinks[1].closest("a")?.getAttribute("href")).toBe("/editor?slug=test-project-b");
const previewLinks = screen.getAllByText("미리보기"); const previewLinks = screen.getAllByText("Preview");
expect(previewLinks).toHaveLength(2); expect(previewLinks).toHaveLength(2);
expect(previewLinks[0].closest("a")?.getAttribute("href")).toBe("/preview?slug=test-project-a"); expect(previewLinks[0].closest("a")?.getAttribute("href")).toBe("/preview?slug=test-project-a");
expect(previewLinks[1].closest("a")?.getAttribute("href")).toBe("/preview?slug=test-project-b"); expect(previewLinks[1].closest("a")?.getAttribute("href")).toBe("/preview?slug=test-project-b");
@@ -107,7 +107,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(fetchMock).toHaveBeenCalledTimes(1); expect(fetchMock).toHaveBeenCalledTimes(1);
}); });
const link = screen.getByText("전체 제출 내역"); const link = screen.getByText("All submissions");
expect(link).toBeTruthy(); expect(link).toBeTruthy();
expect(link.closest("a")?.getAttribute("href")).toBe("/projects/submissions"); expect(link.closest("a")?.getAttribute("href")).toBe("/projects/submissions");
}); });
@@ -139,7 +139,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(fetchMock).toHaveBeenCalledTimes(1); expect(fetchMock).toHaveBeenCalledTimes(1);
}); });
const link = screen.getByText("대시보드"); const link = screen.getByText("Dashboard");
expect(link).toBeTruthy(); expect(link).toBeTruthy();
expect(link.closest("a")?.getAttribute("href")).toBe("/dashboard"); expect(link.closest("a")?.getAttribute("href")).toBe("/dashboard");
}); });
@@ -220,31 +220,31 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(toolbarClass).toContain("text-slate-600"); expect(toolbarClass).toContain("text-slate-600");
expect(toolbarClass).toContain("dark:text-slate-300"); expect(toolbarClass).toContain("dark:text-slate-300");
const editLink = screen.getByText("편집").closest("a") as HTMLElement | null; const editLink = screen.getByText("Edit").closest("a") as HTMLElement | null;
expect(editLink).not.toBeNull(); expect(editLink).not.toBeNull();
const editClass = editLink!.className; const editClass = editLink!.className;
expect(editClass).toContain("text-sky-600"); expect(editClass).toContain("text-sky-600");
expect(editClass).toContain("dark:text-sky-300"); expect(editClass).toContain("dark:text-sky-300");
const previewLink = screen.getByText("미리보기").closest("a") as HTMLElement | null; const previewLink = screen.getByText("Preview").closest("a") as HTMLElement | null;
expect(previewLink).not.toBeNull(); expect(previewLink).not.toBeNull();
const previewClass = previewLink!.className; const previewClass = previewLink!.className;
expect(previewClass).toContain("text-slate-600"); expect(previewClass).toContain("text-slate-600");
expect(previewClass).toContain("dark:text-slate-300"); expect(previewClass).toContain("dark:text-slate-300");
const submissionsLink = screen.getByText("폼 제출 내역").closest("a") as HTMLElement | null; const submissionsLink = screen.getByText("Form submissions").closest("a") as HTMLElement | null;
expect(submissionsLink).not.toBeNull(); expect(submissionsLink).not.toBeNull();
const submissionsClass = submissionsLink!.className; const submissionsClass = submissionsLink!.className;
expect(submissionsClass).toContain("text-emerald-600"); expect(submissionsClass).toContain("text-emerald-600");
expect(submissionsClass).toContain("dark:text-emerald-300"); expect(submissionsClass).toContain("dark:text-emerald-300");
const deleteButton = screen.getByText("삭제").closest("button") as HTMLElement | null; const deleteButton = screen.getByText("Delete").closest("button") as HTMLElement | null;
expect(deleteButton).not.toBeNull(); expect(deleteButton).not.toBeNull();
const deleteClass = deleteButton!.className; const deleteClass = deleteButton!.className;
expect(deleteClass).toContain("text-red-600"); expect(deleteClass).toContain("text-red-600");
expect(deleteClass).toContain("dark:text-red-300"); expect(deleteClass).toContain("dark:text-red-300");
const prevButton = screen.getByRole("button", { name: "이전" }); const prevButton = screen.getByRole("button", { name: "Previous" });
const prevClass = prevButton.className; const prevClass = prevButton.className;
expect(prevClass).toContain("border-slate-300"); expect(prevClass).toContain("border-slate-300");
expect(prevClass).toContain("text-slate-700"); expect(prevClass).toContain("text-slate-700");
@@ -279,9 +279,9 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(fetchMock).toHaveBeenCalledTimes(1); expect(fetchMock).toHaveBeenCalledTimes(1);
}); });
const dashboardLink = await screen.findByRole("link", { name: "대시보드" }); const dashboardLink = await screen.findByRole("link", { name: "Dashboard" });
const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" }); const projectsLink = await screen.findByRole("link", { name: "Projects" });
const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" }); const submissionsLink = await screen.findByRole("link", { name: "All submissions" });
expect(projectsLink.closest("a")?.getAttribute("href")).toBe("/projects"); expect(projectsLink.closest("a")?.getAttribute("href")).toBe("/projects");
expect(projectsLink.closest("a")?.getAttribute("aria-current")).toBe("page"); expect(projectsLink.closest("a")?.getAttribute("aria-current")).toBe("page");
@@ -320,7 +320,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
const html = document.documentElement; const html = document.documentElement;
html.classList.remove("dark"); html.classList.remove("dark");
const themeToggleButton = await screen.findByRole("button", { name: "테마 전환" }); const themeToggleButton = await screen.findByRole("button", { name: "Toggle theme" });
expect(html.classList.contains("dark")).toBe(false); expect(html.classList.contains("dark")).toBe(false);
@@ -367,7 +367,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(await screen.findByText("테스트 프로젝트 A")).toBeTruthy(); expect(await screen.findByText("테스트 프로젝트 A")).toBeTruthy();
expect(await screen.findByText("테스트 프로젝트 B")).toBeTruthy(); expect(await screen.findByText("테스트 프로젝트 B")).toBeTruthy();
const submissionLinks = screen.getAllByText("폼 제출 내역"); const submissionLinks = screen.getAllByText("Form submissions");
expect(submissionLinks).toHaveLength(2); expect(submissionLinks).toHaveLength(2);
expect(submissionLinks[0].closest("a")?.getAttribute("href")).toBe( expect(submissionLinks[0].closest("a")?.getAttribute("href")).toBe(
"/projects/test-project-a/submissions", "/projects/test-project-a/submissions",
@@ -428,7 +428,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(await screen.findByText("테스트 프로젝트 A")).toBeTruthy(); expect(await screen.findByText("테스트 프로젝트 A")).toBeTruthy();
const deleteButtons = screen.getAllByText("삭제"); const deleteButtons = screen.getAllByText("Delete");
expect(deleteButtons.length).toBeGreaterThan(0); expect(deleteButtons.length).toBeGreaterThan(0);
deleteButtons[0].click(); deleteButtons[0].click();
@@ -482,8 +482,8 @@ describe("ProjectsPage - 프로젝트 목록", () => {
// 상단 툴바에서 선택 삭제와 새 프로젝트 만들기 버튼이 함께 보여야 한다. // 상단 툴바에서 선택 삭제와 새 프로젝트 만들기 버튼이 함께 보여야 한다.
const toolbar = await screen.findByTestId("projects-toolbar"); const toolbar = await screen.findByTestId("projects-toolbar");
expect(toolbar.querySelector("button[type='button']")?.textContent).toContain("선택 삭제"); expect(toolbar.querySelector("button[type='button']")?.textContent).toContain("Delete selected");
expect(toolbar.querySelector("a[href='/editor?new=1']")?.textContent).toContain("새 프로젝트 만들기"); expect(toolbar.querySelector("a[href='/editor?new=1']")?.textContent).toContain("Create new project");
}); });
it("체크박스로 여러 프로젝트를 선택한 뒤 '선택 삭제' 버튼으로 일괄 삭제할 수 있어야 한다", async () => { it("체크박스로 여러 프로젝트를 선택한 뒤 '선택 삭제' 버튼으로 일괄 삭제할 수 있어야 한다", async () => {
@@ -544,13 +544,20 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(await screen.findByText("테스트 프로젝트 A")).toBeTruthy(); expect(await screen.findByText("테스트 프로젝트 A")).toBeTruthy();
expect(await screen.findByText("테스트 프로젝트 B")).toBeTruthy(); expect(await screen.findByText("테스트 프로젝트 B")).toBeTruthy();
const checkboxA = screen.getByLabelText("테스트 프로젝트 A 선택"); const rowA = (await screen.findByText("테스트 프로젝트 A")).closest("tr") as HTMLElement | null;
const checkboxB = screen.getByLabelText("테스트 프로젝트 B 선택"); const rowB = (await screen.findByText("테스트 프로젝트 B")).closest("tr") as HTMLElement | null;
expect(rowA).not.toBeNull();
expect(rowB).not.toBeNull();
fireEvent.click(checkboxA); const checkboxA = rowA!.querySelector("input[type='checkbox']") as HTMLInputElement | null;
fireEvent.click(checkboxB); const checkboxB = rowB!.querySelector("input[type='checkbox']") as HTMLInputElement | null;
expect(checkboxA).not.toBeNull();
expect(checkboxB).not.toBeNull();
const bulkDeleteButton = screen.getByText("선택 삭제"); fireEvent.click(checkboxA!);
fireEvent.click(checkboxB!);
const bulkDeleteButton = screen.getByText("Delete selected");
fireEvent.click(bulkDeleteButton); fireEvent.click(bulkDeleteButton);
await waitFor(() => { await waitFor(() => {
@@ -635,10 +642,10 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(fetchMock).toHaveBeenCalled(); expect(fetchMock).toHaveBeenCalled();
}); });
const menuButton = await screen.findByRole("button", { name: "메뉴" }); const menuButton = await screen.findByRole("button", { name: "Menu" });
fireEvent.click(menuButton); fireEvent.click(menuButton);
const logoutButton = await screen.findByRole("button", { name: "로그아웃" }); const logoutButton = await screen.findByRole("button", { name: "Log out" });
fireEvent.click(logoutButton); fireEvent.click(logoutButton);
await waitFor(() => { await waitFor(() => {
@@ -669,7 +676,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect( expect(
await screen.findByText( await screen.findByText(
"프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.", "An error occurred while loading your projects. Please try again later.",
), ),
).toBeTruthy(); ).toBeTruthy();
}); });
@@ -714,11 +721,13 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(await screen.findByText("삭제 실패 프로젝트")).toBeTruthy(); expect(await screen.findByText("삭제 실패 프로젝트")).toBeTruthy();
const deleteButton = screen.getByText("삭제"); const deleteButton = screen.getByText("Delete");
fireEvent.click(deleteButton); fireEvent.click(deleteButton);
expect( expect(
await screen.findByText("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."), await screen.findByText(
"An error occurred while deleting the project. Please try again later.",
),
).toBeTruthy(); ).toBeTruthy();
// 삭제 실패이므로 여전히 목록에 남아 있어야 한다. // 삭제 실패이므로 여전히 목록에 남아 있어야 한다.
@@ -780,18 +789,25 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(await screen.findByText("성공 프로젝트")).toBeTruthy(); expect(await screen.findByText("성공 프로젝트")).toBeTruthy();
expect(await screen.findByText("실패 프로젝트")).toBeTruthy(); expect(await screen.findByText("실패 프로젝트")).toBeTruthy();
const checkboxSuccess = screen.getByLabelText("성공 프로젝트 선택"); const successRow = (await screen.findByText("성공 프로젝트")).closest("tr") as HTMLElement | null;
const checkboxFail = screen.getByLabelText("실패 프로젝트 선택"); const failRow = (await screen.findByText("실패 프로젝트")).closest("tr") as HTMLElement | null;
expect(successRow).not.toBeNull();
expect(failRow).not.toBeNull();
fireEvent.click(checkboxSuccess); const checkboxSuccess = successRow!.querySelector("input[type='checkbox']") as HTMLInputElement | null;
fireEvent.click(checkboxFail); const checkboxFail = failRow!.querySelector("input[type='checkbox']") as HTMLInputElement | null;
expect(checkboxSuccess).not.toBeNull();
expect(checkboxFail).not.toBeNull();
const bulkDeleteButton = screen.getByText("선택 삭제"); fireEvent.click(checkboxSuccess!);
fireEvent.click(checkboxFail!);
const bulkDeleteButton = screen.getByText("Delete selected");
fireEvent.click(bulkDeleteButton); fireEvent.click(bulkDeleteButton);
expect( expect(
await screen.findByText( await screen.findByText(
"일부 프로젝트 삭제에 실패했습니다. 페이지를 새로고침한 뒤 목록을 확인해 주세요.", "Failed to delete some projects. Please refresh and review the list.",
), ),
).toBeTruthy(); ).toBeTruthy();
tests/unit/PropertiesSidebar.spec.tsx
+7 -7
View File
@@ -52,8 +52,8 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
const helpButton = screen.getByRole("button", { name: "HELP" }); const helpButton = screen.getByRole("button", { name: "HELP" });
fireEvent.click(helpButton); fireEvent.click(helpButton);
expect(screen.getByText("텍스트 블록 튜토리얼")).toBeDefined(); expect(screen.getByText("Text block tutorial")).toBeDefined();
expect(screen.getByText(/제목과 본문 텍스트를 입력할 때 사용하는 기본 블록입니다/)).toBeDefined(); expect(screen.getByText(/basic block for headings and body text/i)).toBeDefined();
}); });
it("HELP 모달은 라이트/다크 테마에 맞는 카드 배경/테두리/텍스트 클래스를 사용해야 한다", () => { it("HELP 모달은 라이트/다크 테마에 맞는 카드 배경/테두리/텍스트 클래스를 사용해야 한다", () => {
@@ -65,7 +65,7 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
fireEvent.click(helpButton); fireEvent.click(helpButton);
// 모달 카드 컨테이너 (제목 h3 → 헤더 div → 카드 div 순으로 감싸져 있으므로 parentElement.parentElement 사용) // 모달 카드 컨테이너 (제목 h3 → 헤더 div → 카드 div 순으로 감싸져 있으므로 parentElement.parentElement 사용)
const heading = screen.getByText("텍스트 블록 튜토리얼"); const heading = screen.getByText("Text block tutorial");
const modalCard = heading.parentElement?.parentElement as HTMLElement | null; const modalCard = heading.parentElement?.parentElement as HTMLElement | null;
expect(modalCard).not.toBeNull(); expect(modalCard).not.toBeNull();
const className = modalCard!.getAttribute("class") ?? ""; const className = modalCard!.getAttribute("class") ?? "";
@@ -88,7 +88,7 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
const helpButton = screen.getByRole("button", { name: "HELP" }); const helpButton = screen.getByRole("button", { name: "HELP" });
fireEvent.click(helpButton); fireEvent.click(helpButton);
const closeButton = screen.getByRole("button", { name: "닫기" }); const closeButton = screen.getByRole("button", { name: "Close" });
fireEvent.click(closeButton); fireEvent.click(closeButton);
expect(screen.queryByText("텍스트 블록 튜토리얼")).toBeNull(); expect(screen.queryByText("텍스트 블록 튜토리얼")).toBeNull();
@@ -99,8 +99,8 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />); render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);
const deleteButton = screen.getByRole("button", { name: "블록 삭제" }); const deleteButton = screen.getByRole("button", { name: "Delete block" });
const duplicateButton = screen.getByRole("button", { name: "블록 복제" }); const duplicateButton = screen.getByRole("button", { name: "Duplicate block" });
const helpButton = screen.getByRole("button", { name: "HELP" }); const helpButton = screen.getByRole("button", { name: "HELP" });
for (const btn of [deleteButton, duplicateButton, helpButton]) { for (const btn of [deleteButton, duplicateButton, helpButton]) {
@@ -119,7 +119,7 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />); render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);
const textarea = screen.getByLabelText("선택한 텍스트 블록 내용") as HTMLTextAreaElement; const textarea = screen.getByLabelText("Selected text block content") as HTMLTextAreaElement;
const className = textarea.getAttribute("class") ?? ""; const className = textarea.getAttribute("class") ?? "";
// 라이트 모드: 흰 배경 + 어두운 텍스트 // 라이트 모드: 흰 배경 + 어두운 텍스트
tests/unit/PublicPageRendererFooter.spec.tsx
+8 -6
View File
@@ -3,6 +3,8 @@ import { render, screen, cleanup } from "@testing-library/react";
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer"; import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
import { createFooterTemplateBlocks } from "@/app/editor/templates/footerTemplate"; import { createFooterTemplateBlocks } from "@/app/editor/templates/footerTemplate";
import type { Block } from "@/features/editor/state/editorStore"; import type { Block } from "@/features/editor/state/editorStore";
import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
import { DEFAULT_LOCALE } from "@/features/i18n/locale";
// PublicPageRenderer 푸터 템플릿 TDD // PublicPageRenderer 푸터 템플릿 TDD
// - footerTemplate 로 생성한 섹션이 프리뷰에서 섹션/텍스트 구조로 올바르게 렌더되는지 검증한다. // - footerTemplate 로 생성한 섹션이 프리뷰에서 섹션/텍스트 구조로 올바르게 렌더되는지 검증한다.
@@ -16,8 +18,8 @@ describe("PublicPageRenderer - 푸터 템플릿", () => {
const sectionId = "footer_preview_section"; const sectionId = "footer_preview_section";
let i = 0; let i = 0;
const createId = () => `footer_${++i}`; const createId = () => `footer_${++i}`;
const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks } = createFooterTemplateBlocks({ sectionId, createId }); const { blocks } = createFooterTemplateBlocks({ sectionId, createId, messages: tpl.footer });
render(<PublicPageRenderer blocks={blocks as Block[]} />); render(<PublicPageRenderer blocks={blocks as Block[]} />);
@@ -25,9 +27,9 @@ describe("PublicPageRenderer - 푸터 템플릿", () => {
expect(section.getAttribute("data-section-id")).toBe(sectionId); expect(section.getAttribute("data-section-id")).toBe(sectionId);
expect(screen.getByText("MyLanding")).toBeTruthy(); expect(screen.getByText("MyLanding")).toBeTruthy();
expect(screen.getByText("더 나은 웹사이트를 위한 최고의 선택.")).toBeTruthy(); expect(screen.getByText("The best choice for building better websites.")).toBeTruthy();
expect(screen.getByText(/서비스 소개/)).toBeTruthy(); expect(screen.getByText(/Product/)).toBeTruthy();
expect(screen.getByText(/문의하기/)).toBeTruthy(); expect(screen.getByText(/Contact/)).toBeTruthy();
expect(screen.getByText(/© 2025 MyLanding\./)).toBeTruthy(); expect(screen.getByText(/ 2025 MyLanding\./)).toBeTruthy();
}); });
}); });
tests/unit/PublicPageRendererFormSubmitMessages.spec.tsx
+25 -25
View File
@@ -23,8 +23,8 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
props: { props: {
kind: "contact", kind: "contact",
submitTarget: "internal", submitTarget: "internal",
successMessage: "폼 성공 메시지 (config)", successMessage: "Form success message (config)",
errorMessage: "폼 에러 메시지 (config)", errorMessage: "Form error message (config)",
fieldIds: ["field_name"], fieldIds: ["field_name"],
requiredFieldIds: ["field_name"], requiredFieldIds: ["field_name"],
submitButtonId: "submit_btn", submitButtonId: "submit_btn",
@@ -34,7 +34,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
id: "field_name", id: "field_name",
type: "formInput", type: "formInput",
props: { props: {
label: "이름", label: "Name",
formFieldName: "name", formFieldName: "name",
required: true, required: true,
} as any, } as any,
@@ -43,7 +43,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
id: "submit_btn", id: "submit_btn",
type: "button", type: "button",
props: { props: {
label: "제출하기", label: "Submit",
href: "#", href: "#",
} as any, } as any,
}, },
@@ -60,10 +60,10 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
render(<PublicPageRenderer blocks={blocks} />); render(<PublicPageRenderer blocks={blocks} />);
const nameInput = screen.getByLabelText("이름") as HTMLInputElement; const nameInput = screen.getByLabelText("Name") as HTMLInputElement;
fireEvent.change(nameInput, { target: { value: "홍길동" } }); fireEvent.change(nameInput, { target: { value: "홍길동" } });
const submitButton = screen.getByRole("link", { name: "제출하기" }); const submitButton = screen.getByRole("link", { name: "Submit" });
expect(submitButton).toBeTruthy(); expect(submitButton).toBeTruthy();
fireEvent.click(submitButton); fireEvent.click(submitButton);
@@ -73,7 +73,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
}); });
await waitFor(() => { await waitFor(() => {
const msg = screen.getByText("폼 성공 메시지 (config)"); const msg = screen.getByText("Form success message (config)");
expect(msg).toBeTruthy(); expect(msg).toBeTruthy();
}); });
}); });
@@ -86,8 +86,8 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
props: { props: {
kind: "contact", kind: "contact",
submitTarget: "internal", submitTarget: "internal",
successMessage: "폼 성공 메시지 (config)", successMessage: "Form success message (config)",
errorMessage: "폼 에러 메시지 (config)", errorMessage: "Form error message (config)",
fieldIds: ["field_name"], fieldIds: ["field_name"],
requiredFieldIds: ["field_name"], requiredFieldIds: ["field_name"],
submitButtonId: "submit_btn", submitButtonId: "submit_btn",
@@ -97,7 +97,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
id: "field_name", id: "field_name",
type: "formInput", type: "formInput",
props: { props: {
label: "이름", label: "Name",
formFieldName: "name", formFieldName: "name",
required: true, required: true,
} as any, } as any,
@@ -106,7 +106,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
id: "submit_btn", id: "submit_btn",
type: "button", type: "button",
props: { props: {
label: "제출하기", label: "Submit",
href: "#", href: "#",
} as any, } as any,
}, },
@@ -123,10 +123,10 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
render(<PublicPageRenderer blocks={blocks} />); render(<PublicPageRenderer blocks={blocks} />);
const nameInput = screen.getByLabelText("이름") as HTMLInputElement; const nameInput = screen.getByLabelText("Name") as HTMLInputElement;
fireEvent.change(nameInput, { target: { value: "홍길동" } }); fireEvent.change(nameInput, { target: { value: "홍길동" } });
const submitButton = screen.getByRole("link", { name: "제출하기" }); const submitButton = screen.getByRole("link", { name: "Submit" });
expect(submitButton).toBeTruthy(); expect(submitButton).toBeTruthy();
fireEvent.click(submitButton); fireEvent.click(submitButton);
@@ -136,7 +136,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
}); });
await waitFor(() => { await waitFor(() => {
const errorMsg = screen.getByText("폼 에러 메시지 (config)"); const errorMsg = screen.getByText("Form error message (config)");
expect(errorMsg).toBeTruthy(); expect(errorMsg).toBeTruthy();
}); });
}); });
@@ -149,7 +149,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
props: { props: {
kind: "contact", kind: "contact",
submitTarget: "internal", submitTarget: "internal",
successMessage: "폼 성공 메시지 (config)", successMessage: "Form success message (config)",
fieldIds: ["field_email"], fieldIds: ["field_email"],
requiredFieldIds: ["field_email"], requiredFieldIds: ["field_email"],
submitButtonId: "submit_btn", submitButtonId: "submit_btn",
@@ -159,7 +159,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
id: "field_email", id: "field_email",
type: "formInput", type: "formInput",
props: { props: {
label: "이메일", label: "Email",
formFieldName: "email", formFieldName: "email",
required: true, required: true,
} as any, } as any,
@@ -168,7 +168,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
id: "submit_btn", id: "submit_btn",
type: "button", type: "button",
props: { props: {
label: "제출하기", label: "Submit",
href: "#", href: "#",
} as any, } as any,
}, },
@@ -185,7 +185,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
render(<PublicPageRenderer blocks={blocks} />); render(<PublicPageRenderer blocks={blocks} />);
const submitButton = screen.getByRole("link", { name: "제출하기" }); const submitButton = screen.getByRole("link", { name: "Submit" });
expect(submitButton).toBeTruthy(); expect(submitButton).toBeTruthy();
fireEvent.click(submitButton); fireEvent.click(submitButton);
@@ -195,7 +195,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
}); });
await waitFor(() => { await waitFor(() => {
const errorMsg = screen.getByText(/다음 필수 항목을 입력해 주세요:\s*-\s*이메일/); const errorMsg = screen.getByText(/Please fill in the following required fields:\s*-\s*Email/);
expect(errorMsg).toBeTruthy(); expect(errorMsg).toBeTruthy();
}); });
}); });
@@ -208,8 +208,8 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
props: { props: {
kind: "contact", kind: "contact",
submitTarget: "internal", submitTarget: "internal",
successMessage: "폼 성공 메시지 (config)", successMessage: "Form success message (config)",
errorMessage: "폼 에러 메시지 (config)", errorMessage: "Form error message (config)",
fieldIds: ["field_name"], fieldIds: ["field_name"],
requiredFieldIds: ["field_name"], requiredFieldIds: ["field_name"],
submitButtonId: "submit_btn", submitButtonId: "submit_btn",
@@ -219,7 +219,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
id: "field_name", id: "field_name",
type: "formInput", type: "formInput",
props: { props: {
label: "이름", label: "Name",
formFieldName: "name", formFieldName: "name",
required: true, required: true,
} as any, } as any,
@@ -228,7 +228,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
id: "submit_btn", id: "submit_btn",
type: "button", type: "button",
props: { props: {
label: "제출하기", label: "Submit",
href: "#", href: "#",
} as any, } as any,
}, },
@@ -245,7 +245,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
render(<PublicPageRenderer blocks={blocks} />); render(<PublicPageRenderer blocks={blocks} />);
const submitButton = screen.getByRole("link", { name: "제출하기" }); const submitButton = screen.getByRole("link", { name: "Submit" });
expect(submitButton).toBeTruthy(); expect(submitButton).toBeTruthy();
// 이름 필드를 비운 채로 제출한다. // 이름 필드를 비운 채로 제출한다.
@@ -256,7 +256,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
}); });
await waitFor(() => { await waitFor(() => {
const errorMsg = screen.getByText(/다음 필수 항목을 입력해 주세요:\s*-\s*이름/); const errorMsg = screen.getByText(/Please fill in the following required fields:\s*-\s*Name/);
expect(errorMsg).toBeTruthy(); expect(errorMsg).toBeTruthy();
}); });
}); });
tests/unit/PublicPageRendererTemplates.spec.tsx
+29 -12
View File
@@ -4,6 +4,8 @@ import { PublicPageRenderer } from "@/features/editor/components/PublicPageRende
import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate"; import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
import { createFeaturesTemplateBlocks } from "@/app/editor/templates/featuresTemplate"; import { createFeaturesTemplateBlocks } from "@/app/editor/templates/featuresTemplate";
import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate"; import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate";
import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
import { DEFAULT_LOCALE } from "@/features/i18n/locale";
import type { Block } from "@/features/editor/state/editorStore"; import type { Block } from "@/features/editor/state/editorStore";
// PublicPageRenderer 템플릿 TDD // PublicPageRenderer 템플릿 TDD
@@ -21,29 +23,39 @@ describe("PublicPageRenderer - 섹션 템플릿", () => {
it("Hero 템플릿 섹션은 섹션과 헤드라인/서브텍스트/버튼을 렌더해야 한다", () => { it("Hero 템플릿 섹션은 섹션과 헤드라인/서브텍스트/버튼을 렌더해야 한다", () => {
const sectionId = "hero_section_1"; const sectionId = "hero_section_1";
const { blocks } = createHeroTemplateBlocks({ sectionId, createId: createIdFactory() }); const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks } = createHeroTemplateBlocks({
sectionId,
createId: createIdFactory(),
messages: tpl.hero,
});
render(<PublicPageRenderer blocks={blocks as Block[]} />); render(<PublicPageRenderer blocks={blocks as Block[]} />);
// 헤드라인/서브텍스트 텍스트가 존재해야 한다. // 헤드라인/서브텍스트 텍스트가 존재해야 한다.
screen.getByText("Hero 제목을 여기에 입력하세요"); screen.getByText("Your hero headline goes here");
screen.getByText("제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다."); screen.getByText("Describe your product or service in a single, clear sentence.");
// CTA 버튼 라벨 텍스트가 존재해야 한다. // CTA 버튼 라벨 텍스트가 존재해야 한다.
screen.getByText("지금 시작하기"); screen.getByText("Get started now");
}); });
it("Features 템플릿 섹션은 3컬럼 Feature 제목/설명 텍스트를 렌더해야 한다", () => { it("Features 템플릿 섹션은 3컬럼 Feature 제목/설명 텍스트를 렌더해야 한다", () => {
const sectionId = "features_section_1"; const sectionId = "features_section_1";
const { blocks } = createFeaturesTemplateBlocks({ sectionId, createId: createIdFactory() }); const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks } = createFeaturesTemplateBlocks({
sectionId,
createId: createIdFactory(),
messages: tpl.features,
});
render(<PublicPageRenderer blocks={blocks as Block[]} />); render(<PublicPageRenderer blocks={blocks as Block[]} />);
// 각 컬럼의 Feature 제목과 설명 텍스트가 모두 존재해야 한다. // 각 컬럼의 Feature 제목과 설명 텍스트가 모두 존재해야 한다.
screen.getByText("Feature 1 제목"); screen.getByText("Feature 1");
screen.getByText("Feature 2 제목"); screen.getByText("Feature 2");
screen.getByText("Feature 3 제목"); screen.getByText("Feature 3");
const descText = "해당 기능을 간단히 설명하는 텍스트입니다."; const descText = "A short description of this feature.";
// 설명 텍스트는 3번 등장해야 한다. // 설명 텍스트는 3번 등장해야 한다.
const allDesc = screen.getAllByText(descText); const allDesc = screen.getAllByText(descText);
if (allDesc.length !== 3) { if (allDesc.length !== 3) {
@@ -53,14 +65,19 @@ describe("PublicPageRenderer - 섹션 템플릿", () => {
it("CTA 템플릿 섹션은 텍스트와 CTA 버튼을 렌더해야 한다", () => { it("CTA 템플릿 섹션은 텍스트와 CTA 버튼을 렌더해야 한다", () => {
const sectionId = "cta_section_1"; const sectionId = "cta_section_1";
const { blocks } = createCtaTemplateBlocks({ sectionId, createId: createIdFactory() }); const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
const { blocks } = createCtaTemplateBlocks({
sectionId,
createId: createIdFactory(),
messages: tpl.cta,
});
render(<PublicPageRenderer blocks={blocks as Block[]} />); render(<PublicPageRenderer blocks={blocks as Block[]} />);
// CTA 본문 텍스트와 버튼 라벨이 존재해야 한다. // CTA 본문 텍스트와 버튼 라벨이 존재해야 한다.
screen.getByText((content) => screen.getByText((content) =>
content.includes("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요."), content.includes("Write a compelling CTA message here."),
); );
screen.getByText("CTA 버튼"); screen.getByText("Call to action");
}); });
}); });
tests/unit/SectionLayoutPresets.spec.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ describe("SectionPropertiesPanel - layout presets", () => {
/>, />,
); );
const select = screen.getByLabelText("섹션 컬럼 레이아웃"); const select = screen.getByLabelText("Section column layout");
fireEvent.change(select, { target: { value: "two-equal" } }); fireEvent.change(select, { target: { value: "two-equal" } });
tests/unit/SectionPropertiesPanel.spec.tsx
+26 -26
View File
@@ -31,7 +31,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const hexInput = screen.getByLabelText("섹션 배경 색상 HEX 입력"); const hexInput = screen.getByLabelText("Section background color HEX");
fireEvent.change(hexInput, { target: { value: "#112233" } }); fireEvent.change(hexInput, { target: { value: "#112233" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -57,7 +57,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const presetSelect = screen.getByLabelText("배경 이미지 가로 위치 프리셋"); const presetSelect = screen.getByLabelText("Background image horizontal position 프리셋");
fireEvent.change(presetSelect, { target: { value: "left" } }); fireEvent.change(presetSelect, { target: { value: "left" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -83,7 +83,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const presetSelect = screen.getByLabelText("배경 이미지 세로 위치 프리셋"); const presetSelect = screen.getByLabelText("Background image vertical position 프리셋");
fireEvent.change(presetSelect, { target: { value: "top" } }); fireEvent.change(presetSelect, { target: { value: "top" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -110,7 +110,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const xSlider = screen.getByLabelText("배경 이미지 가로 위치 슬라이더"); const xSlider = screen.getByLabelText("Background image horizontal position 슬라이더");
fireEvent.change(xSlider, { target: { value: "30" } }); fireEvent.change(xSlider, { target: { value: "30" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -121,7 +121,7 @@ describe("SectionPropertiesPanel", () => {
}), }),
); );
const ySlider = screen.getByLabelText("배경 이미지 세로 위치 슬라이더"); const ySlider = screen.getByLabelText("Background image vertical position 슬라이더");
fireEvent.change(ySlider, { target: { value: "70" } }); fireEvent.change(ySlider, { target: { value: "70" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -143,7 +143,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const slider = screen.getByLabelText("세로 패딩 슬라이더"); const slider = screen.getByLabelText("Vertical padding 슬라이더");
fireEvent.change(slider, { target: { value: "40" } }); fireEvent.change(slider, { target: { value: "40" } });
expect(updateBlock).toHaveBeenCalledWith("section-1", expect.objectContaining({ paddingYPx: 40 })); expect(updateBlock).toHaveBeenCalledWith("section-1", expect.objectContaining({ paddingYPx: 40 }));
@@ -160,7 +160,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const urlInput = screen.getByLabelText("배경 이미지 URL"); const urlInput = screen.getByLabelText("Background image URL");
fireEvent.change(urlInput, { target: { value: "https://example.com/bg.png" } }); fireEvent.change(urlInput, { target: { value: "https://example.com/bg.png" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -189,7 +189,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("배경 이미지 크기"); const select = screen.getByLabelText("Background image size");
fireEvent.change(select, { target: { value: "contain" } }); fireEvent.change(select, { target: { value: "contain" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -214,7 +214,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const select = screen.getByLabelText("배경 이미지 위치"); const select = screen.getByLabelText("Background image position");
fireEvent.change(select, { target: { value: "top" } }); fireEvent.change(select, { target: { value: "top" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -234,7 +234,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const sourceSelect = screen.getByLabelText("배경 이미지 소스") as HTMLSelectElement; const sourceSelect = screen.getByLabelText("Background image source") as HTMLSelectElement;
expect(sourceSelect.value).toBe("none"); expect(sourceSelect.value).toBe("none");
fireEvent.change(sourceSelect, { target: { value: "none" } }); fireEvent.change(sourceSelect, { target: { value: "none" } });
@@ -246,9 +246,9 @@ describe("SectionPropertiesPanel", () => {
} as any); } as any);
// "없음" 상태에서는 크기/위치/반복 컨트롤이 렌더되지 않아야 한다. // "없음" 상태에서는 크기/위치/반복 컨트롤이 렌더되지 않아야 한다.
expect(screen.queryByLabelText("배경 이미지 크기")).toBeNull(); expect(screen.queryByLabelText("Background image size")).toBeNull();
expect(screen.queryByLabelText("배경 이미지 위치")).toBeNull(); expect(screen.queryByLabelText("Background image position")).toBeNull();
expect(screen.queryByLabelText("배경 이미지 반복")).toBeNull(); expect(screen.queryByLabelText("Background image repeat")).toBeNull();
}); });
it("배경 이미지 반복 셀렉트 변경 시 updateBlock 이 backgroundImageRepeat 로 호출된다", () => { it("배경 이미지 반복 셀렉트 변경 시 updateBlock 이 backgroundImageRepeat 로 호출된다", () => {
@@ -267,7 +267,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const repeatSelect = screen.getByLabelText("배경 이미지 반복"); const repeatSelect = screen.getByLabelText("Background image repeat");
fireEvent.change(repeatSelect, { target: { value: "repeat-x" } }); fireEvent.change(repeatSelect, { target: { value: "repeat-x" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -292,7 +292,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const sourceSelect = screen.getByLabelText("배경 이미지 소스") as HTMLSelectElement; const sourceSelect = screen.getByLabelText("Background image source") as HTMLSelectElement;
expect(sourceSelect.value).toBe("upload"); expect(sourceSelect.value).toBe("upload");
fireEvent.change(sourceSelect, { target: { value: "url" } }); fireEvent.change(sourceSelect, { target: { value: "url" } });
@@ -321,7 +321,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const urlInput = screen.getByLabelText("배경 비디오 URL"); const urlInput = screen.getByLabelText("Background video URL");
fireEvent.change(urlInput, { target: { value: "https://example.com/bg-video.mp4" } }); fireEvent.change(urlInput, { target: { value: "https://example.com/bg-video.mp4" } });
expect(updateBlock).toHaveBeenCalledWith( expect(updateBlock).toHaveBeenCalledWith(
@@ -350,7 +350,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const sourceSelect = screen.getByLabelText("배경 비디오 소스") as HTMLSelectElement; const sourceSelect = screen.getByLabelText("Background video source") as HTMLSelectElement;
expect(sourceSelect.value).toBe("upload"); expect(sourceSelect.value).toBe("upload");
fireEvent.change(sourceSelect, { target: { value: "url" } }); fireEvent.change(sourceSelect, { target: { value: "url" } });
@@ -381,7 +381,7 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const bgImageSourceSelect = screen.getByLabelText("배경 이미지 소스") as HTMLSelectElement; const bgImageSourceSelect = screen.getByLabelText("Background image source") as HTMLSelectElement;
const bgImageSourceClass = bgImageSourceSelect.getAttribute("class") ?? ""; const bgImageSourceClass = bgImageSourceSelect.getAttribute("class") ?? "";
expect(bgImageSourceClass).toContain("bg-white"); expect(bgImageSourceClass).toContain("bg-white");
expect(bgImageSourceClass).toContain("text-slate-900"); expect(bgImageSourceClass).toContain("text-slate-900");
@@ -390,7 +390,7 @@ describe("SectionPropertiesPanel", () => {
expect(bgImageSourceClass).toContain("dark:text-slate-100"); expect(bgImageSourceClass).toContain("dark:text-slate-100");
expect(bgImageSourceClass).toContain("dark:border-slate-700"); expect(bgImageSourceClass).toContain("dark:border-slate-700");
const bgImageUrlInput = screen.getByLabelText("배경 이미지 URL") as HTMLInputElement; const bgImageUrlInput = screen.getByLabelText("Background image URL") as HTMLInputElement;
const bgImageUrlClass = bgImageUrlInput.getAttribute("class") ?? ""; const bgImageUrlClass = bgImageUrlInput.getAttribute("class") ?? "";
expect(bgImageUrlClass).toContain("bg-white"); expect(bgImageUrlClass).toContain("bg-white");
expect(bgImageUrlClass).toContain("text-slate-900"); expect(bgImageUrlClass).toContain("text-slate-900");
@@ -399,7 +399,7 @@ describe("SectionPropertiesPanel", () => {
expect(bgImageUrlClass).toContain("dark:text-slate-100"); expect(bgImageUrlClass).toContain("dark:text-slate-100");
expect(bgImageUrlClass).toContain("dark:border-slate-700"); expect(bgImageUrlClass).toContain("dark:border-slate-700");
const bgVideoUrlInput = screen.getByLabelText("배경 비디오 URL") as HTMLInputElement; const bgVideoUrlInput = screen.getByLabelText("Background video URL") as HTMLInputElement;
const bgVideoUrlClass = bgVideoUrlInput.getAttribute("class") ?? ""; const bgVideoUrlClass = bgVideoUrlInput.getAttribute("class") ?? "";
expect(bgVideoUrlClass).toContain("bg-white"); expect(bgVideoUrlClass).toContain("bg-white");
expect(bgVideoUrlClass).toContain("text-slate-900"); expect(bgVideoUrlClass).toContain("text-slate-900");
@@ -433,12 +433,12 @@ describe("SectionPropertiesPanel", () => {
/>, />,
); );
const columnLayoutSelect = screen.getByLabelText("섹션 컬럼 레이아웃") as HTMLSelectElement; const columnLayoutSelect = screen.getByLabelText("Section column layout") as HTMLSelectElement;
const alignItemsSelect = screen.getByLabelText("섹션 컬럼 세로 정렬") as HTMLSelectElement; const alignItemsSelect = screen.getByLabelText("Section column vertical alignment") as HTMLSelectElement;
const positionModeSelect = screen.getByLabelText("배경 이미지 위치 모드") as HTMLSelectElement; const positionModeSelect = screen.getByLabelText("Background image position mode") as HTMLSelectElement;
const sizeSelect = screen.getByLabelText("배경 이미지 크기") as HTMLSelectElement; const sizeSelect = screen.getByLabelText("Background image size") as HTMLSelectElement;
const positionSelect = screen.getByLabelText("배경 이미지 위치") as HTMLSelectElement; const positionSelect = screen.getByLabelText("Background image position") as HTMLSelectElement;
const repeatSelect = screen.getByLabelText("배경 이미지 반복") as HTMLSelectElement; const repeatSelect = screen.getByLabelText("Background image repeat") as HTMLSelectElement;
const assertDualTheme = (el: HTMLElement) => { const assertDualTheme = (el: HTMLElement) => {
const className = el.getAttribute("class") ?? ""; const className = el.getAttribute("class") ?? "";

Some files were not shown because too many files have changed in this diff Show More