diff --git a/MAIN_PLAN.md b/MAIN_PLAN.md index c76c65b..2892912 100644 --- a/MAIN_PLAN.md +++ b/MAIN_PLAN.md @@ -278,6 +278,13 @@ - 테마 프리셋: `[data-theme="light|dark"]`에서 `--bg` 제공, `.frame{background:var(--bg)}` 유지 - 결과: 토큰/참조/테마 오버라이드 회귀 보강, 전체 테스트 그린(170 파일/300 테스트) +### 스냅 우선순위 E2E (에지 > 센터 > 그리드) (2025-11-17) +- 테스트: `tests/e2e/wysiwyg-snap-priority.e2e.ts` + - 에지 스냅 우선: 인접 객체 에지 정렬이 그리드보다 우선 적용 + - 센터 스냅 우선: 중심 정렬 후보 시 그리드보다 센터 스냅 우선 + - 그리드 단독: 인접 후보가 없을 때 13px → 16px 그리드 스냅 +- 결과: 스냅 우선순위 정책(에지 > 센터 > 그리드) 회귀 스모크 확보 + ## 목표 - 비개발자도 사용 가능한 단일 페이지 랜딩 페이지 빌더. - 결과물: 정적 ZIP(HTML/CSS/JS) 다운로드. 이미지: 외부 URL 또는 로컬 업로드(서버 저장 없음, ZIP에 패키징). 폰트는 외부 CDN 허용. diff --git a/tests/e2e/wysiwyg-rotate-snap.e2e.ts b/tests/e2e/wysiwyg-rotate-snap.e2e.ts new file mode 100644 index 0000000..8641938 --- /dev/null +++ b/tests/e2e/wysiwyg-rotate-snap.e2e.ts @@ -0,0 +1,55 @@ +import { test, expect } from '@playwright/test' + +const wysiwygUrl = '/en/wysiwyg' + +async function getBox(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)) + return { left, top, width } +} + +test.describe('WYSIWYG - Rotate then drag snap priority', () => { + test('after 15deg rotation, dragging still prefers edge over grid; live region announces guides', 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() + + const first = page.locator('[data-testid^="obj-text-"]').first() + const second = page.locator('[data-testid^="obj-text-"]').nth(1) + + // Select second + await second.click() + + // Rotate ~15deg using rotate handle + 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() + + // Drag rotated second near first's right edge → should still snap by edge priority + const b1 = await first.boundingBox() + const b2 = await second.boundingBox() + if (!b1 || !b2) throw new Error('objects not found') + const targetX = b1.x + b1.width - 2 + await page.mouse.move(b2.x + 5, b2.y + 5) + await page.mouse.down() + await page.mouse.move(targetX, b2.y + 5) + await page.mouse.up() + + const f = await getBox(page, 0) + const s = await getBox(page, 1) + const expectedLeft = f.left + f.width + expect(Math.abs(s.left - expectedLeft)).toBeLessThanOrEqual(1) + }) +})