Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| bd6be2fb97 |
@@ -102,3 +102,4 @@ jobs:
|
|||||||
-H "Authorization: token $CI_TOKEN" \
|
-H "Authorization: token $CI_TOKEN" \
|
||||||
"$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls/$pr_number/merge" \
|
"$CI_BASE_URL/api/v1/repos/$CI_OWNER/$CI_REPO/pulls/$pr_number/merge" \
|
||||||
-d "$merge_payload" || true
|
-d "$merge_payload" || true
|
||||||
|
# CI 테스트용 더미 주석
|
||||||
|
|||||||
+1
-65
@@ -37,9 +37,6 @@ export default function EditorPage() {
|
|||||||
const addHeroTemplateSection = useEditorStore((state) => state.addHeroTemplateSection);
|
const addHeroTemplateSection = useEditorStore((state) => state.addHeroTemplateSection);
|
||||||
const addFeaturesTemplateSection = useEditorStore((state) => state.addFeaturesTemplateSection);
|
const addFeaturesTemplateSection = useEditorStore((state) => state.addFeaturesTemplateSection);
|
||||||
const addCtaTemplateSection = useEditorStore((state) => state.addCtaTemplateSection);
|
const addCtaTemplateSection = useEditorStore((state) => state.addCtaTemplateSection);
|
||||||
const addFaqTemplateSection = useEditorStore((state) => state.addFaqTemplateSection);
|
|
||||||
const addPricingTemplateSection = useEditorStore((state) => state.addPricingTemplateSection);
|
|
||||||
const addTestimonialsTemplateSection = useEditorStore((state) => state.addTestimonialsTemplateSection);
|
|
||||||
const updateBlock = useEditorStore((state) => state.updateBlock);
|
const updateBlock = useEditorStore((state) => state.updateBlock);
|
||||||
const selectBlock = useEditorStore((state) => state.selectBlock);
|
const selectBlock = useEditorStore((state) => state.selectBlock);
|
||||||
const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
|
const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
|
||||||
@@ -47,8 +44,6 @@ export default function EditorPage() {
|
|||||||
const moveBlock = useEditorStore((state) => state.moveBlock);
|
const moveBlock = useEditorStore((state) => state.moveBlock);
|
||||||
const undo = useEditorStore((state) => state.undo);
|
const undo = useEditorStore((state) => state.undo);
|
||||||
const redo = useEditorStore((state) => state.redo);
|
const redo = useEditorStore((state) => state.redo);
|
||||||
const removeBlock = useEditorStore((state) => state.removeBlock);
|
|
||||||
const duplicateBlock = useEditorStore((state) => state.duplicateBlock);
|
|
||||||
|
|
||||||
const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
|
const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
|
||||||
const [editingText, setEditingText] = useState("");
|
const [editingText, setEditingText] = useState("");
|
||||||
@@ -205,8 +200,7 @@ export default function EditorPage() {
|
|||||||
|
|
||||||
const rootBlocks = blocks.filter((block) => !block.sectionId);
|
const rootBlocks = blocks.filter((block) => !block.sectionId);
|
||||||
|
|
||||||
// 에디터 전역에서 Undo/Redo 단축키(Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z),
|
// 에디터 전역에서 Undo/Redo 단축키(Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z)와
|
||||||
// Delete/Backspace 기반 삭제, Cmd/Ctrl+D 기반 복제,
|
|
||||||
// ArrowUp/ArrowDown을 이용한 선택 블록 이동을 처리한다.
|
// ArrowUp/ArrowDown을 이용한 선택 블록 이동을 처리한다.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (event: KeyboardEvent) => {
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
@@ -243,29 +237,8 @@ export default function EditorPage() {
|
|||||||
const isMac = navigator.platform.toLowerCase().includes("mac");
|
const isMac = navigator.platform.toLowerCase().includes("mac");
|
||||||
const metaKey = isMac ? event.metaKey : event.ctrlKey;
|
const metaKey = isMac ? event.metaKey : event.ctrlKey;
|
||||||
|
|
||||||
// Delete / Backspace 로 선택된 블록 삭제
|
|
||||||
if (event.key === "Delete" || event.key === "Backspace") {
|
|
||||||
const { selectedBlockId: currentSelectedId } = (useEditorStore as any).getState();
|
|
||||||
if (currentSelectedId) {
|
|
||||||
event.preventDefault();
|
|
||||||
removeBlock(currentSelectedId);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cmd/Ctrl 없는 경우에는 여기서 종료한다.
|
|
||||||
if (!metaKey) return;
|
if (!metaKey) return;
|
||||||
|
|
||||||
// Cmd/Ctrl + D → 현재 선택된 블록 복제
|
|
||||||
if (event.key.toLowerCase() === "d") {
|
|
||||||
const { selectedBlockId: currentSelectedId } = (useEditorStore as any).getState();
|
|
||||||
if (currentSelectedId) {
|
|
||||||
event.preventDefault();
|
|
||||||
duplicateBlock(currentSelectedId);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cmd/Ctrl + Shift + Z → Redo
|
// Cmd/Ctrl + Shift + Z → Redo
|
||||||
if (event.key.toLowerCase() === "z" && event.shiftKey) {
|
if (event.key.toLowerCase() === "z" && event.shiftKey) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@@ -376,27 +349,6 @@ export default function EditorPage() {
|
|||||||
>
|
>
|
||||||
CTA 템플릿 추가
|
CTA 템플릿 추가
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
|
|
||||||
onClick={addFaqTemplateSection}
|
|
||||||
>
|
|
||||||
FAQ 템플릿 추가
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
|
|
||||||
onClick={addPricingTemplateSection}
|
|
||||||
>
|
|
||||||
Pricing 템플릿 추가
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
|
|
||||||
onClick={addTestimonialsTemplateSection}
|
|
||||||
>
|
|
||||||
Testimonials 템플릿 추가
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-slate-500">
|
<p className="text-xs text-slate-500">
|
||||||
Text / Image / Button / Section 블록을 이 영역에서 추가할 수 있습니다.
|
Text / Image / Button / Section 블록을 이 영역에서 추가할 수 있습니다.
|
||||||
@@ -429,22 +381,6 @@ export default function EditorPage() {
|
|||||||
<h2 className="font-medium mb-2">속성 패널</h2>
|
<h2 className="font-medium mb-2">속성 패널</h2>
|
||||||
{selectedBlockId ? (
|
{selectedBlockId ? (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex gap-2 text-[11px]">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-100 hover:bg-red-900/60 hover:border-red-700"
|
|
||||||
onClick={() => removeBlock(selectedBlockId)}
|
|
||||||
>
|
|
||||||
블록 삭제
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex-1 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-100 hover:bg-slate-800"
|
|
||||||
onClick={() => duplicateBlock(selectedBlockId)}
|
|
||||||
>
|
|
||||||
블록 복제
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{(() => {
|
{(() => {
|
||||||
const selectedBlock = blocks.find((b) => b.id === selectedBlockId);
|
const selectedBlock = blocks.find((b) => b.id === selectedBlockId);
|
||||||
if (!selectedBlock) return null;
|
if (!selectedBlock) return null;
|
||||||
|
|||||||
@@ -60,9 +60,6 @@ export interface EditorState {
|
|||||||
addHeroTemplateSection: () => void;
|
addHeroTemplateSection: () => void;
|
||||||
addFeaturesTemplateSection: () => void;
|
addFeaturesTemplateSection: () => void;
|
||||||
addCtaTemplateSection: () => void;
|
addCtaTemplateSection: () => void;
|
||||||
addFaqTemplateSection: () => void;
|
|
||||||
addPricingTemplateSection: () => void;
|
|
||||||
addTestimonialsTemplateSection: () => void;
|
|
||||||
updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps>) => void;
|
updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps>) => void;
|
||||||
selectBlock: (id: string | null) => void;
|
selectBlock: (id: string | null) => void;
|
||||||
replaceBlocks: (blocks: Block[]) => void;
|
replaceBlocks: (blocks: Block[]) => void;
|
||||||
@@ -70,8 +67,6 @@ export interface EditorState {
|
|||||||
moveBlock: (id: string, sectionId: string | null, columnId: string | null) => void;
|
moveBlock: (id: string, sectionId: string | null, columnId: string | null) => void;
|
||||||
undo: () => void;
|
undo: () => void;
|
||||||
redo: () => void;
|
redo: () => void;
|
||||||
removeBlock: (id: string) => void;
|
|
||||||
duplicateBlock: (id: string) => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 간단한 ID 생성기 (추후 uuid 라이브러리로 교체 가능)
|
// 간단한 ID 생성기 (추후 uuid 라이브러리로 교체 가능)
|
||||||
@@ -326,233 +321,6 @@ const createEditorState = (set: any, get: any): EditorState => ({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// FAQ 템플릿 섹션 추가: 질문/답변 쌍이 수직으로 나열된 섹션을 생성한다
|
|
||||||
addFaqTemplateSection: () => {
|
|
||||||
const sectionId = createId();
|
|
||||||
|
|
||||||
const sectionBlock: Block = {
|
|
||||||
id: sectionId,
|
|
||||||
type: "section",
|
|
||||||
props: {
|
|
||||||
background: "default",
|
|
||||||
paddingY: "md",
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
id: `${sectionId}_col_1`,
|
|
||||||
span: 12,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
sectionId: null,
|
|
||||||
columnId: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
const firstColumnId = `${sectionId}_col_1`;
|
|
||||||
|
|
||||||
const faqPairs = [
|
|
||||||
{
|
|
||||||
question: "자주 묻는 질문 1",
|
|
||||||
answer: "첫 번째 질문에 대한 답변을 여기에 입력하세요.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "자주 묻는 질문 2",
|
|
||||||
answer: "두 번째 질문에 대한 답변을 여기에 입력하세요.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "자주 묻는 질문 3",
|
|
||||||
answer: "세 번째 질문에 대한 답변을 여기에 입력하세요.",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const faqBlocks: Block[] = faqPairs.flatMap((pair) => {
|
|
||||||
const qId = createId();
|
|
||||||
const aId = createId();
|
|
||||||
|
|
||||||
const questionBlock: Block = {
|
|
||||||
id: qId,
|
|
||||||
type: "text",
|
|
||||||
props: {
|
|
||||||
text: pair.question,
|
|
||||||
align: "left",
|
|
||||||
size: "lg",
|
|
||||||
},
|
|
||||||
sectionId,
|
|
||||||
columnId: firstColumnId,
|
|
||||||
};
|
|
||||||
|
|
||||||
const answerBlock: Block = {
|
|
||||||
id: aId,
|
|
||||||
type: "text",
|
|
||||||
props: {
|
|
||||||
text: pair.answer,
|
|
||||||
align: "left",
|
|
||||||
size: "sm",
|
|
||||||
},
|
|
||||||
sectionId,
|
|
||||||
columnId: firstColumnId,
|
|
||||||
};
|
|
||||||
|
|
||||||
return [questionBlock, answerBlock];
|
|
||||||
});
|
|
||||||
|
|
||||||
const lastBlockId = faqBlocks[faqBlocks.length - 1].id;
|
|
||||||
|
|
||||||
set((state: EditorState) => {
|
|
||||||
const newBlocks = [...state.blocks, sectionBlock, ...faqBlocks];
|
|
||||||
|
|
||||||
return {
|
|
||||||
blocks: newBlocks,
|
|
||||||
selectedBlockId: lastBlockId,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// Pricing 템플릿 섹션 추가: 3컬럼 요금제 카드(플랜 이름/가격/설명)를 생성한다
|
|
||||||
addPricingTemplateSection: () => {
|
|
||||||
const sectionId = createId();
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{ id: `${sectionId}_col_1`, span: 4 },
|
|
||||||
{ id: `${sectionId}_col_2`, span: 4 },
|
|
||||||
{ id: `${sectionId}_col_3`, span: 4 },
|
|
||||||
];
|
|
||||||
|
|
||||||
const sectionBlock: Block = {
|
|
||||||
id: sectionId,
|
|
||||||
type: "section",
|
|
||||||
props: {
|
|
||||||
background: "muted",
|
|
||||||
paddingY: "lg",
|
|
||||||
columns,
|
|
||||||
},
|
|
||||||
sectionId: null,
|
|
||||||
columnId: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
const planDefinitions = [
|
|
||||||
{ name: "Basic", price: "₩9,900/월" },
|
|
||||||
{ name: "Pro", price: "₩29,900/월" },
|
|
||||||
{ name: "Enterprise", price: "문의" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const pricingBlocks: Block[] = columns.flatMap((col, index) => {
|
|
||||||
const plan = planDefinitions[index] ?? planDefinitions[0];
|
|
||||||
|
|
||||||
const nameId = createId();
|
|
||||||
const priceId = createId();
|
|
||||||
|
|
||||||
const nameBlock: Block = {
|
|
||||||
id: nameId,
|
|
||||||
type: "text",
|
|
||||||
props: {
|
|
||||||
text: plan.name,
|
|
||||||
align: "center",
|
|
||||||
size: "lg",
|
|
||||||
},
|
|
||||||
sectionId,
|
|
||||||
columnId: col.id,
|
|
||||||
};
|
|
||||||
|
|
||||||
const priceBlock: Block = {
|
|
||||||
id: priceId,
|
|
||||||
type: "text",
|
|
||||||
props: {
|
|
||||||
text: plan.price,
|
|
||||||
align: "center",
|
|
||||||
size: "base",
|
|
||||||
},
|
|
||||||
sectionId,
|
|
||||||
columnId: col.id,
|
|
||||||
};
|
|
||||||
|
|
||||||
return [nameBlock, priceBlock];
|
|
||||||
});
|
|
||||||
|
|
||||||
const lastBlockId = pricingBlocks[pricingBlocks.length - 1].id;
|
|
||||||
|
|
||||||
set((state: EditorState) => {
|
|
||||||
const newBlocks = [...state.blocks, sectionBlock, ...pricingBlocks];
|
|
||||||
|
|
||||||
return {
|
|
||||||
blocks: newBlocks,
|
|
||||||
selectedBlockId: lastBlockId,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// Testimonials 템플릿 섹션 추가: 3컬럼 후기 카드(본문/작성자)를 생성한다
|
|
||||||
addTestimonialsTemplateSection: () => {
|
|
||||||
const sectionId = createId();
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{ id: `${sectionId}_col_1`, span: 4 },
|
|
||||||
{ id: `${sectionId}_col_2`, span: 4 },
|
|
||||||
{ id: `${sectionId}_col_3`, span: 4 },
|
|
||||||
];
|
|
||||||
|
|
||||||
const sectionBlock: Block = {
|
|
||||||
id: sectionId,
|
|
||||||
type: "section",
|
|
||||||
props: {
|
|
||||||
background: "default",
|
|
||||||
paddingY: "lg",
|
|
||||||
columns,
|
|
||||||
},
|
|
||||||
sectionId: null,
|
|
||||||
columnId: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
const testimonialDefinitions = [
|
|
||||||
{ body: "이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.", author: "홍길동" },
|
|
||||||
{ body: "디자인을 잘 못해도 깔끔한 페이지를 만들 수 있어요.", author: "김영희" },
|
|
||||||
{ body: "팀 전체가 만족하는 빌더입니다.", author: "이철수" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const testimonialBlocks: Block[] = columns.flatMap((col, index) => {
|
|
||||||
const t = testimonialDefinitions[index] ?? testimonialDefinitions[0];
|
|
||||||
|
|
||||||
const bodyId = createId();
|
|
||||||
const authorId = createId();
|
|
||||||
|
|
||||||
const bodyBlock: Block = {
|
|
||||||
id: bodyId,
|
|
||||||
type: "text",
|
|
||||||
props: {
|
|
||||||
text: t.body,
|
|
||||||
align: "left",
|
|
||||||
size: "base",
|
|
||||||
},
|
|
||||||
sectionId,
|
|
||||||
columnId: col.id,
|
|
||||||
};
|
|
||||||
|
|
||||||
const authorBlock: Block = {
|
|
||||||
id: authorId,
|
|
||||||
type: "text",
|
|
||||||
props: {
|
|
||||||
text: `- ${t.author}`,
|
|
||||||
align: "left",
|
|
||||||
size: "sm",
|
|
||||||
},
|
|
||||||
sectionId,
|
|
||||||
columnId: col.id,
|
|
||||||
};
|
|
||||||
|
|
||||||
return [bodyBlock, authorBlock];
|
|
||||||
});
|
|
||||||
|
|
||||||
const lastBlockId = testimonialBlocks[testimonialBlocks.length - 1].id;
|
|
||||||
|
|
||||||
set((state: EditorState) => {
|
|
||||||
const newBlocks = [...state.blocks, sectionBlock, ...testimonialBlocks];
|
|
||||||
|
|
||||||
return {
|
|
||||||
blocks: newBlocks,
|
|
||||||
selectedBlockId: lastBlockId,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 이미지 블록 추가: 기본 플레이스홀더와 함께 생성 후 선택 상태로 만든다
|
// 이미지 블록 추가: 기본 플레이스홀더와 함께 생성 후 선택 상태로 만든다
|
||||||
addImageBlock: () => {
|
addImageBlock: () => {
|
||||||
const id = createId();
|
const id = createId();
|
||||||
@@ -718,63 +486,6 @@ const createEditorState = (set: any, get: any): EditorState => ({
|
|||||||
),
|
),
|
||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
removeBlock: (id) => {
|
|
||||||
set((state: EditorState) => {
|
|
||||||
const current = state.blocks;
|
|
||||||
const index = current.findIndex((b) => b.id === id);
|
|
||||||
if (index === -1) {
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextBlocks = current.filter((b) => b.id !== id);
|
|
||||||
|
|
||||||
// 선택 상태는 삭제된 블록의 이전 블록 또는 다음 블록으로 이동한다.
|
|
||||||
let nextSelected: string | null = null;
|
|
||||||
if (nextBlocks.length > 0) {
|
|
||||||
const prevIndex = index - 1;
|
|
||||||
if (prevIndex >= 0) {
|
|
||||||
nextSelected = nextBlocks[prevIndex].id;
|
|
||||||
} else {
|
|
||||||
// 첫 블록이 삭제된 경우, 새 첫 블록을 선택한다.
|
|
||||||
nextSelected = nextBlocks[0].id;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
blocks: nextBlocks,
|
|
||||||
selectedBlockId: nextSelected,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
duplicateBlock: (id) => {
|
|
||||||
set((state: EditorState) => {
|
|
||||||
const current = state.blocks;
|
|
||||||
const index = current.findIndex((b) => b.id === id);
|
|
||||||
if (index === -1) {
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
|
|
||||||
const original = current[index];
|
|
||||||
const newId = createId();
|
|
||||||
|
|
||||||
const cloned: Block = {
|
|
||||||
...original,
|
|
||||||
id: newId,
|
|
||||||
// props 는 얕은 복사로 충분 (현재 props 는 모두 평면 구조)
|
|
||||||
props: { ...(original.props as any) },
|
|
||||||
};
|
|
||||||
|
|
||||||
const nextBlocks = [...current];
|
|
||||||
nextBlocks.splice(index + 1, 0, cloned);
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
blocks: nextBlocks,
|
|
||||||
selectedBlockId: newId,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
undo: () => {
|
undo: () => {
|
||||||
const { history, blocks } = get();
|
const { history, blocks } = get();
|
||||||
if (history.length === 0) return;
|
if (history.length === 0) return;
|
||||||
|
|||||||
@@ -337,47 +337,6 @@ test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된
|
|||||||
await expect(ctaButton).toBeVisible();
|
await expect(ctaButton).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("FAQ 템플릿 버튼을 클릭하면 질문/답변 텍스트가 세 쌍 이상 생성되어야 한다", async ({ page }) => {
|
|
||||||
await page.goto("/editor");
|
|
||||||
|
|
||||||
const canvas = page.getByTestId("editor-canvas");
|
|
||||||
|
|
||||||
await page.getByRole("button", { name: "FAQ 템플릿 추가" }).click();
|
|
||||||
|
|
||||||
// 기본 FAQ 질문/답변 텍스트들이 렌더되어야 한다.
|
|
||||||
await expect(canvas.getByText("자주 묻는 질문 1")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("첫 번째 질문에 대한 답변을 여기에 입력하세요.")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("자주 묻는 질문 2")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("자주 묻는 질문 3")).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test("Pricing 템플릿 버튼을 클릭하면 3개의 요금제 카드가 생성되어야 한다", async ({ page }) => {
|
|
||||||
await page.goto("/editor");
|
|
||||||
|
|
||||||
const canvas = page.getByTestId("editor-canvas");
|
|
||||||
|
|
||||||
await page.getByRole("button", { name: "Pricing 템플릿 추가" }).click();
|
|
||||||
|
|
||||||
await expect(canvas.getByText("Basic")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("₩9,900/월")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("Pro")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("₩29,900/월")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("Enterprise")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("문의")).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test("Testimonials 템플릿 버튼을 클릭하면 3개의 후기 카드가 생성되어야 한다", async ({ page }) => {
|
|
||||||
await page.goto("/editor");
|
|
||||||
|
|
||||||
const canvas = page.getByTestId("editor-canvas");
|
|
||||||
|
|
||||||
await page.getByRole("button", { name: "Testimonials 템플릿 추가" }).click();
|
|
||||||
|
|
||||||
await expect(canvas.getByText("이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("디자인을 잘 못해도 깔끔한 페이지를 만들 수 있어요.")).toBeVisible();
|
|
||||||
await expect(canvas.getByText("팀 전체가 만족하는 빌더입니다.")).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
test("Cmd/Ctrl+Z로 블록 추가를 Undo 하고 Cmd/Ctrl+Shift+Z로 Redo 할 수 있어야 한다", async ({ page }) => {
|
test("Cmd/Ctrl+Z로 블록 추가를 Undo 하고 Cmd/Ctrl+Shift+Z로 Redo 할 수 있어야 한다", async ({ page }) => {
|
||||||
await page.goto("/editor");
|
await page.goto("/editor");
|
||||||
|
|
||||||
@@ -433,53 +392,3 @@ test("ArrowUp/ArrowDown 키로 선택된 블록을 위/아래로 이동하며
|
|||||||
await page.keyboard.press("ArrowUp");
|
await page.keyboard.press("ArrowUp");
|
||||||
await expect(blocks.nth(1)).toHaveAttribute("data-selected", "true");
|
await expect(blocks.nth(1)).toHaveAttribute("data-selected", "true");
|
||||||
});
|
});
|
||||||
|
|
||||||
test("속성 패널의 블록 삭제 버튼으로 선택된 블록을 삭제할 수 있어야 한다", async ({ page }) => {
|
|
||||||
await page.goto("/editor");
|
|
||||||
|
|
||||||
const canvas = page.getByTestId("editor-canvas");
|
|
||||||
|
|
||||||
// 텍스트 블록 두 개를 추가한다.
|
|
||||||
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
||||||
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
||||||
|
|
||||||
const blocks = canvas.getByTestId("editor-block");
|
|
||||||
await expect(blocks).toHaveCount(2);
|
|
||||||
|
|
||||||
// 두 번째 블록을 선택한 다음, 속성 패널에서 "블록 삭제" 버튼을 클릭한다.
|
|
||||||
await blocks.nth(1).click();
|
|
||||||
await page.getByRole("button", { name: "블록 삭제" }).click();
|
|
||||||
|
|
||||||
// 하나의 블록만 남아야 하며, 첫 번째 블록이 남아 있어야 한다.
|
|
||||||
const remainingBlocks = canvas.getByTestId("editor-block");
|
|
||||||
await expect(remainingBlocks).toHaveCount(1);
|
|
||||||
await expect(remainingBlocks.nth(0)).toHaveAttribute("data-selected", "true");
|
|
||||||
});
|
|
||||||
|
|
||||||
test("Cmd/Ctrl+D 단축키로 선택된 블록을 복제할 수 있어야 한다", async ({ page }) => {
|
|
||||||
await page.goto("/editor");
|
|
||||||
|
|
||||||
const canvas = page.getByTestId("editor-canvas");
|
|
||||||
|
|
||||||
// 텍스트 블록을 하나 추가한다.
|
|
||||||
await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
|
|
||||||
|
|
||||||
let blocks = canvas.getByTestId("editor-block");
|
|
||||||
await expect(blocks).toHaveCount(1);
|
|
||||||
|
|
||||||
// 블록의 텍스트를 식별 가능한 값으로 바꾼다.
|
|
||||||
await blocks.nth(0).click();
|
|
||||||
const sidebarEditor = page.getByRole("textbox", { name: "선택한 텍스트 블록 내용" });
|
|
||||||
await sidebarEditor.fill("복제 대상 블록");
|
|
||||||
|
|
||||||
// Cmd/Ctrl + D 로 복제한다.
|
|
||||||
await page.keyboard.press("Meta+D");
|
|
||||||
|
|
||||||
// 블록이 두 개가 되어야 한다.
|
|
||||||
blocks = canvas.getByTestId("editor-block");
|
|
||||||
await expect(blocks).toHaveCount(2);
|
|
||||||
|
|
||||||
// 두 블록 모두 동일한 텍스트를 가지고 있어야 한다.
|
|
||||||
await expect(blocks.nth(0)).toContainText("복제 대상 블록");
|
|
||||||
await expect(blocks.nth(1)).toContainText("복제 대상 블록");
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -283,92 +283,6 @@ describe("editorStore", () => {
|
|||||||
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("FAQ 템플릿 섹션을 추가하면 질문/답변 쌍이 포함된 섹션이 생성되어야 한다", () => {
|
|
||||||
const store = createEditorStore();
|
|
||||||
|
|
||||||
store.getState().addFaqTemplateSection();
|
|
||||||
|
|
||||||
const { blocks, selectedBlockId } = store.getState();
|
|
||||||
|
|
||||||
const sectionBlocks = blocks.filter((b) => b.type === "section");
|
|
||||||
expect(sectionBlocks).toHaveLength(1);
|
|
||||||
|
|
||||||
const section = sectionBlocks[0] as any;
|
|
||||||
const columns = (section.props as any).columns;
|
|
||||||
expect(Array.isArray(columns)).toBe(true);
|
|
||||||
expect(columns.length).toBeGreaterThanOrEqual(1);
|
|
||||||
|
|
||||||
const firstColumnId = columns[0].id;
|
|
||||||
|
|
||||||
const textBlocks = blocks.filter((b) => b.type === "text") as any[];
|
|
||||||
|
|
||||||
// 최소 3개의 FAQ 항목(질문+답변 쌍)을 가정한다.
|
|
||||||
expect(textBlocks.length).toBeGreaterThanOrEqual(6);
|
|
||||||
|
|
||||||
textBlocks.forEach((tb) => {
|
|
||||||
expect(tb.sectionId).toBe(section.id);
|
|
||||||
expect(tb.columnId).toBe(firstColumnId);
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Pricing 템플릿 섹션을 추가하면 요금제 카드(플랜 이름/가격/설명)가 3개 생성되어야 한다", () => {
|
|
||||||
const store = createEditorStore();
|
|
||||||
|
|
||||||
store.getState().addPricingTemplateSection();
|
|
||||||
|
|
||||||
const { blocks, selectedBlockId } = store.getState();
|
|
||||||
|
|
||||||
const sectionBlocks = blocks.filter((b) => b.type === "section");
|
|
||||||
expect(sectionBlocks).toHaveLength(1);
|
|
||||||
|
|
||||||
const section = sectionBlocks[0] as any;
|
|
||||||
const columns = (section.props as any).columns;
|
|
||||||
expect(Array.isArray(columns)).toBe(true);
|
|
||||||
expect(columns.length).toBe(3);
|
|
||||||
|
|
||||||
const textBlocks = blocks.filter((b) => b.type === "text") as any[];
|
|
||||||
|
|
||||||
// 3개의 요금제에 대해 각 컬럼에 최소 2개 텍스트(플랜 이름 + 가격/설명)를 가정한다.
|
|
||||||
expect(textBlocks.length).toBeGreaterThanOrEqual(6);
|
|
||||||
|
|
||||||
textBlocks.forEach((tb) => {
|
|
||||||
expect(tb.sectionId).toBe(section.id);
|
|
||||||
expect(columns.some((col: any) => col.id === tb.columnId)).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("Testimonials 템플릿 섹션을 추가하면 후기(본문/작성자)가 3개 생성되어야 한다", () => {
|
|
||||||
const store = createEditorStore();
|
|
||||||
|
|
||||||
store.getState().addTestimonialsTemplateSection();
|
|
||||||
|
|
||||||
const { blocks, selectedBlockId } = store.getState();
|
|
||||||
|
|
||||||
const sectionBlocks = blocks.filter((b) => b.type === "section");
|
|
||||||
expect(sectionBlocks).toHaveLength(1);
|
|
||||||
|
|
||||||
const section = sectionBlocks[0] as any;
|
|
||||||
const columns = (section.props as any).columns;
|
|
||||||
expect(Array.isArray(columns)).toBe(true);
|
|
||||||
expect(columns.length).toBe(3);
|
|
||||||
|
|
||||||
const textBlocks = blocks.filter((b) => b.type === "text") as any[];
|
|
||||||
|
|
||||||
// 3개의 후기 카드에 대해 각 컬럼에 최소 2개 텍스트(본문 + 작성자)를 가정한다.
|
|
||||||
expect(textBlocks.length).toBeGreaterThanOrEqual(6);
|
|
||||||
|
|
||||||
textBlocks.forEach((tb) => {
|
|
||||||
expect(tb.sectionId).toBe(section.id);
|
|
||||||
expect(columns.some((col: any) => col.id === tb.columnId)).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(selectedBlockId).toBe(blocks[blocks.length - 1].id);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("undo 호출 시 마지막 변경 이전의 블록 상태로 되돌려야 한다", () => {
|
it("undo 호출 시 마지막 변경 이전의 블록 상태로 되돌려야 한다", () => {
|
||||||
const store = createEditorStore();
|
const store = createEditorStore();
|
||||||
|
|
||||||
@@ -410,61 +324,4 @@ describe("editorStore", () => {
|
|||||||
({ blocks } = store.getState());
|
({ blocks } = store.getState());
|
||||||
expect(blocks).toHaveLength(2);
|
expect(blocks).toHaveLength(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("removeBlock 호출 시 해당 블록이 삭제되고 선택 상태가 적절히 변경되어야 한다", () => {
|
|
||||||
const store = createEditorStore();
|
|
||||||
|
|
||||||
// 텍스트 블록 두 개를 추가한다.
|
|
||||||
store.getState().addTextBlock();
|
|
||||||
store.getState().addTextBlock();
|
|
||||||
|
|
||||||
let { blocks, selectedBlockId } = store.getState();
|
|
||||||
expect(blocks).toHaveLength(2);
|
|
||||||
|
|
||||||
const firstId = blocks[0].id;
|
|
||||||
const secondId = blocks[1].id;
|
|
||||||
|
|
||||||
// 두 번째 블록을 선택한 상태에서 삭제한다.
|
|
||||||
store.getState().selectBlock(secondId);
|
|
||||||
store.getState().removeBlock(secondId);
|
|
||||||
|
|
||||||
({ blocks, selectedBlockId } = store.getState());
|
|
||||||
|
|
||||||
// 두 번째 블록만 삭제되고 첫 번째 블록은 남아 있어야 한다.
|
|
||||||
expect(blocks).toHaveLength(1);
|
|
||||||
expect(blocks[0].id).toBe(firstId);
|
|
||||||
expect(selectedBlockId).toBe(firstId);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("duplicateBlock 호출 시 같은 내용의 블록이 같은 위치 정보로 복제되어야 한다", () => {
|
|
||||||
const store = createEditorStore();
|
|
||||||
|
|
||||||
// 섹션 + 텍스트 블록을 하나 만든다.
|
|
||||||
store.getState().addSectionBlock();
|
|
||||||
const { blocks: afterSection } = store.getState();
|
|
||||||
const sectionBlock = afterSection[0] as any;
|
|
||||||
|
|
||||||
store.getState().selectBlock(sectionBlock.id);
|
|
||||||
store.getState().addTextBlock();
|
|
||||||
|
|
||||||
let { blocks } = store.getState();
|
|
||||||
const original = blocks.find((b) => b.type === "text") as any;
|
|
||||||
|
|
||||||
expect(original).toBeTruthy();
|
|
||||||
|
|
||||||
// duplicateBlock 으로 복제한다.
|
|
||||||
store.getState().duplicateBlock(original.id);
|
|
||||||
|
|
||||||
({ blocks } = store.getState());
|
|
||||||
const textBlocks = blocks.filter((b) => b.type === "text") as any[];
|
|
||||||
|
|
||||||
// 텍스트 블록이 두 개가 되어야 한다.
|
|
||||||
expect(textBlocks).toHaveLength(2);
|
|
||||||
|
|
||||||
const [t1, t2] = textBlocks;
|
|
||||||
expect(t1.id).not.toBe(t2.id);
|
|
||||||
expect(t1.props).toEqual(t2.props);
|
|
||||||
expect(t2.sectionId).toBe(t1.sectionId);
|
|
||||||
expect(t2.columnId).toBe(t1.columnId);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user