@@ -273,7 +273,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
{
const next = [...(((radioProps as any).options ?? []) as any[])];
@@ -288,7 +288,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
/>
{
const next = [...(((radioProps as any).options ?? []) as any[])];
@@ -325,7 +325,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
{source === "url" && (
{
const next = [...(((radioProps as any).options ?? []) as any[])];
@@ -341,12 +341,12 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
)}
{source === "upload" && (
{(selectProps.widthMode ?? "full") === "fixed" && (
@@ -299,9 +299,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
max={800}
step={10}
presets={[
- { id: "sm", label: "작게", value: 200 },
- { id: "md", label: "보통", value: 280 },
- { id: "lg", label: "넓게", value: 360 },
+ { id: "sm", label: "Small", value: 200 },
+ { id: "md", label: "Medium", value: 280 },
+ { id: "lg", label: "Large", value: 360 },
]}
onChangeValue={(v) =>
updateBlock(selectedBlockId, {
@@ -318,11 +318,11 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
max={60}
step={2}
presets={[
- { id: "xs", label: "아주 얇게", value: 6 },
- { id: "sm", label: "얇게", value: 10 },
- { id: "md", label: "보통", value: 12 },
- { id: "lg", label: "넓게", value: 16 },
- { id: "xl", label: "아주 넓게", value: 20 },
+ { id: "xs", label: "Extra thin", value: 6 },
+ { id: "sm", label: "Thin", value: 10 },
+ { id: "md", label: "Normal", value: 12 },
+ { id: "lg", label: "Wide", value: 16 },
+ { id: "xl", label: "Extra wide", value: 20 },
]}
onChangeValue={(v) =>
updateBlock(selectedBlockId, {
@@ -338,11 +338,11 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
max={40}
step={1}
presets={[
- { id: "xs", label: "아주 얇게", value: 6 },
- { id: "sm", label: "얇게", value: 8 },
- { id: "md", label: "보통", value: 10 },
- { id: "lg", label: "넓게", value: 12 },
- { id: "xl", label: "아주 넓게", value: 16 },
+ { id: "xs", label: "Extra thin", value: 6 },
+ { id: "sm", label: "Thin", value: 8 },
+ { id: "md", label: "Normal", value: 10 },
+ { id: "lg", label: "Wide", value: 12 },
+ { id: "xl", label: "Extra wide", value: 16 },
]}
onChangeValue={(v) =>
updateBlock(selectedBlockId, {
diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx
index 9b05dca..52b55db 100644
--- a/src/app/editor/page.tsx
+++ b/src/app/editor/page.tsx
@@ -206,7 +206,7 @@ function EditorPageInner() {
}
updateProjectConfig({
- title: "새 페이지",
+ title: "New page",
slug: "my-landing",
canvasPreset: "full",
canvasBgColorHex: "#020617",
@@ -1084,6 +1084,7 @@ function EditorPageInner() {
listItemToolbarMoveDownLabel={m.listItemToolbarMoveDownLabel}
listItemToolbarIndentLabel={m.listItemToolbarIndentLabel}
listItemToolbarOutdentLabel={m.listItemToolbarOutdentLabel}
+ imageBlockEmptyPreviewPlaceholder={m.imageBlockEmptyPreviewPlaceholder}
/>
);
@@ -1425,6 +1426,7 @@ interface SortableEditorBlockProps {
listItemToolbarMoveDownLabel: string;
listItemToolbarIndentLabel: string;
listItemToolbarOutdentLabel: string;
+ imageBlockEmptyPreviewPlaceholder: string;
}
function SortableEditorBlock({
@@ -1449,6 +1451,7 @@ function SortableEditorBlock({
listItemToolbarMoveDownLabel,
listItemToolbarIndentLabel,
listItemToolbarOutdentLabel,
+ imageBlockEmptyPreviewPlaceholder,
}: SortableEditorBlockProps) {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
id: block.id,
@@ -1560,7 +1563,7 @@ function SortableEditorBlock({
@@ -2147,7 +2150,7 @@ function SortableEditorBlock({
: [
{
id: `${block.id}_item_1`,
- text: "리스트 아이템 1",
+ text: "List item 1",
children: [],
},
];
@@ -2350,6 +2353,8 @@ interface ColumnDroppableProps {
function ColumnDroppable({ id, sectionId, columnId, basis, blocks, renderBlocks, span }: ColumnDroppableProps) {
const { setNodeRef } = useDroppable({ id });
const { over } = useDndContext();
+ const locale = useAppLocale();
+ const editorMessages = getEditorMessages(locale);
// 현재 드롭 대상이 이 컬럼이거나, 이 컬럼 안 블록들의 dropzone-before / dropzone-after 인 경우
// 컬럼 박스를 강조해서 사용자가 어느 컬럼으로 이동 중인지 명확히 보여준다.
@@ -2400,7 +2405,7 @@ function ColumnDroppable({ id, sectionId, columnId, basis, blocks, renderBlocks,
>
{blocks.length === 0 ? (
- {`컬럼 영역 (span ${span}/12)`}
+ {`${editorMessages.columnAreaLabel} (span ${span}/12)`}
) : (
b.id)} strategy={verticalListSortingStrategy}>
diff --git a/src/app/editor/panels/BlocksSidebar.tsx b/src/app/editor/panels/BlocksSidebar.tsx
index 7a19e56..01298ca 100644
--- a/src/app/editor/panels/BlocksSidebar.tsx
+++ b/src/app/editor/panels/BlocksSidebar.tsx
@@ -50,43 +50,58 @@ export function BlocksSidebar() {
const addFooterTemplateSection = useEditorStore((state) => state.addFooterTemplateSection);
// 버튼 핸들러를 useCallback으로 래핑해 불필요한 재생성을 줄인다.
- const handleAddText = useCallback(() => addTextBlock(), [addTextBlock]);
- const handleAddButton = useCallback(() => addButtonBlock(), [addButtonBlock]);
+ const handleAddText = useCallback(() => addTextBlock(locale), [addTextBlock, locale]);
+ const handleAddButton = useCallback(() => addButtonBlock(locale), [addButtonBlock, locale]);
const handleAddImage = useCallback(() => addImageBlock(), [addImageBlock]);
const handleAddVideo = useCallback(() => addVideoBlock(), [addVideoBlock]);
const handleAddDivider = useCallback(() => addDividerBlock(), [addDividerBlock]);
- const handleAddList = useCallback(() => addListBlock(), [addListBlock]);
+ const handleAddList = useCallback(() => addListBlock(locale), [addListBlock, locale]);
const handleAddSection = useCallback(() => addSectionBlock(), [addSectionBlock]);
- const handleAddFormBlock = useCallback(() => addFormBlock(), [addFormBlock]);
- const handleAddFormInput = useCallback(() => addFormInputBlock(), [addFormInputBlock]);
- const handleAddFormSelect = useCallback(() => addFormSelectBlock(), [addFormSelectBlock]);
- const handleAddFormRadio = useCallback(() => addFormRadioBlock(), [addFormRadioBlock]);
- const handleAddFormCheckbox = useCallback(() => addFormCheckboxBlock(), [addFormCheckboxBlock]);
+ const handleAddFormBlock = useCallback(() => addFormBlock(locale), [addFormBlock, locale]);
+ const handleAddFormInput = useCallback(() => addFormInputBlock(locale), [addFormInputBlock, locale]);
+ const handleAddFormSelect = useCallback(() => addFormSelectBlock(locale), [addFormSelectBlock, locale]);
+ const handleAddFormRadio = useCallback(() => addFormRadioBlock(locale), [addFormRadioBlock, locale]);
+ const handleAddFormCheckbox = useCallback(
+ () => addFormCheckboxBlock(locale),
+ [addFormCheckboxBlock, locale],
+ );
const handleAddHeroTemplate = useCallback(
- () => addHeroTemplateSection(),
- [addHeroTemplateSection],
+ () => addHeroTemplateSection(locale),
+ [addHeroTemplateSection, locale],
);
const handleAddFeaturesTemplate = useCallback(
- () => addFeaturesTemplateSection(),
- [addFeaturesTemplateSection],
+ () => addFeaturesTemplateSection(locale),
+ [addFeaturesTemplateSection, locale],
+ );
+ const handleAddCtaTemplate = useCallback(
+ () => addCtaTemplateSection(locale),
+ [addCtaTemplateSection, locale],
+ );
+ const handleAddFaqTemplate = useCallback(
+ () => addFaqTemplateSection(locale),
+ [addFaqTemplateSection, locale],
);
- const handleAddCtaTemplate = useCallback(() => addCtaTemplateSection(), [addCtaTemplateSection]);
- const handleAddFaqTemplate = useCallback(() => addFaqTemplateSection(), [addFaqTemplateSection]);
const handleAddPricingTemplate = useCallback(
- () => addPricingTemplateSection(),
- [addPricingTemplateSection],
+ () => addPricingTemplateSection(locale),
+ [addPricingTemplateSection, locale],
);
const handleAddTestimonialsTemplate = useCallback(
- () => addTestimonialsTemplateSection(),
- [addTestimonialsTemplateSection],
+ () => addTestimonialsTemplateSection(locale),
+ [addTestimonialsTemplateSection, locale],
+ );
+ const handleAddBlogTemplate = useCallback(
+ () => addBlogTemplateSection(locale),
+ [addBlogTemplateSection, locale],
+ );
+ const handleAddTeamTemplate = useCallback(
+ () => addTeamTemplateSection(locale),
+ [addTeamTemplateSection, locale],
);
- const handleAddBlogTemplate = useCallback(() => addBlogTemplateSection(), [addBlogTemplateSection]);
- const handleAddTeamTemplate = useCallback(() => addTeamTemplateSection(), [addTeamTemplateSection]);
const handleAddFooterTemplate = useCallback(
- () => addFooterTemplateSection(),
- [addFooterTemplateSection],
+ () => addFooterTemplateSection(locale),
+ [addFooterTemplateSection, locale],
);
const [isBlocksOpen, setIsBlocksOpen] = useState(true);
diff --git a/src/app/editor/panels/SectionPropertiesPanel.tsx b/src/app/editor/panels/SectionPropertiesPanel.tsx
index 63323a9..6eb168f 100644
--- a/src/app/editor/panels/SectionPropertiesPanel.tsx
+++ b/src/app/editor/panels/SectionPropertiesPanel.tsx
@@ -88,9 +88,9 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
}
}}
>
-
-
-
+
+
+
@@ -229,9 +229,9 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
max={100}
step={1}
presets={[
- { id: "left", label: "왼쪽", value: 0 },
- { id: "center", label: "가운데", value: 50 },
- { id: "right", label: "오른쪽", value: 100 },
+ { id: "left", label: m.backgroundImagePositionOptionLeft, value: 0 },
+ { id: "center", label: m.backgroundImagePositionOptionCenter, value: 50 },
+ { id: "right", label: m.backgroundImagePositionOptionRight, value: 100 },
]}
onChangeValue={(next) =>
updateBlock(selectedBlockId, {
@@ -253,9 +253,9 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
max={100}
step={1}
presets={[
- { id: "top", label: "위", value: 0 },
- { id: "center", label: "가운데", value: 50 },
- { id: "bottom", label: "아래", value: 100 },
+ { id: "top", label: m.backgroundImagePositionOptionTop, value: 0 },
+ { id: "center", label: m.backgroundImagePositionOptionCenter, value: 50 },
+ { id: "bottom", label: m.backgroundImagePositionOptionBottom, value: 100 },
]}
onChangeValue={(next) =>
updateBlock(selectedBlockId, {
@@ -317,9 +317,9 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
}
}}
>
-
-
-
+
+
+
@@ -387,7 +387,7 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
)}
- {/* 세로 패딩 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
+ {/* 세로 패딩 슬라이더 - 프리셋 + 자유 슬라이더 */}