E2E: 멀티선택 회전 후 그룹 드래그 스냅 유지 및 라이브리전 검증 추가

MAIN_PLAN.md

@@ -278,6 +278,19 @@
   - 테마 프리셋: `[data-theme="light|dark"]`에서 `--bg` 제공, `.frame{background:var(--bg)}` 유지
 - 결과: 토큰/참조/테마 오버라이드 회귀 보강, 전체 테스트 그린(170 파일/300 테스트)
 
+### 스냅 우선순위 E2E (에지 > 센터 > 그리드) (2025-11-17)
+- 테스트: `tests/e2e/wysiwyg-snap-priority.e2e.ts`
+  - 에지 스냅 우선: 인접 객체 에지 정렬이 그리드보다 우선 적용
+  - 센터 스냅 우선: 중심 정렬 후보 시 그리드보다 센터 스냅 우선
+  - 그리드 단독: 인접 후보가 없을 때 13px → 16px 그리드 스냅
+- 결과: 스냅 우선순위 정책(에지 > 센터 > 그리드) 회귀 스모크 확보
+
+### 회전 후 스냅 유지 E2E (에지 > 그리드) (2025-11-17)
+- 테스트: `tests/e2e/wysiwyg-rotate-snap.e2e.ts`
+  - 객체를 15° 회전 후 드래그해도 에지 스냅이 그리드보다 우선 적용됨 검증
+  - 드래그 중 라이브리전 가이드 텍스트 노출 확인(가이드 x/y)
+- 결과: 회전 상태에서도 스냅 우선순위 일관성 확보, 라이브리전 가이드 동작 스모크 통과
+
 ## 목표
 - 비개발자도 사용 가능한 단일 페이지 랜딩 페이지 빌더.
 - 결과물: 정적 ZIP(HTML/CSS/JS) 다운로드. 이미지: 외부 URL 또는 로컬 업로드(서버 저장 없음, ZIP에 패키징). 폰트는 외부 CDN 허용.

tests/e2e/wysiwyg-group-rotate-drag.e2e.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+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 rotate then drag with snap and live region', () => {
+  test('after rotating multiselect, dragging group by 13px snaps to 16px; live region says 선택 2개', 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 cbox = await canvas.boundingBox()
+    if (!cbox) throw new Error('canvas not found')
+    await page.mouse.move(cbox.x + 40, cbox.y + 40)
+    await page.mouse.down()
+    await page.mouse.move(cbox.x + 260, cbox.y + 160)
+    await page.mouse.up()
+
+    const live = page.getByTestId('aria-live')
+    await expect(live).toContainText(/선택\s*2개/)
+
+    // Rotate ~15deg via 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)
+    await expect(live).toContainText(/가이드\s*x=|y=/)
+    await page.mouse.up()
+
+    const before = await getLefts(page)
+
+    // Drag group by ~13px on X; expect grid snap to 16
+    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 + 5 + 13, tbox.y + 5)
+    await page.mouse.up()
+
+    const after = await getLefts(page)
+    const dx = after[1] - before[1]
+    expect(dx).toBe(16)
+    expect(after[0] - before[0]).toBe(16)
+  })
+})

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)
+  })
+})

tests/e2e/wysiwyg-snap-priority.e2e.ts

@@ -0,0 +1,98 @@
+import { test, expect } from '@playwright/test'
+
+const wysiwygUrl = '/en/wysiwyg'
+
+// Helper to read left/top/width from inline styles
+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 - Snap priority (edge > center > grid)', () => {
+  test('dragging near another object prefers edge snap over grid', async ({ page }) => {
+    await page.goto(wysiwygUrl)
+    const canvas = page.getByTestId('wysiwyg-canvas')
+    await expect(canvas).toBeVisible()
+
+    // Add two text objects
+    const addText = page.getByRole('button', { name: /^Add Text$/i })
+    await addText.click()
+    await addText.click()
+
+    // Marquee select the second to get its bbox and then drag it near the first one's right edge
+    const first = page.locator('[data-testid^="obj-text-"]').first()
+    const second = page.locator('[data-testid^="obj-text-"]').nth(1)
+
+    const b1 = await first.boundingBox()
+    const b2 = await second.boundingBox()
+    if (!b1 || !b2) throw new Error('objects not found')
+
+    // Drag second so that its left aligns to first.right (edge snapping scenario)
+    // move handle point from second.x+5 to target x = first.right - 2 (close enough to trigger snap)
+    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()
+
+    // Read inline left/width to verify alignment: second.left ~= first.left + first.width
+    const s = await getBox(page, 1)
+    const f = await getBox(page, 0)
+    const expectedLeft = f.left + f.width
+    // Allow small tolerance (±1) due to rounding during drag
+    expect(Math.abs(s.left - expectedLeft)).toBeLessThanOrEqual(1)
+  })
+
+  test('dragging near another object prefers center snap over 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()
+
+    const first = page.locator('[data-testid^="obj-text-"]').first()
+    const second = page.locator('[data-testid^="obj-text-"]').nth(1)
+    const b1 = await first.boundingBox()
+    const b2 = await second.boundingBox()
+    if (!b1 || !b2) throw new Error('objects not found')
+
+    // Target the center alignment: move second so its centerX ~= first.centerX
+    const firstCenterX = b1.x + b1.width / 2
+    await page.mouse.move(b2.x + b2.width / 2, b2.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(firstCenterX, b2.y + 5)
+    await page.mouse.up()
+
+    const f = await getBox(page, 0)
+    const s = await getBox(page, 1)
+    const sCenter = s.left + Math.round((await second.evaluate((n)=>parseInt((n as HTMLElement).style.width||'0',10))) / 2)
+    expect(Math.abs(sCenter - (f.left + f.width / 2))).toBeLessThanOrEqual(1)
+  })
+
+  test('when no nearby objects, grid snapping applies (13px → 16px)', 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 obj = page.locator('[data-testid^="obj-text-"]').first()
+    const b = await obj.boundingBox()
+    if (!b) throw new Error('object not found')
+
+    const before = await getBox(page, 0)
+    await page.mouse.move(b.x + 5, b.y + 5)
+    await page.mouse.down()
+    await page.mouse.move(b.x + 5 + 13, b.y + 5)
+    await page.mouse.up()
+
+    const after = await getBox(page, 0)
+    expect(after.left - before.left).toBe(16)
+  })
+})