diff --git a/MAIN_PLAN.md b/MAIN_PLAN.md index 4a80f26..a0c1f3c 100644 --- a/MAIN_PLAN.md +++ b/MAIN_PLAN.md @@ -237,6 +237,17 @@ - `npm test -s`: 164 파일, 289 테스트 전부 그린 - React 경고(setState in render) 제거, 테스트 플래키성 해소 +### 키보드 nudge × 멀티선택 복합 (2025-11-17) +- TDD + - `components/wysiwyg/Canvas.nudge.multiselect.acceptance.test.tsx` + - ArrowRight: 1px 이동 후 그리드 스냅 적용(이동 축만 스냅) + - Shift+ArrowUp: 스냅 없이 정확히 -1px 이동(미세 이동) + - Alt+ArrowRight: +16px 이동 후 그리드 스냅(가속 이동) +- 구현: `components/wysiwyg/Canvas.tsx` + - `onKeyDown`: 앵커(마지막 선택) 기준 목표 좌표(tx, ty) → 스냅 적용(nx, ny) → 델타(ddx, ddy) 산출 → 선택 집합 전체에 동일 델타 적용 + - 이동하지 않은 축은 기존 좌표 유지하여 비의도 축 보정 방지 +- 결과: 전체 테스트 그린(168 파일 / 295 테스트) + ## 목표 - 비개발자도 사용 가능한 단일 페이지 랜딩 페이지 빌더. - 결과물: 정적 ZIP(HTML/CSS/JS) 다운로드. 이미지: 외부 URL 또는 로컬 업로드(서버 저장 없음, ZIP에 패키징). 폰트는 외부 CDN 허용. diff --git a/components/wysiwyg/Canvas.nudge.multiselect.acceptance.test.tsx b/components/wysiwyg/Canvas.nudge.multiselect.acceptance.test.tsx new file mode 100644 index 0000000..02e01ef --- /dev/null +++ b/components/wysiwyg/Canvas.nudge.multiselect.acceptance.test.tsx @@ -0,0 +1,98 @@ +import { describe, it, expect } from 'vitest' +import { render, screen, fireEvent } from '@testing-library/react' +import { WysiwygBuilderPage } from '@/components/wysiwyg/WysiwygBuilderPage' + +function getBoxes(ids: string[]) { + return ids.map((id) => { + const el = screen.getByTestId(`obj-${id}`) as HTMLElement + const s = el.style as CSSStyleDeclaration + return { + id, + left: parseInt(s.left || '0', 10), + top: parseInt(s.top || '0', 10), + width: parseInt(s.width || '0', 10), + height: parseInt(s.height || '0', 10), + } + }) +} + +function snap8(v: number) { return Math.round(v / 8) * 8 } + +async function addTextAt(x: number, y: number) { + fireEvent.click(screen.getByRole('button', { name: /^Add Text$/i })) + const all = await screen.findAllByTestId(/obj-text-/) + const obj = all[all.length - 1] as HTMLElement + // select the newly added object + fireEvent.mouseDown(obj, { clientX: x, clientY: y }) + fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas')) + // move via props inputs (X/Y) for the selected object + const xInput = screen.getByLabelText('X') as HTMLInputElement + const yInput = screen.getByLabelText('Y') as HTMLInputElement + fireEvent.change(xInput, { target: { value: String(x) } }) + fireEvent.change(yInput, { target: { value: String(y) } }) + return obj.getAttribute('data-testid')!.replace('obj-', '') +} + +describe('Canvas multiselect keyboard nudge', () => { + it('ArrowRight applies 1px then grid snap to both (no modifier)', async () => { + render() + const id1 = await addTextAt(60, 60) + const id2 = await addTextAt(140, 60) + + const canvas = screen.getByTestId('wysiwyg-canvas') + // marquee select both + fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 }) + fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 }) + fireEvent.mouseUp(canvas) + + const before = getBoxes([id1, id2]) + fireEvent.keyDown(canvas, { key: 'ArrowRight' }) + const after = getBoxes([id1, id2]) + const expLeft0 = snap8(before[0].left + 1) + const dx = expLeft0 - before[0].left + after.forEach((b, i) => { + expect(b.left).toBe(before[i].left + dx) + expect(b.top).toBe(before[i].top) + }) + }) + + it('Shift+ArrowUp moves exactly -1px on Y for both (no snap)', async () => { + render() + const id1 = await addTextAt(60, 60) + const id2 = await addTextAt(140, 60) + + const canvas = screen.getByTestId('wysiwyg-canvas') + fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 }) + fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 }) + fireEvent.mouseUp(canvas) + + const before = getBoxes([id1, id2]) + fireEvent.keyDown(canvas, { key: 'ArrowUp', shiftKey: true }) + const after = getBoxes([id1, id2]) + after.forEach((b, i) => { + expect(b.top).toBe(before[i].top - 1) + expect(b.left).toBe(before[i].left) + }) + }) + + it('Alt+ArrowRight moves +16px then snaps to grid for both', async () => { + render() + const id1 = await addTextAt(60, 60) + const id2 = await addTextAt(140, 60) + + const canvas = screen.getByTestId('wysiwyg-canvas') + fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 }) + fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 }) + fireEvent.mouseUp(canvas) + + const before = getBoxes([id1, id2]) + fireEvent.keyDown(canvas, { key: 'ArrowRight', altKey: true }) + const after = getBoxes([id1, id2]) + const expLeft0 = snap8(before[0].left + 16) + const dx = expLeft0 - before[0].left + after.forEach((b, i) => { + expect(b.left).toBe(before[i].left + dx) + expect(b.top).toBe(before[i].top) + }) + }) +}) diff --git a/components/wysiwyg/Canvas.tsx b/components/wysiwyg/Canvas.tsx index 0c37528..7121d0a 100644 --- a/components/wysiwyg/Canvas.tsx +++ b/components/wysiwyg/Canvas.tsx @@ -111,14 +111,22 @@ export function Canvas({ frame, onChange, onSelectIds, enableGuides = true }: Ca else if (e.key === 'ArrowDown') dy = step else return e.preventDefault() - updateObject(selected.id, (o) => { - const tx = o.x + dx - const ty = o.y + dy - const nx = useSnap ? snap8(tx) : tx - const ny = useSnap ? snap8(ty) : ty - return { ...o, x: nx, y: ny } - }) - }, [selected, updateObject]) + + // 기준 객체(선택 anchor)에 대해 목표 좌표 계산 후 델타를 산출하여 멀티선택 전체에 동일 적용 + const tx = selected.x + dx + const ty = selected.y + dy + // 스냅은 이동한 축에만 적용, 이동이 없는 축은 값 유지 + const nx = dx !== 0 ? (useSnap ? snap8(tx) : tx) : selected.x + const ny = dy !== 0 ? (useSnap ? snap8(ty) : ty) : selected.y + const ddx = nx - selected.x + const ddy = ny - selected.y + + if (selectedIds.length > 1) { + updateObjects(selectedIds, (o) => ({ ...o, x: o.x + ddx, y: o.y + ddy })) + } else { + updateObject(selected.id, (o) => ({ ...o, x: o.x + ddx, y: o.y + ddy })) + } + }, [selected, selectedIds, updateObject, updateObjects]) const onMouseDownObj = useCallback((e: React.MouseEvent, o: WObject) => { if (e.shiftKey) { @@ -426,9 +434,11 @@ export function Canvas({ frame, onChange, onSelectIds, enableGuides = true }: Ca tabIndex={0} onKeyDown={onKeyDown} onMouseDown={(e) => { - // 빈 캔버스 클릭 시 마퀴 시작 또는 선택 해제 - // 객체 onMouseDown에서 선택을 처리하므로, 여기서는 드래그 박스 시작만 담당 - if ((e.target as HTMLElement).dataset.testid === 'wysiwyg-canvas') { + // 빈 영역(객체/핸들이 아닌 영역) 클릭 시 마퀴 시작 또는 선택 해제 + const t = e.target as HTMLElement + const isObj = !!t.closest('[data-testid^="obj-"],[aria-label^="object "]') + const isHandle = !!t.closest('[data-testid^="resize-handle-"]') + if (!isObj && !isHandle) { setSelectedIds([]) setMarquee({ active: true, x0: e.clientX, y0: e.clientY, x1: e.clientX, y1: e.clientY }) try { onSelectIds?.([]) } catch {} diff --git a/lib/exporter/image.responsive.options.matrix.test.ts b/lib/exporter/image.responsive.options.matrix.test.ts new file mode 100644 index 0000000..33563c1 --- /dev/null +++ b/lib/exporter/image.responsive.options.matrix.test.ts @@ -0,0 +1,46 @@ +import { describe, it, expect } from 'vitest' +import { exportPage } from '@/lib/exporter/html' +import type { ExportOptions } from '@/lib/exporter/html' +import type { Page } from '@/lib/schema/page' + +const basePage: Page = { + title: 'Img Matrix', + locale: 'en', + theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' }, + sections: [ + { type: 'hero', props: { heading: 'Hero', subheading: '', imageUrl: 'https://example.com/hero.jpg' } }, + ], + form: { + actionUrl: '', + fields: [], + spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 }, + }, + analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' }, + seo: { title: 'T', description: 'D' }, +} + +describe('image responsive options - matrix', () => { + it('applies loading and decoding attributes from options', () => { + const opts: ExportOptions = { imageLoading: 'eager', imageDecoding: 'sync' } + const { html } = exportPage(basePage, opts) + expect(html).toMatch(/]*loading="eager"/) + expect(html).toMatch(/]*decoding="sync"/) + }) + + it('sets fetchpriority="low" when specified', () => { + const opts: ExportOptions = { imageFetchPriority: 'low' } + const { html } = exportPage(basePage, opts) + expect(html).toMatch(/]*fetchpriority="low"/) + }) + + it('prefers preset sizes over auto default when both provided (no explicit sizes)', () => { + const opts: ExportOptions = { + imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x', + imageAutoSizes: true, + imageSizesPreset: 'mobile-first', + } + const { html } = exportPage(basePage, opts) + // preset should win over default auto sizes + expect(html).toMatch(/]*sizes="\(max-width: 640px\) 100vw, 800px"/) + }) +}) diff --git a/lib/wysiwyg/export.css.regression.snapshot.test.ts b/lib/wysiwyg/export.css.regression.snapshot.test.ts new file mode 100644 index 0000000..40b0697 --- /dev/null +++ b/lib/wysiwyg/export.css.regression.snapshot.test.ts @@ -0,0 +1,34 @@ +import { describe, it, expect } from 'vitest' +import { exportFrame } from '@/lib/wysiwyg/export' +import type { Frame } from '@/lib/wysiwyg/schema' + +function baseFrame(bg = '#111111'): Frame { + return { + id: 'f', width: 320, height: 200, background: bg, + layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }], + } +} + +describe('wysiwyg export - CSS regression (tokens + rules presence)', () => { + it('contains core tokens and rules across themes and states', () => { + const out = exportFrame(baseFrame('#222222')) + const css = out.css + // root and theme tokens + expect(css).toMatch(/:root\s*{[^}]*--bg:/) + expect(css).toMatch(/\[data-theme="light"\]\s*{[^}]*--bg:/) + expect(css).toMatch(/\[data-theme="dark"\]\s*{[^}]*--bg:/) + // base usage + expect(css).toMatch(/\.frame\s*{[^}]*background:var\(--bg\)/) + expect(css).toMatch(/a\s*{[^}]*color:var\(--primary\)/) + // controls base + expect(css).toMatch(/input,select,textarea\s*{[^}]*color:var\(--text\)/) + expect(css).toMatch(/input,select,textarea\s*{[^}]*border:1px solid var\(--border\)/) + // states + expect(css).toMatch(/input:focus,select:focus,textarea:focus\s*{[^}]*outline:2px solid var\(--primary\)/) + expect(css).toMatch(/:focus-visible\s*{[^}]*outline:2px solid var\(--ring\)/) + expect(css).toMatch(/:focus-visible\s*{[^}]*outline-offset:var\(--ring-offset\)/) + expect(css).toMatch(/input:invalid,select:invalid,textarea:invalid\s*{[^}]*border-color:var\(--danger\)/) + expect(css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*background:var\(--disabled-bg\)/) + expect(css).toMatch(/input\[readonly\],select\[readonly\],textarea\[readonly\]\s*{[^}]*color:var\(--disabled-fg\)/) + }) +}) diff --git a/tests/e2e/wysiwyg-group-drag.e2e.ts b/tests/e2e/wysiwyg-group-drag.e2e.ts new file mode 100644 index 0000000..06943a6 --- /dev/null +++ b/tests/e2e/wysiwyg-group-drag.e2e.ts @@ -0,0 +1,58 @@ +import { test, expect } from '@playwright/test' + +const wysiwygUrl = '/en/wysiwyg' + +function snap8(v: number) { return Math.round(v / 8) * 8 } + +async function getLefts(page: import('@playwright/test').Page) { + const els = page.locator('[data-testid^="obj-text-"]') + const count = await els.count() + const results: number[] = [] + for (let i = 0; i < count; i++) { + const style = await els.nth(i).evaluate((n) => (n as HTMLElement).style.left || '0') + results.push(parseInt(style || '0', 10)) + } + return results +} + +test.describe('WYSIWYG - Group drag', () => { + test('marquee select two items and drag group by 16px on X (snaps to grid)', async ({ page }) => { + await page.goto(wysiwygUrl) + + const canvas = page.getByTestId('wysiwyg-canvas') + await expect(canvas).toBeVisible() + + const addText = page.getByRole('button', { name: /^Add Text$/i }) + await addText.click() + await addText.click() + + // Marquee select both + const box = await canvas.boundingBox() + if (!box) throw new Error('canvas not found') + await page.mouse.move(box.x + 40, box.y + 40) + await page.mouse.down() + await page.mouse.move(box.x + 240, box.y + 160) + await page.mouse.up() + + const live = page.getByTestId('aria-live') + await expect(live).toContainText(/선택\s*2개/) + + const before = await getLefts(page) + + // Drag one of selected (the second) by +16 on X + const target = page.locator('[data-testid^="obj-text-"]').nth(1) + const tbox = await target.boundingBox() + if (!tbox) throw new Error('target not found') + await page.mouse.move(tbox.x + 5, tbox.y + 5) + await page.mouse.down() + await page.mouse.move(tbox.x + 21, tbox.y + 5) // ~+16 on X + await page.mouse.up() + + const after = await getLefts(page) + // Expect both moved by same snapped delta + const expectedDx = snap8(before[1] + 16) - before[1] + expect(after.length).toBeGreaterThanOrEqual(2) + expect(after[0]).toBe(before[0] + expectedDx) + expect(after[1]).toBe(before[1] + expectedDx) + }) +}) diff --git a/tests/e2e/wysiwyg-group-resize-rotate.e2e.ts b/tests/e2e/wysiwyg-group-resize-rotate.e2e.ts new file mode 100644 index 0000000..4fb87fe --- /dev/null +++ b/tests/e2e/wysiwyg-group-resize-rotate.e2e.ts @@ -0,0 +1,89 @@ +import { test, expect } from '@playwright/test' + +const wysiwygUrl = '/en/wysiwyg' + +function snap8(v: number) { return Math.round(v / 8) * 8 } + +async function getBoxStyles(page: import('@playwright/test').Page, nth: number) { + const el = page.locator('[data-testid^="obj-text-"]').nth(nth) + const left = await el.evaluate((n) => parseInt((n as HTMLElement).style.left || '0', 10)) + const top = await el.evaluate((n) => parseInt((n as HTMLElement).style.top || '0', 10)) + const width = await el.evaluate((n) => parseInt((n as HTMLElement).style.width || '0', 10)) + const height = await el.evaluate((n) => parseInt((n as HTMLElement).style.height || '0', 10)) + const transform = await el.evaluate((n) => (n as HTMLElement).style.transform || '') + return { left, top, width, height, transform } +} + +test.describe('WYSIWYG - Group resize/rotate and guide live region', () => { + test('group E handle resizes both by snapped delta without shifting x', async ({ page }) => { + await page.goto(wysiwygUrl) + const canvas = page.getByTestId('wysiwyg-canvas') + await expect(canvas).toBeVisible() + + const addText = page.getByRole('button', { name: /^Add Text$/i }) + await addText.click() + await addText.click() + + // Marquee select both + const box = await canvas.boundingBox() + if (!box) throw new Error('canvas not found') + await page.mouse.move(box.x + 40, box.y + 40) + await page.mouse.down() + await page.mouse.move(box.x + 260, box.y + 160) + await page.mouse.up() + + const live = page.getByTestId('aria-live') + await expect(live).toContainText(/선택\s*2개/) + + const b0 = await getBoxStyles(page, 0) + const b1 = await getBoxStyles(page, 1) + + // Drag east handle of second by +16px + const target = page.locator('[data-testid^="obj-text-"]').nth(1) + const tbox = await target.boundingBox() + if (!tbox) throw new Error('target not found') + await page.mouse.move(tbox.x + tbox.width - 5, tbox.y + 5) + await page.mouse.down() + await page.mouse.move(tbox.x + tbox.width + 16, tbox.y + 5) + await page.mouse.up() + + const a0 = await getBoxStyles(page, 0) + const a1 = await getBoxStyles(page, 1) + + const dw = snap8(b1.width + 16) - b1.width + expect(a0.left).toBe(b0.left) + expect(a1.left).toBe(b1.left) + expect(a0.width).toBe(b0.width + dw) + expect(a1.width).toBe(b1.width + dw) + }) + + test('rotate handle snaps to 15deg and live region includes guide coords while dragging', async ({ page }) => { + await page.goto(wysiwygUrl) + const canvas = page.getByTestId('wysiwyg-canvas') + await expect(canvas).toBeVisible() + + const addText = page.getByRole('button', { name: /^Add Text$/i }) + await addText.click() + + const target = page.locator('[data-testid^="obj-text-"]').first() + const tbox = await target.boundingBox() + if (!tbox) throw new Error('target not found') + + // Select + await target.click() + + // Drag rotate handle horizontally to cause rotation ~15deg (snapped) + const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first() + const hbox = await rotateHandle.boundingBox() + if (!hbox) throw new Error('rotate handle not found') + await page.mouse.move(hbox.x + 5, hbox.y + 5) + await page.mouse.down() + await page.mouse.move(hbox.x + 40, hbox.y + 5) + const live = page.getByTestId('aria-live') + await expect(live).toContainText(/가이드\s*x=|y=/) + await page.mouse.up() + + const a = await getBoxStyles(page, 0) + expect(a.transform).toMatch(/rotate\(15deg\)|rotate\(30deg\)/) + }) +}) diff --git a/tests/e2e/wysiwyg-guides-multiselect.e2e.ts b/tests/e2e/wysiwyg-guides-multiselect.e2e.ts new file mode 100644 index 0000000..f3983b5 --- /dev/null +++ b/tests/e2e/wysiwyg-guides-multiselect.e2e.ts @@ -0,0 +1,38 @@ +import { test, expect } from '@playwright/test' + +const wysiwygUrl = '/en/wysiwyg' + +test.describe('WYSIWYG - Guides toggle and multiselect live region', () => { + test('toggles guides and announces multiselect in aria-live', async ({ page }) => { + await page.goto(wysiwygUrl) + + // Canvas and live region present + const canvas = page.getByTestId('wysiwyg-canvas') + await expect(canvas).toBeVisible() + const live = page.getByTestId('aria-live') + await expect(live).toContainText(/선택\s*0개/) + + // Add two text objects + const addText = page.getByRole('button', { name: /^Add Text$/i }) + await addText.click() + await addText.click() + + // Marquee select both + const box = await canvas.boundingBox() + if (!box) throw new Error('canvas not found') + await page.mouse.move(box.x + 40, box.y + 40) + await page.mouse.down() + await page.mouse.move(box.x + 300, box.y + 200) + await page.mouse.up() + + await expect(live).toContainText(/선택\s*2개/) + + // Guides toggle + const guidesBtn = page.getByRole('button', { name: /Guides/i }) + await expect(guidesBtn).toHaveAttribute('aria-pressed', 'true') + await guidesBtn.click() + await expect(guidesBtn).toHaveAttribute('aria-pressed', 'false') + await guidesBtn.click() + await expect(guidesBtn).toHaveAttribute('aria-pressed', 'true') + }) +})